diff --git a/src/components/ApprovalWorkflowSection.tsx b/src/components/ApprovalWorkflowSection.tsx index 17cde0306c50..615f039cf533 100644 --- a/src/components/ApprovalWorkflowSection.tsx +++ b/src/components/ApprovalWorkflowSection.tsx @@ -1,9 +1,10 @@ -import React, {useCallback} from 'react'; +import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; +import * as OptionsListUtils from '@libs/OptionsListUtils'; import type ApprovalWorkflow from '@src/types/onyx/ApprovalWorkflow'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; @@ -31,6 +32,16 @@ function ApprovalWorkflowSection({approvalWorkflow, onPress}: ApprovalWorkflowSe [approvalWorkflow.approvers.length, toLocaleOrdinal, translate], ); + const members = useMemo(() => { + if (approvalWorkflow.isDefault) { + return translate('workspace.common.everyone'); + } + + return OptionsListUtils.sortAlphabetically(approvalWorkflow.members, 'displayName') + .map((m) => m.displayName) + .join(', '); + }, [approvalWorkflow.isDefault, approvalWorkflow.members, translate]); + return ( m.displayName).join(', ')} + description={members} + numberOfLinesDescription={4} icon={Expensicons.Users} iconHeight={20} iconWidth={20} diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts index 3f519f4de7c4..c3325237a7ab 100644 --- a/src/libs/OptionsListUtils.ts +++ b/src/libs/OptionsListUtils.ts @@ -222,10 +222,6 @@ type FilterOptionsConfig = Pick(membersList: T[]): T[] { - return membersList.sort((a, b) => (a.text ?? '').toLowerCase().localeCompare((b.text ?? '').toLowerCase())); +function sortAlphabetically>, TKey extends keyof T>(items: T[], key: TKey): T[] { + return items.sort((a, b) => (a[key] ?? '').toLowerCase().localeCompare((b[key] ?? '').toLowerCase())); } function getEmptyOptions(): Options { @@ -2524,7 +2520,7 @@ export { getEnabledCategoriesCount, hasEnabledOptions, sortCategories, - sortItemsAlphabetically, + sortAlphabetically, sortTags, getCategoryOptionTree, hasEnabledTags, diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx index d730dde02a67..90a29601d2a0 100644 --- a/src/pages/workspace/WorkspaceMembersPage.tsx +++ b/src/pages/workspace/WorkspaceMembersPage.tsx @@ -366,7 +366,7 @@ function WorkspaceMembersPage({personalDetails, route, policy, currentUserPerson invitedSecondaryLogin: details?.login ? invitedPrimaryToSecondaryLogins[details.login] ?? '' : '', }); }); - result = OptionsListUtils.sortItemsAlphabetically(result); + result = OptionsListUtils.sortAlphabetically(result, 'text'); return result; }, [ isOffline, diff --git a/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx b/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx index 3190c4ba295c..17d8529437e4 100644 --- a/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx @@ -93,7 +93,7 @@ function AssigneeStep({policy}: AssigneeStepProps) { }); }); - membersList = OptionsListUtils.sortItemsAlphabetically(membersList); + membersList = OptionsListUtils.sortAlphabetically(membersList, 'text'); return membersList; }, [isOffline, policy?.employeeList]); diff --git a/src/pages/workspace/workflows/approvals/ApprovalWorkflowEditor.tsx b/src/pages/workspace/workflows/approvals/ApprovalWorkflowEditor.tsx index 9864241a8e84..03382ee622c4 100644 --- a/src/pages/workspace/workflows/approvals/ApprovalWorkflowEditor.tsx +++ b/src/pages/workspace/workflows/approvals/ApprovalWorkflowEditor.tsx @@ -1,5 +1,5 @@ import type {ForwardedRef} from 'react'; -import React, {forwardRef, useCallback} from 'react'; +import React, {forwardRef, useCallback, useMemo} from 'react'; import {View} from 'react-native'; // eslint-disable-next-line no-restricted-imports import type {ScrollView as ScrollViewRN} from 'react-native'; @@ -13,6 +13,7 @@ import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; +import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; @@ -43,7 +44,16 @@ function ApprovalWorkflowEditor({approvalWorkflow, removeApprovalWorkflow, polic approvalWorkflow.approvers.length > 1 ? `${toLocaleOrdinal(index + 1, true)} ${translate('workflowsPage.approver').toLowerCase()}` : `${translate('workflowsPage.approver')}`, [approvalWorkflow.approvers.length, toLocaleOrdinal, translate], ); - const members = approvalWorkflow.isDefault ? translate('workspace.common.everyone') : approvalWorkflow.members.map((m) => m.displayName).join(', '); + + const members = useMemo(() => { + if (approvalWorkflow.isDefault) { + return translate('workspace.common.everyone'); + } + + return OptionsListUtils.sortAlphabetically(approvalWorkflow.members, 'displayName') + .map((m) => m.displayName) + .join(', '); + }, [approvalWorkflow.isDefault, approvalWorkflow.members, translate]); const approverErrorMessage = useCallback( (approver: Approver | undefined, approverIndex: number) => { @@ -117,6 +127,7 @@ function ApprovalWorkflowEditor({approvalWorkflow, removeApprovalWorkflow, polic