From 3d27f1c3ced358bbc031a34331db99990f3d9356 Mon Sep 17 00:00:00 2001
From: LIDRISSI Hamid <lidrissi.hamid@gmail.com>
Date: Mon, 13 Jan 2025 14:17:42 +0100
Subject: [PATCH] fix(pci-object-storage): adapte search filter to MRC ods18
 version

ref: DTCORE-2950
Signed-off-by: LIDRISSI Hamid <lidrissi.hamid@gmail.com>
---
 .../pages/objects/container/Listing.page.tsx  | 63 ++++++++-------
 .../container/object/show/Show.page.tsx       | 49 ++++++------
 .../objects/container/users/Listing.page.tsx  | 79 +++++++++----------
 3 files changed, 92 insertions(+), 99 deletions(-)

diff --git a/packages/manager/apps/pci-object-storage/src/pages/objects/container/Listing.page.tsx b/packages/manager/apps/pci-object-storage/src/pages/objects/container/Listing.page.tsx
index 6e28d946b296..3642c985e0e2 100644
--- a/packages/manager/apps/pci-object-storage/src/pages/objects/container/Listing.page.tsx
+++ b/packages/manager/apps/pci-object-storage/src/pages/objects/container/Listing.page.tsx
@@ -89,7 +89,7 @@ export default function ListingPage() {
             });
           }}
         />
-        <div className="justify-between flex space-x-4">
+        <div className="flex justify-center gap-4">
           <OdsButton
             size="sm"
             variant="outline"
