From d311c848ffa259d1fa03a984fe8cea374a5d7689 Mon Sep 17 00:00:00 2001 From: Jonathan Roebuck Date: Thu, 7 Nov 2024 10:18:53 +0000 Subject: [PATCH 1/6] Use core Select instead of Checkbox for filters Signed-off-by: Jonathan Roebuck --- .changeset/healthy-years-begin.md | 5 +++ .../app/src/components/search/SearchPage.tsx | 2 +- .../SearchFilter/SearchFilter.test.tsx | 14 ++++--- .../components/SearchFilter/SearchFilter.tsx | 40 +++++-------------- 4 files changed, 25 insertions(+), 36 deletions(-) create mode 100644 .changeset/healthy-years-begin.md 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} + /> ); }; From 188fddfc3a70c9f82037fbe2504978e8e3758bd9 Mon Sep 17 00:00:00 2001 From: Jonathan Roebuck Date: Thu, 7 Nov 2024 12:56:21 +0000 Subject: [PATCH 2/6] fix lighouse heading issue Signed-off-by: Jonathan Roebuck --- .../search/src/components/SearchType/SearchType.Accordion.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/search/src/components/SearchType/SearchType.Accordion.tsx b/plugins/search/src/components/SearchType/SearchType.Accordion.tsx index d6d3578b26..0cbb52b633 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} Date: Thu, 7 Nov 2024 13:04:07 +0000 Subject: [PATCH 3/6] update changeset Signed-off-by: Jonathan Roebuck --- .changeset/healthy-years-begin.md | 1 + .../search/src/components/SearchType/SearchType.Accordion.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.changeset/healthy-years-begin.md b/.changeset/healthy-years-begin.md index 1f7c1883cd..a1952b6648 100644 --- a/.changeset/healthy-years-begin.md +++ b/.changeset/healthy-years-begin.md @@ -1,5 +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/plugins/search/src/components/SearchType/SearchType.Accordion.tsx b/plugins/search/src/components/SearchType/SearchType.Accordion.tsx index 0cbb52b633..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} Date: Thu, 7 Nov 2024 14:59:36 +0000 Subject: [PATCH 4/6] add value to all option to fix a11y issue Signed-off-by: Jonathan Roebuck --- .../src/components/SearchFilter/SearchFilter.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx b/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx index aba5d97fe2..f5f85f3f56 100644 --- a/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx +++ b/plugins/search-react/src/components/SearchFilter/SearchFilter.tsx @@ -14,8 +14,9 @@ * 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 Checkbox from '@material-ui/core/Checkbox'; @@ -170,18 +171,20 @@ export const SelectFilter = (props: SearchFilterComponentProps) => { defaultValues, valuesDebounceMs, ); + const allOptionValue = useRef(uuid()); + const allOption = { value: allOptionValue.current, label: 'All' }; const { filters, setFilters } = useSearch(); 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 = [{ value: '', label: 'All' }].concat( - values.map(value => ({ value, label: value })), - ); + const items = [allOption, ...values.map(value => ({ value, label: value }))]; return ( { >