[8.7] [Fleet] Update package policy id when agent id changes (#151886) (

#152169)

# Backport

This will backport the following commits from `main` to `8.7`:
- [[Fleet] Update package policy id when agent id changes
(#151886)](#151886)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Or
Ouziel","email":"or.ouziel@elastic.co"},"sourceCommit":{"committedDate":"2023-02-26T11:32:42Z","message":"[Fleet]
Update package policy id when agent id changes
(#151886)","sha":"69420e1bae7e3821b7b861255c3da0a0c893161b","branchLabelMapping":{"^v8.8.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:Fleet","ci:cloud-redeploy","v8.7.0","v8.8.0"],"number":151886,"url":"https://github.com/elastic/kibana/pull/151886","mergeCommit":{"message":"[Fleet]
Update package policy id when agent id changes
(#151886)","sha":"69420e1bae7e3821b7b861255c3da0a0c893161b"}},"sourceBranch":"main","suggestedTargetBranches":["8.7"],"targetPullRequestStates":[{"branch":"8.7","label":"v8.7.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.8.0","labelRegex":"^v8.8.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/151886","number":151886,"mergeCommit":{"message":"[Fleet]
Update package policy id when agent id changes
(#151886)","sha":"69420e1bae7e3821b7b861255c3da0a0c893161b"}}]}]
BACKPORT-->

Co-authored-by: Or Ouziel <or.ouziel@elastic.co>

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/step_define_package_policy.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import {
@@ -86,18 +86,6 @@ export const StepDefinePackagePolicy: React.FunctionComponent<{
       });
     }
 
-    // Update package policy's package and agent policy info
-    useEffect(() => {
-      //  TODO move this to parent hook
-      // If agent policy has changed, update package policy's agent policy ID and namespace
-      if (agentPolicy && packagePolicy.policy_id !== agentPolicy.id) {
-        updatePackagePolicy({
-          policy_id: agentPolicy.id,
-          namespace: agentPolicy.namespace,
-        });
-      }
-    }, [packagePolicy, agentPolicy, packageInfo, updatePackagePolicy]);
-
     const isManaged = packagePolicy.is_managed;
 
     return validationResults ? (

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/hooks/form.test.tsx

@@ -10,7 +10,7 @@ import type { RenderHookResult } from '@testing-library/react-hooks';
 
 import type { TestRenderer } from '../../../../../../../mock';
 import { createFleetTestRendererMock } from '../../../../../../../mock';
-import type { PackageInfo } from '../../../../../types';
+import type { AgentPolicy, PackageInfo } from '../../../../../types';
 
 import { sendGetPackagePolicies } from '../../../../../hooks';
 
@@ -94,6 +94,43 @@ describe('useOnSubmit', () => {
       });
     });
 
+    it('should set package policy id and namespace when agent policy changes', () => {
+      act(() => {
+        renderResult.result.current.updateAgentPolicy({
+          id: 'some-id',
+          namespace: 'default',
+        } as AgentPolicy);
+      });
+
+      expect(renderResult.result.current.packagePolicy).toEqual({
+        policy_id: 'some-id',
+        namespace: 'default',
+        description: '',
+        enabled: true,
+        inputs: [],
+        name: 'apache-1',
+        package: {
+          name: 'apache',
+          title: 'Apache',
+          version: '1.0.0',
+        },
+        vars: {
+          'Advanced var': {
+            type: 'bool',
+            value: true,
+          },
+          'Required var': {
+            type: 'bool',
+            value: undefined,
+          },
+          'Show user var': {
+            type: 'string',
+            value: 'showUserVarVal',
+          },
+        },
+      });
+    });
+
     it('should set index 1 name to package policy on init if no package policies exist for this package', () => {
       // waitFor(() => {
       //   expect(renderResult.getByDisplayValue('apache-1')).toBeInTheDocument();

x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/hooks/form.tsx

@@ -219,6 +219,15 @@ export function useOnSubmit({
     init();
   }, [packageInfo, agentPolicy, updatePackagePolicy, integrationToEnable, isInitialized]);
 
+  useEffect(() => {
+    if (agentPolicy && packagePolicy.policy_id !== agentPolicy.id) {
+      updatePackagePolicy({
+        policy_id: agentPolicy.id,
+        namespace: agentPolicy.namespace,
+      });
+    }
+  }, [packagePolicy, agentPolicy, updatePackagePolicy]);
+
   const onSaveNavigate = useOnSaveNavigate({
     packagePolicy,
     queryParamsPolicyId,