Merge pull request #536 from CBIIT/CRDCDH-1861

CRDCDH-1861 Submission Request Content Adjustments

src/components/Contexts/FormContext.tsx

@@ -22,6 +22,7 @@ import {
   SaveAppInput,
 } from "../../graphql";
 import { InitialApplication, InitialQuestionnaire } from "../../config/InitialValues";
+import { Logger } from "../../utils";
 
 export type SetDataReturnType =
   | { status: "success"; id: string }
@@ -171,11 +172,13 @@ export const FormProvider: FC<ProviderProps> = ({ children, id }: ProviderProps)
     if (errors || !d?.saveApplication?.["_id"]) {
       const errorMessage = errors?.[0]?.message || "An unknown GraphQL Error occurred";
 
+      Logger.error("Unable to save application", errors);
       setState({
         ...newState,
         status: Status.ERROR,
         error: errorMessage,
       });
+
       return {
         status: "failed",
         errorMessage,

src/components/Questionnaire/FundingAgency.tsx

@@ -53,7 +53,7 @@ const FundingAgency: FC<Props> = ({ idPrefix = "", index, funding, readOnly, onD
           label="Grant or Contract Number(s)"
           name={`study[funding][${index}][grantNumbers]`}
           value={grantNumbers}
-          maxLength={50}
+          maxLength={250}
           placeholder="Enter Grant or Contract Number(s)"
           tooltipText={
             <>

src/config/CellLineModelSystemConfig.ts

@@ -1,6 +1,5 @@
 /**
- * Configuration for Questionnaire Section C Cell Line Model System
- *
+ * Configuration for Questionnaire Section D Cell Line Model System
  */
 const options: FormGroupCheckboxOption[] = [
   {

src/config/SectionMetadata.tsx

@@ -44,10 +44,6 @@ const sectionMetadata = {
         title: "FUNDING AGENCY/ORGANIZATION",
         description: "List the agency(s) and/or organization(s) that funded this study.",
       },
-      DBGAP_REGISTRATION: {
-        title: "dbGaP REGISTRATION",
-        description: "Please indicate if your study is currently registered with dbGaP.",
-      },
       EXISTING_PUBLICATIONS: {
         title: "EXISTING PUBLICATIONS",
         description:
@@ -88,6 +84,10 @@ const sectionMetadata = {
           </>
         ),
       },
+      DBGAP_REGISTRATION: {
+        title: "dbGaP REGISTRATION",
+        description: "Please indicate if your study is currently registered with dbGaP.",
+      },
       CANCER_TYPES: {
         title: "CANCER TYPES",
         description:

src/content/questionnaire/FormView.tsx

@@ -397,12 +397,9 @@ const FormView: FC<Props> = ({ section }: Props) => {
     if (!isEqual(data.questionnaireData, newData)) {
       const res = await setData(newData);
       if (res?.status === "failed" && !!res?.errorMessage) {
-        enqueueSnackbar(
-          `An error occurred while saving the ${map[activeSection].title} section. ${res.errorMessage}`,
-          {
-            variant: "error",
-          }
-        );
+        enqueueSnackbar(`An error occurred while saving the ${map[activeSection].title} section.`, {
+          variant: "error",
+        });
       } else {
         enqueueSnackbar(
           `Your changes for the ${map[activeSection].title} section have been successfully saved.`,

src/content/questionnaire/sections/B.tsx

@@ -1,6 +1,6 @@
-import React, { FC, useEffect, useMemo, useRef, useState } from "react";
+import { FC, useEffect, useMemo, useRef, useState } from "react";
 import { parseForm } from "@jalik/form-parser";
-import { cloneDeep } from "lodash";
+import { cloneDeep, merge } from "lodash";
 import AddCircleIcon from "@mui/icons-material/AddCircle";
 import dayjs from "dayjs";
 import { Status as FormStatus, useFormContext } from "../../../components/Contexts/FormContext";
@@ -20,7 +20,6 @@ import AddRemoveButton from "../../../components/AddRemoveButton";
 import PlannedPublication from "../../../components/Questionnaire/PlannedPublication";
 import { InitialQuestionnaire } from "../../../config/InitialValues";
 import TransitionGroupWrapper from "../../../components/Questionnaire/TransitionGroupWrapper";
-import SwitchInput from "../../../components/Questionnaire/SwitchInput";
 import useFormMode from "../../../hooks/useFormMode";
 import FundingAgency from "../../../components/Questionnaire/FundingAgency";
 import SelectInput from "../../../components/Questionnaire/SelectInput";
@@ -73,10 +72,6 @@ const FormSectionB: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
   const [fundings, setFundings] = useState<KeyedFunding[]>(
     data.study?.funding?.map(mapObjectWithKey) || []
   );
-  const [isDbGapRegistered, setIsdbGaPRegistered] = useState<boolean>(
-    data.study?.isDbGapRegistered
-  );
-  const [dbGaPPPHSNumber, setDbGaPPPHSNumber] = useState<string>(data.study?.dbGaPPPHSNumber);
 
   const customProgramIds: string[] = [NotApplicableProgram._id, OtherProgram._id];
   const programKeyRef = useRef(new Date().getTime());
@@ -98,15 +93,12 @@ const FormSectionB: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
     }
 
     const formObject = parseForm(formRef.current, { nullify: false });
-    const combinedData = { ...cloneDeep(data), ...formObject };
+    const combinedData: QuestionnaireData = merge(cloneDeep(data), formObject);
 
     // Reset study if the data failed to load
     if (!formObject.study) {
       combinedData.study = InitialQuestionnaire.study;
     }
-    if (!formObject?.study?.dbGaPPPHSNumber) {
-      combinedData.study.dbGaPPPHSNumber = "";
-    }
 
     // Reset publications if the user has not entered any publications
     if (!formObject.study.publications || formObject.study.publications.length === 0) {
@@ -118,6 +110,14 @@ const FormSectionB: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
       combinedData.study.repositories = [];
     }
 
+    // Reset planned publications if the user has not entered any planned publications
+    if (
+      !formObject.study.plannedPublications ||
+      formObject.study.plannedPublications.length === 0
+    ) {
+      combinedData.study.plannedPublications = [];
+    }
+
     // Reset planned publications if the user has not entered any planned publications
     // Also reset expectedDate when invalid to avoid form submission unsaved changes warning
     combinedData.study.plannedPublications =
@@ -170,13 +170,6 @@ const FormSectionB: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
     });
   };
 
-  const handleIsDbGapRegisteredChange = (e, checked: boolean) => {
-    setIsdbGaPRegistered(checked);
-    if (!checked) {
-      setDbGaPPPHSNumber("");
-    }
-  };
-
   /**
    * Add a empty publication to the publications state
    *
@@ -463,35 +456,6 @@ const FormSectionB: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
         />
       </SectionGroup>
 
-      {/* dbGaP Registration section */}
-      <SectionGroup
-        title={SectionBMetadata.sections.DBGAP_REGISTRATION.title}
-        description={SectionBMetadata.sections.DBGAP_REGISTRATION.description}
-      >
-        <SwitchInput
-          id="section-b-dbGaP-registration"
-          label="Has your study been registered in dbGaP?"
-          name="study[isDbGapRegistered]"
-          required
-          value={isDbGapRegistered}
-          onChange={handleIsDbGapRegisteredChange}
-          isBoolean
-          readOnly={readOnlyInputs}
-        />
-        <TextInput
-          id="section-b-if-yes-provide-dbgap-phs-number"
-          label="If yes, provide dbGaP PHS number with the version number"
-          name="study[dbGaPPPHSNumber]"
-          value={dbGaPPPHSNumber}
-          onChange={(e) => setDbGaPPPHSNumber(e.target.value || "")}
-          maxLength={50}
-          placeholder={'Ex/ "phs002529.v1.p1". 50 characters allowed'}
-          gridWidth={12}
-          readOnly={readOnlyInputs || !isDbGapRegistered}
-          required={isDbGapRegistered}
-        />
-      </SectionGroup>
-
       {/* Existing Publications */}
       <SectionGroup
         title={SectionBMetadata.sections.EXISTING_PUBLICATIONS.title}

src/content/questionnaire/sections/C.tsx

@@ -1,5 +1,5 @@
 import { FC, SyntheticEvent, useEffect, useRef, useState } from "react";
-import { cloneDeep } from "lodash";
+import { cloneDeep, merge } from "lodash";
 import { parseForm } from "@jalik/form-parser";
 import { AutocompleteChangeReason, styled } from "@mui/material";
 import { useFormContext } from "../../../components/Contexts/FormContext";
@@ -16,6 +16,7 @@ import useFormMode from "../../../hooks/useFormMode";
 import SectionMetadata from "../../../config/SectionMetadata";
 import LabelCheckbox from "../../../components/Questionnaire/LabelCheckbox";
 import CustomAutocomplete from "../../../components/Questionnaire/CustomAutocomplete";
+import SwitchInput from "../../../components/Questionnaire/SwitchInput";
 
 const AccessTypesDescription = styled("span")(() => ({
   fontWeight: 400,
@@ -44,14 +45,18 @@ const FormSectionC: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
   );
   const [otherSpecies, setOtherSpecies] = useState<string>(data.otherSpeciesOfSubjects);
   const [otherSpeciesEnabled, setOtherSpeciesEnabled] = useState<boolean>(data.otherSpeciesEnabled);
+  const [isDbGapRegistered, setIsdbGaPRegistered] = useState<boolean>(
+    data.study?.isDbGapRegistered
+  );
+  const [dbGaPPPHSNumber, setDbGaPPPHSNumber] = useState<string>(data.study?.dbGaPPPHSNumber);
 
   const getFormObject = (): FormObject | null => {
     if (!formRef.current) {
       return null;
     }
 
     const formObject = parseForm(formRef.current, { nullify: false });
-    const combinedData = { ...cloneDeep(data), ...formObject };
+    const combinedData: QuestionnaireData = merge(cloneDeep(data), formObject);
 
     combinedData.numberOfParticipants = parseInt(formObject.numberOfParticipants, 10) || null;
 
@@ -101,6 +106,13 @@ const FormSectionC: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
     setOtherSpeciesEnabled(checked);
   };
 
+  const handleIsDbGapRegisteredChange = (e, checked: boolean) => {
+    setIsdbGaPRegistered(checked);
+    if (!checked) {
+      setDbGaPPPHSNumber("");
+    }
+  };
+
   useEffect(() => {
     getFormObjectRef.current = getFormObject;
   }, [refs]);
@@ -132,6 +144,35 @@ const FormSectionC: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
         />
       </SectionGroup>
 
+      {/* dbGaP Registration section */}
+      <SectionGroup
+        title={SectionCMetadata.sections.DBGAP_REGISTRATION.title}
+        description={SectionCMetadata.sections.DBGAP_REGISTRATION.description}
+      >
+        <SwitchInput
+          id="section-c-dbGaP-registration"
+          label="Has your study been registered in dbGaP?"
+          name="study[isDbGapRegistered]"
+          required
+          value={isDbGapRegistered}
+          onChange={handleIsDbGapRegisteredChange}
+          isBoolean
+          readOnly={readOnlyInputs}
+        />
+        <TextInput
+          id="section-c-if-yes-provide-dbgap-phs-number"
+          label="If yes, provide dbGaP PHS number with the version number"
+          name="study[dbGaPPPHSNumber]"
+          value={dbGaPPPHSNumber}
+          onChange={(e) => setDbGaPPPHSNumber(e.target.value || "")}
+          maxLength={50}
+          placeholder={'Ex/ "phs002529.v1.p1". 50 characters allowed'}
+          gridWidth={12}
+          readOnly={readOnlyInputs || !isDbGapRegistered}
+          required={isDbGapRegistered}
+        />
+      </SectionGroup>
+
       {/* Cancer Types Section */}
       <SectionGroup
         title={SectionCMetadata.sections.CANCER_TYPES.title}