@scalio-cloud/ui 0.9.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.11.0
+- Self-hosted support (ADR 0022, T11; needs scalio-connect 0.7.0 in the backend): `supportApi` gets `status()` and
+  `setButtonHidden(hidden)`. The support drawer asks `status()` first; a self-hosted installation without a
+  connection shows no form, only a note and the button "Zum Scalio-Portal" (`<portal>/support`). The card
+  "Support-Verbindung" gets the switch "Support-Knopf in der Kopfzeile ausblenden". **Visible change** only where
+  the backend reports `link_only` or the client has `setButtonHidden`; no token changes.
+
+## 0.10.0
+- `LicensePanel` takes more from an app's own `map`: a `hint` per usage bar (e.g. base + add-on seats), add-ons with
+  `badges`, `detail`, `tone` (`info`/`warn`) and `removable: false`, `addonErrors` (invalid add-ons, removable),
+  `addonsHidden`, `addonsReadOnly` and `keyReadOnly` (a note instead of the form) and a `copied` text per row.
+  Lets Nexus keep its trials, demo mode and badges on the shared panel. **No visible change** for apps that use
+  `mapScalioLicense`.
+
 ## 0.9.0
 - New `CommandPalette` (⌘K / Strg+K): finds every page of the sidebar data (`nav`) plus extra `pages`, remembers the
   last visited pages, and takes app commands as `groups` (Nexus: AI and guarded actions). Arrow keys, Enter, Esc,

package/README.md

@@ -214,7 +214,8 @@ const license = licenseApi(api);
 `securityApi` reads snake_case and camelCase answers. `notify(text, tone)` gets `"success"` or `"error"`; without it
 the blocks show the message themselves. `confirm` is the app's dialog (`{title, action, danger}` -> Promise<boolean>),
 `window.confirm` otherwise. `formatError(err)` lets the app phrase API errors (for example license limit codes). A license backend with other routes passes its own `client` and a `map(license, {L})`
-that returns the view model described in `react/license.js`.
+that returns the view model described in `react/license.js`. Nexus does this: its `map` adds trial badges, seat hints, invalid
+add-ons and read-only notes (demo mode), and passes its trial notices as `statusExtra` and the reminder settings as `children`.
 
 ## Command palette (React)
 

package/nav.css

@@ -400,3 +400,11 @@
   .scalio-palette { max-height: 85vh; }
   .scalio-palette-foot, .scalio-palette-enter { display: none; }
 }
