From 45d1c7ad33a7a9b281cb334110a6ef78e06407dc Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Mon, 16 Apr 2018 14:53:54 -0700
Subject: [PATCH 1/7] Add inputs for various argument types

---
 ui/src/ifql/components/FuncArg.tsx           | 63 ++++++++++++++++++++
 ui/src/ifql/components/FuncArgInput.tsx      | 46 ++++++++++++++
 ui/src/ifql/components/FuncArgs.tsx          | 22 +++++--
 ui/src/ifql/components/FuncNode.tsx          |  8 ++-
 ui/src/ifql/components/TimeMachine.tsx       | 10 +++-
 ui/src/ifql/constants/argumentTypes.ts       | 13 ++++
 ui/src/ifql/containers/IFQLPage.tsx          | 22 +++++++
 ui/test/ifql/components/TimeMachine.test.tsx |  1 +
 8 files changed, 176 insertions(+), 9 deletions(-)
 create mode 100644 ui/src/ifql/components/FuncArg.tsx
 create mode 100644 ui/src/ifql/components/FuncArgInput.tsx
 create mode 100644 ui/src/ifql/constants/argumentTypes.ts

diff --git a/ui/src/ifql/components/FuncArg.tsx b/ui/src/ifql/components/FuncArg.tsx
new file mode 100644
index 0000000000..ebd626d7d8
--- /dev/null
+++ b/ui/src/ifql/components/FuncArg.tsx
@@ -0,0 +1,63 @@
+import React, {PureComponent} from 'react'
+
+import FuncArgInput, {OnChangeArg} from 'src/ifql/components/FuncArgInput'
+import * as types from 'src/ifql/constants/argumentTypes'
+
+interface Props {
+  funcID: string
+  argKey: string
+  value: string
+  type: string
+  onChangeArg: OnChangeArg
+}
+
+class FuncArg extends PureComponent<Props> {
+  public render() {
+    const {argKey, value, type, onChangeArg, funcID} = this.props
+
+    switch (true) {
+      case this.isInput: {
+        return (
+          <FuncArgInput
+            funcID={funcID}
+            type={type}
+            value={value}
+            argKey={argKey}
+            onChangeArg={onChangeArg}
+          />
+        )
+      }
+      case types.BOOL === type: {
+        // TODO: make boolean arg component
+        return (
+          <div className="func-arg">
+            {argKey} : {value}
+          </div>
+        )
+      }
+      case types.FUNCTION === type: {
+        // TODO: make separate function component
+        return (
+          <div className="func-arg">
+            {argKey} : {value}
+          </div>
+        )
+      }
+      default: {
+        return (
+          <div className="func-arg">
+            {argKey} : {value}
+          </div>
+        )
+      }
+    }
+  }
+
+  private get isInput() {
+    const {type} = this.props
+
+    return type !== types.FUNCTION || types.NIL || types.BOOL || types.INVALID
+  }
+}
+
+export default FuncArg
diff --git a/ui/src/ifql/components/FuncArgInput.tsx b/ui/src/ifql/components/FuncArgInput.tsx
new file mode 100644
index 0000000000..088ddaf246
--- /dev/null
+++ b/ui/src/ifql/components/FuncArgInput.tsx
@@ -0,0 +1,46 @@
+import React, {PureComponent, ChangeEvent} from 'react'
+
+export type OnChangeArg = (inputArg: InputArg) => void
+
+export interface InputArg {
+  funcID: string
+  key: string
+  value: string
+}
+
+interface Props {
+  funcID: string
+  argKey: string
+  value: string
+  type: string
+  onChangeArg: OnChangeArg
+}
+
+class FuncArgInput extends PureComponent<Props> {
+  public render() {
+    const {argKey, value, type} = this.props
+    return (
+      <div>
+        <label htmlFor={argKey}>{argKey}: </label>
+        <input
+          type="text"
+          name={argKey}
+          className="form-control input-xs"
+          placeholder={type}
+          spellCheck={false}
+          autoComplete="off"
+          value={value}
+          onChange={this.handleChange}
+        />
+      </div>
+    )
+  }
+
+  private handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const {funcID, argKey} = this.props
+    console.log(this.props)
+    this.props.onChangeArg({funcID, key: argKey, value: e.target.value})
+  }
+}
+
+export default FuncArgInput
diff --git a/ui/src/ifql/components/FuncArgs.tsx b/ui/src/ifql/components/FuncArgs.tsx
index f9339aca6d..aab1ba9a74 100644
--- a/ui/src/ifql/components/FuncArgs.tsx
+++ b/ui/src/ifql/components/FuncArgs.tsx
@@ -1,4 +1,6 @@
 import React, {PureComponent} from 'react'
