Feature/autocomplete full name

cypress/integration/doiForm.spec.js

@@ -97,9 +97,7 @@ describe("DOI form", function () {
     cy.get(".MuiListItem-container", { timeout: 10000 }).should("have.length", 2)
 
     // Go to DOI form
-    cy.get("button[type=button]").contains("Next").click()
-    cy.get("button").contains("Add DOI information (optional)", { timeout: 10000 }).click()
-    cy.get("div[role='dialog']").should("be.visible")
+    cy.openDOIForm()
 
     // Check file types from submitted Run form and Analysis form are Uniquely pre-filled in DOI form
     cy.get("input[data-testid='formats.0']", { timeout: 10000 }).should("have.value", "bam")
@@ -194,9 +192,7 @@ describe("DOI form", function () {
   }),
     it("should fill the required fields and save DOI form successfully", () => {
       // Go to DOI form
-      cy.get("button[type=button]").contains("Next").click()
-      cy.get("button").contains("Add DOI information (optional)", { timeout: 10000 }).click()
-      cy.get("div[role='dialog']").should("be.visible")
+      cy.openDOIForm()
 
       // Fill in required Creators field
       cy.get("h2[data-testid='creators']").parent().children("button").click()
@@ -213,5 +209,25 @@ describe("DOI form", function () {
       cy.get("button").contains("Add DOI information (optional)", { timeout: 10000 }).click()
       cy.get("input[data-testid='creators.0.givenName']").should("have.value", "John Smith")
       cy.get("select[name='subjects.0.subject']").should("have.value", "FOS: Mathematics")
+    }),
+    it("should autofill full name based on family and given name", () => {
+      // Go to DOI form
+      cy.openDOIForm()
+      // Go to Creators section and fill in given name, family name
+      cy.get("h2[data-testid='creators']").parents().children("button").click()
+      cy.get("input[data-testid='creators.0.givenName']").type("Creator's given name")
+      cy.get("input[data-testid='creators.0.familyName']").type("Creator's family name")
+      // Check full name is autofilled from family name and given name
+      cy.get("input[data-testid='creators.0.name']").should("have.value", "Creator's family name,Creator's given name")
+
+      // Go to Contributors and fill in given name, family name
+      cy.get("h2[data-testid='contributors']").parents().children("button").click()
+      cy.get("input[data-testid='contributors.0.givenName']").type("Contributor's given name")
+      cy.get("input[data-testid='contributors.0.familyName']").type("Contributor's family name")
+      // Check full name is autofilled from family name and given name
+      cy.get("input[data-testid='contributors.0.name']").should(
+        "have.value",
+        "Contributor's family name,Contributor's given name"
+      )
     })
 })

cypress/support/commands.js

@@ -91,3 +91,10 @@ Cypress.Commands.add("findDraftFolder", label => {
     }
   })
 })
+
+// Go to DOI form
+Cypress.Commands.add("openDOIForm", () => {
+  cy.get("button[type=button]").contains("Next").click()
+  cy.get("button").contains("Add DOI information (optional)", { timeout: 10000 }).click()
+  cy.get("div[role='dialog']").should("be.visible")
+})

src/components/NewDraftWizard/WizardForms/WizardDOIForm.js

@@ -27,6 +27,7 @@ const DOIForm = ({ formId }: { formId: string }): React$Element<typeof FormProvi
   const [dataciteSchema, setDataciteSchema] = useState({})
 
   useEffect(() => {
+    let isMounted = true
     const getDataciteSchema = async () => {
       let dataciteSchema = sessionStorage.getItem(`cached_datacite_schema`)
       if (!dataciteSchema || !new Ajv().validateSchema(JSON.parse(dataciteSchema))) {
@@ -47,9 +48,14 @@ const DOIForm = ({ formId }: { formId: string }): React$Element<typeof FormProvi
         dataciteSchema = JSON.parse(dataciteSchema)
       }
       const dereferencedDataciteSchema = await dereferenceSchema(dataciteSchema)
-      setDataciteSchema(dereferencedDataciteSchema)
+      if (isMounted) {
+        setDataciteSchema(dereferencedDataciteSchema)
+      }
     }
     getDataciteSchema()
+    return () => {
+      isMounted = false
+    }
   }, [])
 
   const currentFolder = useSelector(state => state.submissionFolder)

src/components/NewDraftWizard/WizardForms/WizardJSONSchemaParser.js

@@ -27,7 +27,7 @@ import { useSelector, useDispatch } from "react-redux"
 
 import { setAutocompleteField } from "features/autocompleteSlice"
 import rorAPIService from "services/rorAPI"
