PLT-6456 Migrate installed_commands.jsx to be pure and use Redux (#6759)

* Add documentation to props, migrate to pure component

* Migrate commands_container and installed_commands to redux

* Partially move confirm_integration to redux

* Add more props to commands_container

* Fix identation issue

* Remove unused import

* Update command token to reference redux store

webapp/components/integrations/components/commands_container/commands_container.jsx

@@ -0,0 +1,78 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class CommandsContainer extends React.PureComponent {
+    static propTypes = {
+
+        /**
+        * The team data needed to pass into child components
+        */
+        team: PropTypes.object,
+
+        /**
+        * The user data needed to pass into child components
+        */
+        user: PropTypes.object,
+
+        /**
+        * The children prop needed to render child component
+        */
+        children: PropTypes.node.isRequired,
+
+        /**
+        * Set if user is admin
+        */
+        isAdmin: PropTypes.bool,
+
+        /**
+        * The users collection
+        */
+        users: PropTypes.object,
+
+        /**
+        * Installed splash commands to display
+        */
+        commands: PropTypes.array,
+
+        actions: PropTypes.shape({
+
+            /**
+            * The function to call to fetch team commands
+            */
+            getCustomTeamCommands: PropTypes.func.isRequired
+        }).isRequired
+    }
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            loading: true
+        };
+    }
+
+    componentDidMount() {
+        if (window.mm_config.EnableCommands === 'true') {
+            this.props.actions.getCustomTeamCommands(this.props.team.id).then(
+                () => this.setState({loading: false})
+            );
+        }
+    }
+
+    render() {
+        return (
+            <div>
+                {React.cloneElement(this.props.children, {
+                    loading: this.state.loading,
+                    commands: this.props.commands || [],
+                    users: this.props.users,
+                    team: this.props.team,
+                    user: this.props.user,
+                    isAdmin: this.props.isAdmin
+                })}
+            </div>
+        );
+    }
+}

webapp/components/integrations/components/commands_container/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 {getCustomTeamCommands} from 'mattermost-redux/actions/integrations';
+
+import {getCommands} from 'mattermost-redux/selectors/entities/integrations';
+import {getUsers} from 'mattermost-redux/selectors/entities/users';
+
+import CommandsContainer from './commands_container.jsx';
+
+function mapStateToProps(state, ownProps) {
+    return {
+        ...ownProps,
+        commands: Object.values(getCommands(state)),
+        users: getUsers(state)
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+            getCustomTeamCommands
+        }, dispatch)
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(CommandsContainer);

webapp/components/integrations/components/confirm_integration/confirm_integration.jsx

@@ -1,9 +1,8 @@
-import PropTypes from 'prop-types';
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
-
-// 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 BackstageHeader from 'components/backstage/components/backstage_header.jsx';
 import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
@@ -19,6 +18,7 @@ export default class ConfirmIntegration extends React.Component {
         return {
             team: PropTypes.object,
             location: PropTypes.object,
+            commands: PropTypes.object,
             loading: PropTypes.bool
         };
     }
