Improve workflow block tagline rendering and support pretty printing enum bindings

packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { workflowStore, backendUiStore } from "builderStore"
+  import { workflowStore } from "builderStore"
   import WorkflowBlockTagline from "./WorkflowBlockTagline.svelte"
 
   export let onSelect
@@ -9,29 +9,12 @@
   $: selected = $workflowStore.selectedBlock?.id === block.id
   $: steps = $workflowStore.selectedWorkflow?.workflow?.definition?.steps ?? []
   $: blockIdx = steps.findIndex(step => step.id === block.id)
-
-  function selectBlock() {
-    onSelect(block)
-  }
-
-  function enrichInputs(inputs) {
-    let enrichedInputs = { ...inputs, enriched: {} }
-    const modelId = inputs.modelId || inputs.record?.modelId
-    if (modelId) {
-      enrichedInputs.enriched.model = $backendUiStore.models.find(
-        model => model._id === modelId
-      )
-    }
-    return enrichedInputs
-  }
-
-  $: inputs = enrichInputs(block.inputs)
 </script>
 
 <div
   class={`block ${block.type} hoverable`}
   class:selected
-  on:click={selectBlock}>
+  on:click={() => onSelect(block)}>
   <header>
     {#if block.type === 'TRIGGER'}
       <i class="ri-lightbulb-fill" />
@@ -49,13 +32,13 @@
   </header>
   <hr />
   <p>
-    <WorkflowBlockTagline tagline={block.tagline} {inputs} />
+    <WorkflowBlockTagline {block} />
   </p>
 </div>
 
 <style>
   .block {
-    width: 320px;
+    width: 360px;
     padding: 20px;
     border-radius: var(--border-radius-m);
     transition: 0.3s all ease;

packages/builder/src/components/workflow/WorkflowBuilder/flowchart/WorkflowBlockTagline.svelte

@@ -1,19 +1,61 @@
 <script>
   import mustache from "mustache"
+  import { get } from "lodash/fp"
+  import { backendUiStore } from "builderStore"
 
-  export let tagline
+  export let block
-  export let inputs
 
-  // Add bolt tags around inputs
+  $: inputs = enrichInputs(block.inputs)
-  $: boldTagline = tagline.replace(/{{/g, "<b>{{").replace(/}}/, "}}</b>")
+  $: tagline = formatTagline(block.tagline, block.schema, inputs)
+  $: html = (tagline || "")
+    .replace(/{{\s*/g, "<span>")
+    .replace(/\s*}}/g, "</span>")
 
-  // Fill in inputs with mustache
+  function enrichInputs(inputs) {
-  $: parsedTagline = mustache.render(boldTagline, { inputs })
+    let enrichedInputs = { ...inputs, enriched: {} }
+    const modelId = inputs.modelId || inputs.record?.modelId
+    if (modelId) {
+      enrichedInputs.enriched.model = $backendUiStore.models.find(
+        model => model._id === modelId
+      )
+    }
+    return enrichedInputs
+  }
 
-  // Wrap bound fields inside spans to highlight them
+  function formatTagline(tagline, schema, inputs) {
-  $: html = (parsedTagline || "")
+    // Add bold tags around inputs
-    .replace(/{{\s/g, "<span>")
+    let formattedTagline = tagline
-    .replace(/\s}}/g, "</span>")
+      .replace(/{{/g, "<b>{{")
+      .replace(/}}/, "}}</b>")
+
+    // Extract schema paths for any input bindings
+    const inputPaths = formattedTagline
+      .match(/{{\s*\S+\s*}}/g)
+      .map(x => x.replace(/[{}]/g, "").trim())
+    const schemaPaths = inputPaths.map(x => x.replace(/\./g, ".properties."))
+
+    // Replace any enum bindings with their pretty equivalents
+    schemaPaths.forEach((path, idx) => {
+      const prettyValues = get(`${path}.pretty`, schema)
+      if (prettyValues) {
+        const enumValues = get(`${path}.enum`, schema)
+        const inputPath = inputPaths[idx]
+        const value = get(inputPath, { inputs })
+        const valueIdx = enumValues.indexOf(value)
+        const prettyValue = prettyValues[valueIdx]
+        if (prettyValue == null) {
+          return
+        }
+        formattedTagline = formattedTagline.replace(
+          new RegExp(`{{\s*${inputPath}\s*}}`),
+          prettyValue
+        )
+      }
+    })
+
+    // Fill in bindings with mustache
+    return mustache.render(formattedTagline, { inputs })
+  }
 </script>
 
 <div>
@@ -21,10 +63,15 @@
 </div>
 
 <style>
+  div {
+    line-height: 1.25;
+  }
   div :global(span) {
     font-size: 0.9em;
     background-color: var(--purple-light);
     padding: var(--spacing-xs);
     border-radius: var(--border-radius-m);
+    display: inline-block;
+    margin: 1px;
   }
 </style>