diff --git a/.changeset/healthy-years-begin.md b/.changeset/healthy-years-begin.md new file mode 100644 index 0000000000..1f7c1883cd --- /dev/null +++ b/.changeset/healthy-years-begin.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-search-react': patch +--- + +Use Select from core-components and update Lifecycle filter to use Select instead checkboxes. diff --git a/packages/app/src/components/search/SearchPage.tsx b/packages/app/src/components/search/SearchPage.tsx index fe96e506eb..5a520e9211 100644 --- a/packages/app/src/components/search/SearchPage.tsx +++ b/packages/app/src/components/search/SearchPage.tsx @@ -117,7 +117,7 @@ const SearchPage = () => { name="kind" values={['Component', 'Template']} /> - { expect(screen.getByRole('listbox')).toBeInTheDocument(); }); - expect( - screen.getByRole('option', { name: values[0] }), - ).toBeInTheDocument(); - expect( - screen.getByRole('option', { name: values[1] }), - ).toBeInTheDocument(); + await waitFor(() => { + expect( + screen.getByRole('option', { name: values[0] }), + ).toBeInTheDocument(); + expect( + screen.getByRole('option', { name: values[1] }), + ).toBeInTheDocument(); + }); }); it('Renders correctly based on filter state', async () => { diff --git a/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx b/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx index acfa6aec3b..aba5d97fe2 100644 --- a/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx +++ b/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx @@ -15,15 +15,13 @@ */ import React, { ReactElement, ChangeEvent } from 'react'; +import { capitalize } from 'lodash'; import FormControl from '@material-ui/core/FormControl'; import FormControlLabel from '@material-ui/core/FormControlLabel'; -import InputLabel from '@material-ui/core/InputLabel'; import Checkbox from '@material-ui/core/Checkbox'; -import Select from '@material-ui/core/Select'; -import MenuItem from '@material-ui/core/MenuItem'; import FormLabel from '@material-ui/core/FormLabel'; -import Typography from '@material-ui/core/Typography'; import { makeStyles } from '@material-ui/core/styles'; +import { Select, SelectedItems } from '@backstage/core-components'; import { useSearch } from '../../context'; import { @@ -161,7 +159,6 @@ export const SelectFilter = (props: SearchFilterComponentProps) => { values: givenValues, valuesDebounceMs, } = props; - const classes = useStyles(); useDefaultFilterValue(name, defaultValue); const asyncValues = typeof givenValues === 'function' ? givenValues : undefined; @@ -175,17 +172,17 @@ export const SelectFilter = (props: SearchFilterComponentProps) => { ); const { filters, setFilters } = useSearch(); - const handleChange = (e: ChangeEvent<{ value: unknown }>) => { - const { - target: { value }, - } = e; - + const handleChange = (value: SelectedItems) => { setFilters(prevFilters => { const { [name]: filter, ...others } = prevFilters; return value ? { ...others, [name]: value as string } : others; }); }; + const items = [{ value: '', label: 'All' }].concat( + values.map(value => ({ value, label: value })), + ); + return ( { fullWidth data-testid="search-selectfilter-next" > - {label ? ( - - {label} - - ) : null} + items={items} + /> ); };