PLT-6451 Migrate installed_oauth_app.jsx to be pure and use Redux (#7190)

* Migrate installed_oauth_app.jsx to be pure and use Redux, add test

* Fix behavior for the error case

webapp/components/integrations/components/installed_oauth_app.jsx

@@ -4,70 +4,83 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import FormError from 'components/form_error.jsx';
-
 import * as Utils from 'utils/utils.jsx';
 
 import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
-import {regenerateOAuthAppSecret} from 'actions/admin_actions.jsx';
-
+import FormError from 'components/form_error.jsx';
 import DeleteIntegration from './delete_integration.jsx';
 
 const FAKE_SECRET = '***************';
 
-export default class InstalledOAuthApp extends React.Component {
-    static get propTypes() {
-        return {
-            oauthApp: PropTypes.object.isRequired,
-            onDelete: PropTypes.func.isRequired,
-            filter: PropTypes.string
-        };
+export default class InstalledOAuthApp extends React.PureComponent {
+    static propTypes = {
+
+        /**
+        * The oauthApp data
+        */
+        oauthApp: PropTypes.object.isRequired,
+
+        /**
+        * The request state for regenOAuthAppSecret action. Contains status and error
+        */
+        regenOAuthAppSecretRequest: PropTypes.object.isRequired,
+
+        /**
+        * The function to call when Regenerate Secret link is clicked
+        */
+        onRegenerateSecret: PropTypes.func.isRequired,
+
+        /**
+        * The function to call when Delete link is clicked
+        */
+        onDelete: PropTypes.func.isRequired,
+
+        /**
+        * Set to filter OAuthApp
+        */
+        filter: PropTypes.string
     }
 
     constructor(props) {
         super(props);
 
-        this.handleShowClientSecret = this.handleShowClientSecret.bind(this);
-        this.handleHideClientScret = this.handleHideClientScret.bind(this);
-        this.handleRegenerate = this.handleRegenerate.bind(this);
-        this.handleDelete = this.handleDelete.bind(this);
-
-        this.matchesFilter = this.matchesFilter.bind(this);
-
         this.state = {
             clientSecret: FAKE_SECRET
         };
     }
 
-    handleShowClientSecret(e) {
-        e.preventDefault();
+    handleShowClientSecret = (e) => {
+        if (e && e.preventDefault) {
+            e.preventDefault();
+        }
         this.setState({clientSecret: this.props.oauthApp.client_secret});
     }
 
-    handleHideClientScret(e) {
+    handleHideClientSecret = (e) => {
         e.preventDefault();
         this.setState({clientSecret: FAKE_SECRET});
     }
 
-    handleRegenerate(e) {
+    handleRegenerate = (e) => {
         e.preventDefault();
-
-        regenerateOAuthAppSecret(
-            this.props.oauthApp.id,
+        this.props.onRegenerateSecret(this.props.oauthApp.id).then(
             () => {
-                this.handleShowClientSecret(e);
-            },
-            (err) => {
-                this.setState({error: err.message});
+                const {error} = this.props.regenOAuthAppSecretRequest;
+                if (error) {
+                    this.setState({error: error.message});
+                } else {
+                    this.setState({error: null});
+                    this.handleShowClientSecret();
+                }
             }
         );
     }
 
-    handleDelete() {
+    handleDelete = () => {
         this.props.onDelete(this.props.oauthApp);
     }
 
-    matchesFilter(oauthApp, filter) {
+    matchesFilter = (oauthApp, filter) => {
         if (!filter) {
             return true;
         }
@@ -152,7 +165,7 @@ export default class InstalledOAuthApp extends React.Component {
             showHide = (
                 <a
                     href='#'
-                    onClick={this.handleHideClientScret}
+                    onClick={this.handleHideClientSecret}
                 >
                     <FormattedMessage
                         id='installed_integrations.hideSecret'
@@ -254,4 +267,4 @@ export default class InstalledOAuthApp extends React.Component {
             </div>
         );
     }
-}
+}

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

@@ -13,7 +13,8 @@ function mapStateToProps(state, ownProps) {
     return {
         ...ownProps,
         oauthApps: getOAuthApps(state),
-        isSystemAdmin: isCurrentUserSystemAdmin(state)
+        isSystemAdmin: isCurrentUserSystemAdmin(state),
+        regenOAuthAppSecretRequest: state.requests.integrations.updateOAuthApp
     };
 }
 
@@ -21,6 +22,7 @@ function mapDispatchToProps(dispatch) {
     return {
         actions: bindActionCreators({
             getOAuthApps: Actions.getOAuthApps,
+            regenOAuthAppSecret: Actions.regenOAuthAppSecret,
             deleteOAuthApp: Actions.deleteOAuthApp
         }, dispatch)
     };

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

@@ -27,6 +27,11 @@ export default class InstalledOAuthApps extends React.PureComponent {
         */
         isSystemAdmin: PropTypes.bool,
 
+        /**
+        * The request state for regenOAuthAppSecret action. Contains status and error
+        */
+        regenOAuthAppSecretRequest: PropTypes.object.isRequired,
+
         actions: PropTypes.shape({
 
             /**
@@ -34,6 +39,11 @@ export default class InstalledOAuthApps extends React.PureComponent {
             */
             getOAuthApps: PropTypes.func.isRequired,
 
+            /**
+            * The function to call when Regenerate Secret link is clicked
+            */
+            regenOAuthAppSecret: PropTypes.func.isRequired,
+
             /**
             * The function to call when Delete link is clicked
             */
@@ -80,6 +90,8 @@ export default class InstalledOAuthApps extends React.PureComponent {
                 <InstalledOAuthApp
                     key={app.id}
                     oauthApp={app}
+                    regenOAuthAppSecretRequest={this.props.regenOAuthAppSecretRequest}
+                    onRegenerateSecret={this.props.actions.regenOAuthAppSecret}
                     onDelete={this.deleteOAuthApp}
                 />
             );