[Discover][UnifiedDataTable] Enable drag&drop for grid columns

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: 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;

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

@@ -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
+    );
   });
 });

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

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

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,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 };
   }