Add ability to pass icon as function to have ability to customize it by search item

Signed-off-by: Ilya Savich <isavich@box.com>

.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

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)

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 (
     <div className={classes.item}>
-      {props.icon && <ListItemIcon>{props.icon}</ListItemIcon>}
+      {props.icon && (
+        <ListItemIcon>
+          {typeof props.icon === 'function' ? props.icon(result) : props.icon}
+        </ListItemIcon>
+      )}
       <div className={classes.flexContainer}>
         <ListItemText
           className={classes.itemText}

plugins/explore/api-report.md

@@ -135,7 +135,7 @@ export interface ToolSearchResultListItemProps {
   // (undocumented)
   highlight?: ResultHighlight;
   // (undocumented)
-  icon?: ReactNode;
+  icon?: ReactNode | ((result: IndexableDocument) => ReactNode);
   // (undocumented)
   rank?: number;
   // (undocumented)

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 && <ListItemIcon>{props.icon}</ListItemIcon>}
+      {props.icon && (
+        <ListItemIcon>
+          {typeof props.icon === 'function' ? props.icon(result) : props.icon}
+        </ListItemIcon>
+      )}
       <div className={classes.flexContainer}>
         <ListItemText
           className={classes.itemText}

plugins/techdocs/api-report.md

@@ -406,7 +406,7 @@ export const TechDocsSearchResultListItem: (
 
 // @public
 export type TechDocsSearchResultListItemProps = {
-  icon?: ReactNode;
+  icon?: ReactNode | ((result: any) => ReactNode);
   result?: any;
   highlight?: ResultHighlight;
   rank?: number;

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 && <ListItemIcon>{icon}</ListItemIcon>}
+        {icon && (
+          <ListItemIcon>
+            {typeof icon === 'function' ? icon(result) : icon}
+          </ListItemIcon>
+        )}
         <div className={classes.flexContainer}>{children}</div>
       </>
     ) : (