Use core Select instead of Checkbox for filters

Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>

.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.

packages/app/src/components/search/SearchPage.tsx

@@ -117,7 +117,7 @@ const SearchPage = () => {
                   name="kind"
                   values={['Component', 'Template']}
                 />
-                <SearchFilter.Checkbox
+                <SearchFilter.Select
                   className={classes.filter}
                   label="Lifecycle"
                   name="lifecycle"

plugins/search-react/src/components/SearchFilter/SearchFilter.test.tsx

@@ -289,12 +289,14 @@ describe('SearchFilter', () => {
         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 () => {

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 (
     <FormControl
       disabled={loading}
@@ -194,27 +191,12 @@ export const SelectFilter = (props: SearchFilterComponentProps) => {
       fullWidth
       data-testid="search-selectfilter-next"
     >
-      {label ? (
-        <InputLabel className={classes.label} margin="dense">
-          {label}
-        </InputLabel>
-      ) : null}
       <Select
-        variant="outlined"
-        value={filters[name] || ''}
+        label={label ?? capitalize(name)}
+        selected={(filters[name] || '') as string}
         onChange={handleChange}
-      >
-        <MenuItem value="">
-          <em>All</em>
-        </MenuItem>
-        {values.map((value: string) => (
-          <MenuItem key={value} value={value}>
-            <Typography variant="inherit" noWrap>
-              {value}
-            </Typography>
-          </MenuItem>
-        ))}
-      </Select>
+        items={items}
+      />
     </FormControl>
   );
 };