diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte index 3955e34041..1bcdbaca64 100644 --- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte +++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte @@ -8,6 +8,7 @@ import EditQueryPopover from "./popovers/EditQueryPopover.svelte" import { Modal, Switcher } from "@budibase/bbui" import NavItem from "components/common/NavItem.svelte" + import ICONS from "./icons" $: selectedView = $backendUiStore.selectedView && $backendUiStore.selectedView.name @@ -37,10 +38,15 @@ {#each $backendUiStore.datasources as datasource, idx} 0} - icon={'ri-database-2-line'} text={datasource.name} selected={$backendUiStore.selectedDatasourceId === datasource._id} on:click={() => selectDatasource(datasource)}> +
+ +
{#each $backendUiStore.queries.filter(query => query.datasourceId === datasource._id) as query} diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte index d04b569fe1..29d7c0ffba 100644 --- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte +++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte @@ -2,6 +2,7 @@ import { onMount } from "svelte" import { Input, TextArea, Spacer } from "@budibase/bbui" import api from "builderStore/api" + import ICONS from "../icons" const INTEGRATION_ICON_MAP = { POSTGRES: "ri-database-2-line", @@ -10,7 +11,7 @@ export let integration = {} let integrationsPromise = fetchIntegrations() - let selectedIntegration + let selectedIntegrationConfig let integrations = [] async function fetchIntegrations() { @@ -32,28 +33,31 @@ class="integration hoverable" class:selected={integration.type === integrationType} on:click={() => { - selectedIntegration = integrations[integrationType].datasource - integration = { type: integrationType, ...Object.keys(selectedIntegration).reduce( + selectedIntegrationConfig = integrations[integrationType].datasource + integration = { type: integrationType, ...Object.keys(selectedIntegrationConfig).reduce( (acc, next) => { return { ...acc, - [next]: selectedIntegration[next].default, + [next]: selectedIntegrationConfig[next].default, } }, {} ) } }}> - + {integrationType} {/each} - {#if selectedIntegration} - {#each Object.keys(selectedIntegration) as configKey} + {#if selectedIntegrationConfig} + {#each Object.keys(selectedIntegrationConfig) as configKey} @@ -79,10 +83,13 @@ padding: 5px; transition: 0.3s all; border-radius: var(--border-radius-s); + height: 75px; + width: 200px; } span { font-size: var(--font-size-xs); + margin-top: var(--spacing-m); margin-bottom: var(--spacing-xs); } diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/Airtable.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/Airtable.svelte new file mode 100644 index 0000000000..ce689df205 --- /dev/null +++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/Airtable.svelte @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/CouchDB.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/CouchDB.svelte new file mode 100644 index 0000000000..1ed737fc81 --- /dev/null +++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/CouchDB.svelte @@ -0,0 +1,35 @@ + + + + + diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/DynamoDB.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/DynamoDB.svelte new file mode 100644 index 0000000000..1ec061ca20 --- /dev/null +++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/DynamoDB.svelte @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/Elasticsearch.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/Elasticsearch.svelte new file mode 100644 index 0000000000..20df3bd620 --- /dev/null +++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/Elasticsearch.svelte @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/MongoDB.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/MongoDB.svelte new file mode 100644 index 0000000000..823ec3a2fa --- /dev/null +++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/MongoDB.svelte @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/Postgres.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/Postgres.svelte new file mode 100644 index 0000000000..56268f75b3 --- /dev/null +++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/Postgres.svelte @@ -0,0 +1,149 @@ + + + + + + + + + diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/S3.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/S3.svelte new file mode 100644 index 0000000000..23168a3501 --- /dev/null +++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/S3.svelte @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/SQLServer.svelte b/packages/builder/src/components/backend/DatasourceNavigator/icons/SQLServer.svelte new file mode 100644 index 0000000000..6aa2fcafca --- /dev/null +++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/SQLServer.svelte @@ -0,0 +1,391 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/index.js b/packages/builder/src/components/backend/DatasourceNavigator/icons/index.js new file mode 100644 index 0000000000..fa5b0d021a --- /dev/null +++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/index.js @@ -0,0 +1,19 @@ +import Postgres from "./Postgres.svelte" +import DynamoDB from "./DynamoDB.svelte" +import Elasticsearch from "./Elasticsearch.svelte" +import MongoDB from "./MongoDB.svelte" +import CouchDB from "./CouchDB.svelte" +import S3 from "./S3.svelte" +import Airtable from "./Airtable.svelte" +import SqlServer from "./SqlServer.svelte" + +export default { + POSTGRES: Postgres, + DYNAMODB: DynamoDB, + MONGODB: MongoDB, + ELASTICSEARCH: Elasticsearch, + COUCHDB: CouchDB, + SQL_SERVER: SqlServer, + S3: S3, + AIRTABLE: Airtable, +} diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte index ef458c1953..7a85ba1b8b 100644 --- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte +++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte @@ -54,6 +54,6 @@ on:input={checkValid} bind:value={name} {error} /> - + diff --git a/packages/builder/src/components/common/BottomDrawer.svelte b/packages/builder/src/components/common/BottomDrawer.svelte index 863102e826..970b8dbbd5 100644 --- a/packages/builder/src/components/common/BottomDrawer.svelte +++ b/packages/builder/src/components/common/BottomDrawer.svelte @@ -35,7 +35,7 @@ justify-content: space-between; align-items: center; border: var(--border-light); - padding: var(--spacing-s); + padding: var(--spacing-m); } .controls { diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte index 8eca07b1b0..e3e9fe60eb 100644 --- a/packages/builder/src/components/common/NavItem.svelte +++ b/packages/builder/src/components/common/NavItem.svelte @@ -29,8 +29,12 @@ {/if} + + {#if icon} -
+
+ +
{/if}
{text}
{#if withActions} diff --git a/packages/builder/src/components/integration/Query.js b/packages/builder/src/components/integration/Query.js deleted file mode 100644 index 25e9bb2745..0000000000 --- a/packages/builder/src/components/integration/Query.js +++ /dev/null @@ -1,14 +0,0 @@ -const handlebars = require("handlebars") - -class Query { - constructor(source, schema, type, queryString) { - this.source = source - this.schema = schema - this.type = type - this.queryString = queryString - } - - build(parameters) { - this.queryStr - } -} diff --git a/packages/builder/src/components/integration/QueryParameterBuilder.svelte b/packages/builder/src/components/integration/QueryParameterBuilder.svelte index ef9a1f25a3..5db7511336 100644 --- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte +++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte @@ -20,9 +20,11 @@ parameters = parameters } + // This is necessary due to the way readable and writable bindings are stored. + // The readable binding in the UI gets converted to a UUID value that the client understands + // for parsing, then converted back so we can display it the readable form in the UI function onBindingChange(param, valueToParse) { const parsedBindingValue = readableToRuntimeBinding(bindings, valueToParse) - console.log(parsedBindingValue) customParams[param] = parsedBindingValue } @@ -34,8 +36,9 @@ {#if bindable} + {:else} +
{/if} -
{#each parameters as parameter, idx} @@ -43,24 +46,27 @@ { - console.log('changing', evt.detail) - onBindingChange(parameter.name, evt.detail) - }} + on:change={evt => onBindingChange(parameter.name, evt.detail)} value={runtimeToReadableBinding(bindings, customParams[parameter.name])} {bindings} /> + {:else} + deleteQueryParameter(idx)} /> {/if} - deleteQueryParameter(idx)} /> {/each}
- + {#if !bindable} + + {/if} + diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte index 66d0ca1c49..99d3afbdf4 100644 --- a/packages/builder/src/components/integration/QueryViewer.svelte +++ b/packages/builder/src/components/integration/QueryViewer.svelte @@ -26,16 +26,14 @@ title: "Schema", key: "SCHEMA", }, - { - title: "Results", - key: "RESULTS", - }, { title: "Preview", key: "PREVIEW", }, ] + const QueryVerb = ["create", "read", "update", "delete"] + export let query export let fields = [] @@ -86,6 +84,7 @@ async function previewQuery() { try { const response = await api.post(`/api/queries/preview`, { + queryVerb: query.queryVerb, parameters: query.parameters.reduce( (acc, next) => ({ ...acc, @@ -125,63 +124,80 @@ } -
- {query.name} -
- - - - - - - - - - - - - - -
- - -
- -
- {#if data} - - {#if tab === 'JSON'} - 
{JSON.stringify(data[0], undefined, 2)}
- {:else if tab === 'PREVIEW'} - - {:else if tab === 'SCHEMA'} - {#each fields as field, idx} -
- - - deleteField(idx)} /> -
- {/each} - - {/if} - - {/if} -
+
+ {query.name} +
+ {#each QueryVerb as queryVerb} +
{ + query.queryVerb = queryVerb + }}> + {queryVerb} +
+ {/each}
-
+ + + + + +{#if query.queryVerb && query.queryType} +
+
+ + + + + + + + + +
+ + +
+ +
+ {#if data} + + {#if tab === 'JSON'} + 
{JSON.stringify(data[0], undefined, 2)}
+ {:else if tab === 'PREVIEW'} + + {:else if tab === 'SCHEMA'} + {#each fields as field, idx} +
+ + + deleteField(idx)} /> +
+ {/each} + + {/if} + + {/if} +
+
+
+{/if} diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte index 3c370f9b19..9e3e9aaa08 100644 --- a/packages/builder/src/components/integration/index.svelte +++ b/packages/builder/src/components/integration/index.svelte @@ -1,6 +1,6 @@ - +Query + {#if query.queryType === QueryTypes.SQL} -