Addressing SidebarSearchModal suggestions in PR

Signed-off-by: Joshua Jung <joshua.p.jung@gmail.com>

docs/features/search/how-to-guides.md

@@ -298,7 +298,7 @@ export const Root = ({ children }: PropsWithChildren<{}>) => {
   return <SidebarPage>
     <Sidebar>
       ...
-      <SidebarSearchModal searchResultChildren={[
+      <SidebarSearchModal resultItemComponents={[
         /* Provide a custom Extension search item renderer */
         <CustomSearchResultListItem icon={<CatalogIcon />} />,
         /* Provide an existing search item renderer */

plugins/search/api-report.md

@@ -3,6 +3,8 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
+/// <reference types="react" />
+
 import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { IconComponent } from '@backstage/core-plugin-api';
 import { JSX as JSX_2 } from 'react';
@@ -29,15 +31,19 @@ export const Router: () => React_2.JSX.Element;
 export const SearchModal: (props: SearchModalProps) => React_2.JSX.Element;
 
 // @public (undocumented)
-export interface SearchModalChildrenProps extends SearchResultChildrenProvider {
+export interface SearchModalChildrenProps {
+  resultItemComponents?:
+    | ReactNode
+    | ((resultSet: SearchResultSet) => JSX.Element);
   toggleModal: () => void;
 }
 
 // @public (undocumented)
-export interface SearchModalProps extends SearchResultChildrenProvider {
+export interface SearchModalProps {
   children?: (props: SearchModalChildrenProps) => JSX.Element;
   hidden?: boolean;
   open?: boolean;
+  resultItemComponents?: SearchModalChildrenProps['resultItemComponents'];
   toggleModal: () => void;
 }
 
@@ -75,13 +81,6 @@ const searchPlugin: BackstagePlugin<
 export { searchPlugin as plugin };
 export { searchPlugin };
 
-// @public (undocumented)
-export type SearchResultChildrenProvider = {
-  searchResultChildren?:
-    | ReactNode
-    | ((resultSet: SearchResultSet) => JSX.Element);
-};
-
 // @public (undocumented)
 export const SearchType: {
   (props: SearchTypeProps): React_2.JSX.Element;
@@ -127,9 +126,11 @@ export const SidebarSearchModal: (
 ) => JSX.Element | null;
 
 // @public
-export type SidebarSearchModalProps = SearchResultChildrenProvider & {
+export type SidebarSearchModalProps = Pick<
+  SearchModalProps,
+  'children' | 'resultItemComponents'
+> & {
   icon?: IconComponent;
-  children?: (props: SearchModalChildrenProps) => JSX.Element;
 };
 
 // @public

plugins/search/src/components/SearchModal/SearchModal.tsx

@@ -34,25 +34,33 @@ import IconButton from '@material-ui/core/IconButton';
 import { makeStyles } from '@material-ui/core/styles';
 import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
 import CloseIcon from '@material-ui/icons/Close';
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { rootRouteRef, SearchResultChildrenProvider } from '../../plugin';
+import { rootRouteRef } from '../../plugin';
+import { SearchResultSet } from '@backstage/plugin-search-common';
 
 /**
  * @public
  */
-export interface SearchModalChildrenProps extends SearchResultChildrenProvider {
+export interface SearchModalChildrenProps {
   /**
    * A function that should be invoked when navigating away from the modal.
    */
   toggleModal: () => void;
+
+  /**
+   * Ability to provide custom components to render the result items
+   */
+  resultItemComponents?:
+    | ReactNode
+    | ((resultSet: SearchResultSet) => JSX.Element);
 }
 
 /**
  * @public
  */
-export interface SearchModalProps extends SearchResultChildrenProvider {
+export interface SearchModalProps {
   /**
    * If true, it renders the modal.
    */
@@ -74,6 +82,11 @@ export interface SearchModalProps extends SearchResultChildrenProvider {
    * place of the default.
    */
   children?: (props: SearchModalChildrenProps) => JSX.Element;
+
+  /**
+   * Optional ability to pass in result item component renderers.
+   */
+  resultItemComponents?: SearchModalChildrenProps['resultItemComponents'];
 }
 
 const useStyles = makeStyles(theme => ({
@@ -102,7 +115,7 @@ const useStyles = makeStyles(theme => ({
 
 export const Modal = ({
   toggleModal,
-  searchResultChildren,
+  resultItemComponents,
 }: SearchModalChildrenProps) => {
   const classes = useStyles();
   const navigate = useNavigate();
@@ -167,7 +180,7 @@ export const Modal = ({
           onClick={handleSearchResultClick}
           onKeyDown={handleSearchResultClick}
         >
-          {searchResultChildren}
+          {resultItemComponents}
         </SearchResult>
       </DialogContent>
       <DialogActions className={classes.dialogActionsContainer}>
@@ -190,7 +203,7 @@ export const SearchModal = (props: SearchModalProps) => {
     hidden,
     toggleModal,
     children,
-    searchResultChildren,
+    resultItemComponents,
   } = props;
 
   const classes = useStyles();
@@ -213,11 +226,11 @@ export const SearchModal = (props: SearchModalProps) => {
           {(children &&
             children({
               toggleModal,
-              searchResultChildren: searchResultChildren || [],
+              resultItemComponents: resultItemComponents || [],
             })) ?? (
             <Modal
               toggleModal={toggleModal}
-              searchResultChildren={searchResultChildren || []}
+              resultItemComponents={resultItemComponents || []}
             />
           )}
         </SearchContextProvider>

plugins/search/src/components/SidebarSearchModal/SidebarSearchModal.tsx

@@ -19,20 +19,21 @@ import { SidebarItem } from '@backstage/core-components';
 import { IconComponent } from '@backstage/core-plugin-api';
 import {
   SearchModal,
-  SearchModalChildrenProps,
+  SearchModalProps,
   SearchModalProvider,
   useSearchModal,
 } from '../SearchModal';
-import { SearchResultChildrenProvider } from '../../plugin';
 
 /**
  * Props for {@link SidebarSearchModal}.
  *
  * @public
  */
-export type SidebarSearchModalProps = SearchResultChildrenProvider & {
+export type SidebarSearchModalProps = Pick<
+  SearchModalProps,
+  'children' | 'resultItemComponents'
+> & {
   icon?: IconComponent;
-  children?: (props: SearchModalChildrenProps) => JSX.Element;
 };
 
 const SidebarSearchModalContent = (props: SidebarSearchModalProps) => {
@@ -50,7 +51,7 @@ const SidebarSearchModalContent = (props: SidebarSearchModalProps) => {
       <SearchModal
         {...state}
         toggleModal={toggleModal}
-        searchResultChildren={props.searchResultChildren}
+        resultItemComponents={props.resultItemComponents}
         children={props.children}
       />
     </>

plugins/search/src/index.ts

@@ -43,7 +43,6 @@ export type {
 export { SidebarSearch } from './components/SidebarSearch';
 export type { SidebarSearchProps } from './components/SidebarSearch';
 export type { SidebarSearchModalProps } from './components/SidebarSearchModal';
-export type { SearchResultChildrenProvider } from './plugin';
 
 export {
   HomePageSearchBar,

plugins/search/src/plugin.ts

@@ -25,19 +25,8 @@ import {
   createComponentExtension,
   fetchApiRef,
 } from '@backstage/core-plugin-api';
-import { ReactNode } from 'react';
-import { SearchResultSet } from '@backstage/plugin-search-common';
 import { SidebarSearchModalProps } from './components/SidebarSearchModal';
 
-/**
- * @public
- */
-export type SearchResultChildrenProvider = {
-  searchResultChildren?:
-    | ReactNode
-    | ((resultSet: SearchResultSet) => JSX.Element);
-};
-
 export const rootRouteRef = createRouteRef({
   id: 'search',
 });