From a1cc540e1ac1eb15c3ca7a45fd40947221f325e8 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Fri, 25 Oct 2024 15:30:30 +0200 Subject: [PATCH 01/12] [Discover][UnifiedDataTable] Enable drag&drop for grid columns --- packages/kbn-unified-data-table/src/components/data_table.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx index 662c8526dd567..9ee6b2261bd4e 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.tsx @@ -870,6 +870,7 @@ export const UnifiedDataTable = ({ const schemaDetectors = useMemo(() => getSchemaDetectors(), []); const columnsVisibility = useMemo( () => ({ + canDragAndDropColumns: true, visibleColumns, setVisibleColumns: (newColumns: string[]) => { const dontModifyColumns = !shouldPrependTimeFieldColumn(newColumns); From 483d40aac8514acfeb702d6b2608235c410b408d Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Mon, 28 Oct 2024 11:02:20 +0100 Subject: [PATCH 02/12] [Discover] Add a test --- .../src/components/data_table.test.tsx | 179 ++++++++++-------- 1 file changed, 100 insertions(+), 79 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/data_table.test.tsx b/packages/kbn-unified-data-table/src/components/data_table.test.tsx index 13304d4661cc0..3a7059002e277 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.test.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.test.tsx @@ -579,16 +579,16 @@ describe('UnifiedDataTable', () => { }); expect(component.find(EuiDataGrid).last().prop('sorting')).toMatchInlineSnapshot(` - Object { - "columns": Array [ - Object { - "direction": "desc", - "id": "message", - }, - ], - "onSort": [Function], - } - `); + Object { + "columns": Array [ + Object { + "direction": "desc", + "id": "message", + }, + ], + "onSort": [Function], + } + `); }, EXTENDED_JEST_TIMEOUT ); @@ -607,20 +607,20 @@ describe('UnifiedDataTable', () => { }); expect(component.find(EuiDataGrid).last().prop('sorting')).toMatchInlineSnapshot(` - Object { - "columns": Array [ - Object { - "direction": "desc", - "id": "bytes", - }, - Object { - "direction": "desc", - "id": "message", - }, - ], - "onSort": [Function], - } - `); + Object { + "columns": Array [ + Object { + "direction": "desc", + "id": "bytes", + }, + Object { + "direction": "desc", + "id": "message", + }, + ], + "onSort": [Function], + } + `); }, EXTENDED_JEST_TIMEOUT ); @@ -639,30 +639,30 @@ describe('UnifiedDataTable', () => { expect(component.find(EuiDataGrid).first().prop('toolbarVisibility')) .toMatchInlineSnapshot(` - Object { - "additionalControls": null, - "showColumnSelector": false, - "showDisplaySelector": Object { - "additionalDisplaySettings": - - , - "allowDensity": false, - "allowResetButton": false, - "allowRowHeight": false, - }, - "showFullScreenSelector": true, - "showSortSelector": true, - } - `); + Object { + "additionalControls": null, + "showColumnSelector": false, + "showDisplaySelector": Object { + "additionalDisplaySettings": + + , + "allowDensity": false, + "allowResetButton": false, + "allowRowHeight": false, + }, + "showFullScreenSelector": true, + "showSortSelector": true, + } + `); }, EXTENDED_JEST_TIMEOUT ); @@ -678,29 +678,29 @@ describe('UnifiedDataTable', () => { expect(component.find(EuiDataGrid).first().prop('toolbarVisibility')) .toMatchInlineSnapshot(` - Object { - "additionalControls": null, - "showColumnSelector": false, - "showDisplaySelector": Object { - "additionalDisplaySettings": - - , - "allowDensity": false, - "allowResetButton": false, - "allowRowHeight": false, - }, - "showFullScreenSelector": true, - "showSortSelector": true, - } - `); + Object { + "additionalControls": null, + "showColumnSelector": false, + "showDisplaySelector": Object { + "additionalDisplaySettings": + + , + "allowDensity": false, + "allowResetButton": false, + "allowRowHeight": false, + }, + "showFullScreenSelector": true, + "showSortSelector": true, + } + `); }, EXTENDED_JEST_TIMEOUT ); @@ -716,14 +716,14 @@ describe('UnifiedDataTable', () => { expect(component.find(EuiDataGrid).first().prop('toolbarVisibility')) .toMatchInlineSnapshot(` - Object { - "additionalControls": null, - "showColumnSelector": false, - "showDisplaySelector": undefined, - "showFullScreenSelector": true, - "showSortSelector": true, - } - `); + Object { + "additionalControls": null, + "showColumnSelector": false, + "showDisplaySelector": undefined, + "showFullScreenSelector": true, + "showSortSelector": true, + } + `); }, EXTENDED_JEST_TIMEOUT ); @@ -1354,5 +1354,26 @@ describe('UnifiedDataTable', () => { }, EXTENDED_JEST_TIMEOUT ); + + it( + 'should have columnVisibility configuration', + async () => { + const component = await getComponent({ + ...getProps(), + columns: ['message'], + }); + expect(component.find(EuiDataGrid).last().prop('columnVisibility')).toMatchInlineSnapshot(` + Object { + "canDragAndDropColumns": true, + "setVisibleColumns": [Function], + "visibleColumns": Array [ + "@timestamp", + "message", + ], + } + `); + }, + EXTENDED_JEST_TIMEOUT + ); }); }); From ab766d405033ef659cddba7eeee7286fca3573e4 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Mon, 28 Oct 2024 11:41:27 +0100 Subject: [PATCH 03/12] [Discover] Update tests --- .../_data_grid_column_widths.ts | 4 ++++ test/functional/services/data_grid.ts | 20 +++++++++++++++++-- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/test/functional/apps/discover/group2_data_grid3/_data_grid_column_widths.ts b/test/functional/apps/discover/group2_data_grid3/_data_grid_column_widths.ts index ba6f64d929fb1..a56248d2174c3 100644 --- a/test/functional/apps/discover/group2_data_grid3/_data_grid_column_widths.ts +++ b/test/functional/apps/discover/group2_data_grid3/_data_grid_column_widths.ts @@ -56,11 +56,15 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { it('should not show reset width button for auto width column', async () => { await unifiedFieldList.clickFieldListItemAdd('@message'); + await header.waitUntilLoadingHasFinished(); + await discover.waitUntilSearchingHasFinished(); expect(await dataGrid.resetColumnWidthExists('@message')).to.be(false); }); it('should show reset width button for absolute width column, and allow resetting to auto width', async () => { await unifiedFieldList.clickFieldListItemAdd('@message'); + await header.waitUntilLoadingHasFinished(); + await discover.waitUntilSearchingHasFinished(); await testResizeColumn('@message'); }); diff --git a/test/functional/services/data_grid.ts b/test/functional/services/data_grid.ts index 07a723857088c..9e60296754454 100644 --- a/test/functional/services/data_grid.ts +++ b/test/functional/services/data_grid.ts @@ -102,9 +102,25 @@ export class DataGridService extends FtrService { public async resizeColumn(field: string, delta: number) { const header = await this.getHeaderElement(field); const originalWidth = (await header.getSize()).width; - const resizer = await header.findByCssSelector( - this.testSubjects.getCssSelector('dataGridColumnResizer') + const headerDraggableColumns = await this.find.allByCssSelector( + '[data-test-subj="euiDataGridHeaderDroppable"] > div' ); + // searching for a common parent of the field column header and its resizer + const fieldHeader: WebElementWrapper | null | undefined = ( + await Promise.all( + headerDraggableColumns.map(async (column) => { + const hasFieldColumn = + (await column.findAllByCssSelector(`[data-gridcell-column-id="${field}"]`)).length > 0; + return hasFieldColumn ? column : null; + }) + ) + ).find(Boolean); + const resizer = await fieldHeader?.findByTestSubject('dataGridColumnResizer'); + + if (!fieldHeader || !resizer) { + throw new Error(`Unable to find column resizer for field ${field}`); + } + await this.browser.dragAndDrop({ location: resizer }, { location: { x: delta, y: 0 } }); return { originalWidth, newWidth: (await header.getSize()).width }; } From 3fbaecf31d54cef376e6aecda0c0f0b0bb1d6d77 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Mon, 28 Oct 2024 13:22:22 +0100 Subject: [PATCH 04/12] [Discover] Update styles --- .../kbn-unified-data-table/src/components/data_table.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/kbn-unified-data-table/src/components/data_table.scss b/packages/kbn-unified-data-table/src/components/data_table.scss index 6093659d487d6..58db50be64f57 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.scss +++ b/packages/kbn-unified-data-table/src/components/data_table.scss @@ -99,6 +99,10 @@ .euiDataGridHeaderCell__content { white-space: pre-wrap; } + + .euiDataGridHeaderCell__draggableIcon { + align-self: center; + } } .unifiedDataTable__table { From 7c71840333919abe2f0910d567bed1d7e4e39e19 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Mon, 28 Oct 2024 13:29:46 +0100 Subject: [PATCH 05/12] [Discover] Update code style --- .../src/components/data_table.test.tsx | 158 +++++++++--------- 1 file changed, 79 insertions(+), 79 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/data_table.test.tsx b/packages/kbn-unified-data-table/src/components/data_table.test.tsx index 3a7059002e277..2df80780afbaa 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.test.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.test.tsx @@ -579,16 +579,16 @@ describe('UnifiedDataTable', () => { }); expect(component.find(EuiDataGrid).last().prop('sorting')).toMatchInlineSnapshot(` - Object { - "columns": Array [ - Object { - "direction": "desc", - "id": "message", - }, - ], - "onSort": [Function], - } - `); + Object { + "columns": Array [ + Object { + "direction": "desc", + "id": "message", + }, + ], + "onSort": [Function], + } + `); }, EXTENDED_JEST_TIMEOUT ); @@ -607,20 +607,20 @@ describe('UnifiedDataTable', () => { }); expect(component.find(EuiDataGrid).last().prop('sorting')).toMatchInlineSnapshot(` - Object { - "columns": Array [ - Object { - "direction": "desc", - "id": "bytes", - }, - Object { - "direction": "desc", - "id": "message", - }, - ], - "onSort": [Function], - } - `); + Object { + "columns": Array [ + Object { + "direction": "desc", + "id": "bytes", + }, + Object { + "direction": "desc", + "id": "message", + }, + ], + "onSort": [Function], + } + `); }, EXTENDED_JEST_TIMEOUT ); @@ -639,30 +639,30 @@ describe('UnifiedDataTable', () => { expect(component.find(EuiDataGrid).first().prop('toolbarVisibility')) .toMatchInlineSnapshot(` - Object { - "additionalControls": null, - "showColumnSelector": false, - "showDisplaySelector": Object { - "additionalDisplaySettings": - - , - "allowDensity": false, - "allowResetButton": false, - "allowRowHeight": false, - }, - "showFullScreenSelector": true, - "showSortSelector": true, - } - `); + Object { + "additionalControls": null, + "showColumnSelector": false, + "showDisplaySelector": Object { + "additionalDisplaySettings": + + , + "allowDensity": false, + "allowResetButton": false, + "allowRowHeight": false, + }, + "showFullScreenSelector": true, + "showSortSelector": true, + } + `); }, EXTENDED_JEST_TIMEOUT ); @@ -678,29 +678,29 @@ describe('UnifiedDataTable', () => { expect(component.find(EuiDataGrid).first().prop('toolbarVisibility')) .toMatchInlineSnapshot(` - Object { - "additionalControls": null, - "showColumnSelector": false, - "showDisplaySelector": Object { - "additionalDisplaySettings": - - , - "allowDensity": false, - "allowResetButton": false, - "allowRowHeight": false, - }, - "showFullScreenSelector": true, - "showSortSelector": true, - } - `); + Object { + "additionalControls": null, + "showColumnSelector": false, + "showDisplaySelector": Object { + "additionalDisplaySettings": + + , + "allowDensity": false, + "allowResetButton": false, + "allowRowHeight": false, + }, + "showFullScreenSelector": true, + "showSortSelector": true, + } + `); }, EXTENDED_JEST_TIMEOUT ); @@ -716,14 +716,14 @@ describe('UnifiedDataTable', () => { expect(component.find(EuiDataGrid).first().prop('toolbarVisibility')) .toMatchInlineSnapshot(` - Object { - "additionalControls": null, - "showColumnSelector": false, - "showDisplaySelector": undefined, - "showFullScreenSelector": true, - "showSortSelector": true, - } - `); + Object { + "additionalControls": null, + "showColumnSelector": false, + "showDisplaySelector": undefined, + "showFullScreenSelector": true, + "showSortSelector": true, + } + `); }, EXTENDED_JEST_TIMEOUT ); From a22034da7e9c03cd068cb0b98fba78a1a856c624 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Mon, 28 Oct 2024 13:32:30 +0100 Subject: [PATCH 06/12] [Discover] Update code style --- .../src/components/data_table.test.tsx | 158 +++++++++--------- 1 file changed, 79 insertions(+), 79 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/data_table.test.tsx b/packages/kbn-unified-data-table/src/components/data_table.test.tsx index 2df80780afbaa..2091b5fe72759 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.test.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.test.tsx @@ -579,16 +579,16 @@ describe('UnifiedDataTable', () => { }); expect(component.find(EuiDataGrid).last().prop('sorting')).toMatchInlineSnapshot(` - Object { - "columns": Array [ - Object { - "direction": "desc", - "id": "message", - }, - ], - "onSort": [Function], - } - `); + Object { + "columns": Array [ + Object { + "direction": "desc", + "id": "message", + }, + ], + "onSort": [Function], + } + `); }, EXTENDED_JEST_TIMEOUT ); @@ -607,20 +607,20 @@ describe('UnifiedDataTable', () => { }); expect(component.find(EuiDataGrid).last().prop('sorting')).toMatchInlineSnapshot(` - Object { - "columns": Array [ - Object { - "direction": "desc", - "id": "bytes", - }, - Object { - "direction": "desc", - "id": "message", - }, - ], - "onSort": [Function], - } - `); + Object { + "columns": Array [ + Object { + "direction": "desc", + "id": "bytes", + }, + Object { + "direction": "desc", + "id": "message", + }, + ], + "onSort": [Function], + } + `); }, EXTENDED_JEST_TIMEOUT ); @@ -639,30 +639,30 @@ describe('UnifiedDataTable', () => { expect(component.find(EuiDataGrid).first().prop('toolbarVisibility')) .toMatchInlineSnapshot(` - Object { - "additionalControls": null, - "showColumnSelector": false, - "showDisplaySelector": Object { - "additionalDisplaySettings": - - , - "allowDensity": false, - "allowResetButton": false, - "allowRowHeight": false, - }, - "showFullScreenSelector": true, - "showSortSelector": true, - } - `); + Object { + "additionalControls": null, + "showColumnSelector": false, + "showDisplaySelector": Object { + "additionalDisplaySettings": + + , + "allowDensity": false, + "allowResetButton": false, + "allowRowHeight": false, + }, + "showFullScreenSelector": true, + "showSortSelector": true, + } + `); }, EXTENDED_JEST_TIMEOUT ); @@ -678,29 +678,29 @@ describe('UnifiedDataTable', () => { expect(component.find(EuiDataGrid).first().prop('toolbarVisibility')) .toMatchInlineSnapshot(` - Object { - "additionalControls": null, - "showColumnSelector": false, - "showDisplaySelector": Object { - "additionalDisplaySettings": - - , - "allowDensity": false, - "allowResetButton": false, - "allowRowHeight": false, - }, - "showFullScreenSelector": true, - "showSortSelector": true, - } - `); + Object { + "additionalControls": null, + "showColumnSelector": false, + "showDisplaySelector": Object { + "additionalDisplaySettings": + + , + "allowDensity": false, + "allowResetButton": false, + "allowRowHeight": false, + }, + "showFullScreenSelector": true, + "showSortSelector": true, + } + `); }, EXTENDED_JEST_TIMEOUT ); @@ -716,14 +716,14 @@ describe('UnifiedDataTable', () => { expect(component.find(EuiDataGrid).first().prop('toolbarVisibility')) .toMatchInlineSnapshot(` - Object { - "additionalControls": null, - "showColumnSelector": false, - "showDisplaySelector": undefined, - "showFullScreenSelector": true, - "showSortSelector": true, - } - `); + Object { + "additionalControls": null, + "showColumnSelector": false, + "showDisplaySelector": undefined, + "showFullScreenSelector": true, + "showSortSelector": true, + } + `); }, EXTENDED_JEST_TIMEOUT ); From 4fa0a4e2d339010b5724b368c7535a01ff041b7a Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Mon, 28 Oct 2024 14:11:20 +0100 Subject: [PATCH 07/12] [Discover] Update styles --- .../kbn-unified-data-table/src/components/data_table.scss | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/data_table.scss b/packages/kbn-unified-data-table/src/components/data_table.scss index 58db50be64f57..124d8c5b05c6b 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.scss +++ b/packages/kbn-unified-data-table/src/components/data_table.scss @@ -42,10 +42,6 @@ .euiDataGridHeaderCell { align-items: start; - - .euiPopover[class*='euiDataGridHeaderCell__popover'] { - align-self: center; - } } .euiDataGrid--bordersHorizontal .euiDataGridHeader { @@ -101,7 +97,7 @@ } .euiDataGridHeaderCell__draggableIcon { - align-self: center; + padding-top: 2px; } } From 63acdb1825dd20086cff8ea3eefb18febc8dd474 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Mon, 28 Oct 2024 14:28:50 +0100 Subject: [PATCH 08/12] [Discover] Update styles --- .../src/components/data_table.scss | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/data_table.scss b/packages/kbn-unified-data-table/src/components/data_table.scss index 124d8c5b05c6b..4d3ff585977ce 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.scss +++ b/packages/kbn-unified-data-table/src/components/data_table.scss @@ -41,7 +41,15 @@ } .euiDataGridHeaderCell { - align-items: start; + align-items: center; + + .euiPopover[class*='euiDataGridHeaderCell__popover'] { + align-self: center; + } + } + + .euiDataGridHeaderCell__draggableIcon { + align-self: center; } .euiDataGrid--bordersHorizontal .euiDataGridHeader { @@ -95,10 +103,6 @@ .euiDataGridHeaderCell__content { white-space: pre-wrap; } - - .euiDataGridHeaderCell__draggableIcon { - padding-top: 2px; - } } .unifiedDataTable__table { From 79463014541a8eb9f4d467248a74ce55396654ad Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Wed, 30 Oct 2024 17:50:42 +0100 Subject: [PATCH 09/12] [Discover] Update styles --- .../data_table_columns.test.tsx.snap | 45 +++++++++++++++++++ .../src/components/data_table.scss | 26 ++++++----- .../src/components/data_table_columns.tsx | 1 + 3 files changed, 60 insertions(+), 12 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/__snapshots__/data_table_columns.test.tsx.snap b/packages/kbn-unified-data-table/src/components/__snapshots__/data_table_columns.test.tsx.snap index bd28bfc354f9f..fd1ad71558aa5 100644 --- a/packages/kbn-unified-data-table/src/components/__snapshots__/data_table_columns.test.tsx.snap +++ b/packages/kbn-unified-data-table/src/components/__snapshots__/data_table_columns.test.tsx.snap @@ -48,6 +48,9 @@ Array [ test , "displayAsText": "extension", + "displayHeaderCellProps": Object { + "className": "unifiedDataTable__headerCell", + }, "id": "extension", "isSortable": true, "schema": "string", @@ -332,6 +335,9 @@ Array [ headerRowHeight={5} />, "displayAsText": "message", + "displayHeaderCellProps": Object { + "className": "unifiedDataTable__headerCell", + }, "id": "message", "isSortable": true, "schema": "string", @@ -589,6 +595,9 @@ Array [ headerRowHeight={5} />, "displayAsText": "timestamp", + "displayHeaderCellProps": Object { + "className": "unifiedDataTable__headerCell", + }, "id": "timestamp", "initialWidth": 212, "isSortable": true, @@ -837,6 +846,9 @@ Array [ showColumnTokens={true} />, "displayAsText": "extension", + "displayHeaderCellProps": Object { + "className": "unifiedDataTable__headerCell", + }, "id": "extension", "isSortable": false, "schema": "string", @@ -1082,6 +1094,9 @@ Array [ showColumnTokens={true} />, "displayAsText": "message", + "displayHeaderCellProps": Object { + "className": "unifiedDataTable__headerCell", + }, "id": "message", "isSortable": false, "schema": "string", @@ -1372,6 +1387,9 @@ Array [ showColumnTokens={true} />, "displayAsText": "extension", + "displayHeaderCellProps": Object { + "className": "unifiedDataTable__headerCell", + }, "id": "extension", "isSortable": false, "schema": "string", @@ -1655,6 +1673,9 @@ Array [ showColumnTokens={true} />, "displayAsText": "message", + "displayHeaderCellProps": Object { + "className": "unifiedDataTable__headerCell", + }, "id": "message", "isSortable": false, "schema": "string", @@ -1819,6 +1840,9 @@ Array [ headerRowHeight={5} />, "displayAsText": "extension", + "displayHeaderCellProps": Object { + "className": "unifiedDataTable__headerCell", + }, "id": "extension", "isSortable": false, "schema": "string", @@ -1976,6 +2000,9 @@ Array [ headerRowHeight={5} />, "displayAsText": "message", + "displayHeaderCellProps": Object { + "className": "unifiedDataTable__headerCell", + }, "id": "message", "isSortable": false, "schema": "string", @@ -2191,6 +2218,9 @@ Array [ headerRowHeight={5} />, "displayAsText": "timestamp", + "displayHeaderCellProps": Object { + "className": "unifiedDataTable__headerCell", + }, "id": "timestamp", "initialWidth": 212, "isSortable": true, @@ -2396,6 +2426,9 @@ Array [ headerRowHeight={5} />, "displayAsText": "extension", + "displayHeaderCellProps": Object { + "className": "unifiedDataTable__headerCell", + }, "id": "extension", "isSortable": false, "schema": "string", @@ -2598,6 +2631,9 @@ Array [ headerRowHeight={5} />, "displayAsText": "message", + "displayHeaderCellProps": Object { + "className": "unifiedDataTable__headerCell", + }, "id": "message", "isSortable": false, "schema": "string", @@ -2823,6 +2859,9 @@ Array [ headerRowHeight={5} />, "displayAsText": "timestamp", + "displayHeaderCellProps": Object { + "className": "unifiedDataTable__headerCell", + }, "id": "timestamp", "initialWidth": 212, "isSortable": true, @@ -3043,6 +3082,9 @@ Array [ headerRowHeight={5} />, "displayAsText": "extension", + "displayHeaderCellProps": Object { + "className": "unifiedDataTable__headerCell", + }, "id": "extension", "isSortable": true, "schema": "string", @@ -3262,6 +3304,9 @@ Array [ headerRowHeight={5} />, "displayAsText": "message", + "displayHeaderCellProps": Object { + "className": "unifiedDataTable__headerCell", + }, "id": "message", "isSortable": true, "schema": "string", diff --git a/packages/kbn-unified-data-table/src/components/data_table.scss b/packages/kbn-unified-data-table/src/components/data_table.scss index 4d3ff585977ce..379b95019c634 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.scss +++ b/packages/kbn-unified-data-table/src/components/data_table.scss @@ -40,18 +40,6 @@ background: transparent; } - .euiDataGridHeaderCell { - align-items: center; - - .euiPopover[class*='euiDataGridHeaderCell__popover'] { - align-self: center; - } - } - - .euiDataGridHeaderCell__draggableIcon { - align-self: center; - } - .euiDataGrid--bordersHorizontal .euiDataGridHeader { border-top: none; } @@ -105,6 +93,20 @@ } } +// Custom styles for data grid header cell. +// It can also be inside a portal (outside of `unifiedDataTable__inner`) when dragged. +.unifiedDataTable__headerCell { + align-items: start; + + .euiDataGridHeaderCell__draggableIcon { + padding-block: 2px // to align with a token height + } + + .euiDataGridHeaderCell__button { + margin-block: -$euiSizeXS; // to override Eui value for Density "Expanded" + } +} + .unifiedDataTable__table { flex-grow: 1; flex-shrink: 1; diff --git a/packages/kbn-unified-data-table/src/components/data_table_columns.tsx b/packages/kbn-unified-data-table/src/components/data_table_columns.tsx index 985a5db9f2178..8f1503ade8a7c 100644 --- a/packages/kbn-unified-data-table/src/components/data_table_columns.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table_columns.tsx @@ -258,6 +258,7 @@ function buildEuiGridColumn({ }, cellActions, visibleCellActions, + displayHeaderCellProps: { className: 'unifiedDataTable__headerCell' }, }; if (column.id === dataView.timeFieldName) { From 7967c37883e17b26ebcb65a0abb7d8fecfb269f5 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Fri, 1 Nov 2024 10:17:23 +0100 Subject: [PATCH 10/12] [Discover] Update code style --- packages/kbn-unified-data-table/src/components/data_table.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/kbn-unified-data-table/src/components/data_table.scss b/packages/kbn-unified-data-table/src/components/data_table.scss index 379b95019c634..f530e870665f8 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.scss +++ b/packages/kbn-unified-data-table/src/components/data_table.scss @@ -99,7 +99,7 @@ align-items: start; .euiDataGridHeaderCell__draggableIcon { - padding-block: 2px // to align with a token height + padding-block: $euiSizeXS / 2; // to align with a token height } .euiDataGridHeaderCell__button { From 79785246fc3666f664e0fecbb7e3eaa75ece70d6 Mon Sep 17 00:00:00 2001 From: Julia Rechkunova Date: Tue, 5 Nov 2024 12:49:40 +0100 Subject: [PATCH 11/12] [Discover] Switch to opt-in prop --- .../src/components/data_table.test.tsx | 23 +++++++++++++++++++ .../src/components/data_table.tsx | 15 ++++++++++-- .../discover_grid/discover_grid.tsx | 1 + 3 files changed, 37 insertions(+), 2 deletions(-) diff --git a/packages/kbn-unified-data-table/src/components/data_table.test.tsx b/packages/kbn-unified-data-table/src/components/data_table.test.tsx index 2091b5fe72759..f440c2845adaa 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.test.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.test.tsx @@ -1361,6 +1361,7 @@ describe('UnifiedDataTable', () => { const component = await getComponent({ ...getProps(), columns: ['message'], + canDragAndDropColumns: true, }); expect(component.find(EuiDataGrid).last().prop('columnVisibility')).toMatchInlineSnapshot(` Object { @@ -1375,5 +1376,27 @@ describe('UnifiedDataTable', () => { }, EXTENDED_JEST_TIMEOUT ); + + it( + 'should disable drag&drop if Summary is present', + async () => { + const component = await getComponent({ + ...getProps(), + columns: [], + canDragAndDropColumns: true, + }); + expect(component.find(EuiDataGrid).last().prop('columnVisibility')).toMatchInlineSnapshot(` + Object { + "canDragAndDropColumns": false, + "setVisibleColumns": [Function], + "visibleColumns": Array [ + "@timestamp", + "_source", + ], + } + `); + }, + EXTENDED_JEST_TIMEOUT + ); }); }); diff --git a/packages/kbn-unified-data-table/src/components/data_table.tsx b/packages/kbn-unified-data-table/src/components/data_table.tsx index 9ee6b2261bd4e..a22ee8317be2f 100644 --- a/packages/kbn-unified-data-table/src/components/data_table.tsx +++ b/packages/kbn-unified-data-table/src/components/data_table.tsx @@ -137,6 +137,10 @@ export interface UnifiedDataTableProps { * Field tokens could be rendered in column header next to the field name. */ showColumnTokens?: boolean; + /** + * Set to true to allow users to drag and drop columns for reordering + */ + canDragAndDropColumns?: boolean; /** * Optional value for providing configuration setting for UnifiedDataTable header row height */ @@ -425,6 +429,7 @@ export const UnifiedDataTable = ({ columns, columnsMeta, showColumnTokens, + canDragAndDropColumns, configHeaderRowHeight, headerRowHeightState, onUpdateHeaderRowHeight, @@ -870,14 +875,20 @@ export const UnifiedDataTable = ({ const schemaDetectors = useMemo(() => getSchemaDetectors(), []); const columnsVisibility = useMemo( () => ({ - canDragAndDropColumns: true, + canDragAndDropColumns: defaultColumns ? false : canDragAndDropColumns, visibleColumns, setVisibleColumns: (newColumns: string[]) => { const dontModifyColumns = !shouldPrependTimeFieldColumn(newColumns); onSetColumns(newColumns, dontModifyColumns); }, }), - [visibleColumns, onSetColumns, shouldPrependTimeFieldColumn] + [ + visibleColumns, + onSetColumns, + shouldPrependTimeFieldColumn, + canDragAndDropColumns, + defaultColumns, + ] ); const canSetExpandedDoc = Boolean(setExpandedDoc && !!renderDocumentView); diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid.tsx index 3b0a2df2582aa..e909d3e256d22 100644 --- a/src/plugins/discover/public/components/discover_grid/discover_grid.tsx +++ b/src/plugins/discover/public/components/discover_grid/discover_grid.tsx @@ -58,6 +58,7 @@ export const DiscoverGrid: React.FC = ({ return ( Date: Tue, 5 Nov 2024 15:19:31 +0100 Subject: [PATCH 12/12] [Discover] Update tests --- test/functional/services/data_grid.ts | 43 +++++++++++++++++---------- 1 file changed, 28 insertions(+), 15 deletions(-) diff --git a/test/functional/services/data_grid.ts b/test/functional/services/data_grid.ts index 9e60296754454..f56b58cfa88f1 100644 --- a/test/functional/services/data_grid.ts +++ b/test/functional/services/data_grid.ts @@ -102,22 +102,35 @@ export class DataGridService extends FtrService { public async resizeColumn(field: string, delta: number) { const header = await this.getHeaderElement(field); const originalWidth = (await header.getSize()).width; - const headerDraggableColumns = await this.find.allByCssSelector( - '[data-test-subj="euiDataGridHeaderDroppable"] > div' - ); - // searching for a common parent of the field column header and its resizer - const fieldHeader: WebElementWrapper | null | undefined = ( - await Promise.all( - headerDraggableColumns.map(async (column) => { - const hasFieldColumn = - (await column.findAllByCssSelector(`[data-gridcell-column-id="${field}"]`)).length > 0; - return hasFieldColumn ? column : null; - }) - ) - ).find(Boolean); - const resizer = await fieldHeader?.findByTestSubject('dataGridColumnResizer'); - if (!fieldHeader || !resizer) { + let resizer: WebElementWrapper | undefined; + + if (await this.testSubjects.exists('euiDataGridHeaderDroppable')) { + // if drag & drop is enabled for data grid columns + const headerDraggableColumns = await this.find.allByCssSelector( + '[data-test-subj="euiDataGridHeaderDroppable"] > div' + ); + // searching for a common parent of the field column header and its resizer + const fieldHeader: WebElementWrapper | null | undefined = ( + await Promise.all( + headerDraggableColumns.map(async (column) => { + const hasFieldColumn = + (await column.findAllByCssSelector(`[data-gridcell-column-id="${field}"]`)).length > + 0; + return hasFieldColumn ? column : null; + }) + ) + ).find(Boolean); + + resizer = await fieldHeader?.findByTestSubject('dataGridColumnResizer'); + } else { + // if drag & drop is not enabled for data grid columns + resizer = await header.findByCssSelector( + this.testSubjects.getCssSelector('dataGridColumnResizer') + ); + } + + if (!resizer) { throw new Error(`Unable to find column resizer for field ${field}`); }