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}}