From 32e750afd6c7ed08a55971e71ce7206c12e5f3d4 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Thu, 1 Feb 2024 17:37:46 +0000
Subject: [PATCH 1/6] A small ux improvement to the automation scripting
 system.

---
 .../SetupPanel/AutomationBlockSetup.svelte    | 101 ++++++++++++------
 .../common/CodeEditor/CodeEditor.svelte       |   3 +-
 .../src/components/common/CodeEditor/index.js |   7 +-
 .../common/bindings/BindingPanel.svelte       |  31 ++----
 .../src/components/common/bindings/utils.js   |  67 ++++++------
 5 files changed, 115 insertions(+), 94 deletions(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index a9e7ab0d39..d8b41dc94d 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -33,6 +33,8 @@
   import Editor from "components/integration/QueryEditor.svelte"
   import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
   import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
+  import BindingPicker from "components/common/bindings/BindingPicker.svelte"
+  import { BindingHelpers } from "components/common/bindings/utils"
   import {
     bindingsToCompletions,
     hbAutocomplete,
@@ -56,7 +58,7 @@
   let drawer
   let fillWidth = true
   let inputData
-  let codeBindingOpen = false
+  let insertAtPos, getCaretPosition
   $: filters = lookForFilters(schemaProperties) || []
   $: tempFilters = filters
   $: stepId = block.stepId
@@ -75,6 +77,10 @@
   $: isUpdateRow = stepId === ActionStepID.UPDATE_ROW
   $: codeMode =
     stepId === "EXECUTE_BASH" ? EditorModes.Handlebars : EditorModes.JS
+  $: bindingsHelpers = new BindingHelpers(getCaretPosition, insertAtPos, {
+    disableWrapping: true,
+  })
+  $: editingJs = codeMode === EditorModes.JS
 
   $: stepCompletions =
     codeMode === EditorModes.Handlebars
@@ -539,39 +545,51 @@
             />
           {:else if value.customType === "code"}
             <CodeEditorModal>
-              {#if codeMode == EditorModes.JS}
-                <ActionButton
-                  on:click={() => (codeBindingOpen = !codeBindingOpen)}
-                  quiet
-                  icon={codeBindingOpen ? "ChevronDown" : "ChevronRight"}
-                >
-                  <Detail size="S">Bindings</Detail>
-                </ActionButton>
-                {#if codeBindingOpen}
-                  <pre>{JSON.stringify(bindings, null, 2)}</pre>
-                {/if}
-              {/if}
-              <CodeEditor
-                value={inputData[key]}
-                on:change={e => {
-                  // need to pass without the value inside
-                  onChange({ detail: e.detail }, key)
-                  inputData[key] = e.detail
-                }}
-                completions={stepCompletions}
-                mode={codeMode}
-                autocompleteEnabled={codeMode != EditorModes.JS}
-                height={500}
-              />
-              <div class="messaging">
-                {#if codeMode == EditorModes.Handlebars}
-                  <Icon name="FlashOn" />
-                  <div class="messaging-wrap">
-                    <div>
-                      Add available bindings by typing <strong>
-                        &#125;&#125;
-                      </strong>
-                    </div>
+              <div class:js-editor={editingJs}>
+                <div class:js-code={editingJs} style="width: 100%">
+                  <CodeEditor
+                    value={inputData[key]}
+                    on:change={e => {
+                      // need to pass without the value inside
+                      onChange({ detail: e.detail }, key)
+                      inputData[key] = e.detail
+                    }}
+                    completions={stepCompletions}
+                    mode={codeMode}
+                    autocompleteEnabled={codeMode !== EditorModes.JS}
+                    bind:getCaretPosition
+                    bind:insertAtPos
+                    height={500}
+                  />
+                  <div class="messaging">
+                    {#if codeMode === EditorModes.Handlebars}
+                      <Icon name="FlashOn" />
+                      <div class="messaging-wrap">
+                        <div>
+                          Add available bindings by typing <strong>
+                            &#125;&#125;
+                          </strong>
+                        </div>
+                      </div>
+                    {/if}
+                  </div>
+                </div>
+                {#if editingJs}
+                  <div class="js-binding-picker">
+                    <BindingPicker
+                      {bindings}
+                      allowHelpers={false}
+                      addBinding={binding =>
+                        bindingsHelpers.onSelectBinding(
+                          inputData[key],
+                          binding,
+                          {
+                            js: true,
+                            decode: false,
+                          }
+                        )}
+                      mode="javascript"
+                    />
                   </div>
                 {/if}
               </div>
@@ -658,4 +676,19 @@
   .test :global(.drawer) {
     width: 10000px !important;
   }
+
+  .js-editor {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    width: 100%;
+  }
+
+  .js-code {
+    flex: 7;
+  }
+
+  .js-binding-picker {
+    flex: 3;
+  }
 </style>
diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index a39634f9a3..e906ef445d 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -54,6 +54,7 @@
   export let placeholder = null
   export let autocompleteEnabled = true
   export let autofocus = false
+  export let jsBindingWrapping = true
 
   // Export a function to expose caret position
   export const getCaretPosition = () => {
@@ -187,7 +188,7 @@
       )
       complete.push(
         EditorView.inputHandler.of((view, from, to, insert) => {
-          if (insert === "$") {
+          if (jsBindingWrapping && insert === "$") {
             let { text } = view.state.doc.lineAt(from)
 
             const left = from ? text.substring(0, from) : ""
diff --git a/packages/builder/src/components/common/CodeEditor/index.js b/packages/builder/src/components/common/CodeEditor/index.js
index da0e727e4e..38d377b47a 100644
--- a/packages/builder/src/components/common/CodeEditor/index.js
+++ b/packages/builder/src/components/common/CodeEditor/index.js
@@ -286,13 +286,14 @@ export const hbInsert = (value, from, to, text) => {
   return parsedInsert
 }
 
-export function jsInsert(value, from, to, text, { helper } = {}) {
+export function jsInsert(value, from, to, text, { helper, disableWrapping }) {
   let parsedInsert = ""
 
   const left = from ? value.substring(0, from) : ""
   const right = to ? value.substring(to) : ""
-
-  if (helper) {
+  if (disableWrapping) {
+    parsedInsert = text
+  } else if (helper) {
     parsedInsert = `helpers.${text}()`
   } else if (!left.includes('$("') || !right.includes('")')) {
     parsedInsert = `$("${text}")`
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 548a71b483..e6bd2fe86a 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -29,10 +29,9 @@
     hbAutocomplete,
     EditorModes,
     bindingsToCompletions,
-    hbInsert,
-    jsInsert,
   } from "../CodeEditor"
   import BindingPicker from "./BindingPicker.svelte"
+  import { BindingHelpers } from "./utils"
 
   const dispatch = createEventDispatcher()
 
@@ -60,8 +59,10 @@
   let targetMode = null
 
   $: usingJS = mode === "JavaScript"
-  $: editorMode = mode == "JavaScript" ? EditorModes.JS : EditorModes.Handlebars
+  $: editorMode =
+    mode === "JavaScript" ? EditorModes.JS : EditorModes.Handlebars
   $: bindingCompletions = bindingsToCompletions(bindings, editorMode)
+  $: bindingHelpers = new BindingHelpers(getCaretPosition, insertAtPos)
 
   const updateValue = val => {
     valid = isValid(readableToRuntimeBinding(bindings, val))
@@ -70,31 +71,13 @@
     }
   }
 
-  // Adds a JS/HBS helper to the expression
   const onSelectHelper = (helper, js) => {
-    const pos = getCaretPosition()
-    const { start, end } = pos
-    if (js) {
-      let js = decodeJSBinding(jsValue)
-      const insertVal = jsInsert(js, start, end, helper.text, { helper: true })
-      insertAtPos({ start, end, value: insertVal })
-    } else {
-      const insertVal = hbInsert(hbsValue, start, end, helper.text)
-      insertAtPos({ start, end, value: insertVal })
-    }
+    bindingHelpers.onSelectHelper(js ? jsValue : hbsValue, helper, js)
   }
 
-  // Adds a data binding to the expression
   const onSelectBinding = (binding, { forceJS } = {}) => {
-    const { start, end } = getCaretPosition()
-    if (usingJS || forceJS) {
-      let js = decodeJSBinding(jsValue)
-      const insertVal = jsInsert(js, start, end, binding.readableBinding)
-      insertAtPos({ start, end, value: insertVal })
-    } else {
-      const insertVal = hbInsert(hbsValue, start, end, binding.readableBinding)
-      insertAtPos({ start, end, value: insertVal })
-    }
+    const js = usingJS || forceJS
+    bindingHelpers.onSelectBinding(js ? jsValue : hbsValue, binding, { js })
   }
 
   const onChangeMode = e => {
diff --git a/packages/builder/src/components/common/bindings/utils.js b/packages/builder/src/components/common/bindings/utils.js
index 8d414ffed3..428e092842 100644
--- a/packages/builder/src/components/common/bindings/utils.js
+++ b/packages/builder/src/components/common/bindings/utils.js
@@ -1,38 +1,41 @@
-export function addHBSBinding(value, caretPos, binding) {
-  binding = typeof binding === "string" ? binding : binding.path
-  value = value == null ? "" : value
+import { decodeJSBinding } from "@budibase/string-templates"
+import { hbInsert, jsInsert } from "components/common/CodeEditor"
 
-  const left = caretPos?.start ? value.substring(0, caretPos.start) : ""
-  const right = caretPos?.end ? value.substring(caretPos.end) : ""
-  if (!left.includes("{{") || !right.includes("}}")) {
-    binding = `{{ ${binding} }}`
+export class BindingHelpers {
+  constructor(getCaretPosition, insertAtPos, { disableWrapping } = {}) {
+    this.getCaretPosition = getCaretPosition
+    this.insertAtPos = insertAtPos
+    this.disableWrapping = disableWrapping
   }
-  if (caretPos.start) {
-    value =
-      value.substring(0, caretPos.start) +
-      binding +
-      value.substring(caretPos.end, value.length)
-  } else {
-    value += binding
-  }
-  return value
-}
 
-export function addJSBinding(value, caretPos, binding, { helper } = {}) {
-  binding = typeof binding === "string" ? binding : binding.path
-  value = value == null ? "" : value
-  if (!helper) {
-    binding = `$("${binding}")`
-  } else {
-    binding = `helpers.${binding}()`
+  // Adds a JS/HBS helper to the expression
+  onSelectHelper(value, helper, { js }) {
+    const pos = this.getCaretPosition()
+    const { start, end } = pos
+    if (js) {
+      const jsVal = decodeJSBinding(value)
+      const insertVal = jsInsert(jsVal, start, end, helper.text, {
+        helper: true,
+      })
+      this.insertAtPos({ start, end, value: insertVal })
+    } else {
+      const insertVal = hbInsert(value, start, end, helper.text)
+      this.insertAtPos({ start, end, value: insertVal })
+    }
   }
-  if (caretPos.start) {
-    value =
-      value.substring(0, caretPos.start) +
-      binding +
-      value.substring(caretPos.end, value.length)
-  } else {
-    value += binding
+
+  // Adds a data binding to the expression
+  onSelectBinding(value, binding, { js, decode }) {
+    const { start, end } = this.getCaretPosition()
+    if (js) {
+      const jsVal = decode ? decodeJSBinding(value) : value
+      const insertVal = jsInsert(jsVal, start, end, binding.readableBinding, {
+        disableWrapping: this.disableWrapping,
+      })
+      this.insertAtPos({ start, end, value: insertVal })
+    } else {
+      const insertVal = hbInsert(value, start, end, binding.readableBinding)
+      this.insertAtPos({ start, end, value: insertVal })
+    }
   }
-  return value
 }

From dab066e61b8e91165b52a5762f2f02d8de4e12bf Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 2 Feb 2024 11:11:55 +0000
Subject: [PATCH 2/6] Quick fix.

---
 .../builder/src/components/common/bindings/BindingPanel.svelte  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index e6bd2fe86a..0ef34a36ad 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -72,7 +72,7 @@
   }
 
   const onSelectHelper = (helper, js) => {
-    bindingHelpers.onSelectHelper(js ? jsValue : hbsValue, helper, js)
+    bindingHelpers.onSelectHelper(js ? jsValue : hbsValue, helper, { js })
   }
 
   const onSelectBinding = (binding, { forceJS } = {}) => {

From cadce52e1bd1b9f89d22da95aa580e6959e4255a Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 2 Feb 2024 11:28:54 +0000
Subject: [PATCH 3/6] Changing how optional decoding works.

---
 .../automation/SetupPanel/AutomationBlockSetup.svelte     | 2 +-
 packages/builder/src/components/common/bindings/utils.js  | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index d8b41dc94d..213e1e0e54 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -585,7 +585,7 @@
                           binding,
                           {
                             js: true,
-                            decode: false,
+                            dontDecode: true,
                           }
                         )}
                       mode="javascript"
diff --git a/packages/builder/src/components/common/bindings/utils.js b/packages/builder/src/components/common/bindings/utils.js
index 428e092842..a086cd0394 100644
--- a/packages/builder/src/components/common/bindings/utils.js
+++ b/packages/builder/src/components/common/bindings/utils.js
@@ -9,11 +9,11 @@ export class BindingHelpers {
   }
 
   // Adds a JS/HBS helper to the expression
-  onSelectHelper(value, helper, { js }) {
+  onSelectHelper(value, helper, { js, dontDecode }) {
     const pos = this.getCaretPosition()
     const { start, end } = pos
     if (js) {
-      const jsVal = decodeJSBinding(value)
+      const jsVal = dontDecode ? value : decodeJSBinding(value)
       const insertVal = jsInsert(jsVal, start, end, helper.text, {
         helper: true,
       })
@@ -25,10 +25,10 @@ export class BindingHelpers {
   }
 
   // Adds a data binding to the expression
-  onSelectBinding(value, binding, { js, decode }) {
+  onSelectBinding(value, binding, { js, dontDecode }) {
     const { start, end } = this.getCaretPosition()
     if (js) {
-      const jsVal = decode ? decodeJSBinding(value) : value
+      const jsVal = dontDecode ? value : decodeJSBinding(value)
       const insertVal = jsInsert(jsVal, start, end, binding.readableBinding, {
         disableWrapping: this.disableWrapping,
       })

From 137ff312892f75122099a128f0130d602b84f65d Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 2 Feb 2024 15:34:56 +0000
Subject: [PATCH 4/6] Removing unused.

---
 .../components/automation/SetupPanel/AutomationBlockSetup.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 213e1e0e54..860e6dc350 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -15,7 +15,6 @@
     Icon,
     Checkbox,
     DatePicker,
-    Detail,
   } from "@budibase/bbui"
   import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
   import { automationStore, selectedAutomation } from "builderStore"

From 471d2f4ae8112b2f22325c86a05259a1ddeb55a9 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 2 Feb 2024 16:36:12 +0000
Subject: [PATCH 5/6] Remove padding from binding picker to clean up design.

---
 .../automation/SetupPanel/AutomationBlockSetup.svelte       | 1 +
 .../src/components/common/bindings/BindingPicker.svelte     | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 860e6dc350..6f8fccc654 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -577,6 +577,7 @@
                   <div class="js-binding-picker">
                     <BindingPicker
                       {bindings}
+                      noPaddingTop
                       allowHelpers={false}
                       addBinding={binding =>
                         bindingsHelpers.onSelectBinding(
diff --git a/packages/builder/src/components/common/bindings/BindingPicker.svelte b/packages/builder/src/components/common/bindings/BindingPicker.svelte
index d85a0a2bbb..758fa322e7 100644
--- a/packages/builder/src/components/common/bindings/BindingPicker.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPicker.svelte
@@ -9,6 +9,7 @@
   export let bindings
   export let mode
   export let allowHelpers
+  export let noPaddingTop = false
 
   let search = ""
   let popover
@@ -104,7 +105,7 @@
 
 <Layout noPadding gap="S">
   {#if selectedCategory}
-    <div class="sub-section-back">
+    <div class="sub-section-back" class:no-padding-top={noPaddingTop}>
       <ActionButton
         secondary
         icon={"ArrowLeft"}
@@ -301,6 +302,9 @@
     padding-top: var(--spacing-xl);
     padding-bottom: 0px;
   }
+  .no-padding-top {
+    padding-top: 0 !important;
+  }
   .cat-heading {
     margin-bottom: var(--spacing-l);
   }

From 80f22fe63ba183d64ab7cc046195e5137fa5ab20 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Fri, 2 Feb 2024 17:16:45 +0000
Subject: [PATCH 6/6] PR comments.

---
 .../automation/SetupPanel/AutomationBlockSetup.svelte        | 2 +-
 .../src/components/common/bindings/BindingPicker.svelte      | 5 +----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 6f8fccc654..1536d83a82 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -577,7 +577,6 @@
                   <div class="js-binding-picker">
                     <BindingPicker
                       {bindings}
-                      noPaddingTop
                       allowHelpers={false}
                       addBinding={binding =>
                         bindingsHelpers.onSelectBinding(
@@ -690,5 +689,6 @@
 
   .js-binding-picker {
     flex: 3;
+    margin-top: calc((var(--spacing-xl) * -1) + 1px);
   }
 </style>
diff --git a/packages/builder/src/components/common/bindings/BindingPicker.svelte b/packages/builder/src/components/common/bindings/BindingPicker.svelte
index 758fa322e7..9daed00324 100644
--- a/packages/builder/src/components/common/bindings/BindingPicker.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPicker.svelte
@@ -105,7 +105,7 @@
 
 <Layout noPadding gap="S">
   {#if selectedCategory}
-    <div class="sub-section-back" class:no-padding-top={noPaddingTop}>
+    <div class="sub-section-back">
       <ActionButton
         secondary
         icon={"ArrowLeft"}
@@ -302,9 +302,6 @@
     padding-top: var(--spacing-xl);
     padding-bottom: 0px;
   }
-  .no-padding-top {
-    padding-top: 0 !important;
-  }
   .cat-heading {
     margin-bottom: var(--spacing-l);
   }