From fb14a854831beeef9f6a560f4643539f2ad9bc6a Mon Sep 17 00:00:00 2001
From: Richard Wei <54336863+WaysonWei@users.noreply.github.com>
Date: Tue, 9 Aug 2022 12:43:37 +1200
Subject: [PATCH] fix search box for group (#7446)

---
 app/edge/components/group-form/groupForm.html |  4 ++--
 .../associatedEndpointsSelector.html          | 20 +++++++++----------
 .../components/datatables/datatable.css       | 13 ++++++++++++
 .../forms/group-form/groupForm.html           | 20 +++++++++----------
 .../group-association-table.js                |  1 +
 .../groupAssociationTable.html                |  9 ++++++---
 6 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/app/edge/components/group-form/groupForm.html b/app/edge/components/group-form/groupForm.html
index 052aa9f2a..e4aa984b3 100644
--- a/app/edge/components/group-form/groupForm.html
+++ b/app/edge/components/group-form/groupForm.html
@@ -105,8 +105,7 @@
 
     <tag-selector ng-if="$ctrl.model.TagIds" value="$ctrl.model.TagIds" on-change="($ctrl.onChangeTags)"> </tag-selector>
 
-    <div class="col-sm-12 form-section-title"> Associated environments by tags </div>
-    <div class="col-sm-12 form-group">
+    <div class="table-in-row">
       <group-association-table
         loaded="$ctrl.loaded"
         page-type="$ctrl.pageType"
@@ -120,6 +119,7 @@
         groups="$ctrl.groups"
         show-groups="true"
         has-backend-pagination="true"
+        title="Associated environments by tags"
       ></group-association-table>
     </div>
   </div>
diff --git a/app/portainer/components/associated-endpoints-selector/associatedEndpointsSelector.html b/app/portainer/components/associated-endpoints-selector/associatedEndpointsSelector.html
index d9f66635a..95292d71f 100644
--- a/app/portainer/components/associated-endpoints-selector/associatedEndpointsSelector.html
+++ b/app/portainer/components/associated-endpoints-selector/associatedEndpointsSelector.html
@@ -3,10 +3,9 @@
   to the other.
 </div>
 <div class="col-sm-12" style="margin-top: 20px">
-  <!-- available-endpoints -->
-  <div class="col-sm-6">
-    <div class="text-center small text-muted">Available environments</div>
-    <div style="margin-top: 10px">
+  <div class="table-row-container">
+    <!-- available-endpoints -->
+    <div class="datatable table-in-row">
       <group-association-table
         loaded="$ctrl.loaded"
         page-type="$ctrl.pageType"
@@ -21,15 +20,13 @@
         groups="$ctrl.groups"
         show-groups="true"
         has-backend-pagination="true"
+        title="Available environments"
         data-cy="edgeGroupCreate-availableEndpoints"
       ></group-association-table>
     </div>
-  </div>
-  <!-- !available-endpoints -->
-  <!-- associated-endpoints -->
-  <div class="col-sm-6">
-    <div class="text-center small text-muted">Associated environments</div>
-    <div style="margin-top: 10px">
+    <!-- !available-endpoints -->
+    <!-- associated-endpoints -->
+    <div class="datatable table-in-row">
       <group-association-table
         loaded="$ctrl.loaded"
         page-type="$ctrl.pageType"
@@ -44,9 +41,10 @@
         groups="$ctrl.groups"
         show-groups="true"
         has-backend-pagination="true"
+        title="Associated environments"
         data-cy="edgeGroupCreate-associatedEndpoints"
       ></group-association-table>
     </div>
+    <!-- !associated-endpoints -->
   </div>
-  <!-- !associated-endpoints -->
 </div>
diff --git a/app/portainer/components/datatables/datatable.css b/app/portainer/components/datatables/datatable.css
index f808afd5a..003a5150e 100644
--- a/app/portainer/components/datatables/datatable.css
+++ b/app/portainer/components/datatables/datatable.css
@@ -348,3 +348,16 @@
   border: none;
   background: none;
 }
