From 345356d8d4f0aa94957355a6a9115e2ebb299edd Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Tue, 30 Apr 2024 16:43:47 -0700
Subject: [PATCH] Make connections modal scrollable (#623)

---
 src/app/common/elements/modal.less            |  1 +
 src/app/common/elements/modal.tsx             |  2 +-
 .../common/modals/viewremoteconndetail.less   | 14 ++---
 .../common/modals/viewremoteconndetail.tsx    | 51 ++++++++-----------
 4 files changed, 31 insertions(+), 37 deletions(-)

diff --git a/src/app/common/elements/modal.less b/src/app/common/elements/modal.less
index 781eb006..b4b43e3d 100644
--- a/src/app/common/elements/modal.less
+++ b/src/app/common/elements/modal.less
@@ -52,6 +52,7 @@
             }
 
             button {
+                padding-right: 4px !important;
                 i {
                     font-size: 18px;
                 }
diff --git a/src/app/common/elements/modal.tsx b/src/app/common/elements/modal.tsx
index c834370d..50884483 100644
--- a/src/app/common/elements/modal.tsx
+++ b/src/app/common/elements/modal.tsx
@@ -24,7 +24,7 @@ const ModalHeader: React.FC<ModalHeaderProps> = ({ onClose, keybindings, title }
         </If>
         {<div className="wave-modal-title">{title}</div>}
         <If condition={onClose}>
-            <Button className="secondary ghost" onClick={onClose}>
+            <Button className="secondary ghost" onClick={() => onClose()} title="Close (ESC)">
                 <i className="fa-sharp fa-solid fa-xmark"></i>
             </Button>
         </If>
diff --git a/src/app/common/modals/viewremoteconndetail.less b/src/app/common/modals/viewremoteconndetail.less
index 23ccd10a..31ebd062 100644
--- a/src/app/common/modals/viewremoteconndetail.less
+++ b/src/app/common/modals/viewremoteconndetail.less
@@ -1,25 +1,24 @@
 .rconndetail-modal {
-    width: auto;
-    max-width: 80vw;
-    min-height: 565px;
-
     .wave-modal-content {
         display: flex;
         padding-bottom: 0px;
         flex-direction: column;
         align-items: center;
-        gap: 20px;
         flex-shrink: 0;
+        width: auto;
+        max-width: 80vw;
+        max-height: 90vh;
 
         .wave-modal-body {
             display: flex;
-            padding: 0px 20px;
+            padding: 20px;
             align-items: flex-start;
             width: 100%;
+            height: 100%;
             display: flex;
             flex-direction: column;
-            gap: 16px;
             align-self: stretch;
+            overflow-y: scroll;
 
             .name-header-actions-wrapper {
                 display: flex;
@@ -53,6 +52,7 @@
 
             .remote-detail {
                 width: 100%;
+                padding-top: 16px;
 
                 .settings-field {
                     display: flex;
diff --git a/src/app/common/modals/viewremoteconndetail.tsx b/src/app/common/modals/viewremoteconndetail.tsx
index b3f1a08b..9fdb3552 100644
--- a/src/app/common/modals/viewremoteconndetail.tsx
+++ b/src/app/common/modals/viewremoteconndetail.tsx
@@ -15,6 +15,7 @@ import * as appconst from "@/app/appconst";
 
 import "./viewremoteconndetail.less";
 import { ModalKeybindings } from "../elements/modal";
+import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 
 @mobxReact.observer
 class ViewRemoteConnDetailModal extends React.Component<{}, {}> {
@@ -299,15 +300,33 @@ class ViewRemoteConnDetailModal extends React.Component<{}, {}> {
 
         return (
             <Modal className="rconndetail-modal">
+                <ModalKeybindings
+                    onOk={() => {
+                        if (selectedRemoteStatus == "connecting") {
+                            return;
+                        }
+                        this.handleClose();
+                    }}
+                    onCancel={() => {
+                        if (selectedRemoteStatus == "connecting") {
+                            return;
+                        }
+                        this.handleClose();
+                    }}
+                ></ModalKeybindings>
                 <Modal.Header title="Connection" onClose={this.handleClose} />
-                <div className="wave-modal-body">
+                <OverlayScrollbarsComponent
+                    className="wave-modal-body"
+                    options={{ scrollbars: { autoHide: "leave" } }}
+                    defer={true}
+                >
                     <div className="name-header-actions-wrapper">
                         <div className="name text-primary name-wrapper">
                             {util.getRemoteName(remote)}&nbsp; {getImportTooltip(remote)}
                         </div>
                         <div className="header-actions">{this.renderHeaderBtns(remote)}</div>
                     </div>
-                    <div className="remote-detail" style={{ overflow: "hidden" }}>
+                    <div className="remote-detail">
                         <div className="settings-field">
                             <div className="settings-label">Conn Id</div>
                             <div className="settings-input">{remote.remoteid}</div>
@@ -381,33 +400,7 @@ class ViewRemoteConnDetailModal extends React.Component<{}, {}> {
                             ></div>
                         </div>
                     </div>
-                </div>
-                <div className="wave-modal-footer">
-                    <ModalKeybindings
-                        onOk={() => {
-                            if (selectedRemoteStatus == "connecting") {
-                                return;
-                            }
-                            this.handleClose();
-                        }}
-                        onCancel={() => {
-                            if (selectedRemoteStatus == "connecting") {
-                                return;
-                            }
-                            this.handleClose();
-                        }}
-                    ></ModalKeybindings>
-                    <Button
-                        className="secondary"
-                        disabled={selectedRemoteStatus == "connecting"}
-                        onClick={this.handleClose}
-                    >
-                        Cancel
-                    </Button>
-                    <Button disabled={selectedRemoteStatus == "connecting"} onClick={this.handleClose}>
-                        Done
-                    </Button>
-                </div>
+                </OverlayScrollbarsComponent>
             </Modal>
         );
     }