fix search box for group (#7446)

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>

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>

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

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>

app/portainer/components/group-association-table/group-association-table.js

@@ -65,5 +65,6 @@ angular.module('portainer.app').component('groupAssociationTable', {
     showGroups: '<',
     hasBackendPagination: '<',
     cyValue: '@',
+    title: '@',
   },
 });

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>