Add serviceAccount search and autocomplete input

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
+);

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;
+}

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;

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 }) => (
+      {({ data, errors, hasChanged, submit, change }) => {
-        <Container>
+        const handleServiceSelect = createSingleAutocompleteSelectHandler(
-          <AppHeader onBack={onBack}>
+          change,
-            {intl.formatMessage(sectionNames.plugins)}
+          setSelectedServiceAcccounts,
-          </AppHeader>
+          servicesChoiceList
-          <PageHeader
+        );
-            title={intl.formatMessage({
+        return (
-              defaultMessage: "Create Webhook",
+          <Container>
-              description: "header"
+            <AppHeader onBack={onBack}>
-            })}
+              {intl.formatMessage(sectionNames.webhooks)}
-          />
+            </AppHeader>
-          <Grid>
+            <PageHeader
-            <div>
+              title={intl.formatMessage({
-              <WebhookInfo
+                defaultMessage: "Create Webhook",
-                data={data}
+                description: "header"
-                disabled={disabled}
+              })}
-                services={maybe(() => services, [])}
+            />
-                errors={errors}
+            <Grid>
-                onChange={change}
+              <div>
-              />
+                <WebhookInfo
-            </div>
+                  data={data}
-            <div>
+                  disabled={disabled}
-              <WebhookEvents
+                  serviceDisplayValue={selectedServiceAcccounts}
-                data={data}
+                  services={servicesChoiceList}
-                disabled={disabled}
+                  fetchServiceAccount={fetchServiceAccount}
-                onChange={change}
+                  errors={errors}
-              />
+                  serviceOnChange={handleServiceSelect}
-              <FormSpacer />
+                  onChange={change}
-              <WebhookStatus
+                />
-                data={data}
+              </div>
-                disabled={disabled}
+              <div>
-                onChange={change}
+                <WebhookEvents
-              />
+                  data={data}
-            </div>
+                  disabled={disabled}
-          </Grid>
+                  onChange={change}
-          <SaveButtonBar
+                />
-            disabled={disabled || !hasChanged}
+                <FormSpacer />
-            state={saveButtonBarState}
+                <WebhookStatus
-            onCancel={onBack}
+                  data={data.isActive}
-            onSave={submit}
+                  disabled={disabled}
-          />
+                  onChange={change}
-        </Container>
+                />
-      )}
+              </div>
+            </Grid>
+            <SaveButtonBar
+              disabled={disabled || !hasChanged}
+              state={saveButtonBarState}
+              onCancel={onBack}
+              onSave={submit}
+            />
+          </Container>
+        );
+      }}
     </Form>
   );
 };

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",

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 = () =>
+  const handleAllEventsChange = (event: ChangeEvent) =>
-    onChange({
+    onChange(event, () =>
-      target: {
+      onChange({
-        name: "events",
+        target: {
-        value: WebhookEventTypeEnum.ALL_EVENTS
+          name: "events",
-      }
+          value: event.target.value
-    } as any);
+            ? 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 && (
-        {!data.allEvents &&
+          <>
-          eventsEnum.slice(1).map(event => {
+            <Hr />
-            return (
+            {eventsEnum.slice(1).map(event => {
-              <div key={event}>
+              return (
-                <ControlledCheckbox
+                <div key={event}>
-                  checked={data.events.includes(event)}
+                  <ControlledCheckbox
-                  disabled={disabled}
+                    checked={data.events.includes(event)}
-                  label={event.replace(/\./, "")}
+                    disabled={disabled}
-                  name={event}
+                    label={event.replace(/\./, "")}
-                  onChange={handleEventsChange}
+                    name={event}
-                />
+                    onChange={handleEventsChange}
-              </div>
+                  />
-            );
+                </div>
-          })}
+              );
+            })}
+          </>
+        )}
       </CardContent>
     </Card>
   );

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 {
-import { SingleAutocompleteSelectField } from "@saleor/components/SingleAutocompleteSelectField";
+  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 => ({
+          choices={services}
-            label: service.name,
+          fetchChoices={fetchServiceAccount}
-            value: service.id
-          }))}
           InputProps={{
             autoComplete: "off"
           }}

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}
         />

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

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 }) => (
+      {({ data, errors, hasChanged, submit, change }) => {
-        <Container>
+        const handleServiceSelect = createSingleAutocompleteSelectHandler(
-          <AppHeader onBack={onBack}>
+          change,
-            {intl.formatMessage(sectionNames.plugins)}
+          setSelectedServiceAcccounts,
-          </AppHeader>
+          servicesChoiceList
-          <PageHeader
+        );
-            title={intl.formatMessage(
+        return (
-              {
+          <Container>
-                defaultMessage: "{webhookName} Details",
+            <AppHeader onBack={onBack}>
-                description: "header"
+              {intl.formatMessage(sectionNames.webhooks)}
-              },
+            </AppHeader>
-              {
+            <PageHeader
-                webhookName: maybe(() => webhook.name, "...")
+              title={intl.formatMessage(
-              }
+                {
-            )}
+                  defaultMessage: "{webhookName} Details",
-          />
+                  description: "header"
-          <Grid>
+                },
-            <div>
+                {
-              <WebhookInfo
+                  webhookName: maybe(() => webhook.name, "...")
-                data={data}
+                }
-                disabled={disabled}
+              )}
-                services={maybe(() => services, [])}
+            />
-                errors={errors}
+            <Grid>
-                onChange={change}
+              <div>
-              />
+                <WebhookInfo
-            </div>
+                  data={data}
-            <div>
+                  disabled={disabled}
-              <WebhookEvents
+                  serviceDisplayValue={selectedServiceAcccounts}
-                data={data}
+                  services={servicesChoiceList}
-                onChange={change}
+                  fetchServiceAccount={fetchServiceAccount}
-                disabled={disabled}
+                  errors={errors}
-              />
+                  serviceOnChange={handleServiceSelect}
-              <FormSpacer />
+                  onChange={change}
-              <WebhookStatus
+                />
-                data={data}
+              </div>
-                disabled={disabled}
+              <div>
-                onChange={change}
+                <WebhookEvents
-              />
+                  data={data}
-            </div>
+                  onChange={change}
-          </Grid>
+                  disabled={disabled}
-          <SaveButtonBar
+                />
-            disabled={disabled || !hasChanged}
+                <FormSpacer />
-            state={saveButtonBarState}
+                <WebhookStatus
-            onCancel={onBack}
+                  data={data.isActive}
-            onSave={submit}
+                  disabled={disabled}
-            onDelete={onDelete}
+                  onChange={change}
-          />
+                />
-        </Container>
+              </div>
-      )}
+            </Grid>
+            <SaveButtonBar
+              disabled={disabled || !hasChanged}
+              state={saveButtonBarState}
+              onCancel={onBack}
+              onSave={submit}
+              onDelete={onDelete}
+            />
+          </Container>
+        );
+      }}
     </Form>
   );
 };

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;
+}

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}>
+    <SearchServiceAccount variables={DEFAULT_INITIAL_SEARCH_DATA}>
-      {(WebhookCreate, webhookCreateOpts) => {
+      {({ search: searchServiceAccount, result: searchServiceAccountOpt }) => (
-        const handleSubmit = (data: FormData) =>
+        <TypedWebhookCreate onCompleted={onSubmit}>
-          WebhookCreate({
+          {(WebhookCreate, webhookCreateOpts) => {
-            variables: {
+            const handleSubmit = (data: FormData) =>
-              input: {
+              WebhookCreate({
-                events: data.allEvents
+                variables: {
-                  ? [WebhookEventTypeEnum.ALL_EVENTS]
+                  input: {
-                  : data.events,
+                    events: data.allEvents
-                isActive: data.isActive,
+                      ? [WebhookEventTypeEnum.ALL_EVENTS]
-                name: data.name,
+                      : data.events,
-                secretKey: data.secretKey,
+                    isActive: data.isActive,
-                serviceAccount: data.serviceAccount,
+                    name: data.name,
-                targetUrl: data.targetUrl
+                    secretKey: data.secretKey,
-              }
+                    serviceAccount: data.serviceAccount,
-            }
+                    targetUrl: data.targetUrl
-          });
+                  }
+                }
+              });
 
-        const formTransitionState = getMutationState(
+            const formTransitionState = getMutationState(
-          webhookCreateOpts.called,
+              webhookCreateOpts.called,
-          webhookCreateOpts.loading,
+              webhookCreateOpts.loading,
-          maybe(() => webhookCreateOpts.data.webhookCreate.errors)
+              maybe(() => webhookCreateOpts.data.webhookCreate.errors)
-        );
+            );
 
-        return (
+            return (
-          <>
+              <>
-            <WindowTitle
+                <WindowTitle
-              title={intl.formatMessage({
+                  title={intl.formatMessage({
-                defaultMessage: "Create Webhook",
+                    defaultMessage: "Create Webhook",
-                description: "window title"
+                    description: "window title"
-              })}
+                  })}
-            />
+                />
-            <WebhookCreatePage
+                <WebhookCreatePage
-              disabled={false}
+                  disabled={false}
-              errors={maybe(
+                  errors={maybe(
-                () => webhookCreateOpts.data.webhookCreate.errors,
+                    () => webhookCreateOpts.data.webhookCreate.errors,
-                []
+                    []
-              )}
+                  )}
-              services={maybe(() =>
+                  fetchServiceAccount={searchServiceAccount}
-                data.serviceAccounts.edges.map(edge => edge.node)
+                  services={maybe(() =>
-              )}
+                    searchServiceAccountOpt.data.serviceAccounts.edges.map(
-              onBack={handleBack}
+                      edge => edge.node
-              onSubmit={handleSubmit}
+                    )
-              saveButtonBarState={formTransitionState}
+                  )}
-            />
+                  onBack={handleBack}
-          </>
+                  onSubmit={handleSubmit}
-        );
+                  saveButtonBarState={formTransitionState}
-      }}
+                />
-    </TypedWebhookCreate>
+              </>
+            );
+          }}
+        </TypedWebhookCreate>
+      )}
+    </SearchServiceAccount>
   );
 };
 WebhooksCreate.displayName = "WebhooksCreate";

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