synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
169 lines (168 loc) • 6.05 kB
JavaScript
import { jsxs as n, jsx as e, Fragment as w } from "react/jsx-runtime";
import { useDeletePersonalAccessToken as T } from "../../../synapse-queries/user/usePersonalAccessToken.js";
import k from "@mui/icons-material/DeleteTwoTone";
import { Card as D, Box as m, Stack as C, Typography as t, Tooltip as c, IconButton as h } from "@mui/material";
import { scopeDescriptions as v } from "@sage-bionetworks/synapse-types";
import d from "dayjs";
import I from "dayjs/plugin/relativeTime";
import { noop as b } from "lodash-es";
import { useState as S, useCallback as P } from "react";
import A from "../../IconSvg/IconSvg.js";
import { WarningDialog as E } from "../../SynapseForm/WarningDialog.js";
d.extend(I);
const N = "This token has expired. It no longer works and can only be deleted.";
function L(f) {
const { accessToken: o, onDelete: x = b } = f, [g, l] = S(!1), i = o.state === "EXPIRED", { mutate: a, isPending: u } = T({
onSuccess: () => {
x();
},
throwOnError: !0
}), y = P(() => {
i ? a(o.id) : l(!0);
}, [o.id, a, i]);
return /* @__PURE__ */ n(
D,
{
sx: {
my: 2,
height: "120px",
width: "100%",
p: 1.5,
pl: 4,
backgroundColor: i ? "#fcf8e3" : "inherit"
},
children: [
/* @__PURE__ */ e(
E,
{
title: "Confirm Deletion",
content: /* @__PURE__ */ n(w, { children: [
/* @__PURE__ */ e(t, { variant: "body1", children: "If you delete this token, any applications using it will stop working. This action cannot be undone." }),
/* @__PURE__ */ e(
t,
{
variant: "body1",
sx: {
fontWeight: "700"
},
children: "Are you sure you want to delete this token?"
}
)
] }),
confirmButtonText: "Delete Token",
onCancel: () => l(!1),
onConfirm: () => {
a(o.id), l(!1);
},
confirmButtonColor: "error",
open: g
}
),
/* @__PURE__ */ n(
m,
{
sx: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
height: "100%"
},
children: [
/* @__PURE__ */ n(
C,
{
sx: {
flexGrow: 1,
gap: 1,
justifyContent: "space-between"
},
children: [
/* @__PURE__ */ e(t, { variant: "headline3", sx: { fontSize: "16px" }, children: o.name }),
/* @__PURE__ */ n("div", { children: [
/* @__PURE__ */ e("span", { children: "Permissions: " }),
o.scopes.map((r) => {
let s = v[r];
if (s === void 0) {
const p = r.charAt(0).toUpperCase() + r.slice(1);
s = {
displayName: p,
description: p
};
}
return /* @__PURE__ */ e(c, { title: s.description, children: /* @__PURE__ */ e(
t,
{
component: "span",
variant: "smallText1",
sx: { mx: 0.25, cursor: "default", color: "primary.main" },
children: s.displayName
}
) }, r);
})
] }),
/* @__PURE__ */ n("div", { children: [
/* @__PURE__ */ n(t, { component: "span", variant: "smallText1", children: [
"Last used ",
d(o.lastUsed).fromNow()
] }),
/* @__PURE__ */ e(
t,
{
component: "span",
variant: "smallText1",
sx: {
color: "grey.700"
},
children: " | "
}
),
/* @__PURE__ */ n(t, { component: "span", variant: "smallText1", children: [
"Created ",
d(o.createdOn).fromNow()
] })
] })
]
}
),
/* @__PURE__ */ n(
m,
{
sx: {
alignSelf: "flex-start",
display: "flex",
gap: 1,
alignItems: "center"
},
children: [
i && /* @__PURE__ */ e(c, { title: N, placement: "top", children: /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(
A,
{
icon: "warning",
sx: { color: "warning.main", fontSize: "inherit" },
wrap: !1
}
) }) }),
/* @__PURE__ */ e(c, { title: "Delete Token", placement: "top", children: /* @__PURE__ */ e(
h,
{
disabled: u,
color: "error",
onClick: y,
children: /* @__PURE__ */ e(k, {})
}
) })
]
}
)
]
}
)
]
}
);
}
export {
L as AccessTokenCard,
N as EXPIRED_PAT_WARNING
};
//# sourceMappingURL=AccessTokenCard.js.map