@scalio-cloud/ui 0.33.0 → 0.34.0

package/README.md

@@ -403,6 +403,13 @@ lists `tenant` («Microsoft 365 über die Tenant-Verbindung», for apps that alr
 tenant, like Nexus), the block asks only for the sending mailbox and saves `graph: {sender}`; `tenantHint` replaces
 the default text about Mail.Send. Without `providers` the three providers stay as before.
 
+Since 0.34.0 (scalio-platform 0.12.0): when the backend lists `tenants` (an app connected to several tenants, like
+Citadel, Foundry and Pulse), the provider `tenant` also asks «Tenant, der sendet» and saves `graph: {sender, tenant_id}`
+(an empty list shows a hint to connect a tenant first; with one tenant it is preselected). When the settings report
+`send_rights`, the block «Senderecht in Exchange Online» shows the PowerShell from `GET /mail/send-rights` (Exchange
+«RBAC for Applications», only the sending mailbox) with a copy button; `mailApi` has `sendRights()`. The default
+`graphHint` and `tenantHint` now point to that script instead of the Entra permission Mail.Send.
+
 ## Protokoll: Aktionen und Jobs (React)
 
 One menu item «Protokoll» with two tabs like Nexus (scalio-docs ADR 0070). The server side is scalio-platform

package/nav.css

@@ -754,6 +754,7 @@
 .scalio-mail-test { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
 .scalio-mail-test .scalio-input { flex: 1 1 15rem; width: auto; }
 .scalio-mail-outbox { overflow-x: auto; }
+.scalio-mail-script { margin: 0 0 0.75rem; padding: 0.75rem; max-height: 22rem; overflow: auto; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--muted)); font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; line-height: 1.5; white-space: pre; }
 .scalio-mail-outbox table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
 .scalio-mail-outbox td { padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; }
 .scalio-mail-outbox tr:last-child td { border-bottom: 0; }

package/package.json

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

