From 6594521d468124216fb2c309316c8797f868c0ca Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Thu, 3 Oct 2019 10:44:32 -0700
Subject: [PATCH 1/4] feat(editor): Add keyboard shortcut for toggling comments

---
 ui/src/shared/components/FluxEditor.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/ui/src/shared/components/FluxEditor.tsx b/ui/src/shared/components/FluxEditor.tsx
index eede5afadcd..b025a029fa9 100644
--- 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 (

From 97587e884000d9e10b4bd7761a986683e91af529 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Thu, 3 Oct 2019 12:57:16 -0700
Subject: [PATCH 2/4] feat(ui): Add tooltip that exposes editor shortcuts in
 the ui

---
 ui/src/style/chronograf.scss                  |  1 +
 .../components/EditorShortcutsTooltip.scss    | 15 +++++++++++++
 .../components/EditorShortcutsTooltip.tsx     | 22 +++++++++++++++++++
 ui/src/timeMachine/components/Queries.tsx     |  6 ++++-
 4 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/timeMachine/components/EditorShortcutsTooltip.scss
 create mode 100644 ui/src/timeMachine/components/EditorShortcutsTooltip.tsx

diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss
index f1dc78d0e47..0a60c617bc4 100644
--- 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
new file mode 100644
index 00000000000..3100192bcdc
--- /dev/null
+++ 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;
+  }
+}
\ No newline at end of file
diff --git a/ui/src/timeMachine/components/EditorShortcutsTooltip.tsx b/ui/src/timeMachine/components/EditorShortcutsTooltip.tsx
new file mode 100644
index 00000000000..9a40f8f7d45
--- /dev/null
+++ 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
index e2f57988c7a..fa3d60df47d 100644
--- 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 && (
                 <>

From 7bf80b55a412b214697d6aa4545a41359fe7e836 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Thu, 3 Oct 2019 13:08:25 -0700
Subject: [PATCH 3/4] chore: update changelog

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e67d496aaa9..0da023c9c84 100644
--- 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 
 

From 54cc5be3c6f2f51beeee3b2d30d8f9589f525c14 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Thu, 3 Oct 2019 14:27:19 -0700
Subject: [PATCH 4/4] fix: add missing semicolon

---
 ui/src/timeMachine/components/EditorShortcutsTooltip.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/timeMachine/components/EditorShortcutsTooltip.scss b/ui/src/timeMachine/components/EditorShortcutsTooltip.scss
index 3100192bcdc..d91b4f62d02 100644
--- a/ui/src/timeMachine/components/EditorShortcutsTooltip.scss
+++ b/ui/src/timeMachine/components/EditorShortcutsTooltip.scss
@@ -7,7 +7,7 @@
     float: left;
     padding-right: $ix-marg-a;
     font-weight: 700;
-    color: $g18-cloud
+    color: $g18-cloud;
   }
   dd {
     white-space: nowrap;