Fleet UI/FE: Separate validation from set state, separate toggle and input handler… (#18425)

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;

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 = ({
       <div className="form-header">
         <Slider
           value={formData.enabled}
-          onChange={() => {
-            onFeatureEnabledOrUrlChange({
-              name: "enabled",
-              value: !formData.enabled,
-            });
-          }}
+          onChange={onFeatureEnabledChange}
           inactiveText="Disabled"
           activeText="Enabled"
         />
@@ -270,10 +271,9 @@ const CalendarEventsModal = ({
         <InputField
           placeholder="https://server.com/example"
           label="Resolution webhook URL"
-          onChange={onFeatureEnabledOrUrlChange}
+          onChange={onUrlChange}
           name="url"
           value={formData.url}
-          parseTarget
           error={formErrors.url}
           tooltip="Provide a URL to deliver a webhook request to."
           labelTooltipPosition="top-start"