From 834addf3c0800227470cee814ba90b7456f00621 Mon Sep 17 00:00:00 2001 From: Krzysztof Bialoglowicz Date: Thu, 10 Oct 2019 07:38:21 +0200 Subject: [PATCH] Add webhook delete --- .../WebhookCreatePage/WebhookCreatePage.tsx | 32 ++- .../WebhookDeleteDialog.stories.tsx | 19 ++ .../WebhookDeleteDialog.tsx | 50 +++++ .../components/WebhookDeleteDialog/index.ts | 2 + .../WebhookEvents/WebhookEvents.tsx | 11 +- .../WebhookStatus/WebhookStatus.tsx | 1 - .../WebhooksDetailsPage.tsx | 9 +- .../components/WebhooksList/WebhooksList.tsx | 12 ++ .../WebhooksListPage/WebhooksListPage.tsx | 3 + src/webhooks/mutations.ts | 2 +- src/webhooks/urls.ts | 10 +- src/webhooks/views/WebhooksCreate.tsx | 9 +- src/webhooks/views/WebhooksDetails.tsx | 200 ++++++++++++------ src/webhooks/views/WebhooksList.tsx | 129 ++++++++--- 14 files changed, 358 insertions(+), 131 deletions(-) create mode 100644 src/webhooks/components/WebhookDeleteDialog/WebhookDeleteDialog.stories.tsx create mode 100644 src/webhooks/components/WebhookDeleteDialog/WebhookDeleteDialog.tsx create mode 100644 src/webhooks/components/WebhookDeleteDialog/index.ts diff --git a/src/webhooks/components/WebhookCreatePage/WebhookCreatePage.tsx b/src/webhooks/components/WebhookCreatePage/WebhookCreatePage.tsx index 496792fd2..6b92e9841 100644 --- a/src/webhooks/components/WebhookCreatePage/WebhookCreatePage.tsx +++ b/src/webhooks/components/WebhookCreatePage/WebhookCreatePage.tsx @@ -12,14 +12,13 @@ import { UserError } from "@saleor/types"; import React from "react"; import { useIntl } from "react-intl"; import { ServiceList_serviceAccounts_edges_node } from "../../types/ServiceList"; -import { Webhook_webhook, Webhook_webhook_events } from "../../types/Webhook"; import WebhookEvents from "../WebhookEvents"; import WebhookInfo from "../WebhookInfo"; import WebhookStatus from "../WebhookStatus"; export interface FormData { id: string; - events: Webhook_webhook_events[]; + events: string[]; isActive: boolean; name: string; secretKey: string | null; @@ -30,7 +29,6 @@ export interface FormData { export interface WebhookCreatePageProps { disabled: boolean; errors: UserError[]; - webhook: Webhook_webhook; services: ServiceList_serviceAccounts_edges_node[]; saveButtonBarState: ConfirmButtonTransitionState; onBack: () => void; @@ -40,7 +38,6 @@ export interface WebhookCreatePageProps { const WebhookCreatePage: React.StatelessComponent = ({ disabled, errors, - webhook, saveButtonBarState, services, onBack, @@ -48,13 +45,13 @@ const WebhookCreatePage: React.StatelessComponent = ({ }) => { const intl = useIntl(); const initialForm: FormData = { - events: maybe(() => webhook.events, []), - id: maybe(() => webhook.id, null), - isActive: maybe(() => webhook.isActive, false), - name: maybe(() => webhook.name, null), - secretKey: maybe(() => webhook.secretKey, ""), - serviceAccount: maybe(() => webhook.serviceAccount, ""), - targetUrl: maybe(() => webhook.targetUrl, "") + events: [], + id: null, + isActive: false, + name: null, + secretKey: "", + serviceAccount: "", + targetUrl: "" }; return ( @@ -66,15 +63,10 @@ const WebhookCreatePage: React.StatelessComponent = ({ {intl.formatMessage(sectionNames.plugins)} webhook.name, "...") - } - )} + title={intl.formatMessage({ + defaultMessage: "Create Webhook", + description: "header" + })} />
diff --git a/src/webhooks/components/WebhookDeleteDialog/WebhookDeleteDialog.stories.tsx b/src/webhooks/components/WebhookDeleteDialog/WebhookDeleteDialog.stories.tsx new file mode 100644 index 000000000..a21cab3d9 --- /dev/null +++ b/src/webhooks/components/WebhookDeleteDialog/WebhookDeleteDialog.stories.tsx @@ -0,0 +1,19 @@ +import { storiesOf } from "@storybook/react"; +import React from "react"; + +import Decorator from "@saleor/storybook/Decorator"; +import WebhookDeleteDialog, { + WebhookDeleteDialogProps +} from "./WebhookDeleteDialog"; + +const props: WebhookDeleteDialogProps = { + confirmButtonState: "default", + name: "Magento Importer", + onClose: () => undefined, + onConfirm: () => undefined, + open: true +}; + +storiesOf("Views / Services / Delete service", module) + .addDecorator(Decorator) + .add("default", () => ); diff --git a/src/webhooks/components/WebhookDeleteDialog/WebhookDeleteDialog.tsx b/src/webhooks/components/WebhookDeleteDialog/WebhookDeleteDialog.tsx new file mode 100644 index 000000000..05700fefc --- /dev/null +++ b/src/webhooks/components/WebhookDeleteDialog/WebhookDeleteDialog.tsx @@ -0,0 +1,50 @@ +import DialogContentText from "@material-ui/core/DialogContentText"; +import React from "react"; +import { FormattedMessage, useIntl } from "react-intl"; + +import ActionDialog from "@saleor/components/ActionDialog"; +import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; + +export interface WebhookDeleteDialogProps { + confirmButtonState: ConfirmButtonTransitionState; + open: boolean; + name: string; + onClose: () => void; + onConfirm: () => void; +} + +const WebhookDeleteDialog: React.FC = ({ + confirmButtonState, + open, + name, + onClose, + onConfirm +}) => { + const intl = useIntl(); + + return ( + + + {name} + }} + /> + + + ); +}; +WebhookDeleteDialog.displayName = "WebhookDeleteDialog"; +export default WebhookDeleteDialog; diff --git a/src/webhooks/components/WebhookDeleteDialog/index.ts b/src/webhooks/components/WebhookDeleteDialog/index.ts new file mode 100644 index 000000000..4f47146e4 --- /dev/null +++ b/src/webhooks/components/WebhookDeleteDialog/index.ts @@ -0,0 +1,2 @@ +export { default } from "./WebhookDeleteDialog"; +export * from "./WebhookDeleteDialog"; diff --git a/src/webhooks/components/WebhookEvents/WebhookEvents.tsx b/src/webhooks/components/WebhookEvents/WebhookEvents.tsx index b9e364b6b..a0f8792b1 100644 --- a/src/webhooks/components/WebhookEvents/WebhookEvents.tsx +++ b/src/webhooks/components/WebhookEvents/WebhookEvents.tsx @@ -28,7 +28,7 @@ const WebhookEvents: React.StatelessComponent = ({ onChange }) => { const intl = useIntl(); - const [events, setEvents] = React.useState(); + const [events, setEvents] = React.useState(data.events); const eventsEnum = Object.values(WebhookEventTypeEnum); @@ -42,10 +42,13 @@ const WebhookEvents: React.StatelessComponent = ({ } }; + console.log(data.events); + const eventsOnChange = event => { - const newData = [events]; - addOrRemove(newData, event.name); + const newData = events; + addOrRemove(newData, event.target.name); setEvents(newData); + console.log(events.indexOf(event.target.name)); }; return ( @@ -69,7 +72,7 @@ const WebhookEvents: React.StatelessComponent = ({ diff --git a/src/webhooks/components/WebhookStatus/WebhookStatus.tsx b/src/webhooks/components/WebhookStatus/WebhookStatus.tsx index d93f511e0..68580d9d3 100644 --- a/src/webhooks/components/WebhookStatus/WebhookStatus.tsx +++ b/src/webhooks/components/WebhookStatus/WebhookStatus.tsx @@ -3,7 +3,6 @@ import CardContent from "@material-ui/core/CardContent"; import Typography from "@material-ui/core/Typography"; import CardTitle from "@saleor/components/CardTitle"; import ControlledCheckbox from "@saleor/components/ControlledCheckbox"; -import { FormErrors } from "@saleor/types"; import React from "react"; import { useIntl } from "react-intl"; diff --git a/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx b/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx index e94a1ccfd..7f025b450 100644 --- a/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx +++ b/src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx @@ -13,14 +13,14 @@ import { WebhookEventTypeEnum } from "@saleor/types/globalTypes"; import React from "react"; import { useIntl } from "react-intl"; import { ServiceList_serviceAccounts_edges_node } from "../../types/ServiceList"; -import { Webhook_webhook, Webhook_webhook_events } from "../../types/Webhook"; +import { Webhook_webhook } from "../../types/Webhook"; import WebhookEvents from "../WebhookEvents"; import WebhookInfo from "../WebhookInfo"; import WebhookStatus from "../WebhookStatus"; export interface FormData { id: string; - events: Webhook_webhook_events[]; + events: string[]; isActive: boolean; name: string; secretKey: string | null; @@ -35,6 +35,7 @@ export interface WebhooksDetailsPageProps { services: ServiceList_serviceAccounts_edges_node[]; saveButtonBarState: ConfirmButtonTransitionState; onBack: () => void; + onDelete: () => void; onSubmit: (data: FormData) => void; } @@ -47,11 +48,12 @@ const WebhooksDetailsPage: React.StatelessComponent< saveButtonBarState, services, onBack, + onDelete, onSubmit }) => { const intl = useIntl(); const initialForm: FormData = { - events: maybe(() => webhook.events, []), + events: maybe(() => webhook.events, []).map(event => event.eventType), id: maybe(() => webhook.id, null), isActive: maybe(() => webhook.isActive, false), name: maybe(() => webhook.name, ""), @@ -107,6 +109,7 @@ const WebhooksDetailsPage: React.StatelessComponent< state={saveButtonBarState} onCancel={onBack} onSave={submit} + onDelete={onDelete} /> ); diff --git a/src/webhooks/components/WebhooksList/WebhooksList.tsx b/src/webhooks/components/WebhooksList/WebhooksList.tsx index 7c5cbe4ff..3d9844bc5 100644 --- a/src/webhooks/components/WebhooksList/WebhooksList.tsx +++ b/src/webhooks/components/WebhooksList/WebhooksList.tsx @@ -1,4 +1,5 @@ import Card from "@material-ui/core/Card"; +import IconButton from "@material-ui/core/IconButton"; import { createStyles, Theme, @@ -12,6 +13,7 @@ import TableFooter from "@material-ui/core/TableFooter"; import TableHead from "@material-ui/core/TableHead"; import TableRow from "@material-ui/core/TableRow"; import EditIcon from "@material-ui/icons/Edit"; +import DeleteIcon from "@material-ui/icons/Delete"; import React from "react"; import { useIntl } from "react-intl"; @@ -23,6 +25,7 @@ import { Webhooks_webhooks_edges_node } from "../../types/Webhooks"; export interface WebhooksListProps extends ListProps { webhooks: Webhooks_webhooks_edges_node[]; + onRemove: (id: string) => void; } const styles = (theme: Theme) => @@ -56,6 +59,7 @@ const WebhooksList = withStyles(styles, { name: "PluginList" })( onNextPage, pageInfo, onRowClick, + onRemove, onUpdateListSettings, onPreviousPage }: WebhooksListProps & WithStyles) => { @@ -126,6 +130,14 @@ const WebhooksList = withStyles(styles, { name: "PluginList" })( >
+ onRemove(webhook.id) : undefined + } + > + + ); diff --git a/src/webhooks/components/WebhooksListPage/WebhooksListPage.tsx b/src/webhooks/components/WebhooksListPage/WebhooksListPage.tsx index 2803f94db..e47271d46 100644 --- a/src/webhooks/components/WebhooksListPage/WebhooksListPage.tsx +++ b/src/webhooks/components/WebhooksListPage/WebhooksListPage.tsx @@ -13,6 +13,7 @@ import WebhooksList from "../WebhooksList/WebhooksList"; export interface WebhooksListPageProps extends PageListProps { webhooks: Webhooks_webhooks_edges_node[]; onBack: () => void; + onRemove: () => void; } const WebhooksListPage: React.StatelessComponent = ({ @@ -23,6 +24,7 @@ const WebhooksListPage: React.StatelessComponent = ({ onNextPage, onPreviousPage, onRowClick, + onRemove, onUpdateListSettings, pageInfo, webhooks @@ -47,6 +49,7 @@ const WebhooksListPage: React.StatelessComponent = ({ webhooks={webhooks} onNextPage={onNextPage} onPreviousPage={onPreviousPage} + onRemove={onRemove} onUpdateListSettings={onUpdateListSettings} onRowClick={onRowClick} pageInfo={pageInfo} diff --git a/src/webhooks/mutations.ts b/src/webhooks/mutations.ts index 864e482b0..5e9a66cc9 100644 --- a/src/webhooks/mutations.ts +++ b/src/webhooks/mutations.ts @@ -57,4 +57,4 @@ const webhookDelete = gql` export const TypedWebhookDelete = TypedMutation< WebhookDelete, WebhookDeleteVariables ->(WebhookDelete); +>(webhookDelete); diff --git a/src/webhooks/urls.ts b/src/webhooks/urls.ts index c8c410e1d..9edbe362f 100644 --- a/src/webhooks/urls.ts +++ b/src/webhooks/urls.ts @@ -1,17 +1,21 @@ import { stringify as stringifyQs } from "qs"; import urlJoin from "url-join"; -import { Pagination, SingleAction } from "../types"; +import { Dialog, Pagination, SingleAction } from "../types"; export const webhooksSection = "/webhooks/"; export const webhooksListPath = webhooksSection; -export type WebhooksListUrlQueryParams = Pagination & SingleAction; +export type WebhookListUrlDialog = "remove"; +export type WebhooksListUrlQueryParams = Dialog & + Pagination & + SingleAction; export const webhooksListUrl = (params?: WebhooksListUrlQueryParams) => webhooksListPath + "?" + stringifyQs(params); export const webhooksPath = (id: string) => urlJoin(webhooksSection, id); -export type WebhooksUrlQueryParams = SingleAction; +export type WebhookUrlDialog = "remove"; +export type WebhooksUrlQueryParams = Dialog & SingleAction; export const webhooksUrl = (id: string, params?: WebhooksUrlQueryParams) => webhooksPath(encodeURIComponent(id)) + "?" + stringifyQs(params); diff --git a/src/webhooks/views/WebhooksCreate.tsx b/src/webhooks/views/WebhooksCreate.tsx index e28887453..a65732003 100644 --- a/src/webhooks/views/WebhooksCreate.tsx +++ b/src/webhooks/views/WebhooksCreate.tsx @@ -1,9 +1,9 @@ import { WindowTitle } from "@saleor/components/WindowTitle"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; -import useShop from "@saleor/hooks/useShop"; import { commonMessages } from "@saleor/intl"; import { WebhookCreate as WebhookCreateData } from "@saleor/webhooks/types/WebhookCreate"; +import { WebhookEventTypeEnum } from "@saleor/types/globalTypes"; import React from "react"; import { useIntl } from "react-intl"; @@ -28,7 +28,6 @@ export const WebhooksCreate: React.StatelessComponent< const navigate = useNavigator(); const notify = useNotifier(); const intl = useIntl(); - const shop = useShop(); const onSubmit = (data: WebhookCreateData) => { if (data.webhookCreate.errors.length === 0) { @@ -48,7 +47,7 @@ export const WebhooksCreate: React.StatelessComponent< WebhookCreate({ variables: { input: { - events: data.events, + events: [WebhookEventTypeEnum.ALL_EVENTS], isActive: data.isActive, name: data.name, secretKey: data.secretKey, @@ -66,7 +65,7 @@ export const WebhooksCreate: React.StatelessComponent< return ( - {({ data, loading }) => { + {({ data }) => { return ( <> data.serviceAccounts.edges.map(edge => edge.node) )} - loading={loading} onBack={handleBack} onSubmit={handleSubmit} - permissions={maybe(() => shop.permissions)} saveButtonBarState={formTransitionState} /> diff --git a/src/webhooks/views/WebhooksDetails.tsx b/src/webhooks/views/WebhooksDetails.tsx index 2413b735f..2e9114790 100644 --- a/src/webhooks/views/WebhooksDetails.tsx +++ b/src/webhooks/views/WebhooksDetails.tsx @@ -1,14 +1,22 @@ import { WindowTitle } from "@saleor/components/WindowTitle"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; +import { commonMessages } from "@saleor/intl"; +import WebhookDeleteDialog from "@saleor/webhooks/components/WebhookDeleteDialog"; +import { WebhookDelete } from "@saleor/webhooks/types/WebhookDelete"; import React from "react"; import { useIntl } from "react-intl"; import { getMutationState, maybe } from "../../misc"; import WebhooksDetailsPage from "../components/WebhooksDetailsPage"; -import { TypedWebhookUpdate } from "../mutations"; +import { TypedWebhookDelete, TypedWebhookUpdate } from "../mutations"; import { TypedServiceListQuery, TypedWebhooksDetailsQuery } from "../queries"; -import { webhooksListUrl, WebhooksListUrlQueryParams } from "../urls"; +import { + webhooksListUrl, + WebhooksListUrlQueryParams, + webhooksUrl, + WebhookUrlDialog +} from "../urls"; export interface WebhooksDetailsProps { id: string; @@ -17,82 +25,138 @@ export interface WebhooksDetailsProps { export const WebhooksDetails: React.StatelessComponent< WebhooksDetailsProps -> = ({ id }) => { +> = ({ id, params }) => { const navigate = useNavigator(); const notify = useNotifier(); const intl = useIntl(); + const closeModal = () => + navigate( + webhooksUrl(id, { + ...params, + action: undefined, + id: undefined + }), + true + ); + + const openModal = (action: WebhookUrlDialog, tokenId?: string) => + navigate( + webhooksUrl(id, { + ...params, + action, + id: tokenId + }) + ); + + const onWebhookDelete = (data: WebhookDelete) => { + if (data.webhookDelete.errors.length === 0) { + notify({ + text: intl.formatMessage(commonMessages.savedChanges) + }); + navigate(webhooksListUrl()); + } + }; + return ( {(webhookUpdate, webhookUpdateOpts) => ( - - {WebhookDetails => { - const formTransitionState = getMutationState( - webhookUpdateOpts.called, - webhookUpdateOpts.loading, - maybe(() => webhookUpdateOpts.data.webhookUpdate.errors) - ); + + {(webhookDelete, webhookDeleteOpts) => ( + + {WebhookDetails => { + const formTransitionState = getMutationState( + webhookUpdateOpts.called, + webhookUpdateOpts.loading, + maybe(() => webhookUpdateOpts.data.webhookUpdate.errors) + ); - const formErrors = maybe( - () => webhookUpdateOpts.data.webhookUpdate.errors, - [] - ); + const handleRemoveConfirm = () => + webhookDelete({ + variables: { + id + } + }); - if (formErrors.length) { - formErrors.map(error => { - notify({ - text: error.message - }); - }); - } else { - if (webhookUpdateOpts.data) { - notify({ - text: intl.formatMessage({ - defaultMessage: "Succesfully updated plugin settings", - description: "plugin success message" - }) - }); - } - } + const formErrors = maybe( + () => webhookUpdateOpts.data.webhookUpdate.errors, + [] + ); - return ( - - {({ data }) => ( - <> - WebhookDetails.data.webhook.name)} - /> - WebhookDetails.data.webhook)} - services={maybe(() => - data.serviceAccounts.edges.map(edge => edge.node) - )} - onBack={() => navigate(webhooksListUrl())} - onSubmit={data => { - webhookUpdate({ - variables: { - id, - input: { - events: data.events, - isActive: data.isActive, - name: data.name, - secretKey: data.secretKey, - serviceAccount: data.serviceAccount, - targetUrl: data.targetUrl - } - } - }); - }} - /> - - )} - - ); - }} - + if (formErrors.length) { + formErrors.map(error => { + notify({ + text: error.message + }); + }); + } else { + if (webhookUpdateOpts.data) { + notify({ + text: intl.formatMessage({ + defaultMessage: "Succesfully updated plugin settings", + description: "plugin success message" + }) + }); + } + } + + const deleteTransitionState = getMutationState( + webhookDeleteOpts.called, + webhookDeleteOpts.loading, + maybe(() => webhookDeleteOpts.data.webhookDelete.errors) + ); + + return ( + + {({ data }) => ( + <> + WebhookDetails.data.webhook.name)} + /> + WebhookDetails.data.webhook)} + services={maybe(() => + data.serviceAccounts.edges.map(edge => edge.node) + )} + onBack={() => navigate(webhooksListUrl())} + onDelete={() => openModal("remove")} + onSubmit={data => { + webhookUpdate({ + variables: { + id, + input: { + events: data.events, + isActive: data.isActive, + name: data.name, + secretKey: data.secretKey, + serviceAccount: data.serviceAccount, + targetUrl: data.targetUrl + } + } + }); + }} + /> + WebhookDetails.data.webhook.name, + "..." + )} + onClose={closeModal} + onConfirm={handleRemoveConfirm} + open={params.action === "remove"} + /> + + )} + + ); + }} + + )} + )} ); diff --git a/src/webhooks/views/WebhooksList.tsx b/src/webhooks/views/WebhooksList.tsx index 1f0e378c8..1452105d0 100644 --- a/src/webhooks/views/WebhooksList.tsx +++ b/src/webhooks/views/WebhooksList.tsx @@ -1,19 +1,27 @@ import { configurationMenuUrl } from "@saleor/configuration"; import useListSettings from "@saleor/hooks/useListSettings"; import useNavigator from "@saleor/hooks/useNavigator"; +import useNotifier from "@saleor/hooks/useNotifier"; import usePaginator, { createPaginationState } from "@saleor/hooks/usePaginator"; -import { maybe } from "@saleor/misc"; +import { commonMessages } from "@saleor/intl"; +import { getMutationState, maybe } from "@saleor/misc"; import { ListViews } from "@saleor/types"; +import WebhookDeleteDialog from "@saleor/webhooks/components/WebhookDeleteDialog"; +import { WebhookDelete } from "@saleor/webhooks/types/WebhookDelete"; import React from "react"; +import { useIntl } from "react-intl"; import WebhooksListPage from "../components/WebhooksListPage/WebhooksListPage"; +import { TypedWebhookDelete } from "../mutations"; import { TypedWebhooksListQuery } from "../queries"; import { webhooksAddUrl, + webhooksListUrl, WebhooksListUrlQueryParams, - webhooksUrl + webhooksUrl, + WebhookUrlDialog } from "../urls"; interface WebhooksListProps { @@ -25,36 +33,107 @@ export const WebhooksList: React.StatelessComponent = ({ }) => { const navigate = useNavigator(); const paginate = usePaginator(); + const notify = useNotifier(); + const intl = useIntl(); const { updateListSettings, settings } = useListSettings( ListViews.WEBHOOK_LIST ); const paginationState = createPaginationState(settings.rowNumber, params); + const closeModal = () => + navigate( + webhooksListUrl({ + ...params, + action: undefined, + id: undefined + }), + true + ); + + const openModal = (action: WebhookUrlDialog, id?: string) => + navigate( + webhooksListUrl({ + ...params, + action, + id + }) + ); + + const onWebhookDelete = (data: WebhookDelete) => { + if (data.webhookDelete.errors.length === 0) { + notify({ + text: intl.formatMessage(commonMessages.savedChanges) + }); + navigate(webhooksListUrl()); + } + }; + return ( - {({ data, loading }) => { - const { loadNextPage, loadPreviousPage, pageInfo } = paginate( - maybe(() => data.webhooks.pageInfo), - paginationState, - params - ); - return ( - <> - data.webhooks.edges.map(edge => edge.node))} - pageInfo={pageInfo} - onAdd={() => navigate(webhooksAddUrl)} - onBack={() => navigate(configurationMenuUrl)} - onNextPage={loadNextPage} - onPreviousPage={loadPreviousPage} - onUpdateListSettings={updateListSettings} - onRowClick={id => () => navigate(webhooksUrl(id))} - /> - - ); - }} + {({ data, loading }) => ( + + {(webhookDelete, webhookDeleteOpts) => { + const { loadNextPage, loadPreviousPage, pageInfo } = paginate( + maybe(() => data.webhooks.pageInfo), + paginationState, + params + ); + const handleRemove = (id: string) => + navigate( + webhooksListUrl({ + ...params, + action: "remove", + id + }) + ); + const handleRemoveConfirm = () => + webhookDelete({ + variables: { + id + } + }); + + const deleteTransitionState = getMutationState( + webhookDeleteOpts.called, + webhookDeleteOpts.loading, + maybe(() => webhookDeleteOpts.data.webhookDelete.errors) + ); + + return ( + <> + + data.webhooks.edges.map(edge => edge.node) + )} + pageInfo={pageInfo} + onAdd={() => navigate(webhooksAddUrl)} + onBack={() => navigate(configurationMenuUrl)} + onNextPage={loadNextPage} + onPreviousPage={loadPreviousPage} + onRemove={handleRemove} + onUpdateListSettings={updateListSettings} + onRowClick={id => () => navigate(webhooksUrl(id))} + /> + + data.webhooks.edges.find( + edge => edge.node.id === params.id + ).node.name, + "..." + )} + onClose={closeModal} + onConfirm={handleRemoveConfirm} + open={params.action === "remove"} + /> + + ); + }} + + )} ); };