@crombolo/backoffice-host 0.10.0 → 0.12.1

package/plugin/changes-dashboard.js

@@ -9,19 +9,37 @@
  *
  * Below them, each installed bundle that keeps data of its own lists the
  * changes it has made to its storage here, and any still to make.
+ *
+ * A content bundle waiting to be imported can be answered and imported here,
+ * by those allowed to install packages: each finding offers the answers its
+ * kind allows, and the import runs once nothing is outstanding.
  */
 import { css, html, LitElement, nothing } from '@umbraco-cms/backoffice/external/lit'
-import { fetchReport } from './report-client.js'
+import { answersUrl, fetchReport, transferAction } from './report-client.js'
 
 const KIND_LABEL = { blocking: 'Blocking', person: 'Needs a person', auto: 'Automatic' }
 const KIND_COLOR = { blocking: 'danger', person: 'warning', auto: 'positive' }
 const SOURCE_LABEL = { upgrade: 'Schema and upgrade', transfer: 'Content transfer' }
+const CHOICE_LABEL = {
+  'take-bundle': 'Use the incoming version',
+  'keep-local': 'Keep this site’s version',
+  skip: 'Leave this item out',
+}
+const ANSWERED_LABEL = {
+  'take-bundle': 'uses the incoming version',
+  'keep-local': 'keeps this site’s version',
+  skip: 'is left out',
+}
 
 export default class CromboloChangesDashboardElement extends LitElement {
   static properties = {
     _report: { state: true },
     _error: { state: true },
     _showResolved: { state: true },
+    _busy: { state: true },
+    _outcome: { state: true },
+    _backupTaken: { state: true },
+    _passphrase: { state: true },
   }
 
   constructor() {
@@ -29,6 +47,28 @@ export default class CromboloChangesDashboardElement extends LitElement {
     this._report = undefined
     this._error = undefined
     this._showResolved = false
+    this._busy = undefined
+    this._outcome = {}
+    this._backupTaken = {}
+    // Held in this page only, sent with each request, never stored.
+    this._passphrase = {}
+  }
+
+  async #act(bundleId, verb, body) {
+    this._busy = bundleId
+    const label = (this._report?.transfers ?? []).find((t) => t.bundleId === bundleId)?.label
+    try {
+      const passphrase = this._passphrase[bundleId]
+      const result = await transferAction(
+        bundleId,
+        verb,
+        passphrase ? { ...body, passphrase } : body,
+      )
+      this._outcome = { ...this._outcome, [bundleId]: { verb, label, ...result } }
+    } finally {
+      this._busy = undefined
+      await this.#load()
+    }
   }
 
   connectedCallback() {
@@ -45,8 +85,15 @@ export default class CromboloChangesDashboardElement extends LitElement {
     }
   }
 
-  #group(findings) {
+  #group(findings, transfers = []) {
     const groups = new Map()
+    // A bundle with nothing to answer is still waiting to be imported.
+    for (const pending of transfers)
+      groups.set(`transfer|${pending.bundleId}`, {
+        source: 'transfer',
+        scope: pending.bundleId,
+        findings: [],
+      })
     for (const f of findings) {
       const source = f.source ?? 'upgrade'
       const key = `${source}|${f.scope ?? ''}`
@@ -60,8 +107,9 @@ export default class CromboloChangesDashboardElement extends LitElement {
   render() {
     if (this._error) return html`<uui-box headline="Changes"><p>${this._error}</p></uui-box>`
     if (!this._report) return html`<uui-box headline="Changes"><uui-loader></uui-loader></uui-box>`
-    const { health, findings, counts, bundles = [] } = this._report
+    const { health, findings, counts, bundles = [], upgrades, transfers = [] } = this._report
     const shown = findings.filter((f) => this._showResolved || f.status === 'open')
+    const groups = this.#group(shown, transfers)
     return html`
       <uui-box headline="Changes">
         <p>
@@ -72,6 +120,14 @@ export default class CromboloChangesDashboardElement extends LitElement {
               : html`<uui-tag color="positive">current</uui-tag>`
           }
         </p>
+        ${upgrades ? html`<p class="release">${this.#describeUpgrades(upgrades)}</p>` : nothing}
+        ${Object.entries(this._outcome)
+          .filter(
+            ([id, o]) => o.verb === 'import' && o.ok && !transfers.some((t) => t.bundleId === id),
+          )
+          .map(
+            ([id, o]) => html`<h4>${o.label ?? id}</h4>${this.#renderOutcome({ bundleId: id }, o)}`,
+          )}
         <div class="counts">
           ${Object.entries(KIND_LABEL).map(
             ([kind, label]) =>
@@ -85,15 +141,27 @@ export default class CromboloChangesDashboardElement extends LitElement {
           ></uui-toggle>
         </div>
         ${
-          shown.length === 0
+          groups.length === 0
             ? html`<p class="empty">Nothing outstanding. <code>crombolo upgrade check</code> and <code>crombolo content check</code> write findings here.</p>`
-            : this.#group(shown).map((group) => this.#renderGroup(group))
+            : groups.map((group) => this.#renderGroup(group))
         }
         ${bundles.map((bundle) => this.#renderBundle(bundle))}
       </uui-box>
     `
   }
 
+  #describeUpgrades({ version, installedAt, lastUpgrade }) {
+    const day = (at) => at?.slice(0, 10) ?? ''
+    const parts = [`Crombolo ${version}`]
+    if (installedAt) parts.push(`installed ${day(installedAt)}`)
+    if (lastUpgrade)
+      parts.push(
+        `last upgraded ${day(lastUpgrade.at)}${lastUpgrade.release ? ` to ${lastUpgrade.release}` : ''}, ` +
+          `${lastUpgrade.steps} storage change${lastUpgrade.steps === 1 ? '' : 's'}`,
+      )
+    return parts.join(' · ')
+  }
+
   #renderBundle(bundle) {
     const steps = [
       ...bundle.pending.map((step) => ({ ...step, done: false })),
@@ -128,16 +196,25 @@ export default class CromboloChangesDashboardElement extends LitElement {
   }
 
   #renderGroup(group) {
+    const pending =
+      group.source === 'transfer'
+        ? (this._report.transfers ?? []).find((t) => t.bundleId === group.scope)
+        : undefined
+    const answering = Boolean(pending && this._report.mayImport)
     return html`
       <h4>
         ${SOURCE_LABEL[group.source] ?? group.source}
-        ${group.scope ? html`<code>${group.scope}</code>` : nothing}
+        ${pending?.label ? html`<strong>${pending.label}</strong>` : group.scope ? html`<code>${group.scope}</code>` : nothing}
       </h4>
-      <uui-table>
+      ${
+        group.findings.length === 0
+          ? nothing
+          : html`<uui-table>
         <uui-table-head>
           <uui-table-head-cell>Kind</uui-table-head-cell>
           <uui-table-head-cell>What</uui-table-head-cell>
           <uui-table-head-cell>Where</uui-table-head-cell>
+          ${answering ? html`<uui-table-head-cell>Answer</uui-table-head-cell>` : nothing}
         </uui-table-head>
         ${group.findings.map(
           (f) => html`<uui-table-row class=${f.status}>
@@ -148,12 +225,167 @@ export default class CromboloChangesDashboardElement extends LitElement {
               ${f.propertyAlias ? html`<code>${f.propertyAlias}</code>` : nothing}
               ${f.culture ? html`<small>${f.culture}</small>` : nothing}
             </uui-table-cell>
+            ${answering ? html`<uui-table-cell>${this.#renderChoices(pending, f)}</uui-table-cell>` : nothing}
           </uui-table-row>`,
         )}
-      </uui-table>
+      </uui-table>`
+      }
+      ${answering ? this.#renderPending(pending, group.findings) : nothing}
     `
   }
 
+  #renderChoices(pending, finding) {
+    if (finding.status !== 'open' || !finding.choices?.length) return nothing
+    return html`<div class="choices">
+      ${finding.choices.map(
+        (choice) => html`<uui-button
+          look="secondary"
+          compact
+          ?disabled=${this._busy === pending.bundleId}
+          label=${CHOICE_LABEL[choice.resolution]}
+          @click=${() =>
+            this.#act(pending.bundleId, 'answer', {
+              nodeKey: finding.subjectKey,
+              handle: choice.handle,
+              resolution: choice.resolution,
+            })}
+        >${CHOICE_LABEL[choice.resolution]}</uui-button>`,
+      )}
+    </div>`
+  }
+
+  #describeAnswer(answer) {
+    const named = (this._report.findings ?? []).find((f) => f.subjectKey === answer.nodeKey)
+    const name = named?.subjectName ?? 'An item'
+    if (answer.handle === '*') return `${name} ${ANSWERED_LABEL[answer.resolution] ?? ''}`
+    const [field, culture] = answer.handle.split('@')
+    return `${name}: its ${field}${culture ? ` (${culture})` : ''} ${ANSWERED_LABEL[answer.resolution] ?? ''}`
+  }
+
+  #renderPending(pending, findings) {
+    const open = findings.filter((f) => f.status === 'open')
+    const waiting = open.filter((f) => f.kind === 'blocking' || f.kind === 'person')
+    const blocking = waiting.filter((f) => f.kind === 'blocking').length
+    const missingFiles = pending.allowMissingBlobs || open.some((f) => f.code === 'missing-blob')
+    const busy = this._busy === pending.bundleId
+    const outcome = this._outcome[pending.bundleId]
+    const encrypted =
+      open.some((f) => f.code === 'content-sealed') ||
+      outcome?.needsPassphrase === true ||
+      this._passphrase[pending.bundleId] !== undefined
+    return html`<div class="pending">
+      ${
+        encrypted
+          ? html`<p class="passphrase">
+              <span>This content is encrypted. Enter the passphrase it was exported with.</span>
+              <uui-input
+                type="password"
+                label="Passphrase"
+                autocomplete="off"
+                .value=${this._passphrase[pending.bundleId] ?? ''}
+                @input=${(e) => {
+                  this._passphrase = { ...this._passphrase, [pending.bundleId]: e.target.value }
+                }}
+              ></uui-input>
+              <uui-button
+                look="secondary"
+                ?disabled=${busy || !this._passphrase[pending.bundleId]}
+                label="Open"
+                @click=${() => this.#act(pending.bundleId, 'check')}
+              >Open</uui-button>
+            </p>`
+          : nothing
+      }
+      ${
+        pending.answers.length > 0
+          ? html`<p><strong>Answers given</strong></p>
+            <ul>
+              ${pending.answers.map(
+                (answer) => html`<li>
+                  ${this.#describeAnswer(answer)}
+                  <uui-button
+                    look="secondary"
+                    compact
+                    ?disabled=${busy}
+                    label="Change"
+                    @click=${() =>
+                      this.#act(pending.bundleId, 'answer', {
+                        nodeKey: answer.nodeKey,
+                        handle: answer.handle,
+                        resolution: null,
+                      })}
+                  >Change</uui-button>
+                </li>`,
+              )}
+            </ul>`
+          : nothing
+      }
+      ${
+        missingFiles
+          ? html`<uui-toggle
+              label="Import even where a media file is missing"
+              .checked=${pending.allowMissingBlobs}
+              ?disabled=${busy}
+              @change=${(e) => this.#act(pending.bundleId, 'missing-files', { allow: e.target.checked })}
+            ></uui-toggle>`
+          : nothing
+      }
+      <p class="state">
+        ${
+          waiting.length === 0
+            ? html`<uui-tag color="positive">Ready to import</uui-tag>`
+            : blocking > 0
+              ? html`<uui-tag color="danger">${blocking} blocking: these need a change to this site before the import can run</uui-tag>`
+              : html`<uui-tag color="warning">${waiting.length} still to answer</uui-tag>`
+        }
+        ${pending.publish ? html`<small>Pages live where the content came from are published too.</small>` : nothing}
+      </p>
+      <div class="actions">
+        <uui-button
+          look="primary"
+          ?disabled=${busy || waiting.length > 0}
+          label="Import"
+          @click=${() =>
+            this.#act(pending.bundleId, 'import', {
+              backupTaken: this._backupTaken[pending.bundleId] === true,
+            })}
+        >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>
+      </div>
+      ${outcome ? this.#renderOutcome(pending, outcome) : nothing}
+    </div>`
+  }
+
+  #renderOutcome(pending, outcome) {
+    if (outcome.verb === 'import' && outcome.ok) {
+      const c = outcome.counts ?? {}
+      return html`<p class="outcome">
+        <uui-tag color="positive">Imported</uui-tag>
+        ${c.create ?? 0} new, ${c.update ?? 0} updated, ${c.unchanged ?? 0} unchanged, ${c.skip ?? 0} left out${
+          outcome.published?.length ? html`; ${outcome.published.length} published` : nothing
+        }.
+        ${
+          outcome.publishFailures?.length
+            ? html`<ul>${outcome.publishFailures.map((f) => html`<li>${f.name} was not published: ${f.reason}</li>`)}</ul>`
+            : nothing
+        }
+      </p>`
+    }
+    if (outcome.needsBackup)
+      return html`<p class="outcome">
+        ${outcome.message}
+        <uui-checkbox
+          label="A backup of this site has been taken"
+          .checked=${this._backupTaken[pending.bundleId] === true}
+          @change=${(e) => (this._backupTaken = { ...this._backupTaken, [pending.bundleId]: e.target.checked })}
+        >A backup of this site has been taken</uui-checkbox>
+      </p>`
+    if (outcome.ok === false)
+      return html`<p class="outcome"><uui-tag color="danger">Not done</uui-tag> ${outcome.message ?? 'Something is still outstanding.'}</p>`
+    return nothing
+  }
+
   static styles = css`
     :host { display: block; padding: var(--uui-size-layout-1); }
     .counts { display: flex; gap: var(--uui-size-space-3); align-items: center; margin-bottom: var(--uui-size-space-4); }
@@ -163,6 +395,11 @@ export default class CromboloChangesDashboardElement extends LitElement {
     code { margin-left: var(--uui-size-space-2); }
     small { margin-left: var(--uui-size-space-2); }
     .empty { color: var(--uui-color-text-alt); }
+    .choices, .actions { display: flex; flex-wrap: wrap; gap: var(--uui-size-space-2); }
+    .pending { margin: var(--uui-size-space-3) 0 var(--uui-size-space-5); }
+    .pending ul { margin: 0 0 var(--uui-size-space-3); padding-left: var(--uui-size-space-5); }
+    .state { display: flex; gap: var(--uui-size-space-3); align-items: center; }
+    .passphrase { display: flex; flex-wrap: wrap; gap: var(--uui-size-space-3); align-items: center; }
   `
 }
 

package/plugin/forms-client.js

@@ -25,11 +25,18 @@ const call = async (path, init) => {
 
 export const listForms = async () => (await call('')).body.items ?? []
 
+/** The field and workflow types this site has, built in and from its bundles. */
+export const listFormTypes = async () => (await call('/available-types')).body
+
 export const readForm = async (key) => (await call(`/${encodeURIComponent(key)}`)).body
 
 export const saveForm = (definition) =>
   call('', { method: 'PUT', body: JSON.stringify(definition) })
 
+/** The options a choice source offers right now, as a visitor would see them. */
+export const previewChoices = (source) =>
+  call('/choices', { method: 'POST', body: JSON.stringify({ source }) })
+
 export const deleteForm = (key) => call(`/${encodeURIComponent(key)}`, { method: 'DELETE' })
 
 export const listEntries = async (key, query = {}) => {

package/plugin/forms-entries.js

@@ -167,7 +167,8 @@ export default class CromboloFormsEntriesElement extends UmbLitElement {
                             ${
                               value.redacted
                                 ? html`<em>withheld — needs sensitive-data access</em>`
-                                : value.values.join(', ') || html`<em>not answered</em>`
+                                : (value.labels ?? value.values).join(', ') ||
+                                  html`<em>not answered</em>`
                             }
                           </dd>
                         `,

package/plugin/forms-layout.js

@@ -0,0 +1,128 @@
+/**
+ * The form designer's layout operations: pages, groups and fields moved, added
+ * and removed. Pure — each takes a form and answers a new one, leaving the
+ * argument untouched — so the designer's element only has to render, and each
+ * operation is tested on its own (tests/forms-layout.test.ts).
+ */
+
+const copy = (form) => structuredClone(form)
+
+/** `list` with the item at `from` moved to `to`, clamped to the list. */
+export function moved(list, from, to) {
+  const out = [...list]
+  if (from < 0 || from >= out.length) return out
+  const [item] = out.splice(from, 1)
+  out.splice(Math.max(0, Math.min(to, out.length)), 0, item)
+  return out
+}
+
+export const emptyGroup = () => ({ columns: 1, fields: [] })
+export const emptyPage = () => ({ groups: [emptyGroup()] })
+
+/** Every page with at least one group, which is what the designer edits. */
+export function withLayout(form) {
+  const next = copy(form)
+  next.pages = next.pages?.length ? next.pages : [emptyPage()]
+  for (const page of next.pages) page.groups = page.groups?.length ? page.groups : [emptyGroup()]
+  return next
+}
+
+export function addPage(form) {
+  const next = copy(form)
+  next.pages.push(emptyPage())
+  return next
+}
+
+export function movePage(form, index, to) {
+  const next = copy(form)
+  next.pages = moved(next.pages, index, to)
+  return next
+}
+
+/** A form keeps one page at least: the last one cannot be removed. */
+export function removePage(form, index) {
+  if (form.pages.length <= 1) return form
+  const next = copy(form)
+  next.pages.splice(index, 1)
+  return next
+}
+
+export function setPageCaption(form, index, caption) {
+  const next = copy(form)
+  if (caption.trim()) next.pages[index].caption = caption
+  else delete next.pages[index].caption
+  return next
+}
+
+export function addGroup(form, page) {
+  const next = copy(form)
+  next.pages[page].groups.push(emptyGroup())
+  return next
+}
+
+export function moveGroup(form, page, index, to) {
+  const next = copy(form)
+  next.pages[page].groups = moved(next.pages[page].groups, index, to)
+  return next
+}
+
+/** A page keeps one group at least. */
+export function removeGroup(form, page, index) {
+  if (form.pages[page].groups.length <= 1) return form
+  const next = copy(form)
+  next.pages[page].groups.splice(index, 1)
+  return next
+}
+
+export function setGroupCaption(form, page, index, caption) {
+  const next = copy(form)
+  if (caption.trim()) next.pages[page].groups[index].caption = caption
+  else delete next.pages[page].groups[index].caption
+  return next
+}
+
+/** Between 1 and 4, as the file allows. */
+export function setColumns(form, page, index, columns) {
+  const next = copy(form)
+  next.pages[page].groups[index].columns = Math.max(1, Math.min(4, Math.round(columns) || 1))
+  return next
+}
+
+/**
+ * Moves a field to a place, `{ page, group, index }`, in its own group or
+ * another. Within one group the index is where it ends up.
+ */
+export function moveField(form, from, to) {
+  const next = copy(form)
+  const source = next.pages[from.page]?.groups[from.group]?.fields
+  const target = next.pages[to.page]?.groups[to.group]?.fields
+  if (!source || !target || from.index < 0 || from.index >= source.length) return form
+  const [field] = source.splice(from.index, 1)
+  target.splice(Math.max(0, Math.min(to.index, target.length)), 0, field)
+  return next
+}
+
+/** One step up or down within a group, or into the neighbouring group at its edge. */
+export function nudgeField(form, at, step) {
+  const groups = form.pages.flatMap((page, p) => page.groups.map((_, g) => ({ page: p, group: g })))
+  const here = groups.findIndex((place) => place.page === at.page && place.group === at.group)
+  const fields = form.pages[at.page].groups[at.group].fields
+  const index = at.index + step
+  if (index >= 0 && index < fields.length) return moveField(form, at, { ...at, index })
+  const neighbour = groups[here + step]
+  if (!neighbour) return form
+  const length = form.pages[neighbour.page].groups[neighbour.group].fields.length
+  return moveField(form, at, { ...neighbour, index: step < 0 ? length : 0 })
+}
+
+/** Whether removing it would take fields with it, so the designer asks first. */
+export const pageHasFields = (page) => page.groups.some((group) => group.fields.length > 0)
+export const groupHasFields = (group) => group.fields.length > 0
+
+/** The group's fields laid out in rows of `columns`, as the rendered form arranges them. */
+export function layoutRows(group) {
+  const rows = []
+  for (let at = 0; at < group.fields.length; at += group.columns)
+    rows.push(group.fields.slice(at, at + group.columns))
+  return rows
+}