Revert "Adding ability to fix table columns in place (getredash#7019)" (

getredash#7131)
dodopizza · Aug 26, 2024 · 79a4c4c · 79a4c4c
1 parent 58a7438
commit 79a4c4c
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 183 deletions.
diff --git a/client/cypress/integration/visualizations/table/.mocks/wide-dataset.js b/client/cypress/integration/visualizations/table/.mocks/wide-dataset.js
diff --git a/client/cypress/integration/visualizations/table/table_spec.js b/client/cypress/integration/visualizations/table/table_spec.js
@@ -8,7 +8,6 @@ import * as AllCellTypes from "./.mocks/all-cell-types";
 import * as MultiColumnSort from "./.mocks/multi-column-sort";
 import * as SearchInData from "./.mocks/search-in-data";
 import * as LargeDataset from "./.mocks/large-dataset";
-import * as WideDataSet from "./.mocks/wide-dataset";
 
 function prepareVisualization(query, type, name, options) {
   return cy
@@ -23,10 +22,7 @@ function prepareVisualization(query, type, name, options) {
       cy.get("body").type("{alt}D");
 
       // do some pre-checks here to ensure that visualization was created and is visible
-      cy.getByTestId("TableVisualization")
-        .should("exist")
-        .find("table")
-        .should("exist");
+      cy.getByTestId("TableVisualization").should("exist").find("table").should("exist");
 
       return cy.then(() => ({ queryId, visualizationId }));
     });
@@ -54,102 +50,38 @@ describe("Table", () => {
   });
 
   describe("Sorting data", () => {
-    beforeEach(function() {
+    beforeEach(function () {
       const { query, config } = MultiColumnSort;
       prepareVisualization(query, "TABLE", "Sort data", config).then(({ queryId, visualizationId }) => {
         this.queryId = queryId;
         this.visualizationId = visualizationId;
       });
     });
 
-    it("sorts data by a single column", function() {
-      cy.getByTestId("TableVisualization")
-        .find("table th")
-        .contains("c")
-        .should("exist")
-        .click();
+    it("sorts data by a single column", function () {
+      cy.getByTestId("TableVisualization").find("table th").contains("c").should("exist").click();
       cy.percySnapshot("Visualizations - Table (Single-column sort)", { widths: [viewportWidth] });
     });
 
-    it("sorts data by a multiple columns", function() {
-      cy.getByTestId("TableVisualization")
-        .find("table th")
-        .contains("a")
-        .should("exist")
-        .click();
+    it("sorts data by a multiple columns", function () {
+      cy.getByTestId("TableVisualization").find("table th").contains("a").should("exist").click();
 
       cy.get("body").type("{shift}", { release: false });
-      cy.getByTestId("TableVisualization")
-        .find("table th")
-        .contains("b")
-        .should("exist")
-        .click();
+      cy.getByTestId("TableVisualization").find("table th").contains("b").should("exist").click();
 
       cy.percySnapshot("Visualizations - Table (Multi-column sort)", { widths: [viewportWidth] });
     });
 
-    it("sorts data in reverse order", function() {
-      cy.getByTestId("TableVisualization")
-        .find("table th")
-        .contains("c")
-        .should("exist")
-        .click()
-        .click();
+    it("sorts data in reverse order", function () {
+      cy.getByTestId("TableVisualization").find("table th").contains("c").should("exist").click().click();
       cy.percySnapshot("Visualizations - Table (Single-column reverse sort)", { widths: [viewportWidth] });
     });
   });
 
-  describe("Fixing columns", () => {
-    it("fixes the correct number of columns", () => {
-      const { query, config } = WideDataSet;
-      prepareVisualization(query, "TABLE", "All cell types", config);
-      cy.getByTestId("EditVisualization").click();
-      cy.contains("span", "Grid").click();
-      cy.getByTestId("FixedColumns").click();
-      cy.contains(".ant-select-item-option-content", "1").click();
-      cy.contains("Save").click();
-      // eslint-disable-next-line cypress/no-unnecessary-waiting
-      cy.wait(500); //add some waiting to make sure table visualization is saved
-
-      cy.get(".ant-table-thead")
-        .find("th.ant-table-cell-fix-left")
-        .then(fixedCols => {
-          expect(fixedCols.length).to.equal(1);
-        });
-
-      cy.get(".ant-table-content").scrollTo("right", { duration: 1000 });
-      cy.get(".ant-table-content").scrollTo("left", { duration: 1000 });
-    });
-
-    it("doesn't let user fix too many columns", () => {
-      const { query, config } = MultiColumnSort;
-      prepareVisualization(query, "TABLE", "Test data", config);
-      cy.getByTestId("EditVisualization").click();
-      cy.contains("span", "Grid").click();
-      cy.getByTestId("FixedColumns").click();
-      cy.get(".ant-select-item-option-content");
-      cy.contains(".ant-select-item-option-content", "3").should("not.exist");
-      cy.contains(".ant-select-item-option-content", "4").should("not.exist");
-    });
-
-    it("doesn't cause issues when freezing column off of page", () => {
-      const { query, config } = WideDataSet;
-      prepareVisualization(query, "TABLE", "Test data", config);
-      cy.getByTestId("EditVisualization").click();
-      cy.contains("span", "Grid").click();
-      cy.getByTestId("FixedColumns").click();
-      cy.contains(".ant-select-item-option-content", "4").click();
-      cy.contains("Save").click();
-    });
-  });
-
   it("searches in multiple columns", () => {
     const { query, config } = SearchInData;
     prepareVisualization(query, "TABLE", "Search", config).then(({ visualizationId }) => {
-      cy.getByTestId("TableVisualization")
-        .find("table input")
-        .should("exist")
-        .type("test");
+      cy.getByTestId("TableVisualization").find("table input").should("exist").type("test");
       cy.percySnapshot("Visualizations - Table (Search in data)", { widths: [viewportWidth] });
     });
   });

diff --git a/client/cypress/support/visualizations/table.js b/client/cypress/support/visualizations/table.js
@@ -1,12 +1,10 @@
 export function expectTableToHaveLength(length) {
-  cy.getByTestId("TableVisualization")
-    .find("tbody tr.ant-table-row")
-    .should("have.length", length);
+  cy.getByTestId("TableVisualization").find("tbody tr").should("have.length", length);
 }
 
 export function expectFirstColumnToHaveMembers(values) {
   cy.getByTestId("TableVisualization")
-    .find("tbody tr.ant-table-row td:first-child")
-    .then($cell => Cypress.$.map($cell, item => Cypress.$(item).text()))
-    .then(firstColumnCells => expect(firstColumnCells).to.have.members(values));
+    .find("tbody tr td:first-child")
+    .then(($cell) => Cypress.$.map($cell, (item) => Cypress.$(item).text()))
+    .then((firstColumnCells) => expect(firstColumnCells).to.have.members(values));
 }
diff --git a/viz-lib/src/visualizations/table/Editor/GridSettings.tsx b/viz-lib/src/visualizations/table/Editor/GridSettings.tsx
@@ -1,51 +1,28 @@
 import { map } from "lodash";
-import React, { useState } from "react";
+import React from "react";
 import { Section, Select } from "@/components/visualizations/editor";
 import { EditorPropTypes } from "@/visualizations/prop-types";
 
 const ALLOWED_ITEM_PER_PAGE = [5, 10, 15, 20, 25, 50, 100, 150, 200, 250, 500];
 
-const ALLOWED_COLS_TO_FIX = [0, 1, 2, 3, 4]
-
 export default function GridSettings({ options, onOptionsChange }: any) {
-  const numCols = options.columns.length;
-  const maxColsToFix = Math.min(4, numCols - 1);
-
   return (
-    <React.Fragment>
-      {/* @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never' but its value is 'Element'. */}
-      <Section>
-        <Select
-          label="Items per page"
-          data-test="Table.ItemsPerPage"
-          defaultValue={options.itemsPerPage}
-          onChange={(itemsPerPage: any) => onOptionsChange({ itemsPerPage })}>
-          {map(ALLOWED_ITEM_PER_PAGE, value => (
-            // @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message
-            <Select.Option key={`ipp${value}`} value={value} data-test={`Table.ItemsPerPage.${value}`}>
-              {value}
-              {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
-            </Select.Option>
-          ))}
-        </Select>
-      </Section>
-      {/* @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never' but its value is 'Element'. */}
-      <Section>
-        <Select
-          label="Number of Columns to Fix in Place"
-          data-test="FixedColumns"
-          defaultValue={options.fixedColumns}
-          onChange={(fixedColumns: number) => {onOptionsChange({ fixedColumns })}}>
-          {map(ALLOWED_COLS_TO_FIX.slice(0, maxColsToFix + 1), value => (
-            // @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message
-            <Select.Option key={`fc${value}`} value={value}>
-              {value}
-              {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
-            </Select.Option>
-          ))}
-          </Select>
-      </Section>
-    </React.Fragment>
+    // @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message
+    <Section>
+      <Select
+        label="Items per page"
+        data-test="Table.ItemsPerPage"
+        defaultValue={options.itemsPerPage}
+        onChange={(itemsPerPage: any) => onOptionsChange({ itemsPerPage })}>
+        {map(ALLOWED_ITEM_PER_PAGE, value => (
+          // @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message
+          <Select.Option key={`ipp${value}`} value={value} data-test={`Table.ItemsPerPage.${value}`}>
+            {value}
+            {/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
+          </Select.Option>
+        ))}
+      </Select>
+    </Section>
   );
 }
 

diff --git a/viz-lib/src/visualizations/table/Editor/__snapshots__/ColumnsSettings.test.tsx.snap b/viz-lib/src/visualizations/table/Editor/__snapshots__/ColumnsSettings.test.tsx.snap
@@ -13,7 +13,6 @@ Object {
       ],
       "dateTimeFormat": undefined,
       "displayAs": "string",
-      "fixed": false,
       "highlightLinks": false,
       "imageHeight": "",
       "imageTitleTemplate": "{{ @ }}",
@@ -47,7 +46,6 @@ Object {
       ],
       "dateTimeFormat": undefined,
       "displayAs": "number",
-      "fixed": false,
       "highlightLinks": false,
       "imageHeight": "",
       "imageTitleTemplate": "{{ @ }}",
@@ -81,7 +79,6 @@ Object {
       ],
       "dateTimeFormat": undefined,
       "displayAs": "string",
-      "fixed": false,
       "highlightLinks": false,
       "imageHeight": "",
       "imageTitleTemplate": "{{ @ }}",
@@ -115,7 +112,6 @@ Object {
       ],
       "dateTimeFormat": undefined,
       "displayAs": "string",
-      "fixed": false,
       "highlightLinks": false,
       "imageHeight": "",
       "imageTitleTemplate": "{{ @ }}",
@@ -149,7 +145,6 @@ Object {
       ],
       "dateTimeFormat": undefined,
       "displayAs": "string",
-      "fixed": false,
       "highlightLinks": false,
       "imageHeight": "",
       "imageTitleTemplate": "{{ @ }}",

diff --git a/viz-lib/src/visualizations/table/Renderer.tsx b/viz-lib/src/visualizations/table/Renderer.tsx
@@ -84,13 +84,6 @@ export default function Renderer({ options, data }: any) {
   const [searchTerm, setSearchTerm] = useState("");
   const [orderBy, setOrderBy] = useState([]);
 
-  const columnsToFix = new Set<string>();
-  for (let i = 0; i < options.fixedColumns; i++) {
-    if (options.columns[i]) {
-      columnsToFix.add(options.columns[i].name);
-    }
-  }
-
   const searchColumns = useMemo(() => filter(options.columns, "allowSearch"), [options.columns]);
 
   const tableColumns = useMemo(() => {
@@ -104,7 +97,7 @@ export default function Renderer({ options, data }: any) {
       // Remove text selection - may occur accidentally
       // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
       document.getSelection().removeAllRanges();
-    }, columnsToFix);
+    });
   }, [options.columns, searchColumns, orderBy]);
 
   const preparedRows = useMemo(() => sortRows(filterRows(initRows(data.rows), searchTerm, searchColumns), orderBy), [
@@ -141,7 +134,6 @@ export default function Renderer({ options, data }: any) {
           showSizeChanger: false,
         }}
         showSorterTooltip={false}
-        scroll = {{x : 'max-content'}}
       />
     </div>
   );

diff --git a/viz-lib/src/visualizations/table/getOptions.ts b/viz-lib/src/visualizations/table/getOptions.ts
@@ -4,7 +4,6 @@ import { visualizationsSettings } from "@/visualizations/visualizationsSettings"
 const DEFAULT_OPTIONS = {
   itemsPerPage: 25,
   paginationSize: "default", // not editable through Editor
-  fixedColumns: 0,
 };
 
 const filterTypes = ["filter", "multi-filter", "multiFilter"];
@@ -57,7 +56,6 @@ function getDefaultColumnsOptions(columns: any) {
     // `string` cell options
     allowHTML: true,
     highlightLinks: false,
-    fixed: false,
   }));
 }
 

diff --git a/viz-lib/src/visualizations/table/renderer.less b/viz-lib/src/visualizations/table/renderer.less
@@ -21,6 +21,7 @@
         left: 0;
         top: 0;
         border-top: 0;
+        z-index: 1;
         background: #fafafa !important;
       }
     }
@@ -156,11 +157,3 @@
     color: @text-color-secondary;
   }
 }
-
-.ant-table-cell-fix-left{
-  background-color: #fff !important;
-}
-
-.ant-table-tbody > tr.ant-table-row:hover > .ant-table-cell-fix-left {
-  background-color: rgb(248, 249, 250) !important;
-}
diff --git a/viz-lib/src/visualizations/table/utils.tsx b/viz-lib/src/visualizations/table/utils.tsx
@@ -50,7 +50,7 @@ function getOrderByInfo(orderBy: any) {
   return result;
 }
 
-export function prepareColumns(columns: any, searchInput: any, orderBy: any, onOrderByChange: any, columnsToFix: Set<string>) {
+export function prepareColumns(columns: any, searchInput: any, orderBy: any, onOrderByChange: any) {
   columns = filter(columns, "visible");
   columns = sortBy(columns, "order");
 
@@ -96,7 +96,6 @@ export function prepareColumns(columns: any, searchInput: any, orderBy: any, onO
         }),
         onClick: (event: any) => onOrderByChange(toggleOrderBy(column.name, orderBy, event.shiftKey)),
       }),
-      fixed: columnsToFix.has(column.name) ? 'left' : false
     };
 
     // @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message