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

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

tests/utils.ts

@@ -466,6 +466,40 @@ export async function dragColumnSeparator(
   await page.waitForTimeout(100);
 }
 
+/**
+ * Creating a visible element at the specified coordinates.
+ * Useful for debugging tests that involve mouse movement.
+ * @param page Test page
+ * @param x X coordinate
+ * @param y Y coordinate
+ * @param size Size of the marker circle
+ */
+export async function markerAtCoordinates(
+  page: Page,
+  x: number,
+  y: number,
+  color = 'red',
+  size = 4
+): Promise<void> {
+  await page.evaluate(
+    ({ x, y, color, size }) => {
+      const marker = document.createElement('div');
+      Object.assign(marker.style, {
+        position: 'fixed',
+        top: `${y - size / 2}px`,
+        left: `${x - size / 2}px`,
+        pointerEvents: 'none',
+        backgroundColor: color,
+        width: `${size}px`,
+        height: `${size}px`,
+        borderRadius: '50%',
+      });
+      document.body.appendChild(marker);
+    },
+    { x, y, color, size }
+  );
+}
+
 export default {
   gotoPage,
   generateVarName,