From cd2910a121055eaa3b659a6ef2797a4ec73f4e29 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 20 May 2021 23:26:58 +0530
Subject: [PATCH] fix: integrate slack button redirect, and doc link

---
 .../SlackChannelList/SlackChannelList.js      | 15 ++++++-----
 .../IntegrateSlackButton.js                   | 26 +++++++++++++++++++
 .../shared/IntegrateSlackButton/index.js      |  1 +
 .../shared/SharePopup/SharePopup.js           |  8 ++----
 4 files changed, 37 insertions(+), 13 deletions(-)
 create mode 100644 frontend/app/components/shared/IntegrateSlackButton/IntegrateSlackButton.js
 create mode 100644 frontend/app/components/shared/IntegrateSlackButton/index.js

diff --git a/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.js b/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.js
index 6c7909169..e854dfce2 100644
--- a/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.js
+++ b/frontend/app/components/Client/Integrations/SlackChannelList/SlackChannelList.js
@@ -1,7 +1,8 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import { TextEllipsis, NoContent } from 'UI';
+import { NoContent } from 'UI';
 import { remove, edit } from 'Duck/integrations/slack'
+import DocLink from 'Shared/DocLink/DocLink';
 
 function SlackChannelList(props) {
   const { list } = props;
@@ -14,7 +15,12 @@ function SlackChannelList(props) {
   return (
     <div className="mt-6">
       <NoContent
-        title="No data available."
+        title={
+          <div>
+            <div className="text-base text-left p-5">Integrate Slack with OpenReplay and share insights with the rest of the team, directly from the recording page.</div>
+            <DocLink className="mt-4" label="Integrate Slack" url="https://docs.openreplay.com/integrations/slack" />
+          </div>
+        }
         size="small"
         show={ list.size === 0 }
       >
@@ -30,11 +36,6 @@ function SlackChannelList(props) {
                 {c.endpoint}
               </div>
             </div>
-            {/* <div className="flex-shrink-0">
-              <Button plain onClick={() => remove(c.webhookId) }>
-                <Icon name="trash"/>
-              </Button>
-            </div> */}
           </div>
         ))}
       </NoContent>
diff --git a/frontend/app/components/shared/IntegrateSlackButton/IntegrateSlackButton.js b/frontend/app/components/shared/IntegrateSlackButton/IntegrateSlackButton.js
new file mode 100644
index 000000000..c308f33bf
--- /dev/null
+++ b/frontend/app/components/shared/IntegrateSlackButton/IntegrateSlackButton.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { IconButton } from 'UI'
+import { CLIENT_TABS, client as clientRoute } from 'App/routes';
+import { withRouter } from 'react-router-dom';
+
+function IntegrateSlackButton({ history, tenantId }) {
+  const gotoPreferencesIntegrations = () => {
+    history.push(clientRoute(CLIENT_TABS.INTEGRATIONS));
+  }
+
+  return (
+    <div>
+      <IconButton
+        className="my-auto mt-2 mb-2"
+        icon="integrations/slack"
+        label="Integrate Slack"
+        onClick={gotoPreferencesIntegrations}
+      />
+    </div>
+  )
+}
+
+export default withRouter(connect(state => ({
+  tenantId: state.getIn([ 'user', 'client', 'tenantId' ]),
+}))(IntegrateSlackButton))
diff --git a/frontend/app/components/shared/IntegrateSlackButton/index.js b/frontend/app/components/shared/IntegrateSlackButton/index.js
new file mode 100644
index 000000000..f2f8f2e16
--- /dev/null
+++ b/frontend/app/components/shared/IntegrateSlackButton/index.js
@@ -0,0 +1 @@
+export { default } from './IntegrateSlackButton'
\ No newline at end of file
diff --git a/frontend/app/components/shared/SharePopup/SharePopup.js b/frontend/app/components/shared/SharePopup/SharePopup.js
index 845229034..adf3b5af7 100644
--- a/frontend/app/components/shared/SharePopup/SharePopup.js
+++ b/frontend/app/components/shared/SharePopup/SharePopup.js
@@ -4,6 +4,7 @@ import withRequest from 'HOCs/withRequest';
 import { Popup, Dropdown, Icon, IconButton } from 'UI';
 import { pause } from 'Player';
 import styles from './sharePopup.css';
+import IntegrateSlackButton from '../IntegrateSlackButton/IntegrateSlackButton';
 
 @connect(state => ({
   channels: state.getIn([ 'slack', 'list' ]),
@@ -62,12 +63,7 @@ export default class SharePopup extends React.PureComponent {
             </div>
             { options.length === 0 ?
               <div className={ styles.body }>
-                <a 
-                  href={ `https://slack.com/oauth/authorize?client_id=252578014882.345694377157&scope=incoming-webhook&state=${ tenantId }` }
-                  target="_blank"
-                >
-                  <IconButton className="my-auto mt-2 mb-2" icon="integrations/slack" label="Integrate Slack" />
-                </a>
+                <IntegrateSlackButton />
               </div>
             :
               <div>