Merge pull request #10805 from Budibase/fix/bindings-fixes

Binding drawer fixes

packages/builder/src/components/backend/DataTable/formula.js

@@ -76,6 +76,10 @@ export function getBindings({
       // will be replaced by the main array binding
       readableBinding: label,
       runtimeBinding: binding,
+      display: {
+        name: label,
+        type: field.name === FIELDS.LINK.name ? "Array" : field.name,
+      },
     })
   }
   return bindings

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

@@ -339,24 +339,28 @@
           </Tab>
         {/if}
         <div class="drawer-actions">
-          <Button
+          {#if drawerActions?.hide}
-            secondary
+            <Button
-            quiet
+              secondary
-            on:click={() => {
+              quiet
-              drawerActions.hide()
+              on:click={() => {
-            }}
+                drawerActions.hide()
-          >
+              }}
-            Cancel
+            >
-          </Button>
+              Cancel
-          <Button
+            </Button>
-            cta
+          {/if}
-            disabled={!valid}
+          {#if bindingDrawerActions?.save}
-            on:click={() => {
+            <Button
-              bindingDrawerActions.save()
+              cta
-            }}
+              disabled={!valid}
-          >
+              on:click={() => {
-            Save
+                bindingDrawerActions.save()
-          </Button>
+              }}
+            >
+              Save
+            </Button>
+          {/if}
         </div>
       </Tabs>
     </div>

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

@@ -36,7 +36,7 @@
     .map(([name, categoryBindings]) => ({
       name,
       bindings: categoryBindings?.filter(binding => {
-        return binding.readableBinding.match(searchRgx)
+        return !search || binding.readableBinding.match(searchRgx)
       }),
     }))
     .filter(category => {
@@ -46,7 +46,11 @@
       )
     })
   $: filteredHelpers = helpers?.filter(helper => {
-    return helper.label.match(searchRgx) || helper.description.match(searchRgx)
+    return (
+      !search ||
+      helper.label.match(searchRgx) ||
+      helper.description.match(searchRgx)
+    )
   })
 
   const getHelperExample = (helper, js) => {
@@ -124,9 +128,6 @@
       <span
         class="search-input-icon"
         on:click={() => {
-          if (!search) {
-            return
-          }
           search = null
         }}
         class:searching={search}

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

@@ -76,7 +76,7 @@
   {/if}
 </div>
 
-<Drawer bind:this={bindingDrawer} {title}>
+<Drawer bind:this={bindingDrawer} {title} headless>
   <svelte:fragment slot="description">
     Add the objects on the left to enrich your text.
   </svelte:fragment>

packages/builder/src/components/integration/QueryEditor.svelte

@@ -186,7 +186,6 @@
   }
 
   div :global(.CodeMirror) {
-    width: var(--code-mirror-width) !important;
     height: var(--code-mirror-height) !important;
     border-radius: var(--border-radius-s);
     font-family: var(--font-mono);