From 137a3b92e73d4938429720792b1c3721c26d63a3 Mon Sep 17 00:00:00 2001
From: Christopher Henn <chris@chrishenn.net>
Date: Mon, 6 May 2019 11:20:36 -0700
Subject: [PATCH] fix(ui): expand tab key presses to 2 spaces in the Flux
 editor

---
 CHANGELOG.md                            | 1 +
 ui/src/shared/components/FluxEditor.tsx | 2 ++
 ui/src/shared/utils/fluxEditor.ts       | 9 +++++++++
 3 files changed, 12 insertions(+)
 create mode 100644 ui/src/shared/utils/fluxEditor.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4d1cea5be4c..281d349ef1f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 
 ### Bug Fixes
 1. [13753](https://github.com/influxdata/influxdb/pull/13753): Removed hardcoded bucket for Getting Started with Flux dashboard
+1. [13797](https://github.com/influxdata/influxdb/pull/13797): Expand tab key presses to 2 spaces in the Flux editor
 
 ### UI Improvements
 
diff --git a/ui/src/shared/components/FluxEditor.tsx b/ui/src/shared/components/FluxEditor.tsx
index 10928949195..eede5afadcd 100644
--- a/ui/src/shared/components/FluxEditor.tsx
+++ b/ui/src/shared/components/FluxEditor.tsx
@@ -13,6 +13,7 @@ import {EXCLUDED_KEYS} from 'src/shared/constants/fluxEditor'
 
 // Utils
 import {getSuggestions} from 'src/shared/utils/autoComplete'
+import {onTab} from 'src/shared/utils/fluxEditor'
 
 // Types
 import {OnChangeScript, Suggestion} from 'src/types/flux'
@@ -96,6 +97,7 @@ class FluxEditor extends PureComponent<Props, State> {
       theme: 'time-machine',
       completeSingle: false,
       gutters: ['error-gutter'],
+      extraKeys: {Tab: onTab},
     }
 
     return (
diff --git a/ui/src/shared/utils/fluxEditor.ts b/ui/src/shared/utils/fluxEditor.ts
new file mode 100644
index 00000000000..c51ad1982e7
--- /dev/null
+++ b/ui/src/shared/utils/fluxEditor.ts
@@ -0,0 +1,9 @@
+import {Doc} from 'codemirror'
+
+export const onTab = (cm: Doc & {indentSelection: (a: any) => any}) => {
+  if (cm.somethingSelected()) {
+    cm.indentSelection('add')
+  } else {
+    cm.replaceSelection('  ', 'end')
+  }
+}