new datasource design

packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte

@@ -4,11 +4,10 @@
   import { notifier } from "builderStore/store/notifications"
   import * as api from "./api"
   import Table from "./Table.svelte"
-  import CreateQueryButton from "components/backend/DataTable/buttons/CreateQueryButton.svelte"
 
   export let query = {}
+  export let data = []
 
-  let data = []
   let loading = false
   let error = false
 
@@ -17,7 +16,7 @@
       loading = true
       const response = await api.fetchDataForQuery(
         $params.selectedDatasource,
-        $params.query
+        query._id
       )
       data = response.rows || []
       error = false
@@ -30,15 +29,13 @@
   }
 
   // Fetch rows for specified query
-  $: query && fetchData()
+  // $: query && fetchData()
 </script>
 
 {#if error}
   <div class="errors">{error}</div>
 {/if}
-<Table title={query.name} schema={query.schema} {data} {loading}>
-  <CreateQueryButton {query} edit />
-</Table>
+<Table title={''} schema={query.schema} {data} {loading} />
 
 <style>
   .errors {

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -199,7 +199,6 @@
     align-items: stretch;
   }
   .grid-wrapper :global(> *) {
-    height: auto;
     flex: 1 1 auto;
   }
   :global(.grid-wrapper) {

packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte

@@ -13,7 +13,7 @@
   import { backendUiStore } from "builderStore"
   import api from "builderStore/api"
   import EditIntegrationConfig from "../modals/EditIntegrationConfig.svelte"
-  import CreateEditQuery from "components/backend/DataTable/modals/CreateEditQuery.svelte"
+  // import CreateEditQuery from "components/backend/DataTable/modals/CreateEditQuery.svelte"
 
   export let query = {}
   export let edit
@@ -38,12 +38,12 @@
     {edit ? 'Edit' : 'Create'} Query
   </Button>
 </div>
-<Modal bind:this={modal}>
-  <ModalContent
+<!-- <Modal bind:this={modal}> -->
+<!-- <ModalContent
     confirmText="Save"
     cancelText="Cancel"
     onConfirm={saveQuery}
-    title={edit ? 'Edit Query' : 'Create New Query'}>
-    <CreateEditQuery bind:query />
-  </ModalContent>
-</Modal>
+    title={edit ? 'Edit Query' : 'Create New Query'}> -->
+<!-- <CreateEditQuery bind:query /> -->
+<!-- </ModalContent> -->
+<!-- </Modal> -->

packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte

@@ -19,7 +19,6 @@
   }
 
   function onClickQuery(datasourceId, queryId) {
-    console.log(backendUiStore.selectedQueryId, queryId)
     if ($backendUiStore.selectedQueryId === queryId) {
       return
     }

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

@@ -0,0 +1,9 @@
+class Query {
+  constructor(source, schema, type) {
+    this.source = source
+    this.schema = schema
+    this.type = type
+  }
+
+  build(parameters) {}
+}

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

@@ -10,6 +10,8 @@
   let editor
   let codemirror
 
+  // $: codemirror && codemirror.setValue(value)
+
   onMount(async () => {
     codemirror = cm.fromTextArea(editor, {
       lineNumbers: true,
@@ -26,9 +28,16 @@
     codemirror.on("change", instance => {
       const code = instance.getValue()
       value = code
-      // dispatch("change", { value })
+      dispatch("change", code)
     })
   })
 </script>
 
 <textarea bind:value bind:this={editor} />
+
+<style>
+  textarea {
+    background: var(--background);
+    border-radius: var(--border-radius-m);
+  }
+</style>

packages/builder/src/components/backend/DataTable/modals/CreateEditQuery.svelte → packages/builder/src/components/integration/QueryViewer.svelte

@@ -14,33 +14,40 @@
   import api from "builderStore/api"
   import { FIELDS } from "constants/backend"
   import IntegrationQueryEditor from "components/integration/index.svelte"
+  import ExternalDataSourceTable from "components/backend/DataTable/ExternalDataSourceTable.svelte"
   import { backendUiStore } from "builderStore"
 
   const PREVIEW_HEADINGS = [
     {
-      title: "Preview",
-      key: "PREVIEW",
+      title: "JSON",
+      key: "JSON",
     },
     {
       title: "Schema",
       key: "SCHEMA",
     },
+    {
+      title: "Results",
+      key: "RESULTS",
+    },
+    {
+      title: "Preview",
+      key: "PREVIEW",
+    },
   ]
 
   export let query
   export let fields = []
 
   let config = {}
-  let previewTab = "PREVIEW"
-  let preview
+  let tab = "JSON"
+  let parameters
+  let data
 
   $: datasource = $backendUiStore.datasources.find(
     ds => ds._id === query.datasourceId
   )
 
-  $: query.datasourceId =
-    query.datasourceId || $backendUiStore.selectedDatasourceId
-
   $: query.schema = fields.reduce(
     (acc, next) => ({
       ...acc,
@@ -52,6 +59,9 @@
     {}
   )
 
+  $: datasourceType = datasource.source
+  $: datasourceType && fetchQueryConfig()
+
   function newField() {
     fields = [...fields, {}]
   }
@@ -76,17 +86,18 @@
   async function previewQuery() {
     try {
       const response = await api.post(`/api/queries/preview`, {
+        parameters: query.parameters,
         datasourceId: datasource._id,
         query: query.queryString,
       })
       const json = await response.json()
-      if (response.status !== 200) {
-        throw new Error(json.message)
-      }
-      preview = json[0] || {}
+
+      if (response.status !== 200) throw new Error(json.message)
+
+      data = json || []
 
       // TODO: refactor
-      fields = Object.keys(preview).map(field => ({
+      fields = Object.keys(json[0]).map(field => ({
         name: field,
         type: "STRING",
       }))
@@ -96,15 +107,21 @@
     }
   }
 
-  onMount(() => {
-    fetchQueryConfig()
-  })
+  async function saveQuery() {
+    try {
+      await backendUiStore.actions.queries.save(query.datasourceId, query)
+      notifier.success(`Query created successfully.`)
+    } catch (err) {
+      console.error(err)
+      notifier.danger(`Error creating query. ${err.message}`)
+    }
+  }
 </script>
 
 <section>
   <div class="config">
     <Label extraSmall grey>Query Name</Label>
-    <Input type="text" thin bind:value={query.name} />
+    <Input thin bind:value={query.name} />
 
     <Spacer medium />
 
@@ -118,40 +135,43 @@
 
     <Spacer medium />
 
-    <IntegrationQueryEditor
-      type={query.queryType}
-      bind:query={query.queryString} />
-
-    <Spacer small />
-
-    <Button thin secondary on:click={previewQuery}>Preview Query</Button>
-
-    <Spacer small />
-
-    {#if preview}
-      <Switcher headings={PREVIEW_HEADINGS} bind:value={previewTab}>
-        {#if previewTab === 'PREVIEW'}
-          <pre class="preview">{JSON.stringify(preview, undefined, 2)}</pre>
-        {:else if previewTab === 'SCHEMA'}
-          {#each fields as field, idx}
-            <div class="field">
-              <Input thin type={'text'} bind:value={field.name} />
-              <Select secondary thin bind:value={field.type}>
-                <option value={''}>Select an option</option>
-                <option value={'STRING'}>Text</option>
-                <option value={'NUMBER'}>Number</option>
-                <option value={'BOOLEAN'}>Boolean</option>
-                <option value={'DATETIME'}>Datetime</option>
-              </Select>
-              <i
-                class="ri-close-circle-line delete"
-                on:click={() => deleteField(idx)} />
-            </div>
-          {/each}
-          <Button thin secondary on:click={newField}>Add Field</Button>
-        {/if}
-      </Switcher>
-    {/if}
+    <IntegrationQueryEditor {query} bind:parameters />
+
+    <Spacer medium />
+
+    <section class="viewer">
+      <div class="viewer-controls">
+        <Button wide thin blue on:click={previewQuery}>Run</Button>
+        <Button wide thin primary on:click={saveQuery}>Save</Button>
+      </div>
+
+      {#if data}
+        <Switcher headings={PREVIEW_HEADINGS} bind:value={tab}>
+          {#if tab === 'JSON'}
+            <pre class="preview">{JSON.stringify(data[0], undefined, 2)}</pre>
+          {:else if tab === 'PREVIEW'}
+            <ExternalDataSourceTable {query} {data} />
+          {:else if tab === 'SCHEMA'}
+            {#each fields as field, idx}
+              <div class="field">
+                <Input thin type={'text'} bind:value={field.name} />
+                <Select secondary thin bind:value={field.type}>
+                  <option value={''}>Select an option</option>
+                  <option value={'STRING'}>Text</option>
+                  <option value={'NUMBER'}>Number</option>
+                  <option value={'BOOLEAN'}>Boolean</option>
+                  <option value={'DATETIME'}>Datetime</option>
+                </Select>
+                <i
+                  class="ri-close-circle-line delete"
+                  on:click={() => deleteField(idx)} />
+              </div>
+            {/each}
+            <Button thin secondary on:click={newField}>Add Field</Button>
+          {/if}
+        </Switcher>
+      {/if}
+    </section>
   </div>
 </section>
 
@@ -163,17 +183,6 @@
     margin-bottom: var(--spacing-m);
   }
 
-  h6 {
-    font-family: var(--font-sans);
-    font-weight: 600;
-    text-rendering: var(--text-render);
-    color: var(--ink);
-    font-size: var(--heading-font-size-xs);
-    color: var(--ink);
-    margin-bottom: var(--spacing-xs);
-    margin-top: var(--spacing-xs);
-  }
-
   .config {
     margin-bottom: var(--spacing-s);
   }
@@ -185,7 +194,21 @@
 
   .preview {
     width: 800px;
+    height: 100%;
+    overflow-y: auto;
     overflow-wrap: break-word;
     white-space: pre-wrap;
   }
+
+  .viewer {
+    position: relative;
+  }
+
+  .viewer-controls {
+    position: absolute;
+    right: 0;
+    display: grid;
+    grid-gap: var(--spacing-m);
+    grid-auto-flow: column;
+  }
 </style>

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

@@ -1,6 +1,7 @@
 import CodeMirror from "codemirror"
 import "codemirror/lib/codemirror.css"
 import "codemirror/mode/sql/sql"
+import "codemirror/mode/css/css"
 import "codemirror/mode/handlebars/handlebars"
 import "codemirror/mode/javascript/javascript"
 

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

@@ -1,6 +1,6 @@
 <script>
-  import { TextArea, Label, Input } from "@budibase/bbui"
-  import Editor from "./Editor.svelte"
+  import { TextArea, Label, Input, Heading } from "@budibase/bbui"
+  import Editor from "./QueryEditor.svelte"
 
   const CAPTURE_VAR_INSIDE_MUSTACHE = /{{([^}]+)}}/g
 
@@ -8,21 +8,58 @@
     SQL: "sql",
   }
 
-  export let type
   export let query
 
-  // $: parameters = Array.from(
-  //   query
-  //     .matchAll(CAPTURE_VAR_INSIDE_MUSTACHE)
-  //     .map(([_, paramName]) => paramName)
-  // )
+  // TODO: bind these to the query
+  let parameters = []
+
+  $: query.parameters = parameters.reduce(
+    (acc, next) => ({ [next.key]: next.value, ...acc }),
+    {}
+  )
+
+  function newQueryParameter() {
+    parameters = [...parameters, {}]
+  }
+
+  function deleteQueryParameter(idx) {
+    parameters.splice(idx, 1)
+    parameters = parameters
+  }
 </script>
 
-<!-- {#each parameters as param}
-  <Label grey extraSmall>{param}</Label>
-  <Input thin bind:value={query.params[param]} />
-{/each} -->
+<Heading extraSmall black>Parameters</Heading>
 
-{#if type === QueryTypes.SQL}
-  <Editor label="Query" bind:value={query} />
+{#if query.queryType === QueryTypes.SQL}
+  <section>
+    <div class="parameters">
+      <Label extraSmall grey>Parameter Name</Label>
+      <Label extraSmall grey>Default Value</Label>
+      <!-- CLEAR ALL PARAMS OR SOMETHING -->
+      <i class="ri-close-circle-line delete" on:click={console.log} />
+      {#each parameters as parameter, idx}
+        <Input thin bind:value={parameter.key} />
+        <Input thin bind:value={parameter.value} />
+        <i
+          class="ri-close-circle-line delete"
+          on:click={() => deleteQueryParameter(idx)} />
+      {/each}
+      <i class="ri-add-circle-line" on:click={newQueryParameter} />
+    </div>
+  </section>
+
+  <Editor label="Query" bind:value={query.queryString} />
 {/if}
+
+<style>
+  .parameters {
+    display: grid;
+    grid-template-columns: 1fr 1fr 5%;
+    grid-gap: 10px;
+    align-items: center;
+  }
+
+  section {
+    margin-bottom: var(--spacing-xl);
+  }
+</style>

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

@@ -25,7 +25,7 @@
     <Select secondary bind:value={parameters.queryId}>
       <option value="" />
       {#each $backendUiStore.queries.filter(query => query.datasourceId === datasource._id) as query}
-        <option value={query}>{datasource.queries[query].name}</option>
+        <option value={query._id}>{query.name}</option>
       {/each}
     </Select>
   {/if}

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

@@ -1,12 +1,36 @@
 <script>
   import { params } from "@sveltech/routify"
   import { backendUiStore } from "builderStore"
-  import ExternalDataSourceTable from "components/backend/DataTable/ExternalDataSourceTable.svelte"
+  import { Switcher } from "@budibase/bbui"
+  import QueryInterface from "components/integration/QueryViewer.svelte"
 
-  $: query = $backendUiStore.queries.find(query => query._id === $params.query)
-  $: console.log("updated", query)
+  let query
+
+  $: {
+    if ($params.query !== "new") {
+      query = $backendUiStore.queries.find(query => query._id === $params.query)
+    } else {
+      // New query
+      query = {
+        datasourceId: $params.selectedDatasource,
+        name: "New Query",
+        parameters: {},
+        // TODO: set dynamically
+      }
+    }
+  }
 </script>
 
-{#if $backendUiStore.selectedDatabase._id && query}
-  <ExternalDataSourceTable {query} />
-{/if}
+<section>
+  {#if $backendUiStore.selectedDatabase._id && query}
+    <QueryInterface {query} />
+  {/if}
+</section>
+
+<style>
+  section {
+    background: var(--background);
+    padding: var(--spacing-xl);
+    border-radius: var(--border-radius-m);
+  }
+</style>

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

@@ -1,5 +1,6 @@
 <script>
-  import { Button, Spacer } from "@budibase/bbui"
+  import { goto } from "@sveltech/routify"
+  import { Button, Spacer, Icon, TextButton } from "@budibase/bbui"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
@@ -17,7 +18,10 @@
 </script>
 
 {#if datasource}
-  <CreateQueryButton {datasource} />
+  <TextButton text small on:click={() => $goto('../new')}>
+    <Icon name="filter" />
+    Create Query
+  </TextButton>
   <section>
     <h4>{datasource.name}: Configuration</h4>
     <IntegrationConfigForm integration={datasource.config} />

packages/server/src/api/controllers/datasource.js

@@ -60,6 +60,7 @@ exports.update = async function(ctx) {
 }
 
 exports.destroy = async function(ctx) {
+  // TODO: destroy all queries as well
   const database = new CouchDB(ctx.user.appId)
   await database.destroy(ctx.params.datasourceId)
   ctx.message = `Datasource deleted.`

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

@@ -51,7 +51,12 @@ exports.save = async function(ctx) {
 }
 
 exports.preview = async function(ctx) {
-  const { query, datasourceId } = ctx.request.body
+  const { query, datasourceId, parameters } = ctx.request.body
+
+  const queryTemplate = handlebars.compile(query)
+  const parsedQuery = queryTemplate(parameters)
+
+  console.log(parsedQuery)
 
   const db = new CouchDB(ctx.user.appId)
 
@@ -64,7 +69,7 @@ exports.preview = async function(ctx) {
     return
   }
 
-  ctx.body = await new Integration(datasource.config, query).query()
+  ctx.body = await new Integration(datasource.config, parsedQuery).query()
 }
 
 exports.execute = async function(ctx) {