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

Add support for customizable icons in SearchResultListItemBlueprint and related components

Browse Source 
Signed-off-by: Andreas Berger <andreas@berger-ecommerce.com>
This commit is contained in:
Andreas Berger
2025-09-25 12:40:31 +02:00
parent 8bfe82fbc6
commit a521911fbc
9 changed files with 38 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/clever-boats-clap.md
+8
View File
@@ -0,0 +1,8 @@
---
'@backstage/plugin-search-react': minor
'@backstage/plugin-techdocs': minor
'@backstage/plugin-catalog': minor
'@backstage/plugin-search': minor
---
Add support for customizable icons in `SearchResultListItemBlueprint` and related components
plugins/catalog/report-alpha.api.md
+1
View File
@@ -1165,6 +1165,7 @@ const _default: OverridableFrontendPlugin<
{
predicate?: SearchResultItemExtensionPredicate;
component: SearchResultItemExtensionComponent;
icon?: JSX_2.Element;
},
'search.search-result-list-item.item',
{}
plugins/catalog/src/alpha/searchResultItems.tsx
+2
View File
@@ -15,9 +15,11 @@
*/
import { SearchResultListItemBlueprint } from '@backstage/plugin-search-react/alpha';
import { CatalogIcon } from '@backstage/core-components';
export const catalogSearchResultListItem = SearchResultListItemBlueprint.make({
params: {
icon: <CatalogIcon />,
predicate: result => result.type === 'software-catalog',
component: () =>
import('../components/CatalogSearchResultListItem').then(
plugins/search-react/report-alpha.api.md
+9 -4
View File
@@ -6,6 +6,7 @@
import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api';
import { ExtensionBlueprint } from '@backstage/frontend-plugin-api';
import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
import { JSX as JSX_2 } from 'react';
import { ListItemProps } from '@material-ui/core/ListItem';
import { SearchDocument } from '@backstage/plugin-search-common';
import { SearchResult } from '@backstage/plugin-search-common';
@@ -15,6 +16,7 @@ import { TranslationRef } from '@backstage/core-plugin-api/alpha';
export type BaseSearchResultListItemProps<T = {}> = T & {
rank?: number;
result?: SearchDocument;
icon?: JSX_2.Element;
} & Omit<ListItemProps, 'button'>;
// @alpha (undocumented)
@@ -51,7 +53,7 @@ export interface SearchFilterBlueprintParams {
// @alpha (undocumented)
export type SearchFilterExtensionComponent = (
props: SearchFilterExtensionComponentProps,
) => JSX.Element;
) => JSX_2.Element;
// @alpha (undocumented)
export type SearchFilterExtensionComponentProps = {
@@ -66,7 +68,7 @@ export const SearchFilterResultTypeBlueprint: ExtensionBlueprint<{
{
value: string;
name: string;
icon: JSX.Element;
icon: JSX_2;
},
'search.filters.result-types.type',
{}
@@ -79,7 +81,7 @@ export const SearchFilterResultTypeBlueprint: ExtensionBlueprint<{
{
value: string;
name: string;
icon: JSX.Element;
icon: JSX_2;
},
'search.filters.result-types.type',
{}
@@ -117,7 +119,7 @@ export type SearchResultItemExtensionComponent = <
P extends BaseSearchResultListItemProps,
>(
props: P,
) => JSX.Element | null;
) => JSX_2.Element | null;
// @alpha (undocumented)
export type SearchResultItemExtensionPredicate = (
@@ -132,6 +134,7 @@ export const SearchResultListItemBlueprint: ExtensionBlueprint<{
{
predicate?: SearchResultItemExtensionPredicate;
component: SearchResultItemExtensionComponent;
icon?: JSX_2.Element;
},
'search.search-result-list-item.item',
{}
@@ -148,6 +151,7 @@ export const SearchResultListItemBlueprint: ExtensionBlueprint<{
{
predicate?: SearchResultItemExtensionPredicate;
component: SearchResultItemExtensionComponent;
icon?: JSX_2.Element;
},
'search.search-result-list-item.item',
{}
@@ -162,6 +166,7 @@ export interface SearchResultListItemBlueprintParams {
noTrack?: boolean;
};
}) => Promise<SearchResultItemExtensionComponent>;
icon?: JSX_2.Element;
predicate?: SearchResultItemExtensionPredicate;
}
plugins/search-react/src/alpha/blueprints/SearchResultListItemBlueprint.tsx
+7 -2
View File
@@ -14,7 +14,7 @@
* limitations under the License.
*/
import { lazy } from 'react';
import { lazy, JSX } from 'react';
import {
createExtensionBlueprint,
ExtensionBoundary,
@@ -42,6 +42,11 @@ export interface SearchResultListItemBlueprintParams {
* Defaults to a predicate that returns true, which means it renders all sorts of results.
*/
predicate?: SearchResultItemExtensionPredicate;
/**
* The icon of the result item.
*/
icon?: JSX.Element;
}
/**
@@ -77,7 +82,7 @@ export const SearchResultListItemBlueprint = createExtensionBlueprint({
result={props.result}
noTrack={config.noTrack}
>
<ExtensionComponent {...props} />
<ExtensionComponent icon={params.icon} {...props} />
</SearchResultListItemExtension>
</ExtensionBoundary>
),
plugins/search-react/src/alpha/blueprints/types.ts
+3
View File
@@ -14,6 +14,7 @@
* limitations under the License.
*/
import { JSX } from 'react';
import { ListItemProps } from '@material-ui/core/ListItem';
import { SearchDocument, SearchResult } from '@backstage/plugin-search-common';
import { createExtensionDataRef } from '@backstage/frontend-plugin-api';
@@ -22,6 +23,7 @@ import { createExtensionDataRef } from '@backstage/frontend-plugin-api';
export type BaseSearchResultListItemProps<T = {}> = T & {
rank?: number;
result?: SearchDocument;
icon?: JSX.Element;
} & Omit<ListItemProps, 'button'>;
/** @alpha */
@@ -40,6 +42,7 @@ export type SearchResultItemExtensionPredicate = (
export const searchResultListItemDataRef = createExtensionDataRef<{
predicate?: SearchResultItemExtensionPredicate;
component: SearchResultItemExtensionComponent;
icon?: JSX.Element;
}>().with({ id: 'search.search-result-list-item.item' });
/** @alpha */
plugins/search/report-alpha.api.md
+4 -2
View File
@@ -90,6 +90,7 @@ const _default: OverridableFrontendPlugin<
{
predicate?: SearchResultItemExtensionPredicate;
component: SearchResultItemExtensionComponent;
icon?: JSX_2.Element;
},
'search.search-result-list-item.item',
{}
@@ -104,7 +105,7 @@ const _default: OverridableFrontendPlugin<
{
value: string;
name: string;
icon: JSX.Element;
icon: JSX_2.Element;
},
'search.filters.result-types.type',
{}
@@ -209,6 +210,7 @@ export const searchPage: ExtensionDefinition<{
{
predicate?: SearchResultItemExtensionPredicate;
component: SearchResultItemExtensionComponent;
icon?: JSX_2.Element;
},
'search.search-result-list-item.item',
{}
@@ -223,7 +225,7 @@ export const searchPage: ExtensionDefinition<{
{
value: string;
name: string;
icon: JSX.Element;
icon: JSX_2.Element;
},
'search.filters.result-types.type',
{}
plugins/techdocs/report-alpha.api.md
+2
View File
@@ -322,6 +322,7 @@ const _default: OverridableFrontendPlugin<
{
predicate?: SearchResultItemExtensionPredicate;
component: SearchResultItemExtensionComponent;
icon?: JSX_2.Element;
},
'search.search-result-list-item.item',
{}
@@ -365,6 +366,7 @@ export const techDocsSearchResultListItemExtension: ExtensionDefinition<{
{
predicate?: SearchResultItemExtensionPredicate;
component: SearchResultItemExtensionComponent;
icon?: JSX_2.Element;
},
'search.search-result-list-item.item',
{}
plugins/techdocs/src/alpha/index.tsx
+2
View File
@@ -55,6 +55,7 @@ import {
} from '@backstage/plugin-techdocs-react';
import { useTechdocsReaderIconLinkProps } from './hooks/useTechdocsReaderIconLinkProps';
import { DocsIcon } from '@backstage/core-components';
/** @alpha */
const techdocsEntityIconLink = EntityIconLinkBlueprint.make({
@@ -116,6 +117,7 @@ export const techDocsSearchResultListItemExtension =
},
factory(originalFactory, { config }) {
return originalFactory({
icon: <DocsIcon />,
predicate: result => result.type === 'techdocs',
component: async () => {
const { TechDocsSearchResultListItem } = await import(