diff --git a/.changeset/slow-insects-cheat.md b/.changeset/slow-insects-cheat.md new file mode 100644 index 0000000000..e07d6d6f96 --- /dev/null +++ b/.changeset/slow-insects-cheat.md @@ -0,0 +1,8 @@ +--- +'@backstage/plugin-techdocs': patch +'@backstage/plugin-catalog': patch +'@backstage/plugin-explore': patch +--- + +Add ability to pass icon as function to have ability +to customize it by search item diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md index 6d746f6a7c..ee0ca180f4 100644 --- a/plugins/catalog/api-report.md +++ b/plugins/catalog/api-report.md @@ -117,7 +117,7 @@ export interface CatalogSearchResultListItemProps { // (undocumented) highlight?: ResultHighlight; // (undocumented) - icon?: ReactNode; + icon?: ReactNode | ((result: IndexableDocument) => ReactNode); // (undocumented) rank?: number; // (undocumented) diff --git a/plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx b/plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx index a277584d2f..6d0b3e3038 100644 --- a/plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx +++ b/plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx @@ -50,7 +50,7 @@ const useStyles = makeStyles( * @public */ export interface CatalogSearchResultListItemProps { - icon?: ReactNode; + icon?: ReactNode | ((result: IndexableDocument) => ReactNode); result?: IndexableDocument; highlight?: ResultHighlight; rank?: number; @@ -69,7 +69,11 @@ export function CatalogSearchResultListItem( return (
- {props.icon && {props.icon}} + {props.icon && ( + + {typeof props.icon === 'function' ? props.icon(result) : props.icon} + + )}
ReactNode); // (undocumented) rank?: number; // (undocumented) diff --git a/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx b/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx index eb12ba45d8..1aad122ee6 100644 --- a/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx +++ b/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx @@ -46,7 +46,7 @@ const useStyles = makeStyles({ * @public */ export interface ToolSearchResultListItemProps { - icon?: ReactNode; + icon?: ReactNode | ((result: IndexableDocument) => ReactNode); result?: IndexableDocument; highlight?: ResultHighlight; rank?: number; @@ -62,7 +62,11 @@ export function ToolSearchResultListItem(props: ToolSearchResultListItemProps) { return ( <> - {props.icon && {props.icon}} + {props.icon && ( + + {typeof props.icon === 'function' ? props.icon(result) : props.icon} + + )}
ReactNode); result?: any; highlight?: ResultHighlight; rank?: number; diff --git a/plugins/techdocs/src/search/components/TechDocsSearchResultListItem.tsx b/plugins/techdocs/src/search/components/TechDocsSearchResultListItem.tsx index 9bf8b76092..3c0d2314e2 100644 --- a/plugins/techdocs/src/search/components/TechDocsSearchResultListItem.tsx +++ b/plugins/techdocs/src/search/components/TechDocsSearchResultListItem.tsx @@ -37,7 +37,7 @@ const useStyles = makeStyles({ * @public */ export type TechDocsSearchResultListItemProps = { - icon?: ReactNode; + icon?: ReactNode | ((result: any) => ReactNode); result?: any; highlight?: ResultHighlight; rank?: number; @@ -151,7 +151,11 @@ export const TechDocsSearchResultListItem = ( const ListItemWrapper = ({ children }: PropsWithChildren<{}>) => asListItem ? ( <> - {icon && {icon}} + {icon && ( + + {typeof icon === 'function' ? icon(result) : icon} + + )}
{children}
) : (