support custom list item props on search extensions

Co-authored-by: Camila Belo <camilaibs@gmail.com>
Signed-off-by: Emma Indal <emma.indahl@gmail.com>

docs/features/search/how-to-guides.md

@@ -235,6 +235,20 @@ export const YourSearchResultListItemExtension = plugin.provide(
 );
 ```
 
+If your list item accept props, you can extend the `SearchResultListItemExtensionProps` with your component specific props:
+
+```tsx
+export const YourSearchResultListItemExtension: (
+  props: SearchResultListItemExtensionProps<YourSearchResultListItemProps>,
+) => JSX.Element | null = plugin.provide(
+  createSearchResultListItemExtension({
+    name: 'YourSearchResultListItem',
+    component: () =>
+      import('./components').then(m => m.YourSearchResultListItem),
+  }),
+);
+```
+
 Additionally, you can define a predicate function that receives a result and returns whether your extension should be used to render it or not:
 
 ```tsx

plugins/catalog/api-report.md

@@ -19,6 +19,7 @@ import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
 import { ResultHighlight } from '@backstage/plugin-search-common';
 import { RouteRef } from '@backstage/core-plugin-api';
+import { SearchResultListItemExtensionProps } from '@backstage/plugin-search-react';
 import { StarredEntitiesApi } from '@backstage/plugin-catalog-react';
 import { StorageApi } from '@backstage/core-plugin-api';
 import { StyleRules } from '@material-ui/core/styles/withStyles';
@@ -108,7 +109,7 @@ export const catalogPlugin: BackstagePlugin<
 
 // @public (undocumented)
 export const CatalogSearchResultListItem: (
-  props: CatalogSearchResultListItemProps,
+  props: SearchResultListItemExtensionProps<CatalogSearchResultListItemProps>,
 ) => JSX.Element | null;
 
 // @public

plugins/catalog/src/plugin.ts

@@ -31,7 +31,10 @@ import {
   fetchApiRef,
   storageApiRef,
 } from '@backstage/core-plugin-api';
-import { createSearchResultListItemExtension } from '@backstage/plugin-search-react';
+import {
+  createSearchResultListItemExtension,
+  SearchResultListItemExtensionProps,
+} from '@backstage/plugin-search-react';
 import { DefaultStarredEntitiesApi } from './apis';
 import { AboutCardProps } from './components/AboutCard';
 import { DefaultCatalogPageProps } from './components/CatalogPage';
