From 42452f005dccd3bf6530ac90d168c5dbf3d98df9 Mon Sep 17 00:00:00 2001 From: headphonejames Date: Thu, 23 Mar 2023 19:14:28 -0700 Subject: [PATCH 01/10] Enable selecting items in the autocomplete picker component when a values in the query string are already provided in the URL. Fixes https://github.com/backstage/backstage/issues/17021 Signed-off-by: headphonejames --- .../EntityAutocompletePicker/EntityAutocompletePicker.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx index b81d681e6d..20294fa7f1 100644 --- a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx +++ b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx @@ -28,7 +28,6 @@ import { useEntityList, } from '../../hooks/useEntityListProvider'; import { EntityFilter } from '../../types'; -import _ from 'lodash'; type KeysMatchingCondition = T extends V ? K : never; type KeysMatching = { @@ -97,13 +96,10 @@ export function EntityAutocompletePicker< // Set selected options on query parameter updates; this happens at initial page load and from // external updates to the page location useEffect(() => { - if ( - queryParameters.length && - !_.isEqual(selectedOptions, queryParameters) - ) { + if (queryParameters.length) { setSelectedOptions(queryParameters); } - }, [selectedOptions, queryParameters]); + }, [queryParameters]); const availableOptions = Object.keys(availableValues ?? {}); const shouldAddFilter = selectedOptions.length && availableOptions.length; From 333f34386d6111a1d3c8853c19e4cbd09e847c05 Mon Sep 17 00:00:00 2001 From: headphonejames Date: Thu, 23 Mar 2023 19:16:56 -0700 Subject: [PATCH 02/10] Remove lodash library Signed-off-by: headphonejames --- plugins/catalog-react/package.json | 1 - yarn.lock | 1 - 2 files changed, 2 deletions(-) diff --git a/plugins/catalog-react/package.json b/plugins/catalog-react/package.json index 166da09118..60212ecd5e 100644 --- a/plugins/catalog-react/package.json +++ b/plugins/catalog-react/package.json @@ -62,7 +62,6 @@ "@material-ui/lab": "4.0.0-alpha.61", "classnames": "^2.2.6", "jwt-decode": "^3.1.0", - "lodash": "^4.17.21", "material-ui-popup-state": "^1.9.3", "qs": "^6.9.4", "react-use": "^17.2.4", diff --git a/yarn.lock b/yarn.lock index 4d2b33b122..fc8d9824a1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5509,7 +5509,6 @@ __metadata: classnames: ^2.2.6 cross-fetch: ^3.1.5 jwt-decode: ^3.1.0 - lodash: ^4.17.21 material-ui-popup-state: ^1.9.3 qs: ^6.9.4 react-test-renderer: ^16.13.1 From 135b3d9a9c8226d021f7355b275f647fa1053e59 Mon Sep 17 00:00:00 2001 From: headphonejames Date: Fri, 24 Mar 2023 11:19:22 -0700 Subject: [PATCH 03/10] add test for removing tags after query string is provider Signed-off-by: headphonejames --- .../EntityTagPicker/EntityTagPicker.test.tsx | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx index c70217f3a4..bfaa689190 100644 --- a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx @@ -202,6 +202,34 @@ describe('', () => { tags: new EntityTagFilter(['tag2']), }); }); + + it('verify that user can select tags after query string has been set', async () => { + const updateFilters = jest.fn(); + render( + + + + + , + ); + await waitFor(() => + expect(updateFilters).toHaveBeenLastCalledWith({ + tags: new EntityTagFilter(['tag1']), + }), + ); + fireEvent.click(screen.getByTestId('tags-picker-expand')); + fireEvent.click(screen.getByLabelText('tag2')); + expect(screen.getByLabelText('tag2')).toBeChecked(); + expect(updateFilters).toHaveBeenLastCalledWith({ + tags: new EntityTagFilter(['tag1', 'tag2']), + }); + }); + it('removes tags from filters if there are none available', async () => { const updateFilters = jest.fn(); const mockCatalogApiRefNoTags = { From d1f5324dff7089ad8325b2c3e8e720b920ff94eb Mon Sep 17 00:00:00 2001 From: headphonejames Date: Fri, 24 Mar 2023 11:29:53 -0700 Subject: [PATCH 04/10] add changeset Signed-off-by: headphonejames --- .changeset/smart-crabs-dream.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/smart-crabs-dream.md diff --git a/.changeset/smart-crabs-dream.md b/.changeset/smart-crabs-dream.md new file mode 100644 index 0000000000..a08747a6e3 --- /dev/null +++ b/.changeset/smart-crabs-dream.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-react': minor +--- + +Reverted the check if selectedOptions is different than queryParameters before invoking setSelectedOptions. This was preventing updating list items when a query string was already present in the URL when loading the page. From f95a7e2c5d4da5fa69f339da9088432e1c04b68c Mon Sep 17 00:00:00 2001 From: headphonejames Date: Fri, 24 Mar 2023 13:21:17 -0700 Subject: [PATCH 05/10] add changeset Signed-off-by: headphonejames --- .changeset/smart-crabs-dream.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/smart-crabs-dream.md b/.changeset/smart-crabs-dream.md index a08747a6e3..d93c865a23 100644 --- a/.changeset/smart-crabs-dream.md +++ b/.changeset/smart-crabs-dream.md @@ -2,4 +2,4 @@ '@backstage/plugin-catalog-react': minor --- -Reverted the check if selectedOptions is different than queryParameters before invoking setSelectedOptions. This was preventing updating list items when a query string was already present in the URL when loading the page. +Reverted the check if the selected options list is different than the query parameters list before invoking setSelectedOptions method. This was preventing updating list items when a query string was already present in the URL when loading the page. From af12902763ca2844b0bc85a5b908ad2944564755 Mon Sep 17 00:00:00 2001 From: headphonejames Date: Fri, 24 Mar 2023 13:55:55 -0700 Subject: [PATCH 06/10] return lodash library Signed-off-by: headphonejames --- plugins/catalog-react/package.json | 1 + yarn.lock | 1 + 2 files changed, 2 insertions(+) diff --git a/plugins/catalog-react/package.json b/plugins/catalog-react/package.json index 60212ecd5e..166da09118 100644 --- a/plugins/catalog-react/package.json +++ b/plugins/catalog-react/package.json @@ -62,6 +62,7 @@ "@material-ui/lab": "4.0.0-alpha.61", "classnames": "^2.2.6", "jwt-decode": "^3.1.0", + "lodash": "^4.17.21", "material-ui-popup-state": "^1.9.3", "qs": "^6.9.4", "react-use": "^17.2.4", diff --git a/yarn.lock b/yarn.lock index fc8d9824a1..4d2b33b122 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5509,6 +5509,7 @@ __metadata: classnames: ^2.2.6 cross-fetch: ^3.1.5 jwt-decode: ^3.1.0 + lodash: ^4.17.21 material-ui-popup-state: ^1.9.3 qs: ^6.9.4 react-test-renderer: ^16.13.1 From e4badfd959a9e292505fe8437c17f83c4a5c0d78 Mon Sep 17 00:00:00 2001 From: headphonejames Date: Fri, 24 Mar 2023 14:57:43 -0700 Subject: [PATCH 07/10] re-execute checkin tests Signed-off-by: headphonejames --- .../src/components/EntityTagPicker/EntityTagPicker.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx index bfaa689190..5ee8c481e2 100644 --- a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx @@ -222,6 +222,7 @@ describe('', () => { tags: new EntityTagFilter(['tag1']), }), ); + fireEvent.click(screen.getByTestId('tags-picker-expand')); fireEvent.click(screen.getByLabelText('tag2')); expect(screen.getByLabelText('tag2')).toBeChecked(); From 2190368b52fe9f2b47987255f5c0d60c4764cd06 Mon Sep 17 00:00:00 2001 From: headphonejames Date: Sat, 25 Mar 2023 10:49:07 -0700 Subject: [PATCH 08/10] remove react effect for less potential re-rendering Signed-off-by: headphonejames --- .../EntityAutocompletePicker.tsx | 11 ++++++----- .../EntityTagPicker/EntityTagPicker.test.tsx | 1 - 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx index 20294fa7f1..00114a29fc 100644 --- a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx +++ b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx @@ -95,11 +95,12 @@ export function EntityAutocompletePicker< // Set selected options on query parameter updates; this happens at initial page load and from // external updates to the page location - useEffect(() => { - if (queryParameters.length) { - setSelectedOptions(queryParameters); - } - }, [queryParameters]); + const [prevQueryParameters, setQueryParameter] = useState(queryParameters); + // if the query parameter has changed, update the selected options + if (queryParameters !== prevQueryParameters) { + setSelectedOptions(queryParameters); + setQueryParameter(queryParameters); + } const availableOptions = Object.keys(availableValues ?? {}); const shouldAddFilter = selectedOptions.length && availableOptions.length; diff --git a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx index 5ee8c481e2..bfaa689190 100644 --- a/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx +++ b/plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx @@ -222,7 +222,6 @@ describe('', () => { tags: new EntityTagFilter(['tag1']), }), ); - fireEvent.click(screen.getByTestId('tags-picker-expand')); fireEvent.click(screen.getByLabelText('tag2')); expect(screen.getByLabelText('tag2')).toBeChecked(); From 8c7d59c923b29a0fdb468810b95bfcc840d19bc5 Mon Sep 17 00:00:00 2001 From: headphonejames Date: Mon, 10 Apr 2023 09:22:09 -0700 Subject: [PATCH 09/10] remove the selectedOptions check from the useEffect hook to allow updates to options when options are included in the query string. Signed-off-by: headphonejames --- .../EntityAutocompletePicker.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx index 00114a29fc..20294fa7f1 100644 --- a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx +++ b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx @@ -95,12 +95,11 @@ export function EntityAutocompletePicker< // Set selected options on query parameter updates; this happens at initial page load and from // external updates to the page location - const [prevQueryParameters, setQueryParameter] = useState(queryParameters); - // if the query parameter has changed, update the selected options - if (queryParameters !== prevQueryParameters) { - setSelectedOptions(queryParameters); - setQueryParameter(queryParameters); - } + useEffect(() => { + if (queryParameters.length) { + setSelectedOptions(queryParameters); + } + }, [queryParameters]); const availableOptions = Object.keys(availableValues ?? {}); const shouldAddFilter = selectedOptions.length && availableOptions.length; From 0ba73cdec96f9a0fdc9fe614f70a2efbb5a18c09 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Tue, 11 Apr 2023 14:24:15 +0200 Subject: [PATCH 10/10] Update .changeset/smart-crabs-dream.md Signed-off-by: Patrik Oldsberg --- .changeset/smart-crabs-dream.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/smart-crabs-dream.md b/.changeset/smart-crabs-dream.md index d93c865a23..3699021482 100644 --- a/.changeset/smart-crabs-dream.md +++ b/.changeset/smart-crabs-dream.md @@ -1,5 +1,5 @@ --- -'@backstage/plugin-catalog-react': minor +'@backstage/plugin-catalog-react': patch --- -Reverted the check if the selected options list is different than the query parameters list before invoking setSelectedOptions method. This was preventing updating list items when a query string was already present in the URL when loading the page. +Reverted the check if the selected options list is different than the query parameters list before invoking `setSelectedOptions` method. This was preventing updating list items when a query string was already present in the URL when loading the page.