Alerty summary table flyout setup

x-pack/solutions/security/plugins/security_solution/public/detections/components/alert_summary/common/integration_icon.test.tsx

@@ -0,0 +1,58 @@
+/*
+ * 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 { render } from '@testing-library/react';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
+import React from 'react';
+import { useGetIntegrationFromRuleId } from '../../../hooks/alert_summary/use_get_integration_from_rule_id';
+import { usePackageIconType } from '@kbn/fleet-plugin/public/hooks';
+import {
+  INTEGRATION_INTEGRATION_ICON_TEST_ID,
+  INTEGRATION_LOADING_SKELETON_TEST_ID,
+  IntegrationIcon,
+} from './integration_icon';
+
+jest.mock('../../../hooks/alert_summary/use_get_integration_from_rule_id');
+jest.mock('@kbn/fleet-plugin/public/hooks');
+
+describe('IntegrationIcon', () => {
+  it('should return a single integration icon', () => {
+    (useGetIntegrationFromRuleId as jest.Mock).mockReturnValue({
+      integration: {
+        title: 'title',
+        icons: [{ type: 'type', src: 'src' }],
+        name: 'name',
+        version: 'version',
+      },
+      isLoading: false,
+    });
+    (usePackageIconType as jest.Mock).mockReturnValue('iconType');
+
+    const { getByTestId } = render(
+      <IntlProvider locale="en">
+        <IntegrationIcon ruleId={'name'} />
+      </IntlProvider>
+    );
+
+    expect(getByTestId(INTEGRATION_INTEGRATION_ICON_TEST_ID)).toBeInTheDocument();
+  });
+
+  it('should return a single integration loading', () => {
+    (useGetIntegrationFromRuleId as jest.Mock).mockReturnValue({
+      integration: {},
+      isLoading: true,
+    });
+
+    const { getByTestId } = render(
+      <IntlProvider locale="en">
+        <IntegrationIcon ruleId={''} />
+      </IntlProvider>
+    );
+
+    expect(getByTestId(INTEGRATION_LOADING_SKELETON_TEST_ID)).toBeInTheDocument();
+  });
+});

x-pack/solutions/security/plugins/security_solution/public/detections/components/alert_summary/common/integration_icon.tsx

@@ -0,0 +1,55 @@
+/*
+ * 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 } from 'react';
+import { EuiSkeletonText } from '@elastic/eui';
+import { CardIcon } from '@kbn/fleet-plugin/public';
+import type { IconSize } from '@elastic/eui/src/components/icon/icon';
+import { useGetIntegrationFromRuleId } from '../../../hooks/alert_summary/use_get_integration_from_rule_id';
+
+export const INTEGRATION_LOADING_SKELETON_TEST_ID = 'ai-for-soc-alert-integration-loading-skeleton';
+export const INTEGRATION_INTEGRATION_ICON_TEST_ID = 'ai-for-soc-alert-integration-icon';
+
+interface IntegrationProps {
+  /**
+   * Id of the rule the alert was generated by
+   */
+  ruleId: string;
+  /**
+   * Changes the size of the icon. Uses the Eui IconSize interface.
+   * Defaults to s
+   */
+  iconSize?: IconSize;
+}
+
+/**
+ * Renders the icon for the integration that matches the rule id.
+ * In AI for SOC, we can retrieve the integration/package that matches a specific rule, via the related_integrations field on the rule.
+ */
+export const IntegrationIcon = memo(({ ruleId, iconSize = 's' }: IntegrationProps) => {
+  const { integration, isLoading } = useGetIntegrationFromRuleId({ ruleId });
+
+  return (
+    <EuiSkeletonText
+      data-test-subj={INTEGRATION_LOADING_SKELETON_TEST_ID}
+      isLoading={isLoading}
+      lines={1}
+    >
+      {integration ? (
+        <CardIcon
+          data-test-subj={INTEGRATION_INTEGRATION_ICON_TEST_ID}
+          icons={integration.icons}
+          integrationName={integration.title}
+          packageName={integration.name}
+          size={iconSize}
+          version={integration.version}
+        />
+      ) : null}
+    </EuiSkeletonText>
+  );
+});
+IntegrationIcon.displayName = 'IntegrationIcon';

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

