[AI4DSOC] Change the Cases page to use the AI for SOC alerts table

x-pack/solutions/security/plugins/security_solution/public/cases/components/ai_for_soc/table.test.tsx

@@ -0,0 +1,53 @@
+/*
+ * 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 { DataView } from '@kbn/data-views-plugin/common';
+import { createStubDataView } from '@kbn/data-views-plugin/common/data_views/data_view.stub';
+import { TestProviders } from '../../../common/mock';
+import { Table } from './table';
+import type { PackageListItem } from '@kbn/fleet-plugin/common';
+import { installationStatuses } from '@kbn/fleet-plugin/common/constants';
+
+const dataView: DataView = createStubDataView({ spec: {} });
+const packages: PackageListItem[] = [
+  {
+    id: 'splunk',
+    icons: [{ src: 'icon.svg', path: 'mypath/icon.svg', type: 'image/svg+xml' }],
+    name: 'splunk',
+    status: installationStatuses.NotInstalled,
+    title: 'Splunk',
+    version: '0.1.0',
+  },
+];
+const ruleResponse = {
+  rules: [],
+  isLoading: false,
+};
+const id = 'id';
+const query = { ids: { values: ['abcdef'] } };
+const onLoaded = jest.fn();
+
+describe('<Table />', () => {
+  it('should render all components', () => {
+    const { getByTestId } = render(
+      <TestProviders>
+        <Table
+          dataView={dataView}
+          id={id}
+          onLoaded={onLoaded}
+          packages={packages}
+          query={query}
+          ruleResponse={ruleResponse}
+        />
+      </TestProviders>
+    );
+
+    expect(getByTestId('alertsTableErrorPrompt')).toBeInTheDocument();
+  });
+});

x-pack/solutions/security/plugins/security_solution/public/cases/components/ai_for_soc/table.tsx

@@ -0,0 +1,126 @@
+/*
+ * 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, useMemo } from 'react';
+import type { DataView } from '@kbn/data-views-plugin/common';
+import { AlertsTable } from '@kbn/response-ops-alerts-table';
+import type { PackageListItem } from '@kbn/fleet-plugin/common';
+import type { QueryDslQueryContainer } from '@elastic/elasticsearch/lib/api/types';
+import type { Alert } from '@kbn/alerting-types';
+import type { EuiDataGridColumn } from '@elastic/eui';
+import type { AdditionalTableContext } from '../../../detections/components/alert_summary/table/table';
+import {
+  ACTION_COLUMN_WIDTH,
+  ALERT_TABLE_CONSUMERS,
+  columns,
+  GRID_STYLE,
+  ROW_HEIGHTS_OPTIONS,
+  RULE_TYPE_IDS,
+  TOOLBAR_VISIBILITY,
+} from '../../../detections/components/alert_summary/table/table';
+import { ActionsCell } from '../../../detections/components/alert_summary/table/actions_cell';
+import { getDataViewStateFromIndexFields } from '../../../common/containers/source/use_data_view';
+import { useKibana } from '../../../common/lib/kibana';
+import { CellValue } from '../../../detections/components/alert_summary/table/render_cell';
+import type { RuleResponse } from '../../../../common/api/detection_engine';
+
+export interface TableProps {
+  /**
+   * DataView created for the alert summary page
+   */
+  dataView: DataView;
+  /**
+   * Id to pass down to the ResponseOps alerts table
+   */
+  id: string;
+  /**
+   * Callback fired when the alerts have been first loaded
+   */
+  onLoaded?: (alerts: Alert[], columns: EuiDataGridColumn[]) => void;
+  /**
+   * List of installed AI for SOC integrations
+   */
+  packages: PackageListItem[];
+  /**
+   * Query that contains the id of the alerts to display in the table
+   */
+  query: Pick<QueryDslQueryContainer, 'bool' | 'ids'>;
+  /**
+   * Result from the useQuery to fetch all rules
+   */
+  ruleResponse: {
+    /**
+     * Result from fetching all rules
+     */
+    rules: RuleResponse[];
+    /**
+     * True while rules are being fetched
+     */
+    isLoading: boolean;
+  };
+}
+
+/**
+ * Component used in the Cases page under Alerts tab, only in the AI4DSOC tier.
+ * It leverages a lot of configurations and constants from the Alert summary page alerts table, and renders the ResponseOps AlertsTable.
+ */
+export const Table = memo(
+  ({ dataView, id, onLoaded, packages, query, ruleResponse }: TableProps) => {
+    const {
+      services: { application, data, fieldFormats, http, licensing, notifications, settings },
+    } = useKibana();
+    const services = useMemo(
+      () => ({
+        data,
+        http,
+        notifications,
+        fieldFormats,
+        application,
+        licensing,
+        settings,
+      }),
+      [application, data, fieldFormats, http, licensing, notifications, settings]
+    );
+
+    const dataViewSpec = useMemo(() => dataView.toSpec(), [dataView]);
+
+    const { browserFields } = useMemo(
+      () => getDataViewStateFromIndexFields('', dataViewSpec.fields),
+      [dataViewSpec.fields]
+    );
+
+    const additionalContext: AdditionalTableContext = useMemo(
+      () => ({
+        packages,
+        ruleResponse,
+      }),
+      [packages, ruleResponse]
+    );
+
+    return (
+      <AlertsTable
+        actionsColumnWidth={ACTION_COLUMN_WIDTH}
+        additionalContext={additionalContext}
+        browserFields={browserFields}
+        columns={columns}
+        consumers={ALERT_TABLE_CONSUMERS}
+        gridStyle={GRID_STYLE}
+        id={id}
+        onLoaded={onLoaded}
+        query={query}
+        renderActionsCell={ActionsCell}
+        renderCellValue={CellValue}
+        rowHeightsOptions={ROW_HEIGHTS_OPTIONS}
+        ruleTypeIds={RULE_TYPE_IDS}
+        services={services}
+        toolbarVisibility={TOOLBAR_VISIBILITY}
+      />
+    );
+  }
+);
+
+Table.displayName = 'Table';

