paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 25 Packages Projects Releases Wiki Activity

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

Browse Source 
Signed-off-by: Anders Näsman <andersn@spotify.com>
This commit is contained in:
Anders Näsman
2022-06-03 09:41:14 +02:00
committed by Eric Peterson
parent b3389f1eee
commit bc6ce63e7b
18 changed files with 131 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/search/api-report.md
+8 -23
View File
@@ -6,33 +6,22 @@
/// <reference types="react" />
import { BackstagePlugin } from '@backstage/core-plugin-api';
import { DefaultResultListItemProps } from '@backstage/plugin-search-react/src/components/DefaultResultListItem/DefaultResultListItem';
import { IconComponent } from '@backstage/core-plugin-api';
import { InputBaseProps } from '@material-ui/core';
import { ReactElement } from 'react';
import { ReactNode } from 'react';
import { ResultHighlight } from '@backstage/plugin-search-common';
import { RouteRef } from '@backstage/core-plugin-api';
import { SearchAutocompleteFilterProps as SearchAutocompleteFilterProps_2 } from '@backstage/plugin-search-react';
import { SearchDocument } from '@backstage/plugin-search-common';
import { SearchFilterComponentProps as SearchFilterComponentProps_2 } from '@backstage/plugin-search-react';
import { SearchResult as SearchResult_2 } from '@backstage/plugin-search-common';
import { SearchResultProps } from '@backstage/plugin-search-react';
// Warning: (ae-missing-release-tag) "DefaultResultListItem" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export const DefaultResultListItem: ({
result,
highlight,
icon,
secondaryAction,
lineClamp,
}: {
icon?: ReactNode;
secondaryAction?: ReactNode;
result: SearchDocument;
highlight?: ResultHighlight | undefined;
lineClamp?: number | undefined;
}) => JSX.Element;
// @public @deprecated (undocumented)
export const DefaultResultListItem: (
props: DefaultResultListItemProps,
) => JSX.Element;
// Warning: (ae-forgotten-export) The symbol "FiltersProps" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "Filters" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -214,12 +203,8 @@ export { searchPlugin };
// Warning: (ae-missing-release-tag) "SearchResult" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export const SearchResult: ({
children,
}: {
children: (results: { results: SearchResult_2[] }) => JSX.Element;
}) => JSX.Element;
// @public @deprecated (undocumented)
export const SearchResult: (props: SearchResultProps) => JSX.Element;
// Warning: (ae-missing-release-tag) "SearchResultPager" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
plugins/search/src/components/DefaultResultListItem/DefaultResultListItem.stories.tsx
-126
View File
@@ -1,126 +0,0 @@
/*
* Copyright 2021 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/src/components/DefaultResultListItem/DefaultResultListItem.test.tsx
-59
View File
@@ -1,59 +0,0 @@
/*
* Copyright 2021 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/src/components/DefaultResultListItem/DefaultResultListItem.tsx
-90
View File
@@ -1,90 +0,0 @@
/*
* Copyright 2021 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 {
ResultHighlight,
SearchDocument,
} from '@backstage/plugin-search-common';
import { HighlightedSearchResultText } from '@backstage/plugin-search-react';
import {
ListItem,
ListItemIcon,
ListItemText,
Box,
Divider,
} from '@material-ui/core';
import { Link } from '@backstage/core-components';
type Props = {
icon?: ReactNode;
secondaryAction?: ReactNode;
result: SearchDocument;
highlight?: ResultHighlight;
lineClamp?: number;
};
export const DefaultResultListItem = ({
result,
highlight,
icon,
secondaryAction,
lineClamp = 5,
}: Props) => {
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>
);
};
plugins/search/src/components/DefaultResultListItem/index.ts
-17
View File
@@ -1,17 +0,0 @@
/*
* Copyright 2021 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';
plugins/search/src/components/SearchModal/SearchModal.stories.tsx
+2 -2
View File
@@ -27,16 +27,16 @@ import {
import { makeStyles } from '@material-ui/core/styles';
import React, { ComponentType } from 'react';
import { rootRouteRef } from '../../plugin';
import { DefaultResultListItem } from '../DefaultResultListItem';
import { SearchBar } from '../SearchBar';
import {
DefaultResultListItem,
searchApiRef,
MockSearchApi,
SearchContextProvider,
SearchResult,
} from '@backstage/plugin-search-react';
import { TestApiProvider } from '@backstage/test-utils';
import { SearchModal } from './SearchModal';
import { SearchResult } from '../SearchResult';
import { SearchResultPager } from '../SearchResultPager';
import { SearchType } from '../SearchType';
import { useSearchModal } from './useSearchModal';
plugins/search/src/components/SearchModal/SearchModal.tsx
+2 -2
View File
@@ -29,10 +29,10 @@ import {
import LaunchIcon from '@material-ui/icons/Launch';
import { makeStyles } from '@material-ui/core/styles';
import { SearchBar } from '../SearchBar';
import { DefaultResultListItem } from '../DefaultResultListItem';
import { SearchResult } from '../SearchResult';
import {
DefaultResultListItem,
SearchContextProvider,
SearchResult,
useSearch,
} from '@backstage/plugin-search-react';
import { SearchResultPager } from '../SearchResultPager';
plugins/search/src/components/SearchResult/SearchResult.test.tsx
-125
View File
@@ -1,125 +0,0 @@
/*
* Copyright 2021 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 { renderInTestApp } from '@backstage/test-utils';
import { waitFor } from '@testing-library/react';
import React from 'react';
import { useSearch } from '@backstage/plugin-search-react';
import { SearchResult } from './SearchResult';
jest.mock('@backstage/plugin-search-react', () => ({
...jest.requireActual('@backstage/plugin-search-react'),
useSearch: jest.fn().mockReturnValue({
result: {},
}),
}));
describe('SearchResult', () => {
it('Progress rendered on Loading state', async () => {
(useSearch as jest.Mock).mockReturnValueOnce({
result: { loading: true },
});
const { getByRole } = await renderInTestApp(
<SearchResult>{() => <></>}</SearchResult>,
);
await waitFor(() => {
expect(getByRole('progressbar')).toBeInTheDocument();
});
});
it('Alert rendered on Error state', async () => {
const error = new Error('some error');
(useSearch as jest.Mock).mockReturnValueOnce({
result: { loading: false, error },
});
const { getByRole } = await renderInTestApp(
<SearchResult>{() => <></>}</SearchResult>,
);
await waitFor(() => {
expect(getByRole('alert')).toHaveTextContent(
new RegExp(`Error encountered while fetching search results.*${error}`),
);
});
});
it('On no result value state', async () => {
(useSearch as jest.Mock).mockReturnValueOnce({
result: { loading: false, error: '', value: undefined },
});
const { getByRole } = await renderInTestApp(
<SearchResult>{() => <></>}</SearchResult>,
);
await waitFor(() => {
expect(
getByRole('heading', { name: 'Sorry, no results were found' }),
).toBeInTheDocument();
});
});
it('On empty result value state', async () => {
(useSearch as jest.Mock).mockReturnValueOnce({
result: { loading: false, error: '', value: { results: [] } },
});
const { getByRole } = await renderInTestApp(
<SearchResult>{() => <></>}</SearchResult>,
);
await waitFor(() => {
expect(
getByRole('heading', { name: 'Sorry, no results were found' }),
).toBeInTheDocument();
});
});
it('Calls children with results set to result.value', async () => {
(useSearch as jest.Mock).mockReturnValueOnce({
result: {
loading: false,
error: '',
value: {
totalCount: 1,
results: [
{
type: 'some-type',
document: {
title: 'some-title',
text: 'some-text',
location: 'some-location',
},
},
],
},
},
});
const { getByText } = await renderInTestApp(
<SearchResult>
{({ results }) => {
return <>Results {results.length}</>;
}}
</SearchResult>,
);
expect(getByText('Results 1')).toBeInTheDocument();
});
});
plugins/search/src/components/SearchResult/SearchResult.tsx
-57
View File
@@ -1,57 +0,0 @@
/*
* Copyright 2021 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 {
EmptyState,
Progress,
ResponseErrorPanel,
} from '@backstage/core-components';
import { SearchResult } from '@backstage/plugin-search-common';
import React from 'react';
import { useSearch } from '@backstage/plugin-search-react';
type Props = {
children: (results: { results: SearchResult[] }) => JSX.Element;
};
/**
* @deprecated Moved to `@backstage/plugin-search-react`.
*/
export const SearchResultComponent = ({ children }: Props) => {
const {
result: { loading, error, value },
} = useSearch();
if (loading) {
return <Progress />;
}
if (error) {
return (
<ResponseErrorPanel
title="Error encountered while fetching search results"
error={error}
/>
);
}
if (!value?.results.length) {
return <EmptyState missing="data" title="Sorry, no results were found" />;
}
return <>{children({ results: value.results })}</>;
};
export { SearchResultComponent as SearchResult };
plugins/search/src/components/SearchResult/index.tsx
-17
View File
@@ -1,17 +0,0 @@
/*
* Copyright 2021 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 { SearchResult } from './SearchResult';
plugins/search/src/plugin.ts
+13 -20
View File
@@ -15,7 +15,11 @@
*/
import { SearchClient } from './apis';
import { searchApiRef } from '@backstage/plugin-search-react';
import {
searchApiRef,
SearchResult as RealSearchResult,
DefaultResultListItem as RealDefaultResultListItem,
} from '@backstage/plugin-search-react';
import {
createApiFactory,
createPlugin,
@@ -63,14 +67,10 @@ export const SearchBar = searchPlugin.provide(
}),
);
export const SearchResult = searchPlugin.provide(
createComponentExtension({
name: 'SearchResult',
component: {
lazy: () => import('./components/SearchResult').then(m => m.SearchResult),
},
}),
);
/**
* @deprecated Import from `@backstage/plugin-search-react` instead.
*/
export const SearchResult = RealSearchResult;
export const SidebarSearchModal = searchPlugin.provide(
createComponentExtension({
@@ -84,17 +84,10 @@ export const SidebarSearchModal = searchPlugin.provide(
}),
);
export const DefaultResultListItem = searchPlugin.provide(
createComponentExtension({
name: 'DefaultResultListItem',
component: {
lazy: () =>
import('./components/DefaultResultListItem').then(
m => m.DefaultResultListItem,
),
},
}),
);
/**
* @deprecated Import from `@backstage/plugin-search-react` instead.
*/
export const DefaultResultListItem = RealDefaultResultListItem;
export const HomePageSearchBar = searchPlugin.provide(
createComponentExtension({