Merge branch 'contextual-workflows' of github.com:Budibase/budibase into contextual-workflows

packages/builder/src/components/userInterface/MustacheStringViewer.svelte

@@ -1,12 +0,0 @@
-<script>
-  export let value
-  $:
-</script>
-
-<div>
-
-</div>
-
-<style>
-
-</style>

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;

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>

packages/server/src/workflows/steps/filter.js

@@ -14,7 +14,7 @@ const PrettyLogicConditions = {
 
 module.exports.definition = {
   name: "Filter",
-  tagline: "{{inputs.filter}} {{inputs.condition}} {{inputs.value}}",
+  tagline: "{{inputs.field}} {{inputs.condition}} {{inputs.value}}",
   icon: "ri-git-branch-line",
   description: "Filter any workflows which do not meet certain conditions",
   type: "LOGIC",