feat(read-only): add read only mode to webforms (#329)

* feat: disabled and readonly set for rhf comps

* chore: fix footer to be footer

* feat: add user role check for readonly

- readonly based off user role
- change the webform component to load data before setting default values through useForm
- this change should fix the controlled component error message

* fix: remove submit button when read only

* Update index.tsx

* fix: remove unnecessary context and use fieldset

- remove readonly context from majority of components
- use fieldset to set disabled for majority of components
- change readonly role to just state submitter for now

* chore: addtnl cleanup

* chore: addtnl cleanup 2

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

@@ -1,6 +1,6 @@
 export const Footer = () => {
   return (
-    <div className="flex flex-col gap-2 my-6 text-sm text-slate-500">
+    <footer className="flex flex-col gap-2 my-6 text-sm text-slate-500">
       <b>{"PRA Disclosure Statement"}</b>
       <p>
         {
@@ -31,6 +31,6 @@ export const Footer = () => {
           "CMS, 7500 Security Boulevard, Attn: PRA Reports Clearance Officer, Mail Stop C4-26-05, Baltimore, Maryland 21244-1850."
         }
       </p>
-    </div>
+    </footer>
   );
 };

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

@@ -7,6 +7,7 @@ import { useGetForm } from "@/api";
 import { LoadingSpinner } from "@/components";
 import { Footer } from "./footer";
 import { Link, useParams } from "../Routing";
+import { useReadOnlyUser } from "./useReadOnlyUser";
 
 export const Webforms = () => {
   return (
@@ -53,15 +54,23 @@ export const Webforms = () => {
   );
 };
 
-export function Webform() {
-  const { id, version } = useParams("/webform/:id/:version");
-
-  const { data, isLoading, error } = useGetForm(id as string, version);
+interface WebformBodyProps {
+  id: string;
+  version: string;
+  data: any;
+  readonly: boolean;
+  values: any;
+}
 
-  const defaultValues = data ? documentInitializer(data) : {};
-  const savedData = localStorage.getItem(`${id}v${version}`);
+function WebformBody({
+  version,
+  id,
+  data,
+  values,
+  readonly,
+}: WebformBodyProps) {
   const form = useForm({
-    defaultValues: savedData ? JSON.parse(savedData) : defaultValues,
+    defaultValues: values,
   });
 
   const onSave = () => {
@@ -88,6 +97,36 @@ export function Webform() {
     }
   );
 
+  return (
+    <div className="max-w-screen-xl mx-auto p-4 py-8 lg:px-8">
+      <Form {...form}>
+        <form onSubmit={onSubmit} className="space-y-6">
+          <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>
+                <Button type="submit">Submit</Button>
+              </div>
+            )}
+          </fieldset>
+        </form>
+      </Form>
+      <Footer />
+    </div>
+  );
+}
+
+export function Webform() {
+  const { id, version } = useParams("/webform/:id/:version");
+
+  const { data, isLoading, error } = useGetForm(id as string, version);
+  const readonly = useReadOnlyUser();
+  const defaultValues = data ? documentInitializer(data) : {};
+  const savedData = localStorage.getItem(`${id}v${version}`);
+
   if (isLoading) return <LoadingSpinner />;
   if (error || !data) {
     return (
@@ -98,19 +137,12 @@ export function Webform() {
   }
 
   return (
-    <div className="max-w-screen-xl mx-auto p-4 py-8 lg:px-8">
-      <Form {...form}>
-        <form onSubmit={onSubmit} className="space-y-6">
-          <RHFDocument document={data} {...form} />
-          <div className="flex justify-between text-blue-700 underline">
-            <Button type="button" onClick={onSave} variant="ghost">
-              Save draft
-            </Button>
-            <Button type="submit">Submit</Button>
-          </div>
-        </form>
-      </Form>
-      <Footer />
-    </div>
+    <WebformBody
+      data={data}
+      readonly={readonly}
+      id={id}
+      version={version}
+      values={savedData ? JSON.parse(savedData) : defaultValues}
+    />
   );
 }

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

@@ -0,0 +1,8 @@
+import { useGetUser } from "@/api/useGetUser";
+import { UserRoles } from "shared-types";
+
+export const useReadOnlyUser = () => {
+  const { data } = useGetUser();
+  const role = data?.user?.["custom:cms-roles"];
+  return role !== UserRoles.STATE_SUBMITTER;
+};