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

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

.changeset/nine-ravens-kiss.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-adr': minor
+---
+
+The `AdrSearchResultListItem` component is now a search result extension. This means that when rendered as a child of components that render search extensions, the `result`, `rank`, and `highlight` properties are optional. See the [documentation](https://backstage.io/docs/features/search/how-to-guides#how-to-render-search-results-using-extensions) for more details.

.changeset/proud-glasses-live.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-adr': patch
+---
+
+Support displaying an icon on `AdrSearchResultListItem`

plugins/adr/api-report.md

@@ -11,6 +11,7 @@ import { ApiRef } from '@backstage/core-plugin-api';
 import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { DiscoveryApi } from '@backstage/core-plugin-api';
 import { isAdrAvailable } from '@backstage/plugin-adr-common';
+import { ReactNode } from 'react';
 import { ResultHighlight } from '@backstage/plugin-search-common';
 import { RouteRef } from '@backstage/core-plugin-api';
 
@@ -82,12 +83,18 @@ export type AdrReadResult = {
 };
 
 // @public
-export function AdrSearchResultListItem(props: {
+export const AdrSearchResultListItem: (
+  props: AdrSearchResultListItemProps,
+) => JSX.Element | null;
+
+// @public (undocumented)
+export type AdrSearchResultListItemProps = {
   lineClamp?: number;
   highlight?: ResultHighlight;
+  icon?: ReactNode;
   rank?: number;
-  result: AdrDocument;
-}): JSX.Element;
+  result?: AdrDocument;
+};
 
 // @public
 export const EntityAdrContent: (props: {

plugins/adr/package.json

@@ -39,6 +39,7 @@
     "remark-gfm": "^3.0.1"
   },
   "peerDependencies": {
+    "@types/react": "^16.13.1 || ^17.0.0",
     "react": "^16.13.1 || ^17.0.0",
     "react-router-dom": "6.0.0-beta.0 || ^6.3.0"
   },

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';

yarn.lock

@@ -4247,6 +4247,7 @@ __metadata:
     react-use: ^17.2.4
     remark-gfm: ^3.0.1
   peerDependencies:
+    "@types/react": ^16.13.1 || ^17.0.0
     react: ^16.13.1 || ^17.0.0
     react-router-dom: 6.0.0-beta.0 || ^6.3.0
   languageName: unknown