@crombolo/backoffice-host 0.13.1 → 0.13.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crombolo/backoffice-host",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "description": "Serves the Umbraco backoffice SPA: shell HTML, import map and package manifests.",
   "license": "MIT",
   "author": "Crombolo",
@@ -31,7 +31,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@crombolo/core": "0.13.1",
+    "@crombolo/core": "0.13.2",
     "@crombolo/backoffice-dist": "18.2.0"
   }
 }

package/plugin/assistant/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Assistant",
   "id": "Crombolo.Assistant",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "allowPublicAccess": false,
   "extensions": [
     {

package/plugin/branding/bundle-builder-labels.js

@@ -1,5 +1,5 @@
 /**
- * The two labels Umbraco's bundle builder hard-codes.
+ * The two labels and two toasts Umbraco's bundle builder hard-codes.
  *
  * The builder workspace is vendored and its copy is English in the template
  * rather than dictionary keys, so there is no key to override: `Name of the
@@ -21,6 +21,16 @@ export const BUILDER_LABELS = [
   ['Package Content', 'Bundle content'],
 ]
 
+/**
+ * The builder's toasts on saving a definition. Shown through the notification
+ * context, so they are corrected where every toast passes rather than in the
+ * element, whose `peek` call is its own.
+ */
+export const BUILDER_TOASTS = [
+  ['Package saved', 'Bundle saved'],
+  ['Package updated', 'Bundle saved'],
+]
+
 /** The replacement for a vendored string, or undefined when it is not one of ours. */
 export function correctionFor(text) {
   if (typeof text !== 'string') return undefined
@@ -55,7 +65,26 @@ function patch(element) {
   return true
 }
 
+// Loaded here rather than at the top, so the module's pure parts import
+// anywhere — the tests read `BUILDER_LABELS` and `BUILDER_TOASTS` outside a browser.
+async function correctToasts() {
+  const { UmbNotificationContext } = await import('@umbraco-cms/backoffice/notification')
+  const proto = UmbNotificationContext.prototype
+  const peek = proto.peek
+  if (typeof peek !== 'function') return
+  proto.peek = function correctedPeek(color, options) {
+    const message = options?.data?.message
+    const replacement = BUILDER_TOASTS.find(([before]) => before === message)?.[1]
+    return peek.call(
+      this,
+      color,
+      replacement ? { ...options, data: { ...options.data, message: replacement } } : options,
+    )
+  }
+}
+
 export const onInit = () => {
+  correctToasts().catch(() => {})
   customElements
     .whenDefined('umb-workspace-package-builder')
     .then(patch)

package/plugin/branding/sign-in.js

@@ -66,7 +66,38 @@ class CromboloAuthProviderElement extends LitElement {
 
 if (!customElements.get(TAG)) customElements.define(TAG, CromboloAuthProviderElement)
 
+/**
+ * Signing in again after a timeout closes its modal twice.
+ *
+ * `umb-app-auth-modal` submits when the session reports itself authorised, and
+ * `umb-auth-view` calls the same submit as its `onSuccess` once
+ * `makeAuthorizationRequest` returns. Whichever runs first closes the modal and
+ * destroys its value state, so the second's `value = { success: true }` throws
+ * `_subject is undefined` — and the view shows that as a sign-in error, though
+ * the editor is signed in. The second assignment has nothing left to say, so it
+ * is dropped. Patched on the element's prototype, as `tsx-editors.js` patches
+ * upstream, rather than in the vendored bundle.
+ */
+async function guardTimedOutSignIn() {
+  const Modal = await customElements.whenDefined('umb-app-auth-modal')
+  let descriptor
+  for (let proto = Modal.prototype; proto && !descriptor; proto = Object.getPrototypeOf(proto))
+    descriptor = Object.getOwnPropertyDescriptor(proto, 'value')
+  if (!descriptor?.set) return
+  const { get, set } = descriptor
+  Object.defineProperty(Modal.prototype, 'value', {
+    configurable: true,
+    get,
+    set(value) {
+      if (this.__cromboloSubmitted) return
+      set.call(this, value)
+      this.__cromboloSubmitted = true
+    },
+  })
+}
+
 export const onInit = (_host, extensionRegistry) => {
+  void guardTimedOutSignIn()
   extensionRegistry.unregister(VENDORED)
   extensionRegistry.register({
     type: 'authProvider',

package/plugin/bundles-created-overview.js

@@ -101,7 +101,7 @@ export default class CromboloBundlesCreatedOverviewElement extends UmbLitElement
           version 1.0.0.
         </p>
         <uui-input
-          label="Package name"
+          label="Name"
           placeholder=${pkg?.name ?? ''}
           .value=${this._draft.name}
           @input=${(event) => (this._draft = { ...this._draft, name: event.target.value })}></uui-input>
@@ -166,38 +166,47 @@ export default class CromboloBundlesCreatedOverviewElement extends UmbLitElement
     // look empty on every page change.
     return html`
       <uui-button
-        look="primary"
+        color="default"
+        look="outline"
         href=${`${BUILDER_PATH}/create`}
-        label=${this.localize.term('packager_createPackage')}></uui-button>
+        label="Create"></uui-button>
       ${
         this._loading
           ? html`<div id="loader"><uui-loader></uui-loader></div>`
           : this._items.length === 0
             ? html`<h2 id="empty">${this.localize.term('packager_noPackagesCreated')}</h2>`
             : html`
-            <uui-box headline="Created bundles" style="--uui-box-default-padding:0;">
-              <uui-ref-list>
+            <uui-box headline="Created bundles">
+              <uui-table>
+                <uui-table-head>
+                  <uui-table-head-cell>Name</uui-table-head-cell>
+                  <uui-table-head-cell>Downloads as</uui-table-head-cell>
+                  <uui-table-head-cell></uui-table-head-cell>
+                </uui-table-head>
                 ${repeat(
                   this._items,
                   (item) => item.unique,
                   (item) => html`
-                    <uui-ref-node
-                      name=${item.name}
-                      detail=${this.#detail(item)}
-                      @open=${() => this.#open(item)}>
-                      <uui-action-bar slot="actions">
+                    <uui-table-row>
+                      <uui-table-cell>${item.name}</uui-table-cell>
+                      <uui-table-cell><code>${this.#detail(item)}</code></uui-table-cell>
+                      <uui-table-cell class="buttons">
+                        <uui-button look="secondary" label="Edit" @click=${() => this.#open(item)}></uui-button>
                         <uui-button
-                          @click=${() => this.#edit(item)}
-                          label="Package details"></uui-button>
+                          look="secondary"
+                          label="Name and version"
+                          @click=${() => this.#edit(item)}></uui-button>
                         <uui-button
-                          @click=${() => this.#remove(item)}
-                          label=${this.localize.term('general_delete')}></uui-button>
-                      </uui-action-bar>
-                    </uui-ref-node>
-                    ${this.#renderEditor(item)}
+                          look="secondary"
+                          color="danger"
+                          label=${this.localize.term('general_delete')}
+                          @click=${() => this.#remove(item)}></uui-button>
+                      </uui-table-cell>
+                    </uui-table-row>
                   `,
                 )}
-              </uui-ref-list>
+              </uui-table>
+              ${this._items.map((item) => this.#renderEditor(item))}
             </uui-box>
           `
       }
@@ -238,6 +247,10 @@ export default class CromboloBundlesCreatedOverviewElement extends UmbLitElement
     .problem {
       color: var(--uui-color-danger);
     }
+    .buttons {
+      white-space: nowrap;
+      text-align: right;
+    }
   `
 }
 

package/plugin/bundles-installed.js

@@ -10,6 +10,9 @@
  * What it lists instead is the site's bundle dependencies, which is what
  * "installed" means here: what each one adds, whether its content has been
  * added to this site, and whether its server features are switched on.
+ *
+ * Two columns: the bundles on the left, filtered as you type; the one chosen
+ * on the right, with its details and the button that uninstalls it.
  */
 import { css, html, nothing, repeat } from '@umbraco-cms/backoffice/external/lit'
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
@@ -41,6 +44,8 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
     _busy: { state: true },
     _notice: { state: true },
     _installs: { state: true },
+    _filter: { state: true },
+    _selected: { state: true },
   }
 
   constructor() {
@@ -50,6 +55,8 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
     this._busy = ''
     this._notice = ''
     this._installs = true
+    this._filter = ''
+    this._selected = ''
   }
 
   connectedCallback() {
@@ -63,6 +70,8 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
       const result = await listInstalled()
       this._items = result.items ?? []
       this._installs = result.installs !== false
+      if (!this._items.some((item) => item.packageName === this._selected))
+        this._selected = this._items[0]?.packageName ?? ''
     } catch (error) {
       this._notice = error instanceof Error ? error.message : String(error)
     } finally {
@@ -83,72 +92,98 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
     }
   }
 
+  #pick(item) {
+    this._selected = item.packageName
+    this.requestUpdate()
+  }
+
+  get #shown() {
+    const words = this._filter.trim().toLowerCase()
+    if (!words) return this._items
+    return this._items.filter((item) =>
+      [item.name, item.packageName, item.description].some((text) =>
+        text?.toLowerCase().includes(words),
+      ),
+    )
+  }
+
   render() {
     if (this._loading) return html`<div id="loader"><uui-loader></uui-loader></div>`
-
+    if (this._items.length === 0)
+      return html`
+        ${this._notice ? html`<div id="notice">${this._notice}</div>` : nothing}
+        <uui-box headline="No bundles installed">
+          <p>Install one from the Marketplace tab, and it appears here.</p>
+        </uui-box>
+      `
+    const selected = this._items.find((item) => item.packageName === this._selected)
+    const shown = this.#shown
     return html`
       ${this._notice ? html`<div id="notice">${this._notice}</div>` : nothing}
+      <div id="columns">
+        <uui-box headline="Installed bundles" style="--uui-box-default-padding:0;">
+          <div id="filter">
+            <uui-input
+              label="Filter"
+              placeholder="Filter"
+              .value=${this._filter}
+              @input=${(event) => {
+                this._filter = event.target.value
+              }}>
+              <uui-icon name="icon-search" slot="prepend"></uui-icon>
+            </uui-input>
+          </div>
+          ${
+            shown.length === 0
+              ? html`<p class="empty">No bundle matches.</p>`
+              : html`<uui-ref-list>
+                  ${repeat(
+                    shown,
+                    (item) => item.packageName,
+                    (item) => html`<uui-ref-node
+                      name=${item.name}
+                      detail=${`${item.packageName} ${item.version}`}
+                      selectable
+                      select-only
+                      ?selected=${item.packageName === this._selected}
+                      @selected=${() => this.#pick(item)}
+                      @deselected=${() => this.#pick(item)}
+                      @open=${() => this.#pick(item)}></uui-ref-node>`,
+                  )}
+                </uui-ref-list>`
+          }
+        </uui-box>
+        ${selected ? this.#details(selected) : nothing}
+      </div>
+    `
+  }
+
+  #details(item) {
+    return html`<uui-box headline=${item.name}>
+      ${item.description ? html`<p>${item.description}</p>` : nothing}
+      <dl>
+        <dt>npm package</dt>
+        <dd><code>${item.packageName}</code></dd>
+        <dt>Version</dt>
+        <dd>${item.version}</dd>
+        <dt>Adds</dt>
+        <dd class="carries">${carriesTags(item.carries)}</dd>
+        <dt>On this site</dt>
+        <dd class="status">${status(item)}</dd>
+        <dt>Works with</dt>
+        <dd>Crombolo ${item.peerRange}</dd>
+      </dl>
       ${
-        this._items.length === 0
-          ? html`
-            <uui-box headline="No bundles installed">
-              <p>
-                A bundle is one of this site's npm dependencies. Install one from the
-                Marketplace tab, or with <code>bun add</code> in the site directory, and it
-                appears here.
-              </p>
-            </uui-box>
-          `
-          : html`
-            <uui-box headline="Installed bundles">
-              <uui-table>
-                <uui-table-head>
-                  <uui-table-head-cell>Name</uui-table-head-cell>
-                  <uui-table-head-cell>npm package</uui-table-head-cell>
-                  <uui-table-head-cell>Version</uui-table-head-cell>
-                  <uui-table-head-cell>Adds</uui-table-head-cell>
-                  <uui-table-head-cell>On this site</uui-table-head-cell>
-                  <uui-table-head-cell></uui-table-head-cell>
-                </uui-table-head>
-                ${repeat(
-                  this._items,
-                  (item) => item.packageName,
-                  (item) => html`
-                    <uui-table-row>
-                      <uui-table-cell>${item.name}</uui-table-cell>
-                      <uui-table-cell><code>${item.packageName}</code></uui-table-cell>
-                      <uui-table-cell>${item.version}</uui-table-cell>
-                      <uui-table-cell class="carries">${carriesTags(item.carries)}</uui-table-cell>
-                      <uui-table-cell class="status">${status(item)}</uui-table-cell>
-                      <uui-table-cell>
-                        ${
-                          this._installs
-                            ? html`<uui-button
-                                look="secondary"
-                                color="danger"
-                                label="Uninstall"
-                                .state=${this._busy === item.packageName ? 'waiting' : undefined}
-                                @click=${() => this.#uninstall(item)}></uui-button>`
-                            : nothing
-                        }
-                      </uui-table-cell>
-                    </uui-table-row>
-                  `,
-                )}
-              </uui-table>
-              <p class="note">
-                ${
-                  this._installs
-                    ? html`An install writes this site's <code>package.json</code> and
-                        <code>bun.lock</code>. Commit both to keep it across deployments.`
-                    : html`Packages are added and removed by changing this site's
-                        <code>package.json</code> and deploying, so every server has the same ones.`
-                }
-              </p>
-            </uui-box>
-          `
+        this._installs
+          ? html`<uui-button
+              look="primary"
+              color="danger"
+              label="Uninstall"
+              .state=${this._busy === item.packageName ? 'waiting' : undefined}
+              @click=${() => this.#uninstall(item)}></uui-button>`
+          : html`<p class="note">This site adds and removes bundles with a deploy, so every server has the same ones.</p>`
       }
-    `
+    </uui-box>`
   }
 
   static styles = css`
@@ -167,10 +202,42 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
       border-left: 3px solid var(--uui-color-positive, #2bc37c);
       background: var(--uui-color-surface-alt, #f3f3f5);
     }
+    #columns {
+      display: grid;
+      grid-template-columns: minmax(240px, 1fr) 2fr;
+      gap: var(--uui-size-layout-1, 24px);
+      align-items: start;
+    }
+    @media (max-width: 800px) {
+      #columns {
+        grid-template-columns: 1fr;
+      }
+    }
+    #filter {
+      padding: var(--uui-size-space-4, 12px);
+    }
+    #filter uui-input {
+      width: 100%;
+    }
+    .empty {
+      padding: 0 var(--uui-size-space-4, 12px) var(--uui-size-space-4, 12px);
+    }
     p {
       max-width: 60ch;
       line-height: 1.5;
     }
+    dl {
+      display: grid;
+      grid-template-columns: max-content 1fr;
+      gap: var(--uui-size-space-3, 9px) var(--uui-size-space-5, 18px);
+      margin: 0 0 var(--uui-size-space-5, 18px);
+    }
+    dt {
+      font-weight: 700;
+    }
+    dd {
+      margin: 0;
+    }
     .carries {
       display: flex;
       gap: var(--uui-size-space-2, 6px);
@@ -179,7 +246,6 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
       display: block;
     }
     .note {
-      margin-top: var(--uui-size-space-5, 18px);
       opacity: 0.8;
       font-size: 0.9em;
     }

package/plugin/bundles-marketplace.js

@@ -141,7 +141,7 @@ export default class CromboloBundlesMarketplaceElement extends UmbLitElement {
       ${
         this._installs
           ? nothing
-          : html`<div id="notice">Packages are added to this site by a deploy, so that every server has them: add one to the site's <code>package.json</code> and deploy it.</div>`
+          : html`<div id="notice">Bundles are added to this site by a deploy, so that every server has them: add one to the site's <code>package.json</code> and deploy it.</div>`
       }
       ${
         this._items.length === 0 && !this._error

package/plugin/changes-dashboard.js

@@ -15,6 +15,7 @@
  * kind allows, and the import runs once nothing is outstanding.
  */
 import { css, html, LitElement, nothing } from '@umbraco-cms/backoffice/external/lit'
+import { downloadFile } from './download.js'
 import { answersUrl, fetchReport, transferAction } from './report-client.js'
 
 const KIND_LABEL = { blocking: 'Blocking', person: 'Needs a person', auto: 'Automatic' }
@@ -351,7 +352,13 @@ export default class CromboloChangesDashboardElement extends LitElement {
             })}
         >Import</uui-button>
         <uui-button look="secondary" ?disabled=${busy} label="Check again" @click=${() => this.#act(pending.bundleId, 'check')}>Check again</uui-button>
-        <uui-button look="secondary" href=${answersUrl(pending.bundleId)} label="Download answers">Download answers</uui-button>
+        <uui-button look="secondary" label="Download answers" @click=${() =>
+          downloadFile(answersUrl(pending.bundleId), 'resolutions.json').catch((error) => {
+            this._outcome = {
+              ...this._outcome,
+              [pending.bundleId]: { ok: false, message: error.message },
+            }
+          })}>Download answers</uui-button>
       </div>
       ${outcome ? this.#renderOutcome(pending, outcome) : nothing}
     </div>`

package/plugin/download.js

@@ -0,0 +1,19 @@
+/**
+ * Saves a file the server serves, for a button that downloads one. Fetched
+ * rather than linked: the backoffice router takes over every link click, a
+ * `download` one included, and answers an address it has no page for with
+ * "route could not be found".
+ */
+export async function downloadFile(url, fallbackName) {
+  const response = await fetch(url, { credentials: 'include' })
+  if (response.status === 403) throw new Error('You do not have permission for that.')
+  if (!response.ok) throw new Error(`The download responded ${response.status}.`)
+  const named = /filename="?([^";]+)"?/.exec(response.headers.get('content-disposition') ?? '')
+  const objectUrl = URL.createObjectURL(await response.blob())
+  // Never added to the page, so its click reaches no router.
+  const link = document.createElement('a')
+  link.href = objectUrl
+  link.download = named?.[1] ?? fallbackName
+  link.click()
+  setTimeout(() => URL.revokeObjectURL(objectUrl), 0)
+}

package/plugin/form-picker.js

@@ -67,7 +67,7 @@ export default class CromboloFormPickerElement extends UmbLitElement {
     if (this._items.length === 0)
       return html`
         <p class="empty">
-          This site has no forms. Add one as a TOML file in <code>schema/forms/</code>.
+          This site has no forms yet. Add one in the Forms section.
         </p>
       `
     return html`

package/plugin/forms-client.js

@@ -2,6 +2,8 @@
  * Reads and drives the Forms endpoints the server keeps at
  * <backoffice>/crombolo/api/forms/*. The session cookie carries the auth.
  */
+import { downloadFile } from './download.js'
+
 const base = () => {
   const href = document.querySelector('base')?.getAttribute('href') ?? '/umbraco/'
   return `${href.replace(/\/$/, '')}/crombolo/api/forms`
@@ -57,3 +59,6 @@ export const deleteEntry = (id) => call(`/entries/${encodeURIComponent(id)}`, {
 
 /** The CSV is a download, so it is a link rather than a fetch. */
 export const entriesCsvUrl = (key) => `${base()}/${encodeURIComponent(key)}/entries.csv`
+
+/** Downloads a form's entries as CSV. */
+export const downloadEntriesCsv = (key) => downloadFile(entriesCsvUrl(key), 'entries.csv')

package/plugin/forms-entries.js

@@ -12,7 +12,7 @@ import { css, html, nothing, repeat } from '@umbraco-cms/backoffice/external/lit
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
 import {
   deleteEntry,
-  entriesCsvUrl,
+  downloadEntriesCsv,
   listEntries,
   listForms,
   setEntryState,
@@ -102,28 +102,31 @@ export default class CromboloFormsEntriesElement extends UmbLitElement {
     return html`
       <uui-box headline="Entries">
         <div class="filters">
-          <select
+          <uui-select
+            label="Form"
+            .options=${this._forms.map((form) => ({
+              name: form.name,
+              value: form.key,
+              selected: form.key === this._selected,
+            }))}
             @change=${(event) => {
               this._selected = event.target.value
               this.#load()
             }}
-          >
-            ${this._forms.map(
-              (form) =>
-                html`<option value=${form.key} ?selected=${form.key === this._selected}>${form.name}</option>`,
-            )}
-          </select>
-          <select
+          ></uui-select>
+          <uui-select
+            label="State"
+            .options=${[
+              ['', 'Any state'],
+              ['submitted', 'Submitted'],
+              ['approved', 'Approved'],
+              ['rejected', 'Rejected'],
+            ].map(([value, name]) => ({ name, value, selected: value === (this._state ?? '') }))}
             @change=${(event) => {
               this._state = event.target.value
               this.#load()
             }}
-          >
-            <option value="">Any state</option>
-            <option value="submitted">Submitted</option>
-            <option value="approved">Approved</option>
-            <option value="rejected">Rejected</option>
-          </select>
+          ></uui-select>
           <uui-input
             placeholder="Search the answers"
             .value=${this._search}
@@ -140,7 +143,18 @@ export default class CromboloFormsEntriesElement extends UmbLitElement {
               this.#load()
             }}
           ></uui-toggle>
-          <a class="csv" href=${entriesCsvUrl(this._selected)} download>Export CSV</a>
+          <uui-button
+            class="csv"
+            look="secondary"
+            label="Export CSV"
+            @click=${async () => {
+              try {
+                await downloadEntriesCsv(this._selected)
+              } catch (error) {
+                this._notice = error.message
+              }
+            }}
+          ></uui-button>
         </div>
 
         ${this._notice ? html`<p class="notice" role="alert">${this._notice}</p>` : nothing}

package/plugin/forms-overview.js

@@ -14,6 +14,7 @@
 import '@umbraco-cms/backoffice/document'
 import { css, html, nothing, repeat } from '@umbraco-cms/backoffice/external/lit'
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
+import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification'
 import {
   deleteForm,
   listForms,
@@ -61,8 +62,13 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
     _types: { state: true },
   }
 
+  #notifications
+
   constructor() {
     super()
+    this.consumeContext(UMB_NOTIFICATION_CONTEXT, (context) => {
+      this.#notifications = context
+    })
     this._forms = undefined
     this._editing = undefined
     this._problems = []
@@ -490,16 +496,19 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
     try {
       const result = await saveForm(this._editing)
       if (result.ok) {
-        this._notice = 'Saved.'
+        // The green toast every workspace shows on a save.
+        this.#notifications?.peek('positive', { data: { message: 'Form saved' } })
         this._editing = undefined
         await this.#load()
       } else {
         this._problems = result.body.problems ?? []
-        if (result.body.status === 'readOnly')
-          this._notice = 'The schema directory is read-only on this node.'
+        if (result.body.status === 'readOnly' && this._problems.length === 0)
+          this._problems = [
+            { path: '', message: 'The schema directory is read-only on this node.' },
+          ]
       }
     } catch (error) {
-      this._notice = error.message
+      this._problems = [{ path: '', message: error.message }]
     } finally {
       this._busy = false
     }
@@ -517,20 +526,19 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
   }
 
   render() {
-    if (this._forms === undefined) return html`<uui-loader></uui-loader>`
-    return html`
+    if (this._forms === undefined) return html`<div class="list"><uui-loader></uui-loader></div>`
+    if (this._editing) return this.#editor()
+    return html`<div class="list">
       ${this._notice ? html`<uui-box><p>${this._notice}</p></uui-box>` : nothing}
-      ${this._editing ? this.#editor() : this.#list()}
-    `
+      ${this.#list()}
+    </div>`
   }
 
   #list() {
+    // The create button above the list, as the workflows list has it.
     return html`
+      <uui-button class="create" color="default" look="outline" label="Create" @click=${() => this.#new()}></uui-button>
       <uui-box headline="Forms">
-        <p>
-          A form is a file in <code>schema/forms/</code>. Editing one here writes that
-          file, so the change can be reviewed in a pull request like any other type.
-        </p>
         ${
           this._forms.length === 0
             ? html`<p>There are no forms yet.</p>`
@@ -562,9 +570,6 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
                 </uui-table>
               `
         }
-        <div class="actions">
-          <uui-button look="primary" label="Add a form" @click=${() => this.#new()}></uui-button>
-        </div>
       </uui-box>
     `
   }
@@ -584,18 +589,14 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
         ></uui-input>
       </uui-form-layout-item>
     `
-    return html`
-      <uui-box headline=${form.alias ? `Form: ${form.name || form.alias}` : 'A new form'}>
-        ${
-          this._problems.length > 0
-            ? html`<div class="problems" role="alert">
-                <p>This form was not saved:</p>
-                <ul>
-                  ${this._problems.map((problem) => html`<li><code>${problem.path}</code> ${problem.message}</li>`)}
-                </ul>
-              </div>`
-            : nothing
-        }
+    const leave = () => {
+      this._editing = undefined
+      this._problems = []
+    }
+    // Umbraco's own layout, as the workflow designer has it: Save bottom right,
+    // and what stopped a save listed just above it.
+    return html`<umb-body-layout headline=${form.alias ? `Form: ${form.name || form.alias}` : 'A new form'}>
+      <uui-box>
         ${text('name', 'Name')}
         ${text('alias', 'Alias', 'Letters and numbers, starting with a letter. The file is named after it.')}
         ${text('messageOnSubmit', 'Message on submit')}
@@ -633,14 +634,26 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
         ${this._editing.pages.map((page, p) => this.#page(page, p))}
         <div class="actions">
           <uui-button look="secondary" label="Add a page" @click=${() => this.#apply(addPage)}></uui-button>
-          <uui-button look="primary" label="Save" ?disabled=${this._busy} @click=${() => this.#save()}></uui-button>
-          <uui-button look="secondary" label="Cancel" @click=${() => {
-            this._editing = undefined
-            this._problems = []
-          }}></uui-button>
         </div>
       </uui-box>
-    `
+      ${
+        this._problems.length > 0
+          ? html`<div class="problems" role="alert">
+              <p>This form was not saved:</p>
+              <ul>
+                ${this._problems.map((problem) => html`<li>${problem.path ? html`<code>${problem.path}</code> ` : nothing}${problem.message}</li>`)}
+              </ul>
+            </div>`
+          : nothing
+      }
+      ${
+        this._problems.length > 0
+          ? html`<span slot="footer-info" class="not-saved">Not saved: ${this._problems.length} problem(s), listed above</span>`
+          : nothing
+      }
+      <uui-button slot="actions" look="secondary" label="Back to the list" @click=${leave}>Back to the list</uui-button>
+      <uui-button slot="actions" look="primary" color="positive" label="Save" ?disabled=${this._busy} @click=${() => this.#save()}>Save</uui-button>
+    </umb-body-layout>`
   }
 
   static styles = css`
@@ -701,8 +714,17 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
     }
     :host {
       display: block;
+      height: 100%;
+    }
+    .list {
       padding: var(--uui-size-layout-1, 24px);
     }
+    .create {
+      margin-bottom: var(--uui-size-space-5, 18px);
+    }
+    .not-saved {
+      color: var(--uui-color-danger, #d42054);
+    }
     p,
     ul {
       max-width: 70ch;

package/plugin/localizations/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Localizations",
   "id": "Crombolo.Localizations",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "allowPublicAccess": false,
   "extensions": [
     {

package/plugin/seo/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Search & sharing",
   "id": "Crombolo.Seo",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "allowPublicAccess": false,
   "extensions": [
     {

package/plugin/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo",
   "id": "Crombolo.Core",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "allowPublicAccess": false,
   "extensions": [
     {
@@ -246,7 +246,7 @@
       "alias": "Crombolo.SectionView.Forms.Overview",
       "name": "Crombolo Forms Overview",
       "element": "/crombolo-plugin/forms-overview.js",
-      "weight": 200,
+      "weight": 100,
       "meta": {
         "label": "Forms",
         "pathname": "forms",
@@ -264,7 +264,7 @@
       "alias": "Crombolo.SectionView.Forms.Entries",
       "name": "Crombolo Forms Entries",
       "element": "/crombolo-plugin/forms-entries.js",
-      "weight": 100,
+      "weight": 200,
       "meta": {
         "label": "Entries",
         "pathname": "entries",
@@ -352,7 +352,7 @@
       "name": "Crombolo Workflow Section",
       "weight": 40,
       "meta": {
-        "label": "Workflow",
+        "label": "Workflows",
         "pathname": "workflow"
       }
     },

package/plugin/workflow-designer.js

@@ -9,7 +9,9 @@
  */
 // For its side effect: registers `umb-input-document`, which the shell loads lazily.
 import '@umbraco-cms/backoffice/document'
-import { css, html, LitElement, nothing, unsafeCSS } from '@umbraco-cms/backoffice/external/lit'
+import { css, html, nothing, unsafeCSS } from '@umbraco-cms/backoffice/external/lit'
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
+import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification'
 import { deleteWorkflow, listWorkflows, previewWorkflow, saveWorkflow } from './workflow-client.js'
 import { ancestors, BOX, drawGraph, GRAPH_STYLES, layout, wouldLoop } from './workflow-graph.js'
 
@@ -66,7 +68,7 @@ const select = (
   ${Object.entries(options).map(([key, label]) => html`<option value=${key} ?selected=${key === value}>${label}</option>`)}
 </select>`
 
-export default class CromboloWorkflowDesignerElement extends LitElement {
+export default class CromboloWorkflowDesignerElement extends UmbLitElement {
   static properties = {
     _list: { state: true },
     _editing: { state: true },
@@ -79,6 +81,14 @@ export default class CromboloWorkflowDesignerElement extends LitElement {
   }
 
   #drag
+  #notifications
+
+  constructor() {
+    super()
+    this.consumeContext(UMB_NOTIFICATION_CONTEXT, (context) => {
+      this.#notifications = context
+    })
+  }
 
   connectedCallback() {
     super.connectedCallback()
@@ -247,19 +257,21 @@ export default class CromboloWorkflowDesignerElement extends LitElement {
       return
     }
     this._affected = undefined
-    this._message = 'Saved.'
+    // The green toast every workspace shows on a save.
+    this.#notifications?.peek('positive', { data: { message: 'Workflow saved' } })
     this._originalAlias = this._editing.alias
     await this.#load()
   }
 
-  async #delete() {
+  /** From the list or the editor: the workflow by its name and the alias its file has. */
+  async #delete(name, alias) {
     if (
       !window.confirm(
-        `Delete the workflow "${this._editing.name}"? Pages it covers will publish without approval.`,
+        `Delete the workflow "${name}"? Pages it covers will publish without approval.`,
       )
     )
       return
-    const result = await deleteWorkflow(this._originalAlias)
+    const result = await deleteWorkflow(alias)
     if (!result.ok) {
       this._message = result.message
       return
@@ -270,15 +282,24 @@ export default class CromboloWorkflowDesignerElement extends LitElement {
 
   render() {
     if (this._message && !this._list)
-      return html`<uui-box headline="Workflows">${this._message}</uui-box>`
-    if (!this._list) return html`<uui-box headline="Workflows"><uui-loader></uui-loader></uui-box>`
+      return html`<div class="list"><uui-box headline="Workflows">${this._message}</uui-box></div>`
+    if (!this._list)
+      return html`<div class="list"><uui-box headline="Workflows"><uui-loader></uui-loader></uui-box></div>`
     if (!this._editing) return this.#renderList()
     return this.#renderEditor()
   }
 
   #renderList() {
     const { items, editable } = this._list
-    return html`<uui-box headline="Workflows">
+    // The create button above the list, as the Created bundles view has it.
+    return html`<div class="list">
+      ${
+        editable
+          ? html`<uui-button class="create" color="default" look="outline" label="Create" @click=${() => this.#edit(blank())}>Create</uui-button>`
+          : nothing
+      }
+      ${this._message ? html`<uui-box><p class="message">${this._message}</p></uui-box>` : nothing}
+      <uui-box headline="Workflows">
       ${editable ? nothing : html`<p>Workflows are kept with the site's files, which cannot be changed on this server. Change them in the repository and deploy.</p>`}
       ${
         items.length === 0
@@ -288,13 +309,11 @@ export default class CromboloWorkflowDesignerElement extends LitElement {
                 <uui-table-head-cell>Workflow</uui-table-head-cell>
                 <uui-table-head-cell>Covers</uui-table-head-cell>
                 <uui-table-head-cell>Stages</uui-table-head-cell>
+                <uui-table-head-cell></uui-table-head-cell>
               </uui-table-head>
               ${items.map(
                 (w) => html`<uui-table-row>
-                  <uui-table-cell><a href="#" @click=${(e) => {
-                    e.preventDefault()
-                    this.#edit(w)
-                  }}>${w.name}</a></uui-table-cell>
+                  <uui-table-cell>${w.name}</uui-table-cell>
                   <uui-table-cell>${[
                     w.appliesTo.branches.length ? `${w.appliesTo.branches.length} branch(es)` : '',
                     ...w.appliesTo.contentTypes,
@@ -302,55 +321,48 @@ export default class CromboloWorkflowDesignerElement extends LitElement {
                     .filter(Boolean)
                     .join(', ')}</uui-table-cell>
                   <uui-table-cell>${w.stages.length}</uui-table-cell>
+                  <uui-table-cell>
+                    <uui-button look="secondary" label=${editable ? 'Edit' : 'View'} @click=${() => this.#edit(w)}></uui-button>
+                    ${
+                      editable
+                        ? html`<uui-button look="secondary" color="danger" label="Delete" @click=${() => this.#delete(w.name, w.alias)}></uui-button>`
+                        : nothing
+                    }
+                  </uui-table-cell>
                 </uui-table-row>`,
               )}
             </uui-table>`
       }
-      ${editable ? html`<uui-button look="primary" label="New workflow" @click=${() => this.#edit(blank())}>New workflow</uui-button>` : nothing}
-    </uui-box>`
+      </uui-box>
+    </div>`
   }
 
   #renderEditor() {
     const w = this._editing
     const editable = this._list.editable
     const stage = this.#stage(this._selected)
-    return html`
-      <uui-box headline=${w.name || 'Workflow'}>
-        <div class="toolbar">
-          <uui-button look="secondary" label="Back" @click=${() => {
-            this._editing = undefined
-          }}>Back to the list</uui-button>
-          ${
-            editable
-              ? html`
-                  <uui-button look="secondary" label="Add a stage" @click=${() => this.#addStage()}>Add a stage</uui-button>
-                  <uui-button look=${this._connecting ? 'primary' : 'secondary'} label="Connect stages"
-                    @click=${() => {
-                      this._connecting = this._connecting ? undefined : true
-                    }}
-                  >${this._connecting === true ? 'Click the stage to draw from' : this._connecting ? 'Now click the stage it leads to' : 'Connect stages'}</uui-button>
-                  <uui-button look="primary" label="Save" @click=${() => this.#save()}>Save</uui-button>
-                  ${
-                    this._originalAlias &&
-                    this._list.items.some((i) => i.alias === this._originalAlias)
-                      ? html`<uui-button look="secondary" color="danger" label="Delete" @click=${() => this.#delete()}>Delete</uui-button>`
-                      : nothing
-                  }
-                `
-              : nothing
-          }
-        </div>
-        ${this._message ? html`<p class="message">${this._message}</p>` : nothing}
-        ${this._problems ? html`<ul class="problems">${this._problems.map((p) => html`<li>${p.path ? html`<code>${p.path}</code> ` : nothing}${p.message}</li>`)}</ul>` : nothing}
+    const leave = () => {
+      this._editing = undefined
+      this._message = undefined
+      this._problems = undefined
+    }
+    // Umbraco's own layout, so Save sits bottom right in the footer as it does
+    // in every workspace, with Back beside it.
+    return html`<umb-body-layout headline=${w.name || 'Workflow'}>
+      <uui-box>
         ${
-          this._affected
-            ? html`<div class="affected">
-                <p>Saving changes the rules for ${this._affected.length} page(s) waiting for approval:</p>
-                <ul>${this._affected.map((a) => html`<li>${a.page}: ${ON_CHANGE[a.outcome]}</li>`)}</ul>
-                <uui-button look="primary" label="Save anyway" @click=${() => this.#save(true)}>Save anyway</uui-button>
+          editable
+            ? html`<div class="toolbar">
+                <uui-button look="secondary" label="Add a stage" @click=${() => this.#addStage()}>Add a stage</uui-button>
+                <uui-button look=${this._connecting ? 'primary' : 'secondary'} label="Connect stages"
+                  @click=${() => {
+                    this._connecting = this._connecting ? undefined : true
+                  }}
+                >${this._connecting === true ? 'Click the stage to draw from' : this._connecting ? 'Now click the stage it leads to' : 'Connect stages'}</uui-button>
               </div>`
             : nothing
         }
+        ${this._message ? html`<p class="message">${this._message}</p>` : nothing}
         <p class="hint">Arrows run left to right: the stages an arrow leads to wait for every stage with an arrow into them, and run side by side. Click an arrow to remove it.</p>
         <div class="canvas" @pointermove=${(e) => editable && this.#pointerMove(e)} @pointerup=${() => this.#pointerUp()} @pointerleave=${() => this.#pointerUp()}>
           ${drawGraph(w.stages, {
@@ -365,7 +377,28 @@ export default class CromboloWorkflowDesignerElement extends LitElement {
         ${stage ? this.#renderStage(stage, editable) : nothing}
         ${this.#renderSettings(w, editable)}
       </div>
-    `
+      ${this._problems ? html`<ul class="problems">${this._problems.map((p) => html`<li>${p.path ? html`<code>${p.path}</code> ` : nothing}${p.message}</li>`)}</ul>` : nothing}
+      ${
+        this._affected
+          ? html`<div class="affected">
+                <p>Saving changes the rules for ${this._affected.length} page(s) waiting for approval:</p>
+                <ul>${this._affected.map((a) => html`<li>${a.page}: ${ON_CHANGE[a.outcome]}</li>`)}</ul>
+                <uui-button look="primary" label="Save anyway" @click=${() => this.#save(true)}>Save anyway</uui-button>
+              </div>`
+          : nothing
+      }
+      ${
+        this._problems
+          ? html`<span slot="footer-info" class="not-saved">Not saved: ${this._problems.length} problem(s), listed above</span>`
+          : nothing
+      }
+      <uui-button slot="actions" look="secondary" label="Back to the list" @click=${leave}>Back to the list</uui-button>
+      ${
+        editable
+          ? html`<uui-button slot="actions" look="primary" color="positive" label="Save" @click=${() => this.#save()}>Save</uui-button>`
+          : nothing
+      }
+    </umb-body-layout>`
   }
 
   #renderStage(stage, editable) {
@@ -510,7 +543,9 @@ export default class CromboloWorkflowDesignerElement extends LitElement {
   }
 
   static styles = css`
-    :host { display: block; padding: var(--uui-size-layout-1); }
+    :host { display: block; height: 100%; }
+    .list { padding: var(--uui-size-layout-1); }
+    .create { margin-bottom: var(--uui-size-space-5); }
     .toolbar { display: flex; flex-wrap: wrap; gap: var(--uui-size-space-3); margin-bottom: var(--uui-size-space-4); }
     .canvas { overflow: auto; border: 1px dashed var(--uui-color-border); border-radius: 6px; padding: var(--uui-size-space-5); min-height: 200px; touch-action: none; }
     .panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--uui-size-space-5); margin-top: var(--uui-size-space-5); }
@@ -520,8 +555,9 @@ export default class CromboloWorkflowDesignerElement extends LitElement {
     .field > span { font-weight: 700; }
     .hint { opacity: 0.8; font-size: 0.9em; }
     .message { color: var(--uui-color-warning-emphasis, #9e7300); }
-    .problems { color: var(--uui-color-danger); }
-    .affected { border: 1px solid var(--uui-color-warning); padding: var(--uui-size-space-4); border-radius: 6px; margin-bottom: var(--uui-size-space-4); }
+    .problems { color: var(--uui-color-danger); margin-top: var(--uui-size-space-5); }
+    .not-saved { color: var(--uui-color-danger); }
+    .affected { margin-top: var(--uui-size-space-5); border: 1px solid var(--uui-color-warning); padding: var(--uui-size-space-4); border-radius: 6px; margin-bottom: var(--uui-size-space-4); }
     ${unsafeCSS(GRAPH_STYLES)}
   `
 }

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>