Update file set modal form reset functionality, fix small issue with …

…S3ObjectPicker component
nulib · Jun 27, 2024 · d0a1328 · d0a1328
1 parent 3c42fc4
commit d0a1328
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 24 deletions.
diff --git a/app/assets/js/components/Work/Tabs/Preservation/FileSetModal.jsx b/app/assets/js/components/Work/Tabs/Preservation/FileSetModal.jsx
@@ -8,7 +8,7 @@ import {
 import { Button, Icon, Notification } from "@nulib/design-system";
 import { FormProvider, useForm } from "react-hook-form";
 import { GET_WORK, INGEST_FILE_SET } from "@js/components/Work/work.gql.js";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 /** @jsx jsx */
 import { css, jsx } from "@emotion/react";
 import { getFileNameFromS3Uri, s3Location, toastWrapper } from "@js/services/helpers";
@@ -36,7 +36,7 @@ function WorkTabsPreservationFileSetModal({
  const [s3UploadLocation, setS3UploadLocation] = useState();
  const [uploadError, setUploadError] = useState();
  const [stateXhr, setStateXhr] = useState(null);
- const [acceptedFileTypes, setAcceptedFileTypes] = React.useState("");
+ const [acceptedFileTypes, setAcceptedFileTypes] = useState("");
  const [uploadMethod, setUploadMethod] = useState(null);
 
  const codeLists = useCodeLists();
@@ -45,6 +45,7 @@ function WorkTabsPreservationFileSetModal({
  accessionNumber: "",
  label: "",
  description: "",
+ fileSetRole: "",
  };
 
  const methods = useForm({
@@ -63,14 +64,14 @@ function WorkTabsPreservationFileSetModal({
  setUploadMethod('s3');
  };
 
- React.useEffect(() => {
+ useEffect(() => {
  if (!watchRole) return;
  const mimeTypes = useAcceptedMimeTypes({
  fileSetRole: watchRole,
  workTypeId,
  });
  setAcceptedFileTypes(mimeTypes);
- }, [watchRole]);
+ }, [watchRole, workTypeId]);
 
  const [
  getPresignedUrl,
@@ -127,19 +128,25 @@ function WorkTabsPreservationFileSetModal({
  ingestFileSet(mutationInput);
  };
 
- const handleCancel = () => {
- if (stateXhr != null) stateXhr.abort();
- resetForm();
- closeModal();
- };
-
  const resetForm = () => {
- methods.reset();
+ methods.reset(defaultValues);
  setCurrentFile(null);
  setS3UploadLocation(null);
  setUploadProgress(0);
  setUploadError(null);
  setUploadMethod(null);
+ setAcceptedFileTypes("");
+ };
+
+ const handleCancel = () => {
+ if (stateXhr != null) stateXhr.abort();
+ resetForm();
+ closeModal();
+ };
+
+ const handleCloseModal = () => {
+ resetForm();
+ closeModal();
  };
 
  const handleSetFile = (file) => {
@@ -191,7 +198,7 @@ function WorkTabsPreservationFileSetModal({
  };
 
  return (
- <Dialog.Root open={isVisible} onOpenChange={closeModal}>
+ <Dialog.Root open={isVisible} onOpenChange={handleCloseModal}>
  <Dialog.Portal>
  <DialogOverlay />
  <DialogContent data-testid="add-file-set">

diff --git a/app/assets/js/components/Work/Tabs/Preservation/ReplaceFileSet.jsx b/app/assets/js/components/Work/Tabs/Preservation/ReplaceFileSet.jsx
@@ -102,18 +102,27 @@ function WorkTabsPreservationReplaceFileSet({
  });
  };
 
- const handleCancel = () => {
- if (stateXhr != null) stateXhr.abort();
- resetForm();
- closeModal();
- };
-
  const resetForm = () => {
  setCurrentFile(null);
  setS3UploadLocation(null);
  setUploadProgress(0);
  setUploadError(null);
  setUploadMethod(null);
+ methods.reset({
+ label: fileset?.coreMetadata?.label || "",
+ description: fileset?.coreMetadata?.description || "",
+ });
+ };
+
+ const handleCancel = () => {
+ if (stateXhr != null) stateXhr.abort();
+ resetForm();
+ closeModal();
+ };
+
+ const handleCloseModal = () => {
+ resetForm();
+ closeModal();
  };
 
  const handleSelectS3Object = (s3Object) => {
@@ -174,7 +183,7 @@ function WorkTabsPreservationReplaceFileSet({
  };
 
  return (
- <Dialog.Root open={isVisible} onOpenChange={closeModal}>
+ <Dialog.Root open={isVisible} onOpenChange={handleCloseModal}>
  <Dialog.Portal>
  <DialogOverlay />
  <DialogContent data-testid="replace-file-sets">
@@ -213,7 +222,7 @@ function WorkTabsPreservationReplaceFileSet({
  )}
  {error && <Error error={error} />}
 
- <div class="box">
+ <div className="box">
  <h3>Option 1: Drag and Drop File</h3>
  <WorkTabsPreservationFileSetDropzone
  currentFile={currentFile}
@@ -226,7 +235,7 @@ function WorkTabsPreservationReplaceFileSet({
  />
  </div>
 
- <div class="box">
+ <div className="box">
  <h3>Option 2: Choose from S3 Ingest Bucket</h3>
  <S3ObjectPicker
  onFileSelect={handleSelectS3Object}

diff --git a/app/assets/js/components/Work/Tabs/Preservation/S3ObjectPicker.jsx b/app/assets/js/components/Work/Tabs/Preservation/S3ObjectPicker.jsx
@@ -22,19 +22,20 @@ const fileRowCss = css`
  cursor: pointer;
 `;
 
-// a nice gentle blue
 const selectedRowCss = css`
  background-color: #f0f8ff !important;
 `;
 
 const colHeaders = ["File Key", "Size", "Mime Type"];
 
-const { isFileValid } = useAcceptedMimeTypes();
-
 const S3ObjectPicker = ({ onFileSelect, fileSetRole, workTypeId, defaultPrefix = "" }) => {
  const [prefix, setPrefix] = useState(defaultPrefix);
  const [selectedFile, setSelectedFile] = useState(null);
  const [error, _setError] = useState(null);
+ const [uploadProgress, setUploadProgress] = useState(0);
+ const [isUploading, setIsUploading] = useState(false);
+
+ const { isFileValid } = useAcceptedMimeTypes();
 
  const { loading: queryLoading, error: queryError, data, refetch } = useQuery(LIST_INGEST_BUCKET_OBJECTS, {
  variables: { prefix }
@@ -59,13 +60,41 @@ const S3ObjectPicker = ({ onFileSelect, fileSetRole, workTypeId, defaultPrefix =
  const handleFileClick = (fileSet) => {
  setSelectedFile(fileSet.key);
  onFileSelect(fileSet);
+ // Reset upload progress and isUploading state when selecting an S3 object
+ setUploadProgress(0);
+ setIsUploading(false);
+ };
+
+ const handleDragAndDrop = (file) => {
+ // Simulating file upload process
+ setIsUploading(true);
+ setUploadProgress(0);
+ const interval = setInterval(() => {
+ setUploadProgress((prevProgress) => {
+ if (prevProgress >= 100) {
+ clearInterval(interval);
+ setIsUploading(false);
+ return 100;
+ }
+ return prevProgress + 10;
+ });
+ }, 500);
  };
 
  if (queryLoading) return <FaSpinner className="spinner" />;
  if (queryError) return <Error error={queryError} />;
 
  return (
  <div className="file-picker">
+ <div className="drag-drop-area" onDrop={handleDragAndDrop}>
+ {/* Drag and drop area */}
+ <p>Drag 'n' drop a file here, or click to select file</p>
+ {isUploading && (
+ <div className="progress-bar">
+ <div className="progress" style={{ width: `${uploadProgress}%` }}></div>
+ </div>
+ )}
+ </div>
  <UIFormInput
  placeholder="Enter prefix"
  name="prefixSearch"