PLT-2713/PLT-6028 Added System Users list to System Console (#5882)

* PLT-2713 Added ability for admins to list users not in any team

* Updated style of unit test

* Split SearchableUserList to give better control over its properties

* Added users without any teams to the user store

* Added ManageUsers page

* Renamed ManageUsers to SystemUsers

* Added ability to search by user id in SystemUsers page

* Added SystemUsersDropdown

* Removed unnecessary injectIntl

* Created TeamUtils

* Reduced scope of system console heading CSS

* Added team filter to TeamAnalytics page

* Updated admin console sidebar

* Removed unnecessary TODO

* Removed unused reference to deleted modal

* Fixed system console sidebar not scrolling on first load

* Fixed TeamAnalytics page not rendering on first load

* Fixed chart.js throwing an error when switching between teams

* Changed TeamAnalytics header to show the team's display name

* Fixed appearance of TeamAnalytics and SystemUsers on small screen widths

* Fixed placement of 'No users found' message

* Fixed teams not appearing in SystemUsers on first load

* Updated user count text for SystemUsers

* Changed search by id fallback to trigger less often

* Fixed SystemUsers list items not updating when searching

* Fixed localization strings for SystemUsers page

1 files changed, 23 insertions, 152 deletions

diff --git a/webapp/components/admin_console/admin_sidebar.jsx b/webapp/components/admin_console/admin_sidebar.jsx
index 2f299bdeb..73ec436f4 100644
--- a/webapp/components/admin_console/admin_sidebar.jsx
+++ b/webapp/components/admin_console/admin_sidebar.jsx
@@ -3,18 +3,12 @@
 
 import $ from 'jquery';
 import React from 'react';
+import {FormattedMessage} from 'react-intl';
 
-import AdminStore from 'stores/admin_store.jsx';
-import * as AsyncClient from 'utils/async_client.jsx';
 import * as Utils from 'utils/utils.jsx';
 
-import AdminSidebarHeader from './admin_sidebar_header.jsx';
-import AdminSidebarTeam from './admin_sidebar_team.jsx';
-import {FormattedMessage} from 'react-intl';
-import {browserHistory} from 'react-router/es6';
-import {OverlayTrigger, Tooltip} from 'react-bootstrap';
-import SelectTeamModal from './select_team_modal.jsx';
 import AdminSidebarCategory from './admin_sidebar_category.jsx';
+import AdminSidebarHeader from './admin_sidebar_header.jsx';
 import AdminSidebarSection from './admin_sidebar_section.jsx';
 
 export default class AdminSidebar extends React.Component {
@@ -27,84 +21,23 @@ export default class AdminSidebar extends React.Component {
     constructor(props) {
         super(props);
 
-        this.handleAllTeamsChange = this.handleAllTeamsChange.bind(this);
-
-        this.removeTeam = this.removeTeam.bind(this);
-
-        this.showTeamSelect = this.showTeamSelect.bind(this);
-        this.teamSelectedModal = this.teamSelectedModal.bind(this);
-        this.teamSelectedModalDismissed = this.teamSelectedModalDismissed.bind(this);
-
         this.updateTitle = this.updateTitle.bind(this);
-
-        this.renderAddTeamButton = this.renderAddTeamButton.bind(this);
-        this.renderTeams = this.renderTeams.bind(this);
-
-        this.state = {
-            teams: AdminStore.getAllTeams(),
-            selectedTeams: AdminStore.getSelectedTeams(),
-            showSelectModal: false
-        };
     }
 
     componentDidMount() {
-        AdminStore.addAllTeamsChangeListener(this.handleAllTeamsChange);
-        AsyncClient.getAllTeams();
-
         this.updateTitle();
-    }
 
-    componentDidUpdate() {
         if (!Utils.isMobile()) {
             $('.admin-sidebar .nav-pills__container').perfectScrollbar();
         }
     }
 
-    componentWillUnmount() {
-        AdminStore.removeAllTeamsChangeListener(this.handleAllTeamsChange);
-    }
-
-    handleAllTeamsChange() {
-        this.setState({
-            teams: AdminStore.getAllTeams(),
-            selectedTeams: AdminStore.getSelectedTeams()
-        });
-    }
-
-    removeTeam(team) {
-        const selectedTeams = Object.assign({}, this.state.selectedTeams);
-        Reflect.deleteProperty(selectedTeams, team.id);
-        AdminStore.saveSelectedTeams(selectedTeams);
-
-        this.handleAllTeamsChange();
-
-        if (this.context.router.isActive('/admin_console/team/' + team.id)) {
-            browserHistory.push('/admin_console');
+    componentDidUpdate() {
+        if (!Utils.isMobile()) {
+            $('.admin-sidebar .nav-pills__container').perfectScrollbar();
         }
     }
 
-    showTeamSelect(e) {
-        e.preventDefault();
-        this.setState({showSelectModal: true});
-    }
-
-    teamSelectedModal(teamId) {
-        this.setState({
-            showSelectModal: false
-        });
-
-        const selectedTeams = Object.assign({}, this.state.selectedTeams);
-        selectedTeams[teamId] = true;
-
-        AdminStore.saveSelectedTeams(selectedTeams);
-
-        this.handleAllTeamsChange();
-    }
-
-    teamSelectedModalDismissed() {
-        this.setState({showSelectModal: false});
-    }
-
     updateTitle() {
         let currentSiteName = '';
         if (global.window.mm_config.SiteName != null) {
@@ -114,79 +47,6 @@ export default class AdminSidebar extends React.Component {
         document.title = Utils.localizeMessage('sidebar_right_menu.console', 'System Console') + ' - ' + currentSiteName;
     }
 
-    renderAddTeamButton() {
-        const addTeamTooltip = (
-            <Tooltip id='add-team-tooltip'>
-                <FormattedMessage
-                    id='admin.sidebar.addTeamSidebar'
-                    defaultMessage='Add team from sidebar menu'
-                />
-            </Tooltip>
-        );
-
-        return (
-            <span className='menu-icon--right'>
-                <OverlayTrigger
-                    delayShow={1000}
-                    placement='top'
-                    overlay={addTeamTooltip}
-                >
-                    <a
-                        href='#'
-                        onClick={this.showTeamSelect}
-                    >
-                        <i
-                            className='fa fa-plus'
-                        />
-                    </a>
-                </OverlayTrigger>
-            </span>
-        );
-    }
-
-    renderTeams() {
-        const teams = [];
-        let teamsArray = [];
-
-        Reflect.ownKeys(this.state.selectedTeams).forEach((key) => {
-            if (this.state.teams[key]) {
-                teamsArray.push(this.state.teams[key]);
-            }
-        });
-
-        teamsArray = teamsArray.sort(Utils.sortTeamsByDisplayName);
-
-        for (let i = 0; i < teamsArray.length; i++) {
-            const team = teamsArray[i];
-            teams.push(
-                <AdminSidebarTeam
-                    key={team.id}
-                    team={team}
-                    onRemoveTeam={this.removeTeam}
-                />
-            );
-        }
-
-        return (
-            <AdminSidebarCategory
-                parentLink='/admin_console'
-                icon='fa-user'
-                title={
-                    <FormattedMessage
-                        id='admin.sidebar.teams'
-                        defaultMessage='TEAMS ({count, number})'
-                        values={{
-                            count: Object.keys(this.state.teams).length
-                        }}
-                    />
-                }
-                action={this.renderAddTeamButton()}
-            >
-                {teams}
-            </AdminSidebarCategory>
-        );
-    }
-
     render() {
         let oauthSettings = null;
         let ldapSettings = null;
@@ -422,6 +282,24 @@ export default class AdminSidebar extends React.Component {
                                 }
                             />
                             <AdminSidebarSection
+                                name='team_analytics'
+                                title={
+                                    <FormattedMessage
+                                        id='admin.sidebar.statistics'
+                                        defaultMessage='Team Statistics'
+                                    />
+                                }
+                            />
+                            <AdminSidebarSection
+                                name='users'
+                                title={
+                                    <FormattedMessage
+                                        id='admin.sidebar.users'
+                                        defaultMessage='Users'
+                                    />
+                                }
+                            />
+                            <AdminSidebarSection
                                 name='logs'
                                 title={
                                     <FormattedMessage
@@ -760,16 +638,9 @@ export default class AdminSidebar extends React.Component {
                                 {metricsSettings}
                             </AdminSidebarSection>
                         </AdminSidebarCategory>
-                        {this.renderTeams()}
                         {otherCategory}
                     </ul>
                 </div>
-                <SelectTeamModal
-                    teams={this.state.teams}
-                    show={this.state.showSelectModal}
-                    onModalSubmit={this.teamSelectedModal}
-                    onModalDismissed={this.teamSelectedModalDismissed}
-                />
             </div>
         );
     }