From 12b4e4d7656f162793813426a4de1b97d1dbefd6 Mon Sep 17 00:00:00 2001 From: Zach Hammer Date: Tue, 18 Apr 2023 16:21:43 -0400 Subject: [PATCH 1/4] Match implementation of other search result items for stack overflow Allow for empty result Signed-off-by: Zach Hammer --- plugins/stack-overflow/src/plugin.ts | 6 ++++- .../StackOverflowSearchResultListItem.tsx | 27 ++++++++++--------- 2 files changed, 20 insertions(+), 13 deletions(-) diff --git a/plugins/stack-overflow/src/plugin.ts b/plugins/stack-overflow/src/plugin.ts index a837846708..5be4c89cbe 100644 --- a/plugins/stack-overflow/src/plugin.ts +++ b/plugins/stack-overflow/src/plugin.ts @@ -23,6 +23,8 @@ import { import { createCardExtension } from '@backstage/plugin-home'; import { StackOverflowQuestionsContentProps } from './types'; import { stackOverflowApiRef, StackOverflowClient } from './api'; +import { SearchResultListItemExtensionProps } from '@backstage/plugin-search-react'; +import { StackOverflowSearchResultListItemProps } from './search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem'; /** * The Backstage plugin that holds stack overflow specific components @@ -45,7 +47,9 @@ export const stackOverflowPlugin = createPlugin({ * * @public */ -export const StackOverflowSearchResultListItem = stackOverflowPlugin.provide( +export const StackOverflowSearchResultListItem: ( + props: SearchResultListItemExtensionProps, +) => JSX.Element | null = stackOverflowPlugin.provide( createComponentExtension({ name: 'StackOverflowResultListItem', component: { diff --git a/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.tsx b/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.tsx index 9971b0e7e5..de015145e1 100644 --- a/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.tsx +++ b/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.tsx @@ -29,8 +29,8 @@ 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. +export type StackOverflowSearchResultListItemProps = { + result?: any; // TODO(emmaindal): type to StackOverflowDocument. icon?: React.ReactNode; rank?: number; highlight?: ResultHighlight; @@ -39,17 +39,20 @@ type StackOverflowSearchResultListItemProps = { export const StackOverflowSearchResultListItem = ( props: StackOverflowSearchResultListItemProps, ) => { - const { location, title, text, answers, tags } = props.result; - const { highlight } = props; + const { result, highlight } = props; const analytics = useAnalytics(); const handleClick = () => { - analytics.captureEvent('discover', title, { - attributes: { to: location }, + analytics.captureEvent('discover', result.title, { + attributes: { to: result.location }, value: props.rank, }); }; + if (!result) { + return null; + } + return ( <> @@ -58,7 +61,7 @@ export const StackOverflowSearchResultListItem = ( + {highlight?.fields?.title ? ( ) : ( - _unescape(title) + _unescape(result.title) )} } @@ -81,13 +84,13 @@ export const StackOverflowSearchResultListItem = ( /> ) : ( - `Author: ${text}` + `Author: ${result.text}` ) } /> - - {tags && - tags.map((tag: string) => ( + + {result.tags && + result.tags.map((tag: string) => ( ))} From c1ff65f315a1c45c16ecd3f14c10ed902718bd6b Mon Sep 17 00:00:00 2001 From: Zach Hammer Date: Tue, 18 Apr 2023 16:25:44 -0400 Subject: [PATCH 2/4] Add changeset Signed-off-by: Zach Hammer --- .changeset/five-tigers-whisper.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/five-tigers-whisper.md diff --git a/.changeset/five-tigers-whisper.md b/.changeset/five-tigers-whisper.md new file mode 100644 index 0000000000..aa9758c3b5 --- /dev/null +++ b/.changeset/five-tigers-whisper.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-stack-overflow': patch +--- + +StackOverflowSearchResultListItem can now accept an empty result prop so that it can be rendered in the suggested SearchResultListItem pattern. From 0a59de68dbb0c4cccbe0a285d83218a032d9a34a Mon Sep 17 00:00:00 2001 From: Zach Hammer Date: Tue, 18 Apr 2023 17:26:38 -0400 Subject: [PATCH 3/4] Fix ae-forgotten-export // Warning: (ae-forgotten-export) The symbol "StackOverflowSearchResultListItemProps" needs to be exported by the entry point index.d.ts Signed-off-by: Zach Hammer --- plugins/stack-overflow/src/index.ts | 1 + .../StackOverflowSearchResultListItem.tsx | 5 +++++ .../src/search/StackOverflowSearchResultListItem/index.ts | 1 + 3 files changed, 7 insertions(+) diff --git a/plugins/stack-overflow/src/index.ts b/plugins/stack-overflow/src/index.ts index a796f563eb..11af38f7ab 100644 --- a/plugins/stack-overflow/src/index.ts +++ b/plugins/stack-overflow/src/index.ts @@ -30,5 +30,6 @@ export type { StackOverflowQuestionsContentProps, StackOverflowQuestionsRequestParams, } from './types'; +export type { StackOverflowSearchResultListItemProps } from './search/StackOverflowSearchResultListItem'; export { stackOverflowApiRef } from './api'; export type { StackOverflowApi } from './api'; diff --git a/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.tsx b/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.tsx index de015145e1..245666deeb 100644 --- a/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.tsx +++ b/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.tsx @@ -29,6 +29,11 @@ import { useAnalytics } from '@backstage/core-plugin-api'; import { ResultHighlight } from '@backstage/plugin-search-common'; import { HighlightedSearchResultText } from '@backstage/plugin-search-react'; +/** + * Props for {@link StackOverflowSearchResultListItem} + * + * @public + */ export type StackOverflowSearchResultListItemProps = { result?: any; // TODO(emmaindal): type to StackOverflowDocument. icon?: React.ReactNode; diff --git a/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/index.ts b/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/index.ts index 499f7273aa..7aeec9e55a 100644 --- a/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/index.ts +++ b/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/index.ts @@ -15,3 +15,4 @@ */ export { StackOverflowSearchResultListItem } from './StackOverflowSearchResultListItem'; +export type { StackOverflowSearchResultListItemProps } from './StackOverflowSearchResultListItem'; From 032f03b502c9ab00bc9814330b2499f25102a072 Mon Sep 17 00:00:00 2001 From: Zach Hammer Date: Wed, 19 Apr 2023 09:10:23 -0400 Subject: [PATCH 4/4] Build api report Signed-off-by: Zach Hammer --- plugins/stack-overflow/api-report.md | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/plugins/stack-overflow/api-report.md b/plugins/stack-overflow/api-report.md index 598bd06a04..b006f263ed 100644 --- a/plugins/stack-overflow/api-report.md +++ b/plugins/stack-overflow/api-report.md @@ -8,8 +8,9 @@ import { ApiRef } from '@backstage/core-plugin-api'; import { BackstagePlugin } from '@backstage/core-plugin-api'; import { CardExtensionProps } from '@backstage/plugin-home'; -import { ReactNode } from 'react'; +import { default as React_2 } from 'react'; import { ResultHighlight } from '@backstage/plugin-search-common'; +import { SearchResultListItemExtensionProps } from '@backstage/plugin-search-react'; // @public export const HomePageStackOverflowQuestions: ( @@ -53,10 +54,15 @@ export type StackOverflowQuestionsRequestParams = { }; // @public -export const StackOverflowSearchResultListItem: (props: { - result: any; - icon?: ReactNode; - rank?: number | undefined; - highlight?: ResultHighlight | undefined; -}) => JSX.Element; +export const StackOverflowSearchResultListItem: ( + props: SearchResultListItemExtensionProps, +) => JSX.Element | null; + +// @public +export type StackOverflowSearchResultListItemProps = { + result?: any; + icon?: React_2.ReactNode; + rank?: number; + highlight?: ResultHighlight; +}; ```