Fix onCascadeGroupNodeCollapsed in the cascade component.

src/platform/packages/shared/shared-ux/document_data_cascade/impl/src/components/data_cascade_impl/data_cascade_row/components/cascade_row_header.test.tsx

@@ -0,0 +1,83 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { type ComponentProps } from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { CascadeRowHeaderPrimitive } from './cascade_row_header';
+import { DataCascadeProvider } from '../../../../store_provider';
+
+type CascadeRowHeaderPrimitiveProps = ComponentProps<typeof CascadeRowHeaderPrimitive>;
+
+const cascadeGroups = ['group1', 'group2'];
+
+const initialGroupColumn = [cascadeGroups[0]];
+
+const defaultProps: CascadeRowHeaderPrimitiveProps = {
+  isGroupNode: true,
+  onCascadeGroupNodeExpanded: jest.fn(),
+  onCascadeGroupNodeCollapsed: jest.fn(),
+  rowInstance: {
+    id: '1',
+    depth: 0,
+    original: { id: '1', name: 'Test', [initialGroupColumn[0]]: 'value' },
+    getToggleSelectedHandler: jest.fn(),
+    getToggleExpandedHandler: jest.fn(),
+    getIsExpanded: jest.fn(() => true),
+    subRows: [],
+  } as unknown as CascadeRowHeaderPrimitiveProps['rowInstance'],
+  rowHeaderTitleSlot: () => <div>Test</div>,
+  size: 'm',
+};
+
+describe('CascadeRowHeaderPrimitive', () => {
+  const renderComponent = ({
+    ...overrides
+  }: Partial<ComponentProps<typeof CascadeRowHeaderPrimitive>> = {}) => {
+    return render(
+      <DataCascadeProvider cascadeGroups={cascadeGroups} initialGroupColumn={initialGroupColumn}>
+        <CascadeRowHeaderPrimitive {...defaultProps} {...overrides} />
+      </DataCascadeProvider>
+    );
+  };
+
+  it('should render', () => {
+    renderComponent();
+    expect(screen.queryByTestId(`${defaultProps.rowInstance.id}-row-header`)).toBeInTheDocument();
+  });
+
+  describe('group node behaviour', () => {
+    it('should invoke the onCascadeGroupNodeCollapsed callback when row is collapsed', async () => {
+      const onCascadeGroupNodeCollapsed = jest.fn();
+
+      const componentProps = {
+        ...defaultProps,
+        rowInstance: {
+          ...defaultProps.rowInstance,
+          getIsExpanded: jest.fn(() => false),
+        },
+      };
+
+      renderComponent({
+        isGroupNode: true,
+        onCascadeGroupNodeCollapsed,
+        rowInstance: componentProps.rowInstance,
+      });
+
+      await waitFor(() => {
+        expect(onCascadeGroupNodeCollapsed).toHaveBeenCalledWith({
+          row: defaultProps.rowInstance.original,
+          nodePath: initialGroupColumn,
+          nodePathMap: {
+            [initialGroupColumn[0]]: defaultProps.rowInstance.original[initialGroupColumn[0]],
+          },
+        });
+      });
+    });
+  });
+});

src/platform/packages/shared/shared-ux/document_data_cascade/impl/src/components/data_cascade_impl/data_cascade_row/components/cascade_row_header.tsx

@@ -111,17 +111,6 @@ export function CascadeRowHeaderPrimitive<G extends GroupNode, L extends LeafNod
 
   const onCascadeSecondaryExpansion = useCallback(() => {}, []);
 
-  useEffect(
-    () => () => {
-      onCascadeGroupNodeCollapsed?.({
-        row: rowInstance.original,
-        nodePath,
-        nodePathMap,
-      });
-    },
-    [onCascadeGroupNodeCollapsed, nodePath, nodePathMap, rowInstance.original]
-  );
-
   useEffect(() => {
     // fetch the data for the sub-rows
     if (isGroupNode && rowIsExpanded && !Boolean(rowChildrenCount)) {
@@ -132,6 +121,23 @@ export function CascadeRowHeaderPrimitive<G extends GroupNode, L extends LeafNod
     }
   }, [rowIsExpanded, rowChildrenCount, isGroupNode, fetchGroupNodeData]);
 
+  useEffect(() => {
+    if (!rowIsExpanded && isGroupNode) {
+      onCascadeGroupNodeCollapsed?.({
+        row: rowInstance.original,
+        nodePath,
+        nodePathMap,
+      });
+    }
+  }, [
+    onCascadeGroupNodeCollapsed,
+    nodePath,
+    nodePathMap,
+    rowInstance.original,
+    rowIsExpanded,
+    isGroupNode,
+  ]);
+
   return (
     <React.Fragment>
       <React.Fragment>
@@ -140,6 +146,7 @@ export function CascadeRowHeaderPrimitive<G extends GroupNode, L extends LeafNod
         )}
       </React.Fragment>
       <EuiFlexGroup
+        data-test-subj={`${rowId}-row-header`}
         gutterSize={size}
         direction="row"
         alignItems="center"

src/platform/packages/shared/shared-ux/document_data_cascade/impl/src/components/data_cascade_impl/data_cascade_row/components/cascade_row_header_slots_renderer.styles.tsx

@@ -46,18 +46,20 @@ const useSlotContainerInnerStyles = (
         transparent 100%
       )`;
     }
-    return { 'mask-image': maskStyle };
+    return { maskImage: maskStyle };
   }, [scrollState, euiTheme.size.m]);
 
-  return css`
-    overflow-x: auto;
-    scrollbar-width: none;
-    scroll-behavior: smooth;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-    ${maskImage};
-  `;
+  return css([
+    css`
+      overflow-x: auto;
+      scrollbar-width: none;
+      scroll-behavior: smooth;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    `,
+    maskImage,
+  ]);
 };
 
 export const useStyles = (scrollState: ScrollState) => {