@@ -254,7 +257,7 @@ export const RelatedEntitiesCard: <T extends Entity>(
 
 /** @public */
 export const CatalogSearchResultListItem: (
-  props: CatalogSearchResultListItemProps,
+  props: SearchResultListItemExtensionProps<CatalogSearchResultListItemProps>,
 ) => JSX.Element | null = catalogPlugin.provide(
   createSearchResultListItemExtension({
     name: 'CatalogSearchResultListItem',

plugins/explore/api-report.md

@@ -19,6 +19,7 @@ import { IndexableDocument } from '@backstage/plugin-search-common';
 import { ReactNode } from 'react';
 import { ResultHighlight } from '@backstage/plugin-search-common';
 import { RouteRef } from '@backstage/core-plugin-api';
+import { SearchResultListItemExtensionProps } from '@backstage/plugin-search-react';
 import { TabProps } from '@material-ui/core';
 
 // @public @deprecated (undocumented)
@@ -126,7 +127,7 @@ export const ToolExplorerContent: (props: {
 
 // @public (undocumented)
 export const ToolSearchResultListItem: (
-  props: ToolSearchResultListItemProps,
+  props: SearchResultListItemExtensionProps<ToolSearchResultListItemProps>,
 ) => JSX.Element | null;
 
 // @public

plugins/explore/src/plugin.ts

@@ -22,7 +22,10 @@ import {
   discoveryApiRef,
   fetchApiRef,
 } from '@backstage/core-plugin-api';
-import { createSearchResultListItemExtension } from '@backstage/plugin-search-react';
+import {
+  createSearchResultListItemExtension,
+  SearchResultListItemExtensionProps,
+} from '@backstage/plugin-search-react';
 import { ExploreClient, exploreApiRef } from './api';
 import { ToolSearchResultListItemProps } from './components/ToolSearchResultListItem';
 // import { exampleTools } from './util/examples';
@@ -70,7 +73,7 @@ export const explorePlugin = createPlugin({
 
 /** @public */
 export const ToolSearchResultListItem: (
-  props: ToolSearchResultListItemProps,
+  props: SearchResultListItemExtensionProps<ToolSearchResultListItemProps>,
 ) => JSX.Element | null = explorePlugin.provide(
   createSearchResultListItemExtension({
     name: 'ToolSearchResultListItem',

plugins/search-react/api-report.md

@@ -14,6 +14,7 @@ import { InputBaseProps } from '@material-ui/core';
 import { JsonObject } from '@backstage/types';
 import { JsonValue } from '@backstage/types';
 import { LinkProps } from '@backstage/core-components';
+import { ListItemProps } from '@material-ui/core';
 import { ListItemTextProps } from '@material-ui/core';
 import { ListProps } from '@material-ui/core';
 import { PropsWithChildren } from 'react';
@@ -392,6 +393,16 @@ export type SearchResultListItemExtensionOptions<
   predicate?: (result: SearchResult_2) => boolean;
 };
 
+// @public
+export type SearchResultListItemExtensionProps<Props extends {} = {}> = Props &
+  PropsWithChildren<
+    {
+      rank?: number;
+      result?: SearchDocument;
+      noTrack?: boolean;
+    } & Omit<ListItemProps, 'button'>
+  >;
+
 // @public
 export const SearchResultListItemExtensions: (
   props: SearchResultListItemExtensionsProps,

plugins/search-react/src/extensions.tsx

@@ -33,7 +33,7 @@ import {
 } from '@backstage/core-plugin-api';
 import { SearchDocument, SearchResult } from '@backstage/plugin-search-common';
 
-import { ListItem, List, ListProps } from '@material-ui/core';
+import { ListItem, List, ListProps, ListItemProps } from '@material-ui/core';
 
 import { DefaultResultListItem } from './components';
 
@@ -73,26 +73,34 @@ const findSearchResultListItemExtensionElement = (
 };
 
 /**
- * @internal
- * Props for {@link SearchResultListItemExtension}.
+ * @public
+ * Extends props for any search result list item extension
  */
-type SearchResultListItemExtensionProps = PropsWithChildren<{
-  rank?: number;
-  result?: SearchDocument;
-  noTrack?: boolean;
-}>;
+export type SearchResultListItemExtensionProps<Props extends {} = {}> = Props &
+  PropsWithChildren<
+    {
+      rank?: number;
+      result?: SearchDocument;
+      noTrack?: boolean;
+    } & Omit<ListItemProps, 'button'>
+  >;
 
 /**
  * @internal
  * Extends children with extension capabilities.
  * @param props - see {@link SearchResultListItemExtensionProps}.
  */
-const SearchResultListItemExtension = ({
-  rank,
-  result,
-  noTrack,
-  children,
-}: SearchResultListItemExtensionProps) => {
+const SearchResultListItemExtension = (
+  props: SearchResultListItemExtensionProps,
+) => {
+  const {
+    rank,
+    result,
+    noTrack,
+    children,
+    alignItems = 'flex-start',
+    ...rest
+  } = props;
   const analytics = useAnalytics();
 
   const handleClickCapture = useCallback(() => {
@@ -107,8 +115,9 @@ const SearchResultListItemExtension = ({
   return (
     <ListItem
       divider
-      alignItems="flex-start"
+      alignItems={alignItems}
       onClickCapture={handleClickCapture}
+      {...rest}
     >
       {children}
     </ListItem>

plugins/techdocs/api-report.md

@@ -19,6 +19,7 @@ import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
 import { ResultHighlight } from '@backstage/plugin-search-common';
 import { RouteRef } from '@backstage/core-plugin-api';
+import { SearchResultListItemExtensionProps } from '@backstage/plugin-search-react';
 import { TableColumn } from '@backstage/core-components';
 import { TableOptions } from '@backstage/core-components';
 import { TableProps } from '@backstage/core-components';
@@ -400,7 +401,7 @@ export type TechDocsSearchProps = {
 
 // @public
 export const TechDocsSearchResultListItem: (
-  props: TechDocsSearchResultListItemProps,
+  props: SearchResultListItemExtensionProps<TechDocsSearchResultListItemProps>,
 ) => JSX.Element | null;
 
 // @public

plugins/techdocs/src/plugin.ts

@@ -33,7 +33,10 @@ import {
   fetchApiRef,
   identityApiRef,
 } from '@backstage/core-plugin-api';
-import { createSearchResultListItemExtension } from '@backstage/plugin-search-react';
+import {
+  createSearchResultListItemExtension,
+  SearchResultListItemExtensionProps,
+} from '@backstage/plugin-search-react';
 import { TechDocsSearchResultListItemProps } from './search/components/TechDocsSearchResultListItem';
 
 /**
@@ -162,7 +165,7 @@ export const TechDocsReaderPage = techdocsPlugin.provide(
  * @public
  */
 export const TechDocsSearchResultListItem: (
-  props: TechDocsSearchResultListItemProps,
+  props: SearchResultListItemExtensionProps<TechDocsSearchResultListItemProps>,
 ) => JSX.Element | null = techdocsPlugin.provide(
   createSearchResultListItemExtension({
     name: 'TechDocsSearchResultListItem',