From 40501925cbe259111def8fceb30bdacdb9fd4a49 Mon Sep 17 00:00:00 2001
From: Alirie Gray <alirie.gray@gmail.com>
Date: Tue, 19 Feb 2019 14:05:13 -0800
Subject: [PATCH] Add ability to update a variable

---
 CHANGELOG.md                                  |   1 +
 ui/package-lock.json                          |  30 ++--
 ui/package.json                               |   6 +-
 .../components/UpdateVariableOverlay.tsx      | 146 ++++++++++++++++++
 .../organizations/components/VariableList.tsx |  56 ++++++-
 .../organizations/components/VariableRow.tsx  |  22 ++-
 ui/src/organizations/components/Variables.tsx |  21 +++
 .../__snapshots__/Variables.test.tsx.snap     |   9 ++
 ui/src/shared/components/EditableName.tsx     |   1 +
 ui/src/shared/copy/notifications.ts           |  12 ++
 10 files changed, 282 insertions(+), 22 deletions(-)
 create mode 100644 ui/src/organizations/components/UpdateVariableOverlay.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 55f23f31d4a..9579be3afd2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ### Features
 1. [11954](https://github.com/influxdata/influxdb/pull/11954): Add the ability to run a task manually from tasks page
 1. [11990](https://github.com/influxdata/influxdb/pull/11990): Add the ability to select a custom time range in explorer and dashboard
+1. [12011](https://github.com/influxdata/influxdb/pull/12011): Add the ability to update a Variable's name and query.
 
 ### Bug Fixes
 1. [11997](https://github.com/influxdata/influxdb/pull/11997): Update the bucket retention policy to update the time in seconds
diff --git a/ui/package-lock.json b/ui/package-lock.json
index 8b354cb598f..4ed88b2680a 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -985,9 +985,9 @@
       }
     },
     "@influxdata/influx": {
-      "version": "0.2.10",
-      "resolved": "https://registry.npmjs.org/@influxdata/influx/-/influx-0.2.10.tgz",
-      "integrity": "sha512-apEhHRmxolj/fqB0J+hoWXP2NDWJFqDA9waMmYY5El/v8FTINTNWOdz8StSVWbqtmJ5uf0/D/JJig75aLaffaw==",
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/@influxdata/influx/-/influx-0.2.11.tgz",
+      "integrity": "sha512-Y8rnNS5MXWGKVhODlW8KyCQFaVgmhLUTzA3koCd5Dp8GuRjclpP8vNMZWOI5DPOjPbKqd5aImgqvl5yVdgWeuA==",
       "requires": {
         "axios": "^0.18.0"
       }
@@ -10649,7 +10649,7 @@
       "dependencies": {
         "minimist": {
           "version": "0.0.10",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
           "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
           "dev": true
         },
@@ -12481,14 +12481,14 @@
       }
     },
     "react": {
-      "version": "16.8.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.8.1.tgz",
-      "integrity": "sha512-wLw5CFGPdo7p/AgteFz7GblI2JPOos0+biSoxf1FPsGxWQZdN/pj6oToJs1crn61DL3Ln7mN86uZ4j74p31ELQ==",
+      "version": "16.8.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.8.2.tgz",
+      "integrity": "sha512-aB2ctx9uQ9vo09HVknqv3DGRpI7OIGJhCx3Bt0QqoRluEjHSaObJl+nG12GDdYH6sTgE7YiPJ6ZUyMx9kICdXw==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2",
-        "scheduler": "^0.13.1"
+        "scheduler": "^0.13.2"
       }
     },
     "react-codemirror2": {
@@ -12554,14 +12554,14 @@
       }
     },
     "react-dom": {
-      "version": "16.8.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.1.tgz",
-      "integrity": "sha512-N74IZUrPt6UiDjXaO7UbDDFXeUXnVhZzeRLy/6iqqN1ipfjrhR60Bp5NuBK+rv3GMdqdIuwIl22u1SYwf330bg==",
+      "version": "16.8.2",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.2.tgz",
+      "integrity": "sha512-cPGfgFfwi+VCZjk73buu14pYkYBR1b/SRMSYqkLDdhSEHnSwcuYTPu6/Bh6ZphJFIk80XLvbSe2azfcRzNF+Xg==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2",
-        "scheduler": "^0.13.1"
+        "scheduler": "^0.13.2"
       }
     },
     "react-draggable": {
@@ -13627,9 +13627,9 @@
       }
     },
     "scheduler": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.1.tgz",
