Submit script on Control-Enter

ui/src/shared/components/FluxEditor.tsx

@@ -31,6 +31,7 @@ interface Props {
   script: string
   status: Status
   onChangeScript: OnChangeScript
+  onSubmitScript?: () => void
   suggestions: Suggestion[]
   visibility?: string
 }
@@ -185,6 +186,11 @@ class FluxEditor extends PureComponent<Props, State> {
 
   private handleKeyUp = (__, e: KeyboardEvent) => {
     const {ctrlKey, metaKey, key} = e
+    const {onSubmitScript} = this.props
+
+    if (ctrlKey && key === 'Enter' && onSubmitScript) {
+      onSubmitScript()
+    }
 
     if (ctrlKey && key === ' ') {
       this.showAutoComplete()

ui/src/shared/components/TimeMachine.tsx

@@ -5,7 +5,9 @@ import {get} from 'lodash'
 
 // Components
 import TimeMachineControls from 'src/shared/components/TimeMachineControls'
-import Threesizer from 'src/shared/components/threesizer/Threesizer'
+import Threesizer, {
+  DivisionProps,
+} from 'src/shared/components/threesizer/Threesizer'
 import TimeMachineBottom from 'src/shared/components/TimeMachineBottom'
 import TimeMachineVis from 'src/shared/components/TimeMachineVis'
 import TimeSeries from 'src/shared/components/TimeSeries'
@@ -32,7 +34,7 @@ const TimeMachine: SFC<StateProps> = props => {
     <div className="time-machine">
       <TimeSeries link={queryLink} queries={queries}>
         {queriesState => {
-          const divisions = [
+          const divisions: DivisionProps[] = [
             {
               handleDisplay: 'none',
               render: () => <TimeMachineVis queriesState={queriesState} />,
@@ -41,7 +43,9 @@ const TimeMachine: SFC<StateProps> = props => {
             },
             {
               handlePixels: 12,
-              render: () => <TimeMachineBottom queryStatus={queriesState.loading} />,
+              render: () => (
+                <TimeMachineBottom queryStatus={queriesState.loading} />
+              ),
               headerOrientation: HANDLE_HORIZONTAL,
               size: 0.67,
             },

ui/src/shared/components/TimeMachineQueryEditor.tsx

@@ -76,6 +76,7 @@ class TimeMachineQueryEditor extends PureComponent<Props> {
             script={draftScript}
             status={{type: '', text: ''}}
             onChangeScript={onSetDraftScript}
+            onSubmitScript={onSubmitScript}
             suggestions={[]}
           />
         ),

ui/src/shared/components/flux_functions_toolbar/TooltipLink.tsx

@@ -1,23 +1,17 @@
-import React, {PureComponent} from 'react'
+import React, {SFC} from 'react'
 
 interface Props {
   link: string
 }
 
-class TooltipLink extends PureComponent<Props> {
-  public render() {
-    const {link} = this.props
-
-    return (
-      <p>
-        Still have questions? Check out the{' '}
-        <a target="_blank" href={link}>
-          Flux Docs
-        </a>
-        .
-      </p>
-    )
-  }
-}
+const TooltipLink: SFC<Props> = ({link}) => (
+  <p>
+    Still have questions? Check out the{' '}
+    <a target="_blank" href={link}>
+      Flux Docs
+    </a>
+    .
+  </p>
+)
 
 export default TooltipLink

ui/src/shared/components/threesizer/Threesizer.tsx

@@ -29,13 +29,14 @@ interface State {
   dragEvent: any
 }
 
-interface DivisionProps {
+export interface DivisionProps {
   name?: string
   handleDisplay?: string
   handlePixels?: number
   style?: CSSProperties
   size?: number
   headerButtons?: JSX.Element[]
+  headerOrientation?: string
   render: (visibility: string, pixels: number) => ReactElement<any>
 }