diff --git a/apps/console/src/pages/iam/organizations/people/_components/PeopleList.tsx b/apps/console/src/pages/iam/organizations/people/_components/PeopleList.tsx index ca64a7dc9..573f665c8 100644 --- a/apps/console/src/pages/iam/organizations/people/_components/PeopleList.tsx +++ b/apps/console/src/pages/iam/organizations/people/_components/PeopleList.tsx @@ -20,7 +20,10 @@ import { getAssignableRoles, getMembershipRoles, peopleRoles } from "@probo/helpers"; import { - Checkbox, + Button, + Dropdown, + DropdownCheckboxItem, + IconChevronDown, IconMagnifyingGlass, Input, Option, @@ -192,15 +195,21 @@ export function PeopleList(props: { debouncedRefetchQuery(value); }; - const handleStateFilterToggle = (state: ProfileState) => { + const handleStateFilterChange = (state: ProfileState, checked: boolean) => { debouncedRefetchQuery.cancel(); - const newStates = statesFilter.includes(state) - ? statesFilter.filter(s => s !== state) - : [...statesFilter, state]; + const newStates = checked + ? [...statesFilter, state] + : statesFilter.filter(s => s !== state); setStatesFilter(newStates); refetchPeople({ states: newStates }); }; + const statusFilterLabel = statesFilter.length === 0 + ? t("peopleList.filters.allStatuses") + : statesFilter + .map(state => t(`peopleList.filters.${state.toLowerCase()}`)) + .join(", "); + const handleRoleFilterChange = (value: string) => { debouncedRefetchQuery.cancel(); const newRole = value === "ALL" ? null : (value as MembershipRole); @@ -234,18 +243,24 @@ export function PeopleList(props: { value={queryFilter ?? ""} onValueChange={handleQueryFilterChange} /> -
- {t("peopleList.filters.status")} + + {statusFilterLabel} + + + )} + > {PROFILE_STATES.map(state => ( - + ))} -
+