Some quick fixes after a user had some confusion over how the email templating works, just adding some detail that should help explain.

5 years ago · 3f56a316c5
5 changed files with 50 additions and 32 deletions
--- a/packages/builder/src/pages/builder/portal/manage/email/[template].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/email/[template].svelte
@ -16,6 +16,7 @@
  import Editor from "components/integration/QueryEditor.svelte"
  import TemplateBindings from "./_components/TemplateBindings.svelte"

+  // this is the email purpose
  export let template

  let htmlEditor
@ -24,9 +25,11 @@
  $: selectedTemplate = $email.templates?.find(
    ({ purpose }) => purpose === template
  )
+  $: name = $email.definitions?.info[template]?.name
+  $: description = $email.definitions?.info[template]?.description
  $: baseTemplate = $email.templates?.find(({ purpose }) => purpose === "base")
  $: templateBindings =
-    $email.definitions?.bindings?.[selectedTemplate.purpose] || []
+    $email.definitions?.bindings?.[selectedTemplate?.purpose] || []
  $: previewContent = makePreviewContent(baseTemplate, selectedTemplate)

  async function saveTemplate() {
@ -81,13 +84,15 @@
  </div>
  <header>
    <Heading>
-      Email Template: {template}
+      Email Template: {name}
    </Heading>
    <Button cta on:click={saveTemplate}>Save</Button>
  </header>
+  <Detail>Description</Detail>
+  <Body>{description}</Body>
  <Body
-    >Change the email template here. Add dynamic content by using the bindings
-    menu on the right.</Body
+  >Change the email template here. Add dynamic content by using the bindings
+  menu on the right.</Body
  >
 </Layout>
 <Tabs selected="Edit" on:select={fixMountBug}>
--- a/packages/builder/src/pages/builder/portal/manage/email/_components/TemplateLink.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/email/_components/TemplateLink.svelte
@ -1,13 +0,0 @@
-<script>
-  import { goto } from "@roxi/routify"
-
-  export let value
-</script>
-
-<span on:click={() => $goto(`./${value}`)}>{value}</span>
-
-<style>
-  span {
-    text-transform: capitalize;
-  }
-</style>
--- a/packages/builder/src/pages/builder/portal/manage/email/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/email/index.svelte
@ -14,7 +14,6 @@
    Checkbox,
  } from "@budibase/bbui"
  import { email } from "stores/portal"
-  import TemplateLink from "./_components/TemplateLink.svelte"
  import api from "builderStore/api"
  import { cloneDeep } from "lodash/fp"

@ -23,23 +22,30 @@
  }

  const templateSchema = {
-    purpose: {
-      displayName: "Email",
+    name: {
+      displayName: "Name",
      editable: false,
    },
+    category: {
+      displayName: "Category",
+      editable: false,
+    }
  }

-  const customRenderers = [
-    {
-      column: "purpose",
-      component: TemplateLink,
-    },
-  ]
+  $: emailInfo = getEmailInfo($email.definitions)

  let smtpConfig
  let loading
  let requireAuth = false

+  function getEmailInfo(definitions) {
+    if (!definitions) {
+      return []
+    }
+    const entries = Object.entries(definitions.info)
+    return entries.map(([key, value]) => ({ purpose: key, ...value }))
+  }
+
  async function saveSmtp() {
    // clone it so we can remove stuff if required
    const smtp = cloneDeep(smtpConfig)
@ -159,8 +165,7 @@
      </Body>
    </Layout>
    <Table
-      {customRenderers}
-      data={$email.templates}
+      data={emailInfo}
      schema={templateSchema}
      {loading}
      on:click={({ detail }) => $goto(`./${detail.purpose}`)}
--- a/packages/worker/src/api/controllers/admin/templates.js
+++ b/packages/worker/src/api/controllers/admin/templates.js
@ -28,12 +28,18 @@ exports.save = async ctx => {

 exports.definitions = async ctx => {
  const bindings = {}
-
+  const info = {}
  for (let template of TemplateMetadata.email) {
    bindings[template.purpose] = template.bindings
+    info[template.purpose] = {
+      name: template.name,
+      description: template.description,
+      category: template.category,
+    }
  }

  ctx.body = {
+    info,
    bindings: {
      ...bindings,
      common: Object.values(TemplateBindings),
--- a/packages/worker/src/constants/index.js
+++ b/packages/worker/src/constants/index.js
@ -96,7 +96,9 @@ const TemplateBindings = {
 const TemplateMetadata = {
  [TemplateTypes.EMAIL]: [
    {
-      name: "Base Format",
+      name: "Base format",
+      description: "This is the base template, all others are based on it. The {{ body }} will be replaced with another email template.",
+      category: "miscellaneous",
      purpose: EmailTemplatePurpose.BASE,
      bindings: [
        {
@ -110,7 +112,9 @@ const TemplateMetadata = {
      ],
    },
    {
-      name: "Password Recovery",
+      name: "Password recovery",
+      description: "When a user requests a password reset, this template will be used.",
+      category: "user management",
      purpose: EmailTemplatePurpose.PASSWORD_RECOVERY,
      bindings: [
        {
@ -126,7 +130,16 @@ const TemplateMetadata = {
      ],
    },
    {
-      name: "New User Invitation",
+      name: "User welcome",
+      description: "When a new user is added to the system, the welcome email will use this template.",
+      category: "user management",
+      purpose: EmailTemplatePurpose.WELCOME,
+      bindings: [],
+    },
+    {
+      name: "User invitation",
+      description: "When using the email invitation system, this template will be used.",
+      category: "user management",
      purpose: EmailTemplatePurpose.INVITATION,
      bindings: [
        {
@ -143,6 +156,8 @@ const TemplateMetadata = {
    },
    {
      name: "Custom",
+      description: "A custom format, this is currently used for SMTP email actions in automations.",
+      category: "automations",
      purpose: EmailTemplatePurpose.CUSTOM,
      bindings: [
        {