Move DefaultResultListItem from @backstage/plugin-search to @backstage/plugin-search-react and deprecate it in @backstage/plugin-search, and properly deprecate SearchResult in @backstage/plugin-search

Signed-off-by: Anders Näsman <andersn@spotify.com>

plugins/search-react/api-report.md

@@ -12,6 +12,9 @@ import { JsonObject } from '@backstage/types';
 import { PropsWithChildren } from 'react';
 import { default as React_2 } from 'react';
 import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+import { ResultHighlight } from '@backstage/plugin-search-common';
+import { SearchDocument } from '@backstage/plugin-search-common';
 import { SearchQuery } from '@backstage/plugin-search-common';
 import { SearchResult as SearchResult_2 } from '@backstage/plugin-search-common';
 import { SearchResultSet } from '@backstage/plugin-search-common';
@@ -24,6 +27,20 @@ export const AutocompleteFilter: (
 // @public (undocumented)
 export const CheckboxFilter: (props: SearchFilterComponentProps) => JSX.Element;
 
+// @public
+export const DefaultResultListItem: (
+  props: DefaultResultListItemProps,
+) => JSX.Element;
+
+// @public
+export type DefaultResultListItemProps = {
+  icon?: ReactNode;
+  secondaryAction?: ReactNode;
+  result: SearchDocument;
+  highlight?: ResultHighlight;
+  lineClamp?: number;
+};
+
 // @public (undocumented)
 export const HighlightedSearchResultText: ({
   text,
@@ -151,13 +168,18 @@ export type SearchFilterWrapperProps = SearchFilterComponentProps & {
   debug?: boolean;
 };
 
-// @public (undocumented)
-export const SearchResult: ({ children }: SearchResultProps) => JSX.Element;
+// @public
+export const SearchResult: (props: SearchResultProps) => JSX.Element;
+
+// @public
+export const SearchResultComponent: ({
+  children,
+}: SearchResultProps) => JSX.Element;
 
 // @public (undocumented)
 export const SearchResultPager: () => JSX.Element;
 
-// @public (undocumented)
+// @public
 export type SearchResultProps = {
   children: (results: { results: SearchResult_2[] }) => JSX.Element;
 };

plugins/search-react/package.json

@@ -31,11 +31,11 @@
     "start": "backstage-cli package start"
   },
   "dependencies": {
-    "@backstage/plugin-search": "0.8.2-next.1",
     "@backstage/plugin-search-common": "^0.3.5-next.0",
     "@backstage/core-components": "^0.9.5-next.1",
     "@backstage/core-plugin-api": "^1.0.3-next.0",
     "@backstage/version-bridge": "^1.0.1",
+    "@backstage/theme": "^0.2.15",
     "@backstage/types": "^1.0.0",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",

plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx

@@ -0,0 +1,126 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Button } from '@backstage/core-components';
+import { lightTheme } from '@backstage/theme';
+import { Grid } from '@material-ui/core';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import { ThemeProvider } from '@material-ui/core/styles';
+import FindInPageIcon from '@material-ui/icons/FindInPage';
+import GroupIcon from '@material-ui/icons/Group';
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+import { DefaultResultListItem } from './DefaultResultListItem';
+
+export default {
+  title: 'Plugins/Search/DefaultResultListItem',
+  component: DefaultResultListItem,
+  decorators: [
+    (Story: () => JSX.Element) => (
+      <MemoryRouter>
+        <Grid container direction="row">
+          <Grid item xs={12}>
+            <Story />
+          </Grid>
+        </Grid>
+      </MemoryRouter>
+    ),
+  ],
+};
+
+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 <DefaultResultListItem result={mockSearchResult} />;
+};
+
+export const WithIcon = () => {
+  return (
+    <DefaultResultListItem
+      result={mockSearchResult}
+      icon={<FindInPageIcon color="primary" />}
+    />
+  );
+};
+
+export const WithSecondaryAction = () => {
+  return (
+    <DefaultResultListItem
+      result={mockSearchResult}
+      secondaryAction={
+        <Button
+          to="#"
+          size="small"
+          aria-label="owner"
+          variant="text"
+          startIcon={<GroupIcon />}
+          style={{ textTransform: 'lowercase' }}
+        >
+          {mockSearchResult.owner}
+        </Button>
+      }
+    />
+  );
+};
+export const WithHighlightedResults = () => {
+  return (
+    <DefaultResultListItem
+      result={mockSearchResult}
+      highlight={{
+        preTag: '<tag>',
+        postTag: '</tag>',
+        fields: { text: 'some <tag>text</tag> from the search result' },
+      }}
+    />
+  );
+};
+
+export const WithCustomHighlightedResults = () => {
+  const customTheme = {
+    ...lightTheme,
+    overrides: {
+      ...lightTheme.overrides,
+      BackstageHighlightedSearchResultText: {
+        highlight: {
+          color: 'inherit',
+          backgroundColor: 'inherit',
+          fontWeight: 'bold',
+          textDecoration: 'underline',
+        },
+      },
+    },
+  };
+
+  return (
+    <ThemeProvider theme={customTheme}>
+      <CssBaseline>
+        <DefaultResultListItem
+          result={mockSearchResult}
+          highlight={{
+            preTag: '<tag>',
+            postTag: '</tag>',
+            fields: { text: 'some <tag>text</tag> from the search result' },
+          }}
+        />
+      </CssBaseline>
+    </ThemeProvider>
+  );
+};

plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.test.tsx

@@ -0,0 +1,59 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+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', () => {
+  const result = {
+    title: 'title',
+    text: 'text',
+    location: '/location',
+    owner: 'owner',
+  };
+
+  it('Links to result.location', async () => {
+    await renderInTestApp(<DefaultResultListItem result={result} />);
+    expect(screen.getByRole('link')).toHaveAttribute('href', result.location);
+  });
+
+  it('Includes primary/secondary text (title / text)', async () => {
+    await renderInTestApp(<DefaultResultListItem result={result} />);
+    expect(screen.getByRole('listitem')).toHaveTextContent(
+      result.title + result.text,
+    );
+  });
+
+  it('should render icon if prop is specified', async () => {
+    await renderInTestApp(
+      <DefaultResultListItem
+        result={result}
+        icon={<FindInPageIcon aria-label="icon" />}
+      />,
+    );
+    expect(screen.getByLabelText('icon')).toBeInTheDocument();
+  });
+
+  it('should render secondary action if prop is specified', async () => {
+    await renderInTestApp(
+      <DefaultResultListItem result={result} secondaryAction={result.owner} />,
+    );
+    expect(screen.getByText('owner')).toBeInTheDocument();
+  });
+});

plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.tsx

@@ -0,0 +1,123 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { ReactNode } from 'react';
+import { AnalyticsContext } from '@backstage/core-plugin-api';
+import {
+  ResultHighlight,
+  SearchDocument,
+} from '@backstage/plugin-search-common';
+import { HighlightedSearchResultText } from '../HighlightedSearchResultText';
+import {
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Box,
+  Divider,
+} from '@material-ui/core';
+import { Link } from '@backstage/core-components';
+
+/**
+ * Props for {@link DefaultResultListItem}
+ *
+ * @public
+ */
+export type DefaultResultListItemProps = {
+  icon?: ReactNode;
+  secondaryAction?: ReactNode;
+  result: SearchDocument;
+  highlight?: ResultHighlight;
+  lineClamp?: number;
+};
+
+/**
+ * A default result list item.
+ *
+ * @public
+ */
+export const DefaultResultListItemComponent = ({
+  result,
+  highlight,
+  icon,
+  secondaryAction,
+  lineClamp = 5,
+}: DefaultResultListItemProps) => {
+  return (
+    <Link to={result.location}>
+      <ListItem alignItems="center">
+        {icon && <ListItemIcon>{icon}</ListItemIcon>}
+        <ListItemText
+          primaryTypographyProps={{ variant: 'h6' }}
+          primary={
+            highlight?.fields.title ? (
+              <HighlightedSearchResultText
+                text={highlight.fields.title}
+                preTag={highlight.preTag}
+                postTag={highlight.postTag}
+              />
+            ) : (
+              result.title
+            )
+          }
+          secondary={
+            <span
+              style={{
+                display: '-webkit-box',
+                WebkitBoxOrient: 'vertical',
+                WebkitLineClamp: lineClamp,
+                overflow: 'hidden',
+              }}
+            >
+              {highlight?.fields.text ? (
+                <HighlightedSearchResultText
+                  text={highlight.fields.text}
+                  preTag={highlight.preTag}
+                  postTag={highlight.postTag}
+                />
+              ) : (
+                result.text
+              )}
+            </span>
+          }
+        />
+        {secondaryAction && <Box alignItems="flex-end">{secondaryAction}</Box>}
+      </ListItem>
+      <Divider />
+    </Link>
+  );
+};
+
+/**
+ * A higher order function providing AnalyticsContext to the DefaultResultListItemComponent.
+ *
+ * @public
+ */
+const HigherOrderDefaultResultListItem = (
+  props: DefaultResultListItemProps,
+) => {
+  return (
+    <AnalyticsContext
+      attributes={{
+        pluginId: 'search',
+        extension: 'DefaultResultListItem',
+      }}
+    >
+      <DefaultResultListItemComponent {...props} />
+    </AnalyticsContext>
+  );
+};
+
+export { HigherOrderDefaultResultListItem as DefaultResultListItem };

