bindings now show up correctly in the drawer

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

@@ -12,9 +12,12 @@
   
     const dispatch = createEventDispatcher()
   
+    export let bindableProperties
     export let value = ""
     export let bindingDrawer
+    export let valid = true
     export let bindings = []
+    $: console.log('Bindings in Drawer: ', bindings)
   
     let originalValue = value
     let helpers = handlebarsCompletions()
@@ -24,7 +27,10 @@
   
     $: categories = Object.entries(groupBy("category", bindings))
     $: value && checkValid()
-
+    $: bindableProperties = getBindableProperties(
+      $currentAsset,
+      $store.selectedComponentId
+    )
     $: console.log(value)
     $: dispatch("update", value)
     $: searchRgx = new RegExp(search, "ig")
@@ -35,16 +41,16 @@
     }
   
     function addToText(binding) {
-      const position = getCaretPosition()
-      const toAdd = `{{ ${binding.path} }}`
-      if (position.start) {
+        const position = getCaretPosition()
+        const toAdd = `{{ ${binding.path} }}`
+        if (position.start) {
         value =
-          value.substring(0, position.start) +
-          toAdd +
-          value.substring(position.end, value.length)
-      } else {
+            value.substring(0, position.start) +
+            toAdd +
+            value.substring(position.end, value.length)
+        } else {
         value += toAdd
-      }
+        }
     }
     export function cancel() {
       dispatch("update", originalValue)

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

@@ -47,6 +47,8 @@
     }
     return bindings
   }
+
+  $: console.log('Bindings in Block Setup: ', bindings)
 </script>
 
 <div class="block-label">{block.name}</div>

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

@@ -7,6 +7,8 @@
   export let value
   export let bindings
 
+  $: console.log('Bindings in Row Selector: ', bindings)
+
   $: table = $backendUiStore.tables.find(table => table._id === value?.tableId)
   $: schemaFields = Object.entries(table?.schema ?? {})
 

packages/builder/src/components/common/DrawerBindableInput.svelte

@@ -8,18 +8,16 @@
   import { createEventDispatcher } from "svelte"
   const dispatch = createEventDispatcher()
 
+  export let panel = BindingPanel
   export let value = ""
   export let bindings = []
-  export let label
   export let thin = true
   export let title = "Bindings"
   export let placeholder
-  export let panel = BindingPanel
 
   let bindingDrawer
 
   $: tempValue = value
-  $: console.log('Value: ', tempValue)
   $: readableValue = runtimeToReadableBinding(bindings, value)
 
   const handleClose = () => {
@@ -35,7 +33,6 @@
 <div class="control">
   <Input
     {thin}
-    {label}
     value={readableValue}
     on:change={event => onChange(event.target.value)}
     {placeholder} />
@@ -53,11 +50,13 @@
     <Button thin blue on:click={handleClose}>Save</Button>
   </heading>
   <div slot="body">
-    <svelte:component this={panel}
+    <svelte:component
+      this={panel}
       value={readableValue}
       close={handleClose}
       on:update={event => (tempValue = event.detail)}
-      bindableProperties={bindings} />
+      bindableProperties={bindings}
+      {bindings} />
   </div>
 </Drawer>