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.
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;
```
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('', () => {
it('should render without exploding', async () => {
@@ -40,4 +46,36 @@ describe('', () => {
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(
+
+
+ ,
+ ,
+ );
+
+ 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,
+ });
+ });
});
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 (
-
+
{props.icon && {props.icon}}