Fix closing and tab order issues for variables dialog (#16367)

ui-v2/biome.json

@@ -7,15 +7,15 @@
 	},
 	"files": {
 		"ignoreUnknown": false,
-		"ignore": ["src/api/prefect.ts"]
+		"ignore": ["src/api/prefect.ts", "src/routeTree.gen.ts"]
 	},
 	"formatter": {
 		"enabled": true,
 		"indentStyle": "tab"
 	},
 	"organizeImports": {
 		"enabled": true,
-		"ignore": ["src/api/prefect.ts"]
+		"ignore": ["src/api/prefect.ts", "src/routeTree.gen.ts"]
 	},
 	"linter": {
 		"enabled": false,

ui-v2/src/components/ui/json-input.tsx

@@ -2,7 +2,11 @@ import React, { useRef, useEffect } from "react";
 
 import { cn } from "@/lib/utils";
 import { json } from "@codemirror/lang-json";
-import { EditorView, useCodeMirror } from "@uiw/react-codemirror";
+import {
+	type BasicSetupOptions,
+	EditorView,
+	useCodeMirror,
+} from "@uiw/react-codemirror";
 
 const extensions = [json(), EditorView.lineWrapping];
 
@@ -20,6 +24,16 @@ export const JsonInput = React.forwardRef<HTMLDivElement, JsonInputProps>(
 		forwardedRef,
 	) => {
 		const editor = useRef<HTMLDivElement | null>(null);
+		// Setting `basicSetup` messes up the tab order. We only change the basic setup
+		// if the input is disabled, so we leave it undefined to maintain the tab order.
+		let basicSetup: BasicSetupOptions | undefined;
+		if (disabled) {
+			basicSetup = {
+				highlightActiveLine: false,
+				foldGutter: false,
+				highlightActiveLineGutter: false,
+			};
+		}
 		const { setContainer } = useCodeMirror({
 			container: editor.current,
 			extensions,
@@ -28,11 +42,7 @@ export const JsonInput = React.forwardRef<HTMLDivElement, JsonInputProps>(
 			onBlur,
 			indentWithTab: false,
 			editable: !disabled,
-			basicSetup: {
-				highlightActiveLine: !disabled,
-				foldGutter: !disabled,
-				highlightActiveLineGutter: !disabled,
-			},
+			basicSetup,
 		});
 
 		useEffect(() => {

ui-v2/src/components/variables/variable-dialog/variable-dialog.tsx

@@ -93,6 +93,7 @@ export const VariableDialog = ({
 							toast({
 								title: "Variable updated",
 							});
+							onOpenChange(false);
 						},
 						onError: (error) => {
 							const message =
@@ -115,6 +116,7 @@ export const VariableDialog = ({
 							toast({
 								title: "Variable created",
 							});
+							onOpenChange(false);
 						},
 						onError: (error) => {
 							const message =