[8.x] [Discover][UnifiedDataTable] Enable drag&drop for grid columns (#197832)

packages/kbn-unified-data-table/src/components/data_table.scss

@@ -40,14 +40,6 @@
     background: transparent;
   }
 
-  .euiDataGridHeaderCell {
-    align-items: start;
-
-    .euiPopover[class*='euiDataGridHeaderCell__popover'] {
-      align-self: center;
-    }
-  }
-
   .euiDataGrid--bordersHorizontal .euiDataGridHeader {
     border-top: none;
   }
@@ -101,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: $euiSizeXS / 2; // 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;

packages/kbn-unified-data-table/src/components/data_table.test.tsx

@@ -1354,5 +1354,49 @@ describe('UnifiedDataTable', () => {
       },
       EXTENDED_JEST_TIMEOUT
     );
+
+    it(
+      'should have columnVisibility configuration',
+      async () => {
+        const component = await getComponent({
+          ...getProps(),
+          columns: ['message'],
+          canDragAndDropColumns: true,
+        });
+        expect(component.find(EuiDataGrid).last().prop('columnVisibility')).toMatchInlineSnapshot(`
+          Object {
+            "canDragAndDropColumns": true,
+            "setVisibleColumns": [Function],
+            "visibleColumns": Array [
+              "@timestamp",
+              "message",
+            ],
+          }
+        `);
+      },
+      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
+    );
   });
 });

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,13 +875,20 @@ export const UnifiedDataTable = ({
   const schemaDetectors = useMemo(() => getSchemaDetectors(), []);
   const columnsVisibility = useMemo(
     () => ({
+      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);

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) {

src/plugins/discover/public/components/discover_grid/discover_grid.tsx

@@ -58,6 +58,7 @@ export const DiscoverGrid: React.FC<DiscoverGridProps> = ({
   return (
     <UnifiedDataTable
       showColumnTokens
+      canDragAndDropColumns
       enableComparisonMode
       renderCustomToolbar={renderCustomToolbar}
       getRowIndicator={getRowIndicator}

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

test/functional/services/data_grid.ts

@@ -102,9 +102,38 @@ 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')
-    );
+
+    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}`);
+    }
+
     await this.browser.dragAndDrop({ location: resizer }, { location: { x: delta, y: 0 } });
     return { originalWidth, newWidth: (await header.getSize()).width };
   }