From 1ca1ecf4309d4ddf4960413c6c750c34733e3c94 Mon Sep 17 00:00:00 2001
From: SanjalKatiyar <sanjaldhir@gmail.com>
Date: Mon, 21 Oct 2024 12:58:50 +0530
Subject: [PATCH] Fix Clients' list page filtering

---
 .../storage-consumers/client-list.tsx         | 20 ++++++++++++++-----
 .../storage-consumers/list-filter.ts          | 15 ++++++++++++++
 packages/shared/src/utils/common.ts           |  4 ++++
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/packages/odf/components/storage-consumers/client-list.tsx b/packages/odf/components/storage-consumers/client-list.tsx
index a105efb7d..46b3f806c 100644
--- a/packages/odf/components/storage-consumers/client-list.tsx
+++ b/packages/odf/components/storage-consumers/client-list.tsx
@@ -46,6 +46,7 @@ import {
   clientHeartBeatFilter,
   getMajorMinorVersion,
   versionMismatchFilter,
+  storageConsumerNameFilter,
 } from './list-filter';
 import { ClientOnBoardingModal } from './onboarding-modal';
 import { RotateKeysModal } from './rotate-keys-modal';
@@ -424,14 +425,23 @@ export const ClientListPage: React.FC<ClientListPageProps> = () => {
   });
   const serviceVersion = getOprVersionFromCSV(csv);
 
-  const rowFilters = React.useMemo(
-    () => [clientHeartBeatFilter(t), versionMismatchFilter(t, serviceVersion)],
-    [t, serviceVersion]
-  );
+  // "rowFilters":
+  // - custom filters (new) that we are introducing to the list page
+  // - passing to both "useListPageFilter" hook & "ListPageFilter" component
+  // "rowFiltersWithNameOverride":
+  // - needed for overriding the filtering (default) on the CR's "name" (need to read the name from the CR's status instead)
+  // - only passing to "useListPageFilter" hook & not "ListPageFilter" component
+  const [rowFilters, rowFiltersWithNameOverride] = React.useMemo(() => {
+    const customFilters = [
+      clientHeartBeatFilter(t),
+      versionMismatchFilter(t, serviceVersion),
+    ];
+    return [customFilters, [storageConsumerNameFilter(), ...customFilters]];
+  }, [t, serviceVersion]);
 
   const [data, filteredData, onFilterChange] = useListPageFilter(
     storageClients,
-    rowFilters
+    rowFiltersWithNameOverride
   );
 
   const launchModalOnClick = (modalComponent: ModalComponent) => () => {
diff --git a/packages/odf/components/storage-consumers/list-filter.ts b/packages/odf/components/storage-consumers/list-filter.ts
index 5398c0664..180e3d3d7 100644
--- a/packages/odf/components/storage-consumers/list-filter.ts
+++ b/packages/odf/components/storage-consumers/list-filter.ts
@@ -1,5 +1,6 @@
 import { getTimeDifferenceInSeconds } from '@odf/shared/details-page/datetime';
 import { StorageConsumerKind } from '@odf/shared/types';
+import { fuzzyCaseInsensitive } from '@odf/shared/utils';
 import { RowFilter } from '@openshift-console/dynamic-plugin-sdk';
 import * as _ from 'lodash-es';
 
@@ -75,3 +76,17 @@ export const versionMismatchFilter = (
     );
   },
 });
+
+// overrides default "name" search filter
+export const storageConsumerNameFilter =
+  (): RowFilter<StorageConsumerKind> => ({
+    type: 'name',
+    filterGroupName: '',
+    reducer: () => undefined,
+    items: [],
+    filter: (filterValue, storageConsumer) =>
+      fuzzyCaseInsensitive(
+        filterValue.selected?.[0],
+        storageConsumer?.status?.client?.name || ''
+      ),
+  });
diff --git a/packages/shared/src/utils/common.ts b/packages/shared/src/utils/common.ts
index a09aec3bc..3193a6330 100644
--- a/packages/shared/src/utils/common.ts
+++ b/packages/shared/src/utils/common.ts
@@ -9,6 +9,7 @@ import {
 } from '@openshift-console/dynamic-plugin-sdk';
 import { K8sResourceCommon } from '@openshift-console/dynamic-plugin-sdk-internal/lib/extensions/console-types';
 import { K8sKind } from '@openshift-console/dynamic-plugin-sdk/lib/api/common-types';
+import * as fuzzy from 'fuzzysearch';
 import * as _ from 'lodash-es';
 import { GetAPIVersionForModel } from '../types';
 
@@ -181,3 +182,6 @@ export const numberInputOnChange =
     else if (!!max && inputValue > max) onChange(max);
     else onChange(inputValue);
   };
+
+export const fuzzyCaseInsensitive = (a: string, b: string): boolean =>
+  fuzzy(_.toLower(a), _.toLower(b));