diff --git a/packages/kbn-doc-links/src/get_doc_links.ts b/packages/kbn-doc-links/src/get_doc_links.ts index c4139f6423fae..b7a3326942582 100644 --- a/packages/kbn-doc-links/src/get_doc_links.ts +++ b/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`, diff --git a/packages/kbn-doc-links/src/types.ts b/packages/kbn-doc-links/src/types.ts index 38bf25b0aba7e..16a80e7f7bf33 100644 --- a/packages/kbn-doc-links/src/types.ts +++ b/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; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/page_steps/add_integration.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/page_steps/add_integration.tsx index c5ccd2916e465..cd0164124bfbc 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/multi_page_layout/components/page_steps/add_integration.tsx +++ b/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 = (props return ( extensionView && ( - + ) ); - }, [packagePolicy, extensionView]); + }, [extensionView]); const content = useMemo(() => { if (packageInfo.name !== 'endpoint') { diff --git a/x-pack/plugins/fleet/public/index.ts b/x-pack/plugins/fleet/public/index.ts index 823d46becb4ff..7b53d4e1d2ccd 100644 --- a/x-pack/plugins/fleet/public/index.ts +++ b/x-pack/plugins/fleet/public/index.ts @@ -37,7 +37,6 @@ export type { PackagePolicyCreateExtensionComponentProps, PackagePolicyCreateMultiStepExtension, PackagePolicyCreateMultiStepExtensionComponent, - PackagePolicyCreateMultiStepExtensionComponentProps, PackagePolicyEditExtension, PackagePolicyEditExtensionComponent, PackagePolicyEditExtensionComponentProps, diff --git a/x-pack/plugins/fleet/public/types/ui_extensions.ts b/x-pack/plugins/fleet/public/types/ui_extensions.ts index 24f9fef730613..fc8726e7b813a 100644 --- a/x-pack/plugins/fleet/public/types/ui_extensions.ts +++ b/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; - -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 { diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_policy_create_multi_step_extension.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_policy_create_multi_step_extension.tsx index 747d0990b8fc0..eb1e3dc746c7c 100644 --- a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_policy_create_multi_step_extension.tsx +++ b/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(({ newPolicy }) => { - return <>; - }); +export const EndpointPolicyCreateMultiStepExtension = memo(() => { + const { docLinks } = useKibana().services; + const { size } = useEuiTheme().euiTheme; + + const title = ( + +

+ +

+
+ ); + + const logoSize = `calc(2 * ${size.xxxxl})`; + const securityLogo = ( + + ); + + const features = ( + + + + + + + +

+ +

+
+
+
+ ); + + const details = ( + +

+ +   + + + +

+
+ ); + + return ( + + + + {title} + + + {securityLogo} + + +
{features}
+
+
+ + {details} + + +
+ ); +}); EndpointPolicyCreateMultiStepExtension.displayName = 'EndpointPolicyCreateMultiStepExtension';