From 6c1f55f41d4fed83896274084cc8c61c4ea247bb Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Tue, 6 May 2025 15:27:23 -0400
Subject: [PATCH] Add basic json check to variable value

---
 .../Variables/ManageVariable/VariableForm.tsx | 42 +++++++++++++++----
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/pages/Variables/ManageVariable/VariableForm.tsx b/airflow-core/src/airflow/ui/src/pages/Variables/ManageVariable/VariableForm.tsx
index 8ae39c58210b5..2b7c65e760e90 100644
--- a/airflow-core/src/airflow/ui/src/pages/Variables/ManageVariable/VariableForm.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/Variables/ManageVariable/VariableForm.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, Field, HStack, Input, Spacer, Textarea } from "@chakra-ui/react";
+import { Box, Field, HStack, Input, Spacer, Textarea, Text } from "@chakra-ui/react";
 import { Controller, useForm } from "react-hook-form";
 import { FiSave } from "react-icons/fi";
 
@@ -29,6 +29,16 @@ export type VariableBody = {
   value: string;
 };
 
+const isJsonString = (string: string) => {
+  try {
+    JSON.parse(string);
+  } catch {
+    return false;
+  }
+
+  return true;
+};
+
 type VariableFormProps = {
   readonly error: unknown;
   readonly initialVariable: VariableBody;
@@ -80,14 +90,28 @@ const VariableForm = ({ error, initialVariable, isPending, manageMutate, setErro
       <Controller
         control={control}
         name="value"
-        render={({ field }) => (
-          <Field.Root mt={4}>
-            <Field.Label fontSize="md">
-              Value <Field.RequiredIndicator />
-            </Field.Label>
-            <Textarea {...field} size="sm" />
-          </Field.Root>
-        )}
+        render={({ field, fieldState }) => {
+          const showJsonWarning =
+            field.value.startsWith("{") || field.value.startsWith("[") ? !isJsonString(field.value) : false;
+
+          return (
+            <Field.Root invalid={Boolean(fieldState.error)} mt={4} required>
+              <Field.Label fontSize="md">
+                Value <Field.RequiredIndicator />
+              </Field.Label>
+              <Textarea {...field} size="sm" />
+              {showJsonWarning ? (
+                <Text color="fg.warning" fontSize="xs">
+                  Invalid JSON
+                </Text>
+              ) : undefined}
+              {fieldState.error ? <Field.ErrorText>{fieldState.error.message}</Field.ErrorText> : undefined}
+            </Field.Root>
+          );
+        }}
+        rules={{
+          required: "Value is required",
+        }}
       />
 
       <Controller