From 950534e5b5a7d344bc0e46c219a77f0b30470288 Mon Sep 17 00:00:00 2001 From: Joshua Jung Date: Fri, 16 Aug 2024 11:16:42 -0500 Subject: [PATCH] Updating documentation for customization of SidebarSearchModal children Signed-off-by: Joshua Jung --- docs/features/search/how-to-guides.md | 49 +++++++++++++++++++++++---- plugins/search/api-report.md | 18 ++++++---- plugins/search/src/index.ts | 1 + plugins/search/src/plugin.ts | 12 ++----- 4 files changed, 58 insertions(+), 22 deletions(-) diff --git a/docs/features/search/how-to-guides.md b/docs/features/search/how-to-guides.md index b0df9440f3..e918dacbc1 100644 --- a/docs/features/search/how-to-guides.md +++ b/docs/features/search/how-to-guides.md @@ -160,11 +160,14 @@ const highlightOverride = { ## How to render search results using extensions -Extensions for search results let you customize components used to render search result items, It is possible to provide your own search result item extensions or use the ones provided by plugin packages: +Extensions for search results let you customize components used to render search result items, It is possible to provide your own search result item extensions or use the ones provided by plugin packages. ### 1. Providing an extension in your plugin package -Using the example below, you can provide an extension to be used as a default result item: +> Note: You must use the `plugin.provide()` function to make a search item renderer available. Unlike rendering a list in a standard MUI Table or similar, you cannot simply provide +> a rendering function to the `` component. + +Using the example below, you can provide an extension to be used as a search result item: ```tsx title="plugins/your-plugin/src/plugin.ts" import { createPlugin } from '@backstage/core-plugin-api'; @@ -214,7 +217,7 @@ export const YourSearchResultListItemExtension = plugin.provide( ); ``` -Remember to export your new extension: +Remember to export your new extension via your plugin's `index.ts` so that it is available from within your app: ```tsx title="plugins/your-plugin/src/index.ts" export { YourSearchResultListItem } from './plugin.ts'; @@ -222,9 +225,12 @@ export { YourSearchResultListItem } from './plugin.ts'; For more details, see the [createSearchResultListItemExtension](https://backstage.io/docs/reference/plugin-search-react.createsearchresultlistitemextension) API reference. -### 2. Using an extension in your Backstage app +### 2. Custom search result extension in the SearchPage -Now that you know how a search result item is provided, let's finally see how they can be used, for example, to compose a page in your application: +Once you have exposed your item renderer via the `plugin.provide()` function, you can now override the default search item renderers and tell the `` component +which renderers to use. Note that the order of the renderers matters! The first one that matches via its predicate function will be used. + +Here is an example of customizing your `SearchPage`: ```tsx title="packages/app/src/components/searchPage.tsx" import React from 'react'; @@ -276,9 +282,38 @@ const SearchPage = () => ( export const searchPage = ; ``` -> **Important**: A default result item extension should be placed as the last child, so it can be used only when no other extensions match the result being rendered. If a non-default extension is specified, the `DefaultResultListItem` component will be used. +> **Important**: A default result item extension (one that does not have a predicate) should be placed as the last child, so it can be used only when no other extensions match the result being rendered. +> If a non-default extension is specified, the `DefaultResultListItem` component will be used. -As another example, here's a search modal that renders results with extensions: +### 2. Custom search result extension in the SidebarSearchModal + +You may be using the SidebarSearchModal component. In this case, you can customize the search items in this component as follows: + +```tsx title="packages/app/src/components/Root/Root.tsx" +import { SidebarSearchModal } from '@backstage/plugin-search'; +... +export const Root = ({ children }: PropsWithChildren<{}>) => { + const styles = useStyles(); + + return + + ... + } />, + /* Provide an existing search item renderer */ + } /> + ]} /> + ... + + {children} + ; +}; +``` + +### 3. Custom search result extension in a custom SearchModal + +Assuming you have completely customized your SearchModal, here's an example that renders results with extensions: ```tsx title="packages/app/src/components/searchModal.tsx" import React from 'react'; diff --git a/plugins/search/api-report.md b/plugins/search/api-report.md index 64f596ab11..d9435d5e61 100644 --- a/plugins/search/api-report.md +++ b/plugins/search/api-report.md @@ -3,8 +3,6 @@ > 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'; @@ -12,6 +10,7 @@ import { default as React_2 } from 'react'; import { ReactNode } from 'react'; import { RouteRef } from '@backstage/core-plugin-api'; import { SearchBarBaseProps } from '@backstage/plugin-search-react'; +import { SearchResultSet } from '@backstage/plugin-search-common'; // @public (undocumented) export const HomePageSearchBar: ( @@ -30,12 +29,12 @@ export const Router: () => React_2.JSX.Element; export const SearchModal: (props: SearchModalProps) => React_2.JSX.Element; // @public (undocumented) -export interface SearchModalChildrenProps { +export interface SearchModalChildrenProps extends SearchResultChildrenProvider { toggleModal: () => void; } // @public (undocumented) -export interface SearchModalProps { +export interface SearchModalProps extends SearchResultChildrenProvider { children?: (props: SearchModalChildrenProps) => JSX.Element; hidden?: boolean; open?: boolean; @@ -76,6 +75,13 @@ 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; @@ -118,10 +124,10 @@ export const SidebarSearch: (props: SidebarSearchProps) => React_2.JSX.Element; // @public (undocumented) export const SidebarSearchModal: ( props: SidebarSearchModalProps, -) => JSX_2.Element; +) => JSX.Element | null; // @public -export type SidebarSearchModalProps = { +export type SidebarSearchModalProps = SearchResultChildrenProvider & { icon?: IconComponent; children?: (props: SearchModalChildrenProps) => JSX.Element; }; diff --git a/plugins/search/src/index.ts b/plugins/search/src/index.ts index 66b032c83c..720797608f 100644 --- a/plugins/search/src/index.ts +++ b/plugins/search/src/index.ts @@ -43,6 +43,7 @@ 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 03ed040917..9ee66759ed 100644 --- a/plugins/search/src/plugin.ts +++ b/plugins/search/src/plugin.ts @@ -27,16 +27,10 @@ import { } from '@backstage/core-plugin-api'; import { ReactNode } from 'react'; import { SearchResultSet } from '@backstage/plugin-search-common'; +import { SidebarSearchModalProps } from './components/SidebarSearchModal'; /** - * This type allows us to pass children to the component via the . - * - * This allows us to customize the search result items displayed in the SidebarSearchModal, like so: - * - * , - * } /> - * ]} /> + * @public */ export type SearchResultChildrenProvider = { searchResultChildren?: @@ -82,7 +76,7 @@ export const SearchPage = searchPlugin.provide( * @public */ export const SidebarSearchModal = searchPlugin.provide< - (props: SearchResultChildrenProvider) => JSX.Element | null + (props: SidebarSearchModalProps) => JSX.Element | null >( createComponentExtension({ name: 'SidebarSearchModal',