diff --git a/.changeset/smart-crabs-dream.md b/.changeset/smart-crabs-dream.md new file mode 100644 index 0000000000..3699021482 --- /dev/null +++ b/.changeset/smart-crabs-dream.md @@ -0,0 +1,5 @@ +--- +'@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. diff --git a/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx b/plugins/catalog-react/src/components/EntityAutocompletePicker/EntityAutocompletePicker.tsx index 15e44baf20..b853c2d3fc 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; 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 = {