From f207b4a8cca253cee31409b5e263d5a39e95ace1 Mon Sep 17 00:00:00 2001 From: Ran Byron Date: Mon, 2 Sep 2019 18:00:40 +0300 Subject: [PATCH 1/5] Added tests --- client/app/visualizations/table/renderer.less | 18 ++++++++++++++++++ 1 file changed, 18 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; + } + } } } } From 6137c8aa6b4078b04ba360dfbfdf98436d268b2e Mon Sep 17 00:00:00 2001 From: Ran Byron Date: Mon, 2 Sep 2019 19:43:25 +0300 Subject: [PATCH 2/5] Perhaps this would trigger percy --- client/app/visualizations/table/renderer.less | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/client/app/visualizations/table/renderer.less b/client/app/visualizations/table/renderer.less index afee1a299e..ed82115ee7 100644 --- a/client/app/visualizations/table/renderer.less +++ b/client/app/visualizations/table/renderer.less @@ -115,24 +115,6 @@ .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; - } - } } } } From 21db42272d2897611ea9b02ce6bb78ae9a676cdd Mon Sep 17 00:00:00 2001 From: Ran Byron Date: Mon, 2 Sep 2019 20:49:47 +0300 Subject: [PATCH 3/5] Decrease size of widget pagination --- client/app/assets/less/ant.less | 4 ++++ client/app/components/dashboards/widget-dialog.html | 2 +- client/app/components/dashboards/widget.html | 1 + client/app/components/queries/visualization-embed.html | 2 +- client/app/pages/queries/query.html | 2 +- client/app/visualizations/VisualizationRenderer.jsx | 1 + client/app/visualizations/index.js | 1 + client/app/visualizations/table/Renderer.jsx | 5 +++-- 8 files changed, 13 insertions(+), 5 deletions(-) diff --git a/client/app/assets/less/ant.less b/client/app/assets/less/ant.less index 4e9e88f70e..d1509a48b5 100644 --- a/client/app/assets/less/ant.less +++ b/client/app/assets/less/ant.less @@ -150,6 +150,10 @@ border-color: transparent; color: @pagination-color; line-height: @pagination-item-size - 2px; + + .@{pagination-prefix-cls}.mini & { + line-height: @pagination-item-size-sm - 2px; + } } &:focus .@{pagination-prefix-cls}-item-link, diff --git a/client/app/components/dashboards/widget-dialog.html b/client/app/components/dashboards/widget-dialog.html index 0802a81411..32404bbd8b 100644 --- a/client/app/components/dashboards/widget-dialog.html +++ b/client/app/components/dashboards/widget-dialog.html @@ -5,7 +5,7 @@
- +
diff --git a/client/app/components/dashboards/widget.html b/client/app/components/dashboards/widget.html index 987909589e..a23c5f381b 100644 --- a/client/app/components/dashboards/widget.html +++ b/client/app/components/dashboards/widget.html @@ -56,6 +56,7 @@ visualization="$ctrl.widget.visualization" query-result="$ctrl.widget.getQueryResult()" filters="$ctrl.filters" + context="'widget'" >
- + diff --git a/client/app/pages/queries/query.html b/client/app/pages/queries/query.html index 865079a068..97148729b9 100644 --- a/client/app/pages/queries/query.html +++ b/client/app/pages/queries/query.html @@ -243,7 +243,7 @@

