diff --git a/docs/developer/plugin-list.asciidoc b/docs/developer/plugin-list.asciidoc index 407261c6f1d7..4853d859b371 100644 --- a/docs/developer/plugin-list.asciidoc +++ b/docs/developer/plugin-list.asciidoc @@ -71,7 +71,7 @@ as uiSettings within the code. |{kib-repo}blob/{branch}/src/plugins/data_views/README.mdx[dataViews] |The data views API provides a consistent method of structuring and formatting documents -and field lists across the various Kibana apps. Its typically used in conjunction with +and field lists across the various Kibana apps. It's typically used in conjunction with <DocLink id="kibDevTutorialDataSearchAndSessions" section="high-level-search" text="SearchSource" /> for composing queries. diff --git a/packages/kbn-doc-links/src/get_doc_links.ts b/packages/kbn-doc-links/src/get_doc_links.ts index c4139f6423fa..b7a332694258 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 38bf25b0aba7..16a80e7f7bf3 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 c5ccd2916e46..cd0164124bfb 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<MultiPageStepLayoutProps> = (props return ( extensionView && ( <ExtensionWrapper> - <extensionView.Component newPolicy={packagePolicy} /> + <extensionView.Component /> </ExtensionWrapper> ) ); - }, [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 823d46becb4f..7b53d4e1d2cc 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 24f9fef73061..fc8726e7b813 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<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 { 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 747d0990b8fc..eb1e3dc746c7 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<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." + /> + + <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';