catalog-react: EntitySearchBar persist text in query params

Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>

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>,
     );

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>

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> {