Update components

src/index.tsx

@@ -48,8 +48,8 @@ import SiteSettingsSection from "./siteSettings";
 import StaffSection from "./staff";
 import TaxesSection from "./taxes";
 import TranslationsSection from "./translations";
-import WebhooksSection from "./webhooks";
 import { PermissionEnum } from "./types/globalTypes";
+import WebhooksSection from "./webhooks";
 
 interface ResponseError extends ErrorResponse {
   networkError?: Error & {

src/webhooks/components/WebhookCreatePage/WebhookCreatePage.tsx

@@ -0,0 +1,116 @@
+import AppHeader from "@saleor/components/AppHeader";
+import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
+import Container from "@saleor/components/Container";
+import Form from "@saleor/components/Form";
+import FormSpacer from "@saleor/components/FormSpacer";
+import Grid from "@saleor/components/Grid";
+import PageHeader from "@saleor/components/PageHeader";
+import SaveButtonBar from "@saleor/components/SaveButtonBar";
+import { sectionNames } from "@saleor/intl";
+import { maybe } from "@saleor/misc";
+import { UserError } from "@saleor/types";
+import React from "react";
+import { useIntl } from "react-intl";
+import { ServiceList_serviceAccounts_edges_node } from "../../types/ServiceList";
+import { Webhook_webhook, Webhook_webhook_events } from "../../types/Webhook";
+import WebhookEvents from "../WebhookEvents";
+import WebhookInfo from "../WebhookInfo";
+import WebhookStatus from "../WebhookStatus";
+
+export interface FormData {
+  id: string;
+  events: Webhook_webhook_events[];
+  isActive: boolean;
+  name: string;
+  secretKey: string | null;
+  targetUrl: string;
+  serviceAccount: string;
+}
+
+export interface WebhookCreatePageProps {
+  disabled: boolean;
+  errors: UserError[];
+  webhook: Webhook_webhook;
+  services: ServiceList_serviceAccounts_edges_node[];
+  saveButtonBarState: ConfirmButtonTransitionState;
+  onBack: () => void;
+  onSubmit: (data: FormData) => void;
+}
+
+const WebhookCreatePage: React.StatelessComponent<WebhookCreatePageProps> = ({
+  disabled,
+  errors,
+  webhook,
+  saveButtonBarState,
+  services,
+  onBack,
+  onSubmit
+}) => {
+  const intl = useIntl();
+  const initialForm: FormData = {
+    events: maybe(() => webhook.events, []),
+    id: maybe(() => webhook.id, null),
+    isActive: maybe(() => webhook.isActive, false),
+    name: maybe(() => webhook.name, null),
+    secretKey: maybe(() => webhook.secretKey, ""),
+    serviceAccount: maybe(() => webhook.serviceAccount, ""),
+    targetUrl: maybe(() => webhook.targetUrl, "")
+  };
+
+  return (
+    <Form errors={errors} initial={initialForm} onSubmit={onSubmit}>
+      {({ data, errors, hasChanged, submit, change }) => {
+        return (
+          <Container>
+            <AppHeader onBack={onBack}>
+              {intl.formatMessage(sectionNames.plugins)}
+            </AppHeader>
+            <PageHeader
+              title={intl.formatMessage(
+                {
+                  defaultMessage: "Create Webhook",
+                  description: "header"
+                },
+                {
+                  pluginName: maybe(() => webhook.name, "...")
+                }
+              )}
+            />
+            <Grid>
+              <div>
+                <WebhookInfo
+                  data={data}
+                  disabled={disabled}
+                  services={maybe(() => services, [])}
+                  errors={errors}
+                  onChange={change}
+                />
+              </div>
+              <div>
+                <WebhookEvents
+                  data={data}
+                  disabled={disabled}
+                  onChange={change}
+                />
+                <FormSpacer />
+                <WebhookStatus
+                  data={data}
+                  disabled={disabled}
+                  onChange={change}
+                />
+              </div>
+            </Grid>
+            <SaveButtonBar
+              disabled={disabled || !hasChanged}
+              state={saveButtonBarState}
+              onCancel={onBack}
+              onSave={submit}
+            />
+          </Container>
+        );
+      }}
+    </Form>
+  );
+};
+WebhookCreatePage.displayName = "WebhookCreatePage";
+export default WebhookCreatePage;

src/webhooks/components/WebhookCreatePage/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./WebhookCreatePage";
+export * from "./WebhookCreatePage";

src/webhooks/components/WebhookEvents/WebhookEvents.tsx

@@ -1,28 +1,18 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import TextField from "@material-ui/core/TextField";
+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 { FormErrors } from "@saleor/types";
-import { ConfigurationTypeFieldEnum } from "@saleor/types/globalTypes";
 import React from "react";
 import { useIntl } from "react-intl";
-
+import { WebhookEventTypeEnum } from "../../../types/globalTypes";
-import { FormData } from "../WebhookDetailsPage";
+import { FormData } from "../WebhooksDetailsPage";
 
 interface WebhookEventsProps {
   data: FormData;
-  errors: FormErrors<"name" | "configuration">;
   disabled: boolean;
   onChange: (event: React.ChangeEvent<any>) => void;
-  fields: Array<{
-    name: string;
-    type: ConfigurationTypeFieldEnum | null;
-    value: string;
-    helpText: string | null;
-    label: string | null;
-  }>;
 }
 
 const useStyles = makeStyles(() => ({
@@ -35,12 +25,29 @@ const useStyles = makeStyles(() => ({
 const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
   data,
   disabled,
-  errors,
+  onChange
-  onChange,
-  fields
 }) => {
-  const classes = useStyles({});
   const intl = useIntl();
+  const [events, setEvents] = React.useState();
+
+  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);
+    }
+  };
+
+  const eventsOnChange = event => {
+    const newData = [events];
+    addOrRemove(newData, event.name);
+    setEvents(newData);
+  };
+
   return (
     <Card>
       <CardTitle
@@ -49,7 +56,26 @@ const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
           description: "section header"
         })}
       />
-      <CardContent></CardContent>
+      <CardContent>
+        <Typography>
+          {intl.formatMessage({
+            defaultMessage:
+              "Expand or restrict webhooks permissions to register certain events in Saleor system.",
+            description: "webhook events"
+          })}
+        </Typography>
+        {eventsEnum.map((event, index) => (
+          <div key={index}>
+            <ControlledCheckbox
+              name={event}
+              label={event}
+              checked={data.events[event]}
+              onChange={eventsOnChange}
+              disabled={disabled}
+            />
+          </div>
+        ))}
+      </CardContent>
     </Card>
   );
 };

