[DUOS-1958][risk=no] NIH And AnVIL Use Section (#1800)

* nih anvil use form section

* add tests

* codacy

* Update src/components/data_submission/NihAnvilUse.js

Co-authored-by: Gregory Rushton <rushtong@users.noreply.github.com>

Co-authored-by: Gregory Rushton <rushtong@users.noreply.github.com>

cypress/component/DataSubmission/ds_nih_anvil_use.spec.js

@@ -0,0 +1,68 @@
+/* eslint-disable no-undef */
+import React from 'react';
+import { mount } from 'cypress/react';
+import { cloneDeep } from 'lodash/fp';
+import NihAnvilUse from '../../../src/components/data_submission/NihAnvilUse';
+
+let propCopy;
+
+const props = {
+  onChange: () => {}
+};
+
+beforeEach(() => {
+  propCopy = cloneDeep(props);
+});
+
+describe('NihAnvilUse - Tests', () => {
+  it('should mount with only the nihAnvilUse form field displayed', () => {
+    propCopy.formData = {};
+    mount(<NihAnvilUse {...propCopy}/>);
+    const formFields = cy.get('.formField-container');
+    formFields.should('exist');
+
+    cy.get('#nihAnvilUse').should('exist');
+
+    cy.get('#submittingToAnvil').should('not.exist');
+    cy.get('#dbGaPPhsID').should('not.exist');
+    cy.get('#dbGaPStudyRegistrationName').should('not.exist');
+    cy.get('#embargoReleaseDate').should('not.exist');
+    cy.get('#sequencingCenter').should('not.exist');
+  });
+
+  it('should display submittingToAnvil form field if nihAnvilUse is \'I will\'', () => {
+    mount(<NihAnvilUse {...propCopy}/>);
+    cy.get('#nihAnvilUse_i_will').click();
+
+    cy.get('#submittingToAnvil').should('exist');
+
+    cy.get('#dbGaPPhsID').should('not.exist');
+    cy.get('#dbGaPStudyRegistrationName').should('not.exist');
+    cy.get('#embargoReleaseDate').should('not.exist');
+    cy.get('#sequencingCenter').should('not.exist');
+  });
+
+  it('should display submittingToAnvil form field if nihAnvilUse is \'No\'', () => {
+    mount(<NihAnvilUse {...propCopy}/>);
+    cy.get('#nihAnvilUse_no').click();
+
+    cy.get('#submittingToAnvil').should('exist');
+
+    cy.get('#dbGaPPhsID').should('not.exist');
+    cy.get('#dbGaPStudyRegistrationName').should('not.exist');
+    cy.get('#embargoReleaseDate').should('not.exist');
+    cy.get('#sequencingCenter').should('not.exist');
+  });
+
+  it('should display dbGaP form fields if nihAnvilUse is \'I did\'', () => {
+    mount(<NihAnvilUse {...propCopy}/>);
+    cy.get('#nihAnvilUse_i_did').click();
+
+    cy.get('#submittingToAnvil').should('not.exist');
+
+    cy.get('#dbGaPPhsID').should('exist');
+    cy.get('#dbGaPStudyRegistrationName').should('exist');
+    cy.get('#embargoReleaseDate').should('exist');
+    cy.get('#sequencingCenter').should('exist');
+  });
+});

src/components/data_submission/NihAnvilUse.js

@@ -0,0 +1,113 @@
+import {div, h, h2} from 'react-hyperscript-helpers';
+import {useState} from 'react';
+import {FormField, FormFieldTypes, FormValidators} from '../forms/forms';
+
+const I_DID = 'I Did';
+const I_WILL = 'I Will';
+const NO = 'No';
+
+const nihAnvilUseLabels = {
+  i_did: I_DID,
+  i_will: I_WILL,
+  no: NO
+};
+
+const allNihAnvilUseFields = [
+  'submittingToAnvil',
+  'dbGaPPhsID',
+  'dbGaPStudyRegistrationName',
+  'embargoReleaseDate',
+  'sequencingCenter',
+];
+
+export default function NihAnvilUse(props) {
+  const {
+    onChange,
+    initialFormData,
+  } = props;
+  const [nihAnvilUse, setNihAnvilUse] = useState(initialFormData?.nihAnvilUse || null);
+
+  const clearFormValues = () => {
+    allNihAnvilUseFields.forEach((field) => onChange({key: field, value: undefined, isValid: true}));
+  };
+
+  return h(div, {
+    className: 'data-submitter-section',
+  }, [
+    h2('NIH and AnVIL use'),
+    h(FormField, {
+      id: 'nihAnvilUse',
+      title: 'Will you or did you submit data to the NIH?',
+      type: FormFieldTypes.RADIOGROUP,
+      options: [
+        {text: I_DID, name: 'i_did'},
+        {text: I_WILL, name: 'i_will'},
+        {text: NO, name: 'no'},
+      ],
+      validators: [FormValidators.REQUIRED],
+      onChange: (config) => {
+
+        const value = nihAnvilUseLabels[config.value];
+        onChange({key: config.key, value: value, isValid: config.isValid});
+
+        // if going from did -> i will / no, then clear all values
+        if (nihAnvilUse === I_DID && value !== I_DID) {
+          clearFormValues();
+        }
+
+        // if going from i will / no -> did, then clear all values
+        if ((nihAnvilUse === I_WILL || nihAnvilUse === NO) && (value !== I_WILL && value !== NO)) {
+          clearFormValues();
+        }
+
+        setNihAnvilUse(value);
+      },
+    }),
+
+    h(FormField, {
+      isRendered: nihAnvilUse === I_WILL || nihAnvilUse === NO,
+      id: 'submittingToAnvil',
+      title: 'Are you planning to submit to AnVIL?',
+      type: FormFieldTypes.RADIOGROUP,
+      options: [
+        {text: 'Yes', name: 'yes'},
+        {text: 'No', name: 'no'},
+      ],
+      validators: [FormValidators.REQUIRED],
+      onChange: ({key, value}) => {
+        onChange({key, value: value === 'yes'});
+      },
+    }),
+
+    div({ isRendered: nihAnvilUse === I_DID }, [
+      h(FormField, {
+        id: 'dbGaPPhsID',
+        title: 'dbGaP phs ID',
+        placeholder: 'Firstname Lastname',
+        validators: [FormValidators.REQUIRED],
+        onChange
+      }),
+      h(FormField, {
+        id: 'dbGaPStudyRegistrationName',
+        title: 'dbGaP Study Registration Name',
+        placeholder: 'Email',
+        validators: [FormValidators.REQUIRED, FormValidators.EMAIL],
+        onChange
+      }),
+      h(FormField, {
+        id: 'embargoReleaseDate',
+        title: 'Embargo Release Date',
+        placeholder: 'YYYY-MM-DD',
+        validators: [FormValidators.REQUIRED, FormValidators.DATE],
+        onChange
+      }),
+      h(FormField, {
+        id: 'sequencingCenter',
+        title: 'Sequencing Center',
+        placeholder: 'Email',
+        validators: [FormValidators.REQUIRED, FormValidators.EMAIL],
+        onChange
+      }),
+    ])
+  ]);
+}

src/pages/DataSubmissionForm.js

@@ -6,6 +6,7 @@ import {Styles} from '../libs/theme';
 
 import DataAccessGovernance from '../components/data_submission/DataAccessGovernance';
 import DataSubmissionStudyInformation from '../components/data_submission/ds_study_information';
+import NihAnvilUse from '../components/data_submission/NihAnvilUse';
 
 
 export const DataSubmissionForm = () => {
@@ -48,6 +49,7 @@ export const DataSubmissionForm = () => {
       }
     }, [
       h(DataSubmissionStudyInformation, { onChange }),
+      h(NihAnvilUse, { onChange, initialFormData: formData }),
       h(DataAccessGovernance, { onChange }),
     ])
   ]);