Use service account search hook

src/hooks/makeTopLevelSearch.ts

@@ -43,3 +43,5 @@ function makeTopLevelSearch<
     }
   });
 }
+
+export default makeTopLevelSearch;

src/searches/useServiceAccountSearch.ts

@@ -1,7 +1,7 @@
 import gql from "graphql-tag";
 
+import makeTopLevelSearch from "@saleor/hooks/makeTopLevelSearch";
 import { pageInfoFragment } from "@saleor/queries";
-import TopLevelSearch from "../TopLevelSearch";
 import {
   SearchServiceAccount,
   SearchServiceAccountVariables
@@ -28,7 +28,7 @@ export const searchServiceAccount = gql`
   }
 `;
 
-export default TopLevelSearch<
+export default makeTopLevelSearch<
   SearchServiceAccount,
   SearchServiceAccountVariables
 >(searchServiceAccount);

src/webhooks/components/WebhookCreatePage/WebhookCreatePage.tsx

@@ -6,9 +6,9 @@ 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 { SearchServiceAccount_search_edges_node } from "@saleor/containers/SearchServiceAccount/types/SearchServiceAccount";
 import { sectionNames } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
+import { SearchServiceAccount_search_edges_node } from "@saleor/searches/types/SearchServiceAccount";
 import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
 import WebhookEvents from "@saleor/webhooks/components/WebhookEvents";
@@ -19,7 +19,6 @@ import React from "react";
 import { useIntl } from "react-intl";
 
 export interface FormData {
-  id: string;
   events: WebhookEventTypeEnum[];
   isActive: boolean;
   name: string;
@@ -52,9 +51,8 @@ const WebhookCreatePage: React.FC<WebhookCreatePageProps> = ({
   const initialForm: FormData = {
     allEvents: false,
     events: [],
-    id: null,
     isActive: false,
-    name: null,
+    name: "",
     secretKey: "",
     serviceAccount: "",
     targetUrl: ""

src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx

@@ -1,3 +1,6 @@
+import React from "react";
+import { useIntl } from "react-intl";
+
 import AppHeader from "@saleor/components/AppHeader";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Container from "@saleor/components/Container";
@@ -6,10 +9,10 @@ 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 { SearchServiceAccount_search_edges_node } from "@saleor/containers/SearchServiceAccount/types/SearchServiceAccount";
 import useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { sectionNames } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
+import { SearchServiceAccount_search_edges_node } from "@saleor/searches/types/SearchServiceAccount";
 import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
 import WebhookEvents from "@saleor/webhooks/components/WebhookEvents";
@@ -18,11 +21,7 @@ import WebhookStatus from "@saleor/webhooks/components/WebhookStatus";
 import { WebhookCreate_webhookCreate_webhookErrors } from "@saleor/webhooks/types/WebhookCreate";
 import { WebhookDetails_webhook } from "@saleor/webhooks/types/WebhookDetails";
 
-import React from "react";
-import { useIntl } from "react-intl";
-
 export interface FormData {
-  id: string;
   events: WebhookEventTypeEnum[];
   isActive: boolean;
   name: string;
@@ -63,7 +62,6 @@ const WebhooksDetailsPage: React.FC<WebhooksDetailsPageProps> = ({
     events: maybe(() => webhook.events, [])
       .map(event => event.eventType)
       .filter(event => event !== WebhookEventTypeEnum.ANY_EVENTS),
-    id: maybe(() => webhook.id, null),
     isActive: maybe(() => webhook.isActive, false),
     name: maybe(() => webhook.name, ""),
     secretKey: maybe(() => webhook.secretKey, ""),

src/webhooks/views/WebhooksCreate.tsx

@@ -1,8 +1,8 @@
 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";
+import useServiceAccountSearch from "@saleor/searches/useServiceAccountSearch";
 import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
 import { WebhookCreate as WebhookCreateData } from "@saleor/webhooks/types/WebhookCreate";
 import React from "react";
@@ -26,6 +26,12 @@ export const WebhooksCreate: React.FC<WebhooksCreateProps> = () => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
+  const {
+    search: searchServiceAccount,
+    result: searchServiceAccountOpt
+  } = useServiceAccountSearch({
+    variables: DEFAULT_INITIAL_SEARCH_DATA
+  });
 
   const onSubmit = (data: WebhookCreateData) => {
     if (data.webhookCreate.webhookErrors.length === 0) {
@@ -39,8 +45,6 @@ export const WebhooksCreate: React.FC<WebhooksCreateProps> = () => {
   const handleBack = () => navigate(webhooksListUrl());
 
   return (
-    <SearchServiceAccount variables={DEFAULT_INITIAL_SEARCH_DATA}>
-      {({ search: searchServiceAccount, result: searchServiceAccountOpt }) => (
     <TypedWebhookCreate onCompleted={onSubmit}>
       {(webhookCreate, webhookCreateOpts) => {
         const handleSubmit = (data: FormData) =>
@@ -81,9 +85,7 @@ export const WebhooksCreate: React.FC<WebhooksCreateProps> = () => {
               )}
               fetchServiceAccounts={searchServiceAccount}
               services={maybe(() =>
-                    searchServiceAccountOpt.data.search.edges.map(
+                searchServiceAccountOpt.data.search.edges.map(edge => edge.node)
-                      edge => edge.node
-                    )
               )}
               onBack={handleBack}
               onSubmit={handleSubmit}
@@ -93,8 +95,6 @@ export const WebhooksCreate: React.FC<WebhooksCreateProps> = () => {
         );
       }}
     </TypedWebhookCreate>
-      )}
-    </SearchServiceAccount>
   );
 };
 WebhooksCreate.displayName = "WebhooksCreate";

src/webhooks/views/WebhooksDetails.tsx

@@ -1,14 +1,15 @@
+import React from "react";
+import { useIntl } from "react-intl";
+
 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";
+import useServiceAccountSearch from "@saleor/searches/useServiceAccountSearch";
 import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
 import WebhookDeleteDialog from "@saleor/webhooks/components/WebhookDeleteDialog";
 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";
@@ -33,6 +34,12 @@ export const WebhooksDetails: React.FC<WebhooksDetailsProps> = ({
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
+  const {
+    search: searchServiceAccount,
+    result: searchServiceAccountOpt
+  } = useServiceAccountSearch({
+    variables: DEFAULT_INITIAL_SEARCH_DATA
+  });
 
   const closeModal = () =>
     navigate(
@@ -72,8 +79,6 @@ export const WebhooksDetails: React.FC<WebhooksDetailsProps> = ({
   };
 
   return (
-    <SearchServiceAccount variables={DEFAULT_INITIAL_SEARCH_DATA}>
-      {({ search: searchServiceAccount, result: searchServiceAccountOpt }) => (
     <TypedWebhookUpdate onCompleted={onWebhookUpdate}>
       {(webhookUpdate, webhookUpdateOpts) => (
         <TypedWebhookDelete onCompleted={onWebhookDelete}>
@@ -160,8 +165,6 @@ export const WebhooksDetails: React.FC<WebhooksDetailsProps> = ({
         </TypedWebhookDelete>
       )}
     </TypedWebhookUpdate>
-      )}
-    </SearchServiceAccount>
   );
 };
 WebhooksDetails.displayName = "WebhooksDetails";