From 8df02b7352e169616c3623ceac014341d30a4683 Mon Sep 17 00:00:00 2001
From: Damian Stasik <visualfanatic@users.noreply.github.com>
Date: Tue, 26 Oct 2021 22:36:14 +0200
Subject: [PATCH 1/2] feat: new option to make modal resizable

---
 src/components/Modal/Modal.react.js           | 52 ++++++++++++++++++-
 src/components/Modal/Modal.scss               | 14 +++++
 .../Data/Browser/AddColumnDialog.react.js     |  1 +
 .../Data/Config/ConfigDialog.react.js         |  1 +
 4 files changed, 67 insertions(+), 1 deletion(-)

diff --git a/src/components/Modal/Modal.react.js b/src/components/Modal/Modal.react.js
index 5bea30db9d..a6c63e8a3c 100644
--- a/src/components/Modal/Modal.react.js
+++ b/src/components/Modal/Modal.react.js
@@ -38,7 +38,10 @@ let Modal = (({
   progress = false,
   customFooter,
   textModal = false,
+  resizable = false,
   width,
+  minWidth = 540,
+  maxWidth = 860,
   continueText,
   onContinue,
   showContinue,
@@ -53,6 +56,10 @@ let Modal = (({
     });
   }
 
+  const modalRef = React.useRef(null);
+  const [isResizing, setResizing] = React.useState(false);
+  const [currentWidth, setCurrentWidth] = React.useState(width);
+
   let footer = customFooter || (
     <div style={{textAlign: buttonsInCenter ? 'center' : 'right'}} className={styles.footer}>
       {showCancel ? <Button
@@ -82,9 +89,37 @@ let Modal = (({
     {children}
   </div> : children;
 
+  React.useEffect(() => {
+    const handleMouseMove = (e) => {
+      if (isResizing) {
+        const { x } = modalRef.current.getBoundingClientRect();
+
+        if (e.clientX >= x + minWidth && e.clientX <= x + maxWidth) {
+          setCurrentWidth(e.clientX - x);
+        }
+      }
+    }
+
+    const handleMouseUp = () => {
+      setResizing(false);
+    }
+
+    document.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener('mousemove', handleMouseMove);
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    }
+  }, [isResizing]);
+
+  const handleMouseDown = () => {
+    setResizing(true);
+  }
+
   return (
     <Popover fadeIn={true} fixed={true} position={origin} modal={true} color='rgba(17,13,17,0.8)'>
-      <div className={[styles.modal, styles[type]].join(' ')} style={{ width }}>
+      <div className={[styles.modal, styles[type], isResizing ? styles.noTransition : ''].join(' ')} style={{ width: currentWidth }} ref={modalRef}>
         <div className={styles.header}>
           <div style={{top: React.Children.count(subtitle) === 0 ? '37px' : '25px'}} className={styles.title}>{title}</div>
           <div className={styles.subtitle}>{subtitle}</div>
@@ -95,6 +130,18 @@ let Modal = (({
         </div>
         {wrappedChildren}
         {footer}
+        {resizable && (
+          <svg
+            className={styles.resizeHandle}
+            viewBox="0 0 24 24"
+            onMouseDown={handleMouseDown}
+            >
+            <path
+              fill="currentColor"
+              d="M22,22H20V20H22V22M22,18H20V16H22V18M18,22H16V20H18V22M18,18H16V16H18V18M14,22H12V20H14V22M22,14H20V12H22V14Z"
+              />
+          </svg>
+        )}
       </div>
     </Popover>
   );
@@ -122,7 +169,10 @@ Modal.propTypes = {
   progress: PropTypes.bool.describe('Passed to the confirm button.'),
   customFooter: PropTypes.node.describe('used to fill any custom footer use case.'),
   textModal: PropTypes.bool.describe('Used for modals that contain only text to pad the text.'),
+  resizable: PropTypes.bool.describe('If true, the modal will be resizable with handle in the bottom right corner'),
   width: PropTypes.number.describe('custom width of modal.'),
+  minWidth: PropTypes.number.describe('minimum width of modal when resizing the width'),
+  maxWidth: PropTypes.number.describe('maximum width of modal when resizing the width'),
   buttonsInCenter: PropTypes.bool.describe('If true, the buttons will appear in the center of the modal, instead of to the right. By default, the buttons appear on the right unless the modal contains no children, in which case they appear in the center.'),
 };
 
diff --git a/src/components/Modal/Modal.scss b/src/components/Modal/Modal.scss
index e49cbd1b97..f8c4f03d06 100644
--- a/src/components/Modal/Modal.scss
+++ b/src/components/Modal/Modal.scss
@@ -18,6 +18,10 @@
   overflow: hidden;
   transition: width 0.5s cubic-bezier(1, 0, 0, 1);
 
+  &.noTransition {
+    transition: none;
+  }
+
   > *:not(:first-child):not(:last-child) {
     border-color: $borderGrey;
     border-width: 0 0 1px 0;
@@ -99,3 +103,13 @@
 }
 
 @include modalKeyframes();
+
+.resizeHandle {
+  width: 32px;
+  height: 32px;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  user-select: none;
+  cursor: ew-resize;
+}
diff --git a/src/dashboard/Data/Browser/AddColumnDialog.react.js b/src/dashboard/Data/Browser/AddColumnDialog.react.js
index 6b11c174b3..dab0bac832 100644
--- a/src/dashboard/Data/Browser/AddColumnDialog.react.js
+++ b/src/dashboard/Data/Browser/AddColumnDialog.react.js
@@ -194,6 +194,7 @@ export default class AddColumnDialog extends React.Component {
     );
     return (
       <Modal
+        resizable
         type={Modal.Types.INFO}
         icon='ellipses'
         iconSize={30}
diff --git a/src/dashboard/Data/Config/ConfigDialog.react.js b/src/dashboard/Data/Config/ConfigDialog.react.js
index e2778e5fcb..1e3417cb14 100644
--- a/src/dashboard/Data/Config/ConfigDialog.react.js
+++ b/src/dashboard/Data/Config/ConfigDialog.react.js
@@ -197,6 +197,7 @@ export default class ConfigDialog extends React.Component {
     );
     return (
       <Modal
+        resizable
         type={Modal.Types.INFO}
         title={newParam ? 'New parameter' : 'Edit parameter'}
         icon='gear-solid'

From 740069c8d0cc2940ac9af8619747ed6e46d187da Mon Sep 17 00:00:00 2001
From: Damian Stasik <visualfanatic@users.noreply.github.com>
Date: Wed, 27 Oct 2021 20:21:55 +0200
Subject: [PATCH 2/2] fix: use less prominent color for modal resize handle

---
 src/components/Modal/Modal.react.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Modal/Modal.react.js b/src/components/Modal/Modal.react.js
index a6c63e8a3c..5df2a7e329 100644
--- a/src/components/Modal/Modal.react.js
+++ b/src/components/Modal/Modal.react.js
@@ -137,7 +137,7 @@ let Modal = (({
             onMouseDown={handleMouseDown}
             >
             <path
-              fill="currentColor"
+              fill="#a5a5b4"
               d="M22,22H20V20H22V22M22,18H20V16H22V18M18,22H16V20H18V22M18,18H16V16H18V18M14,22H12V20H14V22M22,14H20V12H22V14Z"
               />
           </svg>