HelpTrigger in header (#3457)

* Moved component from services->components * Added help trigger to header * Reverted tooltip-anchor swap * Moved trigger location in html (to mirror saas) * Removed white space * Changed tooltip text to “Help”
getredash · Feb 18, 2019 · 298fe6a · 298fe6a
1 parent f07e613
commit 298fe6a
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 12 deletions.
diff --git a/client/app/assets/less/redash/redash-newstyle.less b/client/app/assets/less/redash/redash-newstyle.less
@@ -669,6 +669,7 @@ body {
   }
 }
 
+.navbar-link-ANGULAR_REMOVE_ME,
 .navbar-default .navbar-nav > li > a {
   color: #000;
   font-weight: 500;
@@ -688,6 +689,12 @@ body {
   //border-radius: 0;
 }
 
+.navbar-link-ANGULAR_REMOVE_ME {
+  line-height: 18px;
+  padding: 16px 15px;
+  display: block;
+}
+
 .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
   background-color: fade(@redash-gray, 15%);
   color: #111;

diff --git a/client/app/services/HelpTrigger.jsx → client/app/components/HelpTrigger.jsx b/client/app/services/HelpTrigger.jsx → client/app/components/HelpTrigger.jsx
@@ -1,32 +1,41 @@
+import { react2angular } from 'react2angular';
 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';
 
 import './HelpTrigger.less';
 
 const DOMAIN = 'https://redash.io';
-const HELP_PATH = '/help/user-guide/';
+const HELP_PATH = '/help';
 const IFRAME_TIMEOUT = 5000;
 const TYPES = {
+  HOME: [
+    '',
+    'Help',
+  ],
   VALUE_SOURCE_OPTIONS: [
-    'querying/query-parameters#Value-Source-Options',
-    'Value Source Options',
+    '/user-guide/querying/query-parameters#Value-Source-Options',
+    'Guide: Value Source Options',
   ],
   SHARE_DASHBOARD: [
-    'dashboards/sharing-dashboards',
-    'Sharing and Embedding Dashboards',
+    '/user-guide/dashboards/sharing-dashboards',
+    'Guide: Sharing and Embedding Dashboards',
   ],
 };
 
-export default class HelpTrigger extends React.PureComponent {
+export class HelpTrigger extends React.Component {
   static propTypes = {
     type: PropTypes.oneOf(Object.keys(TYPES)).isRequired,
+    className: PropTypes.string,
   }
 
+  static defaultProps = {
+    className: null,
+  };
+
   iframeRef = null
 
   iframeLoadingTimeout = null
@@ -71,12 +80,13 @@ export default class HelpTrigger extends React.PureComponent {
 
   render() {
     const [, tooltip] = TYPES[this.props.type];
+    const className = cx('help-trigger', this.props.className);
 
     return (
       <React.Fragment>
-        <Tooltip title={`Guide: ${tooltip}`}>
-          <a href="javascript: void(0)" onClick={this.openDrawer}>
-            <Icon type="question-circle" />
+        <Tooltip title={tooltip}>
+          <a href="javascript: void(0)" onClick={this.openDrawer} className={className}>
+            <i className="fa fa-question-circle" />
           </a>
         </Tooltip>
         <Drawer
@@ -117,3 +127,9 @@ export default class HelpTrigger extends React.PureComponent {
     );
   }
 }
+
+export default function init(ngModule) {
+  ngModule.component('helpTrigger', react2angular(HelpTrigger));
+}
+
+init.init = true;
diff --git a/client/app/services/HelpTrigger.less → client/app/components/HelpTrigger.less b/client/app/services/HelpTrigger.less → client/app/components/HelpTrigger.less
@@ -1,3 +1,7 @@
+.help-trigger {
+  font-size: 15px;
+}
+
 .help-drawer {
   .ant-drawer-body {
     padding: 0;

diff --git a/client/app/components/ParameterMappingInput.jsx b/client/app/components/ParameterMappingInput.jsx
@@ -18,7 +18,7 @@ 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 { HelpTrigger } from '@/components/HelpTrigger';
 
 import './ParameterMappingInput.less';
 

diff --git a/client/app/components/app-header/app-header.html b/client/app/components/app-header/app-header.html
@@ -79,6 +79,9 @@
 
       <!-- Profile -->
       <ul class="nav navbar-nav navbar-right">
+        <li>
+          <help-trigger type="'HOME'" class-name="'navbar-link-ANGULAR_REMOVE_ME'"></help-trigger>
+        </li>
         <li ng-show="$ctrl.currentUser.isAdmin">
           <a href="data_sources" title="Settings"><i class="fa fa-sliders" aria-hidden="true"></i></a>
         </li>

diff --git a/client/app/pages/dashboards/ShareDashboardDialog.jsx b/client/app/pages/dashboards/ShareDashboardDialog.jsx
@@ -8,7 +8,7 @@ import Alert from 'antd/lib/alert';
 import { $http, toastr } from '@/services/ng';
 import { wrap as wrapDialog, DialogPropType } from '@/components/DialogWrapper';
 import InputWithCopy from '@/components/InputWithCopy';
-import HelpTrigger from '@/services/HelpTrigger';
+import { HelpTrigger } from '@/components/HelpTrigger';
 
 const API_SHARE_URL = 'api/dashboards/{id}/share';