PLT-5021 Order System Console Teams section by Display Name (#4831)

1 files changed, 21 insertions, 8 deletions

diff --git a/webapp/components/admin_console/admin_sidebar.jsx b/webapp/components/admin_console/admin_sidebar.jsx
index 2b304f11d..e8303ea0c 100644
--- a/webapp/components/admin_console/admin_sidebar.jsx
+++ b/webapp/components/admin_console/admin_sidebar.jsx
@@ -114,6 +114,19 @@ export default class AdminSidebar extends React.Component {
         document.title = Utils.localizeMessage('sidebar_right_menu.console', 'System Console') + ' - ' + currentSiteName;
     }
 
+    sortTeams(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;
+    }
+
     renderAddTeamButton() {
         const addTeamTooltip = (
             <Tooltip id='add-team-tooltip'>
@@ -146,18 +159,18 @@ export default class AdminSidebar extends React.Component {
 
     renderTeams() {
         const teams = [];
+        const teamsArray = [];
 
-        for (const key in this.state.selectedTeams) {
-            if (!this.state.selectedTeams.hasOwnProperty(key)) {
-                continue;
+        Reflect.ownKeys(this.state.selectedTeams).forEach((key) => {
+            if (this.state.teams[key]) {
+                teamsArray.push(this.state.teams[key]);
             }
+        });
 
-            const team = this.state.teams[key];
-
-            if (!team) {
-                continue;
-            }
+        teamsArray.sort(this.sortTeams);
 
+        for (let i = 0; i < teamsArray.length; i++) {
+            const team = teamsArray[i];
             teams.push(
                 <AdminSidebarTeam
                     key={team.id}