Adds GraphQL query support for picking s3 objects in the ingest bucke…

…t. Backend implemented with a new S3 backend utility module. Defines a S3ObjectPicker component, now used by the file set modal and fil set replace modal.
nulib · Jun 25, 2024 · 5d5748b · 5d5748b
1 parent b1b4780
commit 5d5748b
Show file tree

Hide file tree

Showing 15 changed files with 724 additions and 158 deletions.
diff --git a/app/assets/js/components/Work/Tabs/Preservation/ActionsCol.jsx b/app/assets/js/components/Work/Tabs/Preservation/ActionsCol.jsx
@@ -176,7 +176,10 @@ const PreservationActionsCol = ({
  <AuthDisplayAuthorized>
  <a
  className={actionItemClasses}
- onClick={() => handleReplaceFilesetClick(fileset)}
+ onClick={() => {
+ handleReplaceFilesetClick(fileset)
+ setIsActionsOpen(false);
+ }}
  >
  <IconReplace />
  <span style={{ marginLeft: "0.5rem" }}>Replace fileset</span>
@@ -202,11 +205,10 @@ const PreservationActionsCol = ({
  </DialogClose>
  <DialogTitle>
  Delete
- {`Fileset: ${
- deleteFilesetModal.fileset.coreMetadata
+ {`Fileset: ${deleteFilesetModal.fileset.coreMetadata
  ? deleteFilesetModal.fileset.coreMetadata.label
  : ""
- }`}
+  }`}
  </DialogTitle>
  {work && (
  <div

diff --git a/app/assets/js/components/Work/Tabs/Preservation/FileSetModal.jsx b/app/assets/js/components/Work/Tabs/Preservation/FileSetModal.jsx
@@ -4,7 +4,7 @@ import { GET_WORK, INGEST_FILE_SET } from "@js/components/Work/work.gql.js";
 import React, { useState } from "react";
 /** @jsx jsx */
 import { css, jsx } from "@emotion/react";
-import { s3Location, toastWrapper } from "@js/services/helpers";
+import { getFileNameFromS3Uri, s3Location, toastWrapper } from "@js/services/helpers";
 import { useLazyQuery, useMutation } from "@apollo/client";
 
 import Error from "@js/components/UI/Error";
@@ -17,11 +17,25 @@ import WorkTabsPreservationFileSetForm from "@js/components/Work/Tabs/Preservati
 import classNames from "classnames";
 import useAcceptedMimeTypes from "@js/hooks/useAcceptedMimeTypes";
 import { useCodeLists } from "@js/context/code-list-context";
+import S3ObjectPicker from "@js/components/Work/Tabs/Preservation/S3ObjectPicker"
 
 const modalCss = css`
  z-index: 100;
 `;
 
+const sectionHeaderCss = css`
+ font-size: 1.2rem;
+ font-weight: bold;
+ margin-bottom: 1rem;
+`;
+
+const sectionCss = css`
+ margin-bottom: 2rem;
+ padding: 1rem;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+`;
+
 function WorkTabsPreservationFileSetModal({
  closeModal,
  isVisible,
@@ -34,6 +48,7 @@ function WorkTabsPreservationFileSetModal({
  const [uploadError, setUploadError] = useState();
  const [stateXhr, setStateXhr] = useState(null);
  const [acceptedFileTypes, setAcceptedFileTypes] = React.useState("");
+ const [uploadMethod, setUploadMethod] = useState(null);
 
  const codeLists = useCodeLists();
 
@@ -48,10 +63,17 @@ function WorkTabsPreservationFileSetModal({
  shouldUnregister: false,
  });
 
- // Watch form select element fileSetRole for changes, to determine what types
- // of files are allowed to upload
  const watchRole = methods.watch("fileSetRole");
 
+ const handleSelectS3Object = (s3Object) => {
+ setCurrentFile({
+ location: s3Object.key,
+ name: getFileNameFromS3Uri(s3Object.key),
+ });
+ setS3UploadLocation(s3Object.key);
+ setUploadMethod('s3');
+ };
+
  React.useEffect(() => {
  if (!watchRole) return;
  const mimeTypes = useAcceptedMimeTypes({
@@ -88,8 +110,6 @@ function WorkTabsPreservationFileSetModal({
  onError(error) {
  console.error(`error:`, error);
  resetForm();
- // bug with this error not clearing/resetting
- // https://github.com/apollographql/apollo-feature-requests/issues/170
  },
  refetchQueries: [
  {
@@ -102,7 +122,7 @@ function WorkTabsPreservationFileSetModal({
  );
 
  const handleSubmit = (data) => {
- ingestFileSet({
+ const mutationInput = {
  variables: {
  accession_number: data.accessionNumber,
  workId,
@@ -113,8 +133,9 @@ function WorkTabsPreservationFileSetModal({
  original_filename: currentFile.name,
  location: s3UploadLocation,
  },
- },
- });
+ }
+ }
+ ingestFileSet(mutationInput);
  };
 
  const handleCancel = () => {
@@ -129,10 +150,12 @@ function WorkTabsPreservationFileSetModal({
  setS3UploadLocation(null);
  setUploadProgress(0);
  setUploadError(null);
+ setUploadMethod(null);
  };
 
  const handleSetFile = (file) => {
  setCurrentFile(file);
+ setUploadMethod('dragdrop');
  if (file) {
  getPresignedUrl({
  variables: {
@@ -228,17 +251,31 @@ function WorkTabsPreservationFileSetModal({
  </UIFormField>
 
  {watchRole && (
- <div className="block mt-5">
- <WorkTabsPreservationFileSetDropzone
- currentFile={currentFile}
- acceptedFileTypes={acceptedFileTypes}
- fileSetRole={watchRole}
- handleRemoveFile={resetForm}
- handleSetFile={handleSetFile}
- uploadProgress={uploadProgress}
- workTypeId={workTypeId}
- />
- </div>
+ <>
+ <div css={sectionCss}>
+ <h3 css={sectionHeaderCss}>Option 1: Drag and Drop File</h3>
+ <WorkTabsPreservationFileSetDropzone
+ currentFile={currentFile}
+ acceptedFileTypes={acceptedFileTypes}
+ fileSetRole={watchRole}
+ handleRemoveFile={resetForm}
+ handleSetFile={handleSetFile}
+ uploadProgress={uploadProgress}
+ workTypeId={workTypeId}
+ disabled={uploadMethod === 's3'}
+ />
+ </div>
+
+ <div css={sectionCss}>
+ <h3 css={sectionHeaderCss}>Option 2: Choose from S3 Ingest Bucket</h3>
+ <S3ObjectPicker
+ onFileSelect={handleSelectS3Object}
+ fileSetRole={watchRole}
+ workTypeId={workTypeId}
+ disabled={uploadMethod === 'dragdrop'}
+ />
+ </div>
+ </>
  )}
 
  {s3UploadLocation && (
@@ -282,4 +319,4 @@ WorkTabsPreservationFileSetModal.propTypes = {
  workTypeId: PropTypes.oneOf(["IMAGE", "AUDIO", "VIDEO"]),
 };
 
-export default WorkTabsPreservationFileSetModal;
+export default WorkTabsPreservationFileSetModal;