From a834f17a8083106e0672b536c0f338497de5c68c Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Thu, 18 Feb 2021 18:55:08 +0000 Subject: [PATCH] more design updates --- .../IntegrationConfigForm.svelte | 15 +++--- .../integration/KeyValueBuilder.svelte | 4 +- .../integration/QueryFieldsBuilder.svelte | 4 +- .../integration/QueryParameterBuilder.svelte | 1 + .../components/integration/QueryViewer.svelte | 48 +++++++++---------- .../src/components/integration/index.svelte | 26 +++++++++- .../[selectedDatasource]/index.svelte | 1 + packages/server/src/integrations/rest.js | 32 +++++++++---- 8 files changed, 85 insertions(+), 46 deletions(-) diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte index 0239981a83..d4c483acc1 100644 --- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte +++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte @@ -7,18 +7,19 @@
{#each Object.keys(integration) as configKey} -
- {#if typeof integration[configKey] === 'object'} - - - {:else} + {#if typeof integration[configKey] === 'object'} + + + + {:else} +
- {/if} -
+
+ {/if} {/each}
diff --git a/packages/builder/src/components/integration/KeyValueBuilder.svelte b/packages/builder/src/components/integration/KeyValueBuilder.svelte index 53f698e3f8..46bb73dad9 100644 --- a/packages/builder/src/components/integration/KeyValueBuilder.svelte +++ b/packages/builder/src/components/integration/KeyValueBuilder.svelte @@ -23,8 +23,8 @@
{#each fields as field, idx} - - + + deleteEntry(idx)} /> {/each}
diff --git a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte index 9168a01d11..864d5495ac 100644 --- a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte +++ b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte @@ -29,7 +29,7 @@ {#each schemaKeys as field} {#if schema.fields[field]?.type === 'object'}
- +
{:else if schema.fields[field]?.type === 'json'} @@ -45,7 +45,7 @@
Query {integrationInfo.friendlyName}
- Config Provide a name for your query and select its function.
- +
{#if queryConfig} @@ -153,7 +152,6 @@ {/each}
-
@@ -189,29 +187,33 @@ Fields -
-
Query Results - +
+ +
Below, you can preview the results from your query and change the schema. + + +
{#if data} @@ -276,6 +278,11 @@ font-size: var(--font-size-s); } + hr { + margin-top: var(--layout-m); + margin-bottom: var(--layout-m); + } + .config { margin-bottom: var(--spacing-s); } @@ -285,10 +292,6 @@ cursor: pointer; } - .query-type-span { - text-transform: uppercase; - } - .preview { width: 800px; height: 100%; @@ -300,15 +303,8 @@ .viewer-controls { display: flex; flex-direction: row; - /* margin-left: auto; */ - /* direction: rtl; */ - /* z-index: 5; */ + justify-content: space-between; gap: var(--spacing-m); min-width: 150px; } - - .viewer { - /* margin-top: -28px; */ - /* z-index: -2; */ - } diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte index 0f87f61606..411eba3dda 100644 --- a/packages/builder/src/components/integration/index.svelte +++ b/packages/builder/src/components/integration/index.svelte @@ -8,13 +8,16 @@ const QueryTypes = { SQL: "sql", JSON: "json", - FIELDS: "fields", + FIELDS: "fields" } export let query + export let datasource export let schema export let editable = true + $: urlDisplay = schema.urlDisplay && `${datasource.config.url}${query.fields.path}${query.fields.queryString}` + function updateQuery({ detail }) { query.fields[schema.type] = detail.value } @@ -40,6 +43,27 @@ parameters={query.parameters} /> {:else if schema.type === QueryTypes.FIELDS} + {#if schema.urlDisplay} +
+ + +
+ {/if} {/if} {/key} {/if} + + diff --git a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte index 197baea112..274ce1f49e 100644 --- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte +++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte @@ -50,6 +50,7 @@ +
diff --git a/packages/server/src/integrations/rest.js b/packages/server/src/integrations/rest.js index d90a0ce2a1..60f133d40b 100644 --- a/packages/server/src/integrations/rest.js +++ b/packages/server/src/integrations/rest.js @@ -20,10 +20,14 @@ const SCHEMA = { create: { displayName: "POST", type: QUERY_TYPES.FIELDS, + urlDisplay: true, fields: { path: { type: FIELD_TYPES.STRING, }, + queryString: { + type: FIELD_TYPES.STRING, + }, headers: { type: FIELD_TYPES.OBJECT, }, @@ -35,10 +39,14 @@ const SCHEMA = { read: { displayName: "GET", type: QUERY_TYPES.FIELDS, + urlDisplay: true, fields: { path: { type: FIELD_TYPES.STRING, }, + queryString: { + type: FIELD_TYPES.STRING, + }, headers: { type: FIELD_TYPES.OBJECT, }, @@ -47,10 +55,14 @@ const SCHEMA = { update: { displayName: "PUT", type: QUERY_TYPES.FIELDS, + urlDisplay: true, fields: { path: { type: FIELD_TYPES.STRING, }, + queryString: { + type: FIELD_TYPES.STRING, + }, headers: { type: FIELD_TYPES.OBJECT, }, @@ -62,10 +74,14 @@ const SCHEMA = { delete: { displayName: "DELETE", type: QUERY_TYPES.FIELDS, + urlDisplay: true, fields: { path: { type: FIELD_TYPES.STRING, }, + queryString: { + type: FIELD_TYPES.STRING, + }, headers: { type: FIELD_TYPES.OBJECT, }, @@ -82,8 +98,8 @@ class RestIntegration { this.config = config } - async create({ path, headers = {}, json }) { - const response = await fetch(this.config.url + path, { + async create({ path, queryString, headers = {}, json }) { + const response = await fetch(this.config.url + path + queryString, { method: "POST", headers: { ...this.config.defaultHeaders, @@ -95,8 +111,8 @@ class RestIntegration { return await response.json() } - async read({ path, headers = {} }) { - const response = await fetch(this.config.url + path, { + async read({ path, queryString, headers = {} }) { + const response = await fetch(this.config.url + path + queryString, { headers: { ...this.config.defaultHeaders, ...headers, @@ -106,8 +122,8 @@ class RestIntegration { return await response.json() } - async update({ path, headers = {}, json }) { - const response = await fetch(this.config.url + path, { + async update({ path, queryString, headers = {}, json }) { + const response = await fetch(this.config.url + path + queryString, { method: "POST", headers: { ...this.config.defaultHeaders, @@ -119,8 +135,8 @@ class RestIntegration { return await response.json() } - async delete({ path, headers = {} }) { - const response = await fetch(this.config.url + path, { + async delete({ path, queryString, headers = {} }) { + const response = await fetch(this.config.url + path + queryString, { method: "DELETE", headers: { ...this.config.defaultHeaders,