diff --git a/.changeset/healthy-years-begin.md b/.changeset/healthy-years-begin.md new file mode 100644 index 0000000000..a1952b6648 --- /dev/null +++ b/.changeset/healthy-years-begin.md @@ -0,0 +1,6 @@ +--- +'@backstage/plugin-search-react': patch +'@backstage/plugin-search': 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..f5f85f3f56 100644 --- a/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx +++ b/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx @@ -14,16 +14,15 @@ * limitations under the License. */ -import React, { ReactElement, ChangeEvent } from 'react'; +import React, { ReactElement, ChangeEvent, useRef } from 'react'; +import { capitalize } from 'lodash'; +import { v4 as uuid } from 'uuid'; 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 +160,6 @@ export const SelectFilter = (props: SearchFilterComponentProps) => { values: givenValues, valuesDebounceMs, } = props; - const classes = useStyles(); useDefaultFilterValue(name, defaultValue); const asyncValues = typeof givenValues === 'function' ? givenValues : undefined; @@ -173,19 +171,21 @@ export const SelectFilter = (props: SearchFilterComponentProps) => { defaultValues, valuesDebounceMs, ); + const allOptionValue = useRef(uuid()); + const allOption = { value: allOptionValue.current, label: 'All' }; 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; + return value !== allOptionValue.current + ? { ...others, [name]: value as string } + : others; }); }; + const items = [allOption, ...values.map(value => ({ value, label: value }))]; + return ( { fullWidth data-testid="search-selectfilter-next" > - {label ? ( - - {label} - - ) : null} + items={items} + /> ); }; diff --git a/plugins/search/src/components/SearchType/SearchType.Accordion.tsx b/plugins/search/src/components/SearchType/SearchType.Accordion.tsx index d6d3578b26..2a6c2b1939 100644 --- a/plugins/search/src/components/SearchType/SearchType.Accordion.tsx +++ b/plugins/search/src/components/SearchType/SearchType.Accordion.tsx @@ -143,7 +143,7 @@ export const SearchTypeAccordion = (props: SearchTypeAccordionProps) => { return ( - + {name}