From 81322664ea7c2b72d95acef7f4871e3cffd97301 Mon Sep 17 00:00:00 2001
From: Malcolm Lockyer <segfault88@users.noreply.github.com>
Date: Thu, 7 Nov 2024 09:04:24 +1300
Subject: [PATCH] fix(ui): kubernetes create from manifest page misalignments
 and incorrect loading icon [R8S-68] (#88)

---
 .../helm/helm-templates/helm-templates.html   |  3 +--
 app/kubernetes/views/deploy/deploy.html       | 21 +++++++++++--------
 app/portainer/react/components/index.ts       |  5 +++++
 .../views/stacks/create/createstack.html      | 18 +++++++++-------
 .../components/InlineLoader/InlineLoader.tsx  |  9 +++-----
 5 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/app/kubernetes/components/helm/helm-templates/helm-templates.html b/app/kubernetes/components/helm/helm-templates/helm-templates.html
index 3b2ed2e4e..a5f8dc960 100644
--- a/app/kubernetes/components/helm/helm-templates/helm-templates.html
+++ b/app/kubernetes/components/helm/helm-templates/helm-templates.html
@@ -41,8 +41,7 @@
             Show custom values
           </button>
           <span class="small interactive vertical-center" ng-if="$ctrl.state.loadingValues" role="status">
-            <pr-icon icon="'refresh-cw'" class="mr-1"></pr-icon>
-            Loading values.yaml...
+            <inline-loader children="'Loading values.yaml...'" />
           </span>
           <button ng-if="$ctrl.state.showCustomValues" class="btn btn-xs btn-default vertical-center !ml-0 mr-2" ng-click="$ctrl.state.showCustomValues = false;">
             <pr-icon icon="'minus'" class="vertical-center"></pr-icon>
diff --git a/app/kubernetes/views/deploy/deploy.html b/app/kubernetes/views/deploy/deploy.html
index 79c3c18c9..5b14b3585 100644
--- a/app/kubernetes/views/deploy/deploy.html
+++ b/app/kubernetes/views/deploy/deploy.html
@@ -31,7 +31,7 @@
                     <portainer-tooltip message="'If you have defined namespaces in your deployment file turning this on will enforce the use of those only in the deployment'">
                     </portainer-tooltip>
                   </label>
-                  <div class="col-sm-8 vertical-center pt-3">
+                  <div class="col-sm-8 vertical-center pt-1">
                     <label class="switch">
                       <input type="checkbox" name="toggle_logo" ng-model="ctrl.formValues.namespace_toggle" data-cy="use-namespce-from-menifest" />
                       <span class="slider round"></span>
@@ -135,14 +135,17 @@
                   ></custom-templates-variables-field>
                 </div>
 
-                <span ng-if="ctrl.state.BuildMethod === ctrl.BuildMethods.CUSTOM_TEMPLATE && ctrl.state.templateId && ctrl.state.templateLoadFailed">
-                  <p class="small vertical-center text-danger mb-5" ng-if="ctrl.currentUser.isAdmin || ctrl.currentUser.id === ctrl.state.template.CreatedByUserId">
-                    <pr-icon icon="'alert-triangle'" mode="'danger'" size="'md'" feather="true"></pr-icon>Custom template could not be loaded, please
-                    <a ui-sref="kubernetes.templates.custom.edit({id: ctrl.state.templateId})">click here</a> for configuration.</p
-                  >
-                  <p class="small vertical-center text-danger mb-5" ng-if="!(ctrl.currentUser.isAdmin || ctrl.currentUser.id === ctrl.state.template.CreatedByUserId)">
-                    <pr-icon icon="'alert-triangle'" mode="'danger'" size="'md'" feather="true"></pr-icon>Custom template could not be loaded, please contact your administrator.</p
-                  >
+                <span ng-if="ctrl.state.BuildMethod === ctrl.BuildMethods.CUSTOM_TEMPLATE && ctrl.state.templateId && ctrl.state.templateLoadFailed" class="row">
+                  <span class="col-sm-offset-3 col-lg-offset-2 col-sm-8">
+                    <p class="small vertical-center text-danger mb-5" ng-if="ctrl.currentUser.isAdmin || ctrl.currentUser.id === ctrl.state.template.CreatedByUserId">
+                      <pr-icon icon="'alert-triangle'" mode="'danger'" size="'md'" feather="true"></pr-icon>Custom template could not be loaded, please
+                      <a ui-sref="kubernetes.templates.custom.edit({id: ctrl.state.templateId})">click here</a> for configuration.</p
+                    >
+                    <p class="small vertical-center text-danger mb-5" ng-if="!(ctrl.currentUser.isAdmin || ctrl.currentUser.id === ctrl.state.template.CreatedByUserId)">
+                      <pr-icon icon="'alert-triangle'" mode="'danger'" size="'md'" feather="true"></pr-icon>Custom template could not be loaded, please contact your
+                      administrator.</p
+                    >
+                  </span>
                 </span>
 
                 <!-- editor -->
diff --git a/app/portainer/react/components/index.ts b/app/portainer/react/components/index.ts
index fe51675cd..db071b5f5 100644
--- a/app/portainer/react/components/index.ts
+++ b/app/portainer/react/components/index.ts
@@ -38,6 +38,7 @@ import { BETeaserButton } from '@@/BETeaserButton';
 import { CodeEditor } from '@@/CodeEditor';
 import { HelpLink } from '@@/HelpLink';
 import { TextTip } from '@@/Tip/TextTip';
+import { InlineLoader } from '@@/InlineLoader/InlineLoader';
 
 import { fileUploadField } from './file-upload-field';
 import { switchField } from './switch-field';
@@ -244,6 +245,10 @@ export const ngModule = angular
       'childrenWrapperClassName',
     ])
   )
