feat: Draggable and Resizable Modal (#16394)

* Implement resizable prop

* Implement resizableConfig

* Implement fluid Syntax Highlighter

* Implement draggable

* Destroy on close

* Implement draggableConfig

* Enhance with footer calculation

* Add new line

* Make whole header draggable trigger

superset-frontend/src/explore/components/ExploreAdditionalActionsMenu/index.jsx

@@ -91,6 +91,8 @@ const ExploreAdditionalActionsMenu = props => {
                   latestQueryFormData={props.latestQueryFormData}
                 />
               }
+              draggable
+              resizable
               responsive
             />
           </Menu.Item>

superset-frontend/src/explore/components/controls/ViewQueryModal.tsx

@@ -50,6 +50,14 @@ type Result = {
   language: string;
 };
 
+const StyledSyntaxContainer = styled.div`
+  height: 100%;
+`;
+
+const StyledSyntaxHighlighter = styled(SyntaxHighlighter)`
+  height: calc(100% - 26px); // 100% - clipboard height
+`;
+
 const ViewQueryModal: React.FC<Props> = props => {
   const [result, setResult] = useState<Result[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -93,7 +101,7 @@ const ViewQueryModal: React.FC<Props> = props => {
     <>
       {result.map(item =>
         item.query ? (
-          <div>
+          <StyledSyntaxContainer key={item.query}>
             <CopyToClipboard
               text={item.query}
               shouldShowText={false}
@@ -103,13 +111,13 @@ const ViewQueryModal: React.FC<Props> = props => {
                 </CopyButtonViewQuery>
               }
             />
-            <SyntaxHighlighter
+            <StyledSyntaxHighlighter
               language={item.language || undefined}
               style={github}
             >
               {item.query}
-            </SyntaxHighlighter>
-          </div>
+            </StyledSyntaxHighlighter>
+          </StyledSyntaxContainer>
         ) : null,
       )}
     </>