From 662636227b14dc8f9658f551962d2138e4f79339 Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Wed, 1 Dec 2021 16:05:38 +0100 Subject: [PATCH 1/9] 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 ( <> From c5b6045f3613eba212f34edb9d5a028524155ff2 Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Wed, 1 Dec 2021 16:15:35 +0100 Subject: [PATCH 2/9] docs(search): add changeset file Co-authored-by: Emma Indal Signed-off-by: Camila Belo --- .changeset/search-moles-wash.md | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 .changeset/search-moles-wash.md diff --git a/.changeset/search-moles-wash.md b/.changeset/search-moles-wash.md new file mode 100644 index 0000000000..0fbac1368f --- /dev/null +++ b/.changeset/search-moles-wash.md @@ -0,0 +1,33 @@ +--- +'@backstage/plugin-search': minor +'example-app': patch +'@backstage/create-app': patch +--- + +Search Modal now relies on the Search Context to access state and state setter. If you use the SidebarSearchModal as described in the [getting started documentation](https://backstage.io/docs/features/search/getting-started#using-the-search-modal), make sure to update your code with the SearchContextProvider. + +Before: + +```tsx +export const Root = ({ children }: PropsWithChildren<{}>) => ( + + + + + + ... +``` + +Now: + +```tsx +export const Root = ({ children }: PropsWithChildren<{}>) => ( + + + + + + + + ... +``` From 873bb2618cbf8093b47c768745685c2d034b196b Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Wed, 1 Dec 2021 16:21:00 +0100 Subject: [PATCH 3/9] docs(search): build api reports Co-authored-by: Emma Indal Signed-off-by: Camila Belo --- plugins/search/api-report.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/search/api-report.md b/plugins/search/api-report.md index 7dba0a8e21..33faa568bf 100644 --- a/plugins/search/api-report.md +++ b/plugins/search/api-report.md @@ -216,7 +216,7 @@ export const useSearch: () => SearchContextValue; // Warnings were encountered during analysis: // -// src/components/SearchContext/SearchContext.d.ts:21:5 - (ae-forgotten-export) The symbol "SettableSearchContext" needs to be exported by the entry point index.d.ts +// src/components/SearchContext/SearchContext.d.ts:23:5 - (ae-forgotten-export) The symbol "SettableSearchContext" needs to be exported by the entry point index.d.ts // src/components/SearchFilter/SearchFilter.d.ts:13:5 - (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts // src/components/SearchFilter/SearchFilter.d.ts:14:5 - (ae-forgotten-export) The symbol "Component" needs to be exported by the entry point index.d.ts ``` From 6130421aa2c53620b5a5969eb8f7557f15e93466 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Wed, 1 Dec 2021 17:40:05 +0100 Subject: [PATCH 4/9] prettier fix Signed-off-by: Emma Indal Co-authored-by: Camila Belo Signed-off-by: Emma Indal --- .../default-app/packages/app/src/components/Root/Root.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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 41eb571e2d..b4fa04f1fc 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,10 @@ 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, SearchContextProvider } from '@backstage/plugin-search'; +import { + SidebarSearchModal, + SearchContextProvider, +} from '@backstage/plugin-search'; import { Sidebar, SidebarPage, From 03eb26f8e86ddbb5b4d6cac6ef40a89348e6cf4b Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Thu, 2 Dec 2021 09:46:37 +0100 Subject: [PATCH 5/9] use markdown diff instead of two code blocks Signed-off-by: Emma Indal --- .changeset/search-moles-wash.md | 23 +++++------------------ 1 file changed, 5 insertions(+), 18 deletions(-) diff --git a/.changeset/search-moles-wash.md b/.changeset/search-moles-wash.md index 0fbac1368f..57affab3b0 100644 --- a/.changeset/search-moles-wash.md +++ b/.changeset/search-moles-wash.md @@ -6,28 +6,15 @@ Search Modal now relies on the Search Context to access state and state setter. If you use the SidebarSearchModal as described in the [getting started documentation](https://backstage.io/docs/features/search/getting-started#using-the-search-modal), make sure to update your code with the SearchContextProvider. -Before: - -```tsx +```diff export const Root = ({ children }: PropsWithChildren<{}>) => ( - +- ++ ++ ++ ... ``` - -Now: - -```tsx -export const Root = ({ children }: PropsWithChildren<{}>) => ( - - - - - - - - ... -``` From bac29f1cde0c187db7d748bf1ec99214684cfd02 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Thu, 2 Dec 2021 09:47:48 +0100 Subject: [PATCH 6/9] remove space Signed-off-by: Emma Indal --- docs/features/search/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/features/search/getting-started.md b/docs/features/search/getting-started.md index 3b5c86c0e6..285e399cb4 100644 --- a/docs/features/search/getting-started.md +++ b/docs/features/search/getting-started.md @@ -120,7 +120,7 @@ export const Root = ({ children }: PropsWithChildren<{}>) => ( - + From 24d2ce03f389f311ab68df7d99de35ada35f78b1 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Thu, 2 Dec 2021 09:51:55 +0100 Subject: [PATCH 7/9] separation of changesets Signed-off-by: Emma Indal --- .changeset/brave-mice-cover.md | 18 ++++++++++++++++++ .changeset/search-moles-wash.md | 2 -- 2 files changed, 18 insertions(+), 2 deletions(-) create mode 100644 .changeset/brave-mice-cover.md diff --git a/.changeset/brave-mice-cover.md b/.changeset/brave-mice-cover.md new file mode 100644 index 0000000000..23ed703d40 --- /dev/null +++ b/.changeset/brave-mice-cover.md @@ -0,0 +1,18 @@ +--- +'@backstage/create-app': minor +--- + +Search Modal now relies on the Search Context to access state and state setter. If you use the SidebarSearchModal as described in the [getting started documentation](https://backstage.io/docs/features/search/getting-started#using-the-search-modal), make sure to update your code with the SearchContextProvider. + +```diff +export const Root = ({ children }: PropsWithChildren<{}>) => ( + + + +- ++ ++ ++ + + ... +``` diff --git a/.changeset/search-moles-wash.md b/.changeset/search-moles-wash.md index 57affab3b0..43084cd3d6 100644 --- a/.changeset/search-moles-wash.md +++ b/.changeset/search-moles-wash.md @@ -1,7 +1,5 @@ --- '@backstage/plugin-search': minor -'example-app': patch -'@backstage/create-app': patch --- Search Modal now relies on the Search Context to access state and state setter. If you use the SidebarSearchModal as described in the [getting started documentation](https://backstage.io/docs/features/search/getting-started#using-the-search-modal), make sure to update your code with the SearchContextProvider. From f1efedc454f980bb20bf1ebe02ca1cdb44c12375 Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Thu, 2 Dec 2021 11:35:08 +0100 Subject: [PATCH 8/9] docs(search): change create-app semver to patch Signed-off-by: Camila Belo --- .changeset/brave-mice-cover.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/brave-mice-cover.md b/.changeset/brave-mice-cover.md index 23ed703d40..50cd69f9cf 100644 --- a/.changeset/brave-mice-cover.md +++ b/.changeset/brave-mice-cover.md @@ -1,5 +1,5 @@ --- -'@backstage/create-app': minor +'@backstage/create-app': patch --- Search Modal now relies on the Search Context to access state and state setter. If you use the SidebarSearchModal as described in the [getting started documentation](https://backstage.io/docs/features/search/getting-started#using-the-search-modal), make sure to update your code with the SearchContextProvider. From d11fb7fe043183ce6f6d5e994dd7749ea609e938 Mon Sep 17 00:00:00 2001 From: Camila Belo Date: Thu, 2 Dec 2021 11:36:26 +0100 Subject: [PATCH 9/9] refactor(search): use callback hook on the modal toggle Signed-off-by: Camila Belo --- .../search/src/components/SearchContext/SearchContext.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/plugins/search/src/components/SearchContext/SearchContext.tsx b/plugins/search/src/components/SearchContext/SearchContext.tsx index d54c9d08ea..dd9310d782 100644 --- a/plugins/search/src/components/SearchContext/SearchContext.tsx +++ b/plugins/search/src/components/SearchContext/SearchContext.tsx @@ -78,7 +78,10 @@ export const SearchContextProvider = ({ const [term, setTerm] = useState(initialState.term); const [types, setTypes] = useState(initialState.types); const [open, setOpen] = useState(false); - const toggleModal = (): void => setOpen(prevState => !prevState); + const toggleModal = useCallback( + (): void => setOpen(prevState => !prevState), + [], + ); const prevTerm = usePrevious(term);