Merge pull request #15313 from influxdata/comment-shortcut

feat(ui): Add shortcut for commenting in script editor
influxdata · Oct 3, 2019 · f4dabb7 · f4dabb7
2 parents 4f7e147 + 54cc5be
commit f4dabb7
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,8 @@
 ## v2.0.0-alpha.19 [unreleased]
+
+### Features
+1. [15313](https://github.com/influxdata/influxdb/pull/15313): Add shortcut for toggling comments in script editor
+
 ### Bug Fixes
 1. [15295](https://github.com/influxdata/influxdb/pull/15295): Ensures users are created with an active status 
 

diff --git a/ui/src/shared/components/FluxEditor.tsx b/ui/src/shared/components/FluxEditor.tsx
@@ -4,6 +4,7 @@ import {Controlled as ReactCodeMirror, IInstance} from 'react-codemirror2'
 import {EditorChange, LineWidget, Position} from 'codemirror'
 import {ShowHintOptions} from 'src/types/codemirror'
 import 'src/external/codemirror'
+import 'codemirror/addon/comment/comment'
 
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -97,7 +98,11 @@ class FluxEditor extends PureComponent<Props, State> {
       theme: 'time-machine',
       completeSingle: false,
       gutters: ['error-gutter'],
-      extraKeys: {Tab: onTab},
+      comment: true,
+      extraKeys: {
+        Tab: onTab,
+        'Ctrl-/': 'toggleComment',
+      },
     }
 
     return (

diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss
@@ -84,6 +84,7 @@
 @import 'src/pageLayout/components/RenamablePageTitle.scss';
 @import 'src/timeMachine/components/SelectorList.scss';
 @import 'src/timeMachine/components/Queries.scss';
+@import 'src/timeMachine/components/EditorShortcutsTooltip.scss';
 @import 'src/timeMachine/components/SearchBar.scss';
 @import 'src/timeMachine/components/QueriesTimer.scss';
 @import 'src/timeMachine/components/QueriesSwitcher.scss';

diff --git a/ui/src/timeMachine/components/EditorShortcutsTooltip.scss b/ui/src/timeMachine/components/EditorShortcutsTooltip.scss
@@ -0,0 +1,15 @@
+.editor-shortcuts {
+  width: 250px;
+}
+
+.editor-shortcuts--body {
+  dt {
+    float: left;
+    padding-right: $ix-marg-a;
+    font-weight: 700;
+    color: $g18-cloud;
+  }
+  dd {
+    white-space: nowrap;
+  }
+}
diff --git a/ui/src/timeMachine/components/EditorShortcutsTooltip.tsx b/ui/src/timeMachine/components/EditorShortcutsTooltip.tsx
@@ -0,0 +1,22 @@
+import React, {FC} from 'react'
+
+import QuestionMarkTooltip from 'src/shared/components/question_mark_tooltip/QuestionMarkTooltip'
+
+const EditorShortcutsTooltip: FC = () => {
+  return (
+    <QuestionMarkTooltip
+      testID="editor-shortcuts"
+      tipContent={
+        <div className="editor-shortcuts">
+          <h5>Shortcuts</h5>
+          <dl className="editor-shortcuts--body">
+            <dt>Ctl-/:</dt> <dd>Toggle comment for line or lines</dd>
+            <dt>Ctl-Enter:</dt> <dd>Submit Script</dd>
+          </dl>
+        </div>
+      }
+    />
+  )
+}
+
+export default EditorShortcutsTooltip
diff --git a/ui/src/timeMachine/components/Queries.tsx b/ui/src/timeMachine/components/Queries.tsx
@@ -14,6 +14,7 @@ import TimeMachineQueryBuilder from 'src/timeMachine/components/QueryBuilder'
 import SubmitQueryButton from 'src/timeMachine/components/SubmitQueryButton'
 import RawDataToggle from 'src/timeMachine/components/RawDataToggle'
 import QueryTabs from 'src/timeMachine/components/QueryTabs'
+import EditorShortcutsToolTip from 'src/timeMachine/components/EditorShortcutsTooltip'
 import {
   ComponentSize,
   FlexBox,
@@ -57,7 +58,7 @@ type Props = StateProps & DispatchProps
 
 class TimeMachineQueries extends PureComponent<Props> {
   public render() {
-    const {timeRange, isInCheckOverlay} = this.props
+    const {timeRange, isInCheckOverlay, activeQuery} = this.props
 
     return (
       <div className="time-machine-queries">
@@ -69,6 +70,9 @@ class TimeMachineQueries extends PureComponent<Props> {
               justifyContent={JustifyContent.FlexEnd}
               margin={ComponentSize.Small}
             >
+              {activeQuery.editMode === 'advanced' && (
+                <EditorShortcutsToolTip />
+              )}
               <RawDataToggle />
               {!isInCheckOverlay && (
                 <>