From 80cd9b74d7758d5f0f56687f7b0486072e2a01fb Mon Sep 17 00:00:00 2001
From: Palak Bhojani <palak@influxdata.com>
Date: Mon, 6 May 2019 09:24:01 -0700
Subject: [PATCH] Update variable rename overlay and argument type

---
 .../components/RenameVariableForm.tsx         | 98 +++++++++----------
 ui/src/variables/components/VariableRow.tsx   |  4 +-
 2 files changed, 49 insertions(+), 53 deletions(-)

diff --git a/ui/src/variables/components/RenameVariableForm.tsx b/ui/src/variables/components/RenameVariableForm.tsx
index 8a810b44a6e..40d3eeec611 100644
--- 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
index 62ef25b047e..6b3204104a0 100644
--- 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"