diff --git a/.changeset/search-birds-leave.md b/.changeset/search-birds-leave.md
new file mode 100644
index 0000000000..cd5c046934
--- /dev/null
+++ b/.changeset/search-birds-leave.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-search': patch
+---
+
+Add optional icon and secondaryAction properties for DefaultResultListItem component
diff --git a/plugins/search/api-report.md b/plugins/search/api-report.md
index 7dba0a8e21..39b694d924 100644
--- a/plugins/search/api-report.md
+++ b/plugins/search/api-report.md
@@ -12,6 +12,7 @@ import { IndexableDocument } from '@backstage/search-common';
import { JsonObject } from '@backstage/types';
import { default as React_2 } from 'react';
import { ReactElement } from 'react';
+import { ReactNode } from 'react';
import { RouteRef } from '@backstage/core-plugin-api';
import { SearchQuery } from '@backstage/search-common';
import { SearchResult as SearchResult_2 } from '@backstage/search-common';
@@ -22,7 +23,11 @@ import { SearchResultSet } from '@backstage/search-common';
// @public (undocumented)
export const DefaultResultListItem: ({
result,
+ icon,
+ secondaryAction,
}: {
+ icon?: ReactNode;
+ secondaryAction?: ReactNode;
result: IndexableDocument;
}) => JSX.Element;
diff --git a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx b/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx
index 34436f9f93..0445a35943 100644
--- a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx
+++ b/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx
@@ -16,6 +16,9 @@
import React from 'react';
import { Grid } from '@material-ui/core';
+import FindInPageIcon from '@material-ui/icons/FindInPage';
+import GroupIcon from '@material-ui/icons/Group';
+import { Button } from '@backstage/core-components';
import { DefaultResultListItem } from '../index';
import { MemoryRouter } from 'react-router';
@@ -24,17 +27,59 @@ export default {
component: DefaultResultListItem,
};
+const mockSearchResult = {
+ location: 'search/search-result',
+ title: 'Search Result 1',
+ text: 'some text from the search result',
+ owner: 'some-example-owner',
+};
+
export const Default = () => {
+ return (
+
+
+
+
+
+
+
+ );
+};
+
+export const WithIcon = () => {
return (
}
+ />
+
+
+
+ );
+};
+
+export const WithSecondaryAction = () => {
+ return (
+
+
+
+ }
+ style={{ textTransform: 'lowercase' }}
+ >
+ {mockSearchResult.owner}
+
+ }
/>
diff --git a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.test.jsx b/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.test.jsx
index 97698487ee..0a8e413107 100644
--- a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.test.jsx
+++ b/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.test.jsx
@@ -17,7 +17,7 @@
import React from 'react';
import { screen } from '@testing-library/react';
import { renderInTestApp } from '@backstage/test-utils';
-
+import FindInPageIcon from '@material-ui/icons/FindInPage';
import { DefaultResultListItem } from './DefaultResultListItem';
describe('DefaultResultListItem', () => {
@@ -25,6 +25,7 @@ describe('DefaultResultListItem', () => {
title: 'title',
text: 'text',
location: '/location',
+ owner: 'owner',
};
it('Links to result.location', async () => {
@@ -38,4 +39,21 @@ describe('DefaultResultListItem', () => {
result.title + result.text,
);
});
+
+ it('should render icon if prop is specified', async () => {
+ await renderInTestApp(
+ }
+ />,
+ );
+ expect(screen.getByTitle('icon')).toBeInTheDocument();
+ });
+
+ it('should render secondary action if prop is specified', async () => {
+ await renderInTestApp(
+ ,
+ );
+ expect(screen.getByText('owner')).toBeInTheDocument();
+ });
});
diff --git a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.tsx b/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.tsx
index ed508aa671..dd541b6e21 100644
--- a/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.tsx
+++ b/plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.tsx
@@ -14,24 +14,38 @@
* limitations under the License.
*/
-import React from 'react';
+import React, { ReactNode } from 'react';
import { IndexableDocument } from '@backstage/search-common';
-import { ListItem, ListItemText, Divider } from '@material-ui/core';
+import {
+ ListItem,
+ ListItemIcon,
+ ListItemText,
+ Box,
+ Divider,
+} from '@material-ui/core';
import { Link } from '@backstage/core-components';
type Props = {
+ icon?: ReactNode;
+ secondaryAction?: ReactNode;
result: IndexableDocument;
};
-export const DefaultResultListItem = ({ result }: Props) => {
+export const DefaultResultListItem = ({
+ result,
+ icon,
+ secondaryAction,
+}: Props) => {
return (
-
+
+ {icon && {icon}}
+ {secondaryAction && {secondaryAction}}