[$250] Make the Workspace/Domain member list multi-select, update `All members` to `Members`

[JmillsExpensify]

We currently have a single-select list in the Members page of each Workspace and also for the Members page of each Domain.

Changes required:

• Update the list to multi-select
• Rename All members to simply Members

The driver is the upcoming release of more/custom admin roles, and the fact that it's already helpful to be able to select multiple role types within workspaces. We'll apply the same change to Domains, largely for consistency.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022054867457947499854
• Upwork Job ID: 2054867457947499854
• Last Price Increase: 2026-05-14
• Automatic offers:
• samranahm | Contributor | 111464907

Issue Owner

Current Issue Owner: @samranahm

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @shawnborton (NewFeature)

[melvin-bot]

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

[aswin-s]

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

Currently, the Workspace and Domain member lists display a role-filter dropdown with the label "All members", but this label will be confusing once custom admin roles are introduced. Users expect a simpler label "Members" that accurately represents the filter's function of viewing members by role type.

What is the current gap in the implementation?

The label "All members" is defined in the locale translation files at the key workspace.people.allMembers (lines 6046 and 9209 in src/languages/en.ts). This translation key is referenced in src/pages/workspace/WorkspaceMembersPage.tsx at lines 562 and 666 to populate the role-filter dropdown label. The feature request requires renaming this label to "Members" across all supported languages, starting with the English root translation file and then updating every other language file to match.

App/src/languages/en.ts

Line 6046 in cb5db71

allMembers: 'All members',

App/src/pages/workspace/WorkspaceMembersPage.tsx

