From c7285cac4cac785030de5b6bb58b2b7c924c0364 Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Tue, 21 Jun 2022 11:25:56 +0200 Subject: [PATCH 1/3] fix(search): search modal context scope Only create a search context for the modal if there is no parent context already defined. Signed-off-by: Camila Belo --- .../SearchModal/SearchModal.test.tsx | 51 ++++++++++++++++++- .../components/SearchModal/SearchModal.tsx | 17 +++++-- 2 files changed, 64 insertions(+), 4 deletions(-) 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..aaee7667dd 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, @@ -170,6 +170,17 @@ 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. + try { + // Throws an exception if there is no parent context already defined + useSearch(); + return <>{children}; + } catch { + return {children}; + } +}; + /** * @public */ @@ -194,11 +205,11 @@ export const SearchModal = ({ hidden={hidden} > {open && ( - + {(children && children({ toggleModal })) ?? ( )} - + )} ); From 509c4092f0b617de243238ac0975f7910b199e43 Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Tue, 21 Jun 2022 11:51:41 +0200 Subject: [PATCH 2/3] chore: add changeset file Signed-off-by: Camila Belo --- .changeset/search-turtles-itch.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 .changeset/search-turtles-itch.md 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 + + + +``` From a620f777b33e7527ede1cdd6d4fdf687fed81b3c Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Tue, 21 Jun 2022 13:46:18 +0200 Subject: [PATCH 3/3] refactor(search): apply review suggestion Use search context checker in search modal and create local context only if needed. Signed-off-by: Camila Belo --- .../search/src/components/SearchModal/SearchModal.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/plugins/search/src/components/SearchModal/SearchModal.tsx b/plugins/search/src/components/SearchModal/SearchModal.tsx index aaee7667dd..dbb8100ec1 100644 --- a/plugins/search/src/components/SearchModal/SearchModal.tsx +++ b/plugins/search/src/components/SearchModal/SearchModal.tsx @@ -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'; @@ -172,13 +173,11 @@ 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. - try { - // Throws an exception if there is no parent context already defined - useSearch(); + const hasParentContext = useSearchContextCheck(); + if (hasParentContext) { return <>{children}; - } catch { - return {children}; } + return {children}; }; /**