Merge pull request #1106 from writer/AB-273

fix(ui): avoid opening Key-Value editor in freehand mode - AB-273

Author: madeindjs

src/ui/src/builder/settings/composables/useKeyValueEditor.spec.ts

@@ -136,4 +136,50 @@ describe(useKeyValueEditor.name, () => {
 			});
 		});
 	});
+
+	describe("initial mode", () => {
+		it("should open record in assisted", () => {
+			const { mode } = useKeyValueEditor({
+				foo: "bar",
+			});
+			expect(mode.value).toBe("assisted");
+		});
+
+		it("should open string record in assisted", () => {
+			const { mode } = useKeyValueEditor(
+				JSON.stringify({
+					foo: "bar",
+				}),
+			);
+			expect(mode.value).toBe("assisted");
+		});
+
+		it("should open simple template in freehand", () => {
+			const { mode } = useKeyValueEditor(
+				JSON.stringify({
+					foo: "@{var}",
+				}),
+			);
+			expect(mode.value).toBe("freehand");
+		});
+
+		it("should open full template in freehand", () => {
+			const { mode } = useKeyValueEditor("@{var}");
+			expect(mode.value).toBe("freehand");
+		});
+
+		it("should open malformed JSON in freehand", () => {
+			const { mode } = useKeyValueEditor("{");
+			expect(mode.value).toBe("freehand");
+		});
+
+		it("should open record in freehand", () => {
+			const { mode } = useKeyValueEditor(
+				JSON.stringify({
+					foo: [1, 2],
+				}),
+			);
+			expect(mode.value).toBe("freehand");
+		});
+	});
 });

src/ui/src/builder/settings/composables/useKeyValueEditor.ts

@@ -21,6 +21,10 @@ function tryToParse(value: string) {
 	}
 }
 
+function isFlatRecordString(obj: object): obj is Record<string, string> {
+	return Object.values(obj).every((v) => typeof v === "string");
+}
+
 export function useKeyValueEditor(originalValue: string | JSONValue) {
 	const getId = useId();
 
@@ -105,11 +109,16 @@ export function useKeyValueEditor(originalValue: string | JSONValue) {
 	}
 
 	function computeInitialMode(objectOrString: string | JSONValue): Mode {
-		return typeof objectOrString === "string" &&
-			(TEMPLATE_REGEX.exec(objectOrString) ||
-				!isValidJSON(objectOrString))
-			? "freehand"
-			: "assisted";
+		if (typeof objectOrString !== "string") {
+			return isFlatRecordString(objectOrString) ? "assisted" : "freehand";
+		}
+
+		if (TEMPLATE_REGEX.exec(objectOrString)) return "freehand";
+		if (!isValidJSON(objectOrString)) return "freehand";
+
+		return isFlatRecordString(tryToParse(objectOrString))
+			? "assisted"
+			: "freehand";
 	}
 
 	function initializeAssistedEntries(objectOrString: string | JSONValue) {