Add serviceAccount search and autocomplete input

2019-10-14 16:41:41 +02:00 · 2019-10-14 16:41:41 +02:00 · 28bc919e47
commit 28bc919e47
parent c8dbe00db4
13 changed files with 457 additions and 261 deletions
--- a/src/containers/SearchServiceAccount/index.tsx
+++ b/src/containers/SearchServiceAccount/index.tsx
@ -0,0 +1,24 @@
+import gql from "graphql-tag";
+
+import BaseSearch from "../BaseSearch";
+import {
+  SearchServiceAccount,
+  SearchServiceAccountVariables
+} from "./types/SearchServiceAccount";
+
+export const searchServiceAccount = gql`
+  query SearchServiceAccount($after: String, $first: Int!, $query: String!) {
+    serviceAccounts(after: $after, first: $first, filter: { search: $query }) {
+      edges {
+        node {
+          id
+          name
+        }
+      }
+    }
+  }
+`;
+
+export default BaseSearch<SearchServiceAccount, SearchServiceAccountVariables>(
+  searchServiceAccount
+);
--- a/src/containers/SearchServiceAccount/types/searchServiceAccount.ts
+++ b/src/containers/SearchServiceAccount/types/searchServiceAccount.ts
@ -0,0 +1,33 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+// ====================================================
+// GraphQL query operation: SearchServiceAccount
+// ====================================================
+
+export interface SearchServiceAccount_serviceAccounts_edges_node {
+  __typename: "ServiceAccount";
+  id: string;
+  name: string | null;
+}
+
+export interface SearchServiceAccount_serviceAccounts_edges {
+  __typename: "ServiceAccountCountableEdge";
+  node: SearchServiceAccount_serviceAccounts_edges_node;
+}
+
+export interface SearchServiceAccount_serviceAccounts {
+  __typename: "ServiceAccountCountableConnection";
+  edges: SearchServiceAccount_serviceAccounts_edges[];
+}
+
+export interface SearchServiceAccount {
+  serviceAccounts: SearchServiceAccount_serviceAccounts | null;
+}
+
+export interface SearchServiceAccountVariables {
+  after?: string | null;
+  first: number;
+  query: string;
+}
--- a/src/types/globalTypes.ts
+++ b/src/types/globalTypes.ts
@ -662,6 +662,11 @@ export interface SeoInput {
  description?: string | null;
 }

