feat(search-react): customize <SearchResult/> no result state

Signed-off-by: Rutuja Marathe <rutujasudam.marathe@factset.com>

.changeset/mean-moles-relate.md

@@ -0,0 +1,31 @@
+---
+'@backstage/plugin-search-react': minor
+---
+
+Allow customizing empty state component through `noResultsComponent` property.
+
+Example:
+
+```jsx
+<SearchResult noResultsComponent={<>No results were found</>}>
+  {({ results }) => (
+    <List>
+      {results.map(({ type, document }) => {
+        switch (type) {
+          case 'custom-result-item':
+            return (
+              <CustomResultListItem key={document.location} result={document} />
+            );
+          default:
+            return (
+              <DefaultResultListItem
+                key={document.location}
+                result={document}
+              />
+            );
+        }
+      })}
+    </List>
+  )}
+</SearchResult>
+```

plugins/search-react/api-report.md

@@ -402,6 +402,7 @@ export const SearchResultPager: () => JSX.Element;
 // @public
 export type SearchResultProps = Pick<SearchResultStateProps, 'query'> & {
   children: (resultSet: SearchResultSet) => JSX.Element;
+  noResultsComponent?: JSX.Element;
 };
 
 // @public

plugins/search-react/src/components/SearchResult/SearchResult.stories.tsx

@@ -218,3 +218,32 @@ export const GroupLayout = () => {
     </SearchResult>
   );
 };
+
+export const WithCustomNoResultsComponent = () => {
+  return (
+    <SearchResult noResultsComponent={<>No results were found</>}>
+      {({ results }) => (
+        <List>
+          {results.map(({ type, document }) => {
+            switch (type) {
+              case 'custom-result-item':
+                return (
+                  <CustomResultListItem
+                    key={document.location}
+                    result={document}
+                  />
+                );
+              default:
+                return (
+                  <DefaultResultListItem
+                    key={document.location}
+                    result={document}
+                  />
+                );
+            }
+          })}
+        </List>
+      )}
+    </SearchResult>
+  );
+};

plugins/search-react/src/components/SearchResult/SearchResult.test.tsx

@@ -93,6 +93,22 @@ describe('SearchResult', () => {
     });
   });
 
+  it('On empty result value state with custom component', async () => {
+    (useSearch as jest.Mock).mockReturnValueOnce({
+      result: { loading: false, error: '', value: { results: [] } },
+    });
+
+    const { getByText } = await renderInTestApp(
+      <SearchResult noResultsComponent={<>No results found</>}>
+        {() => <></>}
+      </SearchResult>,
+    );
+
+    await waitFor(() => {
+      expect(getByText('No results found')).toBeInTheDocument();
+    });
+  });
+
   it('Calls children with results set to result.value', async () => {
     (useSearch as jest.Mock).mockReturnValueOnce({
       result: {

plugins/search-react/src/components/SearchResult/SearchResult.tsx

@@ -167,6 +167,7 @@ export const SearchResultState = (props: SearchResultStateProps) => {
  */
 export type SearchResultProps = Pick<SearchResultStateProps, 'query'> & {
   children: (resultSet: SearchResultSet) => JSX.Element;
+  noResultsComponent?: JSX.Element;
 };
 
 /**
@@ -176,7 +177,13 @@ export type SearchResultProps = Pick<SearchResultStateProps, 'query'> & {
  * @public
  */
 export const SearchResultComponent = (props: SearchResultProps) => {
-  const { query, children } = props;
+  const {
+    query,
+    children,
+    noResultsComponent = (
+      <EmptyState missing="data" title="Sorry, no results were found" />
+    ),
+  } = props;
 
   return (
     <SearchResultState query={query}>
@@ -195,9 +202,7 @@ export const SearchResultComponent = (props: SearchResultProps) => {
         }
 
         if (!value?.results.length) {
-          return (
-            <EmptyState missing="data" title="Sorry, no results were found" />
-          );
+          return noResultsComponent;
         }
 
         return children(value);