@scalio-cloud/ui 0.10.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.12.0
+- New manual button in `AppHeader` (prop `docsUrl`): a book icon between theme and support that opens the product
+  manual in a new tab; `DocsButton` on its own, `manualUrl(product, { stage, lang })` builds the address
+  (`devdocs.<domain>` on dev and test, `docs.<domain>` on production, demo and self-hosted, German under `/de/`).
+  **Visible change** only in apps that pass `docsUrl`; no token changes.
+
+## 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),

package/README.md

@@ -45,7 +45,7 @@ support, avatar.
 A part only appears when the app passes its handler (Compass has no dark mode, so no `onThemeChange`).
 
 ```jsx
-import { AppHeader, PageHeader, VersionTag } from "@scalio-cloud/ui/react";
+import { AppHeader, PageHeader, VersionTag, manualUrl } from "@scalio-cloud/ui/react";
 
 <AppHeader
   brand={{ mark: "N", name: "Scalio Nexus", sub: "Dev" }}  // or your own element
@@ -55,6 +55,7 @@ import { AppHeader, PageHeader, VersionTag } from "@scalio-cloud/ui/react";
   status={<ApiStatus />}                                    // hidden below 768px
   lang={lang} onLangChange={setLang}                        // one click, shows the other language
   theme={theme} themeModes={["light", "dark", "system"]} onThemeChange={setTheme}
+  docsUrl={manualUrl("nexus", { stage, lang })}           // book icon, opens the manual in a new tab
   onSupport={() => setSupportOpen(true)}
   user={{ name, email, role }} onLogout={logout}
   menuItems={[{ label: "Profil", icon: User, onSelect: () => nav("/profile"), testId: "profile-link" }]}

package/package.json

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

@@ -32,6 +32,7 @@ const LifeBuoy = icon([
   ["circle", { cx: 12, cy: 12, r: 4 }],
   ["path", { d: "m4.93 4.93 4.24 4.24M14.83 9.17l4.24-4.24M14.83 14.83l4.24 4.24M9.17 14.83l-4.24 4.24" }],
 ]);
+const BookOpen = icon([["path", { d: "M12 7v14" }], ["path", { d: "M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" }]]);
 const LogOut = icon([["path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" }]]);
 const Menu = icon([["path", { d: "M4 6h16M4 12h16M4 18h16" }]]);
 const Check = icon([["path", { d: "M20 6 9 17l-5-5" }]]);
@@ -99,5 +100,5 @@ const History = icon([
 ]);
 const CornerDownLeft = icon([["path", { d: "M20 4v7a4 4 0 0 1-4 4H4" }], ["path", { d: "m9 10-5 5 5 5" }]]);
 
-module.exports = { Sun, Moon, Monitor, LifeBuoy, LogOut, Menu, Check, X, Search, ChevronDown, Fingerprint, FileStack, ShieldCheck, Hammer, Activity,
+module.exports = { Sun, Moon, Monitor, LifeBuoy, BookOpen, LogOut, Menu, Check, X, Search, ChevronDown, Fingerprint, FileStack, ShieldCheck, Hammer, Activity,
   Smartphone, KeyRound, Trash, Copy, Puzzle, Plus, Alert, History, CornerDownLeft };

package/react/index.js

@@ -10,6 +10,7 @@ const TEST_IDS = {
   menu: "mobile-menu-btn",
   language: "language-toggle-btn",
   theme: "theme-toggle-btn",
+  docs: "docs-link-btn",
   support: "support-ticket-trigger",
   avatar: "user-avatar-btn",
   userName: "user-name",
@@ -233,6 +234,43 @@ function SupportButton({ onClick, lang, labels, testId }) {
   );
 }
 
+// The customer manual of a product: devdocs.<domain> on our dev and test instances, docs.<domain> everywhere
+// else (production, demo, self-hosted). German readers get the German version under /de/.
+const DOCS_DOMAINS = {
+  nexus: "scalionexus.com",
+  citadel: "scaliocitadel.com",
+  foundry: "scaliofoundry.com",
+  rosetta: "scaliorosetta.com",
+};
+
+function manualUrl(product, opts) {
+  const o = opts || {};
+  const domain = DOCS_DOMAINS[product] || product;
+  if (!domain || domain.indexOf(".") < 0) return null;
+  const stage = String(o.stage || "").toLowerCase();
+  const host = (stage === "dev" || stage === "test" ? "devdocs." : "docs.") + domain;
+  return `https://${host}/${o.lang === "de" ? "de/" : ""}`;
+}
+
+// Opens the manual in a new tab.
+function DocsButton({ href, lang, labels, testId }) {
+  if (!href) return null;
+  const L = labelsFor(lang, labels);
+  return h(
+    "a",
+    {
+      className: "scalio-btn scalio-btn-icon",
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      title: L.docs,
+      "aria-label": L.docs,
+      "data-testid": testId || TEST_IDS.docs,
+    },
+    h(Icons.BookOpen, { className: "scalio-icon" })
+  );
+}
+
 function Brand({ brand }) {
   if (!brand) return null;
   if (React.isValidElement(brand)) return brand;
@@ -249,7 +287,7 @@ function Brand({ brand }) {
   return h("div", { className: "scalio-brand" }, inner);
 }
 
-// Header: [menu] brand, left slot ... app actions, status, language, theme, support, avatar.
+// Header: [menu] brand, left slot ... app actions, status, language, theme, manual, support, avatar.
 // The part from status to avatar has the same order in every app.
 function AppHeader(props) {
   const L = labelsFor(props.lang, props.labels);
@@ -284,6 +322,7 @@ function AppHeader(props) {
       labels: props.labels,
       testId: T.theme,
     }),
+    h(DocsButton, { href: props.docsUrl, lang: props.lang, labels: props.labels, testId: T.docs }),
     h(SupportButton, { onClick: props.onSupport, lang: props.lang, labels: props.labels, testId: T.support }),
     props.user
       ? h(UserMenu, {
@@ -326,6 +365,9 @@ module.exports = {
   LanguageToggle,
   ThemeToggle,
   SupportButton,
+  DocsButton,
+  manualUrl,
+  DOCS_DOMAINS,
   PageHeader,
   VersionTag,
   Icons,

package/react/labels.js

@@ -8,6 +8,7 @@ const LABELS = {
     dark: "Dunkel",
     system: "System",
     support: "Support",
+    docs: "Handbuch (öffnet in neuem Tab)",
     logout: "Abmelden",
     userMenu: "Benutzermenü",
     menu: "Menü",
@@ -88,6 +89,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.",
@@ -202,6 +209,7 @@ const LABELS = {
     dark: "Dark",
     system: "System",
     support: "Support",
+    docs: "Manual (opens in a new tab)",
     logout: "Sign out",
     userMenu: "User menu",
     menu: "Menu",
@@ -277,6 +285,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/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",

package/shell.css

@@ -45,6 +45,7 @@
 }
 @media (min-width: 640px) { .scalio-btn { padding: 0 1rem; } }
 .scalio-btn:hover { background: hsl(var(--secondary)); }
+a.scalio-btn { text-decoration: none; }
 .scalio-btn:focus-visible, .scalio-avatar:focus-visible, .scalio-menu-item:focus-visible {
   outline: 2px solid hsl(var(--ring)); outline-offset: 1px;
 }