+.scalio-license-bar-hint { margin: 0.25rem 0 0; font-size: 0.6875rem; color: hsl(var(--primary)); }
+.scalio-license-addon-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
+.scalio-license-addon-name .scalio-badge { font-size: 10px; }
+.scalio-license-addon.tone-info { border-color: hsl(var(--primary) / 0.35); background: hsl(var(--primary) / 0.05); }
+.scalio-license-addon.tone-warn { border-color: #fcd34d; background: rgb(254 243 199 / 0.5); }
+.dark .scalio-license-addon.tone-warn { border-color: rgb(251 191 36 / 0.4); background: rgb(251 191 36 / 0.08); }
+.scalio-license-addon-error { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+.scalio-license-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.9.0",
+  "version": "0.11.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/labels.js

@@ -88,6 +88,12 @@ const LABELS = {
     supportConnStatus: { unpaired: "Nicht verbunden", pending: "Wartet auf Bestätigung", active: "Verbunden", blocked: "Gesperrt" },
     supportConnHelp: "Tickets aus dieser Installation gehen an den Scalio Support. Den einmaligen Code erhalten Sie im Scalio-Portal unter Support -> Verbundene Apps.",
     supportConnHelpConnected: "Tickets aus dieser Installation gehen an den Scalio Support.",
+    supportLinkOnly: "Diese Installation ist nicht mit dem Scalio Support verbunden. Eröffnen Sie Ihre Anfrage bitte im Scalio-Portal.",
+    supportLinkOnlyAdmin: "Ein Admin kann die Verbindung unter Einstellungen -> Support-Verbindung einrichten, dann gehen Anfragen direkt aus der App.",
+    supportOpenPortal: "Zum Scalio-Portal",
+    supportButtonHidden: "Support-Knopf in der Kopfzeile ausblenden",
+    supportButtonHiddenNote: "Der Support-Knopf ist ausgeblendet.",
+    supportButtonShownNote: "Der Support-Knopf ist wieder sichtbar.",
     supportConnPending: "Ein Administrator Ihrer Organisation muss die Verbindung im Scalio-Portal bestätigen.",
     supportConnBlocked: "Diese Installation ist für den Support gesperrt. Bitte wenden Sie sich an Scalio.",
     supportConnKeyLost: "Der Schlüssel dieser Verbindung kann nicht mehr gelesen werden. Bitte verbinden Sie neu.",
@@ -277,6 +283,12 @@ const LABELS = {
     supportConnStatus: { unpaired: "Not connected", pending: "Waiting for confirmation", active: "Connected", blocked: "Blocked" },
     supportConnHelp: "Tickets from this installation go to Scalio Support. You get the one-time code in the Scalio portal under Support -> Connected apps.",
     supportConnHelpConnected: "Tickets from this installation go to Scalio Support.",
+    supportLinkOnly: "This installation is not connected to Scalio Support. Please open your request in the Scalio portal.",
+    supportLinkOnlyAdmin: "An admin can set up the connection under Settings -> Support connection; then requests go straight from the app.",
+    supportOpenPortal: "Open the Scalio portal",
+    supportButtonHidden: "Hide the support button in the header",
+    supportButtonHiddenNote: "The support button is hidden.",
+    supportButtonShownNote: "The support button is visible again.",
     supportConnPending: "An administrator of your organisation must confirm the connection in the Scalio portal.",
     supportConnBlocked: "This installation is blocked for support. Please contact Scalio.",
     supportConnKeyLost: "The key of this connection can no longer be read. Please connect again.",

package/react/license.js

@@ -36,8 +36,11 @@ function licenseApi(api) {
 }
 
 // View model:
-// { edition, licensed, customer, managed, messages[], rows[{label, value, tone, mono, copy, testId}],
-//   features[{key, label}] | null, usage[{key, label, used, max}], addons[{id, name, detail, included}], addonErrors[{key, error}], keyPresent }
+// { edition, licensed, customer, managed, messages[], rows[{label, value, tone, mono, copy, copied, testId}],
+//   features[{key, label}] | null, usage[{key, label, used, max, hint}],
+//   addons[{id, name, seats, exp, detail, badges[{label, tone}], tone, removable}], addonErrors[{key, error, addon}], keyPresent,
+//   addonsHidden, addonsReadOnly (note instead of the add-on form), keyReadOnly (note instead of the key form) }
+// Optional fields let an app with its own license model (Nexus: trials, demo) show more without its own panel.
 function mapScalioLicense(lic, opts) {
   const o = opts || {};
   const L = o.L || labelsFor(o.lang).license;
@@ -94,7 +97,8 @@ function UsageBar({ item }) {
       h("span", { className: "scalio-license-bar-label" }, item.label),
       h("span", { className: cx("scalio-license-bar-value", full && "is-error") }, used === null ? "-" : used, " / ", unlimited ? "∞" : item.max)
     ),
-    h("div", { className: "scalio-license-bar" }, h("div", { className: cx(full && "is-full", unlimited && "is-unlimited"), style: { width: `${pct}%` } }))
+    h("div", { className: "scalio-license-bar" }, h("div", { className: cx(full && "is-full", unlimited && "is-unlimited"), style: { width: `${pct}%` } })),
+    item.hint ? h("p", { className: "scalio-license-bar-hint", "data-testid": `license-limit-${item.key}-hint` }, item.hint) : null
   );
 }
 
@@ -155,10 +159,10 @@ function LicensePanel(props) {
   const addAddon = async () => {
     if (await run(() => client.addAddon(addon.trim()), L.addonActivated)) setAddon("");
   };
-  const copy = async (value) => {
+  const copy = async (value, copied) => {
     try {
       await navigator.clipboard.writeText(value);
-      say(L.idCopied);
+      say(copied || L.idCopied);
     } catch (e) {
       say(L.copyFailed, "error");
     }
@@ -170,7 +174,7 @@ function LicensePanel(props) {
       { key: r.label + i },
       h("dt", null, r.label),
       r.copy
-        ? h("dd", null, h("button", { type: "button", className: "scalio-license-copy", title: L.copy, onClick: () => copy(r.value), "data-testid": r.testId },
+        ? h("dd", null, h("button", { type: "button", className: "scalio-license-copy", title: L.copy, onClick: () => copy(r.value, r.copied), "data-testid": r.testId },
             r.value, h(Icons.Copy, { className: "scalio-icon", width: 12, height: 12 })))
         : h("dd", { className: cx(r.mono && "is-mono"), "data-testid": r.testId }, r.tone ? h("span", { className: `is-${r.tone}` }, r.value) : r.value)
     );
@@ -219,7 +223,7 @@ function LicensePanel(props) {
         ? h("div", { className: "scalio-license-usage" }, h("div", { className: "scalio-license-sub" }, L.usage), m.usage.map((u) => h(UsageBar, { key: u.key, item: u })))
         : null
     ),
-    h(
+    m.addonsHidden ? null : h(
       "div",
       { className: "scalio-license-part", "data-testid": "license-addons" },
       h("div", { className: "scalio-license-sub" }, h(Icons.Puzzle, { className: "scalio-icon", width: 14, height: 14 }), L.addons),
@@ -230,16 +234,23 @@ function LicensePanel(props) {
             m.addons.map((a) =>
               h(
                 "div",
-                { key: a.id, className: "scalio-license-addon", "data-testid": `addon-card-${a.id}` },
+                { key: a.id, className: cx("scalio-license-addon", a.tone && `tone-${a.tone}`), "data-testid": `addon-card-${a.id}` },
                 h(
                   "div",
                   { style: { minWidth: 0 } },
-                  h("div", { className: "scalio-license-addon-name" }, a.name),
+                  h(
+                    "div",
+                    { className: "scalio-license-addon-name" },
+                    a.name,
+                    (a.badges || []).map((b) =>
+                      h("span", { key: b.label, className: cx("scalio-badge", b.tone && `is-${b.tone}`), "data-testid": b.testId }, b.label))
+                  ),
                   h("p", { className: "scalio-license-addon-detail" },
-                    a.seats ? `+${a.seats}` : h("span", { className: "is-ok" }, L.included),
-                    a.exp ? ` · ${L.maintenanceUntil} ${a.exp}` : "")
+                    a.detail !== undefined
+                      ? a.detail
+                      : [a.seats ? `+${a.seats}` : h("span", { key: "i", className: "is-ok" }, L.included), a.exp ? ` · ${L.maintenanceUntil} ${a.exp}` : ""])
                 ),
-                m.managed
+                m.managed || m.addonsReadOnly || a.removable === false
                   ? null
                   : h("button", { type: "button", className: "scalio-btn is-ghost is-danger", disabled: busy, title: L.remove, "aria-label": L.remove,
                       "data-testid": `addon-remove-${a.id}`, onClick: () => run(() => client.removeAddon(a), L.addonRemoved) },
@@ -248,8 +259,20 @@ function LicensePanel(props) {
             )
           )
         : h("p", { className: "scalio-license-empty" }, L.noAddons),
-      m.addonErrors.map((e) => h("div", { key: e.key, className: "scalio-license-addon-error" }, e.error)),
-      m.managed
+      m.addonErrors.map((e) =>
+        h(
+          "div",
+          { key: e.key, className: "scalio-license-addon-error", "data-testid": e.testId },
+          h("span", null, e.error),
+          e.addon && !m.managed && !m.addonsReadOnly
+            ? h("button", { type: "button", className: "scalio-license-link", disabled: busy, "data-testid": `addon-remove-${e.addon.id}`,
+                onClick: () => run(() => client.removeAddon(e.addon), L.addonRemoved) }, L.remove)
+            : null
+        )
+      ),
+      m.addonsReadOnly
+        ? h("div", { className: "scalio-notice is-info", "data-testid": "license-addon-readonly" }, m.addonsReadOnly)
+        : m.managed
         ? null
         : h(
             "div",
@@ -261,7 +284,9 @@ function LicensePanel(props) {
                 h(Icons.Plus, { className: "scalio-icon" }), L.add))
           )
     ),
-    m.managed
+    m.keyReadOnly && !m.managed
+      ? h("div", { className: "scalio-license-part" }, h("div", { className: "scalio-notice is-info", "data-testid": "license-key-readonly" }, m.keyReadOnly))
+      : m.managed
       ? null
       : h(
           "div",

package/react/support.js

@@ -29,6 +29,8 @@ function supportApi(api) {
     connect: (portal_url, code) => data(api.post("/support/connection", { portal_url, code })),
     check: () => data(api.post("/support/connection/check")),
     disconnect: () => data(api.delete("/support/connection")),
+    status: () => data(api.get("/support/status")),
+    setButtonHidden: (hidden) => data(api.put("/support/connection/button", { hidden })),
   };
 }
 
@@ -223,8 +225,27 @@ function TicketDetail({ client, id, L, lang, onBack }) {
   );
 }
 
+// Self-hosted without a connection (ADR 0022, T11): no form, only the way to the portal's support page.
+function PortalLink({ status, L }) {
+  return h(
+    "div",
+    { className: "scalio-support-form", "data-testid": "support-link-only" },
+    h("p", { className: "scalio-support-meta" }, L.supportLinkOnly),
+    h("a", { className: "scalio-btn-primary", href: status.portal_page, target: "_blank", rel: "noopener noreferrer",
+      "data-testid": "support-portal-link" }, L.supportOpenPortal),
+    h("p", { className: "scalio-support-meta" }, L.supportLinkOnlyAdmin)
+  );
+}
+
 function SupportDesk({ client, page, lang, labels }) {
   const L = labelsFor(lang, labels);
+  const [status, setStatus] = React.useState(client.status ? null : {});
+  React.useEffect(() => {
+    if (!client.status) return undefined;
+    let alive = true;
+    client.status().then((d) => alive && setStatus(d || {})).catch(() => alive && setStatus({}));
+    return () => { alive = false; };
+  }, [client]);
   const [tab, setTab] = React.useState("new");
   const [ticket, setTicket] = React.useState(null);
   const [note, setNote] = React.useState("");
@@ -233,6 +254,8 @@ function SupportDesk({ client, page, lang, labels }) {
       type: "button", role: "tab", "aria-selected": tab === key, className: cx("scalio-support-tab", tab === key && "is-active"),
       onClick: () => { setTab(key); setTicket(null); setNote(""); }, "data-testid": `support-tab-${key}`,
     }, label);
+  if (status === null) return h("div", { className: "scalio-support-meta" }, L.loading);
+  if (status.link_only && status.portal_page) return h(PortalLink, { status, L });
   return h(
     React.Fragment,
     null,
@@ -313,6 +336,15 @@ function SupportConnection({ client, lang, labels, onChange }) {
       : null,
     note ? h("div", { className: "scalio-notice is-ok", "data-testid": "support-note" }, note) : null,
     error ? h("div", { className: "scalio-notice is-error", role: "alert", "data-testid": "support-error" }, error) : null,
+    client.setButtonHidden
+      ? h(
+          "label",
+          { className: "scalio-support-check", "data-testid": "support-button-hidden" },
+          h("input", { type: "checkbox", checked: !!st.button_hidden, disabled: busy,
+            onChange: (e) => { const hide = e.target.checked; run(() => client.setButtonHidden(hide), hide ? L.supportButtonHiddenNote : L.supportButtonShownNote); } }),
+          h("span", null, L.supportButtonHidden)
+        )
+      : null,
     connected
       ? h(
           "div",