fix(ui): expand tab key presses to 2 spaces in the Flux editor

CHANGELOG.md

@@ -5,6 +5,7 @@
 1. [13753](https://github.com/influxdata/influxdb/pull/13753): Removed hardcoded bucket for Getting Started with Flux dashboard
 1. [13783](https://github.com/influxdata/influxdb/pull/13783): Ensure map type variables allow for selecting values
 1. [13800](https://github.com/influxdata/influxdb/pull/13800): Generate more idiomatic Flux in query builder
+1. [13797](https://github.com/influxdata/influxdb/pull/13797): Expand tab key presses to 2 spaces in the Flux editor
 
 ### UI Improvements
 

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 (

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')
+  }
+}