[Security Solution][Attacks/Alerts][Attacks page][Table section] Group by dropdown customization (elastic#232660) (elastic#245128)

## Summary

Epic: elastic#232569
Closes elastic#232660

These changes add a way to **customize alerts table grouping
component**:
* possibility to hide "None" option
* possibility to hide "Custom Field" option
* possibility to hide "Select up to 3 groupings" title
* possibility to customize the "Group by" button label

There is a new `GroupSettings` interface:

```typescript
export interface GroupSettings {
  /**
   * Allows to hide the None option in the group selection dropdown.
   */
  hideNoneOption?: boolean;
  /**
   * Allows to hide the Custom field option in the group selection dropdown.
   */
  hideCustomFieldOption?: boolean;
  /**
   * Allows to hide the title in the group selection dropdown.
   */
  hideOptionsTitle?: boolean;
  /**
   * Allows to customize the label of the group selection dropdown.
   */
  popoverButtonLabel?: string;
}
```

Also, as part of this PR we **customize the grouping component for the
Attacks table**:

<img width="454" height="261" alt="Screenshot 2025-12-03 at 17 30 36"
src="https://github.com/user-attachments/assets/a6450857-3dcb-43ce-9ed7-b56a9fc8d123"
/>

**NOTE**: Enforcing "Attack" option as always se;ected on Attacks page
will be done as part of [a separate
ticket](elastic#237190).

## Feature Flag

> [!NOTE]
> The feature is hidden behind the feature flag (in `kibana.dev.yml`):

```
feature_flags.overrides:
  securitySolution.attacksAlertsAlignment: true
```

## Testing

**Case 1 - Attacks page**:

1. Navigate to `Security > Detections > Attacks`
2. There should be only one grouping option available - "Attack"


**Case 2 - Alerts page**:

1. Navigate to `Security > Detections > Alerts`
2. Grouping should show all the options, like None, Custom Fields, Rule
Name, User Name etc.

## Video Recording


https://github.com/user-attachments/assets/87aa4a31-eb1f-426b-8d07-1b528d0c47e6

Author: e40pud

src/platform/packages/shared/kbn-grouping/index.tsx

@@ -11,6 +11,7 @@ import { getGroupingQuery, isNoneGroup, useGrouping } from './src';
 import type {
   DynamicGroupingProps,
   GroupOption,
+  GroupSettings,
   GroupingAggregation,
   NamedAggregation,
   RawBucket,
@@ -22,6 +23,7 @@ export { getGroupingQuery, isNoneGroup, useGrouping };
 export type {
   DynamicGroupingProps,
   GroupOption,
+  GroupSettings,
   GroupingAggregation,
   NamedAggregation,
   RawBucket,

src/platform/packages/shared/kbn-grouping/src/components/group_selector/index.test.tsx

@@ -186,4 +186,37 @@ describe('group selector', () => {
       });
     });
   });
+
+  describe('custom settings', () => {
+    it('Does not present the "none" option when `hideNoneOption` is true', () => {
+      const { getByTestId, queryByTestId } = render(
+        <GroupSelector {...testProps} settings={{ hideNoneOption: true }} />
+      );
+      fireEvent.click(getByTestId('group-selector-dropdown'));
+      expect(queryByTestId('panel-none')).toBeNull();
+    });
+
+    it('Does not present the "Custom field" option when `hideCustomFieldOption` is true', () => {
+      const { getByTestId, queryByTestId } = render(
+        <GroupSelector {...testProps} settings={{ hideCustomFieldOption: true }} />
+      );
+      fireEvent.click(getByTestId('group-selector-dropdown'));
+      expect(queryByTestId('panel-custom')).toBeNull();
+    });
+
+    it('Renders custom button label when `popoverButtonLabel` is provided', () => {
+      const { getByTestId } = render(
+        <GroupSelector {...testProps} settings={{ popoverButtonLabel: 'Custom Label' }} />
+      );
+      expect(getByTestId('group-selector-dropdown').textContent).toBe('Custom Label');
+    });
+
+    it('Does not present the title in the dropdown when `hideOptionsTitle` is true', () => {
+      const { getByTestId, queryByTestId } = render(
+        <GroupSelector {...testProps} settings={{ hideOptionsTitle: true }} />
+      );
+      fireEvent.click(getByTestId('group-selector-dropdown'));
+      expect(queryByTestId('contextMenuPanelTitle')).not.toBeInTheDocument();
+    });
+  });
 });

