PLT-6455 Migrate installed_oauth_apps.jsx to be pure and use Redux (#7059)

* Migrate installed_oauth_apps.jsx to be pure and use Redux

* Props docs typo, add test, remove commands_container, bump yarn.lock

webapp/components/integrations/components/commands_container.jsx

@@ -1,78 +0,0 @@
-// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
-// See License.txt for license information.
-
-import IntegrationStore from 'stores/integration_store.jsx';
-import UserStore from 'stores/user_store.jsx';
-
-import {loadTeamCommands} from 'actions/integration_actions.jsx';
-
-import PropTypes from 'prop-types';
-
-import React from 'react';
-
-export default class CommandsContainer extends React.Component {
-    static get propTypes() {
-        return {
-            team: PropTypes.object,
-            user: PropTypes.object,
-            children: PropTypes.node.isRequired,
-            isAdmin: PropTypes.bool
-        };
-    }
-
-    constructor(props) {
-        super(props);
-
-        this.handleIntegrationChange = this.handleIntegrationChange.bind(this);
-        this.handleUserChange = this.handleUserChange.bind(this);
-
-        const teamId = this.props.team ? this.props.team.id : '';
-
-        this.state = {
-            commands: IntegrationStore.getCommands(teamId) || [],
-            loading: !IntegrationStore.hasReceivedCommands(teamId),
-            users: UserStore.getProfiles()
-        };
-    }
-
-    componentDidMount() {
-        IntegrationStore.addChangeListener(this.handleIntegrationChange);
-        UserStore.addChangeListener(this.handleUserChange);
-
-        if (window.mm_config.EnableCommands === 'true') {
-            loadTeamCommands((() => this.setState({loading: false})));
-        }
-    }
-
-    componentWillUnmount() {
-        IntegrationStore.removeChangeListener(this.handleIntegrationChange);
-        UserStore.removeChangeListener(this.handleUserChange);
-    }
-
-    handleIntegrationChange() {
-        const teamId = this.props.team.id;
-
-        this.setState({
-            commands: IntegrationStore.getCommands(teamId)
-        });
-    }
-
-    handleUserChange() {
-        this.setState({users: UserStore.getProfiles()});
-    }
-
-    render() {
-        return (
-            <div>
-                {React.cloneElement(this.props.children, {
-                    commands: this.state.commands,
-                    users: this.state.users,
-                    loading: this.state.loading,
-                    team: this.props.team,
-                    user: this.props.user,
-                    isAdmin: this.props.isAdmin
-                })}
-            </div>
-        );
-    }
-}

webapp/components/integrations/components/installed_oauth_apps/index.js

@@ -0,0 +1,29 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import * as Actions from 'mattermost-redux/actions/integrations';
+import {getOAuthApps} from 'mattermost-redux/selectors/entities/integrations';
+import {isCurrentUserSystemAdmin} from 'mattermost-redux/selectors/entities/users';
+
+import InstalledOAuthApps from './installed_oauth_apps.jsx';
+
+function mapStateToProps(state, ownProps) {
+    return {
+        ...ownProps,
+        oauthApps: getOAuthApps(state),
+        isSystemAdmin: isCurrentUserSystemAdmin(state)
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+            getOAuthApps: Actions.getOAuthApps,
+            deleteOAuthApp: Actions.deleteOAuthApp
+        }, dispatch)
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(InstalledOAuthApps);

webapp/components/integrations/components/installed_oauth_apps/installed_oauth_apps.jsx

@@ -4,55 +4,60 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import UserStore from 'stores/user_store.jsx';
-import IntegrationStore from 'stores/integration_store.jsx';
-import * as OAuthActions from 'actions/oauth_actions.jsx';
 import {localizeMessage} from 'utils/utils.jsx';
-
 import BackstageList from 'components/backstage/components/backstage_list.jsx';
 import {FormattedMessage} from 'react-intl';
-import InstalledOAuthApp from './installed_oauth_app.jsx';
+import InstalledOAuthApp from '../installed_oauth_app.jsx';
 
-export default class InstalledOAuthApps extends React.Component {
-    static get propTypes() {
-        return {
-            team: PropTypes.object
-        };
+export default class InstalledOAuthApps extends React.PureComponent {
+    static propTypes = {
+
+        /**
+        * The team data
+        */
+        team: PropTypes.object,
+
+        /**
+        * The oauthApps data
+        */
+        oauthApps: PropTypes.object,
+
+        /**
+        * Set if user is admin
+        */
+        isSystemAdmin: PropTypes.bool,
+
+        actions: PropTypes.shape({
+
+            /**
+            * The function to call to fetch OAuth apps
+            */
+            getOAuthApps: PropTypes.func.isRequired,
+
+            /**
+            * The function to call when Delete link is clicked
+            */
+            deleteOAuthApp: PropTypes.func.isRequired
+        }).isRequired
     }
 
     constructor(props) {
         super(props);
-
-        this.handleIntegrationChange = this.handleIntegrationChange.bind(this);
-
-        this.deleteOAuthApp = this.deleteOAuthApp.bind(this);
-
         this.state = {
-            oauthApps: IntegrationStore.getOAuthApps(),
-            loading: !IntegrationStore.hasReceivedOAuthApps()
+            loading: true
         };
     }
 
     componentDidMount() {
-        IntegrationStore.addChangeListener(this.handleIntegrationChange);
-
         if (window.mm_config.EnableOAuthServiceProvider === 'true') {
-            OAuthActions.listOAuthApps(() => this.setState({loading: false}));
+            this.props.actions.getOAuthApps().then(
+                () => this.setState({loading: false})
+            );
         }
     }
 
-    componentWillUnmount() {
-        IntegrationStore.removeChangeListener(this.handleIntegrationChange);
-    }
-
-    handleIntegrationChange() {
-        this.setState({
-            oauthApps: IntegrationStore.getOAuthApps()
-        });
-    }
-
-    deleteOAuthApp(app) {
-        OAuthActions.deleteOAuthApp(app.id);
+    deleteOAuthApp = (app) => {
+        this.props.actions.deleteOAuthApp(app.id);
     }
 
     oauthAppCompare(a, b) {
@@ -70,7 +75,7 @@ export default class InstalledOAuthApps extends React.Component {
     }
 
     render() {
-        const oauthApps = this.state.oauthApps.sort(this.oauthAppCompare).map((app) => {
+        const oauthApps = Object.values(this.props.oauthApps).sort(this.oauthAppCompare).map((app) => {
             return (
                 <InstalledOAuthApp
                     key={app.id}
@@ -80,9 +85,9 @@ export default class InstalledOAuthApps extends React.Component {
             );
         });
 
-        const isSystemAdmin = UserStore.isSystemAdminForCurrentUser();
         const config = global.mm_config;
-        const integrationsEnabled = (config.EnableOAuthServiceProvider === 'true' && (isSystemAdmin || config.EnableOnlyAdminIntegrations !== 'true'));
+        const integrationsEnabled = (config.EnableOAuthServiceProvider === 'true' &&
+            (this.props.isSystemAdmin || config.EnableOnlyAdminIntegrations !== 'true'));
         let props;
         if (integrationsEnabled) {
             props = {