HelpTrigger (getredash#3431)

ranbena · arikfr · commit f2df7170d2f5 · 2019-02-13T10:38:25.000+02:00
* Moved to HelpTrigger

* Moved share dialog “Learn more” to HelpTrigger
diff --git a/client/app/components/ParameterMappingInput.jsx b/client/app/components/ParameterMappingInput.jsx
@@ -18,16 +18,12 @@ import { ParameterValueInput } from '@/components/ParameterValueInput';
 import { ParameterMappingType } from '@/services/widget';
 import { clientConfig } from '@/services/auth';
 import { Query, Parameter } from '@/services/query';
+import HelpTrigger from '@/services/HelpTrigger';
 
 import './ParameterMappingInput.less';
 
 const { Option } = Select;
 
-const HELP_URL = [
-  'https://redash.io/help/user-guide/querying/query-parameters?source=dialog#Value-Source-Options',
-  'Guide: Value Source Options',
-];
-
 export const MappingType = {
   DashboardAddNew: 'dashboard-add-new',
   DashboardMapToExisting: 'dashboard-map-to-existing',
@@ -339,18 +335,11 @@ class MappingEditor extends React.Component {
 
   renderContent() {
     const { mapping, inputError } = this.state;
-    const [helpUrl, tooltip] = HELP_URL;
 
     return (
       <div className="parameter-mapping-editor">
         <header>
-          Edit Source and Value
-          {/* eslint-disable-next-line react/jsx-no-target-blank */}
-          <a href={helpUrl} target="_blank" rel="noopener">
-            <Tooltip title={tooltip}>
-              <Icon type="question-circle" />
-            </Tooltip>
-          </a>
+          Edit Source and Value <HelpTrigger type="VALUE_SOURCE_OPTIONS" />
         </header>
         <ParameterMappingInput
           mapping={mapping}
diff --git a/client/app/pages/dashboards/ShareDashboardDialog.jsx b/client/app/pages/dashboards/ShareDashboardDialog.jsx
@@ -4,13 +4,12 @@ import PropTypes from 'prop-types';
 import Switch from 'antd/lib/switch';
 import Modal from 'antd/lib/modal';
 import Form from 'antd/lib/form';
-import Tooltip from 'antd/lib/tooltip';
 import { $http, toastr } from '@/services/ng';
 import { wrap as wrapDialog, DialogPropType } from '@/components/DialogWrapper';
 import InputWithCopy from '@/components/InputWithCopy';
+import HelpTrigger from '@/services/HelpTrigger';
 
 const API_SHARE_URL = 'api/dashboards/{id}/share';
-const HELP_URL = 'https://redash.io/help/user-guide/dashboards/sharing-dashboards?source=dialog';
 
 class ShareDashboardDialog extends React.Component {
   static propTypes = {
@@ -38,10 +37,7 @@ class ShareDashboardDialog extends React.Component {
         Share Dashboard
         <div className="modal-header-desc">
           Allow public access to this dashboard with a secret address.{' '}
-          <Tooltip title="Guide: Sharing and Embedding Dashboards">
-            { /* eslint-disable-next-line react/jsx-no-target-blank */}
-            <a href={HELP_URL} target="_blank" rel="noopener">Learn more</a>
-          </Tooltip>
+          <HelpTrigger type="SHARE_DASHBOARD" />
         </div>
       </React.Fragment>
     );
diff --git a/client/app/services/HelpTrigger.jsx b/client/app/services/HelpTrigger.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Tooltip from 'antd/lib/tooltip';
+import Icon from 'antd/lib/icon';
+
+const BASE_URL = 'https://redash.io/help/user-guide/';
+const TYPES = {
+  VALUE_SOURCE_OPTIONS: [
+    'querying/query-parameters#Value-Source-Options',
+    'Value Source Options',
+  ],
+  SHARE_DASHBOARD: [
+    'dashboards/sharing-dashboards',
+    'Sharing and Embedding Dashboards',
+  ],
+};
+
+export default class HelpTrigger extends React.PureComponent {
+  static propTypes = {
+    type: PropTypes.oneOf(Object.keys(TYPES)).isRequired,
+  }
+
+  render() {
+    const [path, tooltip] = TYPES[this.props.type];
+    const href = BASE_URL + path;
+    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>
+    );
+  }
+}
