[$250] [CFI] Add member filter to Workspace Members

[trjExpensify]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Issue reported by: @clarajones-expensify
Slack conversation (hyperlinked to channel name): #product

Action Performed:

1. Create a Control workspace
2. Add a bunch of members, give some of them admin and auditor roles.
3. Set up a couple of different approval workflows.

Expected Result:

This is a feature request

1. Add a role filter selector to the Members page in the workspace settings.

When search box is not present:

When search box is present:

Note: Follow the existing selector found on the domain members page.

2. The default selection is "All members"
3. The available options are as follows:

• Control workspaces:

  • All members
  • Admins
  • Approvers
  • Auditors

• Collect workspaces:

  • All members
  • Admins
  • Approvers

Note: Collect workspaces don't show the Auditors option in the menu because that role is only available on Control workspaces.

4. If a selection is made and none of the members match the current filters, show an empty state with the same illustration from the domain members page, but with the below copy change:

No members match this filter
Invite a member or change the filter above.

Actual Result:

We don't support this member filtering on NewDot currently.

Workaround:

Yes, go back to Classic where you can filter the members table.

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

In-line above.

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @Uzaifm127

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022044064364698550207
• Upwork Job ID: 2044064364698550207
• Last Price Increase: 2026-04-14
• Automatic offers:
• FitseTLT | Reviewer | 111147948

[melvin-bot]

Current assignee @shawnborton is eligible for the NewFeature assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @FitseTLT (External)

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022044064364698550207

[Ltbltbltbltb]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The Workspace Members page lacks a role filter selector, so admins cannot quickly narrow the member list by role (Admin, Approver, Auditor) and must scroll through potentially hundreds of entries to find members with a specific role.

What is the root cause of that problem?

The WorkspaceMembersPage component renders the full member list without any role-based filtering capability. The domain members page already implements this pattern (with a role selector chip), but the workspace members page was never updated to match. The fix is entirely self-contained within the workspace members page and its supporting utilities — no new Onyx keys or cross-file state are needed.

What changes do you think we should make in order to solve the problem?

The approach mirrors the existing domain members filter. The domain members page uses a SelectionList with a filter chip row above it — we replicate that pattern in the WorkspaceMembersPage.

Step 1 — Add local filter state

In the WorkspaceMembersPage component, add a useState for the selected role filter:

const [selectedRole, setSelectedRole] = useState<string>(CONST.POLICY.ROLE.ALL);

Step 2 — Derive filter options from workspace type

Use PolicyUtils.isControlPolicy(policy) (already available) to conditionally include the Auditor option:

const roleFilterOptions = useMemo(() => {
    const options = [
        {value: CONST.POLICY.ROLE.ALL, label: translate('common.all')},
        {value: CONST.POLICY.ROLE.ADMIN, label: translate('common.admin')},
        {value: CONST.POLICY.ROLE.USER, label: translate('workspace.common.approver')},
    ];
    if (PolicyUtils.isControlPolicy(policy)) {
        options.push({value: CONST.POLICY.ROLE.AUDITOR, label: translate('workspace.common.auditor')});
    }
    return options;
}, [policy, translate]);

Step 3 — Filter the member list

The existing filteredAndSortedMembers derivation (which already handles the search query) gains a second filter pass:

const filteredByRole = useMemo(() => {
    if (selectedRole === CONST.POLICY.ROLE.ALL) return filteredAndSortedMembers;
    return filteredAndSortedMembers.filter((member) => member.role === selectedRole);
}, [filteredAndSortedMembers, selectedRole]);

Step 4 — Render the filter chip row

Place the chip row between the search bar and the SelectionList, matching the domain members layout:

<ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.ph5}>
    {roleFilterOptions.map((option) => (
        <FilterChip
            key={option.value}
            label={option.label}
            isActive={selectedRole === option.value}
            onPress={() => setSelectedRole(option.value)}
        />
    ))}
</ScrollView>

Step 5 — Empty state when no members match

Pass filteredByRole to the SelectionList. When the array is empty and selectedRole !== CONST.POLICY.ROLE.ALL, render the empty state (reusing the same illustration from the domain members page) with the copy:

• Title: No members match this filter
• Subtitle: Invite a member or change the filter above.

{filteredByRole.length === 0 && selectedRole !== CONST.POLICY.ROLE.ALL && (
    <EmptyStateComponent
        illustration={Illustrations.EmptyState}
        title={translate('workspace.members.emptyFilterTitle')}
        subtitle={translate('workspace.members.emptyFilterSubtitle')}
    />
)}

Step 6 — Reset filter on search

When the user types in the search box, reset the role filter to avoid a confusing empty state where both constraints eliminate all results:

const handleSearchChange = (query: string) => {
    setSearchValue(query);
    if (query) setSelectedRole(CONST.POLICY.ROLE.ALL);
};

Files changed: WorkspaceMembersPage component (single file), plus two new translation keys in en.ts (workspace.members.emptyFilterTitle and workspace.members.emptyFilterSubtitle). No new Onyx keys, no new screens, no routing changes.

Contributor Details

Field	Value
Contributor email	lucastrba@gmail.com
Upwork Profile	https://www.upwork.com/freelancers/~01d016059c6701ebaa

[trasnake87]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.

[trasnake87]

Contributor details
Your Expensify account email: trasnake87@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~010f770315ab181656