- +
diff --git a/client/app/visualizations/VisualizationRenderer.jsx b/client/app/visualizations/VisualizationRenderer.jsx index f919e35f49..8b5967e8d2 100644 --- a/client/app/visualizations/VisualizationRenderer.jsx +++ b/client/app/visualizations/VisualizationRenderer.jsx @@ -76,6 +76,7 @@ VisualizationRenderer.propTypes = { queryResult: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types filters: FiltersType, showFilters: PropTypes.bool, + context: PropTypes.oneOf(['query', 'widget']).isRequired, }; VisualizationRenderer.defaultProps = { diff --git a/client/app/visualizations/index.js b/client/app/visualizations/index.js index ba731d9cad..02ddad2287 100644 --- a/client/app/visualizations/index.js +++ b/client/app/visualizations/index.js @@ -25,6 +25,7 @@ export const RendererPropTypes = { data: Data.isRequired, options: VisualizationOptions.isRequired, onOptionsChange: PropTypes.func, // (newOptions) => void + context: PropTypes.oneOf(['query', 'widget']).isRequired, }; // For each visualization's editor diff --git a/client/app/visualizations/table/Renderer.jsx b/client/app/visualizations/table/Renderer.jsx index 224e8ecbd4..55200bd227 100644 --- a/client/app/visualizations/table/Renderer.jsx +++ b/client/app/visualizations/table/Renderer.jsx @@ -8,7 +8,7 @@ import { prepareColumns, filterRows, sortRows } from './utils'; import './renderer.less'; -export default function Renderer({ options, data }) { +export default function Renderer({ options, data, context }) { const [rowKeyPrefix, setRowKeyPrefix] = useState(`row:1:${options.itemsPerPage}:`); const [searchTerm, setSearchTerm] = useState(''); const [orderBy, setOrderBy] = useState([]); @@ -59,7 +59,7 @@ export default function Renderer({ options, data }) { } return ( -
+
rowKeyPrefix + index} pagination={{ + size: context === 'widget' ? 'small' : '', position: 'bottom', pageSize: options.itemsPerPage, hideOnSinglePage: true, From 0da8c7f15e492fce4a6051fc39eee94331d0a387 Mon Sep 17 00:00:00 2001 From: Ran Byron Date: Mon, 2 Sep 2019 21:04:14 +0300 Subject: [PATCH 4/5] Removed unused attr --- client/app/visualizations/table/Renderer.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/app/visualizations/table/Renderer.jsx b/client/app/visualizations/table/Renderer.jsx index 55200bd227..35b5bd70a4 100644 --- a/client/app/visualizations/table/Renderer.jsx +++ b/client/app/visualizations/table/Renderer.jsx @@ -59,7 +59,7 @@ export default function Renderer({ options, data, context }) { } return ( -
+
Date: Mon, 9 Sep 2019 10:21:56 +0300 Subject: [PATCH 5/5] Updated tests --- client/app/assets/less/inc/misc.less | 17 ----------------- .../integration/dashboard/widget_spec.js | 14 +++++++++----- 2 files changed, 9 insertions(+), 22 deletions(-) diff --git a/client/app/assets/less/inc/misc.less b/client/app/assets/less/inc/misc.less index 3b2aafa846..cc7359b369 100755 --- a/client/app/assets/less/inc/misc.less +++ b/client/app/assets/less/inc/misc.less @@ -234,21 +234,4 @@ .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/cypress/integration/dashboard/widget_spec.js b/client/cypress/integration/dashboard/widget_spec.js index 57a3407d42..7a42bbd1e6 100644 --- a/client/cypress/integration/dashboard/widget_spec.js +++ b/client/cypress/integration/dashboard/widget_spec.js @@ -140,7 +140,7 @@ describe('Widget', () => { }); }); - it('shows horizontal scrollbar for overflowing tabular content', function () { + it('sets the correct height of table visualization', function () { const queryData = { query: `select '${'loremipsum'.repeat(15)}' FROM generate_series(1,15)`, }; @@ -149,8 +149,10 @@ describe('Widget', () => { createQueryAndAddWidget(this.dashboardId, queryData, widgetOptions).then(() => { cy.visit(this.dashboardUrl); - cy.getByTestId('TableVisualization').should('exist'); - cy.percySnapshot('Shows horizontal scrollbar for overflowing tabular content'); + cy.getByTestId('TableVisualization') + .its('0.offsetHeight') + .should('eq', 381); + cy.percySnapshot('Shows correct height of table visualization'); }); }); @@ -163,8 +165,10 @@ describe('Widget', () => { createQueryAndAddWidget(this.dashboardId, queryData, widgetOptions).then(() => { cy.visit(this.dashboardUrl); - cy.getByTestId('TableVisualization').should('exist'); - cy.percySnapshot('Shows fixed pagination for overflowing tabular content'); + cy.getByTestId('TableVisualization') + .next('.ant-pagination.mini') + .should('be.visible'); + cy.percySnapshot('Shows fixed mini pagination for overflowing tabular content'); }); }); });