From 29e824891abff6c9cf256c09b5deaf4c3cb87a42 Mon Sep 17 00:00:00 2001
From: Arash <arash.afghahi@gmail.com>
Date: Tue, 30 Mar 2021 11:14:30 -0400
Subject: [PATCH] made changes

---
 .../javascripts/datasource/DatasourceEditor_spec.jsx  |  2 +-
 .../src/SqlLab/components/SqlEditorLeftBar.jsx        |  1 -
 .../src/components/DatabaseSelector/index.tsx         |  6 +-----
 .../src/components/TableSelector/index.tsx            | 11 +----------
 superset-frontend/src/datasource/DatasourceEditor.jsx | 11 +++++++++--
 superset-frontend/src/datasource/DatasourceModal.tsx  |  4 ++++
 6 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx b/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx
index e006aaa8d9241..8c6a06141f090 100644
--- a/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx
+++ b/superset-frontend/spec/javascripts/datasource/DatasourceEditor_spec.jsx
@@ -61,7 +61,7 @@ describe('DatasourceEditor', () => {
   });
 
   it('renders Tabs', () => {
-    expect(wrapper.find(Tabs)).toExist();
+    expect(wrapper.find('#table-tabs')).toExist();
   });
 
   it('makes an async request', () =>
diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx
index 32c02de745366..c4751a1aeeb21 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx
@@ -142,7 +142,6 @@ export default class SqlEditorLeftBar extends React.PureComponent {
           schema={qe.schema}
           sqlLabMode
           tableNameSticky={false}
-          useDocumentBody
         />
         <div className="divider" />
         <StyledScrollbarContainer>
diff --git a/superset-frontend/src/components/DatabaseSelector/index.tsx b/superset-frontend/src/components/DatabaseSelector/index.tsx
index 15a08fb2b9491..75103aac3ce04 100644
--- a/superset-frontend/src/components/DatabaseSelector/index.tsx
+++ b/superset-frontend/src/components/DatabaseSelector/index.tsx
@@ -72,7 +72,6 @@ interface DatabaseSelectorProps {
   readOnly?: boolean;
   schema?: string;
   sqlLabMode?: boolean;
-  useDocumentBody?: boolean;
   onChange?: ({
     dbId,
     schema,
@@ -97,7 +96,6 @@ export default function DatabaseSelector({
   readOnly = false,
   schema,
   sqlLabMode = false,
-  useDocumentBody = false,
 }: DatabaseSelectorProps) {
   const [currentDbId, setCurrentDbId] = useState(dbId);
   const [currentSchema, setCurrentSchema] = useState<string | undefined>(
@@ -105,7 +103,7 @@ export default function DatabaseSelector({
   );
   const [schemaLoading, setSchemaLoading] = useState(false);
   const [schemaOptions, setSchemaOptions] = useState([]);
-  let TableRef: HTMLElement;
+
   function fetchSchemas(databaseId: number, forceRefresh = false) {
     const actualDbId = databaseId || dbId;
     if (actualDbId) {
@@ -247,8 +245,6 @@ export default function DatabaseSelector({
         placeholder={t('Select a database')}
         autoSelect
         isDisabled={!isDatabaseSelectEnabled || readOnly}
-        menuPosition="fixed"
-        menuPortalTarget={useDocumentBody ? document.body : TableRef}
       />,
       null,
     );
diff --git a/superset-frontend/src/components/TableSelector/index.tsx b/superset-frontend/src/components/TableSelector/index.tsx
index e8ecf3e69dea1..3be0167c8c1e6 100644
--- a/superset-frontend/src/components/TableSelector/index.tsx
+++ b/superset-frontend/src/components/TableSelector/index.tsx
@@ -104,7 +104,6 @@ interface TableSelectorProps {
   sqlLabMode?: boolean;
   tableName?: string;
   tableNameSticky?: boolean;
-  useDocumentBody?: boolean;
 }
 
 const TableSelector: FunctionComponent<TableSelectorProps> = ({
@@ -125,7 +124,6 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
   sqlLabMode = true,
   tableName,
   tableNameSticky = true,
-  useDocumentBody = false,
 }) => {
   const [currentSchema, setCurrentSchema] = useState<string | undefined>(
     schema,
@@ -135,7 +133,7 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
   );
   const [tableLoading, setTableLoading] = useState(false);
   const [tableOptions, setTableOptions] = useState([]);
-  let TableRef: HTMLElement;
+
   function fetchTables(
     databaseId?: number,
     schema?: string,
@@ -305,7 +303,6 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
         sqlLabMode={sqlLabMode}
         isDatabaseSelectEnabled={isDatabaseSelectEnabled && !readOnly}
         readOnly={readOnly}
-        useDocumentBody={useDocumentBody}
       />
     );
   }
@@ -320,7 +317,6 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
           name="select-table"
           isLoading={tableLoading}
           ignoreAccents={false}
-          menuShouldScrollIntoView={false}
           placeholder={t('Select table or type table name')}
           autosize={false}
           onChange={changeTable}
@@ -330,11 +326,6 @@ const TableSelector: FunctionComponent<TableSelectorProps> = ({
           optionRenderer={renderTableOption}
           valueRenderer={renderTableOption}
           isDisabled={readOnly}
-          menuPosition="fixed"
-          menuPortalTarget={useDocumentBody ? document.body : TableRef}
-          styles={{
-            menuPortal: base => ({ ...base, zIndex: 9999 }),
-          }}
         />
       );
     } else if (formMode) {
diff --git a/superset-frontend/src/datasource/DatasourceEditor.jsx b/superset-frontend/src/datasource/DatasourceEditor.jsx
index 0704314c25d1e..8ad10d7575325 100644
--- a/superset-frontend/src/datasource/DatasourceEditor.jsx
+++ b/superset-frontend/src/datasource/DatasourceEditor.jsx
@@ -79,6 +79,13 @@ const FlexRowContainer = styled.div`
   }
 `;
 
+const StyledTableTabs = styled(Tabs)`
+  overflow: visible;
+  .ant-tabs-content-holder {
+    overflow: visible;
+  }
+`;
+
 const EditLockContainer = styled.div`
   font-size: ${supersetTheme.typography.sizes.s}px;
   display: flex;
@@ -995,7 +1002,7 @@ class DatasourceEditor extends React.PureComponent {
             </>
           }
         />
-        <Tabs
+        <StyledTableTabs
           fullWidth={false}
           id="table-tabs"
           data-test="edit-dataset-tabs"
@@ -1086,7 +1093,7 @@ class DatasourceEditor extends React.PureComponent {
               </Col>
             </div>
           </Tabs.TabPane>
-        </Tabs>
+        </StyledTableTabs>
       </DatasourceContainer>
     );
   }
diff --git a/superset-frontend/src/datasource/DatasourceModal.tsx b/superset-frontend/src/datasource/DatasourceModal.tsx
index 1174e7913fbc8..5fcff68e7ceaf 100644
--- a/superset-frontend/src/datasource/DatasourceModal.tsx
+++ b/superset-frontend/src/datasource/DatasourceModal.tsx
@@ -49,6 +49,10 @@ const StyledDatasourceModal = styled(Modal)`
   .modal-footer {
     flex: 0 1 auto;
   }
+
+  .ant-modal-body {
+    overflow: visible;
+  }
 `;
 
 interface DatasourceModalProps {