From 1cc214853864760de5bfec409fe5934635711d70 Mon Sep 17 00:00:00 2001
From: Paulo Eduardo da Silva <pauloes.dev@gmail.com>
Date: Sat, 3 Sep 2022 03:51:46 -0300
Subject: [PATCH] fix(ViewQuery-Modal): Copy icon is out of box when resize
 query modal (#21243)

---
 .../src/components/Modal/Modal.tsx            | 48 +++++++++++--------
 1 file changed, 28 insertions(+), 20 deletions(-)

diff --git a/superset-frontend/src/components/Modal/Modal.tsx b/superset-frontend/src/components/Modal/Modal.tsx
index c12e6f6642..2ccd8dcf5d 100644
--- a/superset-frontend/src/components/Modal/Modal.tsx
+++ b/superset-frontend/src/components/Modal/Modal.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { isNil } from 'lodash';
 import { styled, t } from '@superset-ui/core';
 import { css } from '@emotion/react';
@@ -201,6 +201,24 @@ export const StyledModal = styled(BaseModal)<StyledModalProps>`
     }
   `}
 `;
+const defaultResizableConfig = (hideFooter: boolean | undefined) => ({
+  maxHeight: RESIZABLE_MAX_HEIGHT,
+  maxWidth: RESIZABLE_MAX_WIDTH,
+  minHeight: hideFooter
+    ? RESIZABLE_MIN_HEIGHT
+    : RESIZABLE_MIN_HEIGHT + MODAL_FOOTER_HEIGHT,
+  minWidth: RESIZABLE_MIN_WIDTH,
+  enable: {
+    bottom: true,
+    bottomLeft: false,
+    bottomRight: true,
+    left: false,
+    top: false,
+    topLeft: false,
+    topRight: false,
+    right: true,
+  },
+});
 
 const CustomModal = ({
   children,
@@ -222,24 +240,7 @@ const CustomModal = ({
   wrapProps,
   draggable = false,
   resizable = false,
-  resizableConfig = {
-    maxHeight: RESIZABLE_MAX_HEIGHT,
-    maxWidth: RESIZABLE_MAX_WIDTH,
-    minHeight: hideFooter
-      ? RESIZABLE_MIN_HEIGHT
-      : RESIZABLE_MIN_HEIGHT + MODAL_FOOTER_HEIGHT,
-    minWidth: RESIZABLE_MIN_WIDTH,
-    enable: {
-      bottom: true,
-      bottomLeft: false,
-      bottomRight: true,
-      left: false,
-      top: false,
-      topLeft: false,
-      topRight: false,
-      right: true,
-    },
-  },
+  resizableConfig = defaultResizableConfig(hideFooter),
   draggableConfig,
   destroyOnClose,
   ...rest
@@ -289,6 +290,13 @@ const CustomModal = ({
     }
   };
 
+  const getResizableConfig = useMemo(() => {
+    if (Object.keys(resizableConfig).length === 0) {
+      return defaultResizableConfig(hideFooter);
+    }
+    return resizableConfig;
+  }, [hideFooter, resizableConfig]);
+
   const ModalTitle = () =>
     draggable ? (
       <div
@@ -329,7 +337,7 @@ const CustomModal = ({
             {...draggableConfig}
           >
             {resizable ? (
-              <Resizable className="resizable" {...resizableConfig}>
+              <Resizable className="resizable" {...getResizableConfig}>
                 <div className="resizable-wrapper" ref={draggableRef}>
                   {modal}
                 </div>