From 7eaeb31135d7bdc4a9cca45d041c6cd3823c3662 Mon Sep 17 00:00:00 2001
From: Ran Byron <ranbena@gmail.com>
Date: Mon, 9 Sep 2019 09:50:03 +0300
Subject: [PATCH] Widget table scroll-x visible (#4101)

* Table viz horizontal scroll made visible

* Added tests

* Fixed snapshot pre-condition

* Perhaps this would trigger percy
---
 client/app/assets/less/inc/misc.less          | 17 +++++++++++
 client/app/assets/less/redash/query.less      |  7 -----
 .../visualizations/VisualizationRenderer.jsx  | 15 +++++-----
 client/app/visualizations/table/Renderer.jsx  |  1 +
 client/app/visualizations/table/renderer.less | 21 +++++++++++++-
 .../integration/dashboard/widget_spec.js      | 28 +++++++++++++++++++
 6 files changed, 73 insertions(+), 16 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/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 (
     <React.Fragment>
       {showFilters && <Filters filters={filters} onChange={setFilters} />}
-      <div>
-        <Renderer
-          key={`visualization${visualization.id}`}
-          options={options}
-          data={filteredData}
-          visualizationName={visualization.name}
-        />
-      </div>
+      <Renderer
+        key={`visualization${visualization.id}`}
+        options={options}
+        data={filteredData}
+        visualizationName={visualization.name}
+        context={props.context}
+      />
     </React.Fragment>
   );
 }
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 (
     <div className="table-visualization-container">
       <Table
+        data-percy="show-scrollbars"
         data-test="TableVisualization"
         columns={tableColumns}
         dataSource={preparedRows}
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 */
 }
diff --git a/client/cypress/integration/dashboard/widget_spec.js b/client/cypress/integration/dashboard/widget_spec.js
index 743035e559..57a3407d42 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(() => {
+      cy.visit(this.dashboardUrl);
+      cy.getByTestId('TableVisualization').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(() => {
+      cy.visit(this.dashboardUrl);
+      cy.getByTestId('TableVisualization').should('exist');
+      cy.percySnapshot('Shows fixed pagination for overflowing tabular content');
+    });
+  });
 });