From 9223c0226abb37dd088fae154b96058e602fe49d Mon Sep 17 00:00:00 2001
From: Chao Geng <93526589+chaogeng77977@users.noreply.github.com>
Date: Thu, 21 Jul 2022 00:31:13 +0800
Subject: [PATCH] EE-3742 update tool bar / action bar / search bar /
 pagination (#7298)

Co-authored-by: RexWangPT <rex.wang@portainer.io>
---
 .../configs-datatable/configsDatatable.html   |  66 +++++----
 .../containerNetworksDatatable.html           |   2 +-
 .../containerProcessesDatatable.html          |   2 +-
 .../events-datatable/eventsDatatable.html     |   2 +-
 .../images-datatable/imagesDatatable.css      |   3 +
 .../images-datatable/imagesDatatable.html     | 136 ++++++++++--------
 .../imagesDatatableController.js              |   1 +
 .../macvlanNodesDatatable.html                |   2 +-
 .../networks-datatable/networksDatatable.html |  66 +++++----
 .../nodeTasksDatatable.html                   |   2 +-
 .../nodes-datatable/nodesDatatable.html       |  31 ++--
 .../secrets-datatable/secretsDatatable.html   |  66 +++++----
 .../actions/servicesDatatableActions.html     |  10 +-
 .../services-datatable/servicesDatatable.html |  45 +++---
 .../tasks-datatable/tasksDatatable.html       |   2 +-
 .../volumes-datatable/volumesDatatable.html   |  66 +++++----
 .../registriesDatatable.html                  |  59 ++++----
 17 files changed, 322 insertions(+), 239 deletions(-)
 create mode 100644 app/docker/components/datatables/images-datatable/imagesDatatable.css

diff --git a/app/docker/components/datatables/configs-datatable/configsDatatable.html b/app/docker/components/datatables/configs-datatable/configsDatatable.html
index e0d3b3994..b817aabc2 100644
--- a/app/docker/components/datatables/configs-datatable/configsDatatable.html
+++ b/app/docker/components/datatables/configs-datatable/configsDatatable.html
@@ -6,9 +6,45 @@
           <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></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..."
+            auto-focus
+            ng-model-options="{ debounce: 300 }"
+            data-cy="config-searchInput"
+          />
+        </div>
+        <div class="actionBar !gap-3" ng-if="!$ctrl.offlineMode" authorization="DockerConfigDelete, DockerConfigCreate">
+          <button
+            type="button"
+            class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
+            authorization="DockerConfigDelete"
+            ng-disabled="$ctrl.state.selectedItemCount === 0"
+            ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
+            data-cy="config-removeConfigButton"
+          >
+            <pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
+          </button>
+          <button
+            type="button"
+            class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
+            ui-sref="docker.configs.new"
+            authorization="DockerConfigCreate"
+            data-cy="config-addConfigButton"
+          >
+            <pr-icon icon="'plus'" feather="true"></pr-icon>Add config
+          </button>
+        </div>
         <div class="settings">
           <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
-            <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
+            <span uib-dropdown-toggle aria-label="Settings">
+              <pr-icon icon="'more-vertical'" feather="true"></pr-icon>
+            </span>
             <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
               <div class="tableMenu">
                 <div class="menuHeader"> Table settings </div>
@@ -41,32 +77,6 @@
           </span>
         </div>
       </div>
-      <div class="actionBar" authorization="DockerConfigDelete, DockerConfigCreate">
-        <button
-          type="button"
-          class="btn btn-sm btn-danger"
-          authorization="DockerConfigDelete"
-          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>
-        <button type="button" class="btn btn-sm btn-primary" ui-sref="docker.configs.new" authorization="DockerConfigCreate">
-          <i class="fa fa-plus space-right" aria-hidden="true"></i>Add config
-        </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..."
-          auto-focus
-          ng-model-options="{ debounce: 300 }"
-        />
-      </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
           <thead>
@@ -130,7 +140,7 @@
       <div class="footer" ng-if="$ctrl.dataset">
         <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
         <div class="paginationControls">
-          <form class="form-inline">
+          <form class="form-inline vertical-center">
             <span class="limitSelector">
               <span style="margin-right: 5px"> Items per page </span>
               <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
diff --git a/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html b/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html
index 487357115..6e3b9e3ff 100644
--- a/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html
+++ b/app/docker/components/datatables/container-networks-datatable/containerNetworksDatatable.html
@@ -96,7 +96,7 @@
       <div class="footer" ng-if="$ctrl.dataset">
         <div class="paginationControls">
           <form class="form-inline">
-            <span class="limitSelector">
+            <span class="limitSelector vertical-center">
               <span style="margin-right: 5px"> 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>
diff --git a/app/docker/components/datatables/container-processes-datatable/containerProcessesDatatable.html b/app/docker/components/datatables/container-processes-datatable/containerProcessesDatatable.html
index d6c422f5b..962007559 100644
--- a/app/docker/components/datatables/container-processes-datatable/containerProcessesDatatable.html
+++ b/app/docker/components/datatables/container-processes-datatable/containerProcessesDatatable.html
@@ -32,7 +32,7 @@
       </div>
       <div class="footer" ng-if="$ctrl.dataset">
         <div class="paginationControls">
-          <form class="form-inline">
+          <form class="form-inline vertical-center">
             <span class="limitSelector">
               <span style="margin-right: 5px"> Items per page </span>
               <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
diff --git a/app/docker/components/datatables/events-datatable/eventsDatatable.html b/app/docker/components/datatables/events-datatable/eventsDatatable.html
index 5c22fe1e1..0a655b1bb 100644
--- a/app/docker/components/datatables/events-datatable/eventsDatatable.html
+++ b/app/docker/components/datatables/events-datatable/eventsDatatable.html
@@ -61,7 +61,7 @@
       </div>
       <div class="footer" ng-if="$ctrl.dataset">
         <div class="paginationControls">
-          <form class="form-inline">
+          <form class="form-inline vertical-center">
             <span class="limitSelector">
               <span style="margin-right: 5px"> Items per page </span>
               <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
diff --git a/app/docker/components/datatables/images-datatable/imagesDatatable.css b/app/docker/components/datatables/images-datatable/imagesDatatable.css
new file mode 100644
index 000000000..28cc1d7c6
--- /dev/null
+++ b/app/docker/components/datatables/images-datatable/imagesDatatable.css
@@ -0,0 +1,3 @@
+.show-dropdown {
+  overflow: visible !important;
+}
diff --git a/app/docker/components/datatables/images-datatable/imagesDatatable.html b/app/docker/components/datatables/images-datatable/imagesDatatable.html
index 2924cc424..29e4f1407 100644
--- a/app/docker/components/datatables/images-datatable/imagesDatatable.html
+++ b/app/docker/components/datatables/images-datatable/imagesDatatable.html
@@ -1,14 +1,91 @@
 <div class="datatable">
   <rd-widget>
     <rd-widget-body classes="no-padding">
-      <div class="toolBar">
+      <div class="toolBar show-dropdown">
         <div class="toolBarTitle vertical-center">
           <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></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..."
+            auto-focus
+            ng-model-options="{ debounce: 300 }"
+            data-cy="image-searchInput"
+          />
+        </div>
+        <div class="actionBar !gap-3" ng-if="!$ctrl.offlineMode" authorization="DockerImageDelete, DockerImageBuild, DockerImageLoad, DockerImageGet">
+          <div class="btn-group" authorization="DockerImageDelete">
+            <button
+              type="button"
+              class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
+              authorization="DockerImageDelete"
+              ng-disabled="$ctrl.state.selectedItemCount === 0"
+              ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
+              data-cy="image-removeImageButton"
+            >
+              <pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
+            </button>
+            <button
+              type="button"
+              class="btn btn-sm btn-dangerlight dropdown-toggle"
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              aria-expanded="false"
+              ng-disabled="$ctrl.state.selectedItemCount === 0"
+            >
+              <span class="caret"></span>
+              <span class="sr-only">Toggle Dropdown</span>
+            </button>
+            <ul class="dropdown-menu">
+              <li><a ng-click="$ctrl.forceRemoveAction($ctrl.state.selectedItems, true)" ng-disabled="$ctrl.state.selectedItemCount === 0">Force Remove</a></li>
+            </ul>
+          </div>
+          <button
+            type="button"
+            class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
+            ui-sref="docker.images.build"
+            authorization="DockerImageBuild"
+            data-cy="image-buildImageButton"
+          >
+            <pr-icon icon="'plus'" feather="true"></pr-icon>Build a new image
+          </button>
+          <div class="btn-group">
+            <button
+              type="button"
+              class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
+              ui-sref="docker.images.import"
+              authorization="DockerImageLoad"
+              ng-disabled="$ctrl.exportInProgress"
+              data-cy="image-importImageButton"
+            >
+              <pr-icon icon="'upload'" feather="true"></pr-icon>Import
+            </button>
+            <button
+              type="button"
+              class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
+              ng-disabled="$ctrl.state.selectedItemCount === 0 || $ctrl.exportInProgress"
+              ng-click="$ctrl.downloadAction($ctrl.state.selectedItems)"
+              button-spinner="$ctrl.exportInProgress"
+              authorization="DockerImageGet"
+              data-cy="image-exportImageButton"
+            >
+              <pr-icon icon="'download'" feather="true"></pr-icon>
+              <span ng-hide="$ctrl.exportInProgress">Export</span>
+              <span ng-show="$ctrl.exportInProgress">Export in progress...</span>
+            </button>
+          </div>
+        </div>
         <div class="settings">
           <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
-            <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
+            <span uib-dropdown-toggle aria-label="Settings">
+              <pr-icon icon="'more-vertical'" feather="true"></pr-icon>
+            </span>
             <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
               <div class="tableMenu">
                 <div class="menuHeader"> Table settings </div>
@@ -41,59 +118,6 @@
           </span>
         </div>
       </div>
-      <div class="actionBar" ng-if="!$ctrl.offlineMode" authorization="DockerImageDelete, DockerImageBuild, DockerImageLoad, DockerImageGet">
-        <div class="btn-group" authorization="DockerImageDelete">
-          <button type="button" class="btn btn-sm btn-danger" ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems, false)">
-            <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
-          </button>
-          <button
-            type="button"
-            class="btn btn-sm btn-danger dropdown-toggle"
-            data-toggle="dropdown"
-            aria-haspopup="true"
-            aria-expanded="false"
-            ng-disabled="$ctrl.state.selectedItemCount === 0"
-          >
-            <span class="caret"></span>
-            <span class="sr-only">Toggle Dropdown</span>
-          </button>
-          <ul class="dropdown-menu">
-            <li><a ng-click="$ctrl.forceRemoveAction($ctrl.state.selectedItems, true)" ng-disabled="$ctrl.state.selectedItemCount === 0">Force Remove</a></li>
-          </ul>
-        </div>
-        <button type="button" class="btn btn-sm btn-primary" ui-sref="docker.images.build" authorization="DockerImageBuild">
-          <i class="fa fa-plus space-right" aria-hidden="true"></i>Build a new image
-        </button>
-        <div class="btn-group">
-          <button type="button" class="btn btn-sm btn-primary" ng-disabled="$ctrl.exportInProgress" ui-sref="docker.images.import" authorization="DockerImageLoad">
-            <i class="fa fa-upload space-right" aria-hidden="true"></i>Import
-          </button>
-          <button
-            type="button"
-            class="btn btn-sm btn-primary"
-            ng-disabled="$ctrl.state.selectedItemCount === 0 || $ctrl.exportInProgress"
-            ng-click="$ctrl.downloadAction($ctrl.state.selectedItems)"
-            button-spinner="$ctrl.exportInProgress"
-            authorization="DockerImageGet"
-          >
-            <i class="fa fa-download space-right" aria-hidden="true"></i>
-            <span ng-hide="$ctrl.exportInProgress">Export</span>
-            <span ng-show="$ctrl.exportInProgress">Export in progress...</span>
-          </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="table-responsive">
         <table class="table table-hover table-filters nowrap-cells">
           <thead>
