[Cloud Security] Fix wrong fleet url in cloudFormation (#166130)

solves:
- https://github.com/elastic/security-team/issues/7482

choose the correct Fleet URL in case there is more than one fleet
server.

---------

Co-authored-by: Maxim Kholod <maxim.kholod@elastic.co>

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/components/post_install_cloud_formation_modal.tsx

@@ -20,8 +20,14 @@ import {
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useQuery } from '@tanstack/react-query';
 
+import { useAgentPolicyWithPackagePolicies } from '../../../../../../../components/agent_enrollment_flyout/hooks';
+
 import type { AgentPolicy, PackagePolicy } from '../../../../../types';
-import { sendGetEnrollmentAPIKeys, useCreateCloudFormationUrl } from '../../../../../hooks';
+import {
+  sendGetEnrollmentAPIKeys,
+  useCreateCloudFormationUrl,
+  useFleetServerHostsForPolicy,
+} from '../../../../../hooks';
 import { getCloudFormationPropsFromPackagePolicy } from '../../../../../services';
 import { CloudFormationGuide } from '../../../../../components';
 
@@ -31,7 +37,7 @@ export const PostInstallCloudFormationModal: React.FunctionComponent<{
   agentPolicy: AgentPolicy;
   packagePolicy: PackagePolicy;
 }> = ({ onConfirm, onCancel, agentPolicy, packagePolicy }) => {
-  const { data: apyKeysData } = useQuery(['cloudFormationApiKeys'], () =>
+  const { data: apiKeysData, isLoading } = useQuery(['cloudFormationApiKeys'], () =>
     sendGetEnrollmentAPIKeys({
       page: 1,
       perPage: 1,
@@ -39,11 +45,16 @@ export const PostInstallCloudFormationModal: React.FunctionComponent<{
     })
   );
 
+  const { agentPolicyWithPackagePolicies } = useAgentPolicyWithPackagePolicies(agentPolicy.id);
+  const { fleetServerHosts } = useFleetServerHostsForPolicy(agentPolicyWithPackagePolicies);
+  const fleetServerHost = fleetServerHosts[0];
+
   const cloudFormationProps = getCloudFormationPropsFromPackagePolicy(packagePolicy);
 
-  const { cloudFormationUrl, error, isError, isLoading } = useCreateCloudFormationUrl({
-    enrollmentAPIKey: apyKeysData?.data?.items[0]?.api_key,
+  const { cloudFormationUrl, error, isError } = useCreateCloudFormationUrl({
+    enrollmentAPIKey: apiKeysData?.data?.items[0]?.api_key,
     cloudFormationProps,
+    fleetServerHost,
   });
 
   return (

x-pack/plugins/fleet/public/components/agent_enrollment_flyout/cloud_formation_instructions.tsx

@@ -18,15 +18,18 @@ import type { CloudSecurityIntegration } from './types';
 interface Props {
   enrollmentAPIKey?: string;
   cloudSecurityIntegration: CloudSecurityIntegration;
+  fleetServerHost: string;
 }
 
 export const CloudFormationInstructions: React.FunctionComponent<Props> = ({
   enrollmentAPIKey,
   cloudSecurityIntegration,
+  fleetServerHost,
 }) => {
-  const { isLoading, cloudFormationUrl, error, isError } = useCreateCloudFormationUrl({
+  const { cloudFormationUrl, error, isError } = useCreateCloudFormationUrl({
     enrollmentAPIKey,
     cloudFormationProps: cloudSecurityIntegration?.cloudFormationProps,
+    fleetServerHost,
   });
 
   if (error && isError) {
@@ -42,7 +45,7 @@ export const CloudFormationInstructions: React.FunctionComponent<Props> = ({
     <EuiSkeletonText
       lines={3}
       size="m"
-      isLoading={isLoading || cloudSecurityIntegration?.isLoading}
+      isLoading={cloudSecurityIntegration?.isLoading}
       contentAriaLabel={i18n.translate(
         'xpack.fleet.agentEnrollment.cloudFormation.loadingAriaLabel',
         {

x-pack/plugins/fleet/public/components/agent_enrollment_flyout/steps/compute_steps.tsx

@@ -220,6 +220,8 @@ export const ManagedSteps: React.FunctionComponent<InstructionProps> = ({
 
   const agentVersion = useAgentVersion();
 
+  const fleetServerHost = fleetServerHosts?.[0];
+
   const installManagedCommands = ManualInstructions({
     apiKey: enrollToken,
     fleetServerHosts,
@@ -260,6 +262,7 @@ export const ManagedSteps: React.FunctionComponent<InstructionProps> = ({
           selectedApiKeyId,
           enrollToken,
           cloudSecurityIntegration,
+          fleetServerHost,
         })
       );
     } else if (cloudSecurityIntegration?.cloudShellUrl) {
@@ -279,7 +282,7 @@ export const ManagedSteps: React.FunctionComponent<InstructionProps> = ({
           selectedApiKeyId,
           isK8s,
           cloudSecurityIntegration,
-          fleetServerHost: fleetServerHosts?.[0],
+          fleetServerHost,
           enrollToken,
         })
       );
@@ -324,7 +327,7 @@ export const ManagedSteps: React.FunctionComponent<InstructionProps> = ({
     enrollToken,
     installManagedCommands,
     isK8s,
-    fleetServerHosts,
+    fleetServerHost,
     onClickViewAgents,
     link,
     enrolledAgentIds,

x-pack/plugins/fleet/public/components/agent_enrollment_flyout/steps/install_cloud_formation_managed_agent_step.tsx

@@ -23,12 +23,14 @@ export const InstallCloudFormationManagedAgentStep = ({
   enrollToken,
   isComplete,
   cloudSecurityIntegration,
+  fleetServerHost,
 }: {
   selectedApiKeyId?: string;
   apiKeyData?: GetOneEnrollmentAPIKeyResponse | null;
   enrollToken?: string;
   isComplete?: boolean;
   cloudSecurityIntegration?: CloudSecurityIntegration | undefined;
+  fleetServerHost: string;
 }): EuiContainedStepProps => {
   const nonCompleteStatus = selectedApiKeyId ? undefined : 'disabled';
   const status = isComplete ? 'complete' : nonCompleteStatus;
@@ -43,6 +45,7 @@ export const InstallCloudFormationManagedAgentStep = ({
         <CloudFormationInstructions
           cloudSecurityIntegration={cloudSecurityIntegration}
           enrollmentAPIKey={enrollToken}
+          fleetServerHost={fleetServerHost}
         />
       ) : (
         <React.Fragment />

x-pack/plugins/fleet/public/hooks/use_create_cloud_formation_url.ts

@@ -13,35 +13,31 @@ import type {
 } from '../components/agent_enrollment_flyout/types';
 
 import { useAgentVersion } from './use_agent_version';
-import { useGetSettings } from './use_request';
 
 const CLOUD_FORMATION_DEFAULT_ACCOUNT_TYPE = 'single-account';
 
 export const useCreateCloudFormationUrl = ({
   enrollmentAPIKey,
   cloudFormationProps,
+  fleetServerHost,
 }: {
-  enrollmentAPIKey: string | undefined;
-  cloudFormationProps: CloudFormationProps | undefined;
+  enrollmentAPIKey?: string;
+  cloudFormationProps?: CloudFormationProps;
+  fleetServerHost?: string;
 }) => {
-  const { data, isLoading } = useGetSettings();
-
   const agentVersion = useAgentVersion();
 
   let isError = false;
   let error: string | undefined;
 
-  // Default fleet server host
-  const fleetServerHost = data?.item.fleet_server_hosts?.[0];
-
-  if (!fleetServerHost && !isLoading) {
+  if (!fleetServerHost) {
     isError = true;
     error = i18n.translate('xpack.fleet.agentEnrollment.cloudFormation.noFleetServerHost', {
       defaultMessage: 'No Fleet Server host found',
     });
   }
 
-  if (!enrollmentAPIKey && !isLoading) {
+  if (!enrollmentAPIKey) {
     isError = true;
     error = i18n.translate('xpack.fleet.agentEnrollment.cloudFormation.noApiKey', {
       defaultMessage: 'No enrollment token found',
@@ -60,7 +56,6 @@ export const useCreateCloudFormationUrl = ({
       : undefined;
 
   return {
-    isLoading,
     cloudFormationUrl,
     isError,
     error,