@scalio-cloud/ui 0.29.0 → 0.30.0

package/README.md

@@ -325,6 +325,24 @@ const reset = factoryResetApi(api);   // once, outside the component
 `SettingsField` (label, field, help) and `SettingsRow` (title and help left, a switch or button right; `tone="danger"`)
 keep the fields inside a `SettingsSection` the same in every app.
 
+## Updates im SaaS-Betrieb: Banner und Einstellungen → Updates (React)
+
+Since 0.30.0 (scalio-docs ADR 0074) a SaaS instance shows the update Compass offers it. Server side: scalio-connect
+0.14.0 `saas_updates_router` (`/api/saas-updates*`). Compass runs the update; the app shows the offer, the deadline
+and the maintenance window and passes on the admin's choice (jetzt, verschieben bis zur Frist, automatisch/nur auf
+Klick, eigenes Fenster). Self-hosted instances answer `saas: false` and both blocks render nothing.
+
+```jsx
+import { UpdateBanner, SaasUpdatesPanel, saasUpdatesApi } from "@scalio-cloud/ui/react";
+
+const updates = saasUpdatesApi(api);   // once, outside the component
+<AppShell banner={<UpdateBanner client={updates} lang={lang} onOpen={() => navigate("/settings/updates")} />} … />
+<SaasUpdatesPanel client={updates} lang={lang} notify={(m, tone) => toast[tone === "error" ? "error" : "success"](m)} />
+```
+
+The banner is blue (orange for a security update); people without admin role only see when the update is planned.
+«Später» hides it for this version until the next browser session.
+
 ## Benachrichtigungen: E-Mail-Versand und E-Mail-Vorlagen (React)
 
 Since 0.29.0 (ADR 0069 W5) every app sends mail the same way. The server side is scalio-platform 0.8.0 `mail`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "description": "Scalio Control Room design tokens, Tailwind preset, self-hosted fonts, the shared app header, sign-in layout, sidebar and page blocks",
   "license": "SEE LICENSE IN README.md",
   "private": false,

package/react/index.js

@@ -378,6 +378,6 @@ module.exports = {
   TEST_IDS,
   initials,
 };
-Object.assign(module.exports, Nav, Blocks, require("./settings"), require("./support"), require("./beacon"), require("./security"), require("./license"), require("./palette"), require("./unify"), require("./profile"), require("./actions"), require("./selftest"), require("./users"), require("./roles"), require("./wizard"), require("./maintenance"), require("./audit"), require("./mail"));
+Object.assign(module.exports, Nav, Blocks, require("./settings"), require("./support"), require("./beacon"), require("./security"), require("./license"), require("./palette"), require("./unify"), require("./profile"), require("./actions"), require("./selftest"), require("./users"), require("./roles"), require("./wizard"), require("./maintenance"), require("./audit"), require("./mail"), require("./saas_updates"));
 // After the exports above: auth.js uses LanguageToggle and ThemeToggle from this module.
 Object.assign(module.exports, require("./auth"));

package/react/mail.js

