From de8f246b5590bb1b23479c33840ec8db6c9a8cf4 Mon Sep 17 00:00:00 2001
From: Ran Byron <ranbena@gmail.com>
Date: Thu, 14 Feb 2019 14:00:53 +0200
Subject: [PATCH 1/4] HelpTrigger to open in drawer

---
 client/app/assets/less/ant.less      |   5 +
 client/app/services/HelpTrigger.jsx  | 134 +++++++++++++++++++++++++--
 client/app/services/HelpTrigger.less |  21 +++++
 3 files changed, 151 insertions(+), 9 deletions(-)
 create mode 100644 client/app/services/HelpTrigger.less

diff --git a/client/app/assets/less/ant.less b/client/app/assets/less/ant.less
index d6a387cefb..a5700d491f 100644
--- a/client/app/assets/less/ant.less
+++ b/client/app/assets/less/ant.less
@@ -19,6 +19,7 @@
 @import '~antd/lib/tag/style/index';
 @import '~antd/lib/grid/style/index';
 @import '~antd/lib/switch/style/index';
+@import '~antd/lib/drawer/style/index';
 @import 'inc/ant-variables';
 
 // Remove bold in labels for Ant checkboxes and radio buttons
@@ -204,4 +205,8 @@
   color: @text-color-secondary;
   font-weight: normal;
   margin-top: 4px;
+}
+
+.ant-popover {
+  z-index: 1000; // make sure it doesn't cover drawer
 }
\ No newline at end of file
diff --git a/client/app/services/HelpTrigger.jsx b/client/app/services/HelpTrigger.jsx
index fef0d7228b..b8e79b4c92 100644
--- a/client/app/services/HelpTrigger.jsx
+++ b/client/app/services/HelpTrigger.jsx
@@ -1,9 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import Tooltip from 'antd/lib/tooltip';
 import Icon from 'antd/lib/icon';
+import Drawer from 'antd/lib/drawer';
+import { BigMessage } from '@/components/BigMessage';
 
