fix(ui): kubernetes create from file page - fix template load failed message style [R8S-68] (#95)

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

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>

app/portainer/components/custom-template-selector/index.js

@@ -7,6 +7,7 @@ export const customTemplateSelector = {
   bindings: {
     newTemplatePath: '@',
     stackType: '<',
+    isLoadFailed: '<',
 
     value: '<',
     onChange: '<',