feat(AdrSearchResultListItem): support displaying icon & hook up extensions

Signed-off-by: Phil Kuang <pkuang@factset.com>

plugins/adr/src/index.ts

@@ -30,5 +30,5 @@ export type {
 } from './api';
 export { isAdrAvailable } from '@backstage/plugin-adr-common';
 export * from './components/AdrReader';
-export { adrPlugin, EntityAdrContent } from './plugin';
-export * from './search';
+export { adrPlugin, AdrSearchResultListItem, EntityAdrContent } from './plugin';
+export type { AdrSearchResultListItemProps } from './search';

plugins/adr/src/plugin.ts

@@ -21,7 +21,9 @@ import {
   createRoutableExtension,
   discoveryApiRef,
 } from '@backstage/core-plugin-api';
+import { createSearchResultListItemExtension } from '@backstage/plugin-search-react';
 import { rootRouteRef } from './routes';
+import { AdrSearchResultListItemProps } from './search';
 
 /**
  * The Backstage plugin that holds ADR specific components
@@ -57,3 +59,21 @@ export const EntityAdrContent = adrPlugin.provide(
     mountPoint: rootRouteRef,
   }),
 );
+
+/**
+ * React extension used to render results on Search page or modal
+ *
+ * @public
+ */
+export const AdrSearchResultListItem: (
+  props: AdrSearchResultListItemProps,
+) => JSX.Element | null = adrPlugin.provide(
+  createSearchResultListItemExtension({
+    name: 'AdrSearchResultListItem',
+    component: () =>
+      import('./search/AdrSearchResultListItem').then(
+        m => m.AdrSearchResultListItem,
+      ),
+    predicate: result => result.type === 'adr',
+  }),
+);

plugins/adr/src/search/AdrSearchResultListItem.tsx

@@ -14,19 +14,19 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {
   Box,
   Chip,
   Divider,
   ListItem,
+  ListItemIcon,
   ListItemText,
   makeStyles,
 } from '@material-ui/core';
 import Typography from '@material-ui/core/Typography';
 import { parseEntityRef } from '@backstage/catalog-model';
 import { Link } from '@backstage/core-components';
-import { useAnalytics } from '@backstage/core-plugin-api';
 import { AdrDocument } from '@backstage/plugin-adr-common';
 import { humanizeEntityRef } from '@backstage/plugin-catalog-react';
 import { ResultHighlight } from '@backstage/plugin-search-common';
@@ -43,35 +43,36 @@ const useStyles = makeStyles({
   },
 });
 
+/**
+ * @public
+ */
+export type AdrSearchResultListItemProps = {
+  lineClamp?: number;
+  highlight?: ResultHighlight;
+  icon?: ReactNode;
+  rank?: number;
+  result?: AdrDocument;
+};
+
 /**
  * A component to display an ADR search result.
  * @public
  */
-export function AdrSearchResultListItem(props: {
-  lineClamp?: number;
-  highlight?: ResultHighlight;
-  rank?: number;
-  result: AdrDocument;
-}) {
-  const { lineClamp = 5, highlight, rank, result } = props;
+export function AdrSearchResultListItem(props: AdrSearchResultListItemProps) {
+  const { lineClamp = 5, highlight, icon, result } = props;
   const classes = useStyles();
-  const analytics = useAnalytics();
 
-  const handleClick = () => {
-    analytics.captureEvent('discover', result.title, {
-      attributes: { to: result.location },
-      value: rank,
-    });
-  };
+  if (!result) return null;
 
   return (
     <>
       <ListItem alignItems="flex-start" className={classes.flexContainer}>
+        {icon && <ListItemIcon>{icon}</ListItemIcon>}
         <ListItemText
           className={classes.itemText}
           primaryTypographyProps={{ variant: 'h6' }}
           primary={
-            <Link noTrack to={result.location} onClick={handleClick}>
+            <Link noTrack to={result.location}>
               {highlight?.fields.title ? (
                 <HighlightedSearchResultText
                   text={highlight?.fields.title || ''}

plugins/adr/src/search/index.ts

@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export * from './AdrSearchResultListItem';
+export type { AdrSearchResultListItemProps } from './AdrSearchResultListItem';