[Security Solution][Endpoint][Guided onboarding] New extension point with the endpoint UI (#142395)

* Add new UI for extension for onboarding

* Remove unnecessary props

* Improve layout for mobile browsers

* use Kibana Docs service for documentation url

* use styled components instead of inline style

* move small components above/in the main component

* use Eui components and tokens instead of custom ones

* use Eui sizing tokens for logo size

* open documentation link on new tab

* use padding instead of margin

* update texts

* [CI] Auto-commit changed files from 'node scripts/build_plugin_list_docs'

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

packages/kbn-doc-links/src/get_doc_links.ts

@@ -375,6 +375,7 @@ export const getDocLinks = ({ kibanaBranch }: GetDocLinkOptions): DocLinks => {
         es_connection: '',
       },
       responseActions: `${SECURITY_SOLUTION_DOCS}response-actions.html`,
+      configureEndpointIntegrationPolicy: `${SECURITY_SOLUTION_DOCS}configure-endpoint-integration-policy.html`,
     },
     query: {
       eql: `${ELASTICSEARCH_DOCS}eql.html`,

packages/kbn-doc-links/src/types.ts

@@ -277,6 +277,7 @@ export interface DocLinks {
     };
     readonly threatIntelInt: string;
     readonly responseActions: string;
+    readonly configureEndpointIntegrationPolicy: string;
   };
   readonly query: {
     readonly eql: string;

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/page_steps/add_integration.tsx

@@ -217,11 +217,11 @@ export const AddIntegrationPageStep: React.FC<MultiPageStepLayoutProps> = (props
     return (
       extensionView && (
         <ExtensionWrapper>
-          <extensionView.Component newPolicy={packagePolicy} />
+          <extensionView.Component />
         </ExtensionWrapper>
       )
     );
-  }, [packagePolicy, extensionView]);
+  }, [extensionView]);
 
   const content = useMemo(() => {
     if (packageInfo.name !== 'endpoint') {

x-pack/plugins/fleet/public/index.ts

@@ -37,7 +37,6 @@ export type {
   PackagePolicyCreateExtensionComponentProps,
   PackagePolicyCreateMultiStepExtension,
   PackagePolicyCreateMultiStepExtensionComponent,
-  PackagePolicyCreateMultiStepExtensionComponentProps,
   PackagePolicyEditExtension,
   PackagePolicyEditExtensionComponent,
   PackagePolicyEditExtensionComponentProps,

x-pack/plugins/fleet/public/types/ui_extensions.ts

@@ -136,13 +136,7 @@ export interface PackagePolicyCreateExtension {
  * UI Component Extension is used on the pages displaying the ability to Create a multi step
  * Integration Policy
  */
-export type PackagePolicyCreateMultiStepExtensionComponent =
-  ComponentType<PackagePolicyCreateMultiStepExtensionComponentProps>;
-
-export interface PackagePolicyCreateMultiStepExtensionComponentProps {
-  /** The integration policy being created */
-  newPolicy: NewPackagePolicy;
-}
+export type PackagePolicyCreateMultiStepExtensionComponent = ComponentType<{}>;
 
 /** Extension point registration contract for Integration Policy Create views in multi-step onboarding */
 export interface PackagePolicyCreateMultiStepExtension {

x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_policy_create_multi_step_extension.tsx

@@ -6,13 +6,117 @@
  */
 
 import React, { memo } from 'react';
-import type { PackagePolicyCreateMultiStepExtensionComponentProps } from '@kbn/fleet-plugin/public';
+import {
+  EuiText,
+  EuiIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiPanel,
+  EuiSpacer,
+  useEuiTheme,
+} from '@elastic/eui';
+import styled from 'styled-components';
+import { css } from '@emotion/css';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { useKibana } from '../../../../../common/lib/kibana';
+
+const CenteredEuiFlexItem = styled(EuiFlexItem)`
+  align-items: center;
+`;
 
 /**
- * TBD: A component to be displayed in multi step onboarding process.
+ * A component to be displayed in multi step onboarding process.
  */
-export const EndpointPolicyCreateMultiStepExtension =
-  memo<PackagePolicyCreateMultiStepExtensionComponentProps>(({ newPolicy }) => {
-    return <></>;
-  });
+export const EndpointPolicyCreateMultiStepExtension = memo(() => {
+  const { docLinks } = useKibana().services;
+  const { size } = useEuiTheme().euiTheme;
+
+  const title = (
+    <EuiText>
+      <h3>
+        <FormattedMessage
+          id="xpack.securitySolution.endpoint.policy.multiStepOnboarding.title"
+          defaultMessage="We'll save your integration with our recommended defaults."
+        />
+      </h3>
+    </EuiText>
+  );
+
+  const logoSize = `calc(2 * ${size.xxxxl})`;
+  const securityLogo = (
+    <EuiIcon
+      type="logoSecurity"
+      css={css`
+        width: ${logoSize};
+        height: ${logoSize};
+      `}
+    />
+  );
+
+  const features = (
+    <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+      <EuiFlexItem grow={false}>
+        <EuiIcon type="check" />
+      </EuiFlexItem>
+
+      <EuiFlexItem>
+        <EuiText size="m">
+          <p>
+            <FormattedMessage
+              id="xpack.securitySolution.endpoint.policy.multiStepOnboarding.feature"
+              defaultMessage="Windows, macOS, and Linux event collection"
+            />
+          </p>
+        </EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+
+  const details = (
+    <EuiText size="m" color="subdued">
+      <p>
+        <FormattedMessage
+          id="xpack.securitySolution.endpoint.policy.multiStepOnboarding.details"
+          defaultMessage="You can edit these settings later in the Elastic Defend integration policy."
+        />
+        &nbsp;
+        <EuiLink
+          href={docLinks.links.securitySolution.configureEndpointIntegrationPolicy}
+          target="_blank"
+          external
+        >
+          <FormattedMessage
+            id="xpack.securitySolution.endpoint.policy.multiStepOnboarding.learnMore"
+            defaultMessage="Learn more"
+          />
+        </EuiLink>
+      </p>
+    </EuiText>
+  );
+
+  return (
+    <EuiPanel hasShadow={false} paddingSize="l">
+      <EuiSpacer size="xl" />
+
+      {title}
+
+      <EuiFlexGroup
+        css={css`
+          padding: ${size.xxxl} 0;
+        `}
+      >
+        <CenteredEuiFlexItem grow={false}>{securityLogo}</CenteredEuiFlexItem>
+
+        <EuiFlexItem>
+          <div>{features}</div>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      {details}
+
+      <EuiSpacer size="xl" />
+    </EuiPanel>
+  );
+});
 EndpointPolicyCreateMultiStepExtension.displayName = 'EndpointPolicyCreateMultiStepExtension';