Merge pull request #10759 from Budibase/bindings-fixes

Fixes for Bindings V2

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);

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,
+          },
         })
       })
     }

packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte

@@ -11,8 +11,8 @@
     ActionButton,
     Drawer,
     Modal,
-    Detail,
     notifications,
+    Icon,
   } from "@budibase/bbui"
   import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
   import { automationStore, selectedAutomation } from "builderStore"
@@ -27,6 +27,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 {
@@ -46,7 +52,6 @@
   let webhookModal
   let drawer
   let fillWidth = true
-  let codeBindingOpen = false
   let inputData
 
   $: filters = lookForFilters(schemaProperties) || []
@@ -457,25 +462,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 +532,11 @@
 {/if}
 
 <style>
+  .messaging {
+    display: flex;
+    align-items: center;
+    margin-top: var(--spacing-xl);
+  }
   .fields {
     display: flex;
     flex-direction: column;

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);
   }

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,13 +104,14 @@ 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)",
+        fontFamily: "monospace",
       },
     },
     { dark }

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -365,6 +365,34 @@
 </span>
 
 <style>
+  .binding-drawer :global(.container > .main) {
+    overflow: hidden;
+    height: 100%;
+    padding: 0px;
+  }
+
+  .binding-drawer :global(.container > .main > .main) {
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .binding-drawer :global(.spectrum-Tabs-content) {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .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;
@@ -380,15 +408,10 @@
     white-space: nowrap;
     overflow: hidden;
   }
-  .binding-drawer :global(.drawer-contents) {
-    height: unset;
-  }
   .main :global(textarea) {
     min-height: 202px !important;
   }
-  .main {
-    margin: calc(-1 * var(--spacing-xl));
-  }
+
   .main-content {
     padding: var(--spacing-s) var(--spacing-xl);
   }
@@ -426,15 +449,16 @@
   .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;
   }
   .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);