Merge pull request #1073 from writer/AB-220

fix: prevent fallback value from overwriting cleared input by tracking dirty state - AB-220

Author: VladKrasny

src/ui/src/builder/useComponentFieldViewModel.spec.ts

@@ -0,0 +1,114 @@
+import { describe, it, expect, vi } from "vitest";
+import { ref, nextTick } from "vue";
+import { buildMockComponent, buildMockCore } from "@/tests/mocks";
+import { FieldType } from "@/writerTypes";
+import { generateBuilderManager } from "./builderManager";
+import {
+	useComponentFieldViewModel,
+	Dependencies,
+} from "./useComponentFieldViewModel";
+
+describe(useComponentFieldViewModel.name, () => {
+	const componentId = "TestComponent";
+	const fieldKey = "TestField";
+
+	let mockCore: ReturnType<typeof buildMockCore>;
+
+	function setupMockDependencies(
+		componentId: string,
+		fieldKey: string,
+	): Dependencies {
+		mockCore = buildMockCore();
+		mockCore.core.addComponent(
+			buildMockComponent({
+				id: componentId,
+				type: FieldType.Text,
+				content: {
+					[fieldKey]: undefined,
+				},
+			}),
+		);
+
+		vi.spyOn(mockCore.core, "getComponentDefinition").mockReturnValue({
+			name: "",
+			description: "",
+			fields: {
+				[fieldKey]: {
+					name: "",
+					type: FieldType.Text,
+					default: "default test",
+				},
+			},
+		});
+
+		return {
+			wf: mockCore.core,
+			ssbm: generateBuilderManager(),
+		};
+	}
+
+	it("Default: uses field default from component definition when content is unset", async () => {
+		const dependencies = setupMockDependencies(componentId, fieldKey);
+
+		const vm = useComponentFieldViewModel(
+			{ componentId, fieldKey },
+			dependencies,
+		);
+
+		await nextTick();
+
+		expect(vm.value).toBe("default test");
+	});
+
+	it("Default update: reactive defaultValue overrides definition and updates value when changed", async () => {
+		const dependencies = setupMockDependencies(componentId, fieldKey);
+
+		const defaultValue = ref("ref default test");
+
+		const vm = useComponentFieldViewModel(
+			{ componentId, fieldKey, defaultValue },
+			dependencies,
+		);
+
+		await nextTick();
+
+		expect(vm.value).toBe("ref default test");
+
+		defaultValue.value = "ref test";
+
+		await nextTick();
+
+		expect(vm.value).toBe("ref test");
+	});
+
+	it("viewModel update: setting vm.value persists to component content and reflects in getter", async () => {
+		const dependencies = setupMockDependencies(componentId, fieldKey);
+
+		const vm = useComponentFieldViewModel(
+			{ componentId, fieldKey },
+			dependencies,
+		);
+
+		await nextTick();
+
+		expect(vm.value).toBe("default test");
+
+		vm.value = "new value";
+
+		await nextTick();
+
+		expect(
+			mockCore.core.getComponentById(componentId).content[fieldKey],
+		).toBe("new value");
+		expect(vm.value).toBe("new value");
+
+		vm.value = "";
+
+		await nextTick();
+
+		expect(
+			mockCore.core.getComponentById(componentId).content[fieldKey],
+		).toBe("");
+		expect(vm.value).toBe("");
+	});
+});

src/ui/src/builder/useComponentFieldViewModel.ts

@@ -1,16 +1,16 @@
-import { computed, inject, MaybeRef, toValue, watch } from "vue";
+import { computed, inject, MaybeRef, ref, toValue, watch } from "vue";
 import { BuilderManager, Core } from "@/writerTypes";
 import injectionKeys from "@/injectionKeys";
 import { useLogger } from "@/composables/useLogger";
 import { useComponentActions } from "./useComponentActions";
 
-type Params = {
+export type Params = {
 	componentId: MaybeRef<string>;
 	fieldKey: MaybeRef<string>;
 	defaultValue?: MaybeRef<string | undefined>;
 };
 
-type Dependencies = {
+export type Dependencies = {
 	wf?: Core;
 	ssbm?: BuilderManager;
 };
@@ -72,16 +72,30 @@ export function useComponentFieldViewModel(
 		setContentValue(component.value.id, toValue(params.fieldKey), value);
 	}
 
+	const isDirty = ref(false);
+
+	watch(
+		[() => toValue(params.componentId), () => toValue(params.fieldKey)],
+		() => {
+			isDirty.value = false;
+		},
+	);
+
 	const fieldValue = computed<string>(() => {
-		return (
-			component.value?.content?.[toValue(params.fieldKey)] ||
-			fallbackValue.value
-		);
+		const val = component.value?.content?.[toValue(params.fieldKey)];
+
+		if (isDirty.value && typeof val === "string") {
+			return val;
+		}
+
+		return val || fallbackValue.value;
 	});
 
 	const fieldViewModel = computed<string>({
 		get: () => fieldValue.value,
 		set: (value: string) => {
+			isDirty.value = true;
+
 			setFieldValue(value);
 		},
 	});

src/ui/src/composables/useLogger.ts

@@ -1,12 +1,11 @@
 /* eslint-disable no-console */
 
+export type ILogger = Pick<typeof console, "log" | "warn" | "info" | "error">;
+
 /**
  * A simple abstraction to use logger in the application. For the moment, it's just a proxy to `console`, but it can be plugged to any library later.
  */
-export function useLogger(): Pick<
-	typeof console,
-	"log" | "warn" | "info" | "error"
-> {
+export function useLogger(): ILogger {
 	return {
 		log: console.log,
 		warn: console.warn,