From 0d43aee14104b624b00405223e0c81e02095479a Mon Sep 17 00:00:00 2001 From: Ran Byron Date: Wed, 28 Aug 2019 19:16:42 +0300 Subject: [PATCH 1/4] Table viz horizontal scroll made visible --- client/app/assets/less/redash/query.less | 7 ------- .../visualizations/VisualizationRenderer.jsx | 15 +++++++------ client/app/visualizations/table/renderer.less | 21 ++++++++++++++++++- 3 files changed, 27 insertions(+), 16 deletions(-) diff --git a/client/app/assets/less/redash/query.less b/client/app/assets/less/redash/query.less index 72f2b7cf5a..3b3404d415 100644 --- a/client/app/assets/less/redash/query.less +++ b/client/app/assets/less/redash/query.less @@ -208,13 +208,6 @@ edit-in-place p.editable:hover { } } -.visualization-renderer { - .pagination, - .ant-pagination { - margin-top: 10px; - } -} - .embed__vis { display: flex; flex-flow: column; diff --git a/client/app/visualizations/VisualizationRenderer.jsx b/client/app/visualizations/VisualizationRenderer.jsx index 9b6e3db69a..f919e35f49 100644 --- a/client/app/visualizations/VisualizationRenderer.jsx +++ b/client/app/visualizations/VisualizationRenderer.jsx @@ -60,14 +60,13 @@ export function VisualizationRenderer(props) { return ( {showFilters && } -
- -
+ ); } diff --git a/client/app/visualizations/table/renderer.less b/client/app/visualizations/table/renderer.less index 05dcb66017..ed82115ee7 100644 --- a/client/app/visualizations/table/renderer.less +++ b/client/app/visualizations/table/renderer.less @@ -8,7 +8,7 @@ margin-bottom: 0; } - .ant-table-body { + .ant-table { overflow-x: auto; } @@ -100,4 +100,23 @@ } } } + + /* START table x scroll */ + .dashboard-widget-wrapper:not(.widget-auto-height-enabled) & { + height: 100%; + + & div { + height: inherit; + } + + .ant-spin-container { + display: flex; + flex-direction: column; + + .ant-table { + flex-grow: 1; + } + } + } + /* END */ } From 574ddd9d9f01e924e728f1893fd3e3878c568339 Mon Sep 17 00:00:00 2001 From: Ran Byron Date: Mon, 2 Sep 2019 18:00:40 +0300 Subject: [PATCH 2/4] Added tests --- client/app/visualizations/table/renderer.less | 18 ++++++++++++ .../integration/dashboard/widget_spec.js | 28 +++++++++++++++++++ 2 files changed, 46 insertions(+) diff --git a/client/app/visualizations/table/renderer.less b/client/app/visualizations/table/renderer.less index ed82115ee7..afee1a299e 100644 --- a/client/app/visualizations/table/renderer.less +++ b/client/app/visualizations/table/renderer.less @@ -115,6 +115,24 @@ .ant-table { flex-grow: 1; + + // show and color scrollbars + @media only percy { + overflow-x: scroll; + + &::-webkit-scrollbar { + width: 10px; + height: 10px; + } + + &::-webkit-scrollbar-track { + background: green; + } + + &::-webkit-scrollbar-thumb { + background: red; + } + } } } } diff --git a/client/cypress/integration/dashboard/widget_spec.js b/client/cypress/integration/dashboard/widget_spec.js index 743035e559..4631133da6 100644 --- a/client/cypress/integration/dashboard/widget_spec.js +++ b/client/cypress/integration/dashboard/widget_spec.js @@ -139,4 +139,32 @@ describe('Widget', () => { }); }); }); + + it('shows horizontal scrollbar for overflowing tabular content', function () { + const queryData = { + query: `select '${'loremipsum'.repeat(15)}' FROM generate_series(1,15)`, + }; + + const widgetOptions = { position: { col: 0, row: 0, sizeX: 3, sizeY: 10, autoHeight: false } }; + + createQueryAndAddWidget(this.dashboardId, queryData, widgetOptions).then((elTestId) => { + cy.visit(this.dashboardUrl); + cy.getByTestId(elTestId).should('exist'); + cy.percySnapshot('Shows horizontal scrollbar for overflowing tabular content'); + }); + }); + + it('shows fixed pagination for overflowing tabular content ', function () { + const queryData = { + query: 'select \'lorem ipsum\' FROM generate_series(1,50)', + }; + + const widgetOptions = { position: { col: 0, row: 0, sizeX: 3, sizeY: 10, autoHeight: false } }; + + createQueryAndAddWidget(this.dashboardId, queryData, widgetOptions).then((elTestId) => { + cy.visit(this.dashboardUrl); + cy.getByTestId(elTestId).should('exist'); + cy.percySnapshot('Shows fixed pagination for overflowing tabular content'); + }); + }); }); From 78bd09fc14f0a3cc9f6c0b326817d42b146b62dd Mon Sep 17 00:00:00 2001 From: Ran Byron Date: Mon, 2 Sep 2019 18:31:06 +0300 Subject: [PATCH 3/4] Fixed snapshot pre-condition --- client/cypress/integration/dashboard/widget_spec.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/cypress/integration/dashboard/widget_spec.js b/client/cypress/integration/dashboard/widget_spec.js index 4631133da6..57a3407d42 100644 --- a/client/cypress/integration/dashboard/widget_spec.js +++ b/client/cypress/integration/dashboard/widget_spec.js @@ -147,9 +147,9 @@ describe('Widget', () => { const widgetOptions = { position: { col: 0, row: 0, sizeX: 3, sizeY: 10, autoHeight: false } }; - createQueryAndAddWidget(this.dashboardId, queryData, widgetOptions).then((elTestId) => { + createQueryAndAddWidget(this.dashboardId, queryData, widgetOptions).then(() => { cy.visit(this.dashboardUrl); - cy.getByTestId(elTestId).should('exist'); + cy.getByTestId('TableVisualization').should('exist'); cy.percySnapshot('Shows horizontal scrollbar for overflowing tabular content'); }); }); @@ -161,9 +161,9 @@ describe('Widget', () => { const widgetOptions = { position: { col: 0, row: 0, sizeX: 3, sizeY: 10, autoHeight: false } }; - createQueryAndAddWidget(this.dashboardId, queryData, widgetOptions).then((elTestId) => { + createQueryAndAddWidget(this.dashboardId, queryData, widgetOptions).then(() => { cy.visit(this.dashboardUrl); - cy.getByTestId(elTestId).should('exist'); + cy.getByTestId('TableVisualization').should('exist'); cy.percySnapshot('Shows fixed pagination for overflowing tabular content'); }); }); From fcb0cc128e7a586cf40b5caf2d04b480e294f568 Mon Sep 17 00:00:00 2001 From: Ran Byron Date: Mon, 2 Sep 2019 19:43:25 +0300 Subject: [PATCH 4/4] Perhaps this would trigger percy --- client/app/assets/less/inc/misc.less | 17 +++++++++++++++++ client/app/visualizations/table/Renderer.jsx | 1 + client/app/visualizations/table/renderer.less | 18 ------------------ 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/client/app/assets/less/inc/misc.less b/client/app/assets/less/inc/misc.less index cc7359b369..3b2aafa846 100755 --- a/client/app/assets/less/inc/misc.less +++ b/client/app/assets/less/inc/misc.less @@ -234,4 +234,21 @@ .hide-in-percy, .pace { visibility: hidden; } + + [data-percy="show-scrollbars"] { + overflow: scroll; + + &::-webkit-scrollbar { + width: 10px; + height: 10px; + } + + &::-webkit-scrollbar-track { + background: green; + } + + &::-webkit-scrollbar-thumb { + background: red; + } + } } \ No newline at end of file diff --git a/client/app/visualizations/table/Renderer.jsx b/client/app/visualizations/table/Renderer.jsx index 2880bb81dc..224e8ecbd4 100644 --- a/client/app/visualizations/table/Renderer.jsx +++ b/client/app/visualizations/table/Renderer.jsx @@ -61,6 +61,7 @@ export default function Renderer({ options, data }) { return (