diff --git a/.changeset/old-phones-draw.md b/.changeset/old-phones-draw.md new file mode 100644 index 0000000000..fd987844f3 --- /dev/null +++ b/.changeset/old-phones-draw.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-search': patch +--- + +Modify modal search to clamp result length to 5 rows. diff --git a/plugins/search/api-report.md b/plugins/search/api-report.md index fc82e2be47..a45f02564f 100644 --- a/plugins/search/api-report.md +++ b/plugins/search/api-report.md @@ -27,10 +27,12 @@ export const DefaultResultListItem: ({ result, icon, secondaryAction, + lineClamp, }: { icon?: ReactNode; secondaryAction?: ReactNode; result: IndexableDocument; + lineClamp?: number | undefined; }) => JSX.Element; // Warning: (ae-forgotten-export) The symbol "FiltersProps" needs to be exported by the entry point index.d.ts diff --git a/plugins/search/package.json b/plugins/search/package.json index 6536c9c386..2a0b7f25a6 100644 --- a/plugins/search/package.json +++ b/plugins/search/package.json @@ -45,6 +45,7 @@ "qs": "^6.9.4", "react-router": "6.0.0-beta.0", "react-router-dom": "6.0.0-beta.0", + "react-text-truncate": "^0.17.0", "react-use": "^17.2.4" }, "peerDependencies": { diff --git a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.test.jsx b/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.test.tsx similarity index 88% rename from plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.test.jsx rename to plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.test.tsx index 0a8e413107..68f00f9301 100644 --- a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.test.jsx +++ b/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.test.tsx @@ -20,6 +20,11 @@ import { renderInTestApp } from '@backstage/test-utils'; import FindInPageIcon from '@material-ui/icons/FindInPage'; import { DefaultResultListItem } from './DefaultResultListItem'; +// Using canvas to render text.. +jest.mock('react-text-truncate', () => { + return ({ text }: { text: string }) => {text}; +}); + describe('DefaultResultListItem', () => { const result = { title: 'title', @@ -44,10 +49,10 @@ describe('DefaultResultListItem', () => { await renderInTestApp( } + icon={} />, ); - expect(screen.getByTitle('icon')).toBeInTheDocument(); + expect(screen.getByLabelText('icon')).toBeInTheDocument(); }); it('should render secondary action if prop is specified', async () => { diff --git a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.tsx b/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.tsx index dd541b6e21..a6c9a36bb6 100644 --- a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.tsx +++ b/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.tsx @@ -24,17 +24,20 @@ import { Divider, } from '@material-ui/core'; import { Link } from '@backstage/core-components'; +import TextTruncate from 'react-text-truncate'; type Props = { icon?: ReactNode; secondaryAction?: ReactNode; result: IndexableDocument; + lineClamp?: number; }; export const DefaultResultListItem = ({ result, icon, secondaryAction, + lineClamp = 5, }: Props) => { return ( @@ -43,7 +46,14 @@ export const DefaultResultListItem = ({ + } /> {secondaryAction && {secondaryAction}}