@crombolo/backoffice-host 0.11.0 → 0.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crombolo/backoffice-host",
-  "version": "0.11.0",
+  "version": "0.13.1",
   "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.11.0",
+    "@crombolo/core": "0.13.1",
     "@crombolo/backoffice-dist": "18.2.0"
   }
 }

package/plugin/addresses-dashboard.js

@@ -0,0 +1,100 @@
+/**
+ * Page addresses: whether the top-level page's name is part of every address
+ * below it, as Umbraco's `HideTopLevelNodeFromPath` sets it. Saving moves the
+ * addresses, and the old ones redirect to the new. docs/rendering.md, "URLs".
+ */
+import { css, html, LitElement, nothing } from '@umbraco-cms/backoffice/external/lit'
+
+const endpoint = () =>
+  `${(document.querySelector('base')?.getAttribute('href') ?? '/umbraco/').replace(/\/$/, '')}/crombolo/api/url-options`
+
+export default class CromboloAddressesDashboardElement extends LitElement {
+  static properties = {
+    _settings: { state: true },
+    _showTopLevel: { state: true },
+    _message: { state: true },
+    _busy: { state: true },
+  }
+
+  constructor() {
+    super()
+    this._settings = undefined
+    this._showTopLevel = false
+    this._message = undefined
+    this._busy = false
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.#load()
+  }
+
+  async #load() {
+    const response = await fetch(endpoint(), {
+      credentials: 'include',
+      headers: { accept: 'application/json' },
+    })
+    if (!response.ok) {
+      this._message = 'The address settings could not be read.'
+      return
+    }
+    this._settings = await response.json()
+    this._showTopLevel = !this._settings.hideTopLevel
+  }
+
+  async #save() {
+    this._busy = true
+    try {
+      const response = await fetch(endpoint(), {
+        method: 'PUT',
+        credentials: 'include',
+        headers: { accept: 'application/json', 'content-type': 'application/json' },
+        body: JSON.stringify({ hideTopLevel: !this._showTopLevel }),
+      })
+      const result = await response.json().catch(() => ({}))
+      this._message = response.ok
+        ? 'Saved. Pages that moved still answer on their old addresses, which now redirect.'
+        : (result.message ?? 'The setting was not saved.')
+      if (response.ok) this._settings = result
+    } finally {
+      this._busy = false
+    }
+  }
+
+  render() {
+    if (!this._settings)
+      return html`<uui-box headline="Page addresses">${this._message ?? html`<uui-loader></uui-loader>`}</uui-box>`
+    const changed = this._showTopLevel === this._settings.hideTopLevel
+    return html`
+      <uui-box headline="Page addresses">
+        <p>
+          Normally the first top-level page is the home page at <code>/</code>, and the top-level
+          page's name is left out of the addresses of the pages below it.
+        </p>
+        <uui-toggle
+          label="Include the top-level page in addresses"
+          .checked=${this._showTopLevel}
+          ?disabled=${!this._settings.editable || this._busy}
+          @change=${(e) => (this._showTopLevel = e.target.checked)}
+        >Include the top-level page in addresses</uui-toggle>
+        <p class="example">
+          A page called News under a top-level page called Home is at
+          <code>${this._showTopLevel ? '/home/news/' : '/news/'}</code>.
+        </p>
+        ${
+          this._settings.editable
+            ? html`<uui-button look="primary" label="Save" ?disabled=${!changed || this._busy} @click=${() => this.#save()}>Save</uui-button>`
+            : html`<p class="note">This site keeps this setting with its files, so it is changed there rather than here.</p>`
+        }
+        ${this._message ? html`<p>${this._message}</p>` : nothing}
+      </uui-box>
+    `
+  }
+
+  static styles = css`
+    :host { display: block; padding: var(--uui-size-layout-1); }
+    .example, .note { color: var(--uui-color-text-alt); }
+  `
+}
+
+customElements.define('crombolo-addresses-dashboard', CromboloAddressesDashboardElement)

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.11.0",
+  "version": "0.13.1",
   "allowPublicAccess": false,
   "extensions": [
     {

package/plugin/bundles-installed.js

@@ -40,6 +40,7 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
     _loading: { state: true },
     _busy: { state: true },
     _notice: { state: true },
+    _installs: { state: true },
   }
 
   constructor() {
@@ -48,6 +49,7 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
     this._loading = true
     this._busy = ''
     this._notice = ''
+    this._installs = true
   }
 
   connectedCallback() {
@@ -58,7 +60,9 @@ 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
     } catch (error) {
       this._notice = error instanceof Error ? error.message : String(error)
     } finally {
@@ -117,20 +121,29 @@ export default class CromboloBundlesInstalledElement extends UmbLitElement {
                       <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>
+                        ${
+                          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">
-                An install writes this site's <code>package.json</code> and
-                <code>bun.lock</code>. Commit both to keep it across deployments.
+                ${
+                  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>
           `

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">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>`
+      }
       ${
         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

@@ -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>
                         `,