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 })) ?? ( )} - + )} );