+
+/* Multiple Tables in a row */
+.table-row-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 10px;
+}
+.table-in-row {
+  border: 1px solid var(--border-widget);
+  border-radius: 8px;
+  flex-grow: 2;
+}
diff --git a/app/portainer/components/forms/group-form/groupForm.html b/app/portainer/components/forms/group-form/groupForm.html
index 68c67df31..b23083792 100644
--- a/app/portainer/components/forms/group-form/groupForm.html
+++ b/app/portainer/components/forms/group-form/groupForm.html
@@ -39,9 +39,8 @@
       </div>
       <div class="col-sm-12" style="margin-top: 20px">
         <!-- available-endpoints -->
-        <div class="col-sm-6">
-          <div class="text-center small text-muted">Available environments</div>
-          <div style="margin-top: 10px">
+        <div class="table-row-container">
+          <div class="datatable table-in-row">
             <group-association-table
               loaded="$ctrl.loaded"
               page-type="$ctrl.pageType"
@@ -51,15 +50,13 @@
               entry-click="$ctrl.associateEndpoint"
               pagination-state="$ctrl.state.available"
               empty-dataset-message="No environment available"
+              title="Available environments"
               cy-value="available-endpoints"
             ></group-association-table>
           </div>
-        </div>
-        <!-- !available-endpoints -->
-        <!-- associated-endpoints -->
-        <div class="col-sm-6">
-          <div class="text-center small text-muted">Associated environments</div>
-          <div style="margin-top: 10px">
+          <!-- !available-endpoints -->
+          <!-- associated-endpoints -->
+          <div class="table-in-row">
             <group-association-table
               loaded="$ctrl.loaded"
               page-type="$ctrl.pageType"
@@ -70,6 +67,7 @@
               pagination-state="$ctrl.state.associated"
               empty-dataset-message="No associated environment"
               has-backend-pagination="this.pageType !== 'create'"
+              title="Associated environments"
               cy-value="associated-endpoints"
             ></group-association-table>
           </div>
@@ -79,8 +77,7 @@
     </div>
   </div>
   <div ng-if="$ctrl.model.Id === 1">
-    <div class="col-sm-12 form-section-title"> Unassociated environments </div>
-    <div style="margin-top: 10px">
+    <div class="table-in-row">
       <group-association-table
         loaded="$ctrl.loaded"
         page-type="$ctrl.pageType"
@@ -89,6 +86,7 @@
         dataset="$ctrl.associatedEndpoints"
         pagination-state="$ctrl.state.associated"
         empty-dataset-message="No environment available"
+        title="Unassociated environments"
       ></group-association-table>
     </div>
   </div>
diff --git a/app/portainer/components/group-association-table/group-association-table.js b/app/portainer/components/group-association-table/group-association-table.js
index 25a795922..80bbf6a2d 100644
--- a/app/portainer/components/group-association-table/group-association-table.js
+++ b/app/portainer/components/group-association-table/group-association-table.js
@@ -65,5 +65,6 @@ angular.module('portainer.app').component('groupAssociationTable', {
     showGroups: '<',
     hasBackendPagination: '<',
     cyValue: '@',
+    title: '@',
   },
 });
diff --git a/app/portainer/components/group-association-table/groupAssociationTable.html b/app/portainer/components/group-association-table/groupAssociationTable.html
index 03f0dd47a..f3f278b27 100644
--- a/app/portainer/components/group-association-table/groupAssociationTable.html
+++ b/app/portainer/components/group-association-table/groupAssociationTable.html
@@ -1,7 +1,8 @@
 <div class="datatable">
-  <table class="table table-hover" data-cy="{{ $ctrl.cyValue }}">
-    <div class="col-sm-12 vertical-center mb-1">
-      <pr-icon icon="'search'" feather="true"></pr-icon>
+  <div class="toolBar">
+    <div class="toolBarTitle">{{ $ctrl.title }}</div>
+    <div class="searchBar vertical-center">
+      <pr-icon icon="'search'" feather="true" class-name="'searchIcon'"></pr-icon>
       <input
         type="text"
         class="searchInput"
@@ -11,6 +12,8 @@
         placeholder="Search..."
       />
     </div>
+  </div>
+  <table class="table table-hover" data-cy="{{ $ctrl.cyValue }}">
     <thead>
       <tr>
         <th> Name </th>