@crombolo/backoffice-host 0.10.0 → 0.12.1

package/plugin/report-client.js

@@ -11,3 +11,24 @@ export async function fetchReport() {
   if (!response.ok) throw new Error(`change report responded ${response.status}`)
   return response.json()
 }
+
+const apiBase = () =>
+  `${(document.querySelector('base')?.getAttribute('href') ?? '/umbraco/').replace(/\/$/, '')}/crombolo/api`
+
+/** Where a pending import's answers download as the file the bundle can carry. */
+export const answersUrl = (bundleId) =>
+  `${apiBase()}/transfers/${encodeURIComponent(bundleId)}/resolutions`
+
+/** Answers, re-checks or imports a pending content bundle; the body says how it went. */
+export async function transferAction(bundleId, verb, body = {}) {
+  const response = await fetch(`${apiBase()}/transfers/${encodeURIComponent(bundleId)}/${verb}`, {
+    method: 'POST',
+    credentials: 'include',
+    headers: { accept: 'application/json', 'content-type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  const result = await response.json().catch(() => ({}))
+  if (response.status === 403)
+    return { ok: false, message: 'You are not allowed to import content.' }
+  return { ok: response.ok, ...result }
+}

package/plugin/seo/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Search & sharing",
   "id": "Crombolo.Seo",
-  "version": "0.10.0",
+  "version": "0.12.1",
   "allowPublicAccess": false,
   "extensions": [
     {

package/plugin/tsx-editors.js

@@ -73,11 +73,11 @@ export function withLayout(content, alias) {
 export const TSX = 'tsx'
 
 /**
- * The virtual directory a view is opened in. It mirrors `Views/` on disk so that
- * a view's `../schema/content-types.d.ts` resolves in the editor exactly as it
- * resolves for `tsc`.
+ * The virtual directory a view is opened in. It mirrors `components/` on disk so
+ * that a view's `../schema/content-types.d.ts` resolves in the editor exactly as
+ * it resolves for `tsc`.
  */
-const VIEWS = 'file:///Views'
+const COMPONENTS = 'file:///components'
 
 /**
  * `bundler` module resolution, which is what the site's tsconfig uses and what
@@ -226,7 +226,7 @@ function teachDialect(editors) {
     const model = monaco.editor.createModel(
       created.getValue(),
       'typescript',
-      monaco.Uri.parse(`${VIEWS}/view-${++opened}.tsx`),
+      monaco.Uri.parse(`${COMPONENTS}/view-${++opened}.tsx`),
     )
     editor.setModel(model)
     created.dispose()

package/plugin/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo",
   "id": "Crombolo.Core",
-  "version": "0.10.0",
+  "version": "0.12.1",
   "allowPublicAccess": false,
   "extensions": [
     {
@@ -62,6 +62,41 @@
         }
       ]
     },
+    {
+      "type": "workspaceView",
+      "alias": "Crombolo.WorkspaceView.Webhook.Storage",
+      "name": "Crombolo Webhook Storage View",
+      "element": "/crombolo-plugin/webhook-storage.js",
+      "weight": 100,
+      "meta": {
+        "label": "Where it's kept",
+        "pathname": "where-kept",
+        "icon": "icon-box"
+      },
+      "conditions": [
+        {
+          "alias": "Umb.Condition.WorkspaceAlias",
+          "match": "Umb.Workspace.Webhook"
+        }
+      ]
+    },
+    {
+      "type": "dashboard",
+      "alias": "Crombolo.Dashboard.Addresses",
+      "name": "Crombolo Page Addresses Dashboard",
+      "element": "/crombolo-plugin/addresses-dashboard.js",
+      "weight": 6,
+      "meta": {
+        "label": "Page addresses",
+        "pathname": "addresses"
+      },
+      "conditions": [
+        {
+          "alias": "Umb.Condition.SectionAlias",
+          "match": "Umb.Section.Settings"
+        }
+      ]
+    },
     {
       "type": "dashboard",
       "alias": "Crombolo.Dashboard.Changes",
@@ -79,6 +114,23 @@
         }
       ]
     },
+    {
+      "type": "dashboard",
+      "alias": "Crombolo.Dashboard.AuditLog",
+      "name": "Crombolo Audit Log Dashboard",
+      "element": "/crombolo-plugin/audit-dashboard.js",
+      "weight": 4,
+      "meta": {
+        "label": "Audit log",
+        "pathname": "audit-log"
+      },
+      "conditions": [
+        {
+          "alias": "Umb.Condition.SectionAlias",
+          "match": "Umb.Section.Settings"
+        }
+      ]
+    },
     {
       "type": "dashboard",
       "alias": "Crombolo.Dashboard.Welcome",

package/plugin/webhook-storage.js

@@ -0,0 +1,107 @@
+/**
+ * "Where it's kept", on a webhook's screen: with the site's files, or in this
+ * environment only. Moving one is the server's decision to allow; this shows
+ * what it said and asks it. docs/webhooks.md.
+ */
+import { css, html, nothing } from '@umbraco-cms/backoffice/external/lit'
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
+import { UMB_WEBHOOK_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/webhook'
+
+const base = () =>
+  `${(document.querySelector('base')?.getAttribute('href') ?? '/umbraco/').replace(/\/$/, '')}/crombolo/api/webhooks`
+
+const PLACES = {
+  files: {
+    label: "With the site's files",
+    detail:
+      'Kept in the site’s code and deployed with it. A header that holds a secret names a server setting instead, written as env:NAME.',
+  },
+  database: {
+    label: 'In this environment only',
+    detail: 'Kept on this site alone, not in its code. A secret may be typed into a header.',
+  },
+}
+
+export default class CromboloWebhookStorageElement extends UmbLitElement {
+  static properties = {
+    _state: { state: true },
+    _busy: { state: true },
+    _message: { state: true },
+  }
+
+  #unique
+
+  constructor() {
+    super()
+    this._state = undefined
+    this._busy = false
+    this._message = ''
+    this.consumeContext(UMB_WEBHOOK_WORKSPACE_CONTEXT, (context) => {
+      this.observe(context?.unique, (unique) => {
+        this.#unique = unique
+        this.#load()
+      })
+    })
+  }
+
+  async #load() {
+    if (!this.#unique) return
+    const response = await fetch(`${base()}/${encodeURIComponent(this.#unique)}/store`, {
+      credentials: 'include',
+      headers: { accept: 'application/json' },
+    })
+    this._state = response.ok ? await response.json() : { missing: true }
+  }
+
+  async #move(store) {
+    this._busy = true
+    this._message = ''
+    try {
+      const response = await fetch(`${base()}/${encodeURIComponent(this.#unique)}/store`, {
+        method: 'PUT',
+        credentials: 'include',
+        headers: { 'content-type': 'application/json', accept: 'application/json' },
+        body: JSON.stringify({ store }),
+      })
+      const body = await response.json().catch(() => ({}))
+      if (!response.ok)
+        this._message = [body.reason, ...(body.problems ?? [])].filter(Boolean).join(' ')
+      await this.#load()
+    } finally {
+      this._busy = false
+    }
+  }
+
+  render() {
+    const state = this._state
+    if (!state) return html`<uui-box><uui-loader></uui-loader></uui-box>`
+    if (state.missing)
+      return html`<uui-box><p>Save the webhook first, then choose where it is kept.</p></uui-box>`
+    const other = state.store === 'files' ? 'database' : 'files'
+    return html`<uui-box headline="Where it's kept">
+      <p><strong>${PLACES[state.store].label}.</strong> ${PLACES[state.store].detail}</p>
+      ${
+        state.available[other]
+          ? html`<uui-button
+              look="secondary"
+              ?disabled=${this._busy}
+              label=${`Keep it ${PLACES[other].label.toLowerCase()}`}
+              @click=${() => this.#move(other)}
+            >Keep it ${PLACES[other].label.toLowerCase()}</uui-button>`
+          : html`<p class="fine">${state.unavailable[other]}</p>`
+      }
+      ${this._message ? html`<p class="problem" role="alert">${this._message}</p>` : nothing}
+    </uui-box>`
+  }
+
+  static styles = css`
+    .fine {
+      color: var(--uui-color-text-alt, #555);
+    }
+    .problem {
+      color: var(--uui-color-danger, #b00);
+    }
+  `
+}
+
+customElements.define('crombolo-webhook-storage', CromboloWebhookStorageElement)

package/plugin/welcome-dashboard.js

@@ -19,7 +19,7 @@ const STEPS = [
   {
     title: 'Write a template',
     body: html`Templates are <strong>TSX</strong>, not Razor. A template is a file in
-      <code>Views/</code> that default-exports a component and receives the page as
+      <code>components/</code> that default-exports a component and receives the page as
       <code>model</code>; <code>export const layout = 'alias'</code> names its master.
       The editor under Settings → Templates writes that shape for you.`,
   },