diff --git a/.changeset/hip-eyes-mate.md b/.changeset/hip-eyes-mate.md new file mode 100644 index 0000000000..3527193d0b --- /dev/null +++ b/.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` diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.test.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.test.tsx index 2e3ddff882..5f629bda13 100644 --- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.test.tsx +++ b/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('', () => { }); }); }); + 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 ( + + {children} + + ); + }; + + await renderInTestApp( + + + + + , + ); + + 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']), + ); + }); + }); }); diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx index dc4173fd5f..245f82122c 100644 --- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx +++ b/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.