@crombolo/backoffice-host 0.16.0 → 0.17.0

package/package.json

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

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

package/plugin/forms-client.js

@@ -30,6 +30,9 @@ 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
 
+/** The site's e-mail templates, for a Send email workflow's "E-mail design". */
+export const listEmailTemplates = async () => (await call('/email-templates')).body.items ?? []
+
 export const readForm = async (key) => (await call(`/${encodeURIComponent(key)}`)).body
 
 export const saveForm = (definition) =>

package/plugin/forms-overview.js

@@ -17,6 +17,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'
 import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification'
 import {
   deleteForm,
+  listEmailTemplates,
   listForms,
   listFormTypes,
   previewChoices,
@@ -40,6 +41,17 @@ import {
   setPageCaption,
   withLayout,
 } from './forms-layout.js'
+import {
+  addWorkflow,
+  describeProblemPath,
+  removeWorkflow,
+  setWorkflowName,
+  setWorkflowSetting,
+  setWorkflowTrigger,
+  setWorkflowType,
+  switchValue,
+  workflowSettings,
+} from './forms-workflows.js'
 
 /** What a preview depends on, so it survives a layout change that copies the field. */
 const sourceKey = (source) => `${source.kind}|${source.parent}`
@@ -60,6 +72,8 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
     _busy: { state: true },
     _choices: { state: true },
     _types: { state: true },
+    _workflowTypes: { state: true },
+    _designs: { state: true },
   }
 
   #notifications
@@ -78,6 +92,10 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
     this._choices = new Map()
     /** Field types by name, as the server has them: built in and from bundles. */
     this._types = new Map()
