Fix/variable update overlay (#13438)

ui/src/variables/components/UpdateVariableOverlay.tsx

@@ -3,10 +3,13 @@ import React, {PureComponent, ChangeEvent, FormEvent} from 'react'
 import _ from 'lodash'
 
 // Components
-import {Form, Input, Button} from '@influxdata/clockface'
+import {Form, Input, Button, Grid} from '@influxdata/clockface'
 import {Overlay} from 'src/clockface'
 import FluxEditor from 'src/shared/components/FluxEditor'
 
+// Utils
+import {validateVariableName} from 'src/variables/utils/validation'
+
 // Types
 import {IVariable as Variable} from '@influxdata/influx'
 import {
@@ -17,26 +20,25 @@ import {
 
 interface Props {
   variable: Variable
+  variables: Variable[]
   onCloseOverlay: () => void
   onUpdateVariable: (variable: Variable) => Promise<void>
 }
 
 interface State {
   variable: Variable
-  nameErrorMessage: string
-  nameInputStatus: ComponentStatus
+  isFormValid: boolean
 }
 
 export default class UpdateVariableOverlay extends PureComponent<Props, State> {
   public state: State = {
     variable: this.props.variable,
-    nameInputStatus: ComponentStatus.Default,
-    nameErrorMessage: '',
+    isFormValid: true,
   }
 
   public render() {
     const {onCloseOverlay} = this.props
-    const {variable, nameInputStatus, nameErrorMessage} = this.state
+    const {variable, isFormValid} = this.state
 
     return (
       <Overlay.Container maxWidth={1000}>
@@ -44,60 +46,74 @@ export default class UpdateVariableOverlay extends PureComponent<Props, State> {
           title="Edit Variable"
           onDismiss={this.props.onCloseOverlay}
         />
-
-        <Form onSubmit={this.handleSubmit}>
-          <Overlay.Body>
-            <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={this.script}
-                  onChangeScript={this.handleChangeScript}
-                  visibility="visible"
-                  suggestions={[]}
-                />
-              </div>
-            </Form.Element>
-
-            <Overlay.Footer>
-              <Button
-                text="Cancel"
-                color={ComponentColor.Danger}
-                onClick={onCloseOverlay}
-              />
-              <Button
-                text="Submit"
-                type={ButtonType.Submit}
-                color={ComponentColor.Primary}
-                status={
-                  this.isVariableValid
-                    ? ComponentStatus.Default
-                    : ComponentStatus.Disabled
-                }
-              />
-            </Overlay.Footer>
-          </Overlay.Body>
-        </Form>
+        <Overlay.Body>
+          <Form onSubmit={this.handleSubmit}>
+            <Grid>
+              <Grid.Row>
+                <Grid.Column>
+                  <div className="overlay-flux-editor--spacing">
+                    <Form.ValidationElement
+                      label="Name"
+                      value={variable.name}
+                      required={true}
+                      validationFunc={this.handleNameValidation}
+                    >
+                      {status => (
+                        <Input
+                          placeholder="Give your variable a name"
+                          name="name"
+                          autoFocus={true}
+                          value={variable.name}
+                          onChange={this.handleChangeInput}
+                          status={status}
+                        />
+                      )}
+                    </Form.ValidationElement>
+                  </div>
+                </Grid.Column>
+              </Grid.Row>
+              <Grid.Row>
+                <Grid.Column>
+                  <Form.Element label="Value">
+                    <div className="overlay-flux-editor">
+                      <FluxEditor
+                        script={this.script}
+                        onChangeScript={this.handleChangeScript}
+                        visibility="visible"
+                        suggestions={[]}
+                      />
+                    </div>
+                  </Form.Element>
+                </Grid.Column>
+              </Grid.Row>
+              <Grid.Row>
+                <Grid.Column>
+                  <Form.Footer>
+                    <Button
+                      text="Cancel"
+                      color={ComponentColor.Danger}
+                      onClick={onCloseOverlay}
+                    />
+                    <Button
+                      text="Submit"
+                      type={ButtonType.Submit}
+                      color={ComponentColor.Primary}
+                      status={
+                        isFormValid
+                          ? ComponentStatus.Default
+                          : ComponentStatus.Disabled
+                      }
+                    />
+                  </Form.Footer>
+                </Grid.Column>
+              </Grid.Row>
+            </Grid>
+          </Form>
+        </Overlay.Body>
       </Overlay.Container>
     )
   }
 
-  private get isVariableValid(): boolean {
-    return !!this.state.variable.name && !!this.script
-  }
-
   private get script(): string {
     return _.get(this.state, 'variable.arguments.values.query', '')
   }
@@ -130,23 +146,22 @@ export default class UpdateVariableOverlay extends PureComponent<Props, State> {
     this.setState({variable: newVariable})
   }
 
+  private handleNameValidation = (name: string) => {
+    const {variables} = this.props
+    const {error} = validateVariableName(name, variables)
+
+    this.setState({isFormValid: !error})
+
+    return error
+  }
+
   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: '',
     })
   }
 }

ui/src/variables/components/VariableForm.tsx

@@ -10,7 +10,11 @@ import {validateVariableName} from 'src/variables/utils/validation'
 
 // Types
 import {IVariable as Variable} from '@influxdata/influx'
-import {ButtonType, ComponentColor} from '@influxdata/clockface'
+import {
+  ButtonType,
+  ComponentColor,
+  ComponentStatus,
+} from '@influxdata/clockface'
 
 interface Props {
   onCreateVariable: (variable: Pick<Variable, 'name' | 'arguments'>) => void
@@ -22,6 +26,7 @@ interface Props {
 interface State {
   name: string
   script: string
+  isFormValid: boolean
 }
 
 export default class VariableForm extends PureComponent<Props, State> {
@@ -30,12 +35,13 @@ export default class VariableForm extends PureComponent<Props, State> {
     this.state = {
       name: '',
       script: this.props.initialScript || '',
+      isFormValid: false,
     }
   }
 
   public render() {
     const {onHideOverlay} = this.props
-    const {name, script} = this.state
+    const {name, script, isFormValid} = this.state
 
     return (
       <Form onSubmit={this.handleSubmit}>
@@ -85,6 +91,11 @@ export default class VariableForm extends PureComponent<Props, State> {
                   text="Create"
                   type={ButtonType.Submit}
                   color={ComponentColor.Primary}
+                  status={
+                    isFormValid
+                      ? ComponentStatus.Default
+                      : ComponentStatus.Disabled
+                  }
                 />
               </Form.Footer>
             </Grid.Column>
@@ -110,8 +121,11 @@ export default class VariableForm extends PureComponent<Props, State> {
 
   private handleNameValidation = (name: string) => {
     const {variables} = this.props
+    const {error} = validateVariableName(name, variables)
 
-    return validateVariableName(name, variables).error
+    this.setState({isFormValid: !error})
+
+    return error
   }
 
   private handleChangeInput = (e: ChangeEvent<HTMLInputElement>) => {

ui/src/variables/components/VariableList.tsx

@@ -65,6 +65,7 @@ class VariableList extends PureComponent<Props, State> {
         <Overlay visible={this.isVariableOverlayVisible}>
           <UpdateVariableOverlay
             variable={this.variable}
+            variables={variables}
             onCloseOverlay={this.handleCloseOverlay}
             onUpdateVariable={this.handleUpdateVariable}
           />

ui/src/variables/components/__snapshots__/Variables.test.tsx.snap

@@ -45,6 +45,21 @@ exports[`VariableList rendering renders 1`] = `
     <UpdateVariableOverlay
       onCloseOverlay={[Function]}
       onUpdateVariable={[Function]}
+      variables={
+        Array [
+          Object {
+            "arguments": Object {
+              "type": "query",
+              "values": Object {
+                "language": "flux",
+                "query": "1 + 1 ",
+              },
+            },
+            "name": "a little variable",
+            "orgID": "0",
+          },
+        ]
+      }
     />
   </Overlay>
 </Fragment>