diff --git a/client/cypress/integration/visualizations/table/.mocks/wide-dataset.js b/client/cypress/integration/visualizations/table/.mocks/wide-dataset.js deleted file mode 100644 index e72384ec53..0000000000 --- a/client/cypress/integration/visualizations/table/.mocks/wide-dataset.js +++ /dev/null @@ -1,33 +0,0 @@ -const loremIpsum = -"Lorem ipsum dolor sit amet consectetur adipiscing elit" + -"sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"; - -export const query = ` - SELECT '${loremIpsum}' AS a, '${loremIpsum}' AS b, '${loremIpsum}' AS c, '${loremIpsum}' AS d, '${loremIpsum}' as e -`; - -export const config = { - itemsPerPage: 10, - columns: [ - { - name: "a", - displayAs: "string", - }, - { - name: "b", - displayAs: "string", - }, - { - name: "c", - displayAs: "string", - }, - { - name: "d", - displayAs: "string", - }, - { - name: "e", - displayAs: "string", - } - ] -} \ No newline at end of file diff --git a/client/cypress/integration/visualizations/table/table_spec.js b/client/cypress/integration/visualizations/table/table_spec.js index 2d499633d4..3191bc82b3 100644 --- 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,7 +50,7 @@ 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; @@ -62,94 +58,30 @@ describe("Table", () => { }); }); - 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 index 7b290a1250..42645ed270 100644 --- 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 index dc0688b135..73aa57ac21 100644 --- 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 ( - - {/* @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never' but its value is 'Element'. */} -
- -
- {/* @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never' but its value is 'Element'. */} -
- -
- + // @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 +
+ +
); } 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 index b2175a0c4d..669b2e57e0 100644 --- 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 index 6dbb57abd5..3812e82b82 100644 --- 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(); - 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'}} /> ); diff --git a/viz-lib/src/visualizations/table/getOptions.ts b/viz-lib/src/visualizations/table/getOptions.ts index 2c4a090e39..bcde21bbd6 100644 --- 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 index 16408381e1..1c538037ab 100644 --- 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; -} \ No newline at end of file diff --git a/viz-lib/src/visualizations/table/utils.tsx b/viz-lib/src/visualizations/table/utils.tsx index 64ceef1d30..298cdb7f96 100644 --- 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) { +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