From bab2ae85a5c28dd68cae01697feda3c040ba0eff Mon Sep 17 00:00:00 2001
From: Emma Indal <emma.indahl@gmail.com>
Date: Mon, 14 Nov 2022 10:40:50 +0100
Subject: [PATCH 1/4] write test for capturing rank prop

Signed-off-by: Emma Indal <emma.indahl@gmail.com>
---
 ...StackOverflowSearchResultListItem.test.tsx | 40 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.test.tsx b/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.test.tsx
index 61e901591e..9e27149efb 100644
--- a/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.test.tsx
+++ b/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,
+    });
+  });
 });

From 4043f4c6cf7965d52bd508fa072a9b43f7791fbe Mon Sep 17 00:00:00 2001
From: Emma Indal <emma.indahl@gmail.com>
Date: Mon, 14 Nov 2022 10:50:59 +0100
Subject: [PATCH 2/4] accept result rank prop

Signed-off-by: Emma Indal <emma.indahl@gmail.com>
---
 .../StackOverflowSearchResultListItem.tsx            | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.tsx b/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.tsx
index c793939593..581fe34dfb 100644
--- a/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.tsx
+++ b/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">

From 8c4fe3171e25a43d1a1682ba74bff05ac42a10a7 Mon Sep 17 00:00:00 2001
From: Emma Indal <emma.indahl@gmail.com>
Date: Mon, 14 Nov 2022 10:52:01 +0100
Subject: [PATCH 3/4] update api report

Signed-off-by: Emma Indal <emma.indahl@gmail.com>
---
 plugins/stack-overflow/api-report.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/plugins/stack-overflow/api-report.md b/plugins/stack-overflow/api-report.md
index 81cfe1395b..9af9231094 100644
--- a/plugins/stack-overflow/api-report.md
+++ b/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;
 ```

From e32d5643e33523db22126c5744f6fb0393fa958d Mon Sep 17 00:00:00 2001
From: Emma Indal <emma.indahl@gmail.com>
Date: Mon, 14 Nov 2022 10:55:49 +0100
Subject: [PATCH 4/4] add changeset

Signed-off-by: Emma Indal <emma.indahl@gmail.com>
---
 .changeset/many-starfishes-exist.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/many-starfishes-exist.md

diff --git a/.changeset/many-starfishes-exist.md b/.changeset/many-starfishes-exist.md
new file mode 100644
index 0000000000..d6f891aa78
--- /dev/null
+++ b/.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.