132 lines
4.2 KiB
TypeScript
132 lines
4.2 KiB
TypeScript
import AppHeader from "@saleor/components/AppHeader";
|
|
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
|
|
import Container from "@saleor/components/Container";
|
|
import Form from "@saleor/components/Form";
|
|
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 { 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";
|
|
import WebhookInfo from "@saleor/webhooks/components/WebhookInfo";
|
|
import WebhookStatus from "@saleor/webhooks/components/WebhookStatus";
|
|
import { WebhookCreate_webhookCreate_webhookErrors } from "@saleor/webhooks/types/WebhookCreate";
|
|
import React from "react";
|
|
import { useIntl } from "react-intl";
|
|
|
|
export interface FormData {
|
|
events: WebhookEventTypeEnum[];
|
|
isActive: boolean;
|
|
name: string;
|
|
secretKey: string | null;
|
|
targetUrl: string;
|
|
serviceAccount: string;
|
|
allEvents: boolean;
|
|
}
|
|
|
|
export interface WebhookCreatePageProps {
|
|
disabled: boolean;
|
|
errors: WebhookCreate_webhookCreate_webhookErrors[];
|
|
services?: SearchServiceAccount_search_edges_node[];
|
|
saveButtonBarState: ConfirmButtonTransitionState;
|
|
fetchServiceAccounts: (data: string) => void;
|
|
onBack: () => void;
|
|
onSubmit: (data: FormData) => void;
|
|
}
|
|
|
|
const WebhookCreatePage: React.FC<WebhookCreatePageProps> = ({
|
|
disabled,
|
|
errors: apiErrors,
|
|
saveButtonBarState,
|
|
services,
|
|
fetchServiceAccounts,
|
|
onBack,
|
|
onSubmit
|
|
}) => {
|
|
const intl = useIntl();
|
|
const initialForm: FormData = {
|
|
allEvents: false,
|
|
events: [],
|
|
isActive: false,
|
|
name: "",
|
|
secretKey: "",
|
|
serviceAccount: "",
|
|
targetUrl: ""
|
|
};
|
|
const [selectedServiceAcccount, setSelectedServiceAcccount] = React.useState(
|
|
""
|
|
);
|
|
const servicesChoiceList = maybe(
|
|
() =>
|
|
services.map(node => ({
|
|
label: node.name,
|
|
value: node.id
|
|
})),
|
|
[]
|
|
);
|
|
|
|
return (
|
|
<Form errors={apiErrors} initial={initialForm} onSubmit={onSubmit}>
|
|
{({ data, errors, hasChanged, submit, change }) => {
|
|
const handleServiceSelect = createSingleAutocompleteSelectHandler(
|
|
change,
|
|
setSelectedServiceAcccount,
|
|
servicesChoiceList
|
|
);
|
|
return (
|
|
<Container>
|
|
<AppHeader onBack={onBack}>
|
|
{intl.formatMessage(sectionNames.webhooks)}
|
|
</AppHeader>
|
|
<PageHeader
|
|
title={intl.formatMessage({
|
|
defaultMessage: "Create Webhook",
|
|
description: "header"
|
|
})}
|
|
/>
|
|
<Grid>
|
|
<div>
|
|
<WebhookInfo
|
|
data={data}
|
|
disabled={disabled}
|
|
serviceDisplayValue={selectedServiceAcccount}
|
|
services={servicesChoiceList}
|
|
fetchServiceAccounts={fetchServiceAccounts}
|
|
apiErrors={apiErrors}
|
|
errors={errors}
|
|
serviceOnChange={handleServiceSelect}
|
|
onChange={change}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<WebhookEvents
|
|
data={data}
|
|
disabled={disabled}
|
|
onChange={change}
|
|
/>
|
|
<FormSpacer />
|
|
<WebhookStatus
|
|
data={data.isActive}
|
|
disabled={disabled}
|
|
onChange={change}
|
|
/>
|
|
</div>
|
|
</Grid>
|
|
<SaveButtonBar
|
|
disabled={disabled || !hasChanged}
|
|
state={saveButtonBarState}
|
|
onCancel={onBack}
|
|
onSave={submit}
|
|
/>
|
|
</Container>
|
|
);
|
|
}}
|
|
</Form>
|
|
);
|
|
};
|
|
WebhookCreatePage.displayName = "WebhookCreatePage";
|
|
export default WebhookCreatePage;
|