diff --git a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/CreateAlertDefinition.tsx b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/CreateAlertDefinition.tsx index f54868bbfe3..07bf03eb841 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/CreateAlertDefinition.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/CreateAlertDefinition.tsx @@ -101,7 +101,7 @@ export const CreateAlertDefinition = () => { getValues, handleSubmit, setError, - setValue, + resetField, } = formMethods; const { enqueueSnackbar } = useSnackbar(); @@ -154,10 +154,15 @@ export const CreateAlertDefinition = () => { const handleServiceTypeChange = React.useCallback(() => { // Reset the criteria to initial state - setValue('rule_criteria.rules', [{ ...criteriaInitialValues }]); - setValue('entity_ids', []); - setValue('trigger_conditions', triggerConditionInitialValues); - }, [setValue]); + resetField('rule_criteria.rules', { + defaultValue: [{ ...criteriaInitialValues }], + }); + resetField('entity_ids', { defaultValue: [] }); + resetField('trigger_conditions', { + defaultValue: triggerConditionInitialValues, + }); + resetField('scope', { defaultValue: null }); + }, [resetField]); React.useEffect(() => { setValidationSchema( diff --git a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterField.tsx b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterField.tsx index 6c3fddb71c7..d581d51a0d2 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterField.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterField.tsx @@ -34,7 +34,7 @@ interface DimensionFilterFieldProps { export const DimensionFilterField = (props: DimensionFilterFieldProps) => { const { dataFieldDisabled, dimensionOptions, name, onFilterDelete } = props; - const { control, setValue } = useFormContext(); + const { control, resetField } = useFormContext(); const dataFieldOptions = dimensionOptions.map((dimension) => ({ @@ -52,13 +52,11 @@ export const DimensionFilterField = (props: DimensionFilterFieldProps) => { value: null, }; if (operation === 'selectOption') { - setValue(`${name}.dimension_label`, selected.value, { - shouldValidate: true, + resetField(name, { + defaultValue: { ...fieldValue, dimension_label: selected.value }, }); - setValue(`${name}.operator`, fieldValue.operator); - setValue(`${name}.value`, fieldValue.value); } else { - setValue(name, fieldValue); + resetField(name, { defaultValue: fieldValue }); } }; @@ -149,7 +147,7 @@ export const DimensionFilterField = (props: DimensionFilterFieldProps) => { field.onChange( operation === 'selectOption' ? newValue.value : null ); - setValue(`${name}.value`, null); + resetField(`${name}.value`, { defaultValue: null }); }} options={dimensionOperatorOptions} placeholder="Select an Operator" diff --git a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/ValueSchemas.ts b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/ValueSchemas.ts index 1662ff82ff4..9f182a14dda 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/ValueSchemas.ts +++ b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilterValue/ValueSchemas.ts @@ -242,9 +242,8 @@ const multipleInterfacesSchema = string() const baseValueSchema = string() .nullable() - .transform((value) => (value === null ? '' : value)) // normalize null to empty string to avoid the empty string case for TextField components .required(fieldErrorMessage) - .test('nonEmpty', fieldErrorMessage, (value) => value !== ''); + .test('nonEmpty', fieldErrorMessage, (value) => value !== null); interface GetValueSchemaParams { dimensionLabel: string; @@ -271,7 +270,7 @@ export const getDimensionFilterValueSchema = ({ return interfaceSchema.concat(baseValueSchema); } if (['endswith', 'startswith'].includes(operator)) { - return baseValueSchema.concat(string().max(100, LENGTH_ERROR_MESSAGE)); + return string().max(100, LENGTH_ERROR_MESSAGE).concat(baseValueSchema); } return baseValueSchema; }; diff --git a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/Metric.tsx b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/Metric.tsx index 222c0aad5f1..e28bb635df9 100644 --- a/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/Metric.tsx +++ b/packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/Metric.tsx @@ -57,7 +57,7 @@ export const Metric = (props: MetricCriteriaProps) => { onMetricDelete, showDeleteIcon, } = props; - const { control, setValue } = useFormContext(); + const { control, resetField } = useFormContext(); const handleDataFieldChange = ( selected: { label: string; value: string }, @@ -71,13 +71,11 @@ export const Metric = (props: MetricCriteriaProps) => { threshold: 0, }; if (operation === 'selectOption') { - setValue(`${name}.metric`, selected.value, { shouldValidate: true }); - setValue(`${name}.aggregate_function`, fieldValue.aggregate_function); - setValue(`${name}.dimension_filters`, fieldValue.dimension_filters); - setValue(`${name}.operator`, fieldValue.operator); - setValue(`${name}.threshold`, fieldValue.threshold); + resetField(name, { + defaultValue: { ...fieldValue, metric: selected.value }, + }); } else { - setValue(name, fieldValue); + resetField(name, { defaultValue: fieldValue }); } };