src/platform/packages/shared/kbn-grouping/src/components/group_selector/index.tsx

@@ -20,6 +20,7 @@ import { METRIC_TYPE } from '@kbn/analytics';
 import { CustomFieldPanel } from './custom_field_panel';
 import * as i18n from '../translations';
 import { StyledContextMenu } from '../styles';
+import type { GroupSettings } from '../../hooks/types';
 
 export interface GroupSelectorProps {
   'data-test-subj'?: string;
@@ -35,6 +36,7 @@ export interface GroupSelectorProps {
     event: string | string[],
     count?: number | undefined
   ) => void;
+  settings?: GroupSettings;
 }
 const GroupSelectorComponent = ({
   'data-test-subj': dataTestSubj,
@@ -45,7 +47,10 @@ const GroupSelectorComponent = ({
   title = i18n.GROUP_BY,
   maxGroupingLevels = 1,
   onOpenTracker,
+  settings,
 }: GroupSelectorProps) => {
+  const { hideNoneOption, hideCustomFieldOption, hideOptionsTitle, popoverButtonLabel } =
+    settings ?? {};
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const isGroupSelected = useCallback(
     (groupKey: string) =>
@@ -65,33 +70,43 @@ const GroupSelectorComponent = ({
       return groupsSelected.length === maxGroupingLevels && (key ? !isGroupSelected(key) : true);
     };
 
+    const topLevelTitle =
+      maxGroupingLevels === 1 ? i18n.SELECT_SINGLE_FIELD : i18n.SELECT_FIELD(maxGroupingLevels);
+
     return [
       {
         id: 'firstPanel',
-        title:
-          maxGroupingLevels === 1 ? i18n.SELECT_SINGLE_FIELD : i18n.SELECT_FIELD(maxGroupingLevels),
+        title: hideOptionsTitle ? null : topLevelTitle,
         items: [
-          {
-            'data-test-subj': 'panel-none',
-            name: i18n.NONE,
-            icon: isGroupSelected('none') ? 'check' : 'empty',
-            onClick: () => onGroupChange('none'),
-          },
+          ...(hideNoneOption
+            ? []
+            : [
+                {
+                  'data-test-subj': 'panel-none',
+                  name: i18n.NONE,
+                  icon: isGroupSelected('none') ? 'check' : 'empty',
+                  onClick: () => onGroupChange('none'),
+                } as EuiContextMenuPanelItemDescriptor,
+              ]),
           ...options.map<EuiContextMenuPanelItemDescriptor>((o) => ({
             'data-test-subj': `panel-${o.key}`,
             disabled: isOptionDisabled(o.key),
             name: o.label,
             onClick: () => onGroupChange(o.key),
             icon: isGroupSelected(o.key) ? 'check' : 'empty',
           })),
-          {
-            'data-test-subj': `panel-custom`,
-            name: i18n.CUSTOM_FIELD,
-            icon: 'empty',
-            disabled: isOptionDisabled(),
-            panel: 'customPanel',
-            hasPanel: true,
-          },
+          ...(hideCustomFieldOption
+            ? []
+            : [
+                {
+                  'data-test-subj': `panel-custom`,
+                  name: i18n.CUSTOM_FIELD,
+                  icon: 'empty',
+                  disabled: isOptionDisabled(),
+                  panel: 'customPanel',
+                  hasPanel: true,
+                } as EuiContextMenuPanelItemDescriptor,
+              ]),
         ],
       },
       {
@@ -110,7 +125,17 @@ const GroupSelectorComponent = ({
         ),
       },
     ];
-  }, [fields, groupsSelected.length, isGroupSelected, maxGroupingLevels, onGroupChange, options]);
+  }, [
+    fields,
+    groupsSelected.length,
+    isGroupSelected,
+    maxGroupingLevels,
+    onGroupChange,
+    options,
+    hideNoneOption,
+    hideCustomFieldOption,
+    hideOptionsTitle,
+  ]);
   const selectedOptions = useMemo(
     () => options.filter((groupOption) => isGroupSelected(groupOption.key)),
     [isGroupSelected, options]
@@ -150,10 +175,10 @@ const GroupSelectorComponent = ({
         title={buttonLabel}
         size="xs"
       >
-        {`${title}: ${buttonLabel}`}
+        {popoverButtonLabel ?? `${title}: ${buttonLabel}`}
       </EuiButtonEmpty>
     );
-  }, [groupsSelected, isGroupSelected, onButtonClick, selectedOptions, title]);
+  }, [groupsSelected, isGroupSelected, onButtonClick, selectedOptions, title, popoverButtonLabel]);
 
   return (
     <EuiPopover

src/platform/packages/shared/kbn-grouping/src/hooks/state/actions.test.ts

@@ -0,0 +1,82 @@
+/*
+ * 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 { groupActions } from './actions';
+import { ActionType } from '../types';
+
+describe('groupActions', () => {
+  describe('updateActiveGroups', () => {
+    it('should create an action to update active groups', () => {
+      const activeGroups = ['group1', 'group2'];
+      const id = 'test-id';
+      const expectedAction = {
+        type: ActionType.updateActiveGroups,
+        payload: {
+          activeGroups,
+          id,
+        },
+      };
+
+      expect(groupActions.updateActiveGroups({ activeGroups, id })).toEqual(expectedAction);
+    });
+  });
+
+  describe('updateGroupOptions', () => {
+    it('should create an action to update group options', () => {
+      const newOptionList = [
+        { key: 'key1', label: 'Label 1' },
+        { key: 'key2', label: 'Label 2' },
+      ];
+      const id = 'test-id';
+      const expectedAction = {
+        type: ActionType.updateGroupOptions,
+        payload: {
+          newOptionList,
+          id,
+        },
+      };
+
+      expect(groupActions.updateGroupOptions({ newOptionList, id })).toEqual(expectedAction);
+    });
+  });
+
+  describe('updateGroupSettings', () => {
+    it('should create an action to update group settings', () => {
+      const settings = {
+        hideNoneOption: true,
+        hideCustomFieldOption: false,
+        hideOptionsTitle: true,
+        popoverButtonLabel: 'Custom Label',
+      };
+      const id = 'test-id';
+      const expectedAction = {
+        type: ActionType.updateGroupSettings,
+        payload: {
+          settings,
+          id,
+        },
+      };
+
+      expect(groupActions.updateGroupSettings({ settings, id })).toEqual(expectedAction);
+    });
+
+    it('should create an action to update group settings with undefined settings', () => {
+      const id = 'test-id';
+      const expectedAction = {
+        type: ActionType.updateGroupSettings,
+        payload: {
+          settings: undefined,
+          id,
+        },
+      };
+
+      expect(groupActions.updateGroupSettings({ settings: undefined, id })).toEqual(expectedAction);
+    });
+  });
+});

src/platform/packages/shared/kbn-grouping/src/hooks/state/actions.ts

@@ -7,7 +7,13 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { GroupOption, UpdateActiveGroups, UpdateGroupOptions } from '../types';
+import type {
+  GroupOption,
+  UpdateActiveGroups,
+  UpdateGroupOptions,
+  GroupSettings,
+  UpdateGroupSettings,
+} from '../types';
 import { ActionType } from '../types';
 
 const updateActiveGroups = ({
@@ -38,7 +44,19 @@ const updateGroupOptions = ({
   type: ActionType.updateGroupOptions,
 });
 
+const updateGroupSettings = ({
+  settings,
+  id,
+}: {
+  settings?: GroupSettings;
+  id: string;
+}): UpdateGroupSettings => ({
+  payload: { settings, id },
+  type: ActionType.updateGroupSettings,
+});
+
 export const groupActions = {
   updateActiveGroups,
   updateGroupOptions,
+  updateGroupSettings,
 };

src/platform/packages/shared/kbn-grouping/src/hooks/state/reducer.test.ts

@@ -70,4 +70,34 @@ describe('grouping reducer', () => {
     [groupingState, dispatch] = result.current;
     expect(groupingState.groupById[groupingId].activeGroups).toEqual(['user.name']);
   });
+  it('updateGroupSettings', () => {
+    const { result } = renderHook(() =>
+      useReducer(groupsReducerWithStorage, {
+        ...initialState,
+        groupById,
+      })
+    );
+    let [groupingState, dispatch] = result.current;
+    expect(groupingState.groupById[groupingId].settings).toEqual(undefined);
+    act(() => {
+      dispatch(
+        groupActions.updateGroupSettings({
+          id: groupingId,
+          settings: {
+            hideNoneOption: true,
+            hideCustomFieldOption: true,
+            popoverButtonLabel: 'Group by',
+            hideOptionsTitle: true,
+          },
+        })
+      );
+    });
+    [groupingState, dispatch] = result.current;
+    expect(groupingState.groupById[groupingId].settings).toEqual({
+      hideNoneOption: true,
+      hideCustomFieldOption: true,
+      popoverButtonLabel: 'Group by',
+      hideOptionsTitle: true,
+    });
+  });
 });

src/platform/packages/shared/kbn-grouping/src/hooks/state/reducer.ts

@@ -47,6 +47,16 @@ const groupsReducer = (state: GroupMap, action: Action, groupsById: GroupsById)
         },
       };
     }
+    case ActionType.updateGroupSettings: {
+      const { id, settings } = action.payload;
+      return {
+        ...state,
+        groupById: {
+          ...groupsById,
+          [id]: { ...defaultGroup, ...groupsById[id], settings },
+        },
+      };
+    }
   }
   throw Error(`Unknown grouping action`);
 };

src/platform/packages/shared/kbn-grouping/src/hooks/types.ts

@@ -11,6 +11,7 @@
 export enum ActionType {
   updateActiveGroups = 'UPDATE_ACTIVE_GROUPS',
   updateGroupOptions = 'UPDATE_GROUP_OPTIONS',
+  updateGroupSettings = 'UPDATE_GROUP_SETTINGS',
 }
 
 export interface UpdateActiveGroups {
@@ -23,7 +24,12 @@ export interface UpdateGroupOptions {
   payload: { newOptionList: GroupOption[]; id: string };
 }
 
-export type Action = UpdateActiveGroups | UpdateGroupOptions;
+export interface UpdateGroupSettings {
+  type: ActionType.updateGroupSettings;
+  payload: { settings?: GroupSettings; id: string };
+}
+
+export type Action = UpdateActiveGroups | UpdateGroupOptions | UpdateGroupSettings;
 
 // state
 
@@ -32,9 +38,32 @@ export interface GroupOption {
   label: string;
 }
 
+export interface GroupSettings {
+  /**
+   * Allows to hide the None option in the group selection dropdown.
+   */
+  hideNoneOption?: boolean;
+  /**
+   * Allows to hide the Custom field option in the group selection dropdown.
+   */
+  hideCustomFieldOption?: boolean;
+  /**
+   * Allows to hide the title in the group selection dropdown.
+   */
+  hideOptionsTitle?: boolean;
+  /**
+   * Allows to customize the label of the group selection dropdown.
+   */
+  popoverButtonLabel?: string;
+}
+
 export interface GroupModel {
   activeGroups: string[];
   options: GroupOption[];
+  /**
+   * Allows to customize the group selection dropdown.
+   */
+  settings?: GroupSettings;
 }
 
 export interface GroupsById {