synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
295 lines (294 loc) • 10.8 kB
JavaScript
import { jsx as e, jsxs as n, Fragment as a } from "react/jsx-runtime";
import { useCreateWebhook as J, useUpdateWebhook as K, useDeleteWebhook as Z } from "../../synapse-queries/webhook/useWebhook.js";
import X from "@mui/icons-material/DeleteTwoTone";
import ee from "@mui/icons-material/SearchOutlined";
import { Grid as i, Typography as d, TextField as P, IconButton as oe, FormControlLabel as O, InputLabel as R, Switch as te, FormGroup as ne, Checkbox as re, Button as ie, Alert as _, Link as N, Box as se } from "@mui/material";
import { SynapseObjectType as ae, ErrorResponseCode as le, WebhookVerificationStatus as de, SynapseEventType as ce } from "@sage-bionetworks/synapse-client";
import { upperFirst as he } from "lodash-es";
import { useState as s, useEffect as pe, Fragment as ue } from "react";
import { ConfirmationDialog as F } from "../ConfirmationDialog/ConfirmationDialog.js";
import { EntityFinderModal as me } from "../EntityFinder/EntityFinderModal.js";
import { FinderScope as fe } from "../EntityFinder/tree/EntityTree.js";
import { VersionSelectionType as be } from "../EntityFinder/VersionSelectionType.js";
import { HelpPopover as ye } from "../HelpPopover/HelpPopover.js";
import { displayToast as E } from "../ToastMessage/ToastMessage.js";
const ke = encodeURIComponent(
"Request to add new domain for webhook verification"
), Ee = encodeURIComponent(
"<Please provide the domain(s) you wish to use and any additional details related to your request.>"
), we = `https://sagebionetworks.jira.com/servicedesk/customer/portal/9/group/16/create/85?summary=${ke}&description=${Ee}`;
function ge(c) {
return /* @__PURE__ */ n(
se,
{
sx: {
mt: "10px",
py: 2,
px: 4,
backgroundColor: "rgb(178, 36, 42, 0.03)"
},
children: [
/* @__PURE__ */ e(d, { sx: { my: 1 }, color: "error", variant: "headline3", gutterBottom: !0, children: "DANGER ZONE" }),
/* @__PURE__ */ e(d, { variant: "body1", gutterBottom: !0, children: "Editing the following information will require you to re-verify the webhook." }),
c.children
]
}
);
}
function Ue(c) {
const { initialData: o, open: U, onClose: l } = c, w = ae.ENTITY, [h, p] = s(""), [u, g] = s(/* @__PURE__ */ new Set()), [m, C] = s(""), [f, v] = s(!0);
pe(() => {
p(o?.objectId || ""), g(
new Set(o?.eventTypes || [])
), C(o?.invokeEndpoint || ""), v(o?.isEnabled ?? !0);
}, [o]);
const [A, b] = s(!1), [B, y] = s(!1), {
mutate: j,
isPending: L,
error: q
} = J({
onSuccess: () => {
E("Webhook created", "success"), l();
}
}), {
mutate: M,
isPending: z,
error: $
} = K({
onSuccess: () => {
E("Webhook updated", "success"), l();
}
}), {
mutate: G,
isPending: S,
error: W
} = Z({
onSuccess: () => {
E("Webhook deleted", "info"), y(!1), l();
}
}), D = L || z, r = q || $;
function V() {
o ? M({
webhookId: o.id,
createOrUpdateWebhookRequest: {
objectType: w,
objectId: h,
eventTypes: u,
invokeEndpoint: m,
isEnabled: f
}
}) : j({
objectType: w,
objectId: h,
eventTypes: u,
invokeEndpoint: m,
isEnabled: f
});
}
function Y() {
o && G(o.id);
}
const I = r && r.errorResponse && "errorCode" in r.errorResponse && r.errorResponse.errorCode === le.UNSUPPORTED_WEBHOOK_DOMAIN, H = o && o.verificationStatus === de.VERIFIED ? ge : ue;
return /* @__PURE__ */ e(
F,
{
open: U,
title: "Create New Webhook",
maxWidth: "md",
onCancel: l,
onConfirm: () => {
V();
},
confirmButtonProps: {
children: `${o ? "Update" : "Create"} Webhook`,
disabled: D
},
cancelButtonProps: {
disabled: D
},
content: /* @__PURE__ */ n(a, { children: [
/* @__PURE__ */ n(i, { container: !0, spacing: 2, children: [
/* @__PURE__ */ e(i, { size: 12, children: /* @__PURE__ */ e(d, { variant: "body1", gutterBottom: !0, children: "Specify the ID of the entity and the types of events you would like to receive. Once you complete this step, Synapse will send a verification code to the endpoint you specify. After you verify your webhook, Synapse will send your chosen events to the verified endpoint." }) }),
/* @__PURE__ */ n(
i,
{
size: {
xs: 12,
md: 6
},
children: [
/* @__PURE__ */ e(
me,
{
configuration: {
initialScope: fe.ALL_PROJECTS,
initialContainer: "root",
selectMultiple: !1,
treeOnly: !1,
versionSelection: be.DISALLOWED
},
show: A,
onCancel: () => {
b(!1);
},
title: "Select item for Webhook",
promptCopy: "Select an item to associate with the webhook. The webhook can be used to receive programmatic alerts when the item is updated.",
onConfirm: (t) => {
p(t[0].targetId), b(!1);
},
confirmButtonCopy: "Select"
}
),
/* @__PURE__ */ e(
P,
{
required: !0,
label: /* @__PURE__ */ n(a, { children: [
"Entity ID",
/* @__PURE__ */ e(
ye,
{
containerSx: {
position: "fixed",
ml: "15px",
fontSize: "12px"
},
markdownText: "The ID of a Synapse entity for which to receive events. For folders and projects, matching events are published to the webhook endpoint for any entity in their hierarchy."
}
)
] }),
type: "text",
fullWidth: !0,
value: h,
onChange: (t) => {
p(t.target.value);
},
slotProps: {
input: {
endAdornment: /* @__PURE__ */ e(oe, { onClick: () => b(!0), children: /* @__PURE__ */ e(ee, {}) })
}
}
}
)
]
}
),
/* @__PURE__ */ e(i, { size: 6, children: /* @__PURE__ */ e(
O,
{
control: /* @__PURE__ */ e(te, {}),
labelPlacement: "top",
label: /* @__PURE__ */ e(R, { children: "Enabled" }),
checked: f,
onChange: (t, T) => {
v(T);
}
}
) }),
/* @__PURE__ */ e(
i,
{
size: {
xs: 12,
md: 6
},
children: /* @__PURE__ */ n(ne, { children: [
/* @__PURE__ */ e(R, { required: !0, children: "Events" }),
Object.values(ce).map((t) => /* @__PURE__ */ e(
O,
{
control: /* @__PURE__ */ e(re, {}),
label: he(t.toLowerCase()),
checked: u.has(t),
onChange: (T, Q) => {
g((k) => {
if (Q) {
const x = new Set(k);
return x.add(t), x;
} else
return k.delete(t), new Set(k);
});
}
},
t
))
] })
}
),
/* @__PURE__ */ e(i, { size: 12, children: /* @__PURE__ */ n(H, { children: [
/* @__PURE__ */ e(
P,
{
label: "Endpoint",
fullWidth: !0,
value: m,
onChange: (t) => C(t.target.value),
required: !0,
placeholder: "https://"
}
),
o && /* @__PURE__ */ n(a, { children: [
/* @__PURE__ */ e(
ie,
{
onClick: () => {
y(!0);
},
color: "error",
variant: "outlined",
startIcon: /* @__PURE__ */ e(X, {}),
sx: { my: 2 },
children: "Delete Webhook"
}
),
/* @__PURE__ */ e(
F,
{
title: "Confirm Delete Webhook?",
onCancel: () => y(!1),
open: B,
content: /* @__PURE__ */ n(a, { children: [
/* @__PURE__ */ e(d, { variant: "body1", children: "Are you sure you want to delete this webhook? This action cannot be undone." }),
W && /* @__PURE__ */ e(_, { severity: "error", sx: { mt: 2 }, children: W.reason })
] }),
onConfirm: () => {
Y();
},
confirmButtonProps: {
children: "Delete",
color: "error",
disabled: S
},
cancelButtonProps: { disabled: S }
}
)
] })
] }) })
] }),
r && /* @__PURE__ */ n(_, { severity: "error", sx: { my: 2 }, children: [
I && /* @__PURE__ */ n(a, { children: [
"Synapse only permits configuring webhooks on verified domains, which are specified in the",
" ",
/* @__PURE__ */ e(
N,
{
href: "https://rest-docs.synapse.org/rest/index.html#org.sagebionetworks.repo.web.controller.WebhookController",
target: "_blank",
children: "REST documentation"
}
),
". You have entered a domain that has not been verified.",
" ",
/* @__PURE__ */ e(N, { href: we, target: "_blank", children: "Please fill out this form to request verification for your webhook domain" }),
"."
] }),
!I && r.reason
] })
] })
}
);
}
export {
Ue as default
};
//# sourceMappingURL=CreateWebhookModal.js.map