add isFetchedPackagePolicies state to wait for policies to load before enabling save button

This commit is contained in:
alex prozorov 2025-02-18 09:59:32 +02:00
parent 3ce4cf575b
commit 816c66e924
3 changed files with 53 additions and 18 deletions

View file

@ -122,6 +122,10 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
);
const [withSysMonitoring, setWithSysMonitoring] = useState<boolean>(true);
const [isFetchedPackagePolicies, setIsFetchedPackagePolicies] = useState<boolean | undefined>(
undefined
);
const validation = agentPolicyFormValidation(newAgentPolicy, {
allowedNamespacePrefixes: spaceSettings.allowedNamespacePrefixes,
});
@ -266,8 +270,13 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
const handleExtensionViewOnChange = useCallback<
PackagePolicyEditExtensionComponentProps['onChange']
>(
({ isValid, updatedPolicy }) => {
({ isValid, updatedPolicy, fetchedPackagePolicies }) => {
// console.log("isValid1 ", isValid);
// console.log("updatedPolicy2 ", updatedPolicy);
// console.log("fetchedPackagePolicies2 ", fetchedPackagePolicies);
updatePackagePolicy(updatedPolicy);
setIsFetchedPackagePolicies(fetchedPackagePolicies);
setFormState((prevState) => {
if (prevState === 'VALID' && !isValid) {
return 'INVALID';
@ -652,7 +661,10 @@ export const CreatePackagePolicySinglePage: CreatePackagePolicyParams = ({
onClick={() => onSubmit()}
isLoading={formState === 'LOADING'}
disabled={
formState !== 'VALID' || hasAgentPolicyError || !validationResults
formState !== 'VALID' ||
hasAgentPolicyError ||
!validationResults ||
isFetchedPackagePolicies === false
}
iconType="save"
color="primary"

View file

@ -75,6 +75,7 @@ export interface PackagePolicyEditExtensionComponentProps {
isValid: boolean;
/** The updated Integration Policy to be merged back and included in the API call */
updatedPolicy: Partial<NewPackagePolicy>;
fetchedPackagePolicies?: boolean;
}) => void;
}

View file

@ -197,7 +197,7 @@ const AwsAccountTypeSelect = ({
}: {
input: Extract<NewPackagePolicyPostureInput, { type: 'cloudbeat/cis_aws' }>;
newPolicy: NewPackagePolicy;
updatePolicy: (updatedPolicy: NewPackagePolicy) => void;
updatePolicy: (updatedPolicy: NewPackagePolicy, fetchedPackagePolicies?: boolean) => void;
packageInfo: PackageInfo;
disabled: boolean;
}) => {
@ -303,7 +303,7 @@ const GcpAccountTypeSelect = ({
}: {
input: Extract<NewPackagePolicyPostureInput, { type: 'cloudbeat/cis_gcp' }>;
newPolicy: NewPackagePolicy;
updatePolicy: (updatedPolicy: NewPackagePolicy) => void;
updatePolicy: (updatedPolicy: NewPackagePolicy, fetchedPackagePolicies?: boolean) => void;
packageInfo: PackageInfo;
disabled: boolean;
}) => {
@ -443,7 +443,7 @@ const AzureAccountTypeSelect = ({
}: {
input: Extract<NewPackagePolicyPostureInput, { type: 'cloudbeat/cis_azure' }>;
newPolicy: NewPackagePolicy;
updatePolicy: (updatedPolicy: NewPackagePolicy) => void;
updatePolicy: (updatedPolicy: NewPackagePolicy, fetchedPackagePolicies?: boolean) => void;
disabled: boolean;
packageInfo: PackageInfo;
setupTechnology: SetupTechnology;
@ -548,7 +548,7 @@ const useEnsureDefaultNamespace = ({
}: {
newPolicy: NewPackagePolicy;
input: NewPackagePolicyPostureInput;
updatePolicy: (policy: NewPackagePolicy) => void;
updatePolicy: (policy: NewPackagePolicy, fetchedPackagePolicies?: boolean) => void;
}) => {
useEffect(() => {
if (newPolicy.namespace === POSTURE_NAMESPACE) return;
@ -572,7 +572,7 @@ const usePolicyTemplateInitialName = ({
integration: CloudSecurityPolicyTemplate | undefined;
newPolicy: NewPackagePolicy;
packagePolicyList: PackagePolicy[] | undefined;
updatePolicy: (policy: NewPackagePolicy) => void;
updatePolicy: (policy: NewPackagePolicy, fetchedPackagePolicies?: boolean) => void;
setCanFetchIntegration: (canFetch: boolean) => void;
}) => {
useEffect(() => {
@ -583,17 +583,35 @@ const usePolicyTemplateInitialName = ({
const packagePolicyListByIntegration = packagePolicyList?.filter(
(policy) => policy?.vars?.posture?.value === integration
);
// console.log("keta123");
// console.log("integration123 ", integration);
// console.log("packagePolicyListByIntegration123 ", packagePolicyListByIntegration);
const currentIntegrationName = getMaxPackageName(integration, packagePolicyListByIntegration);
if (newPolicy.name === currentIntegrationName) {
return;
}
updatePolicy({
...newPolicy,
name: currentIntegrationName,
});
// if (newPolicy.name === currentIntegrationName) {
// // console.log("newPolicy.name ", newPolicy.name);
// // console.log("currentIntegrationName ", currentIntegrationName);
// updatePolicy(
// {
// ...newPolicy,
// name: currentIntegrationName,
// },
// Array.isArray(packagePolicyListByIntegration)
// );
// return;
// }
// console.log(
// 'Array.isArray(packagePolicyListByIntegration ',
// Array.isArray(packagePolicyListByIntegration)
// );
updatePolicy(
{
...newPolicy,
name: currentIntegrationName,
},
Array.isArray(packagePolicyListByIntegration)
);
setCanFetchIntegration(false);
// since this useEffect should only run on initial mount updatePolicy and newPolicy shouldn't re-trigger it
// eslint-disable-next-line react-hooks/exhaustive-deps
@ -629,7 +647,7 @@ const useCloudFormationTemplate = ({
}: {
packageInfo: PackageInfo;
newPolicy: NewPackagePolicy;
updatePolicy: (policy: NewPackagePolicy) => void;
updatePolicy: (policy: NewPackagePolicy, fetchedPackagePolicies?: boolean) => void;
}) => {
useEffect(() => {
const templateUrl = getVulnMgmtCloudFormationDefaultValue(packageInfo);
@ -744,8 +762,12 @@ export const CspPolicyTemplateForm = memo<PackagePolicyReplaceDefineStepExtensio
};
const updatePolicy = useCallback(
(updatedPolicy: NewPackagePolicy) => {
onChange({ isValid, updatedPolicy });
(updatedPolicy: NewPackagePolicy, fetchedPackagePolicies?: boolean) => {
// console.log("updatedPolicyy ", updatedPolicy);
// console.log("isValid ", isValid);
// console.log("fetchedPackagePolicies1 ", fetchedPackagePolicies);
onChange({ isValid, updatedPolicy, fetchedPackagePolicies });
},
[onChange, isValid]
);