From 14329b5101a261bc92c11b5e546197311a95eb57 Mon Sep 17 00:00:00 2001
From: Daniel Belcher <daniel.belcher.cs@gmail.com>
Date: Thu, 18 Jan 2024 07:09:48 -0800
Subject: [PATCH 1/8] feat: disabled and readonly set for rhf comps

---
 src/packages/shared-types/forms.ts            |  3 ++
 .../ui/src/components/RHF/Document.tsx        | 32 +++++++++++--------
 .../ui/src/components/RHF/FieldArray.tsx      | 14 +++++---
 .../ui/src/components/RHF/FieldGroup.tsx      | 18 +++++++----
 .../ui/src/components/RHF/FormGroup.tsx       |  6 ++++
 src/services/ui/src/components/RHF/Slot.tsx   | 25 ++++++++++++---
 .../ui/src/components/RHF/utils/index.ts      |  1 +
 .../components/RHF/utils/readonlyContext.tsx  | 22 +++++++++++++
 8 files changed, 90 insertions(+), 31 deletions(-)
 create mode 100644 src/services/ui/src/components/RHF/utils/readonlyContext.tsx

diff --git a/src/packages/shared-types/forms.ts b/src/packages/shared-types/forms.ts
index 8d28ddf1ea..0aad6b9af4 100644
--- a/src/packages/shared-types/forms.ts
+++ b/src/packages/shared-types/forms.ts
@@ -20,6 +20,7 @@ export interface FormSchema {
 
 export type RHFSlotProps = {
   name: string;
+  readonly?: boolean;
   label?: string;
   labelStyling?: string;
   formItemStyling?: string;
@@ -97,6 +98,7 @@ export type FieldArrayProps<
 > = {
   control: Control<T, unknown>;
   name: TFieldArrayName;
+  readonly?: boolean;
   fields: RHFSlotProps[];
   groupNamePrefix?: string;
   appendText?: string;
@@ -107,6 +109,7 @@ export type FieldGroupProps<
   TFieldArrayName extends FieldArrayPath<T> = FieldArrayPath<T>
 > = {
   control: Control<T, unknown>;
+  readonly?: boolean;
   name: TFieldArrayName;
   fields: RHFSlotProps[];
   appendText?: string;
diff --git a/src/services/ui/src/components/RHF/Document.tsx b/src/services/ui/src/components/RHF/Document.tsx
index 237b54e0a0..4e753381ee 100644
--- a/src/services/ui/src/components/RHF/Document.tsx
+++ b/src/services/ui/src/components/RHF/Document.tsx
@@ -3,28 +3,32 @@ import { Control, FieldValues } from "react-hook-form";
 import { FormLabel } from "../Inputs";
 import { RHFSection } from "./Section";
 import { FormSchema } from "shared-types";
+import { ReadOnlyContextProvider } from "./utils";
 
 export const RHFDocument = <TFieldValues extends FieldValues>(props: {
   document: FormSchema;
   control: Control<TFieldValues>;
+  readonly?: boolean;
 }) => {
   return (
     <div>
-      <div className="h-[5px] bg-gradient-to-r from-primary from-50% to-[#02bfe7] to-[66%] rounded-t"></div>
-      <div className="py-4 px-8 border-2 border-t-0 mt-0">
-        <div className="mb-3 mt-9">
-          <FormLabel className="font-bold text-4xl px-8 inline-block leading-[48px]">
-            {props.document.header}
-          </FormLabel>
+      <ReadOnlyContextProvider readonly={!!props.readonly}>
+        <div className="h-[5px] bg-gradient-to-r from-primary from-50% to-[#02bfe7] to-[66%] rounded-t"></div>
+        <div className="py-4 px-8 border-2 border-t-0 mt-0">
+          <div className="mb-3 mt-9">
+            <FormLabel className="font-bold text-4xl px-8 inline-block leading-[48px]">
+              {props.document.header}
+            </FormLabel>
+          </div>
+          {props.document.sections.map((SEC, index) => (
+            <RHFSection
+              key={`rhf-section-${index}-${SEC.title}`}
+              control={props.control}
+              section={SEC}
+            />
+          ))}
         </div>
-        {props.document.sections.map((SEC, index) => (
-          <RHFSection
-            key={`rhf-section-${index}-${SEC.title}`}
-            control={props.control}
-            section={SEC}
-          />
-        ))}
-      </div>
+      </ReadOnlyContextProvider>
     </div>
   );
 };
diff --git a/src/services/ui/src/components/RHF/FieldArray.tsx b/src/services/ui/src/components/RHF/FieldArray.tsx
index 61a594d7d8..0994cf0d33 100644
--- a/src/services/ui/src/components/RHF/FieldArray.tsx
+++ b/src/services/ui/src/components/RHF/FieldArray.tsx
@@ -38,18 +38,20 @@ export const RHFFieldArray = <TFields extends FieldValues>(
                 <FormField
                   key={adjustedSlotName}
                   control={props.control}
+                  disabled={!!props.readonly}
                   name={adjustedSlotName as never}
                   {...(SLOT.rules && { rules: SLOT.rules })}
                   render={RHFSlot({
                     ...SLOT,
                     control: props.control,
+                    readonly: props.readonly,
                     name: adjustedSlotName,
                     groupNamePrefix: adjustedPrefix,
                   })}
                 />
               );
             })}
-            {index >= 1 && (
+            {!props.readonly && index >= 1 && (
               <Trash2
                 className="self-end mb-4 cursor-pointer stroke-primary"
                 onClick={() => fieldArr.remove(index)}
@@ -59,10 +61,12 @@ export const RHFFieldArray = <TFields extends FieldValues>(
         );
       })}
       <div className="flex items-center mt-2">
-        <Button type="button" size="sm" onClick={onAppend} variant="outline">
-          <Plus className="h-5 w-5 mr-2" />
-          {props.appendText ?? "New Row"}
-        </Button>
+        {!props.readonly && (
+          <Button type="button" size="sm" onClick={onAppend} variant="outline">
+            <Plus className="h-5 w-5 mr-2" />
+            {props.appendText ?? "New Row"}
+          </Button>
+        )}
       </div>
     </div>
   );
diff --git a/src/services/ui/src/components/RHF/FieldGroup.tsx b/src/services/ui/src/components/RHF/FieldGroup.tsx
index fcebaea3dd..95bfcd40dd 100644
--- a/src/services/ui/src/components/RHF/FieldGroup.tsx
+++ b/src/services/ui/src/components/RHF/FieldGroup.tsx
@@ -39,17 +39,19 @@ export const FieldGroup = <TFields extends FieldValues>(
                   key={adjustedSlotName}
                   control={props.control}
                   name={adjustedSlotName as never}
+                  disabled={!!props.readonly}
                   {...(SLOT.rules && { rules: SLOT.rules })}
                   render={RHFSlot({
                     ...SLOT,
                     control: props.control,
+                    readonly: props.readonly,
                     name: adjustedSlotName,
                     groupNamePrefix: adjustedPrefix,
                   })}
                 />
               );
             })}
