Merge pull request #31277 from Andy2003/feature/provide-icon-for-search-result-icon

Add support for customizable icons in SearchResultListItemBlueprint

plugins/search-react/src/alpha/blueprints/SearchResultListItemBlueprint.tsx

@@ -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

@@ -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 */