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,25 +339,29 @@
           </Tab>
         {/if}
         <div class="drawer-actions">
-          <Button
+          {#if drawerActions?.hide}
-            secondary
+            <Button
-            quiet
+              secondary
-            on:click={() => {
+              quiet
-              store.actions.settings.propertyFocus(null)
+              on:click={() => {
-              drawerActions.hide()
+                store.actions.settings.propertyFocus(null)
-            }}
+                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}