From 162d42ebf9cda6546c648fe31311ee68ba5b74f7 Mon Sep 17 00:00:00 2001
From: Chandrasekhar Ramakrishnan <ciyer@users.noreply.github.com>
Date: Tue, 14 Jan 2025 12:10:01 +0100
Subject: [PATCH] clean up modal

---
 .../Documentation/Documentation.module.scss   |  3 ++
 .../Documentation/Documentation.tsx           | 44 +++++++++++--------
 2 files changed, 28 insertions(+), 19 deletions(-)
 create mode 100644 client/src/features/ProjectPageV2/ProjectPageContent/Documentation/Documentation.module.scss

diff --git a/client/src/features/ProjectPageV2/ProjectPageContent/Documentation/Documentation.module.scss b/client/src/features/ProjectPageV2/ProjectPageContent/Documentation/Documentation.module.scss
new file mode 100644
index 000000000..10b337f3b
--- /dev/null
+++ b/client/src/features/ProjectPageV2/ProjectPageContent/Documentation/Documentation.module.scss
@@ -0,0 +1,3 @@
+.modalBody {
+  max-height: 75vh;
+}
diff --git a/client/src/features/ProjectPageV2/ProjectPageContent/Documentation/Documentation.tsx b/client/src/features/ProjectPageV2/ProjectPageContent/Documentation/Documentation.tsx
index aaa1a6a1d..62ee4d136 100644
--- a/client/src/features/ProjectPageV2/ProjectPageContent/Documentation/Documentation.tsx
+++ b/client/src/features/ProjectPageV2/ProjectPageContent/Documentation/Documentation.tsx
@@ -19,14 +19,13 @@
 import cx from "classnames";
 import { useCallback, useEffect, useState } from "react";
 
-import { FileEarmarkText, Pencil } from "react-bootstrap-icons";
+import { FileEarmarkText, Pencil, XLg } from "react-bootstrap-icons";
 import {
   Button,
   Card,
   CardBody,
   CardHeader,
   Form,
-  Modal,
   ModalBody,
   ModalHeader,
   ModalFooter,
@@ -37,8 +36,9 @@ import { RtkOrNotebooksError } from "../../../../components/errors/RtkErrorAlert
 import TextAreaInput from "../../../../components/form-field/TextAreaInput.tsx";
 import { Loader } from "../../../../components/Loader";
 import LazyRenkuMarkdown from "../../../../components/markdown/LazyRenkuMarkdown";
+import ScrollableModal from "../../../../components/modal/ScrollableModal";
 
-import styles from "../../../dataConnectorsV2/components/DataConnectorModal/DataConnectorModal.module.scss";
+import styles from "./Documentation.module.scss";
 import PermissionsGuard from "../../../permissionsV2/PermissionsGuard";
 import { Project } from "../../../projectsV2/api/projectV2.api";
 import { usePatchProjectsByProjectIdMutation } from "../../../projectsV2/api/projectV2.enhanced-api";
@@ -117,12 +117,12 @@ interface DocumentationModalProps extends DocumentationProps {
 function DocumentationModal({
   isOpen,
   project,
-  toggle: originalToggle,
+  toggle,
 }: DocumentationModalProps) {
   const [updateProject, result] = usePatchProjectsByProjectIdMutation();
   const { isSuccess, isLoading, error } = result;
 
-  const { control, handleSubmit, getValues, register } =
+  const { control, handleSubmit, getValues, register, reset } =
     useForm<DocumentationForm>({
       defaultValues: {
         documentation: project.documentation || "",
@@ -139,24 +139,27 @@ function DocumentationModal({
     [project.etag, project.id, updateProject]
   );
 
-  const toggle = () => {
-    result.reset();
-    originalToggle();
-  };
+  useEffect(() => {
+    if (!isOpen) {
+      reset();
+      result.reset();
+    }
+  }, [isOpen, reset, result]);
+
+  useEffect(() => {
+    if (result.isSuccess) {
+      toggle();
+    }
+  }, [result.isSuccess, toggle]);
 
   const documentationField = register("documentation");
   return (
-    <Modal
+    <ScrollableModal
       backdrop="static"
       centered
-      className={styles.modal}
       data-cy="project-documentation-modal"
-      fullscreen="lg"
-      id={"project-documentation-modal"}
       isOpen={isOpen}
-      scrollable
       size="lg"
-      unmountOnClose={false}
       toggle={toggle}
     >
       <ModalHeader toggle={toggle} data-cy="project-documentation-modal-header">
@@ -166,7 +169,10 @@ function DocumentationModal({
         </div>
       </ModalHeader>
       <Form noValidate onSubmit={handleSubmit(onSubmit)}>
-        <ModalBody data-cy="project-documentation-modal-body">
+        <ModalBody
+          data-cy="project-documentation-modal-body"
+          className={styles.modalBody}
+        >
           <div className="mb-3">
             <TextAreaInput<DocumentationForm>
               control={control}
@@ -185,13 +191,13 @@ function DocumentationModal({
           data-cy="project-documentation-modal-footer"
         >
           <Button
-            color="outline-danger"
+            color="outline-primary"
             className="me-2"
             onClick={() => {
               toggle();
             }}
           >
-            Discard
+            <XLg className={cx("bi", "me-1")} /> Close
           </Button>
           <Button color="primary" disabled={isLoading} type="submit">
             {isLoading ? (
@@ -203,6 +209,6 @@ function DocumentationModal({
           </Button>
         </ModalFooter>
       </Form>
-    </Modal>
+    </ScrollableModal>
   );
 }