feat: render form from current state

Author: brettkolodny

preview/main.go

@@ -63,10 +63,24 @@ func tfpreview(this js.Value, p []js.Value) (output any) {
 
 	handler := slog.NewJSONHandler(l, nil)
 	logger := slog.New(handler)
+
+	var parameters map[string]string
+	if len(p) >= 2 {
+		params, err := jsValueToStringMap(p[1])
+		if err != nil {
+			logger.Error("Unable to convert second prameter into map[string]string", "err", err)
+		}
+
+		parameters = params
+	} else {
+		logger.Error(fmt.Sprintf("Expected 2 arguments but got %v", len(p)))
+
+	}
+
 	pOutput, diags := preview.Preview(context.Background(), preview.Input{
 		PlanJSONPath:    "",
 		PlanJSON:        nil,
-		ParameterValues: nil,
+		ParameterValues: parameters,
 		Owner:           types.WorkspaceOwner{},
 		Logger:          logger,
 	}, tf)
@@ -145,3 +159,41 @@ func (l *Logger) Write(p []byte) (n int, err error) {
 
 	return len(p), nil
 }
+
+func jsValueToStringMap(jsVal js.Value) (map[string]string, error) {
+	result := make(map[string]string)
+
+	// Validate input
+	if jsVal.IsUndefined() || jsVal.IsNull() {
+		return nil, fmt.Errorf("js.Value is undefined or null")
+	}
+
+	if jsVal.Type() != js.TypeObject {
+		return nil, fmt.Errorf("js.Value is not an object")
+	}
+
+	// Get object keys
+	keys := js.Global().Get("Object").Call("keys", jsVal)
+
+	for i := range keys.Length() {
+		key := keys.Index(i).String()
+		value := jsVal.Get(key)
+
+		// Handle different value types
+		switch value.Type() {
+		case js.TypeString:
+			result[key] = value.String()
+		case js.TypeNumber:
+			result[key] = fmt.Sprintf("%f", value.Float())
+		case js.TypeBoolean:
+			result[key] = fmt.Sprintf("%t", value.Bool())
+		case js.TypeNull, js.TypeUndefined:
+			result[key] = ""
+		default:
+			// For objects, arrays, etc., use String() method
+			result[key] = value.String()
+		}
+	}
+
+	return result, nil
+}

public/build/preview.wasm

@@ -32,7 +32,10 @@ import {
 import { rpc } from "@/utils/rpc";
 import { useLoaderData, type LoaderFunctionArgs } from "react-router";
 
-type GoPreviewDef = (v: unknown) => Promise<string>;
+type GoPreviewDef = (
+	v: Record<string, string>,
+	params: Record<string, string>,
+) => Promise<string>;
 
 // Extend the Window object to include the Go related code that is added from
 // wasm_exec.js and our loaded Go code.

src/client/App.tsx

@@ -39,6 +39,8 @@ export const Preview: FC = () => {
 	const $setError = useStore((state) => state.setError);
 	const $parameters = useStore((state) => state.parameters);
 	const $setParameters = useStore((state) => state.setParameters);
+	const $form = useStore((state) => state.form);
+	const $resetForm = useStore((state) => state.resetForm);
 
 	const [debouncedCode, isDebouncing] = useDebouncedValue($code, 1000);
 	const [output, setOutput] = useState<PreviewOutput | null>(() => null);
@@ -77,9 +79,12 @@ export const Preview: FC = () => {
 
 		const getOutput = async () => {
 			try {
-				const rawOutput = await window.go_preview?.({
-					"main.tf": debouncedCode,
-				});
+				const rawOutput = await window.go_preview?.(
+					{
+						"main.tf": debouncedCode,
+					},
+					$form,
+				);
 
 				if (rawOutput === undefined) {
 					console.error("Something went wrong");
@@ -90,7 +95,7 @@ export const Preview: FC = () => {
 					const errors = outputToDiagnostics(output);
 					$setError(errors);
 
-					if (errors.length === 0) {
+					if (output.diags.length === 0) {
 						$setParameters(output.output?.Parameters ?? []);
 					}
 				}
@@ -118,7 +123,7 @@ export const Preview: FC = () => {
 		};
 
 		getOutput();
-	}, [debouncedCode, $setError, $wasmState, $setParameters]);
+	}, [debouncedCode, $setError, $wasmState, $setParameters, $form]);
 
 	return (
 		<Tabs.Root
@@ -206,7 +211,9 @@ export const Preview: FC = () => {
 										) : null}
 									</AnimatePresence>
 								</div>
-								<Button variant="destructive">Reset form</Button>
+								<Button variant="destructive" onClick={$resetForm}>
+									Reset form
+								</Button>
 							</div>
 						}
 						{!output ? (
@@ -592,32 +599,7 @@ const FormElement: FC<FormElementProps> = ({ parameter }) => {
 			value={value}
 			autofill={false}
 			onChange={onValueChange}
+			disabled={parameter.styling.disabled}
 		/>
 	);
-
-	// if (parameter.form_type === ParameterFormType.ParameterFormTypeInput) {
-	// 	return (
-	// 		<Input
-	// 			onChange={(e) => onValueChange(e.target.value)}
-	// 			id={parameter.name}
-	// 			value={value}
-	// 		/>
-	// 	);
-	// }
-	// if (parameter.form_type === ParameterFormType.ParameterFormTypeRadio) {
-	// 	return (
-	// 		<RadioGroup value={value} onValueChange={onValueChange}>
-	// 			{parameter.options
-	// 				.filter((o) => o !== null)
-	// 				.map((o, index) => (
-	// 					<div className="flex items-center gap-2" key={index}>
-	// 						<RadioGroupItem value={o.value.value} title={"foo"} />
-	// 						<p className="text-content-primary text-sm">{o.name}</p>
-	// 					</div>
-	// 				))}
-	// 		</RadioGroup>
-	// 	);
-	// }
-
-	// return null;
 };

src/client/Preview.tsx

@@ -531,7 +531,7 @@ const ParameterField: FC<ParameterFieldProps> = ({
 						max={parameter.validations[0]?.validation_max ?? 100}
 						disabled={disabled}
 					/>
-					<span className="w-4 font-medium">
+					<span className="w-4 font-medium text-content-secondary">
 						{Number.isFinite(Number(value)) ? value : "0"}
 					</span>
 				</div>

src/client/components/DynamicParameter.tsx

@@ -43,6 +43,9 @@ export const Markdown: FC<MarkdownProps> = (props) => {
 			// className={className}
 			remarkPlugins={[gfm]}
 			components={{
+				p: ({ children }) => {
+					return <p className="text-xs">{children}</p>;
+				},
 				a: ({ href, children }) => {
 					const isExternal = href?.startsWith("http");
 
@@ -118,7 +121,7 @@ export const Markdown: FC<MarkdownProps> = (props) => {
 				},
 
 				h2: ({ children }) => {
-					return <h2  className="mt-8 mb-4">{children}</h2>;
+					return <h2 className="mt-8 mb-4">{children}</h2>;
 				},
 
 				h3: ({ children }) => {

src/client/components/Markdown.tsx

@@ -35,6 +35,7 @@ type State = {
 	setWasmState: (wasmState: WasmState) => void;
 	setParameters: (parameters: Parameter[]) => void;
 	setFormState: (key: string, value: string) => void;
+	resetForm: () => void;
 };
 
 export const useStore = create<State>()((set) => ({
@@ -70,4 +71,5 @@ export const useStore = create<State>()((set) => ({
 
 			return { form };
 		}),
+	resetForm: () => set(() => ({ form: {} })),
 }));