Merge pull request #17444 from seatgeek/master

Allow empty result prop in StackOverflowSearchResultListItem

.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.

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<StackOverflowSearchResultListItemProps>,
+) => JSX.Element | null;
+
+// @public
+export type StackOverflowSearchResultListItemProps = {
+  result?: any;
+  icon?: React_2.ReactNode;
+  rank?: number;
+  highlight?: ResultHighlight;
+};
 ```

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';

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<StackOverflowSearchResultListItemProps>,
+) => JSX.Element | null = stackOverflowPlugin.provide(
   createComponentExtension({
     name: 'StackOverflowResultListItem',
     component: {

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

@@ -29,8 +29,13 @@ 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.
+/**
+ * Props for {@link StackOverflowSearchResultListItem}
+ *
+ * @public
+ */
+export type StackOverflowSearchResultListItemProps = {
+  result?: any; // TODO(emmaindal): type to StackOverflowDocument.
   icon?: React.ReactNode;
   rank?: number;
   highlight?: ResultHighlight;
@@ -39,17 +44,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 (
     <>
       <ListItem alignItems="center">
@@ -58,7 +66,7 @@ export const StackOverflowSearchResultListItem = (
           <ListItemText
             primaryTypographyProps={{ variant: 'h6' }}
             primary={
-              <Link to={location} noTrack onClick={handleClick}>
+              <Link to={result.location} noTrack onClick={handleClick}>
                 {highlight?.fields?.title ? (
                   <HighlightedSearchResultText
                     text={highlight.fields.title}
@@ -66,7 +74,7 @@ export const StackOverflowSearchResultListItem = (
                     postTag={highlight.postTag}
                   />
                 ) : (
-                  _unescape(title)
+                  _unescape(result.title)
                 )}
               </Link>
             }
@@ -81,13 +89,13 @@ export const StackOverflowSearchResultListItem = (
                   />
                 </>
               ) : (
-                `Author: ${text}`
+                `Author: ${result.text}`
               )
             }
           />
-          <Chip label={`Answer(s): ${answers}`} size="small" />
-          {tags &&
-            tags.map((tag: string) => (
+          <Chip label={`Answer(s): ${result.answers}`} size="small" />
+          {result.tags &&
+            result.tags.map((tag: string) => (
               <Chip key={tag} label={`Tag: ${tag}`} size="small" />
             ))}
         </Box>

plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/index.ts

@@ -15,3 +15,4 @@
  */
 
 export { StackOverflowSearchResultListItem } from './StackOverflowSearchResultListItem';
+export type { StackOverflowSearchResultListItemProps } from './StackOverflowSearchResultListItem';