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

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

@@ -41,13 +41,17 @@
   }
 
   .euiDataGridHeaderCell {
-    align-items: start;
+    align-items: center;
 
     .euiPopover[class*='euiDataGridHeaderCell__popover'] {
       align-self: center;
     }
   }
 
+  .euiDataGridHeaderCell__draggableIcon {
+    align-self: center;
+  }
+
   .euiDataGrid--bordersHorizontal .euiDataGridHeader {
     border-top: none;
   }

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

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