Merge pull request #3946 from nulib/deploy/staging

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,