@crombolo/backoffice-host 0.11.0 → 0.13.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.11.0",
+  "version": "0.13.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.11.0",
+  "version": "0.13.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",
@@ -310,6 +345,112 @@
       "name": "Crombolo Icons Context",
       "overwrites": ["Umb.GlobalContext.Icons"],
       "api": "/crombolo-plugin/branding/icon-registry.js"
+    },
+    {
+      "type": "section",
+      "alias": "Crombolo.Section.Workflow",
+      "name": "Crombolo Workflow Section",
+      "weight": 40,
+      "meta": {
+        "label": "Workflow",
+        "pathname": "workflow"
+      }
+    },
+    {
+      "type": "sectionView",
+      "alias": "Crombolo.SectionView.Workflow.Waiting",
+      "name": "Crombolo Workflow Waiting",
+      "element": "/crombolo-plugin/workflow-requests.js",
+      "elementName": "crombolo-workflow-waiting",
+      "weight": 400,
+      "meta": {
+        "label": "Waiting for me",
+        "pathname": "waiting",
+        "icon": "icon-inbox"
+      },
+      "conditions": [
+        {
+          "alias": "Umb.Condition.SectionAlias",
+          "match": "Crombolo.Section.Workflow"
+        }
+      ]
+    },
+    {
+      "type": "sectionView",
+      "alias": "Crombolo.SectionView.Workflow.InFlight",
+      "name": "Crombolo Workflow In Flight",
+      "element": "/crombolo-plugin/workflow-requests.js",
+      "elementName": "crombolo-workflow-in-flight",
+      "weight": 300,
+      "meta": {
+        "label": "In flight",
+        "pathname": "in-flight",
+        "icon": "icon-time"
+      },
+      "conditions": [
+        {
+          "alias": "Umb.Condition.SectionAlias",
+          "match": "Crombolo.Section.Workflow"
+        }
+      ]
+    },
+    {
+      "type": "sectionView",
+      "alias": "Crombolo.SectionView.Workflow.History",
+      "name": "Crombolo Workflow History",
+      "element": "/crombolo-plugin/workflow-requests.js",
+      "elementName": "crombolo-workflow-history",
+      "weight": 200,
+      "meta": {
+        "label": "Decided",
+        "pathname": "history",
+        "icon": "icon-check"
+      },
+      "conditions": [
+        {
+          "alias": "Umb.Condition.SectionAlias",
+          "match": "Crombolo.Section.Workflow"
+        }
+      ]
+    },
+    {
+      "type": "sectionView",
+      "alias": "Crombolo.SectionView.Workflow.Designer",
+      "name": "Crombolo Workflow Designer",
+      "element": "/crombolo-plugin/workflow-designer.js",
+      "weight": 100,
+      "meta": {
+        "label": "Workflows",
+        "pathname": "workflows",
+        "icon": "icon-mindmap"
+      },
+      "conditions": [
+        {
+          "alias": "Umb.Condition.SectionAlias",
+          "match": "Crombolo.Section.Workflow"
+        },
+        {
+          "alias": "Umb.Condition.CurrentUser.IsAdmin"
+        }
+      ]
+    },
+    {
+      "type": "workspaceView",
+      "alias": "Crombolo.WorkspaceView.Document.Workflow",
+      "name": "Crombolo Document Workflow",
+      "element": "/crombolo-plugin/workflow-tab.js",
+      "weight": 50,
+      "meta": {
+        "label": "Workflow",
+        "pathname": "workflow",
+        "icon": "icon-mindmap"
+      },
+      "conditions": [
+        {
+          "alias": "Umb.Condition.WorkspaceAlias",
+          "match": "Umb.Workspace.Document"
+        }
+      ]
     }
   ]
 }

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.`,
   },

package/plugin/workflow-client.js

@@ -0,0 +1,40 @@
+/**
+ * The Workflow screens' calls to <backoffice>/crombolo/api/approvals/ (story 028).
+ * The cookie carries the session. Every answer resolves; a refusal carries the
+ * server's own words in `message`.
+ */
+const apiBase = () =>
+  `${(document.querySelector('base')?.getAttribute('href') ?? '/umbraco/').replace(/\/$/, '')}/crombolo/api/approvals`
+
+async function call(path, init = {}) {
+  const response = await fetch(`${apiBase()}/${path}`, {
+    credentials: 'include',
+    ...init,
+    headers: { accept: 'application/json', 'content-type': 'application/json', ...init.headers },
+  })
+  const body = await response.json().catch(() => ({}))
+  if (response.status === 403 && !body.message)
+    return { ok: false, message: 'You are not allowed to do that.' }
+  return { ok: response.ok, status: response.status, ...body }
+}
+
+const post = (path, body = {}) => call(path, { method: 'POST', body: JSON.stringify(body) })
+
+export const pageApproval = (key) => call(`page/${encodeURIComponent(key)}`)
+export const sendForApproval = (key, action, comment) =>
+  post(`page/${encodeURIComponent(key)}/send`, { action, comment })
+export const decide = (requestKey, verb, body) =>
+  post(`request/${encodeURIComponent(requestKey)}/${verb}`, body)
+export const waitingForMe = () => call('waiting')
+export const inFlight = () => call('in-flight')
+export const finished = (skip = 0, take = 25) => call(`history?skip=${skip}&take=${take}`)
+export const listWorkflows = () => call('workflows')
+export const previewWorkflow = (alias, workflow) =>
+  post(`workflows/${encodeURIComponent(alias)}/preview`, { workflow })
+export const saveWorkflow = (alias, workflow) =>
+  call(`workflows/${encodeURIComponent(alias)}`, {
+    method: 'PUT',
+    body: JSON.stringify({ workflow }),
+  })
+export const deleteWorkflow = (alias) =>
+  call(`workflows/${encodeURIComponent(alias)}`, { method: 'DELETE' })