[Cloud Security] Add copy and paste fields to the azure guide (#167775)

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

@@ -35,18 +35,21 @@ export const PostInstallAzureArmTemplateModal: React.FunctionComponent<{
   agentPolicy: AgentPolicy;
   packagePolicy: PackagePolicy;
 }> = ({ onConfirm, onCancel, agentPolicy, packagePolicy }) => {
-  const { data: apyKeysData } = useQuery(['cloudFormationApiKeys'], () =>
-    sendGetEnrollmentAPIKeys({
-      page: 1,
-      perPage: 1,
-      kuery: `policy_id:${agentPolicy.id}`,
-    })
+  const { data: apyKeysData } = useQuery(
+    ['azureArmTemplateApiKeys', { agentPolicyId: agentPolicy.id }],
+    () =>
+      sendGetEnrollmentAPIKeys({
+        page: 1,
+        perPage: 1,
+        kuery: `policy_id:${agentPolicy.id}`,
+      })
   );
 
   const azureArmTemplateProps = getAzureArmPropsFromPackagePolicy(packagePolicy);
+  const enrollmentToken = apyKeysData?.data?.items[0]?.api_key;
 
   const { azureArmTemplateUrl, error, isError, isLoading } = useCreateAzureArmTemplateUrl({
-    enrollmentAPIKey: apyKeysData?.data?.items[0]?.api_key,
+    enrollmentAPIKey: enrollmentToken,
     azureArmTemplateProps,
   });
 
@@ -62,7 +65,11 @@ export const PostInstallAzureArmTemplateModal: React.FunctionComponent<{
       </EuiModalHeader>
 
       <EuiModalBody>
-        <AzureArmTemplateGuide azureAccountType={azureArmTemplateProps.azureAccountType} />
+        <AzureArmTemplateGuide
+          azureAccountType={azureArmTemplateProps.azureAccountType}
+          agentPolicy={agentPolicy}
+          enrollmentToken={enrollmentToken}
+        />
         {error && isError && (
           <>
             <EuiSpacer size="m" />

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

@@ -10,6 +10,8 @@ import { EuiButton, EuiSpacer, EuiCallOut, EuiSkeletonText } from '@elastic/eui'
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 
+import type { AgentPolicy } from '../../../common';
+
 import { AzureArmTemplateGuide } from '../azure_arm_template_guide';
 
 import { useCreateAzureArmTemplateUrl } from '../../hooks/use_create_azure_arm_template_url';
@@ -19,10 +21,12 @@ import type { CloudSecurityIntegration } from './types';
 interface Props {
   enrollmentAPIKey?: string;
   cloudSecurityIntegration: CloudSecurityIntegration;
+  agentPolicy?: AgentPolicy;
 }
 export const AzureArmTemplateInstructions: React.FunctionComponent<Props> = ({
   enrollmentAPIKey,
   cloudSecurityIntegration,
+  agentPolicy,
 }) => {
   const { isLoading, azureArmTemplateUrl, error, isError } = useCreateAzureArmTemplateUrl({
     enrollmentAPIKey,
@@ -52,6 +56,8 @@ export const AzureArmTemplateInstructions: React.FunctionComponent<Props> = ({
     >
       <AzureArmTemplateGuide
         azureAccountType={cloudSecurityIntegration?.azureArmTemplateProps?.azureAccountType}
+        agentPolicy={agentPolicy}
+        enrollmentToken={enrollmentAPIKey}
       />
       <EuiSpacer size="m" />
       <EuiButton

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

@@ -293,6 +293,7 @@ export const ManagedSteps: React.FunctionComponent<InstructionProps> = ({
           apiKeyData,
           enrollToken,
           cloudSecurityIntegration,
+          agentPolicy,
         })
       );
     } else {

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

@@ -11,6 +11,8 @@ import { i18n } from '@kbn/i18n';
 
 import type { EuiContainedStepProps } from '@elastic/eui/src/components/steps/steps';
 
+import type { AgentPolicy } from '../../../../common';
+
 import { AzureArmTemplateInstructions } from '../azure_arm_template_instructions';
 
 import type { GetOneEnrollmentAPIKeyResponse } from '../../../../common/types/rest_spec/enrollment_api_key';
@@ -23,12 +25,14 @@ export const InstallAzureArmTemplateManagedAgentStep = ({
   enrollToken,
   isComplete,
   cloudSecurityIntegration,
+  agentPolicy,
 }: {
   selectedApiKeyId?: string;
   apiKeyData?: GetOneEnrollmentAPIKeyResponse | null;
   enrollToken?: string;
   isComplete?: boolean;
   cloudSecurityIntegration?: CloudSecurityIntegration | undefined;
+  agentPolicy?: AgentPolicy;
 }): EuiContainedStepProps => {
   const nonCompleteStatus = selectedApiKeyId ? undefined : 'disabled';
   const status = isComplete ? 'complete' : nonCompleteStatus;
@@ -44,6 +48,7 @@ export const InstallAzureArmTemplateManagedAgentStep = ({
         <AzureArmTemplateInstructions
           cloudSecurityIntegration={cloudSecurityIntegration}
           enrollmentAPIKey={enrollToken}
+          agentPolicy={agentPolicy}
         />
       ) : (
         <React.Fragment />

x-pack/plugins/fleet/public/components/azure_arm_template_guide.tsx

@@ -6,9 +6,13 @@
  */
 
 import React from 'react';
-import { EuiLink, EuiText } from '@elastic/eui';
+import { EuiCodeBlock, EuiDescriptionList, EuiLink, EuiSpacer, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 
+import type { AgentPolicy } from '../../common';
+import { useFleetServerHostsForPolicy } from '../hooks';
+
+import { useAgentPolicyWithPackagePolicies } from './agent_enrollment_flyout/hooks';
 import type { CloudSecurityIntegrationAzureAccountType } from './agent_enrollment_flyout/types';
 
 const azureResourceManagerLink =
@@ -16,9 +20,17 @@ const azureResourceManagerLink =
 
 export const AzureArmTemplateGuide = ({
   azureAccountType,
+  agentPolicy,
+  enrollmentToken = '',
 }: {
   azureAccountType?: CloudSecurityIntegrationAzureAccountType;
+  agentPolicy?: AgentPolicy;
+  enrollmentToken?: string;
 }) => {
+  const { agentPolicyWithPackagePolicies } = useAgentPolicyWithPackagePolicies(agentPolicy?.id);
+  const { fleetServerHosts } = useFleetServerHostsForPolicy(agentPolicyWithPackagePolicies);
+  const fleetServerHost = fleetServerHosts[0];
+
   return (
     <EuiText>
       <p>
@@ -65,6 +77,33 @@ export const AzureArmTemplateGuide = ({
               defaultMessage="Click the Launch ARM Template button below."
             />
           </li>
+          <li>
+            <FormattedMessage
+              id="xpack.fleet.azureArmTemplate.guide.steps.fillForm"
+              defaultMessage="Use the provided fields below to fill the instance details section of the ARM Template:"
+            />
+            <EuiSpacer />
+            <EuiDescriptionList
+              listItems={[
+                {
+                  title: 'Fleet URL',
+                  description: (
+                    <EuiCodeBlock isCopyable paddingSize="m">
+                      {fleetServerHost}
+                    </EuiCodeBlock>
+                  ),
+                },
+                {
+                  title: 'Enrollment Token',
+                  description: (
+                    <EuiCodeBlock isCopyable paddingSize="m">
+                      {enrollmentToken}
+                    </EuiCodeBlock>
+                  ),
+                },
+              ]}
+            />
+          </li>
         </ol>
       </EuiText>
     </EuiText>