-import { pathToName, traverseValues } from "utils/JSONSchemaUtils"
+import { pathToName, traverseValues, getPathName } from "utils/JSONSchemaUtils"
 
 /*
  * Highlight style for required fields
@@ -589,22 +589,40 @@ const FormTextField = ({
   // Case: DOI form - Affilation fields to be prefilled
   const prefilledFields = ["affiliationIdentifier", "schemeUri", "affiliationIdentifierScheme"]
   let watchAutocompleteFieldName = ""
-  let watchFieldValue = null
+  let prefilledValue = null
+
+  let fullNameValue = "" // Case: DOI form - Creators and Contributors' FullName
+
+  let disabled = false // boolean if inputValue is disabled
+
   if (openedDoiForm) {
     watchAutocompleteFieldName =
-      name.includes("affiliation") && prefilledFields.includes(lastPathItem)
-        ? path.slice(0, -1).join(".").concat(".", "name")
-        : ""
+      name.includes("affiliation") && prefilledFields.includes(lastPathItem) ? getPathName(path, "name") : ""
+
     // useWatch to watch any changes in form's fields
     const watchValues = useWatch()
+
     // check changes of value of autocompleteField from watchValues
-    watchFieldValue = watchAutocompleteFieldName ? get(watchValues, watchAutocompleteFieldName) : null
-  }
+    prefilledValue = watchAutocompleteFieldName ? get(watchValues, watchAutocompleteFieldName) : null
+
+    // If it's <creators>'s and <contributors>'s FullName field, watch the values of GivenName and FamilyName
+    const isFullNameField = (path[0] === "creators" || path[0] === "contributors") && path[2] === "name"
+
+    if (isFullNameField) {
+      const givenName = getPathName(path, "givenName")
+      const givenNameValue = get(watchValues, givenName) || ""
+      const familyName = getPathName(path, "familyName")
+      const familyNameValue = get(watchValues, familyName)?.length > 0 ? get(watchValues, familyName).concat(",") : ""
+      // Return value for FullName field
+      fullNameValue = `${familyNameValue}${givenNameValue}`
+    }
 
-  // Conditions to disable input field: disable editing option if the field is prefilled
-  const disabled =
-    (prefilledFields.includes(lastPathItem) && watchFieldValue !== null) ||
-    (defaultValue !== "" && name.includes("formats"))
+    // Conditions to disable input field: disable editing option if the field is rendered as prefilled
+    disabled =
+      (prefilledFields.includes(lastPathItem) && prefilledValue !== null) ||
+      isFullNameField ||
+      (defaultValue !== "" && name.includes("formats"))
+  }
 
   return (
     <ConnectForm>
@@ -618,24 +636,25 @@ const FormTextField = ({
         if (openedDoiForm) {
           // Set values for Affiliations' fields if autocompleteField exists
           useEffect(() => {
-            if (watchFieldValue && !val) {
+            if (prefilledValue && !val) {
               lastPathItem === prefilledFields[0] ? setValue(name, autocompleteField) : null
               lastPathItem === prefilledFields[1] ? setValue(name, "https://ror.org") : null
               lastPathItem === prefilledFields[2] ? setValue(name, "ROR") : null
             }
-          }, [autocompleteField, watchFieldValue])
+          }, [autocompleteField, prefilledValue])
 
           // Remove values for Affiliations' <location of affiliation identifier> field if autocompleteField is deleted
           useEffect(() => {
-            if (watchFieldValue === undefined && val && lastPathItem === prefilledFields[0]) setValue(name, "")
-          }, [watchFieldValue])
+            if (prefilledValue === undefined && val && lastPathItem === prefilledFields[0]) setValue(name, "")
+          }, [prefilledValue])
         }
 
         return (
           <Controller
             render={({ field, fieldState: { error } }) => {
               const inputValue =
                 (watchAutocompleteFieldName && typeof val !== "object" && val) ||
+                fullNameValue ||
                 (typeof field.value !== "object" && field.value) ||
                 ""
 

src/utils/JSONSchemaUtils.js

@@ -16,6 +16,14 @@ export const dereferenceSchema = async (schema: any): Promise<any> => {
  */
 export const pathToName = (path: string[]): string => path.join(".")
 
+/*
+ * Get pathName for a specific field based on the pathName of another field (only different in the last element)
+ */
+export const getPathName = (path: Array<string>, field: string): string => {
+  const pathName = path.slice(0, -1).join(".").concat(".", field)
+  return pathName
+}
+
 /*
  * Parse initial values from given object
  */