feat(adrs): track discover event and result rank in AdrSearchResultListItem

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

.changeset/thick-radios-drive.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-adr': patch
+---
+
+Track discover event and result rank for `AdrSearchResultListItem`

plugins/adr/api-report.md

@@ -47,10 +47,12 @@ export const AdrReader: {
 export const AdrSearchResultListItem: ({
   lineClamp,
   highlight,
+  rank,
   result,
 }: {
   lineClamp?: number | undefined;
   highlight?: ResultHighlight | undefined;
+  rank?: number | undefined;
   result: AdrDocument;
 }) => JSX.Element;
 

plugins/adr/src/search/AdrSearchResultListItem.tsx

@@ -24,6 +24,7 @@ import {
   makeStyles,
 } from '@material-ui/core';
 import { Link } from '@backstage/core-components';
+import { useAnalytics } from '@backstage/core-plugin-api';
 import { AdrDocument } from '@backstage/plugin-adr-common';
 import { ResultHighlight } from '@backstage/plugin-search-common';
 import { HighlightedSearchResultText } from '@backstage/plugin-search-react';
@@ -46,16 +47,26 @@ const useStyles = makeStyles({
 export const AdrSearchResultListItem = ({
   lineClamp = 5,
   highlight,
+  rank,
   result,
 }: {
   lineClamp?: number;
   highlight?: ResultHighlight;
+  rank?: number;
   result: AdrDocument;
 }) => {
   const classes = useStyles();
+  const analytics = useAnalytics();
+
+  const handleClick = () => {
+    analytics.captureEvent('discover', result.title, {
+      attributes: { to: result.location },
+      value: rank,
+    });
+  };
 
   return (
-    <Link to={result.location}>
+    <Link noTrack to={result.location} onClick={handleClick}>
       <ListItem alignItems="flex-start" className={classes.flexContainer}>
         <ListItemText
           className={classes.itemText}