Fix commented issues

src/misc.ts

@@ -11,8 +11,7 @@ import {
   AuthorizationKeyType,
   OrderStatus,
   PaymentChargeStatusEnum,
-  TaxRateType,
+  TaxRateType
-  WebhookEventTypeEnum
 } from "./types/globalTypes";
 
 export type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<

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 useStateFromProps from "@saleor/hooks/useStateFromProps";
+import { SearchServiceAccount_serviceAccounts_edges_node } from "@saleor/containers/SearchServiceAccount/types/SearchServiceAccount";
 import { sectionNames } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
 import { UserError } from "@saleor/types";
@@ -32,12 +32,9 @@ export interface FormData {
 export interface WebhookCreatePageProps {
   disabled: boolean;
   errors: UserError[];
-  services?: Array<{
+  services?: SearchServiceAccount_serviceAccounts_edges_node[];
-    id: string;
-    name: string;
-  }>;
   saveButtonBarState: ConfirmButtonTransitionState;
-  fetchServiceAccount: (data: string) => void;
+  fetchServiceAccounts: (data: string) => void;
   onBack: () => void;
   onSubmit: (data: FormData) => void;
 }
@@ -47,7 +44,7 @@ const WebhookCreatePage: React.StatelessComponent<WebhookCreatePageProps> = ({
   errors,
   saveButtonBarState,
   services,
-  fetchServiceAccount,
+  fetchServiceAccounts,
   onBack,
   onSubmit
 }) => {
@@ -62,10 +59,9 @@ const WebhookCreatePage: React.StatelessComponent<WebhookCreatePageProps> = ({
     serviceAccount: "",
     targetUrl: ""
   };
-  const [
+  const [selectedServiceAcccount, setSelectedServiceAcccount] = React.useState(
-    selectedServiceAcccounts,
+    ""
-    setSelectedServiceAcccounts
+  );
-  ] = useStateFromProps("");
   const servicesChoiceList = maybe(
     () =>
       services.map(node => ({
@@ -80,7 +76,7 @@ const WebhookCreatePage: React.StatelessComponent<WebhookCreatePageProps> = ({
       {({ data, errors, hasChanged, submit, change }) => {
         const handleServiceSelect = createSingleAutocompleteSelectHandler(
           change,
-          setSelectedServiceAcccounts,
+          setSelectedServiceAcccount,
           servicesChoiceList
         );
         return (
@@ -99,9 +95,9 @@ const WebhookCreatePage: React.StatelessComponent<WebhookCreatePageProps> = ({
                 <WebhookInfo
                   data={data}
                   disabled={disabled}
-                  serviceDisplayValue={selectedServiceAcccounts}
+                  serviceDisplayValue={selectedServiceAcccount}
                   services={servicesChoiceList}
-                  fetchServiceAccount={fetchServiceAccount}
+                  fetchServiceAccounts={fetchServiceAccounts}
                   errors={errors}
                   serviceOnChange={handleServiceSelect}
                   onChange={change}

src/webhooks/components/WebhookCreatePage/WebhooksCreatePage.stories.tsx

@@ -8,7 +8,7 @@ import WebhookCreatePage, { WebhookCreatePageProps } from "./WebhookCreatePage";
 const props: WebhookCreatePageProps = {
   disabled: false,
   errors: [],
-  fetchServiceAccount: () => undefined,
+  fetchServiceAccounts: () => undefined,
   onBack: () => undefined,
   onSubmit: () => undefined,
   saveButtonBarState: "default",

src/webhooks/components/WebhookDeleteDialog/WebhookDeleteDialog.stories.tsx

@@ -14,6 +14,6 @@ const props: WebhookDeleteDialogProps = {
   open: true
 };
 
-storiesOf("Views / Services / Delete service", module)
+storiesOf("Views / Webhooks / Delete webhook", module)
   .addDecorator(Decorator)
   .add("default", () => <WebhookDeleteDialog {...props} />);

src/webhooks/components/WebhookEvents/WebhookEvents.tsx

@@ -64,7 +64,7 @@ const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
           name: "events",
           value: event.target.value ? WebhookEventTypeEnum.ANY_EVENTS : []
         }
-      } as any)
+      })
     );
 
   const handleEventsChange = (event: ChangeEvent) => {
@@ -75,7 +75,7 @@ const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
           ? data.events.concat([event.target.name])
           : data.events.filter(events => events !== event.target.name)
       }
-    } as any);
+    });
   };
 
   return (
@@ -104,19 +104,17 @@ const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
         {!data.allEvents && (
           <>
             <Hr />
-            {eventsEnum.slice(1).map(event => {
+            {eventsEnum.slice(1).map(event => (
-              return (
+              <div key={event}>
-                <div key={event}>
+                <ControlledCheckbox
-                  <ControlledCheckbox
+                  checked={data.events.includes(event)}
-                    checked={data.events.includes(event)}
+                  disabled={disabled}
-                    disabled={disabled}
+                  label={translatedEvents[event]}
-                    label={translatedEvents[event]}
+                  name={event}
-                    name={event}
+                  onChange={handleEventsChange}
-                    onChange={handleEventsChange}
+                />
-                  />
+              </div>
-                </div>
+            ))}
-              );
-            })}
           </>
         )}
       </CardContent>

src/webhooks/components/WebhookInfo/WebhookInfo.tsx

@@ -26,7 +26,7 @@ interface WebhookInfoProps {
   errors: FormErrors<"name" | "targetUrl" | "secretKey">;
   onChange: (event: React.ChangeEvent<any>) => void;
   serviceOnChange: (event: ChangeEvent) => void;
-  fetchServiceAccount: (data: string) => void;
+  fetchServiceAccounts: (data: string) => void;
 }
 
 const useStyles = makeStyles(() => ({
@@ -45,7 +45,7 @@ const WebhookInfo: React.StatelessComponent<WebhookInfoProps> = ({
   disabled,
   services,
   serviceDisplayValue,
-  fetchServiceAccount,
+  fetchServiceAccounts,
   errors,
   onChange,
   serviceOnChange
@@ -97,7 +97,7 @@ const WebhookInfo: React.StatelessComponent<WebhookInfoProps> = ({
           onChange={serviceOnChange}
           value={data.serviceAccount}
           choices={services}
-          fetchChoices={fetchServiceAccount}
+          fetchChoices={fetchServiceAccounts}
           InputProps={{
             autoComplete: "off"
           }}
@@ -107,7 +107,7 @@ const WebhookInfo: React.StatelessComponent<WebhookInfoProps> = ({
           disabled={disabled}
           error={!!errors.targetUrl}
           helperText={intl.formatMessage({
-            defaultMessage: "This URL will recieve webhook POST requests",
+            defaultMessage: "This URL will receive webhook POST requests",
             description: "webhook target url help text"
           })}
           label={intl.formatMessage({

src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.stories.tsx

@@ -10,7 +10,7 @@ import WebhooksDetailsPage, {
 const props: WebhooksDetailsPageProps = {
   disabled: false,
   errors: [],
-  fetchServiceAccount: () => undefined,
+  fetchServiceAccounts: () => undefined,
   onBack: () => undefined,
   onDelete: () => undefined,
   onSubmit: () => undefined,

src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx

@@ -6,6 +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 useStateFromProps from "@saleor/hooks/useStateFromProps";
 import { sectionNames } from "@saleor/intl";
 import { maybe } from "@saleor/misc";
@@ -15,7 +16,7 @@ import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/single
 import WebhookEvents from "@saleor/webhooks/components/WebhookEvents";
 import WebhookInfo from "@saleor/webhooks/components/WebhookInfo";
 import WebhookStatus from "@saleor/webhooks/components/WebhookStatus";
-import { Webhook_webhook } from "@saleor/webhooks/types/Webhook";
+import { WebhookDetails_webhook } from "@saleor/webhooks/types/WebhookDetails";
 
 import React from "react";
 import { useIntl } from "react-intl";
@@ -34,27 +35,22 @@ export interface FormData {
 export interface WebhooksDetailsPageProps {
   disabled: boolean;
   errors: UserError[];
-  webhook: Webhook_webhook;
+  webhook: WebhookDetails_webhook;
-  services?: Array<{
+  services?: SearchServiceAccount_serviceAccounts_edges_node[];
-    id: string;
-    name: string;
-  }>;
   saveButtonBarState: ConfirmButtonTransitionState;
   onBack: () => void;
   onDelete: () => void;
-  fetchServiceAccount: (data: string) => void;
+  fetchServiceAccounts: (data: string) => void;
   onSubmit: (data: FormData) => void;
 }
 
-const WebhooksDetailsPage: React.StatelessComponent<
+const WebhooksDetailsPage: React.FC<WebhooksDetailsPageProps> = ({
-  WebhooksDetailsPageProps
-> = ({
   disabled,
   errors,
   webhook,
   saveButtonBarState,
   services,
-  fetchServiceAccount,
+  fetchServiceAccounts,
   onBack,
   onDelete,
   onSubmit
@@ -115,7 +111,7 @@ const WebhooksDetailsPage: React.StatelessComponent<
                   disabled={disabled}
                   serviceDisplayValue={selectedServiceAcccounts}
                   services={servicesChoiceList}
-                  fetchServiceAccount={fetchServiceAccount}
+                  fetchServiceAccounts={fetchServiceAccounts}
                   errors={errors}
                   serviceOnChange={handleServiceSelect}
                   onChange={change}

src/webhooks/components/WebhooksList/WebhooksList.tsx

@@ -43,7 +43,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   }
 }));
 
-const numberOfColumns = 4;
+const numberOfColumns = 3;
 
 const WebhooksList: React.FC<WebhooksListProps> = ({
   settings,

src/webhooks/fixtures.ts

@@ -1,18 +1,16 @@
-import { ServiceList_serviceAccounts_edges_node } from "./types/ServiceList";
+import { SearchServiceAccount_serviceAccounts_edges_node } from "@saleor/containers/SearchServiceAccount/types/SearchServiceAccount";
-import { Webhook_webhook } from "./types/Webhook";
+import { WebhookDetails_webhook } from "./types/WebhookDetails";
 import { Webhooks_webhooks_edges_node } from "./types/Webhooks";
 
-export const services: ServiceList_serviceAccounts_edges_node[] = [
+export const services: SearchServiceAccount_serviceAccounts_edges_node[] = [
   {
     __typename: "ServiceAccount",
     id: "Jzx123sEt==",
-    isActive: true,
     name: "Facebook"
   },
   {
     __typename: "ServiceAccount",
     id: "Jzx123sEt==",
-    isActive: false,
     name: "Twittwe"
   }
 ];
@@ -26,7 +24,7 @@ export const webhookList: Webhooks_webhooks_edges_node[] = [
       __typename: "ServiceAccount",
       id: "Jzx123sEt==",
       name: "Test Account"
-    },
+    }
   },
   {
     __typename: "Webhook",
@@ -37,10 +35,10 @@ export const webhookList: Webhooks_webhooks_edges_node[] = [
       __typename: "ServiceAccount",
       id: "Jzx1ss23sEt==",
       name: "Test Account 2"
-    },
+    }
   }
 ];
-export const webhook: Webhook_webhook = {
+export const webhook: WebhookDetails_webhook = {
   __typename: "Webhook",
   events: [],
   id: "Jzx123sEt==",

src/webhooks/queries.ts

@@ -1,7 +1,7 @@
 import gql from "graphql-tag";
 
 import { TypedQuery } from "../queries";
-import { Webhook, WebhookVariables } from "./types/Webhook";
+import { WebhookDetails, WebhookDetailsVariables } from "./types/WebhookDetails";
 import { Webhooks, WebhooksVariables } from "./types/Webhooks";
 
 export const webhooksFragment = gql`
@@ -70,6 +70,6 @@ const webhooksDetails = gql`
     }
   }
 `;
-export const TypedWebhooksDetailsQuery = TypedQuery<Webhook, WebhookVariables>(
+export const TypedWebhooksDetailsQuery = TypedQuery<WebhookDetails, WebhookDetailsVariables>(
   webhooksDetails
 );

src/webhooks/types/ServiceFragment.ts

@@ -1,14 +0,0 @@
-/* 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;
-}

src/webhooks/types/ServiceList.ts

@@ -1,44 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// This file was automatically generated and should not be edited.
-
-// ====================================================
-// 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;
-}

src/webhooks/types/Webhook.ts

@@ -1,39 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// This file was automatically generated and should not be edited.
-
-import { WebhookEventTypeEnum } from "./../../types/globalTypes";
-
-// ====================================================
-// GraphQL query operation: Webhook
-// ====================================================
-
-export interface Webhook_webhook_events {
-  __typename: "WebhookEvent";
-  eventType: WebhookEventTypeEnum | null;
-}
-
-export interface Webhook_webhook_serviceAccount {
-  __typename: "ServiceAccount";
-  id: string;
-  name: string | null;
-}
-
-export interface Webhook_webhook {
-  __typename: "Webhook";
-  id: string;
-  name: string | null;
-  events: (Webhook_webhook_events | null)[] | null;
-  isActive: boolean;
-  secretKey: string | null;
-  targetUrl: string;
-  serviceAccount: Webhook_webhook_serviceAccount;
-}
-
-export interface Webhook {
-  webhook: Webhook_webhook | null;
-}
-
-export interface WebhookVariables {
-  id: string;
-}

src/webhooks/views/WebhooksCreate.tsx

@@ -44,9 +44,9 @@ export const WebhooksCreate: React.StatelessComponent<
     <SearchServiceAccount variables={DEFAULT_INITIAL_SEARCH_DATA}>
       {({ search: searchServiceAccount, result: searchServiceAccountOpt }) => (
         <TypedWebhookCreate onCompleted={onSubmit}>
-          {(WebhookCreate, webhookCreateOpts) => {
+          {(webhookCreate, webhookCreateOpts) => {
             const handleSubmit = (data: FormData) =>
-              WebhookCreate({
+              webhookCreate({
                 variables: {
                   input: {
                     events: data.allEvents
@@ -81,7 +81,7 @@ export const WebhooksCreate: React.StatelessComponent<
                     () => webhookCreateOpts.data.webhookCreate.errors,
                     []
                   )}
-                  fetchServiceAccount={searchServiceAccount}
+                  fetchServiceAccounts={searchServiceAccount}
                   services={maybe(() =>
                     searchServiceAccountOpt.data.serviceAccounts.edges.map(
                       edge => edge.node

src/webhooks/views/WebhooksDetails.tsx

@@ -26,9 +26,10 @@ export interface WebhooksDetailsProps {
   params: WebhooksListUrlQueryParams;
 }
 
-export const WebhooksDetails: React.StatelessComponent<
+export const WebhooksDetails: React.FC<WebhooksDetailsProps> = ({
-  WebhooksDetailsProps
+  id,
-> = ({ id, params }) => {
+  params
+}) => {
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
@@ -78,7 +79,7 @@ export const WebhooksDetails: React.StatelessComponent<
             <TypedWebhookDelete onCompleted={onWebhookDelete}>
               {(webhookDelete, webhookDeleteOpts) => (
                 <TypedWebhooksDetailsQuery variables={{ id }}>
-                  {WebhookDetails => {
+                  {webhookDetails => {
                     const formTransitionState = getMutationState(
                       webhookUpdateOpts.called,
                       webhookUpdateOpts.loading,
@@ -106,14 +107,14 @@ export const WebhooksDetails: React.StatelessComponent<
                     return (
                       <>
                         <WindowTitle
-                          title={maybe(() => WebhookDetails.data.webhook.name)}
+                          title={maybe(() => webhookDetails.data.webhook.name)}
                         />
                         <WebhooksDetailsPage
-                          disabled={WebhookDetails.loading}
+                          disabled={webhookDetails.loading}
                           errors={formErrors}
                           saveButtonBarState={formTransitionState}
-                          webhook={maybe(() => WebhookDetails.data.webhook)}
+                          webhook={maybe(() => webhookDetails.data.webhook)}
-                          fetchServiceAccount={searchServiceAccount}
+                          fetchServiceAccounts={searchServiceAccount}
                           services={maybe(() =>
                             searchServiceAccountOpt.data.serviceAccounts.edges.map(
                               edge => edge.node
@@ -142,7 +143,7 @@ export const WebhooksDetails: React.StatelessComponent<
                         <WebhookDeleteDialog
                           confirmButtonState={deleteTransitionState}
                           name={maybe(
-                            () => WebhookDetails.data.webhook.name,
+                            () => webhookDetails.data.webhook.name,
                             "..."
                           )}
                           onClose={closeModal}

src/webhooks/views/WebhooksList.tsx

@@ -20,7 +20,8 @@ import { useIntl } from "react-intl";
 import WebhooksListPage from "../components/WebhooksListPage/WebhooksListPage";
 import { TypedWebhookDelete } from "../mutations";
 import { TypedWebhooksListQuery } from "../queries";
-import { WebhookListUrlDialog,
+import {
+  WebhookListUrlDialog,
   WebhookListUrlFilters,
   webhooksAddUrl,
   webhooksListUrl,
@@ -40,9 +41,7 @@ interface WebhooksListProps {
   params: WebhooksListUrlQueryParams;
 }
 
-export const WebhooksList: React.StatelessComponent<WebhooksListProps> = ({
+export const WebhooksList: React.FC<WebhooksListProps> = ({ params }) => {
-  params
-}) => {
   const navigate = useNavigator();
   const paginate = usePaginator();
   const notify = useNotifier();