From fe9db71ba8f1ee52c2a7fefde822b26c55c88636 Mon Sep 17 00:00:00 2001
From: Maxime-J <Maxime-J@users.noreply.github.com>
Date: Mon, 15 Apr 2024 07:45:56 +0000
Subject: [PATCH] Restore client-side search where needed.

---
 src/components/metrics/CountriesTable.tsx |  1 +
 src/components/metrics/DevicesTable.tsx   |  1 +
 src/components/metrics/LanguagesTable.tsx |  1 +
 src/components/metrics/MetricsTable.tsx   | 12 +++++++++++-
 src/components/metrics/RegionsTable.tsx   |  1 +
 5 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/metrics/CountriesTable.tsx b/src/components/metrics/CountriesTable.tsx
index e38666bfd..4a5db7fd2 100644
--- a/src/components/metrics/CountriesTable.tsx
+++ b/src/components/metrics/CountriesTable.tsx
@@ -42,6 +42,7 @@ export function CountriesTable({
       metric={formatMessage(labels.visitors)}
       renderLabel={renderLink}
       onDataLoad={handleDataLoad}
+      searchFormattedValues={true}
     />
   );
 }
diff --git a/src/components/metrics/DevicesTable.tsx b/src/components/metrics/DevicesTable.tsx
index 4df331a4b..7e078986a 100644
--- a/src/components/metrics/DevicesTable.tsx
+++ b/src/components/metrics/DevicesTable.tsx
@@ -27,6 +27,7 @@ export function DevicesTable(props: MetricsTableProps) {
       type="device"
       metric={formatMessage(labels.visitors)}
       renderLabel={renderLink}
+      searchFormattedValues={true}
     />
   );
 }
diff --git a/src/components/metrics/LanguagesTable.tsx b/src/components/metrics/LanguagesTable.tsx
index 67b6e6223..f6a4de564 100644
--- a/src/components/metrics/LanguagesTable.tsx
+++ b/src/components/metrics/LanguagesTable.tsx
@@ -24,6 +24,7 @@ export function LanguagesTable({
       metric={formatMessage(labels.visitors)}
       onDataLoad={data => onDataLoad?.(percentFilter(data))}
       renderLabel={renderLabel}
+      searchFormattedValues={true}
     />
   );
 }
diff --git a/src/components/metrics/MetricsTable.tsx b/src/components/metrics/MetricsTable.tsx
index 26355018f..87779f947 100644
--- a/src/components/metrics/MetricsTable.tsx
+++ b/src/components/metrics/MetricsTable.tsx
@@ -28,6 +28,7 @@ export interface MetricsTableProps extends ListTableProps {
   onDataLoad?: (data: any) => void;
   onSearch?: (search: string) => void;
   allowSearch?: boolean;
+  searchFormattedValues?: boolean;
   children?: ReactNode;
 }
 
@@ -40,6 +41,7 @@ export function MetricsTable({
   onDataLoad,
   delay = null,
   allowSearch = false,
+  searchFormattedValues = false,
   children,
   ...props
 }: MetricsTableProps) {
@@ -69,7 +71,7 @@ export function MetricsTable({
       region,
       city,
       limit,
-      search,
+      search: (searchFormattedValues) ? undefined : search,
     },
     { retryDelay: delay || DEFAULT_ANIMATION_DURATION, onDataLoad },
   );
@@ -88,6 +90,14 @@ export function MetricsTable({
         }
       }
 
+      if (searchFormattedValues && search) {
+        items = items.filter(({ x, ...data }) => {
+          const value = formatValue(x, type, data);
+
+          return value?.toLowerCase().includes(search.toLowerCase());
+        });
+      }
+
       items = percentFilter(items);
 
       return items;
diff --git a/src/components/metrics/RegionsTable.tsx b/src/components/metrics/RegionsTable.tsx
index 65c91f211..174ccf0e1 100644
--- a/src/components/metrics/RegionsTable.tsx
+++ b/src/components/metrics/RegionsTable.tsx
@@ -35,6 +35,7 @@ export function RegionsTable(props: MetricsTableProps) {
       metric={formatMessage(labels.visitors)}
       dataFilter={emptyFilter}
       renderLabel={renderLink}
+      searchFormattedValues={true}
     />
   );
 }