synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
262 lines (261 loc) • 8.09 kB
JavaScript
import { jsxs as a, jsx as o, Fragment as P } from "react/jsx-runtime";
import z from "../layout/InfiniteTableLayout.js";
import { useGetWebhooksInfinite as F, useResendVerificationCode as L } from "../../synapse-queries/webhook/useWebhook.js";
import { formatDate as D } from "../../utils/functions/DateFormatter.js";
import { AddCircleTwoTone as _ } from "@mui/icons-material";
import { useTheme as B, useMediaQuery as G, Typography as s, Box as H, Link as Y, Button as l, Stack as p } from "@mui/material";
import { WebhookVerificationStatus as c, SynapseObjectType as K } from "@sage-bionetworks/synapse-client";
import { createColumnHelper as U, useReactTable as $, getCoreRowModel as Q } from "@tanstack/react-table";
import I from "dayjs";
import { upperFirst as W } from "lodash-es";
import { useState as g, useMemo as N, useEffect as q, useCallback as b } from "react";
import { EntityLink as J } from "../EntityLink.js";
import { HelpPopover as X } from "../HelpPopover/HelpPopover.js";
import { SynapseSpinner as Z } from "../LoadingScreen/LoadingScreen.js";
import ee from "../TanStackTable/StyledTanStackTable.js";
import oe from "./CreateWebhookModal.js";
import { WebhookVerificationDialog as te } from "./WebhookVerificationDialog.js";
const ie = [
c.FAILED,
c.REVOKED
], r = U();
function re(d, n, h) {
return [
r.accessor("id", {
header: "ID",
size: 75,
cell: (e) => e.cell.getValue()
}),
r.display({
header: "Object",
cell: (e) => e.row.original.objectType === K.ENTITY ? /* @__PURE__ */ a(P, { children: [
/* @__PURE__ */ o(J, { entity: e.row.original.objectId }),
" (syn",
e.row.original.objectId,
")"
] }) : `${e.row.original.objectType}: ${e.row.original.objectId}`
}),
r.accessor("eventTypes", {
header: "Event Type(s)",
cell: (e) => /* @__PURE__ */ o(p, { children: Array.from(e.cell.getValue()).map((i) => i.toLowerCase()).map(W).map((i) => /* @__PURE__ */ o("span", { children: i }, i)) })
}),
r.accessor("isEnabled", {
header: "Enabled",
size: 10,
cell: (e) => e.cell.getValue() ? "Yes" : "No"
}),
r.accessor("createdOn", {
header: "Created On",
cell: ({ getValue: e }) => D(I(e()))
}),
r.accessor("modifiedOn", {
header: "Modified On",
cell: ({ getValue: e }) => D(I(e()))
}),
r.accessor("verificationStatus", {
header: "Verification Status",
cell: (e) => /* @__PURE__ */ a(
p,
{
sx: {
flexDirection: "row",
alignItems: "center",
gap: 1
},
children: [
e.row.original.verificationStatus === "PENDING" && // useEffect above will trigger a refetch until this resolves
/* @__PURE__ */ o(Z, { size: 20 }),
e.row.original.verificationStatus !== c.PENDING && W(
(e.row.original.verificationStatus || "").toLowerCase().replaceAll("_", " ")
),
e.row.original.verificationMsg && /* @__PURE__ */ o(X, { markdownText: e.row.original.verificationMsg })
]
}
)
}),
r.display({
id: "actions",
header: "Actions",
size: 10,
meta: {
textAlign: "right"
},
cell: (e) => /* @__PURE__ */ a(
p,
{
sx: {
flexDirection: "row",
justifyContent: "flex-end",
alignItems: "center",
gap: 2
},
children: [
e.row.original.verificationStatus === c.CODE_SENT && /* @__PURE__ */ o(
l,
{
variant: "outlined",
onClick: () => {
d(e.row.original);
},
children: "Verify code"
}
),
ie.includes(
e.row.original.verificationStatus
) && /* @__PURE__ */ o(
l,
{
variant: "outlined",
onClick: () => {
n(e.row.original);
},
children: "Resend code"
}
),
/* @__PURE__ */ o(
l,
{
size: "small",
variant: "contained",
onClick: () => {
h(e.row.original);
},
children: "Edit"
}
)
]
}
)
})
];
}
function Ce() {
const [d, n] = g(!1), [h, e] = g(!1), [i, f] = g(
void 0
), V = B(), u = G(V.breakpoints.down("md")), {
data: w,
refetch: y,
hasNextPage: O,
fetchNextPage: j,
isFetchingNextPage: M,
isLoading: k
} = F(), m = N(
() => w?.pages.flatMap((t) => t.page) ?? [],
[w]
);
q(() => {
let t;
return m.some((A) => A.verificationStatus === "PENDING") && (t = setInterval(() => {
y();
}, 2500)), () => clearInterval(t);
}, [y, m]);
const { mutate: v } = L(), C = b((t) => {
f(t), e(!0);
}, []), S = b((t) => {
f(t), n(!0);
}, []), T = b(
(t) => {
v(t.id);
},
[v]
), R = N(
() => re(
C,
T,
S
),
[S, T, C]
), E = $({
data: m,
columns: R,
state: {
columnVisibility: {
createdOn: !u,
modifiedOn: !u
}
},
getCoreRowModel: Q()
}), x = !k && E.getRowModel().rows.length === 0;
return /* @__PURE__ */ a("div", { children: [
/* @__PURE__ */ o(
te,
{
open: h,
onClose: () => e(!1),
webhookId: i?.id
},
i?.id
),
/* @__PURE__ */ o(s, { variant: "headline3", children: "Webhook Dashboard" }),
/* @__PURE__ */ a(
H,
{
sx: {
display: "flex",
flexDirection: "row",
my: 2,
gap: 3,
justifyContent: "space-between",
alignItems: "flex-start"
},
children: [
/* @__PURE__ */ a("div", { children: [
/* @__PURE__ */ o(s, { variant: "body1", gutterBottom: !0, children: "Webhooks can be used to programmatically receive alerts that are triggered by events in Synapse. A webhook can specify a Synapse entity to receive events related to that entity. For entities that represent a container (folder and project), matching events are published to the webhook endpoint for any entity in its hierarchy." }),
/* @__PURE__ */ a(s, { variant: "body1", gutterBottom: !0, children: [
"For more information, see the",
" ",
/* @__PURE__ */ o(
Y,
{
href: "http://dev.release.rest.doc.sagebase.org.s3-website-us-east-1.amazonaws.com/index.html#org.sagebionetworks.repo.web.controller.WebhookController",
target: "blank",
children: "Synapse API REST Docs section on Webhooks"
}
),
"."
] })
] }),
/* @__PURE__ */ o(
l,
{
size: "large",
variant: "contained",
startIcon: /* @__PURE__ */ o(_, {}),
onClick: () => {
f(void 0), n(!0);
},
sx: { flexShrink: 0 },
children: "Create Webhook"
}
),
/* @__PURE__ */ o(
oe,
{
initialData: i,
open: d,
onClose: () => n(!1)
}
)
]
}
),
/* @__PURE__ */ o(
z,
{
table: /* @__PURE__ */ o(ee, { table: E }),
isLoading: k,
noResults: /* @__PURE__ */ o(s, { variant: "body1", children: 'You have not created any webhooks. Click "Create Webhook" above to begin.' }),
isEmpty: x,
hasNextPage: O,
onFetchNextPageClicked: () => {
j();
},
isFetchingNextPage: M
}
)
] });
}
export {
Ce as default
};
//# sourceMappingURL=WebhookDashboard.js.map