x-pack/solutions/security/plugins/security_solution/public/cases/components/ai_for_soc/wrapper.test.tsx

@@ -0,0 +1,135 @@
+/*
+ * 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, screen, waitFor } from '@testing-library/react';
+import { AiForSOCAlertsTable, CONTENT_TEST_ID, ERROR_TEST_ID, SKELETON_TEST_ID } from './wrapper';
+import { useKibana } from '../../../common/lib/kibana';
+import { TestProviders } from '../../../common/mock';
+import { useFetchIntegrations } from '../../../detections/hooks/alert_summary/use_fetch_integrations';
+import { useFindRulesQuery } from '../../../detection_engine/rule_management/api/hooks/use_find_rules_query';
+
+jest.mock('./table', () => ({
+  Table: () => <div />,
+}));
+jest.mock('../../../common/lib/kibana');
+jest.mock('../../../detections/hooks/alert_summary/use_fetch_integrations');
+jest.mock('../../../detection_engine/rule_management/api/hooks/use_find_rules_query');
+
+const id = 'id';
+const query = { ids: { values: ['abcdef'] } };
+const onLoaded = jest.fn();
+
+describe('<AiForSOCAlertsTab />', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    (useFetchIntegrations as jest.Mock).mockReturnValue({
+      installedPackages: [],
+      isLoading: false,
+    });
+    (useFindRulesQuery as jest.Mock).mockReturnValue({
+      data: [],
+      isLoading: false,
+    });
+  });
+
+  it('should render a loading skeleton while creating the dataView', async () => {
+    (useKibana as jest.Mock).mockReturnValue({
+      services: {
+        data: {
+          dataViews: {
+            create: jest.fn(),
+            clearInstanceCache: jest.fn(),
+          },
+        },
+        http: { basePath: { prepend: jest.fn() } },
+      },
+    });
+
+    render(<AiForSOCAlertsTable id={id} onLoaded={onLoaded} query={query} />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId(SKELETON_TEST_ID)).toBeInTheDocument();
+    });
+  });
+
+  it('should render a loading skeleton while fetching packages (integrations)', async () => {
+    (useKibana as jest.Mock).mockReturnValue({
+      services: {
+        data: {
+          dataViews: {
+            create: jest.fn(),
+            clearInstanceCache: jest.fn(),
+          },
+        },
+        http: { basePath: { prepend: jest.fn() } },
+      },
+    });
+    (useFetchIntegrations as jest.Mock).mockReturnValue({
+      installedPackages: [],
+      isLoading: true,
+    });
+
+    render(<AiForSOCAlertsTable id={id} onLoaded={onLoaded} query={query} />);
+
+    expect(await screen.findByTestId(SKELETON_TEST_ID)).toBeInTheDocument();
+  });
+
+  it('should render an error if the dataView fail to be created correctly', async () => {
+    (useKibana as jest.Mock).mockReturnValue({
+      services: {
+        data: {
+          dataViews: {
+            create: jest.fn().mockReturnValue(undefined),
+            clearInstanceCache: jest.fn(),
+          },
+        },
+      },
+    });
+
+    jest.mock('react', () => ({
+      ...jest.requireActual('react'),
+      useEffect: jest.fn((f) => f()),
+    }));
+
+    render(<AiForSOCAlertsTable id={id} onLoaded={onLoaded} query={query} />);
+
+    expect(await screen.findByTestId(ERROR_TEST_ID)).toHaveTextContent(
+      'Unable to create data view'
+    );
+  });
+
+  it('should render the content', async () => {
+    (useKibana as jest.Mock).mockReturnValue({
+      services: {
+        data: {
+          dataViews: {
+            create: jest
+              .fn()
+              .mockReturnValue({ getIndexPattern: jest.fn(), id: 'id', toSpec: jest.fn() }),
+            clearInstanceCache: jest.fn(),
+          },
+          query: { filterManager: { getFilters: jest.fn() } },
+        },
+      },
+    });
+
+    jest.mock('react', () => ({
+      ...jest.requireActual('react'),
+      useEffect: jest.fn((f) => f()),
+    }));
+
+    render(
+      <TestProviders>
+        <AiForSOCAlertsTable id={id} onLoaded={onLoaded} query={query} />
+      </TestProviders>
+    );
+
+    expect(await screen.findByTestId(CONTENT_TEST_ID)).toBeInTheDocument();
+  });
+});