From a28c337fe53f18a32cb96cdcc4f25b1a253572cf Mon Sep 17 00:00:00 2001 From: Maxim Kholod Date: Tue, 5 Dec 2023 11:16:01 +0100 Subject: [PATCH] create shared components to be used for both agent-based and agentless --- .../aws_credentials_form.tsx | 58 +++++++------ .../aws_credentials_form_agentless.tsx | 83 +++++-------------- .../get_aws_credentials_form_options.tsx | 29 ++++--- 3 files changed, 67 insertions(+), 103 deletions(-) diff --git a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/aws_credentials_form/aws_credentials_form.tsx b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/aws_credentials_form/aws_credentials_form.tsx index 5e237f027fa34..6ec77ade97fea 100644 --- a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/aws_credentials_form/aws_credentials_form.tsx +++ b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/aws_credentials_form/aws_credentials_form.tsx @@ -4,7 +4,7 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import React from 'react'; +import React, { ReactNode } from 'react'; import { EuiCallOut, EuiFormRow, @@ -22,6 +22,7 @@ import { FormattedMessage } from '@kbn/i18n-react'; import { css } from '@emotion/react'; import { i18n } from '@kbn/i18n'; import { + AwsCredentialsTypeOptions, DEFAULT_AGENTLESS_AWS_CREDENTIALS_TYPE, DEFAULT_MANUAL_AWS_CREDENTIALS_TYPE, getAwsCredentialsFormManualOptions, @@ -38,9 +39,9 @@ import { AwsCredentialsType } from '../../../../common/types'; import { AwsInputVarFields } from './aws_input_var_fields'; interface AWSSetupInfoContentProps { - integrationLink: string; + info: ReactNode; } -const AWSSetupInfoContent = ({ integrationLink }: AWSSetupInfoContentProps) => { +export const AWSSetupInfoContent = ({ info }: AWSSetupInfoContentProps) => { return ( <> @@ -54,20 +55,7 @@ const AWSSetupInfoContent = ({ integrationLink }: AWSSetupInfoContentProps) => { - - - - ), - }} - /> + {info} ); @@ -243,7 +231,24 @@ export const AwsCredentialsForm = ({ return ( <> - + + + + ), + }} + /> + } + /> { updatePolicy( @@ -290,19 +299,18 @@ export const AwsCredentialsForm = ({ export const AwsCredentialTypeSelector = ({ type, onChange, + label, + options, }: { onChange(type: AwsCredentialsType): void; type: AwsCredentialsType; + label: string; + options: AwsCredentialsTypeOptions; }) => ( - + { onChange(optionElem.target.value as AwsCredentialsType); diff --git a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/aws_credentials_form/aws_credentials_form_agentless.tsx b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/aws_credentials_form/aws_credentials_form_agentless.tsx index 48cd076d4cd12..028d2d1fb5c8d 100644 --- a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/aws_credentials_form/aws_credentials_form_agentless.tsx +++ b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/aws_credentials_form/aws_credentials_form_agentless.tsx @@ -6,17 +6,9 @@ */ import React from 'react'; -import { - EuiFormRow, - EuiHorizontalRule, - EuiSelect, - EuiSpacer, - EuiText, - EuiTitle, -} from '@elastic/eui'; +import { EuiSpacer } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { i18n } from '@kbn/i18n'; -import { AwsCredentialsType } from '../../../../common/types'; import { cspIntegrationDocsNavigation } from '../../../common/navigation/constants'; import { DEFAULT_AGENTLESS_AWS_CREDENTIALS_TYPE, @@ -26,59 +18,12 @@ import { } from './get_aws_credentials_form_options'; import { getAwsCredentialsType, getPosturePolicy } from '../utils'; import { AwsInputVarFields } from './aws_input_var_fields'; -import { AwsFormProps, ReadDocumentation } from './aws_credentials_form'; - -// TODO: create a shared component between agent-based and agentless -// TODO: update tranalsation keys -// TODO: get text -const AWSSetupInfoContentAgentless = () => { - return ( - <> - - -

- -

- - - - - - - ); -}; - -// TODO: create a shared component between agent-based and agentless, pass options and label -// TODO: update tranalsation keys -const AwsCredentialTypeSelector = ({ - type, - onChange, -}: { - onChange(type: AwsCredentialsType): void; - type: AwsCredentialsType; -}) => ( - - { - onChange(optionElem.target.value as AwsCredentialsType); - }} - /> - -); +import { + AwsFormProps, + ReadDocumentation, + AWSSetupInfoContent, + AwsCredentialTypeSelector, +} from './aws_credentials_form'; export const AwsCredentialsFormAgentless = ({ input, newPolicy, updatePolicy }: AwsFormProps) => { const awsCredentialsType = getAwsCredentialsType(input) || DEFAULT_AGENTLESS_AWS_CREDENTIALS_TYPE; @@ -87,12 +32,24 @@ export const AwsCredentialsFormAgentless = ({ input, newPolicy, updatePolicy }: const fields = getInputVarsFields(input, group.fields); const integrationLink = cspIntegrationDocsNavigation.cspm.getStartedPath; + // TODO: get text return ( <> - + + } + /> { updatePolicy( getPosturePolicy(newPolicy, input.type, { diff --git a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/aws_credentials_form/get_aws_credentials_form_options.tsx b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/aws_credentials_form/get_aws_credentials_form_options.tsx index d988d8aa23a0a..b23a9c5891ff3 100644 --- a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/aws_credentials_form/get_aws_credentials_form_options.tsx +++ b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/aws_credentials_form/get_aws_credentials_form_options.tsx @@ -92,31 +92,30 @@ export const getInputVarsFields = (input: NewPackagePolicyInput, fields: AwsCred }); export type AwsOptions = Record; - -export const getAwsCredentialsFormManualOptions = (): Array<{ +export type AwsCredentialsTypeOptions = Array<{ value: AwsCredentialsType; text: string; -}> => { +}>; + +const getAwsCredentialsTypeSelectorOptions = ( + filterFn: ({ value }: { value: AwsCredentialsType }) => boolean +): AwsCredentialsTypeOptions => { return Object.entries(getAwsCredentialsFormOptions()) .map(([key, value]) => ({ value: key as AwsCredentialsType, text: value.label, })) - .filter(({ value }) => value !== 'cloud_formation'); + .filter(filterFn); }; +export const getAwsCredentialsFormManualOptions = (): AwsCredentialsTypeOptions => + getAwsCredentialsTypeSelectorOptions(({ value }) => value !== 'cloud_formation'); + // TODO: move strings to constants -export const getAwsCredentialsFormManualOptionsAgentless = (): Array<{ - value: AwsCredentialsType; - text: string; -}> => { - return Object.entries(getAwsCredentialsFormOptions()) - .map(([key, value]) => ({ - value: key as AwsCredentialsType, - text: value.label, - })) - .filter(({ value }) => value === 'direct_access_keys' || value === 'temporary_keys'); -}; +export const getAwsCredentialsFormManualOptionsAgentless = (): AwsCredentialsTypeOptions => + getAwsCredentialsTypeSelectorOptions( + ({ value }) => value === 'direct_access_keys' || value === 'temporary_keys' + ); export const DEFAULT_MANUAL_AWS_CREDENTIALS_TYPE = 'assume_role'; export const DEFAULT_AGENTLESS_AWS_CREDENTIALS_TYPE = 'direct_access_keys';