plugins/search-react/src/components/DefaultResultListItem/index.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { DefaultResultListItem } from './DefaultResultListItem';
+export type { DefaultResultListItemProps } from './DefaultResultListItem';

plugins/search-react/src/components/SearchResult/SearchResult.stories.tsx

@@ -14,16 +14,17 @@
  * limitations under the License.
  */
 
-import { Link } from '@backstage/core-components';
-import { List, ListItem } from '@material-ui/core';
 import React, { ComponentType } from 'react';
+import { List, ListItem } from '@material-ui/core';
 import { MemoryRouter } from 'react-router';
-import { DefaultResultListItem } from '@backstage/plugin-search';
+
+import { Link } from '@backstage/core-components';
+import { TestApiProvider } from '@backstage/test-utils';
 
 import { searchApiRef, MockSearchApi } from '../../api';
 import { SearchContextProvider } from '../../context';
+import { DefaultResultListItem } from '../DefaultResultListItem';
 import { SearchResult } from './SearchResult';
-import { TestApiProvider } from '@backstage/test-utils';
 
 const mockResults = {
   results: [

plugins/search-react/src/components/SearchResult/SearchResult.test.tsx

@@ -14,9 +14,11 @@
  * limitations under the License.
  */
 
-import { renderInTestApp } from '@backstage/test-utils';
-import { waitFor } from '@testing-library/react';
 import React from 'react';
+import { waitFor } from '@testing-library/react';
+
+import { renderInTestApp } from '@backstage/test-utils';
+
 import { useSearch } from '../../context';
 import { SearchResult } from './SearchResult';
 

plugins/search-react/src/components/SearchResult/SearchResult.tsx

@@ -14,16 +14,21 @@
  * limitations under the License.
  */
 
+import React from 'react';
+
 import {
   EmptyState,
   Progress,
   ResponseErrorPanel,
 } from '@backstage/core-components';
+import { AnalyticsContext } from '@backstage/core-plugin-api';
 import { SearchResult } from '@backstage/plugin-search-common';
-import React from 'react';
+
 import { useSearch } from '../../context';
 
 /**
+ * Props for {@link SearchResultComponent}
+ *
  * @public
  */
 export type SearchResultProps = {
@@ -31,6 +36,8 @@ export type SearchResultProps = {
 };
 
 /**
+ * A component returning the search result.
+ *
  * @public
  */
 export const SearchResultComponent = ({ children }: SearchResultProps) => {
@@ -57,4 +64,22 @@ export const SearchResultComponent = ({ children }: SearchResultProps) => {
   return <>{children({ results: value.results })}</>;
 };
 
-export { SearchResultComponent as SearchResult };
+/**
+ * A higher order function providing AnalyticsContext to the SearchResultComponent.
+ *
+ * @public
+ */
+const HigherOrderSearchResult = (props: SearchResultProps) => {
+  return (
+    <AnalyticsContext
+      attributes={{
+        pluginId: 'search',
+        extension: 'SearchResult',
+      }}
+    >
+      <SearchResultComponent {...props} />
+    </AnalyticsContext>
+  );
+};
+
+export { HigherOrderSearchResult as SearchResult };

plugins/search-react/src/components/SearchResult/index.tsx

@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 
-export { SearchResult } from './SearchResult';
+export { SearchResult, SearchResultComponent } from './SearchResult';
 export type { SearchResultProps } from './SearchResult';

plugins/search-react/src/components/index.ts

@@ -20,3 +20,4 @@ export * from './SearchResult';
 export * from './SearchResultPager';
 export * from './SearchBar';
 export * from './SearchTracker';
+export * from './DefaultResultListItem';