refactor: set max-height to 75vh on scrollable modals

Author: leafty

client/src/components/Logs.tsx

@@ -16,10 +16,11 @@
  * limitations under the License.
  */
 
+import cx from "classnames";
 import React, { createRef, ReactNode, useEffect, useState } from "react";
+import { ArrowRepeat, FileEarmarkArrowDown } from "react-bootstrap-icons";
 import {
   Button,
-  Modal,
   ModalBody,
   ModalFooter,
   ModalHeader,
@@ -42,9 +43,7 @@ import {
   generateZip,
 } from "../utils/helpers/HelperFunctions";
 import { Loader } from "./Loader";
-
-import cx from "classnames";
-import { ArrowRepeat, FileEarmarkArrowDown } from "react-bootstrap-icons";
+import ScrollableModal from "./modal/ScrollableModal";
 
 import styles from "./Logs.module.scss";
 
@@ -460,10 +459,9 @@ function EnvironmentLogsPresent({
   if (!logs?.show || logs?.show !== name || !logs) return null;
 
   return (
-    <Modal
+    <ScrollableModal
       isOpen={!!logs.show}
       className="modal-xl"
-      scrollable={true}
       toggle={() => {
         toggleLogs(name);
       }}
@@ -488,7 +486,7 @@ function EnvironmentLogsPresent({
       <ModalFooter>
         <SessionLogsButtons fetchLogs={fetchLogs} logs={logs} name={name} />
       </ModalFooter>
-    </Modal>
+    </ScrollableModal>
   );
 }
 

client/src/components/modal/ScrollableModal.module.scss

@@ -1,3 +1,7 @@
 .modal :global(.modal-content) {
   height: unset !important;
+
+  & :global(.modal-body) {
+    max-height: 75vh;
+  }
 }

client/src/features/ProjectPageV2/ProjectPageContent/DataConnectors/ProjectConnectDataConnectorsModal.tsx

@@ -32,29 +32,31 @@ import {
   Form,
   Input,
   Label,
-  Modal,
   ModalBody,
   ModalFooter,
 } from "reactstrap";
+
 import { RtkOrNotebooksError } from "../../../../components/errors/RtkErrorAlert";
+import { ExternalLink } from "../../../../components/ExternalLinks";
 import { Loader } from "../../../../components/Loader";
 import ModalHeader from "../../../../components/modal/ModalHeader";
+import ScrollableModal from "../../../../components/modal/ScrollableModal";
 import useAppDispatch from "../../../../utils/customHooks/useAppDispatch.hook";
 import useAppSelector from "../../../../utils/customHooks/useAppSelector.hook";
 import {
   dataConnectorsApi,
   usePostDataConnectorsByDataConnectorIdProjectLinksMutation,
   usePostDataConnectorsGlobalMutation,
 } from "../../../dataConnectorsV2/api/data-connectors.enhanced-api";
+import { DATA_CONNECTORS_DOI_DOCS_URL } from "../../../dataConnectorsV2/components/dataConnector.constants";
 import DataConnectorModal, {
   DataConnectorModalBodyAndFooter,
 } from "../../../dataConnectorsV2/components/DataConnectorModal/index";
 import dataConnectorFormSlice from "../../../dataConnectorsV2/state/dataConnectors.slice";
 import type { Project } from "../../../projectsV2/api/projectV2.api";
 import { projectV2Api } from "../../../projectsV2/api/projectV2.enhanced-api";
+
 import styles from "../../../dataConnectorsV2/components/DataConnectorModal/DataConnectorModal.module.scss";
-import { ExternalLink } from "../../../../components/ExternalLinks";
-import { DATA_CONNECTORS_DOI_DOCS_URL } from "../../../dataConnectorsV2/components/dataConnector.constants";
 
 interface ProjectConnectDataConnectorsModalProps
   extends Omit<
@@ -79,15 +81,14 @@ export default function ProjectConnectDataConnectorsModal({
     originalToggle();
   }, [dispatch, originalToggle]);
   return (
-    <Modal
+    <ScrollableModal
       backdrop="static"
       centered
       className={styles.modal}
       data-cy="project-data-connector-connect-modal"
       fullscreen="lg"
       id={"connect-project-data-connector"}
       isOpen={isOpen}
-      scrollable
       size="lg"
       unmountOnClose={false}
       toggle={toggle}
@@ -127,7 +128,7 @@ export default function ProjectConnectDataConnectorsModal({
           }}
         />
       )}
-    </Modal>
+    </ScrollableModal>
   );
 }
 

client/src/features/ProjectPageV2/ProjectPageContent/Documentation/Documentation.module.scss

@@ -18,8 +18,8 @@
 
 import cx from "classnames";
 import { useCallback, useEffect, useState } from "react";
-
 import { FileEarmarkText, Markdown, Pencil, XLg } from "react-bootstrap-icons";
+import { useForm } from "react-hook-form";
 import {
   Button,
   ButtonGroup,
@@ -30,23 +30,18 @@ import {
   ModalBody,
   ModalFooter,
 } from "reactstrap";
-import { useForm } from "react-hook-form";
 
 import { RtkOrNotebooksError } from "../../../../components/errors/RtkErrorAlert";
+import { ExternalLink } from "../../../../components/ExternalLinks";
 import { Loader } from "../../../../components/Loader";
-import ModalHeader from "../../../../components/modal/ModalHeader";
 import LazyRenkuMarkdown from "../../../../components/markdown/LazyRenkuMarkdown";
+import ModalHeader from "../../../../components/modal/ModalHeader";
 import ScrollableModal from "../../../../components/modal/ScrollableModal";
-
 import PermissionsGuard from "../../../permissionsV2/PermissionsGuard";
 import { Project } from "../../../projectsV2/api/projectV2.api";
 import { usePatchProjectsByProjectIdMutation } from "../../../projectsV2/api/projectV2.enhanced-api";
-
 import useProjectPermissions from "../../utils/useProjectPermissions.hook";
-
 import DocumentationInput from "./DocumentationInput";
-import { ExternalLink } from "../../../../components/ExternalLinks";
-import styles from "./Documentation.module.scss";
 
 // Taken from src/features/projectsV2/api/projectV2.openapi.json
 const DESCRIPTION_MAX_LENGTH = 5000;
@@ -219,10 +214,7 @@ function DocumentationModal({
       />
 
       <Form noValidate onSubmit={handleSubmit(onSubmit)}>
-        <ModalBody
-          data-cy="project-documentation-modal-body"
-          className={styles.modalBody}
-        >
+        <ModalBody data-cy="project-documentation-modal-body">
           <div className={cx("d-flex", "gap-4")}>
             <ButtonGroup size="sm">
               <Button

client/src/features/ProjectPageV2/ProjectPageContent/Documentation/Documentation.tsx

@@ -41,14 +41,14 @@ import {
   FormText,
   Input,
   Label,
-  Modal,
   ModalBody,
   ModalFooter,
   ModalHeader,
 } from "reactstrap";
 
 import { Loader } from "../../components/Loader";
 import { RtkErrorAlert } from "../../components/errors/RtkErrorAlert";
+import ScrollableModal from "../../components/modal/ScrollableModal";
 import { useAddUsersToResourcePoolMutation } from "../dataServices/computeResources.api";
 import { ResourcePool } from "../dataServices/dataServices.types";
 import { useGetKeycloakUsersQuery } from "./adminKeycloak.api";
@@ -183,13 +183,12 @@ function AddManyUsersToResourcePoolModal({
   }, [isOpen, reset, result]);
 
   return (
-    <Modal
+    <ScrollableModal
       className={styles.modal}
       backdrop="static"
       centered
       fullscreen="lg"
       isOpen={isOpen}
-      scrollable
       size="lg"
       toggle={toggle}
     >
@@ -302,7 +301,7 @@ function AddManyUsersToResourcePoolModal({
           </Button>
         )}
       </ModalFooter>
-    </Modal>
+    </ScrollableModal>
   );
 }
 

client/src/features/admin/AddManyUsersToResourcePoolButton.tsx

@@ -26,13 +26,14 @@ import {
   Input,
   InputGroup,
   Label,
-  Modal,
   ModalBody,
   ModalFooter,
   ModalHeader,
 } from "reactstrap";
+
 import { Loader } from "../../components/Loader";
 import { RtkErrorAlert } from "../../components/errors/RtkErrorAlert";
+import ScrollableModal from "../../components/modal/ScrollableModal";
 import { useUpdateResourceClassMutation } from "../dataServices/computeResources.api";
 import {
   NodeAffinity,
@@ -167,13 +168,12 @@ function UpdateResourceClassModal({
   }, [reset, resourceClass]);
 
   return (
-    <Modal
+    <ScrollableModal
       backdrop="static"
       centered
       className={styles.modal}
       fullscreen="lg"
       isOpen={isOpen}
-      scrollable
       size="lg"
       toggle={toggle}
     >
@@ -463,7 +463,7 @@ function UpdateResourceClassModal({
           Update resource class
         </Button>
       </ModalFooter>
-    </Modal>
+    </ScrollableModal>
   );
 }
 

client/src/features/admin/UpdateResourceClassButton.tsx

@@ -20,33 +20,30 @@ import { skipToken } from "@reduxjs/toolkit/query";
 import cx from "classnames";
 import { useCallback, useEffect } from "react";
 import { Database } from "react-bootstrap-icons";
-import { Modal, ModalBody, ModalFooter, ModalHeader } from "reactstrap";
+import { ModalBody, ModalFooter, ModalHeader } from "reactstrap";
 
 import { RtkOrNotebooksError } from "../../../../components/errors/RtkErrorAlert";
 import { Loader } from "../../../../components/Loader";
+import ScrollableModal from "../../../../components/modal/ScrollableModal";
 import useAppDispatch from "../../../../utils/customHooks/useAppDispatch.hook";
-
+import PermissionsGuard from "../../../permissionsV2/PermissionsGuard";
 import { useGetStorageSchemaQuery } from "../../../project/components/cloudStorage/api/projectCloudStorage.api";
 import {
   CLOUD_STORAGE_TOTAL_STEPS,
   EMPTY_CLOUD_STORAGE_STATE,
 } from "../../../project/components/cloudStorage/projectCloudStorage.constants";
 import { AddCloudStorageState } from "../../../project/components/cloudStorage/projectCloudStorage.types";
-
-import PermissionsGuard from "../../../permissionsV2/PermissionsGuard";
 import type { Project } from "../../../projectsV2/api/projectV2.api";
-
-import { useGetDataConnectorsByDataConnectorIdSecretsQuery } from "../../api/data-connectors.enhanced-api";
 import type { DataConnectorRead } from "../../api/data-connectors.api";
+import { useGetDataConnectorsByDataConnectorIdSecretsQuery } from "../../api/data-connectors.enhanced-api";
 import dataConnectorFormSlice from "../../state/dataConnectors.slice";
 import useDataConnectorPermissions from "../../utils/useDataConnectorPermissions.hook";
-
 import { dataConnectorToFlattened } from "../dataConnector.utils";
-
-import styles from "./DataConnectorModal.module.scss";
 import DataConnectorModalBody from "./DataConnectorModalBody";
 import DataConnectorModalFooter from "./DataConnectorModalFooter";
 
+import styles from "./DataConnectorModal.module.scss";
+
 export function DataConnectorModalBodyAndFooter({
   dataConnector = null,
   isOpen,
@@ -164,15 +161,14 @@ export default function DataConnectorModal({
   }, [dispatch, originalToggle]);
 
   return (
-    <Modal
+    <ScrollableModal
       backdrop="static"
       centered
       className={styles.modal}
       data-cy="data-connector-edit-modal"
       fullscreen="lg"
       id={dataConnector?.id ?? "new-data-connector"}
       isOpen={isOpen}
-      scrollable
       size="lg"
       unmountOnClose={false}
       toggle={toggle}
@@ -210,7 +206,7 @@ export default function DataConnectorModal({
       ) : (
         <DataConnectorModalBodyAndFooterUnauthorized />
       )}
-    </Modal>
+    </ScrollableModal>
   );
 }
 

client/src/features/dataConnectorsV2/components/DataConnectorModal/index.tsx

@@ -21,27 +21,21 @@ import { useCallback, useEffect } from "react";
 import { CheckLg, People, XLg } from "react-bootstrap-icons";
 import { useForm } from "react-hook-form";
 import { generatePath, useNavigate } from "react-router";
-import {
-  Button,
-  Form,
-  FormGroup,
-  Modal,
-  ModalBody,
-  ModalFooter,
-} from "reactstrap";
+import { Button, Form, FormGroup, ModalBody, ModalFooter } from "reactstrap";
 
 import { RtkOrNotebooksError } from "../../../components/errors/RtkErrorAlert";
 import { Loader } from "../../../components/Loader";
-import ModalHeader from "../../../components/modal/ModalHeader";
 import LoginAlert from "../../../components/loginAlert/LoginAlert";
+import ModalHeader from "../../../components/modal/ModalHeader";
+import ScrollableModal from "../../../components/modal/ScrollableModal";
 import { ABSOLUTE_ROUTES } from "../../../routing/routes.constants";
 import useLocationHash from "../../../utils/customHooks/useLocationHash.hook";
 import { slugFromTitle } from "../../../utils/helpers/HelperFunctions";
 import type { GroupPostRequest } from "../../projectsV2/api/namespace.api";
 import { usePostGroupsMutation } from "../../projectsV2/api/projectV2.enhanced-api";
 import DescriptionFormField from "../../projectsV2/fields/DescriptionFormField";
 import NameFormField from "../../projectsV2/fields/NameFormField";
-import SlugPreviewFormField from "../../projectsV2/fields/SlugPreviewFormField.tsx";
+import SlugPreviewFormField from "../../projectsV2/fields/SlugPreviewFormField";
 import { useGetUserQuery } from "../../usersV2/api/users.api";
 import { GROUP_CREATION_HASH } from "./createGroup.constants";
 
@@ -59,13 +53,12 @@ export default function GroupNew() {
 
   return (
     <>
-      <Modal
+      <ScrollableModal
         backdrop="static"
         centered
         data-cy="new-group-modal"
         fullscreen="lg"
         isOpen={showGroupCreationModal}
-        scrollable
         size="lg"
         unmountOnClose={true}
         toggle={toggleModal}
@@ -102,7 +95,7 @@ export default function GroupNew() {
             </ModalBody>
           )}
         </div>
-      </Modal>
+      </ScrollableModal>
     </>
   );
 }