PLT-4977 Sorting teams by display name on team list at system console's menue and select team modal. (#4797)

webapp/components/admin_console/admin_navbar_dropdown.jsx

@@ -50,7 +50,8 @@ export default class AdminNavbarDropdown extends React.Component {
     }
 
     render() {
-        const teams = [];
+        var teamsArray = [];  // Array of team objects
+        var teams = [];  // Array of team components
         let switchTeams;
 
         if (this.state.teamMembers && this.state.teamMembers.length > 0) {
@@ -58,22 +59,31 @@ export default class AdminNavbarDropdown extends React.Component {
                 if (this.state.teamMembers.hasOwnProperty(index)) {
                     const teamMember = this.state.teamMembers[index];
                     const team = this.state.teams[teamMember.team_id];
-                    teams.push(
-                        <li key={'team_' + team.name}>
-                            <Link
-                                to={'/' + team.name + '/channels/town-square'}
-                            >
-                                <FormattedMessage
-                                    id='navbar_dropdown.switchTo'
-                                    defaultMessage='Switch to '
-                                />
-                                {team.display_name}
-                            </Link>
-                        </li>
-                    );
+                    teamsArray.push(team);
                 }
             }
 
+            // Sort teams alphabetically with display_name
+            teamsArray.sort((teamA, teamB) =>
+                teamA.display_name.localeCompare(teamB.display_name)
+            );
+
+            for (const team of teamsArray) {
+                teams.push(
+                    <li key={'team_' + team.name}>
+                        <Link
+                            to={'/' + team.name + '/channels/town-square'}
+                        >
+                            <FormattedMessage
+                                id='navbar_dropdown.switchTo'
+                                defaultMessage='Switch to '
+                            />
+                            {team.display_name}
+                        </Link>
+                    </li>
+                );
+            }
+
             teams.push(
                 <li
                     key='teamDiv'

webapp/components/admin_console/select_team_modal.jsx

@@ -26,16 +26,7 @@ export default class SelectTeamModal extends React.Component {
     }
 
     compare(a, b) {
-        const teamA = a.display_name.toLowerCase();
-        const teamB = b.display_name.toLowerCase();
-
-        if (teamA < teamB) {
-            return -1;
-        }
-        if (teamA > teamB) {
-            return 1;
-        }
-        return 0;
+        return a.display_name.localeCompare(b.display_name);
     }
 
     render() {