binding panel options from helpers

packages/builder/src/builderStore/dataBinding.js

@@ -6,7 +6,6 @@ import { makePropSafe } from "@budibase/string-templates"
 
 // Regex to match all instances of template strings
 const CAPTURE_VAR_INSIDE_TEMPLATE = /{{([^}]+)}}/g
-const INVALID_BINDING = "{{ invalid binding }}"
 
 /**
  * Gets all bindable data context fields and instance fields.

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

@@ -11,6 +11,8 @@
   } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { isValid } from "@budibase/string-templates"
+  import { handlebarsCompletions } from "constants/completions"
+
   const dispatch = createEventDispatcher()
 
   export let value = ""
@@ -19,6 +21,7 @@
   export let align
   export let popover = null
 
+  let helpers = handlebarsCompletions()
   let getCaretPosition
   let validity = true
 
@@ -63,6 +66,15 @@
               </div>
             {/each}
           {/each}
+          <Heading extraSmall>Helpers</Heading>
+          <Spacer extraSmall />
+          {#each helpers as helper}
+            <div class="binding" on:click={() => onClickBinding(helper)}>
+              <span class="binding__label">{helper.displayText}</span>
+              <br />
+              <div class="binding__description">{helper.description || ''}</div>
+            </div>
+          {/each}
         </div>
       </div>
     </div>

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

@@ -1,6 +1,6 @@
 <script>
   import groupBy from "lodash/fp/groupBy"
-  import { TextArea, Heading, Spacer } from "@budibase/bbui"
+  import { TextArea, Heading, Spacer, Label } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { isValid } from "@budibase/string-templates"
   import {
@@ -8,18 +8,26 @@
     readableToRuntimeBinding,
   } from "builderStore/dataBinding"
   import { currentAsset, store } from "../../../builderStore"
+  import { handlebarsCompletions } from "constants/completions"
 
   const dispatch = createEventDispatcher()
+
   export let bindableProperties
   export let value = ""
   export let bindingDrawer
   export let valid = true
 
+  let originalValue = value
+  let helpers = handlebarsCompletions()
+  let getCaretPosition
+
   $: value && checkValid()
   $: bindableProperties = getBindableProperties(
     $currentAsset.props,
     $store.selectedComponentId
   )
+  $: dispatch("update", value)
+  $: ({ instance, context } = groupBy("type", bindableProperties))
 
   function checkValid() {
     // TODO: need to convert the value to the runtime binding
@@ -28,18 +36,26 @@
   }
 
   function addToText(readableBinding) {
-    value = `${value || ""}{{ ${readableBinding} }}`
+    const position = getCaretPosition()
+    const toAdd = `{{ ${readableBinding} }}`
+    if (position.start) {
+      value =
+        value.substring(0, position.start) +
+        toAdd +
+        value.substring(position.end, value.length)
+    } else {
+      value += toAdd
+    }
   }
-  let originalValue = value
-
-  $: dispatch("update", value)
 
   export function cancel() {
     dispatch("update", originalValue)
     bindingDrawer.close()
   }
 
-  $: ({ instance, context } = groupBy("type", bindableProperties))
+  function updateValue({ detail }) {
+    value = detail.value
+  }
 </script>
 
 <div class="drawer-contents">
@@ -56,8 +72,10 @@
           {/each}
         </ul>
       {/if}
+      <Spacer small />
       {#if instance}
         <Heading extraSmall>Components</Heading>
+        <Spacer small />
         <ul>
           {#each instance as { readableBinding }}
             <li on:click={() => addToText(readableBinding)}>
@@ -66,9 +84,23 @@
           {/each}
         </ul>
       {/if}
+      <Spacer small />
+      <Heading extraSmall>Helpers</Heading>
+      <Spacer small />
+      <ul>
+        {#each helpers as helper}
+          <li on:click={() => addToText(helper.text)}>
+            <div>
+              <Label extraSmall>{helper.displayText}</Label>
+              {helper.description}
+            </div>
+          </li>
+        {/each}
+      </ul>
     </div>
     <div class="text">
       <TextArea
+        bind:getCaretPosition
         thin
         bind:value
         placeholder="Add text, or click the objects on the left to add them to

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

@@ -2,6 +2,7 @@
   import CodeMirror from "./codemirror"
   import { onMount, createEventDispatcher } from "svelte"
   import { themeStore } from "builderStore"
+  import { handlebarsCompletions } from "constants/completions"
 
   const dispatch = createEventDispatcher()
 
@@ -15,6 +16,14 @@
   export let lineNumbers = true
   export let tab = true
   export let mode
+  // export let parameters = []
+
+  let completions = handlebarsCompletions()
+
+  // $: completions = parameters.map(param => ({
+  //   text: `{{ ${param.name} }}`,
+  //   displayText: param.name,
+  // }))
 
   let width
   let height
@@ -109,6 +118,7 @@
       mode: modes[mode] || {
         name: mode,
       },
+
       readOnly,
       autoCloseBrackets: true,
       autoCloseTags: true,
@@ -136,6 +146,18 @@
       }
     })
 
+    // editor.on("cursorActivity", function() {
+    //   editor.showHint({
+    //     hint: function() {
+    //       return {
+    //         from: editor.getDoc().getCursor(),
+    //         to: editor.getDoc().getCursor(),
+    //         list: completions,
+    //       }
+    //     },
+    //   })
+    // })
+
     if (first) await sleep(50)
     editor.refresh()
 

packages/builder/src/components/integration/codemirror.js

@@ -1,10 +1,12 @@
 import CodeMirror from "codemirror"
 import "codemirror/lib/codemirror.css"
 import "codemirror/theme/tomorrow-night-eighties.css"
+import "codemirror/addon/hint/show-hint.css"
 import "codemirror/theme/neo.css"
 import "codemirror/mode/sql/sql"
 import "codemirror/mode/css/css"
 import "codemirror/mode/handlebars/handlebars"
 import "codemirror/mode/javascript/javascript"
+import "codemirror/addon/hint/show-hint"
 
 export default CodeMirror

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

@@ -28,14 +28,16 @@
         mode="sql"
         on:change={updateQuery}
         readOnly={!editable}
-        value={query.fields.sql} />
+        value={query.fields.sql}
+        parameters={query.parameters} />
     {:else if schema.type === QueryTypes.JSON}
       <Editor
         label="Query"
         mode="json"
         on:change={updateQuery}
         readOnly={!editable}
-        value={query.fields.json} />
+        value={query.fields.json}
+        parameters={query.parameters} />
     {:else if schema.type === QueryTypes.FIELDS}
       <FieldsBuilder bind:fields={query.fields} {schema} {editable} />
     {/if}

packages/builder/src/constants/completions.js

@@ -0,0 +1,14 @@
+import { getManifest } from "@budibase/string-templates"
+
+export function handlebarsCompletions() {
+  const manifest = getManifest()
+
+  return Object.keys(manifest).flatMap(key =>
+    Object.entries(manifest[key]).map(([helperName, helperConfig]) => ({
+      text: helperName,
+      path: helperName,
+      displayText: helperName,
+      description: helperConfig.description,
+    }))
+  )
+}