Added fixes for query body binding. Query parameter fixes and pretty bindings added

packages/builder/src/builderStore/dataBinding.js

@@ -97,13 +97,17 @@ export const toBindingsArray = (valueMap, prefix) => {
   if (!valueMap) {
     return []
   }
-  return Object.keys(valueMap).map(binding => {
+  return Object.keys(valueMap).reduce((acc, binding) => {
-    return {
+    if (!binding || !valueMap[binding]) {
+      return acc
+    }
+    acc.push({
       type: "context",
       runtimeBinding: binding,
       readableBinding: `${prefix}.${binding}`,
-    }
+    })
-  })
+    return acc
+  }, [])
 }
 
 /**

packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/RestExtraConfigForm.svelte

@@ -53,6 +53,7 @@
   bind:object={parsedHeaders}
   on:change={evt => onDefaultHeaderUpdate(evt.detail)}
   noAddButton
+  bindings={getRestBindings()}
 />
 <div>
   <ActionButton icon="Add" on:click={() => addHeader.addEntry()}>

packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/rest/auth/RestAuthenticationModal.svelte

@@ -2,7 +2,7 @@
   import { onMount } from "svelte"
   import { ModalContent, Layout, Select, Body, Input } from "@budibase/bbui"
   import { AUTH_TYPE_LABELS, AUTH_TYPES } from "./authTypes"
-  import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
+  import BindableCombobox from "components/common/bindings/BindableCombobox.svelte"
   import { getAuthBindings } from "builderStore/dataBinding"
 
   export let configs
@@ -205,7 +205,7 @@
       />
     {/if}
     {#if form.type === AUTH_TYPES.BEARER}
-      <DrawerBindableCombobox
+      <BindableCombobox
         label="Token"
         value={form.bearer.token}
         bindings={getAuthBindings()}

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

@@ -0,0 +1,68 @@
+<script>
+  import { Combobox } from "@budibase/bbui"
+  import {
+    readableToRuntimeBinding,
+    runtimeToReadableBinding,
+  } from "builderStore/dataBinding"
+  import { createEventDispatcher } from "svelte"
+  import { isJSBinding } from "@budibase/string-templates"
+
+  export let value = ""
+  export let bindings = []
+  export let placeholder
+  export let label
+  export let disabled = false
+  export let options
+  export let appendBindingsAsOptions = true
+  export let error
+
+  const dispatch = createEventDispatcher()
+
+  $: readableValue = runtimeToReadableBinding(bindings, value)
+  $: isJS = isJSBinding(value)
+  $: allOptions = buildOptions(options, bindings, appendBindingsAsOptions)
+
+  const onChange = (value, optionPicked) => {
+    // Add HBS braces if picking binding
+    if (optionPicked && !options?.includes(value)) {
+      value = `{{ ${value} }}`
+    }
+
+    dispatch("change", readableToRuntimeBinding(bindings, value))
+  }
+
+  const buildOptions = (options, bindings, appendBindingsAsOptions) => {
+    if (!appendBindingsAsOptions) {
+      return options
+    }
+    return []
+      .concat(options || [])
+      .concat(bindings?.map(binding => binding.readableBinding) || [])
+  }
+</script>
+
+<div class="control" class:disabled>
+  <Combobox
+    {label}
+    {disabled}
+    readonly={isJS}
+    value={isJS ? "(JavaScript function)" : readableValue}
+    on:type={e => onChange(e.detail, false)}
+    on:pick={e => onChange(e.detail, true)}
+    on:blur={() => dispatch("blur")}
+    {placeholder}
+    options={allOptions}
+    {error}
+  />
+</div>
+
+<style>
+  .control {
+    flex: 1;
+    position: relative;
+  }
+
+  .control:not(.disabled) :global(.spectrum-Textfield-input) {
+    padding-right: 40px;
+  }
+</style>

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

@@ -18,7 +18,6 @@
   export let options
   export let allowJS = true
   export let appendBindingsAsOptions = true
-  export let drawerEnabled = false
   export let error
 
   const dispatch = createEventDispatcher()
@@ -66,7 +65,7 @@
     options={allOptions}
     {error}
   />
-  {#if !disabled && drawerEnabled}
+  {#if !disabled}
     <div
       class="icon"
       on:click={bindingDrawer.show}
@@ -76,23 +75,22 @@
     </div>
   {/if}
 </div>
-{#if !drawerEnabled}
+
-  <Drawer bind:this={bindingDrawer} {title}>
+<Drawer bind:this={bindingDrawer} {title}>
-    <svelte:fragment slot="description">
+  <svelte:fragment slot="description">
-      Add the objects on the left to enrich your text.
+    Add the objects on the left to enrich your text.
-    </svelte:fragment>
+  </svelte:fragment>
-    <Button cta slot="buttons" on:click={handleClose}>Save</Button>
+  <Button cta slot="buttons" on:click={handleClose}>Save</Button>
-    <svelte:component
+  <svelte:component
-      this={panel}
+    this={panel}
-      slot="body"
+    slot="body"
-      value={readableValue}
+    value={readableValue}
-      close={handleClose}
+    close={handleClose}
-      on:change={event => (tempValue = event.detail)}
+    on:change={event => (tempValue = event.detail)}
-      {bindings}
+    {bindings}
-      {allowJS}
+    {allowJS}
-    />
+  />
-  </Drawer>
+</Drawer>
-{/if}
 
 <style>
   .control {

packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte

@@ -59,6 +59,7 @@
   let restBindings = getRestBindings()
 
   $: staticVariables = datasource?.config?.staticVariables || {}
+
   $: customRequestBindings = toBindingsArray(requestBindings, "Binding")
   $: dynamicRequestBindings = toBindingsArray(dynamicVariables, "Dynamic")
   $: dataSourceStaticBindings = toBindingsArray(
@@ -73,10 +74,6 @@
     ...dataSourceStaticBindings,
   ]
 
-  $: mergedAndCompleteBindings = mergedBindings.filter(binding => {
-    return binding.runtimeBinding && binding.readableBinding
-  })
-
   $: datasourceType = datasource?.source
   $: integrationInfo = $integrations[datasourceType]
   $: queryConfig = integrationInfo?.query
@@ -92,10 +89,7 @@
     Object.keys(schema || {}).length !== 0 ||
     Object.keys(query?.schema || {}).length !== 0
 
-  $: runtimeUrlQueries = readableToRuntimeMap(
+  $: runtimeUrlQueries = readableToRuntimeMap(mergedBindings, breakQs)
-    mergedAndCompleteBindings,
-    breakQs
-  )
 
   function getSelectedQuery() {
     const cloneQuery = cloneDeep(
@@ -110,18 +104,6 @@
         queryVerb: "read",
       }
     )
-    if (cloneQuery?.fields?.requestBody) {
-      cloneQuery.fields.requestBody =
-        typeof cloneQuery.fields.requestBody === "object"
-          ? runtimeToReadableMap(
-              mergedAndCompleteBindings,
-              cloneQuery.fields.requestBody
-            )
-          : runtimeToReadableBinding(
-              mergedAndCompleteBindings,
-              cloneQuery.fields.requestBody
-            )
-    }
     return cloneQuery
   }
 
@@ -137,7 +119,7 @@
       return base
     }
     const qs = restUtils.buildQueryString(
-      runtimeToReadableMap(mergedAndCompleteBindings, qsObj)
+      runtimeToReadableMap(mergedBindings, qsObj)
     )
     let newUrl = base
     if (base.includes("?")) {
@@ -150,16 +132,11 @@
     const newQuery = cloneDeep(query)
     const queryString = restUtils.buildQueryString(runtimeUrlQueries)
 
+    newQuery.parameters = restUtils.keyValueToQueryParameters(requestBindings)
     newQuery.fields.requestBody =
       typeof newQuery.fields.requestBody === "object"
-        ? readableToRuntimeMap(
+        ? readableToRuntimeMap(mergedBindings, newQuery.fields.requestBody)
-            mergedAndCompleteBindings,
+        : readableToRuntimeBinding(mergedBindings, newQuery.fields.requestBody)
-            newQuery.fields.requestBody
-          )
-        : readableToRuntimeBinding(
-            mergedAndCompleteBindings,
-            newQuery.fields.requestBody
-          )
 
     newQuery.fields.path = url.split("?")[0]
     newQuery.fields.queryString = queryString
@@ -181,6 +158,13 @@
         datasource.config.dynamicVariables = rebuildVariables(saveId)
         datasource = await datasources.save(datasource)
       }
+      prettifyQueryRequestBody(
+        query,
+        requestBindings,
+        dynamicVariables,
+        staticVariables,
+        restBindings
+      )
     } catch (err) {
       notifications.error(`Error saving query`)
     }
@@ -297,6 +281,36 @@
     }
   }
 
+  const prettifyQueryRequestBody = (
+    query,
+    requestBindings,
+    dynamicVariables,
+    staticVariables,
+    restBindings
+  ) => {
+    let customRequestBindings = toBindingsArray(requestBindings, "Binding")
+    let dynamicRequestBindings = toBindingsArray(dynamicVariables, "Dynamic")
+    let dataSourceStaticBindings = toBindingsArray(
+      staticVariables,
+      "Datasource.Static"
+    )
+
+    const prettyBindings = [
+      ...restBindings,
+      ...customRequestBindings,
+      ...dynamicRequestBindings,
+      ...dataSourceStaticBindings,
+    ]
+
+    //Parse the body here as now all bindings have been updated.
+    if (query?.fields?.requestBody) {
+      query.fields.requestBody =
+        typeof query.fields.requestBody === "object"
+          ? runtimeToReadableMap(prettyBindings, query.fields.requestBody)
+          : runtimeToReadableBinding(prettyBindings, query.fields.requestBody)
+    }
+  }
+
   onMount(async () => {
     query = getSelectedQuery()
 
@@ -311,7 +325,7 @@
     const datasourceUrl = datasource?.config.url
     const qs = query?.fields.queryString
     breakQs = restUtils.breakQueryString(qs)
-    breakQs = runtimeToReadableMap(restBindings, breakQs)
+    breakQs = runtimeToReadableMap(mergedBindings, breakQs)
 
     const path = query.fields.path
     if (
@@ -354,6 +368,14 @@
       query.fields.pagination = {}
     }
     dynamicVariables = getDynamicVariables(datasource, query._id)
+
+    prettifyQueryRequestBody(
+      query,
+      requestBindings,
+      dynamicVariables,
+      staticVariables,
+      restBindings
+    )
   })
 </script>
 
@@ -425,7 +447,7 @@
               bind:object={breakQs}
               name="param"
               headings
-              bindings={mergedAndCompleteBindings}
+              bindings={mergedBindings}
             />
           </Tab>
           <Tab title="Headers">
@@ -435,7 +457,7 @@
               toggle
               name="header"
               headings
-              bindings={mergedAndCompleteBindings}
+              bindings={mergedBindings}
             />
           </Tab>
           <Tab title="Body">