Merge pull request #11482 from leon-vg/add-icon-to-backstage-search-results

[Search] Optional icon for catalog and techdocs results

.changeset/big-bears-fold.md

@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-catalog': minor
+'@backstage/plugin-techdocs': minor
+---
+
+Add an optional icon to the Catalog and TechDocs search results

packages/app/src/components/search/SearchModal.tsx

@@ -26,7 +26,12 @@ import {
   useTheme,
 } from '@material-ui/core';
 import LaunchIcon from '@material-ui/icons/Launch';
-import { Link, useContent } from '@backstage/core-components';
+import {
+  CatalogIcon,
+  DocsIcon,
+  Link,
+  useContent,
+} from '@backstage/core-components';
 import { useApi, useRouteRef } from '@backstage/core-plugin-api';
 import { CatalogSearchResultListItem } from '@backstage/plugin-catalog';
 import {
@@ -186,6 +191,7 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => {
                       case 'software-catalog':
                         resultItem = (
                           <CatalogSearchResultListItem
+                            icon={<CatalogIcon />}
                             key={document.location}
                             result={document}
                             highlight={highlight}
@@ -195,6 +201,7 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => {
                       case 'techdocs':
                         resultItem = (
                           <TechDocsSearchResultListItem
+                            icon={<DocsIcon />}
                             key={document.location}
                             result={document}
                             highlight={highlight}

packages/app/src/components/search/SearchPage.tsx

@@ -137,6 +137,7 @@ const SearchPage = () => {
                       case 'software-catalog':
                         return (
                           <CatalogSearchResultListItem
+                            icon={<CatalogIcon />}
                             key={document.location}
                             result={document}
                             highlight={highlight}
@@ -145,6 +146,7 @@ const SearchPage = () => {
                       case 'techdocs':
                         return (
                           <TechDocsSearchResultListItem
+                            icon={<DocsIcon />}
                             key={document.location}
                             result={document}
                             highlight={highlight}

plugins/catalog/api-report.md

@@ -112,6 +112,8 @@ export interface CatalogSearchResultListItemProps {
   // (undocumented)
   highlight?: ResultHighlight;
   // (undocumented)
+  icon?: ReactNode;
+  // (undocumented)
   result: IndexableDocument;
 }
 

plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx

@@ -14,12 +14,13 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import {
   Box,
   Chip,
   Divider,
   ListItem,
+  ListItemIcon,
   ListItemText,
   makeStyles,
 } from '@material-ui/core';
@@ -47,6 +48,7 @@ const useStyles = makeStyles({
  * @public
  */
 export interface CatalogSearchResultListItemProps {
+  icon?: ReactNode;
   result: IndexableDocument;
   highlight?: ResultHighlight;
 }
@@ -60,39 +62,44 @@ export function CatalogSearchResultListItem(
   const classes = useStyles();
   return (
     <Link to={result.location}>
-      <ListItem alignItems="flex-start" className={classes.flexContainer}>
-        <ListItemText
-          className={classes.itemText}
-          primaryTypographyProps={{ variant: 'h6' }}
-          primary={
-            props.highlight?.fields.title ? (
-              <HighlightedSearchResultText
-                text={props.highlight.fields.title}
-                preTag={props.highlight.preTag}
-                postTag={props.highlight.postTag}
-              />
-            ) : (
-              result.title
-            )
-          }
-          secondary={
-            props.highlight?.fields.text ? (
-              <HighlightedSearchResultText
-                text={props.highlight.fields.text}
-                preTag={props.highlight.preTag}
-                postTag={props.highlight.postTag}
-              />
-            ) : (
-              result.text
-            )
-          }
-        />
-        <Box>
-          {result.kind && <Chip label={`Kind: ${result.kind}`} size="small" />}
-          {result.lifecycle && (
-            <Chip label={`Lifecycle: ${result.lifecycle}`} size="small" />
-          )}
-        </Box>
+      <ListItem alignItems="flex-start">
+        {props.icon && <ListItemIcon>{props.icon}</ListItemIcon>}
+        <div className={classes.flexContainer}>
+          <ListItemText
+            className={classes.itemText}
+            primaryTypographyProps={{ variant: 'h6' }}
+            primary={
+              props.highlight?.fields.title ? (
+                <HighlightedSearchResultText
+                  text={props.highlight.fields.title}
+                  preTag={props.highlight.preTag}
+                  postTag={props.highlight.postTag}
+                />
+              ) : (
+                result.title
+              )
+            }
+            secondary={
+              props.highlight?.fields.text ? (
+                <HighlightedSearchResultText
+                  text={props.highlight.fields.text}
+                  preTag={props.highlight.preTag}
+                  postTag={props.highlight.postTag}
+                />
+              ) : (
+                result.text
+              )
+            }
+          />
+          <Box>
+            {result.kind && (
+              <Chip label={`Kind: ${result.kind}`} size="small" />
+            )}
+            {result.lifecycle && (
+              <Chip label={`Lifecycle: ${result.lifecycle}`} size="small" />
+            )}
+          </Box>
+        </div>
       </ListItem>
       <Divider component="li" />
     </Link>

plugins/techdocs/api-report.md

@@ -390,6 +390,7 @@ export const TechDocsSearchResultListItem: (
 
 // @public
 export type TechDocsSearchResultListItemProps = {
+  icon?: ReactNode;
   result: any;
   highlight?: ResultHighlight;
   lineClamp?: number;

plugins/techdocs/src/search/components/TechDocsSearchResultListItem.tsx

@@ -14,8 +14,14 @@
  * limitations under the License.
  */
 
-import React, { PropsWithChildren } from 'react';
-import { Divider, ListItem, ListItemText, makeStyles } from '@material-ui/core';
+import React, { PropsWithChildren, ReactNode } from 'react';
+import {
+  Divider,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  makeStyles,
+} from '@material-ui/core';
 import { Link } from '@backstage/core-components';
 import { ResultHighlight } from '@backstage/plugin-search-common';
 import { HighlightedSearchResultText } from '@backstage/plugin-search-react';
@@ -36,6 +42,7 @@ const useStyles = makeStyles({
  * @public
  */
 export type TechDocsSearchResultListItemProps = {
+  icon?: ReactNode;
   result: any;
   highlight?: ResultHighlight;
   lineClamp?: number;
@@ -59,6 +66,7 @@ export const TechDocsSearchResultListItem = (
     asListItem = true,
     asLink = true,
     title,
+    icon,
   } = props;
   const classes = useStyles();
   const TextItem = () => {
@@ -135,8 +143,9 @@ export const TechDocsSearchResultListItem = (
   const ListItemWrapper = ({ children }: PropsWithChildren<{}>) =>
     asListItem ? (
       <>
-        <ListItem alignItems="flex-start" className={classes.flexContainer}>
-          {children}
+        <ListItem alignItems="flex-start">
+          {icon && <ListItemIcon>{icon}</ListItemIcon>}
+          <div className={classes.flexContainer}>{children}</div>
         </ListItem>
         <Divider component="li" />
       </>