fix: double scroll bars on dataset editor (#11095)

* fix double scroll bar on dataset editor

* add table name to virtual tab

superset-frontend/src/datasource/DatasourceEditor.jsx

@@ -46,11 +46,6 @@ import Field from 'src/CRUD/Field';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
 
 const DatasourceContainer = styled.div`
-  .tab-content {
-    height: 600px;
-    overflow: auto;
-  }
-
   .change-warning {
     margin: 16px 10px 0;
     color: ${({ theme }) => theme.colors.warning.base};
@@ -656,6 +651,19 @@ class DatasourceEditor extends React.PureComponent {
                       />
                     }
                   />
+                  <Field
+                    fieldKey="table_name"
+                    label={t('table name')}
+                    control={
+                      <TextControl
+                        controlId="table_name"
+                        onChange={table => {
+                          this.onDatasourcePropChange('table_name', table);
+                        }}
+                        placeholder={t('Type table name')}
+                      />
+                    }
+                  />
                   <Field
                     fieldKey="sql"
                     label={t('SQL')}

superset-frontend/src/datasource/DatasourceModal.tsx

@@ -20,7 +20,7 @@ import React, { FunctionComponent, useState, useRef } from 'react';
 import { Alert, Modal } from 'react-bootstrap';
 import Button from 'src/components/Button';
 import Dialog from 'react-bootstrap-dialog';
-import { t, SupersetClient } from '@superset-ui/core';
+import { styled, t, SupersetClient } from '@superset-ui/core';
 import AsyncEsmComponent from 'src/components/AsyncEsmComponent';
 
 import getClientErrorObject from 'src/utils/getClientErrorObject';
@@ -28,6 +28,27 @@ import withToasts from 'src/messageToasts/enhancers/withToasts';
 
 const DatasourceEditor = AsyncEsmComponent(() => import('./DatasourceEditor'));
 
+const StyledDatasourceModal = styled(Modal)`
+  .modal-content {
+    height: 900px;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .modal-header {
+    flex: 0 1 auto;
+  }
+  .modal-body {
+    flex: 1 1 auto;
+    overflow: auto;
+  }
+
+  .modal-footer {
+    flex: 0 1 auto;
+  }
+`;
+
 interface DatasourceModalProps {
   addSuccessToast: (msg: string) => void;
   datasource: any;
@@ -137,7 +158,7 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
   };
 
   return (
-    <Modal show={show} onHide={onHide} bsSize="large">
+    <StyledDatasourceModal show={show} onHide={onHide} bsSize="large">
       <Modal.Header closeButton>
         <Modal.Title>
           <div>
@@ -187,7 +208,7 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
           <Dialog ref={dialog} />
         </span>
       </Modal.Footer>
-    </Modal>
+    </StyledDatasourceModal>
   );
 };