-      "integrity": "sha512-VJKOkiKIN2/6NOoexuypwSrybx13MY7NSy9RNt8wPvZDMRT1CW6qlpF5jXRToXNHz3uWzbm2elNpZfXfGPqP9A==",
+      "version": "0.13.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.2.tgz",
+      "integrity": "sha512-qK5P8tHS7vdEMCW5IPyt8v9MJOHqTrOUgPXib7tqm9vh834ibBX5BNhwkplX/0iOzHW5sXyluehYfS9yrkz9+w==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
diff --git a/ui/package.json b/ui/package.json
index 839bd994aaa..60f8b9ad855 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -132,7 +132,7 @@
   },
   "dependencies": {
     "@influxdata/clockface": "0.0.4",
-    "@influxdata/influx": "^0.2.10",
+    "@influxdata/influx": "^0.2.11",
     "@influxdata/react-custom-scrollbars": "4.3.8",
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",
@@ -158,14 +158,14 @@
     "papaparse": "^4.4.0",
     "prop-types": "^15.6.1",
     "qs": "^6.5.2",
-    "react": "^16.8.0",
+    "react": "^16.8.2",
     "react-codemirror2": "^4.2.1",
     "react-copy-to-clipboard": "^5.0.1",
     "react-datepicker": "^2.1.0",
     "react-dimensions": "^1.2.0",
     "react-dnd": "^2.6.0",
     "react-dnd-html5-backend": "^2.6.0",
-    "react-dom": "^16.8.0",
+    "react-dom": "^16.8.2",
     "react-grid-layout": "^0.16.6",
     "react-markdown": "^4.0.3",
     "react-redux": "^5.0.7",
diff --git a/ui/src/organizations/components/UpdateVariableOverlay.tsx b/ui/src/organizations/components/UpdateVariableOverlay.tsx
new file mode 100644
index 00000000000..50d3ad2ac99
--- /dev/null
+++ b/ui/src/organizations/components/UpdateVariableOverlay.tsx
@@ -0,0 +1,146 @@
+// Libraries
+import React, {PureComponent, ChangeEvent} from 'react'
+import _ from 'lodash'
+
+// Components
+import {
+  OverlayBody,
+  OverlayHeading,
+  OverlayFooter,
+  ComponentStatus,
+  OverlayContainer,
+  Form,
+  Input,
+} from 'src/clockface'
+import {Button, ButtonType, ComponentColor} from '@influxdata/clockface'
+import FluxEditor from 'src/shared/components/FluxEditor'
+
+// Types
+import {Variable} from '@influxdata/influx'
+
+interface Props {
+  variable: Variable
+  onCloseOverlay: () => void
+  onUpdateVariable: (variable: Variable) => Promise<void>
+}
+
+interface State {
+  variable: Variable
+  script: string
+  nameErrorMessage: string
+  nameInputStatus: ComponentStatus
+}
+
+export default class UpdateVariableOverlay extends PureComponent<Props, State> {
+  constructor(props) {
+    super(props)
+
+    const {variable} = this.props
+    const script = _.get(variable, 'arguments.values.query')
+
+    this.state = {
+      variable,
+      script,
+      nameInputStatus: ComponentStatus.Default,
+      nameErrorMessage: '',
+    }
+  }
+
+  public render() {
+    const {onCloseOverlay} = this.props
+    const {variable, nameInputStatus, nameErrorMessage, script} = this.state
+
+    return (
+      <OverlayContainer maxWidth={1000}>
+        <OverlayHeading
+          title="Edit Variable"
+          onDismiss={this.props.onCloseOverlay}
+        />
+
+        <Form>
+          <OverlayBody>
+            <div className="overlay-flux-editor--spacing">
+              <Form.Element label="Name" errorMessage={nameErrorMessage}>
+                <Input
+                  placeholder="Give your variable a name"
+                  name="name"
+                  autoFocus={true}
+                  value={variable.name}
+                  onChange={this.handleChangeInput}
+                  status={nameInputStatus}
+                />
+              </Form.Element>
+            </div>
+
+            <Form.Element label="Value">
+              <div className="overlay-flux-editor">
+                <FluxEditor
+                  script={script}
+                  onChangeScript={this.handleChangeScript}
+                  visibility="visible"
+                  suggestions={[]}
+                />
+              </div>
+            </Form.Element>
+
+            <OverlayFooter>
+              <Button
+                text="Cancel"
+                color={ComponentColor.Danger}
+                onClick={onCloseOverlay}
+              />
+              <Button
+                text="Submit"
+                type={ButtonType.Submit}
+                onClick={this.handleSubmit}
+                color={ComponentColor.Primary}
+                status={
+                  this.isVariableValid
+                    ? ComponentStatus.Default
+                    : ComponentStatus.Disabled
+                }
+              />
+            </OverlayFooter>
+          </OverlayBody>
+        </Form>
+      </OverlayContainer>
+    )
+  }
+
+  private get isVariableValid(): boolean {
+    const {variable, script} = this.state
+
+    return !!variable.name && !!script
+  }
+
+  private handleSubmit = (e): void => {
+    e.preventDefault()
+
+    this.props.onUpdateVariable(this.state.variable)
+    this.props.onCloseOverlay()
+  }
+
+  private handleChangeScript = (script: string): void => {
+    this.setState({script})
+  }
+
+  private handleChangeInput = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+    const key = e.target.name
+    const variable = {...this.state.variable, [key]: value}
+
+    if (!value) {
+      return this.setState({
+        variable,
+        nameInputStatus: ComponentStatus.Error,
+        nameErrorMessage: `Variable ${key} cannot be empty`,
+      })
+    }
+
+    this.setState({
+      variable,
+      nameInputStatus: ComponentStatus.Valid,
+      nameErrorMessage: '',
+    })
+  }
+}
diff --git a/ui/src/organizations/components/VariableList.tsx b/ui/src/organizations/components/VariableList.tsx
index 6a52884753a..4bffc11345d 100644
--- a/ui/src/organizations/components/VariableList.tsx
+++ b/ui/src/organizations/components/VariableList.tsx
@@ -2,25 +2,43 @@
 import React, {PureComponent} from 'react'
 
 // Components
