Deploy v9.3.5 to production

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>
   );
 };

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"));
+  });
 });

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");
 

app/assets/js/components/Work/Fileset/List.test.js

@@ -1,14 +1,15 @@
-import React from "react";
-import WorkFilesetList from "@js/components/Work/Fileset/List";
-import { screen, waitFor } from "@testing-library/react";
-import { mockFileSets } from "@js/mock-data/filesets";
 import {
   renderWithRouterApollo,
   withReactBeautifulDND,
 } from "@js/services/testing-helpers";
+import { screen, waitFor } from "@testing-library/react";
+
+import React from "react";
+import WorkFilesetList from "@js/components/Work/Fileset/List";
+import { WorkProvider } from "@js/context/work-context";
+import { mockFileSets } from "@js/mock-data/filesets";
 import { mockUser } from "@js/components/Auth/auth.gql.mock";
 import useIsAuthorized from "@js/hooks/useIsAuthorized";
-import { WorkProvider } from "@js/context/work-context";
 
 jest.mock("@js/hooks/useIsAuthorized");
 useIsAuthorized.mockReturnValue({
@@ -25,7 +26,7 @@ describe("WorkFilesetList component", () => {
           isReordering: true,
         })}
       </WorkProvider>,
-      {}
+      {},
     );
     await waitFor(() => {
       expect(screen.getByTestId("fileset-draggable-list"));
@@ -39,7 +40,7 @@ describe("WorkFilesetList component", () => {
           fileSets: { access: mockFileSets, auxiliary: [] },
         })}
       </WorkProvider>,
-      {}
+      {},
     );
     await waitFor(() => {
       expect(screen.getByTestId("fileset-list"));
@@ -53,10 +54,10 @@ describe("WorkFilesetList component", () => {
           fileSets: { access: mockFileSets, auxiliary: [] },
         })}
       </WorkProvider>,
-      {}
+      {},
     );
     await waitFor(() => {
-      expect(screen.getAllByTestId("fileset-item")).toHaveLength(3);
+      expect(screen.getAllByTestId("fileset-item")).toHaveLength(4);
     });
   });
 });

app/assets/js/components/Work/Fileset/ListItem.jsx

@@ -1,11 +1,9 @@
-import { Button, Tag } from "@nulib/design-system";
-import React, { useContext } from "react";
 import { useWorkDispatch, useWorkState } from "@js/context/work-context";
 
 import AuthDisplayAuthorized from "@js/components/Auth/DisplayAuthorized";
-import { IIIFContext } from "@js/components/IIIF/IIIFProvider";
-import { IconPlay } from "@js/components/Icon";
 import PropTypes from "prop-types";
+import React from "react";
+import { Tag } from "@nulib/design-system";
 import UIFormField from "@js/components/UI/Form/Field";
 import UIFormInput from "@js/components/UI/Form/Input";
 import UIFormTextarea from "@js/components/UI/Form/Textarea";
