From 83a17de1c080da11ac5de288ae9f09ed5aba05c2 Mon Sep 17 00:00:00 2001
From: fhanportainer <79428273+fhanportainer@users.noreply.github.com>
Date: Tue, 9 Aug 2022 19:22:10 +1200
Subject: [PATCH] feat(roles): fixed search box in the Roles page. (#7448)

* feat(roles): fixed search box in the Roles page.

* feat(roles): fixed icon position
---
 .../access-viewer-datatable.css               | 15 +++++++++
 .../access-viewer-datatable.html              | 33 ++++++++++++-------
 .../access-viewer-datatable/index.js          |  2 ++
 .../access-viewer/access-viewer.html          |  8 -----
 .../roles-datatable/roles-datatable.html      | 26 +++++++--------
 5 files changed, 52 insertions(+), 32 deletions(-)
 create mode 100644 app/portainer/rbac/components/access-viewer/access-viewer-datatable/access-viewer-datatable.css

diff --git a/app/portainer/rbac/components/access-viewer/access-viewer-datatable/access-viewer-datatable.css b/app/portainer/rbac/components/access-viewer/access-viewer-datatable/access-viewer-datatable.css
new file mode 100644
index 000000000..1d8291e6e
--- /dev/null
+++ b/app/portainer/rbac/components/access-viewer/access-viewer-datatable/access-viewer-datatable.css
@@ -0,0 +1,15 @@
+.datatable.access-viewer-datatable .toolBar {
+  font-size: inherit;
+}
+
+.datatable.access-viewer-datatable .toolBar .small {
+  font-weight: normal;
+}
+
+.datatable.access-viewer-datatable .toolBar.pl-0 {
+  padding-left: 0;
+}
+
+.datatable.access-viewer-datatable .toolBar.pr-0 {
+  padding-right: 0;
+}
diff --git a/app/portainer/rbac/components/access-viewer/access-viewer-datatable/access-viewer-datatable.html b/app/portainer/rbac/components/access-viewer/access-viewer-datatable/access-viewer-datatable.html
index 8535d8188..59c244103 100644
--- a/app/portainer/rbac/components/access-viewer/access-viewer-datatable/access-viewer-datatable.html
+++ b/app/portainer/rbac/components/access-viewer/access-viewer-datatable/access-viewer-datatable.html
@@ -1,14 +1,25 @@
-<div class="datatable">
-  <div class="searchBar">
-    <pr-icon icon="'search'" class="vertical-center" feather="true"></pr-icon>
-    <input
-      type="text"
-      class="searchInput ml-1"
-      ng-model="$ctrl.state.textFilter"
-      ng-change="$ctrl.onTextFilterChange()"
-      placeholder="Search..."
-      ng-model-options="{ debounce: 300 }"
-    />
+<div class="datatable access-viewer-datatable">
+  <div class="toolBar vertical-center pl-0 pr-0">
+    <div class="toolBarTitle vertical-center">
+      <div>
+        <div class="form-section-title mb-1">Access</div>
+        <div class="vertical-center">
+          <pr-icon icon="'info'" mode="'primary'" feather="true" size="'sm'" class="vertical-center"></pr-icon>
+          <span class="small text-muted"> Effective role for each environment will be displayed for the selected user </span>
+        </div>
+      </div>
+    </div>
+    <div class="searchBar vertical-center">
+      <pr-icon icon="'search'" class="vertical-center" feather="true"></pr-icon>
+      <input
+        type="text"
+        class="searchInput ml-1"
+        ng-model="$ctrl.state.textFilter"
+        ng-change="$ctrl.onTextFilterChange()"
+        placeholder="Search..."
+        ng-model-options="{ debounce: 300 }"
+      />
+    </div>
   </div>
   <div class="table-responsive">
     <table class="table table-hover nowrap-cells">
diff --git a/app/portainer/rbac/components/access-viewer/access-viewer-datatable/index.js b/app/portainer/rbac/components/access-viewer/access-viewer-datatable/index.js
index e45226617..cfcc9bd17 100644
--- a/app/portainer/rbac/components/access-viewer/access-viewer-datatable/index.js
+++ b/app/portainer/rbac/components/access-viewer/access-viewer-datatable/index.js
@@ -1,3 +1,5 @@
+import './access-viewer-datatable.css';
+
 export const accessViewerDatatable = {
   templateUrl: './access-viewer-datatable.html',
   controller: 'GenericDatatableController',
diff --git a/app/portainer/rbac/components/access-viewer/access-viewer.html b/app/portainer/rbac/components/access-viewer/access-viewer.html
index e56182bea..26ef3b83a 100644
--- a/app/portainer/rbac/components/access-viewer/access-viewer.html
+++ b/app/portainer/rbac/components/access-viewer/access-viewer.html
@@ -22,14 +22,6 @@
             </ui-select>
           </div>
         </div>
-
-        <div class="col-sm-12 form-section-title"> Access </div>
-        <div>
-          <div class="small text-muted vertical-center" style="margin-bottom: 15px">
-            <pr-icon icon="'info'" mode="'primary'" feather="true" size="'sm'" class="vertical-center"></pr-icon>
-            Effective role for each environment will be displayed for the selected user
-          </div>
-        </div>
         <access-viewer-datatable table-key="access_viewer" dataset="$ctrl.userRoles" order-by="EndpointName" is-admin="$ctrl.isAdmin"> </access-viewer-datatable>
       </form>
     </rd-widget-body>
diff --git a/app/portainer/rbac/components/roles-datatable/roles-datatable.html b/app/portainer/rbac/components/roles-datatable/roles-datatable.html
index eca8b8a22..f570d6abc 100644
--- a/app/portainer/rbac/components/roles-datatable/roles-datatable.html
+++ b/app/portainer/rbac/components/roles-datatable/roles-datatable.html
@@ -1,22 +1,22 @@
 <div class="datatable">
   <rd-widget>
     <rd-widget-body classes="no-padding">
-      <div class="toolBar">
+      <div class="toolBar vertical-center">
         <div class="toolBarTitle vertical-center">
           <pr-icon icon="$ctrl.titleIcon" feather="true" class="vertical-center" class-name="'icon-white icon-primary icon-nested-blue'"></pr-icon>{{ $ctrl.titleText }}
         </div>
-      </div>
-      <div class="searchBar">
-        <pr-icon icon="'search'" class="vertical-center" feather="true"></pr-icon>
-        <input
-          type="text"
-          class="searchInput ml-1"
-          ng-model="$ctrl.state.textFilter"
-          ng-change="$ctrl.onTextFilterChange()"
-          placeholder="Search..."
-          auto-focus
-          ng-model-options="{ debounce: 300 }"
-        />
+        <div class="searchBar vertical-center">
+          <pr-icon icon="'search'" class="vertical-center" feather="true"></pr-icon>
+          <input
+            type="text"
+            class="searchInput ml-1"
+            ng-model="$ctrl.state.textFilter"
+            ng-change="$ctrl.onTextFilterChange()"
+            placeholder="Search..."
+            auto-focus
+            ng-model-options="{ debounce: 300 }"
+          />
+        </div>
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">