fix(ui): kubernetes create from manifest page misalignments and incorrect loading icon [R8S-68] (#88)

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>

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 -->

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), [

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>

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(