From b26fc77bfe1542a3a3ebf10672f8670bd0f55293 Mon Sep 17 00:00:00 2001 From: victormorfin97 Date: Wed, 8 Sep 2021 09:53:24 -0600 Subject: [PATCH 1/5] Change the categories list to dropdown Signed-off-by: victormorfin97 --- .../TemplateTypePicker/TemplateTypePicker.tsx | 49 +++++++++---------- 1 file changed, 23 insertions(+), 26 deletions(-) diff --git a/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.tsx b/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.tsx index 7151446f4f..a38f45c505 100644 --- a/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.tsx +++ b/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.tsx @@ -21,22 +21,20 @@ import { Box, Checkbox, FormControlLabel, - FormGroup, - makeStyles, - Theme, + TextField, Typography, } from '@material-ui/core'; +import CheckBoxIcon from '@material-ui/icons/CheckBox'; +import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; +import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import { Autocomplete } from '@material-ui/lab'; import { useEntityTypeFilter } from '@backstage/plugin-catalog-react'; import { alertApiRef, useApi } from '@backstage/core-plugin-api'; -const useStyles = makeStyles(theme => ({ - checkbox: { - padding: theme.spacing(1, 1, 1, 2), - }, -})); +const icon = ; +const checkedIcon = ; export const TemplateTypePicker = () => { - const classes = useStyles(); const alertApi = useApi(alertApiRef); const { error, loading, availableTypes, selectedTypes, setSelectedTypes } = useEntityTypeFilter(); @@ -53,32 +51,31 @@ export const TemplateTypePicker = () => { return null; } - function toggleSelection(type: string) { - setSelectedTypes( - selectedTypes.includes(type) - ? selectedTypes.filter(t => t !== type) - : [...selectedTypes, type], - ); - } - return ( Categories - - {availableTypes.map(type => ( + + multiple + aria-label="Categories" + options={availableTypes} + value={selectedTypes} + onChange={(_: object, value: string[]) => setSelectedTypes(value)} + renderOption={(option, { selected }) => ( toggleSelection(type)} - className={classes.checkbox} + icon={icon} + checkedIcon={checkedIcon} + checked={selected} /> } - label={capitalize(type)} - key={type} + label={option} /> - ))} - + )} + size="small" + popupIcon={} + renderInput={params => } + /> ); }; From 4a6f6ec6dcb3146c8e89320d79cd0a60fa807abe Mon Sep 17 00:00:00 2001 From: victormorfin97 Date: Wed, 8 Sep 2021 09:56:19 -0600 Subject: [PATCH 2/5] capitalize options in dropdown Signed-off-by: victormorfin97 --- .../src/components/TemplateTypePicker/TemplateTypePicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.tsx b/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.tsx index a38f45c505..a8418cfded 100644 --- a/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.tsx +++ b/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.tsx @@ -69,7 +69,7 @@ export const TemplateTypePicker = () => { checked={selected} /> } - label={option} + label={capitalize(option)} /> )} size="small" From ebed8687c5a70b1ad0b15fed7005d22f87bbd938 Mon Sep 17 00:00:00 2001 From: victormorfin97 Date: Wed, 8 Sep 2021 10:52:02 -0600 Subject: [PATCH 3/5] update the tests Signed-off-by: victormorfin97 --- .../TemplateTypePicker/TemplateTypePicker.test.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.test.tsx b/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.test.tsx index 534b3b6ce9..3d0267ff1f 100644 --- a/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.test.tsx +++ b/plugins/scaffolder/src/components/TemplateTypePicker/TemplateTypePicker.test.tsx @@ -94,6 +94,7 @@ describe('', () => { , ); expect(rendered.getByText('Categories')).toBeInTheDocument(); + fireEvent.click(rendered.getByTestId('categories-picker-expand')); entities.forEach(entity => { expect( @@ -116,22 +117,27 @@ describe('', () => { , ); + fireEvent.click(rendered.getByTestId('categories-picker-expand')); expect(rendered.getByLabelText('Service')).not.toBeChecked(); expect(rendered.getByLabelText('Website')).not.toBeChecked(); fireEvent.click(rendered.getByLabelText('Service')); + fireEvent.click(rendered.getByTestId('categories-picker-expand')); expect(rendered.getByLabelText('Service')).toBeChecked(); expect(rendered.getByLabelText('Website')).not.toBeChecked(); fireEvent.click(rendered.getByLabelText('Website')); + fireEvent.click(rendered.getByTestId('categories-picker-expand')); expect(rendered.getByLabelText('Service')).toBeChecked(); expect(rendered.getByLabelText('Website')).toBeChecked(); fireEvent.click(rendered.getByLabelText('Service')); + fireEvent.click(rendered.getByTestId('categories-picker-expand')); expect(rendered.getByLabelText('Service')).not.toBeChecked(); expect(rendered.getByLabelText('Website')).toBeChecked(); fireEvent.click(rendered.getByLabelText('Website')); + fireEvent.click(rendered.getByTestId('categories-picker-expand')); expect(rendered.getByLabelText('Service')).not.toBeChecked(); expect(rendered.getByLabelText('Website')).not.toBeChecked(); }); From 70fdfbf36af07366ae77fbbc511f05ef88bedd11 Mon Sep 17 00:00:00 2001 From: victormorfin97 Date: Wed, 8 Sep 2021 10:55:41 -0600 Subject: [PATCH 4/5] Add the changeset Signed-off-by: victormorfin97 --- .changeset/poor-weeks-act.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/poor-weeks-act.md diff --git a/.changeset/poor-weeks-act.md b/.changeset/poor-weeks-act.md new file mode 100644 index 0000000000..a9a4e54695 --- /dev/null +++ b/.changeset/poor-weeks-act.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder': patch +--- + +Change the catagories filter to a dropdown component From 3afe111b23f171deb41067029fd41cabb8900ce6 Mon Sep 17 00:00:00 2001 From: victormorfin97 Date: Fri, 10 Sep 2021 09:37:38 -0600 Subject: [PATCH 5/5] Fix typo on changeset Signed-off-by: victormorfin97 --- .changeset/poor-weeks-act.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/poor-weeks-act.md b/.changeset/poor-weeks-act.md index a9a4e54695..152ce4bfc6 100644 --- a/.changeset/poor-weeks-act.md +++ b/.changeset/poor-weeks-act.md @@ -2,4 +2,4 @@ '@backstage/plugin-scaffolder': patch --- -Change the catagories filter to a dropdown component +Change the Categories filter to a dropdown component