Updating params in the REST interface so that they can be used in and out of the URL - meaning that updating in one place affects the other. Reduces a bit of the confusing UX around this - discussed in #7683.

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

@@ -23,6 +23,7 @@
   const dispatch = createEventDispatcher()
   let bindingDrawer
   let valid = true
+  let currentVal = value
 
   $: readableValue = runtimeToReadableBinding(bindings, value)
   $: tempValue = readableValue
@@ -30,11 +31,17 @@
 
   const saveBinding = () => {
     onChange(tempValue)
+    onBlur()
     bindingDrawer.hide()
   }
 
   const onChange = value => {
-    dispatch("change", readableToRuntimeBinding(bindings, value))
+    currentVal = readableToRuntimeBinding(bindings, value)
+    dispatch("change", currentVal)
+  }
+
+  const onBlur = () => {
+    dispatch("blur", currentVal)
   }
 </script>
 
@@ -45,6 +52,7 @@
     readonly={isJS}
     value={isJS ? "(JavaScript function)" : readableValue}
     on:change={event => onChange(event.detail)}
+    on:blur={onBlur}
     {placeholder}
     {updateOnChange}
   />

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

@@ -107,7 +107,7 @@
         placeholder={keyPlaceholder}
         readonly={readOnly}
         bind:value={field.name}
-        on:change={changed}
+        on:blur={changed}
       />
       {#if options}
         <Select bind:value={field.value} on:change={changed} {options} />
@@ -115,7 +115,10 @@
         <DrawerBindableInput
           {bindings}
           placeholder="Value"
-          on:change={e => (field.value = e.detail)}
+          on:blur={e => {
+            field.value = e.detail
+            changed()
+          }}
           disabled={readOnly}
           value={field.value}
           allowJS={false}
@@ -127,7 +130,7 @@
           placeholder={valuePlaceholder}
           readonly={readOnly}
           bind:value={field.value}
-          on:change={changed}
+          on:blur={changed}
         />
       {/if}
       {#if toggle}

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

@@ -28,25 +28,25 @@
   import { onMount } from "svelte"
   import restUtils from "helpers/data/utils"
   import {
-    RestBodyTypes as bodyTypes,
-    SchemaTypeOptions,
     PaginationLocations,
     PaginationTypes,
+    RawRestBodyTypes,
+    RestBodyTypes as bodyTypes,
+    SchemaTypeOptions,
   } from "constants/backend"
   import JSONPreview from "components/integration/JSONPreview.svelte"
   import AccessLevelSelect from "components/integration/AccessLevelSelect.svelte"
   import DynamicVariableModal from "../../_components/DynamicVariableModal.svelte"
   import Placeholder from "assets/bb-spaceship.svg"
   import { cloneDeep } from "lodash/fp"
-  import { RawRestBodyTypes } from "constants/backend"
 
   import {
     getRestBindings,
-    toBindingsArray,
-    runtimeToReadableBinding,
     readableToRuntimeBinding,
-    runtimeToReadableMap,
     readableToRuntimeMap,
+    runtimeToReadableBinding,
+    runtimeToReadableMap,
+    toBindingsArray,
   } from "builderStore/dataBinding"
 
   let query, datasource
@@ -95,7 +95,7 @@
   $: runtimeUrlQueries = readableToRuntimeMap(mergedBindings, breakQs)
 
   function getSelectedQuery() {
-    const cloneQuery = cloneDeep(
+    return cloneDeep(
       $queries.list.find(q => q._id === $queries.selected) || {
         datasourceId: $params.selectedDatasource,
         parameters: [],
@@ -107,7 +107,6 @@
         queryVerb: "read",
       }
     )
-    return cloneQuery
   }
 
   function checkQueryName(inputUrl = null) {
@@ -121,14 +120,15 @@
     if (!base) {
       return base
     }
-    const qs = restUtils.buildQueryString(
+    let qs = restUtils.buildQueryString(
       runtimeToReadableMap(mergedBindings, qsObj)
     )
     let newUrl = base
     if (base.includes("?")) {
-      newUrl = base.split("?")[0]
+      const split = base.split("?")
+      newUrl = split[0]
     }
-    return qs.length > 0 ? `${newUrl}?${qs}` : newUrl
+    return qs.length === 0 ? newUrl : `${newUrl}?${qs}`
   }
 
   function buildQuery() {
@@ -314,6 +314,27 @@
     }
   }
 
+  $: console.log(breakQs)
+
+  const paramsChanged = evt => {
+    breakQs = {}
+    for (let param of evt.detail) {
+      breakQs[param.name] = param.value
+    }
+  }
+
+  const urlChanged = evt => {
+    breakQs = {}
+    const qs = evt.target.value.split("?")[1]
+    if (qs && qs.length > 0) {
+      const parts = qs.split("&")
+      for (let part of parts) {
+        const [key, value] = part.split("=")
+        breakQs[key] = value
+      }
+    }
+  }
+
   onMount(async () => {
     query = getSelectedQuery()
 
@@ -426,7 +447,11 @@
             />
           </div>
           <div class="url">
-            <Input bind:value={url} placeholder="http://www.api.com/endpoint" />
+            <Input
+              on:blur={urlChanged}
+              bind:value={url}
+              placeholder="http://www.api.com/endpoint"
+            />
           </div>
           <Button primary disabled={!url} on:click={runQuery}>Send</Button>
           <Button
@@ -456,13 +481,16 @@
             />
           </Tab>
           <Tab title="Params">
-            <KeyValueBuilder
+            {#key breakQs}
-              bind:object={breakQs}
+              <KeyValueBuilder
-              name="param"
+                on:change={paramsChanged}
-              headings
+                object={breakQs}
-              bindings={mergedBindings}
+                name="param"
-              bindingDrawerLeft="260px"
+                headings
-            />
+                bindings={mergedBindings}
+                bindingDrawerLeft="260px"
+              />
+            {/key}
           </Tab>
           <Tab title="Headers">
             <KeyValueBuilder