From 0b2d1552be787e6364b69eb976db28320019cbd3 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 1 Jun 2023 11:47:27 +0100
Subject: [PATCH 1/8] Minor fixes for bindings v2

---
 packages/bbui/src/Drawer/Drawer.svelte                     | 5 +++++
 packages/builder/src/builderStore/dataBinding.js           | 7 ++++++-
 .../src/components/common/bindings/BindingPanel.svelte     | 5 +----
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 18ac15dffa5..782c3c6ed27 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -54,6 +54,7 @@
     <section
       class:fillWidth
       class="drawer"
+      class:headless
       transition:slide|local
       style={`width: ${width}; left: ${left};`}
     >
@@ -77,6 +78,10 @@
 {/if}
 
 <style>
+  .drawer.headless :global(.drawer-contents) {
+    height: calc(40vh + 75px);
+  }
+
   .buttons {
     display: flex;
     gap: var(--spacing-m);
diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index d6bc358d390..e9c8643bce1 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -592,7 +592,6 @@ export const getEventContextBindings = (
   actionId
 ) => {
   let bindings = []
-
   // Check if any context bindings are provided by the component for this
   // setting
   const component = findComponent(asset.props, componentId)
@@ -608,6 +607,9 @@ export const getEventContextBindings = (
         )}`,
         category: component._instanceName,
         icon: def.icon,
+        display: {
+          name: contextEntry.label,
+        },
       })
     })
   }
@@ -631,6 +633,9 @@ export const getEventContextBindings = (
           runtimeBinding: `actions.${idx}.${contextValue.value}`,
           category: "Actions",
           icon: "JourneyAction",
+          display: {
+            name: contextValue.label,
+          },
         })
       })
     }
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index f74a79c387d..bfaa64d7cb6 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -380,9 +380,6 @@
     white-space: nowrap;
     overflow: hidden;
   }
-  .binding-drawer :global(.drawer-contents) {
-    height: unset;
-  }
   .main :global(textarea) {
     min-height: 202px !important;
   }
@@ -426,7 +423,7 @@
   .main-content {
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: 315px;
+    grid-template-rows: 380px;
   }
   .main-content.binding-panel {
     grid-template-columns: 1fr 320px;

From 302d87013e451cdd6bacbf07db2e20be89b12079 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 1 Jun 2023 14:41:54 +0100
Subject: [PATCH 2/8] Merge commit

---
 .../common/bindings/BindingPanel.svelte       | 34 +++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index bfaa64d7cb6..28b8d966876 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -365,6 +365,36 @@
 </span>
 
 <style>
+  .binding-drawer :global(.container > .main) {
+    overflow: hidden;
+    height: 100%;
+    /* box-sizing: border-box; */
+    padding: 0px;
+  }
+
+  .binding-drawer :global(.container > .main > .main) {
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .binding-drawer :global(.spectrum-Tabs-content) {
+    /* height: 100%;
+    max-height: 100%; */
+    flex: 1;
+  }
+
+  .binding-drawer :global(.spectrum-Tabs-content > div),
+  .binding-drawer :global(.spectrum-Tabs-content > div > div),
+  .binding-drawer :global(.spectrum-Tabs-content .main-content) {
+    height: 100%;
+  }
+
+  .binding-drawer .main-content {
+    grid-template-rows: unset;
+  }
+
   .messaging {
     display: flex;
     align-items: center;
@@ -383,9 +413,9 @@
   .main :global(textarea) {
     min-height: 202px !important;
   }
-  .main {
+  /* .main {
     margin: calc(-1 * var(--spacing-xl));
-  }
+  } */
   .main-content {
     padding: var(--spacing-s) var(--spacing-xl);
   }

From 7c2eb46c550dd076797a1cfa46a4676cd25f6fcf Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Thu, 1 Jun 2023 16:29:42 +0100
Subject: [PATCH 3/8] Fixes to improve binding panel resizing

---
 .../components/common/bindings/BindingPanel.svelte    | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 28b8d966876..3843eabf458 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -368,7 +368,6 @@
   .binding-drawer :global(.container > .main) {
     overflow: hidden;
     height: 100%;
-    /* box-sizing: border-box; */
     padding: 0px;
   }
 
@@ -380,9 +379,8 @@
   }
 
   .binding-drawer :global(.spectrum-Tabs-content) {
-    /* height: 100%;
-    max-height: 100%; */
     flex: 1;
+    overflow: hidden;
   }
 
   .binding-drawer :global(.spectrum-Tabs-content > div),
@@ -413,9 +411,7 @@
   .main :global(textarea) {
     min-height: 202px !important;
   }
-  /* .main {
-    margin: calc(-1 * var(--spacing-xl));
-  } */
+
   .main-content {
     padding: var(--spacing-s) var(--spacing-xl);
   }
@@ -459,9 +455,10 @@
     grid-template-columns: 1fr 320px;
   }
   .binding-picker {
-    overflow-y: auto;
     border-left: 2px solid var(--border-light);
     border-left: var(--border-light);
+    overflow: scroll;
+    height: 100%;
   }
   .editor {
     padding: var(--spacing-xl);

From 8f14d5cef463438beec097e484e969297ee08b7b Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 2 Jun 2023 10:56:36 +0100
Subject: [PATCH 4/8] UI colours updated

---
 .../src/components/common/CodeEditor/index.js   | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/common/CodeEditor/index.js b/packages/builder/src/components/common/CodeEditor/index.js
index 8815b1aec23..d44a446f087 100644
--- a/packages/builder/src/components/common/CodeEditor/index.js
+++ b/packages/builder/src/components/common/CodeEditor/index.js
@@ -64,25 +64,38 @@ export const getDefaultTheme = opts => {
         fontStyle: "unset",
         textTransform: "uppercase",
         fontSize: "10px",
+        backgroundColor: "var(--spectrum-global-color-gray-100)",
+        color: "var(--spectrum-global-color-gray-600)",
+      },
+      "& .cm-completionLabel": {
+        marginLeft:
+          "calc(var(--spectrum-alias-workflow-icon-size-m) + var(--spacing-m))",
       },
       "& .info-bubble": {
         fontSize: "var(--font-size-s)",
         display: "grid",
         gridGap: "var(--spacing-s)",
         gridTemplateColumns: "1fr",
+        color: "var(--spectrum-global-color-gray-800)",
       },
       "& .cm-tooltip": {
         marginLeft: "var(--spacing-s)",
         border: "1px solid var(--spectrum-global-color-gray-300)",
         borderRadius:
           "var( --spectrum-popover-border-radius, var(--spectrum-alias-border-radius-regular) )",
+        backgroundColor: "var(--spectrum-global-color-gray-50)",
       },
       // Section header
       "& .info-section": {
         display: "flex",
         padding: "var(--spacing-s)",
         gap: "var(--spacing-m)",
-        borderBottom: "1px solid var(--spectrum-global-color-gray-300)",
+        borderBottom: "1px solid var(--spectrum-global-color-gray-200)",
+        color: "var(--spectrum-global-color-gray-800)",
+        fontWeight: "bold",
+      },
+      "& .info-section .spectrum-Icon": {
+        color: "var(--spectrum-global-color-gray-600)",
       },
       // Autocomplete Option
       "& .cm-tooltip.cm-tooltip-autocomplete .autocomplete-option": {
@@ -91,10 +104,10 @@ export const getDefaultTheme = opts => {
         alignItems: "center",
         fontSize: "var(--spectrum-alias-font-size-default)",
         padding: "var(--spacing-s)",
+        color: "var(--spectrum-global-color-gray-800)",
       },
       "& .cm-tooltip-autocomplete ul li[aria-selected].autocomplete-option": {
         backgroundColor: "var(--spectrum-global-color-gray-200)",
-        color: "var(--ink)",
       },
       "& .binding-wrap": {
         color: "var(--spectrum-global-color-blue-700)",

From 0b1112d5df15798ccfe1426014634c7d3175e7eb Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 2 Jun 2023 11:46:01 +0100
Subject: [PATCH 5/8] Removed the monospace font from the Text editor and
 replaced it with the core font.

---
 .../src/components/common/CodeEditor/CodeEditor.svelte      | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
index b526d5a3b48..dadca85fac7 100644
--- a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -258,12 +258,14 @@
   </div>
 {/if}
 
-<div class="code-editor">
+<div class={`code-editor ${mode?.name || ""}`}>
   <div tabindex="-1" bind:this={textarea} />
 </div>
 
 <style>
-  /* Push into theme */
+  .code-editor.handlebars :global(.cm-content) {
+    font-family: var(--font-sans);
+  }
   .code-editor :global(.cm-tooltip.cm-completionInfo) {
     padding: var(--spacing-m);
   }

From 324fe08f3b101d64bb739c75d5eabec8efb99585 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 2 Jun 2023 12:03:25 +0100
Subject: [PATCH 6/8] Changed the binding font to monospace per feedback

---
 packages/builder/src/components/common/CodeEditor/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/builder/src/components/common/CodeEditor/index.js b/packages/builder/src/components/common/CodeEditor/index.js
index d44a446f087..7987deff528 100644
--- a/packages/builder/src/components/common/CodeEditor/index.js
+++ b/packages/builder/src/components/common/CodeEditor/index.js
@@ -111,6 +111,7 @@ export const getDefaultTheme = opts => {
       },
       "& .binding-wrap": {
         color: "var(--spectrum-global-color-blue-700)",
+        fontFamily: "monospace",
       },
     },
     { dark }

From 50d43dd8a5093c7e7ef89c43ab8024fdaf19c73e Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 2 Jun 2023 12:50:22 +0100
Subject: [PATCH 7/8] Updated the JS Scripting modal use the new editor

---
 .../SetupPanel/AutomationBlockSetup.svelte    | 44 ++++++++++++-------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index cd0aa1197f8..117e8c1035f 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -13,6 +13,7 @@
     Modal,
     Detail,
     notifications,
+    Icon,
   } from "@budibase/bbui"
   import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
   import { automationStore, selectedAutomation } from "builderStore"
@@ -27,6 +28,12 @@
   import CronBuilder from "./CronBuilder.svelte"
   import Editor from "components/integration/QueryEditor.svelte"
   import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
+  import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
+  import {
+    bindingsToCompletions,
+    jsAutocomplete,
+    EditorModes,
+  } from "components/common/CodeEditor"
   import FilterDrawer from "components/design/settings/controls/FilterEditor/FilterDrawer.svelte"
   import { LuceneUtils } from "@budibase/frontend-core"
   import {
@@ -457,25 +464,27 @@
         <SchemaSetup on:change={e => onChange(e, key)} value={inputData[key]} />
       {:else if value.customType === "code"}
         <CodeEditorModal>
-          <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}
-          <Editor
-            mode="javascript"
+          <CodeEditor
+            value={inputData[key]}
             on:change={e => {
               // need to pass without the value inside
-              onChange({ detail: e.detail.value }, key)
-              inputData[key] = e.detail.value
+              onChange({ detail: e.detail }, key)
+              inputData[key] = e.detail
             }}
-            value={inputData[key]}
+            completions={[
+              jsAutocomplete([
+                ...bindingsToCompletions(bindings, EditorModes.JS),
+              ]),
+            ]}
+            mode={EditorModes.JS}
+            height={500}
           />
+          <div class="messaging">
+            <Icon name="FlashOn" />
+            <div class="messaging-wrap">
+              <div>Add available bindings by typing <strong>$</strong></div>
+            </div>
+          </div>
         </CodeEditorModal>
       {:else if value.customType === "loopOption"}
         <Select
@@ -525,6 +534,11 @@
 {/if}
 
 <style>
+  .messaging {
+    display: flex;
+    align-items: center;
+    margin-top: var(--spacing-xl);
+  }
   .fields {
     display: flex;
     flex-direction: column;

From 16ee3afa6fa4c3329d54a7c196437c122cde3c6c Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 2 Jun 2023 12:55:16 +0100
Subject: [PATCH 8/8] Linting

---
 .../automation/SetupPanel/AutomationBlockSetup.svelte           | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 117e8c1035f..6ab750c3d6e 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -11,7 +11,6 @@
     ActionButton,
     Drawer,
     Modal,
-    Detail,
     notifications,
     Icon,
   } from "@budibase/bbui"
@@ -53,7 +52,6 @@
   let webhookModal
   let drawer
   let fillWidth = true
-  let codeBindingOpen = false
   let inputData
 
   $: filters = lookForFilters(schemaProperties) || []