@@ -126,7 +126,8 @@ const LABELS = {
 function textToHtml(text) {
   if (!text || /<[a-zA-Z/][^>]*>/.test(text)) return text || "";
   const esc = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-  return esc.split(/\n{2,}/).map((p) => p.trim()).filter(Boolean).map((p) => `<p>${p.replace(/\n/g, "<br>")}</p>`).join("");
+  // Quill keeps a paragraph per line, so an empty paragraph keeps the blank line between two paragraphs.
+  return esc.split(/\n{2,}/).map((p) => p.trim()).filter(Boolean).map((p) => `<p>${p.replace(/\n/g, "<br>")}</p>`).join("<p><br></p>");
 }
 
 function mailLabels(lang, overrides) {

package/react/saas_updates.js

@@ -0,0 +1,274 @@
+"use strict";
+// SaaS updates from Compass (scalio-docs ADR 0074): UpdateBanner on every page (blue, security orange) and
+// SaasUpdatesPanel in Einstellungen -> Updates for admins. Backend: scalio-connect `saas_updates_router`
+// (GET /saas-updates/banner, GET /saas-updates, POST /saas-updates/{now,postpone,mode,window}). Compass runs the
+// update; the app only shows the offer and passes on the customer's choice.
+const React = require("react");
+const h = React.createElement;
+const Icons = require("./icons");
+const { Notice } = require("./blocks");
+const { SettingsSection, SettingsField: Field } = require("./settings");
+
+const LABELS = {
+  de: {
+    title: "Updates",
+    hint: "Scalio stellt neue Versionen bereit. Sie wählen, wann Ihre Instanz aktualisiert wird, spätestens bis zur Frist.",
+    current: "Aktuelle Version",
+    available: "Version {version} ist verfügbar",
+    security: "Sicherheitsupdate {version} ist verfügbar",
+    bannerText: "Spätestens am {due}.",
+    bannerPlanned: "Geplant: {planned}.",
+    bannerManual: "Wird erst auf Klick oder zur Frist installiert.",
+    bannerAction: "Ansehen",
+    plannedTitle: "Update am {planned}",
+    plannedText: "Version {version} wird installiert. Die Anwendung ist dabei kurz nicht erreichbar.",
+    later: "Später",
+    none: "Ihre Instanz ist aktuell.",
+    notes: "Was ist neu",
+    due: "Frist",
+    planned: "Geplant",
+    plannedNone: "erst auf Klick, spätestens zur Frist",
+    held: "Scalio hält dieses Update für Ihre Instanz noch zurück.",
+    forced: "Scalio hat den Termin festgelegt.",
+    now: "Jetzt aktualisieren",
+    nowConfirm: "Version {version} jetzt installieren? Die Anwendung ist einige Minuten nicht erreichbar.",
+    postpone: "Verschieben bis",
+    postponeGo: "Verschieben",
+    mode: "Verhalten",
+    modeAuto: "Automatisch im Wartungsfenster",
+    modeManual: "Nur auf Klick (spätestens zur Frist)",
+    window: "Wartungsfenster",
+    windowHint: "Updates laufen nur in diesem Fenster. Ohne eigenes Fenster gilt der Standard von Scalio.",
+    days: "Tage (keiner = jeden Tag)",
+    start: "Beginn",
+    hours: "Dauer (Stunden)",
+    tz: "Zeitzone",
+    save: "Fenster speichern",
+    useDefault: "Standard verwenden",
+    ownWindow: "eigenes Fenster",
+    defaultWindow: "Standard",
+    last: "Letztes Update",
+    lastDone: "{version} installiert am {at}",
+    lastError: "{version} fehlgeschlagen am {at}, zurück auf der alten Version",
+    unreachable: "Compass ist gerade nicht erreichbar. Updates laufen trotzdem wie geplant.",
+    saved: "Gespeichert.",
+    weekdays: ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"],
+  },
+  en: {
+    title: "Updates",
+    hint: "Scalio provides new versions. You choose when your instance is updated, at the latest by the deadline.",
+    current: "Current version",
+    available: "Version {version} is available",
+    security: "Security update {version} is available",
+    bannerText: "At the latest on {due}.",
+    bannerPlanned: "Planned: {planned}.",
+    bannerManual: "Installed only on a click or at the deadline.",
+    bannerAction: "View",
+    plannedTitle: "Update on {planned}",
+    plannedText: "Version {version} will be installed. The application is briefly unavailable.",
+    later: "Later",
+    none: "Your instance is up to date.",
+    notes: "What's new",
+    due: "Deadline",
+    planned: "Planned",
+    plannedNone: "only on a click, at the latest at the deadline",
+    held: "Scalio is still holding this update back for your instance.",
+    forced: "Scalio has set the date.",
+    now: "Update now",
+    nowConfirm: "Install version {version} now? The application is unavailable for a few minutes.",
+    postpone: "Postpone until",
+    postponeGo: "Postpone",
+    mode: "Behaviour",
+    modeAuto: "Automatically in the maintenance window",
+    modeManual: "Only on a click (at the latest at the deadline)",
+    window: "Maintenance window",
+    windowHint: "Updates run only in this window. Without an own window, Scalio's default applies.",
+    days: "Days (none = every day)",
+    start: "Start",
+    hours: "Duration (hours)",
+    tz: "Time zone",
+    save: "Save window",
+    useDefault: "Use default",
+    ownWindow: "own window",
+    defaultWindow: "default",
+    last: "Last update",
+    lastDone: "{version} installed on {at}",
+    lastError: "{version} failed on {at}, back on the old version",
+    unreachable: "Compass cannot be reached right now. Updates still run as planned.",
+    saved: "Saved.",
+    weekdays: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+  },
+};
+
+function labels(lang, overrides) {
+  return Object.assign({}, LABELS[lang === "en" ? "en" : "de"], overrides || {});
+}
+
+function fill(text, vars) {
+  return Object.keys(vars || {}).reduce((s, k) => s.split(`{${k}}`).join(vars[k] == null ? "" : vars[k]), text);
+}
+
+function when(iso, lang) {
+  if (!iso) return "";
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  return d.toLocaleString(lang === "en" ? "en-GB" : "de-CH", { dateStyle: "medium", timeStyle: "short" });
+}
+
+function errorText(err) {
+  const d = err && err.response && err.response.data && err.response.data.detail;
+  if (typeof d === "string") return d;
+  return (err && err.message) || String(err);
+}
+
+// api: axios instance with the app's base URL (/api).
+function saasUpdatesApi(api) {
+  return {
+    banner: () => api.get("/saas-updates/banner").then((r) => r.data),
+    state: (refresh) => api.get(refresh ? "/saas-updates?refresh=1" : "/saas-updates").then((r) => r.data),
+    act: (op, body) => api.post(`/saas-updates/${op}`, body || {}).then((r) => r.data),
+  };
+}
+
+// Props: client (saasUpdatesApi), lang, labels, settingsTo (address of Einstellungen -> Updates), onOpen() (e.g. navigate),
+// storage (default sessionStorage; «Später» hides the banner for this version until the next session).
+function UpdateBanner(props) {
+  const L = labels(props.lang, props.labels);
+  const [data, setData] = React.useState(null);
+  const [hidden, setHidden] = React.useState(false);
+  React.useEffect(() => {
+    let alive = true;
+    props.client.banner().then((d) => alive && setData(d)).catch(() => {});
+    return () => { alive = false; };
+  }, [props.client]);
+  const offer = data && data.saas && data.offer;
+  const key = offer ? `scalio-update-later-${offer.version}` : "";
+  const store = props.storage || (typeof window !== "undefined" ? window.sessionStorage : null);
+  let dismissed = hidden;
+  try { dismissed = dismissed || (!!key && !!store && store.getItem(key) === "1"); } catch (e) { /* private mode */ }
+  if (!offer || dismissed) return null;
+  const later = () => {
+    try { if (store) store.setItem(key, "1"); } catch (e) { /* private mode */ }
+    setHidden(true);
+  };
+  if (!data.can_act) {
+    if (!offer.planned_at) return null;
+    return h(Notice, { kind: "info", banner: true, testId: "saas-update-banner", title: fill(L.plannedTitle, { planned: when(offer.planned_at, props.lang) }),
+      onDismiss: later, dismissLabel: L.later }, fill(L.plannedText, { version: offer.version }));
+  }
+  const text = [fill(L.bannerText, { due: when(offer.due_at, props.lang) }),
+    offer.planned_at ? fill(L.bannerPlanned, { planned: when(offer.planned_at, props.lang) }) : L.bannerManual].join(" ");
+  // onOpen (e.g. the router's navigate) wins over a plain link to settingsTo.
+  const action = props.onOpen
+    ? { label: L.bannerAction, onClick: props.onOpen, testId: "saas-update-banner-open" }
+    : props.settingsTo ? { label: L.bannerAction, href: props.settingsTo, testId: "saas-update-banner-open" } : null;
+  return h(Notice, {
+    kind: offer.kind === "security" ? "warn" : "info", banner: true, testId: "saas-update-banner",
+    title: fill(offer.kind === "security" ? L.security : L.available, { version: offer.version }),
+    action, onDismiss: later, dismissLabel: L.later,
+  }, text);
+}
+
+const EMPTY_WINDOW = { days: [], start: "02:00", hours: 3, tz: "Europe/Zurich" };
+
+// Props: client (saasUpdatesApi), lang, labels, notify(message, tone), formatError(err).
+function SaasUpdatesPanel(props) {
+  const L = labels(props.lang, props.labels);
+  const fmtErr = props.formatError || errorText;
+  const [st, setSt] = React.useState(null);
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState("");
+  const [until, setUntil] = React.useState("");
+  const [win, setWin] = React.useState(EMPTY_WINDOW);
+
+  const take = (d) => {
+    setSt(d);
+    if (d && d.window) setWin(Object.assign({}, EMPTY_WINDOW, d.window));
+  };
+  React.useEffect(() => {
+    let alive = true;
+    props.client.state().then((d) => alive && take(d)).catch((e) => alive && setError(fmtErr(e)));
+    return () => { alive = false; };
+  }, [props.client]);
+
+  const act = async (op, body) => {
+    setBusy(true);
+    setError("");
+    try {
+      take(await props.client.act(op, body));
+      if (props.notify) props.notify(L.saved, "ok");
+    } catch (e) {
+      const t = fmtErr(e);
+      if (props.notify) props.notify(t, "error");
+      setError(t);
+    }
+    setBusy(false);
+  };
+
+  if (!st) return h(SettingsSection, { id: "updates", title: L.title, description: L.hint, testId: "saas-updates" },
+    error ? h("div", { className: "scalio-notice is-error", role: "alert" }, error) : null);
+  if (st.saas === false) return null;
+
+  const offer = st.offer;
+  const rows = [];
+  if (st.reachable === false) rows.push(h("div", { key: "u", className: "scalio-notice is-warn", "data-testid": "saas-updates-unreachable" }, L.unreachable));
+  rows.push(h(Field, { key: "cur", label: L.current }, h("div", { className: "scalio-settings-text", "data-testid": "saas-updates-current" }, st.current_version || "–")));
+  if (!offer) {
+    if (st.reachable !== false) rows.push(h("p", { key: "none", className: "scalio-settings-text", "data-testid": "saas-updates-none" }, L.none));
+  } else {
+    const due = offer.due_at ? offer.due_at.slice(0, 10) : "";
+    rows.push(h("div", { key: "offer", className: cxNotice(offer), "data-testid": "saas-updates-offer" },
+      h("div", { className: "scalio-notice-body" },
+        h("div", { className: "scalio-notice-title" }, fill(offer.kind === "security" ? L.security : L.available, { version: offer.version })),
+        h("div", { className: "scalio-notice-text" },
+          `${L.due}: ${when(offer.due_at, props.lang)} · ${L.planned}: ${offer.planned_at ? when(offer.planned_at, props.lang) : L.plannedNone}`,
+          offer.held ? h("div", null, L.held) : null, offer.forced ? h("div", null, L.forced) : null))));
+    if (offer.notes) rows.push(h(Field, { key: "notes", label: L.notes },
+      h("pre", { className: "scalio-settings-text", style: { whiteSpace: "pre-wrap" }, "data-testid": "saas-updates-notes" }, offer.notes)));
+    if (!offer.forced) {
+      rows.push(h("div", { key: "acts", className: "scalio-settings-section-footer" },
+        h("button", { type: "button", className: "scalio-btn is-solid", disabled: busy || offer.held, "data-testid": "saas-updates-now",
+          onClick: () => { if (window.confirm(fill(L.nowConfirm, { version: offer.version }))) act("now"); } },
+          h(Icons.Download, { className: "scalio-icon" }), L.now)));
+      rows.push(h(Field, { key: "post", id: "saas-updates-until", label: L.postpone },
+        h("div", { style: { display: "flex", gap: "0.5rem" } },
+          h("input", { id: "saas-updates-until", type: "date", className: "scalio-input", value: until, max: due, disabled: busy,
+            "data-testid": "saas-updates-until", onChange: (e) => setUntil(e.target.value) }),
+          h("button", { type: "button", className: "scalio-btn", disabled: busy || !until, "data-testid": "saas-updates-postpone",
+            onClick: () => act("postpone", { until: new Date(`${until}T00:00:00`).toISOString() }) }, L.postponeGo))));
+    }
+  }
+  rows.push(h(Field, { key: "mode", label: L.mode },
+    ["auto", "manual"].map((m) => h("label", { key: m, className: "scalio-settings-check" },
+      h("input", { type: "radio", name: "saas-updates-mode", checked: st.mode === m, disabled: busy, "data-testid": `saas-updates-mode-${m}`,
+        onChange: () => act("mode", { mode: m }) }),
+      h("span", null, m === "auto" ? L.modeAuto : L.modeManual)))));
+  const toggleDay = (d) => setWin(Object.assign({}, win, { days: win.days.includes(d) ? win.days.filter((x) => x !== d) : win.days.concat([d]).sort() }));
+  rows.push(h(Field, { key: "win", label: `${L.window} (${st.own_window ? L.ownWindow : L.defaultWindow})`, hint: L.windowHint },
+    h("div", { className: "scalio-settings-text" }, L.days),
+    h("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.75rem" } },
+      L.weekdays.map((name, d) => h("label", { key: d, className: "scalio-settings-check" },
+        h("input", { type: "checkbox", checked: win.days.includes(d), disabled: busy, "data-testid": `saas-updates-day-${d}`, onChange: () => toggleDay(d) }),
+        h("span", null, name)))),
+    h("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem", marginTop: "0.5rem" } },
+      h("label", null, L.start, " ", h("input", { type: "time", className: "scalio-input", value: win.start, disabled: busy, "data-testid": "saas-updates-start",
+        onChange: (e) => setWin(Object.assign({}, win, { start: e.target.value })) })),
+      h("label", null, L.hours, " ", h("input", { type: "number", min: 1, max: 12, className: "scalio-input", value: win.hours, disabled: busy, "data-testid": "saas-updates-hours",
+        onChange: (e) => setWin(Object.assign({}, win, { hours: Number(e.target.value) })) })),
+      h("label", null, L.tz, " ", h("input", { className: "scalio-input", value: win.tz, disabled: busy, "data-testid": "saas-updates-tz",
+        onChange: (e) => setWin(Object.assign({}, win, { tz: e.target.value })) }))),
+    h("div", { className: "scalio-settings-section-footer" },
+      h("button", { type: "button", className: "scalio-btn", disabled: busy, "data-testid": "saas-updates-save-window", onClick: () => act("window", { window: win }) }, L.save),
+      st.own_window ? h("button", { type: "button", className: "scalio-btn", disabled: busy, "data-testid": "saas-updates-default-window", onClick: () => act("window", {}) }, L.useDefault) : null)));
+  if (st.last) rows.push(h(Field, { key: "last", label: L.last },
+    h("div", { className: "scalio-settings-text", "data-testid": "saas-updates-last" },
+      fill(st.last.state === "done" ? L.lastDone : L.lastError, { version: st.last.version, at: when(st.last.at, props.lang) }))));
+  if (error) rows.push(h("div", { key: "err", className: "scalio-notice is-error", role: "alert", "data-testid": "saas-updates-error" }, error));
+  return h(SettingsSection, { id: "updates", title: L.title, description: L.hint, testId: "saas-updates" }, rows);
+}
+
+function cxNotice(offer) {
+  return `scalio-notice ${offer.kind === "security" ? "is-warn" : "is-info"}`;
+}
+
+module.exports = { UpdateBanner, SaasUpdatesPanel, saasUpdatesApi, SAAS_UPDATE_LABELS: LABELS };