@crombolo/backoffice-host 0.13.1 → 0.14.1

package/plugin/workflow-requests.js

@@ -1,9 +1,10 @@
 /**
- * The Workflow section's lists (story 028): what waits for the reader's
+ * The Workflows section's lists (story 028): what waits for the reader's
  * approval, every request in flight, and those decided. Each row links to the
  * page, whose Workflow tab is where a request is acted on.
  */
-import { css, html, LitElement, nothing } from '@umbraco-cms/backoffice/external/lit'
+import { css, html, nothing } from '@umbraco-cms/backoffice/external/lit'
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
 import { finished, inFlight, waitingForMe } from './workflow-client.js'
 
 const STATE = {
@@ -13,15 +14,27 @@ const STATE = {
   withdrawn: ['default', 'Withdrawn'],
 }
 
-const pageLink = (key) => {
+/** The page's Workflow tab: the editor's route is `edit/<key>/<variant>/view/<tab>`. */
+const pageLink = (item) => {
   const base = (document.querySelector('base')?.getAttribute('href') ?? '/umbraco/').replace(
     /\/$/,
     '',
   )
-  return `${base}/section/content/workspace/document/edit/${key}/view/workflow`
+  return `${base}/section/content/workspace/document/edit/${item.nodeKey}/${encodeURIComponent(item.variant ?? 'invariant')}/view/workflow`
 }
 
-class CromboloWorkflowListElement extends LitElement {
+/**
+ * Navigates within the backoffice, as Umbraco's own code does, so the page
+ * opens on its Workflow tab without reloading the app. A modified click still
+ * opens a new tab.
+ */
+function openInBackoffice(event, href) {
+  if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return
+  event.preventDefault()
+  history.pushState(null, '', href)
+}
+
+class CromboloWorkflowListElement extends UmbLitElement {
   static properties = {
     _items: { state: true },
     _message: { state: true },
@@ -76,7 +89,7 @@ class CromboloWorkflowListElement extends LitElement {
                 const [color, label] = STATE[item.state] ?? ['default', item.state]
                 const waiting = item.stages.filter((s) => s.state === 'waiting').map((s) => s.alias)
                 return html`<uui-table-row>
-                  <uui-table-cell><a href=${pageLink(item.nodeKey)}>${item.nodeName}</a></uui-table-cell>
+                  <uui-table-cell><a href=${pageLink(item)} @click=${(e) => openInBackoffice(e, pageLink(item))}>${item.nodeName}</a></uui-table-cell>
                   <uui-table-cell>${item.workflow.name}</uui-table-cell>
                   <uui-table-cell>${item.action === 'unpublish' ? 'Taking it down' : 'Publishing'}</uui-table-cell>
                   <uui-table-cell>

package/src/shell.ts

@@ -34,6 +34,8 @@ export interface LoginShellSettings {
    * the browser resumes the OAuth flow rather than landing on a blank editor.
    */
   returnUrl?: string
+  /** "Sign in with …" buttons, one per backoffice identity provider (story 031). */
+  externalProviders?: ReadonlyArray<{ name: string; url: string }>
 }
 
 const escapeHtml = (value: string): string =>
@@ -131,7 +133,8 @@ ${noscript(`${graphics}/login-logo-alternative`)}
   ${settings.usernameIsEmail ? 'username-is-email' : ''}
   ${settings.allowUserInvite ? 'allow-user-invite' : ''}
   ${settings.allowPasswordReset ? 'allow-password-reset' : ''}
-  ${settings.disableLocalLogin ? 'disable-local-login' : ''}>
+  ${settings.disableLocalLogin ? 'disable-local-login' : ''}
+  external-providers="${escapeHtml(JSON.stringify(settings.externalProviders ?? []))}">
 </crombolo-login>
 </body>
 </html>

package/plugin/branding/sysinfo.js

@@ -1,89 +0,0 @@
-/**
- * The System information modal, reached from the header logo popover.
- *
- * It names the product in four places that no localisation key covers: three
- * row labels built as plain strings in `sysinfo.element.js`, and the heading it
- * puts above the text it copies to the clipboard.
- *
- * The rows are corrected at their source rather than in the DOM. The element
- * assembles every row into one string and assigns it to `_systemInformation`, a
- * lit reactive property, so wrapping that property's setter corrects the rows
- * before they are ever rendered — no observer, and no reaching into a shadow
- * root. The clipboard heading is prepended inside a private method that nothing
- * can reach, so that one is taken on the way out to the clipboard instead.
- */
-
-/**
- * The exact phrases to correct. Spelled out rather than replacing the product
- * name wherever it appears, because the same text carries the browser's user
- * agent and the current URL — a blanket replacement would rewrite whatever a
- * site happens to have in its address.
- */
-const PHRASES = [
-  'Umbraco build version',
-  'Umbraco assembly version',
-  'Umbraco client version',
-  'Umbraco system information',
-]
-
-/** A fixed point: its own output contains none of the phrases, so re-applying it changes nothing. */
-export function rebrandSysinfo(text) {
-  if (typeof text !== 'string') return text
-  let corrected = text
-  for (const phrase of PHRASES) {
-    corrected = corrected.replaceAll(phrase, phrase.replace('Umbraco', 'Crombolo'))
-  }
-  return corrected
-}
-
-/** True when the string is the modal's clipboard payload rather than someone's own copy. */
-export function isSysinfoClipboardText(text) {
-  return typeof text === 'string' && text.includes('Umbraco system information')
-}
-
-/**
- * Wraps the reactive property's setter. Does nothing at all if the accessor is
- * not where lit puts it, so an upstream change costs the correction and never
- * an error.
- */
-function patchRows(element) {
-  const accessor = Object.getOwnPropertyDescriptor(element?.prototype ?? {}, '_systemInformation')
-  if (!accessor?.get || !accessor?.set) return false
-  Object.defineProperty(element.prototype, '_systemInformation', {
-    ...accessor,
-    get() {
-      return accessor.get.call(this)
-    },
-    set(value) {
-      accessor.set.call(this, rebrandSysinfo(value))
-    },
-  })
-  return true
-}
-
-/**
- * Corrects the heading on its way to the clipboard. Installed only once the
- * modal's element exists — so a session that never opens System information
- * never patches anything — and it passes every other string through untouched.
- */
-function patchClipboard() {
-  const clipboard = navigator.clipboard
-  if (typeof clipboard?.writeText !== 'function') return
-  const write = clipboard.writeText.bind(clipboard)
-  try {
-    clipboard.writeText = (text) =>
-      write(isSysinfoClipboardText(text) ? rebrandSysinfo(text) : text)
-  } catch {
-    // A read-only `writeText` leaves the copied heading stale, which is the
-    // one thing here worth less than a working copy button.
-  }
-}
-
-export const onInit = () => {
-  customElements
-    .whenDefined('umb-sysinfo')
-    .then((element) => {
-      if (patchRows(element)) patchClipboard()
-    })
-    .catch(() => {})
-}