From 3c42fc44e182ff2b76b4ca3e2bedf5347dacb8e0 Mon Sep 17 00:00:00 2001
From: Brendan Quinn <brendan-quinn@northwestern.edu>
Date: Thu, 27 Jun 2024 20:52:43 +0000
Subject: [PATCH] Convert FileSetModel modal to a Dialog component

---
 .../Work/Tabs/Preservation/FileSetModal.jsx   | 212 +++++++++---------
 1 file changed, 105 insertions(+), 107 deletions(-)

diff --git a/app/assets/js/components/Work/Tabs/Preservation/FileSetModal.jsx b/app/assets/js/components/Work/Tabs/Preservation/FileSetModal.jsx
index 7c2f138bd..b32049aba 100644
--- a/app/assets/js/components/Work/Tabs/Preservation/FileSetModal.jsx
+++ b/app/assets/js/components/Work/Tabs/Preservation/FileSetModal.jsx
@@ -1,4 +1,11 @@
-import { Button, Notification } from "@nulib/design-system";
+import * as Dialog from "@radix-ui/react-dialog";
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogTitle
+} from "@js/components/UI/Dialog/Dialog.styled";
+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";
@@ -14,15 +21,10 @@ import UIFormField from "@js/components/UI/Form/Field.jsx";
 import UIFormSelect from "@js/components/UI/Form/Select.jsx";
 import WorkTabsPreservationFileSetDropzone from "@js/components/Work/Tabs/Preservation/FileSetDropzone";
 import WorkTabsPreservationFileSetForm from "@js/components/Work/Tabs/Preservation/FileSetForm";
-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;
-`;
-
 function WorkTabsPreservationFileSetModal({
   closeModal,
   isVisible,
@@ -189,113 +191,109 @@ function WorkTabsPreservationFileSetModal({
   };
 
   return (
-    <div
-      className={classNames("modal", {
-        "is-active": isVisible,
-      })}
-      css={modalCss}
-    >
-      <div className="modal-background"></div>
-
-      {urlError ? (
-        <div className="modal-card">
-          <section className="modal-card-body">
-            <Notification isDanger>Error retrieving presigned url</Notification>
-          </section>
-        </div>
-      ) : (
-        <FormProvider {...methods}>
-          <form
-            onSubmit={methods.handleSubmit(handleSubmit)}
-            data-testid="fileset-form"
-          >
-            <div className="modal-card">
-              <header className="modal-card-head">
-                <p className="modal-card-title">Add Fileset to Work</p>
-                <button
-                  type="button"
-                  className="delete"
-                  aria-label="close"
-                  onClick={handleCancel}
-                ></button>
-              </header>
-              <section className="modal-card-body">
-                {uploadError && (
-                  <Notification isDanger>{uploadError}</Notification>
-                )}
-                {error && <Error error={error} />}
+    <Dialog.Root open={isVisible} onOpenChange={closeModal}>
+      <Dialog.Portal>
+        <DialogOverlay />
+        <DialogContent data-testid="add-file-set">
+          <DialogClose>
+            <Icon isSmall aria-label="Close">
+              <Icon.Close />
+            </Icon>
+          </DialogClose>
+          <DialogTitle css={{ textAlign: "left" }}>
+            Add Fileset to Work
+          </DialogTitle>
 
-                <UIFormField label="Fileset Role">
-                  <UIFormSelect
-                    isReactHookForm
-                    name="fileSetRole"
-                    label="Fileset Role"
-                    options={codeLists?.fileSetRoleData?.codeList}
-                    required={!Boolean(watchRole)}
-                    showHelper
-                    disabled={Boolean(s3UploadLocation)}
-                  />
-                </UIFormField>
+          {urlError ? (
+            <div>
+              <section>
+                <Notification isDanger>Error retrieving presigned url</Notification>
+              </section>
+            </div>
+          ) : (
+            <FormProvider {...methods}>
+              <form
+                onSubmit={methods.handleSubmit(handleSubmit)}
+                data-testid="fileset-form"
+              >
+                <div>
+                  <section className="modal-card-body">
+                    {uploadError && (
+                      <Notification isDanger>{uploadError}</Notification>
+                    )}
+                    {error && <Error error={error} />}
 
-                {watchRole && (
-                  <>
-                    <div class="box">
-                      <h3>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'}
+                    <UIFormField label="Fileset Role">
+                      <UIFormSelect
+                        isReactHookForm
+                        name="fileSetRole"
+                        label="Fileset Role"
+                        options={codeLists?.fileSetRoleData?.codeList}
+                        required={!Boolean(watchRole)}
+                        showHelper
+                        disabled={Boolean(s3UploadLocation)}
                       />
-                    </div>
+                    </UIFormField>
 
-                    <div class="box">
-                      <h3>Option 2: Choose from S3 Ingest Bucket</h3>
-                      <S3ObjectPicker
-                        onFileSelect={handleSelectS3Object}
-                        fileSetRole={watchRole}
-                        workTypeId={workTypeId}
-                        disabled={uploadMethod === 'dragdrop'}
-                      />
-                    </div>
-                  </>
-                )}
+                    {watchRole && (
+                      <>
+                        <div className="box">
+                          <h3>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>
 
-                {s3UploadLocation && (
-                  <WorkTabsPreservationFileSetForm
-                    s3UploadLocation={s3UploadLocation}
-                  />
-                )}
-              </section>
+                        <div className="box">
+                          <h3>Option 2: Choose from S3 Ingest Bucket</h3>
+                          <S3ObjectPicker
+                            onFileSelect={handleSelectS3Object}
+                            fileSetRole={watchRole}
+                            workTypeId={workTypeId}
+                            disabled={uploadMethod === 'dragdrop'}
+                          />
+                        </div>
+                      </>
+                    )}
 
-              <footer className="modal-card-foot is-justify-content-flex-end">
-                {s3UploadLocation && (
-                  <>
-                    <Button
-                      isText
-                      type="button"
-                      onClick={() => {
-                        handleCancel();
-                      }}
-                      data-testid="cancel-button"
-                    >
-                      Cancel
-                    </Button>
-                    <Button isPrimary type="submit" data-testid="submit-button">
-                      Ingest fileset
-                    </Button>
-                  </>
-                )}
-              </footer>
-            </div>
-          </form>
-        </FormProvider>
-      )}
-    </div>
+                    {s3UploadLocation && (
+                      <WorkTabsPreservationFileSetForm
+                        s3UploadLocation={s3UploadLocation}
+                      />
+                    )}
+                  </section>
+
+                  <footer className="modal-card-foot is-justify-content-flex-end">
+                    {s3UploadLocation && (
+                      <>
+                        <Button
+                          isText
+                          type="button"
+                          onClick={handleCancel}
+                          data-testid="cancel-button"
+                        >
+                          Cancel
+                        </Button>
+                        <Button isPrimary type="submit" data-testid="submit-button">
+                          Ingest fileset
+                        </Button>
+                      </>
+                    )}
+                  </footer>
+                </div>
+              </form>
+            </FormProvider>
+          )}
+        </DialogContent>
+      </Dialog.Portal>
+    </Dialog.Root>
   );
 }