@crombolo/backoffice-host 0.0.0-stage → 0.9.1

package/plugin/bundles-installed.js

@@ -0,0 +1,147 @@
+/**
+ * The Installed view, in place of Umbraco's.
+ *
+ * Its manifest declares `overwrites: ['Umb.SectionView.Packages.Installed']`.
+ * Umbraco's view is built around package migrations — it lists installed
+ * packages so that pending C# migrations can be run. Nothing carries those here
+ * (`docs/17-bundles.md`), so the view would be a list of nothing with a button
+ * that cannot apply.
+ *
+ * What it lists instead is the site's declared `crombolo` dependencies, which is
+ * what "installed" means here, and where each one came from.
+ */
+import { css, html, nothing, repeat } from '@umbraco-cms/backoffice/external/lit'
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
+import { listInstalled, uninstallBundle } from './bundles-client.js'
+
+export default class CromboloBundlesInstalledElement extends UmbLitElement {
+  static properties = {
+    _items: { state: true },
+    _loading: { state: true },
+    _busy: { state: true },
+    _notice: { state: true },
+  }
+
+  constructor() {
+    super()
+    this._items = []
+    this._loading = true
+    this._busy = ''
+    this._notice = ''
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.#load()
+  }
+
+  async #load() {
+    this._loading = true
+    try {
+      this._items = (await listInstalled()).items ?? []
+    } catch (error) {
+      this._notice = error instanceof Error ? error.message : String(error)
+    } finally {
+      this._loading = false
+    }
+  }
+
+  async #uninstall(item) {
+    this._busy = item.packageName
+    try {
+      const outcome = await uninstallBundle(item.packageName)
+      this._notice = outcome.message ?? ''
+      if (outcome.ok) await this.#load()
+    } catch (error) {
+      this._notice = error instanceof Error ? error.message : String(error)
+    } finally {
+      this._busy = ''
+    }
+  }
+
+  render() {
+    if (this._loading) return html`<div id="loader"><uui-loader></uui-loader></div>`
+
+    return html`
+      ${this._notice ? html`<div id="notice">${this._notice}</div>` : nothing}
+      ${
+        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 — a dependency
+                that declares a <code>crombolo</code> field 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>Extensions</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>${item.extensionCount}</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>
+          `
+      }
+    `
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      padding: var(--uui-size-layout-1, 24px);
+    }
+    #loader {
+      display: flex;
+      justify-content: center;
+      padding: var(--uui-size-layout-3, 48px);
+    }
+    #notice {
+      margin-bottom: var(--uui-size-space-4, 12px);
+      padding: var(--uui-size-space-4, 12px);
+      border-left: 3px solid var(--uui-color-positive, #2bc37c);
+      background: var(--uui-color-surface-alt, #f3f3f5);
+    }
+    p {
+      max-width: 60ch;
+      line-height: 1.5;
+    }
+    .note {
+      margin-top: var(--uui-size-space-5, 18px);
+      opacity: 0.8;
+      font-size: 0.9em;
+    }
+  `
+}
+
+customElements.define('crombolo-bundles-installed', CromboloBundlesInstalledElement)

package/plugin/bundles-marketplace.js

