Merge pull request #3962 from nulib/2074-terms-of-use-batch

Add Terms of Use field to batch edit replace
nulib · May 14, 2024 · eee576d · eee576d
2 parents d60488b + fc745a4
commit eee576d
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 29 deletions.
diff --git a/app/assets/js/components/BatchEdit/About/RightsMetadata.jsx b/app/assets/js/components/BatchEdit/About/RightsMetadata.jsx
@@ -1,12 +1,14 @@
-import React from "react";
-import PropTypes from "prop-types";
-import UIFormBatchFieldArray from "@js/components/UI/Form/BatchFieldArray";
-import UIFormSelect from "@js/components/UI/Form/Select";
 import {
   RIGHTS_METADATA,
   getCodedTermSelectOptions,
 } from "@js/services/metadata";
+
+import PropTypes from "prop-types";
+import React from "react";
+import UIFormBatchFieldArray from "@js/components/UI/Form/BatchFieldArray";
 import UIFormField from "@js/components/UI/Form/Field";
+import UIFormSelect from "@js/components/UI/Form/Select";
+import UIFormTextarea from "@js/components/UI/Form/Textarea";
 import { useCodeLists } from "@js/context/code-list-context";
 
 const BatchEditAboutRightsMetadata = ({ ...restProps }) => {
@@ -20,16 +22,15 @@ const BatchEditAboutRightsMetadata = ({ ...restProps }) => {
     >
       {RIGHTS_METADATA.map((item) => (
         <div key={item.name} className="column is-half" data-testid={item.name}>
-          <UIFormBatchFieldArray 
-            required 
-            name={item.name} 
-            label={item.label} 
-            isTextarea={item.inputEl && item.inputEl === 'textarea'} 
+          <UIFormBatchFieldArray
+            required
+            name={item.name}
+            label={item.label}
+            isTextarea={item.inputEl && item.inputEl === "textarea"}
           />
         </div>
       ))}
       <div className="column is-three-quarters">
-        {/* License */}
         <UIFormField label="License">
           <UIFormSelect
             isReactHookForm
@@ -39,7 +40,7 @@ const BatchEditAboutRightsMetadata = ({ ...restProps }) => {
               codeLists.licenseData
                 ? getCodedTermSelectOptions(
                     codeLists.licenseData.codeList,
-                    "LICENSE"
+                    "LICENSE",
                   )
                 : []
             }
@@ -48,6 +49,16 @@ const BatchEditAboutRightsMetadata = ({ ...restProps }) => {
           />
         </UIFormField>
       </div>
+
+      <div className="column is-half" data-testid="terms-of-use">
+        <UIFormField label="Terms of Use">
+          <UIFormTextarea
+            isReactHookForm
+            label="Terms of Use"
+            name="termsOfUse"
+          />
+        </UIFormField>
+      </div>
     </div>
   );
 };

diff --git a/app/assets/js/components/BatchEdit/About/RightsMetadata.test.jsx b/app/assets/js/components/BatchEdit/About/RightsMetadata.test.jsx
@@ -1,13 +1,14 @@
-import React from "react";
-import { screen } from "@testing-library/react";
 import {
   renderWithRouterApollo,
   withReactHookForm,
-} from "../../../services/testing-helpers";
+} from "@js/services/testing-helpers";
+
 import BatchEditAboutRightsMetadata from "./RightsMetadata";
-import { RIGHTS_METADATA } from "../../../services/metadata";
 import { CodeListProvider } from "@js/context/code-list-context";
+import { RIGHTS_METADATA } from "@js/services/metadata";
+import React from "react";
 import { allCodeListMocks } from "@js/components/Work/controlledVocabulary.gql.mock";
+import { screen } from "@testing-library/react";
 
 describe("BatchEditAboutRightsMetadata component", () => {
   beforeEach(() => {
@@ -18,7 +19,7 @@ describe("BatchEditAboutRightsMetadata component", () => {
       </CodeListProvider>,
       {
         mocks: allCodeListMocks,
-      }
+      },
     );
   });
 
@@ -32,4 +33,8 @@ describe("BatchEditAboutRightsMetadata component", () => {
     }
     expect(screen.getByTestId("license-select"));
   });
+
+  it("renders Terms of Use field", async () => {
+    expect(screen.getByTestId("terms-of-use"));
+  });
 });
diff --git a/app/assets/js/components/BatchEdit/Tabs.jsx b/app/assets/js/components/BatchEdit/Tabs.jsx
@@ -118,7 +118,8 @@ export default function BatchEditTabs() {
       }
     });
 
