feat: Cherry-pick DH-18780: Resizable column header groups (#2567) (#2575)

Cherry-pick #2567 into v0.85
- Allow dragging separators between column header groups to resize them
- Add e2e tests for hover state and drag to resize

Author: vbabich

packages/grid/src/mouse-handlers/GridColumnSeparatorMouseHandler.ts

@@ -20,7 +20,7 @@ class GridColumnSeparatorMouseHandler extends GridSeparatorMouseHandler {
       return null;
     }
 
-    const { x, y, columnHeaderDepth } = gridPoint;
+    const { x, y, columnHeaderDepth: depth } = gridPoint;
 
     const { modelColumns } = metrics;
 
@@ -31,18 +31,13 @@ class GridColumnSeparatorMouseHandler extends GridSeparatorMouseHandler {
       theme
     );
 
-    // TODO #695: Allow resizing of column groups as well. Right now just allow resizing from base columns
-    if (
-      separatorIndex == null ||
-      columnHeaderDepth == null ||
-      columnHeaderDepth > 0
-    ) {
+    if (separatorIndex == null || depth == null) {
       return null;
     }
 
     const columnIndex = modelColumns.get(separatorIndex);
     if (columnIndex != null) {
-      return { index: separatorIndex, depth: 0 };
+      return { index: separatorIndex, depth };
     }
 
     return null;

tests/table.spec.ts

@@ -4,6 +4,7 @@ import {
   openTable,
   getColumnSeparatorPosition,
   dragColumnSeparator,
+  markerAtCoordinates,
 } from './utils';
 
 async function waitForLoadingDone(page: Page) {
@@ -272,3 +273,48 @@ test.describe('column separators', () => {
     );
   });
 });
+
+test.describe('column group separators', () => {
+  test.beforeEach(async ({ page }) => {
+    await gotoPage(page, '');
+    // Open table with column groups for group separator testing
+    await openTable(page, 'simple_table_header_group');
+  });
+
+  test('change color on hover on level 0', async ({ page }) => {
+    // Test hover on the parent of the column "X" (column 0, depth 1)
+    const separatorPos = await getColumnSeparatorPosition(page, 0, 1);
+
+    // Move mouse to separator position to test hover interaction
+    await page.mouse.move(separatorPos.x, separatorPos.y);
+    await markerAtCoordinates(page, separatorPos.x, separatorPos.y);
+    await page.waitForTimeout(100);
+
+    // Take a screenshot to verify hover state
+    await expect(page.locator('.iris-grid-panel .iris-grid')).toHaveScreenshot(
+      'column-group-separator-hover.png'
+    );
+  });
+
+  test('resize column group on mouse drag', async ({ page }) => {
+    // Perform drag operation to resize "All" group (last column = 2, depth = 0)
+    await dragColumnSeparator(page, 2, 50, 0);
+    await page.waitForTimeout(200);
+
+    // Take screenshot to verify visual changes
+    await expect(page.locator('.iris-grid-panel .iris-grid')).toHaveScreenshot(
+      'column-group-resized-after-drag.png'
+    );
+  });
+
+  test('resize nested column groups at depth 1', async ({ page }) => {
+    // Perform resize of "YandZ" group (last column = 2, depth = 1)
+    await dragColumnSeparator(page, 2, -20, 1);
+    await page.waitForTimeout(200);
+
+    // Take screenshot to verify depth 1 resize
+    await expect(page.locator('.iris-grid-panel .iris-grid')).toHaveScreenshot(
+      'nested-group-separator-depth-1-resized.png'
+    );
+  });
+});