diff --git a/src/misc.ts b/src/misc.ts index 4217de160..96bc1f921 100644 --- a/src/misc.ts +++ b/src/misc.ts @@ -11,8 +11,7 @@ import { AuthorizationKeyType, OrderStatus, PaymentChargeStatusEnum, - TaxRateType, - WebhookEventTypeEnum + TaxRateType } from "./types/globalTypes"; export type RequireAtLeastOne = Pick< diff --git a/src/webhooks/components/WebhookCreatePage/WebhookCreatePage.tsx b/src/webhooks/components/WebhookCreatePage/WebhookCreatePage.tsx index 2c5c993fe..ac5de0bfa 100644 --- a/src/webhooks/components/WebhookCreatePage/WebhookCreatePage.tsx +++ b/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<{ - id: string; - name: string; - }>; + services?: SearchServiceAccount_serviceAccounts_edges_node[]; saveButtonBarState: ConfirmButtonTransitionState; - fetchServiceAccount: (data: string) => void; + fetchServiceAccounts: (data: string) => void; onBack: () => void; onSubmit: (data: FormData) => void; } @@ -47,7 +44,7 @@ const WebhookCreatePage: React.StatelessComponent = ({ errors, saveButtonBarState, services, - fetchServiceAccount, + fetchServiceAccounts, onBack, onSubmit }) => { @@ -62,10 +59,9 @@ const WebhookCreatePage: React.StatelessComponent = ({ serviceAccount: "", targetUrl: "" }; - const [ - selectedServiceAcccounts, - setSelectedServiceAcccounts - ] = useStateFromProps(""); + const [selectedServiceAcccount, setSelectedServiceAcccount] = React.useState( + "" + ); const servicesChoiceList = maybe( () => services.map(node => ({ @@ -80,7 +76,7 @@ const WebhookCreatePage: React.StatelessComponent = ({ {({ data, errors, hasChanged, submit, change }) => { const handleServiceSelect = createSingleAutocompleteSelectHandler( change, - setSelectedServiceAcccounts, + setSelectedServiceAcccount, servicesChoiceList ); return ( @@ -99,9 +95,9 @@ const WebhookCreatePage: React.StatelessComponent = ({ undefined, + fetchServiceAccounts: () => undefined, onBack: () => undefined, onSubmit: () => undefined, saveButtonBarState: "default", diff --git a/src/webhooks/components/WebhookDeleteDialog/WebhookDeleteDialog.stories.tsx b/src/webhooks/components/WebhookDeleteDialog/WebhookDeleteDialog.stories.tsx index a21cab3d9..1117de287 100644 --- a/src/webhooks/components/WebhookDeleteDialog/WebhookDeleteDialog.stories.tsx +++ b/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", () => ); diff --git a/src/webhooks/components/WebhookEvents/WebhookEvents.tsx b/src/webhooks/components/WebhookEvents/WebhookEvents.tsx index 3473fe947..21659b006 100644 --- a/src/webhooks/components/WebhookEvents/WebhookEvents.tsx +++ b/src/webhooks/components/WebhookEvents/WebhookEvents.tsx @@ -64,7 +64,7 @@ const WebhookEvents: React.StatelessComponent = ({ name: "events", value: event.target.value ? WebhookEventTypeEnum.ANY_EVENTS : [] } - } as any) + }) ); const handleEventsChange = (event: ChangeEvent) => { @@ -75,7 +75,7 @@ const WebhookEvents: React.StatelessComponent = ({ ? 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 = ({ {!data.allEvents && ( <>
- {eventsEnum.slice(1).map(event => { - return ( -
- -
- ); - })} + {eventsEnum.slice(1).map(event => ( +
+ +
+ ))} )} diff --git a/src/webhooks/components/WebhookInfo/WebhookInfo.tsx b/src/webhooks/components/WebhookInfo/WebhookInfo.tsx index ec2c92118..61585444d 100644 --- a/src/webhooks/components/WebhookInfo/WebhookInfo.tsx +++ b/src/webhooks/components/WebhookInfo/WebhookInfo.tsx @@ -26,7 +26,7 @@ interface WebhookInfoProps { errors: FormErrors<"name" | "targetUrl" | "secretKey">; onChange: (event: React.ChangeEvent) => void; serviceOnChange: (event: ChangeEvent) => void; - fetchServiceAccount: (data: string) => void; + fetchServiceAccounts: (data: string) => void; } const useStyles = makeStyles(() => ({ @@ -45,7 +45,7 @@ const WebhookInfo: React.StatelessComponent = ({ disabled, services, serviceDisplayValue, - fetchServiceAccount, + fetchServiceAccounts, errors, onChange, serviceOnChange @@ -97,7 +97,7 @@ const WebhookInfo: React.StatelessComponent = ({ onChange={serviceOnChange} value={data.serviceAccount} choices={services} - fetchChoices={fetchServiceAccount} + fetchChoices={fetchServiceAccounts} InputProps={{ autoComplete: "off" }} @@ -107,7 +107,7 @@ const WebhookInfo: React.StatelessComponent = ({ 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({ diff --git a/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.stories.tsx b/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.stories.tsx index 9dc02a58c..6742e3126 100644 --- a/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.stories.tsx +++ b/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, diff --git a/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx b/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx index 292635e1e..d1057e2ca 100644 --- a/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx +++ b/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; - services?: Array<{ - id: string; - name: string; - }>; + webhook: WebhookDetails_webhook; + services?: SearchServiceAccount_serviceAccounts_edges_node[]; saveButtonBarState: ConfirmButtonTransitionState; onBack: () => void; onDelete: () => void; - fetchServiceAccount: (data: string) => void; + fetchServiceAccounts: (data: string) => void; onSubmit: (data: FormData) => void; } -const WebhooksDetailsPage: React.StatelessComponent< - WebhooksDetailsPageProps -> = ({ +const WebhooksDetailsPage: React.FC = ({ 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} diff --git a/src/webhooks/components/WebhooksList/WebhooksList.tsx b/src/webhooks/components/WebhooksList/WebhooksList.tsx index 6a41c087f..ac24b79e5 100644 --- a/src/webhooks/components/WebhooksList/WebhooksList.tsx +++ b/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 = ({ settings, diff --git a/src/webhooks/fixtures.ts b/src/webhooks/fixtures.ts index 4149bdb9c..46eab5ef9 100644 --- a/src/webhooks/fixtures.ts +++ b/src/webhooks/fixtures.ts @@ -1,18 +1,16 @@ -import { ServiceList_serviceAccounts_edges_node } from "./types/ServiceList"; -import { Webhook_webhook } from "./types/Webhook"; +import { SearchServiceAccount_serviceAccounts_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: 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==", diff --git a/src/webhooks/queries.ts b/src/webhooks/queries.ts index bee136ee3..bdfdedf4d 100644 --- a/src/webhooks/queries.ts +++ b/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( +export const TypedWebhooksDetailsQuery = TypedQuery( webhooksDetails ); diff --git a/src/webhooks/types/ServiceFragment.ts b/src/webhooks/types/ServiceFragment.ts deleted file mode 100644 index 5c0e96fec..000000000 --- a/src/webhooks/types/ServiceFragment.ts +++ /dev/null @@ -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; -} diff --git a/src/webhooks/types/ServiceList.ts b/src/webhooks/types/ServiceList.ts deleted file mode 100644 index fe971e15d..000000000 --- a/src/webhooks/types/ServiceList.ts +++ /dev/null @@ -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; -} diff --git a/src/webhooks/types/Webhook.ts b/src/webhooks/types/Webhook.ts deleted file mode 100644 index abcdd8141..000000000 --- a/src/webhooks/types/Webhook.ts +++ /dev/null @@ -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; -} diff --git a/src/webhooks/views/WebhooksCreate.tsx b/src/webhooks/views/WebhooksCreate.tsx index 95489131e..afa3c906c 100644 --- a/src/webhooks/views/WebhooksCreate.tsx +++ b/src/webhooks/views/WebhooksCreate.tsx @@ -44,9 +44,9 @@ export const WebhooksCreate: React.StatelessComponent< {({ search: searchServiceAccount, result: searchServiceAccountOpt }) => ( - {(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 diff --git a/src/webhooks/views/WebhooksDetails.tsx b/src/webhooks/views/WebhooksDetails.tsx index 7590634f3..8ed049baf 100644 --- a/src/webhooks/views/WebhooksDetails.tsx +++ b/src/webhooks/views/WebhooksDetails.tsx @@ -26,9 +26,10 @@ export interface WebhooksDetailsProps { params: WebhooksListUrlQueryParams; } -export const WebhooksDetails: React.StatelessComponent< - WebhooksDetailsProps -> = ({ id, params }) => { +export const WebhooksDetails: React.FC = ({ + id, + params +}) => { const navigate = useNavigator(); const notify = useNotifier(); const intl = useIntl(); @@ -78,7 +79,7 @@ export const WebhooksDetails: React.StatelessComponent< {(webhookDelete, webhookDeleteOpts) => ( - {WebhookDetails => { + {webhookDetails => { const formTransitionState = getMutationState( webhookUpdateOpts.called, webhookUpdateOpts.loading, @@ -106,14 +107,14 @@ export const WebhooksDetails: React.StatelessComponent< return ( <> WebhookDetails.data.webhook.name)} + title={maybe(() => webhookDetails.data.webhook.name)} /> WebhookDetails.data.webhook)} - fetchServiceAccount={searchServiceAccount} + webhook={maybe(() => webhookDetails.data.webhook)} + fetchServiceAccounts={searchServiceAccount} services={maybe(() => searchServiceAccountOpt.data.serviceAccounts.edges.map( edge => edge.node @@ -142,7 +143,7 @@ export const WebhooksDetails: React.StatelessComponent< WebhookDetails.data.webhook.name, + () => webhookDetails.data.webhook.name, "..." )} onClose={closeModal} diff --git a/src/webhooks/views/WebhooksList.tsx b/src/webhooks/views/WebhooksList.tsx index 44ed2bdd5..beeeb9b5d 100644 --- a/src/webhooks/views/WebhooksList.tsx +++ b/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 = ({ - params -}) => { +export const WebhooksList: React.FC = ({ params }) => { const navigate = useNavigator(); const paginate = usePaginator(); const notify = useNotifier();