@crombolo/backoffice-host 0.0.0-stage → 0.10.0

package/plugin/bundles-installed.js

@@ -0,0 +1,176 @@
+/**
+ * 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/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 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.
+ */
+import { css, html, nothing, repeat } from '@umbraco-cms/backoffice/external/lit'
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
+import { carriesTags } from './bundles-carries.js'
+import { listInstalled, uninstallBundle } from './bundles-client.js'
+
+/** Where each part of a bundle stands on this site, in the words of someone running it. */
+function status(item) {
+  const parts = []
+  if (item.carries?.content)
+    parts.push(
+      item.contentApplied
+        ? html`<span>Content added (${item.contentApplied})</span>`
+        : html`<span>Content not added yet</span>`,
+    )
+  if (item.carries?.server)
+    parts.push(
+      item.wired
+        ? html`<span>Server features on</span>`
+        : html`<span>Server features off until the site's configuration includes it</span>`,
+    )
+  return parts.length > 0 ? parts : html`<span>Ready</span>`
+}
+
+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, 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>
+          `
+      }
+    `
+  }
+
+  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;
+    }
+    .carries {
+      display: flex;
+      gap: var(--uui-size-space-2, 6px);
+    }
+    .status span {
+      display: block;
+    }
+    .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,236 @@
+/**
+ * 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 whose manifest is a valid bundle.
+ * Installing runs `bun add` on the server, then adds the content the bundle
+ * carries unless the site or the person installing declines it.
+ */
+import { css, html, nothing, repeat } from '@umbraco-cms/backoffice/external/lit'
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
+import { carriesTags } from './bundles-carries.js'
+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 },
+    _appliesContent: { state: true },
+    _declined: { state: true },
+  }
+
+  constructor() {
+    super()
+    this._items = []
+    this._loading = true
+    this._error = ''
+    this._busy = ''
+    this._notice = ''
+    this._keyword = 'crombolo-bundle'
+    this._url = ''
+    this._query = ''
+    this._appliesContent = true
+    this._declined = new Set()
+  }
+
+  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 ?? ''
+      this._appliesContent = result.appliesContent !== false
+    } 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, !this._declined.has(item.name))
+      // 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.
+      const installed = outcome.dependency
+        ? `${outcome.message} — "${outcome.dependency.name}": "${outcome.dependency.range}"`
+        : (outcome.message ?? '')
+      this._notice = outcome.content ? `${installed} ${outcome.content.message}` : installed
+      if (outcome.ok) await this.#load()
+    } catch (error) {
+      this._notice = error instanceof Error ? error.message : String(error)
+    } finally {
+      this._busy = ''
+    }
+  }
+
+  #toggleContent(item, event) {
+    const declined = new Set(this._declined)
+    if (event.target.checked) declined.delete(item.name)
+    else declined.add(item.name)
+    this._declined = declined
+  }
+
+  #contentChoice(item) {
+    if (!item.carries?.content || item.installedVersion) return nothing
+    if (!this._appliesContent)
+      return html`<p class="meta">Its content is added separately on this site.</p>`
+    return html`
+      <uui-toggle
+        label="Add its content when installing"
+        .checked=${!this._declined.has(item.name)}
+        @change=${(event) => this.#toggleContent(item, event)}></uui-toggle>
+    `
+  }
+
+  #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="carries">${carriesTags(item.carries)}</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>
+                    ${this.#contentChoice(item)}
+                    ${
+                      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;
+    }
+    .carries {
+      display: flex;
+      gap: var(--uui-size-space-2, 6px);
+    }
+    uui-toggle {
+      display: block;
+      margin-bottom: var(--uui-size-space-4, 12px);
+    }
+  `
+}
+
+customElements.define('crombolo-bundles-marketplace', CromboloBundlesMarketplaceElement)

package/plugin/changes-dashboard.js

@@ -0,0 +1,169 @@
+/**
+ * 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.
+ *
+ * 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.
+ */
+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, bundles = [] } = 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))
+        }
+        ${bundles.map((bundle) => this.#renderBundle(bundle))}
+      </uui-box>
+    `
+  }
+
+  #renderBundle(bundle) {
+    const steps = [
+      ...bundle.pending.map((step) => ({ ...step, done: false })),
+      ...bundle.applied.map((step) => ({ ...step, done: true })).reverse(),
+    ]
+    return html`
+      <h4>${bundle.name} <small>data storage</small></h4>
+      ${
+        bundle.pending.length > 0
+          ? html`<p><uui-tag color="warning">${bundle.pending.length} change(s) waiting for the next upgrade</uui-tag></p>`
+          : nothing
+      }
+      <uui-table>
+        <uui-table-head>
+          <uui-table-head-cell>Change</uui-table-head-cell>
+          <uui-table-head-cell>Release</uui-table-head-cell>
+          <uui-table-head-cell>State</uui-table-head-cell>
+        </uui-table-head>
+        ${steps.map(
+          (step) => html`<uui-table-row>
+            <uui-table-cell>${step.name}${step.kind === 'contract' ? html`<small>removes data</small>` : nothing}</uui-table-cell>
+            <uui-table-cell>${step.release ?? ''}</uui-table-cell>
+            <uui-table-cell>${
+              step.done
+                ? html`<uui-tag color="positive">done ${step.appliedAt?.slice(0, 10) ?? ''}</uui-tag>`
+                : html`<uui-tag color="warning">waiting</uui-tag>`
+            }</uui-table-cell>
+          </uui-table-row>`,
+        )}
+      </uui-table>
+    `
+  }
+
+  #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)