diff --git a/.changeset/search-turtles-itch.md b/.changeset/search-turtles-itch.md
new file mode 100644
index 0000000000..2da26fc64a
--- /dev/null
+++ b/.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
+
+
+
+```
diff --git a/plugins/search/src/components/SearchModal/SearchModal.test.tsx b/plugins/search/src/components/SearchModal/SearchModal.test.tsx
index 842f5fb401..3ef9291585 100644
--- a/plugins/search/src/components/SearchModal/SearchModal.test.tsx
+++ b/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(
+
+
+
+
+ ,
+ {
+ 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(
+
+
+ ,
+ {
+ 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(
diff --git a/plugins/search/src/components/SearchModal/SearchModal.tsx b/plugins/search/src/components/SearchModal/SearchModal.tsx
index 6c37f20001..dbb8100ec1 100644
--- a/plugins/search/src/components/SearchModal/SearchModal.tsx
+++ b/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 {children};
+};
+
/**
* @public
*/
@@ -194,11 +204,11 @@ export const SearchModal = ({
hidden={hidden}
>
{open && (
-
+
{(children && children({ toggleModal })) ?? (
)}
-
+
)}
);