[Advanced approvals] Sort members and display more lines

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 (
  <PressableWithoutFeedback
  accessibilityRole="button"
@@ -60,7 +71,8 @@ function ApprovalWorkflowSection({approvalWorkflow, onPress}: ApprovalWorkflowSe
  style={styles.p0}
  titleStyle={styles.textLabelSupportingNormal}
  descriptionTextStyle={styles.textNormalThemeText}
- description={approvalWorkflow.isDefault ? translate('workspace.common.everyone') : approvalWorkflow.members.map((m) => m.displayName).join(', ')}
+ description={members}
+ numberOfLinesDescription={4}
  icon={Expensicons.Users}
  iconHeight={20}
  iconWidth={20}

src/libs/OptionsListUtils.ts

@@ -222,10 +222,6 @@ type FilterOptionsConfig = Pick<GetOptionsConfig, 'sortByReportTypeInSearch' | '
  preferPolicyExpenseChat?: boolean;
 };
 
-type HasText = {
- text?: string;
-};
-
 /**
  * OptionsListUtils is used to build a list options passed to the OptionsList component. Several different UI views can
  * be configured to display different results based on the options passed to the private getOptions() method. Public
@@ -2479,8 +2475,8 @@ function filterOptions(options: Options, searchInputValue: string, config?: Filt
  };
 }
 
-function sortItemsAlphabetically<T extends HasText>(membersList: T[]): T[] {
- return membersList.sort((a, b) => (a.text ?? '').toLowerCase().localeCompare((b.text ?? '').toLowerCase()));
+function sortAlphabetically<T extends Partial<Record<TKey, string | undefined>>, 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,

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,

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]);

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
  <MenuItemWithTopDescription
  title={members}
  titleStyle={styles.textNormalThemeText}
+ numberOfLinesTitle={4}
  description={translate('workflowsExpensesFromPage.title')}
  descriptionTextStyle={!!members && styles.textLabelSupportingNormal}
  onPress={editMembers}

src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx

@@ -149,7 +149,7 @@ function WorkspaceWorkflowsApprovalsApproverPageBeta({policy, personalDetails, i
  return [
  {
  title: undefined,
- data: filteredApprovers,
+ data: OptionsListUtils.sortAlphabetically(filteredApprovers, 'text'),
  shouldShow: true,
  },
  ];

src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsExpensesFromPage.tsx

@@ -120,7 +120,7 @@ function WorkspaceWorkflowsApprovalsExpensesFromPage({policy, isLoadingReportDat
  return [
  {
  title: undefined,
- data: filteredMembers,
+ data: OptionsListUtils.sortAlphabetically(filteredMembers, 'text'),
  shouldShow: true,
  },
  ];