Decrease size of widget pagination (#4120)

* Added tests

* Perhaps this would trigger percy

* Decrease size of widget pagination

* Removed unused attr

* Updated tests

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,

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;
-        }
-    }
 }

client/app/components/dashboards/widget-dialog.html

@@ -5,7 +5,7 @@
   </div>
 </div>
 <div class="modal-body">
-  <visualization-renderer visualization="$ctrl.widget.visualization" query-result="$ctrl.widget.getQueryResult()" class="t-body"></visualization-renderer>
+  <visualization-renderer visualization="$ctrl.widget.visualization" query-result="$ctrl.widget.getQueryResult()" class="t-body" context="'widget'"></visualization-renderer>
 </div>
 <div class="modal-footer">
   <button type="button" class="btn btn-default" ng-click="$ctrl.dismiss()">Close</button>

client/app/components/dashboards/widget.html

@@ -56,6 +56,7 @@
         visualization="$ctrl.widget.visualization"
         query-result="$ctrl.widget.getQueryResult()"
         filters="$ctrl.filters"
+        context="'widget'"
       ></visualization-renderer>
     </div>
     <div ng-switch-default class="body-row-auto spinner-container">

client/app/components/queries/visualization-embed.html

@@ -20,7 +20,7 @@ <h3>
       <div class="alert alert-danger" data-test="ErrorMessage">Error: {{$ctrl.error}}</div>
     </div>
 
-    <visualization-renderer visualization="$ctrl.visualization" query-result="$ctrl.queryResult" class="t-body" ng-if="$ctrl.queryResult">
+    <visualization-renderer visualization="$ctrl.visualization" query-result="$ctrl.queryResult" class="t-body" ng-if="$ctrl.queryResult" context="'widget'">
     </visualization-renderer>
   </div>
 

client/app/pages/queries/query.html

@@ -243,7 +243,7 @@ <h3>
                     </li>
                   </ul>
                   <div ng-if="selectedVisualization && queryResult" class="query__vis m-t-15 p-b-15 scrollbox" data-test="QueryPageVisualization{{ selectedVisualization.id }}">
-                    <visualization-renderer visualization="selectedVisualization" query-result="queryResult"></visualization-renderer>
+                    <visualization-renderer visualization="selectedVisualization" query-result="queryResult" context="'query'"></visualization-renderer>
                   </div>
                 </div>
               </div>

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 = {

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

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([]);
@@ -67,6 +67,7 @@ export default function Renderer({ options, data }) {
         dataSource={preparedRows}
         rowKey={(record, index) => rowKeyPrefix + index}
         pagination={{
+          size: context === 'widget' ? 'small' : '',
           position: 'bottom',
           pageSize: options.itemsPerPage,
           hideOnSinglePage: true,

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');
     });
   });
 });