From 78ce1762687c7bce5aa6d9e7c2a71992a62ba9fa Mon Sep 17 00:00:00 2001
From: fhanportainer <79428273+fhanportainer@users.noreply.github.com>
Date: Fri, 5 Aug 2022 10:24:19 +1200
Subject: [PATCH] feat(teams): teams page css UI update. (#7402)

* feat(teams): teams page css UI update.

* feat(teams): added `required` attr to team name field

* feat(teams): fixed remove and search bar position

* feat(teams): fixed CreateTeamForm unit test
---
 .../teams-datatable/teamsDatatable.html       | 67 +++++++++++--------
 .../CreateTeamForm/CreateTeamForm.test.tsx    |  2 +-
 .../teams/CreateTeamForm/CreateTeamForm.tsx   | 14 ++--
 app/portainer/views/teams/teams.html          |  2 +-
 4 files changed, 51 insertions(+), 34 deletions(-)

diff --git a/app/portainer/components/datatables/teams-datatable/teamsDatatable.html b/app/portainer/components/datatables/teams-datatable/teamsDatatable.html
index 421c1eb1f..48de95a99 100644
--- a/app/portainer/components/datatables/teams-datatable/teamsDatatable.html
+++ b/app/portainer/components/datatables/teams-datatable/teamsDatatable.html
@@ -2,38 +2,51 @@
   <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" ng-show="$ctrl.isAdmin">
-        <button type="button" class="btn btn-sm btn-danger" ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems)">
-          <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
-        </button>
-      </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..."
-          ng-model-options="{ debounce: 300 }"
-        />
+        <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"></pr-icon>
+          <input
+            type="text"
+            class="searchInput"
+            ng-model="$ctrl.state.textFilter"
+            ng-change="$ctrl.onTextFilterChange()"
+            placeholder="Search..."
+            ng-model-options="{ debounce: 300 }"
+          />
+        </div>
+        <div class="actionBar" ng-show="$ctrl.isAdmin">
+          <button
+            type="button"
+            class="btn btn-sm btn-dangerlight vertical-center"
+            ng-disabled="$ctrl.state.selectedItemCount === 0"
+            ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
+          >
+            <pr-icon icon="'trash-2'" feather="true"></pr-icon>
+            Remove
+          </button>
+        </div>
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
-                <span class="md-checkbox" ng-show="$ctrl.isAdmin">
-                  <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">
+                    <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>
             </tr>
           </thead>
@@ -64,7 +77,7 @@
         <div class="paginationControls">
           <form class="form-inline">
             <span class="limitSelector">
-              <span style="margin-right: 5px"> Items per page </span>
+              <span class="space-right"> Items per page </span>
               <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
                 <option value="0">All</option>
                 <option value="10">10</option>
diff --git a/app/portainer/teams/CreateTeamForm/CreateTeamForm.test.tsx b/app/portainer/teams/CreateTeamForm/CreateTeamForm.test.tsx
index 8734926c3..f02ea42d1 100644
--- a/app/portainer/teams/CreateTeamForm/CreateTeamForm.test.tsx
+++ b/app/portainer/teams/CreateTeamForm/CreateTeamForm.test.tsx
@@ -12,7 +12,7 @@ test('filling the name should make the submit button clickable and emptying it s
   const button = await findByText('Create team');
   expect(button).toBeVisible();
 
-  const nameField = await findByLabelText('Name');
+  const nameField = await findByLabelText('Name*');
   expect(nameField).toBeVisible();
   expect(nameField).toHaveDisplayValue('');
 
diff --git a/app/portainer/teams/CreateTeamForm/CreateTeamForm.tsx b/app/portainer/teams/CreateTeamForm/CreateTeamForm.tsx
index c17d01e83..bfeb6a5bb 100644
--- a/app/portainer/teams/CreateTeamForm/CreateTeamForm.tsx
+++ b/app/portainer/teams/CreateTeamForm/CreateTeamForm.tsx
@@ -1,6 +1,7 @@
 import { Formik, Field, Form } from 'formik';
 
 import { UserViewModel } from '@/portainer/models/user';
+import { Icon } from '@/react/components/Icon';
 import { TeamViewModel } from '@/portainer/models/team';
 
 import { FormControl } from '@@/form-components/FormControl';
@@ -32,7 +33,12 @@ export function CreateTeamForm({ users, teams, onSubmit }: Props) {
     <div className="row">
       <div className="col-lg-12 col-md-12 col-xs-12">
         <Widget>
-          <WidgetTitle icon="fa-plus" title="Add a new team" />
+          <WidgetTitle
+            icon="plus"
+            title="Add a new team"
+            featherIcon
+            className="vertical-center"
+          />
           <WidgetBody>
             <Formik
               initialValues={initialValues}
@@ -57,6 +63,7 @@ export function CreateTeamForm({ users, teams, onSubmit }: Props) {
                     inputId="team_name"
                     label="Name"
                     errors={errors.name}
+                    required
                   >
                     <Field
                       as={Input}
@@ -96,10 +103,7 @@ export function CreateTeamForm({ users, teams, onSubmit }: Props) {
                         isLoading={isSubmitting}
                         loadingText="Creating team..."
                       >
-                        <i
-                          className="fa fa-plus space-right"
-                          aria-hidden="true"
-                        />
+                        <Icon icon="plus" feather size="md" />
                         Create team
                       </LoadingButton>
                     </div>
diff --git a/app/portainer/views/teams/teams.html b/app/portainer/views/teams/teams.html
index cbc5ac34e..f3108efe3 100644
--- a/app/portainer/views/teams/teams.html
+++ b/app/portainer/views/teams/teams.html
@@ -4,6 +4,6 @@
 
 <div class="row">
   <div class="col-sm-12">
-    <teams-datatable title-text="Teams" title-icon="fa-users" dataset="teams" table-key="teams" order-by="Name" remove-action="removeAction" is-admin="isAdmin"></teams-datatable>
+    <teams-datatable title-text="Teams" title-icon="users" dataset="teams" table-key="teams" order-by="Name" remove-action="removeAction" is-admin="isAdmin"></teams-datatable>
   </div>
 </div>