From d99e1a5a531ae69ec289bddacb9ce04449748094 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 18 Feb 2021 16:58:10 +0000
Subject: [PATCH] design updates, changing query verb names to HTTP verbs

---
 .../popovers/ManageAccessPopover.svelte       |   4 +-
 .../IntegrationConfigForm.svelte              |  30 +++-
 .../TableIntegrationMenu/index.svelte         |  22 ++-
 .../modals/CreateQueryModal.svelte            |  61 --------
 .../popovers/EditDatasourcePopover.svelte     |   1 -
 .../popovers/EditQueryParamsPopover.svelte    |  12 +-
 .../popovers/EditQueryPopover.svelte          |   1 -
 .../integration/KeyValueBuilder.svelte        |   2 +-
 .../integration/QueryFieldsBuilder.svelte     |  33 +++--
 .../integration/QueryParameterBuilder.svelte  |  21 ++-
 .../components/integration/QueryViewer.svelte | 140 +++++++++---------
 .../pages/[application]/data/_layout.svelte   |   5 +-
 .../[selectedDatasource]/[query]/index.svelte |   2 +
 .../[selectedDatasource]/index.svelte         |  37 +++--
 packages/server/src/integrations/airtable.js  |   1 +
 packages/server/src/integrations/arangodb.js  |   1 +
 packages/server/src/integrations/couchdb.js   |   1 +
 packages/server/src/integrations/dynamodb.js  |   1 +
 .../server/src/integrations/elasticsearch.js  |   1 +
 .../src/integrations/microsoftSqlServer.js    |   1 +
 packages/server/src/integrations/mongodb.js   |   3 +
 packages/server/src/integrations/mysql.js     |   1 +
 packages/server/src/integrations/postgres.js  |   1 +
 packages/server/src/integrations/rest.js      |  30 +++-
 packages/server/src/integrations/s3.js        |   1 +
 25 files changed, 224 insertions(+), 189 deletions(-)
 delete mode 100644 packages/builder/src/components/backend/DatasourceNavigator/modals/CreateQueryModal.svelte

diff --git a/packages/builder/src/components/backend/DataTable/popovers/ManageAccessPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/ManageAccessPopover.svelte
index e8f6f6df0b..ee8162c8d4 100644
--- a/packages/builder/src/components/backend/DataTable/popovers/ManageAccessPopover.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/ManageAccessPopover.svelte
@@ -30,7 +30,9 @@
 <div class="popover">
   <h5>Who Can Access This Data?</h5>
   <div class="note">
-    <Label extraSmall grey>Specify the minimum access level role for this data.</Label>
+    <Label extraSmall grey>
+      Specify the minimum access level role for this data.
+    </Label>
   </div>
   <Spacer large />
   <div class="row">
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
index f92224e39a..0239981a83 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
@@ -1,15 +1,33 @@
 <script>
