[Fleet] handle multiple policies in edit package policy extension view (

#187334) ## Summary Related to #75867 Handling multiple policies in package policy edit extension view, made changes in CSP. @elastic/kibana-cloud-security-posture Hey, could you help me how can I create an agentless policy to test with? ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios
elastic · Jul 3, 2024 · 260882e · 260882e
1 parent 307237f
commit 260882e
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 21 deletions.
diff --git a/...s/cloud_security_posture/public/components/fleet_extensions/policy_template_form.test.tsx b/...s/cloud_security_posture/public/components/fleet_extensions/policy_template_form.test.tsx
@@ -114,13 +114,13 @@ describe('<CspPolicyTemplateForm />', () => {
   const WrappedComponent = ({
     newPolicy,
     edit = false,
-    agentPolicy,
+    agentPolicies,
     packageInfo = {} as PackageInfo,
     agentlessPolicy,
   }: {
     edit?: boolean;
     newPolicy: NewPackagePolicy;
-    agentPolicy?: AgentPolicy;
+    agentPolicies?: AgentPolicy[];
     packageInfo?: PackageInfo;
     onChange?: jest.Mock<void, [NewPackagePolicy]>;
     agentlessPolicy?: AgentPolicy;
@@ -136,7 +136,7 @@ describe('<CspPolicyTemplateForm />', () => {
               onChange={onChange}
               packageInfo={packageInfo}
               isEditPage={true}
-              agentPolicy={agentPolicy}
+              agentPolicies={agentPolicies}
               agentlessPolicy={agentlessPolicy}
             />
           )}
@@ -146,7 +146,7 @@ describe('<CspPolicyTemplateForm />', () => {
               onChange={onChange}
               packageInfo={packageInfo}
               isEditPage={false}
-              agentPolicy={agentPolicy}
+              agentPolicies={agentPolicies}
               agentlessPolicy={agentlessPolicy}
             />
           )}

diff --git a/...lugins/cloud_security_posture/public/components/fleet_extensions/policy_template_form.tsx b/...lugins/cloud_security_posture/public/components/fleet_extensions/policy_template_form.tsx
@@ -533,7 +533,7 @@ const IntegrationSettings = ({ onChange, fields }: IntegrationInfoFieldsProps) =
 
 export const CspPolicyTemplateForm = memo<PackagePolicyReplaceDefineStepExtensionComponentProps>(
   ({
-    agentPolicy,
+    agentPolicies,
     newPolicy,
     onChange,
     validationResults,
@@ -551,7 +551,7 @@ export const CspPolicyTemplateForm = memo<PackagePolicyReplaceDefineStepExtensio
     const input = getSelectedOption(newPolicy.inputs, integration);
     const { isAgentlessAvailable, setupTechnology, updateSetupTechnology } = useSetupTechnology({
       input,
-      agentPolicy,
+      agentPolicies,
       agentlessPolicy,
       handleSetupTechnologyChange,
       isEditPage,

diff --git a/...public/components/fleet_extensions/setup_technology_selector/use_setup_technology.test.ts b/...public/components/fleet_extensions/setup_technology_selector/use_setup_technology.test.ts
@@ -74,10 +74,10 @@ describe('useSetupTechnology', () => {
 
     it('sets to AGENT_BASED when agentPolicyId differs from agentlessPolicyId', () => {
       const input = { type: CLOUDBEAT_AWS } as NewPackagePolicyInput;
-      const agentPolicy = { id: 'agentPolicyId' } as AgentPolicy;
+      const agentPolicies = [{ id: 'agentPolicyId' } as AgentPolicy];
       const agentlessPolicy = { id: 'agentlessPolicyId' } as AgentPolicy;
       const { result } = renderHook(() =>
-        useSetupTechnology({ input, agentPolicy, agentlessPolicy, isEditPage })
+        useSetupTechnology({ input, agentPolicies, agentlessPolicy, isEditPage })
       );
       expect(result.current.setupTechnology).toBe(SetupTechnology.AGENT_BASED);
     });
@@ -115,11 +115,11 @@ describe('useSetupTechnology', () => {
 
     it('initializes with AGENTLESS technology if the agent policy id is "agentless"', () => {
       const input = { type: CLOUDBEAT_AWS } as NewPackagePolicyInput;
-      const agentPolicy = { id: 'agentless' } as AgentPolicy;
+      const agentPolicies = [{ id: 'agentless' } as AgentPolicy];
       const { result } = renderHook(() =>
         useSetupTechnology({
           input,
-          agentPolicy,
+          agentPolicies,
           isEditPage,
         })
       );

diff --git a/...ture/public/components/fleet_extensions/setup_technology_selector/use_setup_technology.ts b/...ture/public/components/fleet_extensions/setup_technology_selector/use_setup_technology.ts
@@ -12,13 +12,13 @@ import { CLOUDBEAT_AWS, CLOUDBEAT_GCP, CLOUDBEAT_AZURE } from '../../../../commo
 
 export const useSetupTechnology = ({
   input,
-  agentPolicy,
+  agentPolicies,
   agentlessPolicy,
   handleSetupTechnologyChange,
   isEditPage,
 }: {
   input: NewPackagePolicyInput;
-  agentPolicy?: AgentPolicy;
+  agentPolicies?: AgentPolicy[];
   agentlessPolicy?: AgentPolicy;
   handleSetupTechnologyChange?: (value: SetupTechnology) => void;
   isEditPage: boolean;
@@ -28,10 +28,10 @@ export const useSetupTechnology = ({
   const isCspmAzure = input.type === CLOUDBEAT_AZURE;
   const isAgentlessSupportedForCloudProvider = isCspmAws || isCspmGcp || isCspmAzure;
   const isAgentlessAvailable = Boolean(isAgentlessSupportedForCloudProvider && agentlessPolicy);
-  const agentPolicyId = agentPolicy?.id;
+  const agentPolicyIds = (agentPolicies || []).map((policy: AgentPolicy) => policy.id);
   const agentlessPolicyId = agentlessPolicy?.id;
   const [setupTechnology, setSetupTechnology] = useState<SetupTechnology>(() => {
-    if (isEditPage && agentPolicyId === SetupTechnology.AGENTLESS) {
+    if (isEditPage && agentPolicyIds.includes(SetupTechnology.AGENTLESS)) {
       return SetupTechnology.AGENTLESS;
     }
 
@@ -50,7 +50,11 @@ export const useSetupTechnology = ({
       return;
     }
 
-    if (agentPolicyId && agentPolicyId !== agentlessPolicyId) {
+    const hasAgentPolicies = agentPolicyIds.length > 0;
+    const agentlessPolicyIsAbsent =
+      !agentlessPolicyId || !agentPolicyIds.includes(agentlessPolicyId);
+
+    if (hasAgentPolicies && agentlessPolicyIsAbsent) {
       /*
         handle case when agent policy is coming from outside,
         e.g. from the get param or when coming to integration from a specific agent policy
@@ -65,7 +69,7 @@ export const useSetupTechnology = ({
     } else {
       setSetupTechnology(SetupTechnology.AGENT_BASED);
     }
-  }, [agentPolicyId, agentlessPolicyId, isAgentlessAvailable, isDirty, isEditPage]);
+  }, [agentPolicyIds, agentlessPolicyId, isAgentlessAvailable, isDirty, isEditPage]);
 
   useEffect(() => {
     if (isEditPage) {

diff --git a/...tions/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.tsx b/...tions/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.tsx
@@ -358,7 +358,7 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
       ) : (
         <ExtensionWrapper>
           <replaceDefineStepView.Component
-            agentPolicy={agentPolicies[0]}
+            agentPolicies={agentPolicies}
             packageInfo={packageInfo}
             newPolicy={packagePolicy}
             onChange={handleExtensionViewOnChange}

diff --git a/.../fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/index.tsx b/.../fleet/public/applications/fleet/sections/agent_policy/edit_package_policy_page/index.tsx
@@ -128,6 +128,7 @@ export const EditPackagePolicyForm = memo<{
   } = usePackagePolicyWithRelatedData(packagePolicyId, {
     forceUpgrade,
   });
+  const hasAgentlessAgentPolicy = packagePolicy.policy_ids.includes(AGENTLESS_POLICY_ID);
 
   const canWriteIntegrationPolicies = useAuthz().integrations.writeIntegrationPolicies;
   useSetIsReadOnly(!canWriteIntegrationPolicies);
@@ -241,7 +242,7 @@ export const EditPackagePolicyForm = memo<{
     }
     if (
       (agentCount !== 0 || agentPoliciesToAdd.length > 0 || agentPoliciesToRemove.length > 0) &&
-      !packagePolicy.policy_ids.includes(AGENTLESS_POLICY_ID) &&
+      !hasAgentlessAgentPolicy &&
       formState !== 'CONFIRM'
     ) {
       setFormState('CONFIRM');
@@ -432,7 +433,7 @@ export const EditPackagePolicyForm = memo<{
   const replaceConfigurePackage = replaceDefineStepView && originalPackagePolicy && packageInfo && (
     <ExtensionWrapper>
       <replaceDefineStepView.Component
-        agentPolicy={agentPolicies[0]}
+        agentPolicies={agentPolicies}
         packageInfo={packageInfo}
         policy={originalPackagePolicy}
         newPolicy={packagePolicy}
@@ -521,7 +522,7 @@ export const EditPackagePolicyForm = memo<{
                 <EuiSpacer size="xxl" />
               </>
             )}
-            {canUseMultipleAgentPolicies ? (
+            {canUseMultipleAgentPolicies && !hasAgentlessAgentPolicy ? (
               <StepsWithLessPadding steps={steps} />
             ) : (
               replaceConfigurePackage || configurePackage

diff --git a/x-pack/plugins/fleet/public/types/ui_extensions.ts b/x-pack/plugins/fleet/public/types/ui_extensions.ts
@@ -34,7 +34,7 @@ export type PackagePolicyReplaceDefineStepExtensionComponentProps = (
   | (PackagePolicyCreateExtensionComponentProps & { isEditPage: false })
 ) & {
   validationResults?: PackagePolicyValidationResults;
-  agentPolicy?: AgentPolicy;
+  agentPolicies?: AgentPolicy[];
   packageInfo: PackageInfo;
   agentlessPolicy?: AgentPolicy;
   handleSetupTechnologyChange?: (setupTechnology: string) => void;