From 1ef713d80b5128d0ff8643111117e16e5d39c65d Mon Sep 17 00:00:00 2001
From: Ali <83188384+testA113@users.noreply.github.com>
Date: Wed, 27 Jul 2022 09:40:22 +1200
Subject: [PATCH] feat(ui): custom template item EE-3738 (#7303)

---
 app/assets/css/app.css                        |  1 -
 .../kube-custom-templates-view.html           |  2 +-
 .../customTemplatesList.html                  | 48 ++++++++++--------
 .../stacks-datatable/stacksDatatable.html     |  6 +--
 .../template-item/templateItem.html           | 49 ++++++++++---------
 .../template-list/templateList.html           |  3 +-
 .../components/widget/rd-widget-title.ts      |  3 +-
 7 files changed, 60 insertions(+), 52 deletions(-)

diff --git a/app/assets/css/app.css b/app/assets/css/app.css
index ec8185100..82b91e750 100644
--- a/app/assets/css/app.css
+++ b/app/assets/css/app.css
@@ -283,7 +283,6 @@ a[ng-click] {
 .blocklist-item-logo {
   width: 100%;
   max-width: 60px;
-  height: 100%;
   max-height: 60px;
 }
 
diff --git a/app/kubernetes/custom-templates/kube-custom-templates-view/kube-custom-templates-view.html b/app/kubernetes/custom-templates/kube-custom-templates-view/kube-custom-templates-view.html
index 23c2d9777..c771dd4db 100644
--- a/app/kubernetes/custom-templates/kube-custom-templates-view/kube-custom-templates-view.html
+++ b/app/kubernetes/custom-templates/kube-custom-templates-view/kube-custom-templates-view.html
@@ -5,7 +5,7 @@
     <custom-templates-list
       ng-if="$ctrl.templates"
       title-text="Templates"
-      title-icon="fa-rocket"
+      title-icon="edit"
       templates="$ctrl.templates"
       table-key="customTemplates"
       is-edit-allowed="$ctrl.isEditAllowed"
diff --git a/app/portainer/components/custom-templates-list/customTemplatesList.html b/app/portainer/components/custom-templates-list/customTemplatesList.html
index d08be5ef4..b797d32d9 100644
--- a/app/portainer/components/custom-templates-list/customTemplatesList.html
+++ b/app/portainer/components/custom-templates-list/customTemplatesList.html
@@ -1,25 +1,29 @@
 <div class="datatable">
   <rd-widget>
-    <rd-widget-header icon="{{ $ctrl.titleIcon }}" feather-icon="true" title-text="{{ $ctrl.titleText }}"></rd-widget-header>
     <rd-widget-body classes="no-padding">
-      <div class="actionBar">
-        <button type="button" class="btn btn-sm btn-primary" ui-state="$ctrl.createPath"> <i class="fa fa-plus space-right" aria-hidden="true"></i>Add Custom Template </button>
+      <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
+        <rd-widget-header icon="{{ $ctrl.titleIcon }}" feather-icon="true" title-text="Custom Templates" class="!flex-auto !mr-0" parent-classes="!p-0"></rd-widget-header>
+        <div class="searchBar vertical-center !mr-0">
+          <pr-icon icon="'search'" feather="true"></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 }"
+          />
+        </div>
+        <div class="actionBar">
+          <button type="button" class="btn btn-sm btn-primary" ui-state="$ctrl.createPath">
+            <pr-icon icon="'plus'" feather="true"></pr-icon>
+            Add Custom Template
+          </button>
+        </div>
       </div>
 
-      <div class="searchBar">
-        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <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 class="blocklist">
+      <div class="blocklist !px-[20px] gap-y-2 !pb-[20px]">
         <template-item
           ng-repeat="template in $ctrl.templates | filter:$ctrl.state.textFilter"
           model="template"
@@ -27,11 +31,15 @@
           on-select="($ctrl.onSelectClick)"
         >
           <template-item-actions>
-            <div ng-if="$ctrl.isEditAllowed(template)" style="display: flex">
-              <a ui-state="$ctrl.editPath" ui-state-params="{id: template.Id}" ng-click="$event.stopPropagation();" class="btn btn-primary btn-xs" style="margin-right: 10px">
+            <div ng-if="$ctrl.isEditAllowed(template)" class="vertical-center">
+              <a ui-state="$ctrl.editPath" ui-state-params="{id: template.Id}" ng-click="$event.stopPropagation();" class="btn btn-secondary btn-sm vertical-center">
+                <pr-icon icon="'edit'" feather="true"></pr-icon>
                 Edit
               </a>
-              <button class="btn btn-danger btn-xs" ng-click="$ctrl.onDeleteClick(template.Id); $event.stopPropagation();">Delete</button>
+              <button class="btn btn-dangerlight btn-sm vertical-center" ng-click="$ctrl.onDeleteClick(template.Id); $event.stopPropagation();">
+                <pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>
+                Delete
+              </button>
             </div>
           </template-item-actions>
         </template-item>
diff --git a/app/portainer/components/datatables/stacks-datatable/stacksDatatable.html b/app/portainer/components/datatables/stacks-datatable/stacksDatatable.html
index 3c84a747e..f6626de47 100644
--- a/app/portainer/components/datatables/stacks-datatable/stacksDatatable.html
+++ b/app/portainer/components/datatables/stacks-datatable/stacksDatatable.html
@@ -6,7 +6,7 @@
           <pr-icon icon="'layers'" feather="true" class-name="'icon-nested-blue vertical-center'" mode="'primary'"></pr-icon>
           {{ $ctrl.titleText }}
         </div>
-        <div class="searchBar vertical-center">
+        <div class="searchBar vertical-center !mr-0">
           <pr-icon icon="'search'" feather="true"></pr-icon>
           <input
             type="text"
@@ -235,8 +235,8 @@
           </tbody>
         </table>
       </div>
-      <div class="footer" ng-if="$ctrl.dataset">
-        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0">
+      <div class="footer pl-5" ng-if="$ctrl.dataset">
+        <div class="infoBar !ml-0" ng-if="$ctrl.state.selectedItemCount !== 0">
           {{ $ctrl.state.selectedItemCount }}
           item(s) selected
         </div>
diff --git a/app/portainer/components/template-list/template-item/templateItem.html b/app/portainer/components/template-list/template-item/templateItem.html
index afa9bab39..b731964b9 100644
--- a/app/portainer/components/template-list/template-item/templateItem.html
+++ b/app/portainer/components/template-list/template-item/templateItem.html
@@ -1,36 +1,37 @@
 <!-- template -->
-<div ng-class="{ 'blocklist-item--selected': $ctrl.model.Selected }" class="blocklist-item template-item" ng-click="$ctrl.onSelect($ctrl.model)">
+<div ng-class="{ 'blocklist-item--selected': $ctrl.model.Selected }" class="blocklist-item template-item !mr-0 !my-0" ng-click="$ctrl.onSelect($ctrl.model)">
   <div class="blocklist-item-box">
     <!-- template-image -->
-    <span ng-if="$ctrl.model.Logo">
+    <div ng-if="$ctrl.model.Logo" class="vertical-center justify-center">
       <img class="blocklist-item-logo" ng-src="{{ $ctrl.model.Logo }}" />
-    </span>
-    <span class="blocklist-item-logo" ng-if="!$ctrl.model.Logo">
-      <i class="fa fa-rocket fa-4x blue-icon" aria-hidden="true"></i>
-    </span>
+    </div>
+    <div class="blocklist-item-logo vertical-center justify-center" ng-if="!$ctrl.model.Logo">
+      <pr-icon icon="'svg-rocket'" class-name="'[&>*]:!h-10 [&>*]:!w-auto [&>*>path]:stroke-blue-8'" mode="'primary'"></pr-icon>
+    </div>
     <!-- !template-image -->
     <!-- template-details -->
     <div class="col-sm-12 template-item-details">
       <!-- blocklist-item-line1 -->
-      <div class="blocklist-item-line">
-        <span>
-          <span class="blocklist-item-title">
-            {{ $ctrl.model.Title }}
-          </span>
-          <span class="space-left blocklist-item-subtitle">
-            <span ng-if="$ctrl.model.Type != 3">
-              <i class="fab fa-linux" aria-hidden="true" ng-if="$ctrl.model.Platform === 1 || $ctrl.model.Platform === 'linux' || !$ctrl.model.Platform"></i>
-              <span ng-if="!$ctrl.model.Platform"> &amp; </span>
-              <i class="fab fa-windows" aria-hidden="true" ng-if="$ctrl.model.Platform === 2 || $ctrl.model.Platform === 'windows' || !$ctrl.model.Platform"></i>
-            </span>
-            <span ng-if="$ctrl.model.Type === 3">
-              <i class="fa fa-dharmachakra" aria-hidden="true"></i>
-            </span>
-            <span>
-              {{ $ctrl.typeLabel }}
-            </span>
-          </span>
+      <div class="blocklist-item-line gap-2">
+        <span class="blocklist-item-title">
+          {{ $ctrl.model.Title }}
         </span>
+        <div class="inline-flex items-center space-left blocklist-item-subtitle">
+          <div ng-if="$ctrl.model.Type != 3" class="vertical-center">
+            <i class="fab fa-linux space-right" aria-hidden="true" ng-if="$ctrl.model.Platform === 1 || $ctrl.model.Platform === 'linux' || !$ctrl.model.Platform"></i>
+            <span ng-if="!$ctrl.model.Platform"> &amp; </span>
+            <pr-icon
+              icon="'svg-microsoft'"
+              ng-if="$ctrl.model.Platform === 2 || $ctrl.model.Platform === 'windows' || !$ctrl.model.Platform"
+              class-name="'[&>*]:flex [&>*]:items-center'"
+              size="'lg'"
+            ></pr-icon>
+          </div>
+          <div ng-if="$ctrl.model.Type === 3" class="vertical-center">
+            <pr-icon icon="'svg-kubernetes'" size="'lg'" class="align-bottom" class-name="'[&>*]:flex [&>*]:items-center'"></pr-icon>
+          </div>
+          {{ $ctrl.typeLabel }}
+        </div>
       </div>
       <!-- !blocklist-item-line1 -->
       <span class="blocklist-item-actions" ng-transclude="actions"></span>
diff --git a/app/portainer/components/template-list/templateList.html b/app/portainer/components/template-list/templateList.html
index e86fcd88d..510538589 100644
--- a/app/portainer/components/template-list/templateList.html
+++ b/app/portainer/components/template-list/templateList.html
@@ -56,8 +56,7 @@
           </div>
         </div>
       </div>
-
-      <div class="blocklist">
+      <div class="blocklist !px-[20px] gap-y-2 !pb-[20px]">
         <template-item
           ng-repeat="template in $ctrl.templates | filter: $ctrl.filterByTemplateType | filter:$ctrl.filterByCategory | filter:$ctrl.state.textFilter"
           model="template"
diff --git a/app/portainer/components/widget/rd-widget-title.ts b/app/portainer/components/widget/rd-widget-title.ts
index b13ab13a5..2bbf5ee22 100644
--- a/app/portainer/components/widget/rd-widget-title.ts
+++ b/app/portainer/components/widget/rd-widget-title.ts
@@ -5,12 +5,13 @@ export const rdWidgetTitle = {
     icon: '@',
     featherIcon: '<',
     classes: '@?',
+    parentClasses: '@?',
   },
   transclude: {
     title: '?headerTitle',
   },
   template: `
-    <div class="widget-header">
+    <div class="widget-header" ng-class="$ctrl.parentClasses">
       <div class="row">
         <span ng-class="$ctrl.classes" class="pull-left vertical-center">
           <pr-icon icon="$ctrl.icon" feather="$ctrl.featherIcon"></pr-icon>