Fix service account search

src/containers/SearchServiceAccount/index.tsx

@@ -1,24 +1,34 @@
 import gql from "graphql-tag";
 
-import BaseSearch from "../BaseSearch";
+import { pageInfoFragment } from "@saleor/queries";
+import TopLevelSearch from "../TopLevelSearch";
 import {
   SearchServiceAccount,
   SearchServiceAccountVariables
 } from "./types/searchServiceAccount";
 
 export const searchServiceAccount = gql`
+  ${pageInfoFragment}
   query SearchServiceAccount($after: String, $first: Int!, $query: String!) {
-    serviceAccounts(after: $after, first: $first, filter: { search: $query }) {
+    search: serviceAccounts(
+      after: $after
+      first: $first
+      filter: { search: $query }
+    ) {
       edges {
         node {
           id
           name
         }
       }
+      pageInfo {
+        ...PageInfoFragment
+      }
     }
   }
 `;
 
-export default BaseSearch<SearchServiceAccount, SearchServiceAccountVariables>(
-  searchServiceAccount
-);
+export default TopLevelSearch<
+  SearchServiceAccount,
+  SearchServiceAccountVariables
+>(searchServiceAccount);

src/containers/SearchServiceAccount/types/searchServiceAccount.ts

@@ -6,24 +6,33 @@
 // GraphQL query operation: SearchServiceAccount
 // ====================================================
 
-export interface SearchServiceAccount_serviceAccounts_edges_node {
+export interface SearchServiceAccount_search_edges_node {
   __typename: "ServiceAccount";
   id: string;
   name: string | null;
 }
 
-export interface SearchServiceAccount_serviceAccounts_edges {
+export interface SearchServiceAccount_search_edges {
   __typename: "ServiceAccountCountableEdge";
-  node: SearchServiceAccount_serviceAccounts_edges_node;
+  node: SearchServiceAccount_search_edges_node;
 }
 
-export interface SearchServiceAccount_serviceAccounts {
+export interface SearchServiceAccount_search_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
+export interface SearchServiceAccount_search {
   __typename: "ServiceAccountCountableConnection";
-  edges: SearchServiceAccount_serviceAccounts_edges[];
+  edges: SearchServiceAccount_search_edges[];
+  pageInfo: SearchServiceAccount_search_pageInfo;
 }
 
 export interface SearchServiceAccount {
-  serviceAccounts: SearchServiceAccount_serviceAccounts | null;
+  search: SearchServiceAccount_search | null;
 }
 
 export interface SearchServiceAccountVariables {

src/webhooks/components/WebhookCreatePage/WebhookCreatePage.tsx

@@ -6,7 +6,7 @@ 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_serviceAccounts_edges_node } from "@saleor/containers/SearchServiceAccount/types/SearchServiceAccount";
+import { SearchServiceAccount_search_edges_node } from "@saleor/containers/SearchServiceAccount/types/SearchServiceAccount";
 import { sectionNames } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
 import { UserError } from "@saleor/types";
@@ -32,7 +32,7 @@ export interface FormData {
 export interface WebhookCreatePageProps {
   disabled: boolean;
   errors: UserError[];
-  services?: SearchServiceAccount_serviceAccounts_edges_node[];
+  services?: SearchServiceAccount_search_edges_node[];
   saveButtonBarState: ConfirmButtonTransitionState;
   fetchServiceAccounts: (data: string) => void;
   onBack: () => void;

src/webhooks/components/WebhookInfo/WebhookInfo.tsx

@@ -9,9 +9,8 @@ import { useIntl } from "react-intl";
 import CardTitle from "@saleor/components/CardTitle";
 import FormSpacer from "@saleor/components/FormSpacer";
 import Hr from "@saleor/components/Hr";
-import {
-  SingleAutocompleteChoiceType,
-  SingleAutocompleteSelectField
+import SingleAutocompleteSelectField, {
+  SingleAutocompleteChoiceType
 } from "@saleor/components/SingleAutocompleteSelectField";
 import { ChangeEvent } from "@saleor/hooks/useForm";
 import { commonMessages } from "@saleor/intl";

src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx

@@ -6,7 +6,7 @@ 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_serviceAccounts_edges_node } from "@saleor/containers/SearchServiceAccount/types/SearchServiceAccount";
+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";
@@ -36,7 +36,7 @@ export interface WebhooksDetailsPageProps {
   disabled: boolean;
   errors: UserError[];
   webhook: WebhookDetails_webhook;
-  services?: SearchServiceAccount_serviceAccounts_edges_node[];
+  services?: SearchServiceAccount_search_edges_node[];
   saveButtonBarState: ConfirmButtonTransitionState;
   onBack: () => void;
   onDelete: () => void;

src/webhooks/fixtures.ts

@@ -1,8 +1,8 @@
-import { SearchServiceAccount_serviceAccounts_edges_node } from "@saleor/containers/SearchServiceAccount/types/SearchServiceAccount";
+import { SearchServiceAccount_search_edges_node } from "@saleor/containers/SearchServiceAccount/types/SearchServiceAccount";
 import { WebhookDetails_webhook } from "./types/WebhookDetails";
 import { Webhooks_webhooks_edges_node } from "./types/Webhooks";
 
-export const services: SearchServiceAccount_serviceAccounts_edges_node[] = [
+export const services: SearchServiceAccount_search_edges_node[] = [
   {
     __typename: "ServiceAccount",
     id: "Jzx123sEt==",

src/webhooks/views/WebhooksCreate.tsx

@@ -83,7 +83,7 @@ export const WebhooksCreate: React.StatelessComponent<
                   )}
                   fetchServiceAccounts={searchServiceAccount}
                   services={maybe(() =>
-                    searchServiceAccountOpt.data.serviceAccounts.edges.map(
+                    searchServiceAccountOpt.data.search.edges.map(
                       edge => edge.node
                     )
                   )}

src/webhooks/views/WebhooksDetails.tsx

@@ -116,7 +116,7 @@ export const WebhooksDetails: React.FC<WebhooksDetailsProps> = ({
                           webhook={maybe(() => webhookDetails.data.webhook)}
                           fetchServiceAccounts={searchServiceAccount}
                           services={maybe(() =>
-                            searchServiceAccountOpt.data.serviceAccounts.edges.map(
+                            searchServiceAccountOpt.data.search.edges.map(
                               edge => edge.node
                             )
                           )}