@nivaro/react 0.3.35 → 0.3.37

package/dist/shared/components/profile/ConnectionRollback.js

@@ -0,0 +1,329 @@
+import { jsxs as t, jsx as r, Fragment as T } from "react/jsx-runtime";
+import { useQueryClient as W, useMutation as D } from "@tanstack/react-query";
+import { RotateCcw as R, X as Y, Loader2 as P, AlertTriangle as E, Check as z } from "lucide-react";
+import { useState as m } from "react";
+import { useNivaroClient as G, useItemNavigation as J } from "../../context.js";
+import { post as F } from "../../lib/commands.js";
+import { cn as V, formatNumber as i, formatDateTime as I, formatRelative as L } from "../../lib/utils.js";
+import { Pill as Z, ConfirmButton as ee } from "./primitives.js";
+const q = [
+  ["1h", "Last hour", 36e5],
+  ["24h", "Last 24 hours", 864e5],
+  ["7d", "Last 7 days", 7 * 864e5],
+  ["14d", "Last 14 days", 14 * 864e5],
+  ["custom", "Between…", 0]
+], te = {
+  delete_created: () => "Delete the record it created",
+  restore_values: (n) => `Put back ${n} field${n === 1 ? "" : "s"}`,
+  restore_deleted: (n) => n ? `Bring back the record it deleted, then put back ${n} field${n === 1 ? "" : "s"}` : "Bring back the record it deleted",
+  remove_comment: () => "Remove its comment"
+};
+function K(n) {
+  const d = (x) => String(x).padStart(2, "0");
+  return `${n.getFullYear()}-${d(n.getMonth() + 1)}-${d(n.getDate())}T${d(n.getHours())}:${d(n.getMinutes())}`;
+}
+const O = "h-8 rounded-md border border-slate-200 bg-white px-2 text-[12.5px] text-slate-800 outline-none transition-colors focus:border-nvr-cyan focus-visible:ring-2 focus-visible:ring-nvr-cyan/25 dark:border-border dark:bg-background dark:text-slate-100 dark:[color-scheme:dark]", B = (n) => (n == null ? void 0 : n.message) || "Something went wrong. Try again in a moment.";
+function ce({
+  conn: n,
+  name: d,
+  scope: x,
+  onClose: M
+}) {
+  var S;
+  const f = G(), w = W(), { urlFor: Q, open: j } = J(), v = x === "mine" ? `/mcp-connections/mine/${n}` : `/mcp-connections/${n}`, [h, A] = m("24h"), [N, X] = m(() => K(new Date(Date.now() - 864e5))), [y, H] = m(() => K(/* @__PURE__ */ new Date())), [a, c] = m(null), [g, $] = m(null), [l, C] = m(null), U = () => {
+    var s;
+    if (h === "custom") {
+      const o = new Date(N), b = new Date(y);
+      return Number.isNaN(o.getTime()) || Number.isNaN(b.getTime()) ? null : { from: o.toISOString(), to: b.toISOString() };
+    }
+    const e = ((s = q.find((o) => o[0] === h)) == null ? void 0 : s[2]) ?? 864e5;
+    return { from: new Date(Date.now() - e).toISOString() };
+  }, p = D({
+    mutationFn: () => {
+      const e = U();
+      if (!e) throw new Error("Choose when the window starts and ends");
+      return f.request(F(`${v}/rollback/preview`, e)).then((s) => s.data);
+    },
+    onSuccess: (e) => {
+      c(e), C(null), $(null);
+    }
+  }), u = D({
+    mutationFn: (e) => f.request(
+      F(`${v}/rollback`, {
+        from: e.from,
+        to: e.to,
+        plan_hash: e.plan_hash
+      })
+    ).then((s) => s.data),
+    onSuccess: (e) => {
+      C(e), c(null), w.invalidateQueries({ queryKey: ["nvr-mcp-activity"] }), w.invalidateQueries({ queryKey: ["nvr-mcp-connections"] });
+    },
+    onError: (e) => {
+      var o;
+      const s = e;
+      s.status === 409 && ((o = s.response) != null && o.data) && (c(s.response.data), $(
+        "Some records changed since the preview. This is the new list — check it and apply again."
+      ));
+    }
+  }), _ = (e, s, o) => {
+    const b = { collection: e, itemId: s };
+    return /* @__PURE__ */ r(
+      "a",
+      {
+        href: Q(b),
+        onClick: (k) => {
+          k.metaKey || k.ctrlKey || (k.preventDefault(), j(b));
+        },
+        className: "font-mono text-[11.5px] text-nvr-navy underline-offset-2 hover:underline dark:text-nvr-cyan",
+        children: o
+      }
+    );
+  };
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: "rounded-lg border border-slate-200 bg-slate-50/70 p-3 dark:border-border dark:bg-muted/30",
+      "data-nvr-connection-rollback": !0,
+      children: [
+        /* @__PURE__ */ t("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ r(R, { className: "h-4 w-4 text-slate-500 dark:text-slate-400", "aria-hidden": !0 }),
+          /* @__PURE__ */ t("span", { className: "text-[12.5px] font-semibold text-slate-800 dark:text-slate-100", children: [
+            "Roll back what ",
+            d,
+            " changed"
+          ] }),
+          /* @__PURE__ */ r(
+            "button",
+            {
+              type: "button",
+              onClick: M,
+              "aria-label": "Close",
+              "data-tip": "Close",
+              className: "ml-auto rounded p-1 text-slate-400 transition-colors hover:bg-muted hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-nvr-cyan/40 dark:hover:text-slate-200",
+              children: /* @__PURE__ */ r(Y, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t("div", { className: "mt-2.5 flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-1 rounded-md bg-slate-100 p-0.5 dark:bg-muted", children: q.map(([e, s]) => /* @__PURE__ */ r(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": h === e,
+              onClick: () => {
+                A(e), c(null);
+              },
+              className: V(
+                "h-7 rounded px-2.5 text-[12px] font-medium transition-colors",
+                h === e ? "bg-white text-slate-900 shadow-sm dark:bg-card dark:text-white" : "text-slate-600 hover:text-slate-900 dark:text-slate-300 dark:hover:text-white"
+              ),
+              children: s
+            },
+            e
+          )) }),
+          h === "custom" && /* @__PURE__ */ t("span", { className: "flex flex-wrap items-center gap-1.5 text-[12px] text-slate-600 dark:text-slate-300", children: [
+            /* @__PURE__ */ r(
+              "input",
+              {
+                type: "datetime-local",
+                value: N,
+                onChange: (e) => {
+                  X(e.target.value), c(null);
+                },
+                "aria-label": "From",
+                className: O
+              }
+            ),
+            "to",
+            /* @__PURE__ */ r(
+              "input",
+              {
+                type: "datetime-local",
+                value: y,
+                onChange: (e) => {
+                  H(e.target.value), c(null);
+                },
+                "aria-label": "To",
+                className: O
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              onClick: () => p.mutate(),
+              disabled: p.isPending,
+              className: "inline-flex h-8 items-center gap-1.5 rounded-md border border-slate-200 bg-white px-3 text-[12.5px] font-medium text-slate-700 transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-nvr-cyan/40 disabled:opacity-40 dark:border-border dark:bg-card dark:text-slate-200",
+              children: [
+                p.isPending && /* @__PURE__ */ r(P, { className: "h-3.5 w-3.5 animate-spin" }),
+                "Preview"
+              ]
+            }
+          )
+        ] }),
+        p.isError && /* @__PURE__ */ r("p", { className: "mt-2 text-[12px] text-red-600 dark:text-red-400", children: B(p.error) }),
+        g && /* @__PURE__ */ t(
+          "p",
+          {
+            className: "mt-2 flex items-center gap-1.5 text-[12px] text-amber-700 dark:text-amber-400",
+            role: "status",
+            children: [
+              /* @__PURE__ */ r(E, { className: "h-3.5 w-3.5 shrink-0" }),
+              g
+            ]
+          }
+        ),
+        l && /* @__PURE__ */ t(
+          "div",
+          {
+            className: "mt-3 rounded-md border border-slate-200 bg-white px-3 py-2 text-[12.5px] dark:border-border dark:bg-card",
+            role: "status",
+            children: [
+              /* @__PURE__ */ t("p", { className: "flex items-center gap-1.5 text-slate-800 dark:text-slate-100", children: [
+                /* @__PURE__ */ r(z, { className: "h-3.5 w-3.5 text-emerald-600 dark:text-emerald-400" }),
+                l.done ? `Rolled back ${i(l.done)} change${l.done === 1 ? "" : "s"}.` : "Nothing was rolled back.",
+                l.skipped > 0 && ` ${i(l.skipped)} left alone.`
+              ] }),
+              l.acted_as === "administrator" && /* @__PURE__ */ r("p", { className: "mt-1 text-[12px] text-slate-500 dark:text-slate-400", children: "The person this app acted for can no longer sign in, so the rollback ran as you." }),
+              l.failed.length > 0 && /* @__PURE__ */ r("ul", { className: "mt-2 space-y-1", children: l.failed.map((e) => /* @__PURE__ */ t(
+                "li",
+                {
+                  className: "text-[12px] text-red-700 dark:text-red-400",
+                  children: [
+                    e.collection,
+                    " #",
+                    e.item,
+                    ": ",
+                    e.error
+                  ]
+                },
+                `${e.collection}:${e.item}:${e.kind}`
+              )) })
+            ]
+          }
+        ),
+        a && /* @__PURE__ */ t("div", { className: "mt-3 space-y-3", children: [
+          /* @__PURE__ */ t("p", { className: "text-[12px] text-slate-600 dark:text-slate-300", children: [
+            I(a.from),
+            " – ",
+            I(a.to),
+            a.owner && x === "admin" && /* @__PURE__ */ t(T, { children: [
+              " · acting for ",
+              a.owner.name
+            ] })
+          ] }),
+          a.truncated && /* @__PURE__ */ t("p", { className: "flex items-center gap-1.5 text-[12px] text-amber-700 dark:text-amber-400", children: [
+            /* @__PURE__ */ r(E, { className: "h-3.5 w-3.5 shrink-0" }),
+            "More changes than one rollback takes. Choose a shorter window."
+          ] }),
+          a.actions.length === 0 && a.skipped.length === 0 ? /* @__PURE__ */ t("p", { className: "text-[12.5px] text-slate-600 dark:text-slate-300", children: [
+            d,
+            " changed nothing in this window."
+          ] }) : /* @__PURE__ */ t(T, { children: [
+            a.actions.length > 0 && /* @__PURE__ */ t("section", { children: [
+              /* @__PURE__ */ t("h4", { className: "text-[11.5px] font-medium text-slate-500 dark:text-slate-400", children: [
+                "Will be undone · ",
+                i(a.actions.length)
+              ] }),
+              /* @__PURE__ */ r("ul", { className: "mt-1 max-h-72 divide-y divide-slate-100 overflow-y-auto rounded-md border border-slate-200 bg-white dark:divide-border/60 dark:border-border dark:bg-card", children: a.actions.slice(0, 300).map((e) => /* @__PURE__ */ t(
+                "li",
+                {
+                  className: "flex flex-wrap items-center gap-x-3 gap-y-1 px-3 py-1.5 text-[12px]",
+                  children: [
+                    /* @__PURE__ */ r("span", { className: "min-w-[180px] text-slate-700 dark:text-slate-200", children: te[e.kind](e.fields.length) }),
+                    e.kind === "delete_created" || e.kind === "restore_deleted" ? /* @__PURE__ */ t("span", { className: "font-mono text-[11.5px] text-slate-600 dark:text-slate-300", children: [
+                      e.collection_label,
+                      " #",
+                      e.item
+                    ] }) : _(e.collection, e.item, `${e.collection_label} #${e.item}`),
+                    e.fields.length > 0 && /* @__PURE__ */ t("span", { className: "flex flex-wrap gap-1", children: [
+                      e.fields.slice(0, 6).map((s) => /* @__PURE__ */ r(
+                        "span",
+                        {
+                          className: "rounded bg-slate-100 px-1.5 py-px font-mono text-[11px] text-slate-600 dark:bg-muted dark:text-slate-300",
+                          children: s
+                        },
+                        s
+                      )),
+                      e.fields.length > 6 && /* @__PURE__ */ t("span", { className: "text-[11px] text-slate-500 dark:text-slate-400", children: [
+                        "+",
+                        e.fields.length - 6
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ t("span", { className: "ml-auto whitespace-nowrap text-[11px] text-slate-500 dark:text-slate-400", children: [
+                      e.writes > 1 ? `${e.writes} writes · ` : "",
+                      L(e.last_at)
+                    ] })
+                  ]
+                },
+                `${e.kind}:${e.collection}:${e.item}:${e.comment_id ?? ""}`
+              )) }),
+              a.actions.length > 300 && /* @__PURE__ */ t("p", { className: "mt-1 text-[11.5px] text-slate-500 dark:text-slate-400", children: [
+                "And ",
+                i(a.actions.length - 300),
+                " more."
+              ] })
+            ] }),
+            a.skipped.length > 0 && /* @__PURE__ */ t("section", { children: [
+              /* @__PURE__ */ t("h4", { className: "text-[11.5px] font-medium text-slate-500 dark:text-slate-400", children: [
+                "Left alone · ",
+                i(a.skipped.length)
+              ] }),
+              /* @__PURE__ */ r("ul", { className: "mt-1 max-h-52 divide-y divide-slate-100 overflow-y-auto rounded-md border border-slate-200 bg-white dark:divide-border/60 dark:border-border dark:bg-card", children: a.skipped.slice(0, 300).map((e) => /* @__PURE__ */ t(
+                "li",
+                {
+                  className: "flex flex-wrap items-center gap-x-3 gap-y-1 px-3 py-1.5 text-[12px]",
+                  children: [
+                    _(e.collection, e.item, `${e.collection_label} #${e.item}`),
+                    /* @__PURE__ */ t("span", { className: "text-slate-600 dark:text-slate-300", children: [
+                      e.reason,
+                      e.by ? ` (${e.by}` : "",
+                      e.by && e.at ? `, ${L(e.at)})` : e.by ? ")" : ""
+                    ] })
+                  ]
+                },
+                `${e.collection}:${e.item}`
+              )) })
+            ] })
+          ] }),
+          a.system_writes > 0 && /* @__PURE__ */ t("p", { className: "text-[11.5px] text-slate-500 dark:text-slate-400", children: [
+            /* @__PURE__ */ r(Z, { tone: "neutral", children: i(a.system_writes) }),
+            " configuration change",
+            a.system_writes === 1 ? "" : "s",
+            " in this window are not rolled back here."
+          ] }),
+          a.actions.length > 0 && !a.truncated && /* @__PURE__ */ t("div", { className: "flex flex-wrap items-center gap-3", children: [
+            /* @__PURE__ */ t(
+              ee,
+              {
+                onConfirm: () => u.mutate(a),
+                disabled: u.isPending,
+                confirmLabel: `Undo ${i(a.actions.length)} now?`,
+                title: `Roll back ${a.actions.length} change${a.actions.length === 1 ? "" : "s"}`,
+                className: "inline-flex h-8 items-center gap-1.5 rounded-md border border-slate-200 bg-white px-3 text-[12.5px] font-medium text-slate-800 transition-colors hover:border-red-300 hover:text-red-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-400/40 disabled:opacity-40 dark:border-border dark:bg-card dark:text-slate-100 dark:hover:border-red-500/50 dark:hover:text-red-400",
+                armedClassName: "border-red-300 bg-red-50 text-red-700 dark:border-red-500/50 dark:bg-red-500/10 dark:text-red-400",
+                children: [
+                  u.isPending ? /* @__PURE__ */ r(P, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ r(R, { className: "h-3.5 w-3.5" }),
+                  "Roll back ",
+                  i(a.actions.length),
+                  " change",
+                  a.actions.length === 1 ? "" : "s"
+                ]
+              }
+            ),
+            /* @__PURE__ */ t("span", { className: "text-[11.5px] text-slate-500 dark:text-slate-400", children: [
+              "Runs as ",
+              x === "mine" ? "you" : ((S = a.owner) == null ? void 0 : S.name) ?? "the person",
+              ", with their permissions. Each change is logged."
+            ] }),
+            u.isError && !g && /* @__PURE__ */ r("span", { className: "text-[12px] text-red-600 dark:text-red-400", children: B(u.error) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ce as ConnectionRollback
+};