From c429c92efffed7fbd6022219738ca1b6a19df976 Mon Sep 17 00:00:00 2001 From: Joshua Jung Date: Fri, 6 Sep 2024 17:39:21 -0500 Subject: [PATCH] Addressing SidebarSearchModal suggestions in PR Signed-off-by: Joshua Jung --- docs/features/search/how-to-guides.md | 2 +- plugins/search/api-report.md | 23 +++++++------- .../components/SearchModal/SearchModal.tsx | 31 +++++++++++++------ .../SidebarSearchModal/SidebarSearchModal.tsx | 11 ++++--- plugins/search/src/index.ts | 1 - plugins/search/src/plugin.ts | 11 ------- 6 files changed, 41 insertions(+), 38 deletions(-) diff --git a/docs/features/search/how-to-guides.md b/docs/features/search/how-to-guides.md index e918dacbc1..93c04c7af4 100644 --- a/docs/features/search/how-to-guides.md +++ b/docs/features/search/how-to-guides.md @@ -298,7 +298,7 @@ export const Root = ({ children }: PropsWithChildren<{}>) => { return ... - } />, /* Provide an existing search item renderer */ diff --git a/plugins/search/api-report.md b/plugins/search/api-report.md index d9435d5e61..a47c11b194 100644 --- a/plugins/search/api-report.md +++ b/plugins/search/api-report.md @@ -3,6 +3,8 @@ > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). ```ts +/// + import { BackstagePlugin } from '@backstage/core-plugin-api'; import { IconComponent } from '@backstage/core-plugin-api'; import { JSX as JSX_2 } from 'react'; @@ -29,15 +31,19 @@ export const Router: () => React_2.JSX.Element; export const SearchModal: (props: SearchModalProps) => React_2.JSX.Element; // @public (undocumented) -export interface SearchModalChildrenProps extends SearchResultChildrenProvider { +export interface SearchModalChildrenProps { + resultItemComponents?: + | ReactNode + | ((resultSet: SearchResultSet) => JSX.Element); toggleModal: () => void; } // @public (undocumented) -export interface SearchModalProps extends SearchResultChildrenProvider { +export interface SearchModalProps { children?: (props: SearchModalChildrenProps) => JSX.Element; hidden?: boolean; open?: boolean; + resultItemComponents?: SearchModalChildrenProps['resultItemComponents']; toggleModal: () => void; } @@ -75,13 +81,6 @@ const searchPlugin: BackstagePlugin< export { searchPlugin as plugin }; export { searchPlugin }; -// @public (undocumented) -export type SearchResultChildrenProvider = { - searchResultChildren?: - | ReactNode - | ((resultSet: SearchResultSet) => JSX.Element); -}; - // @public (undocumented) export const SearchType: { (props: SearchTypeProps): React_2.JSX.Element; @@ -127,9 +126,11 @@ export const SidebarSearchModal: ( ) => JSX.Element | null; // @public -export type SidebarSearchModalProps = SearchResultChildrenProvider & { +export type SidebarSearchModalProps = Pick< + SearchModalProps, + 'children' | 'resultItemComponents' +> & { icon?: IconComponent; - children?: (props: SearchModalChildrenProps) => JSX.Element; }; // @public diff --git a/plugins/search/src/components/SearchModal/SearchModal.tsx b/plugins/search/src/components/SearchModal/SearchModal.tsx index 422197462d..871d177078 100644 --- a/plugins/search/src/components/SearchModal/SearchModal.tsx +++ b/plugins/search/src/components/SearchModal/SearchModal.tsx @@ -34,25 +34,33 @@ import IconButton from '@material-ui/core/IconButton'; import { makeStyles } from '@material-ui/core/styles'; import ArrowForwardIcon from '@material-ui/icons/ArrowForward'; import CloseIcon from '@material-ui/icons/Close'; -import React, { useCallback, useEffect, useRef } from 'react'; +import React, { ReactNode, useCallback, useEffect, useRef } from 'react'; import { useNavigate } from 'react-router-dom'; -import { rootRouteRef, SearchResultChildrenProvider } from '../../plugin'; +import { rootRouteRef } from '../../plugin'; +import { SearchResultSet } from '@backstage/plugin-search-common'; /** * @public */ -export interface SearchModalChildrenProps extends SearchResultChildrenProvider { +export interface SearchModalChildrenProps { /** * A function that should be invoked when navigating away from the modal. */ toggleModal: () => void; + + /** + * Ability to provide custom components to render the result items + */ + resultItemComponents?: + | ReactNode + | ((resultSet: SearchResultSet) => JSX.Element); } /** * @public */ -export interface SearchModalProps extends SearchResultChildrenProvider { +export interface SearchModalProps { /** * If true, it renders the modal. */ @@ -74,6 +82,11 @@ export interface SearchModalProps extends SearchResultChildrenProvider { * place of the default. */ children?: (props: SearchModalChildrenProps) => JSX.Element; + + /** + * Optional ability to pass in result item component renderers. + */ + resultItemComponents?: SearchModalChildrenProps['resultItemComponents']; } const useStyles = makeStyles(theme => ({ @@ -102,7 +115,7 @@ const useStyles = makeStyles(theme => ({ export const Modal = ({ toggleModal, - searchResultChildren, + resultItemComponents, }: SearchModalChildrenProps) => { const classes = useStyles(); const navigate = useNavigate(); @@ -167,7 +180,7 @@ export const Modal = ({ onClick={handleSearchResultClick} onKeyDown={handleSearchResultClick} > - {searchResultChildren} + {resultItemComponents} @@ -190,7 +203,7 @@ export const SearchModal = (props: SearchModalProps) => { hidden, toggleModal, children, - searchResultChildren, + resultItemComponents, } = props; const classes = useStyles(); @@ -213,11 +226,11 @@ export const SearchModal = (props: SearchModalProps) => { {(children && children({ toggleModal, - searchResultChildren: searchResultChildren || [], + resultItemComponents: resultItemComponents || [], })) ?? ( )} diff --git a/plugins/search/src/components/SidebarSearchModal/SidebarSearchModal.tsx b/plugins/search/src/components/SidebarSearchModal/SidebarSearchModal.tsx index c4826cdd61..e385a4f1fd 100644 --- a/plugins/search/src/components/SidebarSearchModal/SidebarSearchModal.tsx +++ b/plugins/search/src/components/SidebarSearchModal/SidebarSearchModal.tsx @@ -19,20 +19,21 @@ import { SidebarItem } from '@backstage/core-components'; import { IconComponent } from '@backstage/core-plugin-api'; import { SearchModal, - SearchModalChildrenProps, + SearchModalProps, SearchModalProvider, useSearchModal, } from '../SearchModal'; -import { SearchResultChildrenProvider } from '../../plugin'; /** * Props for {@link SidebarSearchModal}. * * @public */ -export type SidebarSearchModalProps = SearchResultChildrenProvider & { +export type SidebarSearchModalProps = Pick< + SearchModalProps, + 'children' | 'resultItemComponents' +> & { icon?: IconComponent; - children?: (props: SearchModalChildrenProps) => JSX.Element; }; const SidebarSearchModalContent = (props: SidebarSearchModalProps) => { @@ -50,7 +51,7 @@ const SidebarSearchModalContent = (props: SidebarSearchModalProps) => { diff --git a/plugins/search/src/index.ts b/plugins/search/src/index.ts index 720797608f..66b032c83c 100644 --- a/plugins/search/src/index.ts +++ b/plugins/search/src/index.ts @@ -43,7 +43,6 @@ export type { export { SidebarSearch } from './components/SidebarSearch'; export type { SidebarSearchProps } from './components/SidebarSearch'; export type { SidebarSearchModalProps } from './components/SidebarSearchModal'; -export type { SearchResultChildrenProvider } from './plugin'; export { HomePageSearchBar, diff --git a/plugins/search/src/plugin.ts b/plugins/search/src/plugin.ts index 9ee66759ed..d4efc3748d 100644 --- a/plugins/search/src/plugin.ts +++ b/plugins/search/src/plugin.ts @@ -25,19 +25,8 @@ import { createComponentExtension, fetchApiRef, } from '@backstage/core-plugin-api'; -import { ReactNode } from 'react'; -import { SearchResultSet } from '@backstage/plugin-search-common'; import { SidebarSearchModalProps } from './components/SidebarSearchModal'; -/** - * @public - */ -export type SearchResultChildrenProvider = { - searchResultChildren?: - | ReactNode - | ((resultSet: SearchResultSet) => JSX.Element); -}; - export const rootRouteRef = createRouteRef({ id: 'search', });