Add line clamping to search results on modal search screen. (#9331)

* Add line clamping to search results on modal search screen.

Signed-off-by: Jussi Hallila <jussi@hallila.com>

* Add mock to test so we don't have to spin up canvas with jsdom.

Signed-off-by: Jussi Hallila <jussi@hallila.com>

.changeset/old-phones-draw.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-search': patch
+---
+
+Modify modal search to clamp result length to 5 rows.

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

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": {

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 }) => <span>{text}</span>;
+});
+
 describe('DefaultResultListItem', () => {
   const result = {
     title: 'title',
@@ -44,10 +49,10 @@ describe('DefaultResultListItem', () => {
     await renderInTestApp(
       <DefaultResultListItem
         result={result}
-        icon={<FindInPageIcon title="icon" />}
+        icon={<FindInPageIcon aria-label="icon" />}
       />,
     );
-    expect(screen.getByTitle('icon')).toBeInTheDocument();
+    expect(screen.getByLabelText('icon')).toBeInTheDocument();
   });
 
   it('should render secondary action if prop is specified', async () => {

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 (
     <Link to={result.location}>
@@ -43,7 +46,14 @@ export const DefaultResultListItem = ({
         <ListItemText
           primaryTypographyProps={{ variant: 'h6' }}
           primary={result.title}
-          secondary={result.text}
+          secondary={
+            <TextTruncate
+              line={lineClamp}
+              truncateText="…"
+              text={result.text}
+              element="span"
+            />
+          }
         />
         {secondaryAction && <Box alignItems="flex-end">{secondaryAction}</Box>}
       </ListItem>