adding search in binding drawer

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

@@ -3,6 +3,7 @@
   import {
     TextArea,
     Label,
+    Input,
     Heading,
     Body,
     Spacer,
@@ -24,6 +25,7 @@
   let helpers = handlebarsCompletions()
   let getCaretPosition
   let validity = true
+  let search = ""
 
   $: categories = Object.entries(groupBy("category", bindings))
   $: value && checkValid()
@@ -50,12 +52,17 @@
   <div class="container">
     <div class="bindings">
       <Heading small>Available bindings</Heading>
+      <Spacer medium />
+      <Input extraThin placeholder="Search" bind:value={search} />
+      <Spacer medium />
       <div class="bindings__wrapper">
         <div class="bindings__list">
           {#each categories as [categoryName, bindings]}
             <Heading extraSmall>{categoryName}</Heading>
             <Spacer extraSmall />
-            {#each bindings as binding}
+            {#each bindings.filter(binding =>
+              binding.label.startsWith(search)
+            ) as binding}
               <div class="binding" on:click={() => onClickBinding(binding)}>
                 <span class="binding__label">{binding.label}</span>
                 <span class="binding__type">{binding.type}</span>
@@ -68,11 +75,15 @@
           {/each}
           <Heading extraSmall>Helpers</Heading>
           <Spacer extraSmall />
-          {#each helpers as helper}
+          {#each helpers.filter(binding =>
+            binding.label.startsWith(search)
+          ) as helper}
             <div class="binding" on:click={() => onClickBinding(helper)}>
-              <span class="binding__label">{helper.displayText}</span>
+              <span class="binding__label">{helper.label}</span>
               <br />
-              <div class="binding__description">{helper.description || ''}</div>
+              <div class="binding__description">
+                {@html helper.description || ''}
+              </div>
             </div>
           {/each}
         </div>

packages/builder/src/components/backend/DataTable/popovers/ExportPopover.svelte

@@ -1,6 +1,7 @@
 <script>
   import api from "builderStore/api"
   import { Button, Select } from "@budibase/bbui"
+  import download from "downloadjs"
 
   const FORMATS = [
     {

packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte

@@ -1,6 +1,6 @@
 <script>
   import groupBy from "lodash/fp/groupBy"
-  import { TextArea, Heading, Spacer, Label } from "@budibase/bbui"
+  import { Input, TextArea, Heading, Spacer, Label } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { isValid } from "@budibase/string-templates"
   import {
@@ -20,6 +20,7 @@
   let originalValue = value
   let helpers = handlebarsCompletions()
   let getCaretPosition
+  let search = ""
 
   $: value && checkValid()
   $: bindableProperties = getBindableProperties(
@@ -61,11 +62,15 @@
 <div class="drawer-contents">
   <div class="container" data-cy="binding-dropdown-modal">
     <div class="list">
+      <Input extraThin placeholder="Search" bind:value={search} />
+      <Spacer medium />
       {#if context}
         <Heading extraSmall>Columns</Heading>
         <Spacer small />
         <ul>
-          {#each context as { readableBinding }}
+          {#each context.filter(context =>
+            context.readableBinding.startsWith(search)
+          ) as { readableBinding }}
             <li on:click={() => addToText(readableBinding)}>
               {readableBinding}
             </li>
@@ -77,7 +82,9 @@
         <Heading extraSmall>Components</Heading>
         <Spacer small />
         <ul>
-          {#each instance as { readableBinding }}
+          {#each instance.filter(instance =>
+            instance.readableBinding.startsWith(search)
+          ) as { readableBinding }}
             <li on:click={() => addToText(readableBinding)}>
               {readableBinding}
             </li>
@@ -88,7 +95,9 @@
       <Heading extraSmall>Helpers</Heading>
       <Spacer small />
       <ul>
-        {#each helpers as helper}
+        {#each helpers.filter(helper =>
+          helper.label.startsWith(search)
+        ) as helper}
           <li on:click={() => addToText(helper.text)}>
             <div>
               <Label extraSmall>{helper.displayText}</Label>

packages/builder/src/constants/completions.js

@@ -7,6 +7,7 @@ export function handlebarsCompletions() {
     Object.entries(manifest[key]).map(([helperName, helperConfig]) => ({
       text: helperName,
       path: helperName,
+      label: helperName,
       displayText: helperName,
       description: helperConfig.description,
     }))