-    ["title"].forEach((item) => {
+    /** Single value fields */
+    ["title", "termsOfUse"].forEach((item) => {
       if (currentFormValues[item]) {
         replaceItems.descriptive[item] = currentFormValues[item];
       }
@@ -146,14 +147,14 @@ export default function BatchEditTabs() {
         addItems.descriptive[term.name] = prepControlledTermInput(
           term,
           currentFormValues[term.name],
-          true
+          true,
         );
       }
       // Include only active removals
       if (batchState.removeItems && batchState.removeItems[term.name]) {
         deleteReadyItems[term.name] = prepFacetKey(
           term,
-          batchState.removeItems[term.name]
+          batchState.removeItems[term.name],
         );
       }
     }
@@ -164,7 +165,7 @@ export default function BatchEditTabs() {
     // Now we need to split this up between Descriptive and Administrative
     let administrativeMultiValues = parseMultiValues(
       multiValues,
-      "administrative"
+      "administrative",
     );
     let descriptiveMultiValues = parseMultiValues(multiValues, "descriptive");
 

diff --git a/app/assets/js/components/Work/Tabs/About.jsx b/app/assets/js/components/Work/Tabs/About.jsx
@@ -48,7 +48,7 @@ function prepFormData(work) {
   ]) {
     for (let obj of group) {
       resetValues[obj.name] = descriptiveMetadata[obj.name].map((value) =>
-        convertFieldArrayValToHookFormVal(value)
+        convertFieldArrayValToHookFormVal(value),
       );
     }
   }
@@ -111,8 +111,7 @@ const WorkTabsAbout = ({ work }) => {
   const onSubmit = (data) => {
     // "data" here returns everything (which was set above in the useEffect()),
     // including fields that are either outdated or which no values were ever registered
-    // with React Hook Form's register().   So, we'll use getValues() to get the real data
-    // updated.
+    // with React Hook Form's register().   So, we'll use getValues() to get the most accurate data.
 
     let currentFormValues = methods.getValues();
 
@@ -121,7 +120,7 @@ const WorkTabsAbout = ({ work }) => {
     let workUpdateInput = {
       descriptiveMetadata: {
         alternateTitle: prepFieldArrayItemsForPost(
-          currentFormValues.alternateTitle
+          currentFormValues.alternateTitle,
         ),
         dateCreated: prepEDTFforPost(currentFormValues.dateCreated),
         description: prepFieldArrayItemsForPost(currentFormValues.description),
@@ -161,7 +160,7 @@ const WorkTabsAbout = ({ work }) => {
     for (let term of CONTROLLED_METADATA) {
       workUpdateInput.descriptiveMetadata[term.name] = prepControlledTermInput(
         term,
-        currentFormValues[term.name]
+        currentFormValues[term.name],
       );
     }
 

diff --git a/app/assets/js/components/Work/Tabs/About/RightsMetadata.jsx b/app/assets/js/components/Work/Tabs/About/RightsMetadata.jsx
@@ -6,6 +6,7 @@ import UIFormField from "@js/components/UI/Form/Field";
 import UIFormFieldArray from "@js/components/UI/Form/FieldArray";
 import UIFormFieldArrayDisplay from "@js/components/UI/Form/FieldArrayDisplay";
 import UIFormInput from "@js/components/UI/Form/Input";
+import UIFormTextarea from "@js/components/UI/Form/Textarea";
 import UIFormSelect from "@js/components/UI/Form/Select";
 import { useCodeLists } from "@js/context/code-list-context";
 
@@ -57,10 +58,10 @@ const WorkTabsAboutRightsMetadata = ({ descriptiveMetadata, isEditing }) => {
         </UIFormField>
       </div>
 
-      <div className="column is-half" data-testid="input-terms-of-use">
+      <div className="column is-half" data-testid="terms-of-use">
         <UIFormField label="Terms of Use">
           {isEditing ? (
-            <UIFormInput
+            <UIFormTextarea
               isReactHookForm
               label="Terms of Use"
               name="termsOfUse"

diff --git a/app/assets/js/components/Work/Tabs/About/RightsMetadata.test.js b/app/assets/js/components/Work/Tabs/About/RightsMetadata.test.js
@@ -23,7 +23,7 @@ describe.only("Work About tab Idenfiers Metadata component", () => {
       </CodeListProvider>,
       {
         mocks: allCodeListMocks,
-      }
+      },
     );
   });
 
@@ -41,6 +41,6 @@ describe.only("Work About tab Idenfiers Metadata component", () => {
     expect(await screen.findByTestId("license")).toBeInTheDocument();
   });
   it("renders terms of use field", async () => {
-    expect(await screen.findByTestId("input-terms-of-use")).toBeInTheDocument();
+    expect(await screen.findByTestId("terms-of-use"));
   });
 });
diff --git a/app/assets/js/services/metadata.ts b/app/assets/js/services/metadata.ts
@@ -244,6 +244,12 @@ export const METADATA_FIELDS: MetadataFields = {
     name: "technique",
     metadataClass: "descriptive",
   },
+  TERMS_OF_USE: {
+    inputEl: "textarea",
+    label: "Terms of Use",
+    name: "termsOfUse",
+    metadataClass: "descriptive",
+  },
   TITLE: { name: "title", label: "Title", metadataClass: "descriptive" },
   VISIBILITY: {
     name: "visibility",
@@ -299,6 +305,7 @@ const {
   SUBJECT_ROLE,
   TABLE_OF_CONTENTS,
   TECHNIQUE,
+  TERMS_OF_USE,
   TITLE,
   VISIBILITY,
 } = METADATA_FIELDS;
@@ -341,6 +348,7 @@ export const UNCONTROLLED_MULTI_VALUE_METADATA = [
   SOURCE,
   STATUS,
   TABLE_OF_CONTENTS,
+  TERMS_OF_USE,
   VISIBILITY,
 ];