diff --git a/backstage.json b/backstage.json new file mode 100644 index 0000000000..77e9232b75 --- /dev/null +++ b/backstage.json @@ -0,0 +1,3 @@ +{ + "version": "0.4.5" +} diff --git a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx index a36f5f78b8..867c5230d4 100644 --- a/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx +++ b/plugins/catalog-react/src/components/UserListPicker/UserListPicker.tsx @@ -122,16 +122,24 @@ export const UserListPicker = ({ const classes = useStyles(); const configApi = useApi(configApiRef); const orgName = configApi.getOptionalString('organization.name') ?? 'Company'; - const [filterGroups, setFilterGroups] = useState([]); - + const userAndGroupFilterIds = ['starred', 'all']; const { filters, updateFilters, backendEntities, queryParameters } = useEntityListProvider(); + // Remove group items that aren't in availableFilters and exclude + // any now-empty groups. + const filterGroups = getFilterGroups(orgName) + .map(filterGroup => ({ + ...filterGroup, + items: filterGroup.items.filter(({ id }) => + ['group', 'user'].some(kind => kind === queryParameters.kind) + ? userAndGroupFilterIds.includes(id) + : !availableFilters || availableFilters.includes(id), + ), + })) + .filter(({ items }) => !!items.length); const { isStarredEntity } = useStarredEntities(); const { isOwnedEntity } = useEntityOwnership(); - const [selectedUserFilter, setSelectedUserFilter] = useState( - [queryParameters.user].flat()[0] ?? initialFilter, - ); // Static filters; used for generating counts of potentially unselected kinds const ownedFilter = useMemo( @@ -143,18 +151,6 @@ export const UserListPicker = ({ [isOwnedEntity, isStarredEntity], ); - useEffect(() => { - updateFilters({ - user: selectedUserFilter - ? new UserListFilter( - selectedUserFilter as UserListFilterKind, - isOwnedEntity, - isStarredEntity, - ) - : undefined, - }); - }, [selectedUserFilter, isOwnedEntity, isStarredEntity, updateFilters]); - // To show proper counts for each section, apply all other frontend filters _except_ the user // filter that's controlled by this picker. const [entitiesWithoutUserFilter, setEntitiesWithoutUserFilter] = @@ -170,6 +166,24 @@ export const UserListPicker = ({ ownedFilter.filterEntity(entity), ).length; + const [selectedUserFilter, setSelectedUserFilter] = useState( + totalOwnedUserEntities < 1 + ? 'all' + : [queryParameters.user].flat()[0] ?? initialFilter, + ); + + useEffect(() => { + updateFilters({ + user: selectedUserFilter + ? new UserListFilter( + selectedUserFilter as UserListFilterKind, + isOwnedEntity, + isStarredEntity, + ) + : undefined, + }); + }, [selectedUserFilter, isOwnedEntity, isStarredEntity, updateFilters]); + function getFilterCount(id: UserListFilterKind) { switch (id) { case 'owned': @@ -183,39 +197,6 @@ export const UserListPicker = ({ } } - useEffect(() => { - if (totalOwnedUserEntities < 1) { - setSelectedUserFilter('all'); - } - }, [totalOwnedUserEntities]); - - const removeOwnedFromItemList = (itemList: ButtonGroup[]) => { - const index = itemList[0].items.map(item => item.id).indexOf('owned'); - itemList[0].items.splice(index, 1); - return itemList; - }; - - useEffect(() => { - // Remove group items that aren't in availableFilters and exclude - // any now-empty groups. - const initialFilterGroup = getFilterGroups(orgName) - .map(filterGroup => ({ - ...filterGroup, - items: filterGroup.items.filter( - ({ id }) => !availableFilters || availableFilters.includes(id), - ), - })) - .filter(({ items }) => !!items.length); - // TODO: avoid hardcoding kinds here - if (['group', 'user'].some(kind => kind === queryParameters.kind)) { - setFilterGroups(removeOwnedFromItemList(initialFilterGroup)); - } - return () => - setFilterGroups(prevState => - prevState !== initialFilterGroup ? initialFilterGroup : prevState, - ); - }, [queryParameters, availableFilters, orgName]); - return ( {filterGroups.map(group => (