fix sql lab south pane bottom margin

apache · Jan 7, 2021 · 5e371c4 · 5e371c4
1 parent be3497a
commit 5e371c4
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 30 deletions.
diff --git a/...s/integration/sqllab/sourcePanel.index.js → ...egration/sqllab/sourcePanel.index.test.js b/...s/integration/sqllab/sourcePanel.index.js → ...egration/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

diff --git a/superset-frontend/src/SqlLab/components/SouthPane.jsx b/superset-frontend/src/SqlLab/components/SouthPane.jsx
@@ -37,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
@@ -61,8 +61,25 @@ const defaultProps = {
 };
 
 const StyledPane = styled.div`
-  .div {
-    overflow: none;
+  width: 100%;
+
+  .ant-tabs .ant-tabs-content-holder {
+    overflow: visible;
+  }
+
+  .SouthPaneTabs {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .tab-content {
+    .alert {
+      margin-top: 10px;
+    }
+
+    button.fetch {
+      margin-top: 10px;
+    }
   }
 `;
 

diff --git a/superset-frontend/src/SqlLab/main.less b/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,
@@ -493,16 +489,6 @@ a.Link {
   margin: 3px 5px;
 }
 
-.SouthPane {
-  width: 100%;
-
-  .SouthPaneTabs {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-}
-
 .nav-tabs .ddbtn-tab {
   padding: 0;
   border: none;
@@ -533,14 +519,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;
 }
diff --git a/superset-frontend/src/components/FilterableTable/FilterableTable.tsx b/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, css } from '@superset-ui/core';
 
 import Button from '../Button';
 import CopyToClipboard from '../CopyToClipboard';
@@ -83,6 +83,10 @@ const JSON_TREE_THEME = {
   base0F: '#cc6633',
 };
 
+const filterableTableStyles = css`
+  overflow-x: auto;
+`;
+
 // when more than MAX_COLUMNS_FOR_TABLE are returned, switch from table to grid view
 export const MAX_COLUMNS_FOR_TABLE = 50;
 
@@ -463,6 +467,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">
@@ -555,6 +560,7 @@ export default class FilterableTable extends PureComponent<
         style={{ height }}
         className="filterable-table-container"
         ref={this.container}
+        css={filterableTableStyles}
       >
         {this.state.fitted && (
           <Table