+export interface ServiceAccountFilterInput {
+  search?: string | null;
+  isActive?: boolean | null;
+}
+
 export interface ServiceAccountInput {
  name?: string | null;
  isActive?: boolean | null;
--- a/src/webhooks/components/WebhookCreatePage/WebhookCreatePage.tsx
+++ b/src/webhooks/components/WebhookCreatePage/WebhookCreatePage.tsx
@ -6,10 +6,12 @@ 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 useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { sectionNames } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
 import { UserError } from "@saleor/types";
 import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
+import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
 import WebhookEvents from "@saleor/webhooks/components/WebhookEvents";
 import WebhookInfo from "@saleor/webhooks/components/WebhookInfo";
 import WebhookStatus from "@saleor/webhooks/components/WebhookStatus";
@ -30,8 +32,12 @@ export interface FormData {
 export interface WebhookCreatePageProps {
  disabled: boolean;
  errors: UserError[];
-  services: ServiceList_serviceAccounts_edges_node[];
+  services?: Array<{
+    id: string;
+    name: string;
+  }>;
  saveButtonBarState: ConfirmButtonTransitionState;
+  fetchServiceAccount: (data: string) => void;
  onBack: () => void;
  onSubmit: (data: FormData) => void;
 }
@ -41,6 +47,7 @@ const WebhookCreatePage: React.StatelessComponent<WebhookCreatePageProps> = ({
  errors,
  saveButtonBarState,
  services,
+  fetchServiceAccount,
  onBack,
  onSubmit
 }) => {
@ -55,52 +62,74 @@ const WebhookCreatePage: React.StatelessComponent<WebhookCreatePageProps> = ({
    serviceAccount: "",
    targetUrl: ""
  };
+  const [
+    selectedServiceAcccounts,
+    setSelectedServiceAcccounts
+  ] = useStateFromProps("");
+  const servicesChoiceList = maybe(
+    () =>
+      services.map(node => ({
+        label: node.name,
+        value: node.id
+      })),
+    []
+  );

  return (
    <Form errors={errors} initial={initialForm} onSubmit={onSubmit}>
-      {({ data, errors, hasChanged, submit, change }) => (
-        <Container>
-          <AppHeader onBack={onBack}>
-            {intl.formatMessage(sectionNames.plugins)}
-          </AppHeader>
-          <PageHeader
-            title={intl.formatMessage({
-              defaultMessage: "Create Webhook",
-              description: "header"
-            })}
-          />
-          <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>
-      )}
+      {({ data, errors, hasChanged, submit, change }) => {
+        const handleServiceSelect = createSingleAutocompleteSelectHandler(
+          change,
+          setSelectedServiceAcccounts,
+          servicesChoiceList
+        );
+        return (
+          <Container>
+            <AppHeader onBack={onBack}>
+              {intl.formatMessage(sectionNames.webhooks)}
+            </AppHeader>
+            <PageHeader
+              title={intl.formatMessage({
+                defaultMessage: "Create Webhook",
+                description: "header"
+              })}
+            />
+            <Grid>
+              <div>
+                <WebhookInfo
+                  data={data}
+                  disabled={disabled}
+                  serviceDisplayValue={selectedServiceAcccounts}
+                  services={servicesChoiceList}
+                  fetchServiceAccount={fetchServiceAccount}
+                  errors={errors}
+                  serviceOnChange={handleServiceSelect}
+                  onChange={change}
+                />
+              </div>
+              <div>
+                <WebhookEvents
+                  data={data}
+                  disabled={disabled}
+                  onChange={change}
+                />
+                <FormSpacer />
+                <WebhookStatus
+                  data={data.isActive}
+                  disabled={disabled}
+                  onChange={change}
+                />
+              </div>
+            </Grid>
+            <SaveButtonBar
+              disabled={disabled || !hasChanged}
+              state={saveButtonBarState}
+              onCancel={onBack}
+              onSave={submit}
+            />
+          </Container>
+        );
+      }}
    </Form>
  );
 };
--- a/src/webhooks/components/WebhookCreatePage/WebhooksCreatePage.stories.tsx
+++ b/src/webhooks/components/WebhookCreatePage/WebhooksCreatePage.stories.tsx
@ -8,6 +8,7 @@ import WebhookCreatePage, { WebhookCreatePageProps } from "./WebhookCreatePage";
 const props: WebhookCreatePageProps = {
  disabled: false,
  errors: [],
+  fetchServiceAccount: () => undefined,
  onBack: () => undefined,
  onSubmit: () => undefined,
  saveButtonBarState: "default",
--- a/src/webhooks/components/WebhookEvents/WebhookEvents.tsx
+++ b/src/webhooks/components/WebhookEvents/WebhookEvents.tsx
@ -15,7 +15,7 @@ interface WebhookEventsProps {
    events: string[];
  };
  disabled: boolean;
-  onChange: (event: React.ChangeEvent<any>, cb?: () => void) => void;
+  onChange: (event: ChangeEvent, cb?: () => void) => void;
 }

 const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
@ -26,13 +26,18 @@ const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
  const intl = useIntl();
  const eventsEnum = Object.values(WebhookEventTypeEnum);

-  const handleAllEventsChange = () =>
-    onChange({
-      target: {
-        name: "events",
-        value: WebhookEventTypeEnum.ALL_EVENTS
-      }
-    } as any);
+  const handleAllEventsChange = (event: ChangeEvent) =>
+    onChange(event, () =>
+      onChange({
+        target: {
+          name: "events",
+          value: event.target.value
+            ? WebhookEventTypeEnum.ALL_EVENTS
+            : data.events
+        }
+      } as any)
+    );
+
  const handleEventsChange = (event: ChangeEvent) => {
    onChange({
      target: {
@ -70,21 +75,24 @@ const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
          name="allEvents"
          onChange={handleAllEventsChange}
        />
-        <Hr />
-        {!data.allEvents &&
-          eventsEnum.slice(1).map(event => {
-            return (
-              <div key={event}>
-                <ControlledCheckbox
-                  checked={data.events.includes(event)}
-                  disabled={disabled}
-                  label={event.replace(/\./, "")}
-                  name={event}
-                  onChange={handleEventsChange}
-                />
-              </div>
-            );
-          })}
+        {!data.allEvents && (
+          <>
+            <Hr />
+            {eventsEnum.slice(1).map(event => {
+              return (
+                <div key={event}>
+                  <ControlledCheckbox
+                    checked={data.events.includes(event)}
+                    disabled={disabled}
+                    label={event.replace(/\./, "")}
+                    name={event}
+                    onChange={handleEventsChange}
+                  />
+                </div>
+              );
+            })}
+          </>
+        )}
      </CardContent>
    </Card>
  );
--- a/src/webhooks/components/WebhookInfo/WebhookInfo.tsx
+++ b/src/webhooks/components/WebhookInfo/WebhookInfo.tsx
@ -9,20 +9,24 @@ import { useIntl } from "react-intl";
 import CardTitle from "@saleor/components/CardTitle";
 import FormSpacer from "@saleor/components/FormSpacer";
 import Hr from "@saleor/components/Hr";
-import SingleSelectField from "@saleor/components/SingleSelectField";
-import { SingleAutocompleteSelectField } from "@saleor/components/SingleAutocompleteSelectField";
+import {
+  SingleAutocompleteChoiceType,
+  SingleAutocompleteSelectField
+} from "@saleor/components/SingleAutocompleteSelectField";
+import { ChangeEvent } from "@saleor/hooks/useForm";
 import { commonMessages } from "@saleor/intl";
 import { FormErrors } from "@saleor/types";
 import { FormData } from "../WebhooksDetailsPage";

-import { ServiceList_serviceAccounts_edges_node } from "../../types/ServiceList";
-
 interface WebhookInfoProps {
  data: FormData;
  disabled: boolean;
-  services: ServiceList_serviceAccounts_edges_node[];
+  serviceDisplayValue: string;
+  services: SingleAutocompleteChoiceType[];
  errors: FormErrors<"name" | "targetUrl" | "secretKey">;
  onChange: (event: React.ChangeEvent<any>) => void;
+  serviceOnChange: (event: ChangeEvent) => void;
+  fetchServiceAccount: (data: string) => void;
 }

 const useStyles = makeStyles(() => ({
@ -40,8 +44,11 @@ const WebhookInfo: React.StatelessComponent<WebhookInfoProps> = ({
  data,
  disabled,
  services,
+  serviceDisplayValue,
+  fetchServiceAccount,
  errors,
-  onChange
+  onChange,
+  serviceOnChange
 }) => {
  const classes = useStyles({});
  const intl = useIntl();
@ -82,17 +89,15 @@ const WebhookInfo: React.StatelessComponent<WebhookInfoProps> = ({
        </Typography>
        <SingleAutocompleteSelectField
          disabled={disabled}
-          displayValue={data.serviceAccount}
+          displayValue={serviceDisplayValue}
          label={intl.formatMessage({
            defaultMessage: "Assign to Service Account"
          })}
          name="serviceAccount"
-          onChange={onChange}
+          onChange={serviceOnChange}
          value={data.serviceAccount}
-          choices={services.map(service => ({
-            label: service.name,
-            value: service.id
-          }))}
+          choices={services}
+          fetchChoices={fetchServiceAccount}
          InputProps={{
            autoComplete: "off"
          }}
--- a/src/webhooks/components/WebhookStatus/WebhookStatus.tsx
+++ b/src/webhooks/components/WebhookStatus/WebhookStatus.tsx
@ -3,16 +3,16 @@ import CardContent from "@material-ui/core/CardContent";
 import Typography from "@material-ui/core/Typography";
 import CardTitle from "@saleor/components/CardTitle";
 import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
-import { FormChange } from "@saleor/hooks/useForm";
+import { ChangeEvent } from "@saleor/hooks/useForm";
 import React from "react";
 import { useIntl } from "react-intl";

 import { FormData } from "../WebhooksDetailsPage";

 interface WebhookStatusProps {
-  data: FormData;
+  data: boolean;
  disabled: boolean;
-  onChange: (event: FormChange) => void;
+  onChange: (event: ChangeEvent, cb?: () => void) => void;
 }

 const WebhookStatus: React.FC<WebhookStatusProps> = ({
@ -43,7 +43,7 @@ const WebhookStatus: React.FC<WebhookStatusProps> = ({
            defaultMessage: "Webhook is active",
            description: "webhooks active"
          })}
-          checked={data.isActive}
+          checked={data}
          onChange={onChange}
          disabled={disabled}
        />
--- a/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.stories.tsx
+++ b/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.stories.tsx
@ -10,17 +10,24 @@ import WebhooksDetailsPage, {
 const props: WebhooksDetailsPageProps = {
  disabled: false,
  errors: [],
+  fetchServiceAccount: () => undefined,
  onBack: () => undefined,
  onDelete: () => undefined,
  onSubmit: () => undefined,
  saveButtonBarState: "default",
-  services: []
+  services: [],
+  webhook: null
 };
 storiesOf("Views / Webhook / Webhook details", module)
  .addDecorator(Decorator)
  .add("default", () => <WebhooksDetailsPage {...props} />)
  .add("loading", () => (
-    <WebhooksDetailsPage {...props} services={undefined} disabled={true} />
+    <WebhooksDetailsPage
+      {...props}
+      webhook={undefined}
+      services={undefined}
+      disabled={true}
+    />
  ))
  .add("form errors", () => (
    <WebhooksDetailsPage
--- a/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx
+++ b/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx
@ -6,15 +6,17 @@ 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 useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { sectionNames } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
 import { UserError } from "@saleor/types";
 import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
+import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
 import WebhookEvents from "@saleor/webhooks/components/WebhookEvents";
 import WebhookInfo from "@saleor/webhooks/components/WebhookInfo";
 import WebhookStatus from "@saleor/webhooks/components/WebhookStatus";
-import { ServiceList_serviceAccounts_edges_node } from "@saleor/webhooks/types/ServiceList";
 import { Webhook_webhook } from "@saleor/webhooks/types/Webhook";
+
 import React from "react";
 import { useIntl } from "react-intl";

@ -33,10 +35,14 @@ export interface WebhooksDetailsPageProps {
  disabled: boolean;
  errors: UserError[];
  webhook: Webhook_webhook;
-  services: ServiceList_serviceAccounts_edges_node[];
+  services?: Array<{
+    id: string;
+    name: string;
+  }>;
  saveButtonBarState: ConfirmButtonTransitionState;
  onBack: () => void;
  onDelete: () => void;
+  fetchServiceAccount: (data: string) => void;
  onSubmit: (data: FormData) => void;
 }

@ -48,6 +54,7 @@ const WebhooksDetailsPage: React.StatelessComponent<
  webhook,
  saveButtonBarState,
  services,
+  fetchServiceAccount,
  onBack,
  onDelete,
  onSubmit
@ -62,60 +69,82 @@ const WebhooksDetailsPage: React.StatelessComponent<
    isActive: maybe(() => webhook.isActive, false),
    name: maybe(() => webhook.name, ""),
    secretKey: maybe(() => webhook.secretKey, ""),
-    serviceAccount: maybe(() => webhook.serviceAccount.id, ""),
+    serviceAccount: maybe(() => webhook.serviceAccount.name, ""),
    targetUrl: maybe(() => webhook.targetUrl, "")
  };
+  const [
+    selectedServiceAcccounts,
+    setSelectedServiceAcccounts
+  ] = useStateFromProps(maybe(() => webhook.serviceAccount.name, ""));
+  const servicesChoiceList = maybe(
+    () =>
+      services.map(node => ({
+        label: node.name,
+        value: node.id
+      })),
+    []
+  );
  return (
    <Form errors={errors} initial={initialForm} onSubmit={onSubmit}>
-      {({ data, errors, hasChanged, submit, change }) => (
-        <Container>
-          <AppHeader onBack={onBack}>
-            {intl.formatMessage(sectionNames.plugins)}
-          </AppHeader>
-          <PageHeader
-            title={intl.formatMessage(
-              {
-                defaultMessage: "{webhookName} Details",
-                description: "header"
-              },
-              {
-                webhookName: maybe(() => webhook.name, "...")
-              }
-            )}
-          />
-          <Grid>
-            <div>
-              <WebhookInfo
-                data={data}
-                disabled={disabled}
-                services={maybe(() => services, [])}
-                errors={errors}
-                onChange={change}
-              />
-            </div>
-            <div>
-              <WebhookEvents
-                data={data}
-                onChange={change}
-                disabled={disabled}
-              />
-              <FormSpacer />
-              <WebhookStatus
-                data={data}
-                disabled={disabled}
-                onChange={change}
-              />
-            </div>
-          </Grid>
-          <SaveButtonBar
-            disabled={disabled || !hasChanged}
-            state={saveButtonBarState}
-            onCancel={onBack}
-            onSave={submit}
-            onDelete={onDelete}
-          />
-        </Container>
-      )}
+      {({ data, errors, hasChanged, submit, change }) => {
+        const handleServiceSelect = createSingleAutocompleteSelectHandler(
+          change,
+          setSelectedServiceAcccounts,
+          servicesChoiceList
+        );
+        return (
+          <Container>
+            <AppHeader onBack={onBack}>
+              {intl.formatMessage(sectionNames.webhooks)}
+            </AppHeader>
+            <PageHeader
+              title={intl.formatMessage(
+                {
+                  defaultMessage: "{webhookName} Details",
+                  description: "header"
+                },
+                {
+                  webhookName: maybe(() => webhook.name, "...")
+                }
+              )}
+            />
+            <Grid>
+              <div>
+                <WebhookInfo
+                  data={data}
+                  disabled={disabled}
+                  serviceDisplayValue={selectedServiceAcccounts}
+                  services={servicesChoiceList}
+                  fetchServiceAccount={fetchServiceAccount}
+                  errors={errors}
+                  serviceOnChange={handleServiceSelect}
+                  onChange={change}
+                />
+              </div>
+              <div>
+                <WebhookEvents
+                  data={data}
+                  onChange={change}
+                  disabled={disabled}
+                />
+                <FormSpacer />
+                <WebhookStatus
+                  data={data.isActive}
+                  disabled={disabled}
+                  onChange={change}
+                />
+              </div>
+            </Grid>
+            <SaveButtonBar
+              disabled={disabled || !hasChanged}
+              state={saveButtonBarState}
+              onCancel={onBack}
+              onSave={submit}
+              onDelete={onDelete}
+            />
+          </Container>
+        );
+      }}
    </Form>
  );
 };
--- a/src/webhooks/types/WebhookDetails.ts
+++ b/src/webhooks/types/WebhookDetails.ts
@ -0,0 +1,39 @@
+/* tslint:disable */
+/* eslint-disable */
+// This file was automatically generated and should not be edited.
+
+import { WebhookEventTypeEnum } from "./../../types/globalTypes";
+
+// ====================================================
+// GraphQL query operation: WebhookDetails
+// ====================================================
+
+export interface WebhookDetails_webhook_events {
+  __typename: "WebhookEvent";
+  eventType: WebhookEventTypeEnum | null;
+}
+
+export interface WebhookDetails_webhook_serviceAccount {
+  __typename: "ServiceAccount";
+  id: string;
+  name: string | null;
+}
+
+export interface WebhookDetails_webhook {
+  __typename: "Webhook";
+  id: string;
+  name: string | null;
+  events: (WebhookDetails_webhook_events | null)[] | null;
+  isActive: boolean;
+  secretKey: string | null;
+  targetUrl: string;
+  serviceAccount: WebhookDetails_webhook_serviceAccount;
+}
+
+export interface WebhookDetails {
+  webhook: WebhookDetails_webhook | null;
+}
+
+export interface WebhookDetailsVariables {
+  id: string;
+}
--- a/src/webhooks/views/WebhooksCreate.tsx
+++ b/src/webhooks/views/WebhooksCreate.tsx
@ -1,4 +1,5 @@
 import { WindowTitle } from "@saleor/components/WindowTitle";
+import SearchServiceAccount from "@saleor/containers/SearchServiceAccount";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { commonMessages } from "@saleor/intl";
@ -6,7 +7,7 @@ import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
 import { WebhookCreate as WebhookCreateData } from "@saleor/webhooks/types/WebhookCreate";
 import React from "react";
 import { useIntl } from "react-intl";
-
+import { DEFAULT_INITIAL_SEARCH_DATA } from "../../config";
 import { getMutationState, maybe } from "../../misc";
 import WebhookCreatePage, { FormData } from "../components/WebhookCreatePage";
 import { TypedWebhookCreate } from "../mutations";
@ -40,55 +41,62 @@ export const WebhooksCreate: React.StatelessComponent<
  const handleBack = () => navigate(webhooksListUrl());

  return (
-    <TypedWebhookCreate onCompleted={onSubmit}>
-      {(WebhookCreate, webhookCreateOpts) => {
-        const handleSubmit = (data: FormData) =>
-          WebhookCreate({
-            variables: {
-              input: {
-                events: data.allEvents
-                  ? [WebhookEventTypeEnum.ALL_EVENTS]
-                  : data.events,
-                isActive: data.isActive,
-                name: data.name,
-                secretKey: data.secretKey,
-                serviceAccount: data.serviceAccount,
-                targetUrl: data.targetUrl
-              }
-            }
-          });
+    <SearchServiceAccount variables={DEFAULT_INITIAL_SEARCH_DATA}>
+      {({ search: searchServiceAccount, result: searchServiceAccountOpt }) => (
+        <TypedWebhookCreate onCompleted={onSubmit}>
+          {(WebhookCreate, webhookCreateOpts) => {
+            const handleSubmit = (data: FormData) =>
+              WebhookCreate({
+                variables: {
+                  input: {
+                    events: data.allEvents
+                      ? [WebhookEventTypeEnum.ALL_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)
-        );
+            const formTransitionState = getMutationState(
+              webhookCreateOpts.called,
+              webhookCreateOpts.loading,
+              maybe(() => webhookCreateOpts.data.webhookCreate.errors)
+            );

-        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)
-              )}
-              onBack={handleBack}
-              onSubmit={handleSubmit}
-              saveButtonBarState={formTransitionState}
-            />
-          </>
-        );
-      }}
-    </TypedWebhookCreate>
+            return (
+              <>
+                <WindowTitle
+                  title={intl.formatMessage({
+                    defaultMessage: "Create Webhook",
+                    description: "window title"
+                  })}
+                />
+                <WebhookCreatePage
+                  disabled={false}
+                  errors={maybe(
+                    () => webhookCreateOpts.data.webhookCreate.errors,
+                    []
+                  )}
+                  fetchServiceAccount={searchServiceAccount}
+                  services={maybe(() =>
+                    searchServiceAccountOpt.data.serviceAccounts.edges.map(
+                      edge => edge.node
+                    )
+                  )}
+                  onBack={handleBack}
+                  onSubmit={handleSubmit}
+                  saveButtonBarState={formTransitionState}
+                />
+              </>
+            );
+          }}
+        </TypedWebhookCreate>
+      )}
+    </SearchServiceAccount>
  );
 };
 WebhooksCreate.displayName = "WebhooksCreate";
--- a/src/webhooks/views/WebhooksDetails.tsx
+++ b/src/webhooks/views/WebhooksDetails.tsx
@ -1,4 +1,5 @@
 import { WindowTitle } from "@saleor/components/WindowTitle";
+import SearchServiceAccount from "@saleor/containers/SearchServiceAccount";
 import useNavigator from "@saleor/hooks/useNavigator";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { commonMessages } from "@saleor/intl";
@ -8,7 +9,7 @@ import { WebhookDelete } from "@saleor/webhooks/types/WebhookDelete";
 import { WebhookUpdate } from "@saleor/webhooks/types/WebhookUpdate";
 import React from "react";
 import { useIntl } from "react-intl";
-
+import { DEFAULT_INITIAL_SEARCH_DATA } from "../../config";
 import { getMutationState, maybe } from "../../misc";
 import WebhooksDetailsPage from "../components/WebhooksDetailsPage";
 import { TypedWebhookDelete, TypedWebhookUpdate } from "../mutations";
@ -70,87 +71,94 @@ export const WebhooksDetails: React.StatelessComponent<
  };

  return (
-    <TypedWebhookUpdate onCompleted={onWebhookUpdate}>
-      {(webhookUpdate, webhookUpdateOpts) => (
-        <TypedWebhookDelete onCompleted={onWebhookDelete}>
-          {(webhookDelete, webhookDeleteOpts) => (
-            <TypedWebhooksDetailsQuery variables={{ id }}>
-              {WebhookDetails => {
-                const formTransitionState = getMutationState(
-                  webhookUpdateOpts.called,
-                  webhookUpdateOpts.loading,
-                  maybe(() => webhookUpdateOpts.data.webhookUpdate.errors)
-                );
+    <SearchServiceAccount variables={DEFAULT_INITIAL_SEARCH_DATA}>
+      {({ search: searchServiceAccount, result: searchServiceAccountOpt }) => (
+        <TypedWebhookUpdate onCompleted={onWebhookUpdate}>
+          {(webhookUpdate, webhookUpdateOpts) => (
+            <TypedWebhookDelete onCompleted={onWebhookDelete}>
+              {(webhookDelete, webhookDeleteOpts) => (
+                <TypedWebhooksDetailsQuery variables={{ id }}>
+                  {WebhookDetails => {
+                    const formTransitionState = getMutationState(
+                      webhookUpdateOpts.called,
+                      webhookUpdateOpts.loading,
+                      maybe(() => webhookUpdateOpts.data.webhookUpdate.errors)
+                    );

-                const handleRemoveConfirm = () =>
-                  webhookDelete({
-                    variables: {
-                      id
-                    }
-                  });
+                    const handleRemoveConfirm = () =>
+                      webhookDelete({
+                        variables: {
+                          id
+                        }
+                      });

-                const formErrors = maybe(
-                  () => webhookUpdateOpts.data.webhookUpdate.errors,
-                  []
-                );
+                    const formErrors = maybe(
+                      () => webhookUpdateOpts.data.webhookUpdate.errors,
+                      []
+                    );

-                const deleteTransitionState = getMutationState(
-                  webhookDeleteOpts.called,
-                  webhookDeleteOpts.loading,
-                  maybe(() => webhookDeleteOpts.data.webhookDelete.errors)
-                );
+                    const deleteTransitionState = getMutationState(
+                      webhookDeleteOpts.called,
+                      webhookDeleteOpts.loading,
+                      maybe(() => webhookDeleteOpts.data.webhookDelete.errors)
+                    );

-                return (
-                  <>
-                    <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())}
-                      onDelete={() => openModal("remove")}
-                      onSubmit={data => {
-                        webhookUpdate({
-                          variables: {
-                            id,
-                            input: {
-                              events: data.allEvents
-                                ? [WebhookEventTypeEnum.ALL_EVENTS]
-                                : data.events,
-                              isActive: data.isActive,
-                              name: data.name,
-                              secretKey: data.secretKey,
-                              serviceAccount: data.serviceAccount,
-                              targetUrl: data.targetUrl
-                            }
-                          }
-                        });
-                      }}
-                    />
-                    <WebhookDeleteDialog
-                      confirmButtonState={deleteTransitionState}
-                      name={maybe(
-                        () => WebhookDetails.data.webhook.name,
-                        "..."
-                      )}
-                      onClose={closeModal}
-                      onConfirm={handleRemoveConfirm}
-                      open={params.action === "remove"}
-                    />
-                  </>
-                );
-              }}
-            </TypedWebhooksDetailsQuery>
+                    return (
+                      <>
+                        <WindowTitle
+                          title={maybe(() => WebhookDetails.data.webhook.name)}
+                        />
+                        <WebhooksDetailsPage
+                          disabled={WebhookDetails.loading}
+                          errors={formErrors}
+                          saveButtonBarState={formTransitionState}
+                          webhook={maybe(() => WebhookDetails.data.webhook)}
+                          fetchServiceAccount={searchServiceAccount}
+                          services={maybe(() =>
+                            searchServiceAccountOpt.data.serviceAccounts.edges.map(
+                              edge => edge.node
+                            )
+                          )}
+                          onBack={() => navigate(webhooksListUrl())}
+                          onDelete={() => openModal("remove")}
+                          onSubmit={data => {
+                            webhookUpdate({
+                              variables: {
+                                id,
+                                input: {
+                                  events: data.allEvents
+                                    ? [WebhookEventTypeEnum.ALL_EVENTS]
+                                    : data.events,
+                                  isActive: data.isActive,
+                                  name: data.name,
+                                  secretKey: data.secretKey,
+                                  serviceAccount: data.serviceAccount,
+                                  targetUrl: data.targetUrl
+                                }
+                              }
+                            });
+                          }}
+                        />
+                        <WebhookDeleteDialog
+                          confirmButtonState={deleteTransitionState}
+                          name={maybe(
+                            () => WebhookDetails.data.webhook.name,
+                            "..."
+                          )}
+                          onClose={closeModal}
+                          onConfirm={handleRemoveConfirm}
+                          open={params.action === "remove"}
+                        />
+                      </>
+                    );
+                  }}
+                </TypedWebhooksDetailsQuery>
+              )}
+            </TypedWebhookDelete>
          )}
-        </TypedWebhookDelete>
+        </TypedWebhookUpdate>
      )}
-    </TypedWebhookUpdate>
+    </SearchServiceAccount>
  );
 };
 WebhooksDetails.displayName = "WebhooksDetails";