@@ -0,0 +1,199 @@
+/**
+ * The Marketplace view, in place of Umbraco's.
+ *
+ * Its manifest declares `overwrites: ['Umb.SectionView.Packages.Marketplace']`.
+ * What it replaces is an iframe of marketplace.umbraco.com, which cannot work
+ * here twice over: npm refuses to be framed (`x-frame-options: SAMEORIGIN`), and
+ * an Umbraco package does not install into this CMS anyway.
+ *
+ * What it shows instead is the npm registry, searched for the keyword a crombolo
+ * bundle publishes, and filtered to the ones that really declare backoffice
+ * extensions. Installing runs `bun add` on the server.
+ */
+import { css, html, nothing, repeat } from '@umbraco-cms/backoffice/external/lit'
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
+import { installBundle, searchMarketplace } from './bundles-client.js'
+
+export default class CromboloBundlesMarketplaceElement extends UmbLitElement {
+  static properties = {
+    _items: { state: true },
+    _loading: { state: true },
+    _error: { state: true },
+    _busy: { state: true },
+    _notice: { state: true },
+    _keyword: { state: true },
+    _url: { state: true },
+  }
+
+  constructor() {
+    super()
+    this._items = []
+    this._loading = true
+    this._error = ''
+    this._busy = ''
+    this._notice = ''
+    this._keyword = 'crombolo-bundle'
+    this._url = ''
+    this._query = ''
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.#load()
+  }
+
+  async #load() {
+    this._loading = true
+    this._error = ''
+    try {
+      const result = await searchMarketplace(this._query)
+      this._items = result.items ?? []
+      this._keyword = result.keyword ?? this._keyword
+      this._url = result.url ?? ''
+    } catch (error) {
+      this._error = error instanceof Error ? error.message : String(error)
+    } finally {
+      this._loading = false
+    }
+  }
+
+  #search(event) {
+    this._query = event.target.value ?? ''
+    this.#load()
+  }
+
+  async #install(item) {
+    this._busy = item.name
+    this._notice = ''
+    try {
+      const outcome = await installBundle(item.name, item.version)
+      // The dependency line is what there is to commit, so it is shown rather
+      // than described: the install lives in this node's node_modules until it
+      // is in the site's repository.
+      this._notice = outcome.dependency
+        ? `${outcome.message} — "${outcome.dependency.name}": "${outcome.dependency.range}"`
+        : (outcome.message ?? '')
+      if (outcome.ok) await this.#load()
+    } catch (error) {
+      this._notice = error instanceof Error ? error.message : String(error)
+    } finally {
+      this._busy = ''
+    }
+  }
+
+  #empty() {
+    return html`
+      <uui-box headline="No bundles published yet">
+        <p>Nothing on npm carries the <code>${this._keyword}</code> keyword yet.</p>
+      </uui-box>
+    `
+  }
+
+  render() {
+    if (this._loading && this._items.length === 0)
+      return html`<div id="loader"><uui-loader></uui-loader></div>`
+
+    return html`
+      <div id="head">
+        <uui-input
+          type="search"
+          label="Search bundles"
+          placeholder="Search npm for bundles"
+          @change=${this.#search}></uui-input>
+        ${
+          this._url
+            ? html`<a href=${this._url} target="_blank" rel="noopener">Browse on npm</a>`
+            : nothing
+        }
+      </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._items.length === 0 && !this._error
+          ? this.#empty()
+          : html`
+            <div id="list">
+              ${repeat(
+                this._items,
+                (item) => item.name,
+                (item) => html`
+                  <uui-box>
+                    <div slot="headline">${item.name} <small>${item.version}</small></div>
+                    <p>${item.description || 'No description.'}</p>
+                    <p class="meta">
+                      ${item.publisher ? html`<span>by ${item.publisher}</span>` : nothing}
+                      <a href=${item.links.npm} target="_blank" rel="noopener">npm</a>
+                      ${
+                        item.links.repository
+                          ? html`<a href=${item.links.repository} target="_blank" rel="noopener">source</a>`
+                          : nothing
+                      }
+                    </p>
+                    ${
+                      item.installedVersion
+                        ? html`<uui-tag look="positive">Installed ${item.installedVersion}</uui-tag>`
+                        : html`
+                          <uui-button
+                            look="primary"
+                            label="Install"
+                            .state=${this._busy === item.name ? 'waiting' : undefined}
+                            @click=${() => this.#install(item)}></uui-button>
+                        `
+                    }
+                  </uui-box>
+                `,
+              )}
+            </div>
+          `
+      }
+    `
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      padding: var(--uui-size-layout-1, 24px);
+    }
+    #loader {
+      display: flex;
+      justify-content: center;
+      padding: var(--uui-size-layout-3, 48px);
+    }
+    #head {
+      display: flex;
+      align-items: center;
+      gap: var(--uui-size-space-4, 12px);
+      margin-bottom: var(--uui-size-space-5, 18px);
+    }
+    #head uui-input {
+      flex: 1;
+    }
+    #notice {
+      margin-bottom: var(--uui-size-space-4, 12px);
+      padding: var(--uui-size-space-4, 12px);
+      border-left: 3px solid var(--uui-color-positive, #2bc37c);
+      background: var(--uui-color-surface-alt, #f3f3f5);
+    }
+    #list {
+      display: grid;
+      gap: var(--uui-size-space-5, 18px);
+      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    }
+    p {
+      max-width: 60ch;
+      line-height: 1.5;
+    }
+    .meta {
+      display: flex;
+      gap: var(--uui-size-space-4, 12px);
+      font-size: 0.9em;
+      opacity: 0.8;
+    }
+    small {
+      opacity: 0.7;
+      font-weight: normal;
+    }
+  `
+}
+
+customElements.define('crombolo-bundles-marketplace', CromboloBundlesMarketplaceElement)

package/plugin/changes-dashboard.js

@@ -0,0 +1,132 @@
+/**
+ * The Changes dashboard: counts by kind, each finding with its link, resolved
+ * ones greyed. Reads a stable table, so whatever version is live can show what
+ * the next version needs. docs/10, "The upgrade dashboard ships in the first release".
+ *
+ * Findings arrive from two sources — a pending upgrade and an arriving content
+ * bundle — so they are grouped rather than pooled: the counts of one say nothing
+ * about the other, and the actions that resolve them are different.
+ */
+import { css, html, LitElement, nothing } from '@umbraco-cms/backoffice/external/lit'
+import { fetchReport } 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' }
+
+export default class CromboloChangesDashboardElement extends LitElement {
+  static properties = {
+    _report: { state: true },
+    _error: { state: true },
+    _showResolved: { state: true },
+  }
+
+  constructor() {
+    super()
+    this._report = undefined
+    this._error = undefined
+    this._showResolved = false
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.#load()
+  }
+
+  async #load() {
+    try {
+      this._report = await fetchReport()
+      this._error = undefined
+    } catch (error) {
+      this._error = error.message
+    }
+  }
+
+  #group(findings) {
+    const groups = new Map()
+    for (const f of findings) {
+      const source = f.source ?? 'upgrade'
+      const key = `${source}|${f.scope ?? ''}`
+      const group = groups.get(key) ?? { source, scope: f.scope ?? null, findings: [] }
+      group.findings.push(f)
+      groups.set(key, group)
+    }
+    return [...groups.values()]
+  }
+
+  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 } = this._report
+    const shown = findings.filter((f) => this._showResolved || f.status === 'open')
+    return html`
+      <uui-box headline="Changes">
+        <p>
+          This server runs schema <strong>${health.version}+${health.revision}</strong>
+          ${
+            health.readOnly
+              ? html`<uui-tag color="warning">read-only: the database is ahead of this server</uui-tag>`
+              : html`<uui-tag color="positive">current</uui-tag>`
+          }
+        </p>
+        <div class="counts">
+          ${Object.entries(KIND_LABEL).map(
+            ([kind, label]) =>
+              html`<uui-tag color=${KIND_COLOR[kind]}>${label}: ${counts[kind] ?? 0}</uui-tag>`,
+          )}
+          <uui-button look="secondary" compact @click=${() => this.#load()} label="Refresh">Refresh</uui-button>
+          <uui-toggle
+            label="Show resolved"
+            .checked=${this._showResolved}
+            @change=${(e) => (this._showResolved = e.target.checked)}
+          ></uui-toggle>
+        </div>
+        ${
+          shown.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))
+        }
+      </uui-box>
+    `
+  }
+
+  #renderGroup(group) {
+    return html`
+      <h4>
+        ${SOURCE_LABEL[group.source] ?? group.source}
+        ${group.scope ? html`<code>${group.scope}</code>` : nothing}
+      </h4>
+      <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>
+        </uui-table-head>
+        ${group.findings.map(
+          (f) => html`<uui-table-row class=${f.status}>
+            <uui-table-cell><uui-tag color=${KIND_COLOR[f.kind]}>${KIND_LABEL[f.kind]}</uui-tag></uui-table-cell>
+            <uui-table-cell>${f.message}</uui-table-cell>
+            <uui-table-cell>
+              ${f.link ? html`<a href=${f.link}>${f.subjectName}</a>` : f.subjectName}
+              ${f.propertyAlias ? html`<code>${f.propertyAlias}</code>` : nothing}
+              ${f.culture ? html`<small>${f.culture}</small>` : nothing}
+            </uui-table-cell>
+          </uui-table-row>`,
+        )}
+      </uui-table>
+    `
+  }
+
+  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); }
+    h4 { margin: var(--uui-size-space-5) 0 var(--uui-size-space-2); }
+    h4:first-of-type { margin-top: 0; }
+    uui-table-row.resolved { opacity: 0.5; text-decoration: line-through; }
+    code { margin-left: var(--uui-size-space-2); }
+    small { margin-left: var(--uui-size-space-2); }
+    .empty { color: var(--uui-color-text-alt); }
+  `
+}
+
+customElements.define('crombolo-changes-dashboard', CromboloChangesDashboardElement)