src/webhooks/components/WebhookInfo/WebhookInfo.tsx

@@ -1,21 +1,25 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
+import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import makeStyles from "@material-ui/styles/makeStyles";
 import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
-import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
 import FormSpacer from "@saleor/components/FormSpacer";
 import Hr from "@saleor/components/Hr";
-import { commonMessages } from "@saleor/intl";
+import SingleSelectField from "@saleor/components/SingleSelectField";
+import { FormErrors } from "@saleor/types";
 import { FormData } from "../WebhooksDetailsPage";
 
+import { ServiceList_serviceAccounts_edges_node } from "../../types/ServiceList";
+
 interface WebhookInfoProps {
   data: FormData;
-  description: string;
+  disabled: boolean;
-  name: string;
+  services: ServiceList_serviceAccounts_edges_node[];
+  errors: FormErrors<"name" | "targetUrl" | "secretKey">;
   onChange: (event: React.ChangeEvent<any>) => void;
 }
 
@@ -24,28 +28,107 @@ const useStyles = makeStyles(() => ({
     paddingTop: 20
   },
   title: {
-    fontSize: 14,
+    fontSize: 16,
-    paddingTop: 10
+    lineHeight: 1.9,
+    paddingBottom: 10
   }
 }));
 
 const WebhookInfo: React.StatelessComponent<WebhookInfoProps> = ({
   data,
-  description,
+  disabled,
-  name,
+  services,
+  errors,
   onChange
 }) => {
   const classes = useStyles({});
   const intl = useIntl();
+
   return (
     <Card>
       <CardTitle
         title={intl.formatMessage({
-          defaultMessage: "Plugin Information and Status",
+          defaultMessage: "Webhook Information",
           description: "section header"
         })}
       />
-      <CardContent></CardContent>
+      <CardContent>
+        <Typography className={classes.title}>
+          {intl.formatMessage({
+            defaultMessage: "General Information",
+            description: "webhook general information"
+          })}
+        </Typography>
+        <TextField
+          disabled={disabled}
+          error={!!errors.name}
+          helperText={errors.name}
+          label={intl.formatMessage({
+            defaultMessage: "Webhook Name",
+            description: "webhook"
+          })}
+          fullWidth
+          name="name"
+          value={data.name}
+          onChange={onChange}
+        />
+        <FormSpacer />
+        <Hr />
+        <FormSpacer />
+        <Typography className={classes.title}>
+          {intl.formatMessage({
+            defaultMessage: "Webhook specific information",
+            description: "webhook specific information"
+          })}
+        </Typography>
+        <SingleSelectField
+          choices={services.map(service => ({
+            label: service.name,
+            value: service.id
+          }))}
+          name="serviceAccount"
+          value={data.serviceAccount}
+          label={intl.formatMessage({
+            defaultMessage: "Assign to Service Account"
+          })}
+          onChange={onChange}
+        />
+        <FormSpacer />
+        <TextField
+          disabled={disabled}
+          error={!!errors.targetUrl}
+          helperText={intl.formatMessage({
+            defaultMessage: "This URL will recieve webhook POST requests",
+            description: "webhook target url help text"
+          })}
+          label={intl.formatMessage({
+            defaultMessage: "Target URL",
+            description: "webhook"
+          })}
+          fullWidth
+          name="targetUrl"
+          value={data.targetUrl}
+          onChange={onChange}
+        />
+        <FormSpacer />
+        <TextField
+          disabled={disabled}
+          error={!!errors.secretKey}
+          helperText={intl.formatMessage({
+            defaultMessage:
+              "secret key is used to create a hash signature with each payload. *optional field",
+            description: "webhook secret key help text"
+          })}
+          label={intl.formatMessage({
+            defaultMessage: "Secrect Key",
+            description: "webhook"
+          })}
+          fullWidth
+          name="secretKey"
+          value={data.secretKey}
+          onChange={onChange}
+        />
+      </CardContent>
     </Card>
   );
 };

