Use consistent Display Name sorting code throughout the webapp #5159 (#5213)

* Use consistent Display Name sorting code throughout the webapp #5159

* fixed broken sorting of teams and channels

webapp/components/admin_console/admin_navbar_dropdown.jsx

@@ -6,6 +6,7 @@ import ReactDOM from 'react-dom';
 
 import TeamStore from 'stores/team_store.jsx';
 import Constants from 'utils/constants.jsx';
+import {sortTeamsByDisplayName} from 'utils/utils.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
 
 import {FormattedMessage} from 'react-intl';
@@ -64,9 +65,7 @@ export default class AdminNavbarDropdown extends React.Component {
             }
 
             // Sort teams alphabetically with display_name
-            teamsArray.sort((teamA, teamB) =>
-                teamA.display_name.localeCompare(teamB.display_name)
-            );
+            teamsArray = teamsArray.sort(sortTeamsByDisplayName);
 
             for (const team of teamsArray) {
                 teams.push(

webapp/components/admin_console/admin_sidebar.jsx

@@ -114,19 +114,6 @@ 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'>
@@ -159,7 +146,7 @@ export default class AdminSidebar extends React.Component {
 
     renderTeams() {
         const teams = [];
-        const teamsArray = [];
+        let teamsArray = [];
 
         Reflect.ownKeys(this.state.selectedTeams).forEach((key) => {
             if (this.state.teams[key]) {
@@ -167,7 +154,7 @@ export default class AdminSidebar extends React.Component {
             }
         });
 
-        teamsArray.sort(this.sortTeams);
+        teamsArray = teamsArray.sort(Utils.sortTeamsByDisplayName);
 
         for (let i = 0; i < teamsArray.length; i++) {
             const team = teamsArray[i];

webapp/components/admin_console/select_team_modal.jsx

@@ -3,18 +3,17 @@
 
 import ReactDOM from 'react-dom';
 import {FormattedMessage} from 'react-intl';
-
 import {Modal} from 'react-bootstrap';
-
 import React from 'react';
 
+import {sortTeamsByDisplayName} from 'utils/utils.jsx';
+
 export default class SelectTeamModal extends React.Component {
     constructor(props) {
         super(props);
 
         this.doSubmit = this.doSubmit.bind(this);
         this.doCancel = this.doCancel.bind(this);
-        this.compare = this.compare.bind(this);
     }
 
     doSubmit(e) {
@@ -25,24 +24,19 @@ export default class SelectTeamModal extends React.Component {
         this.props.onModalDismissed();
     }
 
-    compare(a, b) {
-        return a.display_name.localeCompare(b.display_name);
-    }
-
     render() {
         if (this.props.teams == null) {
             return <div/>;
         }
 
         const options = [];
-        const teamsArray = [];
+        let teamsArray = [];
 
         Reflect.ownKeys(this.props.teams).forEach((key) => {
             teamsArray.push(this.props.teams[key]);
         });
 
-        teamsArray.sort(this.compare);
-
+        teamsArray = teamsArray.sort(sortTeamsByDisplayName);
         for (let i = 0; i < teamsArray.length; i++) {
             const team = teamsArray[i];
             options.push(