some small improvements

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.tsx

@@ -90,7 +90,6 @@ import { Configs } from './configs';
 import type { InstallPkgRouteOptions } from './utils/get_install_route_options';
 
 import './index.scss';
-import type { InstallPkgRouteOptions } from './utils/get_install_route_options';
 
 export type DetailViewPanelName =
   | 'overview'

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/body_config.ts

@@ -30,6 +30,7 @@ export const bodyConfig: OnboardingGroupConfig[] = [
     title: i18n.translate('xpack.securitySolution.onboarding.discoverGroup.title', {
       defaultMessage: 'Discover Elastic AI',
     }),
+    // TODO: Add attackDiscoveryCardConfig when it is ready (https://github.com/elastic/kibana/issues/189487)
     cards: [assistantCardConfig],
   },
 ];

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/index.ts

@@ -15,5 +15,11 @@ export const alertsCardConfig: OnboardingCardConfig = {
   id: OnboardingCardId.alerts,
   title: ALERTS_CARD_TITLE,
   icon: alertsIcon,
-  Component: React.lazy(() => import('./alerts_card')),
+  Component: React.lazy(
+    () =>
+      import(
+        /* webpackChunkName: "onboarding_alerts_card" */
+        './alerts_card'
+      )
+  ),
 };

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/assistant/index.ts

@@ -16,6 +16,12 @@ export const assistantCardConfig: OnboardingCardConfig = {
   id: OnboardingCardId.assistant,
   title: ASSISTANT_CARD_TITLE,
   icon: AssistantAvatar,
-  Component: React.lazy(() => import('./assistant_card')),
+  Component: React.lazy(
+    () =>
+      import(
+        /* webpackChunkName: "onboarding_assistant_card" */
+        './assistant_card'
+      )
+  ),
   checkComplete: checkAssistantCardComplete,
 };

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/attack_discovery/index.ts

@@ -15,5 +15,11 @@ export const attackDiscoveryCardConfig: OnboardingCardConfig = {
   id: OnboardingCardId.attackDiscovery,
   title: ATTACK_DISCOVERY_CARD_TITLE,
   icon: attackDiscoveryIcon,
-  Component: React.lazy(() => import('./attack_discovery_card')),
+  Component: React.lazy(
+    () =>
+      import(
+        /* webpackChunkName: "onboarding_attack_discovery_card" */
+        './attack_discovery_card'
+      )
+  ),
 };

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_content_image_panel.tsx

@@ -9,8 +9,6 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { OnboardingCardContentPanel } from './card_content_panel';
 import { useCardContentImagePanelStyles } from './card_content_image_panel.styles';
 
