[8.19] New onboarding hub (#218122)

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

@@ -124,7 +124,6 @@ describe('InstallationStatus', () => {
     const callout = getByTestId('installation-status-callout');
 
     expect(spacer).toHaveStyle('background: #FFFFFF');
-    expect(callout).toHaveStyle('padding: 8px 16px');
     expect(callout).toHaveTextContent('Installed');
   });
 });

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

@@ -7,9 +7,9 @@
 
 import React from 'react';
 
-import { EuiCallOut, EuiSpacer, useEuiTheme } from '@elastic/eui';
+import { COLOR_MODES_STANDARD, EuiCallOut, EuiIcon, EuiSpacer, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { css } from '@emotion/react';
+import { css } from '@emotion/css';
 
 import { installationStatuses } from '../../../../../../common/constants';
 import type { EpmPackageInstallStatus } from '../../../../../../common/types';
@@ -37,8 +37,50 @@ const installStatusMapToColor: Record<
 interface InstallationStatusProps {
   installStatus: EpmPackageInstallStatus | null | undefined;
   showInstallationStatus?: boolean;
+  compressed?: boolean;
 }
 
+const useInstallationStatusStyles = () => {
+  const { euiTheme, colorMode } = useEuiTheme();
+  const successBackgroundColor = euiTheme.colors.backgroundBaseSuccess;
+  const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;
+
+  return {
+    installationStatus: css`
+      position: absolute;
+      border-radius: 0 0 ${euiTheme.border.radius.medium} ${euiTheme.border.radius.medium};
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      overflow: hidden;
+    `,
+    compressedInstallationStatus: css`
+      position: absolute;
+      border-radius: 0 ${euiTheme.border.radius.medium} ${euiTheme.border.radius.medium} 0;
+      bottom: 0;
+      right: 0;
+      width: 65px;
+      overflow: hidden;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+      background-color: ${isDarkMode ? euiTheme.colors.success : successBackgroundColor};
+      color: ${isDarkMode ? euiTheme.colors.emptyShade : euiTheme.colors.textSuccess};
+    `,
+    compressedInstallationStatusIcon: css`
+      color: ${isDarkMode ? euiTheme.colors.emptyShade : euiTheme.colors.textSuccess};
+    `,
+    installationStatusCallout: css`
+      padding: ${euiTheme.size.s} ${euiTheme.size.m};
+      text-align: center;
+    `,
+    installationStatusSpacer: css`
+      background: ${euiTheme.colors.emptyShade};
+    `,
+  };
+};
+
 export const getLineClampStyles = (lineClamp?: number) =>
   lineClamp
     ? `-webkit-line-clamp: ${lineClamp};display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;`
@@ -53,35 +95,32 @@ export const shouldShowInstallationStatus = ({
     installStatus === installationStatuses.InstallFailed);
 
 export const InstallationStatus: React.FC<InstallationStatusProps> = React.memo(
-  ({ installStatus, showInstallationStatus }) => {
-    const { euiTheme } = useEuiTheme();
+  ({ installStatus, showInstallationStatus, compressed }) => {
+    const styles = useInstallationStatusStyles();
+
+    const cardPanelClassName = compressed
+      ? styles.compressedInstallationStatus
+      : styles.installationStatus;
+
     return shouldShowInstallationStatus({ installStatus, showInstallationStatus }) ? (
-      <div
-        css={css`
-          position: absolute;
-          border-radius: 0 0 ${euiTheme.border.radius.medium} ${euiTheme.border.radius.medium};
-          bottom: 0;
-          left: 0;
-          width: 100%;
-          overflow: hidden;
-        `}
-      >
-        <EuiSpacer
-          data-test-subj="installation-status-spacer"
-          size="m"
-          css={css`
-            background: ${euiTheme.colors.emptyShade};
-          `}
-        />
-        <EuiCallOut
-          data-test-subj="installation-status-callout"
-          css={css`
-            padding: ${euiTheme.size.s} ${euiTheme.size.m};
-            text-align: center;
-          `}
-          {...(installStatus ? installStatusMapToColor[installStatus] : {})}
-        />
-      </div>
+      compressed ? (
+        <div className={cardPanelClassName}>
+          <EuiIcon type="checkInCircleFilled" className={styles.compressedInstallationStatusIcon} />
+        </div>
+      ) : (
+        <div className={cardPanelClassName}>
+          <EuiSpacer
+            data-test-subj="installation-status-spacer"
+            size="m"
+            className={styles.installationStatusSpacer}
+          />
+          <EuiCallOut
+            data-test-subj="installation-status-callout"
+            className={styles.installationStatusCallout}
+            {...(installStatus ? installStatusMapToColor[installStatus] : {})}
+          />
+        </div>
+      )
     ) : null;
   }
 );

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

@@ -69,6 +69,7 @@ export function PackageCard({
   isUpdateAvailable,
   showLabels = true,
   showInstallationStatus,
+  showCompressedInstallationStatus,
   extraLabelsBadges,
   isQuickstart = false,
   installStatus,
@@ -258,6 +259,7 @@ export function PackageCard({
             <InstallationStatus
               installStatus={installStatus}
               showInstallationStatus={showInstallationStatus}
+              compressed={showCompressedInstallationStatus}
             />
           </EuiFlexGroup>
         </Card>

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

@@ -60,6 +60,7 @@ export interface IntegrationCardItem {
   release?: IntegrationCardReleaseLabel;
   showDescription?: boolean;
   showInstallationStatus?: boolean;
+  showCompressedInstallationStatus?: boolean;
   showLabels?: boolean;
   showReleaseBadge?: boolean;
   title: string;

x-pack/solutions/security/plugins/security_solution/public/common/hooks/use_add_integrations_url.ts

@@ -6,23 +6,44 @@
  */
 import { useCallback, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
-import { ADD_DATA_PATH, ADD_THREAT_INTELLIGENCE_DATA_PATH } from '../../../common/constants';
+import { useNavigateTo, useGetAppUrl } from '@kbn/security-solution-navigation';
+import {
+  ADD_DATA_PATH,
+  ADD_THREAT_INTELLIGENCE_DATA_PATH,
+  SECURITY_FEATURE_ID,
+  SecurityPageName,
+} from '../../../common/constants';
 import { isThreatIntelligencePath } from '../../helpers';
 
-import { useKibana, useNavigateTo } from '../lib/kibana';
+import { useKibana } from '../lib/kibana';
+import { hasCapabilities } from '../lib/capabilities';
 
 export const useAddIntegrationsUrl = () => {
   const {
     http: {
       basePath: { prepend },
     },
+    application: { capabilities },
   } = useKibana().services;
   const { pathname } = useLocation();
+  const { getAppUrl } = useGetAppUrl();
   const { navigateTo } = useNavigateTo();
 
   const isThreatIntelligence = isThreatIntelligencePath(pathname);
+  const hasSearchAILakeAccess = hasCapabilities(capabilities, [
+    [`${SECURITY_FEATURE_ID}.external_detections`],
+  ]);
 
-  const integrationsUrl = isThreatIntelligence ? ADD_THREAT_INTELLIGENCE_DATA_PATH : ADD_DATA_PATH;
+  const searchAILakeIntegrationsPath = getAppUrl({
+    deepLinkId: SecurityPageName.configurationsIntegrations,
+    path: 'browse',
+  });
+
+  const integrationsUrl = isThreatIntelligence
+    ? ADD_THREAT_INTELLIGENCE_DATA_PATH
+    : hasSearchAILakeAccess
+    ? searchAILakeIntegrationsPath
+    : ADD_DATA_PATH;
 
   const href = useMemo(() => prepend(integrationsUrl), [prepend, integrationsUrl]);
 

x-pack/solutions/security/plugins/security_solution/public/common/lib/integrations/components/__mocks__/index.tsx

@@ -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.
+ */
+import React from 'react';
+
+export const SecurityIntegrations = () => <div data-test-subj="securityIntegrations" />;

x-pack/solutions/security/plugins/security_solution/public/common/lib/integrations/components/__mocks__/with_filtered_integrations.tsx

@@ -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.
+ */
+import React from 'react';
+
+export const WithFilteredIntegrations = () => <div data-test-subj="withFilteredIntegrations" />;

x-pack/solutions/security/plugins/security_solution/public/common/lib/integrations/components/available_integrations.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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 type { AvailablePackagesHookType } from '@kbn/fleet-plugin/public';
+import type { UseSelectedTabReturn } from '../hooks/use_selected_tab';
+import type { IntegrationCardMetadata, RenderChildrenType, TopCalloutRenderer } from '../types';
+import { useFilterCards } from '../hooks/use_filter_cards';
+
+export const AvailableIntegrationsComponent: React.FC<{
+  useAvailablePackages: AvailablePackagesHookType;
+  renderChildren: RenderChildrenType;
+  prereleaseIntegrationsEnabled: boolean;
+  checkCompleteMetadata?: IntegrationCardMetadata;
+  selectedTabResult: UseSelectedTabReturn;
+  topCalloutRenderer?: TopCalloutRenderer;
+}> = ({
+  useAvailablePackages,
+  renderChildren,
+  prereleaseIntegrationsEnabled,
+  checkCompleteMetadata,
+  selectedTabResult,
+  topCalloutRenderer,
+}) => {
+  const { availablePackagesResult, allowedIntegrations } = useFilterCards({
+    featuredCardIds: selectedTabResult.selectedTab?.featuredCardIds,
+    useAvailablePackages,
+    prereleaseIntegrationsEnabled,
+  });
+
+  return renderChildren({
+    allowedIntegrations,
+    availablePackagesResult,
+    checkCompleteMetadata,
+    selectedTabResult,
+    topCalloutRenderer,
+  });
+};

x-pack/solutions/security/plugins/security_solution/public/common/lib/integrations/components/index.tsx

@@ -0,0 +1,33 @@
+/*
+ * 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 { useSelectedTab } from '../hooks/use_selected_tab';
+import { INTEGRATION_TABS } from '../configs/integration_tabs_configs';
+import { IntegrationsCardGridTabs } from './integration_card_grid_tabs';
+import { WithFilteredIntegrations } from './with_filtered_integrations';
+import type { IntegrationCardMetadata, TopCalloutRenderer } from '../types';
+import { useIntegrationContext } from '../hooks/integration_context';
+
+export const SecurityIntegrations: React.FC<{
+  checkCompleteMetadata?: IntegrationCardMetadata;
+  topCalloutRenderer?: TopCalloutRenderer;
+}> = ({ checkCompleteMetadata, topCalloutRenderer }) => {
+  const { spaceId } = useIntegrationContext();
+  const selectedTabResult = useSelectedTab({
+    spaceId,
+    integrationTabs: INTEGRATION_TABS,
+  });
+  return (
+    <WithFilteredIntegrations
+      renderChildren={IntegrationsCardGridTabs}
+      prereleaseIntegrationsEnabled={false}
+      selectedTabResult={selectedTabResult}
+      checkCompleteMetadata={checkCompleteMetadata}
+      topCalloutRenderer={topCalloutRenderer}
+    />
+  );
+};

x-pack/solutions/security/plugins/security_solution/public/common/lib/integrations/components/integration_card_grid_tabs.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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 type { RenderChildrenType } from '../types';
+import { useIntegrationCardList } from '../hooks/use_integration_card_list';
+import { IntegrationsCardGridTabsComponent } from './integration_card_grid_tabs_component';
+
+export const DEFAULT_CHECK_COMPLETE_METADATA = {
+  installedIntegrationsCount: 0,
+  isAgentRequired: false,
+};
+
+export const IntegrationsCardGridTabs: RenderChildrenType = ({
+  topCalloutRenderer,
+  allowedIntegrations,
+  availablePackagesResult,
+  checkCompleteMetadata = DEFAULT_CHECK_COMPLETE_METADATA,
+  selectedTabResult,
+}) => {
+  const list = useIntegrationCardList({
+    integrationsList: allowedIntegrations,
+    featuredCardIds: selectedTabResult.selectedTab?.featuredCardIds,
+  });
+
+  const { installedIntegrationsCount, isAgentRequired } = checkCompleteMetadata;
+
+  return (
+    <IntegrationsCardGridTabsComponent
+      isAgentRequired={isAgentRequired}
+      installedIntegrationsCount={installedIntegrationsCount}
+      topCalloutRenderer={topCalloutRenderer}
+      integrationList={list}
+      availablePackagesResult={availablePackagesResult}
+      selectedTabResult={selectedTabResult}
+    />
+  );
+};