Skip to content

Commit 79a4c4c

Browse files
eradmaneradman
authored
Revert "Adding ability to fix table columns in place (#7019)" (#7131)
1 parent 58a7438 commit 79a4c4c

File tree

9 files changed

+34
-183
lines changed

9 files changed

+34
-183
lines changed

‎client/cypress/integration/visualizations/table/.mocks/wide-dataset.js‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎client/cypress/integration/visualizations/table/table_spec.js‎

Lines changed: 10 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import * as AllCellTypes from "./.mocks/all-cell-types";
88
import * as MultiColumnSort from "./.mocks/multi-column-sort";
99
import * as SearchInData from "./.mocks/search-in-data";
1010
import * as LargeDataset from "./.mocks/large-dataset";
11-
import * as WideDataSet from "./.mocks/wide-dataset";
1211

1312
function prepareVisualization(query, type, name, options) {
1413
return cy
@@ -23,10 +22,7 @@ function prepareVisualization(query, type, name, options) {
2322
cy.get("body").type("{alt}D");
2423

2524
// do some pre-checks here to ensure that visualization was created and is visible
26-
cy.getByTestId("TableVisualization")
27-
.should("exist")
28-
.find("table")
29-
.should("exist");
25+
cy.getByTestId("TableVisualization").should("exist").find("table").should("exist");
3026

3127
return cy.then(() => ({ queryId, visualizationId }));
3228
});
@@ -54,102 +50,38 @@ describe("Table", () => {
5450
});
5551

5652
describe("Sorting data", () => {
57-
beforeEach(function() {
53+
beforeEach(function () {
5854
const { query, config } = MultiColumnSort;
5955
prepareVisualization(query, "TABLE", "Sort data", config).then(({ queryId, visualizationId }) => {
6056
this.queryId = queryId;
6157
this.visualizationId = visualizationId;
6258
});
6359
});
6460

65-
it("sorts data by a single column", function() {
66-
cy.getByTestId("TableVisualization")
67-
.find("table th")
68-
.contains("c")
69-
.should("exist")
70-
.click();
61+
it("sorts data by a single column", function () {
62+
cy.getByTestId("TableVisualization").find("table th").contains("c").should("exist").click();
7163
cy.percySnapshot("Visualizations - Table (Single-column sort)", { widths: [viewportWidth] });
7264
});
7365

74-
it("sorts data by a multiple columns", function() {
75-
cy.getByTestId("TableVisualization")
76-
.find("table th")
77-
.contains("a")
78-
.should("exist")
79-
.click();
66+
it("sorts data by a multiple columns", function () {
67+
cy.getByTestId("TableVisualization").find("table th").contains("a").should("exist").click();
8068

8169
cy.get("body").type("{shift}", { release: false });
82-
cy.getByTestId("TableVisualization")
83-
.find("table th")
84-
.contains("b")
85-
.should("exist")
86-
.click();
70+
cy.getByTestId("TableVisualization").find("table th").contains("b").should("exist").click();
8771

8872
cy.percySnapshot("Visualizations - Table (Multi-column sort)", { widths: [viewportWidth] });
8973
});
9074

91-
it("sorts data in reverse order", function() {
92-
cy.getByTestId("TableVisualization")
93-
.find("table th")
94-
.contains("c")
95-
.should("exist")
96-
.click()
97-
.click();
75+
it("sorts data in reverse order", function () {
76+
cy.getByTestId("TableVisualization").find("table th").contains("c").should("exist").click().click();
9877
cy.percySnapshot("Visualizations - Table (Single-column reverse sort)", { widths: [viewportWidth] });
9978
});
10079
});
10180

102-
describe("Fixing columns", () => {
103-
it("fixes the correct number of columns", () => {
104-
const { query, config } = WideDataSet;
105-
prepareVisualization(query, "TABLE", "All cell types", config);
106-
cy.getByTestId("EditVisualization").click();
107-
cy.contains("span", "Grid").click();
108-
cy.getByTestId("FixedColumns").click();
109-
cy.contains(".ant-select-item-option-content", "1").click();
110-
cy.contains("Save").click();
111-
// eslint-disable-next-line cypress/no-unnecessary-waiting
112-
cy.wait(500); //add some waiting to make sure table visualization is saved
113-
114-
cy.get(".ant-table-thead")
115-
.find("th.ant-table-cell-fix-left")
116-
.then(fixedCols => {
117-
expect(fixedCols.length).to.equal(1);
118-
});
119-
120-
cy.get(".ant-table-content").scrollTo("right", { duration: 1000 });
121-
cy.get(".ant-table-content").scrollTo("left", { duration: 1000 });
122-
});
123-
124-
it("doesn't let user fix too many columns", () => {
125-
const { query, config } = MultiColumnSort;
126-
prepareVisualization(query, "TABLE", "Test data", config);
127-
cy.getByTestId("EditVisualization").click();
128-
cy.contains("span", "Grid").click();
129-
cy.getByTestId("FixedColumns").click();
130-
cy.get(".ant-select-item-option-content");
131-
cy.contains(".ant-select-item-option-content", "3").should("not.exist");
132-
cy.contains(".ant-select-item-option-content", "4").should("not.exist");
133-
});
134-
135-
it("doesn't cause issues when freezing column off of page", () => {
136-
const { query, config } = WideDataSet;
137-
prepareVisualization(query, "TABLE", "Test data", config);
138-
cy.getByTestId("EditVisualization").click();
139-
cy.contains("span", "Grid").click();
140-
cy.getByTestId("FixedColumns").click();
141-
cy.contains(".ant-select-item-option-content", "4").click();
142-
cy.contains("Save").click();
143-
});
144-
});
145-
14681
it("searches in multiple columns", () => {
14782
const { query, config } = SearchInData;
14883
prepareVisualization(query, "TABLE", "Search", config).then(({ visualizationId }) => {
149-
cy.getByTestId("TableVisualization")
150-
.find("table input")
151-
.should("exist")
152-
.type("test");
84+
cy.getByTestId("TableVisualization").find("table input").should("exist").type("test");
15385
cy.percySnapshot("Visualizations - Table (Search in data)", { widths: [viewportWidth] });
15486
});
15587
});

‎client/cypress/support/visualizations/table.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
export function expectTableToHaveLength(length) {
2-
cy.getByTestId("TableVisualization")
3-
.find("tbody tr.ant-table-row")
4-
.should("have.length", length);
2+
cy.getByTestId("TableVisualization").find("tbody tr").should("have.length", length);
53
}
64

75
export function expectFirstColumnToHaveMembers(values) {
86
cy.getByTestId("TableVisualization")
9-
.find("tbody tr.ant-table-row td:first-child")
10-
.then($cell => Cypress.$.map($cell, item => Cypress.$(item).text()))
11-
.then(firstColumnCells => expect(firstColumnCells).to.have.members(values));
7+
.find("tbody tr td:first-child")
8+
.then(($cell) => Cypress.$.map($cell, (item) => Cypress.$(item).text()))
9+
.then((firstColumnCells) => expect(firstColumnCells).to.have.members(values));
1210
}

‎viz-lib/src/visualizations/table/Editor/GridSettings.tsx‎

Lines changed: 17 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,28 @@
11
import { map } from "lodash";
2-
import React, { useState } from "react";
2+
import React from "react";
33
import { Section, Select } from "@/components/visualizations/editor";
44
import { EditorPropTypes } from "@/visualizations/prop-types";
55

66
const ALLOWED_ITEM_PER_PAGE = [5, 10, 15, 20, 25, 50, 100, 150, 200, 250, 500];
77

8-
const ALLOWED_COLS_TO_FIX = [0, 1, 2, 3, 4]
9-
108
export default function GridSettings({ options, onOptionsChange }: any) {
11-
const numCols = options.columns.length;
12-
const maxColsToFix = Math.min(4, numCols - 1);
13-
149
return (
15-
<React.Fragment>
16-
{/* @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never' but its value is 'Element'. */}
17-
<Section>
18-
<Select
19-
label="Items per page"
20-
data-test="Table.ItemsPerPage"
21-
defaultValue={options.itemsPerPage}
22-
onChange={(itemsPerPage: any) => onOptionsChange({ itemsPerPage })}>
23-
{map(ALLOWED_ITEM_PER_PAGE, value => (
24-
// @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message
25-
<Select.Option key={`ipp${value}`} value={value} data-test={`Table.ItemsPerPage.${value}`}>
26-
{value}
27-
{/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
28-
</Select.Option>
29-
))}
30-
</Select>
31-
</Section>
32-
{/* @ts-expect-error ts-migrate(2745) FIXME: This JSX tag's 'children' prop expects type 'never' but its value is 'Element'. */}
33-
<Section>
34-
<Select
35-
label="Number of Columns to Fix in Place"
36-
data-test="FixedColumns"
37-
defaultValue={options.fixedColumns}
38-
onChange={(fixedColumns: number) => {onOptionsChange({ fixedColumns })}}>
39-
{map(ALLOWED_COLS_TO_FIX.slice(0, maxColsToFix + 1), value => (
40-
// @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message
41-
<Select.Option key={`fc${value}`} value={value}>
42-
{value}
43-
{/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
44-
</Select.Option>
45-
))}
46-
</Select>
47-
</Section>
48-
</React.Fragment>
10+
// @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
11+
<Section>
12+
<Select
13+
label="Items per page"
14+
data-test="Table.ItemsPerPage"
15+
defaultValue={options.itemsPerPage}
16+
onChange={(itemsPerPage: any) => onOptionsChange({ itemsPerPage })}>
17+
{map(ALLOWED_ITEM_PER_PAGE, value => (
18+
// @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message
19+
<Select.Option key={`ipp${value}`} value={value} data-test={`Table.ItemsPerPage.${value}`}>
20+
{value}
21+
{/* @ts-expect-error ts-migrate(2339) FIXME: Property 'Option' does not exist on type '({ class... Remove this comment to see the full error message */}
22+
</Select.Option>
23+
))}
24+
</Select>
25+
</Section>
4926
);
5027
}
5128

‎viz-lib/src/visualizations/table/Editor/__snapshots__/ColumnsSettings.test.tsx.snap‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ Object {
1313
],
1414
"dateTimeFormat": undefined,
1515
"displayAs": "string",
16-
"fixed": false,
1716
"highlightLinks": false,
1817
"imageHeight": "",
1918
"imageTitleTemplate": "{{ @ }}",
@@ -47,7 +46,6 @@ Object {
4746
],
4847
"dateTimeFormat": undefined,
4948
"displayAs": "number",
50-
"fixed": false,
5149
"highlightLinks": false,
5250
"imageHeight": "",
5351
"imageTitleTemplate": "{{ @ }}",
@@ -81,7 +79,6 @@ Object {
8179
],
8280
"dateTimeFormat": undefined,
8381
"displayAs": "string",
84-
"fixed": false,
8582
"highlightLinks": false,
8683
"imageHeight": "",
8784
"imageTitleTemplate": "{{ @ }}",
@@ -115,7 +112,6 @@ Object {
115112
],
116113
"dateTimeFormat": undefined,
117114
"displayAs": "string",
118-
"fixed": false,
119115
"highlightLinks": false,
120116
"imageHeight": "",
121117
"imageTitleTemplate": "{{ @ }}",
@@ -149,7 +145,6 @@ Object {
149145
],
150146
"dateTimeFormat": undefined,
151147
"displayAs": "string",
152-
"fixed": false,
153148
"highlightLinks": false,
154149
"imageHeight": "",
155150
"imageTitleTemplate": "{{ @ }}",

‎viz-lib/src/visualizations/table/Renderer.tsx‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -84,13 +84,6 @@ export default function Renderer({ options, data }: any) {
8484
const [searchTerm, setSearchTerm] = useState("");
8585
const [orderBy, setOrderBy] = useState([]);
8686

87-
const columnsToFix = new Set<string>();
88-
for (let i = 0; i < options.fixedColumns; i++) {
89-
if (options.columns[i]) {
90-
columnsToFix.add(options.columns[i].name);
91-
}
92-
}
93-
9487
const searchColumns = useMemo(() => filter(options.columns, "allowSearch"), [options.columns]);
9588

9689
const tableColumns = useMemo(() => {
@@ -104,7 +97,7 @@ export default function Renderer({ options, data }: any) {
10497
// Remove text selection - may occur accidentally
10598
// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
10699
document.getSelection().removeAllRanges();
107-
}, columnsToFix);
100+
});
108101
}, [options.columns, searchColumns, orderBy]);
109102

110103
const preparedRows = useMemo(() => sortRows(filterRows(initRows(data.rows), searchTerm, searchColumns), orderBy), [
@@ -141,7 +134,6 @@ export default function Renderer({ options, data }: any) {
141134
showSizeChanger: false,
142135
}}
143136
showSorterTooltip={false}
144-
scroll = {{x : 'max-content'}}
145137
/>
146138
</div>
147139
);

‎viz-lib/src/visualizations/table/getOptions.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { visualizationsSettings } from "@/visualizations/visualizationsSettings"
44
const DEFAULT_OPTIONS = {
55
itemsPerPage: 25,
66
paginationSize: "default", // not editable through Editor
7-
fixedColumns: 0,
87
};
98

109
const filterTypes = ["filter", "multi-filter", "multiFilter"];
@@ -57,7 +56,6 @@ function getDefaultColumnsOptions(columns: any) {
5756
// `string` cell options
5857
allowHTML: true,
5958
highlightLinks: false,
60-
fixed: false,
6159
}));
6260
}
6361

‎viz-lib/src/visualizations/table/renderer.less‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
left: 0;
2222
top: 0;
2323
border-top: 0;
24+
z-index: 1;
2425
background: #fafafa !important;
2526
}
2627
}
@@ -156,11 +157,3 @@
156157
color: @text-color-secondary;
157158
}
158159
}
159-
160-
.ant-table-cell-fix-left{
161-
background-color: #fff !important;
162-
}
163-
164-
.ant-table-tbody > tr.ant-table-row:hover > .ant-table-cell-fix-left {
165-
background-color: rgb(248, 249, 250) !important;
166-
}

‎viz-lib/src/visualizations/table/utils.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ function getOrderByInfo(orderBy: any) {
5050
return result;
5151
}
5252

53-
export function prepareColumns(columns: any, searchInput: any, orderBy: any, onOrderByChange: any, columnsToFix: Set<string>) {
53+
export function prepareColumns(columns: any, searchInput: any, orderBy: any, onOrderByChange: any) {
5454
columns = filter(columns, "visible");
5555
columns = sortBy(columns, "order");
5656

@@ -96,7 +96,6 @@ export function prepareColumns(columns: any, searchInput: any, orderBy: any, onO
9696
}),
9797
onClick: (event: any) => onOrderByChange(toggleOrderBy(column.name, orderBy, event.shiftKey)),
9898
}),
99-
fixed: columnsToFix.has(column.name) ? 'left' : false
10099
};
101100

102101
// @ts-expect-error ts-migrate(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message

0 commit comments

Comments
 (0)