readable to writable bindings

packages/builder/src/builderStore/store/backend.js

@@ -142,7 +142,7 @@ export const getBackendUiStore = () => {
       delete: async queryId => {
         await api.delete(`/api/queries/${queryId}`)
         store.update(state => {
-          state.datasources = state.queries.filter(
+          state.queries = state.queries.filter(
             existing => existing._id !== queryId
           )
           if (state.selectedQueryId === queryId) {

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

@@ -1,6 +1,10 @@
 <script>
   import { Button, TextArea, Label, Input, Heading } from "@budibase/bbui"
   import BindableInput from "components/userInterface/BindableInput.svelte"
+  import {
+    readableToRuntimeBinding,
+    runtimeToReadableBinding,
+  } from "builderStore/replaceBindings"
 
   export let bindable = true
   export let parameters = []
@@ -15,6 +19,12 @@
     parameters.splice(idx, 1)
     parameters = parameters
   }
+
+  function onBindingChange(param, valueToParse) {
+    const parsedBindingValue = readableToRuntimeBinding(bindings, valueToParse)
+    console.log(parsedBindingValue)
+    customParams[param] = parsedBindingValue
+  }
 </script>
 
 <section>
@@ -33,7 +43,11 @@
         <BindableInput
           type="string"
           thin
-          bind:value={customParams[parameter.name]}
+          on:change={evt => {
+            console.log('changing', evt.detail)
+            onBindingChange(parameter.name, evt.detail)
+          }}
+          value={runtimeToReadableBinding(bindings, customParams[parameter.name])}
           {bindings} />
       {/if}
       <i

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

@@ -126,6 +126,7 @@
 </script>
 
 <section>
+  <Heading>{query.name}</Heading>
   <div class="config">
     <Label extraSmall grey>Query Name</Label>
     <Input thin bind:value={query.name} />

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

@@ -16,11 +16,18 @@
   }
 </script>
 
+<ParameterBuilder bind:parameters={query.parameters} bindable={false} />
+<Spacer large />
+
+<Label grey medium>Query</Label>
+
 {#if query.queryType === QueryTypes.SQL}
-  <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
-  <Spacer large />
   <TextArea bind:value={query.queryString} />
   <!-- <Editor label="Query" on:change={updateQuery} value={query.queryString} /> -->
 {:else if query.queryType === QueryTypes.JSON}
-
+  <!-- <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
-{:else if query.queryType === QueryTypes.FIELDS}{/if}
+  <Spacer large />
+  <TextArea bind:value={query.queryString} /> -->
+{:else if query.queryType === QueryTypes.FIELDS}
+  <!-- {#each Object.keys()} -->
+{/if}

packages/builder/src/components/userInterface/BindableInput.svelte

@@ -1,9 +1,13 @@
 <script>
+  import { createEventDispatcher } from "svelte"
   import GenericBindingPopover from "./GenericBindingPopover.svelte"
   import { Input, Icon } from "@budibase/bbui"
 
+  const dispatch = createEventDispatcher()
+
   export let bindings = []
   export let value
+
   let anchor
   let popover = undefined
   let enrichedValue
@@ -14,6 +18,7 @@
     let { bindings, ...otherProps } = $$props
     inputProps = otherProps
   }
+  $: value && dispatch("change", value)
 </script>
 
 <div class="container" bind:this={anchor}>

packages/builder/src/components/userInterface/DataBindingDrawer/index.svelte

@@ -20,7 +20,7 @@
     ...property,
     category: property.type === "instance" ? "Component" : "Table",
     label: property.readableBinding,
-    path: property.runtimeBinding,
+    path: property.readableBinding,
   }))
 
   function closeDatabindingDrawer() {

packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte

@@ -20,7 +20,7 @@
     ...property,
     category: property.type === "instance" ? "Component" : "Table",
     label: property.readableBinding,
-    path: property.runtimeBinding,
+    path: property.readableBinding,
   }))
 
   $: query =

packages/builder/src/components/userInterface/TableViewSelect.svelte

@@ -63,11 +63,9 @@
     ...property,
     category: property.type === "instance" ? "Component" : "Table",
     label: property.readableBinding,
-    path: property.runtimeBinding,
+    path: property.readableBinding,
   }))
 
-  $: console.log("selected", value)
-
   $: links = bindableProperties
     .filter(x => x.fieldSchema?.type === "link")
     .map(property => {

packages/server/src/api/routes/query.js

@@ -39,13 +39,12 @@ function generateQueryValidation() {
 function generateQueryPreviewValidation() {
   // prettier-ignore
   return joiValidator.body(Joi.object({
-    query: Joi.string().required(),
+    query: Joi.string(),
     datasourceId: Joi.string().required(),
     parameters: Joi.object({}).required().unknown(true)
   }))
 }
 
-// TODO: sort out auth so apps have the right permissions
 router
   .get("/api/queries", authorized(BUILDER), queryController.fetch)
   .post(