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

4 files changed, 233 insertions, 1 deletions

diff --git a/webapp/tests/components/integrations/__snapshots__/installed_oauth_app.test.jsx.snap b/webapp/tests/components/integrations/__snapshots__/installed_oauth_app.test.jsx.snap
new file mode 100644
index 000000000..f4e8fb464
--- /dev/null
+++ b/webapp/tests/components/integrations/__snapshots__/installed_oauth_app.test.jsx.snap
@@ -0,0 +1,155 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/integrations/InstalledOAuthApp should filter out OAuthApp 1`] = `null`;
+
+exports[`components/integrations/InstalledOAuthApp should match snapshot 1`] = `
+<div
+  className="backstage-list__item"
+>
+  <div
+    className="integration__icon integration-list__icon"
+  >
+    <img
+      src="https://test.com/icon"
+    />
+  </div>
+  <div
+    className="item-details"
+  >
+    <div
+      className="item-details__row"
+    >
+      <span
+        className="item-details__name"
+      >
+        testApp
+      </span>
+    </div>
+    <div
+      className="item-details__row"
+    >
+      <span
+        className="item-details__description"
+      >
+        testing
+      </span>
+    </div>
+    <div
+      className="item-details__row"
+    >
+      <span
+        className="item-details__url"
+      >
+        <FormattedHTMLMessage
+          defaultMessage="Is Trusted: <strong>{isTrusted}</strong>"
+          id="installed_oauth_apps.is_trusted"
+          values={
+            Object {
+              "isTrusted": "Yes",
+            }
+          }
+        />
+      </span>
+    </div>
+    <div
+      className="item-details__row"
+    >
+      <span
+        className="item-details__token"
+      >
+        <FormattedHTMLMessage
+          defaultMessage="Client ID: <strong>{clientId}</strong>"
+          id="installed_integrations.client_id"
+          values={
+            Object {
+              "clientId": "facxd9wpzpbpfp8pad78xj75pr",
+            }
+          }
+        />
+      </span>
+    </div>
+    <div
+      className="item-details__row"
+    >
+      <span
+        className="item-details__token"
+      >
+        <FormattedHTMLMessage
+          defaultMessage="Client Secret: <strong>{clientSecret}</strong>"
+          id="installed_integrations.client_secret"
+          values={
+            Object {
+              "clientSecret": "***************",
+            }
+          }
+        />
+      </span>
+    </div>
+    <div
+      className="item-details__row"
+    >
+      <span
+        className="item-details__url"
+      >
+        <FormattedMessage
+          defaultMessage="Callback URLs: {urls}"
+          id="installed_integrations.callback_urls"
+          values={
+            Object {
+              "urls": "https://test.com/callback, https://test.com/callback2",
+            }
+          }
+        />
+      </span>
+    </div>
+    <div
+      className="item-details__row"
+    >
+      <span
+        className="item-details__creation"
+      >
+        <FormattedMessage
+          defaultMessage="Created by {creator} on {createAt, date, full}"
+          id="installed_integrations.creation"
+          values={
+            Object {
+              "createAt": 1501365458934,
+              "creator": "",
+            }
+          }
+        />
+      </span>
+    </div>
+  </div>
+  <div
+    className="item-actions"
+  >
+    <a
+      href="#"
+      onClick={[Function]}
+    >
+      <FormattedMessage
+        defaultMessage="Show Secret"
+        id="installed_integrations.showSecret"
+        values={Object {}}
+      />
+    </a>
+     - 
+    <a
+      href="#"
+      onClick={[Function]}
+    >
+      <FormattedMessage
+        defaultMessage="Regenerate Secret"
+        id="installed_integrations.regenSecret"
+        values={Object {}}
+      />
+    </a>
+     - 
+    <DeleteIntegration
+      messageId="installed_oauth_apps.delete.confirm"
+      onDelete={[Function]}
+    />
+  </div>
+</div>
+`;
diff --git a/webapp/tests/components/integrations/__snapshots__/installed_oauth_apps.test.jsx.snap b/webapp/tests/components/integrations/__snapshots__/installed_oauth_apps.test.jsx.snap
index 022bc1476..c6ef12112 100644
--- a/webapp/tests/components/integrations/__snapshots__/installed_oauth_apps.test.jsx.snap
+++ b/webapp/tests/components/integrations/__snapshots__/installed_oauth_apps.test.jsx.snap
@@ -72,6 +72,7 @@ exports[`components/integrations/InstalledOAuthApps should match snapshot 1`] =
       }
     }
     onDelete={[Function]}
+    onRegenerateSecret={[Function]}
   />
   <InstalledOAuthApp
     oauthApp={
@@ -93,6 +94,7 @@ exports[`components/integrations/InstalledOAuthApps should match snapshot 1`] =
       }
     }
     onDelete={[Function]}
+    onRegenerateSecret={[Function]}
   />
 </BackstageList>
 `;
