[AI4DSOC] Fix link to the new integrations page (#219030)

PhilippeOberti · web-flow · commit 10cfa3137072 · 2025-04-24T08:14:53.000-05:00
## Summary This PR fixes the links to the integrations page, introduced in [this PR](#215246) and [that one](#215266). At the time of the previous PRs, the new AI4DSOC integration page had not been created, so we were using the link to the normal integrations page. [This recent PR](#217905) added the new page, so we need to update those links From the landing page https://github.com/user-attachments/assets/907c12be-84dc-4bbd-a161-c8b16e2ecdba From the alert summary page https://github.com/user-attachments/assets/c25be7b3-f7ef-4e5f-8948-40def6a8d026 ## How to test This needs to be ran in Serverless: - `yarn es serverless --projectType security` - `yarn serverless-security --no-base-path` You also need to enable the AI for SOC tier, by adding the following to your `serverless.security.dev.yaml` file: ``` xpack.securitySolutionServerless.productTypes: [ { product_line: 'ai_soc', product_tier: 'search_ai_lake' }, ] ``` Use one of these Serverless users: - `platform_engineer` - `endpoint_operations_analyst` - `endpoint_policy_manager` - `admin` - `system_indices_superuser` Then: - generate data: `yarn test:generate:serverless-dev` - create 4 catch all rules, each with a name of a AI for SOC integration (`google_secops`, `microsoft_sentinel`,, `sentinel_one` and `crowdstrike`) - change [this line](https://github.com/elastic/kibana/blob/main/x-pack/solutions/security/plugins/security_solution/public/detections/hooks/alert_summary/use_fetch_integrations.ts#L73) to `installedPackages: availablePackages` to force having some packages installed - change [this line](https://github.com/elastic/kibana/blob/main/x-pack/solutions/security/plugins/security_solution/public/detections/hooks/alert_summary/use_integrations.ts#L63) to `r.name === p.name` to make sure there will be matches between integrations and rules ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios Relates to elastic/security-team#11955
diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alert_summary/integrations/integration_section.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alert_summary/integrations/integration_section.test.tsx
@@ -14,11 +14,11 @@ import {
   CARD_TEST_ID,
   IntegrationSection,
 } from './integration_section';
-import { useAddIntegrationsUrl } from '../../../../common/hooks/use_add_integrations_url';
 import { useIntegrationsLastActivity } from '../../../hooks/alert_summary/use_integrations_last_activity';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { useNavigateToIntegrationsPage } from '../../../hooks/alert_summary/use_navigate_to_integrations_page';
 
-jest.mock('../../../../common/hooks/use_add_integrations_url');
+jest.mock('../../../hooks/alert_summary/use_navigate_to_integrations_page');
 jest.mock('../../../hooks/alert_summary/use_integrations_last_activity');
 jest.mock('@kbn/kibana-react-plugin/public');
 
@@ -45,7 +45,6 @@ describe('<IntegrationSection />', () => {
   beforeEach(() => {
     (useKibana as jest.Mock).mockReturnValue({
       services: {
-        application: { navigateToApp: jest.fn() },
         http: {
           basePath: {
             prepend: jest.fn().mockReturnValue('/app/integrations/detail/splunk-0.1.0/overview'),
@@ -56,7 +55,7 @@ describe('<IntegrationSection />', () => {
   });
 
   it('should render a card for each integration ', () => {
-    (useAddIntegrationsUrl as jest.Mock).mockReturnValue({ onClick: jest.fn() });
+    (useNavigateToIntegrationsPage as jest.Mock).mockReturnValue(jest.fn());
     (useIntegrationsLastActivity as jest.Mock).mockReturnValue({
       isLoading: true,
       lastActivities: {},
@@ -69,16 +68,14 @@ describe('<IntegrationSection />', () => {
   });
 
   it('should navigate to the fleet page when clicking on the add integrations button', () => {
-    const addIntegration = jest.fn();
-    (useAddIntegrationsUrl as jest.Mock).mockReturnValue({
-      onClick: addIntegration,
-    });
+    const navigateToIntegrationsPage = jest.fn();
+    (useNavigateToIntegrationsPage as jest.Mock).mockReturnValue(navigateToIntegrationsPage);
     (useIntegrationsLastActivity as jest.Mock).mockReturnValue([]);
 
     const { getByTestId } = render(<IntegrationSection packages={[]} />);
 
     getByTestId(ADD_INTEGRATIONS_BUTTON_TEST_ID).click();
 
-    expect(addIntegration).toHaveBeenCalled();
+    expect(navigateToIntegrationsPage).toHaveBeenCalled();
   });
 });
diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alert_summary/integrations/integration_section.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alert_summary/integrations/integration_section.tsx
@@ -11,7 +11,7 @@ import { i18n } from '@kbn/i18n';
 import type { PackageListItem } from '@kbn/fleet-plugin/common';
 import { useIntegrationsLastActivity } from '../../../hooks/alert_summary/use_integrations_last_activity';
 import { IntegrationCard } from './integration_card';
-import { useAddIntegrationsUrl } from '../../../../common/hooks/use_add_integrations_url';
+import { useNavigateToIntegrationsPage } from '../../../hooks/alert_summary/use_navigate_to_integrations_page';
 
 const ADD_INTEGRATION = i18n.translate(
   'xpack.securitySolution.alertSummary.integrations.addIntegrationButtonLabel',
@@ -36,7 +36,7 @@ export interface IntegrationSectionProps {
  * Each integration card is also displaying the last time the sync happened (using streams).
  */
 export const IntegrationSection = memo(({ packages }: IntegrationSectionProps) => {
-  const { onClick: addIntegration } = useAddIntegrationsUrl(); // TODO this link might have to be revisited once the integration work is done
+  const navigateToIntegrationsPage = useNavigateToIntegrationsPage();
   const { isLoading, lastActivities } = useIntegrationsLastActivity({ packages });
 
   return (
@@ -59,7 +59,7 @@ export const IntegrationSection = memo(({ packages }: IntegrationSectionProps) =
         <EuiButtonEmpty
           data-test-subj={ADD_INTEGRATIONS_BUTTON_TEST_ID}
           iconType="plusInCircle"
-          onClick={addIntegration}
+          onClick={navigateToIntegrationsPage}
         >
           {ADD_INTEGRATION}
         </EuiButtonEmpty>
diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alert_summary/landing_page/landing_page.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alert_summary/landing_page/landing_page.test.tsx
@@ -14,13 +14,11 @@ import {
   LANDING_PAGE_VIEW_ALL_INTEGRATIONS_BUTTON_TEST_ID,
   LandingPage,
 } from './landing_page';
-import { useAddIntegrationsUrl } from '../../../../common/hooks/use_add_integrations_url';
 import type { PackageListItem } from '@kbn/fleet-plugin/common';
 import { installationStatuses } from '@kbn/fleet-plugin/common/constants';
-import { useKibana } from '../../../../common/lib/kibana';
+import { useNavigateToIntegrationsPage } from '../../../hooks/alert_summary/use_navigate_to_integrations_page';
 
-jest.mock('../../../../common/hooks/use_add_integrations_url');
-jest.mock('../../../../common/lib/kibana');
+jest.mock('../../../hooks/alert_summary/use_navigate_to_integrations_page');
 
 const packages: PackageListItem[] = [
   {
@@ -47,16 +45,8 @@ const packages: PackageListItem[] = [
 ];
 
 describe('<LandingPage />', () => {
-  beforeEach(() => {
-    (useKibana as jest.Mock).mockReturnValue({
-      services: { application: { navigateToApp: jest.fn() } },
-    });
-  });
-
   it('should render all the components', () => {
-    (useAddIntegrationsUrl as jest.Mock).mockReturnValue({
-      onClick: jest.fn(),
-    });
+    (useNavigateToIntegrationsPage as jest.Mock).mockReturnValue(jest.fn());
 
     const { getByTestId, queryByTestId } = render(<LandingPage packages={packages} />);
 
@@ -75,14 +65,12 @@ describe('<LandingPage />', () => {
   });
 
   it('should navigate to the fleet page when clicking on the more integrations button', () => {
-    const moreIntegrations = jest.fn();
-    (useAddIntegrationsUrl as jest.Mock).mockReturnValue({
-      onClick: moreIntegrations,
-    });
+    const navigateToIntegrationsPage = jest.fn();
+    (useNavigateToIntegrationsPage as jest.Mock).mockReturnValue(navigateToIntegrationsPage);
 
     const { getByTestId } = render(<LandingPage packages={packages} />);
 
     getByTestId(LANDING_PAGE_VIEW_ALL_INTEGRATIONS_BUTTON_TEST_ID).click();
-    expect(moreIntegrations).toHaveBeenCalled();
+    expect(navigateToIntegrationsPage).toHaveBeenCalled();
   });
 });
diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alert_summary/landing_page/landing_page.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alert_summary/landing_page/landing_page.tsx
@@ -19,9 +19,9 @@ import {
 } from '@elastic/eui';
 import type { PackageListItem } from '@kbn/fleet-plugin/common';
 import { i18n } from '@kbn/i18n';
-import { useAddIntegrationsUrl } from '../../../../common/hooks/use_add_integrations_url';
 import { IntegrationCard } from './integration_card';
 import imageSrc from './alert_summary.png';
+import { useNavigateToIntegrationsPage } from '../../../hooks/alert_summary/use_navigate_to_integrations_page';
 
 const TITLE = i18n.translate('xpack.securitySolution.alertSummary.landingPage.title', {
   defaultMessage: 'All your alerts in one place with AI',
@@ -39,10 +39,7 @@ const VIEW_ALL_INTEGRATIONS = i18n.translate(
   }
 );
 
-const PRIMARY_INTEGRATIONS = [
-  'splunk', // doesnt yet exist
-  'google_secops',
-];
+const PRIMARY_INTEGRATIONS = ['splunk', 'google_secops'];
 
 export const LANDING_PAGE_PROMPT_TEST_ID = 'alert-summary-landing-page-prompt';
 export const LANDING_PAGE_IMAGE_TEST_ID = 'alert-summary-landing-page-image';
@@ -63,7 +60,7 @@ export interface LandingPageProps {
  */
 export const LandingPage = memo(({ packages }: LandingPageProps) => {
   const { euiTheme } = useEuiTheme();
-  const { onClick: moreIntegrations } = useAddIntegrationsUrl(); // TODO this link might have to be revisited once the integration work is done
+  const navigateToIntegrationsPage = useNavigateToIntegrationsPage();
 
   // We only want to show the 2 top integrations, Splunk and GoogleSecOps, in that specific order
   const primaryPackages = useMemo(
@@ -141,7 +138,7 @@ export const LandingPage = memo(({ packages }: LandingPageProps) => {
             <EuiButtonEmpty
               data-test-subj={LANDING_PAGE_VIEW_ALL_INTEGRATIONS_BUTTON_TEST_ID}
               iconType="plusInCircle"
-              onClick={moreIntegrations}
+              onClick={navigateToIntegrationsPage}
             >
               {VIEW_ALL_INTEGRATIONS}
             </EuiButtonEmpty>
diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alert_summary/wrapper.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alert_summary/wrapper.test.tsx
@@ -18,12 +18,12 @@ import {
 } from './wrapper';
 import { useKibana } from '../../../common/lib/kibana';
 import { TestProviders } from '../../../common/mock';
-import { useAddIntegrationsUrl } from '../../../common/hooks/use_add_integrations_url';
 import { useIntegrationsLastActivity } from '../../hooks/alert_summary/use_integrations_last_activity';
 import { ADD_INTEGRATIONS_BUTTON_TEST_ID } from './integrations/integration_section';
 import { SEARCH_BAR_TEST_ID } from './search_bar/search_bar_section';
 import { KPIS_SECTION } from './kpis/kpis_section';
 import { GROUPED_TABLE_TEST_ID } from './table/table_section';
+import { useNavigateToIntegrationsPage } from '../../hooks/alert_summary/use_navigate_to_integrations_page';
 
 jest.mock('../../../common/components/search_bar', () => ({
   // The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables so we can't use SEARCH_BAR_TEST_ID
@@ -33,7 +33,7 @@ jest.mock('../alerts_table/alerts_grouping', () => ({
   GroupedAlertsTable: () => <div />,
 }));
 jest.mock('../../../common/lib/kibana');
-jest.mock('../../../common/hooks/use_add_integrations_url');
+jest.mock('../../hooks/alert_summary/use_navigate_to_integrations_page');
 jest.mock('../../hooks/alert_summary/use_integrations_last_activity');
 
 const packages: PackageListItem[] = [
@@ -98,7 +98,7 @@ describe('<Wrapper />', () => {
   });
 
   it('should render the content if the dataView is created correctly', async () => {
-    (useAddIntegrationsUrl as jest.Mock).mockReturnValue({ onClick: jest.fn() });
+    (useNavigateToIntegrationsPage as jest.Mock).mockReturnValue(jest.fn());
     (useIntegrationsLastActivity as jest.Mock).mockReturnValue({
       isLoading: true,
       lastActivities: {},
diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/hooks/alert_summary/use_navigate_to_integrations_page.test.ts b/x-pack/solutions/security/plugins/security_solution/public/detections/hooks/alert_summary/use_navigate_to_integrations_page.test.ts
@@ -0,0 +1,39 @@
+/*
+ * 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 { renderHook } from '@testing-library/react';
+import {
+  INTEGRATIONS_URL,
+  useNavigateToIntegrationsPage,
+} from './use_navigate_to_integrations_page';
+import { useKibana, useNavigateTo } from '../../../common/lib/kibana';
+
+jest.mock('../../../common/lib/kibana');
+
+describe('useNavigateToIntegrationsPage', () => {
+  it('should return function', () => {
+    (useKibana as jest.Mock).mockReturnValue({
+      services: {
+        http: {
+          basePath: {
+            prepend: jest.fn().mockImplementation((url) => url),
+          },
+        },
+      },
+    });
+    const navigateTo = jest.fn();
+    (useNavigateTo as jest.Mock).mockReturnValue({ navigateTo });
+
+    const { result } = renderHook(() => useNavigateToIntegrationsPage());
+
+    expect(typeof result.current).toBe('function');
+    result.current();
+    expect(navigateTo).toHaveBeenCalledWith({
+      url: INTEGRATIONS_URL,
+    });
+  });
+});
diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/hooks/alert_summary/use_navigate_to_integrations_page.ts b/x-pack/solutions/security/plugins/security_solution/public/detections/hooks/alert_summary/use_navigate_to_integrations_page.ts
@@ -0,0 +1,29 @@
+/*
+ * 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 { useCallback } from 'react';
+import { useKibana, useNavigateTo } from '../../../common/lib/kibana';
+
+export const INTEGRATIONS_URL = '/app/security/configurations/integrations/browse';
+
+/**
+ * Hook that returns a callback event to navigate to the AI4DSOC integrations page
+ */
+export const useNavigateToIntegrationsPage = (): (() => void) => {
+  const {
+    services: {
+      http: {
+        basePath: { prepend },
+      },
+    },
+  } = useKibana();
+  const { navigateTo } = useNavigateTo();
+
+  return useCallback(() => {
+    navigateTo({ url: prepend(INTEGRATIONS_URL) });
+  }, [navigateTo, prepend]);
+};
