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 {
+export default class InstalledOAuthApps extends React.PureComponent {
-    static get propTypes() {
+    static propTypes = {
-        return {
+
-            team: PropTypes.object
+        /**
-        };
+        * 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: true
-            loading: !IntegrationStore.hasReceivedOAuthApps()
         };
     }
 
     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() {
+    deleteOAuthApp = (app) => {
-        IntegrationStore.removeChangeListener(this.handleIntegrationChange);
+        this.props.actions.deleteOAuthApp(app.id);
-    }
-
-    handleIntegrationChange() {
-        this.setState({
-            oauthApps: IntegrationStore.getOAuthApps()
-        });
-    }
-
-    deleteOAuthApp(app) {
-        OAuthActions.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 = {

webapp/routes/route_integrations.jsx

@@ -95,7 +95,7 @@ export default {
             path: 'oauth2-apps',
             indexRoute: {
                 getComponents: (location, callback) => {
-                    System.import('components/integrations/components/installed_oauth_apps.jsx').then(RouteUtils.importComponentSuccess(callback));
+                    System.import('components/integrations/components/installed_oauth_apps').then(RouteUtils.importComponentSuccess(callback));
                 }
             },
             childRoutes: [

webapp/tests/components/integrations/__snapshots__/installed_oauth_apps.test.jsx.snap

@@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/integrations/InstalledOAuthApps should match snapshot 1`] = `
+<BackstageList
+  addLink="/test/integrations/oauth2-apps/add"
+  addText="Add OAuth 2.0 Application"
+  emptyText={
+    <FormattedMessage
+      defaultMessage="No OAuth 2.0 Applications found"
+      id="installed_oauth_apps.empty"
+      values={Object {}}
+    />
+  }
+  header={
+    <FormattedMessage
+      defaultMessage="OAuth 2.0 Applications"
+      id="installed_oauth_apps.header"
+      values={Object {}}
+    />
+  }
+  helpText={
+    <FormattedMessage
+      defaultMessage="Create {oauthApplications} to securely integrate bots and third-party apps with Mattermost. Visit the {appDirectory} to find available self-hosted apps."
+      id="installed_oauth_apps.help"
+      values={
+        Object {
+          "appDirectory": <a
+            href="https://about.mattermost.com/default-app-directory/"
+            rel="noopener noreferrer"
+            target="_blank"
+        >
+            <FormattedMessage
+                defaultMessage="App Directory"
+                id="installed_oauth_apps.help.appDirectory"
+                values={Object {}}
+            />
+        </a>,
+          "oauthApplications": <a
+            href="https://docs.mattermost.com/developer/oauth-2-0-applications.html"
+            rel="noopener noreferrer"
+            target="_blank"
+        >
+            <FormattedMessage
+                defaultMessage="OAuth 2.0 applications"
+                id="installed_oauth_apps.help.oauthApplications"
+                values={Object {}}
+            />
+        </a>,
+        }
+      }
+    />
+  }
+  loading={true}
+  searchPlaceholder="Search OAuth 2.0 Applications"
+>
+  <InstalledOAuthApp
+    oauthApp={
+      Object {
+        "callback_urls": Array [
+          "https://test.com/callback",
+        ],
+        "client_secret": "88cxd9wpzpbpfp8pad78xj75pr",
+        "create_at": 1501365458934,
+        "creator_id": "88oybd1dwfdoxpkpw1h5kpbyco",
+        "description": "testing",
+        "homepage": "https://test.com",
+        "icon_url": "https://test.com/icon",
+        "id": "facxd9wpzpbpfp8pad78xj75pr",
+        "is_trusted": false,
+        "name": "firstApp",
+        "update_at": 1501365458934,
+      }
+    }
+    onDelete={[Function]}
+  />
+  <InstalledOAuthApp
+    oauthApp={
+      Object {
+        "callback_urls": Array [
+          "https://test2.com/callback",
+          "https://test2.com/callback2",
+        ],
+        "client_secret": "decxd9wpzpbpfp8pad78xj75pr",
+        "create_at": 1501365459984,
+        "creator_id": "88oybd2dwfdoxpkpw1h5kpbyco",
+        "description": "testing2",
+        "homepage": "https://test2.com",
+        "icon_url": "https://test2.com/icon",
+        "id": "fzcxd9wpzpbpfp8pad78xj75pr",
+        "is_trusted": true,
+        "name": "secondApp",
+        "update_at": 1501365479988,
+      }
+    }
+    onDelete={[Function]}
+  />
+</BackstageList>
+`;

webapp/tests/components/integrations/installed_oauth_apps.test.jsx

@@ -0,0 +1,53 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import InstalledOAuthApps from 'components/integrations/components/installed_oauth_apps/installed_oauth_apps.jsx';
+
+describe('components/integrations/InstalledOAuthApps', () => {
+    test('should match snapshot', () => {
+        const emptyFunction = jest.fn();
+        const oauthApps = {
+            facxd9wpzpbpfp8pad78xj75pr: {
+                id: 'facxd9wpzpbpfp8pad78xj75pr',
+                name: 'firstApp',
+                client_secret: '88cxd9wpzpbpfp8pad78xj75pr',
+                create_at: 1501365458934,
+                creator_id: '88oybd1dwfdoxpkpw1h5kpbyco',
+                description: 'testing',
+                homepage: 'https://test.com',
+                icon_url: 'https://test.com/icon',
+                is_trusted: false,
+                update_at: 1501365458934,
+                callback_urls: ['https://test.com/callback']
+            },
+            fzcxd9wpzpbpfp8pad78xj75pr: {
+                id: 'fzcxd9wpzpbpfp8pad78xj75pr',
+                name: 'secondApp',
+                client_secret: 'decxd9wpzpbpfp8pad78xj75pr',
+                create_at: 1501365459984,
+                creator_id: '88oybd2dwfdoxpkpw1h5kpbyco',
+                description: 'testing2',
+                homepage: 'https://test2.com',
+                icon_url: 'https://test2.com/icon',
+                is_trusted: true,
+                update_at: 1501365479988,
+                callback_urls: ['https://test2.com/callback', 'https://test2.com/callback2']
+            }
+        };
+        global.window.mm_config = {EnableOAuthServiceProvider: 'true'};
+
+        const wrapper = shallow(
+            <InstalledOAuthApps
+                team={{name: 'test'}}
+                oauthApps={oauthApps}
+                isSystemAdmin={true}
+                actions={{getOAuthApps: emptyFunction, deleteOAuthApp: emptyFunction}}
+            />
+        );
+        expect(wrapper.find('InstalledOAuthApp').length).toBe(2);
+        expect(wrapper).toMatchSnapshot();
+    });
+});