Merge pull request #17090 from headphonejames/bug-17021-allow-select-with-query-string

allow modifying tags when query string is already provided on URL

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

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, V, K> = T extends V ? K : never;
 type KeysMatching<T, V> = {
@@ -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;

plugins/catalog-react/src/components/EntityTagPicker/EntityTagPicker.test.tsx

@@ -202,6 +202,34 @@ describe('<EntityTagPicker/>', () => {
       tags: new EntityTagFilter(['tag2']),
     });
   });
+
+  it('verify that user can select tags after query string has been set', async () => {
+    const updateFilters = jest.fn();
+    render(
+      <TestApiProvider apis={[[catalogApiRef, mockCatalogApiRef]]}>
+        <MockEntityListContextProvider
+          value={{
+            updateFilters,
+            queryParameters: { tags: ['tag1'] },
+          }}
+        >
+          <EntityTagPicker />
+        </MockEntityListContextProvider>
+      </TestApiProvider>,
+    );
+    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 = {