Add validation to file set form field, add DialogFooter UI component

nulib · Jul 3, 2024 · 0e0a011 · 0e0a011
1 parent d0a1328
commit 0e0a011
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 10 deletions.
diff --git a/app/assets/js/components/UI/Dialog/Dialog.styled.jsx b/app/assets/js/components/UI/Dialog/Dialog.styled.jsx
@@ -43,10 +43,20 @@ const DialogTitle = styled(Dialog.Title, {
  fontWeight: "700",
 });
 
+const DialogFooter = styled(Dialog.Footer, {
+ display: "flex",
+ justifyContent: "flex-end",
+ padding: "1rem",
+ borderTop: "1px solid #e5e7eb",
+ marginTop: "auto", // Pushes the footer to the bottom of the dialog
+});
+
+
 export {
  DialogClose,
  DialogContent,
  DialogOverlay,
  DialogTitle,
  DialogTrigger,
+ DialogFooter
 };
diff --git a/app/assets/js/components/Work/Tabs/Preservation/FileSetModal.jsx b/app/assets/js/components/Work/Tabs/Preservation/FileSetModal.jsx
@@ -2,6 +2,7 @@ import * as Dialog from "@radix-ui/react-dialog";
 import {
  DialogClose,
  DialogContent,
+ DialogFooter,
  DialogOverlay,
  DialogTitle
 } from "@js/components/UI/Dialog/Dialog.styled";
@@ -224,7 +225,7 @@ function WorkTabsPreservationFileSetModal({
  data-testid="fileset-form"
  >
  <div>
- <section className="modal-card-body">
+ <section>
  {uploadError && (
  <Notification isDanger>{uploadError}</Notification>
  )}
@@ -277,7 +278,7 @@ function WorkTabsPreservationFileSetModal({
  )}
  </section>
 
- <footer className="modal-card-foot is-justify-content-flex-end">
+ <DialogFooter>
  {s3UploadLocation && (
  <>
  <Button
@@ -288,12 +289,17 @@ function WorkTabsPreservationFileSetModal({
  >
  Cancel
  </Button>
- <Button isPrimary type="submit" data-testid="submit-button">
+ <Button
+ disabled={!s3UploadLocation}
+ isPrimary
+ type="submit"
+ data-testid="submit-button"
+ >
  Ingest fileset
  </Button>
  </>
  )}
- </footer>
+ </DialogFooter>
  </div>
  </form>
  </FormProvider>

diff --git a/app/assets/js/components/Work/Tabs/Preservation/ReplaceFileSet.jsx b/app/assets/js/components/Work/Tabs/Preservation/ReplaceFileSet.jsx
@@ -2,6 +2,7 @@ import * as Dialog from "@radix-ui/react-dialog";
 import {
  DialogClose,
  DialogContent,
+ DialogFooter,
  DialogOverlay,
  DialogTitle
 } from "@js/components/UI/Dialog/Dialog.styled";
@@ -269,25 +270,28 @@ function WorkTabsPreservationReplaceFileSet({
  </UIFormField>
  </section>
 
- <footer className="modal-card-foot is-justify-content-flex-end">
+ <DialogFooter>
  {s3UploadLocation && (
  <>
  <Button
  isText
  type="button"
- onClick={() => {
- handleCancel();
- }}
+ onClick={handleCancel}
  data-testid="cancel-button"
  >
  Cancel
  </Button>
- <Button isPrimary type="submit" data-testid="submit-button">
+ <Button
+ isPrimary
+ disabled={!s3UploadLocation}
+ type="submit"
+ data-testid="submit-button"
+ >
  Upload File
  </Button>
  </>
  )}
- </footer>
+ </DialogFooter>
  </div>
  </form>
  </FormProvider>