PLT-6657 Move system console to use v4 endpoints and redux (#6572)

* Move system console to use v4 endpoints and redux

* Rename logs dir to get past gitignore

* Fix test email

* Update brand unit test

* Updates per feedback

webapp/components/analytics/team_analytics/index.js

@@ -5,10 +5,20 @@ import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {getTeams} from 'mattermost-redux/actions/teams';
 
+import {getTeamsList} from 'mattermost-redux/selectors/entities/teams';
+import BrowserStore from 'stores/browser_store.jsx';
+
 import TeamAnalytics from './team_analytics.jsx';
 
+const LAST_ANALYTICS_TEAM = 'last_analytics_team';
+
 function mapStateToProps(state, ownProps) {
+    const teams = getTeamsList(state);
+    const teamId = BrowserStore.getGlobalItem(LAST_ANALYTICS_TEAM, teams.length > 0 ? teams[0].id : '');
+
     return {
+        initialTeam: state.entities.teams.teams[teamId],
+        teams,
         ...ownProps
     };
 }

webapp/components/analytics/team_analytics/team_analytics.jsx

@@ -1,21 +1,18 @@
-import PropTypes from 'prop-types';
-
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import {FormattedDate, FormattedMessage, FormattedHTMLMessage} from 'react-intl';
 
 import Banner from 'components/admin_console/banner.jsx';
 import LoadingScreen from 'components/loading_screen.jsx';
 
-import AdminStore from 'stores/admin_store.jsx';
 import AnalyticsStore from 'stores/analytics_store.jsx';
 import BrowserStore from 'stores/browser_store.jsx';
 
 import * as AsyncClient from 'utils/async_client.jsx';
 import {StatTypes} from 'utils/constants.jsx';
-import {convertTeamMapToList} from 'utils/team_utils.jsx';
 
 import LineChart from 'components/analytics/line_chart.jsx';
 import StatisticCount from 'components/analytics/statistic_count.jsx';
@@ -26,7 +23,22 @@ const LAST_ANALYTICS_TEAM = 'last_analytics_team';
 
 export default class TeamAnalytics extends React.Component {
     static propTypes = {
+
+        /*
+         * Array of team objects
+         */
+        teams: PropTypes.arrayOf(PropTypes.object).isRequired,
+
+        /*
+         * Initial team to load analytics for
+         */
+        initialTeam: PropTypes.object,
+
         actions: PropTypes.shape({
+
+            /*
+             * Function to get teams
+             */
             getTeams: PropTypes.func.isRequired
         }).isRequired
     }
@@ -34,37 +46,27 @@ export default class TeamAnalytics extends React.Component {
     constructor(props) {
         super(props);
 
-        this.onChange = this.onChange.bind(this);
-        this.onAllTeamsChange = this.onAllTeamsChange.bind(this);
-        this.handleTeamChange = this.handleTeamChange.bind(this);
-
-        const teams = convertTeamMapToList(AdminStore.getAllTeams());
-        const teamId = BrowserStore.getGlobalItem(LAST_ANALYTICS_TEAM, teams.length > 0 ? teams[0].id : '');
+        const teamId = props.initialTeam ? props.initialTeam.id : '';
 
         this.state = {
-            teams,
-            teamId,
-            team: AdminStore.getTeam(teamId),
+            team: props.initialTeam,
             stats: AnalyticsStore.getAllTeam(teamId)
         };
     }
 
     componentDidMount() {
         AnalyticsStore.addChangeListener(this.onChange);
-        AdminStore.addAllTeamsChangeListener(this.onAllTeamsChange);
 
-        if (this.state.teamId !== '') {
-            this.getData(this.state.teamId);
+        if (this.state.team) {
+            this.getData(this.state.team.id);
         }
 
-        if (this.state.teams.length === 0) {
-            this.props.actions.getTeams(0, 1000);
-        }
+        this.props.actions.getTeams(0, 1000);
     }
 
     componentWillUpdate(nextProps, nextState) {
-        if (nextState.teamId !== this.state.teamId) {
-            this.getData(nextState.teamId);
+        if (nextState.team && nextState.team !== this.state.team) {
+            this.getData(nextState.team.id);
         }
     }
 
@@ -77,53 +79,38 @@ export default class TeamAnalytics extends React.Component {
 
     componentWillUnmount() {
         AnalyticsStore.removeChangeListener(this.onChange);
-        AdminStore.removeAllTeamsChangeListener(this.onAllTeamsChange);
     }
 
-    onChange() {
+    onChange = () => {
+        const teamId = this.state.team ? this.state.team.id : '';
         this.setState({
-            stats: AnalyticsStore.getAllTeam(this.state.teamId)
+            stats: AnalyticsStore.getAllTeam(teamId)
         });
     }
 
-    onAllTeamsChange() {
-        const teams = convertTeamMapToList(AdminStore.getAllTeams());
-
-        if (teams.length > 0) {
-            if (this.state.teamId) {
-                this.setState({
-                    team: AdminStore.getTeam(this.state.teamId)
-                });
-            } else {
-                this.setState({
-                    teamId: teams[0].id,
-                    team: teams[0]
-                });
-            }
-        }
-
-        this.setState({
-            teams
-        });
-    }
-
-    handleTeamChange(e) {
+    handleTeamChange = (e) => {
         const teamId = e.target.value;
 
+        let team;
+        this.props.teams.forEach((t) => {
+            if (t.id === teamId) {
+                team = t;
+            }
+        });
+
         this.setState({
-            teamId,
-            team: AdminStore.getTeam(teamId)
+            team
         });
 
         BrowserStore.setGlobalItem(LAST_ANALYTICS_TEAM, teamId);
     }
 
     render() {
-        if (this.state.teams.length === 0 || !this.state.team || !this.state.stats) {
+        if (this.props.teams.length === 0 || !this.state.team || !this.state.stats) {
             return <LoadingScreen/>;
         }
 
-        if (this.state.teamId === '') {
+        if (this.state.team == null) {
             return (
                 <Banner
                     description={
@@ -217,7 +204,7 @@ export default class TeamAnalytics extends React.Component {
         const recentActiveUsers = formatRecentUsersData(stats[StatTypes.RECENTLY_ACTIVE_USERS]);
         const newlyCreatedUsers = formatNewUsersData(stats[StatTypes.NEWLY_CREATED_USERS]);
 
-        const teams = this.state.teams.map((team) => {
+        const teams = this.props.teams.map((team) => {
             return (
                 <option
                     key={team.id}
@@ -246,7 +233,7 @@ export default class TeamAnalytics extends React.Component {
                         <select
                             className='form-control team-statistics__team-filter__dropdown'
                             onChange={this.handleTeamChange}
-                            value={this.state.teamId}
+                            value={this.state.team.id}
                         >
                             {teams}
                         </select>