diff --git a/webapp/tests/components/integrations/installed_oauth_app.test.jsx b/webapp/tests/components/integrations/installed_oauth_app.test.jsx
new file mode 100644
index 000000000..ff27a5768
--- /dev/null
+++ b/webapp/tests/components/integrations/installed_oauth_app.test.jsx
@@ -0,0 +1,71 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import {shallow} from 'enzyme';
+
+import InstalledOAuthApp from 'components/integrations/components/installed_oauth_app.jsx';
+
+describe('components/integrations/InstalledOAuthApp', () => {
+    const emptyFunction = jest.fn();
+    const app = {
+        id: 'facxd9wpzpbpfp8pad78xj75pr',
+        name: 'testApp',
+        client_secret: '88cxd9wpzpbpfp8pad78xj75pr',
+        create_at: 1501365458934,
+        creator_id: '88oybd1dwfdoxpkpw1h5kpbyco',
+        description: 'testing',
+        homepage: 'https://test.com',
+        icon_url: 'https://test.com/icon',
+        is_trusted: true,
+        update_at: 1501365458934,
+        callback_urls: ['https://test.com/callback', 'https://test.com/callback2']
+    };
+
+    test('should match snapshot', () => {
+        const wrapper = shallow(
+            <InstalledOAuthApp
+                oauthApp={app}
+                onRegenerateSecret={emptyFunction}
+                onDelete={emptyFunction}
+                filter={''}
+            />
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should call onRegenerateSecret function', () => {
+        const onRegenerateSecret = jest.genMockFunction().mockImplementation(
+            () => {
+                return new Promise((resolve) => {
+                    process.nextTick(() => resolve());
+                });
+            }
+        );
+
+        const wrapper = shallow(
+            <InstalledOAuthApp
+                oauthApp={app}
+                onRegenerateSecret={onRegenerateSecret}
+                onDelete={emptyFunction}
+                filter={''}
+            />
+        );
+        wrapper.find('div.item-actions a').at(1).simulate('click', {preventDefault() {
+            return jest.fn();
+        }});
+        expect(onRegenerateSecret).toBeCalled();
+    });
+
+    test('should filter out OAuthApp', () => {
+        const wrapper = shallow(
+            <InstalledOAuthApp
+                oauthApp={app}
+                onRegenerateSecret={emptyFunction}
+                onDelete={emptyFunction}
+                filter={'filter'}
+            />
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
+});
\ No newline at end of file
diff --git a/webapp/tests/components/integrations/installed_oauth_apps.test.jsx b/webapp/tests/components/integrations/installed_oauth_apps.test.jsx
index 4f3ca6ba8..2e5ccad7a 100644
--- a/webapp/tests/components/integrations/installed_oauth_apps.test.jsx
+++ b/webapp/tests/components/integrations/installed_oauth_apps.test.jsx
@@ -44,7 +44,11 @@ describe('components/integrations/InstalledOAuthApps', () => {
                 team={{name: 'test'}}
                 oauthApps={oauthApps}
                 isSystemAdmin={true}
-                actions={{getOAuthApps: emptyFunction, deleteOAuthApp: emptyFunction}}
+                actions={{
+                    getOAuthApps: emptyFunction,
+                    regenOAuthAppSecret: emptyFunction,
+                    deleteOAuthApp: emptyFunction
+                }}
             />
         );
         expect(wrapper.find('InstalledOAuthApp').length).toBe(2);