Fix webhook events type

schema.graphql

@@ -3196,11 +3196,11 @@ type ProductVariant implements Node {
   name: String!
   product: Product!
   trackInventory: Boolean!
-  quantity: Int!
   quantityAllocated: Int!
   weight: Weight
   privateMeta: [MetaStore]!
   meta: [MetaStore]!
+  quantity: Int!
   stockQuantity: Int!
   priceOverride: Money
   price: Money @deprecated(reason: "DEPRECATED: Will be removed in Saleor 2.10, has been replaced by 'pricing.priceUndiscounted'")
@@ -4315,7 +4315,7 @@ enum WebhookErrorCode {
 }
 
 type WebhookEvent {
-  eventType: String
+  eventType: WebhookEventTypeEnum
 }
 
 enum WebhookEventTypeEnum {

src/types/globalTypes.ts

@@ -662,11 +662,6 @@ export interface SeoInput {
   description?: string | null;
 }
 
-export interface ServiceAccountFilterInput {
-  search?: string | null;
-  isActive?: boolean | null;
-}
-
 export interface ServiceAccountInput {
   name?: string | null;
   isActive?: boolean | null;

src/webhooks/components/WebhookCreatePage/WebhookCreatePage.tsx

@@ -9,6 +9,7 @@ import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import { sectionNames } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
 import { UserError } from "@saleor/types";
+import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
 import React from "react";
 import { useIntl } from "react-intl";
 import { ServiceList_serviceAccounts_edges_node } from "../../types/ServiceList";
@@ -18,12 +19,13 @@ import WebhookStatus from "../WebhookStatus";
 
 export interface FormData {
   id: string;
-  events: string[];
+  events: WebhookEventTypeEnum[];
   isActive: boolean;
   name: string;
   secretKey: string | null;
   targetUrl: string;
   serviceAccount: string;
+  allEvents: boolean;
 }
 
 export interface WebhookCreatePageProps {
@@ -45,6 +47,7 @@ const WebhookCreatePage: React.StatelessComponent<WebhookCreatePageProps> = ({
 }) => {
   const intl = useIntl();
   const initialForm: FormData = {
+    allEvents: false,
     events: [],
     id: null,
     isActive: false,

src/webhooks/components/WebhookEvents/WebhookEvents.tsx

@@ -1,54 +1,48 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import Typography from "@material-ui/core/Typography";
-import makeStyles from "@material-ui/styles/makeStyles";
 import CardTitle from "@saleor/components/CardTitle";
 import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
+import Hr from "@saleor/components/Hr";
 import React from "react";
 import { useIntl } from "react-intl";
 import { WebhookEventTypeEnum } from "../../../types/globalTypes";
-import { FormData } from "../WebhooksDetailsPage";
 
 interface WebhookEventsProps {
-  data: FormData;
+  data: {
+    allEvents: boolean;
+    events: string[];
+  };
   disabled: boolean;
-  onChange: (event: React.ChangeEvent<any>) => void;
+  onChange: (event: React.ChangeEvent<any>, cb?: () => void) => void;
 }
 
-const useStyles = makeStyles(() => ({
-  item: {
-    paddingBottom: 10,
-    paddingTop: 10
-  }
-}));
-
 const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
   data,
   disabled,
   onChange
 }) => {
   const intl = useIntl();
-  const [events, setEvents] = React.useState(data.events);
-
   const eventsEnum = Object.values(WebhookEventTypeEnum);
 
-  const addOrRemove = (array, value) => {
-    const index = array.indexOf(value);
-
-    if (index === -1) {
-      array.push(value);
-    } else {
-      array.splice(index, 1);
-    }
-  };
-
-  console.log(data.events);
-
-  const eventsOnChange = event => {
-    const newData = events;
-    addOrRemove(newData, event.target.name);
-    setEvents(newData);
-    console.log(events.indexOf(event.target.name));
+  const handleAllEventsChange = (event: React.ChangeEvent<any>) =>
+    onChange(event, () =>
+      onChange({
+        target: {
+          name: "events",
+          value: event.target.value ? eventsEnum.map(event => event) : []
+        }
+      } as any)
+    );
+  const handleEventsChange = (event: React.ChangeEvent<any>) => {
+    onChange({
+      target: {
+        name: "events",
+        value: event.target.value
+          ? data.events.concat([event.target.name])
+          : data.events.filter(events => events !== event.target.name)
+      }
+    } as any);
   };
 
   return (
@@ -67,17 +61,33 @@ const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
             description: "webhook events"
           })}
         </Typography>
-        {eventsEnum.map((event, index) => (
-          <div key={index}>
-            <ControlledCheckbox
-              name={event}
-              label={event}
-              checked={events.includes(WebhookEventTypeEnum[event])}
-              onChange={eventsOnChange}
-              disabled={disabled}
-            />
-          </div>
-        ))}
+        <ControlledCheckbox
+          checked={data.allEvents}
+          disabled={disabled}
+          label={intl.formatMessage({
+            defaultMessage: "All events",
+            description: "checkbox label"
+          })}
+          name="allEvents"
+          onChange={handleAllEventsChange}
+        />
+        <Hr />
+        {!data.allEvents &&
+          eventsEnum.map((event, index) => {
+            if (index !== 0) {
+              return (
+                <div key={index}>
+                  <ControlledCheckbox
+                    checked={data.events.includes(event)}
+                    disabled={disabled}
+                    label={event.replace(/\./, "")}
+                    name={event}
+                    onChange={handleEventsChange}
+                  />
+                </div>
+              );
+            }
+          })}
       </CardContent>
     </Card>
   );

src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx

@@ -20,12 +20,13 @@ import WebhookStatus from "../WebhookStatus";
 
 export interface FormData {
   id: string;
-  events: string[];
+  events: WebhookEventTypeEnum[];
   isActive: boolean;
   name: string;
   secretKey: string | null;
   targetUrl: string;
   serviceAccount: string;
+  allEvents: boolean;
 }
 
 export interface WebhooksDetailsPageProps {
@@ -53,6 +54,16 @@ const WebhooksDetailsPage: React.StatelessComponent<
 }) => {
   const intl = useIntl();
   const initialForm: FormData = {
+    allEvents: maybe(
+      () =>
+        Object.values(WebhookEventTypeEnum).filter(
+          perm =>
+            maybe(() => webhook.events, []).filter(
+              event => event.eventType === perm
+            ).length === 0
+        ).length === 0,
+      false
+    ),
     events: maybe(() => webhook.events, []).map(event => event.eventType),
     id: maybe(() => webhook.id, null),
     isActive: maybe(() => webhook.isActive, false),
@@ -93,8 +104,8 @@ const WebhooksDetailsPage: React.StatelessComponent<
               <div>
                 <WebhookEvents
                   data={data}
-                  disabled={disabled}
                   onChange={change}
+                  disabled={disabled}
                 />
                 <FormSpacer />
                 <WebhookStatus

src/webhooks/components/WebhooksList/WebhooksList.tsx

@@ -12,8 +12,8 @@ import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
 import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
-import EditIcon from "@material-ui/icons/Edit";
 import DeleteIcon from "@material-ui/icons/Delete";
+import EditIcon from "@material-ui/icons/Edit";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -68,24 +68,26 @@ const WebhooksList = withStyles(styles, { name: "PluginList" })(
       <Card>
         <Table>
           <TableHead>
-            <TableCell className={classes.colName} padding="dense">
-              {intl.formatMessage({
-                defaultMessage: "Name",
-                description: "webhook name"
-              })}
-            </TableCell>
-            <TableCell className={classes.colActive} padding="dense">
-              {intl.formatMessage({
-                defaultMessage: "Service Account",
-                description: "webhook service account"
-              })}
-            </TableCell>
-            <TableCell className={classes.colAction} padding="dense">
-              {intl.formatMessage({
-                defaultMessage: "Action",
-                description: "user action bar"
-              })}
-            </TableCell>
+            <TableRow>
+              <TableCell className={classes.colName} padding="dense">
+                {intl.formatMessage({
+                  defaultMessage: "Name",
+                  description: "webhook name"
+                })}
+              </TableCell>
+              <TableCell className={classes.colActive} padding="dense">
+                {intl.formatMessage({
+                  defaultMessage: "Service Account",
+                  description: "webhook service account"
+                })}
+              </TableCell>
+              <TableCell className={classes.colAction} padding="dense">
+                {intl.formatMessage({
+                  defaultMessage: "Action",
+                  description: "user action bar"
+                })}
+              </TableCell>
+            </TableRow>
           </TableHead>
           <TableFooter>
             <TableRow>

src/webhooks/fixtures.ts

@@ -1,57 +1,47 @@
-import { ConfigurationTypeFieldEnum } from "@saleor/types/globalTypes";
-import { Plugin_plugin } from "./types/Plugin";
-import { Plugins_plugins_edges_node } from "./types/Plugins";
+import { Webhook_webhook } from "./types/Webhook";
+import { Webhooks_webhooks_edges_node } from "./types/Webhooks";
 
-export const pluginList: Plugins_plugins_edges_node[] = [
+export const webhookList: Webhooks_webhooks_edges_node[] = [
   {
-    __typename: "Plugin",
-    active: true,
-    description:
-      "Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.",
+    __typename: "Webhook",
+    events: [],
     id: "Jzx123sEt==",
-    name: "Avalara"
+    isActive: true,
+    name: "Webhook Test",
+    secretKey: "dsdasdasd_asdas",
+    serviceAccount: {
+      __typename: "ServiceAccount",
+      id: "Jzx123sEt==",
+      name: "Test Account"
+    },
+    targetUrl: "http://www.getsaleor.com"
   },
   {
-    __typename: "Plugin",
-    active: false,
-    description:
-      "Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.",
+    __typename: "Webhook",
+    events: [],
     id: "Jzx123sEt==",
-    name: "VatLayer"
+    isActive: true,
+    name: "Webhook Test 2",
+    secretKey: "zxczx_asdas",
+    serviceAccount: {
+      __typename: "ServiceAccount",
+      id: "Jzx1ss23sEt==",
+      name: "Test Account 2"
+    },
+    targetUrl: "http://www.getsaleor.com"
   }
 ];
-export const plugin: Plugin_plugin = {
-  __typename: "Plugin",
-  active: true,
-  configuration: [
-    {
-      __typename: "ConfigurationItem",
-      helpText: "Provide user or account details",
-      label: "Username or account",
-      name: "Username or account",
-      type: ConfigurationTypeFieldEnum.STRING,
-      value: ""
-    },
-    {
-      __typename: "ConfigurationItem",
-      helpText: "Provide password or license details",
-      label: "Password or license",
-      name: "Password or license",
-      type: ConfigurationTypeFieldEnum.STRING,
-      value: ""
-    },
-    {
-      __typename: "ConfigurationItem",
-      helpText: "Determines if Saleor should use Avatax sandbox API.",
-      label: "Use sandbox",
-      name: "Use sandbox",
-      type: ConfigurationTypeFieldEnum.BOOLEAN,
-      value: "true"
-    }
-  ],
-  description:
-    "Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.",
-
-  id: "UGx1Z2luQ29uZmlndXJhdGlvbjoy",
-  name: "Username or account"
+export const webhook: Webhook_webhook = {
+  __typename: "Webhook",
+  events: [],
+  id: "Jzx123sEt==",
+  isActive: true,
+  name: "Webhook Test 2",
+  secretKey: "zxczx_asdas",
+  serviceAccount: {
+    __typename: "ServiceAccount",
+    id: "Jzx1ss23sEt==",
+    name: "Test Account 2"
+  },
+  targetUrl: "http://www.getsaleor.com"
 };

src/webhooks/types/Webhook.ts

@@ -2,13 +2,15 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
+import { WebhookEventTypeEnum } from "./../../types/globalTypes";
+
 // ====================================================
 // GraphQL query operation: Webhook
 // ====================================================
 
 export interface Webhook_webhook_events {
   __typename: "WebhookEvent";
-  eventType: string | null;
+  eventType: WebhookEventTypeEnum | null;
 }
 
 export interface Webhook_webhook_serviceAccount {

src/webhooks/types/WebhookCreate.ts

@@ -2,7 +2,7 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { WebhookCreateInput } from "./../../types/globalTypes";
+import { WebhookCreateInput, WebhookEventTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: WebhookCreate
@@ -16,7 +16,7 @@ export interface WebhookCreate_webhookCreate_errors {
 
 export interface WebhookCreate_webhookCreate_webhook_events {
   __typename: "WebhookEvent";
-  eventType: string | null;
+  eventType: WebhookEventTypeEnum | null;
 }
 
 export interface WebhookCreate_webhookCreate_webhook_serviceAccount {

src/webhooks/types/WebhookFragment.ts

@@ -2,13 +2,15 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
+import { WebhookEventTypeEnum } from "./../../types/globalTypes";
+
 // ====================================================
 // GraphQL fragment: WebhookFragment
 // ====================================================
 
 export interface WebhookFragment_events {
   __typename: "WebhookEvent";
-  eventType: string | null;
+  eventType: WebhookEventTypeEnum | null;
 }
 
 export interface WebhookFragment_serviceAccount {

src/webhooks/types/WebhookUpdate.ts

@@ -2,7 +2,7 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { WebhookUpdateInput } from "./../../types/globalTypes";
+import { WebhookUpdateInput, WebhookEventTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: WebhookUpdate
@@ -16,7 +16,7 @@ export interface WebhookUpdate_webhookUpdate_errors {
 
 export interface WebhookUpdate_webhookUpdate_webhook_events {
   __typename: "WebhookEvent";
-  eventType: string | null;
+  eventType: WebhookEventTypeEnum | null;
 }
 
 export interface WebhookUpdate_webhookUpdate_webhook_serviceAccount {

src/webhooks/types/Webhooks.ts

@@ -2,13 +2,15 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
+import { WebhookEventTypeEnum } from "./../../types/globalTypes";
+
 // ====================================================
 // GraphQL query operation: Webhooks
 // ====================================================
 
 export interface Webhooks_webhooks_edges_node_events {
   __typename: "WebhookEvent";
-  eventType: string | null;
+  eventType: WebhookEventTypeEnum | null;
 }
 
 export interface Webhooks_webhooks_edges_node_serviceAccount {

src/webhooks/types/WebhooksDetailsFragment.ts

@@ -2,13 +2,15 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
+import { WebhookEventTypeEnum } from "./../../types/globalTypes";
+
 // ====================================================
 // GraphQL fragment: WebhooksDetailsFragment
 // ====================================================
 
 export interface WebhooksDetailsFragment_events {
   __typename: "WebhookEvent";
-  eventType: string | null;
+  eventType: WebhookEventTypeEnum | null;
 }
 
 export interface WebhooksDetailsFragment_serviceAccount {

src/webhooks/views/WebhooksCreate.tsx

@@ -2,8 +2,8 @@ import { WindowTitle } from "@saleor/components/WindowTitle";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { commonMessages } from "@saleor/intl";
-import { WebhookCreate as WebhookCreateData } from "@saleor/webhooks/types/WebhookCreate";
 import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
+import { WebhookCreate as WebhookCreateData } from "@saleor/webhooks/types/WebhookCreate";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -47,7 +47,7 @@ export const WebhooksCreate: React.StatelessComponent<
           WebhookCreate({
             variables: {
               input: {
-                events: [WebhookEventTypeEnum.ALL_EVENTS],
+                events: [WebhookEventTypeEnum.ORDER_CREATED],
                 isActive: data.isActive,
                 name: data.name,
                 secretKey: data.secretKey,