src/webhooks/components/WebhookStatus/WebhookStatus.tsx

@@ -1,11 +1,9 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import TextField from "@material-ui/core/TextField";
+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 { FormErrors } from "@saleor/types";
-import { ConfigurationTypeFieldEnum } from "@saleor/types/globalTypes";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -13,33 +11,15 @@ import { FormData } from "../WebhooksDetailsPage";
 
 interface WebhookStatusProps {
   data: FormData;
-  errors: FormErrors<"name" | "configuration">;
   disabled: boolean;
   onChange: (event: React.ChangeEvent<any>) => void;
-  fields: Array<{
-    name: string;
-    type: ConfigurationTypeFieldEnum | null;
-    value: string;
-    helpText: string | null;
-    label: string | null;
-  }>;
 }
 
-const useStyles = makeStyles(() => ({
-  item: {
-    paddingBottom: 10,
-    paddingTop: 10
-  }
-}));
-
 const WebhookStatus: React.StatelessComponent<WebhookStatusProps> = ({
   data,
   disabled,
-  errors,
+  onChange
-  onChange,
-  fields
 }) => {
-  const classes = useStyles({});
   const intl = useIntl();
   return (
     <Card>
@@ -49,7 +29,25 @@ const WebhookStatus: React.StatelessComponent<WebhookStatusProps> = ({
           description: "section header"
         })}
       />
-      <CardContent></CardContent>
+      <CardContent>
+        <Typography>
+          {intl.formatMessage({
+            defaultMessage:
+              "If you want to disable this webhook please uncheck the box below.",
+            description: "webhook active"
+          })}
+        </Typography>
+        <ControlledCheckbox
+          name={"isActive" as keyof FormData}
+          label={intl.formatMessage({
+            defaultMessage: "Webhook is active",
+            description: "webhooks active"
+          })}
+          checked={data.isActive}
+          onChange={onChange}
+          disabled={disabled}
+        />
+      </CardContent>
     </Card>
   );
 };

