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

Merge pull request #8646 from backstage/feat/search-facet-by-type

Browse Source 
[Search] Introduce a <SearchType.Accordion /> Variant
This commit is contained in:
Eric Peterson
2021-12-29 13:58:29 +01:00
committed by GitHub
parent a0004d3451 20af5a701f
commit e35aff0d16
17 changed files with 729 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/search-en-jul-hemma.md
+7
View File
@@ -0,0 +1,7 @@
---
'@backstage/plugin-search': patch
---
Introduces a `<SearchType.Accordion />` variant, which operates on the same part of a search query as the existing `<SearchType />`, but in a more opinionated way (as a single-select control surface suitable for faceted search UIs).
Check the [search plugin storybook](https://backstage.io/storybook/?path=/story/plugins-search-searchtype--accordion) to see how it can be used.
.changeset/search-over-tysta-skogor.md
+58
View File
@@ -0,0 +1,58 @@
---
'@backstage/create-app': patch
---
The `<SearchType />` filter in the composed `SearchPage.tsx` was replaced with the `<SearchType.Accordion />` variant.
This is an entirely optional change; if you wish to display a control surface for search `types` as a single-select accordion (as opposed to the current multi-select of checkboxes), you can make the following (or similar) changes to your search page layout:
```diff
--- a/packages/app/src/components/search/SearchPage.tsx
+++ b/packages/app/src/components/search/SearchPage.tsx
@@ -11,7 +11,7 @@ import {
SearchType,
DefaultResultListItem,
} from '@backstage/plugin-search';
-import { Content, Header, Page } from '@backstage/core-components';
+import { CatalogIcon, Content, DocsIcon, Header, Page } from '@backstage/core-components';
const useStyles = makeStyles((theme: Theme) => ({
bar: {
@@ -19,6 +19,7 @@ const useStyles = makeStyles((theme: Theme) => ({
},
filters: {
padding: theme.spacing(2),
+ marginTop: theme.spacing(2),
},
filter: {
'& + &': {
@@ -41,12 +42,23 @@ const SearchPage = () => {
</Paper>
</Grid>
<Grid item xs={3}>
+ <SearchType.Accordion
+ name="Result Type"
+ defaultValue="software-catalog"
+ types={[
+ {
+ value: 'software-catalog',
+ name: 'Software Catalog',
+ icon: <CatalogIcon />,
+ },
+ {
+ value: 'techdocs',
+ name: 'Documentation',
+ icon: <DocsIcon />,
+ },
+ ]}
+ />
<Paper className={classes.filters}>
- <SearchType
- values={['techdocs', 'software-catalog']}
- name="type"
- defaultValue="software-catalog"
- />
<SearchFilter.Select
className={classes.filter}
name="kind"
```
packages/app/src/components/search/SearchPage.tsx
+25 -6
View File
@@ -14,7 +14,14 @@
* limitations under the License.
*/
import { Content, Header, Lifecycle, Page } from '@backstage/core-components';
import {
CatalogIcon,
Content,
DocsIcon,
Header,
Lifecycle,
Page,
} from '@backstage/core-components';
import { CatalogResultListItem } from '@backstage/plugin-catalog';
import {
DefaultResultListItem,
@@ -39,6 +46,7 @@ const useStyles = makeStyles((theme: Theme) => ({
},
filters: {
padding: theme.spacing(2),
marginTop: theme.spacing(2),
},
}));
@@ -55,12 +63,23 @@ const SearchPage = () => {
</Paper>
</Grid>
<Grid item xs={3}>
<SearchType.Accordion
name="Result Type"
defaultValue="software-catalog"
types={[
{
value: 'software-catalog',
name: 'Software Catalog',
icon: <CatalogIcon />,
},
{
value: 'techdocs',
name: 'Documentation',
icon: <DocsIcon />,
},
]}
/>
<Paper className={classes.filters}>
<SearchType
values={['techdocs', 'software-catalog']}
name="type"
defaultValue="software-catalog"
/>
<SearchFilter.Select
className={classes.filter}
name="kind"
packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx
+24 -6
View File
@@ -11,7 +11,13 @@ import {
SearchType,
DefaultResultListItem,
} from '@backstage/plugin-search';
import { Content, Header, Page } from '@backstage/core-components';
import {
CatalogIcon,
Content,
DocsIcon,
Header,
Page,
} from '@backstage/core-components';
const useStyles = makeStyles((theme: Theme) => ({
bar: {
@@ -19,6 +25,7 @@ const useStyles = makeStyles((theme: Theme) => ({
},
filters: {
padding: theme.spacing(2),
marginTop: theme.spacing(2),
},
filter: {
'& + &': {
@@ -41,12 +48,23 @@ const SearchPage = () => {
</Paper>
</Grid>
<Grid item xs={3}>
<SearchType.Accordion
name="Result Type"
defaultValue="software-catalog"
types={[
{
value: 'software-catalog',
name: 'Software Catalog',
icon: <CatalogIcon />,
},
{
value: 'techdocs',
name: 'Documentation',
icon: <DocsIcon />,
},
]}
/>
<Paper className={classes.filters}>
<SearchType
values={['techdocs', 'software-catalog']}
name="type"
defaultValue="software-catalog"
/>
<SearchFilter.Select
className={classes.filter}
name="kind"
plugins/search/api-report.md
+23 -7
View File
@@ -213,16 +213,32 @@ export const SearchResult: ({
// @public (undocumented)
export const SearchResultPager: () => JSX.Element;
// Warning: (ae-forgotten-export) The symbol "SearchTypeProps" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "SearchType" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
export const SearchType: ({
values,
className,
name,
defaultValue,
}: SearchTypeProps) => JSX.Element;
export const SearchType: {
(props: SearchTypeProps): JSX.Element;
Accordion(props: SearchTypeAccordionProps): JSX.Element;
};
// @public (undocumented)
export type SearchTypeAccordionProps = {
name: string;
types: Array<{
value: string;
name: string;
icon: JSX.Element;
}>;
defaultValue?: string;
};
// @public (undocumented)
export type SearchTypeProps = {
className?: string;
name: string;
values?: string[];
defaultValue?: string[] | string | null;
};
// Warning: (ae-missing-release-tag) "SidebarSearch" 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
+31 -40
View File
@@ -25,6 +25,17 @@ 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 = {
@@ -35,54 +46,34 @@ const mockSearchResult = {
};
export const Default = () => {
return (
<MemoryRouter>
<Grid container direction="row">
<Grid item xs={12}>
<DefaultResultListItem result={mockSearchResult} />
</Grid>
</Grid>
</MemoryRouter>
);
return <DefaultResultListItem result={mockSearchResult} />;
};
export const WithIcon = () => {
return (
<MemoryRouter>
<Grid container direction="row">
<Grid item xs={12}>
<DefaultResultListItem
result={mockSearchResult}
icon={<FindInPageIcon color="primary" />}
/>
</Grid>
</Grid>
</MemoryRouter>
<DefaultResultListItem
result={mockSearchResult}
icon={<FindInPageIcon color="primary" />}
/>
);
};
export const WithSecondaryAction = () => {
return (
<MemoryRouter>
<Grid container direction="row">
<Grid item xs={12}>
<DefaultResultListItem
result={mockSearchResult}
secondaryAction={
<Button
to="#"
size="small"
aria-label="owner"
variant="text"
startIcon={<GroupIcon />}
style={{ textTransform: 'lowercase' }}
>
{mockSearchResult.owner}
</Button>
}
/>
</Grid>
</Grid>
</MemoryRouter>
<DefaultResultListItem
result={mockSearchResult}
secondaryAction={
<Button
to="#"
size="small"
aria-label="owner"
variant="text"
startIcon={<GroupIcon />}
style={{ textTransform: 'lowercase' }}
>
{mockSearchResult.owner}
</Button>
}
/>
);
};
plugins/search/src/components/SearchBar/SearchBar.stories.tsx
+30 -70
View File
@@ -15,88 +15,57 @@
*/
import { Grid, makeStyles, Paper } from '@material-ui/core';
import React from 'react';
import { MemoryRouter } from 'react-router';
import { SearchContext } from '../SearchContext';
import React, { ComponentType } from 'react';
import { SearchContextProvider } from '../SearchContext/SearchContextForStorybook.stories';
import { SearchBar } from './SearchBar';
export default {
title: 'Plugins/Search/SearchBar',
component: SearchBar,
};
const defaultValue = {
term: '',
setTerm: () => {},
decorators: [
(Story: ComponentType<{}>) => (
<SearchContextProvider>
<Grid container direction="row">
<Grid item xs={12}>
<Story />
</Grid>
</Grid>
</SearchContextProvider>
),
],
};
export const Default = () => {
return (
<MemoryRouter>
{/* @ts-ignore (defaultValue requires more than what is used here) */}
<SearchContext.Provider value={defaultValue}>
<Grid container direction="row">
<Grid item xs={12}>
<Paper style={{ padding: '8px 0' }}>
<SearchBar />
</Paper>
</Grid>
</Grid>
</SearchContext.Provider>
</MemoryRouter>
<Paper style={{ padding: '8px 0' }}>
<SearchBar />
</Paper>
);
};
export const CustomPlaceholder = () => {
return (
<MemoryRouter>
{/* @ts-ignore (defaultValue requires more than what is used here) */}
<SearchContext.Provider value={defaultValue}>
<Grid container direction="row">
<Grid item xs={12}>
<Paper style={{ padding: '8px 0' }}>
<SearchBar placeholder="This is a custom placeholder" />
</Paper>
</Grid>
</Grid>
</SearchContext.Provider>
</MemoryRouter>
<Paper style={{ padding: '8px 0' }}>
<SearchBar placeholder="This is a custom placeholder" />
</Paper>
);
};
export const Focused = () => {
return (
<MemoryRouter>
{/* @ts-ignore (defaultValue requires more than what is used here) */}
<SearchContext.Provider value={defaultValue}>
<Grid container direction="row">
<Grid item xs={12}>
<Paper style={{ padding: '8px 0' }}>
{/* decision up to adopter, read https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md#no-autofocus */}
{/* eslint-disable-next-line jsx-a11y/no-autofocus */}
<SearchBar autoFocus />
</Paper>
</Grid>
</Grid>
</SearchContext.Provider>
</MemoryRouter>
<Paper style={{ padding: '8px 0' }}>
{/* decision up to adopter, read https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md#no-autofocus */}
{/* eslint-disable-next-line jsx-a11y/no-autofocus */}
<SearchBar autoFocus />
</Paper>
);
};
export const WithoutClearButton = () => {
return (
<MemoryRouter>
{/* @ts-ignore (defaultValue requires more than what is used here) */}
<SearchContext.Provider value={defaultValue}>
<Grid container direction="row">
<Grid item xs={12}>
<Paper style={{ padding: '8px 0' }}>
<SearchBar clearButton={false} />
</Paper>
</Grid>
</Grid>
</SearchContext.Provider>
</MemoryRouter>
<Paper style={{ padding: '8px 0' }}>
<SearchBar clearButton={false} />
</Paper>
);
};
@@ -113,17 +82,8 @@ const useStyles = makeStyles({
export const CustomStyles = () => {
const classes = useStyles();
return (
<MemoryRouter>
{/* @ts-ignore (defaultValue requires more than what is used here) */}
<SearchContext.Provider value={defaultValue}>
<Grid container direction="row">
<Grid item xs={12}>
<Paper className={classes.search}>
<SearchBar />
</Paper>
</Grid>
</Grid>
</SearchContext.Provider>
</MemoryRouter>
<Paper className={classes.search}>
<SearchBar />
</Paper>
);
};
plugins/search/src/components/SearchContext/SearchContextForStorybook.stories.tsx
+45
View File
@@ -0,0 +1,45 @@
/*
* 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 { ApiProvider } from '@backstage/core-app-api';
import { SearchResultSet } from '@backstage/search-common';
import { TestApiRegistry } from '@backstage/test-utils';
import React, { ComponentProps } from 'react';
import { searchApiRef } from '../../apis';
import { SearchContextProvider as RealSearchContextProvider } from './SearchContext';
type QueryResultProps = {
mockedResults?: SearchResultSet;
};
/**
* Utility context provider only for use in Storybook stories. You should use
* the real `<SearchContextProvider>` exported by `@backstage/plugin-search` in
* your app instead of this! In some cases (like the search page) it may
* already be provided on your behalf.
*/
export const SearchContextProvider = (
props: ComponentProps<typeof RealSearchContextProvider> & QueryResultProps,
) => {
const { mockedResults, ...contextProps } = props;
const query: any = () => Promise.resolve(mockedResults || {});
const apiRegistry = TestApiRegistry.from([searchApiRef, { query }]);
return (
<ApiProvider apis={apiRegistry}>
<RealSearchContextProvider {...contextProps} />
</ApiProvider>
);
};
plugins/search/src/components/SearchFilter/SearchFilter.stories.tsx
+25 -37
View File
@@ -15,56 +15,44 @@
*/
import { Grid, Paper } from '@material-ui/core';
import React from 'react';
import { MemoryRouter } from 'react-router';
import { SearchContext } from '../SearchContext';
import React, { ComponentType } from 'react';
import { SearchContextProvider } from '../SearchContext/SearchContextForStorybook.stories';
import { SearchFilter } from './SearchFilter';
export default {
title: 'Plugins/Search/SearchFilter',
component: SearchFilter,
};
const defaultValue = {
filters: {},
decorators: [
(Story: ComponentType<{}>) => (
<SearchContextProvider>
<Grid container direction="row">
<Grid item xs={4}>
<Story />
</Grid>
</Grid>
</SearchContextProvider>
),
],
};
export const CheckBoxFilter = () => {
return (
<MemoryRouter>
{/* @ts-ignore (defaultValue requires more than what is used here) */}
<SearchContext.Provider value={defaultValue}>
<Grid container direction="row">
<Grid item xs={4}>
<Paper style={{ padding: 10 }}>
<SearchFilter.Checkbox
name="Search Checkbox Filter"
values={['value1', 'value2']}
/>
</Paper>
</Grid>
</Grid>
</SearchContext.Provider>
</MemoryRouter>
<Paper style={{ padding: 10 }}>
<SearchFilter.Checkbox
name="Search Checkbox Filter"
values={['value1', 'value2']}
/>
</Paper>
);
};
export const SelectFilter = () => {
return (
<MemoryRouter>
{/* @ts-ignore (defaultValue requires more than what is used here) */}
<SearchContext.Provider value={defaultValue}>
<Grid container direction="row">
<Grid item xs={4}>
<Paper style={{ padding: 10 }}>
<SearchFilter.Select
name="Search Select Filter"
values={['value1', 'value2']}
/>
</Paper>
</Grid>
</Grid>
</SearchContext.Provider>
</MemoryRouter>
<Paper style={{ padding: 10 }}>
<SearchFilter.Select
name="Search Select Filter"
values={['value1', 'value2']}
/>
</Paper>
);
};
plugins/search/src/components/SearchModal/SearchModal.stories.tsx
+32 -42
View File
@@ -14,62 +14,52 @@
* limitations under the License.
*/
import { ApiProvider, ApiRegistry } from '@backstage/core-app-api';
import { wrapInTestApp } from '@backstage/test-utils';
import { Button } from '@material-ui/core';
import React, { ComponentType } from 'react';
import { searchApiRef } from '../../apis';
import { rootRouteRef } from '../../plugin';
import { SearchContextProvider, useSearch } from '../SearchContext';
import { useSearch } from '../SearchContext';
import { SearchContextProvider } from '../SearchContext/SearchContextForStorybook.stories';
import { SearchModal } from './SearchModal';
const mockSearchApi = {
query: () =>
Promise.resolve({
results: [
{
type: 'custom-result-item',
document: {
location: 'search/search-result-1',
title: 'Search Result 1',
text: 'some text from the search result',
},
},
{
type: 'no-custom-result-item',
document: {
location: 'search/search-result-2',
title: 'Search Result 2',
text: 'some text from the search result',
},
},
{
type: 'no-custom-result-item',
document: {
location: 'search/search-result-3',
title: 'Search Result 3',
text: 'some text from the search result',
},
},
],
}),
const mockResults = {
results: [
{
type: 'custom-result-item',
document: {
location: 'search/search-result-1',
title: 'Search Result 1',
text: 'some text from the search result',
},
},
{
type: 'no-custom-result-item',
document: {
location: 'search/search-result-2',
title: 'Search Result 2',
text: 'some text from the search result',
},
},
{
type: 'no-custom-result-item',
document: {
location: 'search/search-result-3',
title: 'Search Result 3',
text: 'some text from the search result',
},
},
],
};
const apiRegistry = () => ApiRegistry.from([[searchApiRef, mockSearchApi]]);
export default {
title: 'Plugins/Search/SearchModal',
component: SearchModal,
decorators: [
(Story: ComponentType<{}>) =>
wrapInTestApp(
<>
<ApiProvider apis={apiRegistry()}>
<SearchContextProvider>
<Story />
</SearchContextProvider>
</ApiProvider>
</>,
<SearchContextProvider mockedResults={mockResults}>
<Story />
</SearchContextProvider>,
{ mountedRoutes: { '/search': rootRouteRef } },
),
],
plugins/search/src/components/SearchResult/SearchResult.stories.tsx
+65 -67
View File
@@ -16,83 +16,81 @@
import { Link } from '@backstage/core-components';
import { List, ListItem } from '@material-ui/core';
import React from 'react';
import React, { ComponentType } from 'react';
import { MemoryRouter } from 'react-router';
import { DefaultResultListItem } from '../DefaultResultListItem';
import { SearchContext } from '../SearchContext';
import { SearchContextProvider } from '../SearchContext/SearchContextForStorybook.stories';
import { SearchResult } from './SearchResult';
const mockResults = {
results: [
{
type: 'custom-result-item',
document: {
location: 'search/search-result-1',
title: 'Search Result 1',
text: 'some text from the search result',
},
},
{
type: 'no-custom-result-item',
document: {
location: 'search/search-result-2',
title: 'Search Result 2',
text: 'some text from the search result',
},
},
{
type: 'no-custom-result-item',
document: {
location: 'search/search-result-3',
title: 'Search Result 3',
text: 'some text from the search result',
},
},
],
};
export default {
title: 'Plugins/Search/SearchResult',
component: SearchResult,
};
const defaultValue = {
result: {
loading: false,
error: '',
value: {
results: [
{
type: 'custom-result-item',
document: {
location: 'search/search-result-1',
title: 'Search Result 1',
text: 'some text from the search result',
},
},
{
type: 'no-custom-result-item',
document: {
location: 'search/search-result-2',
title: 'Search Result 2',
text: 'some text from the search result',
},
},
{
type: 'no-custom-result-item',
document: {
location: 'search/search-result-3',
title: 'Search Result 3',
text: 'some text from the search result',
},
},
],
},
},
decorators: [
(Story: ComponentType<{}>) => (
<MemoryRouter>
<SearchContextProvider mockedResults={mockResults}>
<Story />
</SearchContextProvider>
</MemoryRouter>
),
],
};
export const Default = () => {
return (
<MemoryRouter>
{/* @ts-ignore (defaultValue requires more than what is used here) */}
<SearchContext.Provider value={defaultValue}>
<SearchResult>
{({ results }) => (
<List>
{results.map(({ type, document }) => {
switch (type) {
case 'custom-result-item':
return (
<DefaultResultListItem
key={document.location}
result={document}
/>
);
default:
return (
<ListItem>
<Link to={document.location}>
{document.title} - {document.text}
</Link>
</ListItem>
);
}
})}
</List>
)}
</SearchResult>
</SearchContext.Provider>
</MemoryRouter>
<SearchResult>
{({ results }) => (
<List>
{results.map(({ type, document }) => {
switch (type) {
case 'custom-result-item':
return (
<DefaultResultListItem
key={document.location}
result={document}
/>
);
default:
return (
<ListItem>
<Link to={document.location}>
{document.title} - {document.text}
</Link>
</ListItem>
);
}
})}
</List>
)}
</SearchResult>
);
};
plugins/search/src/components/SearchType/SearchType.Accordion.test.tsx
+133
View File
@@ -0,0 +1,133 @@
/*
* 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 { ApiProvider } from '@backstage/core-app-api';
import { TestApiRegistry } from '@backstage/test-utils';
import { act, render } from '@testing-library/react';
import user from '@testing-library/user-event';
import { searchApiRef } from '../../apis';
import { SearchContext, SearchContextProvider } from '../SearchContext';
import { SearchType } from './SearchType';
describe('SearchType.Accordion', () => {
const query = jest.fn();
const mockApis = TestApiRegistry.from([searchApiRef, { query }]);
const contextSpy = {
result: { loading: false, value: { results: [] } },
term: '',
types: [],
filters: {},
toggleModal: jest.fn(),
setTerm: jest.fn(),
setTypes: jest.fn(),
setFilters: jest.fn(),
setPageCursor: jest.fn(),
};
const expectedLabel = 'Expected Label';
const expectedType = {
value: 'expected-type',
name: 'Expected Type',
icon: <></>,
};
beforeEach(() => {
query.mockResolvedValue({ results: [] });
});
afterEach(() => {
jest.resetAllMocks();
});
it('should render as expected', async () => {
const { getByText } = render(
<ApiProvider apis={mockApis}>
<SearchContextProvider>
<SearchType.Accordion name={expectedLabel} types={[expectedType]} />
</SearchContextProvider>
</ApiProvider>,
);
// The given label should be rendered.
expect(getByText(expectedLabel)).toBeInTheDocument();
// "Collapse" is visible by default (element is not collapsed)
expect(getByText('Collapse')).toBeInTheDocument();
// The default "all" type should be rendered.
expect(getByText('All')).toBeInTheDocument();
// The given type is also visible
expect(getByText(expectedType.name)).toBeInTheDocument();
await act(() => Promise.resolve());
});
it('should set entire types array when a type is selected', () => {
const { getByText } = render(
<SearchContext.Provider value={contextSpy}>
<SearchType.Accordion name={expectedLabel} types={[expectedType]} />
</SearchContext.Provider>,
);
user.click(getByText(expectedType.name));
expect(contextSpy.setTypes).toHaveBeenCalledWith([expectedType.value]);
});
it('should reset types array when all is selected', () => {
const { getByText } = render(
<SearchContext.Provider value={contextSpy}>
<SearchType.Accordion
name={expectedLabel}
defaultValue={expectedType.value}
types={[expectedType]}
/>
</SearchContext.Provider>,
);
user.click(getByText('All'));
expect(contextSpy.setTypes).toHaveBeenCalledWith([]);
});
it('should reset page cursor when a new type is selected', () => {
const { getByText } = render(
<SearchContext.Provider value={contextSpy}>
<SearchType.Accordion name={expectedLabel} types={[expectedType]} />
</SearchContext.Provider>,
);
user.click(getByText(expectedType.name));
expect(contextSpy.setPageCursor).toHaveBeenCalledWith(undefined);
});
it('should collapse when a new type is selected', () => {
const { getByText, queryByText } = render(
<SearchContext.Provider value={contextSpy}>
<SearchType.Accordion name={expectedLabel} types={[expectedType]} />
</SearchContext.Provider>,
);
user.click(getByText(expectedType.name));
expect(queryByText('Collapse')).not.toBeInTheDocument();
});
});
plugins/search/src/components/SearchType/SearchType.Accordion.tsx
+174
View File
@@ -0,0 +1,174 @@
/*
* 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, { cloneElement, Fragment, useEffect, useState } from 'react';
import { useSearch } from '../SearchContext';
import {
Accordion,
AccordionSummary,
AccordionDetails,
Card,
CardContent,
CardHeader,
Divider,
List,
ListItem,
ListItemIcon,
ListItemText,
makeStyles,
} from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import AllIcon from '@material-ui/icons/FontDownload';
const useStyles = makeStyles(theme => ({
card: {
backgroundColor: 'rgba(0, 0, 0, .11)',
},
cardContent: {
paddingTop: theme.spacing(1),
},
icon: {
color: theme.palette.common.black,
},
list: {
width: '100%',
},
listItemIcon: {
width: '24px',
height: '24px',
},
accordion: {
backgroundColor: theme.palette.background.paper,
},
accordionSummary: {
minHeight: 'auto',
'&.Mui-expanded': {
minHeight: 'auto',
},
},
accordionSummaryContent: {
margin: theme.spacing(2, 0),
'&.Mui-expanded': {
margin: theme.spacing(2, 0),
},
},
accordionDetails: {
padding: theme.spacing(0, 0, 1),
},
}));
/**
* @public
*/
export type SearchTypeAccordionProps = {
name: string;
types: Array<{
value: string;
name: string;
icon: JSX.Element;
}>;
defaultValue?: string;
};
export const SearchTypeAccordion = (props: SearchTypeAccordionProps) => {
const classes = useStyles();
const { setPageCursor, setTypes, types } = useSearch();
const [expanded, setExpanded] = useState(true);
const { defaultValue, name, types: givenTypes } = props;
const toggleExpanded = () => setExpanded(prevState => !prevState);
const handleClick = (type: string) => {
return () => {
setTypes(type !== '' ? [type] : []);
setPageCursor(undefined);
setExpanded(false);
};
};
// Handle any provided defaultValue
useEffect(() => {
if (defaultValue) {
setTypes([defaultValue]);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const definedTypes = [
{
value: '',
name: 'All',
icon: <AllIcon />,
},
...givenTypes,
];
const selected = types[0] || '';
return (
<Card className={classes.card}>
<CardHeader title={name} titleTypographyProps={{ variant: 'overline' }} />
<CardContent className={classes.cardContent}>
<Accordion
className={classes.accordion}
expanded={expanded}
onChange={toggleExpanded}
>
<AccordionSummary
classes={{
root: classes.accordionSummary,
content: classes.accordionSummaryContent,
}}
expandIcon={<ExpandMoreIcon className={classes.icon} />}
IconButtonProps={{ size: 'small' }}
>
{expanded
? 'Collapse'
: definedTypes.filter(t => t.value === selected)[0]!.name}
</AccordionSummary>
<AccordionDetails classes={{ root: classes.accordionDetails }}>
<List
className={classes.list}
component="nav"
aria-label="filter by type"
disablePadding
dense
>
{definedTypes.map(type => (
<Fragment key={type.value}>
<Divider />
<ListItem
selected={
types[0] === type.value ||
(types.length === 0 && type.value === '')
}
onClick={handleClick(type.value)}
button
>
<ListItemIcon>
{cloneElement(type.icon, {
className: classes.listItemIcon,
})}
</ListItemIcon>
<ListItemText primary={type.name} />
</ListItem>
</Fragment>
))}
</List>
</AccordionDetails>
</Accordion>
</CardContent>
</Card>
);
};
plugins/search/src/components/SearchType/SearchType.stories.tsx
+33 -6
View File
@@ -14,23 +14,50 @@
* limitations under the License.
*/
import React, { useState } from 'react';
import { SearchContext } from '../SearchContext';
import { Grid, Paper } from '@material-ui/core';
import CatalogIcon from '@material-ui/icons/MenuBook';
import DocsIcon from '@material-ui/icons/Description';
import UsersGroupsIcon from '@material-ui/icons/Person';
import React, { ComponentType } from 'react';
import { SearchContextProvider } from '../SearchContext/SearchContextForStorybook.stories';
import { SearchType } from './SearchType';
export default {
title: 'Plugins/Search/SearchType',
component: SearchType,
decorators: [
(Story: ComponentType<{}>) => (
<SearchContextProvider>
<Grid container direction="row">
<Grid item xs={4}>
<Story />
</Grid>
</Grid>
</SearchContextProvider>
),
],
};
const values = ['value-1', 'value-2', 'value-3'];
export const Default = () => {
const [types, setTypes] = useState<string[]>([]);
return (
<SearchContext.Provider value={{ types, setTypes } as any}>
<Paper style={{ padding: 10 }}>
<SearchType name="Search type" values={values} defaultValue={values[0]} />
</SearchContext.Provider>
</Paper>
);
};
export const Accordion = () => {
return (
<SearchType.Accordion
name="Result Types"
defaultValue="value-1"
types={[
{ value: 'value-1', name: 'Value One', icon: <CatalogIcon /> },
{ value: 'value-2', name: 'Value Two', icon: <DocsIcon /> },
{ value: 'value-3', name: 'Value Three', icon: <UsersGroupsIcon /> },
]}
/>
);
};
plugins/search/src/components/SearchType/SearchType.tsx
+19 -6
View File
@@ -25,6 +25,10 @@ import {
} from '@material-ui/core';
import React, { ChangeEvent } from 'react';
import { useEffectOnce } from 'react-use';
import {
SearchTypeAccordion,
SearchTypeAccordionProps,
} from './SearchType.Accordion';
import { useSearch } from '../SearchContext';
const useStyles = makeStyles(theme => ({
@@ -41,6 +45,9 @@ const useStyles = makeStyles(theme => ({
},
}));
/**
* @public
*/
export type SearchTypeProps = {
className?: string;
name: string;
@@ -48,12 +55,8 @@ export type SearchTypeProps = {
defaultValue?: string[] | string | null;
};
const SearchType = ({
values = [],
className,
name,
defaultValue,
}: SearchTypeProps) => {
const SearchType = (props: SearchTypeProps) => {
const { className, defaultValue, name, values = [] } = props;
const classes = useStyles();
const { types, setTypes } = useSearch();
@@ -112,4 +115,14 @@ const SearchType = ({
);
};
/**
* A control surface for the search query's "types" property, displayed as a
* single-select collapsible accordion suitable for use in faceted search UIs.
* @public
*/
SearchType.Accordion = (props: SearchTypeAccordionProps) => {
return <SearchTypeAccordion {...props} />;
};
export { SearchType };
export type { SearchTypeAccordionProps };
plugins/search/src/components/SearchType/index.ts
+1
View File
@@ -15,3 +15,4 @@
*/
export { SearchType } from './SearchType';
export type { SearchTypeAccordionProps, SearchTypeProps } from './SearchType';
plugins/search/src/index.ts
+4
View File
@@ -38,6 +38,10 @@ export type { SearchModalProps } from './components/SearchModal';
export { SearchPage as Router } from './components/SearchPage';
export { SearchResultPager } from './components/SearchResultPager';
export { SearchType } from './components/SearchType';
export type {
SearchTypeAccordionProps,
SearchTypeProps,
} from './components/SearchType';
export { SidebarSearch } from './components/SidebarSearch';
export type { SidebarSearchProps } from './components/SidebarSearch';
export type { SidebarSearchModalProps } from './components/SidebarSearchModal';