From e05b9115aa0185326b4ca5e070b504de3cb4b16c Mon Sep 17 00:00:00 2001
From: Phil Kuang <pkuang@factset.com>
Date: Thu, 30 Dec 2021 15:22:10 -0500
Subject: [PATCH] fix(HomePageSearchBar): fix missing search context issue

Signed-off-by: Phil Kuang <pkuang@factset.com>
---
 .changeset/great-mayflies-travel.md           |  5 +++++
 .../src/components/SearchBar/SearchBar.tsx    | 21 +++++++++++++++++--
 2 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/great-mayflies-travel.md

diff --git a/.changeset/great-mayflies-travel.md b/.changeset/great-mayflies-travel.md
new file mode 100644
index 0000000000..6927cc2a5e
--- /dev/null
+++ b/.changeset/great-mayflies-travel.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-search': patch
+---
+
+Fix missing search context issue with `HomePageSearchBar`
diff --git a/plugins/search/src/components/SearchBar/SearchBar.tsx b/plugins/search/src/components/SearchBar/SearchBar.tsx
index aa4b1e728a..188341cd6c 100644
--- a/plugins/search/src/components/SearchBar/SearchBar.tsx
+++ b/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>
+  );
 };
 
 /**