@crombolo/backoffice-host 0.12.1 → 0.13.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crombolo/backoffice-host",
-  "version": "0.12.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.12.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.12.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'
@@ -40,6 +43,9 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
     _loading: { state: true },
     _busy: { state: true },
     _notice: { state: true },
+    _installs: { state: true },
+    _filter: { state: true },
+    _selected: { state: true },
   }
 
   constructor() {
@@ -48,6 +54,9 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
     this._loading = true
     this._busy = ''
     this._notice = ''
+    this._installs = true
+    this._filter = ''
+    this._selected = ''
   }
 
   connectedCallback() {
@@ -58,7 +67,11 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
   async #load() {
     this._loading = true
     try {
-      this._items = (await listInstalled()).items ?? []
+      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 {
@@ -79,63 +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>
-                        <uui-button
-                          look="secondary"
-                          color="danger"
-                          label="Uninstall"
-                          .state=${this._busy === item.packageName ? 'waiting' : undefined}
-                          @click=${() => this.#uninstall(item)}></uui-button>
-                      </uui-table-cell>
-                    </uui-table-row>
-                  `,
-                )}
-              </uui-table>
-              <p class="note">
-                An install writes this site's <code>package.json</code> and
-                <code>bun.lock</code>. Commit both to keep it across deployments.
-              </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`
@@ -154,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);
@@ -166,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

@@ -27,6 +27,7 @@ export default class CromboloBundlesMarketplaceElement extends UmbLitElement {
     _url: { state: true },
     _appliesContent: { state: true },
     _declined: { state: true },
+    _installs: { state: true },
   }
 
   constructor() {
@@ -41,6 +42,7 @@ export default class CromboloBundlesMarketplaceElement extends UmbLitElement {
     this._query = ''
     this._appliesContent = true
     this._declined = new Set()
+    this._installs = true
   }
 
   connectedCallback() {
@@ -57,6 +59,7 @@ export default class CromboloBundlesMarketplaceElement extends UmbLitElement {
       this._keyword = result.keyword ?? this._keyword
       this._url = result.url ?? ''
       this._appliesContent = result.appliesContent !== false
+      this._installs = result.installs !== false
     } catch (error) {
       this._error = error instanceof Error ? error.message : String(error)
     } finally {
@@ -97,7 +100,7 @@ export default class CromboloBundlesMarketplaceElement extends UmbLitElement {
   }
 
   #contentChoice(item) {
-    if (!item.carries?.content || item.installedVersion) return nothing
+    if (!item.carries?.content || item.installedVersion || !this._installs) return nothing
     if (!this._appliesContent)
       return html`<p class="meta">Its content is added separately on this site.</p>`
     return html`
@@ -135,6 +138,11 @@ export default class CromboloBundlesMarketplaceElement extends UmbLitElement {
       </div>
       ${this._error ? html`<uui-box headline="The registry could not be reached"><p>${this._error}</p></uui-box>` : nothing}
       ${this._notice ? html`<div id="notice">${this._notice}</div>` : nothing}
+      ${
+        this._installs
+          ? nothing
+          : 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
           ? this.#empty()
@@ -161,7 +169,9 @@ export default class CromboloBundlesMarketplaceElement extends UmbLitElement {
                     ${
                       item.installedVersion
                         ? html`<uui-tag look="positive">Installed ${item.installedVersion}</uui-tag>`
-                        : html`
+                        : !this._installs
+                          ? html`<p class="meta">Add it to the site with <code>bun add ${item.name}</code>, then deploy.</p>`
+                          : html`
                           <uui-button
                             look="primary"
                             label="Install"

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}