-const BASE_URL = 'https://redash.io/help/user-guide/';
+import './HelpTrigger.less';
+
+const DOMAIN = 'https://redash.io';
+const HELP_PATH = '/help/user-guide/';
+const MESSAGES = {
+  HELP_DRAWER_READY: 'drawer_ready',
+  HELP_DRAWER_REQUEST: 'drawer_request',
+};
+const IFRAME_TIMEOUT = 5000;
 const TYPES = {
   VALUE_SOURCE_OPTIONS: [
     'querying/query-parameters#Value-Source-Options',
@@ -20,16 +31,121 @@ export default class HelpTrigger extends React.PureComponent {
     type: PropTypes.oneOf(Object.keys(TYPES)).isRequired,
   }
 
+  iframeRef = null
+
+  iframeLoadingTimeout = null;
+
+  constructor(props) {
+    super(props);
+    this.iframeRef = React.createRef();
+  }
+
+  state = {
+    visible: false,
+    loading: false,
+    error: false,
+  }
+
+  componentWillUnmount() {
+    this.onDrawerClosed();
+  }
+
+  get helpUrl() {
+    const [pagePath] = TYPES[this.props.type];
+    return DOMAIN + HELP_PATH + pagePath;
+  }
+
+  onIframeLoaded = () => {
+    const { contentWindow } = this.iframeRef.current;
+    contentWindow.postMessage(MESSAGES.HELP_DRAWER_REQUEST, DOMAIN);
+  }
+
+  onIframeError = () => {
+    this.setState({ error: true, loading: false });
+  }
+
+  onIframeReady = () => {
+    this.setState({ loading: false });
+    this.removeIframeListeners();
+  }
+
+  onPostMessageReceived = (event) => {
+    if (event.origin === DOMAIN && event.data === MESSAGES.HELP_DRAWER_READY) {
+      this.onIframeReady();
+    }
+  }
+
+  openDrawer = () => {
+    this.setState({ visible: true, loading: true, error: false });
+    setTimeout(this.onDrawerOpened, 300); // to prevent animation jank
+  }
+
+  closeDrawer = () => {
+    this.setState({ visible: false });
+    this.removeIframeListeners();
+  }
+
+  onDrawerOpened = () => {
+    this.addIframeListeners();
+    this.iframeRef.current.src = this.helpUrl;
+  }
+
+  addIframeListeners = () => {
+    window.addEventListener('message', this.onPostMessageReceived, DOMAIN);
+    this.iframeRef.current.addEventListener('load', this.onIframeLoaded);
+    this.iframeLoadingTimeout = setTimeout(this.onIframeError, IFRAME_TIMEOUT);
+  }
+
+  removeIframeListeners = () => {
+    window.removeEventListener('message', this.onPostMessageReceived);
+    this.iframeRef.current.removeEventListener('load', this.onIframeLoaded);
+    window.clearTimeout(this.iframeLoadingTimeout);
+  }
+
   render() {
-    const [path, tooltip] = TYPES[this.props.type];
-    const href = BASE_URL + path;
+    const [, tooltip] = TYPES[this.props.type];
+
     return (
-      <Tooltip title={`Guide: ${tooltip}`}>
-        {/* eslint-disable-next-line react/jsx-no-target-blank */}
-        <a href={href} target="_blank" rel="noopener">
-          <Icon type="question-circle" />
-        </a>
-      </Tooltip>
+      <React.Fragment>
+        <Tooltip title={`Guide: ${tooltip}`}>
+          <a href="javascript: void(0)" onClick={this.openDrawer}>
+            <Icon type="question-circle" />
+          </a>
+        </Tooltip>
+        <Drawer
+          placement="right"
+          onClose={this.closeDrawer}
+          visible={this.state.visible}
+          className="help-drawer"
+          destroyOnClose
+          width={450}
+        >
+          {/* iframe */}
+          {!this.state.error && (
+            <iframe
+              ref={this.iframeRef}
+              title="Redash Help"
+              src="about:blank"
+              className={cx({ ready: !this.state.loading })}
+            />
+          )}
+
+          {/* loading indicator */}
+          {this.state.loading && (
+            <BigMessage icon="fa-spinner fa-2x fa-pulse" message="Loading..." className="help-message" />
+          )}
+
+          {/* error message */}
+          {this.state.error && (
+            <BigMessage icon="fa-exclamation-circle" className="help-message">
+              Something went wrong.<br />
+              {/* eslint-disable-next-line react/jsx-no-target-blank */}
+              <a href={this.helpUrl + '?s=help_error'} target="_blank" rel="noopener">Click here</a>{' '}
+              to open the document in a new window.
+            </BigMessage>
+          )}
+        </Drawer>
+      </React.Fragment>
     );
   }
 }
diff --git a/client/app/services/HelpTrigger.less b/client/app/services/HelpTrigger.less
new file mode 100644
index 0000000000..35c566d11e
--- /dev/null
+++ b/client/app/services/HelpTrigger.less
@@ -0,0 +1,21 @@
+.help-drawer {
+  .ant-drawer-body {
+    padding: 0;
+    height: 100%; // to allow iframe full dimensions
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  iframe {
+    width: 0;
+    visibility: hidden;
+  }
+
+  iframe.ready {
+    border: 0;
+    width: 100%;
+    height: 100%;
+    visibility: visible;
+  }
+}
\ No newline at end of file

From 467de31d19dfaceef8ba87e06a2a3ac7f81fbfb2 Mon Sep 17 00:00:00 2001
From: Ran Byron <ranbena@gmail.com>
Date: Thu, 14 Feb 2019 15:53:04 +0200
Subject: [PATCH 2/4] =?UTF-8?q?Fixed=20=E2=80=9Ctypo=E2=80=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/app/services/HelpTrigger.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/app/services/HelpTrigger.jsx b/client/app/services/HelpTrigger.jsx
index b8e79b4c92..f15d403b36 100644
--- a/client/app/services/HelpTrigger.jsx
+++ b/client/app/services/HelpTrigger.jsx
@@ -47,7 +47,7 @@ export default class HelpTrigger extends React.PureComponent {
   }
 
   componentWillUnmount() {
-    this.onDrawerClosed();
+    this.removeIframeListeners();
   }
 
   get helpUrl() {

From 8a752b274066dec63b0604f5f09c908b63bb0e45 Mon Sep 17 00:00:00 2001
From: Ran Byron <ranbena@gmail.com>
Date: Thu, 14 Feb 2019 18:35:25 +0200
Subject: [PATCH 3/4] Simplified version - removed postMessage

---
 client/app/services/HelpTrigger.jsx | 54 ++++++-----------------------
 1 file changed, 11 insertions(+), 43 deletions(-)

diff --git a/client/app/services/HelpTrigger.jsx b/client/app/services/HelpTrigger.jsx
index f15d403b36..c22aef9235 100644
--- a/client/app/services/HelpTrigger.jsx
+++ b/client/app/services/HelpTrigger.jsx
@@ -10,10 +10,6 @@ import './HelpTrigger.less';
 
 const DOMAIN = 'https://redash.io';
 const HELP_PATH = '/help/user-guide/';
-const MESSAGES = {
-  HELP_DRAWER_READY: 'drawer_ready',
-  HELP_DRAWER_REQUEST: 'drawer_request',
-};
 const IFRAME_TIMEOUT = 5000;
 const TYPES = {
   VALUE_SOURCE_OPTIONS: [
@@ -33,7 +29,7 @@ export default class HelpTrigger extends React.PureComponent {
 
   iframeRef = null
 
-  iframeLoadingTimeout = null;
+  iframeLoadingTimeout = null
 
   constructor(props) {
     super(props);
@@ -47,7 +43,7 @@ export default class HelpTrigger extends React.PureComponent {
   }
 
   componentWillUnmount() {
-    this.removeIframeListeners();
+    clearTimeout(this.iframeLoadingTimeout);
   }
 
   get helpUrl() {
@@ -56,50 +52,21 @@ export default class HelpTrigger extends React.PureComponent {
   }
 
   onIframeLoaded = () => {
-    const { contentWindow } = this.iframeRef.current;
-    contentWindow.postMessage(MESSAGES.HELP_DRAWER_REQUEST, DOMAIN);
+    this.setState({ loading: false });
+    clearTimeout(this.iframeLoadingTimeout);
   }
 
   onIframeError = () => {
     this.setState({ error: true, loading: false });
   }
 
-  onIframeReady = () => {
-    this.setState({ loading: false });
-    this.removeIframeListeners();
-  }
-
-  onPostMessageReceived = (event) => {
-    if (event.origin === DOMAIN && event.data === MESSAGES.HELP_DRAWER_READY) {
-      this.onIframeReady();
-    }
-  }
-
   openDrawer = () => {
     this.setState({ visible: true, loading: true, error: false });
-    setTimeout(this.onDrawerOpened, 300); // to prevent animation jank
-  }
-
-  closeDrawer = () => {
-    this.setState({ visible: false });
-    this.removeIframeListeners();
-  }
-
-  onDrawerOpened = () => {
-    this.addIframeListeners();
-    this.iframeRef.current.src = this.helpUrl;
-  }
-
-  addIframeListeners = () => {
-    window.addEventListener('message', this.onPostMessageReceived, DOMAIN);
-    this.iframeRef.current.addEventListener('load', this.onIframeLoaded);
-    this.iframeLoadingTimeout = setTimeout(this.onIframeError, IFRAME_TIMEOUT);
-  }
-
-  removeIframeListeners = () => {
-    window.removeEventListener('message', this.onPostMessageReceived);
-    this.iframeRef.current.removeEventListener('load', this.onIframeLoaded);
-    window.clearTimeout(this.iframeLoadingTimeout);
+    // wait for drawer animation to complete so there's no animation jank
+    setTimeout(() => {
+      this.iframeRef.current.src = this.helpUrl;
+      this.iframeLoadingTimeout = setTimeout(this.onIframeError, IFRAME_TIMEOUT); // safety
+    }, 300);
   }
 
   render() {
@@ -114,7 +81,7 @@ export default class HelpTrigger extends React.PureComponent {
         </Tooltip>
         <Drawer
           placement="right"
-          onClose={this.closeDrawer}
+          onClose={() => this.setState({ visible: false })}
           visible={this.state.visible}
           className="help-drawer"
           destroyOnClose
@@ -127,6 +94,7 @@ export default class HelpTrigger extends React.PureComponent {
               title="Redash Help"
               src="about:blank"
               className={cx({ ready: !this.state.loading })}
+              onLoad={this.onIframeLoaded}
             />
           )}
 

From 6368c4350dab86ac20b9bbdaf9a3c7ba087c3df2 Mon Sep 17 00:00:00 2001
From: Ran Byron <ranbena@gmail.com>
Date: Sun, 17 Feb 2019 10:27:23 +0200
Subject: [PATCH 4/4] Changed some wording

---
 client/app/services/HelpTrigger.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/app/services/HelpTrigger.jsx b/client/app/services/HelpTrigger.jsx
index c22aef9235..bcf55de94c 100644
--- a/client/app/services/HelpTrigger.jsx
+++ b/client/app/services/HelpTrigger.jsx
@@ -109,7 +109,7 @@ export default class HelpTrigger extends React.PureComponent {
               Something went wrong.<br />
               {/* eslint-disable-next-line react/jsx-no-target-blank */}
               <a href={this.helpUrl + '?s=help_error'} target="_blank" rel="noopener">Click here</a>{' '}
-              to open the document in a new window.
+              to open the page in a new window.
             </BigMessage>
           )}
         </Drawer>