From 5f5cb36df17bcbddfb752920cac4602e90b22879 Mon Sep 17 00:00:00 2001
From: congs <mcpacino@gmail.com>
Date: Mon, 25 Jul 2022 10:39:15 +1200
Subject: [PATCH] feat(ui): EE-3553 css-portainer-environmnets (#7193)

---
 .../endpointsDatatable.html                   | 134 +++++++++++-------
 app/portainer/views/endpoints/endpoints.html  |   2 +-
 2 files changed, 81 insertions(+), 55 deletions(-)

diff --git a/app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.html b/app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.html
index ee619a1ff..73c5ae7a6 100644
--- a/app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.html
+++ b/app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.html
@@ -2,72 +2,95 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div>
-      </div>
-      <div class="actionBar">
-        <button
-          type="button"
-          class="btn btn-sm btn-danger"
-          ng-disabled="$ctrl.state.selectedItemCount === 0"
-          ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
-          data-cy="endpoint-removeEndpointButton"
-        >
-          <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
-        </button>
-        <button type="button" class="btn btn-sm btn-primary" ng-click="$ctrl.setReferrer()" ui-sref="portainer.wizard.endpoints" data-cy="endpoint-addEndpointButton">
-          <i class="fa fa-plus-circle space-right" aria-hidden="true"></i>Add environment
-        </button>
-      </div>
-      <div class="searchBar">
-        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input
-          type="text"
-          class="searchInput"
-          auto-focus
-          placeholder="Search..."
-          ng-model="$ctrl.state.textFilter"
-          ng-change="$ctrl.onTextFilterChange()"
-          ng-model-options="{ debounce: 300 }"
-          data-cy="endpoint-searchInput"
-        />
+        <div class="toolBarTitle vertical-center">
+          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-white icon-primary icon-nested-blue'"></pr-icon>
+          {{ $ctrl.titleText }}
+        </div>
+        <div class="searchBar vertical-center">
+          <pr-icon icon="'search'" feather="true" class="searchIcon"></pr-icon>
+          <input
+            type="text"
+            class="searchInput"
+            auto-focus
+            placeholder="Search..."
+            ng-model="$ctrl.state.textFilter"
+            ng-change="$ctrl.onTextFilterChange()"
+            ng-model-options="{ debounce: 300 }"
+            data-cy="endpoint-searchInput"
+          />
+        </div>
+        <div class="actionBar">
+          <button
+            type="button"
+            class="btn btn-sm btn-dangerlight vertical-center"
+            ng-disabled="$ctrl.state.selectedItemCount === 0"
+            ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
+            data-cy="endpoint-removeEndpointButton"
+          >
+            <pr-icon icon="'trash-2'" feather="true" class-name="'icon-white'"></pr-icon>
+            <span>Remove</span>
+          </button>
+          <button
+            type="button"
+            class="btn btn-sm btn-primary vertical-center"
+            ng-click="$ctrl.setReferrer()"
+            ui-sref="portainer.wizard.endpoints"
+            data-cy="endpoint-addEndpointButton"
+          >
+            <pr-icon icon="'plus'" feather="true" class-name="'icon-white'"></pr-icon>
+            <span>Add environment</span>
+          </button>
+        </div>
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells" data-cy="endpoint-endpointTable">
           <thead>
             <tr>
               <th>
-                <span class="md-checkbox">
-                  <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
-                  <label for="select_all"></label>
-                </span>
-                <a ng-click="$ctrl.changeOrderBy('Name')">
-                  Name
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <div class="vertical-center">
+                  <span class="md-checkbox vertical-center">
+                    <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
+                    <label for="select_all"></label>
+                  </span>
+                  <table-column-header
+                    col-title="'Name'"
+                    can-sort="true"
+                    is-sorted="$ctrl.state.orderBy === 'Name'"
+                    is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
+                    ng-click="$ctrl.changeOrderBy('Name')"
+                  ></table-column-header>
+                </div>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Type')">
-                  Type
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Type' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Type'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Type'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Type')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('URL')">
-                  URL
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'URL' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'URL' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'URL'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'URL'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'URL' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('URL')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('GroupName')">
-                  Group
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'GroupName' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'GroupName' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'GroupName'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'GroupName'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'GroupName' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('GroupName')"
+                ></table-column-header>
+              </th>
+              <th>
+                <table-column-header col-title="'Actions'" can-sort="false"></table-column-header>
               </th>
-              <th>Actions</th>
             </tr>
           </thead>
           <tbody>
@@ -95,7 +118,10 @@
               </td>
               <td>{{ item.GroupName }}</td>
               <td>
-                <a ui-sref="portainer.endpoints.endpoint.access({id: item.Id})"> <i class="fa fa-users" aria-hidden="true"></i> Manage access </a>
+                <a ui-sref="portainer.endpoints.endpoint.access({id: item.Id})">
+                  <pr-icon icon="'users'" feather="true"></pr-icon>
+                  Manage access
+                </a>
               </td>
             </tr>
             <tr ng-if="$ctrl.state.loading">
diff --git a/app/portainer/views/endpoints/endpoints.html b/app/portainer/views/endpoints/endpoints.html
index 9365a29b4..386a49ea0 100644
--- a/app/portainer/views/endpoints/endpoints.html
+++ b/app/portainer/views/endpoints/endpoints.html
@@ -6,7 +6,7 @@
   <div class="col-sm-12">
     <endpoints-datatable
       title-text="Environments"
-      title-icon="fa-plug"
+      title-icon="hard-drive"
       table-key="endpoints"
       order-by="Name"
       remove-action="removeAction"