datajunction-ui
Version:
DataJunction UI
419 lines (417 loc) • 16.8 kB
JavaScript
import { jsxs as n, jsx as e, Fragment as I } from "react/jsx-runtime";
import { useState as v, useContext as U, useEffect as P } from "react";
import { E as x, D as T, cv as L, z as F } from "./index-n79cxNwC.js";
/* empty css */
function j({ user: i }) {
return /* @__PURE__ */ n("section", { className: "settings-section", children: [
/* @__PURE__ */ e("h2", { className: "settings-section-title", children: "Profile" }),
/* @__PURE__ */ e("div", { className: "settings-card", children: /* @__PURE__ */ n("div", { className: "profile-info", children: [
/* @__PURE__ */ e("div", { className: "profile-avatar", children: (() => {
var u;
return i != null && i.name ? i.name.split(" ").map((r) => r[0]).join("").toUpperCase().slice(0, 2) : ((u = i == null ? void 0 : i.username) == null ? void 0 : u.slice(0, 2).toUpperCase()) || "?";
})() }),
/* @__PURE__ */ n("div", { className: "profile-details", children: [
/* @__PURE__ */ n("div", { className: "profile-field", children: [
/* @__PURE__ */ e("label", { children: "Username" }),
/* @__PURE__ */ e("span", { children: (i == null ? void 0 : i.username) || "-" })
] }),
/* @__PURE__ */ n("div", { className: "profile-field", children: [
/* @__PURE__ */ e("label", { children: "Email" }),
/* @__PURE__ */ e("span", { children: (i == null ? void 0 : i.email) || "-" })
] })
] })
] }) })
] });
}
const $ = [
{ value: "create", label: "Create" },
{ value: "update", label: "Update" },
{ value: "delete", label: "Delete" },
{ value: "status_change", label: "Status Change" },
{ value: "refresh", label: "Refresh" },
{ value: "tag", label: "Tag" }
];
function M({
subscriptions: i,
onUpdate: b,
onUnsubscribe: u
}) {
const [r, o] = v(null), [s, d] = v([]), [c, y] = v(!1), f = (t) => {
o(t), d([...i[t].activity_types]);
}, N = () => {
o(null), d([]);
}, g = (t) => {
s.includes(t) ? d(
s.filter((l) => l !== t)
) : d([...s, t]);
}, p = async (t) => {
if (s.length === 0) {
alert("Please select at least one activity type");
return;
}
y(!0);
try {
await b(t, s), o(null), d([]);
} catch (l) {
console.error("Error updating subscription:", l), alert("Failed to update subscription");
} finally {
y(!1);
}
}, a = async (t, l) => {
if (window.confirm(
`Unsubscribe from notifications for "${t.entity_name}"?`
))
try {
await u(t);
} catch (m) {
console.error("Error unsubscribing:", m);
}
};
return /* @__PURE__ */ n("section", { className: "settings-section", id: "notifications", children: [
/* @__PURE__ */ e("h2", { className: "settings-section-title", children: "Notification Subscriptions" }),
/* @__PURE__ */ e("div", { className: "settings-card", children: i.length === 0 ? /* @__PURE__ */ e("p", { className: "empty-state", children: `You're not watching any nodes yet. Visit a node page and click "Watch" to subscribe to updates.` }) : /* @__PURE__ */ e("div", { className: "subscriptions-list", children: i.map((t, l) => {
var C;
return /* @__PURE__ */ n("div", { className: "subscription-item", children: [
/* @__PURE__ */ n("div", { className: "subscription-header", children: [
/* @__PURE__ */ n("div", { className: "subscription-entity", children: [
/* @__PURE__ */ e("a", { href: `/nodes/${t.entity_name}`, children: t.entity_name }),
t.node_type ? /* @__PURE__ */ e(
"span",
{
className: `node_type__${t.node_type} badge node_type`,
children: t.node_type.toUpperCase()
}
) : /* @__PURE__ */ e("span", { className: "entity-type-badge", children: t.entity_type }),
t.status === "invalid" && /* @__PURE__ */ e("span", { className: "status-badge status-invalid", children: "INVALID" })
] }),
/* @__PURE__ */ e("div", { className: "subscription-actions", children: r === l ? /* @__PURE__ */ n(I, { children: [
/* @__PURE__ */ e(
"button",
{
className: "btn-save",
onClick: () => p(t),
disabled: c,
children: c ? "Saving..." : "Save"
}
),
/* @__PURE__ */ e(
"button",
{
className: "btn-cancel",
onClick: N,
disabled: c,
children: "Cancel"
}
)
] }) : /* @__PURE__ */ n(I, { children: [
/* @__PURE__ */ e(
"button",
{
className: "btn-icon btn-edit",
onClick: () => f(l),
title: "Edit subscription",
children: /* @__PURE__ */ e(x, {})
}
),
/* @__PURE__ */ e(
"button",
{
className: "btn-icon btn-unsubscribe",
onClick: () => a(t),
title: "Unsubscribe",
children: "×"
}
)
] }) })
] }),
/* @__PURE__ */ n("div", { className: "subscription-activity-types", children: [
/* @__PURE__ */ e("label", { className: "activity-types-label", children: "Activity types:" }),
r === l ? /* @__PURE__ */ e("div", { className: "activity-types-checkboxes", children: $.map((m) => /* @__PURE__ */ n("label", { className: "checkbox-label", children: [
/* @__PURE__ */ e(
"input",
{
type: "checkbox",
checked: s.includes(m.value),
onChange: () => g(m.value)
}
),
m.label
] }, m.value)) }) : /* @__PURE__ */ e("div", { className: "activity-types-badges", children: ((C = t.activity_types) == null ? void 0 : C.map((m) => /* @__PURE__ */ e(
"span",
{
className: `activity-badge activity-badge-${m}`,
children: m
},
m
))) || /* @__PURE__ */ e("span", { className: "text-muted", children: "All" }) })
] })
] }, l);
}) }) })
] });
}
function J({ isOpen: i, onClose: b, onCreate: u }) {
const [r, o] = v(""), [s, d] = v(!1), [c, y] = v(null), f = async (p) => {
if (p.preventDefault(), !!r.trim()) {
d(!0);
try {
const a = await u(r.trim());
a.client_id ? (y(a), o("")) : a.message && alert(a.message);
} catch (a) {
console.error("Error creating service account:", a), alert("Failed to create service account");
} finally {
d(!1);
}
}
}, N = () => {
o(""), y(null), b();
}, g = (p) => {
navigator.clipboard.writeText(p);
};
return i ? /* @__PURE__ */ e("div", { className: "modal-overlay", onClick: N, children: /* @__PURE__ */ n("div", { className: "modal-content", onClick: (p) => p.stopPropagation(), children: [
/* @__PURE__ */ n("div", { className: "modal-header", children: [
/* @__PURE__ */ e("h3", { children: "Create Service Account" }),
/* @__PURE__ */ e(
"button",
{
className: "btn-close-modal",
onClick: N,
title: "Close",
children: "×"
}
)
] }),
c ? (
/* Show credentials after creation */
/* @__PURE__ */ n("div", { className: "modal-body", children: [
/* @__PURE__ */ n("div", { className: "credentials-success", children: [
/* @__PURE__ */ e("span", { className: "success-icon", children: "✓" }),
/* @__PURE__ */ e("h4", { children: "Service Account Created!" })
] }),
/* @__PURE__ */ e("p", { className: "credentials-warning", children: "Save these credentials now. The client secret will not be shown again." }),
/* @__PURE__ */ n("div", { className: "credentials-grid", children: [
/* @__PURE__ */ n("div", { className: "credential-item", children: [
/* @__PURE__ */ e("label", { children: "Name" }),
/* @__PURE__ */ e("code", { children: c.name })
] }),
/* @__PURE__ */ n("div", { className: "credential-item", children: [
/* @__PURE__ */ e("label", { children: "Client ID" }),
/* @__PURE__ */ n("div", { className: "credential-value", children: [
/* @__PURE__ */ e("code", { children: c.client_id }),
/* @__PURE__ */ e(
"button",
{
className: "btn-copy",
onClick: () => g(c.client_id),
title: "Copy",
children: "📋"
}
)
] })
] }),
/* @__PURE__ */ n("div", { className: "credential-item", children: [
/* @__PURE__ */ e("label", { children: "Client Secret" }),
/* @__PURE__ */ n("div", { className: "credential-value", children: [
/* @__PURE__ */ e("code", { children: c.client_secret }),
/* @__PURE__ */ e(
"button",
{
className: "btn-copy",
onClick: () => g(c.client_secret),
title: "Copy",
children: "📋"
}
)
] })
] })
] }),
/* @__PURE__ */ e("div", { className: "modal-actions", children: /* @__PURE__ */ e("button", { className: "btn-primary", onClick: N, children: "Done" }) })
] })
) : (
/* Show creation form */
/* @__PURE__ */ n("form", { onSubmit: f, children: [
/* @__PURE__ */ e("div", { className: "modal-body", children: /* @__PURE__ */ n("div", { className: "form-group", children: [
/* @__PURE__ */ e("label", { htmlFor: "service-account-name", children: "Name" }),
/* @__PURE__ */ e(
"input",
{
id: "service-account-name",
type: "text",
placeholder: "e.g., my-pipeline, etl-job, ci-cd",
value: r,
onChange: (p) => o(p.target.value),
disabled: s,
autoFocus: !0
}
),
/* @__PURE__ */ e("span", { className: "form-hint", children: "A descriptive name to identify this service account" })
] }) }),
/* @__PURE__ */ n("div", { className: "modal-actions", children: [
/* @__PURE__ */ e(
"button",
{
type: "button",
className: "btn-secondary",
onClick: N,
disabled: s,
children: "Cancel"
}
),
/* @__PURE__ */ e(
"button",
{
type: "submit",
className: "btn-primary",
disabled: s || !r.trim(),
children: s ? "Creating..." : "Create"
}
)
] })
] })
)
] }) }) : null;
}
function V({ accounts: i, onCreate: b, onDelete: u }) {
const [r, o] = v(!1), s = async (c) => {
if (window.confirm(
`Delete service account "${c.name}"?
This will revoke all access for this account and cannot be undone.`
))
try {
await u(c.client_id);
} catch (f) {
console.error("Error deleting service account:", f), alert("Failed to delete service account");
}
}, d = async (c) => await b(c);
return /* @__PURE__ */ n("section", { className: "settings-section", id: "service-accounts", children: [
/* @__PURE__ */ n("div", { className: "section-title-row", children: [
/* @__PURE__ */ e("h2", { className: "settings-section-title", children: "Service Accounts" }),
/* @__PURE__ */ e("button", { className: "btn-create", onClick: () => o(!0), children: "+ Create" })
] }),
/* @__PURE__ */ n("div", { className: "settings-card", children: [
/* @__PURE__ */ e("p", { className: "section-description", children: "Service accounts allow programmatic access to the DJ API. Create accounts for your applications, scripts, or CI/CD pipelines." }),
i.length > 0 ? /* @__PURE__ */ e("div", { className: "service-accounts-list", children: /* @__PURE__ */ n("table", { className: "service-accounts-table", children: [
/* @__PURE__ */ e("thead", { children: /* @__PURE__ */ n("tr", { children: [
/* @__PURE__ */ e("th", { children: "Name" }),
/* @__PURE__ */ e("th", { children: "Client ID" }),
/* @__PURE__ */ e("th", { children: "Created" }),
/* @__PURE__ */ e("th", {})
] }) }),
/* @__PURE__ */ e("tbody", { children: i.map((c) => /* @__PURE__ */ n("tr", { children: [
/* @__PURE__ */ e("td", { children: c.name }),
/* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("code", { className: "client-id", children: c.client_id }) }),
/* @__PURE__ */ e("td", { className: "created-date", children: new Date(c.created_at).toLocaleDateString() }),
/* @__PURE__ */ e("td", { className: "actions-cell", children: /* @__PURE__ */ e(
"button",
{
className: "btn-icon btn-delete-account",
onClick: () => s(c),
title: "Delete service account",
children: "×"
}
) })
] }, c.id)) })
] }) }) : /* @__PURE__ */ e("p", { className: "empty-state", children: "No service accounts yet. Create one to enable programmatic API access." })
] }),
/* @__PURE__ */ e(
J,
{
isOpen: r,
onClose: () => o(!1),
onCreate: d
}
)
] });
}
function R() {
const i = U(T).DataJunctionAPI, { currentUser: b, loading: u } = L(), [r, o] = v([]), [s, d] = v([]), [c, y] = v(!0);
P(() => {
if (u) return;
async function a() {
try {
const t = await i.getNotificationPreferences(), l = (t || []).filter((h) => h.entity_type === "node").map((h) => h.entity_name);
let C = {};
if (l.length > 0) {
const h = await i.getNodesByNames(l);
C = Object.fromEntries(
h.map((_) => {
var S, w, A, k, D, E;
return [
_.name,
{
node_type: (S = _.type) == null ? void 0 : S.toLowerCase(),
display_name: (w = _.current) == null ? void 0 : w.displayName,
status: (k = (A = _.current) == null ? void 0 : A.status) == null ? void 0 : k.toLowerCase(),
mode: (E = (D = _.current) == null ? void 0 : D.mode) == null ? void 0 : E.toLowerCase()
}
];
})
);
}
const m = (t || []).map((h) => ({
...h,
...C[h.entity_name] || {}
}));
o(m);
try {
const h = await i.listServiceAccounts();
d(h || []);
} catch (h) {
console.log("Service accounts not available:", h);
}
} catch (t) {
console.error("Error fetching settings data:", t);
} finally {
y(!1);
}
}
a();
}, [i, u]);
const f = async (a, t) => {
await i.subscribeToNotifications({
entity_type: a.entity_type,
entity_name: a.entity_name,
activity_types: t,
alert_types: a.alert_types || ["web"]
}), o(
r.map(
(l) => l.entity_name === a.entity_name ? { ...l, activity_types: t } : l
)
);
}, N = async (a) => {
await i.unsubscribeFromNotifications({
entity_type: a.entity_type,
entity_name: a.entity_name
}), o(
r.filter((t) => t.entity_name !== a.entity_name)
);
}, g = async (a) => {
const t = await i.createServiceAccount(a);
return t.client_id && d([...s, t]), t;
}, p = async (a) => {
await i.deleteServiceAccount(a), d(s.filter((t) => t.client_id !== a));
};
return c ? /* @__PURE__ */ e("div", { className: "settings-page", children: /* @__PURE__ */ e("div", { className: "settings-container", children: /* @__PURE__ */ e(F, {}) }) }) : /* @__PURE__ */ e("div", { className: "settings-page", children: /* @__PURE__ */ n("div", { className: "settings-container", children: [
/* @__PURE__ */ e("h1", { className: "settings-title", children: "Settings" }),
/* @__PURE__ */ e(j, { user: b }),
/* @__PURE__ */ e(
M,
{
subscriptions: r,
onUpdate: f,
onUnsubscribe: N
}
),
/* @__PURE__ */ e(
V,
{
accounts: s,
onCreate: g,
onDelete: p
}
)
] }) });
}
export {
R as SettingsPage
};
//# sourceMappingURL=index-C82Ao2Dd.js.map