@@ -27,8 +27,17 @@ const LABELS = {
     clientId: "Client-ID der App",
     clientSecret: "Client-Secret",
     sender: "Postfach, das sendet",
-    graphHint: "Die App braucht die Anwendungsberechtigung Mail.Send. Beschränken Sie sie in Exchange Online mit «RBAC for Applications» auf das Postfach, das sendet.",
-    tenantHint: "Die App sendet mit ihrer bestehenden Verbindung zum Tenant, ohne zweites Secret. Die Verbindung braucht die Anwendungsberechtigung Mail.Send; beschränken Sie sie in Exchange Online mit «RBAC for Applications» auf das Postfach, das sendet.",
+    graphHint: "Das Senderecht geben Sie in Exchange Online mit «RBAC for Applications» nur für das Postfach, das sendet (Skript unten, nach dem Speichern); die App braucht dann keine Berechtigung Mail.Send in Entra ID.",
+    tenantHint: "Die App sendet mit ihrer bestehenden Verbindung zum Tenant, ohne zweites Secret. Das Senderecht geben Sie in Exchange Online nur für dieses Postfach (Skript unten, nach dem Speichern).",
+    tenantPick: "Tenant, der sendet",
+    tenantChoose: "Bitte wählen",
+    noTenants: "Noch kein Tenant verbunden. Verbinden Sie zuerst einen Tenant, dann wählen Sie ihn hier.",
+    rightsTitle: "Senderecht in Exchange Online",
+    rightsHint: "Damit die App nur als dieses Postfach senden darf: Führen Sie das Skript einmal als Exchange-Administrator in der Azure Cloud Shell (PowerShell) aus. Es nutzt «RBAC for Applications» und kann erneut laufen, auch nach einem Wechsel des Postfachs. Exchange übernimmt das Recht nach bis zu zwei Stunden; dann die Testmail senden.",
+    showScript: "Skript anzeigen",
+    copy: "Kopieren",
+    copied: "Skript kopiert",
+    copyFailed: "Kopieren nicht möglich. Bitte markieren und kopieren.",
     testMailbox: "Testinstanz: Mails gehen über das Testpostfach, die Einstellungen hier gelten nicht.",
     save: "Speichern",
     saved: "Gespeichert",
@@ -84,8 +93,17 @@ const LABELS = {
     clientId: "Client ID of the app",
     clientSecret: "Client secret",
     sender: "Mailbox that sends",
-    graphHint: "The app needs the application permission Mail.Send. Limit it to the sending mailbox with RBAC for Applications in Exchange Online.",
-    tenantHint: "The app sends with its existing connection to the tenant, no second secret. The connection needs the application permission Mail.Send; limit it to the sending mailbox with RBAC for Applications in Exchange Online.",
+    graphHint: "Give the send right in Exchange Online with RBAC for Applications, only for the sending mailbox (script below, after saving); the app then needs no Mail.Send permission in Entra ID.",
+    tenantHint: "The app sends with its existing connection to the tenant, no second secret. Give the send right in Exchange Online for this mailbox only (script below, after saving).",
+    tenantPick: "Tenant that sends",
+    tenantChoose: "Please choose",
+    noTenants: "No tenant connected yet. Connect a tenant first, then choose it here.",
+    rightsTitle: "Send right in Exchange Online",
+    rightsHint: "So the app may send only as this mailbox: run the script once as an Exchange administrator in Azure Cloud Shell (PowerShell). It uses RBAC for Applications and can run again, also after changing the mailbox. Exchange applies the right within up to two hours; then send the test mail.",
+    showScript: "Show script",
+    copy: "Copy",
+    copied: "Script copied",
+    copyFailed: "Copying is not possible. Please select and copy.",
     testMailbox: "Test instance: mails go through the test mailbox, the settings here do not apply.",
     save: "Save",
     saved: "Saved",
@@ -166,6 +184,7 @@ function mailApi(api, base) {
     resetTemplate: (kind, lang) => api.delete(`${b}/templates/${enc(kind)}/${enc(lang)}`).then(data),
     preview: (body) => api.post(`${b}/templates/preview`, body).then(data),
     testTemplate: (body) => api.post(`${b}/templates/test`, body).then(data),
+    sendRights: () => api.get(`${b}/send-rights`).then(data),
   };
 }
 
@@ -202,7 +221,9 @@ function select(id, value, options, onChange, extra) {
 // Props: client (mailApi), lang, labels, notify(message, tone), formatError(err), graphHint (the app's own text for
 // the Graph permissions, e.g. Beacon also needs Mail.ReadWrite), tenantHint (the same for the provider «tenant»,
 // offered when the backend lists it in settings.providers, scalio-platform 0.10.0), children (more blocks after «Testmail», e.g. Beacon's
-// mail intake), outbox (false hides «Letzte Mails»).
+// mail intake), outbox (false hides «Letzte Mails»). With scalio-platform 0.12.0 the backend may list `tenants` (the app is
+// connected to several tenants: the administrator picks the one that sends) and `send_rights` (the block «Senderecht in
+// Exchange Online» shows the PowerShell from GET /mail/send-rights).
 function MailTransport(props) {
   const { client, lang } = props;
   const L = mailLabels(lang, props.labels);
@@ -213,6 +234,9 @@ function MailTransport(props) {
   const [testing, setTesting] = React.useState(false);
   const [testMsg, setTestMsg] = React.useState(null);
   const [rows, setRows] = React.useState([]);
+  const [script, setScript] = React.useState(null);
+  const [scriptBusy, setScriptBusy] = React.useState(false);
+  const [scriptMsg, setScriptMsg] = React.useState(null);
   const showOutbox = props.outbox !== false;
 
   const loadOutbox = React.useCallback(() => {
@@ -240,8 +264,12 @@ function MailTransport(props) {
       const body = { provider: form.provider, from_name: form.from_name, from_address: form.from_address, language: form.language };
       if (form.provider === "smtp") body.smtp = Object.assign({}, form.smtp, { port: Number(form.smtp.port) || 587 });
       if (form.provider === "graph") body.graph = form.graph;
-      if (form.provider === "tenant") body.graph = { sender: form.graph.sender };
+      if (form.provider === "tenant") {
+        body.graph = { sender: form.graph.sender };
+        if (Array.isArray(form.tenants)) body.graph.tenant_id = form.graph.tenant_id || "";
+      }
       setForm(await client.save(body));
+      setScript(null);
       m.ok(L.saved);
     } catch (err) {
       m.fail(err);
@@ -265,6 +293,30 @@ function MailTransport(props) {
     setTesting(false);
   };
 
+  const showScript = async () => {
+    setScriptBusy(true);
+    setScriptMsg(null);
+    try {
+      const r = client.sendRights ? await client.sendRights() : null;
+      setScript((r && r.script) || "");
+    } catch (err) {
+      setScriptMsg({ tone: "error", text: (props.formatError || errorText)(err) });
+    }
+    setScriptBusy(false);
+  };
+  const copyScript = async () => {
+    let text = L.copied, tone = "success";
+    try {
+      await navigator.clipboard.writeText(script);
+    } catch (e) {
+      text = L.copyFailed;
+      tone = "error";
+    }
+    if (props.notify) props.notify(text, tone);
+    else setScriptMsg({ tone: tone === "error" ? "error" : "ok", text });
+  };
+  const tenants = Array.isArray(form.tenants) ? form.tenants : null;
+
   const providers = (form.providers || ["off", "smtp", "graph"]).filter((id) => L.providers[id]);
   const transport = h(
     SettingsSection,
@@ -313,7 +365,17 @@ function MailTransport(props) {
         : null,
       form.provider === "tenant"
         ? h("div", { "data-testid": "mail-tenant" },
+            tenants && tenants.length === 0
+              ? h("div", { className: "scalio-notice is-info", "data-testid": "mail-no-tenants" }, L.noTenants)
+              : null,
             h("div", { className: "scalio-mail-grid" },
+              tenants && tenants.length > 0
+                ? h(Field, { id: "mail-tenant-pick", label: L.tenantPick },
+                    select("mail-tenant-pick",
+                      tenants.some((t) => t.id === form.graph.tenant_id) ? form.graph.tenant_id : (tenants.length === 1 ? tenants[0].id : ""),
+                      (tenants.length === 1 ? [] : [["", L.tenantChoose]]).concat(tenants.map((t) => [t.id, t.name || t.id])),
+                      part("graph", "tenant_id"), { disabled: busy }))
+                : null,
               h(Field, { id: "mail-tenant-sender", label: L.sender }, input("mail-tenant-sender", form.graph.sender, part("graph", "sender"),
                 { type: "email", maxLength: 254, placeholder: "it@example.com", disabled: busy }))),
             h("p", { className: "scalio-settings-help" }, props.tenantHint || L.tenantHint))
@@ -335,6 +397,23 @@ function MailTransport(props) {
     h(Notice, { msg: testMsg, testId: "mail-test-message" })
   );
 
+  const rights = form.send_rights && (form.provider === "graph" || form.provider === "tenant")
+    ? h(
+        SettingsSection,
+        { id: "mail-rights", title: L.rightsTitle, description: L.rightsHint, testId: "mail-rights" },
+        script
+          ? h(React.Fragment, null,
+              h("pre", { className: "scalio-mail-script", "data-testid": "mail-rights-script" }, script),
+              h("div", { className: "scalio-settings-section-footer" },
+                h("button", { type: "button", className: "scalio-btn", onClick: copyScript, "data-testid": "mail-rights-copy" },
+                  h(Icons.Copy, { className: "scalio-icon" }), L.copy)))
+          : h("div", { className: "scalio-settings-section-footer" },
+              h("button", { type: "button", className: "scalio-btn", onClick: showScript, disabled: scriptBusy, "data-testid": "mail-rights-show" },
+                L.showScript)),
+        h(Notice, { msg: scriptMsg, testId: "mail-rights-message" })
+      )
+    : null;
+
   const outbox = showOutbox
     ? h(
         SettingsSection,
@@ -355,7 +434,7 @@ function MailTransport(props) {
       )
     : null;
 
-  return h(React.Fragment, null, transport, testBlock, props.children || null, outbox);
+  return h(React.Fragment, null, transport, rights, testBlock, props.children || null, outbox);
 }
 
 // Props: client (mailApi), lang, labels, notify, formatError, editor (the app's rich text editor: a component with