@@ -0,0 +1,58 @@
+/*
+ * 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 type { Alert } from '@kbn/alerting-types';
+import { ActionsCell, ROW_ACTION_FLYOUT_ICON_TEST_ID } from './actions_cell';
+import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
+import { IOCPanelKey } from '../../../../flyout/ai_for_soc/constants/panel_keys';
+
+jest.mock('@kbn/expandable-flyout');
+
+describe('ActionsCell', () => {
+  it('should render icons', () => {
+    (useExpandableFlyoutApi as jest.Mock).mockReturnValue({
+      openFlyout: jest.fn(),
+    });
+
+    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 = {
+      _id: '_id',
+      _index: '_index',
+    };
+
+    const { getByTestId } = render(<ActionsCell alert={alert} />);
+
+    getByTestId(ROW_ACTION_FLYOUT_ICON_TEST_ID).click();
+
+    expect(openFlyout).toHaveBeenCalledWith({
+      right: {
+        id: IOCPanelKey,
+        params: {
+          id: alert._id,
+          indexName: alert._index,
+        },
+      },
+    });
+  });
+});

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

@@ -0,0 +1,66 @@
+/*
+ * 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 } from 'react';
+import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
+import { EuiButtonIcon, 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';
+
+export interface ActionsCellProps {
+  /**
+   * Alert data passed from the renderCellValue callback via the AlertWithLegacyFormats interface
+   */
+  alert: Alert;
+}
+
+/**
+ * Component used in the AI for SOC alert summary table.
+ * It is passed to the renderActionsCell property of the EuiDataGrid.
+ * It renders all the icons in the row action icons:
+ * - open flyout
+ * - 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>
+  );
+});
+
+ActionsCell.displayName = 'ActionsCell';

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

@@ -5,56 +5,12 @@
  * 2.0.
  */
 
-import {
-  getIntegrationComponent,
-  groupStatsRenderer,
-  Integration,
-  INTEGRATION_ICON_TEST_ID,
-  INTEGRATION_LOADING_TEST_ID,
-} from './group_stats_renderers';
-import type { GenericBuckets } from '@kbn/grouping/src';
-import { render } from '@testing-library/react';
-import React from 'react';
+import { getIntegrationComponent, groupStatsRenderer } from './group_stats_renderers';
 import { useGetIntegrationFromRuleId } from '../../../hooks/alert_summary/use_get_integration_from_rule_id';
-import { usePackageIconType } from '@kbn/fleet-plugin/public/hooks';
 
 jest.mock('../../../hooks/alert_summary/use_get_integration_from_rule_id');
 jest.mock('@kbn/fleet-plugin/public/hooks');
 
