diff --git a/.changeset/serious-pigs-watch.md b/.changeset/serious-pigs-watch.md index 6736c64557..2efd8697f3 100644 --- a/.changeset/serious-pigs-watch.md +++ b/.changeset/serious-pigs-watch.md @@ -5,6 +5,6 @@ '@backstage/plugin-search-react': patch --- -`ListItem` wrapper component moved to `SearchResultListItemExtension` for all `*SearchResultListItems`. This is to make sure the list only contains list elements. +`ListItem` wrapper component moved to `SearchResultListItemExtension` for all `*SearchResultListItems` that are exported as extensions. This is to make sure the list only contains list elements. -Note: If you have implemented a custom result list item, you can remove the list item wrapper to avoid duplicated `
  • ` elements. +Note: If you have implemented a custom result list item, we recommend you to remove the list item wrapper to avoid nested `
  • ` elements. diff --git a/plugins/explore/api-report.md b/plugins/explore/api-report.md index 02b917b9ed..e7adde4b77 100644 --- a/plugins/explore/api-report.md +++ b/plugins/explore/api-report.md @@ -139,7 +139,5 @@ export interface ToolSearchResultListItemProps { rank?: number; // (undocumented) result?: IndexableDocument; - // (undocumented) - toggleModal?: () => void; } ``` diff --git a/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx b/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx index f3573007fc..eb12ba45d8 100644 --- a/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx +++ b/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx @@ -50,7 +50,6 @@ export interface ToolSearchResultListItemProps { result?: IndexableDocument; highlight?: ResultHighlight; rank?: number; - toggleModal?: () => void; } /** @public */ @@ -94,8 +93,9 @@ export function ToolSearchResultListItem(props: ToolSearchResultListItemProps) { } /> - {result.tags && - result.tags.map((tag: string) => )} + {result.tags?.map((tag: string) => ( + + ))} diff --git a/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.tsx b/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.tsx index 932995b895..9971b0e7e5 100644 --- a/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.tsx +++ b/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.tsx @@ -17,7 +17,14 @@ import React from 'react'; import _unescape from 'lodash/unescape'; import { Link } from '@backstage/core-components'; -import { ListItemText, ListItemIcon, Box, Chip } from '@material-ui/core'; +import { + Divider, + ListItem, + ListItemText, + ListItemIcon, + Box, + Chip, +} from '@material-ui/core'; import { useAnalytics } from '@backstage/core-plugin-api'; import { ResultHighlight } from '@backstage/plugin-search-common'; import { HighlightedSearchResultText } from '@backstage/plugin-search-react'; @@ -45,44 +52,47 @@ export const StackOverflowSearchResultListItem = ( return ( <> - {props.icon && {props.icon}} - - - {highlight?.fields?.title ? ( - + + {props.icon && {props.icon}} + + + {highlight?.fields?.title ? ( + + ) : ( + _unescape(title) + )} + + } + secondary={ + highlight?.fields?.text ? ( + <> + Author:{' '} + + ) : ( - _unescape(title) - )} - - } - secondary={ - highlight?.fields?.text ? ( - <> - Author:{' '} - - - ) : ( - `Author: ${text}` - ) - } - /> - - {tags && - tags.map((tag: string) => ( - - ))} - + `Author: ${text}` + ) + } + /> + + {tags && + tags.map((tag: string) => ( + + ))} + + + ); };