+  .component(
+    'inlineLoader',
+    r2a(InlineLoader, ['children', 'className', 'size'])
+  )
   .component(
     'groupAssociationTable',
     r2a(withReactQuery(GroupAssociationTable), [
diff --git a/app/portainer/views/stacks/create/createstack.html b/app/portainer/views/stacks/create/createstack.html
index 4ddd88261..4674c6e3a 100644
--- a/app/portainer/views/stacks/create/createstack.html
+++ b/app/portainer/views/stacks/create/createstack.html
@@ -107,14 +107,16 @@
                 on-change="(onChangeTemplateVariables)"
               ></custom-templates-variables-field>
 
-              <span ng-if="state.Method === 'template' && state.selectedTemplateId && state.templateLoadFailed">
-                <p class="small vertical-center text-danger mb-5" ng-if="currentUser.isAdmin || currentUser.id === state.selectedTemplate.CreatedByUserId">
-                  <pr-icon icon="'alert-triangle'" mode="'danger'" size="'md'" feather="true"></pr-icon>Custom template could not be loaded, please
-                  <a ui-sref="docker.templates.custom.edit({id: state.selectedTemplateId})">click here</a> for configuration.</p
-                >
-                <p class="small vertical-center text-danger mb-5" ng-if="!(currentUser.isAdmin || currentUser.id === state.selectedTemplate.CreatedByUserId)">
-                  <pr-icon icon="'alert-triangle'" mode="'danger'" size="'md'" feather="true"></pr-icon>Custom template could not be loaded, please contact your administrator.</p
-                >
+              <span ng-if="state.Method === 'template' && state.selectedTemplateId && state.templateLoadFailed" class="row">
+                <span class="col-sm-offset-3 col-lg-offset-2 col-sm-8">
+                  <p class="small vertical-center text-danger mb-5" ng-if="currentUser.isAdmin || currentUser.id === state.selectedTemplate.CreatedByUserId">
+                    <pr-icon icon="'alert-triangle'" mode="'danger'" size="'md'" feather="true"></pr-icon>Custom template could not be loaded, please
+                    <a ui-sref="docker.templates.custom.edit({id: state.selectedTemplateId})">click here</a> for configuration.</p
+                  >
+                  <p class="small vertical-center text-danger mb-5" ng-if="!(currentUser.isAdmin || currentUser.id === state.selectedTemplate.CreatedByUserId)">
+                    <pr-icon icon="'alert-triangle'" mode="'danger'" size="'md'" feather="true"></pr-icon>Custom template could not be loaded, please contact your administrator.</p
+                  >
+                </span>
               </span>
             </div>
           </div>
diff --git a/app/react/components/InlineLoader/InlineLoader.tsx b/app/react/components/InlineLoader/InlineLoader.tsx
index 05eddea71..b5d75eae6 100644
--- a/app/react/components/InlineLoader/InlineLoader.tsx
+++ b/app/react/components/InlineLoader/InlineLoader.tsx
@@ -1,5 +1,5 @@
 import { Loader2 } from 'lucide-react';
-import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
 import clsx from 'clsx';
 
 import { Icon } from '@@/Icon';
@@ -7,6 +7,7 @@ import { Icon } from '@@/Icon';
 type Size = 'xs' | 'sm' | 'md';
 
 export type Props = {
+  children: ReactNode;
   className?: string;
   size?: Size;
 };
@@ -17,11 +18,7 @@ const sizeStyles: Record<Size, string> = {
   md: 'text-md',
 };
 
-export function InlineLoader({
-  children,
-  className,
-  size = 'sm',
-}: PropsWithChildren<Props>) {
+export function InlineLoader({ children, className, size = 'sm' }: Props) {
   return (
     <div
       className={clsx(