@@ -19,10 +17,9 @@ function WorkFilesetListItem({
   isEditing,
   workImageFilesetId,
 }) {
-  const iiifServerUrl = useContext(IIIFContext);
   const { id, coreMetadata } = fileSet;
-  const dispatch = useWorkDispatch();
-  const {isImage, isMedia, isPDF, isZip } = useFileSet();
+  const { hasRepresentativeImage, isImage, isMedia, isPDF, isZip } =
+    useFileSet();
   const workContextState = useWorkState();
 
   // Helper for media type file sets
@@ -46,25 +43,25 @@ function WorkFilesetListItem({
     }
   };
 
-  const placeholderImage = (fileSet) =>  {
+  const placeholderImage = (fileSet) => {
     if (isMedia(fileSet)) {
       return "/images/video-placeholder2.png";
-    } else if (isPDF(fileSet)) {  
+    } else if (isPDF(fileSet)) {
       return "/images/placeholder-pdf.png";
-    } else if (isZip(fileSet)) {  
+    } else if (isZip(fileSet)) {
       return "/images/placeholder-zip.png";
     } else {
       return "/images/placeholder.png";
     }
-  }
+  };
 
   const showWorkImageToggle = () => {
     if (fileSet.role.id === "A" && workContextState.workTypeId === "AUDIO") {
       return false;
     } else {
-      return isImage(fileSet);
+      return isImage(fileSet) || hasRepresentativeImage(fileSet);
     }
-  }
+  };
 
   return (
     <article className="box" data-testid="fileset-item">
@@ -120,9 +117,7 @@ function WorkFilesetListItem({
         <div className="column is-5 has-text-right is-clearfix">
           {!isEditing && (
             <>
-              {(
-                showWorkImageToggle()
-              ) && (
+              {showWorkImageToggle() && (
                 <AuthDisplayAuthorized>
                   <div className="field">
                     <input
@@ -147,9 +142,6 @@ function WorkFilesetListItem({
               {fileSet.role.id === "X" && (
                 <WorkFilesetActionButtonsAuxillary fileSet={fileSet} />
               )}
-              {fileSet.role.id === "S" && (
-                <WorkFilesetActionButtonsSupplemental fileSet={fileSet} />
-              )}
             </>
           )}
         </div>

app/assets/js/components/Work/Fileset/ListItem.test.js

@@ -1,31 +1,50 @@
-import React from "react";
 import { render, screen, waitFor } from "@testing-library/react";
-import WorkFilesetListItemImage from "./ListItem";
-import { mockFileSets } from "@js/mock-data/filesets";
 import {
   renderWithReactHookForm,
   withReactBeautifulDND,
 } from "@js/services/testing-helpers";
+
+import React from "react";
+import WorkFilesetList from "./ListItem";
+import { WorkProvider } from "@js/context/work-context";
+import { mockFileSets } from "@js/mock-data/filesets";
 import { mockUser } from "@js/components/Auth/auth.gql.mock";
 import useIsAuthorized from "@js/hooks/useIsAuthorized";
-import { WorkProvider } from "@js/context/work-context";
 
 jest.mock("@js/hooks/useIsAuthorized");
 useIsAuthorized.mockReturnValue({
   user: mockUser,
   isAuthorized: () => true,
 });
 
+// Mock child components
+jest.mock("@js/components/Work/Fileset/ActionButtons/Access", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return <div>Mocked Access</div>;
+    },
+  };
+});
+jest.mock("@js/components/Work/Fileset/ActionButtons/Auxillary", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return <div>Mocked Auxillary</div>;
+    },
+  };
+});
+
 describe("Fileset component", () => {
   describe("when not editing", () => {
     function setUpTests(workImageFilesetId) {
       return render(
         <WorkProvider>
-          <WorkFilesetListItemImage
+          <WorkFilesetList
             fileSet={mockFileSets[0]}
             workImageFilesetId={workImageFilesetId}
           />
-        </WorkProvider>
+        </WorkProvider>,
       );
     }
     it("renders the image preview, label and description", async () => {
@@ -54,6 +73,39 @@ describe("Fileset component", () => {
           expect(toggleEl).not.toBeChecked();
         });
       });
+
+      it("renders the Work image toggle if the fileset is a video and has a representative image", async () => {
+        render(
+          <WorkProvider>
+            <WorkFilesetList
+              fileSet={mockFileSets[3]}
+              workImageFilesetId={mockFileSets[3].id}
+            />
+          </WorkProvider>,
+        );
+
+        const toggleEl = await screen.findByTestId("work-image-selector");
+        expect(toggleEl).toBeInTheDocument();
+      });
+
+      it("does not render the image toggle if the fileset is a video and does not have a representative image", async () => {
+        const fileSet = {
+          ...mockFileSets[3],
+          representativeImageUrl: null,
+        };
+
+        render(
+          <WorkProvider>
+            <WorkFilesetList
+              fileSet={fileSet}
+              workImageFilesetId={mockFileSets[3].id}
+            />
+          </WorkProvider>,
+        );
+
+        const toggleEl = screen.queryByTestId("work-image-selector");
+        expect(toggleEl).not.toBeInTheDocument();
+      });
     });
 
     describe("Audio work type", () => {
@@ -70,22 +122,22 @@ describe("Fileset component", () => {
       it("doesn't render the Work image toggle", () => {
         render(
           <WorkProvider initialState={initialState}>
-            <WorkFilesetListItemImage
+            <WorkFilesetList
               fileSet={mockFileSets[0]}
               workImageFilesetId={undefined}
             />
-          </WorkProvider>
+          </WorkProvider>,
         );
         expect(
-          screen.queryByTestId("work-image-selector")
+          screen.queryByTestId("work-image-selector"),
         ).not.toBeInTheDocument();
       });
     });
   });
 
   describe("when editing", () => {
     beforeEach(() => {
-      const Wrapped = withReactBeautifulDND(WorkFilesetListItemImage, {
+      const Wrapped = withReactBeautifulDND(WorkFilesetList, {
         fileSet: mockFileSets[0],
         index: 0,
         isEditing: true,