src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx

@@ -1,40 +1,38 @@
-import Typography from "@material-ui/core/Typography";
 import AppHeader from "@saleor/components/AppHeader";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Container from "@saleor/components/Container";
 import Form from "@saleor/components/Form";
+import FormSpacer from "@saleor/components/FormSpacer";
 import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import { sectionNames } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
 import { UserError } from "@saleor/types";
-import { ConfigurationItemInput } from "@saleor/types/globalTypes";
+import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
 import React from "react";
 import { useIntl } from "react-intl";
-
+import { ServiceList_serviceAccounts_edges_node } from "../../types/ServiceList";
-import {
+import { Webhook_webhook, Webhook_webhook_events } from "../../types/Webhook";
-  Webhook_webhook,
-  Webhook_webhook_events,
-  Webhook_webhook_serviceAccount
-} from "../../types/Webhook";
 import WebhookEvents from "../WebhookEvents";
 import WebhookInfo from "../WebhookInfo";
 import WebhookStatus from "../WebhookStatus";
 
 export interface FormData {
   id: string;
-  events: Webhook_webhook_events;
+  events: Webhook_webhook_events[];
   isActive: boolean;
+  name: string;
   secretKey: string | null;
   targetUrl: string;
-  serviceAccount: Webhook_webhook_serviceAccount;
+  serviceAccount: string;
 }
 
 export interface WebhooksDetailsPageProps {
   disabled: boolean;
   errors: UserError[];
   webhook: Webhook_webhook;
+  services: ServiceList_serviceAccounts_edges_node[];
   saveButtonBarState: ConfirmButtonTransitionState;
   onBack: () => void;
   onSubmit: (data: FormData) => void;
@@ -42,17 +40,25 @@ export interface WebhooksDetailsPageProps {
 
 const WebhooksDetailsPage: React.StatelessComponent<
   WebhooksDetailsPageProps
-> = ({ disabled, errors, webhook, saveButtonBarState, onBack, onSubmit }) => {
+> = ({
+  disabled,
+  errors,
+  webhook,
+  saveButtonBarState,
+  services,
+  onBack,
+  onSubmit
+}) => {
   const intl = useIntl();
   const initialForm: FormData = {
     events: maybe(() => webhook.events, []),
     id: maybe(() => webhook.id, null),
     isActive: maybe(() => webhook.isActive, false),
+    name: maybe(() => webhook.name, ""),
     secretKey: maybe(() => webhook.secretKey, ""),
-    serviceAccount: maybe(() => webhook.serviceAccount, []),
+    serviceAccount: maybe(() => webhook.serviceAccount.id, ""),
     targetUrl: maybe(() => webhook.targetUrl, "")
   };
-
   return (
     <Form errors={errors} initial={initialForm} onSubmit={onSubmit}>
       {({ data, errors, hasChanged, submit, change }) => {
@@ -68,15 +74,16 @@ const WebhooksDetailsPage: React.StatelessComponent<
                   description: "header"
                 },
                 {
-                  pluginName: maybe(() => plugin.name, "...")
+                  pluginName: maybe(() => webhook.name, "...")
                 }
               )}
             />
-            <Grid variant="inverted">
+            <Grid>
               <div>
                 <WebhookInfo
                   data={data}
-                  description={maybe(() => plugin.description, "")}
+                  disabled={disabled}
+                  services={maybe(() => services, [])}
                   errors={errors}
                   onChange={change}
                 />
@@ -84,14 +91,13 @@ const WebhooksDetailsPage: React.StatelessComponent<
               <div>
                 <WebhookEvents
                   data={data}
-                  errors={errors}
+                  disabled={disabled}
-                  name={maybe(() => plugin.name, "")}
                   onChange={change}
                 />
+                <FormSpacer />
                 <WebhookStatus
                   data={data}
-                  errors={errors}
+                  disabled={disabled}
-                  name={maybe(() => plugin.name, "")}
                   onChange={change}
                 />
               </div>

src/webhooks/components/WebhooksList/WebhooksList.tsx

@@ -16,9 +16,7 @@ import React from "react";
 import { useIntl } from "react-intl";
 
 import Skeleton from "@saleor/components/Skeleton";
-import StatusLabel from "@saleor/components/StatusLabel";
 import TablePagination from "@saleor/components/TablePagination";
-import { translateBoolean } from "@saleor/intl";
 import { maybe, renderCollection } from "@saleor/misc";
 import { ListProps } from "@saleor/types";
 import { Webhooks_webhooks_edges_node } from "../../types/Webhooks";
@@ -107,14 +105,36 @@ const WebhooksList = withStyles(styles, { name: "PluginList" })(
               webhooks,
               webhook => {
                 return (
-                  <div></div>
+                  <TableRow
+                    hover={!!webhook}
+                    className={!!webhook ? classes.link : undefined}
+                    onClick={webhook ? onRowClick(webhook.id) : undefined}
+                    key={webhook ? webhook.id : "skeleton"}
+                  >
+                    <TableCell className={classes.colName}>
+                      {maybe<React.ReactNode>(() => webhook.name, <Skeleton />)}
+                    </TableCell>
+                    <TableCell className={classes.colActive}>
+                      {maybe<React.ReactNode>(
+                        () => webhook.serviceAccount.name,
+                        <Skeleton />
+                      )}
+                    </TableCell>
+                    <TableCell className={classes.colAction}>
+                      <div
+                        onClick={webhook ? onRowClick(webhook.id) : undefined}
+                      >
+                        <EditIcon />
+                      </div>
+                    </TableCell>
+                  </TableRow>
                 );
               },
               () => (
                 <TableRow>
                   <TableCell colSpan={numberOfColumns}>
                     {intl.formatMessage({
-                      defaultMessage: "No plugins found"
+                      defaultMessage: "No webhooks found"
                     })}
                   </TableCell>
                 </TableRow>

src/webhooks/components/WebhooksListPage/WebhooksListPage.tsx

@@ -1,5 +1,6 @@
+import Button from "@material-ui/core/Button";
 import React from "react";
-import { useIntl } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import AppHeader from "@saleor/components/AppHeader";
 import Container from "@saleor/components/Container";
@@ -17,6 +18,7 @@ export interface WebhooksListPageProps extends PageListProps {
 const WebhooksListPage: React.StatelessComponent<WebhooksListPageProps> = ({
   disabled,
   settings,
+  onAdd,
   onBack,
   onNextPage,
   onPreviousPage,
@@ -31,7 +33,14 @@ const WebhooksListPage: React.StatelessComponent<WebhooksListPageProps> = ({
       <AppHeader onBack={onBack}>
         {intl.formatMessage(sectionNames.configuration)}
       </AppHeader>
-      <PageHeader title={intl.formatMessage(sectionNames.webhooks)} />
+      <PageHeader title={intl.formatMessage(sectionNames.webhooks)}>
+        <Button onClick={onAdd} variant="contained" color="primary">
+          <FormattedMessage
+            defaultMessage="Create webhook"
+            description="button"
+          />
+        </Button>
+      </PageHeader>
       <WebhooksList
         disabled={disabled}
         settings={settings}

src/webhooks/index.tsx

@@ -6,10 +6,12 @@ import { Route, RouteComponentProps, Switch } from "react-router-dom";
 import { sectionNames } from "@saleor/intl";
 import { WindowTitle } from "../components/WindowTitle";
 import {
+  webhooksAddUrl,
   webhooksListPath,
   WebhooksListUrlQueryParams,
   webhooksPath
 } from "./urls";
+import WebhookCreate from "./views/WebhooksCreate";
 import WebhooksDetails from "./views/WebhooksDetails";
 import WebhooksList from "./views/WebhooksList";
 
@@ -21,17 +23,14 @@ const WebhookList: React.StatelessComponent<RouteComponentProps<any>> = ({
   return <WebhooksList params={params} />;
 };
 
-const PageDetails: React.StatelessComponent<RouteComponentProps<any>> = ({
+const WebhookDetails: React.StatelessComponent<RouteComponentProps<any>> = ({
   match
 }) => {
   const qs = parseQs(location.search.substr(1));
   const params: WebhooksListUrlQueryParams = qs;
 
   return (
-    <WebhooksDetails
+    <WebhooksDetails id={decodeURIComponent(match.params.id)} params={params} />
-      id={decodeURIComponent(match.params.id)}
-      params={params}
-    />
   );
 };
 
@@ -42,7 +41,8 @@ const Component = () => {
       <WindowTitle title={intl.formatMessage(sectionNames.plugins)} />
       <Switch>
         <Route exact path={webhooksListPath} component={WebhookList} />
-        <Route path={webhooksPath(":id")} component={WebhooksDetails} />
+        <Route exact path={webhooksAddUrl} component={WebhookCreate} />
+        <Route path={webhooksPath(":id")} component={WebhookDetails} />
       </Switch>
     </>
   );

src/webhooks/queries.ts

@@ -1,9 +1,18 @@
 import gql from "graphql-tag";
 
 import { TypedQuery } from "../queries";
+import { ServiceList, ServiceListVariables } from "./types/ServiceList";
 import { Webhook, WebhookVariables } from "./types/Webhook";
 import { Webhooks, WebhooksVariables } from "./types/Webhooks";
 
+export const serviceFragment = gql`
+  fragment ServiceFragment on ServiceAccount {
+    id
+    name
+    isActive
+  }
+`;
+
 export const webhooksFragment = gql`
   fragment WebhookFragment on Webhook {
     id
@@ -50,6 +59,34 @@ export const TypedWebhooksListQuery = TypedQuery<Webhooks, WebhooksVariables>(
   webhooksList
 );
 
+const serviceList = gql`
+  ${serviceFragment}
+  query ServiceList($first: Int, $after: String, $last: Int, $before: String) {
+    serviceAccounts(
+      first: $first
+      after: $after
+      before: $before
+      last: $last
+    ) {
+      edges {
+        node {
+          ...ServiceFragment
+        }
+      }
+      pageInfo {
+        hasPreviousPage
+        hasNextPage
+        startCursor
+        endCursor
+      }
+    }
+  }
+`;
+export const TypedServiceListQuery = TypedQuery<
+  ServiceList,
+  ServiceListVariables
+>(serviceList);
+
 const webhooksDetails = gql`
   ${webhooksFragment}
   query Webhook($id: ID!) {

src/webhooks/types/ServiceFragment.ts

@@ -0,0 +1,14 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+// ====================================================
+// GraphQL fragment: ServiceFragment
+// ====================================================
+
+export interface ServiceFragment {
+  __typename: "ServiceAccount";
+  id: string;
+  name: string | null;
+  isActive: boolean | null;
+}

src/webhooks/types/ServiceList.ts

@@ -0,0 +1,47 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+import { ServiceAccountFilterInput } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL query operation: ServiceList
+// ====================================================
+
+export interface ServiceList_serviceAccounts_edges_node {
+  __typename: "ServiceAccount";
+  id: string;
+  name: string | null;
+  isActive: boolean | null;
+}
+
+export interface ServiceList_serviceAccounts_edges {
+  __typename: "ServiceAccountCountableEdge";
+  node: ServiceList_serviceAccounts_edges_node;
+}
+
+export interface ServiceList_serviceAccounts_pageInfo {
+  __typename: "PageInfo";
+  hasPreviousPage: boolean;
+  hasNextPage: boolean;
+  startCursor: string | null;
+  endCursor: string | null;
+}
+
+export interface ServiceList_serviceAccounts {
+  __typename: "ServiceAccountCountableConnection";
+  edges: ServiceList_serviceAccounts_edges[];
+  pageInfo: ServiceList_serviceAccounts_pageInfo;
+}
+
+export interface ServiceList {
+  serviceAccounts: ServiceList_serviceAccounts | null;
+}
+
+export interface ServiceListVariables {
+  first?: number | null;
+  after?: string | null;
+  last?: number | null;
+  before?: string | null;
+  filter?: ServiceAccountFilterInput | null;
+}

src/webhooks/urls.ts

@@ -8,9 +8,12 @@ export const webhooksSection = "/webhooks/";
 export const webhooksListPath = webhooksSection;
 export type WebhooksListUrlQueryParams = Pagination & SingleAction;
 export const webhooksListUrl = (params?: WebhooksListUrlQueryParams) =>
-webhooksListPath + "?" + stringifyQs(params);
+  webhooksListPath + "?" + stringifyQs(params);
 
 export const webhooksPath = (id: string) => urlJoin(webhooksSection, id);
 export type WebhooksUrlQueryParams = SingleAction;
 export const webhooksUrl = (id: string, params?: WebhooksUrlQueryParams) =>
   webhooksPath(encodeURIComponent(id)) + "?" + stringifyQs(params);
+
+export const webhooksAddPath = urlJoin(webhooksSection, "add");
+export const webhooksAddUrl = webhooksAddPath;

src/webhooks/views/WebhooksCreate.tsx

@@ -0,0 +1,103 @@
+import { WindowTitle } from "@saleor/components/WindowTitle";
+import useNavigator from "@saleor/hooks/useNavigator";
+import useNotifier from "@saleor/hooks/useNotifier";
+import useShop from "@saleor/hooks/useShop";
+import { commonMessages } from "@saleor/intl";
+import { WebhookCreate as WebhookCreateData } from "@saleor/webhooks/types/WebhookCreate";
+import React from "react";
+import { useIntl } from "react-intl";
+
+import { getMutationState, maybe } from "../../misc";
+import WebhookCreatePage, { FormData } from "../components/WebhookCreatePage";
+import { TypedWebhookCreate } from "../mutations";
+import { TypedServiceListQuery } from "../queries";
+import {
+  webhooksListUrl,
+  WebhooksListUrlQueryParams,
+  webhooksUrl
+} from "../urls";
+
+export interface WebhooksCreateProps {
+  id: string;
+  params: WebhooksListUrlQueryParams;
+}
+
+export const WebhooksCreate: React.StatelessComponent<
+  WebhooksCreateProps
+> = () => {
+  const navigate = useNavigator();
+  const notify = useNotifier();
+  const intl = useIntl();
+  const shop = useShop();
+
+  const onSubmit = (data: WebhookCreateData) => {
+    if (data.webhookCreate.errors.length === 0) {
+      notify({
+        text: intl.formatMessage(commonMessages.savedChanges)
+      });
+      navigate(webhooksUrl(data.webhookCreate.webhook.id));
+    }
+  };
+
+  const handleBack = () => navigate(webhooksListUrl());
+
+  return (
+    <TypedWebhookCreate onCompleted={onSubmit}>
+      {(WebhookCreate, webhookCreateOpts) => {
+        const handleSubmit = (data: FormData) =>
+          WebhookCreate({
+            variables: {
+              input: {
+                events: data.events,
+                isActive: data.isActive,
+                name: data.name,
+                secretKey: data.secretKey,
+                serviceAccount: data.serviceAccount,
+                targetUrl: data.targetUrl
+              }
+            }
+          });
+
+        const formTransitionState = getMutationState(
+          webhookCreateOpts.called,
+          webhookCreateOpts.loading,
+          maybe(() => webhookCreateOpts.data.webhookCreate.errors)
+        );
+
+        return (
+          <TypedServiceListQuery displayLoader variables={{ first: 99 }}>
+            {({ data, loading }) => {
+              return (
+                <>
+                  <WindowTitle
+                    title={intl.formatMessage({
+                      defaultMessage: "Create Webhook",
+                      description: "window title"
+                    })}
+                  />
+                  <WebhookCreatePage
+                    disabled={false}
+                    errors={maybe(
+                      () => webhookCreateOpts.data.webhookCreate.errors,
+                      []
+                    )}
+                    services={maybe(() =>
+                      data.serviceAccounts.edges.map(edge => edge.node)
+                    )}
+                    loading={loading}
+                    onBack={handleBack}
+                    onSubmit={handleSubmit}
+                    permissions={maybe(() => shop.permissions)}
+                    saveButtonBarState={formTransitionState}
+                  />
+                </>
+              );
+            }}
+          </TypedServiceListQuery>
+        );
+      }}
+    </TypedWebhookCreate>
+  );
+};
+WebhooksCreate.displayName = "WebhooksCreate";
+export default WebhooksCreate;

src/webhooks/views/WebhooksDetails.tsx

@@ -7,7 +7,7 @@ import { useIntl } from "react-intl";
 import { getMutationState, maybe } from "../../misc";
 import WebhooksDetailsPage from "../components/WebhooksDetailsPage";
 import { TypedWebhookUpdate } from "../mutations";
-import { TypedWebhooksDetailsQuery } from "../queries";
+import { TypedServiceListQuery, TypedWebhooksDetailsQuery } from "../queries";
 import { webhooksListUrl, WebhooksListUrlQueryParams } from "../urls";
 
 export interface WebhooksDetailsProps {
@@ -56,39 +56,40 @@ export const WebhooksDetails: React.StatelessComponent<
             }
 
             return (
-              <>
+              <TypedServiceListQuery variables={{ first: 99 }}>
-                <WindowTitle
+                {({ data }) => (
-                  title={maybe(() => WebhookDetails.data.webhook.name)}
+                  <>
-                />
+                    <WindowTitle
-                <WebhooksDetailsPage
+                      title={maybe(() => WebhookDetails.data.webhook.name)}
-                  disabled={WebhookDetails.loading}
+                    />
-                  errors={formErrors}
+                    <WebhooksDetailsPage
-                  saveButtonBarState={formTransitionState}
+                      disabled={WebhookDetails.loading}
-                  webhook={maybe(() => WebhookDetails.data.webook)}
+                      errors={formErrors}
-                  onBack={() => navigate(webhooksListUrl())}
+                      saveButtonBarState={formTransitionState}
-                  onSubmit={formData => {
+                      webhook={maybe(() => WebhookDetails.data.webhook)}
-                    const configurationInput =
+                      services={maybe(() =>
-                      formData.configuration &&
+                        data.serviceAccounts.edges.map(edge => edge.node)
-                      formData.configuration.map(item => {
+                      )}
-                        return {
+                      onBack={() => navigate(webhooksListUrl())}
-                          name: item.name,
+                      onSubmit={data => {
-                          value: item.value.toString()
+                        webhookUpdate({
-                        };
+                          variables: {
-                      });
+                            id,
-                    webhookUpdate({
+                            input: {
-                      variables: {
+                              events: data.events,
-                        id,
+                              isActive: data.isActive,
-                        input: {
+                              name: data.name,
-                          active: formData.active,
+                              secretKey: data.secretKey,
-                          configuration: configurationInput
+                              serviceAccount: data.serviceAccount,
-                            ? configurationInput
+                              targetUrl: data.targetUrl
-                            : null
+                            }
-                        }
+                          }
-                      }
+                        });
-                    });
+                      }}
-                  }}
+                    />
-                />
+                  </>
-              </>
+                )}
+              </TypedServiceListQuery>
             );
           }}
         </TypedWebhooksDetailsQuery>

src/webhooks/views/WebhooksList.tsx

@@ -10,7 +10,11 @@ import React from "react";
 
 import WebhooksListPage from "../components/WebhooksListPage/WebhooksListPage";
 import { TypedWebhooksListQuery } from "../queries";
-import { WebhooksListUrlQueryParams, webhooksUrl } from "../urls";
+import {
+  webhooksAddUrl,
+  WebhooksListUrlQueryParams,
+  webhooksUrl
+} from "../urls";
 
 interface WebhooksListProps {
   params: WebhooksListUrlQueryParams;
@@ -41,7 +45,7 @@ export const WebhooksList: React.StatelessComponent<WebhooksListProps> = ({
               settings={settings}
               webhooks={maybe(() => data.webhooks.edges.map(edge => edge.node))}
               pageInfo={pageInfo}
-              onAdd={() => navigate(configurationMenuUrl)}
+              onAdd={() => navigate(webhooksAddUrl)}
               onBack={() => navigate(configurationMenuUrl)}
               onNextPage={loadNextPage}
               onPreviousPage={loadPreviousPage}