fix(HomePageSearchBar): fix missing search context issue

Signed-off-by: Phil Kuang <pkuang@factset.com>

.changeset/great-mayflies-travel.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-search': patch
+---
+
+Fix missing search context issue with `HomePageSearchBar`

plugins/search/src/components/SearchBar/SearchBar.tsx

@@ -20,6 +20,7 @@ import React, {
   useState,
   useEffect,
   useCallback,
+  useContext,
 } from 'react';
 import { useDebounce } from 'react-use';
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
@@ -32,7 +33,11 @@ import {
 import SearchIcon from '@material-ui/icons/Search';
 import ClearButton from '@material-ui/icons/Clear';
 
-import { useSearch } from '../SearchContext';
+import {
+  SearchContext,
+  SearchContextProvider,
+  useSearch,
+} from '../SearchContext';
 import { TrackSearch } from '../SearchTracker';
 
 /**
@@ -48,6 +53,11 @@ export type SearchBarBaseProps = Omit<InputBaseProps, 'onChange'> & {
   onChange: (value: string) => void;
 };
 
+const useSearchContextCheck = () => {
+  const context = useContext(SearchContext);
+  return context !== undefined;
+};
+
 /**
  * All search boxes exported by the search plugin are based on the <SearchBarBase />,
  * and this one is based on the <InputBase /> component from Material UI.
@@ -69,6 +79,7 @@ export const SearchBarBase = ({
 }: SearchBarBaseProps) => {
   const configApi = useApi(configApiRef);
   const [value, setValue] = useState<string>(defaultValue as string);
+  const hasSearchContext = useSearchContextCheck();
 
   useEffect(() => {
     setValue(prevValue =>
@@ -119,7 +130,7 @@ export const SearchBarBase = ({
     </InputAdornment>
   );
 
-  return (
+  const searchBar = (
     <TrackSearch>
       <InputBase
         data-testid="search-bar-next"
@@ -135,6 +146,12 @@ export const SearchBarBase = ({
       />
     </TrackSearch>
   );
+
+  return hasSearchContext ? (
+    searchBar
+  ) : (
+    <SearchContextProvider>{searchBar}</SearchContextProvider>
+  );
 };
 
 /**