Widget table scroll-x visible (getredash#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

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

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;

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

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}

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 */
 }

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