fix: properly reset form

Author: brettkolodny

preview/apitypes/apitypes.go

@@ -3,6 +3,7 @@ package apitypes
 import (
 	"time"
 
+	"github.com/google/uuid"
 	"github.com/hashicorp/hcl/v2"
 
 	"github.com/coder/preview/types"
@@ -64,6 +65,7 @@ type FriendlyDiagnostic = types.FriendlyDiagnostic
 
 type ParameterWithSource struct {
 	types.Parameter
+	Uuid      uuid.UUID `json:"uuid"`
 	TypeRange hcl.Range `json:"type_range"`
 	DefRange  hcl.Range `json:"def_range"`
 }
@@ -79,6 +81,7 @@ func WithSource(p []types.Parameter) []ParameterWithSource {
 			src.TypeRange = param.Source.HCLBlock().TypeRange
 			src.DefRange = param.Source.HCLBlock().DefRange
 		}
+		src.Uuid = uuid.New()
 
 		result = append(result, src)
 	}

public/build/preview.wasm

@@ -92,6 +92,16 @@ export const App = () => {
 		}, 100);
 	};
 
+	const onReset = () => {
+		setParameterValues({});
+		setParameters((curr) =>
+			curr.map((p) => {
+				p.uuid = window.crypto.randomUUID();
+				return p;
+			}),
+		);
+	};
+
 	useEffect(() => {
 		if (!window.go_preview) {
 			initWasm().then((loadState) => {
@@ -109,9 +119,22 @@ export const App = () => {
 			const newParameters = output?.output?.parameters ?? [];
 
 			return newParameters.map((p) => {
+				// Check if the parameter is already in the array and if it is then keep it.
+				// This allows us to optimize React by not re-rendering parameters that haven't changed.
+				//
+				// We unset value because the value may not be in sync with what we have locally,
+				// and we unset uuid because it's given a new random UUID every time.
 				const existing = curr.find((currP) => {
-					const currentParameterOmitValue = { ...currP, value: undefined };
-					const existingParameterOmitValue = { ...p, value: undefined };
+					const currentParameterOmitValue = {
+						...currP,
+						value: undefined,
+						uuid: undefined,
+					};
+					const existingParameterOmitValue = {
+						...p,
+						value: undefined,
+						uuid: undefined,
+					};
 
 					return isEqual(currentParameterOmitValue, existingParameterOmitValue);
 				});
@@ -193,6 +216,7 @@ export const App = () => {
 					parameterValues={parameterValues}
 					setParameterValues={setParameterValues}
 					parameters={parameters}
+					onReset={onReset}
 				/>
 			</ResizablePanelGroup>
 		</main>

src/client/App.tsx

@@ -56,6 +56,7 @@ type PreviewProps = {
 		React.SetStateAction<Record<string, string>>
 	>;
 	parameters: ParameterWithSource[];
+	onReset: () => void;
 };
 
 export const Preview: FC<PreviewProps> = ({
@@ -65,6 +66,7 @@ export const Preview: FC<PreviewProps> = ({
 	parameterValues,
 	setParameterValues,
 	parameters,
+	onReset,
 }) => {
 	const $errors = useStore((state) => state.errors);
 	const [params] = useSearchParams();
@@ -253,7 +255,7 @@ export const Preview: FC<PreviewProps> = ({
 						<div className="flex w-full justify-between gap-3">
 							<Button
 								variant="outline"
-								onClick={() => setParameterValues({})}
+								onClick={onReset}
 								className="w-fit"
 							>
 								Reset form
@@ -552,7 +554,7 @@ const Form: FC<FormProps> = ({
 			.map((p) => {
 				return (
 					<FormElement
-						key={p.name}
+						key={p.uuid}
 						parameter={p}
 						value={parameterValues[p.name]}
 						setParameterValues={setParameterValues}

src/client/Preview.tsx

@@ -100,6 +100,7 @@ export interface ParameterValidation {
 
 // From apitypes/apitypes.go
 export interface ParameterWithSource extends Parameter {
+    uuid: string;
     type_range: Range;
     def_range: Range;
 }