[CMDCT-2] Fix clear prop hiding users answers when they click cancel …

…but come back (#11515)

Co-authored-by: Nicholas Summers <[email protected]>

services/ui-src/src/components/reports/ModalDrawerReportPage.tsx

@@ -19,6 +19,7 @@ import {
   entityWasUpdated,
   getEntriesToClear,
   setClearedEntriesToDefaultValue,
+  resetClearProp,
 } from "utils";
 // types
 import {
@@ -69,6 +70,7 @@ export const ModalDrawerReportPage = ({ route, validateOnRender }: Props) => {
 
   const closeAddEditEntityModal = () => {
     setSelectedEntity(undefined);
+    resetClearProp(modalForm.fields);
     addEditEntityModalOnCloseHandler();
   };
 
@@ -103,6 +105,7 @@ export const ModalDrawerReportPage = ({ route, validateOnRender }: Props) => {
 
   const closeDrawer = () => {
     setSelectedEntity(undefined);
+    resetClearProp(drawerForm.fields);
     drawerOnCloseHandler();
   };
 

services/ui-src/src/components/reports/ModalOverlayReportPage.tsx

@@ -30,6 +30,7 @@ import {
   setClearedEntriesToDefaultValue,
   useBreakpoint,
   useUser,
+  resetClearProp,
 } from "utils";
 // verbiage
 import accordionVerbiage from "../../verbiage/pages/accordion";
@@ -80,6 +81,7 @@ export const ModalOverlayReportPage = ({
 
   const closeAddEditEntityModal = () => {
     setCurrentEntity(undefined);
+    resetClearProp(modalForm.fields);
     addEditEntityModalOnCloseHandler();
   };
 

services/ui-src/src/utils/forms/forms.test.ts

@@ -5,13 +5,15 @@ import {
   formFieldFactory,
   hydrateFormFields,
   initializeChoiceListFields,
+  resetClearProp,
   setClearedEntriesToDefaultValue,
   sortFormErrors,
 } from "./forms";
 // types
-import { isEntityType } from "types";
+import { FormField, isEntityType } from "types";
 // utils
 import {
+  mockDateField,
   mockDrawerFormField,
   mockFormField,
   mockNestedFormField,
@@ -383,3 +385,32 @@ describe("Test setClearedEntriesToDefaultValue", () => {
     });
   });
 });
+
+describe("Test resetClearProp", () => {
+  it("should reset clear for choicelist fields and its nested children", async () => {
+    const fields: FormField[] = [mockNestedFormField];
+    resetClearProp(fields);
+    expect(fields[0].props!.clear).toBe(false);
+    for (let choice of fields[0].props!.choices) {
+      expect(choice.props!.clear).toBe(false);
+    }
+  });
+
+  it("should reset clear for text fields", async () => {
+    const fields: FormField[] = [mockFormField];
+    resetClearProp(fields);
+    expect(fields[0].props?.clear).toBe(false);
+  });
+
+  it("should reset clear for number fields", async () => {
+    const fields: FormField[] = [mockNumberField];
+    resetClearProp(fields);
+    expect(fields[0].props?.clear).toBe(false);
+  });
+
+  it("should reset clear for date fields", async () => {
+    const fields: FormField[] = [mockDateField];
+    resetClearProp(fields);
+    expect(fields[0].props?.clear).toBe(false);
+  });
+});

services/ui-src/src/utils/forms/forms.ts

@@ -238,3 +238,28 @@ export const sortFormErrors = (
   }
   return sortedErrorArray;
 };
+
+/*
+ * This function resets the 'clear' prop on each field after a ChoiceListField calls
+ * clearUncheckedNestedFields(). Upon re-entering a drawer or modal, the field values will
+ * be correctly hydrated.
+ */
+export const resetClearProp = (fields: (FormField | FormLayoutElement)[]) => {
+  fields.forEach((field: FormField | FormLayoutElement) => {
+    switch (field.type) {
+      case "radio":
+      case "checkbox":
+        field.props?.choices.forEach((childField: FieldChoice) => {
+          if (childField?.children) {
+            resetClearProp(childField.children);
+          }
+        });
+        field.props = { ...field.props, clear: false };
+        resetClearProp(field.props?.choices);
+        break;
+      default:
+        field.props = { ...field.props, clear: false };
+        break;
+    }
+  });
+};

services/ui-src/src/utils/testing/mockForm.tsx

@@ -27,6 +27,15 @@ export const mockNumberField = {
   },
 };
 
+export const mockDateField = {
+  id: "mock-date-field",
+  type: "date",
+  validation: "date",
+  props: {
+    label: "mock date field",
+  },
+};
+
 export const mockRepeatedFormField = {
   id: "mock-text-field",
   type: "text",