From 310bba00c60839afa4edcf221db5deb319a30d0e Mon Sep 17 00:00:00 2001 From: Lola Date: Thu, 2 May 2024 10:04:27 -0400 Subject: [PATCH] [Cloud Security] fix agent count to show correct pop-up modal (#181503) ## Summary Summarize your PR. If it involves visual changes include a screenshot or gif. This PR fixes agent count to for the following cases: * If current agent policy is New agent policy, then AWS CloudFormation when the agent count is 0 * if current agent policy is Existing agent policy with an agent , then show confirmation agent modal * If current agent policy is Agentless policy, then navigate to fleet agent policies page. `isDirty` and `currentAgentPolicy` states will used be to circumvent the race condition `useEffect` that sets SetupTechnology when we first navigate to the add CSPM integration page. * `currentAgentPolicy` state keep current agentPolicy and reset agent count when we switch from `agentless` to `agent-based` * `isDirty` helps exit out `x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/setup_technology_selector/use_setup_technology.ts` `useEffect` race condition once we initialize `setupTechnology` state on page load. --- .../fleet_extensions/policy_template_form.tsx | 4 ++-- .../use_setup_technology.ts | 12 ++++++++++-- .../single_page_layout/hooks/setup_technology.ts | 4 ++-- .../single_page_layout/index.tsx | 7 ++++++- 4 files changed, 20 insertions(+), 7 deletions(-) diff --git a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_template_form.tsx b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_template_form.tsx index c205ef7f825258..ae1a1cb755afc9 100644 --- a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_template_form.tsx +++ b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_template_form.tsx @@ -549,7 +549,7 @@ export const CspPolicyTemplateForm = memo )} diff --git a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/setup_technology_selector/use_setup_technology.ts b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/setup_technology_selector/use_setup_technology.ts index 1eb3334d09103f..eb18a90b72936d 100644 --- a/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/setup_technology_selector/use_setup_technology.ts +++ b/x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/setup_technology_selector/use_setup_technology.ts @@ -38,8 +38,15 @@ export const useSetupTechnology = ({ return SetupTechnology.AGENT_BASED; }); + const [isDirty, setIsDirty] = useState(false); + + const updateSetupTechnology = (value: SetupTechnology) => { + setSetupTechnology(value); + setIsDirty(true); + }; + useEffect(() => { - if (isEditPage) { + if (isEditPage || isDirty) { return; } @@ -58,7 +65,7 @@ export const useSetupTechnology = ({ } else { setSetupTechnology(SetupTechnology.AGENT_BASED); } - }, [agentPolicyId, agentlessPolicyId, isAgentlessAvailable, isEditPage]); + }, [agentPolicyId, agentlessPolicyId, isAgentlessAvailable, isDirty, isEditPage]); useEffect(() => { if (isEditPage) { @@ -74,5 +81,6 @@ export const useSetupTechnology = ({ isAgentlessAvailable, setupTechnology, setSetupTechnology, + updateSetupTechnology, }; }; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/hooks/setup_technology.ts b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/hooks/setup_technology.ts index 7088bdd37f0439..2eab867e2ae121 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/hooks/setup_technology.ts +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/hooks/setup_technology.ts @@ -37,7 +37,7 @@ export function useSetupTechnology({ }: { updateNewAgentPolicy: (policy: NewAgentPolicy) => void; newAgentPolicy: NewAgentPolicy; - updateAgentPolicy: (policy: AgentPolicy) => void; + updateAgentPolicy: (policy: AgentPolicy | undefined) => void; setSelectedPolicyTab: (tab: SelectedPolicyTab) => void; }) { const { isAgentlessEnabled } = useAgentlessPolicy(); @@ -75,8 +75,8 @@ export function useSetupTechnology({ } else if (setupTechnology === SetupTechnology.AGENT_BASED) { updateNewAgentPolicy(newAgentPolicy); setSelectedPolicyTab(SelectedPolicyTab.NEW); + updateAgentPolicy(undefined); } - setSelectedSetupTechnology(setupTechnology); }, [ diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.tsx index 6093f7b327b17d..572b7a4136ea54 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.tsx @@ -226,10 +226,15 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({ } }; + if (selectedPolicyTab === SelectedPolicyTab.NEW) { + setAgentCount(0); + return; + } + if (isFleetEnabled && agentPolicyId) { getAgentCount(); } - }, [agentPolicyId, isFleetEnabled]); + }, [agentPolicyId, selectedPolicyTab, isFleetEnabled]); const handleExtensionViewOnChange = useCallback< PackagePolicyEditExtensionComponentProps['onChange']