-describe('Integration', () => {
-  it('should return a single integration icon', () => {
-    (useGetIntegrationFromRuleId as jest.Mock).mockReturnValue({
-      integration: {
-        title: 'title',
-        icons: [{ type: 'type', src: 'src' }],
-        name: 'name',
-        version: 'version',
-      },
-      isLoading: false,
-    });
-    (usePackageIconType as jest.Mock).mockReturnValue('iconType');
-
-    const bucket: GenericBuckets = { key: 'crowdstrike', doc_count: 10 };
-
-    const { getByTestId } = render(<Integration signalRuleIdBucket={bucket} />);
-
-    expect(getByTestId(INTEGRATION_ICON_TEST_ID)).toBeInTheDocument();
-  });
-
-  it('should return a single integration loading', () => {
-    (useGetIntegrationFromRuleId as jest.Mock).mockReturnValue({
-      integration: {},
-      isLoading: true,
-    });
-
-    const bucket: GenericBuckets = { key: 'crowdstrike', doc_count: 10 };
-
-    const { getByTestId } = render(<Integration signalRuleIdBucket={bucket} />);
-
-    expect(getByTestId(INTEGRATION_LOADING_TEST_ID)).toBeInTheDocument();
-  });
-});
-
 describe('getIntegrationComponent', () => {
   it('should return an empty array', () => {
     const groupStatsItems = getIntegrationComponent({
@@ -80,13 +36,8 @@ describe('getIntegrationComponent', () => {
 
     expect(groupStatsItems.length).toBe(1);
     expect(groupStatsItems[0].component).toMatchInlineSnapshot(`
-      <Memo(Integration)
-        signalRuleIdBucket={
-          Object {
-            "doc_count": 10,
-            "key": "crowdstrike",
-          }
-        }
+      <Memo(IntegrationIcon)
+        ruleId="crowdstrike"
       />
     `);
   });

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

@@ -5,13 +5,10 @@
  * 2.0.
  */
 
-import { EuiSkeletonText } from '@elastic/eui';
 import type { GroupStatsItem, RawBucket } from '@kbn/grouping';
-import React, { memo } from 'react';
+import React from 'react';
 import { i18n } from '@kbn/i18n';
-import type { GenericBuckets } from '@kbn/grouping/src';
-import { CardIcon } from '@kbn/fleet-plugin/public';
-import { useGetIntegrationFromRuleId } from '../../../hooks/alert_summary/use_get_integration_from_rule_id';
+import { IntegrationIcon } from '../common/integration_icon';
 import { getRulesBadge, getSeverityComponent } from '../../alerts_table/grouping_settings';
 import { DEFAULT_GROUP_STATS_RENDERER } from '../../alerts_table/alerts_grouping';
 import type { AlertsGroupingAggregation } from '../../alerts_table/grouping_settings/types';
@@ -29,41 +26,6 @@ const STATS_GROUP_SIGNAL_RULE_ID_MULTI = i18n.translate(
   }
 );
 
-export const INTEGRATION_ICON_TEST_ID = 'alert-summary-table-integration-cell-renderer-icon';
-export const INTEGRATION_LOADING_TEST_ID = 'alert-summary-table-integration-cell-renderer-loading';
-
-interface IntegrationProps {
-  /**
-   * Aggregation buckets for integrations
-   */
-  signalRuleIdBucket: GenericBuckets;
-}
-
-/**
- * Renders the icon for the integration that matches the rule id.
- * In AI for SOC, we can retrieve the integration/package that matches a specific rule, via the related_integrations field on the rule.
- */
-export const Integration = memo(({ signalRuleIdBucket }: IntegrationProps) => {
-  const signalRuleId = signalRuleIdBucket.key;
-  const { integration, isLoading } = useGetIntegrationFromRuleId({ ruleId: signalRuleId });
-
-  return (
-    <EuiSkeletonText data-test-subj={INTEGRATION_LOADING_TEST_ID} isLoading={isLoading} lines={1}>
-      {integration ? (
-        <CardIcon
-          data-test-subj={INTEGRATION_ICON_TEST_ID}
-          icons={integration.icons}
-          integrationName={integration.title}
-          packageName={integration.name}
-          size="s"
-          version={integration.version}
-        />
-      ) : null}
-    </EuiSkeletonText>
-  );
-});
-Integration.displayName = 'Integration';
-
 /**
  * Return a renderer for integration aggregation.
  */
@@ -77,10 +39,13 @@ export const getIntegrationComponent = (
   }
 
   if (signalRuleIds.length === 1) {
+    const ruleId = Array.isArray(signalRuleIds[0].key)
+      ? signalRuleIds[0].key[0]
+      : signalRuleIds[0].key;
     return [
       {
         title: STATS_GROUP_SIGNAL_RULE_ID,
-        component: <Integration signalRuleIdBucket={signalRuleIds[0]} />,
+        component: <IntegrationIcon ruleId={ruleId} />,
       },
     ];
   }