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