Merge pull request #12180 from backstage/camilal/fix-search-modal-context

[Search]: Fix search modal context scope

.changeset/search-turtles-itch.md

@@ -0,0 +1,13 @@
+---
+'@backstage/plugin-search': patch
+---
+
+To allow people to use a global search context in the search modal, the code for the search modal has been changed to only create a local search context if there is no parent context already defined.
+
+If you want to continue using a local context even if you define a global one, you will have to wrap the modal in a new local context manually:
+
+```tsx
+<SearchContextProvider>
+  <SearchModal toggleModal={toggleModal} />
+</SearchContextProvider>
+```

plugins/search/src/components/SearchModal/SearchModal.test.tsx

@@ -21,7 +21,10 @@ import userEvent from '@testing-library/user-event';
 import { configApiRef } from '@backstage/core-plugin-api';
 import { ApiProvider, ConfigReader } from '@backstage/core-app-api';
 import { rootRouteRef } from '../../plugin';
-import { searchApiRef } from '@backstage/plugin-search-react';
+import {
+  searchApiRef,
+  SearchContextProvider,
+} from '@backstage/plugin-search-react';
 
 import { SearchModal } from './SearchModal';
 
@@ -55,6 +58,52 @@ describe('SearchModal', () => {
     expect(query).toHaveBeenCalledTimes(1);
   });
 
+  it('Should use parent search context if defined', async () => {
+    const initialState = {
+      term: 'term',
+      filters: { filter: '' },
+      types: ['type'],
+      pageCursor: 'page cursor',
+    };
+
+    await renderInTestApp(
+      <ApiProvider apis={apiRegistry}>
+        <SearchContextProvider initialState={initialState}>
+          <SearchModal open hidden={false} toggleModal={toggleModal} />
+        </SearchContextProvider>
+      </ApiProvider>,
+      {
+        mountedRoutes: {
+          '/search': rootRouteRef,
+        },
+      },
+    );
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(query).toHaveBeenCalledWith(initialState);
+  });
+
+  it('Should create a local search context if a parent is not defined', async () => {
+    await renderInTestApp(
+      <ApiProvider apis={apiRegistry}>
+        <SearchModal open hidden={false} toggleModal={toggleModal} />
+      </ApiProvider>,
+      {
+        mountedRoutes: {
+          '/search': rootRouteRef,
+        },
+      },
+    );
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(query).toHaveBeenCalledWith({
+      term: '',
+      filters: {},
+      types: [],
+      pageCursor: undefined,
+    });
+  });
+
   it('Should render a custom Modal correctly', async () => {
     await renderInTestApp(
       <ApiProvider apis={apiRegistry}>

plugins/search/src/components/SearchModal/SearchModal.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import {
   Dialog,
   DialogActions,
@@ -35,6 +35,7 @@ import {
   SearchResult,
   SearchResultPager,
   useSearch,
+  useSearchContextCheck,
 } from '@backstage/plugin-search-react';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { Link, useContent } from '@backstage/core-components';
@@ -170,6 +171,15 @@ export const Modal = ({ toggleModal }: SearchModalProps) => {
   );
 };
 
+const Context = ({ children }: PropsWithChildren<{}>) => {
+  // Checks if there is a parent context already defined and, if not, creates a new local context.
+  const hasParentContext = useSearchContextCheck();
+  if (hasParentContext) {
+    return <>{children}</>;
+  }
+  return <SearchContextProvider>{children}</SearchContextProvider>;
+};
+
 /**
  * @public
  */
@@ -194,11 +204,11 @@ export const SearchModal = ({
       hidden={hidden}
     >
       {open && (
-        <SearchContextProvider>
+        <Context>
           {(children && children({ toggleModal })) ?? (
             <Modal toggleModal={toggleModal} />
           )}
-        </SearchContextProvider>
+        </Context>
       )}
     </Dialog>
   );