[Cloud Posture] Change integration default name based on Policy Template (#154495)

x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_template_form.test.tsx

@@ -13,8 +13,23 @@ import type { NewPackagePolicy, PackageInfo, PackagePolicy } from '@kbn/fleet-pl
 import userEvent from '@testing-library/user-event';
 import { getPosturePolicy } from './utils';
 import { CLOUDBEAT_AWS, CLOUDBEAT_EKS } from '../../../common/constants';
+import { useParams } from 'react-router-dom';
+
+// mock useParams
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: jest.fn().mockReturnValue({
+    integration: undefined,
+  }),
+}));
 
 describe('<CspPolicyTemplateForm />', () => {
+  beforeEach(() => {
+    (useParams as jest.Mock).mockReturnValue({
+      integration: undefined,
+    });
+  });
+
   const onChange = jest.fn();
 
   const WrappedComponent = ({
@@ -183,13 +198,30 @@ describe('<CspPolicyTemplateForm />', () => {
       ...input,
       enabled: input.policy_template === 'kspm',
     }));
+    policy.name = 'cloud_security_posture-1';
+
+    (useParams as jest.Mock).mockReturnValue({
+      integration: 'kspm',
+    });
 
     render(<WrappedComponent newPolicy={policy} />);
 
     // 1st call happens on mount and selects the default policy template enabled input
     expect(onChange).toHaveBeenNthCalledWith(1, {
       isValid: true,
-      updatedPolicy: getMockPolicyK8s(),
+      updatedPolicy: {
+        ...getMockPolicyK8s(),
+        name: 'cloud_security_posture-1',
+      },
+    });
+
+    // 2nd call happens to set integration name
+    expect(onChange).toHaveBeenNthCalledWith(2, {
+      isValid: true,
+      updatedPolicy: {
+        ...policy,
+        name: 'kspm-1',
+      },
     });
   });
 
@@ -200,13 +232,30 @@ describe('<CspPolicyTemplateForm />', () => {
       ...input,
       enabled: input.policy_template === 'cspm',
     }));
+    policy.name = 'cloud_security_posture-1';
+
+    (useParams as jest.Mock).mockReturnValue({
+      integration: 'cspm',
+    });
 
     render(<WrappedComponent newPolicy={policy} />);
 
     // 1st call happens on mount and selects the default policy template enabled input
     expect(onChange).toHaveBeenNthCalledWith(1, {
       isValid: true,
-      updatedPolicy: getMockPolicyAWS(),
+      updatedPolicy: {
+        ...getMockPolicyAWS(),
+        name: 'cloud_security_posture-1',
+      },
+    });
+
+    // 2nd call happens to set integration name
+    expect(onChange).toHaveBeenNthCalledWith(2, {
+      isValid: true,
+      updatedPolicy: {
+        ...policy,
+        name: 'cspm-1',
+      },
     });
   });
 

x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_template_form.tsx

@@ -115,7 +115,7 @@ export const CspPolicyTemplateForm = memo<PackagePolicyReplaceDefineStepExtensio
       (key) => (validationResults?.vars || {})[key] !== null
     );
 
-    const [loading, setLoading] = useState(validationResultsNonNullFields.length > 0);
+    const [isLoading, setIsLoading] = useState(validationResultsNonNullFields.length > 0);
 
     // delaying component rendering due to a race condition issue from Fleet
     // TODO: remove this workaround when the following issue is resolved:
@@ -124,25 +124,27 @@ export const CspPolicyTemplateForm = memo<PackagePolicyReplaceDefineStepExtensio
       // using validation?.vars to know if the newPolicy state was reset due to race condition
       if (validationResultsNonNullFields.length > 0) {
         // Forcing rerender to recover from the validation errors state
-        setLoading(true);
+        setIsLoading(true);
       }
-      setTimeout(() => setLoading(false), 200);
+      setTimeout(() => setIsLoading(false), 200);
     }, [validationResultsNonNullFields]);
 
     useEffect(() => {
       if (isEditPage) return;
-      if (loading) return;
+      if (isLoading) return;
       // Pick default input type for policy template.
       // Only 1 enabled input is supported when all inputs are initially enabled.
       // Required for mount only to ensure a single input type is selected
       // This will remove errors in validationResults.vars
       setEnabledPolicyInput(DEFAULT_INPUT_TYPE[input.policy_template]);
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [loading, input.policy_template, isEditPage]);
+    }, [isLoading, input.policy_template, isEditPage]);
+
+    usePolicyTemplateInitialName({ isEditPage, isLoading, integration, newPolicy, updatePolicy });
 
     useEnsureDefaultNamespace({ newPolicy, input, updatePolicy });
 
-    if (loading) {
+    if (isLoading) {
       return (
         <EuiFlexGroup justifyContent="spaceAround">
           <EuiFlexItem grow={false}>
@@ -224,6 +226,37 @@ CspPolicyTemplateForm.displayName = 'CspPolicyTemplateForm';
 // eslint-disable-next-line import/no-default-export
 export { CspPolicyTemplateForm as default };
 
+const usePolicyTemplateInitialName = ({
+  isEditPage,
+  isLoading,
+  integration,
+  newPolicy,
+  updatePolicy,
+}: {
+  isEditPage: boolean;
+  isLoading: boolean;
+  integration: CloudSecurityPolicyTemplate | undefined;
+  newPolicy: NewPackagePolicy;
+  updatePolicy: (policy: NewPackagePolicy) => void;
+}) => {
+  useEffect(() => {
+    if (!integration) return;
+    if (isEditPage) return;
+    if (isLoading) return;
+    const sequenceNumber = newPolicy.name.replace(/\D/g, '');
+    const sequenceSuffix = sequenceNumber ? `-${sequenceNumber}` : '';
+    const currentIntegrationName = `${integration}${sequenceSuffix}`;
+    if (newPolicy.name === currentIntegrationName) {
+      return;
+    }
+    updatePolicy({
+      ...newPolicy,
+      name: currentIntegrationName,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLoading, integration, isEditPage]);
+};
+
 const useEnsureDefaultNamespace = ({
   newPolicy,
   input,