From 6ea9956c7aff6b9fa18afb1e3b5a690902048cdb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerg=C5=91=20=C3=81brah=C3=A1m?= Date: Fri, 30 Sep 2022 19:14:36 +0200 Subject: [PATCH 01/12] Add new UI for extension for onboarding --- ...int_policy_create_multi_step_extension.tsx | 109 +++++++++++++++++- 1 file changed, 103 insertions(+), 6 deletions(-) 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..d8a8a01ea56a7 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,110 @@ */ import React, { memo } from 'react'; -import type { PackagePolicyCreateMultiStepExtensionComponentProps } from '@kbn/fleet-plugin/public'; +import { EuiText, EuiIcon, EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n-react'; +import styled from 'styled-components'; /** - * 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(() => { + return ( + + + + <MediumCustomSpacer /> + + <EuiFlexGroup> + <EuiFlexItem grow={false}> + <LargeSecurityLogo /> + </EuiFlexItem> + + <EuiFlexItem> + <div> + <Features /> + </div> + </EuiFlexItem> + </EuiFlexGroup> + + <MediumCustomSpacer /> + + <Details /> + </Container> + ); +}); EndpointPolicyCreateMultiStepExtension.displayName = 'EndpointPolicyCreateMultiStepExtension'; + +const Container = styled('div')` + width: 820px; +`; + +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 LargeCustomSpacer = () => ( + <> + <EuiSpacer size="m" /> + <EuiSpacer size="xxl" /> + </> +); + +const MediumCustomSpacer = () => ( + <> + <EuiSpacer size="m" /> + <EuiSpacer size="xl" /> + </> +); + +const LargeSecurityLogo = () => ( + <EuiIcon type="logoSecurity" style={{ width: '128px', height: '128px' }} /> +); + +const Features = () => ( + <EuiFlexGroup alignItems="center" gutterSize="s"> + <EuiFlexItem grow={false}> + <EuiIcon type="check" /> + </EuiFlexItem> + + <EuiFlexItem> + <EuiText size="m"> + <p> + <FormattedMessage + id="xpack.securitySolution.endpoint.policy.multiStepOnboarding.feature" + defaultMessage="Windows, Mac, 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 change this later by editing the Endpoint Security integration agent policy. + Read more about Endpoint security configuration in our {docsPage}." + values={{ + docsPage: ( + <EuiLink href="https://www.elastic.co/guide/en/security/master/configure-endpoint-integration-policy.html"> + <FormattedMessage + id="xpack.securitySolution.endpoint.policy.multiStepOnboarding.docsPage" + defaultMessage="documentation" + /> + </EuiLink> + ), + }} + /> + </p> + </EuiText> +); From 9eb4ed09eed46b133829904e1d99cdf34144227e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerg=C5=91=20=C3=81brah=C3=A1m?= <gergo.abraham@elastic.co> Date: Fri, 30 Sep 2022 19:16:24 +0200 Subject: [PATCH 02/12] Remove unnecessary props --- .../components/page_steps/add_integration.tsx | 4 ++-- x-pack/plugins/fleet/public/index.ts | 1 - x-pack/plugins/fleet/public/types/ui_extensions.ts | 8 +------- 3 files changed, 3 insertions(+), 10 deletions(-) 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<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 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<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 { From 76cca8a6667a880ce07e16cf7399a06d162adbee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerg=C5=91=20=C3=81brah=C3=A1m?= <gergo.abraham@elastic.co> Date: Fri, 30 Sep 2022 19:17:17 +0200 Subject: [PATCH 03/12] Improve layout for mobile browsers --- .../endpoint_policy_create_multi_step_extension.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 d8a8a01ea56a7..10f94e880cad1 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 @@ -21,7 +21,7 @@ export const EndpointPolicyCreateMultiStepExtension = memo(() => { <MediumCustomSpacer /> <EuiFlexGroup> - <EuiFlexItem grow={false}> + <EuiFlexItem grow={false} style={{ alignItems: 'center' }}> <LargeSecurityLogo /> </EuiFlexItem> @@ -33,15 +33,15 @@ export const EndpointPolicyCreateMultiStepExtension = memo(() => { </EuiFlexGroup> <MediumCustomSpacer /> - <Details /> + <LargeCustomSpacer /> </Container> ); }); EndpointPolicyCreateMultiStepExtension.displayName = 'EndpointPolicyCreateMultiStepExtension'; const Container = styled('div')` - width: 820px; + padding: 0 23px; `; const Title = () => ( @@ -74,7 +74,7 @@ const LargeSecurityLogo = () => ( ); const Features = () => ( - <EuiFlexGroup alignItems="center" gutterSize="s"> + <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}> <EuiFlexItem grow={false}> <EuiIcon type="check" /> </EuiFlexItem> From 209dde3de424951c9741c6947a89af8db1b6d141 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerg=C5=91=20=C3=81brah=C3=A1m?= <gergo.abraham@elastic.co> Date: Mon, 3 Oct 2022 16:11:57 +0200 Subject: [PATCH 04/12] use Kibana Docs service for documentation url --- packages/kbn-doc-links/src/get_doc_links.ts | 1 + packages/kbn-doc-links/src/types.ts | 1 + ...int_policy_create_multi_step_extension.tsx | 45 ++++++++++--------- 3 files changed, 27 insertions(+), 20 deletions(-) diff --git a/packages/kbn-doc-links/src/get_doc_links.ts b/packages/kbn-doc-links/src/get_doc_links.ts index 3a0b89c1f0d1b..1c137106a2f30 100644 --- a/packages/kbn-doc-links/src/get_doc_links.ts +++ b/packages/kbn-doc-links/src/get_doc_links.ts @@ -373,6 +373,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 7cd785ee194fa..16c974176ef5e 100644 --- a/packages/kbn-doc-links/src/types.ts +++ b/packages/kbn-doc-links/src/types.ts @@ -275,6 +275,7 @@ export interface DocLinks { }; readonly threatIntelInt: string; readonly responseActions: string; + readonly configureEndpointIntegrationPolicy: string; }; readonly query: { readonly eql: string; 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 10f94e880cad1..152f913f28860 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 @@ -9,6 +9,7 @@ import React, { memo } from 'react'; import { EuiText, EuiIcon, EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import styled from 'styled-components'; +import { useKibana } from '../../../../../common/lib/kibana'; /** * A component to be displayed in multi step onboarding process. @@ -92,24 +93,28 @@ const Features = () => ( </EuiFlexGroup> ); -const Details = () => ( - <EuiText size="m" color="subdued"> - <p> - <FormattedMessage - id="xpack.securitySolution.endpoint.policy.multiStepOnboarding.details" - defaultMessage="You can change this later by editing the Endpoint Security integration agent policy. +const Details = () => { + const { docLinks } = useKibana().services; + + return ( + <EuiText size="m" color="subdued"> + <p> + <FormattedMessage + id="xpack.securitySolution.endpoint.policy.multiStepOnboarding.details" + defaultMessage="You can change this later by editing the Endpoint Security integration agent policy. Read more about Endpoint security configuration in our {docsPage}." - values={{ - docsPage: ( - <EuiLink href="https://www.elastic.co/guide/en/security/master/configure-endpoint-integration-policy.html"> - <FormattedMessage - id="xpack.securitySolution.endpoint.policy.multiStepOnboarding.docsPage" - defaultMessage="documentation" - /> - </EuiLink> - ), - }} - /> - </p> - </EuiText> -); + values={{ + docsPage: ( + <EuiLink href={docLinks.links.securitySolution.configureEndpointIntegrationPolicy}> + <FormattedMessage + id="xpack.securitySolution.endpoint.policy.multiStepOnboarding.docsPage" + defaultMessage="documentation" + /> + </EuiLink> + ), + }} + /> + </p> + </EuiText> + ); +}; From c2a459a5f42ef1fdbcffc2c57699cfb455d5dcd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerg=C5=91=20=C3=81brah=C3=A1m?= <gergo.abraham@elastic.co> Date: Mon, 3 Oct 2022 16:15:15 +0200 Subject: [PATCH 05/12] use styled components instead of inline style --- ...dpoint_policy_create_multi_step_extension.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) 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 152f913f28860..6962c8a02b6f0 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 @@ -22,9 +22,9 @@ export const EndpointPolicyCreateMultiStepExtension = memo(() => { <MediumCustomSpacer /> <EuiFlexGroup> - <EuiFlexItem grow={false} style={{ alignItems: 'center' }}> + <CenteredEuiFlexItem grow={false}> <LargeSecurityLogo /> - </EuiFlexItem> + </CenteredEuiFlexItem> <EuiFlexItem> <div> @@ -70,10 +70,16 @@ const MediumCustomSpacer = () => ( </> ); -const LargeSecurityLogo = () => ( - <EuiIcon type="logoSecurity" style={{ width: '128px', height: '128px' }} /> -); +const CenteredEuiFlexItem = styled(EuiFlexItem)` + align-items: center; +`; +const LargeSecurityLogo = () => <LargeLogo type="logoSecurity" />; + +const LargeLogo = styled(EuiIcon)` + width: 128px; + height: 128px; +`; const Features = () => ( <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}> <EuiFlexItem grow={false}> From 6f440c6b32e40808b5534ffa441e34c01e4ab226 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerg=C5=91=20=C3=81brah=C3=A1m?= <gergo.abraham@elastic.co> Date: Mon, 3 Oct 2022 17:08:53 +0200 Subject: [PATCH 06/12] move small components above/in the main component --- ...int_policy_create_multi_step_extension.tsx | 135 +++++++++--------- 1 file changed, 65 insertions(+), 70 deletions(-) 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 6962c8a02b6f0..c72ba79d5985e 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 @@ -11,50 +11,18 @@ import { FormattedMessage } from '@kbn/i18n-react'; import styled from 'styled-components'; import { useKibana } from '../../../../../common/lib/kibana'; -/** - * A component to be displayed in multi step onboarding process. - */ -export const EndpointPolicyCreateMultiStepExtension = memo(() => { - return ( - <Container> - <LargeCustomSpacer /> - <Title /> - <MediumCustomSpacer /> - - <EuiFlexGroup> - <CenteredEuiFlexItem grow={false}> - <LargeSecurityLogo /> - </CenteredEuiFlexItem> - - <EuiFlexItem> - <div> - <Features /> - </div> - </EuiFlexItem> - </EuiFlexGroup> - - <MediumCustomSpacer /> - <Details /> - <LargeCustomSpacer /> - </Container> - ); -}); -EndpointPolicyCreateMultiStepExtension.displayName = 'EndpointPolicyCreateMultiStepExtension'; - const Container = styled('div')` padding: 0 23px; `; -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 CenteredEuiFlexItem = styled(EuiFlexItem)` + align-items: center; +`; + +const LargeLogo = styled(EuiIcon)` + width: 128px; + height: 128px; +`; const LargeCustomSpacer = () => ( <> @@ -70,39 +38,43 @@ const MediumCustomSpacer = () => ( </> ); -const CenteredEuiFlexItem = styled(EuiFlexItem)` - align-items: center; -`; - -const LargeSecurityLogo = () => <LargeLogo type="logoSecurity" />; +/** + * A component to be displayed in multi step onboarding process. + */ +export const EndpointPolicyCreateMultiStepExtension = memo(() => { + const { docLinks } = useKibana().services; -const LargeLogo = styled(EuiIcon)` - width: 128px; - height: 128px; -`; -const Features = () => ( - <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}> - <EuiFlexItem grow={false}> - <EuiIcon type="check" /> - </EuiFlexItem> + const title = ( + <EuiText> + <h3> + <FormattedMessage + id="xpack.securitySolution.endpoint.policy.multiStepOnboarding.title" + defaultMessage="We'll save your integration with our recommended defaults." + /> + </h3> + </EuiText> + ); - <EuiFlexItem> - <EuiText size="m"> - <p> - <FormattedMessage - id="xpack.securitySolution.endpoint.policy.multiStepOnboarding.feature" - defaultMessage="Windows, Mac, and Linux event collection" - /> - </p> - </EuiText> - </EuiFlexItem> - </EuiFlexGroup> -); + const features = ( + <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}> + <EuiFlexItem grow={false}> + <EuiIcon type="check" /> + </EuiFlexItem> -const Details = () => { - const { docLinks } = useKibana().services; + <EuiFlexItem> + <EuiText size="m"> + <p> + <FormattedMessage + id="xpack.securitySolution.endpoint.policy.multiStepOnboarding.feature" + defaultMessage="Windows, Mac, and Linux event collection" + /> + </p> + </EuiText> + </EuiFlexItem> + </EuiFlexGroup> + ); - return ( + const details = ( <EuiText size="m" color="subdued"> <p> <FormattedMessage @@ -123,4 +95,27 @@ const Details = () => { </p> </EuiText> ); -}; + + return ( + <Container> + <LargeCustomSpacer /> + {title} + <MediumCustomSpacer /> + + <EuiFlexGroup> + <CenteredEuiFlexItem grow={false}> + <LargeLogo type="logoSecurity" /> + </CenteredEuiFlexItem> + + <EuiFlexItem> + <div>{features}</div> + </EuiFlexItem> + </EuiFlexGroup> + + <MediumCustomSpacer /> + {details} + <LargeCustomSpacer /> + </Container> + ); +}); +EndpointPolicyCreateMultiStepExtension.displayName = 'EndpointPolicyCreateMultiStepExtension'; From c53eed7494c78c9d9a646358fdac700a6ea04a0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerg=C5=91=20=C3=81brah=C3=A1m?= <gergo.abraham@elastic.co> Date: Tue, 4 Oct 2022 11:54:06 +0200 Subject: [PATCH 07/12] use Eui components and tokens instead of custom ones --- ...int_policy_create_multi_step_extension.tsx | 54 +++++++++---------- 1 file changed, 27 insertions(+), 27 deletions(-) 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 c72ba79d5985e..a0fce59f4de6e 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,15 +6,21 @@ */ import React, { memo } from 'react'; -import { EuiText, EuiIcon, EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer } from '@elastic/eui'; -import { FormattedMessage } from '@kbn/i18n-react'; +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 Container = styled('div')` - padding: 0 23px; -`; - const CenteredEuiFlexItem = styled(EuiFlexItem)` align-items: center; `; @@ -24,25 +30,12 @@ const LargeLogo = styled(EuiIcon)` height: 128px; `; -const LargeCustomSpacer = () => ( - <> - <EuiSpacer size="m" /> - <EuiSpacer size="xxl" /> - </> -); - -const MediumCustomSpacer = () => ( - <> - <EuiSpacer size="m" /> - <EuiSpacer size="xl" /> - </> -); - /** * A component to be displayed in multi step onboarding process. */ export const EndpointPolicyCreateMultiStepExtension = memo(() => { const { docLinks } = useKibana().services; + const { size } = useEuiTheme().euiTheme; const title = ( <EuiText> @@ -96,13 +89,20 @@ export const EndpointPolicyCreateMultiStepExtension = memo(() => { </EuiText> ); + const marginSize = `calc(${size.m} + ${size.l})`; + return ( - <Container> - <LargeCustomSpacer /> + <EuiPanel hasShadow={false} paddingSize="l"> + <EuiSpacer size="xl" /> + {title} - <MediumCustomSpacer /> - <EuiFlexGroup> + <EuiFlexGroup + css={css` + margin-bottom: ${marginSize}; + margin-top: ${marginSize}; + `} + > <CenteredEuiFlexItem grow={false}> <LargeLogo type="logoSecurity" /> </CenteredEuiFlexItem> @@ -112,10 +112,10 @@ export const EndpointPolicyCreateMultiStepExtension = memo(() => { </EuiFlexItem> </EuiFlexGroup> - <MediumCustomSpacer /> {details} - <LargeCustomSpacer /> - </Container> + + <EuiSpacer size="xl" /> + </EuiPanel> ); }); EndpointPolicyCreateMultiStepExtension.displayName = 'EndpointPolicyCreateMultiStepExtension'; From aa932335df3eb3c6ed6bff3dcf6e0f521b84f9fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerg=C5=91=20=C3=81brah=C3=A1m?= <gergo.abraham@elastic.co> Date: Tue, 4 Oct 2022 13:40:10 +0200 Subject: [PATCH 08/12] use Eui sizing tokens for logo size --- ...int_policy_create_multi_step_extension.tsx | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) 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 a0fce59f4de6e..ba62b905ad590 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 @@ -25,11 +25,6 @@ const CenteredEuiFlexItem = styled(EuiFlexItem)` align-items: center; `; -const LargeLogo = styled(EuiIcon)` - width: 128px; - height: 128px; -`; - /** * A component to be displayed in multi step onboarding process. */ @@ -48,6 +43,17 @@ export const EndpointPolicyCreateMultiStepExtension = memo(() => { </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}> @@ -103,9 +109,7 @@ export const EndpointPolicyCreateMultiStepExtension = memo(() => { margin-top: ${marginSize}; `} > - <CenteredEuiFlexItem grow={false}> - <LargeLogo type="logoSecurity" /> - </CenteredEuiFlexItem> + <CenteredEuiFlexItem grow={false}>{securityLogo}</CenteredEuiFlexItem> <EuiFlexItem> <div>{features}</div> From 42ce7b07fc8f8d682c0eb4e4ff34d457fbe2dcd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerg=C5=91=20=C3=81brah=C3=A1m?= <gergo.abraham@elastic.co> Date: Tue, 4 Oct 2022 13:44:48 +0200 Subject: [PATCH 09/12] open documentation link on new tab --- .../endpoint_policy_create_multi_step_extension.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) 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 ba62b905ad590..84bb030c79ba1 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 @@ -82,7 +82,11 @@ export const EndpointPolicyCreateMultiStepExtension = memo(() => { Read more about Endpoint security configuration in our {docsPage}." values={{ docsPage: ( - <EuiLink href={docLinks.links.securitySolution.configureEndpointIntegrationPolicy}> + <EuiLink + href={docLinks.links.securitySolution.configureEndpointIntegrationPolicy} + target="_blank" + external + > <FormattedMessage id="xpack.securitySolution.endpoint.policy.multiStepOnboarding.docsPage" defaultMessage="documentation" From 50d0017c55cde968a06ae525311b6f5e033f44fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerg=C5=91=20=C3=81brah=C3=A1m?= <gergo.abraham@elastic.co> Date: Wed, 5 Oct 2022 10:33:59 +0200 Subject: [PATCH 10/12] use padding instead of margin --- .../endpoint_policy_create_multi_step_extension.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) 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 84bb030c79ba1..37cf39b39e0dc 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 @@ -99,8 +99,6 @@ export const EndpointPolicyCreateMultiStepExtension = memo(() => { </EuiText> ); - const marginSize = `calc(${size.m} + ${size.l})`; - return ( <EuiPanel hasShadow={false} paddingSize="l"> <EuiSpacer size="xl" /> @@ -109,8 +107,7 @@ export const EndpointPolicyCreateMultiStepExtension = memo(() => { <EuiFlexGroup css={css` - margin-bottom: ${marginSize}; - margin-top: ${marginSize}; + padding: ${size.xxxl} 0; `} > <CenteredEuiFlexItem grow={false}>{securityLogo}</CenteredEuiFlexItem> From ead759e5735c90c48578ee6eff65df7dae5e4d57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gerg=C5=91=20=C3=81brah=C3=A1m?= <gergo.abraham@elastic.co> Date: Wed, 5 Oct 2022 11:00:47 +0200 Subject: [PATCH 11/12] update texts --- ...int_policy_create_multi_step_extension.tsx | 30 ++++++++----------- 1 file changed, 13 insertions(+), 17 deletions(-) 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 37cf39b39e0dc..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 @@ -65,7 +65,7 @@ export const EndpointPolicyCreateMultiStepExtension = memo(() => { <p> <FormattedMessage id="xpack.securitySolution.endpoint.policy.multiStepOnboarding.feature" - defaultMessage="Windows, Mac, and Linux event collection" + defaultMessage="Windows, macOS, and Linux event collection" /> </p> </EuiText> @@ -78,23 +78,19 @@ export const EndpointPolicyCreateMultiStepExtension = memo(() => { <p> <FormattedMessage id="xpack.securitySolution.endpoint.policy.multiStepOnboarding.details" - defaultMessage="You can change this later by editing the Endpoint Security integration agent policy. - Read more about Endpoint security configuration in our {docsPage}." - values={{ - docsPage: ( - <EuiLink - href={docLinks.links.securitySolution.configureEndpointIntegrationPolicy} - target="_blank" - external - > - <FormattedMessage - id="xpack.securitySolution.endpoint.policy.multiStepOnboarding.docsPage" - defaultMessage="documentation" - /> - </EuiLink> - ), - }} + 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> ); From a5f7c9b4752cd6ab6ba6b6b13c0ef2069af081c6 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Wed, 5 Oct 2022 12:24:43 +0000 Subject: [PATCH 12/12] [CI] Auto-commit changed files from 'node scripts/build_plugin_list_docs' --- docs/developer/plugin-list.asciidoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/developer/plugin-list.asciidoc b/docs/developer/plugin-list.asciidoc index 407261c6f1d7e..4853d859b371a 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.