diff --git a/.changeset/search-yet-another-wonderwall-cover.md b/.changeset/search-yet-another-wonderwall-cover.md
new file mode 100644
index 0000000000..c87f418e50
--- /dev/null
+++ b/.changeset/search-yet-another-wonderwall-cover.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-stack-overflow': patch
+---
+
+The `` 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.
diff --git a/plugins/stack-overflow/api-report.md b/plugins/stack-overflow/api-report.md
index 9af9231094..fe2a970c13 100644
--- a/plugins/stack-overflow/api-report.md
+++ b/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;
```
diff --git a/plugins/stack-overflow/package.json b/plugins/stack-overflow/package.json
index df1724ac16..2d30f3e2ae 100644
--- a/plugins/stack-overflow/package.json
+++ b/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",
diff --git a/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.stories.tsx b/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.stories.tsx
index df5b8038b0..03d8fdd3d8 100644
--- a/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.stories.tsx
+++ b/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.stories.tsx
@@ -53,3 +53,23 @@ export const WithIcon = () => {
/>
);
};
+
+export const WithHighlight = () => {
+ return (
+ }
+ highlight={{
+ fields: { title: 'Customizing Spotify backstage ui' },
+ preTag: '',
+ postTag: '',
+ }}
+ />
+ );
+};
diff --git a/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.test.tsx b/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.test.tsx
index 9e27149efb..bd3640a5ec 100644
--- a/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.test.tsx
+++ b/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.test.tsx
@@ -78,4 +78,28 @@ describe('', () => {
value: 1,
});
});
+
+ it('should render highlight', async () => {
+ await renderInTestApp(
+ ',
+ postTag: '',
+ }}
+ />,
+ );
+ expect(screen.getByText(/Highlighted Title/i)).toBeInTheDocument();
+ expect(screen.getByText(/Highlighted Author/i)).toBeInTheDocument();
+ });
});
diff --git a/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.tsx b/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.tsx
index 6a2c8f5889..9971b0e7e5 100644
--- a/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.tsx
+++ b/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={
- {_unescape(title)}
+ {highlight?.fields?.title ? (
+
+ ) : (
+ _unescape(title)
+ )}
}
- secondary={`Author: ${text}`}
+ secondary={
+ highlight?.fields?.text ? (
+ <>
+ Author:{' '}
+
+ >
+ ) : (
+ `Author: ${text}`
+ )
+ }
/>
{tags &&
diff --git a/yarn.lock b/yarn.lock
index 6311ccc002..3ad6ff25e4 100644
--- a/yarn.lock
+++ b/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