[AWS Onboarding] Add Connect Account step UI

packages/kbn-optimizer/limits.yml

@@ -78,7 +78,7 @@ pageLoadAssetSize:
   files: 6037
   filesManagement: 5208
   fileUpload: 22957
-  fleet: 229970
+  fleet: 235000
   genAiSettings: 6342
   globalSearch: 6890
   globalSearchBar: 31212
@@ -92,7 +92,7 @@ pageLoadAssetSize:
   indexManagement: 39694
   inference: 10368
   infra: 56302
-  ingestHub: 12728
+  ingestHub: 13366
   ingestPipelines: 17866
   inputControlVis: 7638
   inspectComponent: 4590

x-pack/platform/plugins/shared/fleet/common/types/models/cloud_connector.ts

@@ -27,6 +27,12 @@ export interface CloudConnectorSecretReference {
   id: string;
 }
 
+export function isCloudConnectorSecretReference(
+  value: string | CloudConnectorSecretReference | undefined
+): value is CloudConnectorSecretReference {
+  return typeof value === 'object' && value !== null && 'isSecretRef' in value;
+}
+
 export interface CloudConnectorVar {
   type?: 'text';
   value: string;
@@ -42,7 +48,7 @@ export interface CloudConnectorSecretVar {
 
 export interface AwsCloudConnectorVars {
   role_arn: CloudConnectorVar;
-  external_id: CloudConnectorSecretVar;
+  external_id: CloudConnectorSecretVar | CloudConnectorVar;
 }
 
 export interface AzureCloudConnectorVars {

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/debug/components/cloud_onboarding_deployment_debugger.tsx

@@ -129,9 +129,10 @@ export const CloudOnboardingDeploymentDebugger: React.FunctionComponent = () =>
       body: {
         name: newConnectorName,
         cloudProvider: 'aws',
+        accountType: 'single-account',
         vars: {
           role_arn: { value: newConnectorRoleArn, type: 'text' },
-          external_id: { type: 'password', value: newConnectorExternalId }, // password
+          external_id: { type: 'password', value: newConnectorExternalId },
         },
       },
       version: API_VERSIONS.public.v1,

x-pack/platform/plugins/shared/fleet/public/components/cloud_connector/aws_cloud_connector/aws_cloud_formation_guide.tsx

@@ -6,23 +6,74 @@
  */
 
 import React from 'react';
-import { EuiText } from '@elastic/eui';
+import { EuiLink, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 
 import type { AccountType } from '../../../types';
 import { ORGANIZATION_ACCOUNT } from '../constants';
 
+const CLOUD_FORMATION_EXTERNAL_DOC_URL =
+  'https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/cfn-whatis-howdoesitwork.html';
+
+export type CloudFormationCredentialType = 'identity_federation' | 'direct_access_keys';
+
 export interface CloudFormationCloudCredentialsGuideProps {
   accountType?: AccountType;
+  credentialType?: CloudFormationCredentialType;
 }
 
 export const CloudFormationCloudCredentialsGuide: React.FC<
   CloudFormationCloudCredentialsGuideProps
-> = ({ accountType = ORGANIZATION_ACCOUNT }) => {
+> = ({ accountType = ORGANIZATION_ACCOUNT, credentialType = 'identity_federation' }) => {
   const isOrganization = accountType === ORGANIZATION_ACCOUNT;
 
+  const lastStep =
+    credentialType === 'direct_access_keys' ? (
+      <FormattedMessage
+        id="xpack.fleet.cloudConnector.aws.guide.steps.accessKeyCredentials"
+        defaultMessage="Copy {accessKeyId} and {secretAccessKey} then paste the credentials below"
+        values={{
+          accessKeyId: <strong>{'Access Key Id'}</strong>,
+          secretAccessKey: <strong>{'Secret Access Key'}</strong>,
+        }}
+      />
+    ) : (
+      <FormattedMessage
+        id="xpack.fleet.cloudConnector.aws.guide.steps.credentials"
+        defaultMessage="Copy {role} and {external_id} then paste the role credentials below"
+        values={{
+          role: <strong>{'Role ARN'}</strong>,
+          external_id: <strong>{'External ID'}</strong>,
+        }}
+      />
+    );
+
   return (
     <div>
+      {credentialType === 'direct_access_keys' && (
+        <EuiText size="s" color="subdued">
+          <p>
+            <FormattedMessage
+              id="xpack.fleet.cloudConnector.aws.guide.directAccessKeys.intro"
+              defaultMessage="Access keys are long-term credentials for an IAM user. Use AWS CloudFormation to automatically create an IAM user with the required read permissions and generate access keys. {learnMore}."
+              values={{
+                learnMore: (
+                  <EuiLink
+                    href={CLOUD_FORMATION_EXTERNAL_DOC_URL}
+                    target="_blank"
+                    rel="noopener nofollow noreferrer"
+                  >
+                    <FormattedMessage
+                      id="xpack.fleet.cloudConnector.aws.guide.directAccessKeys.learnMore"
+                      defaultMessage="Learn more about CloudFormation"
+                    />
+                  </EuiLink>
+                ),
+              }}
+            />
+          </p>
+        </EuiText>
+      )}
       <EuiText size="s" color="subdued">
         <ol>
           {isOrganization ? (
@@ -106,16 +157,7 @@ export const CloudFormationCloudCredentialsGuide: React.FC<
               }}
             />
           </li>
-          <li>
-            <FormattedMessage
-              id="xpack.fleet.cloudConnector.aws.guide.steps.credentials"
-              defaultMessage="Copy {role} and {external_id} then paste the role credentials below"
-              values={{
-                role: <strong>{'Role ARN'}</strong>,
-                external_id: <strong>{'External ID'}</strong>,
-              }}
-            />
-          </li>
+          <li>{lastStep}</li>
         </ol>
       </EuiText>
     </div>

x-pack/platform/plugins/shared/fleet/public/components/cloud_connector/aws_connect_setup/aws_auth_type_selector.tsx

@@ -0,0 +1,69 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiSelect } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import {
+  AWS_AUTH_TYPE_SELECTOR_TEST_SUBJ,
+  AWS_AUTH_TYPE_IF_CARD_TEST_SUBJ,
+  AWS_AUTH_TYPE_STATIC_KEYS_CARD_TEST_SUBJ,
+  AWS_AUTH_TYPE_TEMPORARY_KEYS_CARD_TEST_SUBJ,
+} from './test_subjects';
+
+export type AwsAuthType = 'identity_federation' | 'static_keys' | 'temporary_keys';
+
+export {
+  AWS_AUTH_TYPE_SELECTOR_TEST_SUBJ,
+  AWS_AUTH_TYPE_IF_CARD_TEST_SUBJ,
+  AWS_AUTH_TYPE_STATIC_KEYS_CARD_TEST_SUBJ,
+  AWS_AUTH_TYPE_TEMPORARY_KEYS_CARD_TEST_SUBJ,
+};
+
+const OPTIONS = [
+  {
+    value: 'identity_federation' as AwsAuthType,
+    text: i18n.translate('xpack.fleet.awsConnectSetup.authType.identityFederationLabel', {
+      defaultMessage: 'Federated Identity (Recommended)',
+    }),
+  },
+  {
+    value: 'static_keys' as AwsAuthType,
+    text: i18n.translate('xpack.fleet.awsConnectSetup.authType.staticKeysLabel', {
+      defaultMessage: 'Static keys',
+    }),
+  },
+  {
+    value: 'temporary_keys' as AwsAuthType,
+    text: i18n.translate('xpack.fleet.awsConnectSetup.authType.temporaryKeysLabel', {
+      defaultMessage: 'Temporary keys',
+    }),
+  },
+];
+
+interface AwsAuthTypeSelectorProps {
+  selectedAuthType: AwsAuthType;
+  onChange: (authType: AwsAuthType) => void;
+}
+
+export const AwsAuthTypeSelector: React.FC<AwsAuthTypeSelectorProps> = ({
+  selectedAuthType,
+  onChange,
+}) => {
+  return (
+    <EuiSelect
+      options={OPTIONS}
+      value={selectedAuthType}
+      onChange={(e) => onChange(e.target.value as AwsAuthType)}
+      aria-label={i18n.translate('xpack.fleet.awsConnectSetup.authType.selectorAriaLabel', {
+        defaultMessage: 'Authentication method',
+      })}
+      data-test-subj={AWS_AUTH_TYPE_SELECTOR_TEST_SUBJ}
+    />
+  );
+};