more design updates

5 years ago · 68f28bb912
8 changed files with 85 additions and 46 deletions
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
@ -7,18 +7,19 @@

 <form>
  {#each Object.keys(integration) as configKey}
-    <div class="form-row">
-      {#if typeof integration[configKey] === 'object'}
-        <Label small>{configKey}</Label>
-        <KeyValueBuilder bind:object={integration[configKey]} />
-      {:else}
+    {#if typeof integration[configKey] === 'object'}
+      <Label small>{configKey}</Label>
+      <Spacer small />
+      <KeyValueBuilder bind:object={integration[configKey]} />
+    {:else}
+      <div class="form-row">
        <Label small>{configKey}</Label>
        <Input
          outline
          type={integration[configKey].type}
          bind:value={integration[configKey]} />
-      {/if}
-    </div>
+      </div>
+    {/if}
  {/each}
 </form>

--- a/packages/builder/src/components/integration/KeyValueBuilder.svelte
+++ b/packages/builder/src/components/integration/KeyValueBuilder.svelte
@ -23,8 +23,8 @@
 <!-- Builds Objects with Key Value Pairs. Useful for building things like Request Headers. -->
 <div class="container">
  {#each fields as field, idx}
-    <Input placeholder="Key" outline thin bind:value={field.name} />
-    <Input placeholder="Value" outline thin bind:value={field.value} />
+    <Input placeholder="Key" thin outline bind:value={field.name} />
+    <Input placeholder="Value" thin outline bind:value={field.value} />
    <i class="ri-close-circle-fill" on:click={() => deleteEntry(idx)} />
  {/each}
 </div>
--- 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'}
        <div>
-          <Label extraSmall grey>{field}</Label>
+          <Label small>{field}</Label>
          <KeyValueBuilder bind:object={fields[field]} />
        </div>
      {:else if schema.fields[field]?.type === 'json'}
@ -45,7 +45,7 @@
        <div class="horizontal">
          <Label small>{field}</Label>
          <Input
-            placeholder="Enter {field} name"
+            placeholder="Enter {field}"
            outline
            disabled={!editable}
            type={schema.fields[field]?.type}
--- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@ -77,6 +77,7 @@

  .controls {
    display: flex;
+    align-items: center;
    justify-content: space-between;
  }

--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@ -64,7 +64,7 @@
  $: integrationInfo = $backendUiStore.integrations[datasourceType]
  $: queryConfig = integrationInfo?.query

-  $: shouldShowQueryConfig = config && query.queryVerb
+  $: shouldShowQueryConfig = queryConfig && query.queryVerb

  function newField() {
    fields = [...fields, {}]
@ -134,14 +134,13 @@
 <section class="config">
  <Heading medium>Query {integrationInfo.friendlyName}</Heading>
  <hr />
-  <Spacer medium />
  <Heading small>Config</Heading>
  <Spacer medium />
  <Body small grey>Provide a name for your query and select its function.</Body>
  <Spacer medium />
  <div class="config-field">
    <Label small>Query Name</Label>
-    <Input thin bind:value={query.name} />
+    <Input thin outline bind:value={query.name} />
  </div>
  <Spacer medium />
  {#if queryConfig}
@ -153,7 +152,6 @@
        {/each}
      </Select>
    </div>
-    <Spacer medium />
    <hr />
    <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
    <hr />
@ -189,29 +187,33 @@
      <Heading small>Fields</Heading>
      <Spacer medium />
      <IntegrationQueryEditor
+        {datasource}
        {query}
-        schema={config[query.queryVerb]}
+        schema={queryConfig[query.queryVerb]}
        bind:parameters />

-      <Spacer medium />
      <hr />
-      <Spacer medium />

      <div class="viewer-controls">
        <Heading small>Query Results</Heading>
-        <Button
-          secondary
-          thin
-          disabled={data.length === 0 || !query.name}
-          on:click={saveQuery}>
-          Save Query
-        </Button>
+        <div>
+          <Button
+            secondary
+            thin
+            disabled={data.length === 0 || !query.name}
+            on:click={saveQuery}>
+            Save Query
+          </Button>
        <Button thin primary on:click={previewQuery}>Run Query</Button>
+        </div>
      </div>
      <Body small grey>
        Below, you can preview the results from your query and change the
        schema.
      </Body>
+
+      <Spacer medium />
+
      <section class="viewer">
        {#if data}
          <Switcher headings={PREVIEW_HEADINGS} bind:value={tab}>
@ -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; */
-  }
 </style>
--- 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}
      <FieldsBuilder bind:fields={query.fields} {schema} {editable} />
+      {#if schema.urlDisplay}
+        <div class="url-row">
+          <Label small>URL</Label>
+          <Input thin outline disabled value={urlDisplay} />
+        </div>
+      {/if}
    {/if}
  {/key}
 {/if}
+
+<style>
+.url-row {
+  display: grid;
+  grid-template-columns: 20% 1fr;
+  grid-gap: var(--spacing-l);
+  align-items: center;
+}
+
+pre {
+  background: var(--background);
+  border-radius: var(--border-radius-s);
+  margin: 0;
+}
+</style>
--- 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 @@

      <Spacer medium />
      <IntegrationConfigForm integration={datasource.config} />
+      <Spacer medium />

      <hr />

--- 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,