From 4c1494869fae8cbad4dbf68c6bee9e200d24f8c9 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 1 Sep 2022 22:00:15 +0530
Subject: [PATCH] fix(ui) - share tooltip open handler

---
 .../shared/SharePopup/SharePopup.js           | 174 ++++++++++--------
 1 file changed, 95 insertions(+), 79 deletions(-)

diff --git a/frontend/app/components/shared/SharePopup/SharePopup.js b/frontend/app/components/shared/SharePopup/SharePopup.js
index fc379deb7..d4c5ecd98 100644
--- a/frontend/app/components/shared/SharePopup/SharePopup.js
+++ b/frontend/app/components/shared/SharePopup/SharePopup.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { toast } from 'react-toastify';
-import { connectPlayer } from 'Player'
+import { connectPlayer } from 'Player';
 import withRequest from 'HOCs/withRequest';
 import { Icon, Button } from 'UI';
 import styles from './sharePopup.module.css';
@@ -11,25 +11,29 @@ import Select from 'Shared/Select';
 import { Tooltip } from 'react-tippy';
 import cn from 'classnames';
 import { fetchList, init } from 'Duck/integrations/slack';
+import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
 
-@connectPlayer(state => ({
+@connectPlayer((state) => ({
   time: state.time,
 }))
-@connect(state => ({
-  channels: state.getIn([ 'slack', 'list' ]),
-  tenantId: state.getIn([ 'user', 'account', 'tenantId' ]),
-}), { fetchList })
+@connect(
+  (state) => ({
+    channels: state.getIn(['slack', 'list']),
+    tenantId: state.getIn(['user', 'account', 'tenantId']),
+  }),
+  { fetchList }
+)
 @withRequest({
   endpoint: ({ id, entity }, integrationId) =>
-    `/integrations/slack/notify/${ integrationId }/${entity}/${ id }`,
-  method: "POST",
+    `/integrations/slack/notify/${integrationId}/${entity}/${id}`,
+  method: 'POST',
 })
 export default class SharePopup extends React.PureComponent {
   state = {
     comment: '',
     isOpen: false,
-    channelId: this.props.channels.getIn([ 0, 'webhookId' ]),
-  }
+    channelId: this.props.channels.getIn([0, 'webhookId']),
+  };
 
   componentDidMount() {
     if (this.props.channels.size === 0) {
@@ -37,104 +41,116 @@ export default class SharePopup extends React.PureComponent {
     }
   }
 
-  editMessage = e => this.setState({ comment: e.target.value })
-  share = () => this.props.request({ comment: this.state.comment }, this.state.channelId)
-    .then(this.handleSuccess)
+  editMessage = (e) => this.setState({ comment: e.target.value });
+  share = () =>
+    this.props
+      .request({ comment: this.state.comment }, this.state.channelId)
+      .then(this.handleSuccess);
 
   handleOpen = () => {
-    setTimeout(function() {
+    setTimeout(function () {
       document.getElementById('message').focus();
-    }, 100)
-  }
+    }, 100);
+  };
 
   handleClose = () => {
     this.setState({ comment: '' });
-  }
+  };
 
   handleSuccess = () => {
+    this.setState({ isOpen: false, comment: '' })
     toast.success('Sent to Slack.');
-  }
+  };
 
-  changeChannel = ({ value }) => this.setState({ channelId: value })
+  changeChannel = ({ value }) => this.setState({ channelId: value });
+
+  onClickHandler = () => {
+    this.setState({ isOpen: true });
+  };
 
   render() {
     const { trigger, loading, channels, showCopyLink = false, time } = this.props;
-    const { comment, channelId } = this.state;
+    const { comment, channelId, isOpen } = this.state;
 
-    const options = channels.map(({ webhookId, name }) => ({ value: webhookId, label: name })).toJS();
+    const options = channels
+      .map(({ webhookId, name }) => ({ value: webhookId, label: name }))
+      .toJS();
     return (
       <Tooltip
-        theme='light'
+        open={isOpen}
+        theme="light"
         interactive
-        position='bottom'
+        position="bottom"
         unmountHTMLWhenHide
         useContext
         arrow
         trigger="click"
         shown={this.handleOpen}
-        beforeHidden={this.handleClose}
+        // beforeHidden={this.handleClose}
         html={
-          <div className={ styles.wrapper }>
-            <div className={ styles.header }>
-              <div className={ cn(styles.title, 'text-lg') }>Share this session link to Slack</div>
-            </div>
-            { options.length === 0 ?
-              <>
-                <div className={ styles.body }>
-                  <IntegrateSlackButton />
-                </div>
-                { showCopyLink && (
+          <OutsideClickDetectingDiv
+            className={cn('relative flex items-center')}
+            onClickOutside={() => {
+              this.setState({ isOpen: false })
+            }}
+          >
+            <div className={styles.wrapper}>
+              <div className={styles.header}>
+                <div className={cn(styles.title, 'text-lg')}>Share this session link to Slack</div>
+              </div>
+              {options.length === 0 ? (
+                <>
+                  <div className={styles.body}>
+                    <IntegrateSlackButton />
+                  </div>
+                  {showCopyLink && (
+                    <div className={styles.footer}>
+                      <SessionCopyLink time={time} />
+                    </div>
+                  )}
+                </>
+              ) : (
+                <div>
+                  <div className={styles.body}>
+                    <textarea
+                      name="message"
+                      id="message"
+                      cols="30"
+                      rows="4"
+                      resize="none"
+                      onChange={this.editMessage}
+                      value={comment}
+                      placeholder="Add Message (Optional)"
+                      className="p-4"
+                    />
+
+                    <div className="flex items-center justify-between">
+                      <Select
+                        options={options}
+                        defaultValue={channelId}
+                        onChange={this.changeChannel}
+                        className="mr-4"
+                      />
+                      <div>
+                        <Button onClick={this.share} primary>
+                          <div className="flex items-center">
+                            <Icon name="integrations/slack-bw" size="18" marginRight="10" />
+                            {loading ? 'Sending...' : 'Send'}
+                          </div>
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
                   <div className={styles.footer}>
                     <SessionCopyLink time={time} />
                   </div>
-                )}
-              </>
-            :
-              <div>
-                <div className={ styles.body }>
-                  <textarea
-                    name="message"
-                    id="message"
-                    cols="30"
-                    rows="4"
-                    resize="none"
-                    onChange={ this.editMessage }
-                    value={ comment }
-                    placeholder="Add Message (Optional)"
-                    className="p-4"
-                  />
-
-                  <div className="flex items-center justify-between">
-                    <Select
-                      options={ options }
-                      defaultValue={ channelId }
-                      onChange={ this.changeChannel }
-                      className="mr-4"
-                    />
-                    <div>
-                      <Button
-                        onClick={ this.share }
-                        primary
-                      >
-                        <div className='flex items-center'>
-                          <Icon name="integrations/slack-bw" size="18" marginRight="10" />
-                          { loading ? 'Sending...' : 'Send' }
-                        </div>
-                      </Button>
-                    </div>
-                  </div>
                 </div>
-                <div className={ styles.footer }>
-                  <SessionCopyLink time={time} />
-                </div>
-
-              </div>
-            }
-          </div>
+              )}
+            </div>
+          </OutsideClickDetectingDiv>
         }
-
       >
-          {trigger}
+        <span onClick={this.onClickHandler}>{trigger}</span>
       </Tooltip>
     );
   }