[AI4DSOC] Alert summary alert actions in table and flyout

x-pack/solutions/security/plugins/security_solution/public/detections/components/alert_summary/table/actions_cell.test.tsx

@@ -8,51 +8,43 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import type { Alert } from '@kbn/alerting-types';
-import { ActionsCell, ROW_ACTION_FLYOUT_ICON_TEST_ID } from './actions_cell';
+import { ActionsCell } from './actions_cell';
 import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
-import { IOCPanelKey } from '../../../../flyout/ai_for_soc/constants/panel_keys';
+import type { EcsSecurityExtension as Ecs } from '@kbn/securitysolution-ecs';
+import { MORE_ACTIONS_BUTTON_TEST_ID } from './more_actions_row_control_column';
+import { useAddToCaseActions } from '../../alerts_table/timeline_actions/use_add_to_case_actions';
+import { useAlertTagsActions } from '../../alerts_table/timeline_actions/use_alert_tags_actions';
+import { ROW_ACTION_FLYOUT_ICON_TEST_ID } from './open_flyout_row_control_column';
 
 jest.mock('@kbn/expandable-flyout');
+jest.mock('../../alerts_table/timeline_actions/use_add_to_case_actions');
+jest.mock('../../alerts_table/timeline_actions/use_alert_tags_actions');
 
 describe('ActionsCell', () => {
   it('should render icons', () => {
     (useExpandableFlyoutApi as jest.Mock).mockReturnValue({
       openFlyout: jest.fn(),
     });
+    (useAddToCaseActions as jest.Mock).mockReturnValue({
+      addToCaseActionItems: [],
+    });
+    (useAlertTagsActions as jest.Mock).mockReturnValue({
+      alertTagsItems: [],
+      alertTagsPanels: [],
+    });
 
     const alert: Alert = {
       _id: '_id',
       _index: '_index',
     };
-
-    const { getByTestId } = render(<ActionsCell alert={alert} />);
-
-    expect(getByTestId(ROW_ACTION_FLYOUT_ICON_TEST_ID)).toBeInTheDocument();
-  });
-
-  it('should open flyout after click', () => {
-    const openFlyout = jest.fn();
-    (useExpandableFlyoutApi as jest.Mock).mockReturnValue({
-      openFlyout,
-    });
-
-    const alert: Alert = {
+    const ecsAlert: Ecs = {
       _id: '_id',
       _index: '_index',
     };
 
-    const { getByTestId } = render(<ActionsCell alert={alert} />);
+    const { getByTestId } = render(<ActionsCell alert={alert} ecsAlert={ecsAlert} />);
 
-    getByTestId(ROW_ACTION_FLYOUT_ICON_TEST_ID).click();
-
-    expect(openFlyout).toHaveBeenCalledWith({
-      right: {
-        id: IOCPanelKey,
-        params: {
-          id: alert._id,
-          indexName: alert._index,
-        },
-      },
-    });
+    expect(getByTestId(ROW_ACTION_FLYOUT_ICON_TEST_ID)).toBeInTheDocument();
+    expect(getByTestId(MORE_ACTIONS_BUTTON_TEST_ID)).toBeInTheDocument();
   });
 });

x-pack/solutions/security/plugins/security_solution/public/detections/components/alert_summary/table/actions_cell.tsx

@@ -5,20 +5,22 @@
  * 2.0.
  */
 
-import React, { memo, useCallback } from 'react';
-import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
-import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import React, { memo } from 'react';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import type { Alert } from '@kbn/alerting-types';
-import { i18n } from '@kbn/i18n';
-import { IOCPanelKey } from '../../../../flyout/ai_for_soc/constants/panel_keys';
-
-export const ROW_ACTION_FLYOUT_ICON_TEST_ID = 'alert-summary-table-row-action-flyout-icon';
+import type { EcsSecurityExtension as Ecs } from '@kbn/securitysolution-ecs';
+import { OpenFlyoutRowControlColumn } from './open_flyout_row_control_column';
+import { MoreActionsRowControlColumn } from './more_actions_row_control_column';
 
 export interface ActionsCellProps {
   /**
    * Alert data passed from the renderCellValue callback via the AlertWithLegacyFormats interface
    */
   alert: Alert;
+  /**
+   * The Ycs type is @deprecated but needed for the case actions within the more action dropdown
+   */
+  ecsAlert: Ecs;
 }
 
 /**
@@ -29,38 +31,15 @@ export interface ActionsCellProps {
  * - assistant (soon)
  * - more actions (soon)
  */
-export const ActionsCell = memo(({ alert }: ActionsCellProps) => {
-  const { openFlyout } = useExpandableFlyoutApi();
-  const onOpenFlyout = useCallback(
-    () =>
-      openFlyout({
-        right: {
-          id: IOCPanelKey,
-          params: {
-            id: alert._id,
-            indexName: alert._index,
-          },
-        },
-      }),
-    [alert, openFlyout]
-  );
-
-  return (
-    <EuiFlexGroup alignItems="center" gutterSize="xs">
-      <EuiFlexItem>
-        <EuiButtonIcon
-          aria-label={i18n.translate('xpack.securitySolution.alertSummary.table.flyoutIcon', {
-            defaultMessage: 'Open flyout',
-          })}
-          color="primary"
-          data-test-subj={ROW_ACTION_FLYOUT_ICON_TEST_ID}
-          iconType="expand"
-          onClick={onOpenFlyout}
-          size="xs"
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
-});
+export const ActionsCell = memo(({ alert, ecsAlert }: ActionsCellProps) => (
+  <EuiFlexGroup alignItems="center" gutterSize="xs">
+    <EuiFlexItem>
+      <OpenFlyoutRowControlColumn alert={alert} />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <MoreActionsRowControlColumn ecsAlert={ecsAlert} />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+));
 
 ActionsCell.displayName = 'ActionsCell';

x-pack/solutions/security/plugins/security_solution/public/detections/components/alert_summary/table/more_actions_row_control_column.test.tsx

@@ -0,0 +1,131 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import {
+  MORE_ACTIONS_BUTTON_TEST_ID,
+  MoreActionsRowControlColumn,
+} from './more_actions_row_control_column';
+import type { EcsSecurityExtension as Ecs } from '@kbn/securitysolution-ecs';
+import { useKibana } from '../../../../common/lib/kibana';
+import { mockCasesContract } from '@kbn/cases-plugin/public/mocks';
+import { useAlertsPrivileges } from '../../../containers/detection_engine/alerts/use_alerts_privileges';
+
+jest.mock('../../../../common/lib/kibana');
+jest.mock('../../../containers/detection_engine/alerts/use_alerts_privileges');
+
+describe('MoreActionsRowControlColumn', () => {
+  it('should render component with all options', () => {
+    (useAlertsPrivileges as jest.Mock).mockReturnValue({ hasIndexWrite: true });
+    (useKibana as jest.Mock).mockReturnValue({
+      services: {
+        cases: {
+          ...mockCasesContract(),
+          helpers: {
+            canUseCases: jest.fn().mockReturnValue({
+              read: true,
+              createComment: true,
+            }),
+            getRuleIdFromEvent: jest.fn(),
+          },
+        },
+      },
+    });
+
+    const ecsAlert: Ecs = {
+      _id: '_id',
+      _index: '_index',
+      event: { kind: ['signal'] },
+      kibana: { alert: { workflow_tags: [] } },
+    };
+
+    const { getByTestId } = render(<MoreActionsRowControlColumn ecsAlert={ecsAlert} />);
+
+    const button = getByTestId(MORE_ACTIONS_BUTTON_TEST_ID);
+    expect(button).toBeInTheDocument();
+
+    button.click();
+
+    expect(getByTestId('add-to-existing-case-action')).toBeInTheDocument();
+    expect(getByTestId('add-to-new-case-action')).toBeInTheDocument();
+    expect(getByTestId('alert-tags-context-menu-item')).toBeInTheDocument();
+  });
+
+  it('should not show cases actions if user is not authorized', () => {
+    (useAlertsPrivileges as jest.Mock).mockReturnValue({ hasIndexWrite: true });
+    (useKibana as jest.Mock).mockReturnValue({
+      services: {
+        cases: {
+          ...mockCasesContract(),
+          helpers: {
+            canUseCases: jest.fn().mockReturnValue({
+              read: false,
+              createComment: false,
+            }),
+            getRuleIdFromEvent: jest.fn(),
+          },
+        },
+      },
+    });
+
+    const ecsAlert: Ecs = {
+      _id: '_id',
+      _index: '_index',
+      event: { kind: ['signal'] },
+      kibana: { alert: { workflow_tags: [] } },
+    };
+
+    const { getByTestId, queryByTestId } = render(
+      <MoreActionsRowControlColumn ecsAlert={ecsAlert} />
+    );
+
+    const button = getByTestId(MORE_ACTIONS_BUTTON_TEST_ID);
+    expect(button).toBeInTheDocument();
+
+    button.click();
+
+    expect(queryByTestId('add-to-existing-case-action')).not.toBeInTheDocument();
+    expect(queryByTestId('add-to-new-case-action')).not.toBeInTheDocument();
+  });
+
+  it('should not show tags actions if user is not authorized', () => {
+    (useAlertsPrivileges as jest.Mock).mockReturnValue({ hasIndexWrite: false });
+    (useKibana as jest.Mock).mockReturnValue({
+      services: {
+        cases: {
+          ...mockCasesContract(),
+          helpers: {
+            canUseCases: jest.fn().mockReturnValue({
+              read: true,
+              createComment: true,
+            }),
+            getRuleIdFromEvent: jest.fn(),
+          },
+        },
+      },
+    });
+
+    const ecsAlert: Ecs = {
+      _id: '_id',
+      _index: '_index',
+      event: { kind: ['signal'] },
+      kibana: { alert: { workflow_tags: [] } },
+    };
+
+    const { getByTestId, queryByTestId } = render(
+      <MoreActionsRowControlColumn ecsAlert={ecsAlert} />
+    );
+
+    const button = getByTestId(MORE_ACTIONS_BUTTON_TEST_ID);
+    expect(button).toBeInTheDocument();
+
+    button.click();
+
+    expect(queryByTestId('alert-tags-context-menu-item')).not.toBeInTheDocument();
+  });
+});

x-pack/solutions/security/plugins/security_solution/public/detections/components/alert_summary/table/more_actions_row_control_column.tsx

@@ -0,0 +1,102 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { memo, useCallback, useMemo, useState } from 'react';
+import { EuiButtonIcon, EuiContextMenu, EuiPopover } from '@elastic/eui';
+import type { EcsSecurityExtension as Ecs } from '@kbn/securitysolution-ecs';
+import { i18n } from '@kbn/i18n';
+import { useAlertTagsActions } from '../../alerts_table/timeline_actions/use_alert_tags_actions';
+import { useAddToCaseActions } from '../../alerts_table/timeline_actions/use_add_to_case_actions';
+
+export const MORE_ACTIONS_BUTTON_TEST_ID = 'alert-summary-table-row-action-more-actions';
+
+export const MORE_ACTIONS_BUTTON_ARIA_LABEL = i18n.translate(
+  'xpack.securitySolution.alertSummary.table.moreActionsAriaLabel',
+  {
+    defaultMessage: 'More actions',
+  }
+);
+export const ADD_TO_CASE_ARIA_LABEL = i18n.translate(
+  'xpack.securitySolution.alertSummary.table.attachToCaseAriaLabel',
+  {
+    defaultMessage: 'Attach alert to case',
+  }
+);
+
+export interface MoreActionsRowControlColumnProps {
+  /**
+   * Alert data
+   * The Ecs type is @deprecated but needed for the case actions within the more action dropdown
+   */
+  ecsAlert: Ecs;
+}
+
+/**
+ * Renders a horizontal 3-dot button which displays a context menu when clicked.
+ * This is used in the AI for SOC alert summary table.
+ * The following options are available:
+ * - add to existing case
+ * - add to new case
+ * - apply alert tags
+ */
+export const MoreActionsRowControlColumn = memo(
+  ({ ecsAlert }: MoreActionsRowControlColumnProps) => {
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+    const togglePopover = useCallback(() => setIsPopoverOpen((value) => !value), []);
+    const closePopover = useCallback(() => setIsPopoverOpen(false), []);
+
+    const button = useMemo(
+      () => (
+        <EuiButtonIcon
+          aria-label={MORE_ACTIONS_BUTTON_ARIA_LABEL}
+          data-test-subj={MORE_ACTIONS_BUTTON_TEST_ID}
+          iconType="boxesHorizontal"
+          onClick={togglePopover}
+        />
+      ),
+      [togglePopover]
+    );
+
+    const { addToCaseActionItems } = useAddToCaseActions({
+      ecsData: ecsAlert,
+      onMenuItemClick: closePopover,
+      isActiveTimelines: false,
+      ariaLabel: ADD_TO_CASE_ARIA_LABEL,
+      isInDetections: true,
+    });
+
+    const { alertTagsItems, alertTagsPanels } = useAlertTagsActions({
+      closePopover,
+      ecsRowData: ecsAlert,
+    });
+
+    const panels = useMemo(
+      () => [
+        {
+          id: 0,
+          items: [...addToCaseActionItems, ...alertTagsItems],
+        },
+        ...alertTagsPanels,
+      ],
+      [addToCaseActionItems, alertTagsItems, alertTagsPanels]
+    );
+
+    return (
+      <EuiPopover
+        button={button}
+        closePopover={togglePopover}
+        isOpen={isPopoverOpen}
+        panelPaddingSize="none"
+      >
+        <EuiContextMenu initialPanelId={0} panels={panels} size="s" />
+      </EuiPopover>
+    );
+  }
+);
+
+MoreActionsRowControlColumn.displayName = 'MoreActionsRowControlColumn';