-import {IndexList} from 'src/clockface'
+import {IndexList, OverlayTechnology} from 'src/clockface'
 import VariableRow from 'src/organizations/components/VariableRow'
+import UpdateVariableOverlay from 'src/organizations/components/UpdateVariableOverlay'
 
 // Types
 import {Variable} from '@influxdata/influx'
+import {OverlayState} from 'src/types'
 
 interface Props {
   variables: Variable[]
   emptyState: JSX.Element
   onDeleteVariable: (variable: Variable) => void
+  onUpdateVariable: (variable: Variable) => void
 }
 
-class VariableList extends PureComponent<Props> {
+interface State {
+  variableID: string
+  variableOverlayState: OverlayState
+}
+
+class VariableList extends PureComponent<Props, State> {
   constructor(props) {
     super(props)
+
+    this.state = {
+      variableID: null,
+      variableOverlayState: OverlayState.Closed,
+    }
   }
 
   public render() {
-    const {emptyState, variables, onDeleteVariable} = this.props
+    const {
+      emptyState,
+      variables,
+      onDeleteVariable,
+      onUpdateVariable,
+    } = this.props
 
     return (
       <>
@@ -35,13 +53,45 @@ class VariableList extends PureComponent<Props> {
                 key={`variable-${variable.id}`}
                 variable={variable}
                 onDeleteVariable={onDeleteVariable}
+                onUpdateVariable={onUpdateVariable}
+                onEditVariable={this.handleStartEdit}
               />
             ))}
           </IndexList.Body>
         </IndexList>
+        <OverlayTechnology visible={this.isVariableOverlayVisible}>
+          <UpdateVariableOverlay
+            variable={this.variable}
+            onCloseOverlay={this.handleCloseOverlay}
+            onUpdateVariable={this.handleUpdateVariable}
+          />
+        </OverlayTechnology>
       </>
     )
   }
+
+  private get variable(): Variable {
+    return this.props.variables.find(v => v.id === this.state.variableID)
+  }
+
+  private get isVariableOverlayVisible(): boolean {
+    return this.state.variableOverlayState === OverlayState.Open
+  }
+
+  private handleCloseOverlay = () => {
+    this.setState({variableOverlayState: OverlayState.Closed})
+  }
+
+  private handleStartEdit = (variable: Variable) => {
+    this.setState({
+      variableID: variable.id,
+      variableOverlayState: OverlayState.Open,
+    })
+  }
+
+  private handleUpdateVariable = async (variable: Variable): Promise<void> => {
+    this.props.onUpdateVariable(variable)
+  }
 }
 
 export default VariableList
