From 81bee24c5de313904783dbaf567156380f1a8f46 Mon Sep 17 00:00:00 2001 From: Frederic Kayser Date: Thu, 30 Mar 2023 19:27:11 +0200 Subject: [PATCH 1/5] catalog: make text of picker clickable Signed-off-by: Frederic Kayser --- .changeset/forty-days-tell.md | 5 +++++ .../EntityLifecyclePicker.tsx | 19 ++++++++----------- .../EntityProcessingStatusPicker.tsx | 19 ++++++++----------- 3 files changed, 21 insertions(+), 22 deletions(-) create mode 100644 .changeset/forty-days-tell.md diff --git a/.changeset/forty-days-tell.md b/.changeset/forty-days-tell.md new file mode 100644 index 0000000000..98aed740b8 --- /dev/null +++ b/.changeset/forty-days-tell.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-react': patch +--- + +Fixed bug in catalog filters where you could not click on the text to select a value. diff --git a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx index 29002564ca..5d1ea0a96c 100644 --- a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx +++ b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx @@ -18,7 +18,6 @@ import { Entity } from '@backstage/catalog-model'; import { Box, Checkbox, - FormControlLabel, makeStyles, TextField, Typography, @@ -112,16 +111,14 @@ export const EntityLifecyclePicker = (props: { initialFilter?: string[] }) => { setSelectedLifecycles(value) } renderOption={(option, { selected }) => ( - - } - label={option} - /> +
+ + {option} +
)} size="small" popupIcon={} diff --git a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx index db48534bc0..234e86f2fd 100644 --- a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx +++ b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx @@ -18,7 +18,6 @@ import { EntityErrorFilter, EntityOrphanFilter } from '../../filters'; import { Box, Checkbox, - FormControlLabel, makeStyles, TextField, Typography, @@ -83,16 +82,14 @@ export const EntityProcessingStatusPicker = () => { errorChange(value.includes('Has Error')); }} renderOption={(option, { selected }) => ( - - } - label={option} - /> +
+ + {option} +
)} size="small" popupIcon={ From 193aef4c3141c281f75baed1f8c03b5c70eb27db Mon Sep 17 00:00:00 2001 From: Frederic Kayser Date: Thu, 30 Mar 2023 20:55:17 +0200 Subject: [PATCH 2/5] fixed tests Signed-off-by: Frederic Kayser --- .../EntityLifecyclePicker/EntityLifecyclePicker.test.tsx | 8 ++++++-- .../EntityLifecyclePicker/EntityLifecyclePicker.tsx | 3 ++- .../EntityProcessingStatusPicker.test.tsx | 5 ++++- .../EntityProcessingStatusPicker.tsx | 2 +- 4 files changed, 13 insertions(+), 5 deletions(-) diff --git a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx index 3ee610ddaf..c67f5dcddb 100644 --- a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx @@ -154,9 +154,13 @@ describe('', () => { lifecycles: new EntityLifecycleFilter(['production']), }); fireEvent.click(screen.getByTestId('lifecycle-picker-expand')); - expect(screen.getByLabelText('production')).toBeChecked(); + expect( + screen + .getByTestId('lifecycle-checkbox-production') + .querySelector('input[type="checkbox"]'), + ).toBeChecked(); - fireEvent.click(screen.getByLabelText('production')); + fireEvent.click(screen.getByTestId('lifecycle-checkbox-label-production')); expect(updateFilters).toHaveBeenLastCalledWith({ lifecycles: undefined, }); diff --git a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx index 5d1ea0a96c..b1fba50ae8 100644 --- a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx +++ b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx @@ -111,11 +111,12 @@ export const EntityLifecyclePicker = (props: { initialFilter?: string[] }) => { setSelectedLifecycles(value) } renderOption={(option, { selected }) => ( -
+
{option}
diff --git a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.test.tsx b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.test.tsx index 00d36e5e13..3970942ee1 100644 --- a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.test.tsx @@ -123,7 +123,10 @@ describe('', () => { ); fireEvent.click(screen.getByTestId('processing-status-picker-expand')); - fireEvent.click(screen.getByText('Is Orphan')); + + fireEvent.click( + screen.getByTestId('processing-status-checkbox-label-Is Orphan'), + ); expect(updateFilters).toHaveBeenCalledWith({ orphan: undefined, }); diff --git a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx index 234e86f2fd..237e2d9544 100644 --- a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx +++ b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx @@ -82,7 +82,7 @@ export const EntityProcessingStatusPicker = () => { errorChange(value.includes('Has Error')); }} renderOption={(option, { selected }) => ( -
+
Date: Fri, 31 Mar 2023 18:47:28 +0200 Subject: [PATCH 3/5] use FormControlLabel and prevent defaults Signed-off-by: Frederic Kayser --- .../EntityLifecyclePicker.test.tsx | 8 ++----- .../EntityLifecyclePicker.tsx | 21 +++++++++++-------- .../EntityProcessingStatusPicker.test.tsx | 5 +---- .../EntityProcessingStatusPicker.tsx | 20 +++++++++++------- 4 files changed, 27 insertions(+), 27 deletions(-) diff --git a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx index c67f5dcddb..3ee610ddaf 100644 --- a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.test.tsx @@ -154,13 +154,9 @@ describe('', () => { lifecycles: new EntityLifecycleFilter(['production']), }); fireEvent.click(screen.getByTestId('lifecycle-picker-expand')); - expect( - screen - .getByTestId('lifecycle-checkbox-production') - .querySelector('input[type="checkbox"]'), - ).toBeChecked(); + expect(screen.getByLabelText('production')).toBeChecked(); - fireEvent.click(screen.getByTestId('lifecycle-checkbox-label-production')); + fireEvent.click(screen.getByLabelText('production')); expect(updateFilters).toHaveBeenLastCalledWith({ lifecycles: undefined, }); diff --git a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx index b1fba50ae8..dd107b2673 100644 --- a/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx +++ b/plugins/catalog-react/src/components/EntityLifecyclePicker/EntityLifecyclePicker.tsx @@ -18,6 +18,7 @@ import { Entity } from '@backstage/catalog-model'; import { Box, Checkbox, + FormControlLabel, makeStyles, TextField, Typography, @@ -111,15 +112,17 @@ export const EntityLifecyclePicker = (props: { initialFilter?: string[] }) => { setSelectedLifecycles(value) } renderOption={(option, { selected }) => ( -
- - {option} -
+ + } + onClick={event => event.preventDefault()} + label={option} + /> )} size="small" popupIcon={} diff --git a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.test.tsx b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.test.tsx index 3970942ee1..00d36e5e13 100644 --- a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.test.tsx @@ -123,10 +123,7 @@ describe('', () => { ); fireEvent.click(screen.getByTestId('processing-status-picker-expand')); - - fireEvent.click( - screen.getByTestId('processing-status-checkbox-label-Is Orphan'), - ); + fireEvent.click(screen.getByText('Is Orphan')); expect(updateFilters).toHaveBeenCalledWith({ orphan: undefined, }); diff --git a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx index 237e2d9544..01a6e0188d 100644 --- a/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx +++ b/plugins/catalog-react/src/components/EntityProcessingStatusPicker/EntityProcessingStatusPicker.tsx @@ -18,6 +18,7 @@ import { EntityErrorFilter, EntityOrphanFilter } from '../../filters'; import { Box, Checkbox, + FormControlLabel, makeStyles, TextField, Typography, @@ -82,14 +83,17 @@ export const EntityProcessingStatusPicker = () => { errorChange(value.includes('Has Error')); }} renderOption={(option, { selected }) => ( -
- - {option} -
+ + } + onClick={event => event.preventDefault()} + label={option} + /> )} size="small" popupIcon={ From 3e8c94b4e2472b0a8fb563487b3b54b807e2156b Mon Sep 17 00:00:00 2001 From: Frederic Kayser Date: Fri, 31 Mar 2023 19:08:17 +0200 Subject: [PATCH 4/5] added property to EntityOwnerPicker Signed-off-by: Frederic Kayser --- .../src/components/EntityOwnerPicker/EntityOwnerPicker.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx index c8a6c64dd6..185de3535a 100644 --- a/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx +++ b/plugins/catalog-react/src/components/EntityOwnerPicker/EntityOwnerPicker.tsx @@ -121,6 +121,7 @@ export const EntityOwnerPicker = () => { checked={selected} /> } + onClick={event => event.preventDefault()} label={option} /> )} From f26829e1529449479cc7de23fd77c0cda0f0d03d Mon Sep 17 00:00:00 2001 From: Frederic Kayser Date: Fri, 31 Mar 2023 19:10:16 +0200 Subject: [PATCH 5/5] added property to EntityAutocompletePickerOption Signed-off-by: Frederic Kayser --- .../EntityAutocompletePicker/EntityAutocompletePickerOption.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePickerOption.tsx b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePickerOption.tsx index 51b57257a9..8c218a352c 100644 --- a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePickerOption.tsx +++ b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePickerOption.tsx @@ -40,6 +40,7 @@ export const EntityAutocompletePickerOption = memo((props: Props) => { } label={label} + onClick={event => event.preventDefault()} /> ); });