fix(wf-reset): Small updates to webforms to improve testing (#375)

* feat: add clear button

* feat: add printout of submitted data

---------

Co-authored-by: Daniel Belcher <[email protected]>

src/services/ui/src/components/Webform/index.tsx

@@ -8,6 +8,7 @@ import { LoadingSpinner } from "@/components";
 import { Footer } from "./footer";
 import { Link, useParams } from "../Routing";
 import { useReadOnlyUser } from "./useReadOnlyUser";
+import { useState } from "react";
 
 export const Webforms = () => {
   return (
@@ -72,16 +73,25 @@ function WebformBody({
   const form = useForm({
     defaultValues: values,
   });
+  const [subData, setSubData] = useState("");
 
   const onSave = () => {
     const values = form.getValues();
     localStorage.setItem(`${id}v${version}`, JSON.stringify(values));
     alert("Saved");
   };
 
+  const reset = () => {
+    setSubData("");
+    form.reset(documentInitializer(data));
+    localStorage.removeItem(`${id}v${version}`);
+    alert("Data Cleared");
+  };
+
   const onSubmit = form.handleSubmit(
     (draft) => {
       console.log({ draft });
+      setSubData(JSON.stringify(draft, undefined, 2));
       /**
        * The validator is intended to be a replica of RHF validation.
        * To be used in backend api handlers to validate incoming/outgoing form data against document when...
@@ -104,16 +114,27 @@ function WebformBody({
           <fieldset disabled={readonly}>
             <RHFDocument document={data} {...form} />
             {!readonly && (
-              <div className="flex justify-between text-blue-700 underline">
-                <Button type="button" onClick={onSave} variant="ghost">
-                  Save draft
-                </Button>
+              <div className="flex justify-between text-blue-700 underline my-2">
+                <div>
+                  <Button type="button" onClick={onSave} variant="ghost">
+                    Save draft
+                  </Button>
+                  <Button
+                    type="button"
+                    onClick={reset}
+                    variant="outline"
+                    className="mx-2"
+                  >
+                    Clear Data
+                  </Button>
+                </div>
                 <Button type="submit">Submit</Button>
               </div>
             )}
           </fieldset>
         </form>
       </Form>
+      {subData && <pre className="my-2 text-sm">{subData}</pre>}
       <Footer />
     </div>
   );