From f048fddc1b4830442521ccf52c010a6a1e5afdda Mon Sep 17 00:00:00 2001
From: Michael Desa <mjdesa@gmail.com>
Date: Wed, 11 Sep 2019 16:24:53 -0400
Subject: [PATCH] fix(variables/components/VariableForm): check to see if form
 is valid

Closes https://github.com/influxdata/influxdb/issues/15060

Previously, the create button for a variable wouldn't be enabled unless
the user clicked in the text box, despite a query being present. This
adds an aditional check to the `isFormValid` method that ensures that if
a query is present the create button will be enabled.
---
 ui/src/variables/components/VariableForm.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/ui/src/variables/components/VariableForm.tsx b/ui/src/variables/components/VariableForm.tsx
index a0c07e51e9..f0b854a080 100644
--- a/ui/src/variables/components/VariableForm.tsx
+++ b/ui/src/variables/components/VariableForm.tsx
@@ -161,9 +161,24 @@ export default class VariableForm extends PureComponent<Props, State> {
   }
 
   private get isFormValid(): boolean {
-    const {hasValidArgs, isNameValid} = this.state
+    const {isNameValid} = this.state
 
-    return hasValidArgs && isNameValid
+    return this.validArgs && isNameValid
+  }
+
+  private get validArgs(): boolean {
+    const {args} = this.state
+    switch (args.type) {
+      case 'query':
+        const {query} = args.values
+        return !!query
+      case 'constant':
+        return args.values.length !== 0
+      case 'map':
+        return Object.keys(args.values).length !== 0
+      default:
+        return false
+    }
   }
 
   private handleSubmit = (): void => {