Update components

2019-10-09 22:50:03 +02:00 · 2019-10-09 22:50:03 +02:00 · 2fd01ec3c5
commit 2fd01ec3c5
parent 6b66893745
17 changed files with 591 additions and 122 deletions
--- a/src/index.tsx
+++ b/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 & {
--- a/src/webhooks/components/WebhookCreatePage/WebhookCreatePage.tsx
+++ b/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;
--- a/src/webhooks/components/WebhookCreatePage/index.ts
+++ b/src/webhooks/components/WebhookCreatePage/index.ts
@ -0,0 +1,2 @@
+export { default } from "./WebhookCreatePage";
+export * from "./WebhookCreatePage";
--- a/src/webhooks/components/WebhookEvents/WebhookEvents.tsx
+++ b/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 { FormData } from "../WebhookDetailsPage";
+import { WebhookEventTypeEnum } from "../../../types/globalTypes";
+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,
-  fields
+  onChange
 }) => {
-  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>
  );
 };
--- a/src/webhooks/components/WebhookInfo/WebhookInfo.tsx
+++ b/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;
-  name: string;
+  disabled: boolean;
+  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,
-    paddingTop: 10
+    fontSize: 16,
+    lineHeight: 1.9,
+    paddingBottom: 10
  }
 }));

 const WebhookInfo: React.StatelessComponent<WebhookInfoProps> = ({
  data,
-  description,
-  name,
+  disabled,
+  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>
  );
 };
--- a/src/webhooks/components/WebhookStatus/WebhookStatus.tsx
+++ b/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 makeStyles from "@material-ui/styles/makeStyles";
+import Typography from "@material-ui/core/Typography";
 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,
-  fields
+  onChange
 }) => {
-  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>
  );
 };
--- a/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx
+++ b/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 {
-  Webhook_webhook,
-  Webhook_webhook_events,
-  Webhook_webhook_serviceAccount
-} from "../../types/Webhook";
+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;
+  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}
-                  name={maybe(() => plugin.name, "")}
+                  disabled={disabled}
                  onChange={change}
                />
+                <FormSpacer />
                <WebhookStatus
                  data={data}
-                  errors={errors}
-                  name={maybe(() => plugin.name, "")}
+                  disabled={disabled}
                  onChange={change}
                />
              </div>
--- a/src/webhooks/components/WebhooksList/WebhooksList.tsx
+++ b/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>
--- a/src/webhooks/components/WebhooksListPage/WebhooksListPage.tsx
+++ b/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}
--- a/src/webhooks/index.tsx
+++ b/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
-      id={decodeURIComponent(match.params.id)}
-      params={params}
-    />
+    <WebhooksDetails 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>
    </>
  );
--- a/src/webhooks/queries.ts
+++ b/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!) {
--- a/src/webhooks/types/ServiceFragment.ts
+++ b/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;
+}
--- a/src/webhooks/types/ServiceList.ts
+++ b/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;
+}
--- a/src/webhooks/urls.ts
+++ b/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;
--- a/src/webhooks/views/WebhooksCreate.tsx
+++ b/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;
--- a/src/webhooks/views/WebhooksDetails.tsx
+++ b/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 (
-              <>
-                <WindowTitle
-                  title={maybe(() => WebhookDetails.data.webhook.name)}
-                />
-                <WebhooksDetailsPage
-                  disabled={WebhookDetails.loading}
-                  errors={formErrors}
-                  saveButtonBarState={formTransitionState}
-                  webhook={maybe(() => WebhookDetails.data.webook)}
-                  onBack={() => navigate(webhooksListUrl())}
-                  onSubmit={formData => {
-                    const configurationInput =
-                      formData.configuration &&
-                      formData.configuration.map(item => {
-                        return {
-                          name: item.name,
-                          value: item.value.toString()
-                        };
-                      });
-                    webhookUpdate({
-                      variables: {
-                        id,
-                        input: {
-                          active: formData.active,
-                          configuration: configurationInput
-                            ? configurationInput
-                            : null
-                        }
-                      }
-                    });
-                  }}
-                />
-              </>
+              <TypedServiceListQuery variables={{ first: 99 }}>
+                {({ data }) => (
+                  <>
+                    <WindowTitle
+                      title={maybe(() => WebhookDetails.data.webhook.name)}
+                    />
+                    <WebhooksDetailsPage
+                      disabled={WebhookDetails.loading}
+                      errors={formErrors}
+                      saveButtonBarState={formTransitionState}
+                      webhook={maybe(() => WebhookDetails.data.webhook)}
+                      services={maybe(() =>
+                        data.serviceAccounts.edges.map(edge => edge.node)
+                      )}
+                      onBack={() => navigate(webhooksListUrl())}
+                      onSubmit={data => {
+                        webhookUpdate({
+                          variables: {
+                            id,
+                            input: {
+                              events: data.events,
+                              isActive: data.isActive,
+                              name: data.name,
+                              secretKey: data.secretKey,
+                              serviceAccount: data.serviceAccount,
+                              targetUrl: data.targetUrl
+                            }
+                          }
+                        });
+                      }}
+                    />
+                  </>
+                )}
+              </TypedServiceListQuery>
            );
          }}
        </TypedWebhooksDetailsQuery>
--- a/src/webhooks/views/WebhooksList.tsx
+++ b/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}