From 15cc7a2e6c2eac712005f8d31efdce8de67172fe Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 17 Sep 2020 17:50:54 +0100
Subject: [PATCH] Add component for rendering workflow mustache taglines

---
 .../userInterface/MustacheStringViewer.svelte | 12 --------
 .../WorkflowBuilder/flowchart/FlowItem.svelte |  9 +++---
 .../flowchart/WorkflowBlockTagline.svelte     | 30 +++++++++++++++++++
 3 files changed, 34 insertions(+), 17 deletions(-)
 delete mode 100644 packages/builder/src/components/userInterface/MustacheStringViewer.svelte
 create mode 100644 packages/builder/src/components/workflow/WorkflowBuilder/flowchart/WorkflowBlockTagline.svelte

diff --git a/packages/builder/src/components/userInterface/MustacheStringViewer.svelte b/packages/builder/src/components/userInterface/MustacheStringViewer.svelte
deleted file mode 100644
index 78f65dda0b..0000000000
--- a/packages/builder/src/components/userInterface/MustacheStringViewer.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-  export let value
-  $:
-</script>
-
-<div>
-
-</div>
-
-<style>
-
-</style>
diff --git a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte b/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
index 01b0792aea..a67b15cd8a 100644
--- a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
+++ b/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowItem.svelte
@@ -1,6 +1,6 @@
 <script>
-  import mustache from "mustache"
   import { workflowStore, backendUiStore } from "builderStore"
+  import WorkflowBlockTagline from "./WorkflowBlockTagline.svelte"
 
   export let onSelect
   export let block
@@ -26,7 +26,6 @@
   }
 
   $: inputs = enrichInputs(block.inputs)
-  $: tagline = block.tagline.replace(/{{/g, "<b>{{").replace(/}}/, "}}</b>")
 </script>
 
 <div
@@ -41,7 +40,7 @@
       <i class="ri-flashlight-fill" />
       <span>Do this...</span>
     {:else if block.type === 'LOGIC'}
-      <i class="ri-pause-fill" />
+      <i class="ri-git-branch-line" />
       <span>Only continue if...</span>
     {/if}
     <div class="label">
@@ -50,7 +49,7 @@
   </header>
   <hr />
   <p>
-    {@html mustache.render(tagline, { inputs })}
+    <WorkflowBlockTagline tagline={block.tagline} {inputs} />
   </p>
 </div>
 
@@ -87,7 +86,7 @@
     padding: var(--spacing-s);
     color: var(--grey-8);
     border-radius: var(--border-radius-m);
-    background-color: var(--grey-2);
+    background-color: rgba(0, 0, 0, 0.05);
   }
   header i {
     font-size: 20px;
diff --git a/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/WorkflowBlockTagline.svelte b/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/WorkflowBlockTagline.svelte
new file mode 100644
index 0000000000..5603b07fab
--- /dev/null
+++ b/packages/builder/src/components/workflow/WorkflowBuilder/flowchart/WorkflowBlockTagline.svelte
@@ -0,0 +1,30 @@
+<script>
+  import mustache from "mustache"
+
+  export let tagline
+  export let inputs
+
+  // Add bolt tags around inputs
+  $: boldTagline = tagline.replace(/{{/g, "<b>{{").replace(/}}/, "}}</b>")
+
+  // Fill in inputs with mustache
+  $: parsedTagline = mustache.render(boldTagline, { inputs })
+
+  // Wrap bound fields inside spans to highlight them
+  $: html = (parsedTagline || "")
+    .replace(/{{\s/g, "<span>")
+    .replace(/\s}}/g, "</span>")
+</script>
+
+<div>
+  {@html html}
+</div>
+
+<style>
+  div :global(span) {
+    font-size: 0.9em;
+    background-color: var(--purple-light);
+    padding: var(--spacing-xs);
+    border-radius: var(--border-radius-m);
+  }
+</style>