Sort participants in report participants and workspace invite page

src/libs/OptionsListUtils.js

@@ -884,7 +884,7 @@ function getMemberInviteOptions(personalDetails, betas = [], searchValue = '', e
         searchInputValue: searchValue.trim(),
         includePersonalDetails: true,
         excludeLogins,
-        sortPersonalDetailsByAlphaAsc: false,
+        sortPersonalDetailsByAlphaAsc: true,
     });
 }
 

src/pages/ReportParticipantsPage.js

@@ -55,27 +55,30 @@ const defaultProps = {
 const getAllParticipants = (report, personalDetails) => {
     const {participants} = report;
 
-    return _.map(participants, (login) => {
-        const userLogin = Str.removeSMSDomain(login);
-        const userPersonalDetail = lodashGet(personalDetails, login, {displayName: userLogin, avatar: ''});
+    return _.chain(participants)
+        .map((login) => {
+            const userLogin = Str.removeSMSDomain(login);
+            const userPersonalDetail = lodashGet(personalDetails, login, {displayName: userLogin, avatar: ''});
 
-        return {
-            alternateText: userLogin,
-            displayName: userPersonalDetail.displayName,
-            icons: [
-                {
-                    source: ReportUtils.getAvatar(userPersonalDetail.avatar, login),
-                    name: login,
-                    type: CONST.ICON_TYPE_AVATAR,
-                },
-            ],
-            keyForList: userLogin,
-            login,
-            text: userPersonalDetail.displayName,
-            tooltipText: userLogin,
-            participantsList: [{login, displayName: userPersonalDetail.displayName}],
-        };
-    });
+            return {
+                alternateText: userLogin,
+                displayName: userPersonalDetail.displayName,
+                icons: [
+                    {
+                        source: ReportUtils.getAvatar(userPersonalDetail.avatar, login),
+                        name: login,
+                        type: CONST.ICON_TYPE_AVATAR,
+                    },
+                ],
+                keyForList: userLogin,
+                login,
+                text: userPersonalDetail.displayName,
+                tooltipText: userLogin,
+                participantsList: [{login, displayName: userPersonalDetail.displayName}],
+            };
+        })
+        .sortBy((participant) => participant.displayName.toLowerCase())
+        .value();
 };
 
 const ReportParticipantsPage = (props) => {

tests/unit/OptionsListUtilsTest.js

@@ -588,10 +588,10 @@ describe('OptionsListUtils', () => {
         // When we only pass personal details
         let results = OptionsListUtils.getMemberInviteOptions(PERSONAL_DETAILS, [], '');
 
-        // We should expect personal details PERSONAL_DETAILS order
-        expect(results.personalDetails[0].text).toBe('Mister Fantastic');
-        expect(results.personalDetails[1].text).toBe('Spider-Man');
-        expect(results.personalDetails[2].text).toBe('Black Panther');
+        // We should expect personal details to be sorted alphabetically
+        expect(results.personalDetails[0].text).toBe('Black Panther');
+        expect(results.personalDetails[1].text).toBe('Black Widow');
+        expect(results.personalDetails[2].text).toBe('Captain America');
         expect(results.personalDetails[3].text).toBe('Invisible Woman');
 
         // When we provide a search value that does not match any personal details