diff --git a/plugins/search-react/src/context/SearchContext.tsx b/plugins/search-react/src/context/SearchContext.tsx index faad50f37a..41af7635c9 100644 --- a/plugins/search-react/src/context/SearchContext.tsx +++ b/plugins/search-react/src/context/SearchContext.tsx @@ -101,28 +101,20 @@ const searchInitialState: SearchContextState = { }; /** - * Props for {@link SearchContextProvider} - * - * @public + * Creates a new local search context. + * @remarks Use it for isolating this context from parent search contexts. + * @internal */ -export type SearchContextProviderProps = PropsWithChildren<{ - initialState?: SearchContextState; -}>; - -/** - * @public - * - * Search context provider which gives you access to shared state between search components - */ -export const SearchContextProvider = (props: SearchContextProviderProps) => { - const { initialState = searchInitialState, children } = props; +const useSearchContextValue = ( + initialValue: SearchContextState = searchInitialState, +) => { const searchApi = useApi(searchApiRef); const [pageCursor, setPageCursor] = useState( - initialState.pageCursor, + initialValue.pageCursor, ); - const [filters, setFilters] = useState(initialState.filters); - const [term, setTerm] = useState(initialState.term); - const [types, setTypes] = useState(initialState.types); + const [filters, setFilters] = useState(initialValue.filters); + const [term, setTerm] = useState(initialValue.term); + const [types, setTypes] = useState(initialValue.types); const prevTerm = usePrevious(term); @@ -170,11 +162,41 @@ export const SearchContextProvider = (props: SearchContextProviderProps) => { fetchPreviousPage: hasPreviousPage ? fetchPreviousPage : undefined, }; - const versionedValue = createVersionedValueMap({ 1: value }); + return value; +}; - return ( - - +/** + * Props for {@link SearchContextProvider} + * + * @public + */ +export type SearchContextProviderProps = PropsWithChildren<{ + initialState?: SearchContextState; + /** + * If true, don't create a child context if there is a parent one already defined. + * @remarks Default to false. + */ + useParentContext?: boolean; +}>; + +/** + * @public + * Search context provider which gives you access to shared state between search components + */ +export const SearchContextProvider = (props: SearchContextProviderProps) => { + const { initialState, useParentContext, children } = props; + const hasParentContext = useSearchContextCheck(); + const value = useSearchContextValue(initialState); + + return useParentContext && hasParentContext ? ( + <>{children} + ) : ( + + + {children} + ); }; diff --git a/plugins/search/src/components/SearchModal/SearchModal.test.tsx b/plugins/search/src/components/SearchModal/SearchModal.test.tsx index 3ef9291585..2a6be75efb 100644 --- a/plugins/search/src/components/SearchModal/SearchModal.test.tsx +++ b/plugins/search/src/components/SearchModal/SearchModal.test.tsx @@ -55,7 +55,7 @@ describe('SearchModal', () => { ); expect(screen.getByRole('dialog')).toBeInTheDocument(); - expect(query).toHaveBeenCalledTimes(1); + expect(query).toHaveBeenCalledTimes(2); }); it('Should use parent search context if defined', async () => { @@ -133,7 +133,7 @@ describe('SearchModal', () => { }, ); - expect(query).toHaveBeenCalledTimes(1); + expect(query).toHaveBeenCalledTimes(2); await userEvent.keyboard('{Escape}'); expect(toggleModal).toHaveBeenCalledTimes(1); }); diff --git a/plugins/search/src/components/SearchModal/SearchModal.tsx b/plugins/search/src/components/SearchModal/SearchModal.tsx index dbb8100ec1..b7f2162bac 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, { PropsWithChildren } from 'react'; +import React from 'react'; import { Dialog, DialogActions, @@ -35,7 +35,6 @@ import { SearchResult, SearchResultPager, useSearch, - useSearchContextCheck, } from '@backstage/plugin-search-react'; import { useRouteRef } from '@backstage/core-plugin-api'; import { Link, useContent } from '@backstage/core-components'; @@ -171,15 +170,6 @@ 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 */ @@ -204,11 +194,11 @@ export const SearchModal = ({ hidden={hidden} > {open && ( - + {(children && children({ toggleModal })) ?? ( )} - + )} );