Make sidebar search field work (#3362)

* Make sidebar search field work

Extend the search page to have the ability to react to query parameters. The search in the sidebar now navigates to the search page and passes the query parameter. The search box on the search page is now debounced.

Closes #3341

* Fix sidebar search while the search page is already open

packages/app/src/components/Root/Root.tsx

@@ -33,12 +33,12 @@ import {
   SidebarContext,
   SidebarItem,
   SidebarDivider,
-  SidebarSearchField,
   SidebarSpace,
 } from '@backstage/core';
 import { NavLink } from 'react-router-dom';
 import { graphiQLRouteRef } from '@backstage/plugin-graphiql';
 import { Settings as SidebarSettings } from '@backstage/plugin-user-settings';
+import { SidebarSearch } from '@backstage/plugin-search';
 
 const useSidebarLogoStyles = makeStyles({
   root: {
@@ -73,17 +73,11 @@ const SidebarLogo: FC<{}> = () => {
   );
 };
 
-const handleSearch = (query: string): void => {
-  // XXX (@koroeskohr): for testing purposes
-  // eslint-disable-next-line no-console
-  console.log(query);
-};
-
 const Root: FC<{}> = ({ children }) => (
   <SidebarPage>
     <Sidebar>
       <SidebarLogo />
-      <SidebarSearchField onSearch={handleSearch} />
+      <SidebarSearch />
       <SidebarDivider />
       {/* Global nav, not org-specific */}
       <SidebarItem icon={HomeIcon} to="/catalog" text="Home" />

packages/core/src/hooks/useQueryParamState.ts

@@ -14,8 +14,9 @@
  * limitations under the License.
  */
 
+import { isEqual } from 'lodash';
 import qs from 'qs';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useDebounce } from 'react-use';
 
@@ -64,6 +65,14 @@ export function useQueryParamState<T>(
     extractState(location.search, stateName),
   );
 
+  useEffect(() => {
+    const newState = extractState(location.search, stateName);
+
+    setQueryParamState(oldState =>
+      isEqual(newState, oldState) ? oldState : newState,
+    );
+  }, [location, stateName]);
+
   useDebounce(
     () => {
       const queryString = joinQueryString(

packages/core/src/layout/Sidebar/Items.tsx

@@ -221,6 +221,7 @@ export const SidebarSearchField: FC<SidebarSearchFieldProps> = props => {
   const handleEnter: KeyboardEventHandler = ev => {
     if (ev.key === 'Enter') {
       props.onSearch(input);
+      setInput('');
     }
   };
 
@@ -233,6 +234,7 @@ export const SidebarSearchField: FC<SidebarSearchFieldProps> = props => {
       <SidebarItem icon={SearchIcon}>
         <TextField
           placeholder="Search"
+          value={input}
           onChange={handleInput}
           onKeyDown={handleEnter}
           className={classes.searchContainer}