paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 47 Packages Projects Releases Wiki Activity

Updating documentation for customization of SidebarSearchModal children

Browse Source 
Signed-off-by: Joshua Jung <joshua.p.jung@gmail.com>
This commit is contained in:
Joshua Jung
2024-08-16 11:16:42 -05:00
parent eca03bdae9
commit 950534e5b5
4 changed files with 58 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/features/search/how-to-guides.md
+42 -7
View File
@@ -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 `<SearchResult />` 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 `<SearchResult>` 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 = <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 <SidebarPage>
<Sidebar>
...
<SidebarSearchModal searchResultChildren={[
/* Provide a custom Extension search item renderer */
<CustomSearchResultListItem icon={<CatalogIcon />} />,
/* Provide an existing search item renderer */
<TechDocsSearchResultListItem icon={<DocsIcon />} />
]} />
...
</Sidebar>
{children}
</SidebarPage>;
};
```
### 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';