Deploy v9.3.3 to production

app/assets/js/components/Work/Fileset/ActionButtons/Auxillary.jsx

@@ -3,23 +3,65 @@ import PropTypes from "prop-types";
 import { IIIFContext } from "@js/components/IIIF/IIIFProvider";
 import { IIIF_SIZES } from "@js/services/global-vars";
 import { ImageDownloader } from "@samvera/image-downloader";
+import useFileSet from "@js/hooks/useFileSet";
+import { Button } from "@nulib/design-system";
+import { IconDownload } from "@js/components/Icon";
+import { toastWrapper } from "@js/services/helpers";
+import { useWorkState } from "@js/context/work-context";
+import { GET_DCAPI_ENDPOINT } from "@js/components/UI/ui.gql";
+import { getApiResponse } from "@js/services/get-api-response";
+import { useQuery } from "@apollo/client";
 
 const WorkFilesetActionButtonsAuxiliary = ({ fileSet }) => {
   const iiifServerUrl = useContext(IIIFContext);
   const url = `${iiifServerUrl}${fileSet.id}${IIIF_SIZES.IIIF_FULL}`;
+  const { altFileFormat, isImage, isAltFormat } = useFileSet();
+  const { dcApiToken } = useWorkState();
+  const { data: dataDcApiEndpoint } = useQuery(GET_DCAPI_ENDPOINT);
+
+  const handleDownloadFile = async () => {
+    const dcApiFileSet = `${dataDcApiEndpoint?.dcapiEndpoint?.url}/file-sets/${fileSet.id}`;
+    const uri = `${dcApiFileSet}/download`;
+
+    try {
+      const response = await getApiResponse(uri, dcApiToken);
+      if (response?.status !== 200) throw Error(response);
+      window.location.href = response.url;
+    } catch (error) {
+      console.error(error);
+      toastWrapper("is-danger", `The download request failed.`);
+    }
+  };
 
   return (
+
     <div className="buttons is-flex is-justify-content-flex-end">
-      <a className="button" href={url} target="_blank">
-        View Aux File
-      </a>
-      <ImageDownloader
-        imageUrl={url}
-        imageTitle={fileSet.accessionNumber}
-        className="button"
-      >
-        Download JPG
-      </ImageDownloader>
+      {isImage(fileSet) && (
+        <div>
+          <a className="button" href={url} target="_blank">
+            View Aux File
+          </a>
+          <ImageDownloader
+            imageUrl={url}
+            imageTitle={fileSet.accessionNumber}
+            className="button"
+          >
+            Download JPG
+          </ImageDownloader>
+        </div>
+      )}
+
+      {isAltFormat(fileSet) && (
+        <div>
+          <Button
+            data-testid="download-file-button"
+            onClick={handleDownloadFile}>
+            <IconDownload />
+            <span>Download {altFileFormat(fileSet)}</span>
+          </Button>
+        </div>
+      )}
+
     </div>
   );
 };

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

@@ -22,7 +22,7 @@ function WorkFilesetListItem({
   const iiifServerUrl = useContext(IIIFContext);
   const { id, coreMetadata } = fileSet;
   const dispatch = useWorkDispatch();
-  const { isMedia } = useFileSet();
+  const {isImage, isMedia, isPDF, isZip } = useFileSet();
   const workContextState = useWorkState();
 
   // Helper for media type file sets
@@ -41,13 +41,31 @@ function WorkFilesetListItem({
     if (!imgState.errored) {
       setImgState({
         errored: true,
-        src: isMedia(fileSet)
-          ? "/images/video-placeholder2.png"
-          : "/images/placeholder.png",
+        src: placeholderImage(fileSet),
       });
     }
   };
 
+  const placeholderImage = (fileSet) =>  {
+    if (isMedia(fileSet)) {
+      return "/images/video-placeholder2.png";
+    } else if (isPDF(fileSet)) {  
+      return "/images/placeholder-pdf.png";
+    } 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 (
     <article className="box" data-testid="fileset-item">
       <div className="columns">
@@ -102,9 +120,8 @@ function WorkFilesetListItem({
         <div className="column is-5 has-text-right is-clearfix">
           {!isEditing && (
             <>
-              {!(
-                workContextState.workTypeId === "AUDIO" &&
-                fileSet.role.id === "A"
+              {(
+                showWorkImageToggle()
               ) && (
                 <AuthDisplayAuthorized>
                   <div className="field">

app/assets/js/hooks/useAcceptedMimeTypes.js

@@ -12,19 +12,25 @@ export default function useAcceptedMimeTypes() {
     }
 
     const mimeParts = mimeType.split("/");
+    const acceptedAltFormats = [
+      "application/pdf",
+      "application/zip",
+      "application/zip-compressed",
+    ];
     const isImage = mimeParts[0] === "image";
     const isAudio = mimeParts[0] === "audio";
     const isVideo = mimeParts[0] === "video";
+    const isAltFormat = acceptedAltFormats.includes(mimeType);
     let code = "";
     let message = "";
     let isValid = true;
 
     switch (fileSetRole) {
       case "X":
-        if (!isImage) {
+        if (!isImage && !isAltFormat) {
           isValid = false;
           code = "invalid-image";
-          message = "Auxiliary files can only be image mime types";
+          message = "Auxiliary files can only be image, pdf, or zip mime types";
         }
         break;
 

app/assets/js/hooks/useFileSet.js

@@ -23,6 +23,17 @@ export default function useFileSet() {
     return !fileSet || Object.keys(fileSet).length === 0;
   }
 
+  function isAltFormat(fileSet = {}) {
+    const mimeType = fileSet.coreMetadata?.mimeType?.toLowerCase();
+    if (!mimeType) return;
+    const acceptedTypes = [
+      "application/pdf",
+      "application/zip",
+      "application/zip-compressed",
+    ];
+    return acceptedTypes.includes(mimeType);
+  }
+
   function isImage(fileSet = {}) {
     const mimeType = fileSet.coreMetadata?.mimeType?.toLowerCase();
     if (!mimeType) return;
@@ -35,18 +46,44 @@ export default function useFileSet() {
     return mimeType.includes("video") || mimeType.includes("audio");
   }
 
+  function isPDF(fileSet = {}) {
+    const mimeType = fileSet.coreMetadata?.mimeType?.toLowerCase();
+    if (!mimeType) return;
+    return mimeType === "application/pdf";
+  }
+
   function isVideo(fileSet = {}) {
     const mimeType = fileSet.coreMetadata?.mimeType?.toLowerCase();
     if (!mimeType) return;
     return mimeType.includes("video");
   }
 
+  function isZip(fileSet = {}) {
+    const mimeType = fileSet.coreMetadata?.mimeType?.toLowerCase();
+    if (!mimeType) return;
+    return mimeType.includes("zip");
+  }
+
+  function altFileFormat(fileSet = {}) {
+    const mimeType = fileSet.coreMetadata?.mimeType?.toLowerCase();
+    if (!mimeType) return;
+    if (mimeType === "application/pdf") {
+      return "pdf";
+    } else {
+      return "zip";
+    }
+  }
+
   return {
+    altFileFormat,
     filterFileSets,
     getWebVttString,
+    isAltFormat,
     isEmpty,
     isImage,
     isMedia,
+    isPDF,
     isVideo,
+    isZip,
   };
 }