From 662636227b14dc8f9658f551962d2138e4f79339 Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Wed, 1 Dec 2021 16:05:38 +0100 Subject: [PATCH] feat(search): move the modal state to context Co-authored-by: Emma Indal Signed-off-by: Camila Belo --- docs/features/search/getting-started.md | 6 ++- packages/app/src/components/Root/Root.tsx | 9 +++- .../packages/app/src/components/Root/Root.tsx | 6 ++- .../SearchContext/SearchContext.tsx | 8 ++++ .../SearchModal/SearchModal.stories.tsx | 42 ++++++++++--------- .../SidebarSearchModal/SidebarSearchModal.tsx | 8 ++-- 6 files changed, 50 insertions(+), 29 deletions(-) diff --git a/docs/features/search/getting-started.md b/docs/features/search/getting-started.md index 7c3717e22e..3b5c86c0e6 100644 --- a/docs/features/search/getting-started.md +++ b/docs/features/search/getting-started.md @@ -114,13 +114,15 @@ const routes = ( In `Root.tsx`, add the `SidebarSearchModal` component: ```bash -import { SidebarSearchModal } from '@backstage/plugin-search'; +import { SidebarSearchModal, SearchContextProvider } from '@backstage/plugin-search'; export const Root = ({ children }: PropsWithChildren<{}>) => ( - + + + ... ``` diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx index e1496b556c..2d9b9b97f1 100644 --- a/packages/app/src/components/Root/Root.tsx +++ b/packages/app/src/components/Root/Root.tsx @@ -29,7 +29,10 @@ import LogoIcon from './LogoIcon'; import { NavLink } from 'react-router-dom'; import { GraphiQLIcon } from '@backstage/plugin-graphiql'; import { Settings as SidebarSettings } from '@backstage/plugin-user-settings'; -import { SidebarSearchModal } from '@backstage/plugin-search'; +import { + SidebarSearchModal, + SearchContextProvider, +} from '@backstage/plugin-search'; import { Shortcuts } from '@backstage/plugin-shortcuts'; import { Sidebar, @@ -80,7 +83,9 @@ export const Root = ({ children }: PropsWithChildren<{}>) => ( - + + + {/* Global nav, not org-specific */} diff --git a/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx b/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx index ec59b0b116..41eb571e2d 100644 --- a/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx +++ b/packages/create-app/templates/default-app/packages/app/src/components/Root/Root.tsx @@ -25,7 +25,7 @@ import LogoFull from './LogoFull'; import LogoIcon from './LogoIcon'; import { NavLink } from 'react-router-dom'; import { Settings as SidebarSettings } from '@backstage/plugin-user-settings'; -import { SidebarSearchModal } from '@backstage/plugin-search'; +import { SidebarSearchModal, SearchContextProvider } from '@backstage/plugin-search'; import { Sidebar, SidebarPage, @@ -74,7 +74,9 @@ export const Root = ({ children }: PropsWithChildren<{}>) => ( - + + + {/* Global nav, not org-specific */} diff --git a/plugins/search/src/components/SearchContext/SearchContext.tsx b/plugins/search/src/components/SearchContext/SearchContext.tsx index 11d6a2786e..d54c9d08ea 100644 --- a/plugins/search/src/components/SearchContext/SearchContext.tsx +++ b/plugins/search/src/components/SearchContext/SearchContext.tsx @@ -37,6 +37,8 @@ type SearchContextValue = { setTypes: React.Dispatch>; filters: JsonObject; setFilters: React.Dispatch>; + open?: boolean; + toggleModal: () => void; pageCursor?: string; setPageCursor: React.Dispatch>; fetchNextPage?: React.DispatchWithoutAction; @@ -49,6 +51,7 @@ type SettableSearchContext = Omit< | 'setTerm' | 'setTypes' | 'setFilters' + | 'toggleModal' | 'setPageCursor' | 'fetchNextPage' | 'fetchPreviousPage' @@ -74,6 +77,9 @@ export const SearchContextProvider = ({ const [filters, setFilters] = useState(initialState.filters); const [term, setTerm] = useState(initialState.term); const [types, setTypes] = useState(initialState.types); + const [open, setOpen] = useState(false); + const toggleModal = (): void => setOpen(prevState => !prevState); + const prevTerm = usePrevious(term); const result = useAsync( @@ -109,6 +115,8 @@ export const SearchContextProvider = ({ result, filters, setFilters, + open, + toggleModal, term, setTerm, types, diff --git a/plugins/search/src/components/SearchModal/SearchModal.stories.tsx b/plugins/search/src/components/SearchModal/SearchModal.stories.tsx index 5eefad8e0d..6fa93c6588 100644 --- a/plugins/search/src/components/SearchModal/SearchModal.stories.tsx +++ b/plugins/search/src/components/SearchModal/SearchModal.stories.tsx @@ -14,28 +14,15 @@ * limitations under the License. */ -import React, { useState, ComponentType } from 'react'; +import React, { ComponentType } from 'react'; import { Button } from '@material-ui/core'; import { ApiProvider, ApiRegistry } from '@backstage/core-app-api'; import { wrapInTestApp } from '@backstage/test-utils'; import { SearchModal } from '../index'; +import { useSearch, SearchContextProvider } from '../SearchContext'; import { searchApiRef } from '../../apis'; import { rootRouteRef } from '../../plugin'; -export default { - title: 'Plugins/Search/SearchModal', - component: SearchModal, - decorators: [ - (Story: ComponentType<{}>) => - wrapInTestApp( - <> - - , - { mountedRoutes: { '/search': rootRouteRef } }, - ), - ], -}; - const mockSearchApi = { query: () => Promise.resolve({ @@ -70,16 +57,33 @@ const mockSearchApi = { const apiRegistry = () => ApiRegistry.from([[searchApiRef, mockSearchApi]]); +export default { + title: 'Plugins/Search/SearchModal', + component: SearchModal, + decorators: [ + (Story: ComponentType<{}>) => + wrapInTestApp( + <> + + + + + + , + { mountedRoutes: { '/search': rootRouteRef } }, + ), + ], +}; + export const Default = () => { - const [open, setOpen] = useState(false); - const toggleModal = (): void => setOpen(prevState => !prevState); + const { open, toggleModal } = useSearch(); return ( - + <> - + ); }; diff --git a/plugins/search/src/components/SidebarSearchModal/SidebarSearchModal.tsx b/plugins/search/src/components/SidebarSearchModal/SidebarSearchModal.tsx index 4d4fa1a9fc..ae38526c9d 100644 --- a/plugins/search/src/components/SidebarSearchModal/SidebarSearchModal.tsx +++ b/plugins/search/src/components/SidebarSearchModal/SidebarSearchModal.tsx @@ -13,14 +13,14 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { useState } from 'react'; +import React from 'react'; import SearchIcon from '@material-ui/icons/Search'; -import { SearchModal } from '../SearchModal'; import { SidebarItem } from '@backstage/core-components'; +import { SearchModal } from '../SearchModal'; +import { useSearch } from '../SearchContext'; export const SidebarSearchModal = () => { - const [open, setOpen] = useState(false); - const toggleModal = (): void => setOpen(prevState => !prevState); + const { open, toggleModal } = useSearch(); return ( <>