-export const IMAGE_WIDTH = 540;
-
 export const OnboardingCardContentImagePanel = React.memo<
   PropsWithChildren<{ imageSrc: string; imageAlt: string }>
 >(({ children, imageSrc, imageAlt }) => {

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/index.ts

@@ -16,7 +16,11 @@ export const dashboardsCardConfig: OnboardingCardConfig = {
   title: DASHBOARDS_CARD_TITLE,
   icon: dashboardsIcon,
   Component: React.lazy(
-    () => import('./dashboards_card' /* webpackChunkName: "onboarding_dashboards_card" */)
+    () =>
+      import(
+        /* webpackChunkName: "onboarding_dashboards_card" */
+        './dashboards_card'
+      )
   ),
   capabilities: ['dashboard.show'],
 };

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/callouts/agentless_available_callout.tsx

@@ -10,14 +10,16 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiIcon, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 
+import { useKibana } from '../../../../../../common/lib/kibana/kibana_react';
 import { LinkAnchor } from '../../../../../../common/components/links';
 import { CardCallOut } from '../../common/card_callout';
-import { AGENTLESS_LEARN_MORE_LINK } from '../constants';
 
 export const AgentlessAvailableCallout = React.memo(() => {
   const { euiTheme } = useEuiTheme();
+  const { docLinks } = useKibana().services;
 
-  if (!AGENTLESS_LEARN_MORE_LINK) {
+  /* @ts-expect-error: add the blog link to `packages/kbn-doc-links/src/get_doc_links.ts` when it is ready and remove this exit condition*/
+  if (!docLinks.links.fleet.agentlessBlog) {
     return null;
   }
 
@@ -50,7 +52,8 @@ export const AgentlessAvailableCallout = React.memo(() => {
             ),
             link: (
               <LinkAnchor
-                href={AGENTLESS_LEARN_MORE_LINK}
+                /* @ts-expect-error-next-line */
+                href={docLinks.links.fleet.agentlessBlog}
                 data-test-subj="agentlessLearnMoreLink"
                 external={true}
                 target="_blank"

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/callouts/endpoint_callout.tsx

@@ -10,12 +10,13 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { EuiIcon, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 
+import { useKibana } from '../../../../../../common/lib/kibana/kibana_react';
 import { LinkAnchor } from '../../../../../../common/components/links';
 import { CardCallOut } from '../../common/card_callout';
-import { ENDPOINT_LEARN_MORE_LINK } from '../constants';
 
 export const EndpointCallout = React.memo(() => {
   const { euiTheme } = useEuiTheme();
+  const { docLinks } = useKibana().services;
 
   return (
     <CardCallOut
@@ -46,7 +47,7 @@ export const EndpointCallout = React.memo(() => {
             ),
             link: (
               <LinkAnchor
-                href={ENDPOINT_LEARN_MORE_LINK}
+                href={docLinks.links.securitySolution.responseActions}
                 data-test-subj="endpointLearnMoreLink"
                 external={true}
                 target="_blank"

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/callouts/integration_card_top_callout.tsx

@@ -9,7 +9,6 @@ import React from 'react';
 import { useObservable } from 'react-use';
 
 import { useOnboardingService } from '../../../../../hooks/use_onboarding_service';
-import { AGENTLESS_LEARN_MORE_LINK } from '../constants';
 import { AgentlessAvailableCallout } from './agentless_available_callout';
 import { InstalledIntegrationsCallout } from './installed_integrations_callout';
 import { IntegrationTabId } from '../types';
@@ -27,9 +26,9 @@ export const IntegrationCardTopCallout = React.memo(
   }) => {
     const { isAgentlessAvailable$ } = useOnboardingService();
     const isAgentlessAvailable = useObservable(isAgentlessAvailable$, undefined);
+
     const showAgentlessCallout =
       isAgentlessAvailable &&
-      AGENTLESS_LEARN_MORE_LINK &&
       installedIntegrationsCount === 0 &&
       selectedTabId !== IntegrationTabId.endpoint;
     const showEndpointCallout =

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/constants.ts

@@ -11,12 +11,9 @@ import type { Tab } from './types';
 
 export const ADD_AGENT_PATH = `/agents`;
 export const AGENT_INDEX = `logs-elastic_agent*`;
-export const AGENTLESS_LEARN_MORE_LINK = null; // Link to be confirmed.
 export const CARD_DESCRIPTION_LINE_CLAMP = 3; // 3 lines of text
 export const CARD_TITLE_LINE_CLAMP = 1; // 1 line of text
 export const DEFAULT_TAB: Tab = INTEGRATION_TABS[0];
-export const ENDPOINT_LEARN_MORE_LINK =
-  'https://www.elastic.co/guide/en/security/current/third-party-actions.html';
 export const FLEET_APP_ID = `fleet`;
 export const INTEGRATION_APP_ID = `integrations`;
 export const LOADING_SKELETON_HEIGHT = 10; // 10 lines of text

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/index.ts

@@ -19,7 +19,11 @@ export const integrationsCardConfig: OnboardingCardConfig = {
   }),
   icon: integrationsIcon,
   Component: React.lazy(
-    () => import('./integrations_card' /* webpackChunkName: "onboarding_integrations_card" */)
+    () =>
+      import(
+        /* webpackChunkName: "onboarding_integrations_card" */
+        './integrations_card'
+      )
   ),
   checkComplete: checkIntegrationsCardComplete,
   capabilities: ['fleet.all', 'fleetv2.all'],

x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/index.ts

@@ -16,6 +16,12 @@ export const rulesCardConfig: OnboardingCardConfig = {
   id: OnboardingCardId.rules,
   title: RULES_CARD_TITLE,
   icon: rulesIcon,
-  Component: React.lazy(() => import('./rules_card')),
+  Component: React.lazy(
+    () =>
+      import(
+        /* webpackChunkName: "onboarding_rules_card" */
+        './rules_card'
+      )
+  ),
   checkComplete: checkRulesComplete,
 };