@@ -196,7 +220,7 @@
       <div class="footer" ng-if="$ctrl.dataset">
         <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
         <div class="paginationControls">
-          <form class="form-inline">
+          <form class="form-inline vertical-center">
             <span class="limitSelector">
               <span style="margin-right: 5px"> Items per page </span>
               <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
diff --git a/app/docker/components/datatables/images-datatable/imagesDatatableController.js b/app/docker/components/datatables/images-datatable/imagesDatatableController.js
index b826203a9..a602bd72d 100644
--- a/app/docker/components/datatables/images-datatable/imagesDatatableController.js
+++ b/app/docker/components/datatables/images-datatable/imagesDatatableController.js
@@ -1,3 +1,4 @@
+import './imagesDatatable.css';
 angular.module('portainer.docker').controller('ImagesDatatableController', [
   '$scope',
   '$controller',
diff --git a/app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.html b/app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.html
index cd8ea8a81..d2b53e6ff 100644
--- a/app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.html
+++ b/app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.html
@@ -92,7 +92,7 @@
       </div>
       <div class="footer" ng-if="$ctrl.dataset">
         <div class="paginationControls">
-          <form class="form-inline">
+          <form class="form-inline vertical-center">
             <span class="limitSelector">
               <span style="margin-right: 5px"> Items per page </span>
               <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
diff --git a/app/docker/components/datatables/networks-datatable/networksDatatable.html b/app/docker/components/datatables/networks-datatable/networksDatatable.html
index 18a4a0c40..5457c76e4 100644
--- a/app/docker/components/datatables/networks-datatable/networksDatatable.html
+++ b/app/docker/components/datatables/networks-datatable/networksDatatable.html
@@ -6,9 +6,45 @@
           <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></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..."
+            auto-focus
+            ng-model-options="{ debounce: 300 }"
+            data-cy="network-searchInput"
+          />
+        </div>
+        <div class="actionBar !gap-3" ng-if="!$ctrl.offlineMode" authorization="DockerNetworkDelete, DockerNetworkCreate">
+          <button
+            type="button"
+            class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
+            authorization="DockerNetworkDelete"
+            ng-disabled="$ctrl.state.selectedItemCount === 0"
+            ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
+            data-cy="network-removeNetworkButton"
+          >
+            <pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
+          </button>
+          <button
+            type="button"
+            class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
+            ui-sref="docker.networks.new"
+            authorization="DockerNetworkCreate"
+            data-cy="network-addNetworkButton"
+          >
+            <pr-icon icon="'plus'" feather="true"></pr-icon>Add network
+          </button>
+        </div>
         <div class="settings">
           <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
-            <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
+            <span uib-dropdown-toggle aria-label="Settings">
+              <pr-icon icon="'more-vertical'" feather="true"></pr-icon>
+            </span>
             <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
               <div class="tableMenu">
                 <div class="menuHeader"> Table settings </div>
@@ -41,32 +77,6 @@
           </span>
         </div>
       </div>
-      <div class="actionBar" ng-if="!$ctrl.offlineMode" authorization="DockerNetworkDelete, DockerNetworkCreate">
-        <button
-          type="button"
-          class="btn btn-sm btn-danger"
-          authorization="DockerNetworkDelete"
-          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>
-        <button type="button" class="btn btn-sm btn-primary" ui-sref="docker.networks.new" authorization="DockerNetworkCreate">
-          <i class="fa fa-plus space-right" aria-hidden="true"></i>Add network
-        </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..."
-          auto-focus
-          ng-model-options="{ debounce: 300 }"
-        />
-      </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
           <thead>
@@ -183,7 +193,7 @@
       <div class="footer" ng-if="$ctrl.dataset">
         <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
         <div class="paginationControls">
-          <form class="form-inline">
+          <form class="form-inline vertical-center">
             <span class="limitSelector">
               <span style="margin-right: 5px"> Items per page </span>
               <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
diff --git a/app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html b/app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html
index 648869d74..8c7c99a9e 100644
--- a/app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html
+++ b/app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html
@@ -83,7 +83,7 @@
       </div>
       <div class="footer" ng-if="$ctrl.dataset">
         <div class="paginationControls">
-          <form class="form-inline">
+          <form class="form-inline vertical-center">
             <span class="limitSelector">
               <span style="margin-right: 5px"> Items per page </span>
               <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
diff --git a/app/docker/components/datatables/nodes-datatable/nodesDatatable.html b/app/docker/components/datatables/nodes-datatable/nodesDatatable.html
index a9b73a35c..ca2afcd99 100644
--- a/app/docker/components/datatables/nodes-datatable/nodesDatatable.html
+++ b/app/docker/components/datatables/nodes-datatable/nodesDatatable.html
@@ -6,9 +6,24 @@
           <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></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..."
+            auto-focus
+            ng-model-options="{ debounce: 300 }"
+            data-cy="node-searchInput"
+          />
+        </div>
         <div class="settings">
           <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
-            <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
+            <span uib-dropdown-toggle aria-label="Settings">
+              <pr-icon icon="'more-vertical'" feather="true"></pr-icon>
+            </span>
             <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
               <div class="tableMenu">
                 <div class="menuHeader"> Table settings </div>
@@ -41,18 +56,6 @@
           </span>
         </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="table-responsive">
         <table class="table table-hover nowrap-cells">
           <thead>
@@ -147,7 +150,7 @@
       </div>
       <div class="footer" ng-if="$ctrl.dataset">
         <div class="paginationControls">
-          <form class="form-inline">
+          <form class="form-inline vertical-center">
             <span class="limitSelector">
               <span style="margin-right: 5px"> Items per page </span>
               <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
diff --git a/app/docker/components/datatables/secrets-datatable/secretsDatatable.html b/app/docker/components/datatables/secrets-datatable/secretsDatatable.html
index 16df6c36c..66a1effb6 100644
--- a/app/docker/components/datatables/secrets-datatable/secretsDatatable.html
+++ b/app/docker/components/datatables/secrets-datatable/secretsDatatable.html
@@ -6,9 +6,45 @@
           <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></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..."
+            auto-focus
+            ng-model-options="{ debounce: 300 }"
+            data-cy="secret-searchInput"
+          />
+        </div>
+        <div class="actionBar !gap-3" ng-if="!$ctrl.offlineMode" authorization="DockerSecretDelete, DockerSecretCreate">
+          <button
+            type="button"
+            class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
+            authorization="DockerSecretDelete"
+            ng-disabled="$ctrl.state.selectedItemCount === 0"
+            ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
+            data-cy="secret-removeSecretButton"
+          >
+            <pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
+          </button>
+          <button
+            type="button"
+            class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
+            ui-sref="docker.secrets.new"
+            authorization="DockerSecretCreate"
+            data-cy="secret-addSecretButton"
+          >
+            <pr-icon icon="'plus'" feather="true"></pr-icon>Add secret
+          </button>
+        </div>
         <div class="settings">
           <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
-            <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
+            <span uib-dropdown-toggle aria-label="Settings">
+              <pr-icon icon="'more-vertical'" feather="true"></pr-icon>
+            </span>
             <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
               <div class="tableMenu">
                 <div class="menuHeader"> Table settings </div>
@@ -41,32 +77,6 @@
           </span>
         </div>
       </div>
-      <div class="actionBar" authorization="DockerSecretDelete, DockerSecretCreate">
-        <button
-          type="button"
-          class="btn btn-sm btn-danger"
-          authorization="DockerSecretDelete"
-          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>
-        <button type="button" class="btn btn-sm btn-primary" ui-sref="docker.secrets.new" authorization="DockerSecretCreate">
-          <i class="fa fa-plus space-right" aria-hidden="true"></i>Add secret
-        </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..."
-          auto-focus
-          ng-model-options="{ debounce: 300 }"
-        />
-      </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
           <thead>
@@ -130,7 +140,7 @@
       <div class="footer" ng-if="$ctrl.dataset">
         <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
         <div class="paginationControls">
-          <form class="form-inline">
+          <form class="form-inline vertical-center">
             <span class="limitSelector">
               <span style="margin-right: 5px"> Items per page </span>
               <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
diff --git a/app/docker/components/datatables/services-datatable/actions/servicesDatatableActions.html b/app/docker/components/datatables/services-datatable/actions/servicesDatatableActions.html
index 4b1db7d99..b0caabd49 100644
--- a/app/docker/components/datatables/services-datatable/actions/servicesDatatableActions.html
+++ b/app/docker/components/datatables/services-datatable/actions/servicesDatatableActions.html
@@ -3,21 +3,23 @@
     <button
       ng-if="$ctrl.showUpdateAction"
       type="button"
-      class="btn btn-sm btn-primary"
+      class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
       authorization="DockerServiceUpdate"
       ng-disabled="$ctrl.selectedItemCount === 0"
       ng-click="$ctrl.updateAction($ctrl.selectedItems)"
+      data-cy="service-updateServiceButton"
     >
-      <i class="fa fa-sync space-right" aria-hidden="true"></i>Update
+      <pr-icon icon="'refresh-cw'" feather="true" mode="'danger'"></pr-icon>Update
     </button>
     <button
       type="button"
-      class="btn btn-sm btn-danger"
+      class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
       authorization="DockerServiceDelete"
       ng-disabled="$ctrl.selectedItemCount === 0"
       ng-click="$ctrl.removeAction($ctrl.selectedItems)"
+      data-cy="service-removeServiceButton"
     >
-      <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
+      <pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
     </button>
   </div>
   <button type="button" class="btn btn-sm btn-primary" ui-sref="docker.services.new" ng-if="$ctrl.showAddAction" authorization="DockerServiceCreate">
diff --git a/app/docker/components/datatables/services-datatable/servicesDatatable.html b/app/docker/components/datatables/services-datatable/servicesDatatable.html
index 4632106ee..6bc848d13 100644
--- a/app/docker/components/datatables/services-datatable/servicesDatatable.html
+++ b/app/docker/components/datatables/services-datatable/servicesDatatable.html
@@ -6,10 +6,32 @@
           <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></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..."
+            auto-focus
+            ng-model-options="{ debounce: 300 }"
+            data-cy="service-searchInput"
+          />
+        </div>
+        <services-datatable-actions
+          selected-items="$ctrl.state.selectedItems"
+          selected-item-count="$ctrl.state.selectedItemCount"
+          show-add-action="$ctrl.showAddAction"
+          show-update-action="$ctrl.showUpdateAction"
+          endpoint-id="$ctrl.endpointId"
+        ></services-datatable-actions>
         <div class="settings">
           <datatable-columns-visibility columns="$ctrl.columnVisibility.columns" on-change="($ctrl.onColumnVisibilityChange)"></datatable-columns-visibility>
           <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
-            <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
+            <span uib-dropdown-toggle aria-label="Settings">
+              <pr-icon icon="'more-vertical'" feather="true"></pr-icon>
+            </span>
             <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
               <div class="tableMenu">
                 <div class="menuHeader"> Table settings </div>
@@ -42,25 +64,6 @@
           </span>
         </div>
       </div>
-      <services-datatable-actions
-        selected-items="$ctrl.state.selectedItems"
-        selected-item-count="$ctrl.state.selectedItemCount"
-        show-add-action="$ctrl.showAddAction"
-        show-update-action="$ctrl.showUpdateAction"
-        endpoint-id="$ctrl.endpointId"
-      ></services-datatable-actions>
-      <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..."
-          focus-if="!$ctrl.notAutoFocus"
-          ng-model-options="{ debounce: 300 }"
-        />
-      </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
           <thead>
@@ -215,7 +218,7 @@
       <div class="footer" ng-if="$ctrl.dataset">
         <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
         <div class="paginationControls">
-          <form class="form-inline">
+          <form class="form-inline vertical-center">
             <span class="limitSelector">
               <span style="margin-right: 5px"> Items per page </span>
               <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
diff --git a/app/docker/components/datatables/tasks-datatable/tasksDatatable.html b/app/docker/components/datatables/tasks-datatable/tasksDatatable.html
index 9ea33b571..767223757 100644
--- a/app/docker/components/datatables/tasks-datatable/tasksDatatable.html
+++ b/app/docker/components/datatables/tasks-datatable/tasksDatatable.html
@@ -102,7 +102,7 @@
       </div>
       <div class="footer" ng-if="$ctrl.dataset">
         <div class="paginationControls">
-          <form class="form-inline">
+          <form class="form-inline vertical-center">
             <span class="limitSelector">
               <span style="margin-right: 5px"> Items per page </span>
               <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
diff --git a/app/docker/components/datatables/volumes-datatable/volumesDatatable.html b/app/docker/components/datatables/volumes-datatable/volumesDatatable.html
index f999b3276..a1f0a9073 100644
--- a/app/docker/components/datatables/volumes-datatable/volumesDatatable.html
+++ b/app/docker/components/datatables/volumes-datatable/volumesDatatable.html
@@ -6,9 +6,45 @@
           <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></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..."
+            auto-focus
+            ng-model-options="{ debounce: 300 }"
+            data-cy="volume-searchInput"
+          />
+        </div>
+        <div class="actionBar !gap-3" ng-if="!$ctrl.offlineMode" authorization="DockerVolumeDelete, DockerVolumeCreate">
+          <button
+            type="button"
+            class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
+            authorization="DockerVolumeDelete"
+            ng-disabled="$ctrl.state.selectedItemCount === 0"
+            ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
+            data-cy="volume-removeVolumeButton"
+          >
+            <pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
+          </button>
+          <button
+            type="button"
+            class="btn btn-sm btn-primary h-fit vertical-center !ml-0"
+            ui-sref="docker.volumes.new"
+            authorization="DockerVolumeCreate"
+            data-cy="volume-addVolumeButton"
+          >
+            <pr-icon icon="'plus'" feather="true"></pr-icon>Add volume
+          </button>
+        </div>
         <div class="settings">
           <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
-            <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
+            <span uib-dropdown-toggle aria-label="Settings">
+              <pr-icon icon="'more-vertical'" feather="true"></pr-icon>
+            </span>
             <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
               <div class="tableMenu">
                 <div class="menuHeader"> Table settings </div>
@@ -41,32 +77,6 @@
           </span>
         </div>
       </div>
-      <div class="actionBar" ng-if="!$ctrl.offlineMode" authorization="DockerVolumeDelete, DockerVolumeCreate">
-        <button
-          type="button"
-          class="btn btn-sm btn-danger"
-          authorization="DockerVolumeDelete"
-          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>
-        <button type="button" class="btn btn-sm btn-primary" ui-sref="docker.volumes.new" authorization="DockerVolumeCreate">
-          <i class="fa fa-plus space-right" aria-hidden="true"></i>Add volume
-        </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..."
-          auto-focus
-          ng-model-options="{ debounce: 300 }"
-        />
-      </div>
       <div class="table-responsive">
         <table class="table table-hover table-filters nowrap-cells">
           <thead>
@@ -193,7 +203,7 @@
       <div class="footer" ng-if="$ctrl.dataset">
         <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
         <div class="paginationControls">
-          <form class="form-inline">
+          <form class="form-inline vertical-center">
             <span class="limitSelector">
               <span style="margin-right: 5px"> Items per page </span>
               <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
diff --git a/app/portainer/components/datatables/registries-datatable/registriesDatatable.html b/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
index 4e3128ed4..3bf95f251 100644
--- a/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
+++ b/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
@@ -1,32 +1,39 @@
 <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" ng-if="$ctrl.isAdmin">
-        <button
-          ng-if="!$ctrl.endpointType"
-          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>
-        <button type="button" class="btn btn-sm btn-primary" ui-sref="portainer.registries.new" data-cy="add-registry">
-          <i class="fa fa-plus space-right" aria-hidden="true"></i>Add registry
-        </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..."
-          auto-focus
-          ng-model-options="{ debounce: 300 }"
-        />
+      <div class="toolBar">
+        <div class="toolBarTitle vertical-center">
+          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></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..."
+            auto-focus
+            ng-model-options="{ debounce: 300 }"
+            data-cy="volume-searchInput"
+          />
+        </div>
+        <div class="actionBar !gap-3" ng-if="$ctrl.isAdmin">
+          <button
+            ng-if="!$ctrl.endpointType"
+            type="button"
+            class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
+            ng-disabled="$ctrl.state.selectedItemCount === 0"
+            ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
+            data-cy="registry-removeRegistryButton"
+          >
+            <pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
+          </button>
+          <button type="button" class="btn btn-sm btn-primary h-fit vertical-center !ml-0" ui-sref="portainer.registries.new" data-cy="registry-addRegistryButton">
+            <pr-icon icon="'plus'" feather="true"></pr-icon>Add registry
+          </button>
+        </div>
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">