From 6d25f2d91c131bbbbe41622c6de8676b84c48a45 Mon Sep 17 00:00:00 2001
From: Vincenzo Scamporlino <vincenzos@spotify.com>
Date: Sun, 10 Mar 2024 20:21:30 +0100
Subject: [PATCH] catalog-react: EntitySearchBar persist text in query params

Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>
---
 .../EntitySearchBar/EntitySearchBar.test.tsx  | 14 ++++++-----
 .../EntitySearchBar/EntitySearchBar.tsx       | 23 +++++++++++++++----
 plugins/catalog-react/src/filters.ts          |  4 ++++
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.test.tsx b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.test.tsx
index 94db377e26..7dd8c792d7 100644
--- a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.test.tsx
+++ b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.test.tsx
@@ -17,7 +17,6 @@
 import React from 'react';
 import { fireEvent, render, waitFor, screen } from '@testing-library/react';
 import { EntitySearchBar } from './EntitySearchBar';
-import { DefaultEntityFilters } from '../../hooks/useEntityListProvider';
 import { EntityTextFilter } from '../../filters';
 import { MockEntityListContextProvider } from '../../testUtils/providers';
 
@@ -25,12 +24,15 @@ describe('EntitySearchBar', () => {
   it('should display search value and execute set callback', async () => {
     const updateFilters = jest.fn();
 
-    const filters: DefaultEntityFilters = {
-      text: new EntityTextFilter('hello'),
-    };
-
     render(
-      <MockEntityListContextProvider value={{ updateFilters, filters }}>
+      <MockEntityListContextProvider
+        value={{
+          updateFilters,
+          queryParameters: {
+            text: 'hello',
+          },
+        }}
+      >
         <EntitySearchBar />
       </MockEntityListContextProvider>,
     );
diff --git a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx
index 91e411c562..a56119ac70 100644
--- a/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx
+++ b/plugins/catalog-react/src/components/EntitySearchBar/EntitySearchBar.tsx
@@ -24,8 +24,8 @@ import {
 } from '@material-ui/core';
 import Clear from '@material-ui/icons/Clear';
 import Search from '@material-ui/icons/Search';
-import React, { useState } from 'react';
-import useDebounce from 'react-use/esm/useDebounce';
+import React, { useEffect, useMemo, useState } from 'react';
+import useDebounce from 'react-use/lib/useDebounce';
 import { useEntityList } from '../../hooks/useEntityListProvider';
 import { EntityTextFilter } from '../../filters';
 
@@ -52,8 +52,17 @@ const useStyles = makeStyles(
 export const EntitySearchBar = () => {
   const classes = useStyles();
 
-  const { filters, updateFilters } = useEntityList();
-  const [search, setSearch] = useState(filters.text?.value ?? '');
+  const {
+    updateFilters,
+    queryParameters: { text: textParameter },
+  } = useEntityList();
+
+  const queryParamTextFilter = useMemo(
+    () => [textParameter].flat()[0],
+    [textParameter],
+  );
+
+  const [search, setSearch] = useState(queryParamTextFilter ?? '');
 
   useDebounce(
     () => {
@@ -65,6 +74,12 @@ export const EntitySearchBar = () => {
     [search, updateFilters],
   );
 
+  useEffect(() => {
+    if (queryParamTextFilter) {
+      setSearch(queryParamTextFilter);
+    }
+  }, [queryParamTextFilter]);
+
   return (
     <Toolbar className={classes.searchToolbar}>
       <FormControl>
diff --git a/plugins/catalog-react/src/filters.ts b/plugins/catalog-react/src/filters.ts
index dda13338a7..08be27a561 100644
--- a/plugins/catalog-react/src/filters.ts
+++ b/plugins/catalog-react/src/filters.ts
@@ -116,6 +116,10 @@ export class EntityTextFilter implements EntityFilter {
     };
   }
 
+  toQueryValue() {
+    return this.value;
+  }
+
   private toUpperArray(
     value: Array<string | string[] | undefined>,
   ): Array<string> {