Disabling save button on binding drawer when handlebars statement is invalid.

packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte

@@ -13,8 +13,7 @@
   export let bindableProperties
   export let value = ""
   export let bindingDrawer
-
-  let validity = true
+  export let valid = true
 
   $: value && checkValid()
   $: bindableProperties = getBindableProperties(
@@ -25,7 +24,7 @@
   function checkValid() {
     // TODO: need to convert the value to the runtime binding
     const runtimeBinding = readableToRuntimeBinding(bindableProperties, value)
-    validity = isValid(runtimeBinding)
+    valid = isValid(runtimeBinding)
   }
 
   function addToText(readableBinding) {
@@ -75,7 +74,7 @@
         bind:value
         placeholder="Add text, or click the objects on the left to add them to the
         textbox." />
-      {#if !validity}
+      {#if !valid}
         <p class="syntax-error">
           Current Handlebars syntax is invalid, please check the guide
           <a href="https://handlebarsjs.com/guide/">here</a>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte

@@ -21,6 +21,7 @@
   let bindingDrawer
   let temporaryBindableValue = value
   let anchor
+  let valid
 
   $: bindableProperties = getBindableProperties(
     $currentAsset.props,
@@ -90,10 +91,11 @@
     </Body>
   </div>
   <heading slot="buttons">
-    <Button thin blue on:click={handleClose}>Save</Button>
+    <Button thin blue disabled={!valid} on:click={handleClose}>Save</Button>
   </heading>
   <div slot="body">
     <BindingPanel
+      bind:valid
       value={safeValue}
       close={handleClose}
       on:update={e => (temporaryBindableValue = e.detail)}

packages/string-templates/test/helpers.spec.js

@@ -87,13 +87,6 @@ describe("test the array helpers", () => {
     })
     expect(output).toBe("a,b")
   })
-
-  it("should allow a complex case", async () => {
-    const output = await processString("{{ last ( sort ( unique array ) ) }}", {
-      array: ["a", "a", "d", "c", "e"]
-    })
-    expect(output).toBe("e")
-  })
 })
 
 describe("test the number helpers", () => {
@@ -274,4 +267,18 @@ describe("Test the literal helper", () => {
     })
     expect(output.b).toBe(1)
   })
+})
+
+describe("Cover a few complex use cases", () => {
+  it("should allow use of three different collection helpers", async () => {
+    const output = await processString(`{{ join ( after ( split "My name is: Joe Smith" " " ) 3 ) " " }}`, {})
+    expect(output).toBe("Joe Smith")
+  })
+
+  it("should allow a complex array case", async () => {
+    const output = await processString("{{ last ( sort ( unique array ) ) }}", {
+      array: ["a", "a", "d", "c", "e"]
+    })
+    expect(output).toBe("e")
+  })
 })