-  import { Input, TextArea, Spacer } from "@budibase/bbui"
+  import { Label, Input, TextArea, Spacer } from "@budibase/bbui"
+  import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
 
   export let integration
 </script>
 
 <form>
   {#each Object.keys(integration) as configKey}
-    <Input
-      type={integration[configKey].type}
-      label={configKey}
-      bind:value={integration[configKey]} />
-    <Spacer large />
+    <div class="form-row">
+      {#if typeof integration[configKey] === 'object'}
+        <Label small>{configKey}</Label>
+        <KeyValueBuilder bind:object={integration[configKey]} />
+      {:else}
+        <Label small>{configKey}</Label>
+        <Input
+          outline
+          type={integration[configKey].type}
+          bind:value={integration[configKey]} />
+      {/if}
+    </div>
   {/each}
 </form>
+
+<style>
+  .form-row {
+    display: grid;
+    grid-template-columns: 20% 1fr;
+    grid-gap: var(--spacing-l);
+    align-items: center;
+    margin-bottom: var(--spacing-m);
+  }
+</style>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
index dbe289caba..fe42a1dd9e 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
@@ -2,7 +2,8 @@
   import { onMount } from "svelte"
   import { backendUiStore } from "builderStore"
   import api from "builderStore/api"
-  import { Input, TextArea, Spacer } from "@budibase/bbui"
+  import { Input, Label, TextArea, Spacer } from "@budibase/bbui"
+  import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
   import ICONS from "../icons"
 
   export let integration = {}
@@ -50,16 +51,21 @@
     {/each}
   </div>
 
-  {#if schema}
+  <!-- {#if schema}
     {#each Object.keys(schema) as configKey}
-      <Input
-        thin
-        type={schema[configKey].type}
-        label={configKey}
-        bind:value={integration[configKey]} />
+      {#if schema[configKey].type === 'object'}
+        <Label small>{configKey}</Label>
+        <KeyValueBuilder bind:object={integration[configKey]} />
+      {:else}
+        <Label small>{configKey}</Label>
+        <Input
+          outline
+          type={integration[configKey].type}
+          bind:value={integration[configKey]} />
+      {/if}
       <Spacer medium />
     {/each}
-  {/if}
+  {/if} -->
 </section>
 
 <style>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateQueryModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateQueryModal.svelte
deleted file mode 100644
index 6a98313335..0000000000
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateQueryModal.svelte
+++ /dev/null
@@ -1,61 +0,0 @@
-<script>
-  import { goto, params } from "@sveltech/routify"
-  import { backendUiStore, store } from "builderStore"
-  import { notifier } from "builderStore/store/notifications"
-  import { Input, Label, ModalContent, Button, Spacer } from "@budibase/bbui"
-  import TableIntegrationMenu from "../TableIntegrationMenu/index.svelte"
-  import analytics from "analytics"
-
-  let modal
-  let error = ""
-
-  let name
-  let source
-  let integration
-  let datasource
-
-  function checkValid(evt) {
-    const datasourceName = evt.target.value
-    if (
-      $backendUiStore.datasources?.some(
-        datasource => datasource.name === datasourceName
-      )
-    ) {
-      error = `Datasource with name ${tableName} already exists. Please choose another name.`
-      return
-    }
-    error = ""
-  }
-
-  async function saveDatasource() {
-    const { type, ...config } = integration
-
-    // Create datasource
-    await backendUiStore.actions.datasources.save({
-      name,
-      source: type,
-      config,
-    })
-    notifier.success(`Datasource ${name} created successfully.`)
-    analytics.captureEvent("Datasource Created", { name })
-
-    // Navigate to new datasource
-    $goto(`./datasource/${datasource._id}`)
-  }
-</script>
-
-<ModalContent
-  title="Create Datasource"
-  confirmText="Create"
-  onConfirm={saveDatasource}
-  disabled={error || !name}>
-  <Input
-    data-cy="datasource-name-input"
-    thin
-    label="Datasource Name"
-    on:input={checkValid}
-    bind:value={name}
-    {error} />
-  <Label grey extraSmall>Create Integrated Table from External Source</Label>
-  <TableIntegrationMenu bind:integration />
-</ModalContent>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
index 0331f8ed3b..c2b0e5d346 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
@@ -3,7 +3,6 @@
   import { notifier } from "builderStore/store/notifications"
   import { DropdownMenu, Button, Input } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import IntegrationConfigForm from "../TableIntegrationMenu//IntegrationConfigForm.svelte"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let datasource
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte
index c657bd682f..021d095abc 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte
@@ -1,4 +1,4 @@
-<script>
+<!--<script>
   import { backendUiStore, store, allScreens } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import { DropdownMenu, Button, Input, TextButton, Icon } from "@budibase/bbui"
@@ -17,9 +17,7 @@
   function hideEditor() {
     dropdown?.hide()
   }
-</script>
-
-<div on:click|stopPropagation bind:this={anchor}>
+</script><div on:click|stopPropagation bind:this={anchor}>
   <TextButton text on:click={dropdown.show} active={false}>
     <Icon name="add" />
     Add Parameters
@@ -29,11 +27,9 @@
       <ParameterBuilder bind:parameters {bindable} />
     </div>
   </DropdownMenu>
-</div>
-
-<style>
+</div><style>
   .wrapper {
     padding: var(--spacing-xl);
     min-width: 600px;
   }
-</style>
+</style>-->
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
index 92a541ac1d..dc07b31645 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
@@ -3,7 +3,6 @@
   import { notifier } from "builderStore/store/notifications"
   import { DropdownMenu, Button, Input } from "@budibase/bbui"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import IntegrationConfigForm from "../TableIntegrationMenu//IntegrationConfigForm.svelte"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let query
diff --git a/packages/builder/src/components/integration/KeyValueBuilder.svelte b/packages/builder/src/components/integration/KeyValueBuilder.svelte
index 7b4962edcb..53f698e3f8 100644
--- a/packages/builder/src/components/integration/KeyValueBuilder.svelte
+++ b/packages/builder/src/components/integration/KeyValueBuilder.svelte
@@ -3,7 +3,7 @@
 
   export let object = {}
 
-  let fields = []
+  let fields = Object.entries(object).map(([name, value]) => ({ name, value }))
 
   $: object = fields.reduce(
     (acc, next) => ({ ...acc, [next.name]: next.value }),
diff --git a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
index 972bc2c373..9168a01d11 100644
--- a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
@@ -22,35 +22,36 @@
   function updateCustomFields({ detail }) {
     fields.customData = detail.value
   }
-
 </script>
 
 <form on:submit|preventDefault>
   <div class="field">
     {#each schemaKeys as field}
-      {#if schema.fields[field]?.type === "object"}
+      {#if schema.fields[field]?.type === 'object'}
         <div>
           <Label extraSmall grey>{field}</Label>
-          <KeyValueBuilder bind:object={fields[field]} /> 
+          <KeyValueBuilder bind:object={fields[field]} />
         </div>
-      {:else if schema.fields[field]?.type === "json"}
+      {:else if schema.fields[field]?.type === 'json'}
         <div>
           <Label extraSmall grey>{field}</Label>
           <Editor
             mode="json"
-            on:change={({ detail }) => fields[field] = detail.value}
+            on:change={({ detail }) => (fields[field] = detail.value)}
             readOnly={!editable}
             value={fields[field]} />
         </div>
       {:else}
-        <Input
-          label={field}
-          placeholder="Enter {field} name"
-          outline
-          disabled={!editable}
-          type={schema.fields[field]?.type}
-          required={schema.fields[field]?.required}
-          bind:value={fields[field]} />
+        <div class="horizontal">
+          <Label small>{field}</Label>
+          <Input
+            placeholder="Enter {field} name"
+            outline
+            disabled={!editable}
+            type={schema.fields[field]?.type}
+            required={schema.fields[field]?.required}
+            bind:value={fields[field]} />
+        </div>
       {/if}
     {/each}
   </div>
@@ -73,4 +74,10 @@
     align-items: center;
   }
 
+  .horizontal {
+    display: grid;
+    grid-template-columns: 20% 1fr;
+    grid-gap: var(--spacing-l);
+    align-items: center;
+  }
 </style>
diff --git a/packages/builder/src/components/integration/QueryParameterBuilder.svelte b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
index d7eaa3bec1..8b9a3f2ba9 100644
--- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Button, Input, Heading, Spacer } from "@budibase/bbui"
+  import { Body, Button, Input, Heading, Spacer } from "@budibase/bbui"
   import BindableInput from "components/common/BindableInput.svelte"
   import {
     readableToRuntimeBinding,
@@ -30,7 +30,16 @@
 </script>
 
 <section>
-  <Heading extraSmall black>Parameters</Heading>
+  <div class="controls">
+    <Heading small>Parameters</Heading>
+    {#if !bindable}
+      <Button secondary on:click={newQueryParameter}>Add Param</Button>
+    {/if}
+  </div>
+  <Body small grey>
+    Parameters come in two parts: the parameter name, and a default/fallback
+    value.
+  </Body>
   <Spacer large />
   <div class="parameters" class:bindable>
     {#each parameters as parameter, idx}
@@ -59,9 +68,6 @@
       {/if}
     {/each}
   </div>
-  {#if !bindable}
-    <Button secondary on:click={newQueryParameter}>Add Parameter</Button>
-  {/if}
 </section>
 
 <style>
@@ -69,6 +75,11 @@
     grid-template-columns: 1fr 1fr 1fr;
   }
 
+  .controls {
+    display: flex;
+    justify-content: space-between;
+  }
+
   .parameters {
     display: grid;
     grid-template-columns: 1fr 1fr 5%;
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index c53441941b..a6979ba749 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -4,6 +4,7 @@
   import {
     Select,
     Button,
+    Body,
     Label,
     Input,
     TextArea,
@@ -16,7 +17,7 @@
   import { FIELDS } from "constants/backend"
   import IntegrationQueryEditor from "components/integration/index.svelte"
   import ExternalDataSourceTable from "components/backend/DataTable/ExternalDataSourceTable.svelte"
-  import EditQueryParamsPopover from "components/backend/DatasourceNavigator/popovers/EditQueryParamsPopover.svelte"
+  import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
   import { backendUiStore } from "builderStore"
 
   const PREVIEW_HEADINGS = [
@@ -60,8 +61,8 @@
 
   $: datasourceType = datasource?.source
 
-  $: config = $backendUiStore.integrations[datasourceType]?.query
-  $: docsLink = $backendUiStore.integrations[datasourceType]?.docs
+  $: integrationInfo = $backendUiStore.integrations[datasourceType]
+  $: queryConfig = integrationInfo?.query
 
   $: shouldShowQueryConfig = config && query.queryVerb
 
@@ -130,63 +131,99 @@
   }
 </script>
 
-<header>
-  <div class="input">
+<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} />
+  </div>
+  <Spacer medium />
+  {#if queryConfig}
+    <div class="config-field">
+      <Label small>Function</Label>
+      <Select primary outline thin bind:value={query.queryVerb}>
+        {#each Object.keys(queryConfig) as queryVerb}
+          <option value={queryVerb}>{queryConfig[queryVerb]?.displayName || queryVerb}</option>
+        {/each}
+      </Select>
+    </div>
+    <Spacer medium />
+    <hr />
+    <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
+    <hr />
+  {/if}
+  <!-- <div class="input">
     <div class="label">Enter query name:</div>
     <Input outline border bind:value={query.name} />
-  </div>
-  {#if config}
-    <div class="props">
-      <div class="query-type">
+  </div> -->
+  <!-- {#if config} -->
+  <!-- <div class="props"> -->
+  <!-- <div class="query-type">
         Query type:
         <span class="query-type-span">{config[query.queryVerb].type}</span>
-      </div>
-      <div class="select">
+      </div> -->
+  <!-- <div class="select">
         <Select primary thin bind:value={query.queryVerb}>
           {#each Object.keys(config) as queryVerb}
             <option value={queryVerb}>{queryVerb}</option>
           {/each}
         </Select>
-      </div>
-    </div>
+      </div> -->
+  <!-- </div>
     <EditQueryParamsPopover
       bind:parameters={query.parameters}
-      bindable={false} />
-  {/if}
-</header>
-<Spacer extraLarge />
+      bindable={false} /> -->
+  <!-- {/if} -->
+</section>
+<Spacer large />
 
 {#if shouldShowQueryConfig}
   <section>
     <div class="config">
+      <Heading small>Fields</Heading>
+      <Spacer medium />
       <IntegrationQueryEditor
         {query}
         schema={config[query.queryVerb]}
         bind:parameters />
 
-      <Spacer extraLarge />
-      <Spacer large />
+      <Spacer medium />
+      <hr />
+      <Spacer medium />
 
       <div class="viewer-controls">
+        <Heading small>Query Results</Heading>
         <Button
-          blue
+          secondary
+          thin
           disabled={data.length === 0 || !query.name}
           on:click={saveQuery}>
           Save Query
         </Button>
-        <Button primary on:click={previewQuery}>Run Query</Button>
+        <Button thin primary on:click={previewQuery}>Run Query</Button>
       </div>
-
+      <Body small grey>
+        Below, you can preview the results from your query and change the
+        schema.
+      </Body>
       <section class="viewer">
         {#if data}
           <Switcher headings={PREVIEW_HEADINGS} bind:value={tab}>
             {#if tab === 'JSON'}
-            <pre class="preview">
+              <pre class="preview">
               {#if !data[0]}
+                  
                 Please run your query to fetch some data.
-              {:else}
-                {JSON.stringify(data[0], undefined, 2)}
-              {/if}
+
+                {:else}
+                  {JSON.stringify(data[0], undefined, 2)}
+                {/if}
             </pre>
             {:else if tab === 'PREVIEW'}
               <ExternalDataSourceTable {query} {data} />
@@ -222,28 +259,16 @@
 {/if}
 
 <style>
-  .input {
-    width: 500px;
-    display: flex;
+  .config-field {
+    display: grid;
+    grid-template-columns: 20% 1fr;
+    grid-gap: var(--spacing-l);
     align-items: center;
   }
 
-  .select {
-    width: 200px;
-    margin-right: 40px;
-  }
-
-  .props {
-    display: flex;
-    flex-direction: row;
-    margin-left: auto;
-    align-items: center;
-    gap: var(--layout-l);
-  }
-
   .field {
     display: grid;
-    grid-template-columns: 1fr 1fr 50px;
+    grid-template-columns: 1fr 1fr 5%;
     gap: var(--spacing-l);
   }
 
@@ -260,12 +285,6 @@
     cursor: pointer;
   }
 
-  .query-type {
-    font-family: var(--font-sans);
-    color: var(--grey-8);
-    font-size: var(--font-size-s);
-  }
-
   .query-type-span {
     text-transform: uppercase;
   }
@@ -278,31 +297,18 @@
     white-space: pre-wrap;
   }
 
-  header {
-    display: flex;
-    align-items: center;
-  }
-
   .viewer-controls {
     display: flex;
     flex-direction: row;
-    margin-left: auto;
-    direction: rtl;
-    z-index: 5;
+    /* margin-left: auto; */
+    /* direction: rtl; */
+    /* z-index: 5; */
     gap: var(--spacing-m);
     min-width: 150px;
   }
 
   .viewer {
-    margin-top: -28px;
-    z-index: -2;
-  }
-
-  .label {
-    font-family: var(--font-sans);
-    color: var(--grey-8);
-    font-size: var(--font-size-s);
-    margin-right: 8px;
-    font-weight: 600;
+    /* margin-top: -28px; */
+    /* z-index: -2; */
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/data/_layout.svelte b/packages/builder/src/pages/[application]/data/_layout.svelte
index ccf55ab602..84b3e2a29a 100644
--- a/packages/builder/src/pages/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/[application]/data/_layout.svelte
@@ -8,11 +8,11 @@
 
   const tabs = [
     {
-      title: "Tables",
+      title: "Internal",
       key: "table",
     },
     {
-      title: "Data Sources",
+      title: "External",
       key: "datasource",
     },
   ]
@@ -67,6 +67,7 @@
     justify-content: flex-start;
     align-items: stretch;
     gap: var(--spacing-l);
+    background: var(--background);
   }
 
   .nav {
diff --git a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
index c2419dd9a6..b7ea3b8218 100644
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
@@ -36,6 +36,8 @@
 <style>
   section {
     overflow: scroll;
+    width: 800px;
+    margin: 0 auto;
   }
   ::-webkit-scrollbar {
     width: 0px;
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 fc40923eca..197baea112 100644
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
@@ -1,9 +1,10 @@
 <script>
   import { goto } from "@sveltech/routify"
-  import { Button, Spacer, Icon } from "@budibase/bbui"
+  import { Button, Heading, Body, Spacer, Icon } from "@budibase/bbui"
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
+  import ICONS from "components/backend/DatasourceNavigator/icons"
 
   $: datasource = $backendUiStore.datasources.find(
     ds => ds._id === $backendUiStore.selectedDatasourceId
@@ -28,22 +29,35 @@
   <section>
     <Spacer medium />
     <header>
+      <div class="datasource-icon">
+        <svelte:component
+          this={ICONS[datasource.source]}
+          height="30"
+          width="30" />
+      </div>
       <h3 class="section-title">{datasource.name}</h3>
     </header>
     <Spacer extraLarge />
     <div class="container">
+
       <div class="config-header">
-        <h5>Configuration</h5>
+        <Heading small>Configuration</Heading>
         <Button secondary on:click={saveDatasource}>Save</Button>
       </div>
+      <Body small grey>
+        Connect your database to Budibase using the config below.
+      </Body>
+
       <Spacer medium />
       <IntegrationConfigForm integration={datasource.config} />
-    </div>
-    <Spacer extraLarge />
-    <div class="container">
+
+      <hr />
+
+      <Spacer extraLarge />
+
       <div class="query-header">
-        <h5>Queries</h5>
-        <Button blue on:click={() => $goto('../new')}>Create Query</Button>
+        <Heading small>Queries</Heading>
+        <Button secondary on:click={() => $goto('../new')}>Add Query</Button>
       </div>
       <Spacer extraLarge />
       <div class="query-list">
@@ -54,7 +68,6 @@
             <p>→</p>
           </div>
         {/each}
-        <Spacer medium />
       </div>
     </div>
   </section>
@@ -71,6 +84,8 @@
 
   header {
     margin: 0 0 var(--spacing-xs) 0;
+    display: flex;
+    gap: var(--spacing-m);
   }
 
   .section-title {
@@ -85,13 +100,12 @@
 
   .container {
     border-radius: var(--border-radius-m);
-    background: var(--background);
-    padding: var(--layout-s);
     margin: 0 auto;
   }
 
   h5 {
     margin: 0 !important;
+    font-size: var(--font-size-l);
   }
 
   .query-header {
@@ -115,7 +129,8 @@
     display: grid;
     grid-template-columns: 2fr 0.75fr 20px;
     align-items: center;
-    padding: var(--spacing-m) var(--layout-xs);
+    padding-left: var(--spacing-m);
+    padding-right: var(--spacing-m);
     gap: var(--layout-xs);
     transition: 200ms background ease;
   }
diff --git a/packages/server/src/integrations/airtable.js b/packages/server/src/integrations/airtable.js
index 2a581527a8..cae394edff 100644
--- a/packages/server/src/integrations/airtable.js
+++ b/packages/server/src/integrations/airtable.js
@@ -3,6 +3,7 @@ const { FIELD_TYPES, QUERY_TYPES } = require("./Integration")
 
 const SCHEMA = {
   docs: "https://airtable.com/api",
+  friendlyName: "Airtable",
   datasource: {
     apiKey: {
       type: FIELD_TYPES.STRING,
diff --git a/packages/server/src/integrations/arangodb.js b/packages/server/src/integrations/arangodb.js
index 10449fc967..e14118e848 100644
--- a/packages/server/src/integrations/arangodb.js
+++ b/packages/server/src/integrations/arangodb.js
@@ -3,6 +3,7 @@ const { FIELD_TYPES, QUERY_TYPES } = require("./Integration")
 
 const SCHEMA = {
   docs: "https://github.com/arangodb/arangojs",
+  friendlyName: "ArangoDB",
   datasource: {
     url: {
       type: FIELD_TYPES.STRING,
diff --git a/packages/server/src/integrations/couchdb.js b/packages/server/src/integrations/couchdb.js
index 6fcfe27784..ab3cd8d437 100644
--- a/packages/server/src/integrations/couchdb.js
+++ b/packages/server/src/integrations/couchdb.js
@@ -3,6 +3,7 @@ const { FIELD_TYPES, QUERY_TYPES } = require("./Integration")
 
 const SCHEMA = {
   docs: "https://docs.couchdb.org/en/stable/",
+  friendlyName: "CouchDB",
   datasource: {
     url: {
       type: FIELD_TYPES.STRING,
diff --git a/packages/server/src/integrations/dynamodb.js b/packages/server/src/integrations/dynamodb.js
index 6f3c5787ba..36115f9166 100644
--- a/packages/server/src/integrations/dynamodb.js
+++ b/packages/server/src/integrations/dynamodb.js
@@ -3,6 +3,7 @@ const { FIELD_TYPES, QUERY_TYPES } = require("./Integration")
 
 const SCHEMA = {
   docs: "https://github.com/dabit3/dynamodb-documentclient-cheat-sheet",
+  friendlyName: "DynamoDB",
   datasource: {
     region: {
       type: FIELD_TYPES.STRING,
diff --git a/packages/server/src/integrations/elasticsearch.js b/packages/server/src/integrations/elasticsearch.js
index eba82a8924..23c4f6fe57 100644
--- a/packages/server/src/integrations/elasticsearch.js
+++ b/packages/server/src/integrations/elasticsearch.js
@@ -4,6 +4,7 @@ const { QUERY_TYPES, FIELD_TYPES } = require("./Integration")
 const SCHEMA = {
   docs:
     "https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/current/index.html",
+  friendlyName: "ElasticSearch",
   datasource: {
     url: {
       type: "string",
diff --git a/packages/server/src/integrations/microsoftSqlServer.js b/packages/server/src/integrations/microsoftSqlServer.js
index c99f4ed39f..4f4da88cc3 100644
--- a/packages/server/src/integrations/microsoftSqlServer.js
+++ b/packages/server/src/integrations/microsoftSqlServer.js
@@ -3,6 +3,7 @@ const { FIELD_TYPES } = require("./Integration")
 
 const SCHEMA = {
   docs: "https://github.com/tediousjs/node-mssql",
+  friendlyName: "MS SQL Server",
   datasource: {
     user: {
       type: FIELD_TYPES.STRING,
diff --git a/packages/server/src/integrations/mongodb.js b/packages/server/src/integrations/mongodb.js
index 944d315b05..ed7faf370e 100644
--- a/packages/server/src/integrations/mongodb.js
+++ b/packages/server/src/integrations/mongodb.js
@@ -3,6 +3,9 @@ const { FIELD_TYPES, QUERY_TYPES } = require("./Integration")
 
 const SCHEMA = {
   docs: "https://github.com/mongodb/node-mongodb-native",
+  friendlyName: "MongoDB",
+  description:
+    "MongoDB is a general purpose, document-based, distributed database built for modern application developers and for the cloud era.",
   datasource: {
     connectionString: {
       type: FIELD_TYPES.STRING,
diff --git a/packages/server/src/integrations/mysql.js b/packages/server/src/integrations/mysql.js
index cbe5a2106b..fe0f8e3f8b 100644
--- a/packages/server/src/integrations/mysql.js
+++ b/packages/server/src/integrations/mysql.js
@@ -3,6 +3,7 @@ const { FIELD_TYPES, QUERY_TYPES } = require("./Integration")
 
 const SCHEMA = {
   docs: "https://github.com/mysqljs/mysql",
+  friendlyName: "MySQL",
   datasource: {
     host: {
       type: FIELD_TYPES.STRING,
diff --git a/packages/server/src/integrations/postgres.js b/packages/server/src/integrations/postgres.js
index fd5b1fe96f..4d13048ae6 100644
--- a/packages/server/src/integrations/postgres.js
+++ b/packages/server/src/integrations/postgres.js
@@ -2,6 +2,7 @@ const { Client } = require("pg")
 
 const SCHEMA = {
   docs: "https://node-postgres.com",
+  friendlyName: "PostgreSQL",
   datasource: {
     host: {
       type: "string",
diff --git a/packages/server/src/integrations/rest.js b/packages/server/src/integrations/rest.js
index 1496ae764b..d90a0ce2a1 100644
--- a/packages/server/src/integrations/rest.js
+++ b/packages/server/src/integrations/rest.js
@@ -3,15 +3,22 @@ const { FIELD_TYPES, QUERY_TYPES } = require("./Integration")
 
 const SCHEMA = {
   docs: "https://github.com/node-fetch/node-fetch",
+  friendlyName: "REST API",
   datasource: {
     url: {
       type: FIELD_TYPES.STRING,
       default: "localhost",
       required: true,
     },
+    defaultHeaders: {
+      type: FIELD_TYPES.OBJECT,
+      required: false,
+      default: {},
+    },
   },
   query: {
     create: {
+      displayName: "POST",
       type: QUERY_TYPES.FIELDS,
       fields: {
         path: {
@@ -26,6 +33,7 @@ const SCHEMA = {
       },
     },
     read: {
+      displayName: "GET",
       type: QUERY_TYPES.FIELDS,
       fields: {
         path: {
@@ -37,6 +45,7 @@ const SCHEMA = {
       },
     },
     update: {
+      displayName: "PUT",
       type: QUERY_TYPES.FIELDS,
       fields: {
         path: {
@@ -51,6 +60,7 @@ const SCHEMA = {
       },
     },
     delete: {
+      displayName: "DELETE",
       type: QUERY_TYPES.FIELDS,
       fields: {
         path: {
@@ -75,7 +85,10 @@ class RestIntegration {
   async create({ path, headers = {}, json }) {
     const response = await fetch(this.config.url + path, {
       method: "POST",
-      headers,
+      headers: {
+        ...this.config.defaultHeaders,
+        ...headers,
+      },
       body: JSON.stringify(json),
     })
 
@@ -84,7 +97,10 @@ class RestIntegration {
 
   async read({ path, headers = {} }) {
     const response = await fetch(this.config.url + path, {
-      headers,
+      headers: {
+        ...this.config.defaultHeaders,
+        ...headers,
+      },
     })
 
     return await response.json()
@@ -93,7 +109,10 @@ class RestIntegration {
   async update({ path, headers = {}, json }) {
     const response = await fetch(this.config.url + path, {
       method: "POST",
-      headers,
+      headers: {
+        ...this.config.defaultHeaders,
+        ...headers,
+      },
       body: JSON.stringify(json),
     })
 
@@ -103,7 +122,10 @@ class RestIntegration {
   async delete({ path, headers = {} }) {
     const response = await fetch(this.config.url + path, {
       method: "DELETE",
-      headers,
+      headers: {
+        ...this.config.defaultHeaders,
+        ...headers,
+      },
     })
 
     return await response.json()
diff --git a/packages/server/src/integrations/s3.js b/packages/server/src/integrations/s3.js
index d17906d891..5eb038819d 100644
--- a/packages/server/src/integrations/s3.js
+++ b/packages/server/src/integrations/s3.js
@@ -2,6 +2,7 @@ const AWS = require("aws-sdk")
 
 const SCHEMA = {
   docs: "https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html",
+  friendlyName: "Amazon S3",
   datasource: {
     region: {
       type: "string",