+import FuncArg from 'src/ifql/components/FuncArg'
+import {OnChangeArg} from 'src/ifql/components/FuncArgInput'
 
 interface Arg {
   key: string
@@ -15,17 +17,27 @@ export interface Func {
 
 interface Props {
   func: Func
+  onChangeArg: OnChangeArg
 }
 
 export default class FuncArgs extends PureComponent<Props> {
   public render() {
+    const {func, onChangeArg} = this.props
+
     return (
       <div className="func-args">
-        {this.props.func.args.map(({key, value}) => (
-          <div className="func-arg" key={key}>
-            {key} : {value}
-          </div>
-        ))}
+        {func.args.map(({key, value, type}) => {
+          return (
+            <FuncArg
+              funcID={func.id}
+              key={key}
+              argKey={key}
+              value={value}
+              type={type}
+              onChangeArg={onChangeArg}
+            />
+          )
+        })}
       </div>
     )
   }
diff --git a/ui/src/ifql/components/FuncNode.tsx b/ui/src/ifql/components/FuncNode.tsx
index 589f1122ff..e145e80aed 100644
--- a/ui/src/ifql/components/FuncNode.tsx
+++ b/ui/src/ifql/components/FuncNode.tsx
@@ -1,10 +1,12 @@
 import React, {PureComponent, MouseEvent} from 'react'
 import FuncArgs from 'src/ifql/components/FuncArgs'
 import {Func} from 'src/ifql/components/FuncArgs'
+import {OnChangeArg} from 'src/ifql/components/FuncArgInput'
 
 interface Props {
   func: Func
   onDelete: (id: string) => void
+  onChangeArg: OnChangeArg
 }
 
 interface State {
@@ -20,7 +22,7 @@ export default class FuncNode extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {func} = this.props
+    const {func, onChangeArg} = this.props
     const {isOpen} = this.state
 
     return (
@@ -28,7 +30,7 @@ export default class FuncNode extends PureComponent<Props, State> {
         <div className="func-node--name" onClick={this.handleClick}>
           <div>{func.name}</div>
         </div>
-        {isOpen && <FuncArgs func={func} />}
+        {isOpen && <FuncArgs func={func} onChangeArg={onChangeArg} />}
         <div className="btn btn-danger btn-square" onClick={this.handleDelete}>
           <span className="icon-trash" />
         </div>
@@ -40,7 +42,7 @@ export default class FuncNode extends PureComponent<Props, State> {
     this.props.onDelete(this.props.func.id)
   }
 
-  private handleClick = (e: MouseEvent<HTMLElement>) => {
+  private handleClick = (e: MouseEvent<HTMLElement>): void => {
     e.stopPropagation()
 
     const {isOpen} = this.state
diff --git a/ui/src/ifql/components/TimeMachine.tsx b/ui/src/ifql/components/TimeMachine.tsx
index 8dd12e6c15..11472bd815 100644
--- a/ui/src/ifql/components/TimeMachine.tsx
+++ b/ui/src/ifql/components/TimeMachine.tsx
@@ -4,6 +4,7 @@ import FuncNode from 'src/ifql/components/FuncNode'
 import TimeMachineEditor from 'src/ifql/components/TimeMachineEditor'
 
 import {Func} from 'src/ifql/components/FuncArgs'
+import {OnChangeArg} from 'src/ifql/components/FuncArgInput'
 
 export interface Suggestion {
   name: string
@@ -20,6 +21,7 @@ interface Props {
   onChangeScript: (script: string) => void
   onSubmitScript: (script: string) => void
   onDeleteFuncNode: (id: string) => void
+  onChangeArg: OnChangeArg
 }
 
 class TimeMachine extends PureComponent<Props> {
@@ -31,6 +33,7 @@ class TimeMachine extends PureComponent<Props> {
       onChangeScript,
       onSubmitScript,
       onDeleteFuncNode,
+      onChangeArg,
     } = this.props
 
     return (
@@ -42,7 +45,12 @@ class TimeMachine extends PureComponent<Props> {
         />
         <div className="func-nodes-container">
           {funcs.map(f => (
-            <FuncNode key={f.id} func={f} onDelete={onDeleteFuncNode} />
+            <FuncNode
+              key={f.id}
+              func={f}
+              onChangeArg={onChangeArg}
+              onDelete={onDeleteFuncNode}
+            />
           ))}
           <FuncSelector funcs={this.funcNames} onAddNode={onAddNode} />
         </div>
diff --git a/ui/src/ifql/constants/argumentTypes.ts b/ui/src/ifql/constants/argumentTypes.ts
new file mode 100644
index 0000000000..6e768fd161
--- /dev/null
+++ b/ui/src/ifql/constants/argumentTypes.ts
@@ -0,0 +1,13 @@
+export const INVALID = 'invalid'
+export const NIL = 'nil'
+export const STRING = 'string'
+export const INT = 'int'
+export const UINT = 'uint'
+export const FLOAT = 'float'
+export const BOOL = 'bool'
+export const TIME = 'time'
+export const DURATION = 'duration'
+export const REGEXP = 'regexp'
+export const ARRAY = 'array'
+export const OBJECT = 'object'
+export const FUNCTION = 'function'
diff --git a/ui/src/ifql/containers/IFQLPage.tsx b/ui/src/ifql/containers/IFQLPage.tsx
index 51924c385f..a87708e803 100644
--- a/ui/src/ifql/containers/IFQLPage.tsx
+++ b/ui/src/ifql/containers/IFQLPage.tsx
@@ -7,6 +7,7 @@ import _ from 'lodash'
 import TimeMachine, {Suggestion} from 'src/ifql/components/TimeMachine'
 import Walker from 'src/ifql/ast/walker'
 import {Func} from 'src/ifql/components/FuncArgs'
+import {InputArg} from 'src/ifql/components/FuncArgInput'
 
 import {getSuggestions, getAST} from 'src/ifql/apis'
 
@@ -70,6 +71,7 @@ export class IFQLPage extends PureComponent<Props, State> {
               funcs={this.state.funcs}
               suggestions={suggestions}
               onAddNode={this.handleAddNode}
+              onChangeArg={this.handleChangeArg}
               onSubmitScript={this.getASTResponse}
               onChangeScript={this.handleChangeScript}
               onDeleteFuncNode={this.handleDeleteFuncNode}
@@ -80,6 +82,26 @@ export class IFQLPage extends PureComponent<Props, State> {
     )
   }
 
+  private handleChangeArg = ({funcID, key, value}: InputArg) => {
+    const funcs = this.state.funcs.map(f => {
+      if (f.id !== funcID) {
+        return f
+      }
+
+      const args = f.args.map(a => {
+        if (a.key === key) {
+          return {...a, value}
+        }
+
+        return a
+      })
+
+      return {...f, args}
+    })
+
+    this.setState({funcs})
+  }
+
   private handleChangeScript = (script: string): void => {
     this.setState({script})
   }
diff --git a/ui/test/ifql/components/TimeMachine.test.tsx b/ui/test/ifql/components/TimeMachine.test.tsx
index 79f36471ec..f74727f2bd 100644
--- a/ui/test/ifql/components/TimeMachine.test.tsx
+++ b/ui/test/ifql/components/TimeMachine.test.tsx
@@ -11,6 +11,7 @@ const setup = () => {
     onChangeScript: () => {},
     onSubmitScript: () => {},
     onDeleteFuncNode: () => {},
+    onChangeArg: () => {},
   }
 
   const wrapper = shallow(<TimeMachine {...props} />)

From 809d8718ccfa2472e30e8f2d0b6f4c65ef4fe115 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Mon, 16 Apr 2018 16:56:38 -0700
Subject: [PATCH 2/7] Add initial ability to handle string argument types

---
 ui/src/ifql/components/FuncArg.tsx           | 23 ++++++++++++++---
 ui/src/ifql/components/FuncArgInput.tsx      | 23 ++++++++++++-----
 ui/src/ifql/components/FuncArgs.tsx          |  6 +++--
 ui/src/ifql/components/FuncNode.tsx          | 11 +++++++--
 ui/src/ifql/components/TimeMachine.tsx       |  5 +++-
 ui/src/ifql/containers/IFQLPage.tsx          | 26 ++++++++++++++++++++
 ui/test/ifql/components/TimeMachine.test.tsx |  1 +
 7 files changed, 81 insertions(+), 14 deletions(-)

diff --git a/ui/src/ifql/components/FuncArg.tsx b/ui/src/ifql/components/FuncArg.tsx
index ebd626d7d8..301d1cf055 100644
--- a/ui/src/ifql/components/FuncArg.tsx
+++ b/ui/src/ifql/components/FuncArg.tsx
@@ -9,24 +9,34 @@ interface Props {
   value: string
   type: string
   onChangeArg: OnChangeArg
+  onGenerateScript: () => void
 }
 
 class FuncArg extends PureComponent<Props> {
   public render() {
-    const {argKey, value, type, onChangeArg, funcID} = this.props
+    const {
+      argKey,
+      value,
+      type,
+      onChangeArg,
+      funcID,
+      onGenerateScript,
+    } = this.props
 
     switch (true) {
       case this.isInput: {
         return (
           <FuncArgInput
-            funcID={funcID}
             type={type}
             value={value}
             argKey={argKey}
+            funcID={funcID}
             onChangeArg={onChangeArg}
+            onGenerateScript={onGenerateScript}
           />
         )
       }
+
       case types.BOOL === type: {
         // TODO: make boolean arg component
         return (
@@ -56,7 +66,14 @@ class FuncArg extends PureComponent<Props> {
   private get isInput() {
     const {type} = this.props
 
-    return type !== types.FUNCTION || types.NIL || types.BOOL || types.INVALID
+    return (
+      type === types.STRING ||
+      type === types.DURATION ||
+      type === types.TIME ||
+      type === types.INT ||
+      type === types.REGEXP ||
+      type === types.UINT
+    )
   }
 }
 
diff --git a/ui/src/ifql/components/FuncArgInput.tsx b/ui/src/ifql/components/FuncArgInput.tsx
index 088ddaf246..c7840c4ae9 100644
--- a/ui/src/ifql/components/FuncArgInput.tsx
+++ b/ui/src/ifql/components/FuncArgInput.tsx
@@ -1,4 +1,4 @@
-import React, {PureComponent, ChangeEvent} from 'react'
+import React, {PureComponent, ChangeEvent, KeyboardEvent} from 'react'
 
 export type OnChangeArg = (inputArg: InputArg) => void
 
@@ -14,6 +14,7 @@ interface Props {
   value: string
   type: string
   onChangeArg: OnChangeArg
+  onGenerateScript: () => void
 }
 
 class FuncArgInput extends PureComponent<Props> {
@@ -23,22 +24,32 @@ class FuncArgInput extends PureComponent<Props> {
       <div>
         <label htmlFor={argKey}>{argKey}: </label>
         <input
-          type="text"
           name={argKey}
-          className="form-control input-xs"
+          value={value}
           placeholder={type}
+          onChange={this.handleChange}
+          onKeyDown={this.handleKeyDown}
+          type="text"
+          className="form-control input-xs"
           spellCheck={false}
           autoComplete="off"
-          value={value}
-          onChange={this.handleChange}
         />
       </div>
     )
   }
 
+  private handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key !== 'Enter') {
+      return
+    }
+
+    this.props.onGenerateScript()
+    e.preventDefault()
+  }
+
   private handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const {funcID, argKey} = this.props
-    console.log(this.props)
+
     this.props.onChangeArg({funcID, key: argKey, value: e.target.value})
   }
 }
diff --git a/ui/src/ifql/components/FuncArgs.tsx b/ui/src/ifql/components/FuncArgs.tsx
index aab1ba9a74..b57dcf1401 100644
--- a/ui/src/ifql/components/FuncArgs.tsx
+++ b/ui/src/ifql/components/FuncArgs.tsx
@@ -18,11 +18,12 @@ export interface Func {
 interface Props {
   func: Func
   onChangeArg: OnChangeArg
+  onGenerateScript: () => void
 }
 
 export default class FuncArgs extends PureComponent<Props> {
   public render() {
-    const {func, onChangeArg} = this.props
+    const {func, onChangeArg, onGenerateScript} = this.props
 
     return (
       <div className="func-args">
@@ -31,10 +32,11 @@ export default class FuncArgs extends PureComponent<Props> {
             <FuncArg
               funcID={func.id}
               key={key}
+              type={type}
               argKey={key}
               value={value}
-              type={type}
               onChangeArg={onChangeArg}
+              onGenerateScript={onGenerateScript}
             />
           )
         })}
diff --git a/ui/src/ifql/components/FuncNode.tsx b/ui/src/ifql/components/FuncNode.tsx
index e145e80aed..eb8c24ed97 100644
--- a/ui/src/ifql/components/FuncNode.tsx
+++ b/ui/src/ifql/components/FuncNode.tsx
@@ -7,6 +7,7 @@ interface Props {
   func: Func
   onDelete: (id: string) => void
   onChangeArg: OnChangeArg
+  onGenerateScript: () => void
 }
 
 interface State {
@@ -22,7 +23,7 @@ export default class FuncNode extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {func, onChangeArg} = this.props
+    const {func, onChangeArg, onGenerateScript} = this.props
     const {isOpen} = this.state
 
     return (
@@ -30,7 +31,13 @@ export default class FuncNode extends PureComponent<Props, State> {
         <div className="func-node--name" onClick={this.handleClick}>
           <div>{func.name}</div>
         </div>
-        {isOpen && <FuncArgs func={func} onChangeArg={onChangeArg} />}
+        {isOpen && (
+          <FuncArgs
+            func={func}
+            onChangeArg={onChangeArg}
+            onGenerateScript={onGenerateScript}
+          />
+        )}
         <div className="btn btn-danger btn-square" onClick={this.handleDelete}>
           <span className="icon-trash" />
         </div>
diff --git a/ui/src/ifql/components/TimeMachine.tsx b/ui/src/ifql/components/TimeMachine.tsx
index 11472bd815..2b02ec8fc7 100644
--- a/ui/src/ifql/components/TimeMachine.tsx
+++ b/ui/src/ifql/components/TimeMachine.tsx
@@ -22,6 +22,7 @@ interface Props {
   onSubmitScript: (script: string) => void
   onDeleteFuncNode: (id: string) => void
   onChangeArg: OnChangeArg
+  onGenerateScript: () => void
 }
 
 class TimeMachine extends PureComponent<Props> {
@@ -30,10 +31,11 @@ class TimeMachine extends PureComponent<Props> {
       funcs,
       script,
       onAddNode,
+      onChangeArg,
       onChangeScript,
       onSubmitScript,
       onDeleteFuncNode,
-      onChangeArg,
+      onGenerateScript,
     } = this.props
 
     return (
@@ -50,6 +52,7 @@ class TimeMachine extends PureComponent<Props> {
               func={f}
               onChangeArg={onChangeArg}
               onDelete={onDeleteFuncNode}
+              onGenerateScript={onGenerateScript}
             />
           ))}
           <FuncSelector funcs={this.funcNames} onAddNode={onAddNode} />
diff --git a/ui/src/ifql/containers/IFQLPage.tsx b/ui/src/ifql/containers/IFQLPage.tsx
index a87708e803..e128187d9d 100644
--- a/ui/src/ifql/containers/IFQLPage.tsx
+++ b/ui/src/ifql/containers/IFQLPage.tsx
@@ -10,6 +10,7 @@ import {Func} from 'src/ifql/components/FuncArgs'
 import {InputArg} from 'src/ifql/components/FuncArgInput'
 
 import {getSuggestions, getAST} from 'src/ifql/apis'
+import * as argTypes from 'src/ifql/constants/argumentTypes'
 
 interface Links {
   self: string
@@ -75,6 +76,7 @@ export class IFQLPage extends PureComponent<Props, State> {
               onSubmitScript={this.getASTResponse}
               onChangeScript={this.handleChangeScript}
               onDeleteFuncNode={this.handleDeleteFuncNode}
+              onGenerateScript={this.handleGenerateScript}
             />
           </div>
         </div>
@@ -82,6 +84,10 @@ export class IFQLPage extends PureComponent<Props, State> {
     )
   }
 
+  private handleGenerateScript = () => {
+    this.getASTResponse(this.funcsToScript)
+  }
+
   private handleChangeArg = ({funcID, key, value}: InputArg) => {
     const funcs = this.state.funcs.map(f => {
       if (f.id !== funcID) {
@@ -102,6 +108,26 @@ export class IFQLPage extends PureComponent<Props, State> {
     this.setState({funcs})
   }
 
+  private get funcsToScript(): string {
+    return this.state.funcs
+      .map(func => `${func.name}(${this.argsToScript(func.args)})`)
+      .join('\n\t|> ')
+  }
+
+  private argsToScript(args): string {
+    const withValues = args.filter(arg => arg.value)
+
+    return withValues
+      .map(({key, value, type}) => {
+        if (type === argTypes.STRING) {
+          return `${key}: "${value}"`
+        }
+
+        return `${key}: ${value}`
+      })
+      .join(', ')
+  }
+
   private handleChangeScript = (script: string): void => {
     this.setState({script})
   }
diff --git a/ui/test/ifql/components/TimeMachine.test.tsx b/ui/test/ifql/components/TimeMachine.test.tsx
index f74727f2bd..43e3f0ff26 100644
--- a/ui/test/ifql/components/TimeMachine.test.tsx
+++ b/ui/test/ifql/components/TimeMachine.test.tsx
@@ -12,6 +12,7 @@ const setup = () => {
     onSubmitScript: () => {},
     onDeleteFuncNode: () => {},
     onChangeArg: () => {},
+    onGenerateScript: () => {},
   }
 
   const wrapper = shallow(<TimeMachine {...props} />)

From 814c2c63ba3106d2a8a375ca8f68cb4087ddb9c1 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Mon, 16 Apr 2018 17:04:03 -0700
Subject: [PATCH 3/7] Update input types

---
 ui/src/ifql/components/FuncArg.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/ui/src/ifql/components/FuncArg.tsx b/ui/src/ifql/components/FuncArg.tsx
index 301d1cf055..c3de142629 100644
--- a/ui/src/ifql/components/FuncArg.tsx
+++ b/ui/src/ifql/components/FuncArg.tsx
@@ -53,6 +53,14 @@ class FuncArg extends PureComponent<Props> {
           </div>
         )
       }
+      case types.NIL === type: {
+        // TODO: handle nil type
+        return (
+          <div className="func-arg">
+            {argKey} : {value}
+          </div>
+        )
+      }
       default: {
         return (
           <div className="func-arg">
@@ -70,9 +78,11 @@ class FuncArg extends PureComponent<Props> {
       type === types.STRING ||
       type === types.DURATION ||
       type === types.TIME ||
-      type === types.INT ||
       type === types.REGEXP ||
-      type === types.UINT
+      type === types.FLOAT ||
+      type === types.INT ||
+      type === types.UINT ||
+      type === types.ARRAY
     )
   }
 }

From 0171aa36b54bba6106f0322796d3d121a586be29 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Tue, 17 Apr 2018 09:30:50 -0700
Subject: [PATCH 4/7] Introduce FuncArg test

---
 ui/test/ifql/components/FuncArg.test.tsx | 30 ++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 ui/test/ifql/components/FuncArg.test.tsx

diff --git a/ui/test/ifql/components/FuncArg.test.tsx b/ui/test/ifql/components/FuncArg.test.tsx
new file mode 100644
index 0000000000..632cb44ea5
--- /dev/null
+++ b/ui/test/ifql/components/FuncArg.test.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import {shallow} from 'enzyme'
+import FuncArg from 'src/ifql/components/FuncArg'
+
+const setup = () => {
+  const props = {
+    funcID: '',
+    argKey: '',
+    value: '',
+    type: '',
+    onChangeArg: () => {},
+    onGenerateScript: () => {},
+  }
+
+  const wrapper = shallow(<FuncArg {...props} />)
+
+  return {
+    wrapper,
+  }
+}
+
+describe('IFQL.Components.FuncArg', () => {
+  describe('rendering', () => {
+    it('renders without errors', () => {
+      const {wrapper} = setup()
+
+      expect(wrapper.exists()).toBe(true)
+    })
+  })
+})

From 9d2a93fc7c8db6f8d2570c23f21a69b6815b38b1 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Tue, 17 Apr 2018 09:47:45 -0700
Subject: [PATCH 5/7] Add FundArgInput test

---
 ui/test/ifql/components/FuncArgInput.test.tsx | 78 +++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 ui/test/ifql/components/FuncArgInput.test.tsx

diff --git a/ui/test/ifql/components/FuncArgInput.test.tsx b/ui/test/ifql/components/FuncArgInput.test.tsx
new file mode 100644
index 0000000000..48ee1ac444
--- /dev/null
+++ b/ui/test/ifql/components/FuncArgInput.test.tsx
@@ -0,0 +1,78 @@
+import React from 'react'
+import {shallow} from 'enzyme'
+import FuncArgInput from 'src/ifql/components/FuncArgInput'
+
+const setup = (override?) => {
+  const props = {
+    funcID: '1',
+    argKey: 'db',
+    value: 'db1',
+    type: 'string',
+    onChangeArg: () => {},
+    onGenerateScript: () => {},
+    ...override,
+  }
+
+  const wrapper = shallow(<FuncArgInput {...props} />)
+
+  return {
+    wrapper,
+    props,
+  }
+}
+
+describe('IFQL.Components.FuncArgInput', () => {
+  describe('rendering', () => {
+    it('renders without errors', () => {
+      const {wrapper} = setup()
+
+      expect(wrapper.exists()).toBe(true)
+    })
+  })
+
+  describe('user interraction', () => {
+    describe('typing', () => {
+      describe('hitting enter', () => {
+        it('generates a new script when Enter is pressed', () => {
+          const onGenerateScript = jest.fn()
+          const preventDefault = jest.fn()
+
+          const {wrapper} = setup({onGenerateScript})
+
+          const input = wrapper.find('input')
+          input.simulate('keydown', {key: 'Enter', preventDefault})
+
+          expect(onGenerateScript).toHaveBeenCalledTimes(1)
+          expect(preventDefault).toHaveBeenCalledTimes(1)
+        })
+
+        it('it does not generate a new script when typing', () => {
+          const onGenerateScript = jest.fn()
+          const preventDefault = jest.fn()
+
+          const {wrapper} = setup({onGenerateScript})
+
+          const input = wrapper.find('input')
+          input.simulate('keydown', {key: 'a', preventDefault})
+
+          expect(onGenerateScript).not.toHaveBeenCalled()
+          expect(preventDefault).not.toHaveBeenCalled()
+        })
+      })
+
+      describe('changing the input value', () => {
+        it('calls onChangeArg', () => {
+          const onChangeArg = jest.fn()
+          const {wrapper, props} = setup({onChangeArg})
+
+          const input = wrapper.find('input')
+          const value = 'db2'
+          input.simulate('change', {target: {value}})
+          const {funcID, argKey} = props
+
+          expect(onChangeArg).toHaveBeenCalledWith({funcID, key: argKey, value})
+        })
+      })
+    })
+  })
+})

From e72c984f7c8fc99b0b2d372f1135334e5aaabb1b Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Tue, 17 Apr 2018 09:50:21 -0700
Subject: [PATCH 6/7] Add return types

---
 ui/src/ifql/containers/IFQLPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/ifql/containers/IFQLPage.tsx b/ui/src/ifql/containers/IFQLPage.tsx
index e128187d9d..c5395d25fa 100644
--- a/ui/src/ifql/containers/IFQLPage.tsx
+++ b/ui/src/ifql/containers/IFQLPage.tsx
@@ -84,11 +84,11 @@ export class IFQLPage extends PureComponent<Props, State> {
     )
   }
 
-  private handleGenerateScript = () => {
+  private handleGenerateScript = (): void => {
     this.getASTResponse(this.funcsToScript)
   }
 
-  private handleChangeArg = ({funcID, key, value}: InputArg) => {
+  private handleChangeArg = ({funcID, key, value}: InputArg): void => {
     const funcs = this.state.funcs.map(f => {
       if (f.id !== funcID) {
         return f

From 0f01af71caacf1e47c633527d8995e27dd5944a8 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Tue, 17 Apr 2018 10:02:16 -0700
Subject: [PATCH 7/7] Make switch statement clearer

---
 ui/src/ifql/components/FuncArg.tsx | 32 +++++++++++-------------------
 1 file changed, 12 insertions(+), 20 deletions(-)

diff --git a/ui/src/ifql/components/FuncArg.tsx b/ui/src/ifql/components/FuncArg.tsx
index c3de142629..8eb77a898b 100644
--- a/ui/src/ifql/components/FuncArg.tsx
+++ b/ui/src/ifql/components/FuncArg.tsx
@@ -23,8 +23,15 @@ class FuncArg extends PureComponent<Props> {
       onGenerateScript,
     } = this.props
 
-    switch (true) {
-      case this.isInput: {
+    switch (type) {
+      case types.STRING:
+      case types.DURATION:
+      case types.TIME:
+      case types.REGEXP:
+      case types.FLOAT:
+      case types.INT:
+      case types.UINT:
+      case types.ARRAY: {
         return (
           <FuncArgInput
             type={type}
@@ -37,7 +44,7 @@ class FuncArg extends PureComponent<Props> {
         )
       }
 
-      case types.BOOL === type: {
+      case types.BOOL: {
         // TODO: make boolean arg component
         return (
           <div className="func-arg">
@@ -45,7 +52,7 @@ class FuncArg extends PureComponent<Props> {
           </div>
         )
       }
-      case types.FUNCTION === type: {
+      case types.FUNCTION: {
         // TODO: make separate function component
         return (
           <div className="func-arg">
@@ -53,7 +60,7 @@ class FuncArg extends PureComponent<Props> {
           </div>
         )
       }
-      case types.NIL === type: {
+      case types.NIL: {
         // TODO: handle nil type
         return (
           <div className="func-arg">
@@ -70,21 +77,6 @@ class FuncArg extends PureComponent<Props> {
       }
     }
   }
-
-  private get isInput() {
-    const {type} = this.props
-
-    return (
-      type === types.STRING ||
-      type === types.DURATION ||
-      type === types.TIME ||
-      type === types.REGEXP ||
-      type === types.FLOAT ||
-      type === types.INT ||
-      type === types.UINT ||
-      type === types.ARRAY
-    )
-  }
 }
 
 export default FuncArg