Lines 562 to 666 in cb5db71

	{text: translate('workspace.people.allMembers'), value: WORKSPACE_MEMBER_FILTER_VALUES.ALL},
	{text: translate('workspace.people.admins'), value: WORKSPACE_MEMBER_FILTER_VALUES.ADMINS},
	{text: translate('workspace.people.approvers'), value: WORKSPACE_MEMBER_FILTER_VALUES.APPROVERS},
	];
	if (isControlPolicy(policy)) {
	roleFilterOptions.push({
	text: translate('workspace.people.auditors'),
	value: WORKSPACE_MEMBER_FILTER_VALUES.AUDITORS,
	});
	}
	const handleRoleFilterChange = (item: WorkspaceMemberFilterOption | undefined) => {
	setSelectedEmployees([]);
	if (!item || item.value === WORKSPACE_MEMBER_FILTER_VALUES.ALL) {
	setSelectedRoleFilter(null);
	return;
	}
	setSelectedRoleFilter(item);
	};
	const rolePreFilter = (member: MemberOption) => {
	if (!selectedRoleFilter) {
	return true;
	}
	const employee = policy?.employeeList?.[member.login];
	switch (selectedRoleFilter.value) {
	case WORKSPACE_MEMBER_FILTER_VALUES.ADMINS:
	return member.login === policy?.owner || employee?.role === CONST.POLICY.ROLE.ADMIN;
	case WORKSPACE_MEMBER_FILTER_VALUES.APPROVERS:
	return isPolicyApprover(policy, member.login);
	case WORKSPACE_MEMBER_FILTER_VALUES.AUDITORS:
	return employee?.role === CONST.POLICY.ROLE.AUDITOR;
	default:
	return true;
	}
	};
	const [inputValue, setInputValue, filteredData] = useSearchResults(data, filterMember, sortMembers, rolePreFilter);
	const handleSearchChange = (value: string) => {
	setSelectedEmployees([]);
	setInputValue(value);
	};
	useEffect(() => {
	if (!isFocused) {
	return;
	}
	if (isEmptyObject(invitedEmailsToAccountIDsDraft) || accountIDs === prevAccountIDs) {
	return;
	}
	const invitedEmails = Object.keys(invitedEmailsToAccountIDsDraft);
	selectionListRef.current?.scrollAndHighlightItem?.(invitedEmails);
	clearInviteDraft(route.params.policyID);
	}, [invitedEmailsToAccountIDsDraft, isFocused, accountIDs, prevAccountIDs, route.params.policyID]);
	const headerMessage = useMemo(() => {
	if (isOfflineAndNoMemberDataAvailable) {
	return translate('workspace.common.mustBeOnlineToViewMembers');
	}
	return !isLoading && isEmptyObject(policy?.employeeList) ? translate('workspace.common.memberNotFound') : '';
	}, [isLoading, policy?.employeeList, translate, isOfflineAndNoMemberDataAvailable]);
	const memberCount = data.filter((member) => member.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE).length;
	const hasGustoConnection = !!policy?.connections?.gusto;
	const shouldShowGustoSyncLink = isPolicyAdmin && hasGustoConnection;
	const isGustoSyncInProgress =
	hasGustoConnection && connectionSyncProgress?.connectionName === CONST.POLICY.CONNECTIONS.NAME.GUSTO && isConnectionInProgress(connectionSyncProgress, policy);
	const isPendingAddOrDelete =
	isOffline && data?.some((member) => member.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || member.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD);
	const shouldShowSearchBar = data.length > CONST.SEARCH_ITEM_LIMIT;
	const debouncedFilteredData = useDebouncedValue(filteredData, CONST.TIMING.SEARCH_OPTION_LIST_DEBOUNCE_TIME);
	const isFilteringMembers = filteredData?.length < debouncedFilteredData?.length;
	const displayedFilteredData = isFilteringMembers ? debouncedFilteredData : filteredData;
	const hasNoDisplayedMembers = displayedFilteredData.length === 0;
	const shouldShowRoleFilter = data.length > 0;
	const shouldShowRoleFilterEmptyState = shouldShowRoleFilter && !!selectedRoleFilter && inputValue.length === 0 && hasNoDisplayedMembers;
	const shouldShowEmptySearchMessage = !shouldShowRoleFilterEmptyState && hasNoDisplayedMembers;
	const noResultsMessage = translate('common.noResultsFoundMatching', inputValue);
	// SearchBar's built-in empty state also controls screen-reader announcements.
	// We render a custom no-results message in this page, so we announce it manually
	// to preserve the same accessibility behavior without using SearchBar's default layout.
	useDebouncedAccessibilityAnnouncement(noResultsMessage, shouldShowEmptySearchMessage, inputValue);
	const rolePopoverComponent = ({closeOverlay}: PopoverComponentProps) => (
	<SingleSelectPopup
	label={translate('common.role')}
	items={roleFilterOptions}
	value={selectedRoleFilter ?? roleFilterOptions.at(0)}
	closeOverlay={closeOverlay}
	onChange={handleRoleFilterChange}
	defaultValue={roleFilterOptions.at(0)?.value}
	itemHeight={variables.optionRowHeightCompact}
	/>
	);
	const roleFilterDropdown = shouldShowRoleFilter ? (
	<DropdownButton
	label={selectedRoleFilter?.text ?? translate('workspace.people.allMembers')}

What changes do you think we should make in order to implement this feature?

The primary change is to update the allMembers translation key value in src/languages/en.ts (line 6046) from 'All members' to 'Members'. This is the root translation file; all other language files must be updated in the same pass to keep translations consistent.

1. File: src/languages/en.ts
   Key path: workspace.people.allMembers (line 6046)
   Change:

   // before
   allMembers: 'All members',
   // after
   allMembers: 'Members',

2. File: src/languages/es.ts
   Key path: workspace.people.allMembers
   Change: Update the value from "Todos los miembros" (or equivalent) to "Miembros"

3. File: src/languages/de.ts
   Key path: workspace.people.allMembers
   Change: Update the value from "Alle Mitglieder" (or equivalent) to "Mitglieder"

4. File: src/languages/fr.ts
   Key path: workspace.people.allMembers
   Change: Update the value from "Tous les membres" (or equivalent) to "Membres"

5. File: src/languages/it.ts
   Key path: workspace.people.allMembers
   Change: Update the value from "Tutti i membri" (or equivalent) to "Membri"

6. File: src/languages/ja.ts
   Key path: workspace.people.allMembers
   Change: Update the value to the Japanese equivalent of "Members"

7. File: src/languages/nl.ts
   Key path: workspace.people.allMembers
   Change: Update the value from "Alle leden" (or equivalent) to "Leden"

8. File: src/languages/pl.ts
   Key path: workspace.people.allMembers
   Change: Update the value from "Wszyscy członkowie" (or equivalent) to "Członkowie"

9. File: src/languages/pt-BR.ts
   Key path: workspace.people.allMembers
   Change: Update the value from "Todos os membros" (or equivalent) to "Membros"

10. File: src/languages/zh-hans.ts
    Key path: workspace.people.allMembers
    Change: Update the value to the Simplified Chinese equivalent of "Members"

To confirm completeness, run grep -r "allMembers" src/languages/ before submitting the PR to verify no additional language files contain the key that have been missed.

What alternative approaches did you explore? (Optional)

N/A