From 7456e1fbedec392d294acd29d7e45e9d7e7c05ba Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Tue, 26 Jan 2021 14:09:31 +0000
Subject: [PATCH] Disabling save button on binding drawer when handlebars
 statement is invalid.

---
 .../PropertiesPanel/BindingPanel.svelte       |  7 +++----
 .../PropertyControls/PropertyControl.svelte   |  4 +++-
 .../string-templates/test/helpers.spec.js     | 21 ++++++++++++-------
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
index 0798275e7a..db9ef1c329 100644
--- a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
+++ b/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>
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
index be5563143b..a260789b5e 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/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)}
diff --git a/packages/string-templates/test/helpers.spec.js b/packages/string-templates/test/helpers.spec.js
index cf6828e641..c389793cb7 100644
--- a/packages/string-templates/test/helpers.spec.js
+++ b/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")
+  })
 })
\ No newline at end of file