@@ -94,7 +94,7 @@ export default class ConfirmIntegration extends React.Component {
                         id='add_command.token'
                         defaultMessage='<b>Token</b>: {token}'
                         values={{
-                            token: IntegrationStore.getCommand(this.props.team.id, this.state.id).token
+                            token: this.props.commands[this.state.id].token
                         }}
                     />
                 </p>

webapp/components/integrations/components/confirm_integration/index.js

@@ -0,0 +1,16 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+import {getCommands} from 'mattermost-redux/selectors/entities/integrations';
+
+import ConfirmIntegration from './confirm_integration.jsx';
+
+function mapStateToProps(state, ownProps) {
+    return {
+        ...ownProps,
+        commands: getCommands(state)
+    };
+}
+
+export default connect(mapStateToProps)(ConfirmIntegration);

webapp/components/integrations/components/installed_commands/index.js

@@ -0,0 +1,25 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {regenCommandToken, deleteCommand} from 'mattermost-redux/actions/integrations';
+
+import InstalledCommands from './installed_commands.jsx';
+
+function mapStateToProps(state, ownProps) {
+    return {
+        ...ownProps
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+            regenCommandToken,
+            deleteCommand
+        }, dispatch)
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(InstalledCommands);

webapp/components/integrations/components/installed_commands/installed_commands.jsx

@@ -1,10 +1,9 @@
-// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
 import BackstageList from 'components/backstage/components/backstage_list.jsx';
-import InstalledCommand from './installed_command.jsx';
+import InstalledCommand from '../installed_command.jsx';
 
-import {regenCommandToken, deleteCommand} from 'actions/integration_actions.jsx';
 import * as Utils from 'utils/utils.jsx';
 
 import PropTypes from 'prop-types';
@@ -12,31 +11,59 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-export default class InstalledCommands extends React.Component {
+export default class InstalledCommands extends React.PureComponent {
-    static get propTypes() {
+    static propTypes = {
-        return {
+
-            team: PropTypes.object,
+        /**
-            user: PropTypes.object,
+        * The team object
-            users: PropTypes.object,
+        */
-            commands: PropTypes.array,
+        team: PropTypes.object,
-            loading: PropTypes.bool,
+
-            isAdmin: PropTypes.bool
+        /**
-        };
+        * The user object
+        */
+        user: PropTypes.object,
+
+        /**
+        * The users collection
+        */
+        users: PropTypes.object,
+
+        /**
+        * Installed splash commands to display
+        */
+        commands: PropTypes.array,
+
+        /**
+        * Set whether to show the loading... animation or not
+        */
+        loading: PropTypes.bool,
+
+        /**
+        * Set to allow changes to installed splash commands
+        */
+        isAdmin: PropTypes.bool,
+
+        actions: PropTypes.shape({
+
+            /**
+            * The function to call when Regenerate Token link is clicked
+            */
+            regenCommandToken: PropTypes.func.isRequired,
+
+            /**
+            * The function to call when Delete link is clicked
+            */
+            deleteCommand: PropTypes.func.isRequired
+        }).isRequired
     }
 
-    constructor(props) {
+    regenCommandToken = (command) => {
-        super(props);
+        this.props.actions.regenCommandToken(command.id);
-
-        this.regenCommandToken = this.regenCommandToken.bind(this);
-        this.deleteCommand = this.deleteCommand.bind(this);
     }
 
-    regenCommandToken(command) {
+    deleteCommand = (command) => {
-        regenCommandToken(command.id);
+        this.props.actions.deleteCommand(command.id);
-    }
-
-    deleteCommand(command) {
-        deleteCommand(command.id);
     }
 
     commandCompare(a, b) {
@@ -118,4 +145,4 @@ export default class InstalledCommands extends React.Component {
             </BackstageList>
         );
     }
-}
+}

webapp/routes/route_integrations.jsx

@@ -61,14 +61,14 @@ export default {
         {
             path: 'commands',
             getComponents: (location, callback) => {
-                System.import('components/integrations/components/commands_container.jsx').then(RouteUtils.importComponentSuccess(callback));
+                System.import('components/integrations/components/commands_container').then(RouteUtils.importComponentSuccess(callback));
             },
             indexRoute: {onEnter: (nextState, replace) => replace(nextState.location.pathname + '/installed')},
             childRoutes: [
                 {
                     path: 'installed',
                     getComponents: (location, callback) => {
-                        System.import('components/integrations/components/installed_commands.jsx').then(RouteUtils.importComponentSuccess(callback));
+                        System.import('components/integrations/components/installed_commands').then(RouteUtils.importComponentSuccess(callback));
                     }
                 },
                 {
@@ -86,7 +86,7 @@ export default {
                 {
                     path: 'confirm',
                     getComponents: (location, callback) => {
-                        System.import('components/integrations/components/confirm_integration.jsx').then(RouteUtils.importComponentSuccess(callback));
+                        System.import('components/integrations/components/confirm_integration').then(RouteUtils.importComponentSuccess(callback));
                     }
                 }
             ]
@@ -110,7 +110,7 @@ export default {
         {
             path: 'confirm',
             getComponents: (location, callback) => {
-                System.import('components/integrations/components/confirm_integration.jsx').then(RouteUtils.importComponentSuccess(callback));
+                System.import('components/integrations/components/confirm_integration').then(RouteUtils.importComponentSuccess(callback));
             }
         }
     ]