fix: south pane scrolling issues

superset-frontend/cypress-base/cypress/integration/sqllab/sourcePanel.index.js → superset-frontend/cypress-base/cypress/integration/sqllab/sourcePanel.index.test.js

@@ -34,9 +34,7 @@ describe('SqlLab datasource panel', () => {
     cy.get('.sql-toolbar .Select').should('have.length', 3);
 
     cy.get('.sql-toolbar .table-schema').should('not.exist');
-    cy.get('.SouthPane .tab-content .filterable-table-container').should(
-      'not.exist',
-    );
+    cy.get('[data-test="filterable-table-container"]').should('not.exist');
 
     cy.get('.sql-toolbar .Select')
       .eq(0) // database select

superset-frontend/src/SqlLab/components/SouthPane.jsx

@@ -23,7 +23,8 @@ import { Alert } from 'react-bootstrap';
 import Tabs from 'src/common/components/Tabs';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { t } from '@superset-ui/core';
+import { t, styled } from '@superset-ui/core';
+
 import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
 
 import Label from 'src/components/Label';
@@ -36,7 +37,7 @@ import {
   LOCALSTORAGE_MAX_QUERY_AGE_MS,
 } from '../constants';
 
-const TAB_HEIGHT = 44;
+const TAB_HEIGHT = 64;
 
 /*
     editorQueries are queries executed by users passed from SqlEditor component
@@ -59,6 +60,29 @@ const defaultProps = {
   offline: false,
 };
 
+const StyledPane = styled.div`
+  width: 100%;
+
+  .ant-tabs .ant-tabs-content-holder {
+    overflow: visible;
+  }
+
+  .SouthPaneTabs {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .tab-content {
+    .alert {
+      margin-top: ${({ theme }) => theme.gridUnit * 2}px;
+    }
+
+    button.fetch {
+      margin-top: ${({ theme }) => theme.gridUnit * 2}px;
+    }
+  }
+`;
+
 export class SouthPane extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -158,7 +182,7 @@ export class SouthPane extends React.PureComponent {
     ));
 
     return (
-      <div className="SouthPane" ref={this.southPaneRef}>
+      <StyledPane className="SouthPane" ref={this.southPaneRef}>
         <Tabs
           activeKey={this.props.activeSouthPaneTab}
           className="SouthPaneTabs"
@@ -178,7 +202,7 @@ export class SouthPane extends React.PureComponent {
           </Tabs.TabPane>
           {dataPreviewTabs}
         </Tabs>
-      </div>
+      </StyledPane>
     );
   }
 }

superset-frontend/src/SqlLab/main.less

@@ -235,10 +235,6 @@ div.Workspace {
   .ace_content {
     height: 100%;
   }
-
-  .SouthPane {
-    height: 100%;
-  }
 }
 
 .SqlEditorTabs li {
@@ -318,7 +314,7 @@ div.Workspace {
   .queryPane {
     flex: 1 1 auto;
     padding-left: 10px;
-    overflow: auto;
+    overflow: visible;
   }
 
   .schemaPane-enter-done,
@@ -405,10 +401,6 @@ div.tablePopover {
   padding-top: 16px;
 }
 
-.filterable-table-container {
-  margin-top: 48px;
-}
-
 .ace_editor.ace_editor {
   //double class is better than !important
   border: 1px solid @gray-light;
@@ -493,20 +485,6 @@ a.Link {
   margin: 3px 5px;
 }
 
-.SouthPane {
-  width: 100%;
-
-  .SouthPaneTabs {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .ant-tabs-tabpane {
-    overflow-y: auto; // scroll the query history pane
-  }
-}
-
 .nav-tabs .ddbtn-tab {
   padding: 0;
   border: none;
@@ -537,14 +515,6 @@ a.Link {
   }
 }
 
-.SouthPane .tab-content .alert {
-  margin-top: 10px;
-}
-
-.SouthPane .tab-content button.fetch {
-  margin-top: 10px;
-}
-
 .cost-estimate {
   font-size: @font-size-s;
 }

superset-frontend/src/components/FilterableTable/FilterableTable.tsx

@@ -29,7 +29,7 @@ import {
   SortIndicator,
   Table,
 } from 'react-virtualized';
-import { getMultipleTextDimensions, t } from '@superset-ui/core';
+import { getMultipleTextDimensions, t, styled } from '@superset-ui/core';
 
 import Button from '../Button';
 import CopyToClipboard from '../CopyToClipboard';
@@ -83,6 +83,11 @@ const JSON_TREE_THEME = {
   base0F: '#cc6633',
 };
 
+const StyledFilterableTable = styled.div`
+  overflow-x: auto;
+  margin-top: ${({ theme }) => theme.gridUnit * 12}px;
+`;
+
 // when more than MAX_COLUMNS_FOR_TABLE are returned, switch from table to grid view
 export const MAX_COLUMNS_FOR_TABLE = 50;
 
@@ -463,6 +468,7 @@ export default class FilterableTable extends PureComponent<
           <div
             style={{ height }}
             className="filterable-table-container Table"
+            data-test="filterable-table-container"
             ref={this.container}
           >
             <div className="LeftColumn">
@@ -551,7 +557,7 @@ export default class FilterableTable extends PureComponent<
     const rowGetter = ({ index }: { index: number }) =>
       this.getDatum(sortedAndFilteredList, index);
     return (
-      <div
+      <StyledFilterableTable
         style={{ height }}
         className="filterable-table-container"
         ref={this.container}
@@ -586,7 +592,7 @@ export default class FilterableTable extends PureComponent<
             ))}
           </Table>
         )}
-      </div>
+      </StyledFilterableTable>
     );
   }