Merge pull request #14600 from backstage/emmaindal/stack-overflow-result-list-item

[Stack Overflow] result list item to accept rank prop

.changeset/many-starfishes-exist.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-stack-overflow': patch
+---
+
+`StackOverflowSearchResultListItem` now accept optional rank property to be able to capture rank analytics data.

plugins/stack-overflow/api-report.md

@@ -44,5 +44,6 @@ export type StackOverflowQuestionsRequestParams = {
 export const StackOverflowSearchResultListItem: (props: {
   result: any;
   icon?: ReactNode;
+  rank?: number | undefined;
 }) => JSX.Element;
 ```

plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.test.tsx

@@ -15,9 +15,15 @@
  */
 
 import React from 'react';
-import { renderInTestApp } from '@backstage/test-utils';
+import {
+  MockAnalyticsApi,
+  renderInTestApp,
+  TestApiProvider,
+} from '@backstage/test-utils';
+import userEvent from '@testing-library/user-event';
 import { screen } from '@testing-library/react';
 import { StackOverflowSearchResultListItem } from './StackOverflowSearchResultListItem';
+import { analyticsApiRef } from '@backstage/core-plugin-api';
 
 describe('<StackOverflowSearchResultListItem/>', () => {
   it('should render without exploding', async () => {
@@ -40,4 +46,36 @@ describe('<StackOverflowSearchResultListItem/>', () => {
       screen.getByText(/Customizing Spotify backstage UI/i).closest('a'),
     ).toHaveAttribute('href', 'https://stackoverflow.com/questions/7');
   });
+
+  it('should capture analytics for rank', async () => {
+    const analyticsSpy = new MockAnalyticsApi();
+
+    await renderInTestApp(
+      <TestApiProvider apis={[[analyticsApiRef, analyticsSpy]]}>
+        <StackOverflowSearchResultListItem
+          result={{
+            title: 'Customizing Spotify backstage UI',
+            text: 'Name of Author',
+            location: 'https://stackoverflow.com/questions/7',
+            answers: 0,
+            tags: ['backstage'],
+          }}
+          rank={1}
+        />
+        ,
+      </TestApiProvider>,
+    );
+
+    await userEvent.click(
+      screen.getByText(/Customizing Spotify backstage UI/i),
+    );
+
+    expect(analyticsSpy.getEvents()[0]).toMatchObject({
+      action: 'discover',
+      attributes: { to: 'https://stackoverflow.com/questions/7' },
+      context: { extension: 'App', pluginId: 'root', routeRef: 'unknown' },
+      subject: 'Customizing Spotify backstage UI',
+      value: 1,
+    });
+  });
 });

plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.tsx

@@ -25,19 +25,29 @@ import {
   Box,
   Chip,
 } from '@material-ui/core';
+import { useAnalytics } from '@backstage/core-plugin-api';
 
 type StackOverflowSearchResultListItemProps = {
   result: any; // TODO(emmaindal): type to StackOverflowDocument.
   icon?: React.ReactNode;
+  rank?: number;
 };
 
 export const StackOverflowSearchResultListItem = (
   props: StackOverflowSearchResultListItemProps,
 ) => {
   const { location, title, text, answers, tags } = props.result;
+  const analytics = useAnalytics();
+
+  const handleClick = () => {
+    analytics.captureEvent('discover', title, {
+      attributes: { to: location },
+      value: props.rank,
+    });
+  };
 
   return (
-    <Link to={location}>
+    <Link to={location} noTrack onClick={handleClick}>
       <ListItem alignItems="center">
         {props.icon && <ListItemIcon>{props.icon}</ListItemIcon>}
         <Box flexWrap="wrap">