use kindParameter from filters instead of queryParameters

Signed-off-by: Rafael Sanchez <achosanchez@gmail.com>

.changeset/hip-eyes-mate.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+fixed bug in `UserListPicker` by getting the `kindParamater` from the `filters` rather than from the `queryParameters`

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

@@ -45,6 +45,8 @@ import {
 } from '@backstage/core-plugin-api';
 import { MockStarredEntitiesApi, starredEntitiesApiRef } from '../../apis';
 import { DefaultEntityFilters } from '../../hooks';
+import { NewEntityListContext } from '../../hooks/useEntityListProvider';
+import { createVersionedValueMap } from '@backstage/version-bridge';
 
 const mockUser: UserEntity = {
   apiVersion: 'backstage.io/v1alpha1',
@@ -694,4 +696,73 @@ describe('<UserListPicker />', () => {
       });
     });
   });
+  describe('when initialFilter is not provided', () => {
+    it('updates filter options automatically when the kind changes', async () => {
+      let setFilters: (f: any) => void = () => {};
+
+      const TestProvider = ({ children }: { children?: React.ReactNode }) => {
+        const [filtersState, _setFiltersState] = require('react').useState({
+          kind: new EntityKindFilter('component', 'Component'),
+        } as any);
+        setFilters = _setFiltersState;
+
+        const updateFilters = (update: any) =>
+          _setFiltersState((prev: any) =>
+            typeof update === 'function' ? update(prev) : { ...prev, ...update },
+          );
+
+        const value = {
+          entities: [],
+          backendEntities: [],
+          updateFilters,
+          filters: filtersState,
+          loading: false,
+          queryParameters: {},
+          error: undefined,
+          totalItems: 0,
+          limit: 20,
+          offset: 0,
+          setLimit: () => {},
+          setOffset: () => {},
+          paginationMode: 'none',
+        } as any;
+
+        return (
+          <NewEntityListContext.Provider
+            value={createVersionedValueMap({ 1: value })}
+          >
+            {children}
+          </NewEntityListContext.Provider>
+        );
+      };
+
+      await renderInTestApp(
+        <ApiProvider apis={apis}>
+          <TestProvider>
+            <UserListPicker />
+          </TestProvider>
+        </ApiProvider>,
+      );
+
+      await waitFor(() =>
+        expect(mockIdentityApi.getBackstageIdentity).toHaveBeenCalled(),
+      );
+
+      await waitFor(() =>
+        expect(
+          screen.getAllByRole('menuitem').map(({ textContent }) => textContent),
+        ).toEqual(['Owned 3', 'Starred 2', 'All 10']),
+      );
+
+      require('react').act(() =>
+        setFilters({ kind: new EntityKindFilter('user', 'User') } as any),
+      );
+
+      await waitFor(() =>
+        expect(
+          screen.getAllByRole('menuitem').map(({ textContent }) => textContent),
+        ).toEqual(['Starred 2', 'All 10']),
+      );
+    });
+  });
 });

plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx

@@ -138,8 +138,9 @@ export const UserListPicker = (props: UserListPickerProps) => {
   const {
     filters,
     updateFilters,
-    queryParameters: { kind: kindParameter, user: userParameter },
+    queryParameters: { user: userParameter },
   } = useEntityList();
+  const kindParameter = filters.kind?.value?.toLowerCase();
 
   // Remove group items that aren't in availableFilters and exclude
   // any now-empty groups.