-            {index >= 1 && (
+            {!props.readonly && index >= 1 && (
               <Button
                 className="self-end m-2 mr-0"
                 variant={"destructive"}
@@ -66,12 +68,14 @@ export const FieldGroup = <TFields extends FieldValues>(
           </div>
         );
       })}
-      <div className="flex items-center mt-2 self-end">
-        <Button type="button" size="sm" onClick={onAppend} variant="default">
-          <Plus className="h-5 w-5 mr-2" />
-          {props.appendText ?? "New Group"}
-        </Button>
-      </div>
+      {!props.readonly && (
+        <div className="flex items-center mt-2 self-end">
+          <Button type="button" size="sm" onClick={onAppend} variant="default">
+            <Plus className="h-5 w-5 mr-2" />
+            {props.appendText ?? "New Group"}
+          </Button>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/services/ui/src/components/RHF/FormGroup.tsx b/src/services/ui/src/components/RHF/FormGroup.tsx
index 10efe5ea9b..db08fbb2ff 100644
--- a/src/services/ui/src/components/RHF/FormGroup.tsx
+++ b/src/services/ui/src/components/RHF/FormGroup.tsx
@@ -3,12 +3,16 @@ import { FormLabel, FormField } from "../Inputs";
 import { DependencyWrapper } from "./dependencyWrapper";
 import { RHFSlot } from "./Slot";
 import * as TRhf from "shared-types";
+import { useReadOnlyContext } from "./utils";
 
 export const RHFFormGroup = <TFieldValues extends FieldValues>(props: {
   form: TRhf.FormGroup;
   control: Control<TFieldValues>;
   groupNamePrefix?: string;
+  childReadonly?: boolean;
 }) => {
+  const { readonly } = useReadOnlyContext();
+
   return (
     <DependencyWrapper {...props.form}>
       <div className="py-4">
@@ -24,10 +28,12 @@ export const RHFFormGroup = <TFieldValues extends FieldValues>(props: {
             <DependencyWrapper key={SLOT.name} {...SLOT}>
               <FormField
                 control={props.control}
+                disabled={props.childReadonly ?? readonly}
                 name={((props.groupNamePrefix ?? "") + SLOT.name) as never}
                 {...(SLOT.rules && { rules: SLOT.rules })}
                 render={RHFSlot({
                   ...SLOT,
+                  readonly: props.childReadonly ?? readonly,
                   control: props.control as Control,
                   groupNamePrefix: props.groupNamePrefix,
                 })}
diff --git a/src/services/ui/src/components/RHF/Slot.tsx b/src/services/ui/src/components/RHF/Slot.tsx
index a8886a8c37..692468dabc 100644
--- a/src/services/ui/src/components/RHF/Slot.tsx
+++ b/src/services/ui/src/components/RHF/Slot.tsx
@@ -36,6 +36,7 @@ export const RHFSlot = <
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 >({
   control,
+  readonly,
   rhf,
   label,
   description,
@@ -77,21 +78,21 @@ export const RHFSlot = <
             {rhf === "Input" &&
               (() => {
                 const hops = props as RHFComponentMap["Input"];
-                return <Input {...hops} {...field} />;
+                return <Input disabled={!!readonly} {...hops} {...field} />;
               })()}
 
             {/* ----------------------------------------------------------------------------- */}
             {rhf === "Textarea" &&
               (() => {
                 const hops = props as RHFComponentMap["Textarea"];
-                return <Textarea {...hops} {...field} />;
+                return <Textarea disabled={!!readonly} {...hops} {...field} />;
               })()}
 
             {/* ----------------------------------------------------------------------------- */}
             {rhf === "Switch" &&
               (() => {
                 const hops = props as RHFComponentMap["Switch"];
-                return <Switch {...hops} {...field} />;
+                return <Switch disabled={!!readonly} {...hops} {...field} />;
               })()}
 
             {/* ----------------------------------------------------------------------------- */}
@@ -114,6 +115,7 @@ export const RHFSlot = <
                     {...hops}
                     onValueChange={field.onChange}
                     defaultValue={field.value}
+                    disabled={!!readonly}
                   >
                     <SelectTrigger {...hops}>
                       <SelectValue {...hops} />
@@ -138,6 +140,7 @@ export const RHFSlot = <
                     onValueChange={field.onChange}
                     defaultValue={field.value}
                     className="flex flex-col space-y-1"
+                    disabled={!!readonly}
                   >
                     {hops.options.map((OPT) => {
                       return (
@@ -165,6 +168,7 @@ export const RHFSlot = <
                                     form={FORM}
                                     control={control}
                                     groupNamePrefix={groupNamePrefix}
+                                    childReadonly={readonly}
                                   />
                                 </div>
                               );
@@ -179,8 +183,13 @@ export const RHFSlot = <
                                 <FormField
                                   control={control}
                                   name={(groupNamePrefix ?? "") + SLOT.name}
+                                  disabled={readonly}
                                   {...(SLOT.rules && { rules: SLOT.rules })}
-                                  render={RHFSlot({ ...SLOT, control })}
+                                  render={RHFSlot({
+                                    ...SLOT,
+                                    control,
+                                    readonly,
+                                  })}
                                 />
                               </div>
                             ))}
@@ -202,6 +211,7 @@ export const RHFSlot = <
                         <Checkbox
                           label={OPT.label}
                           value={OPT.value}
+                          disabled={!!readonly}
                           checked={field.value?.includes(OPT.value)}
                           onCheckedChange={(c) => {
                             const filtered =
@@ -225,9 +235,10 @@ export const RHFSlot = <
                             >
                               <FormField
                                 control={control}
+                                disabled={readonly}
                                 name={(groupNamePrefix ?? "") + SLOT.name}
                                 {...(SLOT.rules && { rules: SLOT.rules })}
-                                render={RHFSlot({ ...SLOT, control })}
+                                render={RHFSlot({ ...SLOT, control, readonly })}
                               />
                             </div>
                           ))}
@@ -242,6 +253,7 @@ export const RHFSlot = <
                               <RHFFormGroup
                                 control={control}
                                 form={FORM}
+                                childReadonly={readonly}
                                 groupNamePrefix={groupNamePrefix}
                               />
                             </div>
@@ -262,6 +274,7 @@ export const RHFSlot = <
                       <FormControl>
                         <Button
                           variant={"outline"}
+                          disabled={!!readonly}
                           className={cn(
                             "w-[240px] pl-3 text-left font-normal",
                             !field.value && "text-muted-foreground"
@@ -295,6 +308,7 @@ export const RHFSlot = <
                 control={control}
                 name={name}
                 fields={rest.fields ?? []}
+                readonly={!!readonly}
                 groupNamePrefix={groupNamePrefix}
                 {...(props as RHFComponentMap["FieldArray"])}
               />
@@ -306,6 +320,7 @@ export const RHFSlot = <
                 control={control}
                 name={name}
                 fields={rest.fields ?? []}
+                readonly={!!readonly}
                 groupNamePrefix={groupNamePrefix}
                 {...(props as RHFComponentMap["FieldGroup"])}
               />
diff --git a/src/services/ui/src/components/RHF/utils/index.ts b/src/services/ui/src/components/RHF/utils/index.ts
index a029df0a8d..fe0c121260 100644
--- a/src/services/ui/src/components/RHF/utils/index.ts
+++ b/src/services/ui/src/components/RHF/utils/index.ts
@@ -1,2 +1,3 @@
 export * from "./initializer";
 export * from "./validator";
+export * from "./readonlyContext";
diff --git a/src/services/ui/src/components/RHF/utils/readonlyContext.tsx b/src/services/ui/src/components/RHF/utils/readonlyContext.tsx
new file mode 100644
index 0000000000..0a50acf38f
--- /dev/null
+++ b/src/services/ui/src/components/RHF/utils/readonlyContext.tsx
@@ -0,0 +1,22 @@
+import { PropsWithChildren, createContext, useContext } from "react";
+
+interface ReadOnlyContextType {
+  readonly: boolean;
+}
+
+export const ReadOnlyContext = createContext<ReadOnlyContextType>({
+  readonly: false,
+});
+
+export const useReadOnlyContext = () => useContext(ReadOnlyContext);
+
+export const ReadOnlyContextProvider = ({
+  children,
+  ...props
+}: PropsWithChildren<ReadOnlyContextType>) => {
+  return (
+    <ReadOnlyContext.Provider value={props}>
+      {children}
+    </ReadOnlyContext.Provider>
+  );
+};

From 2018c2a7336fe15d4ff15d774968a011a820a2a5 Mon Sep 17 00:00:00 2001
From: Daniel Belcher <daniel.belcher.cs@gmail.com>
Date: Thu, 18 Jan 2024 07:10:10 -0800
Subject: [PATCH 2/8] chore: fix footer to be footer

---
 src/services/ui/src/components/Webform/footer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/services/ui/src/components/Webform/footer.tsx b/src/services/ui/src/components/Webform/footer.tsx
index 663dc5bf04..479176151a 100644
--- a/src/services/ui/src/components/Webform/footer.tsx
+++ b/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>
   );
 };

From 221e62955336fdcbd622404f77d2e972cd0a702f Mon Sep 17 00:00:00 2001
From: Daniel Belcher <daniel.belcher.cs@gmail.com>
Date: Thu, 18 Jan 2024 07:11:08 -0800
Subject: [PATCH 3/8] 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
---
 .../ui/src/components/Webform/index.tsx       | 63 ++++++++++++++-----
 .../components/Webform/useReadOnlyUser.tsx    |  8 +++
 2 files changed, 54 insertions(+), 17 deletions(-)
 create mode 100644 src/services/ui/src/components/Webform/useReadOnlyUser.tsx

diff --git a/src/services/ui/src/components/Webform/index.tsx b/src/services/ui/src/components/Webform/index.tsx
index 2c95226aa7..28526592d1 100644
--- a/src/services/ui/src/components/Webform/index.tsx
+++ b/src/services/ui/src/components/Webform/index.tsx
@@ -7,6 +7,8 @@ import { useGetForm } from "@/api";
 import { LoadingSpinner } from "@/components";
 import { Footer } from "./footer";
 import { Link, useParams } from "../Routing";
+import { FormSchema } from "shared-types";
+import { useReadOnlyUser } from "./useReadOnlyUser";
 
 export const Webforms = () => {
   return (
@@ -41,15 +43,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: FormSchema;
+  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 = () => {
@@ -76,20 +86,11 @@ export function Webform() {
     }
   );
 
-  if (isLoading) return <LoadingSpinner />;
-  if (error || !data) {
-    return (
-      <div className="max-w-screen-xl mx-auto p-4 py-8 lg:px-8">
-        {`There was an error loading ${id}`}
-      </div>
-    );
-  }
-
   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} />
+          <RHFDocument document={data} {...form} readonly={readonly} />
           <div className="flex justify-between text-blue-700 underline">
             <Button type="button" onClick={onSave} variant="ghost">
               Save draft
@@ -102,3 +103,31 @@ export function Webform() {
     </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 (
+      <div className="max-w-screen-xl mx-auto p-4 py-8 lg:px-8">
+        {`There was an error loading ${id}`}
+      </div>
+    );
+  }
+
+  return (
+    <WebformBody
+      data={data}
+      readonly={readonly}
+      id={id}
+      version={version}
+      values={savedData ? JSON.parse(savedData) : defaultValues}
+    />
+  );
+}
diff --git a/src/services/ui/src/components/Webform/useReadOnlyUser.tsx b/src/services/ui/src/components/Webform/useReadOnlyUser.tsx
new file mode 100644
index 0000000000..b02b7c86bd
--- /dev/null
+++ b/src/services/ui/src/components/Webform/useReadOnlyUser.tsx
@@ -0,0 +1,8 @@
+import { useGetUser } from "@/api/useGetUser";
+import { CMS_READ_ONLY_ROLES } from "shared-types";
+
+export const useReadOnlyUser = () => {
+  const { data } = useGetUser();
+  const role = data?.user?.["custom:cms-roles"];
+  return CMS_READ_ONLY_ROLES.some((el) => role?.includes(el));
+};

From 5632aa589acb6e017142e2216b0f985436c6d2a5 Mon Sep 17 00:00:00 2001
From: Daniel Belcher <daniel.belcher.cs@gmail.com>
Date: Thu, 18 Jan 2024 07:26:42 -0800
Subject: [PATCH 4/8] fix: remove submit button when read only

---
 src/services/ui/src/components/Webform/index.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/services/ui/src/components/Webform/index.tsx b/src/services/ui/src/components/Webform/index.tsx
index 28526592d1..e69a0275d4 100644
--- a/src/services/ui/src/components/Webform/index.tsx
+++ b/src/services/ui/src/components/Webform/index.tsx
@@ -91,12 +91,14 @@ function WebformBody({
       <Form {...form}>
         <form onSubmit={onSubmit} className="space-y-6">
           <RHFDocument document={data} {...form} readonly={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>
+          {!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>
+          )}
         </form>
       </Form>
       <Footer />
@@ -124,7 +126,7 @@ export function Webform() {
   return (
     <WebformBody
       data={data}
-      readonly={readonly}
+      readonly={true}
       id={id}
       version={version}
       values={savedData ? JSON.parse(savedData) : defaultValues}

From 00aef05d0934c6dc5f907dfb978acb11d49cd3cb Mon Sep 17 00:00:00 2001
From: Daniel Belcher <daniel.belcher.cs@gmail.com>
Date: Thu, 18 Jan 2024 07:30:03 -0800
Subject: [PATCH 5/8] Update index.tsx

---
 src/services/ui/src/components/Webform/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/services/ui/src/components/Webform/index.tsx b/src/services/ui/src/components/Webform/index.tsx
index e69a0275d4..fd7f0e88d1 100644
--- a/src/services/ui/src/components/Webform/index.tsx
+++ b/src/services/ui/src/components/Webform/index.tsx
@@ -126,7 +126,7 @@ export function Webform() {
   return (
     <WebformBody
       data={data}
-      readonly={true}
+      readonly={readonly}
       id={id}
       version={version}
       values={savedData ? JSON.parse(savedData) : defaultValues}

From e4fcc3db8b7292a30c973b264d99d2a7769f2718 Mon Sep 17 00:00:00 2001
From: Daniel Belcher <daniel.belcher.cs@gmail.com>
Date: Thu, 18 Jan 2024 11:24:10 -0800
Subject: [PATCH 6/8] 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
---
 src/packages/shared-types/forms.ts            |  3 --
 .../ui/src/components/RHF/Document.tsx        | 31 +++++++++----------
 .../ui/src/components/RHF/FieldArray.tsx      | 16 +++++-----
 .../ui/src/components/RHF/FieldGroup.tsx      | 10 +++---
 .../ui/src/components/RHF/FormGroup.tsx       |  6 ----
 src/services/ui/src/components/RHF/Slot.tsx   | 20 +++---------
 .../components/RHF/utils/readonlyContext.tsx  |  4 +--
 .../ui/src/components/Webform/index.tsx       | 22 +++++++------
 .../components/Webform/useReadOnlyUser.tsx    |  4 +--
 9 files changed, 47 insertions(+), 69 deletions(-)

diff --git a/src/packages/shared-types/forms.ts b/src/packages/shared-types/forms.ts
index 0aad6b9af4..8d28ddf1ea 100644
--- a/src/packages/shared-types/forms.ts
+++ b/src/packages/shared-types/forms.ts
@@ -20,7 +20,6 @@ export interface FormSchema {
 
 export type RHFSlotProps = {
   name: string;
-  readonly?: boolean;
   label?: string;
   labelStyling?: string;
   formItemStyling?: string;
@@ -98,7 +97,6 @@ export type FieldArrayProps<
 > = {
   control: Control<T, unknown>;
   name: TFieldArrayName;
-  readonly?: boolean;
   fields: RHFSlotProps[];
   groupNamePrefix?: string;
   appendText?: string;
@@ -109,7 +107,6 @@ export type FieldGroupProps<
   TFieldArrayName extends FieldArrayPath<T> = FieldArrayPath<T>
 > = {
   control: Control<T, unknown>;
-  readonly?: boolean;
   name: TFieldArrayName;
   fields: RHFSlotProps[];
   appendText?: string;
diff --git a/src/services/ui/src/components/RHF/Document.tsx b/src/services/ui/src/components/RHF/Document.tsx
index 4e753381ee..8d5f54d099 100644
--- a/src/services/ui/src/components/RHF/Document.tsx
+++ b/src/services/ui/src/components/RHF/Document.tsx
@@ -3,7 +3,6 @@ import { Control, FieldValues } from "react-hook-form";
 import { FormLabel } from "../Inputs";
 import { RHFSection } from "./Section";
 import { FormSchema } from "shared-types";
-import { ReadOnlyContextProvider } from "./utils";
 
 export const RHFDocument = <TFieldValues extends FieldValues>(props: {
   document: FormSchema;
@@ -12,23 +11,21 @@ export const RHFDocument = <TFieldValues extends FieldValues>(props: {
 }) => {
   return (
     <div>
-      <ReadOnlyContextProvider readonly={!!props.readonly}>
-        <div className="h-[5px] bg-gradient-to-r from-primary from-50% to-[#02bfe7] to-[66%] rounded-t"></div>
-        <div className="py-4 px-8 border-2 border-t-0 mt-0">
-          <div className="mb-3 mt-9">
-            <FormLabel className="font-bold text-4xl px-8 inline-block leading-[48px]">
-              {props.document.header}
-            </FormLabel>
-          </div>
-          {props.document.sections.map((SEC, index) => (
-            <RHFSection
-              key={`rhf-section-${index}-${SEC.title}`}
-              control={props.control}
-              section={SEC}
-            />
-          ))}
+      <div className="h-[5px] bg-gradient-to-r from-primary from-50% to-[#02bfe7] to-[66%] rounded-t"></div>
+      <div className="py-4 px-8 border-2 border-t-0 mt-0">
+        <div className="mb-3 mt-9">
+          <FormLabel className="font-bold text-4xl px-8 inline-block leading-[48px]">
+            {props.document.header}
+          </FormLabel>
         </div>
-      </ReadOnlyContextProvider>
+        {props.document.sections.map((SEC, index) => (
+          <RHFSection
+            key={`rhf-section-${index}-${SEC.title}`}
+            control={props.control}
+            section={SEC}
+          />
+        ))}
+      </div>
     </div>
   );
 };
diff --git a/src/services/ui/src/components/RHF/FieldArray.tsx b/src/services/ui/src/components/RHF/FieldArray.tsx
index 0994cf0d33..d7ba2a4897 100644
--- a/src/services/ui/src/components/RHF/FieldArray.tsx
+++ b/src/services/ui/src/components/RHF/FieldArray.tsx
@@ -4,12 +4,14 @@ import { Plus, Trash2 } from "lucide-react";
 import { RHFSlot } from "./Slot";
 import { Button, FormField } from "../Inputs";
 import { FieldArrayProps } from "shared-types";
-import { slotInitializer } from "./utils";
+import { slotInitializer, useReadOnlyContext } from "./utils";
 import { useEffect } from "react";
 
 export const RHFFieldArray = <TFields extends FieldValues>(
   props: FieldArrayProps<TFields>
 ) => {
+  const { readonly } = useReadOnlyContext();
+
   const fieldArr = useFieldArray({
     control: props.control,
     name: props.name,
@@ -38,20 +40,18 @@ export const RHFFieldArray = <TFields extends FieldValues>(
                 <FormField
                   key={adjustedSlotName}
                   control={props.control}
-                  disabled={!!props.readonly}
                   name={adjustedSlotName as never}
                   {...(SLOT.rules && { rules: SLOT.rules })}
                   render={RHFSlot({
                     ...SLOT,
                     control: props.control,
-                    readonly: props.readonly,
                     name: adjustedSlotName,
                     groupNamePrefix: adjustedPrefix,
                   })}
                 />
               );
             })}
-            {!props.readonly && index >= 1 && (
+            {!readonly && index >= 1 && (
               <Trash2
                 className="self-end mb-4 cursor-pointer stroke-primary"
                 onClick={() => fieldArr.remove(index)}
@@ -60,14 +60,14 @@ export const RHFFieldArray = <TFields extends FieldValues>(
           </div>
         );
       })}
-      <div className="flex items-center mt-2">
-        {!props.readonly && (
+      {!readonly && (
+        <div className="flex items-center mt-2">
           <Button type="button" size="sm" onClick={onAppend} variant="outline">
             <Plus className="h-5 w-5 mr-2" />
             {props.appendText ?? "New Row"}
           </Button>
-        )}
-      </div>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/services/ui/src/components/RHF/FieldGroup.tsx b/src/services/ui/src/components/RHF/FieldGroup.tsx
index 95bfcd40dd..3bb9951c1e 100644
--- a/src/services/ui/src/components/RHF/FieldGroup.tsx
+++ b/src/services/ui/src/components/RHF/FieldGroup.tsx
@@ -4,12 +4,14 @@ import { Plus } from "lucide-react";
 import { RHFSlot } from "./Slot";
 import { Button, FormField } from "../Inputs";
 import { FieldGroupProps } from "shared-types";
-import { slotInitializer } from "./utils";
+import { slotInitializer, useReadOnlyContext } from "./utils";
 import { useEffect } from "react";
 
 export const FieldGroup = <TFields extends FieldValues>(
   props: FieldGroupProps<TFields>
 ) => {
+  const { readonly } = useReadOnlyContext();
+
   const fieldArr = useFieldArray({
     control: props.control,
     name: props.name,
@@ -39,19 +41,17 @@ export const FieldGroup = <TFields extends FieldValues>(
                   key={adjustedSlotName}
                   control={props.control}
                   name={adjustedSlotName as never}
-                  disabled={!!props.readonly}
                   {...(SLOT.rules && { rules: SLOT.rules })}
                   render={RHFSlot({
                     ...SLOT,
                     control: props.control,
-                    readonly: props.readonly,
                     name: adjustedSlotName,
                     groupNamePrefix: adjustedPrefix,
                   })}
                 />
               );
             })}
-            {!props.readonly && index >= 1 && (
+            {!readonly && index >= 1 && (
               <Button
                 className="self-end m-2 mr-0"
                 variant={"destructive"}
@@ -68,7 +68,7 @@ export const FieldGroup = <TFields extends FieldValues>(
           </div>
         );
       })}
-      {!props.readonly && (
+      {!readonly && (
         <div className="flex items-center mt-2 self-end">
           <Button type="button" size="sm" onClick={onAppend} variant="default">
             <Plus className="h-5 w-5 mr-2" />
diff --git a/src/services/ui/src/components/RHF/FormGroup.tsx b/src/services/ui/src/components/RHF/FormGroup.tsx
index db08fbb2ff..10efe5ea9b 100644
--- a/src/services/ui/src/components/RHF/FormGroup.tsx
+++ b/src/services/ui/src/components/RHF/FormGroup.tsx
@@ -3,16 +3,12 @@ import { FormLabel, FormField } from "../Inputs";
 import { DependencyWrapper } from "./dependencyWrapper";
 import { RHFSlot } from "./Slot";
 import * as TRhf from "shared-types";
-import { useReadOnlyContext } from "./utils";
 
 export const RHFFormGroup = <TFieldValues extends FieldValues>(props: {
   form: TRhf.FormGroup;
   control: Control<TFieldValues>;
   groupNamePrefix?: string;
-  childReadonly?: boolean;
 }) => {
-  const { readonly } = useReadOnlyContext();
-
   return (
     <DependencyWrapper {...props.form}>
       <div className="py-4">
@@ -28,12 +24,10 @@ export const RHFFormGroup = <TFieldValues extends FieldValues>(props: {
             <DependencyWrapper key={SLOT.name} {...SLOT}>
               <FormField
                 control={props.control}
-                disabled={props.childReadonly ?? readonly}
                 name={((props.groupNamePrefix ?? "") + SLOT.name) as never}
                 {...(SLOT.rules && { rules: SLOT.rules })}
                 render={RHFSlot({
                   ...SLOT,
-                  readonly: props.childReadonly ?? readonly,
                   control: props.control as Control,
                   groupNamePrefix: props.groupNamePrefix,
                 })}
diff --git a/src/services/ui/src/components/RHF/Slot.tsx b/src/services/ui/src/components/RHF/Slot.tsx
index 692468dabc..fc53bb0707 100644
--- a/src/services/ui/src/components/RHF/Slot.tsx
+++ b/src/services/ui/src/components/RHF/Slot.tsx
@@ -36,7 +36,6 @@ export const RHFSlot = <
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 >({
   control,
-  readonly,
   rhf,
   label,
   description,
@@ -78,21 +77,21 @@ export const RHFSlot = <
             {rhf === "Input" &&
               (() => {
                 const hops = props as RHFComponentMap["Input"];
-                return <Input disabled={!!readonly} {...hops} {...field} />;
+                return <Input {...hops} {...field} />;
               })()}
 
             {/* ----------------------------------------------------------------------------- */}
             {rhf === "Textarea" &&
               (() => {
                 const hops = props as RHFComponentMap["Textarea"];
-                return <Textarea disabled={!!readonly} {...hops} {...field} />;
+                return <Textarea {...hops} {...field} />;
               })()}
 
             {/* ----------------------------------------------------------------------------- */}
             {rhf === "Switch" &&
               (() => {
                 const hops = props as RHFComponentMap["Switch"];
-                return <Switch disabled={!!readonly} {...hops} {...field} />;
+                return <Switch {...hops} {...field} />;
               })()}
 
             {/* ----------------------------------------------------------------------------- */}
@@ -115,7 +114,6 @@ export const RHFSlot = <
                     {...hops}
                     onValueChange={field.onChange}
                     defaultValue={field.value}
-                    disabled={!!readonly}
                   >
                     <SelectTrigger {...hops}>
                       <SelectValue {...hops} />
@@ -140,7 +138,6 @@ export const RHFSlot = <
                     onValueChange={field.onChange}
                     defaultValue={field.value}
                     className="flex flex-col space-y-1"
-                    disabled={!!readonly}
                   >
                     {hops.options.map((OPT) => {
                       return (
@@ -168,7 +165,6 @@ export const RHFSlot = <
                                     form={FORM}
                                     control={control}
                                     groupNamePrefix={groupNamePrefix}
-                                    childReadonly={readonly}
                                   />
                                 </div>
                               );
@@ -183,12 +179,10 @@ export const RHFSlot = <
                                 <FormField
                                   control={control}
                                   name={(groupNamePrefix ?? "") + SLOT.name}
-                                  disabled={readonly}
                                   {...(SLOT.rules && { rules: SLOT.rules })}
                                   render={RHFSlot({
                                     ...SLOT,
                                     control,
-                                    readonly,
                                   })}
                                 />
                               </div>
@@ -211,7 +205,6 @@ export const RHFSlot = <
                         <Checkbox
                           label={OPT.label}
                           value={OPT.value}
-                          disabled={!!readonly}
                           checked={field.value?.includes(OPT.value)}
                           onCheckedChange={(c) => {
                             const filtered =
@@ -235,10 +228,9 @@ export const RHFSlot = <
                             >
                               <FormField
                                 control={control}
-                                disabled={readonly}
                                 name={(groupNamePrefix ?? "") + SLOT.name}
                                 {...(SLOT.rules && { rules: SLOT.rules })}
-                                render={RHFSlot({ ...SLOT, control, readonly })}
+                                render={RHFSlot({ ...SLOT, control })}
                               />
                             </div>
                           ))}
@@ -253,7 +245,6 @@ export const RHFSlot = <
                               <RHFFormGroup
                                 control={control}
                                 form={FORM}
-                                childReadonly={readonly}
                                 groupNamePrefix={groupNamePrefix}
                               />
                             </div>
@@ -274,7 +265,6 @@ export const RHFSlot = <
                       <FormControl>
                         <Button
                           variant={"outline"}
-                          disabled={!!readonly}
                           className={cn(
                             "w-[240px] pl-3 text-left font-normal",
                             !field.value && "text-muted-foreground"
@@ -308,7 +298,6 @@ export const RHFSlot = <
                 control={control}
                 name={name}
                 fields={rest.fields ?? []}
-                readonly={!!readonly}
                 groupNamePrefix={groupNamePrefix}
                 {...(props as RHFComponentMap["FieldArray"])}
               />
@@ -320,7 +309,6 @@ export const RHFSlot = <
                 control={control}
                 name={name}
                 fields={rest.fields ?? []}
-                readonly={!!readonly}
                 groupNamePrefix={groupNamePrefix}
                 {...(props as RHFComponentMap["FieldGroup"])}
               />
diff --git a/src/services/ui/src/components/RHF/utils/readonlyContext.tsx b/src/services/ui/src/components/RHF/utils/readonlyContext.tsx
index 0a50acf38f..ed4f21c119 100644
--- a/src/services/ui/src/components/RHF/utils/readonlyContext.tsx
+++ b/src/services/ui/src/components/RHF/utils/readonlyContext.tsx
@@ -10,13 +10,13 @@ export const ReadOnlyContext = createContext<ReadOnlyContextType>({
 
 export const useReadOnlyContext = () => useContext(ReadOnlyContext);
 
-export const ReadOnlyContextProvider = ({
+export const ReadOnlyProvider = ({
   children,
   ...props
 }: PropsWithChildren<ReadOnlyContextType>) => {
   return (
     <ReadOnlyContext.Provider value={props}>
-      {children}
+      <fieldset disabled={!!props.readonly}>{children}</fieldset>
     </ReadOnlyContext.Provider>
   );
 };
diff --git a/src/services/ui/src/components/Webform/index.tsx b/src/services/ui/src/components/Webform/index.tsx
index fd7f0e88d1..1dc53dff64 100644
--- a/src/services/ui/src/components/Webform/index.tsx
+++ b/src/services/ui/src/components/Webform/index.tsx
@@ -1,6 +1,6 @@
 import { useForm } from "react-hook-form";
 import { Button, Form } from "@/components/Inputs";
-import { RHFDocument } from "@/components/RHF";
+import { RHFDocument, ReadOnlyProvider } from "@/components/RHF";
 import { SubNavHeader } from "@/components";
 import { documentInitializer, documentValidator } from "@/components/RHF/utils";
 import { useGetForm } from "@/api";
@@ -90,15 +90,17 @@ function WebformBody({
     <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} readonly={readonly} />
-          {!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>
-          )}
+          <ReadOnlyProvider readonly={readonly}>
+            <RHFDocument document={data} {...form} readonly={readonly} />
+            {!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>
+            )}
+          </ReadOnlyProvider>
         </form>
       </Form>
       <Footer />
diff --git a/src/services/ui/src/components/Webform/useReadOnlyUser.tsx b/src/services/ui/src/components/Webform/useReadOnlyUser.tsx
index b02b7c86bd..4b40bfeb3a 100644
--- a/src/services/ui/src/components/Webform/useReadOnlyUser.tsx
+++ b/src/services/ui/src/components/Webform/useReadOnlyUser.tsx
@@ -1,8 +1,8 @@
 import { useGetUser } from "@/api/useGetUser";
-import { CMS_READ_ONLY_ROLES } from "shared-types";
+import { UserRoles } from "shared-types";
 
 export const useReadOnlyUser = () => {
   const { data } = useGetUser();
   const role = data?.user?.["custom:cms-roles"];
-  return CMS_READ_ONLY_ROLES.some((el) => role?.includes(el));
+  return role !== UserRoles.STATE_SUBMITTER;
 };

From 7e18d421f1c60fbe1e03ada6da5d37a41ad68e18 Mon Sep 17 00:00:00 2001
From: Daniel Belcher <daniel.belcher.cs@gmail.com>
Date: Thu, 18 Jan 2024 11:26:40 -0800
Subject: [PATCH 7/8] chore: addtnl cleanup

---
 src/services/ui/src/components/RHF/Document.tsx  | 1 -
 src/services/ui/src/components/RHF/Slot.tsx      | 5 +----
 src/services/ui/src/components/Webform/index.tsx | 2 +-
 3 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/services/ui/src/components/RHF/Document.tsx b/src/services/ui/src/components/RHF/Document.tsx
index 8d5f54d099..237b54e0a0 100644
--- a/src/services/ui/src/components/RHF/Document.tsx
+++ b/src/services/ui/src/components/RHF/Document.tsx
@@ -7,7 +7,6 @@ import { FormSchema } from "shared-types";
 export const RHFDocument = <TFieldValues extends FieldValues>(props: {
   document: FormSchema;
   control: Control<TFieldValues>;
-  readonly?: boolean;
 }) => {
   return (
     <div>
diff --git a/src/services/ui/src/components/RHF/Slot.tsx b/src/services/ui/src/components/RHF/Slot.tsx
index fc53bb0707..a8886a8c37 100644
--- a/src/services/ui/src/components/RHF/Slot.tsx
+++ b/src/services/ui/src/components/RHF/Slot.tsx
@@ -180,10 +180,7 @@ export const RHFSlot = <
                                   control={control}
                                   name={(groupNamePrefix ?? "") + SLOT.name}
                                   {...(SLOT.rules && { rules: SLOT.rules })}
-                                  render={RHFSlot({
-                                    ...SLOT,
-                                    control,
-                                  })}
+                                  render={RHFSlot({ ...SLOT, control })}
                                 />
                               </div>
                             ))}
diff --git a/src/services/ui/src/components/Webform/index.tsx b/src/services/ui/src/components/Webform/index.tsx
index 1dc53dff64..54c8106fe8 100644
--- a/src/services/ui/src/components/Webform/index.tsx
+++ b/src/services/ui/src/components/Webform/index.tsx
@@ -91,7 +91,7 @@ function WebformBody({
       <Form {...form}>
         <form onSubmit={onSubmit} className="space-y-6">
           <ReadOnlyProvider readonly={readonly}>
-            <RHFDocument document={data} {...form} readonly={readonly} />
+            <RHFDocument document={data} {...form} />
             {!readonly && (
               <div className="flex justify-between text-blue-700 underline">
                 <Button type="button" onClick={onSave} variant="ghost">

From 95fb4390833318e0805acb19e4d81170613f7475 Mon Sep 17 00:00:00 2001
From: Daniel Belcher <daniel.belcher.cs@gmail.com>
Date: Thu, 18 Jan 2024 11:31:58 -0800
Subject: [PATCH 8/8] chore: addtnl cleanup 2

---
 .../ui/src/components/RHF/FieldArray.tsx      | 20 +++++++----------
 .../ui/src/components/RHF/FieldGroup.tsx      | 20 +++++++----------
 .../ui/src/components/RHF/utils/index.ts      |  1 -
 .../components/RHF/utils/readonlyContext.tsx  | 22 -------------------
 .../ui/src/components/Webform/index.tsx       |  9 ++++----
 5 files changed, 20 insertions(+), 52 deletions(-)
 delete mode 100644 src/services/ui/src/components/RHF/utils/readonlyContext.tsx

diff --git a/src/services/ui/src/components/RHF/FieldArray.tsx b/src/services/ui/src/components/RHF/FieldArray.tsx
index d7ba2a4897..61a594d7d8 100644
--- a/src/services/ui/src/components/RHF/FieldArray.tsx
+++ b/src/services/ui/src/components/RHF/FieldArray.tsx
@@ -4,14 +4,12 @@ import { Plus, Trash2 } from "lucide-react";
 import { RHFSlot } from "./Slot";
 import { Button, FormField } from "../Inputs";
 import { FieldArrayProps } from "shared-types";
-import { slotInitializer, useReadOnlyContext } from "./utils";
+import { slotInitializer } from "./utils";
 import { useEffect } from "react";
 
 export const RHFFieldArray = <TFields extends FieldValues>(
   props: FieldArrayProps<TFields>
 ) => {
-  const { readonly } = useReadOnlyContext();
-
   const fieldArr = useFieldArray({
     control: props.control,
     name: props.name,
@@ -51,7 +49,7 @@ export const RHFFieldArray = <TFields extends FieldValues>(
                 />
               );
             })}
-            {!readonly && index >= 1 && (
+            {index >= 1 && (
               <Trash2
                 className="self-end mb-4 cursor-pointer stroke-primary"
                 onClick={() => fieldArr.remove(index)}
@@ -60,14 +58,12 @@ export const RHFFieldArray = <TFields extends FieldValues>(
           </div>
         );
       })}
-      {!readonly && (
-        <div className="flex items-center mt-2">
-          <Button type="button" size="sm" onClick={onAppend} variant="outline">
-            <Plus className="h-5 w-5 mr-2" />
-            {props.appendText ?? "New Row"}
-          </Button>
-        </div>
-      )}
+      <div className="flex items-center mt-2">
+        <Button type="button" size="sm" onClick={onAppend} variant="outline">
+          <Plus className="h-5 w-5 mr-2" />
+          {props.appendText ?? "New Row"}
+        </Button>
+      </div>
     </div>
   );
 };
diff --git a/src/services/ui/src/components/RHF/FieldGroup.tsx b/src/services/ui/src/components/RHF/FieldGroup.tsx
index 3bb9951c1e..fcebaea3dd 100644
--- a/src/services/ui/src/components/RHF/FieldGroup.tsx
+++ b/src/services/ui/src/components/RHF/FieldGroup.tsx
@@ -4,14 +4,12 @@ import { Plus } from "lucide-react";
 import { RHFSlot } from "./Slot";
 import { Button, FormField } from "../Inputs";
 import { FieldGroupProps } from "shared-types";
-import { slotInitializer, useReadOnlyContext } from "./utils";
+import { slotInitializer } from "./utils";
 import { useEffect } from "react";
 
 export const FieldGroup = <TFields extends FieldValues>(
   props: FieldGroupProps<TFields>
 ) => {
-  const { readonly } = useReadOnlyContext();
-
   const fieldArr = useFieldArray({
     control: props.control,
     name: props.name,
@@ -51,7 +49,7 @@ export const FieldGroup = <TFields extends FieldValues>(
                 />
               );
             })}
-            {!readonly && index >= 1 && (
+            {index >= 1 && (
               <Button
                 className="self-end m-2 mr-0"
                 variant={"destructive"}
@@ -68,14 +66,12 @@ export const FieldGroup = <TFields extends FieldValues>(
           </div>
         );
       })}
-      {!readonly && (
-        <div className="flex items-center mt-2 self-end">
-          <Button type="button" size="sm" onClick={onAppend} variant="default">
-            <Plus className="h-5 w-5 mr-2" />
-            {props.appendText ?? "New Group"}
-          </Button>
-        </div>
-      )}
+      <div className="flex items-center mt-2 self-end">
+        <Button type="button" size="sm" onClick={onAppend} variant="default">
+          <Plus className="h-5 w-5 mr-2" />
+          {props.appendText ?? "New Group"}
+        </Button>
+      </div>
     </div>
   );
 };
diff --git a/src/services/ui/src/components/RHF/utils/index.ts b/src/services/ui/src/components/RHF/utils/index.ts
index fe0c121260..a029df0a8d 100644
--- a/src/services/ui/src/components/RHF/utils/index.ts
+++ b/src/services/ui/src/components/RHF/utils/index.ts
@@ -1,3 +1,2 @@
 export * from "./initializer";
 export * from "./validator";
-export * from "./readonlyContext";
diff --git a/src/services/ui/src/components/RHF/utils/readonlyContext.tsx b/src/services/ui/src/components/RHF/utils/readonlyContext.tsx
deleted file mode 100644
index ed4f21c119..0000000000
--- a/src/services/ui/src/components/RHF/utils/readonlyContext.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { PropsWithChildren, createContext, useContext } from "react";
-
-interface ReadOnlyContextType {
-  readonly: boolean;
-}
-
-export const ReadOnlyContext = createContext<ReadOnlyContextType>({
-  readonly: false,
-});
-
-export const useReadOnlyContext = () => useContext(ReadOnlyContext);
-
-export const ReadOnlyProvider = ({
-  children,
-  ...props
-}: PropsWithChildren<ReadOnlyContextType>) => {
-  return (
-    <ReadOnlyContext.Provider value={props}>
-      <fieldset disabled={!!props.readonly}>{children}</fieldset>
-    </ReadOnlyContext.Provider>
-  );
-};
diff --git a/src/services/ui/src/components/Webform/index.tsx b/src/services/ui/src/components/Webform/index.tsx
index 54c8106fe8..2ce6354660 100644
--- a/src/services/ui/src/components/Webform/index.tsx
+++ b/src/services/ui/src/components/Webform/index.tsx
@@ -1,13 +1,12 @@
 import { useForm } from "react-hook-form";
 import { Button, Form } from "@/components/Inputs";
-import { RHFDocument, ReadOnlyProvider } from "@/components/RHF";
+import { RHFDocument } from "@/components/RHF";
 import { SubNavHeader } from "@/components";
 import { documentInitializer, documentValidator } from "@/components/RHF/utils";
 import { useGetForm } from "@/api";
 import { LoadingSpinner } from "@/components";
 import { Footer } from "./footer";
 import { Link, useParams } from "../Routing";
-import { FormSchema } from "shared-types";
 import { useReadOnlyUser } from "./useReadOnlyUser";
 
 export const Webforms = () => {
@@ -46,7 +45,7 @@ export const Webforms = () => {
 interface WebformBodyProps {
   id: string;
   version: string;
-  data: FormSchema;
+  data: any;
   readonly: boolean;
   values: any;
 }
@@ -90,7 +89,7 @@ function WebformBody({
     <div className="max-w-screen-xl mx-auto p-4 py-8 lg:px-8">
       <Form {...form}>
         <form onSubmit={onSubmit} className="space-y-6">
-          <ReadOnlyProvider readonly={readonly}>
+          <fieldset disabled={readonly}>
             <RHFDocument document={data} {...form} />
             {!readonly && (
               <div className="flex justify-between text-blue-700 underline">
@@ -100,7 +99,7 @@ function WebformBody({
                 <Button type="submit">Submit</Button>
               </div>
             )}
-          </ReadOnlyProvider>
+          </fieldset>
         </form>
       </Form>
       <Footer />