[AI4DSOC] Add configurations integrations page

x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/components/package_card.tsx

@@ -68,11 +68,13 @@ export function PackageCard({
   titleLineClamp,
   descriptionLineClamp,
   maxCardHeight,
+  showDescription = true,
+  showReleaseBadge = true,
 }: PackageCardProps) {
   const theme = useEuiTheme();
 
   let releaseBadge: React.ReactNode | null = null;
-  if (release && release !== 'ga') {
+  if (release && release !== 'ga' && showReleaseBadge) {
     releaseBadge = (
       <EuiFlexItem grow={false}>
         <EuiSpacer size="xs" />
@@ -220,7 +222,7 @@ export function PackageCard({
               ${getLineClampStyles(titleLineClamp)}
             }
 
-            min-height: 127px;
+            min-height: ${showDescription ? '127px' : null};
             border-color: ${isQuickstart ? theme.euiTheme.colors.accent : null};
             max-height: ${maxCardHeight ? `${maxCardHeight}px` : null};
             overflow: ${maxCardHeight ? 'hidden' : null};
@@ -230,15 +232,15 @@ export function PackageCard({
           layout="horizontal"
           title={title || ''}
           titleSize="xs"
-          description={description}
+          description={showDescription ? description : ''}
           hasBorder
           icon={
             <CardIcon
               icons={icons}
               packageName={name}
               integrationName={integration}
               version={version}
-              size="xl"
+              size={showDescription ? 'xl' : 'xxl'}
             />
           }
           onClick={onClickProp ?? onCardClick}

x-pack/platform/plugins/shared/fleet/public/applications/integrations/sections/epm/screens/home/card_utils.tsx

@@ -58,8 +58,10 @@ export interface IntegrationCardItem {
   name: string;
   onCardClick?: () => void;
   release?: IntegrationCardReleaseLabel;
+  showDescription?: boolean;
   showInstallationStatus?: boolean;
   showLabels?: boolean;
+  showReleaseBadge?: boolean;
   title: string;
   // Security Solution uses this prop to determine how many lines the card title should be truncated
   titleLineClamp?: number;

x-pack/solutions/security/plugins/security_solution/public/common/lib/search_ai_lake/hooks/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+export { useEnhancedIntegrationCards } from './integrations/use_enhanced_integration_cards';

x-pack/solutions/security/plugins/security_solution/public/common/lib/search_ai_lake/hooks/integrations/constants.ts

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export const RETURN_APP_ID = 'returnAppId';
+export const RETURN_PATH = 'returnPath';

x-pack/solutions/security/plugins/security_solution/public/common/lib/search_ai_lake/hooks/integrations/use_enhanced_integration_cards.test.tsx

@@ -0,0 +1,169 @@
+/*
+ * 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 {
+  applyCategoryBadgeAndStyling,
+  useEnhancedIntegrationCards,
+  getCategoryBadgeIfAny,
+} from './use_enhanced_integration_cards';
+import { IntegrationsFacets } from '../../../../../configurations/constants';
+import type { IntegrationCardItem } from '@kbn/fleet-plugin/public';
+import { installationStatuses } from '@kbn/fleet-plugin/public';
+import { renderHook } from '@testing-library/react';
+
+const mockCard = (name: string, categories?: string[]) =>
+  ({
+    id: `epr:${name}`,
+    description: 'description',
+    icons: [],
+    title: name,
+    url: `/app/integrations/detail/${name}-1.0.0/overview`,
+    integration: '',
+    name,
+    version: '1.0.0',
+    release: 'ga',
+    categories: categories ?? [],
+    isUnverified: false,
+  } as IntegrationCardItem);
+
+describe('applyCategoryBadgeAndStyling', () => {
+  const mockInt = mockCard('crowdstrike', ['edr_xdr']);
+
+  it('should add the correct return path to the URL', () => {
+    const callerView = IntegrationsFacets.available;
+    const result = applyCategoryBadgeAndStyling(mockInt, callerView);
+
+    const urlParams = new URLSearchParams(result.url.split('?')[1]);
+    expect(urlParams.get('returnPath')).toBe(`/configurations/integrations/${callerView}`);
+  });
+
+  it('should add the EDR/XDR badge if the category includes edr_xdr', () => {
+    const cardWithEdrXdr = { ...mockInt, categories: ['edr_xdr'] };
+    const result = applyCategoryBadgeAndStyling(cardWithEdrXdr, IntegrationsFacets.available);
+
+    expect(result.extraLabelsBadges).toHaveLength(1);
+  });
+
+  it('should add the SIEM badge if the category includes siem', () => {
+    const cardWithSiem = { ...mockInt, categories: ['siem'] };
+    const result = applyCategoryBadgeAndStyling(cardWithSiem, IntegrationsFacets.available);
+
+    expect(result.extraLabelsBadges).toHaveLength(1);
+  });
+
+  it('should not add any badge if the category does not include edr_xdr or siem', () => {
+    const cardWithOtherCategory = { ...mockInt, categories: ['other'] };
+    const result = applyCategoryBadgeAndStyling(
+      cardWithOtherCategory,
+      IntegrationsFacets.available
+    );
+
+    expect(result.extraLabelsBadges).toHaveLength(0);
+  });
+
+  it('should set showDescription and showReleaseBadge to false', () => {
+    const result = applyCategoryBadgeAndStyling(mockInt, IntegrationsFacets.available);
+
+    expect(result.showDescription).toBe(false);
+    expect(result.showReleaseBadge).toBe(false);
+  });
+
+  it('should set maxCardHeight to 88', () => {
+    const result = applyCategoryBadgeAndStyling(mockInt, IntegrationsFacets.available);
+
+    expect(result.maxCardHeight).toBe(88);
+  });
+});
+
+describe('useEnhancedIntegrationCards', () => {
+  const intA = mockCard('crowdstrike', ['edr_xdr']);
+  const intB = mockCard('google_secops', ['siem']);
+  const intC = mockCard('microsoft_sentinel', ['siem']);
+  const intD = mockCard('sentinel_one', ['edr_xdr']);
+
+  it('should return sorted available integrations with badges applied', () => {
+    const mockIntegrationsList = [intA, intB, intC, intD];
+    const { result } = renderHook(() => useEnhancedIntegrationCards(mockIntegrationsList));
+
+    expect(result.current.available).toHaveLength(4);
+    expect(result.current.available[0].id).toBe('epr:google_secops');
+    expect(result.current.available[1].id).toBe('epr:microsoft_sentinel');
+    expect(result.current.available[0].extraLabelsBadges).toHaveLength(1);
+  });
+
+  it('should return sorted installed integrations with badges applied', () => {
+    const mockIntegrationsList = [
+      intA,
+      intB,
+      { ...intC, installStatus: installationStatuses.Installed },
+      intD,
+    ];
+    const { result } = renderHook(() => useEnhancedIntegrationCards(mockIntegrationsList));
+
+    expect(result.current.installed).toHaveLength(1);
+    expect(result.current.installed[0].id).toBe('epr:microsoft_sentinel');
+    expect(result.current.installed[0].extraLabelsBadges).toHaveLength(1);
+  });
+
+  it('should handle an empty integrations list', () => {
+    const { result } = renderHook(() => useEnhancedIntegrationCards([]));
+
+    expect(result.current.available).toHaveLength(0);
+    expect(result.current.installed).toHaveLength(0);
+  });
+
+  it('should correctly apply custom display order', () => {
+    const mockIntegrationsList = [intA, intB, intC, intD];
+
+    const shuffledList = [
+      mockIntegrationsList[3],
+      mockIntegrationsList[1],
+      mockIntegrationsList[0],
+      mockIntegrationsList[2],
+    ];
+
+    const { result } = renderHook(() => useEnhancedIntegrationCards(shuffledList));
+
+    expect(result.current.available[0].id).toBe('epr:google_secops');
+    expect(result.current.available[1].id).toBe('epr:microsoft_sentinel');
+    expect(result.current.available[2].id).toBe('epr:sentinel_one');
+    expect(result.current.available[3].id).toBe('epr:crowdstrike');
+  });
+});
+
+describe('getCategoryBadgeIfAny', () => {
+  it('should return "EDR/XDR" when the categories include "edr_xdr"', () => {
+    const categories = ['edr_xdr', 'other_category'];
+    const result = getCategoryBadgeIfAny(categories);
+    expect(result).toBe('EDR/XDR');
+  });
+
+  it('should return "SIEM" when the categories include "siem"', () => {
+    const categories = ['siem', 'other_category'];
+    const result = getCategoryBadgeIfAny(categories);
+    expect(result).toBe('SIEM');
+  });
+
+  it('should return "EDR/XDR" when both "edr_xdr" and "siem" are present', () => {
+    const categories = ['edr_xdr', 'siem'];
+    const result = getCategoryBadgeIfAny(categories);
+    // "edr_xdr" takes precedence, but we don't realistically expect both to be present
+    expect(result).toBe('EDR/XDR');
+  });
+
+  it('should return null when neither "edr_xdr" nor "siem" are present', () => {
+    const categories = ['other_category'];
+    const result = getCategoryBadgeIfAny(categories);
+    expect(result).toBeNull();
+  });
+
+  it('should return null when the categories array is empty', () => {
+    const categories: string[] = [];
+    const result = getCategoryBadgeIfAny(categories);
+    expect(result).toBeNull();
+  });
+});

x-pack/solutions/security/plugins/security_solution/public/common/lib/search_ai_lake/hooks/integrations/use_enhanced_integration_cards.tsx

@@ -0,0 +1,95 @@
+/*
+ * 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, { useMemo } from 'react';
+import { EuiFlexItem, EuiSpacer, EuiBadge } from '@elastic/eui';
+import { installationStatuses, type IntegrationCardItem } from '@kbn/fleet-plugin/public';
+import { SECURITY_UI_APP_ID } from '@kbn/security-solution-navigation';
+import { CONFIGURATIONS_PATH } from '../../../../../../common/constants';
+import { IntegrationsFacets } from '../../../../../configurations/constants';
+import { RETURN_APP_ID, RETURN_PATH } from './constants';
+
+const FEATURED_INTEGRATION_SORT_ORDER = [
+  'epr:splunk',
+  'epr:google_secops',
+  'epr:microsoft_sentinel',
+  'epr:sentinel_one',
+  'epr:crowdstrike',
+];
+const INTEGRATION_CARD_MAX_HEIGHT_PX = 88;
+
+const addPathParamToUrl = (url: string, path: string) => {
+  const encodedPath = encodeURIComponent(path);
+  const paramsString = `${RETURN_APP_ID}=${SECURITY_UI_APP_ID}&${RETURN_PATH}=${encodedPath}`;
+
+  if (url.indexOf('?') >= 0) {
+    return `${url}&${paramsString}`;
+  }
+  return `${url}?${paramsString}`;
+};
+
+export const getCategoryBadgeIfAny = (categories: string[]): string | null => {
+  return categories.includes('edr_xdr') ? 'EDR/XDR' : categories.includes('siem') ? 'SIEM' : null;
+};
+
+export const applyCategoryBadgeAndStyling = (
+  card: IntegrationCardItem,
+  callerView: IntegrationsFacets
+): IntegrationCardItem => {
+  const returnPath = `${CONFIGURATIONS_PATH}/integrations/${callerView}`;
+  const url = addPathParamToUrl(card.url, returnPath);
+  const categoryBadge = getCategoryBadgeIfAny(card.categories);
+  return {
+    ...card,
+    url,
+    showDescription: false,
+    showReleaseBadge: false,
+    extraLabelsBadges: categoryBadge
+      ? ([
+          <EuiFlexItem grow={false}>
+            <EuiSpacer size="xs" />
+            <span>
+              <EuiBadge color="hollow">{categoryBadge}</EuiBadge>
+            </span>
+          </EuiFlexItem>,
+        ] as React.ReactNode[])
+      : [],
+    maxCardHeight: INTEGRATION_CARD_MAX_HEIGHT_PX,
+  };
+};
+
+const applyCustomDisplayOrder = (integrationsList: IntegrationCardItem[]) => {
+  return integrationsList.sort(
+    (a, b) =>
+      FEATURED_INTEGRATION_SORT_ORDER.indexOf(a.id) - FEATURED_INTEGRATION_SORT_ORDER.indexOf(b.id)
+  );
+};
+
+export const useEnhancedIntegrationCards = (
+  integrationsList: IntegrationCardItem[]
+): { available: IntegrationCardItem[]; installed: IntegrationCardItem[] } => {
+  const sorted = applyCustomDisplayOrder(integrationsList);
+
+  const available = useMemo(
+    () => sorted.map((card) => applyCategoryBadgeAndStyling(card, IntegrationsFacets.available)),
+    [sorted]
+  );
+
+  const installed = useMemo(
+    () =>
+      sorted
+        .map((card) => applyCategoryBadgeAndStyling(card, IntegrationsFacets.installed))
+        .filter(
+          (card) =>
+            card.installStatus === installationStatuses.Installed ||
+            card.installStatus === installationStatuses.InstallFailed
+        ),
+    [sorted]
+  );
+
+  return { available, installed };
+};

x-pack/solutions/security/plugins/security_solution/public/common/lib/search_ai_lake/integrations.ts

@@ -0,0 +1,15 @@
+/*
+ * 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.
+ */
+
+/** Allow list of integrations to be available in the AI4DSOC integrations page */
+export const SEARCH_AI_LAKE_ALLOWED_INTEGRATIONS: string[] = [
+  'crowdstrike',
+  'google_secops',
+  'microsoft_sentinel',
+  'sentinel_one',
+  'splunk',
+];

x-pack/solutions/security/plugins/security_solution/public/configurations/constants.ts

@@ -10,3 +10,8 @@ export enum ConfigurationTabs {
   basicRules = 'basic_rules',
   aiSettings = 'ai_settings',
 }
+
+export enum IntegrationsFacets {
+  available = 'browse',
+  installed = 'installed',
+}

x-pack/solutions/security/plugins/security_solution/public/configurations/jest.config.js

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../../../../..',
+  roots: ['<rootDir>/x-pack/solutions/security/plugins/security_solution/public/configurations'],
+  coverageDirectory:
+    '<rootDir>/target/kibana-coverage/jest/x-pack/solutions/security/plugins/security_solution/public/configurations',
+  coverageReporters: ['text', 'html'],
+  collectCoverageFrom: [
+    '<rootDir>/x-pack/solutions/security/plugins/security_solution/public/configurations/**/*.{ts,tsx}',
+  ],
+  moduleNameMapper: require('../../server/__mocks__/module_name_map'),
+};