Merge pull request #13795 from influxdata/fix-variable-rename-overlay

Update variable rename overlay and argument type
influxdata · May 6, 2019 · bc80113 · bc80113
2 parents 761e815 + 80cd9b7
commit bc80113
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 53 deletions.
diff --git a/ui/src/variables/components/RenameVariableForm.tsx b/ui/src/variables/components/RenameVariableForm.tsx
@@ -6,7 +6,6 @@ import {withRouter, WithRouterProps} from 'react-router'
 
 // Components
 import {Form, Input, Button, Grid, Columns} from '@influxdata/clockface'
-import {Overlay} from 'src/clockface'
 
 // Utils
 import {validateVariableName} from 'src/variables/utils/validation'
@@ -55,59 +54,54 @@ class RenameVariableOverlayForm extends PureComponent<Props, State> {
     const {workingVariable, isNameValid} = this.state
 
     return (
-      <Overlay.Container maxWidth={1000}>
-        <Overlay.Heading title="Rename Variable" onDismiss={onClose} />
-        <Overlay.Body>
-          <Form onSubmit={this.handleSubmit}>
-            <Grid>
-              <Grid.Row>
-                <Grid.Column widthXS={Columns.Six}>
-                  <div className="overlay-flux-editor--spacing">
-                    <Form.ValidationElement
-                      label="Name"
+      <Form onSubmit={this.handleSubmit}>
+        <Grid>
+          <Grid.Row>
+            <Grid.Column widthXS={Columns.Six}>
+              <div className="overlay-flux-editor--spacing">
+                <Form.ValidationElement
+                  label="Name"
+                  value={workingVariable.name}
+                  required={true}
+                  validationFunc={this.handleNameValidation}
+                >
+                  {status => (
+                    <Input
+                      placeholder="Rename your variable"
+                      name="name"
+                      autoFocus={true}
                       value={workingVariable.name}
-                      required={true}
-                      validationFunc={this.handleNameValidation}
-                    >
-                      {status => (
-                        <Input
-                          placeholder="Rename your variable"
-                          name="name"
-                          autoFocus={true}
-                          value={workingVariable.name}
-                          onChange={this.handleChangeInput}
-                          status={status}
-                        />
-                      )}
-                    </Form.ValidationElement>
-                  </div>
-                </Grid.Column>
-              </Grid.Row>
-              <Grid.Row>
-                <Grid.Column>
-                  <Form.Footer>
-                    <Button
-                      text="Cancel"
-                      color={ComponentColor.Danger}
-                      onClick={onClose}
+                      onChange={this.handleChangeInput}
+                      status={status}
                     />
-                    <Button
-                      text="Submit"
-                      type={ButtonType.Submit}
-                      color={ComponentColor.Primary}
-                      status={
-                        isNameValid
-                          ? ComponentStatus.Default
-                          : ComponentStatus.Disabled
-                      }
-                    />
-                  </Form.Footer>
-                </Grid.Column>
-              </Grid.Row>
-            </Grid>
-          </Form>
-        </Overlay.Body>
-      </Overlay.Container>
+                  )}
+                </Form.ValidationElement>
+              </div>
+            </Grid.Column>
+          </Grid.Row>
+          <Grid.Row>
+            <Grid.Column>
+              <Form.Footer>
+                <Button
+                  text="Cancel"
+                  color={ComponentColor.Danger}
+                  onClick={onClose}
+                />
+                <Button
+                  text="Submit"
+                  type={ButtonType.Submit}
+                  color={ComponentColor.Primary}
+                  status={
+                    isNameValid
+                      ? ComponentStatus.Default
+                      : ComponentStatus.Disabled
+                  }
+                />
+              </Form.Footer>
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      </Form>
     )
   }
 

diff --git a/ui/src/variables/components/VariableRow.tsx b/ui/src/variables/components/VariableRow.tsx
@@ -70,7 +70,9 @@ class VariableRow extends PureComponent<Props & WithRouterProps> {
             {this.labels}
           </ComponentSpacer>
         </IndexList.Cell>
-        <IndexList.Cell alignment={Alignment.Left}>Query</IndexList.Cell>
+        <IndexList.Cell alignment={Alignment.Left}>
+          {variable.arguments.type}
+        </IndexList.Cell>
         <IndexList.Cell revealOnHover={true} alignment={Alignment.Right}>
           <Button
             text="Rename"