diff --git a/frontend/components/forms/fields/Slider/Slider.tsx b/frontend/components/forms/fields/Slider/Slider.tsx index db21fe6c9a..2b368275f1 100644 --- a/frontend/components/forms/fields/Slider/Slider.tsx +++ b/frontend/components/forms/fields/Slider/Slider.tsx @@ -6,10 +6,7 @@ import FormField from "components/forms/FormField"; import { IFormFieldProps } from "components/forms/FormField/FormField"; interface ISliderProps { - onChange: (newValue?: { - name: string; - value: string | number | boolean; - }) => void; + onChange: () => void; value: boolean; inactiveText: string; activeText: string; diff --git a/frontend/pages/policies/ManagePoliciesPage/components/CalendarEventsModal/CalendarEventsModal.tsx b/frontend/pages/policies/ManagePoliciesPage/components/CalendarEventsModal/CalendarEventsModal.tsx index bc995d6b31..7e3285d87d 100644 --- a/frontend/pages/policies/ManagePoliciesPage/components/CalendarEventsModal/CalendarEventsModal.tsx +++ b/frontend/pages/policies/ManagePoliciesPage/components/CalendarEventsModal/CalendarEventsModal.tsx @@ -81,31 +81,36 @@ const CalendarEventsModal = ({ errors.url = `${errorPrefix} a valid resolution webhook URL`; } - setFormErrors(errors); - return errors; }; - // two onChange handlers to handle different levels of nesting in the form data - const onFeatureEnabledOrUrlChange = (newVal: { - name: "enabled" | "url"; - value: string | boolean; - }) => { - const { name, value } = newVal; - const newFormData = { ...formData, [name]: value }; + const onFeatureEnabledChange = () => { + const newFormData = { ...formData, enabled: !formData.enabled }; - // On disabling feature with erroneous URL, clear erroneous URL and URL error - if (name === "enabled" && value === false && formErrors.url) { - newFormData.url = ""; - const { url: removedUrl, ...remainingFormErrors } = formErrors; - setFormErrors(remainingFormErrors); + const isDisabling = newFormData.enabled === false; + + // On disabling feature, validate URL and if an error clear input and error + if (isDisabling) { + const errors = validateForm(newFormData); + + if (errors.url) { + newFormData.url = ""; + delete formErrors.url; + setFormErrors(formErrors); + } } + setFormData(newFormData); + }; + const onUrlChange = (value: string) => { + const newFormData = { ...formData, url: value }; // On URL change with erroneous URL, validate form - if (name === "url" && formErrors.url) { - validateForm(newFormData); + if (formErrors.url) { + setFormErrors(validateForm(newFormData)); } + + setFormData(newFormData); }; const onPolicyEnabledChange = useCallback( @@ -126,8 +131,9 @@ const CalendarEventsModal = ({ const onUpdatePolicyEnabledCalendarEvents = () => { const errors = validateForm(formData); - // Submit only if there are no errors - if (Object.keys(errors).length === 0) { + if (Object.keys(errors).length > 0) { + setFormErrors(errors); + } else { updatePolicyEnabledCalendarEvents(formData); } }; @@ -247,12 +253,7 @@ const CalendarEventsModal = ({