Add highlighting to StackOverflow result list item

Signed-off-by: Eric Peterson <ericpeterson@spotify.com>

.changeset/search-yet-another-wonderwall-cover.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-stack-overflow': patch
+---
+
+The `<StackOverflowSearchResultListItem />` component is now able to highlight the result title and/or text when provided. To take advantage of this, pass in the `highlight` prop, similar to how it is done on other result list item components.

plugins/stack-overflow/api-report.md

@@ -8,6 +8,7 @@
 import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { CardExtensionProps } from '@backstage/plugin-home';
 import { ReactNode } from 'react';
+import { ResultHighlight } from '@backstage/plugin-search-common';
 
 // @public
 export const HomePageStackOverflowQuestions: (
@@ -45,5 +46,6 @@ export const StackOverflowSearchResultListItem: (props: {
   result: any;
   icon?: ReactNode;
   rank?: number | undefined;
+  highlight?: ResultHighlight | undefined;
 }) => JSX.Element;
 ```

plugins/stack-overflow/package.json

@@ -27,6 +27,7 @@
     "@backstage/core-plugin-api": "workspace:^",
     "@backstage/plugin-home": "workspace:^",
     "@backstage/plugin-search-common": "workspace:^",
+    "@backstage/plugin-search-react": "workspace:^",
     "@backstage/theme": "workspace:^",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",

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

@@ -53,3 +53,23 @@ export const WithIcon = () => {
     />
   );
 };
+
+export const WithHighlight = () => {
+  return (
+    <StackOverflowSearchResultListItem
+      result={{
+        title: 'Customizing Spotify backstage UI',
+        text: 'Name of Author',
+        location: 'stackoverflow.question/1',
+        answers: 0,
+        tags: ['backstage'],
+      }}
+      icon={<StackOverflowIcon />}
+      highlight={{
+        fields: { title: '<xyz>Customizing</xyz> Spotify backstage ui' },
+        preTag: '<xyz>',
+        postTag: '</xyz>',
+      }}
+    />
+  );
+};

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

@@ -78,4 +78,28 @@ describe('<StackOverflowSearchResultListItem/>', () => {
       value: 1,
     });
   });
+
+  it('should render highlight', async () => {
+    await renderInTestApp(
+      <StackOverflowSearchResultListItem
+        result={{
+          title: 'Customizing Spotify backstage UI',
+          text: 'Name of Author',
+          location: 'https://stackoverflow.com/questions/7',
+          answers: 0,
+          tags: ['backstage'],
+        }}
+        highlight={{
+          fields: {
+            title: 'Highlighted Title',
+            text: 'Highlighted Author',
+          },
+          preTag: '<xyz>',
+          postTag: '</xyz>',
+        }}
+      />,
+    );
+    expect(screen.getByText(/Highlighted Title/i)).toBeInTheDocument();
+    expect(screen.getByText(/Highlighted Author/i)).toBeInTheDocument();
+  });
 });

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

@@ -26,17 +26,21 @@ import {
   Chip,
 } from '@material-ui/core';
 import { useAnalytics } from '@backstage/core-plugin-api';
+import { ResultHighlight } from '@backstage/plugin-search-common';
+import { HighlightedSearchResultText } from '@backstage/plugin-search-react';
 
 type StackOverflowSearchResultListItemProps = {
   result: any; // TODO(emmaindal): type to StackOverflowDocument.
   icon?: React.ReactNode;
   rank?: number;
+  highlight?: ResultHighlight;
 };
 
 export const StackOverflowSearchResultListItem = (
   props: StackOverflowSearchResultListItemProps,
 ) => {
   const { location, title, text, answers, tags } = props.result;
+  const { highlight } = props;
   const analytics = useAnalytics();
 
   const handleClick = () => {
@@ -55,10 +59,31 @@ export const StackOverflowSearchResultListItem = (
             primaryTypographyProps={{ variant: 'h6' }}
             primary={
               <Link to={location} noTrack onClick={handleClick}>
-                {_unescape(title)}
+                {highlight?.fields?.title ? (
+                  <HighlightedSearchResultText
+                    text={highlight.fields.title}
+                    preTag={highlight.preTag}
+                    postTag={highlight.postTag}
+                  />
+                ) : (
+                  _unescape(title)
+                )}
               </Link>
             }
-            secondary={`Author: ${text}`}
+            secondary={
+              highlight?.fields?.text ? (
+                <>
+                  Author:{' '}
+                  <HighlightedSearchResultText
+                    text={highlight.fields.text}
+                    preTag={highlight.preTag}
+                    postTag={highlight.postTag}
+                  />
+                </>
+              ) : (
+                `Author: ${text}`
+              )
+            }
           />
           <Chip label={`Answer(s): ${answers}`} size="small" />
           {tags &&

yarn.lock

@@ -7875,6 +7875,7 @@ __metadata:
     "@backstage/dev-utils": "workspace:^"
     "@backstage/plugin-home": "workspace:^"
     "@backstage/plugin-search-common": "workspace:^"
+    "@backstage/plugin-search-react": "workspace:^"
     "@backstage/test-utils": "workspace:^"
     "@backstage/theme": "workspace:^"
     "@material-ui/core": ^4.12.2