From fd2b00bf3b1c001b6eb9525f8a89bb503dce6c7a Mon Sep 17 00:00:00 2001
From: Malcolm Lockyer <segfault88@users.noreply.github.com>
Date: Mon, 11 Nov 2024 12:06:56 +1300
Subject: [PATCH] fix(ui): kubernetes create from file page - fix template load
 failed message style [R8S-68] (#95)

---
 app/kubernetes/views/deploy/deploy.html            | 14 +-------------
 .../custom-template-selector.html                  |  9 +++++++++
 .../components/custom-template-selector/index.js   |  1 +
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/app/kubernetes/views/deploy/deploy.html b/app/kubernetes/views/deploy/deploy.html
index 5b14b3585..36f21126f 100644
--- a/app/kubernetes/views/deploy/deploy.html
+++ b/app/kubernetes/views/deploy/deploy.html
@@ -132,22 +132,10 @@
                     definitions="ctrl.state.template.Variables"
                     value="ctrl.formValues.Variables"
                     on-change="(ctrl.onChangeTemplateVariables)"
+                    is-load-failed="ctrl.state.BuildMethod === ctrl.BuildMethods.CUSTOM_TEMPLATE && ctrl.state.templateId && ctrl.state.templateLoadFailed"
                   ></custom-templates-variables-field>
                 </div>
 
-                <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 -->
                 <div class="mt-4">
                   <web-editor-form
diff --git a/app/portainer/components/custom-template-selector/custom-template-selector.html b/app/portainer/components/custom-template-selector/custom-template-selector.html
index d8dc031ec..36b4b5429 100644
--- a/app/portainer/components/custom-template-selector/custom-template-selector.html
+++ b/app/portainer/components/custom-template-selector/custom-template-selector.html
@@ -12,6 +12,15 @@
       >
         <option value="" label="Select a Custom template" disabled selected="selected"> </option>
       </select>
+      <span ng-if="$ctrl.isLoadFailed">
+        <p class="text-warning mb-5 !inline-flex gap-1 !align-top text-xs" ng-if="ctrl.currentUser.isAdmin || ctrl.currentUser.id === ctrl.state.template.CreatedByUserId">
+          <pr-icon icon="'alert-triangle'" mode="'warning'" size="'sm'"></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="text-warning mb-5 !inline-flex gap-1 !align-top text-xs" ng-if="!(ctrl.currentUser.isAdmin || ctrl.currentUser.id === ctrl.state.template.CreatedByUserId)">
+          <pr-icon icon="'alert-triangle'" mode="'warning'" size="'sm'"></pr-icon>Custom template could not be loaded, please contact your administrator.</p
+        >
+      </span>
       <span class="small text-muted pt-[7px]" ng-if="!$ctrl.templates.length">
         No custom templates are available. Head over to the <a ui-state="$ctrl.newTemplatePath">custom template view</a> to create one.
       </span>
diff --git a/app/portainer/components/custom-template-selector/index.js b/app/portainer/components/custom-template-selector/index.js
index 6e677618d..9b5e5c05d 100644
--- a/app/portainer/components/custom-template-selector/index.js
+++ b/app/portainer/components/custom-template-selector/index.js
@@ -7,6 +7,7 @@ export const customTemplateSelector = {
   bindings: {
     newTemplatePath: '@',
     stackType: '<',
+    isLoadFailed: '<',
 
     value: '<',
     onChange: '<',