diff --git a/ui/src/organizations/components/VariableRow.tsx b/ui/src/organizations/components/VariableRow.tsx
index a1626daea88..48b63661fcc 100644
--- a/ui/src/organizations/components/VariableRow.tsx
+++ b/ui/src/organizations/components/VariableRow.tsx
@@ -11,10 +11,13 @@ import {
 
 // Types
 import {Variable} from '@influxdata/influx'
+import EditableName from 'src/shared/components/EditableName'
 
 interface Props {
   variable: Variable
   onDeleteVariable: (variable: Variable) => void
+  onUpdateVariable: (variable: Partial<Variable>) => void
+  onEditVariable: (variable: Variable) => void
 }
 
 export default class VariableRow extends PureComponent<Props> {
@@ -24,7 +27,14 @@ export default class VariableRow extends PureComponent<Props> {
     return (
       <IndexList.Row>
         <IndexList.Cell alignment={Alignment.Left}>
-          {variable.name}
+          <EditableName
+            onUpdate={this.handleUpdateVariableName}
+            name={variable.name}
+            noNameString={'NAME THIS VARIABLE'}
+            onEditName={this.handleEditVariable}
+          >
+            {variable.name}
+          </EditableName>
         </IndexList.Cell>
         <IndexList.Cell alignment={Alignment.Left}>{'Query'}</IndexList.Cell>
         <IndexList.Cell revealOnHover={true} alignment={Alignment.Right}>
@@ -39,4 +49,14 @@ export default class VariableRow extends PureComponent<Props> {
       </IndexList.Row>
     )
   }
+
+  private handleUpdateVariableName = (name: string) => {
+    const {onUpdateVariable, variable} = this.props
+
+    onUpdateVariable({id: variable.id, name})
+  }
+
+  private handleEditVariable = (): void => {
+    this.props.onEditVariable(this.props.variable)
+  }
 }
diff --git a/ui/src/organizations/components/Variables.tsx b/ui/src/organizations/components/Variables.tsx
index 71de8975fc3..cd1430dec87 100644
--- a/ui/src/organizations/components/Variables.tsx
+++ b/ui/src/organizations/components/Variables.tsx
@@ -24,6 +24,8 @@ import {
   deleteVariableFailed,
   addVariableSuccess,
   deleteVariableSuccess,
+  updateVariableFailed,
+  updateVariableSuccess,
 } from 'src/shared/copy/notifications'
 
 interface Props {
@@ -108,6 +110,7 @@ export default class Variables extends PureComponent<Props, State> {
               variables={variables}
               emptyState={this.emptyState}
               onDeleteVariable={this.handleDeleteVariable}
+              onUpdateVariable={this.handleUpdateVariable}
             />
           )}
         </FilterList>
@@ -165,4 +168,22 @@ export default class Variables extends PureComponent<Props, State> {
 
     onChange()
   }
+
+  private handleUpdateVariable = async (
+    variable: Partial<Variable>
+  ): Promise<void> => {
+    const {notify, onChange} = this.props
+
+    try {
+      const updatedVariable = await client.variables.update(
+        variable.id,
+        variable
+      )
+      notify(updateVariableSuccess(updatedVariable.name))
+    } catch (error) {
+      notify(updateVariableFailed())
+    }
+
+    onChange()
+  }
 }
diff --git a/ui/src/organizations/components/__snapshots__/Variables.test.tsx.snap b/ui/src/organizations/components/__snapshots__/Variables.test.tsx.snap
index 16cc8adf196..f390e8dd835 100644
--- a/ui/src/organizations/components/__snapshots__/Variables.test.tsx.snap
+++ b/ui/src/organizations/components/__snapshots__/Variables.test.tsx.snap
@@ -22,6 +22,7 @@ exports[`VariableList rendering renders 1`] = `
       <VariableRow
         key="variable-undefined"
         onDeleteVariable={[MockFunction]}
+        onEditVariable={[Function]}
         variable={
           Object {
             "arguments": Object {
@@ -38,5 +39,13 @@ exports[`VariableList rendering renders 1`] = `
       />
     </IndexListBody>
   </IndexList>
+  <OverlayTechnology
+    visible={false}
+  >
+    <UpdateVariableOverlay
+      onCloseOverlay={[Function]}
+      onUpdateVariable={[Function]}
+    />
+  </OverlayTechnology>
 </Fragment>
 `;
diff --git a/ui/src/shared/components/EditableName.tsx b/ui/src/shared/components/EditableName.tsx
index 493da6aaa0b..c50b949be8a 100644
--- a/ui/src/shared/components/EditableName.tsx
+++ b/ui/src/shared/components/EditableName.tsx
@@ -113,6 +113,7 @@ class EditableName extends Component<Props, State> {
     const {workingName} = this.state
 
     if (e.key === 'Enter') {
+      e.persist()
       if (!workingName) {
         this.setState({isEditing: false, workingName: name})
         return
diff --git a/ui/src/shared/copy/notifications.ts b/ui/src/shared/copy/notifications.ts
index 9e951a7bf42..f4abad4d0fe 100644
--- a/ui/src/shared/copy/notifications.ts
+++ b/ui/src/shared/copy/notifications.ts
@@ -623,6 +623,18 @@ export const deleteVariableSuccess = (name: string): Notification => ({
   message: `Successfully deleted variable ${name}.`,
 })
 
+export const updateVariableFailed = (): Notification => ({
+  ...defaultErrorNotification,
+  icon: 'cube',
+  message: `Failed to update variable.`,
+})
+
+export const updateVariableSuccess = (name: string): Notification => ({
+  ...defaultSuccessNotification,
+  icon: 'cube',
+  message: `Successfully updated variable ${name}.`,
+})
+
 //  Rule Builder Notifications
 //  ----------------------------------------------------------------------------
 export const alertRuleCreated = (ruleName: string): Notification => ({