Merge pull request Expensify#81057 from ShridharGoel/issue79396

Use alphabetical order for delegates and delegators

Author: mjasikowski

src/CONST/index.ts

@@ -8293,6 +8293,9 @@ const CONST = {
             TOGGLE_SETTINGS_ROW: 'Workspace-ToggleSettingsRow',
             WORKSPACE_MENU_ITEM: 'Workspace-WorkspaceMenuItem',
         },
+        ACCOUNT_SWITCHER: {
+            SHOW_ACCOUNTS: 'AccountSwitcher-ShowAccounts',
+        },
     },
 
     DOMAIN: {

src/components/AccountSwitcher.tsx

@@ -14,6 +14,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import {clearDelegatorErrors, connect, disconnect} from '@libs/actions/Delegate';
 import {close} from '@libs/actions/Modal';
 import {getLatestError} from '@libs/ErrorUtils';
+import {sortAlphabetically} from '@libs/OptionsListUtils';
 import {getPersonalDetailByEmail} from '@libs/PersonalDetailsUtils';
 import TextWithEmojiFragment from '@pages/inbox/report/comment/TextWithEmojiFragment';
 import variables from '@styles/variables';
@@ -43,7 +44,7 @@ function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) {
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const styles = useThemeStyles();
     const theme = useTheme();
-    const {translate, formatPhoneNumber} = useLocalize();
+    const {localeCompare, translate, formatPhoneNumber} = useLocalize();
     const {isOffline} = useNetwork();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: true});
@@ -153,23 +154,27 @@ function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) {
             ];
         }
 
-        const delegatorMenuItems: PopoverMenuItem[] = delegators
-            .filter(({email}) => email !== currentUserPersonalDetails.login)
-            .map(({email, role}) => {
-                const errorFields = account?.delegatedAccess?.errorFields ?? {};
-                const error = getLatestError(errorFields?.connect?.[email]);
-                const personalDetails = getPersonalDetailByEmail(email);
-                return createBaseMenuItem(personalDetails, error, {
-                    badgeText: translate('delegate.role', {role}),
-                    onSelected: () => {
-                        if (isOffline) {
-                            close(() => setShouldShowOfflineModal(true));
-                            return;
-                        }
-                        connect({email, delegatedAccess: account?.delegatedAccess, credentials, session, activePolicyID});
-                    },
-                });
-            });
+        const delegatorMenuItems: PopoverMenuItem[] = sortAlphabetically(
+            delegators
+                .filter(({email}) => email !== currentUserPersonalDetails.login)
+                .map(({email, role}) => {
+                    const errorFields = account?.delegatedAccess?.errorFields ?? {};
+                    const error = getLatestError(errorFields?.connect?.[email]);
+                    const personalDetails = getPersonalDetailByEmail(email);
+                    return createBaseMenuItem(personalDetails, error, {
+                        badgeText: translate('delegate.role', {role}),
+                        onSelected: () => {
+                            if (isOffline) {
+                                close(() => setShouldShowOfflineModal(true));
+                                return;
+                            }
+                            connect({email, delegatedAccess: account?.delegatedAccess, credentials, session, activePolicyID});
+                        },
+                    });
+                }),
+            'text',
+            localeCompare,
+        );
 
         return [currentUserMenuItem, ...delegatorMenuItems];
     };
@@ -191,6 +196,7 @@ function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) {
                     interactive={canSwitchAccounts}
                     pressDimmingValue={canSwitchAccounts ? undefined : 1}
                     wrapperStyle={[styles.flexGrow1, styles.flex1, styles.mnw0, styles.justifyContentCenter]}
+                    sentryLabel={CONST.SENTRY_LABEL.ACCOUNT_SWITCHER.SHOW_ACCOUNTS}
                 >
                     <View style={[styles.flexRow, styles.gap3, styles.alignItemsCenter]}>
                         <Avatar

src/pages/settings/Security/SecuritySettingsPage.tsx

@@ -33,6 +33,7 @@ import {clearDelegateErrorsByField, openSecuritySettingsPage, removeDelegate} fr
 import {getLatestError} from '@libs/ErrorUtils';
 import getClickedTargetLocation from '@libs/getClickedTargetLocation';
 import Navigation from '@libs/Navigation/Navigation';
+import {sortAlphabetically} from '@libs/OptionsListUtils';
 import {getPersonalDetailByEmail} from '@libs/PersonalDetailsUtils';
 import type {AnchorPosition} from '@styles/index';
 import colors from '@styles/theme/colors';
@@ -60,7 +61,7 @@ function SecuritySettingsPage() {
     const illustrations = useMemoizedLazyIllustrations(['LockClosed']);
     const securitySettingsIllustration = useSecuritySettingsSectionIllustration();
     const styles = useThemeStyles();
-    const {translate, formatPhoneNumber} = useLocalize();
+    const {localeCompare, translate, formatPhoneNumber} = useLocalize();
     const waitForNavigate = useWaitForNavigation();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {windowWidth} = useWindowDimensions();
@@ -240,8 +241,8 @@ function SecuritySettingsPage() {
     ]);
 
     const delegateMenuItems: MenuItemProps[] = useMemo(
-        () =>
-            delegates
+        () => {
+            const menuItems = delegates
                 .filter((d) => !d.optimisticAccountID)
                 .map(({email, role, pendingAction, pendingFields}) => {
                     const personalDetail = getPersonalDetailByEmail(email);
@@ -284,14 +285,16 @@ function SecuritySettingsPage() {
                         onPress,
                         success: selectedEmail === email,
                     };
-                }),
+                });
+            return sortAlphabetically(menuItems, 'title', localeCompare);
+        },
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        [delegates, translate, styles, personalDetails, errorFields, windowWidth, selectedEmail, icons.FallbackAvatar, icons.ThreeDots],
+        [delegates, translate, styles, personalDetails, errorFields, windowWidth, selectedEmail, icons.FallbackAvatar, icons.ThreeDots, localeCompare],
     );
 
     const delegatorMenuItems: MenuItemProps[] = useMemo(
-        () =>
-            delegators.map(({email, role}) => {
+        () => {
+            const menuItems = delegators.map(({email, role}) => {
                 const personalDetail = getPersonalDetailByEmail(email);
                 const formattedEmail = formatPhoneNumber(email);
 
@@ -306,9 +309,11 @@ function SecuritySettingsPage() {
                     wrapperStyle: [styles.sectionMenuItemTopDescription],
                     interactive: false,
                 };
-            }),
+            });
+            return sortAlphabetically(menuItems, 'title', localeCompare);
+        },
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        [delegators, styles, translate, personalDetails, icons.FallbackAvatar],
+        [delegators, styles, translate, personalDetails, icons.FallbackAvatar, localeCompare],
     );
 
     const delegatePopoverMenuItems: PopoverMenuItem[] = [