From 95a4f83466e4eac1f885ed5baea93e9f0ee9ed68 Mon Sep 17 00:00:00 2001
From: Rex Wang <109048808+RexWangPT@users.noreply.github.com>
Date: Sun, 30 Oct 2022 14:56:23 +0800
Subject: [PATCH] fix(docker): docker template UI bug fix [EE-4034] (#7912)

* EE-4034 fix(docker): docker template UI bug fix

* EE-4034 fix(docker): fix ui
---
 .../stackFromTemplateForm.html                | 33 +++++++-----
 .../template-list/templateList.html           | 50 ++++++++++---------
 app/portainer/views/templates/templates.html  | 24 +++++++--
 3 files changed, 67 insertions(+), 40 deletions(-)

diff --git a/app/portainer/components/forms/stack-from-template-form/stackFromTemplateForm.html b/app/portainer/components/forms/stack-from-template-form/stackFromTemplateForm.html
index a45f42525..42bd81a06 100644
--- a/app/portainer/components/forms/stack-from-template-form/stackFromTemplateForm.html
+++ b/app/portainer/components/forms/stack-from-template-form/stackFromTemplateForm.html
@@ -17,19 +17,20 @@
           <label for="template_name" class="col-sm-2 control-label text-left">Name</label>
           <div class="col-sm-6">
             <input type="text" name="template_name" class="form-control" ng-model="$ctrl.formValues.name" ng-pattern="$ctrl.nameRegex" placeholder="e.g. myStack" required />
-          </div>
-        </div>
-        <div class="form-group" ng-if="stackTemplateForm.template_name.$invalid">
-          <div class="col-sm-12 small text-warning">
-            <div ng-messages="stackTemplateForm.template_name.$error">
-              <p ng-message="pattern">
-                <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
-                <span>This field must consist of lower case alphanumeric characters, '_' or '-' (e.g. 'my-name', or 'abc-123').</span>
-              </p>
-              <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
+            <div class="form-group" ng-if="stackTemplateForm.template_name.$invalid">
+              <div class="col-sm-12 small text-warning">
+                <div ng-messages="stackTemplateForm.template_name.$error">
+                  <p ng-message="pattern" class="vertical-center">
+                    <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
+                    <span>This field must consist of lower case alphanumeric characters, '_' or '-' (e.g. 'my-name', or 'abc-123').</span>
+                  </p>
+                  <p ng-message="required" class="vertical-center"><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>This field is required.</p>
+                </div>
+              </div>
             </div>
           </div>
         </div>
+
         <!-- !name-input -->
         <!-- env -->
         <div ng-repeat="var in $ctrl.template.Env" ng-if="!var.preset || var.select" class="form-group">
@@ -66,8 +67,16 @@
               <span ng-show="$ctrl.state.actionInProgress">Deployment in progress...</span>
             </button>
             <button type="button" class="btn btn-default" ng-click="$ctrl.unselectTemplate($ctrl.template)">Hide</button>
-            <div class="cols-sm-12 small text-danger space-left mt-1" ng-if="$ctrl.state.formValidationError">{{ $ctrl.state.formValidationError }}</div>
-            <div class="cols-sm-12 small text-danger space-left mt-1" ng-if="!$ctrl.state.deployable">This template type cannot be deployed on this environment.</div>
+            <div class="form-group" ng-if="$ctrl.state.formValidationError">
+              <div class="col-sm-12 small text-danger" ng-if="$ctrl.state.formValidationError">
+                <p class="vertical-center"><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>{{ $ctrl.state.formValidationError }}</p>
+              </div>
+            </div>
+            <div class="form-group" ng-if="!$ctrl.state.deployable">
+              <div class="col-sm-12 small text-danger" ng-if="!$ctrl.state.deployable">
+                <p class="vertical-center"><pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>This template type cannot be deployed on this environment.</p>
+              </div>
+            </div>
           </div>
         </div>
         <!-- !actions -->
diff --git a/app/portainer/components/template-list/templateList.html b/app/portainer/components/template-list/templateList.html
index fd65eae0e..c4d4b30de 100644
--- a/app/portainer/components/template-list/templateList.html
+++ b/app/portainer/components/template-list/templateList.html
@@ -1,15 +1,33 @@
 <div class="datatable">
   <rd-widget>
-    <rd-widget-header icon="{{ $ctrl.titleIcon }}" feather-icon="true" title-text="{{ $ctrl.titleText }}"></rd-widget-header>
+    <div class="toolBar">
+      <div class="toolBarTitle vertical-center">
+        <div class="widget-icon space-right">
+          <pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
+        </div>
+        {{ $ctrl.titleText }}
+      </div>
+      <div class="searchBar vertical-center">
+        <pr-icon icon="'search'" feather="true" class-name="'searchIcon'"></pr-icon>
+        <input
+          type="text"
+          class="searchInput"
+          ng-model="$ctrl.state.textFilter"
+          ng-change="$ctrl.onTextFilterChange()"
+          placeholder="Search for a template..."
+          auto-focus
+          ng-model-options="{ debounce: 300 }"
+          data-cy="template-searchInput"
+        />
+      </div>
+      <div class="actionBar !gap-3" ng-if="$ctrl.showAddAction">
+        <button type="button" class="btn btn-sm btn-primary h-fit vertical-center !ml-0" ui-sref="docker.templates.new" data-cy="template-addTemplateButton">
+          <pr-icon icon="'plus'" feather="true"></pr-icon>Add template
+        </button>
+      </div>
+    </div>
     <rd-widget-body classes="no-padding">
       <div class="actionBar">
-        <div class="row">
-          <div class="col-sm-12">
-            <button type="button" class="btn btn-sm btn-primary" ui-sref="docker.templates.new" ng-if="$ctrl.showAddAction">
-              <i class="fa fa-plus space-right" aria-hidden="true"></i>Add template
-            </button>
-          </div>
-        </div>
         <div class="row">
           <div class="col-sm-3">
             <template-list-dropdown
@@ -39,22 +57,6 @@
             ></template-list-sort>
           </div>
         </div>
-        <div class="row">
-          <div class="col-sm-12">
-            <div class="searchBar items-center flex gap-1">
-              <pr-icon icon="'search'" feather="true" class-name="'searchIcon'"></pr-icon>
-              <input
-                type="text"
-                class="searchInput"
-                ng-model="$ctrl.state.textFilter"
-                ng-change="$ctrl.onTextFilterChange()"
-                placeholder="Search..."
-                auto-focus
-                ng-model-options="{ debounce: 300 }"
-              />
-            </div>
-          </div>
-        </div>
       </div>
       <div class="blocklist !px-[20px] gap-y-2 !pb-[20px]">
         <template-item
diff --git a/app/portainer/views/templates/templates.html b/app/portainer/views/templates/templates.html
index 90571ca3d..e1531b4ae 100644
--- a/app/portainer/views/templates/templates.html
+++ b/app/portainer/views/templates/templates.html
@@ -105,7 +105,11 @@
                     <!-- !protocol-actions -->
                   </div>
                 </div>
-                <div class="small interactive text-muted mt-2" ng-click="addPortBinding()"> <pr-icon icon="'plus'" feather="true"></pr-icon> Add map additional port </div>
+                <div class="col-sm-12">
+                  <span class="form-group small interactive text-muted mt-2 vertical-center" ng-click="addPortBinding()">
+                    <pr-icon icon="'plus'" feather="true"></pr-icon> Add map additional port
+                  </span>
+                </div>
               </div>
             </div>
             <!-- !port-mapping -->
@@ -171,7 +175,11 @@
                     <!-- !volume-line2 -->
                   </div>
                 </div>
-                <div class="small interactive text-muted mt-2" ng-click="addVolume()"> <pr-icon icon="'plus'" feather="true"></pr-icon> Add map additional volume </div>
+                <div class="col-sm-12">
+                  <span class="form-group small interactive text-muted mt-2 vertical-center" ng-click="addVolume()">
+                    <pr-icon icon="'plus'" feather="true"></pr-icon> Add map additional volume
+                  </span>
+                </div>
               </div>
             </div>
             <!-- !volume-mapping -->
@@ -191,7 +199,11 @@
                     </button>
                   </div>
                 </div>
-                <div class="small interactive text-muted mt-2" ng-click="addExtraHost()"> <pr-icon icon="'plus'" feather="true"></pr-icon> Add additional entry </div>
+                <div class="col-sm-12">
+                  <span class="form-group small interactive text-muted mt-2 vertical-center" ng-click="addExtraHost()">
+                    <pr-icon icon="'plus'" feather="true"></pr-icon> Add additional entry
+                  </span>
+                </div>
               </div>
             </div>
             <!-- !extra-host -->
@@ -216,7 +228,11 @@
                   </div>
                 </div>
                 <!-- !labels-input-list -->
-                <div class="small interactive text-muted mt-2" ng-click="addLabel()"> <pr-icon icon="'plus'" feather="true"></pr-icon> Add label </div>
+                <div class="col-sm-12">
+                  <span class="form-group small interactive text-muted mt-2 vertical-center" ng-click="addLabel()">
+                    <pr-icon icon="'plus'" feather="true"></pr-icon> Add label
+                  </span>
+                </div>
               </div>
             </div>
             <!-- !labels -->