package/plugin/element-type-hint.js

@@ -0,0 +1,58 @@
+/**
+ * A hint in the document-type workspace footer, for the one thing about element
+ * types that nobody finds on their own: making a type an element type does not put
+ * it in the Library. That takes a second toggle, **Allow in Library**, on a
+ * different tab — and Umbraco's own "no allowed Element Types" message in the
+ * Library's create dialog never appears, because Folder is always an option there,
+ * so the dialog is never empty enough to explain itself.
+ *
+ * Both flags are worth keeping: most element types exist for block editors and
+ * should stay out of the Library. This says so rather than changing it.
+ *
+ * Registered as a `workspaceFooterApp` conditioned on the document-type workspace,
+ * not patched into Umbraco's own view — a manifest is the supported extension
+ * point, so an upstream bump cannot silently drop it.
+ */
+
+import { UMB_DOCUMENT_TYPE_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/document-type'
+import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api'
+import { css, html, LitElement, nothing } from '@umbraco-cms/backoffice/external/lit'
+
+export default class CromboloElementTypeHintElement extends UmbElementMixin(LitElement) {
+  static properties = { _isElement: { state: true }, _allowedInLibrary: { state: true } }
+
+  constructor() {
+    super()
+    this._isElement = false
+    this._allowedInLibrary = false
+    this.consumeContext(UMB_DOCUMENT_TYPE_WORKSPACE_CONTEXT, (context) => {
+      if (!context) return
+      this.observe(context.isElement, (value) => {
+        this._isElement = Boolean(value)
+      })
+      this.observe(context.allowedInLibrary, (value) => {
+        this._allowedInLibrary = Boolean(value)
+      })
+    })
+  }
+
+  render() {
+    if (!this._isElement || this._allowedInLibrary) return nothing
+    return html`<uui-tag
+      color="default"
+      look="secondary"
+      title="An element type is only offered in the Library's Create dialog when 'Allow in Library' is on, under the Structure tab. Leave it off for an element type that exists for block editors."
+    >
+      Not in the Library — see Structure
+    </uui-tag>`
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      align-items: center;
+    }
+  `
+}
+
+customElements.define('crombolo-element-type-hint', CromboloElementTypeHintElement)

package/plugin/form-picker.js

@@ -0,0 +1,116 @@
+/**
+ * The Form Picker property editor.
+ *
+ * A form is a file in `schema/forms/`, so the list comes from the server rather
+ * than from a tree of nodes: there is nothing in the database to browse. The
+ * stored value is the form's key, which is what a render resolves back to the
+ * definition.
+ *
+ * Shows the alias beside the name because a form is referred to by alias
+ * everywhere else — in a view, in a workflow's settings, in a diff.
+ */
+import { css, html, nothing, repeat } from '@umbraco-cms/backoffice/external/lit'
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
+
+const forms = async () => {
+  const href = document.querySelector('base')?.getAttribute('href') ?? '/umbraco/'
+  const response = await fetch(`${href.replace(/\/$/, '')}/crombolo/api/forms`, {
+    credentials: 'include',
+    headers: { accept: 'application/json' },
+  })
+  if (!response.ok) throw new Error(`forms responded ${response.status}`)
+  return (await response.json()).items ?? []
+}
+
+export default class CromboloFormPickerElement extends UmbLitElement {
+  static properties = {
+    value: { type: String },
+    _items: { state: true },
+    _failed: { state: true },
+  }
+
+  constructor() {
+    super()
+    this.value = ''
+    this._items = undefined
+    this._failed = false
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    forms().then(
+      (items) => {
+        this._items = items
+      },
+      () => {
+        this._failed = true
+      },
+    )
+  }
+
+  /**
+   * A plain `change` on the host, which is what `umb-property` listens for.
+   *
+   * `UmbPropertyValueChangeEvent` is deprecated upstream and is not exported by
+   * the vendored client at all, so importing it would fail at runtime. The
+   * inner select's own event is stopped so the host dispatches exactly one.
+   */
+  #pick(event) {
+    event.stopPropagation()
+    this.value = event.target.value || undefined
+    this.dispatchEvent(new Event('change'))
+  }
+
+  render() {
+    if (this._failed) return html`<uui-box><p>The list of forms could not be loaded.</p></uui-box>`
+    if (this._items === undefined) return html`<uui-loader></uui-loader>`
+    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>.
+        </p>
+      `
+    return html`
+      <uui-select
+        .value=${this.value ?? ''}
+        @change=${this.#pick}
+        label="Form"
+        placeholder="Choose a form"
+      >
+        <option value="">(none)</option>
+        ${repeat(
+          this._items,
+          (form) => form.key,
+          (form) => html`
+            <option value=${form.key} ?selected=${form.key === this.value}>
+              ${form.name} (${form.alias})
+            </option>
+          `,
+        )}
+      </uui-select>
+      ${this.value ? html`<p class="detail">${this.#describe()}</p>` : nothing}
+    `
+  }
+
+  #describe() {
+    const form = this._items?.find((item) => item.key === this.value)
+    if (!form) return 'This form is no longer in schema/forms/.'
+    const fields = `${form.fieldCount} field${form.fieldCount === 1 ? '' : 's'}`
+    const pages = `${form.pageCount} page${form.pageCount === 1 ? '' : 's'}`
+    return `${fields} over ${pages}${form.storeEntries ? '' : '; entries are not stored'}`
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+    .empty,
+    .detail {
+      color: var(--uui-color-text-alt, #666);
+      font-size: var(--uui-type-small-size, 0.8rem);
+      margin: var(--uui-size-space-2, 6px) 0 0;
+    }
+  `
+}
+
+customElements.define('crombolo-form-picker', CromboloFormPickerElement)