@@ -101,41 +101,40 @@ export default function ListingPage() {
             label=""
           />
           <OdsInput
-            type="search"
             name="searchField"
-            className="w-[70%]"
+            className="min-w-[15rem]"
             value={searchField}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter') {
-                setPagination({
-                  pageIndex: 0,
-                  pageSize: pagination.pageSize,
-                });
-                addFilter({
-                  key: 'name',
-                  value: searchField,
-                  comparator: FilterComparator.Includes,
-                  label: '',
-                });
-                setSearchField('');
-              }
-            }}
-            onOdsChange={(event) => {
-              const value = event.detail.value.toString();
-              setSearchField(value);
+            onOdsChange={({ detail }) => setSearchField(detail.value as string)}
+          />
+          <OdsButton
+            label=""
+            icon="magnifying-glass"
+            size="sm"
+            onClick={() => {
+              setPagination({
+                pageIndex: 0,
+                pageSize: pagination.pageSize,
+              });
+              addFilter({
+                key: 'name',
+                value: searchField,
+                comparator: FilterComparator.Includes,
+                label: '',
+              });
+              setSearchField('');
             }}
           />
-          <div>
-            <OdsButton
-              slot="popover-trigger"
-              id="popover-filter"
-              size="sm"
-              color="primary"
-              label={t('pci-common:common_criteria_adder_filter_label')}
-              variant="outline"
-              icon="filter"
-            />
-          </div>
+
+          <OdsButton
+            slot="popover-trigger"
+            id="popover-filter"
+            size="sm"
+            color="primary"
+            label={t('pci-common:common_criteria_adder_filter_label')}
+            variant="outline"
+            icon="filter"
+          />
+
           <OdsPopover triggerId="popover-filter">
             <FilterAdd
               columns={[
diff --git a/packages/manager/apps/pci-object-storage/src/pages/objects/container/object/show/Show.page.tsx b/packages/manager/apps/pci-object-storage/src/pages/objects/container/object/show/Show.page.tsx
index bd04ae715c7f..9cb4220b227d 100644
--- a/packages/manager/apps/pci-object-storage/src/pages/objects/container/object/show/Show.page.tsx
+++ b/packages/manager/apps/pci-object-storage/src/pages/objects/container/object/show/Show.page.tsx
@@ -459,41 +459,42 @@ export default function ObjectPage() {
               size="sm"
             />
 
-            <div className="justify-between flex">
+            <div className="flex justify-center gap-4">
               <OdsInput
-                type="search"
                 name="searchField"
-                className="w-[70%]"
+                className="min-w-[15rem]"
                 value={searchField}
-                onKeyDown={(event) => {
-                  if (event.key === 'Enter') {
-                    if (searchField) {
-                      setSearchField('');
-                      addFilter({
-                        key: 'name',
-                        value: searchField,
-                        comparator: FilterComparator.Includes,
-                        label: '',
-                      });
-                    }
-                  }
-                }}
-                onOdsChange={(event) => {
-                  const value = event.detail.value.toString();
-                  setSearchField(value);
+                onOdsChange={({ detail }) =>
+                  setSearchField(detail.value as string)
+                }
+              />
+              <OdsButton
+                label=""
+                icon="magnifying-glass"
+                size="sm"
+                onClick={() => {
+                  setPagination({
+                    pageIndex: 0,
+                    pageSize: pagination.pageSize,
+                  });
+                  addFilter({
+                    key: 'search',
+                    value: searchField,
+                    comparator: FilterComparator.Includes,
+                    label: '',
+                  });
+                  setSearchField('');
                 }}
               />
 
               <OdsButton
                 id="filterPopoverTrigger"
-                slot="popover-trigger"
-                class="ml-4"
-                label={tFilter('common_criteria_adder_filter_label')}
-                icon="filter"
                 size="sm"
+                color="primary"
+                label={tFilter('common_criteria_adder_filter_label')}
                 variant="outline"
+                icon="filter"
               />
-
               <OdsPopover triggerId="filterPopoverTrigger">
                 <FilterAdd
                   columns={[
diff --git a/packages/manager/apps/pci-object-storage/src/pages/objects/container/users/Listing.page.tsx b/packages/manager/apps/pci-object-storage/src/pages/objects/container/users/Listing.page.tsx
index 9636630f63b7..210a424ce363 100644
--- a/packages/manager/apps/pci-object-storage/src/pages/objects/container/users/Listing.page.tsx
+++ b/packages/manager/apps/pci-object-storage/src/pages/objects/container/users/Listing.page.tsx
@@ -90,57 +90,50 @@ export default function Listing() {
           }}
         />
 
-        <div className="justify-between flex">
+        <div className="flex justify-center gap-4">
           <OdsButton
-            data-testid="refresh-button"
-            label=""
             size="sm"
-            icon="refresh"
             variant="outline"
             color="primary"
-            className="xs:mb-0.5 sm:mb-0 mr-4"
-            onClick={() => {
-              refresh();
-            }}
-          ></OdsButton>
+            className="xs:mb-0.5 sm:mb-0"
+            onClick={refresh}
+            icon="refresh"
+            label=""
+          />
           <OdsInput
-            data-testid="search-bar"
-            className="w-[14rem]"
-            value={searchField}
-            type="search"
-            color="primary"
             name="searchField"
-            onKeyDown={(event) => {
-              if (event.key === 'Enter') {
-                setPagination({
-                  pageIndex: 0,
-                  pageSize: pagination.pageSize,
-                });
-                addFilter({
-                  key: 'search',
-                  value: searchField,
-                  comparator: FilterComparator.Includes,
-                  label: '',
-                });
-                setSearchField('');
-              }
-            }}
-            onOdsChange={(event) => {
-              const value = event.detail.value.toString();
-              setSearchField(value);
+            className="min-w-[15rem]"
+            value={searchField}
+            onOdsChange={({ detail }) => setSearchField(detail.value as string)}
+          />
+          <OdsButton
+            label=""
+            icon="magnifying-glass"
+            size="sm"
+            onClick={() => {
+              setPagination({
+                pageIndex: 0,
+                pageSize: pagination.pageSize,
+              });
+              addFilter({
+                key: 'search',
+                value: searchField,
+                comparator: FilterComparator.Includes,
+                label: '',
+              });
+              setSearchField('');
             }}
           />
-          <div>
-            <OdsButton
-              label={tFilter('common_criteria_adder_filter_label')}
-              size="sm"
-              color="primary"
-              id="popover-filter"
-              icon="filter"
-              variant="outline"
-              class="ml-4"
-            />
-          </div>
+
+          <OdsButton
+            slot="popover-trigger"
+            id="popover-filter"
+            size="sm"
+            color="primary"
+            label={t('pci-common:common_criteria_adder_filter_label')}
+            variant="outline"
+            icon="filter"
+          />
           <OdsPopover triggerId="popover-filter">
             <FilterAdd
               columns={[