new datasource design

2021-01-07 13:13:46 +00:00 · 2021-01-07 13:13:46 +00:00 · d1a119f06a
parent d7a0d29b03
commit d1a119f06a
14 changed files with 208 additions and 100 deletions
--- a/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
+++ b/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 {
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/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) {
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte
+++ b/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> -->
--- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
+++ b/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
    }
--- a/packages/builder/src/components/integration/Query.js
+++ b/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) {}
+}
--- a/packages/builder/src/components/integration/QueryEditor.svelte
+++ b/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>
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditQuery.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditQuery.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} />
+    <IntegrationQueryEditor {query} bind:parameters />

-    <Spacer small />
+    <Spacer medium />

-    <Button thin secondary on:click={previewQuery}>Preview Query</Button>
+    <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>

-    <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}
+      {#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>
--- a/packages/builder/src/components/integration/codemirror.js
+++ b/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"

--- a/packages/builder/src/components/integration/index.svelte
+++ b/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>
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
+++ b/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}
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
+++ b/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>
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/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} />
--- a/packages/server/src/api/controllers/datasource.js
+++ b/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.`
--- a/packages/server/src/api/controllers/query.js
+++ b/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) {