Fix webhooks evetns checkbox

src/webhooks/components/WebhookEvents/WebhookEvents.tsx

@@ -8,6 +8,7 @@ import { ChangeEvent } from "@saleor/hooks/useForm";
 import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
 import React from "react";
 import { useIntl } from "react-intl";
+import { toggle } from "@saleor/utils/lists";
 
 interface WebhookEventsProps {
   data: {
@@ -57,26 +58,13 @@ const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
     })
   };
 
-  const handleAllEventsChange = (event: ChangeEvent) =>
+  const handleEventsChange = (event: ChangeEvent) =>
-    onChange(event, () =>
-      onChange({
-        target: {
-          name: "events",
-          value: event.target.value ? WebhookEventTypeEnum.ANY_EVENTS : []
-        }
-      })
-    );
-
-  const handleEventsChange = (event: ChangeEvent) => {
     onChange({
       target: {
         name: "events",
-        value: event.target.value
+        value: toggle(event.target.name, data.events, (a, b) => a === b)
-          ? data.events.concat([event.target.name])
-          : data.events.filter(events => events !== event.target.name)
       }
     });
-  };
 
   return (
     <Card>
@@ -99,7 +87,7 @@ const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
           disabled={disabled}
           label={translatedEvents.ANY_EVENTS}
           name="allEvents"
-          onChange={handleAllEventsChange}
+          onChange={onChange}
         />
         {!data.allEvents && (
           <>

src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx

@@ -60,7 +60,9 @@ const WebhooksDetailsPage: React.FC<WebhooksDetailsPageProps> = ({
     allEvents: !!maybe(() => webhook.events, []).find(
       event => event.eventType === WebhookEventTypeEnum.ANY_EVENTS
     ),
-    events: maybe(() => webhook.events, []).map(event => event.eventType),
+    events: maybe(() => webhook.events, [])
+      .map(event => event.eventType)
+      .filter(event => event !== WebhookEventTypeEnum.ANY_EVENTS),
     id: maybe(() => webhook.id, null),
     isActive: maybe(() => webhook.isActive, false),
     name: maybe(() => webhook.name, ""),

src/webhooks/views/WebhooksDetails.tsx

@@ -129,7 +129,7 @@ export const WebhooksDetails: React.FC<WebhooksDetailsProps> = ({
                                 input: {
                                   events: data.allEvents
                                     ? [WebhookEventTypeEnum.ANY_EVENTS]
-                                    : data.events.slice(1),
+                                    : data.events,
                                   isActive: data.isActive,
                                   name: data.name,
                                   secretKey: data.secretKey,