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

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

* feat(roles): fixed icon position

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;
+}

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">

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',

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>

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">