diff --git a/.changeset/big-bears-fold.md b/.changeset/big-bears-fold.md new file mode 100644 index 0000000000..b3bf51787a --- /dev/null +++ b/.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 diff --git a/packages/app/src/components/search/SearchModal.tsx b/packages/app/src/components/search/SearchModal.tsx index 3fdacf08b6..4af5511443 100644 --- a/packages/app/src/components/search/SearchModal.tsx +++ b/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 = ( } key={document.location} result={document} highlight={highlight} @@ -195,6 +201,7 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => { case 'techdocs': resultItem = ( } key={document.location} result={document} highlight={highlight} diff --git a/packages/app/src/components/search/SearchPage.tsx b/packages/app/src/components/search/SearchPage.tsx index d23ad957d7..ee144b2cde 100644 --- a/packages/app/src/components/search/SearchPage.tsx +++ b/packages/app/src/components/search/SearchPage.tsx @@ -137,6 +137,7 @@ const SearchPage = () => { case 'software-catalog': return ( } key={document.location} result={document} highlight={highlight} @@ -145,6 +146,7 @@ const SearchPage = () => { case 'techdocs': return ( } key={document.location} result={document} highlight={highlight} diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md index 3d426a0c8b..5b7e07701c 100644 --- a/plugins/catalog/api-report.md +++ b/plugins/catalog/api-report.md @@ -112,6 +112,8 @@ export interface CatalogSearchResultListItemProps { // (undocumented) highlight?: ResultHighlight; // (undocumented) + icon?: ReactNode; + // (undocumented) result: IndexableDocument; } diff --git a/plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx b/plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx index 5ba9d09949..993e34fbf6 100644 --- a/plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx +++ b/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 ( - - - ) : ( - result.title - ) - } - secondary={ - props.highlight?.fields.text ? ( - - ) : ( - result.text - ) - } - /> - - {result.kind && } - {result.lifecycle && ( - - )} - + + {props.icon && {props.icon}} + + + ) : ( + result.title + ) + } + secondary={ + props.highlight?.fields.text ? ( + + ) : ( + result.text + ) + } + /> + + {result.kind && ( + + )} + {result.lifecycle && ( + + )} + + diff --git a/plugins/techdocs/api-report.md b/plugins/techdocs/api-report.md index b2090bc879..b66f868f1d 100644 --- a/plugins/techdocs/api-report.md +++ b/plugins/techdocs/api-report.md @@ -390,6 +390,7 @@ export const TechDocsSearchResultListItem: ( // @public export type TechDocsSearchResultListItemProps = { + icon?: ReactNode; result: any; highlight?: ResultHighlight; lineClamp?: number; diff --git a/plugins/techdocs/src/search/components/TechDocsSearchResultListItem.tsx b/plugins/techdocs/src/search/components/TechDocsSearchResultListItem.tsx index 6181e05235..9843443c7a 100644 --- a/plugins/techdocs/src/search/components/TechDocsSearchResultListItem.tsx +++ b/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 ? ( <> - - {children} + + {icon && {icon}} + {children} >