+    /** Workflow types by name, likewise. */
+    this._workflowTypes = new Map()
+    /** The site's e-mail templates, for a Send email workflow's design. */
+    this._designs = []
   }
 
   connectedCallback() {
@@ -87,9 +105,16 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
 
   async #load() {
     try {
-      const [forms, types] = await Promise.all([listForms(), listFormTypes()])
+      const [forms, types, designs] = await Promise.all([
+        listForms(),
+        listFormTypes(),
+        // The picker can still offer Standard without them.
+        listEmailTemplates().catch(() => []),
+      ])
       this._forms = forms
       this._types = new Map(types.fields.map((info) => [info.type, info]))
+      this._workflowTypes = new Map(types.workflows.map((info) => [info.type, info]))
+      this._designs = designs
     } catch (error) {
       this._forms = []
       this._notice = error.message
@@ -484,6 +509,137 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
         </uui-table>`
   }
 
+  /** What happens after someone sends the form: each workflow with its settings. */
+  #workflows() {
+    const form = this._editing
+    const workflows = form.workflows ?? []
+    const types = [...this._workflowTypes.values()]
+    return html`<uui-box headline="Workflows" class="workflows">
+      <p class="offered">What happens after someone sends this form.</p>
+      ${
+        workflows.length === 0
+          ? html`<p>Nothing happens yet${form.storeEntries === false ? '' : ' beyond keeping the entry'}.</p>`
+          : nothing
+      }
+      ${repeat(
+        workflows,
+        (workflow, index) => workflow.key ?? index,
+        (
+          workflow,
+          index,
+        ) => html`<section class="workflow" aria-label=${workflow.name || `Workflow ${index + 1}`}>
+          <div class="bar">
+            <uui-input
+              label="Workflow name"
+              placeholder="Name"
+              .value=${workflow.name ?? ''}
+              @change=${(event) => this.#apply(setWorkflowName, index, event.target.value)}
+            ></uui-input>
+            <select
+              aria-label="What it does"
+              @change=${(event) => this.#apply(setWorkflowType, index, event.target.value)}
+            >
+              ${types.map(
+                (info) =>
+                  html`<option value=${info.type} ?selected=${info.type === workflow.type}>${info.label}</option>`,
+              )}
+            </select>
+            <select
+              aria-label="When it runs"
+              @change=${(event) => this.#apply(setWorkflowTrigger, index, event.target.value)}
+            >
+              <option value="submit" ?selected=${workflow.on !== 'approve'}>When the form is sent</option>
+              <option value="approve" ?selected=${workflow.on === 'approve'}>When an entry is approved</option>
+            </select>
+            <uui-button compact look="secondary" color="danger" label="Remove workflow"
+              @click=${() => {
+                if (!confirm(`Remove the workflow "${workflow.name || 'untitled'}"?`)) return
+                this.#apply(removeWorkflow, index)
+              }}></uui-button>
+          </div>
+          ${this.#workflowSettings(workflow, index)}
+        </section>`,
+      )}
+      <uui-button
+        look="secondary"
+        label="Add a workflow"
+        @click=${() => {
+          const first = this._workflowTypes.get('sendEmail') ?? types[0]
+          if (first) this.#apply(addWorkflow, first.type, first.label)
+        }}
+      ></uui-button>
+    </uui-box>`
+  }
+
+  #workflowSettings(workflow, index) {
+    const settings = workflowSettings(workflow.type, this._workflowTypes.get(workflow.type))
+    if (settings.length === 0) return nothing
+    const write = (key, value) => this.#apply(setWorkflowSetting, index, key, value)
+    return html`<div class="workflow-settings">
+      ${settings.map((setting) => {
+        const value = workflow.settings?.[setting.key]
+        const label = `${setting.label}${setting.required ? ' *' : ''}`
+        const hint = setting.description
+          ? html`<small class="offered">${setting.description}</small>`
+          : nothing
+        if (setting.kind === 'boolean')
+          return html`<div class="switch">
+            <uui-toggle
+              label=${label}
+              .checked=${value === undefined ? setting.defaultValue === true : value === true}
+              @change=${(event) => write(setting.key, switchValue(setting, event.target.checked))}
+            ></uui-toggle>
+            ${hint}
+          </div>`
+        if (setting.kind === 'design') {
+          const known = this._designs.some((design) => design.alias === value)
+          return html`<label>
+            <span>${label}</span>
+            <select
+              aria-label=${setting.label}
+              @change=${(event) => write(setting.key, event.target.value || undefined)}
+            >
+              <option value="" ?selected=${!value}>Standard</option>
+              ${this._designs.map(
+                (design) =>
+                  html`<option value=${design.alias} ?selected=${design.alias === value}>${design.name}</option>`,
+              )}
+              ${
+                value && !known
+                  ? html`<option value=${value} selected>${value} (not found)</option>`
+                  : nothing
+              }
+            </select>
+            ${hint}
+          </label>`
+        }
+        return html`<label>
+          <span>${label}</span>
+          <uui-input
+            label=${setting.label}
+            type=${setting.kind === 'number' ? 'number' : 'text'}
+            .value=${value === undefined ? '' : Array.isArray(value) ? value.join(', ') : String(value)}
+            @change=${(event) => {
+              const raw = event.target.value.trim()
+              if (raw === '') return write(setting.key, undefined)
+              if (setting.kind === 'number') return write(setting.key, Number(raw))
+              if (setting.kind === 'list')
+                return write(
+                  setting.key,
+                  raw
+                    .split(',')
+                    .map((item) => item.trim())
+                    .filter(Boolean),
+                )
+              write(setting.key, raw)
+            }}
+          ></uui-input>
+          ${hint}
+        </label>`
+      })}
+    </div>`
+  }
+
   #touch() {
     // Lit tracks the reference, not what is inside it.
     this._editing = { ...this._editing }
@@ -636,12 +792,22 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
           <uui-button look="secondary" label="Add a page" @click=${() => this.#apply(addPage)}></uui-button>
         </div>
       </uui-box>
+      ${this.#workflows()}
       ${
         this._problems.length > 0
           ? html`<div class="problems" role="alert">
               <p>This form was not saved:</p>
               <ul>
-                ${this._problems.map((problem) => html`<li>${problem.path ? html`<code>${problem.path}</code> ` : nothing}${problem.message}</li>`)}
+                ${this._problems.map((problem) => {
+                  const where = describeProblemPath(form, problem.path, this._workflowTypes)
+                  return html`<li>${
+                    !where
+                      ? nothing
+                      : where === problem.path
+                        ? html`<code>${where}</code> `
+                        : html`<strong>${where}</strong>: `
+                  }${problem.message}</li>`
+                })}
               </ul>
             </div>`
           : nothing
@@ -712,6 +878,25 @@ export default class CromboloFormsOverviewElement extends UmbLitElement {
       color: var(--uui-color-text-alt, #555);
       font-size: 0.9em;
     }
+    .workflows {
+      margin-top: var(--uui-size-layout-1, 24px);
+    }
+    .workflow {
+      border: 1px solid var(--uui-color-border, #ddd);
+      border-radius: var(--uui-border-radius, 3px);
+      padding: var(--uui-size-space-4, 12px);
+      margin: var(--uui-size-space-4, 12px) 0;
+    }
+    .workflow-settings {
+      display: grid;
+      gap: var(--uui-size-space-3, 9px);
+      max-width: 60ch;
+    }
+    .workflow-settings label,
+    .workflow-settings .switch {
+      display: grid;
+      gap: 2px;
+    }
     :host {
       display: block;
       height: 100%;

package/plugin/forms-workflows.js

@@ -0,0 +1,147 @@
+/**
+ * The forms designer's workflow operations: adding, retyping and removing a
+ * form's workflows, and what each built-in type asks for. Pure, so each is
+ * tested on its own (tests/forms-designer-workflows.test.ts).
+ *
+ * Every operation returns a new form. A setting the designer draws no field for
+ * (`cc`, `body`, `map` and the rest) is kept as the file has it.
+ */
+
+/**
+ * The settings the designer offers for the built-in types, in the shape a
+ * bundle's type declares them. `design` is the e-mail design picker.
+ */
+export const BUILT_IN_WORKFLOW_SETTINGS = {
+  sendEmail: [
+    {
+      key: 'to',
+      label: 'Send to',
+      kind: 'text',
+      required: true,
+      description:
+        'One or more addresses, separated by commas. An alias in braces, such as {email}, puts in that answer.',
+    },
+    { key: 'subject', label: 'Subject', kind: 'text', required: true },
+    { key: 'reply-to', label: 'Reply to', kind: 'text' },
+    {
+      key: 'template',
+      label: 'E-mail design',
+      kind: 'design',
+      description: 'Standard lists each question with its answer.',
+    },
+    { key: 'attach-uploads', label: 'Attach uploaded files', kind: 'boolean' },
+    {
+      key: 'include-sensitive',
+      label: 'Include sensitive answers',
+      kind: 'boolean',
+      description: 'Left off, answers to fields marked sensitive are not sent.',
+    },
+  ],
+  saveAsContent: [
+    { key: 'content-type', label: 'Document type alias', kind: 'text', required: true },
+    {
+      key: 'parent',
+      label: 'Create under',
+      kind: 'text',
+      required: true,
+      description: "The parent page's key, or root for the top of the tree.",
+    },
+    { key: 'name-field', label: 'Name it from the field', kind: 'text' },
+    { key: 'publish', label: 'Publish straight away', kind: 'boolean' },
+  ],
+  sendToUrl: [
+    { key: 'url', label: 'Address', kind: 'text', required: true },
+    {
+      key: 'include-standard-fields',
+      label: "Include the form's name and when it was sent",
+      kind: 'boolean',
+      defaultValue: true,
+    },
+  ],
+}
+
+/**
+ * What a switch writes: nothing when it matches the default, so a flag that is
+ * off by default is absent rather than `false`, and one on by default the reverse.
+ */
+export const switchValue = (setting, checked) =>
+  checked === (setting.defaultValue === true) ? undefined : checked
+
+/** The fields to draw for a workflow type: the built-in table, or what a bundle declares. */
+export const workflowSettings = (type, info) =>
+  BUILT_IN_WORKFLOW_SETTINGS[type] ?? info?.settings ?? []
+
+/** A name no other workflow on the form has, from the type's label. */
+export function uniqueWorkflowName(form, label) {
+  const taken = new Set((form.workflows ?? []).map((workflow) => workflow.name.toLowerCase()))
+  if (!taken.has(label.toLowerCase())) return label
+  for (let n = 2; ; n++) if (!taken.has(`${label} ${n}`.toLowerCase())) return `${label} ${n}`
+}
+
+export function addWorkflow(form, type, label) {
+  const workflow = {
+    key: crypto.randomUUID(),
+    type,
+    name: uniqueWorkflowName(form, label),
+    on: 'submit',
+    settings: {},
+  }
+  return { ...form, workflows: [...(form.workflows ?? []), workflow] }
+}
+
+export function removeWorkflow(form, index) {
+  return { ...form, workflows: form.workflows.filter((_, at) => at !== index) }
+}
+
+const replace = (form, index, change) => ({
+  ...form,
+  workflows: form.workflows.map((workflow, at) =>
+    at === index ? { ...workflow, ...change(workflow) } : workflow,
+  ),
+})
+
+/** A new type takes none of the old one's settings: they would be refused as unknown. */
+export const setWorkflowType = (form, index, type) =>
+  replace(form, index, () => ({ type, settings: {} }))
+
+export const setWorkflowName = (form, index, name) => replace(form, index, () => ({ name }))
+
+export const setWorkflowTrigger = (form, index, on) =>
+  replace(form, index, () => ({ on: on === 'approve' ? 'approve' : 'submit' }))
+
+/** An empty text or `undefined` removes the setting, so the file stays as short as it can. */
+export const setWorkflowSetting = (form, index, key, value) =>
+  replace(form, index, (workflow) => {
+    const settings = { ...workflow.settings }
+    if (value === undefined || value === '') delete settings[key]
+    else settings[key] = value
+    return { settings }
+  })
+
+/** Settings only the file sets, named as a person would say them when one is refused. */
+const FILE_ONLY_LABELS = {
+  body: 'Message text',
+  cc: 'Copy to',
+  bcc: 'Blind copy to',
+  from: 'Send from',
+}
+
+/**
+ * Where a problem the server found is, in words: "Tell the team: E-mail design"
+ * for `workflow[0].settings.template`. A path elsewhere in the form is left as
+ * it is.
+ */
+export function describeProblemPath(form, path, types = new Map()) {
+  const found = /^workflow\[(\d+)\](?:\.settings(?:\.([\w-]+))?|\.(name|on))?/.exec(path ?? '')
+  if (!found) return path
+  const index = Number(found[1])
+  const workflow = form.workflows?.[index]
+  const name = workflow?.name || `Workflow ${index + 1}`
+  if (found[3] === 'name') return `${name}: Name`
+  if (found[3] === 'on') return `${name}: When it runs`
+  if (!found[2]) return name
+  const setting = workflowSettings(workflow?.type, types.get(workflow?.type)).find(
+    (candidate) => candidate.key === found[2],
+  )
+  return `${name}: ${setting?.label ?? FILE_ONLY_LABELS[found[2]] ?? found[2]}`
+}

package/plugin/localizations/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Localizations",
   "id": "Crombolo.Localizations",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "allowPublicAccess": true,
   "extensions": [
     {

package/plugin/notifications-dialog.js

@@ -0,0 +1,62 @@
+/**
+ * Umbraco's notifications dialog, on a site that cannot send e-mail (story
+ * 045): a banner saying so, and every toggle disabled, rather than choices
+ * saved for e-mails that never come.
+ *
+ * The dialog is not an extension point and its class is not exported, so it is
+ * patched rather than replaced, as the log viewer's menu is: once the element
+ * is defined, each update disables its toggles and Save and puts the banner
+ * above them. `tests/notifications-dialog.test.ts` pins the vendored dialog
+ * this relies on, so a re-vendor that moves it fails the suite rather than the
+ * editor. The server refuses a new subscription regardless.
+ */
+const TAG = 'umb-document-notifications-modal'
+export const BANNER_CLASS = 'crombolo-notifications-unavailable'
+export const UNAVAILABLE =
+  "This site can't send e-mail yet, so it can't tell you when this page changes. Ask an administrator to set up e-mail, then come back to choose what to hear about."
+
+/** Whether this site can send notification e-mails; asked once per page load. */
+let answer
+export function canSendNotifications(fetcher = fetch) {
+  answer ??= (async () => {
+    const href = document.querySelector('base')?.getAttribute('href') ?? '/umbraco/'
+    const response = await fetcher(`${href.replace(/\/$/, '')}/crombolo/api/email`, {
+      credentials: 'include',
+      headers: { accept: 'application/json' },
+    })
+    // Unknown is not unavailable: Umbraco's dialog stays as it is.
+    if (!response.ok) return true
+    return (await response.json()).canSendNotifications !== false
+  })().catch(() => true)
+  return answer
+}
+
+/** Disables the dialog's choices and says why. Safe to call on every update. */
+export function markUnavailable(root, message = UNAVAILABLE) {
+  for (const toggle of root.querySelectorAll('uui-toggle')) toggle.disabled = true
+  for (const button of root.querySelectorAll('uui-button[color="positive"]')) button.disabled = true
+  const box = root.querySelector('uui-box')
+  if (!box || box.querySelector(`.${BANNER_CLASS}`)) return
+  const banner = box.ownerDocument.createElement('p')
+  banner.className = BANNER_CLASS
+  banner.setAttribute('role', 'status')
+  banner.setAttribute(
+    'style',
+    'margin: 0 0 var(--uui-size-space-4); color: var(--uui-color-text-alt);',
+  )
+  banner.textContent = message
+  box.prepend(banner)
+}
+
+export const onInit = async () => {
+  // The dialog is loaded the first time someone opens it.
+  const element = await customElements.whenDefined(TAG)
+  const prototype = element.prototype
+  const original = prototype.updated
+  prototype.updated = function patched(changed) {
+    original?.call(this, changed)
+    void canSendNotifications().then((ok) => {
+      if (!ok && this.renderRoot) markUnavailable(this.renderRoot)
+    })
+  }
+}

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

package/plugin/sign-in/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo Sign-in Dialog",
   "id": "Crombolo.SignInDialog",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "allowPublicAccess": true,
   "extensions": [
     {

package/plugin/umbraco-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../backoffice-dist/dist/umbraco-package-schema.json",
   "name": "Crombolo",
   "id": "Crombolo.Core",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "allowPublicAccess": false,
   "extensions": [
     {
@@ -418,6 +418,12 @@
       "name": "Crombolo Log Viewer Search Menu",
       "js": "/crombolo-plugin/branding/log-viewer-menu.js"
     },
+    {
+      "type": "backofficeEntryPoint",
+      "alias": "Crombolo.EntryPoint.NotificationsDialog",
+      "name": "Crombolo Notifications Dialog Without E-mail",
+      "js": "/crombolo-plugin/notifications-dialog.js"
+    },
     {
       "type": "globalContext",
       "alias": "Crombolo.GlobalContext.Icons",