From 298ef3036017be7d3ffdaebee0bccb97624a01f2 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 26 Nov 2020 14:43:56 +0000
Subject: [PATCH 01/70] budibase postgres E2E working

---
 .../DataTable/ExternalDataSourceTable.svelte  | 32 +++++++
 .../EditIntegrationConfigButton.svelte        | 43 ++++++++++
 .../modals/EditIntegrationConfig.svelte       | 69 +++++++++++++++
 .../IntegrationConfigForm.svelte              | 15 ++++
 .../TableIntegrationMenu/index.svelte         | 52 ++++++++++++
 .../modals/CreateTableModal.svelte            |  7 ++
 .../popovers/EditTablePopover.svelte          |  6 +-
 .../data/table/[selectedTable]/index.svelte   | 11 ++-
 packages/server/package.json                  |  1 +
 .../server/src/api/controllers/integration.js |  8 ++
 packages/server/src/api/controllers/row.js    | 12 ++-
 packages/server/src/api/routes/index.js       |  2 +
 packages/server/src/api/routes/integration.js | 10 +++
 .../server/src/integrations/Integration.js    |  7 ++
 packages/server/src/integrations/index.js     | 14 ++++
 packages/server/src/integrations/postgres.js  | 48 +++++++++++
 packages/server/yarn.lock                     | 83 +++++++++++++++++++
 17 files changed, 416 insertions(+), 4 deletions(-)
 create mode 100644 packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
 create mode 100644 packages/builder/src/components/backend/DataTable/buttons/EditIntegrationConfigButton.svelte
 create mode 100644 packages/builder/src/components/backend/DataTable/modals/EditIntegrationConfig.svelte
 create mode 100644 packages/builder/src/components/backend/TableNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
 create mode 100644 packages/builder/src/components/backend/TableNavigator/TableIntegrationMenu/index.svelte
 create mode 100644 packages/server/src/api/controllers/integration.js
 create mode 100644 packages/server/src/api/routes/integration.js
 create mode 100644 packages/server/src/integrations/Integration.js
 create mode 100644 packages/server/src/integrations/index.js
 create mode 100644 packages/server/src/integrations/postgres.js

diff --git a/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte b/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
new file mode 100644
index 0000000000..75a5abed82
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
@@ -0,0 +1,32 @@
+<script>
+  import { backendUiStore } from "builderStore"
+  import * as api from "./api"
+  import Table from "./Table.svelte"
+  import EditIntegrationConfigButton from "./buttons/EditIntegrationConfigButton.svelte"
+
+  let data = []
+  let loading = false
+
+  $: table = $backendUiStore.selectedTable
+  $: title = table.name
+  $: schema = table.schema
+  $: tableView = {
+    schema,
+    name: $backendUiStore.selectedView.name,
+  }
+
+  // Fetch rows for specified table
+  $: {
+    if ($backendUiStore.selectedView?.name?.startsWith("all_")) {
+      loading = true
+      api.fetchDataForView($backendUiStore.selectedView).then(rows => {
+        data = rows || []
+        loading = false
+      })
+    }
+  }
+</script>
+
+<Table {title} {schema} {data} allowEditing={true} {loading}>
+  <EditIntegrationConfigButton {table} />
+</Table>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/EditIntegrationConfigButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/EditIntegrationConfigButton.svelte
new file mode 100644
index 0000000000..223fc8b6b1
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/buttons/EditIntegrationConfigButton.svelte
@@ -0,0 +1,43 @@
+<script>
+  import {
+    DropdownMenu,
+    TextButton as Button,
+    Icon,
+    Modal,
+    ModalContent,
+  } from "@budibase/bbui"
+  import { backendUiStore } from "builderStore"
+  import api from "builderStore/api"
+  import EditIntegrationConfig from "../modals/EditIntegrationConfig.svelte"
+
+  export let table
+
+  $: console.log("The table config is", table)
+
+  let modal
+
+  // TODO: revisit
+  async function saveTable() {
+    const SAVE_TABLE_URL = `/api/tables`
+    const response = await api.post(SAVE_TABLE_URL, table)
+    const savedTable = await response.json()
+    await backendUiStore.actions.tables.fetch()
+    backendUiStore.actions.tables.select(savedTable)
+  }
+</script>
+
+<div>
+  <Button text small on:click={modal.show}>
+    <Icon name="edit" />
+    Configure Datasource
+  </Button>
+</div>
+<Modal bind:this={modal}>
+  <ModalContent
+    confirmText="Save"
+    cancelText="Cancel"
+    onConfirm={saveTable}
+    title={'Edit Datasource Configuration'}>
+    <EditIntegrationConfig onClosed={modal.hide} bind:table />
+  </ModalContent>
+</Modal>
diff --git a/packages/builder/src/components/backend/DataTable/modals/EditIntegrationConfig.svelte b/packages/builder/src/components/backend/DataTable/modals/EditIntegrationConfig.svelte
new file mode 100644
index 0000000000..8bd8cecb51
--- /dev/null
+++ b/packages/builder/src/components/backend/DataTable/modals/EditIntegrationConfig.svelte
@@ -0,0 +1,69 @@
+<script>
+  import { Select, Button, Input, TextArea, Heading } from "@budibase/bbui"
+  import { FIELDS } from "constants/backend"
+  import { backendUiStore } from "builderStore"
+
+  export let table
+
+  let fields = []
+
+  $: {
+    const schema = {}
+    for (let field of fields) {
+      if (!field.name) continue
+      schema[field.name] = FIELDS[field.type]
+    }
+    table.schema = schema
+  }
+
+  function newField() {
+    fields = [...fields, {}]
+  }
+
+  function deleteField(idx) {
+    fields.splice(idx, 1)
+    fields = fields
+  }
+</script>
+
+<form>
+  <Heading extraSmall black>Schema</Heading>
+  <!-- {#each Object.keys(table.schema) as schemaKey, idx}
+    <Input
+      thin
+      type={'text'}
+      label={schemaKey}
+      bind:value={table.schema[schemaKey]} />
+  {/each} -->
+  {#each fields as field}
+    <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>
+    </div>
+  {/each}
+
+  <Button thin secondary on:click={newField}>Add Field</Button>
+  <Heading extraSmall black>Datasource</Heading>
+  {#each Object.keys(table.integration) as configKey}
+    <Input
+      thin
+      type={configKey.type}
+      label={configKey}
+      bind:value={table.integration[configKey]} />
+  {/each}
+</form>
+
+<style>
+  .field {
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: 1fr 1fr;
+    margin-bottom: var(--spacing-xs);
+  }
+</style>
diff --git a/packages/builder/src/components/backend/TableNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte b/packages/builder/src/components/backend/TableNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
new file mode 100644
index 0000000000..913e26f668
--- /dev/null
+++ b/packages/builder/src/components/backend/TableNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
@@ -0,0 +1,15 @@
+<script>
+  import { Input, TextArea } from "@budibase/bbui"
+
+  export let integration
+</script>
+
+<form>
+  {#each Object.keys(integration) as configKey}
+    <Input
+      thin
+      type={configKey.type}
+      label={configKey}
+      bind:value={integration[configKey]} />
+  {/each}
+</form>
diff --git a/packages/builder/src/components/backend/TableNavigator/TableIntegrationMenu/index.svelte b/packages/builder/src/components/backend/TableNavigator/TableIntegrationMenu/index.svelte
new file mode 100644
index 0000000000..cdf7ba99f3
--- /dev/null
+++ b/packages/builder/src/components/backend/TableNavigator/TableIntegrationMenu/index.svelte
@@ -0,0 +1,52 @@
+<script>
+  import { onMount } from "svelte"
+  import { Input, TextArea } from "@budibase/bbui"
+  import api from "builderStore/api"
+
+  export let integration = {}
+
+  let integrationsPromise = fetchIntegrations()
+  let selectedIntegration
+
+  async function fetchIntegrations() {
+    const INTEGRATIONS_URL = `/api/integrations`
+    const response = await api.get(INTEGRATIONS_URL)
+    const json = await response.json()
+    return json
+  }
+</script>
+
+<section>
+  {#await integrationsPromise}
+    Loading integrations...
+  {:then integrations}
+    {#each Object.keys(integrations) as integrationType}
+      <div
+        on:click={() => {
+          selectedIntegration = integrations[integrationType]
+          integration.type = integrationType
+        }}>
+        <h6>{integrationType}</h6>
+      </div>
+    {/each}
+  {:catch}
+    shit itself
+  {/await}
+
+  {#if selectedIntegration}
+    {#each Object.keys(selectedIntegration) as configKey}
+      <Input
+        thin
+        type={configKey.type}
+        label={configKey}
+        bind:value={integration[configKey]} />
+    {/each}
+    <TextArea label={'Query'} bind:value={integration.query} />
+  {/if}
+</section>
+
+<style>
+  section {
+    display: grid;
+  }
+</style>
diff --git a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
index f064ff923c..3b9bf80dba 100644
--- a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
@@ -4,6 +4,7 @@
   import { notifier } from "builderStore/store/notifications"
   import { Input, Label, ModalContent } from "@budibase/bbui"
   import TableDataImport from "../TableDataImport.svelte"
+  import TableIntegrationMenu from "../TableIntegrationMenu/index.svelte"
   import analytics from "analytics"
   import screenTemplates from "builderStore/store/screenTemplates"
   import { NEW_ROW_TEMPLATE } from "builderStore/store/screenTemplates/newRowScreen"
@@ -19,6 +20,7 @@
   let modal
   let name
   let dataImport
+  let integration
   let error = ""
 
   function checkValid(evt) {
@@ -35,6 +37,7 @@
       name,
       schema: dataImport.schema || {},
       dataImport,
+      integration
     }
 
     // Only set primary display if defined
@@ -88,4 +91,8 @@
     <Label grey extraSmall>Create Table from CSV (Optional)</Label>
     <TableDataImport bind:dataImport />
   </div>
+  <div>
+    <Label grey extraSmall>Create Integrated Table from External Source</Label>
+    <TableIntegrationMenu bind:integration />
+  </div>
 </ModalContent>
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
index 1fdbe35151..bd9a58e874 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@@ -3,6 +3,7 @@
   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 table
@@ -39,7 +40,7 @@
 
   async function deleteTable() {
     await backendUiStore.actions.tables.delete(table)
-    store.store.actions.screens.delete(templateScreens)
+    store.actions.screens.delete(templateScreens)
     await backendUiStore.actions.tables.fetch()
     notifier.success("Table deleted")
     hideEditor()
@@ -78,6 +79,9 @@
           bind:value={table.name}
           on:input={checkValid}
           {error} />
+        {#if table.integration}
+          <IntegrationConfigForm integration={table.integration} />
+        {/if}
         <footer>
           <Button secondary on:click={hideEditor}>Cancel</Button>
           <Button primary disabled={error} on:click={save}>Save</Button>
diff --git a/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte b/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte
index c71edee2df..89a3604dc1 100644
--- a/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte
@@ -1,13 +1,20 @@
 <script>
   import TableDataTable from "components/backend/DataTable/DataTable.svelte"
+  import ExternalDataSourceTable from "components/backend/DataTable/ExternalDataSourceTable.svelte"
   import { backendUiStore } from "builderStore"
 
   $: selectedTable = $backendUiStore.selectedTable
 </script>
 
 {#if $backendUiStore.selectedDatabase._id && selectedTable.name}
-  <TableDataTable />
-{:else}<i>Create your first table to start building</i>{/if}
+  {#if selectedTable.integration}
+    <ExternalDataSourceTable />
+  {:else}
+    <TableDataTable />
+  {/if}
+{:else}
+  <i>Create your first table to start building</i>
+{/if}
 
 <style>
   i {
diff --git a/packages/server/package.json b/packages/server/package.json
index b4b3ace737..1b09a0d1aa 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -81,6 +81,7 @@
     "lodash": "^4.17.13",
     "mustache": "^4.0.1",
     "node-fetch": "^2.6.0",
+    "pg": "^8.5.1",
     "pino-pretty": "^4.0.0",
     "pouchdb": "^7.2.1",
     "pouchdb-all-dbs": "^1.0.2",
diff --git a/packages/server/src/api/controllers/integration.js b/packages/server/src/api/controllers/integration.js
new file mode 100644
index 0000000000..dcf7b18da0
--- /dev/null
+++ b/packages/server/src/api/controllers/integration.js
@@ -0,0 +1,8 @@
+const { definitions } = require("../../integrations")
+
+exports.fetch = async function(ctx) {
+  // TODO: fetch these from a github repo etc
+  console.log(definitions)
+  ctx.status = 200
+  ctx.body = definitions
+}
diff --git a/packages/server/src/api/controllers/row.js b/packages/server/src/api/controllers/row.js
index ccf26b02e2..443cb298af 100644
--- a/packages/server/src/api/controllers/row.js
+++ b/packages/server/src/api/controllers/row.js
@@ -8,6 +8,7 @@ const {
   SEPARATOR,
 } = require("../../db/utils")
 const { cloneDeep } = require("lodash")
+const { integrations } = require("../../integrations")
 
 const TABLE_VIEW_BEGINS_WITH = `all${SEPARATOR}${DocumentTypes.TABLE}${SEPARATOR}`
 
@@ -145,7 +146,7 @@ exports.fetchView = async function(ctx) {
   const viewName = ctx.params.viewName
 
   // if this is a table view being looked for just transfer to that
-  if (viewName.indexOf(TABLE_VIEW_BEGINS_WITH) === 0) {
+  if (viewName.startsWith(TABLE_VIEW_BEGINS_WITH)) {
     ctx.params.tableId = viewName.substring(4)
     await exports.fetchTableRows(ctx)
     return
@@ -186,6 +187,15 @@ exports.fetchView = async function(ctx) {
 exports.fetchTableRows = async function(ctx) {
   const appId = ctx.user.appId
   const db = new CouchDB(appId)
+
+  const table = await db.get(ctx.params.tableId)
+
+  if (table.integration) {
+    const Integration = integrations[table.integration.type]
+    ctx.body = await new Integration(table.integration).query()
+    return
+  }
+
   const response = await db.allDocs(
     getRowParams(ctx.params.tableId, null, {
       include_docs: true,
diff --git a/packages/server/src/api/routes/index.js b/packages/server/src/api/routes/index.js
index 840f968eb3..a56e39080e 100644
--- a/packages/server/src/api/routes/index.js
+++ b/packages/server/src/api/routes/index.js
@@ -16,6 +16,7 @@ const apiKeysRoutes = require("./apikeys")
 const templatesRoutes = require("./templates")
 const analyticsRoutes = require("./analytics")
 const routingRoutes = require("./routing")
+const integrationRoutes = require("./integration")
 
 exports.mainRoutes = [
   deployRoutes,
@@ -32,6 +33,7 @@ exports.mainRoutes = [
   analyticsRoutes,
   webhookRoutes,
   routingRoutes,
+  integrationRoutes,
   // these need to be handled last as they still use /api/:tableId
   // this could be breaking as koa may recognise other routes as this
   tableRoutes,
diff --git a/packages/server/src/api/routes/integration.js b/packages/server/src/api/routes/integration.js
new file mode 100644
index 0000000000..93c64d5133
--- /dev/null
+++ b/packages/server/src/api/routes/integration.js
@@ -0,0 +1,10 @@
+const Router = require("@koa/router")
+const controller = require("../controllers/integration")
+const authorized = require("../../middleware/authorized")
+const { BUILDER } = require("../../utilities/security/permissions")
+
+const router = Router()
+
+router.get("/api/integrations", authorized(BUILDER), controller.fetch)
+
+module.exports = router
diff --git a/packages/server/src/integrations/Integration.js b/packages/server/src/integrations/Integration.js
new file mode 100644
index 0000000000..ba0fa64d53
--- /dev/null
+++ b/packages/server/src/integrations/Integration.js
@@ -0,0 +1,7 @@
+class Integration {
+  definition() {
+    return this.options
+  }
+}
+
+module.exports = Integration
diff --git a/packages/server/src/integrations/index.js b/packages/server/src/integrations/index.js
new file mode 100644
index 0000000000..10b0c02186
--- /dev/null
+++ b/packages/server/src/integrations/index.js
@@ -0,0 +1,14 @@
+const postgres = require("./postgres")
+
+const DEFINITIONS = {
+  POSTGRES: postgres.schema,
+}
+
+const INTEGRATIONS = {
+  POSTGRES: postgres.integration,
+}
+
+module.exports = {
+  definitions: DEFINITIONS,
+  integrations: INTEGRATIONS,
+}
diff --git a/packages/server/src/integrations/postgres.js b/packages/server/src/integrations/postgres.js
new file mode 100644
index 0000000000..db2d0eadab
--- /dev/null
+++ b/packages/server/src/integrations/postgres.js
@@ -0,0 +1,48 @@
+const { Client } = require("pg")
+
+const POSTGRES_OPTIONS = {
+  host: {
+    type: "string",
+    required: true,
+    default: "localhost",
+  },
+  port: {
+    type: "number",
+    required: true,
+    default: 5432,
+  },
+  database: {
+    type: "string",
+    default: "postgres",
+  },
+  username: {
+    type: "string",
+    default: "root",
+  },
+  password: {
+    type: "password",
+    default: "root",
+  },
+}
+
+class PostgresIntegration {
+  constructor(config) {
+    this.config = config
+    this.client = new Client(config)
+    this.connect()
+  }
+
+  async connect() {
+    return this.client.connect()
+  }
+
+  async query() {
+    const response = await this.client.query(this.config.query)
+    return response.rows
+  }
+}
+
+module.exports = {
+  schema: POSTGRES_OPTIONS,
+  integration: PostgresIntegration,
+}
diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index 9e6671405c..65f13dae86 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -1588,6 +1588,11 @@ buffer-from@1.1.1, buffer-from@^1.0.0:
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
   integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
 
+buffer-writer@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-writer/-/buffer-writer-2.0.0.tgz#ce7eb81a38f7829db09c873f2fbb792c0c98ec04"
+  integrity sha512-a7ZpuTZU1TRtnwyCNW3I5dc0wWNC3VR9S++Ewyk2HHZdrO3CQJqSpd+95Us590V6AL7JqUAH2IwZ/398PmNFgw==
+
 buffer@4.9.2:
   version "4.9.2"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.2.tgz#230ead344002988644841ab0244af8c44bbe3ef8"
@@ -5883,6 +5888,11 @@ package-json@^6.3.0:
     registry-url "^5.0.0"
     semver "^6.2.0"
 
+packet-reader@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/packet-reader/-/packet-reader-1.0.0.tgz#9238e5480dedabacfe1fe3f2771063f164157d74"
+  integrity sha512-HAKu/fG3HpHFO0AA8WE8q2g+gBJaZ9MG7fcKk+IJPLTGAD6Psw4443l+9DGRbOIh3/aXr7Phy0TjilYivJo5XQ==
+
 pako@^1.0.5:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
@@ -6000,6 +6010,57 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
+pg-connection-string@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/pg-connection-string/-/pg-connection-string-2.4.0.tgz#c979922eb47832999a204da5dbe1ebf2341b6a10"
+  integrity sha512-3iBXuv7XKvxeMrIgym7njT+HlZkwZqqGX4Bu9cci8xHZNT+Um1gWKqCsAzcC0d95rcKMU5WBg6YRUcHyV0HZKQ==
+
+pg-int8@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/pg-int8/-/pg-int8-1.0.1.tgz#943bd463bf5b71b4170115f80f8efc9a0c0eb78c"
+  integrity sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==
+
+pg-pool@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/pg-pool/-/pg-pool-3.2.2.tgz#a560e433443ed4ad946b84d774b3f22452694dff"
+  integrity sha512-ORJoFxAlmmros8igi608iVEbQNNZlp89diFVx6yV5v+ehmpMY9sK6QgpmgoXbmkNaBAx8cOOZh9g80kJv1ooyA==
+
+pg-protocol@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/pg-protocol/-/pg-protocol-1.4.0.tgz#43a71a92f6fe3ac559952555aa3335c8cb4908be"
+  integrity sha512-El+aXWcwG/8wuFICMQjM5ZSAm6OWiJicFdNYo+VY3QP+8vI4SvLIWVe51PppTzMhikUJR+PsyIFKqfdXPz/yxA==
+
+pg-types@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/pg-types/-/pg-types-2.2.0.tgz#2d0250d636454f7cfa3b6ae0382fdfa8063254a3"
+  integrity sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==
+  dependencies:
+    pg-int8 "1.0.1"
+    postgres-array "~2.0.0"
+    postgres-bytea "~1.0.0"
+    postgres-date "~1.0.4"
+    postgres-interval "^1.1.0"
+
+pg@^8.5.1:
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/pg/-/pg-8.5.1.tgz#34dcb15f6db4a29c702bf5031ef2e1e25a06a120"
+  integrity sha512-9wm3yX9lCfjvA98ybCyw2pADUivyNWT/yIP4ZcDVpMN0og70BUWYEGXPCTAQdGTAqnytfRADb7NERrY1qxhIqw==
+  dependencies:
+    buffer-writer "2.0.0"
+    packet-reader "1.0.0"
+    pg-connection-string "^2.4.0"
+    pg-pool "^3.2.2"
+    pg-protocol "^1.4.0"
+    pg-types "^2.1.0"
+    pgpass "1.x"
+
+pgpass@1.x:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/pgpass/-/pgpass-1.0.4.tgz#85eb93a83800b20f8057a2b029bf05abaf94ea9c"
+  integrity sha512-YmuA56alyBq7M59vxVBfPJrGSozru8QAdoNlWuW3cz8l+UX3cWge0vTvjKhsSHSJpo3Bom8/Mm6hf0TR5GY0+w==
+  dependencies:
+    split2 "^3.1.1"
+
 phin@^2.9.1:
   version "2.9.3"
   resolved "https://registry.yarnpkg.com/phin/-/phin-2.9.3.tgz#f9b6ac10a035636fb65dfc576aaaa17b8743125c"
@@ -6116,6 +6177,28 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
+postgres-array@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/postgres-array/-/postgres-array-2.0.0.tgz#48f8fce054fbc69671999329b8834b772652d82e"
+  integrity sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==
+
+postgres-bytea@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/postgres-bytea/-/postgres-bytea-1.0.0.tgz#027b533c0aa890e26d172d47cf9ccecc521acd35"
+  integrity sha1-AntTPAqokOJtFy1Hz5zOzFIazTU=
+
+postgres-date@~1.0.4:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/postgres-date/-/postgres-date-1.0.7.tgz#51bc086006005e5061c591cee727f2531bf641a8"
+  integrity sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==
+
+postgres-interval@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postgres-interval/-/postgres-interval-1.2.0.tgz#b460c82cb1587507788819a06aa0fffdb3544695"
+  integrity sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==
+  dependencies:
+    xtend "^4.0.0"
+
 pouch-stream@^0.4.0:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/pouch-stream/-/pouch-stream-0.4.1.tgz#0c6d8475c9307677627991a2f079b301c3b89bdd"

From fbf501aebc0a4b16e5715e0b4fc875a4998f319b Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 26 Nov 2020 16:46:36 +0000
Subject: [PATCH 02/70] mongoDB end to end

---
 .../DataTable/ExternalDataSourceTable.svelte  |  2 +-
 .../EditIntegrationConfigButton.svelte        |  2 +-
 .../modals/EditIntegrationConfig.svelte       | 92 ++++++++++++-------
 .../TableIntegrationMenu/index.svelte         | 48 ++++++++--
 packages/server/package.json                  |  1 +
 .../server/src/integrations/Integration.js    |  7 --
 packages/server/src/integrations/dynamodb.js  | 64 +++++++++++++
 packages/server/src/integrations/index.js     | 10 ++
 packages/server/src/integrations/mongodb.js   | 49 ++++++++++
 packages/server/src/integrations/postgres.js  |  4 +
 packages/server/yarn.lock                     | 65 ++++++++++++-
 11 files changed, 293 insertions(+), 51 deletions(-)
 create mode 100644 packages/server/src/integrations/dynamodb.js
 create mode 100644 packages/server/src/integrations/mongodb.js

diff --git a/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte b/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
index 75a5abed82..33d107e1c5 100644
--- a/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
@@ -27,6 +27,6 @@
   }
 </script>
 
-<Table {title} {schema} {data} allowEditing={true} {loading}>
+<Table {title} {schema} {data} {loading}>
   <EditIntegrationConfigButton {table} />
 </Table>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/EditIntegrationConfigButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/EditIntegrationConfigButton.svelte
index 223fc8b6b1..e78e7ac93d 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/EditIntegrationConfigButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/EditIntegrationConfigButton.svelte
@@ -37,7 +37,7 @@
     confirmText="Save"
     cancelText="Cancel"
     onConfirm={saveTable}
-    title={'Edit Datasource Configuration'}>
+    title={'Datasource Configuration'}>
     <EditIntegrationConfig onClosed={modal.hide} bind:table />
   </ModalContent>
 </Modal>
diff --git a/packages/builder/src/components/backend/DataTable/modals/EditIntegrationConfig.svelte b/packages/builder/src/components/backend/DataTable/modals/EditIntegrationConfig.svelte
index 8bd8cecb51..48bb22320c 100644
--- a/packages/builder/src/components/backend/DataTable/modals/EditIntegrationConfig.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/EditIntegrationConfig.svelte
@@ -1,11 +1,21 @@
 <script>
-  import { Select, Button, Input, TextArea, Heading } from "@budibase/bbui"
+  import {
+    Select,
+    Button,
+    Input,
+    TextArea,
+    Heading,
+    Spacer,
+  } from "@budibase/bbui"
   import { FIELDS } from "constants/backend"
   import { backendUiStore } from "builderStore"
 
   export let table
 
-  let fields = []
+  let fields = Object.keys(table.schema).map(field => ({
+    name: field,
+    type: table.schema[field].type.toUpperCase(),
+  }))
 
   $: {
     const schema = {}
@@ -27,36 +37,35 @@
 </script>
 
 <form>
-  <Heading extraSmall black>Schema</Heading>
-  <!-- {#each Object.keys(table.schema) as schemaKey, idx}
-    <Input
-      thin
-      type={'text'}
-      label={schemaKey}
-      bind:value={table.schema[schemaKey]} />
-  {/each} -->
-  {#each fields as field}
-    <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>
-    </div>
-  {/each}
+  <div class="config">
+    <h6>Schema</h6>
+    {#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" on:click={() => deleteField(idx)} />
+      </div>
+    {/each}
+    <Button thin secondary on:click={newField}>Add Field</Button>
+  </div>
 
-  <Button thin secondary on:click={newField}>Add Field</Button>
-  <Heading extraSmall black>Datasource</Heading>
-  {#each Object.keys(table.integration) as configKey}
-    <Input
-      thin
-      type={configKey.type}
-      label={configKey}
-      bind:value={table.integration[configKey]} />
-  {/each}
+  <div class="config">
+    <h6>Datasource</h6>
+    {#each Object.keys(table.integration) as configKey}
+      <Input
+        thin
+        type={configKey.type}
+        label={configKey}
+        bind:value={table.integration[configKey]} />
+      <Spacer small />
+    {/each}
+  </div>
 </form>
 
 <style>
@@ -64,6 +73,25 @@
     display: grid;
     grid-gap: 10px;
     grid-template-columns: 1fr 1fr;
-    margin-bottom: var(--spacing-xs);
+    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-m);
+    margin-top: var(--spacing-l);
+  }
+
+  .config {
+    margin-bottom: var(--spacing-s);
+  }
+
+  form > * {
+    margin-bottom: var(--spacing-s);
   }
 </style>
diff --git a/packages/builder/src/components/backend/TableNavigator/TableIntegrationMenu/index.svelte b/packages/builder/src/components/backend/TableNavigator/TableIntegrationMenu/index.svelte
index cdf7ba99f3..80d096f440 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableIntegrationMenu/index.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableIntegrationMenu/index.svelte
@@ -3,45 +3,52 @@
   import { Input, TextArea } from "@budibase/bbui"
   import api from "builderStore/api"
 
+  const INTEGRATION_ICON_MAP = {
+    POSTGRES: "ri-database-2-line",
+  }
+
   export let integration = {}
 
   let integrationsPromise = fetchIntegrations()
   let selectedIntegration
+  let integrations = []
 
   async function fetchIntegrations() {
     const INTEGRATIONS_URL = `/api/integrations`
     const response = await api.get(INTEGRATIONS_URL)
     const json = await response.json()
+    integrations = json
     return json
   }
+
+  onMount(() => {
+    fetchIntegrations()
+  })
 </script>
 
 <section>
-  {#await integrationsPromise}
-    Loading integrations...
-  {:then integrations}
+  <div class="integration-list">
     {#each Object.keys(integrations) as integrationType}
       <div
+        class="integration hoverable"
         on:click={() => {
           selectedIntegration = integrations[integrationType]
           integration.type = integrationType
         }}>
-        <h6>{integrationType}</h6>
+        <span>{integrationType}</span>
+        <i class="ri-database-2-line" />
       </div>
     {/each}
-  {:catch}
-    shit itself
-  {/await}
+  </div>
 
   {#if selectedIntegration}
     {#each Object.keys(selectedIntegration) as configKey}
       <Input
         thin
-        type={configKey.type}
+        type={selectedIntegration[configKey].type}
         label={configKey}
         bind:value={integration[configKey]} />
     {/each}
-    <TextArea label={'Query'} bind:value={integration.query} />
   {/if}
 </section>
 
@@ -49,4 +56,27 @@
   section {
     display: grid;
   }
+
+  .integration-list {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .integration {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 5px;
+    transition: 0.3s all;
+    border-radius: var(--border-radius-s);
+  }
+
+  span {
+    font-size: var(--font-size-xs);
+    margin-bottom: var(--spacing-xs);
+  }
+
+  .integration:hover {
+    background-color: var(--grey-3);
+  }
 </style>
diff --git a/packages/server/package.json b/packages/server/package.json
index 1b09a0d1aa..eedcb89973 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -79,6 +79,7 @@
     "koa-session": "^5.12.0",
     "koa-static": "^5.0.0",
     "lodash": "^4.17.13",
+    "mongodb": "^3.6.3",
     "mustache": "^4.0.1",
     "node-fetch": "^2.6.0",
     "pg": "^8.5.1",
diff --git a/packages/server/src/integrations/Integration.js b/packages/server/src/integrations/Integration.js
index ba0fa64d53..e69de29bb2 100644
--- a/packages/server/src/integrations/Integration.js
+++ b/packages/server/src/integrations/Integration.js
@@ -1,7 +0,0 @@
-class Integration {
-  definition() {
-    return this.options
-  }
-}
-
-module.exports = Integration
diff --git a/packages/server/src/integrations/dynamodb.js b/packages/server/src/integrations/dynamodb.js
new file mode 100644
index 0000000000..3ed8e36aa1
--- /dev/null
+++ b/packages/server/src/integrations/dynamodb.js
@@ -0,0 +1,64 @@
+const AWS = require("aws-sdk")
+
+const DYNAMODB_OPTIONS = {
+  table: {
+    type: "string",
+    required: true,
+  },
+  region: {
+    type: "string",
+    required: true,
+    default: "us-east-1",
+  },
+  accessKeyId: {
+    type: "string",
+    required: true,
+  },
+  secretKey: {
+    type: "secretKey",
+    required: true,
+    default: 5432,
+  },
+  indexName: {
+    type: "string",
+  },
+  keyConditionExpression: {
+    type: "string",
+    required: true,
+  },
+  attributeNames: {
+    type: "object",
+    required: true,
+  },
+  attributeValues: {
+    type: "object",
+    required: true,
+  },
+}
+
+class DynamoDBIntegration {
+  constructor(config) {
+    this.config = config
+    this.connect()
+    this.client = new AWS.DynamoDB.DocumentClient()
+  }
+
+  async connect() {
+    AWS.config.update(this.config)
+  }
+
+  async query() {
+    const response = await this.client.query({
+      TableName: this.config.table,
+      KeyConditionExpression: this.config.keyConditionExpression,
+      ExpressionAttributeNames: this.config.attributeNames,
+      ExpressionAttributeValues: this.config.attributeValues,
+    })
+    return response
+  }
+}
+
+module.exports = {
+  schema: DYNAMODB_OPTIONS,
+  integration: DynamoDBIntegration,
+}
diff --git a/packages/server/src/integrations/index.js b/packages/server/src/integrations/index.js
index 10b0c02186..373176b864 100644
--- a/packages/server/src/integrations/index.js
+++ b/packages/server/src/integrations/index.js
@@ -1,11 +1,21 @@
 const postgres = require("./postgres")
+const dynamodb = require("./dynamodb")
+const mongodb = require("./mongodb")
+// const redis = require("./redis")
+// const couchdb = require("./couchdb")
+// const elasticsearch = require("./elasticsearch")
+// const s3 = require("./s3")
 
 const DEFINITIONS = {
   POSTGRES: postgres.schema,
+  DYNAMODB: dynamodb.schema,
+  MONGODB: mongodb.schema,
 }
 
 const INTEGRATIONS = {
   POSTGRES: postgres.integration,
+  DYNAMODB: dynamodb.integration,
+  MONGODB: mongodb.integration,
 }
 
 module.exports = {
diff --git a/packages/server/src/integrations/mongodb.js b/packages/server/src/integrations/mongodb.js
new file mode 100644
index 0000000000..1eb351bcb5
--- /dev/null
+++ b/packages/server/src/integrations/mongodb.js
@@ -0,0 +1,49 @@
+const { MongoClient } = require("mongodb")
+
+const MONGODB_OPTIONS = {
+  connectionString: {
+    type: "string",
+    required: true,
+    default: "localhost",
+  },
+  db: {
+    type: "string",
+    required: true,
+  },
+  collection: {
+    type: "string",
+    required: true,
+  },
+  query: {
+    type: "query",
+    required: true,
+  },
+}
+
+class MongoIntegration {
+  constructor(config) {
+    this.config = config
+    this.client = new MongoClient(config.connectionString)
+  }
+
+  async connect() {
+    return this.client.connect()
+  }
+
+  async query() {
+    try {
+      await this.connect()
+      const db = this.client.db(this.config.db)
+      const collection = db.collection(this.config.collection)
+      const result = await collection.find(this.config.query).toArray()
+      return result
+    } finally {
+      await this.client.close()
+    }
+  }
+}
+
+module.exports = {
+  schema: MONGODB_OPTIONS,
+  integration: MongoIntegration,
+}
diff --git a/packages/server/src/integrations/postgres.js b/packages/server/src/integrations/postgres.js
index db2d0eadab..b1e9cf06e9 100644
--- a/packages/server/src/integrations/postgres.js
+++ b/packages/server/src/integrations/postgres.js
@@ -23,6 +23,10 @@ const POSTGRES_OPTIONS = {
     type: "password",
     default: "root",
   },
+  query: {
+    type: "query",
+    required: true,
+  },
 }
 
 class PostgresIntegration {
diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index 65f13dae86..e931128f0c 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -1455,6 +1455,14 @@ bl@^1.0.0:
     readable-stream "^2.3.5"
     safe-buffer "^5.1.1"
 
+bl@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-2.2.1.tgz#8c11a7b730655c5d56898cdc871224f40fd901d5"
+  integrity sha512-6Pesp1w0DEX1N550i/uGV/TqucVL4AM/pgThFSN/Qq9si1/DF9aIHs1BxD8V/QU0HoeHO6cQRTAuYnLPKq1e4g==
+  dependencies:
+    readable-stream "^2.3.5"
+    safe-buffer "^5.1.1"
+
 bl@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/bl/-/bl-4.0.3.tgz#12d6287adc29080e22a705e5764b2a9522cdc489"
@@ -1550,6 +1558,11 @@ bser@2.1.1:
   dependencies:
     node-int64 "^0.4.0"
 
+bson@^1.1.4:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/bson/-/bson-1.1.5.tgz#2aaae98fcdf6750c0848b0cba1ddec3c73060a34"
+  integrity sha512-kDuEzldR21lHciPQAIulLs1LZlCXdLziXI6Mb/TDkwXhb//UORJNPXgcRs2CuO4H0DcMkpfT3/ySsP3unoZjBg==
+
 buffer-alloc-unsafe@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
@@ -2307,6 +2320,11 @@ delegates@^1.0.0:
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
   integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
 
+denque@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/denque/-/denque-1.4.1.tgz#6744ff7641c148c3f8a69c307e51235c1f4a37cf"
+  integrity sha512-OfzPuSZKGcgr96rf1oODnfjqBFmr1DVoc/TrItj3Ohe0Ah1C5WX5Baquw/9U9KovnQ88EqmJbD66rKYUQYN1tQ==
+
 depd@^1.1.2, depd@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
@@ -5377,6 +5395,11 @@ memdown@1.4.1:
     ltgt "~2.2.0"
     safe-buffer "~5.1.1"
 
+memory-pager@^1.0.2:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/memory-pager/-/memory-pager-1.5.0.tgz#d8751655d22d384682741c972f2c3d6dfa3e66b5"
+  integrity sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg==
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -5482,6 +5505,19 @@ mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.4:
   dependencies:
     minimist "^1.2.5"
 
+mongodb@^3.6.3:
+  version "3.6.3"
+  resolved "https://registry.yarnpkg.com/mongodb/-/mongodb-3.6.3.tgz#eddaed0cc3598474d7a15f0f2a5b04848489fd05"
+  integrity sha512-rOZuR0QkodZiM+UbQE5kDsJykBqWi0CL4Ec2i1nrGrUI3KO11r6Fbxskqmq3JK2NH7aW4dcccBuUujAP0ERl5w==
+  dependencies:
+    bl "^2.2.1"
+    bson "^1.1.4"
+    denque "^1.4.1"
+    require_optional "^1.0.1"
+    safe-buffer "^5.1.2"
+  optionalDependencies:
+    saslprep "^1.0.0"
+
 mri@1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.4.tgz#7cb1dd1b9b40905f1fac053abe25b6720f44744a"
@@ -6767,6 +6803,14 @@ require-main-filename@^2.0.0:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
   integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
+require_optional@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/require_optional/-/require_optional-1.0.1.tgz#4cf35a4247f64ca3df8c2ef208cc494b1ca8fc2e"
+  integrity sha512-qhM/y57enGWHAe3v/NcwML6a3/vfESLe/sGM2dII+gEO0BpKRUkWZow/tyloNqJyN6kXSl3RyyM8Ll5D/sJP8g==
+  dependencies:
+    resolve-from "^2.0.0"
+    semver "^5.1.0"
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -6774,6 +6818,11 @@ resolve-cwd@^2.0.0:
   dependencies:
     resolve-from "^3.0.0"
 
+resolve-from@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-2.0.0.tgz#9480ab20e94ffa1d9e80a804c7ea147611966b57"
+  integrity sha1-lICrIOlP+h2egKgEx+oUdhGWa1c=
+
 resolve-from@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
@@ -6921,6 +6970,13 @@ sanitize-s3-objectkey@^0.0.1:
   resolved "https://registry.yarnpkg.com/sanitize-s3-objectkey/-/sanitize-s3-objectkey-0.0.1.tgz#efa9887cd45275b40234fb4bb12fc5754fe64e7e"
   integrity sha512-ZTk7aqLxy4sD40GWcYWoLfbe05XLmkKvh6vGKe13ADlei24xlezcvjgKy1qRArlaIbIMYaqK7PCalvZtulZlaQ==
 
+saslprep@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/saslprep/-/saslprep-1.0.3.tgz#4c02f946b56cf54297e347ba1093e7acac4cf226"
+  integrity sha512-/MY/PEMbk2SuY5sScONwhUDsV2p77Znkb/q3nSVstq/yQzYJOH/Azh29p9oJLsl3LnQwSvZDKagDGBsBwSooag==
+  dependencies:
+    sparse-bitfield "^3.0.3"
+
 sax@1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
@@ -6950,7 +7006,7 @@ semver-diff@^3.1.1:
   dependencies:
     semver "^6.3.0"
 
-"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.6.0, semver@^5.7.1:
+"semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.4.1, semver@^5.5.0, semver@^5.6.0, semver@^5.7.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -7184,6 +7240,13 @@ spark-md5@3.0.1:
   resolved "https://registry.yarnpkg.com/spark-md5/-/spark-md5-3.0.1.tgz#83a0e255734f2ab4e5c466e5a2cfc9ba2aa2124d"
   integrity sha512-0tF3AGSD1ppQeuffsLDIOWlKUd3lS92tFxcsrh5Pe3ZphhnoK+oXIBTzOAThZCiuINZLvpiLH/1VS1/ANEJVig==
 
+sparse-bitfield@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz#ff4ae6e68656056ba4b3e792ab3334d38273ca11"
+  integrity sha1-/0rm5oZWBWuks+eSqzM004JzyhE=
+  dependencies:
+    memory-pager "^1.0.2"
+
 spdx-correct@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"

From 5e5b489cb97892def5455b7fb2fcf173453ef2cf Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 26 Nov 2020 17:03:18 +0000
Subject: [PATCH 03/70] elasticsearch end to end

---
 packages/server/package.json                  |  1 +
 packages/server/src/integrations/couchdb.js   | 43 +++++++++++++++++++
 .../server/src/integrations/elasticsearch.js  | 41 ++++++++++++++++++
 packages/server/src/integrations/index.js     |  8 +++-
 packages/server/yarn.lock                     | 21 +++++++++
 5 files changed, 112 insertions(+), 2 deletions(-)
 create mode 100644 packages/server/src/integrations/couchdb.js
 create mode 100644 packages/server/src/integrations/elasticsearch.js

diff --git a/packages/server/package.json b/packages/server/package.json
index eedcb89973..7b9e5c61bf 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -51,6 +51,7 @@
   "license": "AGPL-3.0-or-later",
   "dependencies": {
     "@budibase/client": "^0.3.8",
+    "@elastic/elasticsearch": "^7.10.0",
     "@koa/router": "^8.0.0",
     "@sendgrid/mail": "^7.1.1",
     "@sentry/node": "^5.19.2",
diff --git a/packages/server/src/integrations/couchdb.js b/packages/server/src/integrations/couchdb.js
new file mode 100644
index 0000000000..e44cf9e34c
--- /dev/null
+++ b/packages/server/src/integrations/couchdb.js
@@ -0,0 +1,43 @@
+// const PouchDB = require("pouchdb")
+
+// const COUCHDB_OPTIONS = {
+//   url: {
+//     type: "string",
+//     required: true,
+//     default: "localhost",
+//   },
+//   database: {
+//     type: "string",
+//     required: true,
+//   },
+//   // query: {
+//   //   type: "query",
+//   //   required: true,
+//   // },
+// }
+
+// class ElasticSearchIntegration {
+//   constructor(config) {
+//     this.config = config
+//     this.client = new Client({ node: config.url })
+//   }
+
+//   async query() {
+//     try {
+//       const result = await this.client.search({
+//         index: this.config.index,
+//         body: JSON.parse(this.config.query),
+//       })
+//       return result
+//     } finally {
+//       await this.client.close()
+//     }
+//   }
+// }
+
+// module.exports = {
+//   schema: ELASTICSEARCH_OPTIONS,
+//   integration: ElasticSearchIntegration,
+// }
+
+
diff --git a/packages/server/src/integrations/elasticsearch.js b/packages/server/src/integrations/elasticsearch.js
new file mode 100644
index 0000000000..d030bae9c8
--- /dev/null
+++ b/packages/server/src/integrations/elasticsearch.js
@@ -0,0 +1,41 @@
+const { Client } = require("@elastic/elasticsearch")
+
+const ELASTICSEARCH_OPTIONS = {
+  url: {
+    type: "string",
+    required: true,
+    default: "localhost",
+  },
+  index: {
+    type: "string",
+    required: true,
+  },
+  query: {
+    type: "query",
+    required: true,
+  },
+}
+
+class ElasticSearchIntegration {
+  constructor(config) {
+    this.config = config
+    this.client = new Client({ node: config.url })
+  }
+
+  async query() {
+    try {
+      const result = await this.client.search({
+        index: this.config.index,
+        body: JSON.parse(this.config.query),
+      })
+      return result.body.hits.hits.map(({ _source }) => _source)
+    } finally {
+      await this.client.close()
+    }
+  }
+}
+
+module.exports = {
+  schema: ELASTICSEARCH_OPTIONS,
+  integration: ElasticSearchIntegration,
+}
diff --git a/packages/server/src/integrations/index.js b/packages/server/src/integrations/index.js
index 373176b864..4cdb78f703 100644
--- a/packages/server/src/integrations/index.js
+++ b/packages/server/src/integrations/index.js
@@ -1,21 +1,25 @@
 const postgres = require("./postgres")
 const dynamodb = require("./dynamodb")
 const mongodb = require("./mongodb")
+const elasticsearch = require("./elasticsearch")
+const couchdb = require("./couchdb")
 // const redis = require("./redis")
-// const couchdb = require("./couchdb")
-// const elasticsearch = require("./elasticsearch")
 // const s3 = require("./s3")
 
 const DEFINITIONS = {
   POSTGRES: postgres.schema,
   DYNAMODB: dynamodb.schema,
   MONGODB: mongodb.schema,
+  ELASTICSEARCH: elasticsearch.schema,
+  COUCHDB: couchdb.schema,
 }
 
 const INTEGRATIONS = {
   POSTGRES: postgres.integration,
   DYNAMODB: dynamodb.integration,
   MONGODB: mongodb.integration,
+  ELASTICSEARCH: elasticsearch.integration,
+  COUCHDB: couchdb.integration,
 }
 
 module.exports = {
diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index e931128f0c..5e7317cd19 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -225,6 +225,17 @@
     ajv "^6.12.0"
     ajv-keywords "^3.4.1"
 
+"@elastic/elasticsearch@^7.10.0":
+  version "7.10.0"
+  resolved "https://registry.yarnpkg.com/@elastic/elasticsearch/-/elasticsearch-7.10.0.tgz#da105a9c1f14146f9f2cab4e7026cb7949121b8d"
+  integrity sha512-vXtMAQf5/DwqeryQgRriMtnFppJNLc/R7/R0D8E+wG5/kGM5i7mg+Hi7TM4NZEuXgtzZ2a/Nf7aR0vLyrxOK/w==
+  dependencies:
+    debug "^4.1.1"
+    hpagent "^0.1.1"
+    ms "^2.1.1"
+    pump "^3.0.0"
+    secure-json-parse "^2.1.0"
+
 "@electron/get@^1.0.1":
   version "1.12.2"
   resolved "https://registry.yarnpkg.com/@electron/get/-/get-1.12.2.tgz#6442066afb99be08cefb9a281e4b4692b33764f3"
@@ -3650,6 +3661,11 @@ hosted-git-info@^3.0.5:
   dependencies:
     lru-cache "^6.0.0"
 
+hpagent@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/hpagent/-/hpagent-0.1.1.tgz#66f67f16e5c7a8b59a068e40c2658c2c749ad5e2"
+  integrity sha512-IxJWQiY0vmEjetHdoE9HZjD4Cx+mYTr25tR7JCxXaiI3QxW0YqYyM11KyZbHufoa/piWhMb2+D3FGpMgmA2cFQ==
+
 html-encoding-sniffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
@@ -6987,6 +7003,11 @@ sax@>=0.6.0, sax@^1.2.4:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
+secure-json-parse@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/secure-json-parse/-/secure-json-parse-2.1.0.tgz#ae76f5624256b5c497af887090a5d9e156c9fb20"
+  integrity sha512-GckO+MS/wT4UogDyoI/H/S1L0MCcKS1XX/vp48wfmU7Nw4woBmb8mIpu4zPBQjKlRT88/bt9xdoV4111jPpNJA==
+
 seek-bzip@^1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/seek-bzip/-/seek-bzip-1.0.6.tgz#35c4171f55a680916b52a07859ecf3b5857f21c4"

From 9a6ac6915b6f02a365a291c79d286952c60b6438 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 26 Nov 2020 17:34:15 +0000
Subject: [PATCH 04/70] CouchDB integration E2E

---
 .../modals/EditIntegrationConfig.svelte       | 10 ++-
 .../TableNavigator/TableNavigator.svelte      |  3 +-
 packages/server/src/integrations/couchdb.js   | 76 +++++++++----------
 .../server/src/integrations/elasticsearch.js  |  3 +
 4 files changed, 48 insertions(+), 44 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/modals/EditIntegrationConfig.svelte b/packages/builder/src/components/backend/DataTable/modals/EditIntegrationConfig.svelte
index 48bb22320c..4789b6f8f0 100644
--- a/packages/builder/src/components/backend/DataTable/modals/EditIntegrationConfig.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/EditIntegrationConfig.svelte
@@ -49,7 +49,9 @@
           <option value={'BOOLEAN'}>Boolean</option>
           <option value={'DATETIME'}>Datetime</option>
         </Select>
-        <i class="ri-close-circle-line" on:click={() => deleteField(idx)} />
+        <i
+          class="ri-close-circle-line delete"
+          on:click={() => deleteField(idx)} />
       </div>
     {/each}
     <Button thin secondary on:click={newField}>Add Field</Button>
@@ -72,7 +74,7 @@
   .field {
     display: grid;
     grid-gap: 10px;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1fr 50px;
     margin-bottom: var(--spacing-m);
   }
 
@@ -91,7 +93,7 @@
     margin-bottom: var(--spacing-s);
   }
 
-  form > * {
-    margin-bottom: var(--spacing-s);
+  .delete {
+    align-self: center;
   }
 </style>
diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
index 5a57fe6a4a..eb5cfffa6d 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
@@ -9,6 +9,7 @@
   import NavItem from "components/common/NavItem.svelte"
 
   let modal
+
   $: selectedView =
     $backendUiStore.selectedView && $backendUiStore.selectedView.name
 
@@ -42,7 +43,7 @@
     {#each $backendUiStore.tables as table, idx}
       <NavItem
         border={idx > 0}
-        icon="ri-table-line"
+        icon={table.integration ? 'ri-database-2-line' : 'ri-table-line'}
         text={table.name}
         selected={selectedView === `all_${table._id}`}
         on:click={() => selectTable(table)}>
diff --git a/packages/server/src/integrations/couchdb.js b/packages/server/src/integrations/couchdb.js
index e44cf9e34c..ef5a1ebe9b 100644
--- a/packages/server/src/integrations/couchdb.js
+++ b/packages/server/src/integrations/couchdb.js
@@ -1,43 +1,41 @@
-// const PouchDB = require("pouchdb")
+const PouchDB = require("pouchdb")
 
-// const COUCHDB_OPTIONS = {
-//   url: {
-//     type: "string",
-//     required: true,
-//     default: "localhost",
-//   },
-//   database: {
-//     type: "string",
-//     required: true,
-//   },
-//   // query: {
-//   //   type: "query",
-//   //   required: true,
-//   // },
-// }
+const COUCHDB_OPTIONS = {
+  url: {
+    type: "string",
+    required: true,
+    default: "localhost",
+  },
+  database: {
+    type: "string",
+    required: true,
+  },
+  view: {
+    type: "string",
+    required: true,
+  },
+}
 
-// class ElasticSearchIntegration {
-//   constructor(config) {
-//     this.config = config
-//     this.client = new Client({ node: config.url })
-//   }
-
-//   async query() {
-//     try {
-//       const result = await this.client.search({
-//         index: this.config.index,
-//         body: JSON.parse(this.config.query),
-//       })
-//       return result
-//     } finally {
-//       await this.client.close()
-//     }
-//   }
-// }
-
-// module.exports = {
-//   schema: ELASTICSEARCH_OPTIONS,
-//   integration: ElasticSearchIntegration,
-// }
+class CouchDBIntegration {
+  constructor(config) {
+    this.config = config
+    this.client = new PouchDB(`${config.url}/${config.database}`)
+  }
 
+  async query() {
+    try {
+      const result = await this.client.allDocs({
+        include_docs: true,
+      })
+      return result.rows.map(row => row.doc)
+    } catch (err) {
+      console.error("Error querying couchDB", err)
+      throw err
+    }
+  }
+}
 
+module.exports = {
+  schema: COUCHDB_OPTIONS,
+  integration: CouchDBIntegration,
+}
diff --git a/packages/server/src/integrations/elasticsearch.js b/packages/server/src/integrations/elasticsearch.js
index d030bae9c8..d5074bb26f 100644
--- a/packages/server/src/integrations/elasticsearch.js
+++ b/packages/server/src/integrations/elasticsearch.js
@@ -29,6 +29,9 @@ class ElasticSearchIntegration {
         body: JSON.parse(this.config.query),
       })
       return result.body.hits.hits.map(({ _source }) => _source)
+    } catch (err) {
+      console.error("Error querying elasticsearch", err)
+      throw err
     } finally {
       await this.client.close()
     }

From 6cca720117f648cd9c2e5f78e82d5a5b31b7f632 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 26 Nov 2020 21:23:20 +0000
Subject: [PATCH 05/70] browse contents of s3 buckets from within budibase

---
 .../modals/EditIntegrationConfig.svelte       | 21 +++++---
 .../TableNavigator/TableNavigator.svelte      |  2 +-
 .../popovers/EditTablePopover.svelte          |  2 +-
 .../data/table/[selectedTable]/index.svelte   |  2 +-
 packages/server/src/api/controllers/row.js    |  2 +-
 packages/server/src/integrations/dynamodb.js  |  4 +-
 .../server/src/integrations/elasticsearch.js  |  2 +-
 packages/server/src/integrations/index.js     |  4 +-
 packages/server/src/integrations/mongodb.js   |  8 ++++
 packages/server/src/integrations/s3.js        | 48 +++++++++++++++++++
 10 files changed, 80 insertions(+), 15 deletions(-)
 create mode 100644 packages/server/src/integrations/s3.js

diff --git a/packages/builder/src/components/backend/DataTable/modals/EditIntegrationConfig.svelte b/packages/builder/src/components/backend/DataTable/modals/EditIntegrationConfig.svelte
index 4789b6f8f0..9becd0593f 100644
--- a/packages/builder/src/components/backend/DataTable/modals/EditIntegrationConfig.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/EditIntegrationConfig.svelte
@@ -36,7 +36,7 @@
   }
 </script>
 
-<form>
+<section>
   <div class="config">
     <h6>Schema</h6>
     {#each fields as field, idx}
@@ -60,15 +60,22 @@
   <div class="config">
     <h6>Datasource</h6>
     {#each Object.keys(table.integration) as configKey}
-      <Input
-        thin
-        type={configKey.type}
-        label={configKey}
-        bind:value={table.integration[configKey]} />
+      {#if configKey === 'query'}
+        <TextArea
+          thin
+          label={configKey}
+          bind:value={table.integration[configKey]} />
+      {:else}
+        <Input
+          thin
+          type={configKey.type}
+          label={configKey}
+          bind:value={table.integration[configKey]} />
+      {/if}
       <Spacer small />
     {/each}
   </div>
-</form>
+</section>
 
 <style>
   .field {
diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
index eb5cfffa6d..699155e1bf 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
@@ -43,7 +43,7 @@
     {#each $backendUiStore.tables as table, idx}
       <NavItem
         border={idx > 0}
-        icon={table.integration ? 'ri-database-2-line' : 'ri-table-line'}
+        icon={table.integration?.type ? 'ri-database-2-line' : 'ri-table-line'}
         text={table.name}
         selected={selectedView === `all_${table._id}`}
         on:click={() => selectTable(table)}>
diff --git a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
index bd9a58e874..05302788cb 100644
--- a/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
@@ -79,7 +79,7 @@
           bind:value={table.name}
           on:input={checkValid}
           {error} />
-        {#if table.integration}
+        {#if table.integration?.type}
           <IntegrationConfigForm integration={table.integration} />
         {/if}
         <footer>
diff --git a/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte b/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte
index 89a3604dc1..475271bb31 100644
--- a/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte
@@ -7,7 +7,7 @@
 </script>
 
 {#if $backendUiStore.selectedDatabase._id && selectedTable.name}
-  {#if selectedTable.integration}
+  {#if selectedTable.integration?.type}
     <ExternalDataSourceTable />
   {:else}
     <TableDataTable />
diff --git a/packages/server/src/api/controllers/row.js b/packages/server/src/api/controllers/row.js
index 443cb298af..2aa539a8f0 100644
--- a/packages/server/src/api/controllers/row.js
+++ b/packages/server/src/api/controllers/row.js
@@ -190,7 +190,7 @@ exports.fetchTableRows = async function(ctx) {
 
   const table = await db.get(ctx.params.tableId)
 
-  if (table.integration) {
+  if (table.integration && table.integration.type) {
     const Integration = integrations[table.integration.type]
     ctx.body = await new Integration(table.integration).query()
     return
diff --git a/packages/server/src/integrations/dynamodb.js b/packages/server/src/integrations/dynamodb.js
index 3ed8e36aa1..a5220decf7 100644
--- a/packages/server/src/integrations/dynamodb.js
+++ b/packages/server/src/integrations/dynamodb.js
@@ -27,11 +27,11 @@ const DYNAMODB_OPTIONS = {
     required: true,
   },
   attributeNames: {
-    type: "object",
+    type: "json",
     required: true,
   },
   attributeValues: {
-    type: "object",
+    type: "json",
     required: true,
   },
 }
diff --git a/packages/server/src/integrations/elasticsearch.js b/packages/server/src/integrations/elasticsearch.js
index d5074bb26f..d7b8f8cbd6 100644
--- a/packages/server/src/integrations/elasticsearch.js
+++ b/packages/server/src/integrations/elasticsearch.js
@@ -11,7 +11,7 @@ const ELASTICSEARCH_OPTIONS = {
     required: true,
   },
   query: {
-    type: "query",
+    type: "json",
     required: true,
   },
 }
diff --git a/packages/server/src/integrations/index.js b/packages/server/src/integrations/index.js
index 4cdb78f703..23179feb60 100644
--- a/packages/server/src/integrations/index.js
+++ b/packages/server/src/integrations/index.js
@@ -4,7 +4,7 @@ const mongodb = require("./mongodb")
 const elasticsearch = require("./elasticsearch")
 const couchdb = require("./couchdb")
 // const redis = require("./redis")
-// const s3 = require("./s3")
+const s3 = require("./s3")
 
 const DEFINITIONS = {
   POSTGRES: postgres.schema,
@@ -12,6 +12,7 @@ const DEFINITIONS = {
   MONGODB: mongodb.schema,
   ELASTICSEARCH: elasticsearch.schema,
   COUCHDB: couchdb.schema,
+  S3: s3.schema,
 }
 
 const INTEGRATIONS = {
@@ -20,6 +21,7 @@ const INTEGRATIONS = {
   MONGODB: mongodb.integration,
   ELASTICSEARCH: elasticsearch.integration,
   COUCHDB: couchdb.integration,
+  S3: s3.integration,
 }
 
 module.exports = {
diff --git a/packages/server/src/integrations/mongodb.js b/packages/server/src/integrations/mongodb.js
index 1eb351bcb5..1d1d7e3918 100644
--- a/packages/server/src/integrations/mongodb.js
+++ b/packages/server/src/integrations/mongodb.js
@@ -24,6 +24,11 @@ class MongoIntegration {
   constructor(config) {
     this.config = config
     this.client = new MongoClient(config.connectionString)
+    try {
+      this.config.query = JSON.parse(this.config.query)
+    } catch (err) {
+      this.config.query = {}
+    }
   }
 
   async connect() {
@@ -37,6 +42,9 @@ class MongoIntegration {
       const collection = db.collection(this.config.collection)
       const result = await collection.find(this.config.query).toArray()
       return result
+    } catch (err) {
+      console.error("Error querying mongodb", err)
+      throw err
     } finally {
       await this.client.close()
     }
diff --git a/packages/server/src/integrations/s3.js b/packages/server/src/integrations/s3.js
new file mode 100644
index 0000000000..24e4edfa1d
--- /dev/null
+++ b/packages/server/src/integrations/s3.js
@@ -0,0 +1,48 @@
+const AWS = require("aws-sdk")
+
+const S3_OPTIONS = {
+  bucket: {
+    type: "string",
+    required: true,
+  },
+  region: {
+    type: "string",
+    required: true,
+    default: "us-east-1",
+  },
+  accessKeyId: {
+    type: "string",
+    required: true,
+  },
+  secretAccessKey: {
+    type: "secretKey",
+    required: true,
+    default: 5432,
+  },
+}
+
+class S3Integration {
+  constructor(config) {
+    this.config = config
+    this.connect()
+    this.client = new AWS.S3()
+  }
+
+  async connect() {
+    AWS.config.update(this.config)
+  }
+
+  async query() {
+    const response = await this.client
+      .listObjects({
+        Bucket: this.config.bucket,
+      })
+      .promise()
+    return response.Contents
+  }
+}
+
+module.exports = {
+  schema: S3_OPTIONS,
+  integration: S3Integration,
+}

From 8e10a4ac7db19e26f0061264f6c5cf962e094013 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Sat, 12 Dec 2020 21:48:51 +0000
Subject: [PATCH 06/70] MS SQL Server integration

---
 packages/server/package.json                  |   3 +-
 packages/server/src/integrations/index.js     |   3 +
 .../src/integrations/microsoftSqlServer.js    |  52 +++
 packages/server/yarn.lock                     | 395 +++++++++++++++++-
 4 files changed, 432 insertions(+), 21 deletions(-)
 create mode 100644 packages/server/src/integrations/microsoftSqlServer.js

diff --git a/packages/server/package.json b/packages/server/package.json
index f3589dde24..c2b33aa33c 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -80,10 +80,11 @@
     "koa-static": "^5.0.0",
     "lodash": "^4.17.13",
     "mongodb": "^3.6.3",
+    "mssql": "^6.2.3",
     "mustache": "^4.0.1",
     "node-fetch": "^2.6.0",
-    "pg": "^8.5.1",
     "open": "^7.3.0",
+    "pg": "^8.5.1",
     "pino-pretty": "^4.0.0",
     "pouchdb": "^7.2.1",
     "pouchdb-all-dbs": "^1.0.2",
diff --git a/packages/server/src/integrations/index.js b/packages/server/src/integrations/index.js
index 23179feb60..eef62ef199 100644
--- a/packages/server/src/integrations/index.js
+++ b/packages/server/src/integrations/index.js
@@ -4,6 +4,7 @@ const mongodb = require("./mongodb")
 const elasticsearch = require("./elasticsearch")
 const couchdb = require("./couchdb")
 // const redis = require("./redis")
+const sqlServer = require("./microsoftSqlServer")
 const s3 = require("./s3")
 
 const DEFINITIONS = {
@@ -12,6 +13,7 @@ const DEFINITIONS = {
   MONGODB: mongodb.schema,
   ELASTICSEARCH: elasticsearch.schema,
   COUCHDB: couchdb.schema,
+  SQL_SERVER: sqlServer.schema,
   S3: s3.schema,
 }
 
@@ -22,6 +24,7 @@ const INTEGRATIONS = {
   ELASTICSEARCH: elasticsearch.integration,
   COUCHDB: couchdb.integration,
   S3: s3.integration,
+  SQL_SERVER: sqlServer.integration,
 }
 
 module.exports = {
diff --git a/packages/server/src/integrations/microsoftSqlServer.js b/packages/server/src/integrations/microsoftSqlServer.js
new file mode 100644
index 0000000000..6694151bdb
--- /dev/null
+++ b/packages/server/src/integrations/microsoftSqlServer.js
@@ -0,0 +1,52 @@
+const sqlServer = require("mssql")
+
+const SQL_SERVER_OPTIONS = {
+  user: {
+    type: "string",
+    required: true,
+    default: "localhost",
+  },
+  password: {
+    type: "password",
+    required: true,
+  },
+  server: {
+    type: "string",
+    default: "localhost",
+  },
+  database: {
+    type: "string",
+    default: "root",
+  },
+  query: {
+    type: "query",
+    required: true,
+  },
+}
+
+class SqlServerIntegration {
+  constructor(config) {
+    this.config = config
+    this.client = sqlServer
+  }
+
+  async connect() {
+    return await this.client.connect(this.config)
+  }
+
+  async query() {
+    try {
+      await this.connect()
+      const response = await this.client.query(this.config.query)
+      return response.recordset
+    } catch (err) {
+      console.error("Error querying MS SQL Server", err)
+      throw err
+    }
+  }
+}
+
+module.exports = {
+  schema: SQL_SERVER_OPTIONS,
+  integration: SqlServerIntegration,
+}
diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index 30a0ba2d40..f67cebf29d 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -7,6 +7,34 @@
   resolved "https://registry.yarnpkg.com/7zip-bin/-/7zip-bin-5.0.3.tgz#bc5b5532ecafd923a61f2fb097e3b108c0106a3f"
   integrity sha512-GLyWIFBbGvpKPGo55JyRZAo4lVbnBiD52cKlw/0Vt+wnmKvWJkpZvsjVoaIolyBXDeAQKSicRtqFNPem9w0WYA==
 
+"@azure/ms-rest-azure-env@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@azure/ms-rest-azure-env/-/ms-rest-azure-env-1.1.2.tgz#8505873afd4a1227ec040894a64fdd736b4a101f"
+  integrity sha512-l7z0DPCi2Hp88w12JhDTtx5d0Y3+vhfE7JKJb9O7sEz71Cwp053N8piTtTnnk/tUor9oZHgEKi/p3tQQmLPjvA==
+
+"@azure/ms-rest-js@^1.8.7":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@azure/ms-rest-js/-/ms-rest-js-1.9.0.tgz#5eb6516cf20e972a2eb4c589d6b48c3151bc801b"
+  integrity sha512-cB4Z2Mg7eBmet1rfbf0QSO1XbhfknRW7B+mX3IHJq0KGHaGJvCPoVTgdsJdCkazEMK1jtANFNEDDzSQacxyzbA==
+  dependencies:
+    "@types/tunnel" "0.0.0"
+    axios "^0.19.0"
+    form-data "^2.3.2"
+    tough-cookie "^2.4.3"
+    tslib "^1.9.2"
+    tunnel "0.0.6"
+    uuid "^3.2.1"
+    xml2js "^0.4.19"
+
+"@azure/ms-rest-nodeauth@2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@azure/ms-rest-nodeauth/-/ms-rest-nodeauth-2.0.2.tgz#037e29540c5625eaec718b8fcc178dd7ad5dfb96"
+  integrity sha512-KmNNICOxt3EwViAJI3iu2VH8t8BQg5J2rSAyO4IUYLF9ZwlyYsP419pdvl4NBUhluAP2cgN7dfD2V6E6NOMZlQ==
+  dependencies:
+    "@azure/ms-rest-azure-env" "^1.1.2"
+    "@azure/ms-rest-js" "^1.8.7"
+    adal-node "^0.1.28"
+
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
@@ -201,6 +229,15 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@budibase/client@^0.3.8":
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.3.8.tgz#75df7e97e8f0d9b58c00e2bb0d3b4a55f8d04735"
+  integrity sha512-tnFdmCdXKS+uZGoipr69Wa0oVoFHmyoV0ydihI6q0gKQH0KutypVHAaul2qPB8t5a/mTZopC//2WdmCeX1GKVg==
+  dependencies:
+    deep-equal "^2.0.1"
+    mustache "^4.0.1"
+    regexparam "^1.3.0"
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@@ -924,11 +961,29 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.19.7.tgz#cf8b6ac088dd9182ac9a1d765f787a8d12490c04"
   integrity sha512-zvjOU1g4CpPilbTDUATnZCUb/6lARMRAqzT7ILwl1P3YvU2leEcZ2+fw9+Jrw/paXB1CgQyXTrN4hWDtqT9O2A==
 
+"@types/node@^12.12.17":
+  version "12.19.9"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.19.9.tgz#990ad687ad8b26ef6dcc34a4f69c33d40c95b679"
+  integrity sha512-yj0DOaQeUrk3nJ0bd3Y5PeDRJ6W0r+kilosLA+dzF3dola/o9hxhMSg2sFvVcA2UHS5JSOsZp4S0c1OEXc4m1Q==
+
+"@types/node@^8.0.47":
+  version "8.10.66"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-8.10.66.tgz#dd035d409df322acc83dff62a602f12a5783bbb3"
+  integrity sha512-tktOkFUA4kXx2hhhrB8bIFb5TbwzS4uOhKEmwiD+NoiL0qtP2OQ9mFldbgD4dV1djrlBYP6eBuQZiWjuHUpqFw==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
   integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
 
+"@types/readable-stream@^2.3.5":
+  version "2.3.9"
+  resolved "https://registry.yarnpkg.com/@types/readable-stream/-/readable-stream-2.3.9.tgz#40a8349e6ace3afd2dd1b6d8e9b02945de4566a9"
+  integrity sha512-sqsgQqFT7HmQz/V5jH1O0fvQQnXAJO46Gg9LRO/JPfjmVmGUlcx831TZZO3Y3HtWhIkzf3kTsNT0Z0kzIhIvZw==
+  dependencies:
+    "@types/node" "*"
+    safe-buffer "*"
+
 "@types/semver@^7.3.1":
   version "7.3.4"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.4.tgz#43d7168fec6fa0988bb1a513a697b29296721afb"
@@ -939,6 +994,13 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
+"@types/tunnel@0.0.0":
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/@types/tunnel/-/tunnel-0.0.0.tgz#c2a42943ee63c90652a5557b8c4e56cda77f944e"
+  integrity sha512-FGDp0iBRiBdPjOgjJmn1NH0KDLN+Z8fRmo+9J7XGBhubq1DPrGrbmG4UTlGzrpbCpesMqD0sWkzi27EYkOMHyg==
+  dependencies:
+    "@types/node" "*"
+
 "@types/yargs-parser@*":
   version "15.0.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
@@ -1050,6 +1112,21 @@ acorn@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
+adal-node@^0.1.28:
+  version "0.1.28"
+  resolved "https://registry.yarnpkg.com/adal-node/-/adal-node-0.1.28.tgz#468c4bb3ebbd96b1270669f4b9cba4e0065ea485"
+  integrity sha1-RoxLs+u9lrEnBmn0ucuk4AZepIU=
+  dependencies:
+    "@types/node" "^8.0.47"
+    async ">=0.6.0"
+    date-utils "*"
+    jws "3.x.x"
+    request ">= 2.52.0"
+    underscore ">= 1.3.1"
+    uuid "^3.1.0"
+    xmldom ">= 0.1.x"
+    xpath.js "~1.1.0"
+
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@@ -1238,6 +1315,11 @@ array-equal@^1.0.0:
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
   integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
 
+array-filter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
+  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
+
 array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
@@ -1290,6 +1372,11 @@ async@0.9.x:
   resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
   integrity sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0=
 
+async@>=0.6.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.2.0.tgz#b3a2685c5ebb641d3de02d161002c60fc9f85720"
+  integrity sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw==
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -1310,6 +1397,13 @@ atomic-sleep@^1.0.0:
   resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
   integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
 
+available-typed-arrays@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
+  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
+  dependencies:
+    array-filter "^1.0.0"
+
 aws-sdk@^2.767.0:
   version "2.799.0"
   resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.799.0.tgz#8b1a64c1a9f8ccf5794eb07bdd8051e4cb6adcfd"
@@ -1335,7 +1429,7 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
 
-axios@^0.19.2:
+axios@^0.19.0, axios@^0.19.2:
   version "0.19.2"
   resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
   integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==
@@ -1453,6 +1547,13 @@ bl@^2.2.1:
     readable-stream "^2.3.5"
     safe-buffer "^5.1.1"
 
+bl@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-3.0.1.tgz#1cbb439299609e419b5a74d7fce2f8b37d8e5c6f"
+  integrity sha512-jrCW5ZhfQ/Vt07WX1Ngs+yn9BDqPL/gw28S7s9H6QK/gupnizNzJAss5akW20ISgOrbLTlXOOCTJeNUQqruAWQ==
+  dependencies:
+    readable-stream "^3.0.1"
+
 bl@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/bl/-/bl-4.0.3.tgz#12d6287adc29080e22a705e5764b2a9522cdc489"
@@ -2098,12 +2199,17 @@ data-urls@^1.0.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
+date-utils@*:
+  version "1.2.21"
+  resolved "https://registry.yarnpkg.com/date-utils/-/date-utils-1.2.21.tgz#61fb16cdc1274b3c9acaaffe9fc69df8720a2b64"
+  integrity sha1-YfsWzcEnSzyayq/+n8ad+HIKK2Q=
+
 dateformat@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
 
-debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.0:
+debug@4, debug@^4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.0:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
   integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==
@@ -2201,6 +2307,27 @@ decompress@^4.2.1:
     pify "^2.3.0"
     strip-dirs "^2.0.0"
 
+deep-equal@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.5.tgz#55cd2fe326d83f9cbf7261ef0e060b3f724c5cb9"
+  integrity sha512-nPiRgmbAtm1a3JsnLCf6/SLfXcjyN5v8L1TXzdCmHrXJ4hx+gW/w1YCcn7z8gJtSiDArZCgYtbao3QqLm/N1Sw==
+  dependencies:
+    call-bind "^1.0.0"
+    es-get-iterator "^1.1.1"
+    get-intrinsic "^1.0.1"
+    is-arguments "^1.0.4"
+    is-date-object "^1.0.2"
+    is-regex "^1.1.1"
+    isarray "^2.0.5"
+    object-is "^1.1.4"
+    object-keys "^1.1.1"
+    object.assign "^4.1.2"
+    regexp.prototype.flags "^1.3.0"
+    side-channel "^1.0.3"
+    which-boxed-primitive "^1.0.1"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.2"
+
 deep-equal@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -2293,7 +2420,7 @@ depd@^1.1.2, depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
-depd@~2.0.0:
+depd@^2.0.0, depd@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
   integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
@@ -2604,6 +2731,38 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2:
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
+es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1:
+  version "1.18.0-next.1"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.1.tgz#6e3a0a4bda717e5023ab3b8e90bec36108d22c68"
+  integrity sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.2"
+    is-negative-zero "^2.0.0"
+    is-regex "^1.1.1"
+    object-inspect "^1.8.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.1"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
+es-get-iterator@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.1.tgz#b93ddd867af16d5118e00881396533c1c6647ad9"
+  integrity sha512-qorBw8Y7B15DVLaJWy6WdEV/ZkieBcu6QCq/xzWzGOKJqgG1j754vXRfZ3NY7HSShneqU43mPB4OkQBTkvHhFw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.1"
+    has-symbols "^1.0.1"
+    is-arguments "^1.0.4"
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-string "^1.0.5"
+    isarray "^2.0.5"
+
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -3181,7 +3340,7 @@ forever-agent@~0.6.1:
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
   integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
 
-form-data@^2.3.1:
+form-data@^2.3.1, form-data@^2.3.2:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.5.1.tgz#f2cbec57b5e59e23716e128fe44d4e5dd23895f4"
   integrity sha512-m21N3WOmEEURgk6B9GLOE4RuWOFf28Lhh9qGYeNlGq4VDXUlJy2th2slBNU8Gp8EzloYZOibZJ7t5ecIrFSjVA==
@@ -3286,7 +3445,7 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-intrinsic@^1.0.0:
+get-intrinsic@^1.0.0, get-intrinsic@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.0.1.tgz#94a9768fcbdd0595a1c9273aacf4c89d075631be"
   integrity sha512-ZnWP+AmS1VUaLgTRy47+zKtjTxz+0xMpx3I52i+aalBK1QP19ggLF3Db89KJX7kjfOfP2eoa01qc++GwPgufPg==
@@ -3677,6 +3836,13 @@ iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.5:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+iconv-lite@^0.5.0:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.5.2.tgz#af6d628dccfb463b7364d97f715e4b74b8c8c2b8"
+  integrity sha512-kERHXvpSaB4aU3eANwidg79K8FlrN77m8G9V+0vOR3HYaRifrlwMEpT7ZBJqLSEIHnEgJTHcWK82wwLwwKwtag==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
 iconv-lite@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.2.tgz#ce13d1875b0c3a674bd6a04b7f76b01b1b6ded01"
@@ -3829,11 +3995,23 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
+is-arguments@^1.0.4:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.0.tgz#62353031dfbee07ceb34656a6bde59efecae8dd9"
+  integrity sha512-1Ij4lOMPl/xB5kBDn7I+b2ttPMKa8szhEIrXDuXQD/oe3HJLTLhqhgGspwgyGd6MOywBUqVvYicF72lkgDnIHg==
+  dependencies:
+    call-bind "^1.0.0"
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
+is-bigint@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.1.tgz#6923051dfcbc764278540b9ce0e6b3213aa5ebc2"
+  integrity sha512-J0ELF4yHFxHy0cmSxZuheDOz2luOdVvqjwmEcj8H/L1JHeuEDSDbeRP+Dk9kFVk5RTFzbucJ2Kb9F7ixY2QaCg==
+
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@@ -3841,6 +4019,13 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
+is-boolean-object@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.0.tgz#e2aaad3a3a8fca34c28f6eee135b156ed2587ff0"
+  integrity sha512-a7Uprx8UtD+HWdyYwnD1+ExtTgqQtD2k/1yJgtXP6wnMm8byhkoTZRl+95LLThpzNZJ5aEvi46cdH+ayMFRwmA==
+  dependencies:
+    call-bind "^1.0.0"
+
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -3884,7 +4069,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1:
+is-date-object@^1.0.1, is-date-object@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
   integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
@@ -3969,16 +4154,31 @@ is-installed-globally@^0.3.1:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
+is-map@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.1.tgz#520dafc4307bb8ebc33b813de5ce7c9400d644a1"
+  integrity sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==
+
 is-natural-number@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/is-natural-number/-/is-natural-number-4.0.1.tgz#ab9d76e1db4ced51e35de0c72ebecf09f734cde8"
   integrity sha1-q5124dtM7VHjXeDHLr7PCfc0zeg=
 
+is-negative-zero@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.1.tgz#3de746c18dda2319241a53675908d8f766f11c24"
+  integrity sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w==
+
 is-npm@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"
   integrity sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==
 
+is-number-object@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
+  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
+
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -4030,11 +4230,21 @@ is-retry-allowed@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz#d778488bd0a4666a3be8a1482b9f2baafedea8b4"
   integrity sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==
 
+is-set@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
+  integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
+
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
 
+is-string@^1.0.4, is-string@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
+  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
+
 is-symbol@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
@@ -4051,6 +4261,17 @@ is-type-of@^1.0.0:
     is-class-hotfix "~0.0.6"
     isstream "~0.1.2"
 
+is-typed-array@^1.1.3:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.4.tgz#1f66f34a283a3c94a4335434661ca53fff801120"
+  integrity sha512-ILaRgn4zaSrVNXNGtON6iFNotXW3hAPF3+0fB1usg2jFlWqo5fEDdmJkz0zBfoi7Dgskr8Khi2xZ8cXqZEfXNA==
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    call-bind "^1.0.0"
+    es-abstract "^1.18.0-next.1"
+    foreach "^2.0.5"
+    has-symbols "^1.0.1"
+
 is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
@@ -4061,6 +4282,16 @@ is-utf8@^0.2.0:
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
   integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
 
+is-weakmap@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
+  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
+
+is-weakset@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
+  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
+
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -4093,6 +4324,11 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
 isbinaryfile@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.6.tgz#edcb62b224e2b4710830b67498c8e4e5a4d2610b"
@@ -4587,6 +4823,11 @@ js-yaml@^3.13.1, js-yaml@^3.14.0:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
+jsbi@^3.1.1:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/jsbi/-/jsbi-3.1.4.tgz#9654dd02207a66a4911b4e4bb74265bc2cbc9dd0"
+  integrity sha512-52QRRFSsi9impURE8ZUbzAMCLjPm4THO7H2fcuIvaaeFTbSysvkodbQQXIVsNgq/ypDbq6dJiuGKL0vZ/i9hUg==
+
 jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
@@ -4747,7 +4988,7 @@ jwa@^1.4.1:
     ecdsa-sig-formatter "1.0.11"
     safe-buffer "^5.0.1"
 
-jws@^3.2.2:
+jws@3.x.x, jws@^3.2.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/jws/-/jws-3.2.2.tgz#001099f3639468c9414000e99995fa52fb478304"
   integrity sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==
@@ -5433,6 +5674,15 @@ ms@2.1.2, ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
+mssql@^6.2.3:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/mssql/-/mssql-6.2.3.tgz#1d15bbe8c3057e32ee6e98596b6c323b097a6cba"
+  integrity sha512-4TW/fA9UgzmVTNgjl65r6ISr6aL5QHnlptEt1A3jIpdzkNbFPIkRbUNz90324HIdE+5pKc3VqikOImcTrhd4og==
+  dependencies:
+    debug "^4"
+    tarn "^1.1.5"
+    tedious "^6.6.2"
+
 mustache@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/mustache/-/mustache-4.0.1.tgz#d99beb031701ad433338e7ea65e0489416c854a2"
@@ -5470,6 +5720,11 @@ napi-macros@~2.0.0:
   resolved "https://registry.yarnpkg.com/napi-macros/-/napi-macros-2.0.0.tgz#2b6bae421e7b96eb687aa6c77a7858640670001b"
   integrity sha512-A0xLykHtARfueITVDernsAWdtIMbOJgKgcluwENp3AlsKN/PloyO10HtmoqnFAQAcxPkgZN7wdfPfEd0zNGxbg==
 
+native-duplexpair@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/native-duplexpair/-/native-duplexpair-1.0.0.tgz#7899078e64bf3c8a3d732601b3d40ff05db58fa0"
+  integrity sha1-eJkHjmS/PIo9cyYBs9QP8F21j6A=
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -5649,6 +5904,14 @@ object-inspect@^1.8.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
   integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
 
+object-is@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.4.tgz#63d6c83c00a43f4cbc9434eb9757c8a5b8565068"
+  integrity sha512-1ZvAZ4wlF7IyPVOcE1Omikt7UpaFlOQq0HlSti+ZvDH3UiD2brwGMwDbyV43jao2bKJ+4+WdPJHSd7kgzKYVqg==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+
 object-keys@^1.0.12, object-keys@^1.0.6, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -5661,7 +5924,7 @@ object-visit@^1.0.0:
   dependencies:
     isobject "^3.0.0"
 
-object.assign@^4.1.1:
+object.assign@^4.1.1, object.assign@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
   integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
@@ -6520,7 +6783,7 @@ readable-stream@1.1.14, readable-stream@^1.0.27-1:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-"readable-stream@2 || 3", readable-stream@^3.0.0, readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0:
+"readable-stream@2 || 3", readable-stream@^3.0.0, readable-stream@^3.0.1, readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
   integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
@@ -6604,6 +6867,19 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
+regexp.prototype.flags@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
+  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+
+regexparam@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
+  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
+
 regexpp@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
@@ -6654,7 +6930,7 @@ request-promise-native@^1.0.5:
     stealthy-require "^1.1.1"
     tough-cookie "^2.3.3"
 
-request@^2.87.0:
+"request@>= 2.52.0", request@^2.87.0:
   version "2.88.2"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
   integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
@@ -6809,16 +7085,16 @@ rxjs@^6.6.0:
   dependencies:
     tslib "^1.9.0"
 
+safe-buffer@*, safe-buffer@^5.0.1, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
 safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-safe-buffer@^5.0.1, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
-  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
-
 safe-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
@@ -6989,6 +7265,14 @@ shellwords@^0.1.1:
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
+side-channel@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
+  integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==
+  dependencies:
+    es-abstract "^1.18.0-next.0"
+    object-inspect "^1.8.0"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -7490,6 +7774,28 @@ tar-stream@^2.1.4:
     inherits "^2.0.3"
     readable-stream "^3.1.1"
 
+tarn@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/tarn/-/tarn-1.1.5.tgz#7be88622e951738b9fa3fb77477309242cdddc2d"
+  integrity sha512-PMtJ3HCLAZeedWjJPgGnCvcphbCOMbtZpjKgLq3qM5Qq9aQud+XHrL0WlrlgnTyS8U+jrjGbEXprFcQrxPy52g==
+
+tedious@^6.6.2:
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/tedious/-/tedious-6.7.0.tgz#ad02365f16f9e0416b216e13d3f83c53addd42ca"
+  integrity sha512-8qr7+sB0h4SZVQBRWUgHmYuOEflAOl2eihvxk0fVNvpvGJV4V5UC/YmSvebyfgyfwWcPO22/AnSbYVZZqf9wuQ==
+  dependencies:
+    "@azure/ms-rest-nodeauth" "2.0.2"
+    "@types/node" "^12.12.17"
+    "@types/readable-stream" "^2.3.5"
+    bl "^3.0.0"
+    depd "^2.0.0"
+    iconv-lite "^0.5.0"
+    jsbi "^3.1.1"
+    native-duplexpair "^1.0.0"
+    punycode "^2.1.0"
+    readable-stream "^3.4.0"
+    sprintf-js "^1.1.2"
+
 temp-file@^3.3.7:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/temp-file/-/temp-file-3.3.7.tgz#686885d635f872748e384e871855958470aeb18a"
@@ -7655,7 +7961,7 @@ touch@^3.1.0:
   dependencies:
     nopt "~1.0.10"
 
-tough-cookie@^2.3.3, tough-cookie@^2.3.4, tough-cookie@~2.5.0:
+tough-cookie@^2.3.3, tough-cookie@^2.3.4, tough-cookie@^2.4.3, tough-cookie@~2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
   integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==
@@ -7693,7 +7999,7 @@ truncate-utf8-bytes@^1.0.0:
   dependencies:
     utf8-byte-length "^1.0.1"
 
-tslib@^1.9.0, tslib@^1.9.3:
+tslib@^1.9.0, tslib@^1.9.2, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -7710,7 +8016,7 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
-tunnel@^0.0.6:
+tunnel@0.0.6, tunnel@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/tunnel/-/tunnel-0.0.6.tgz#72f1314b34a5b192db012324df2cc587ca47f92c"
   integrity sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==
@@ -7787,6 +8093,11 @@ undefsafe@^2.0.3:
   dependencies:
     debug "^2.2.0"
 
+"underscore@>= 1.3.1":
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.12.0.tgz#4814940551fc80587cef7840d1ebb0f16453be97"
+  integrity sha512-21rQzss/XPMjolTiIezSu3JAjgagXKROtNrYFEOWK109qY1Uv2tVjPTZ1ci2HgvQDA16gHYSthQIJfB+XId/rQ==
+
 union-value@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
@@ -7939,7 +8250,7 @@ uuid@8.1.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.1.0.tgz#6f1536eb43249f473abc6bd58ff983da1ca30d8d"
   integrity sha512-CI18flHDznR0lq54xBycOVmphdCYnQLKn8abKn7PXUiKUGdEd+/l9LWNJmugXel4hXq7S+RMNl34ecyC9TntWg==
 
-uuid@^3.3.2:
+uuid@^3.1.0, uuid@^3.2.1, uuid@^3.3.2:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
@@ -8030,11 +8341,45 @@ whatwg-url@^7.0.0:
     tr46 "^1.0.1"
     webidl-conversions "^4.0.2"
 
+which-boxed-primitive@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz#cbe8f838ebe91ba2471bb69e9edbda67ab5a5ec1"
+  integrity sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ==
+  dependencies:
+    is-bigint "^1.0.0"
+    is-boolean-object "^1.0.0"
+    is-number-object "^1.0.3"
+    is-string "^1.0.4"
+    is-symbol "^1.0.2"
+
+which-collection@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
+  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
+  dependencies:
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-weakmap "^2.0.1"
+    is-weakset "^2.0.1"
+
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
+which-typed-array@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.4.tgz#8fcb7d3ee5adf2d771066fba7cf37e32fe8711ff"
+  integrity sha512-49E0SpUe90cjpoc7BOJwyPHRqSAd12c10Qm2amdEZrJPCY2NDxaW01zHITrem+rnETY3dwrbH3UUrUwagfCYDA==
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    call-bind "^1.0.0"
+    es-abstract "^1.18.0-next.1"
+    foreach "^2.0.5"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.1"
+    is-typed-array "^1.1.3"
+
 which@^1.2.9, which@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
@@ -8162,7 +8507,7 @@ xml2js@0.4.19:
     sax ">=0.6.0"
     xmlbuilder "~9.0.1"
 
-xml2js@^0.4.5:
+xml2js@^0.4.19, xml2js@^0.4.5:
   version "0.4.23"
   resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.23.tgz#a0c69516752421eb2ac758ee4d4ccf58843eac66"
   integrity sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==
@@ -8180,6 +8525,16 @@ xmlbuilder@~9.0.1:
   resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.7.tgz#132ee63d2ec5565c557e20f4c22df9aca686b10d"
   integrity sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=
 
+"xmldom@>= 0.1.x":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.4.0.tgz#8771e482a333af44587e30ce026f0998c23f3830"
+  integrity sha512-2E93k08T30Ugs+34HBSTQLVtpi6mCddaY8uO+pMNk1pqSjV5vElzn4mmh6KLxN3hki8rNcHSYzILoh3TEWORvA==
+
+xpath.js@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/xpath.js/-/xpath.js-1.1.0.tgz#3816a44ed4bb352091083d002a383dd5104a5ff1"
+  integrity sha512-jg+qkfS4K8E7965sqaUl8mRngXiKb3WZGfONgE18pr03FUQiuSV6G+Ej4tS55B+rIQSFEIw3phdVAQ4pPqNWfQ==
+
 "xtend@>=4.0.0 <4.1.0-0", xtend@^4.0.0, xtend@^4.0.2, xtend@~4.0.0, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"

From 30b4c2467fb465456b56731f22bbdcb0cfd9026d Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Wed, 30 Dec 2020 11:46:37 +0000
Subject: [PATCH 07/70] codemirror

---
 packages/builder/package.json                 |  1 +
 .../builder/src/builderStore/store/backend.js | 14 +++++++
 .../modals/CreateDatasourceModal.svelte       |  6 ++-
 .../src/components/integration/Editor.svelte  | 34 ++++++++++++++++
 .../components/integration/SqlEditor.svelte   |  0
 .../src/components/integration/codemirror.js  |  7 ++++
 .../src/components/integration/index.svelte   |  5 ++-
 .../[selectedDatasource]/[query]/index.svelte |  2 +-
 packages/builder/yarn.lock                    | 40 ++++++++++++++-----
 9 files changed, 95 insertions(+), 14 deletions(-)
 create mode 100644 packages/builder/src/components/integration/Editor.svelte
 delete mode 100644 packages/builder/src/components/integration/SqlEditor.svelte
 create mode 100644 packages/builder/src/components/integration/codemirror.js

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 6c023efd29..b4a382f7ac 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -71,6 +71,7 @@
     "@sentry/browser": "5.19.1",
     "@svelteschool/svelte-forms": "^0.7.0",
     "britecharts": "^2.16.0",
+    "codemirror": "^5.59.0",
     "d3-selection": "^1.4.1",
     "deepmerge": "^4.2.2",
     "fast-sort": "^2.2.0",
diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index a1e3cfffdb..4e6767fa70 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -81,6 +81,20 @@ export const getBackendUiStore = () => {
           }
 
           state.datasources = state.datasources
+          state.selectedDatasourceId = json._id
+          return state
+        })
+        return json
+      },
+      delete: async datasource => {
+        await api.delete(
+          `/api/datasources/${datasource._id}/${datasource._rev}`
+        )
+        store.update(state => {
+          state.datasources = state.datasources.filter(
+            existing => existing._id !== datasource._id
+          )
+          state.selectedDatasourceId = null
           return state
         })
       },
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
index 21c297c8a9..ef458c1953 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
@@ -27,7 +27,7 @@
     const { type, ...config } = integration
 
     // Create datasource
-    await backendUiStore.actions.datasources.save({
+    const response = await backendUiStore.actions.datasources.save({
       name,
       source: type,
       config
@@ -35,8 +35,10 @@
     notifier.success(`Datasource ${name} created successfully.`)
     analytics.captureEvent("Datasource Created", { name })
 
+    console.log(response)
+
     // Navigate to new datasource
-    $goto(`./datasource/${datasource._id}`)
+    $goto(`./datasource/${response._id}`)
   }
 </script>
 
diff --git a/packages/builder/src/components/integration/Editor.svelte b/packages/builder/src/components/integration/Editor.svelte
new file mode 100644
index 0000000000..f2bce2f222
--- /dev/null
+++ b/packages/builder/src/components/integration/Editor.svelte
@@ -0,0 +1,34 @@
+<script>
+  import cm from "./codemirror"
+  import { onMount, createEventDispatcher } from "svelte"
+
+  const dispatch = createEventDispatcher()
+
+  export let value
+  export let mode = "sql"
+
+  let editor
+  let codemirror
+
+  onMount(async () => {
+    codemirror = cm.fromTextArea(editor, {
+      lineNumbers: true,
+      mode,
+      lineWrapping: true,
+      indentUnit: 2,
+      tabSize: 2,
+      autoCloseBrackets: true,
+      autoCloseTags: true,
+      extraKeys: {
+        "Ctrl-/": "toggleComment",
+      },
+    })
+    codemirror.on("change", instance => {
+      const code = instance.getValue()
+      value = code
+      // dispatch("change", { value })
+    })
+  })
+</script>
+
+<textarea bind:value bind:this={editor} />
diff --git a/packages/builder/src/components/integration/SqlEditor.svelte b/packages/builder/src/components/integration/SqlEditor.svelte
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/builder/src/components/integration/codemirror.js b/packages/builder/src/components/integration/codemirror.js
new file mode 100644
index 0000000000..3b823a1c97
--- /dev/null
+++ b/packages/builder/src/components/integration/codemirror.js
@@ -0,0 +1,7 @@
+import CodeMirror from "codemirror"
+import "codemirror/lib/codemirror.css"
+import "codemirror/mode/sql/sql"
+import "codemirror/mode/handlebars/handlebars"
+import "codemirror/mode/javascript/javascript"
+
+export default CodeMirror
diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte
index e7f0a7f47c..15021fe489 100644
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@@ -1,5 +1,6 @@
 <script>
   import { TextArea } from "@budibase/bbui"
+  import Editor from "./Editor.svelte"
 
   const QueryTypes = {
     SQL: "sql",
@@ -7,8 +8,10 @@
 
   export let queryType
   export let query
+
+  $: console.log(query)
 </script>
 
 {#if queryType === QueryTypes.SQL}
-  <TextArea thin label="Query" bind:value={query} />
+  <Editor label="Query" bind:value={query} />
 {/if}
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 0a692cf422..087c817c13 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
@@ -8,7 +8,7 @@
   $: datasource = $backendUiStore.datasources.find(
     ds => ds._id === $params.selectedDatasource
   )
-  $: query = datasource.queries[$params.query]
+  $: query = datasource?.queries[$params.query]
 </script>
 
 {#if $backendUiStore.selectedDatabase._id && query}
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index fe8713612a..04babb5420 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -855,9 +855,9 @@
     turndown "^7.0.0"
 
 "@budibase/client@^0.4.2":
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.4.2.tgz#cb146681377f96ca907234606cdfa9f66db2139e"
-  integrity sha512-3KjkSMFc8mYMw48oYhfszJHgG03P9XS8+bRlAsPtT0m5RP8GF7jxWNDDrpl80pbi1NA1D+QmMo5SjLeCAO1Y+Q==
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.4.3.tgz#eaf1ac83ed04722c29ea51907ac7c2190bd09b74"
+  integrity sha512-gfVIU7P1HCMuH9rgmqgv2pD5oFDwwuX0QF3+FXuKR3/Cr6JW+bstVsNZHGgwOrmbxT3oAxfeNX186zrQupJ42w==
   dependencies:
     deep-equal "^2.0.1"
     mustache "^4.0.1"
@@ -2255,6 +2255,11 @@ code-point-at@^1.0.0:
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
   integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
 
+codemirror@^5.59.0:
+  version "5.59.0"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.59.0.tgz#6d8132055459aabf21d04cae5cf5c430e5c57bb9"
+  integrity sha512-UGzSkCacY9z0rSpQ3wnTWRN2nvRE6foDXnJltWW8pazInR/R+3gXHrao4IFQMv/bSBvFBxt8/HPpkpKAS54x5Q==
+
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -3127,7 +3132,7 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2:
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
-es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1:
+es-abstract@^1.18.0-next.1:
   version "1.18.0-next.1"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.1.tgz#6e3a0a4bda717e5023ab3b8e90bec36108d22c68"
   integrity sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==
@@ -3632,7 +3637,7 @@ get-caller-file@^2.0.1:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-intrinsic@^1.0.0, get-intrinsic@^1.0.1:
+get-intrinsic@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.0.1.tgz#94a9768fcbdd0595a1c9273aacf4c89d075631be"
   integrity sha512-ZnWP+AmS1VUaLgTRy47+zKtjTxz+0xMpx3I52i+aalBK1QP19ggLF3Db89KJX7kjfOfP2eoa01qc++GwPgufPg==
@@ -3641,6 +3646,15 @@ get-intrinsic@^1.0.0, get-intrinsic@^1.0.1:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
+get-intrinsic@^1.0.1, get-intrinsic@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.0.2.tgz#6820da226e50b24894e08859469dc68361545d49"
+  integrity sha512-aeX0vrFm21ILl3+JpFFRNe9aUvp6VFZb2/CTbgLb8j75kOhvoNYjt9d8KA/tJG4gSo8nzEDedRl0h7vDmBYRVg==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+
 get-port@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
@@ -5599,6 +5613,11 @@ object-inspect@^1.8.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
   integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
 
+object-inspect@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.9.0.tgz#c90521d74e1127b67266ded3394ad6116986533a"
+  integrity sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==
+
 object-is@^1.0.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.3.tgz#2e3b9e65560137455ee3bd62aec4d90a2ea1cc81"
@@ -6719,12 +6738,13 @@ shortid@^2.2.15:
     nanoid "^2.1.0"
 
 side-channel@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
-  integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
   dependencies:
-    es-abstract "^1.18.0-next.0"
-    object-inspect "^1.8.0"
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
 
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"

From d27a264c96a5feccd5c414fd27a5a548d5c90390 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Mon, 4 Jan 2021 10:39:17 +0000
Subject: [PATCH 08/70] better UI feedback

---
 packages/builder/src/builderStore/store/backend.js        | 4 ++--
 .../backend/DataTable/buttons/CreateQueryButton.svelte    | 8 ++++++--
 .../DatasourceNavigator/DatasourceNavigator.svelte        | 5 +++--
 .../datasource/[selectedDatasource]/[query]/index.svelte  | 7 +++----
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index 4e6767fa70..76888131a0 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -60,9 +60,9 @@ export const getBackendUiStore = () => {
         })
         return json
       },
-      select: async datasource => {
+      select: async datasourceId => {
         store.update(state => {
-          state.selectedDatasourceId = datasource._id
+          state.selectedDatasourceId = datasourceId
           return state
         })
       },
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte
index d2f3ed0c57..92ab2922b0 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte
@@ -9,6 +9,7 @@
     ModalContent,
     TextArea,
   } from "@budibase/bbui"
+  import { notifier } from "builderStore/store/notifications"
   import { backendUiStore } from "builderStore"
   import api from "builderStore/api"
   import EditIntegrationConfig from "../modals/EditIntegrationConfig.svelte"
@@ -23,17 +24,20 @@
   async function saveQuery() {
     try {
       await backendUiStore.actions.datasources.saveQuery(datasource._id, query)
+      notifier.success(`Query created successfully.`)
     } catch (err) {
       console.error(err)
-      // TODO: notifier
+      notifier.danger(`Error creating query. ${err.message}`)
     }
   }
+
+  $: console.log(query)
 </script>
 
 <div>
   <Button text small on:click={modal.show}>
     <Icon name="filter" />
-    Create Query
+    {query ? 'Edit' : 'Create'} Query
   </Button>
 </div>
 <Modal bind:this={modal}>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
index 14aafc8561..ee69d643cb 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
@@ -15,7 +15,7 @@
 
   function selectDatasource(datasource) {
     // You can't actually select a datasource, just edit it
-    backendUiStore.actions.datasources.select(datasource)
+    backendUiStore.actions.datasources.select(datasource._id)
     $goto(`./datasource/${datasource._id}`)
   }
 
@@ -23,6 +23,7 @@
     if ($backendUiStore.selectedQueryId === queryId) {
       return
     }
+    backendUiStore.actions.datasources.select(datasourceId)
     backendUiStore.actions.queries.select(queryId)
     $goto(`./datasource/${datasourceId}/${queryId}`)
   }
@@ -54,7 +55,7 @@
           indentLevel={1}
           icon="ri-eye-line"
           text={datasource.queries[queryId].name}
-          selected={selectedView === queryId}
+          selected={$backendUiStore.selectedQueryId === queryId}
           on:click={() => onClickQuery(datasource._id, queryId)}>
           <!-- <EditViewPopover
             view={{ name: viewName, ...table.views[viewName] }} /> -->
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 0a692cf422..67acdc46f3 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
@@ -3,14 +3,13 @@
   import { backendUiStore } from "builderStore"
   import ExternalDataSourceTable from "components/backend/DataTable/ExternalDataSourceTable.svelte"
 
-  $: datasourceId = $params.selectedDatasource
   // TODO: refactor
   $: datasource = $backendUiStore.datasources.find(
     ds => ds._id === $params.selectedDatasource
   )
-  $: query = datasource.queries[$params.query]
+  $: query = datasource && datasource.queries[$params.query]
 </script>
 
-{#if $backendUiStore.selectedDatabase._id && query}
-  <ExternalDataSourceTable {query} {datasourceId} />
+{#if $backendUiStore.selectedDatabase._id && datasource}
+  <ExternalDataSourceTable {query} datasourceId={datasource._id} />
 {/if}

From 755fa0ac4ae068d35d80a2b92d68254a985303bc Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Mon, 4 Jan 2021 18:57:16 +0000
Subject: [PATCH 09/70] allow execution of external connector queries from
 button clicks

---
 .../builder/src/builderStore/store/backend.js |  3 +-
 .../DataTable/ExternalDataSourceTable.svelte  | 14 ++------
 .../components/backend/DataTable/Table.svelte |  1 +
 .../buttons/CreateQueryButton.svelte          |  8 ++---
 .../DataTable/modals/CreateEditQuery.svelte   |  2 ++
 .../DatasourceNavigator.svelte                | 28 ---------------
 .../TableNavigator/TableNavigator.svelte      | 32 +----------------
 .../EventsEditor/actions/CreateRow.svelte     | 11 ------
 .../EventsEditor/actions/DeleteRow.svelte     |  2 --
 .../EventsEditor/actions/ExecuteQuery.svelte  | 32 +++++++++++++++++
 .../EventsEditor/actions/index.js             |  5 +++
 .../pages/[application]/data/_layout.svelte   | 36 +++++++++++++++++--
 .../[selectedDatasource]/[query]/index.svelte |  4 +--
 .../[selectedDatasource]/index.svelte         |  2 +-
 packages/client/src/api/queries.js            | 11 ++++++
 packages/client/src/utils/buttonActions.js    | 21 +++++++++--
 .../server/src/api/controllers/datasource.js  | 27 +++++++++++++-
 packages/server/src/api/routes/datasource.js  |  5 +++
 18 files changed, 147 insertions(+), 97 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte

diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index 76888131a0..1d606901ec 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -1,7 +1,6 @@
 import { writable, get } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
 import api from "../api"
-import { backendUiStore } from ".."
 
 const INITIAL_BACKEND_UI_STATE = {
   tables: [],
@@ -63,6 +62,7 @@ export const getBackendUiStore = () => {
       select: async datasourceId => {
         store.update(state => {
           state.selectedDatasourceId = datasourceId
+          state.selectedQueryId = null
           return state
         })
       },
@@ -123,6 +123,7 @@ export const getBackendUiStore = () => {
     queries: {
       select: queryId =>
         store.update(state => {
+          state.selectedDatasourceId = null
           state.selectedQueryId = queryId
           return state
         }),
diff --git a/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte b/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
index 75d2b8ffaa..85f23fe72b 100644
--- a/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
@@ -6,21 +6,13 @@
   import Table from "./Table.svelte"
   import CreateQueryButton from "components/backend/DataTable/buttons/CreateQueryButton.svelte"
 
-  export let datasourceId
+  export let datasource
   export let query = {}
 
   let data = []
   let loading = false
   let error = false
 
-  $: datasourceId = $params.selectedDatasource
-  // TODO: refactor
-  // $: query = $backendUiStore.datasources.find(
-  //   ds => ds._id === $params.selectedDatasource
-  // ).queries[$params.query]
-  $: title = query.name
-  $: schema = query.schema
-
   async function fetchData() {
     try {
       loading = true
@@ -46,8 +38,8 @@
 {#if error}
   <div class="errors">{error}</div>
 {/if}
-<Table {title} {schema} {data} {loading}>
-  <CreateQueryButton {query} />
+<Table title={query.name} schema={query.schema} {data} {loading}>
+  <CreateQueryButton {query} {datasource} />
 </Table>
 
 <style>
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 1e6c53bd11..723274d271 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -236,6 +236,7 @@
   }
 
   :global(.ag-filter) {
+    background: var(--background);
     padding: var(--spacing-s);
     outline: none;
     box-sizing: border-box;
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte
index 92ab2922b0..c53c6f4f28 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte
@@ -16,9 +16,9 @@
   import CreateEditQuery from "components/backend/DataTable/modals/CreateEditQuery.svelte"
 
   export let datasource
+  export let query = {}
 
   let modal
-  let query = {}
   let fields = []
 
   async function saveQuery() {
@@ -30,14 +30,12 @@
       notifier.danger(`Error creating query. ${err.message}`)
     }
   }
-
-  $: console.log(query)
 </script>
 
 <div>
   <Button text small on:click={modal.show}>
     <Icon name="filter" />
-    {query ? 'Edit' : 'Create'} Query
+    {$backendUiStore.selectedQueryId ? 'Edit' : 'Create'} Query
   </Button>
 </div>
 <Modal bind:this={modal}>
@@ -45,7 +43,7 @@
     confirmText="Save"
     cancelText="Cancel"
     onConfirm={saveQuery}
-    title="Create New Query">
+    title={query ? 'Edit Query' : 'Create New Query'}>
     <CreateEditQuery {datasource} bind:query />
   </ModalContent>
 </Modal>
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditQuery.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditQuery.svelte
index e62a9336ac..3c616017da 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditQuery.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditQuery.svelte
@@ -31,6 +31,8 @@
   export let query
   export let fields = []
 
+  console.log(query)
+
   let config = {}
   let queryType
   let previewTab = "PREVIEW"
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
index ee69d643cb..9002c8edfb 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
@@ -8,8 +8,6 @@
   import { Modal, Switcher } from "@budibase/bbui"
   import NavItem from "components/common/NavItem.svelte"
 
-  let modal
-
   $: selectedView =
     $backendUiStore.selectedView && $backendUiStore.selectedView.name
 
@@ -34,12 +32,6 @@
 </script>
 
 {#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
-  <div class="title">
-    <i
-      data-cy="new-datasource"
-      on:click={modal.show}
-      class="ri-add-circle-fill" />
-  </div>
   <div class="hierarchy-items-container">
     {#each $backendUiStore.datasources as datasource, idx}
       <NavItem
@@ -64,23 +56,3 @@
     {/each}
   </div>
 {/if}
-<Modal bind:this={modal}>
-  <CreateDatasourceModal />
-</Modal>
-
-<style>
-  .title {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .title i {
-    font-size: 20px;
-  }
-  .title i:hover {
-    cursor: pointer;
-    color: var(--blue);
-  }
-</style>
diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
index 6c67e44ae2..07246626eb 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
@@ -2,14 +2,11 @@
   import { goto } from "@sveltech/routify"
   import { backendUiStore } from "builderStore"
   import { TableNames } from "constants"
-  import CreateTableModal from "./modals/CreateTableModal.svelte"
   import EditTablePopover from "./popovers/EditTablePopover.svelte"
   import EditViewPopover from "./popovers/EditViewPopover.svelte"
-  import { Modal, Switcher } from "@budibase/bbui"
+  import { Switcher } from "@budibase/bbui"
   import NavItem from "components/common/NavItem.svelte"
 
-  let modal
-
   $: selectedView =
     $backendUiStore.selectedView && $backendUiStore.selectedView.name
 
@@ -35,9 +32,6 @@
 </script>
 
 {#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
-  <div class="title">
-    <i data-cy="new-table" on:click={modal.show} class="ri-add-circle-fill" />
-  </div>
   <div class="hierarchy-items-container">
     {#each $backendUiStore.tables as table, idx}
       <NavItem
@@ -64,27 +58,3 @@
     {/each}
   </div>
 {/if}
-<Modal bind:this={modal}>
-  <CreateTableModal />
-</Modal>
-
-<style>
-  .title {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .title h1 {
-    font-size: var(--font-size-m);
-    font-weight: 500;
-    margin: 0;
-  }
-  .title i {
-    font-size: 20px;
-  }
-  .title i:hover {
-    cursor: pointer;
-    color: var(--blue);
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/CreateRow.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/CreateRow.svelte
index 5ea1378d02..388b247a4b 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/CreateRow.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/CreateRow.svelte
@@ -13,9 +13,6 @@
     tables: $backendUiStore.tables,
   })
 
-  // just wraps binding in {{ ... }}
-  const toBindingExpression = bindingPath => `{{ ${bindingPath} }}`
-
   const tableFields = tableId => {
     const table = $backendUiStore.tables.find(m => m._id === tableId)
 
@@ -63,12 +60,4 @@
     grid-column-start: 2;
     grid-column-end: 6;
   }
-
-  .cannot-use {
-    color: var(--red);
-    font-size: var(--font-size-s);
-    text-align: center;
-    width: 70%;
-    margin: auto;
-  }
 </style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/DeleteRow.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/DeleteRow.svelte
index 230738bc95..b53b6f664a 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/DeleteRow.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/DeleteRow.svelte
@@ -42,8 +42,6 @@
             typeof tableInfo === "string" ? tableInfo : tableInfo.tableId
         }
       }
-
-      console.log(parameters)
     }
   }
 </script>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
new file mode 100644
index 0000000000..95b92835e6
--- /dev/null
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
@@ -0,0 +1,32 @@
+<script>
+  import { Select, Label, Spacer } from "@budibase/bbui"
+  import { backendUiStore } from "builderStore"
+
+  export let parameters
+
+  $: datasource = $backendUiStore.datasources.find(
+    ds => ds._id === parameters.datasourceId
+  )
+</script>
+
+<div class="root">
+  <Label size="m" color="dark">Datasource</Label>
+  <Select secondary bind:value={parameters.datasourceId}>
+    <option value="" />
+    {#each $backendUiStore.datasources as datasource}
+      <option value={datasource._id}>{datasource.name}</option>
+    {/each}
+  </Select>
+
+  <Spacer medium />
+
+  {#if parameters.datasourceId}
+    <Label size="m" color="dark">Query</Label>
+    <Select secondary bind:value={parameters.queryId}>
+      <option value="" />
+      {#each Object.keys(datasource.queries) as query}
+        <option value={query}>{datasource.queries[query].name}</option>
+      {/each}
+    </Select>
+  {/if}
+</div>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/index.js b/packages/builder/src/components/userInterface/EventsEditor/actions/index.js
index 1c07356ee9..f9645b6caa 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/index.js
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/index.js
@@ -1,6 +1,7 @@
 import NavigateTo from "./NavigateTo.svelte"
 import SaveRow from "./SaveRow.svelte"
 import DeleteRow from "./DeleteRow.svelte"
+import ExecuteQuery from "./ExecuteQuery.svelte"
 
 // defines what actions are available, when adding a new one
 // the component is the setup panel for the action
@@ -20,4 +21,8 @@ export default [
     name: "Navigate To",
     component: NavigateTo,
   },
+  {
+    name: "Execute Query",
+    component: ExecuteQuery,
+  },
 ]
diff --git a/packages/builder/src/pages/[application]/data/_layout.svelte b/packages/builder/src/pages/[application]/data/_layout.svelte
index 2d1b254df7..ccf55ab602 100644
--- a/packages/builder/src/pages/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/[application]/data/_layout.svelte
@@ -1,7 +1,10 @@
 <script>
-  import { Switcher } from "@budibase/bbui"
+  import { params } from "@sveltech/routify"
+  import { Switcher, Modal } from "@budibase/bbui"
   import TableNavigator from "components/backend/TableNavigator/TableNavigator.svelte"
   import DatasourceNavigator from "components/backend/DatasourceNavigator/DatasourceNavigator.svelte"
+  import CreateDatasourceModal from "components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte"
+  import CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte"
 
   const tabs = [
     {
@@ -14,17 +17,31 @@
     },
   ]
 
-  let tab = "table"
+  let tab = $params.selectedDatasource ? "datasource" : "table"
+
+  let modal
 </script>
 
 <!-- routify:options index=0 -->
 <div class="root">
   <div class="nav">
     <Switcher headings={tabs} bind:value={tab}>
+      <div class="title">
+        <i
+          data-cy={`new-${tab}`}
+          class="ri-add-circle-fill"
+          on:click={modal.show} />
+      </div>
       {#if tab === 'table'}
         <TableNavigator />
+        <Modal bind:this={modal}>
+          <CreateTableModal />
+        </Modal>
       {:else if tab === 'datasource'}
         <DatasourceNavigator />
+        <Modal bind:this={modal}>
+          <CreateDatasourceModal />
+        </Modal>
       {/if}
     </Switcher>
   </div>
@@ -40,6 +57,7 @@
     grid-template-columns: 260px minmax(0, 1fr);
     background: var(--grey-2);
   }
+
   .content {
     flex: 1 1 auto;
     padding: var(--spacing-l) 40px;
@@ -50,6 +68,7 @@
     align-items: stretch;
     gap: var(--spacing-l);
   }
+
   .nav {
     overflow-y: auto;
     background: var(--background);
@@ -59,5 +78,18 @@
     justify-content: flex-start;
     align-items: stretch;
     gap: var(--spacing-l);
+    position: relative;
+  }
+
+  i {
+    font-size: 20px;
+    position: absolute;
+    top: var(--spacing-l);
+    right: var(--spacing-xl);
+  }
+
+  i:hover {
+    cursor: pointer;
+    color: var(--blue);
   }
 </style>
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 67acdc46f3..32c53a0c2d 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
@@ -10,6 +10,6 @@
   $: query = datasource && datasource.queries[$params.query]
 </script>
 
-{#if $backendUiStore.selectedDatabase._id && datasource}
-  <ExternalDataSourceTable {query} datasourceId={datasource._id} />
+{#if $backendUiStore.selectedDatabase._id && datasource && query}
+  <ExternalDataSourceTable {query} {datasource} />
 {/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 e7be79ebf7..c2f615c511 100644
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
@@ -36,7 +36,7 @@
     margin-bottom: var(--spacing-s);
   }
   section {
-    background: white;
+    background: var(--background);
     border-radius: var(--border-radius-m);
     padding: var(--spacing-xl);
   }
diff --git a/packages/client/src/api/queries.js b/packages/client/src/api/queries.js
index 42177be4cf..cfc92262a0 100644
--- a/packages/client/src/api/queries.js
+++ b/packages/client/src/api/queries.js
@@ -9,3 +9,14 @@ export const fetchQueryData = async ({ datasourceId, queryId }) => {
   })
   return response.rows
 }
+
+/**
+ * Executes a query against an external data connector.
+ */
+export const executeQuery = async ({ datasourceId, queryId }) => {
+  const response = await API.post({
+    url: `/api/datasources/${datasourceId}/queries/${queryId}`,
+    // body: params,
+  })
+  return response.rows
+}
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 2968525188..f17e5d0ee5 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -1,6 +1,6 @@
-import { enrichDataBinding } from "./enrichDataBinding"
+import { enrichDataBinding, enrichDataBindings } from "./enrichDataBinding"
 import { routeStore } from "../store"
-import { saveRow, deleteRow } from "../api"
+import { saveRow, deleteRow, executeQuery } from "../api"
 
 const saveRowHandler = async (action, context) => {
   let draft = context[`${action.parameters.contextPath}_draft`]
@@ -25,10 +25,27 @@ const navigationHandler = action => {
   routeStore.actions.navigate(action.parameters.url)
 }
 
+const queryExecutionHandler = async (action, context) => {
+  const { datasourceId, queryId, params } = action.parameters
+  console.log(context)
+  // TODO: allow context based bindings for query params
+  // const enrichedQueryParameters = enrichDataBindings(params, context)
+
+  // console.log({
+  //   action,
+  //   context,
+  //   // enrichedQueryParameters,
+  //   datasourceId,
+  //   // queryId
+  // })
+  await executeQuery({ datasourceId, queryId })
+}
+
 const handlerMap = {
   ["Save Row"]: saveRowHandler,
   ["Delete Row"]: deleteRowHandler,
   ["Navigate To"]: navigationHandler,
+  ["Execute Query"]: queryExecutionHandler,
 }
 
 /**
diff --git a/packages/server/src/api/controllers/datasource.js b/packages/server/src/api/controllers/datasource.js
index 0b7ff1119b..d2a963d89a 100644
--- a/packages/server/src/api/controllers/datasource.js
+++ b/packages/server/src/api/controllers/datasource.js
@@ -115,7 +115,7 @@ exports.previewQuery = async function(ctx) {
   ctx.body = await new Integration(config, query).query()
 }
 
-exports.executeQuery = async function(ctx) {
+exports.fetchQuery = async function(ctx) {
   const db = new CouchDB(ctx.user.appId)
 
   const datasource = await db.get(ctx.params.datasourceId)
@@ -139,3 +139,28 @@ exports.executeQuery = async function(ctx) {
     rows,
   }
 }
+
+exports.executeQuery = async function(ctx) {
+  const db = new CouchDB(ctx.user.appId)
+
+  const datasource = await db.get(ctx.params.datasourceId)
+
+  const query = datasource.queries[ctx.params.queryId]
+
+  const Integration = integrations[datasource.source]
+
+  if (!Integration) {
+    ctx.throw(400, "Integration type does not exist.")
+    return
+  }
+
+  // TODO: allow the ability to POST parameters down when executing the query
+  // const customParams = ctx.request.body
+
+  const response = await new Integration(
+    datasource.config,
+    query.queryString
+  ).query()
+
+  ctx.body = response
+}
diff --git a/packages/server/src/api/routes/datasource.js b/packages/server/src/api/routes/datasource.js
index b56d3bec84..19930e6f48 100644
--- a/packages/server/src/api/routes/datasource.js
+++ b/packages/server/src/api/routes/datasource.js
@@ -28,6 +28,11 @@ router
     datasourceController.previewQuery
   )
   .get(
+    "/api/datasources/:datasourceId/queries/:queryId",
+    authorized(BUILDER),
+    datasourceController.fetchQuery
+  )
+  .post(
     "/api/datasources/:datasourceId/queries/:queryId",
     authorized(BUILDER),
     datasourceController.executeQuery

From d7a0d29b0305ca5329b59e9ef5e4d9f3dce5bc44 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Wed, 6 Jan 2021 12:28:51 +0000
Subject: [PATCH 10/70] switching between queries

---
 .../builder/src/builderStore/store/backend.js |  49 ++++--
 .../DataTable/ExternalDataSourceTable.svelte  |   6 +-
 .../src/components/backend/DataTable/api.js   |   2 +-
 .../buttons/CreateQueryButton.svelte          |  10 +-
 .../DataTable/modals/CreateEditQuery.svelte   |  27 ++--
 .../DatasourceNavigator.svelte                |  14 +-
 .../popovers/EditQueryPopover.svelte          |  85 +++++++++++
 .../src/components/integration/index.svelte   |  19 ++-
 .../EventsEditor/actions/ExecuteQuery.svelte  |   2 +-
 .../userInterface/TableViewSelect.svelte      |  16 +-
 .../[selectedDatasource]/[query]/index.svelte |  11 +-
 packages/client/src/api/queries.js            |   8 +-
 .../server/src/api/controllers/datasource.js  |  95 +-----------
 packages/server/src/api/controllers/query.js  | 141 ++++++++++++++----
 packages/server/src/api/routes/datasource.js  |  40 ++---
 packages/server/src/api/routes/index.js       |   4 +-
 packages/server/src/api/routes/query.js       |  39 ++---
 packages/server/src/db/client.js              |   2 +-
 packages/server/src/db/utils.js               |   6 +-
 .../src/utilities/security/permissions.js     |   1 +
 20 files changed, 339 insertions(+), 238 deletions(-)
 create mode 100644 packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte

diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index 1d606901ec..507b4e3fe9 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -8,6 +8,7 @@ const INITIAL_BACKEND_UI_STATE = {
   users: [],
   roles: [],
   datasources: [],
+  queries: [],
   selectedDatabase: {},
   selectedTable: {},
   draftTable: {},
@@ -24,10 +25,13 @@ export const getBackendUiStore = () => {
         const tables = await tablesResponse.json()
         const datasourcesResponse = await api.get(`/api/datasources`)
         const datasources = await datasourcesResponse.json()
+        const queriesResponse = await api.get(`/api/queries`)
+        const queries = await queriesResponse.json()
         store.update(state => {
           state.selectedDatabase = db
           state.tables = tables
           state.datasources = datasources
+          state.queries = queries
           return state
         })
       },
@@ -98,35 +102,56 @@ export const getBackendUiStore = () => {
           return state
         })
       },
-      saveQuery: async (datasourceId, query) => {
-        const response = await api.post(
-          `/api/datasources/${datasourceId}/queries`,
-          query
-        )
+    },
+    queries: {
+      fetch: async () => {
+        const response = await api.get(`/api/queries`)
         const json = await response.json()
         store.update(state => {
-          const currentIdx = state.datasources.findIndex(
-            ds => ds._id === json._id
+          state.queries = json
+          return state
+        })
+        return json
+      },
+      save: async (datasourceId, query) => {
+        query.datasourceId = datasourceId
+        const response = await api.post(`/api/queries`, query)
+        const json = await response.json()
+        store.update(state => {
+          const currentIdx = state.queries.findIndex(
+            query => query._id === json._id
           )
 
           if (currentIdx >= 0) {
-            state.datasources.splice(currentIdx, 1, json)
+            state.queries.splice(currentIdx, 1, json)
           } else {
-            state.datasources.push(json)
+            state.queries.push(json)
           }
 
-          state.datasources = state.datasources
+          state.queries = state.queries
+          state.selectedQueryId = json._id
           return state
         })
       },
-    },
-    queries: {
       select: queryId =>
         store.update(state => {
           state.selectedDatasourceId = null
           state.selectedQueryId = queryId
           return state
         }),
+      delete: async queryId => {
+        await api.delete(`/api/queries/${queryId}`)
+        store.update(state => {
+          state.datasources = state.queries.filter(
+            existing => existing._id !== queryId
+          )
+          if (state.selectedQueryId === queryId) {
+            state.selectedQueryId = null
+          }
+
+          return state
+        })
+      },
     },
     tables: {
       fetch: async () => {
diff --git a/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte b/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
index 85f23fe72b..a340f7c3c9 100644
--- a/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
@@ -6,7 +6,6 @@
   import Table from "./Table.svelte"
   import CreateQueryButton from "components/backend/DataTable/buttons/CreateQueryButton.svelte"
 
-  export let datasource
   export let query = {}
 
   let data = []
@@ -23,7 +22,6 @@
       data = response.rows || []
       error = false
     } catch (err) {
-      console.log(err)
       error = `${query}: Query error. (${err.message}). This could be a problem with your datasource configuration.`
       notifier.danger(error)
     } finally {
@@ -32,14 +30,14 @@
   }
 
   // Fetch rows for specified query
-  $: fetchData()
+  $: query && fetchData()
 </script>
 
 {#if error}
   <div class="errors">{error}</div>
 {/if}
 <Table title={query.name} schema={query.schema} {data} {loading}>
-  <CreateQueryButton {query} {datasource} />
+  <CreateQueryButton {query} edit />
 </Table>
 
 <style>
diff --git a/packages/builder/src/components/backend/DataTable/api.js b/packages/builder/src/components/backend/DataTable/api.js
index e28f8d9fa6..024a15bcdc 100644
--- a/packages/builder/src/components/backend/DataTable/api.js
+++ b/packages/builder/src/components/backend/DataTable/api.js
@@ -32,7 +32,7 @@ export async function fetchDataForView(view) {
 }
 
 export async function fetchDataForQuery(datasourceId, queryId) {
-  const FETCH_QUERY_URL = `/api/datasources/${datasourceId}/queries/${queryId}`
+  const FETCH_QUERY_URL = `/api/queries/${queryId}`
 
   const response = await api.get(FETCH_QUERY_URL)
   const json = await response.json()
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte
index c53c6f4f28..3388671acb 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte
@@ -15,15 +15,15 @@
   import EditIntegrationConfig from "../modals/EditIntegrationConfig.svelte"
   import CreateEditQuery from "components/backend/DataTable/modals/CreateEditQuery.svelte"
 
-  export let datasource
   export let query = {}
+  export let edit
 
   let modal
   let fields = []
 
   async function saveQuery() {
     try {
-      await backendUiStore.actions.datasources.saveQuery(datasource._id, query)
+      await backendUiStore.actions.queries.save(query.datasourceId, query)
       notifier.success(`Query created successfully.`)
     } catch (err) {
       console.error(err)
@@ -35,7 +35,7 @@
 <div>
   <Button text small on:click={modal.show}>
     <Icon name="filter" />
-    {$backendUiStore.selectedQueryId ? 'Edit' : 'Create'} Query
+    {edit ? 'Edit' : 'Create'} Query
   </Button>
 </div>
 <Modal bind:this={modal}>
@@ -43,7 +43,7 @@
     confirmText="Save"
     cancelText="Cancel"
     onConfirm={saveQuery}
-    title={query ? 'Edit Query' : 'Create New Query'}>
-    <CreateEditQuery {datasource} bind:query />
+    title={edit ? 'Edit Query' : 'Create New Query'}>
+    <CreateEditQuery bind:query />
   </ModalContent>
 </Modal>
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditQuery.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditQuery.svelte
index 3c616017da..024646757c 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditQuery.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditQuery.svelte
@@ -27,17 +27,20 @@
     },
   ]
 
-  export let datasource
   export let query
   export let fields = []
 
-  console.log(query)
-
   let config = {}
-  let queryType
   let previewTab = "PREVIEW"
   let preview
 
+  $: datasource = $backendUiStore.datasources.find(
+    ds => ds._id === query.datasourceId
+  )
+
+  $: query.datasourceId =
+    query.datasourceId || $backendUiStore.selectedDatasourceId
+
   $: query.schema = fields.reduce(
     (acc, next) => ({
       ...acc,
@@ -72,9 +75,8 @@
 
   async function previewQuery() {
     try {
-      const response = await api.post(`/api/datasources/queries/preview`, {
-        type: datasource.source,
-        config: datasource.config,
+      const response = await api.post(`/api/queries/preview`, {
+        datasourceId: datasource._id,
         query: query.queryString,
       })
       const json = await response.json()
@@ -101,18 +103,13 @@
 
 <section>
   <div class="config">
-    <h6>Datasource Type</h6>
-    <span>{datasource.source}</span>
-
-    <Spacer medium />
-
     <Label extraSmall grey>Query Name</Label>
     <Input type="text" thin bind:value={query.name} />
 
     <Spacer medium />
 
     <Label extraSmall grey>Query Type</Label>
-    <Select secondary bind:value={queryType}>
+    <Select secondary bind:value={query.queryType}>
       <option value={''}>Select an option</option>
       {#each Object.keys(config) as queryType}
         <option value={queryType}>{queryType}</option>
@@ -121,7 +118,9 @@
 
     <Spacer medium />
 
-    <IntegrationQueryEditor {queryType} bind:query={query.queryString} />
+    <IntegrationQueryEditor
+      type={query.queryType}
+      bind:query={query.queryString} />
 
     <Spacer small />
 
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
index 9002c8edfb..d790b92cea 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
@@ -5,6 +5,7 @@
   import { TableNames } from "constants"
   import CreateDatasourceModal from "./modals/CreateDatasourceModal.svelte"
   import EditDatasourcePopover from "./popovers/EditDatasourcePopover.svelte"
+  import EditQueryPopover from "./popovers/EditQueryPopover.svelte"
   import { Modal, Switcher } from "@budibase/bbui"
   import NavItem from "components/common/NavItem.svelte"
 
@@ -18,6 +19,7 @@
   }
 
   function onClickQuery(datasourceId, queryId) {
+    console.log(backendUiStore.selectedQueryId, queryId)
     if ($backendUiStore.selectedQueryId === queryId) {
       return
     }
@@ -28,6 +30,7 @@
 
   onMount(() => {
     backendUiStore.actions.datasources.fetch()
+    backendUiStore.actions.queries.fetch()
   })
 </script>
 
@@ -42,15 +45,14 @@
         on:click={() => selectDatasource(datasource)}>
         <EditDatasourcePopover {datasource} />
       </NavItem>
-      {#each Object.keys(datasource.queries) as queryId}
+      {#each $backendUiStore.queries.filter(query => query.datasourceId === datasource._id) as query}
         <NavItem
           indentLevel={1}
           icon="ri-eye-line"
-          text={datasource.queries[queryId].name}
-          selected={$backendUiStore.selectedQueryId === queryId}
-          on:click={() => onClickQuery(datasource._id, queryId)}>
-          <!-- <EditViewPopover
-            view={{ name: viewName, ...table.views[viewName] }} /> -->
+          text={query.name}
+          selected={$backendUiStore.selectedQueryId === query._id}
+          on:click={() => onClickQuery(datasource._id, query._id)}>
+          <EditQueryPopover {query} />
         </NavItem>
       {/each}
     {/each}
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
new file mode 100644
index 0000000000..ccd48c2d9e
--- /dev/null
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
@@ -0,0 +1,85 @@
+<script>
+  import { backendUiStore, store, allScreens } from "builderStore"
+  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
+
+  let anchor
+  let dropdown
+  let confirmDeleteDialog
+  let error = ""
+  let willBeDeleted
+
+  function hideEditor() {
+    dropdown?.hide()
+  }
+
+  function showModal() {
+    hideEditor()
+    confirmDeleteDialog.show()
+  }
+
+  async function deleteQuery() {
+    await backendUiStore.actions.queries.delete(query._id)
+    notifier.success("Query deleted")
+    hideEditor()
+  }
+</script>
+
+<div on:click|stopPropagation>
+  <div bind:this={anchor} class="icon" on:click={dropdown.show}>
+    <i class="ri-more-line" />
+  </div>
+  <DropdownMenu align="left" {anchor} bind:this={dropdown}>
+      <DropdownContainer>
+        <DropdownItem
+          icon="ri-delete-bin-line"
+          title="Delete"
+          on:click={showModal}
+          data-cy="delete-datasource" />
+      </DropdownContainer>
+  </DropdownMenu>
+</div>
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  okText="Delete Query"
+  onOk={deleteQuery}
+  title="Confirm Deletion">
+  Are you sure you wish to delete this query?
+  This action cannot be undone.
+</ConfirmDialog>
+
+<style>
+  div.icon {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  div.icon i {
+    font-size: 16px;
+  }
+  
+  .actions {
+    padding: var(--spacing-xl);
+    display: grid;
+    grid-gap: var(--spacing-xl);
+    min-width: 400px;
+  }
+
+  h5 {
+    margin: 0;
+    font-weight: 500;
+  }
+
+  footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--spacing-m);
+  }
+</style>
diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte
index 15021fe489..da301e3458 100644
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@@ -1,17 +1,28 @@
 <script>
-  import { TextArea } from "@budibase/bbui"
+  import { TextArea, Label, Input } from "@budibase/bbui"
   import Editor from "./Editor.svelte"
 
+  const CAPTURE_VAR_INSIDE_MUSTACHE = /{{([^}]+)}}/g
+
   const QueryTypes = {
     SQL: "sql",
   }
 
-  export let queryType
+  export let type
   export let query
 
-  $: console.log(query)
+  // $: parameters = Array.from(
+  //   query
+  //     .matchAll(CAPTURE_VAR_INSIDE_MUSTACHE)
+  //     .map(([_, paramName]) => paramName)
+  // )
 </script>
 
-{#if queryType === QueryTypes.SQL}
+<!-- {#each parameters as param}
+  <Label grey extraSmall>{param}</Label>
+  <Input thin bind:value={query.params[param]} />
+{/each} -->
+
+{#if type === QueryTypes.SQL}
   <Editor label="Query" bind:value={query} />
 {/if}
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
index 95b92835e6..8195e16258 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
@@ -24,7 +24,7 @@
     <Label size="m" color="dark">Query</Label>
     <Select secondary bind:value={parameters.queryId}>
       <option value="" />
-      {#each Object.keys(datasource.queries) as query}
+      {#each $backendUiStore.queries.filter(query => query.datasourceId === datasource._id) as query}
         <option value={query}>{datasource.queries[query].name}</option>
       {/each}
     </Select>
diff --git a/packages/builder/src/components/userInterface/TableViewSelect.svelte b/packages/builder/src/components/userInterface/TableViewSelect.svelte
index bcc5d05030..fed621b818 100644
--- a/packages/builder/src/components/userInterface/TableViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableViewSelect.svelte
@@ -31,17 +31,13 @@
     return [...acc, ...viewsArr]
   }, [])
 
-  $: queries = $backendUiStore.datasources.reduce((acc, cur) => {
-    let queriesArr = Object.entries(cur.queries).map(([key, value]) => ({
-      label: value.name,
-      name: value.name,
-      datasourceId: cur._id,
-      queryId: key,
-      schema: value.schema,
+  $: queries = $backendUiStore.queries.map(query => ({
+      label: query.name,
+      name: query.name,
+      ...query,
+      schema: query.schema,
       type: "query",
-    }))
-    return [...acc, ...queriesArr]
-  }, [])
+  }))
 
   $: bindableProperties = fetchBindableProperties({
     componentInstanceId: $store.selectedComponentId,
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 32c53a0c2d..27e3845584 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
@@ -3,13 +3,10 @@
   import { backendUiStore } from "builderStore"
   import ExternalDataSourceTable from "components/backend/DataTable/ExternalDataSourceTable.svelte"
 
-  // TODO: refactor
-  $: datasource = $backendUiStore.datasources.find(
-    ds => ds._id === $params.selectedDatasource
-  )
-  $: query = datasource && datasource.queries[$params.query]
+  $: query = $backendUiStore.queries.find(query => query._id === $params.query)
+  $: console.log("updated", query)
 </script>
 
-{#if $backendUiStore.selectedDatabase._id && datasource && query}
-  <ExternalDataSourceTable {query} {datasource} />
+{#if $backendUiStore.selectedDatabase._id && query}
+  <ExternalDataSourceTable {query} />
 {/if}
diff --git a/packages/client/src/api/queries.js b/packages/client/src/api/queries.js
index cfc92262a0..e3a4749f95 100644
--- a/packages/client/src/api/queries.js
+++ b/packages/client/src/api/queries.js
@@ -3,9 +3,9 @@ import API from "./api"
 /**
  * Fetches all rows from a query.
  */
-export const fetchQueryData = async ({ datasourceId, queryId }) => {
+export const fetchQueryData = async ({ _id }) => {
   const response = await API.get({
-    url: `/api/datasources/${datasourceId}/queries/${queryId}`,
+    url: `/api/queries/${_id}`,
   })
   return response.rows
 }
@@ -13,9 +13,9 @@ export const fetchQueryData = async ({ datasourceId, queryId }) => {
 /**
  * Executes a query against an external data connector.
  */
-export const executeQuery = async ({ datasourceId, queryId }) => {
+export const executeQuery = async ({ _id }) => {
   const response = await API.post({
-    url: `/api/datasources/${datasourceId}/queries/${queryId}`,
+    url: `/api/queries/${_id}`,
     // body: params,
   })
   return response.rows
diff --git a/packages/server/src/api/controllers/datasource.js b/packages/server/src/api/controllers/datasource.js
index d2a963d89a..87e22d2e8e 100644
--- a/packages/server/src/api/controllers/datasource.js
+++ b/packages/server/src/api/controllers/datasource.js
@@ -1,11 +1,6 @@
 const CouchDB = require("../../db")
 const bcrypt = require("../../utilities/bcrypt")
-const {
-  generateDatasourceID,
-  getDatasourceParams,
-  generateQueryID,
-} = require("../../db/utils")
-const { integrations } = require("../../integrations")
+const { generateDatasourceID, getDatasourceParams } = require("../../db/utils")
 
 exports.fetch = async function(ctx) {
   const database = new CouchDB(ctx.user.appId)
@@ -30,7 +25,6 @@ exports.save = async function(ctx) {
   const datasource = {
     _id: generateDatasourceID(),
     type: "datasource",
-    queries: {},
     ...ctx.request.body,
   }
 
@@ -77,90 +71,3 @@ exports.find = async function(ctx) {
   const datasource = await database.get(ctx.params.datasourceId)
   ctx.body = datasource
 }
-
-exports.saveQuery = async function(ctx) {
-  const db = new CouchDB(ctx.user.appId)
-  const query = ctx.request.body
-
-  //
-  // {
-  //   type: "",
-  //   query: "",
-  //   otherStuff: ""
-  // }
-
-  const datasource = await db.get(ctx.params.datasourceId)
-
-  const queryId = generateQueryID()
-
-  datasource.queries[queryId] = query
-
-  const response = await db.put(datasource)
-  datasource._rev = response.rev
-
-  ctx.body = datasource
-  ctx.message = `Query ${query.name} saved successfully.`
-}
-
-exports.previewQuery = async function(ctx) {
-  const { type, config, query } = ctx.request.body
-
-  const Integration = integrations[type]
-
-  if (!Integration) {
-    ctx.throw(400, "Integration type does not exist.")
-    return
-  }
-
-  ctx.body = await new Integration(config, query).query()
-}
-
-exports.fetchQuery = async function(ctx) {
-  const db = new CouchDB(ctx.user.appId)
-
-  const datasource = await db.get(ctx.params.datasourceId)
-
-  const query = datasource.queries[ctx.params.queryId]
-
-  const Integration = integrations[datasource.source]
-
-  if (!Integration) {
-    ctx.throw(400, "Integration type does not exist.")
-    return
-  }
-
-  const rows = await new Integration(
-    datasource.config,
-    query.queryString
-  ).query()
-
-  ctx.body = {
-    schema: query.schema,
-    rows,
-  }
-}
-
-exports.executeQuery = async function(ctx) {
-  const db = new CouchDB(ctx.user.appId)
-
-  const datasource = await db.get(ctx.params.datasourceId)
-
-  const query = datasource.queries[ctx.params.queryId]
-
-  const Integration = integrations[datasource.source]
-
-  if (!Integration) {
-    ctx.throw(400, "Integration type does not exist.")
-    return
-  }
-
-  // TODO: allow the ability to POST parameters down when executing the query
-  // const customParams = ctx.request.body
-
-  const response = await new Integration(
-    datasource.config,
-    query.queryString
-  ).query()
-
-  ctx.body = response
-}
diff --git a/packages/server/src/api/controllers/query.js b/packages/server/src/api/controllers/query.js
index 8cdd1f1567..229897debb 100644
--- a/packages/server/src/api/controllers/query.js
+++ b/packages/server/src/api/controllers/query.js
@@ -1,39 +1,128 @@
-// const CouchDB = require("../../../db")
-// const { generateQueryID } = require("../../db/utils")
-// const viewTemplate = require("./viewBuilder")
+const handlebars = require("handlebars")
+const Joi = require("joi")
+const CouchDB = require("../../db")
+const bcrypt = require("../../utilities/bcrypt")
+const { generateQueryID, getQueryParams } = require("../../db/utils")
+const { integrations } = require("../../integrations")
+const joiValidator = require("../../middleware/joi-validator")
 
-// exports.save = async ctx => {
-//   const db = new CouchDB(ctx.user.appId)
-//   const { datasourceId, query } = ctx.request.body
+function generateQueryValidation() {
+  // prettier-ignore
+  return joiValidator.body(Joi.object({
+    name: Joi.string().required(),
+    queryString: Joi.string().required(),
+    datasourceId: Joi.string().required(),
+    queryType: Joi.string().required(),
+    schema: Joi.object({}).required().unknown(true)
+  }))
+}
 
-//   const datasource = await db.get(datasourceId)
+exports.fetch = async function(ctx) {
+  const db = new CouchDB(ctx.user.appId)
 
-//   const queryId = generateQueryID()
+  const body = await db.allDocs(
+    getQueryParams(null, {
+      include_docs: true,
+    })
+  )
+  ctx.body = body.rows.map(row => row.doc)
+}
 
-//   datasource.queries[queryId] = query
+exports.save = async function(ctx) {
+  const db = new CouchDB(ctx.user.appId)
+  const query = ctx.request.body
 
-//   const response = await db.put(datasource)
+  //
+  // {
+  //   type: "",
+  //   query: "",
+  //   otherStuff: ""
+  // }
 
-//   ctx.body = query
-//   ctx.message = `View ${viewToSave.name} saved successfully.`
-// }
+  if (!query._id) {
+    query._id = generateQueryID(query.datasourceId)
+  }
 
-// exports.destroy = async ctx => {
-//   const db = new CouchDB(ctx.user.appId)
-//   const designDoc = await db.get("_design/database")
+  const response = await db.put(query)
+  query._rev = response.rev
 
-//   const viewName = decodeURI(ctx.params.viewName)
+  ctx.body = query
+  ctx.message = `Query ${query.name} saved successfully.`
+}
 
-//   const view = designDoc.views[viewName]
+exports.preview = async function(ctx) {
+  const { query, datasourceId } = ctx.request.body
 
-//   delete designDoc.views[viewName]
+  const db = new CouchDB(ctx.user.appId)
 
-//   await db.put(designDoc)
+  const datasource = await db.get(datasourceId)
 
-//   const table = await db.get(view.meta.tableId)
-//   delete table.views[viewName]
-//   await db.put(table)
+  const Integration = integrations[datasource.source]
 
-//   ctx.body = view
-//   ctx.message = `View ${ctx.params.viewName} saved successfully.`
-// }
+  if (!Integration) {
+    ctx.throw(400, "Integration type does not exist.")
+    return
+  }
+
+  ctx.body = await new Integration(datasource.config, query).query()
+}
+
+exports.execute = async function(ctx) {
+  const db = new CouchDB(ctx.user.appId)
+
+  const datasource = await db.get(ctx.params.datasourceId)
+
+  const query = datasource.queries[ctx.params.queryId]
+
+  const Integration = integrations[datasource.source]
+
+  if (!Integration) {
+    ctx.throw(400, "Integration type does not exist.")
+    return
+  }
+
+  // TODO: allow the ability to POST parameters down when executing the query
+  // const customParams = ctx.request.body
+  const queryTemplate = handlebars.compile(query.queryString)
+
+  const response = await new Integration(
+    datasource.config,
+    queryTemplate({
+      // pass the params here from the UI and backend contexts
+    })
+  ).query()
+
+  ctx.body = response
+}
+
+exports.fetchQuery = async function(ctx) {
+  const db = new CouchDB(ctx.user.appId)
+
+  const query = await db.get(ctx.params.queryId)
+
+  const datasource = await db.get(query.datasourceId)
+
+  const Integration = integrations[datasource.source]
+
+  if (!Integration) {
+    ctx.throw(400, "Integration type does not exist.")
+    return
+  }
+
+  const rows = await new Integration(
+    datasource.config,
+    query.queryString
+  ).query()
+
+  ctx.body = {
+    schema: query.schema,
+    rows,
+  }
+}
+
+exports.destroy = async function(ctx) {
+  const db = new CouchDB(ctx.user.appId)
+  await db.destroy(ctx.params.queryId)
+  ctx.message = `Query deleted.`
+  ctx.status = 200
+}
diff --git a/packages/server/src/api/routes/datasource.js b/packages/server/src/api/routes/datasource.js
index 19930e6f48..2441d64399 100644
--- a/packages/server/src/api/routes/datasource.js
+++ b/packages/server/src/api/routes/datasource.js
@@ -17,26 +17,26 @@ router
     datasourceController.find
   )
   .post("/api/datasources", authorized(BUILDER), datasourceController.save)
-  .post(
-    "/api/datasources/:datasourceId/queries",
-    authorized(BUILDER),
-    datasourceController.saveQuery
-  )
-  .post(
-    "/api/datasources/queries/preview",
-    authorized(BUILDER),
-    datasourceController.previewQuery
-  )
-  .get(
-    "/api/datasources/:datasourceId/queries/:queryId",
-    authorized(BUILDER),
-    datasourceController.fetchQuery
-  )
-  .post(
-    "/api/datasources/:datasourceId/queries/:queryId",
-    authorized(BUILDER),
-    datasourceController.executeQuery
-  )
+  // .post(
+  //   "/api/datasources/:datasourceId/queries",
+  //   authorized(BUILDER),
+  //   datasourceController.saveQuery
+  // )
+  // .post(
+  //   "/api/datasources/queries/preview",
+  //   authorized(BUILDER),
+  //   datasourceController.previewQuery
+  // )
+  // .get(
+  //   "/api/datasources/:datasourceId/queries/:queryId",
+  //   authorized(BUILDER),
+  //   datasourceController.fetchQuery
+  // )
+  // .post(
+  //   "/api/datasources/:datasourceId/queries/:queryId",
+  //   authorized(BUILDER),
+  //   datasourceController.executeQuery
+  // )
   .delete(
     "/api/datasources/:datasourceId/:revId",
     authorized(BUILDER),
diff --git a/packages/server/src/api/routes/index.js b/packages/server/src/api/routes/index.js
index 468c0a7b53..de5ce0eb0a 100644
--- a/packages/server/src/api/routes/index.js
+++ b/packages/server/src/api/routes/index.js
@@ -19,7 +19,7 @@ const routingRoutes = require("./routing")
 const integrationRoutes = require("./integration")
 const permissionRoutes = require("./permission")
 const datasourceRoutes = require("./datasource")
-// const queryRoutes = require("./query")
+const queryRoutes = require("./query")
 
 exports.mainRoutes = [
   deployRoutes,
@@ -39,7 +39,7 @@ exports.mainRoutes = [
   integrationRoutes,
   permissionRoutes,
   datasourceRoutes,
-  // queryRoutes,
+  queryRoutes,
   // these need to be handled last as they still use /api/:tableId
   // this could be breaking as koa may recognise other routes as this
   tableRoutes,
diff --git a/packages/server/src/api/routes/query.js b/packages/server/src/api/routes/query.js
index b0da295703..06597e52cf 100644
--- a/packages/server/src/api/routes/query.js
+++ b/packages/server/src/api/routes/query.js
@@ -1,28 +1,17 @@
-// const Router = require("@koa/router")
-// const queryController = require("../controllers/query")
-// const authorized = require("../../middleware/authorized")
-// const { BUILDER } = require("../../utilities/security/permissions")
+const Router = require("@koa/router")
+const queryController = require("../controllers/query")
+const authorized = require("../../middleware/authorized")
+const { BUILDER } = require("../../utilities/security/permissions")
 
-// const router = Router()
+const router = Router()
 
-// // TODO: send down the datasource ID as well
+// TODO: sort out auth so apps have the right permissions
+router
+  .get("/api/queries", authorized(BUILDER), queryController.fetch)
+  .get("/api/queries/:queryId", authorized(BUILDER), queryController.fetchQuery)
+  .post("/api/queries", authorized(BUILDER), queryController.save)
+  .post("/api/queries/preview", authorized(BUILDER), queryController.preview)
+  .post("/api/queries/:queryId", authorized(BUILDER), queryController.execute)
+  .delete("/api/queries/:queryId", authorized(BUILDER), queryController.destroy)
 
-// router
-//   // .get("/api/queries", authorized(BUILDER), queryController.fetch)
-//   // .get(
-//   //   "/api/datasources/:datasourceId/queries/:id",
-//   //   authorized(PermissionTypes.TABLE, PermissionLevels.READ),
-//   //   queryController.find
-//   // )
-//   .post(
-//     "/api/datasources/:datasourceId/queries",
-//     authorized(BUILDER),
-//     queryController.save
-//   )
-//   .delete(
-//     "/api/datasources/:datasourceId/queries/:queryId/:revId",
-//     authorized(BUILDER),
-//     queryController.destroy
-//   )
-
-// module.exports = router
+module.exports = router
diff --git a/packages/server/src/db/client.js b/packages/server/src/db/client.js
index 1477ee4315..1d025a1402 100644
--- a/packages/server/src/db/client.js
+++ b/packages/server/src/db/client.js
@@ -38,6 +38,6 @@ function replicateLocal() {
   })
 }
 
-// replicateLocal()
+replicateLocal()
 
 module.exports = Pouch
diff --git a/packages/server/src/db/utils.js b/packages/server/src/db/utils.js
index 946ce26dd2..4ebd95ca98 100644
--- a/packages/server/src/db/utils.js
+++ b/packages/server/src/db/utils.js
@@ -245,8 +245,10 @@ exports.getDatasourceParams = (datasourceId = null, otherProps = {}) => {
  * Generates a new query ID.
  * @returns {string} The new query ID which the query doc can be stored under.
  */
-exports.generateQueryID = () => {
-  return `${DocumentTypes.QUERY}${SEPARATOR}${newid()}`
+exports.generateQueryID = datasourceId => {
+  return `${
+    DocumentTypes.QUERY
+  }${SEPARATOR}${datasourceId}${SEPARATOR}${newid()}`
 }
 
 /**
diff --git a/packages/server/src/utilities/security/permissions.js b/packages/server/src/utilities/security/permissions.js
index 0836b29412..008145cc99 100644
--- a/packages/server/src/utilities/security/permissions.js
+++ b/packages/server/src/utilities/security/permissions.js
@@ -14,6 +14,7 @@ const PermissionTypes = {
   WEBHOOK: "webhook",
   BUILDER: "builder",
   VIEW: "view",
+  QUERY: "query",
 }
 
 function Permission(type, level) {

From d1a119f06a7028596165b07d1e739ce9adfabdc4 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 7 Jan 2021 13:13:46 +0000
Subject: [PATCH 11/70] new datasource design

---
 .../DataTable/ExternalDataSourceTable.svelte  |  11 +-
 .../components/backend/DataTable/Table.svelte |   1 -
 .../buttons/CreateQueryButton.svelte          |  14 +-
 .../DatasourceNavigator.svelte                |   1 -
 .../src/components/integration/Query.js       |   9 ++
 .../{Editor.svelte => QueryEditor.svelte}     |  11 +-
 .../QueryViewer.svelte}                       | 139 ++++++++++--------
 .../src/components/integration/codemirror.js  |   1 +
 .../src/components/integration/index.svelte   |  65 ++++++--
 .../EventsEditor/actions/ExecuteQuery.svelte  |   2 +-
 .../[selectedDatasource]/[query]/index.svelte |  36 ++++-
 .../[selectedDatasource]/index.svelte         |   8 +-
 .../server/src/api/controllers/datasource.js  |   1 +
 packages/server/src/api/controllers/query.js  |   9 +-
 14 files changed, 208 insertions(+), 100 deletions(-)
 create mode 100644 packages/builder/src/components/integration/Query.js
 rename packages/builder/src/components/integration/{Editor.svelte => QueryEditor.svelte} (77%)
 rename packages/builder/src/components/{backend/DataTable/modals/CreateEditQuery.svelte => integration/QueryViewer.svelte} (51%)

diff --git a/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte b/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
index a340f7c3c9..e0f429cb3b 100644
--- 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 {
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 723274d271..070ebec080 100644
--- 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) {
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte
index 3388671acb..98c03873ab 100644
--- 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> -->
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
index d790b92cea..408e1edd3c 100644
--- 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
     }
diff --git a/packages/builder/src/components/integration/Query.js b/packages/builder/src/components/integration/Query.js
new file mode 100644
index 0000000000..4057da508b
--- /dev/null
+++ 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) {}
+}
diff --git a/packages/builder/src/components/integration/Editor.svelte b/packages/builder/src/components/integration/QueryEditor.svelte
similarity index 77%
rename from packages/builder/src/components/integration/Editor.svelte
rename to packages/builder/src/components/integration/QueryEditor.svelte
index f2bce2f222..257a2dc29c 100644
--- a/packages/builder/src/components/integration/Editor.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>
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditQuery.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
similarity index 51%
rename from packages/builder/src/components/backend/DataTable/modals/CreateEditQuery.svelte
rename to packages/builder/src/components/integration/QueryViewer.svelte
index 024646757c..c8a34eb423 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditQuery.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.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>
diff --git a/packages/builder/src/components/integration/codemirror.js b/packages/builder/src/components/integration/codemirror.js
index 3b823a1c97..6d731ab9af 100644
--- 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"
 
diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte
index da301e3458..c133f4ff24 100644
--- 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>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
index 8195e16258..ccc15a743f 100644
--- 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}
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 27e3845584..0f6c4825ab 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
@@ -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>
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 c2f615c511..82756a2c2b 100644
--- 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} />
diff --git a/packages/server/src/api/controllers/datasource.js b/packages/server/src/api/controllers/datasource.js
index 87e22d2e8e..2cbe4fb107 100644
--- 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.`
diff --git a/packages/server/src/api/controllers/query.js b/packages/server/src/api/controllers/query.js
index 229897debb..9c4b2cc8a8 100644
--- 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) {

From 8e40f4b5f8249724c2efc6b0460d0c0918e9f11d Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 8 Jan 2021 12:06:37 +0000
Subject: [PATCH 12/70] Allow dynamic query execution from front end components

---
 .../src/builderStore/store/frontend.js        |   1 +
 .../buttons/CreateQueryButton.svelte          |  49 --------
 .../src/components/common/BottomDrawer.svelte |  29 +++++
 .../components/integration/QueryEditor.svelte |   4 +
 .../integration/QueryParameterBuilder.svelte  |  52 +++++++++
 .../components/integration/QueryViewer.svelte |  15 ++-
 .../src/components/integration/index.svelte   |  53 +--------
 .../DataBindingDrawer/index.svelte            |  35 ++++++
 .../EventsEditor/EventEditorModal.svelte      | 105 +++++++++---------
 .../EventsEditor/EventPropertyControl.svelte  |  21 +++-
 .../EventsEditor/actions/ExecuteQuery.svelte  |  36 +++++-
 .../GenericBindingPopover.svelte              |   6 +-
 .../userInterface/PropertyControl.svelte      |   1 +
 .../userInterface/TableViewSelect.svelte      |  14 +++
 .../[selectedDatasource]/[query]/index.svelte |   3 +-
 .../[selectedDatasource]/index.svelte         |   1 -
 .../design/[assetType]/_layout.svelte         |  14 +++
 packages/client/src/api/queries.js            |   8 +-
 packages/client/src/utils/buttonActions.js    |  17 +--
 packages/server/src/api/controllers/query.js  |  20 ++--
 packages/server/src/db/client.js              |   2 +-
 packages/server/src/integrations/postgres.js  |  56 +++++++++-
 22 files changed, 344 insertions(+), 198 deletions(-)
 delete mode 100644 packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte
 create mode 100644 packages/builder/src/components/common/BottomDrawer.svelte
 create mode 100644 packages/builder/src/components/integration/QueryParameterBuilder.svelte
 create mode 100644 packages/builder/src/components/userInterface/DataBindingDrawer/index.svelte

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index acb5929b3c..1e451ff63e 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -40,6 +40,7 @@ const INITIAL_FRONTEND_STATE = {
   libraries: null,
   appId: "",
   routes: {},
+  bottomDrawerVisible: false,
 }
 
 export const getFrontendStore = () => {
diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte
deleted file mode 100644
index 98c03873ab..0000000000
--- a/packages/builder/src/components/backend/DataTable/buttons/CreateQueryButton.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script>
-  import { goto } from "@sveltech/routify"
-  import {
-    DropdownMenu,
-    TextButton as Button,
-    Icon,
-    Label,
-    Modal,
-    ModalContent,
-    TextArea,
-  } from "@budibase/bbui"
-  import { notifier } from "builderStore/store/notifications"
-  import { backendUiStore } from "builderStore"
-  import api from "builderStore/api"
-  import EditIntegrationConfig from "../modals/EditIntegrationConfig.svelte"
-  // import CreateEditQuery from "components/backend/DataTable/modals/CreateEditQuery.svelte"
-
-  export let query = {}
-  export let edit
-
-  let modal
-  let fields = []
-
-  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>
-
-<div>
-  <Button text small on:click={modal.show}>
-    <Icon name="filter" />
-    {edit ? 'Edit' : 'Create'} Query
-  </Button>
-</div>
-<!-- <Modal bind:this={modal}> -->
-<!-- <ModalContent
-    confirmText="Save"
-    cancelText="Cancel"
-    onConfirm={saveQuery}
-    title={edit ? 'Edit Query' : 'Create New Query'}> -->
-<!-- <CreateEditQuery bind:query /> -->
-<!-- </ModalContent> -->
-<!-- </Modal> -->
diff --git a/packages/builder/src/components/common/BottomDrawer.svelte b/packages/builder/src/components/common/BottomDrawer.svelte
new file mode 100644
index 0000000000..d2a4bcbaab
--- /dev/null
+++ b/packages/builder/src/components/common/BottomDrawer.svelte
@@ -0,0 +1,29 @@
+<script>
+  import { slide } from "svelte/transition"
+  import Portal from "svelte-portal"
+
+  export let title
+  export let onClose
+</script>
+
+<Portal>
+  <section class="drawer" transition:slide>
+    {#if title}
+      <heading>{title}</heading>
+    {/if}
+    <slot />
+  </section>
+</Portal>
+
+<style>
+  .drawer {
+    height: 50vh;
+    position: absolute;
+    bottom: 0;
+    width: 97%;
+    background: var(--background);
+    padding: var(--spacing-xl);
+    border-top: var(--border-light);
+    z-index: 2;
+  }
+</style>
diff --git a/packages/builder/src/components/integration/QueryEditor.svelte b/packages/builder/src/components/integration/QueryEditor.svelte
index 257a2dc29c..5def206c90 100644
--- a/packages/builder/src/components/integration/QueryEditor.svelte
+++ b/packages/builder/src/components/integration/QueryEditor.svelte
@@ -12,6 +12,10 @@
 
   // $: codemirror && codemirror.setValue(value)
 
+  console.log("Running init")
+
+  $: console.log("Running reactive")
+
   onMount(async () => {
     codemirror = cm.fromTextArea(editor, {
       lineNumbers: true,
diff --git a/packages/builder/src/components/integration/QueryParameterBuilder.svelte b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
new file mode 100644
index 0000000000..d78018768d
--- /dev/null
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@@ -0,0 +1,52 @@
+<script>
+  import { TextArea, Label, Input, Heading } from "@budibase/bbui"
+  import Editor from "./QueryEditor.svelte"
+  import BindableInput from "components/userInterface/BindableInput.svelte"
+
+  export let parameters = []
+  export let bindings = []
+  export let customParams = {}
+
+  function newQueryParameter() {
+    parameters = [...parameters, {}]
+  }
+
+  function deleteQueryParameter(idx) {
+    parameters.splice(idx, 1)
+    parameters = parameters
+  }
+</script>
+
+<Heading extraSmall black>Parameters</Heading>
+<div class="parameters">
+  <Label extraSmall grey>Parameter Name</Label>
+  <Label extraSmall grey>Default</Label>
+  <Label extraSmall grey>Value</Label>
+  <div />
+  {#each parameters as parameter, idx}
+    <Input thin bind:value={parameter.name} />
+    <Input thin bind:value={parameter.default} />
+    <BindableInput
+      type="string"
+      thin
+      bind:value={customParams[parameter.name]}
+      {bindings} />
+    <i
+      class="ri-close-circle-line delete"
+      on:click={() => deleteQueryParameter(idx)} />
+  {/each}
+</div>
+<i class="ri-add-circle-line add" on:click={newQueryParameter} />
+
+<style>
+  .parameters {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 5%;
+    grid-gap: 10px;
+    align-items: center;
+  }
+
+  .add {
+    margin-top: var(--spacing-m);
+  }
+</style>
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index c8a34eb423..afba48c9f6 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -85,8 +85,18 @@
 
   async function previewQuery() {
     try {
+      // parse all the parameters in the UI
+      // send them
+
       const response = await api.post(`/api/queries/preview`, {
-        parameters: query.parameters,
+        // TODO: revisit
+        parameters: query.parameters.reduce(
+          (acc, next) => ({
+            ...acc,
+            [next.name]: next.default,
+          }),
+          {}
+        ),
         datasourceId: datasource._id,
         query: query.queryString,
       })
@@ -96,7 +106,8 @@
 
       data = json || []
 
-      // TODO: refactor
+      // Assume all the fields are strings and create a basic schema
+      // from the first record returned by the query
       fields = Object.keys(json[0]).map(field => ({
         name: field,
         type: "STRING",
diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte
index c133f4ff24..acea9cdd3f 100644
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@@ -1,65 +1,16 @@
 <script>
   import { TextArea, Label, Input, Heading } from "@budibase/bbui"
   import Editor from "./QueryEditor.svelte"
-
-  const CAPTURE_VAR_INSIDE_MUSTACHE = /{{([^}]+)}}/g
+  import ParameterBuilder from "./QueryParameterBuilder.svelte"
 
   const QueryTypes = {
     SQL: "sql",
   }
 
   export let query
-
-  // 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>
 
-<Heading extraSmall black>Parameters</Heading>
-
 {#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>
-
+  <ParameterBuilder bind:parameters={query.parameters} />
   <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>
diff --git a/packages/builder/src/components/userInterface/DataBindingDrawer/index.svelte b/packages/builder/src/components/userInterface/DataBindingDrawer/index.svelte
new file mode 100644
index 0000000000..736117c30e
--- /dev/null
+++ b/packages/builder/src/components/userInterface/DataBindingDrawer/index.svelte
@@ -0,0 +1,35 @@
+<script>
+  import BottomDrawer from "components/common/BottomDrawer.svelte"
+  import { store, backendUiStore } from "builderStore"
+  import { slide } from "svelte/transition"
+  import QueryInterface from "components/integration/QueryViewer.svelte"
+
+  $: query = $backendUiStore.queries.find(
+    query => query._id === $backendUiStore.selectedQueryId
+  )
+
+  function closeDatabindingDrawer() {
+    store.update(state => {
+      state.bindingDrawerVisible = false
+      return state
+    })
+  }
+</script>
+
+{#if query}
+  <BottomDrawer>
+    <div class="drawer-contents">
+      <i class="ri-close-fill close" on:click={closeDatabindingDrawer} />
+      <QueryInterface {query} />
+    </div>
+  </BottomDrawer>
+{/if}
+
+<style>
+  i {
+    position: absolute;
+    top: var(--spacing-xl);
+    right: var(--spacing-xl);
+    font-size: var(--font-size-m);
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
index 27e91cd29e..fda964a7ba 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
@@ -1,5 +1,11 @@
 <script>
-  import { TextButton, Body, DropdownMenu, ModalContent } from "@budibase/bbui"
+  import {
+    Button,
+    TextButton,
+    Body,
+    DropdownMenu,
+    ModalContent,
+  } from "@budibase/bbui"
   import { AddIcon, ArrowDownIcon } from "components/common/Icons/"
   import actionTypes from "./actions"
   import { createEventDispatcher } from "svelte"
@@ -49,61 +55,58 @@
   }
 </script>
 
-<ModalContent title="Actions" confirmText="Save" onConfirm={saveEventData}>
-  <div slot="header">
-    <div bind:this={addActionButton}>
-      <TextButton text small blue on:click={addActionDropdown.show}>
-        <div style="height: 20px; width: 20px;">
-          <AddIcon />
-        </div>
-        Add Action
-      </TextButton>
-    </div>
-    <DropdownMenu
-      bind:this={addActionDropdown}
-      anchor={addActionButton}
-      align="right">
-      <div class="available-actions-container">
-        {#each actionTypes as actionType}
-          <div class="available-action" on:click={addAction(actionType)}>
-            <span>{actionType.name}</span>
-          </div>
-        {/each}
+<div>
+  <div bind:this={addActionButton}>
+    <TextButton text small blue on:click={addActionDropdown.show}>
+      <div style="height: 20px; width: 20px;">
+        <AddIcon />
       </div>
-    </DropdownMenu>
+      Add Action
+    </TextButton>
   </div>
-
-  <div class="actions-container">
-    {#if actions && actions.length > 0}
-      {#each actions as action, index}
-        <div class="action-container">
-          <div class="action-header" on:click={selectAction(action)}>
-            <Body small lh>{index + 1}. {action[eventTypeKey]}</Body>
-            <div class="row-expander" class:rotate={action !== selectedAction}>
-              <ArrowDownIcon />
-            </div>
-          </div>
-          {#if action === selectedAction}
-            <div class="selected-action-container">
-              <svelte:component
-                this={selectedActionComponent}
-                parameters={selectedAction.parameters} />
-              <div class="delete-action-button">
-                <TextButton text medium on:click={() => deleteAction(index)}>
-                  Delete
-                </TextButton>
-              </div>
-            </div>
-          {/if}
+  <DropdownMenu
+    bind:this={addActionDropdown}
+    anchor={addActionButton}
+    align="right">
+    <div class="available-actions-container">
+      {#each actionTypes as actionType}
+        <div class="available-action" on:click={addAction(actionType)}>
+          <span>{actionType.name}</span>
         </div>
       {/each}
-    {/if}
-  </div>
+    </div>
+  </DropdownMenu>
+</div>
 
-  <div slot="footer">
-    <a href="https://docs.budibase.com">Learn more about Actions</a>
-  </div>
-</ModalContent>
+<div class="actions-container">
+  {#if actions && actions.length > 0}
+    {#each actions as action, index}
+      <div class="action-container">
+        <div class="action-header" on:click={selectAction(action)}>
+          <Body small lh>{index + 1}. {action[eventTypeKey]}</Body>
+          <div class="row-expander" class:rotate={action !== selectedAction}>
+            <ArrowDownIcon />
+          </div>
+        </div>
+        {#if action === selectedAction}
+          <div class="selected-action-container">
+            <svelte:component
+              this={selectedActionComponent}
+              parameters={selectedAction.parameters} />
+            <div class="delete-action-button">
+              <TextButton text medium on:click={() => deleteAction(index)}>
+                Delete
+              </TextButton>
+            </div>
+          </div>
+        {/if}
+      </div>
+    {/each}
+  {/if}
+  <Button thin blue on:click={saveEventData}>Save</Button>
+</div>
+
+<a href="https://docs.budibase.com">Learn more about Actions</a>
 
 <style>
   .action-header {
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
index 044d0ca5d5..40a8e77f0c 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
@@ -1,17 +1,26 @@
 <script>
   import { Button, Modal } from "@budibase/bbui"
-  import EventEditorModal from "./EventEditorModal.svelte"
   import { createEventDispatcher } from "svelte"
+  import { store } from "builderStore"
+  import EventEditorModal from "./EventEditorModal.svelte"
+  import BottomDrawer from "components/common/BottomDrawer.svelte"
+
   const dispatch = createEventDispatcher()
 
   export let value
   export let name
 
-  let modal
+  let drawerVisible
+
+  function showDrawer() {
+    drawerVisible = true
+  }
 </script>
 
-<Button secondary small on:click={modal.show}>Define Actions</Button>
+<Button secondary small on:click={showDrawer}>Define Actions</Button>
 
-<Modal bind:this={modal} width="600px">
-  <EventEditorModal event={value} eventType={name} on:change />
-</Modal>
+{#if drawerVisible}
+  <BottomDrawer>
+    <EventEditorModal event={value} eventType={name} on:change />
+  </BottomDrawer>
+{/if}
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
index ccc15a743f..060d8fe412 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
@@ -1,17 +1,36 @@
 <script>
   import { Select, Label, Spacer } from "@budibase/bbui"
-  import { backendUiStore } from "builderStore"
+  import { store, backendUiStore, currentAsset } from "builderStore"
+  import fetchBindableProperties from "builderStore/fetchBindableProperties"
+  import ParameterBuilder from "../../../integration/QueryParameterBuilder.svelte"
 
   export let parameters
 
   $: datasource = $backendUiStore.datasources.find(
     ds => ds._id === parameters.datasourceId
   )
+  // TODO: binding needs a significant refactor and needs to
+  // be centralised
+  $: bindableProperties = fetchBindableProperties({
+    componentInstanceId: $store.selectedComponentId,
+    components: $store.components,
+    screen: $currentAsset,
+    tables: $backendUiStore.tables,
+  }).map(property => ({
+    ...property,
+    category: property.type === "instance" ? "Component" : "Table",
+    label: property.readableBinding,
+    path: property.runtimeBinding,
+  }))
+
+  $: query =
+    parameters.queryId &&
+    $backendUiStore.queries.find(query => query._id === parameters.queryId)
 </script>
 
 <div class="root">
   <Label size="m" color="dark">Datasource</Label>
-  <Select secondary bind:value={parameters.datasourceId}>
+  <Select thin secondary bind:value={parameters.datasourceId}>
     <option value="" />
     {#each $backendUiStore.datasources as datasource}
       <option value={datasource._id}>{datasource.name}</option>
@@ -22,11 +41,22 @@
 
   {#if parameters.datasourceId}
     <Label size="m" color="dark">Query</Label>
-    <Select secondary bind:value={parameters.queryId}>
+    <Select thin secondary bind:value={parameters.queryId}>
       <option value="" />
       {#each $backendUiStore.queries.filter(query => query.datasourceId === datasource._id) as query}
         <option value={query._id}>{query.name}</option>
       {/each}
     </Select>
   {/if}
+
+  <Spacer medium />
+
+  <!-- TODO: Need to render defaults, but allow interpolation of frontend values -->
+  {#if query}
+    <ParameterBuilder
+      bind:customParams={parameters.queryParams}
+      parameters={query.parameters}
+      bindings={bindableProperties} />
+    <pre>{query.queryString}</pre>
+  {/if}
 </div>
diff --git a/packages/builder/src/components/userInterface/GenericBindingPopover.svelte b/packages/builder/src/components/userInterface/GenericBindingPopover.svelte
index 0b53ab91ad..88b5b06551 100644
--- a/packages/builder/src/components/userInterface/GenericBindingPopover.svelte
+++ b/packages/builder/src/components/userInterface/GenericBindingPopover.svelte
@@ -20,6 +20,8 @@
 
   let getCaretPosition
 
+  $: console.log(bindings)
+
   $: categories = Object.entries(groupBy("category", bindings))
 
   function onClickBinding(binding) {
@@ -50,7 +52,9 @@
                 <span class="binding__label">{binding.label}</span>
                 <span class="binding__type">{binding.type}</span>
                 <br />
-                <div class="binding__description">{binding.description}</div>
+                <div class="binding__description">
+                  {binding.description || ''}
+                </div>
               </div>
             {/each}
           {/each}
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 2901dc6f3f..f96e8e6a42 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -120,6 +120,7 @@
     flex-flow: row;
     align-items: center;
   }
+
   .label {
     display: flex;
     align-items: center;
diff --git a/packages/builder/src/components/userInterface/TableViewSelect.svelte b/packages/builder/src/components/userInterface/TableViewSelect.svelte
index fed621b818..423ff390e3 100644
--- a/packages/builder/src/components/userInterface/TableViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableViewSelect.svelte
@@ -14,6 +14,17 @@
     dropdownRight.hide()
   }
 
+  function openBindingDrawer() {
+    backendUiStore.update(state => {
+      state.selectedQueryId = value._id
+      return state
+    })
+    store.update(state => {
+      state.bottomDrawerVisible = true
+      return state
+    })
+  }
+
   $: tables = $backendUiStore.tables.map(m => ({
     label: m.name,
     name: `all_${m._id}`,
@@ -67,6 +78,9 @@
   <span>{value.label ? value.label : 'Table / View / Query'}</span>
   <Icon name="arrowdown" />
 </div>
+{#if value.type === "query"}
+  <i class="ri-settings-3-line" on:click={openBindingDrawer} />
+{/if}
 <DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
   <div class="dropdown">
     <div class="title">
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 0f6c4825ab..557c0e954b 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
@@ -14,10 +14,11 @@
       query = {
         datasourceId: $params.selectedDatasource,
         name: "New Query",
-        parameters: {},
+        parameters: [],
         // TODO: set dynamically
       }
     }
+    console.log("The query changes", query)
   }
 </script>
 
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 82756a2c2b..9f4f2d1aaa 100644
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
@@ -4,7 +4,6 @@
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
-  import CreateQueryButton from "components/backend/DataTable/buttons/CreateQueryButton.svelte"
 
   $: datasource = $backendUiStore.datasources.find(
     ds => ds._id === $backendUiStore.selectedDatasourceId
diff --git a/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte
index df013f2abe..40565ee3b5 100644
--- a/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte
@@ -10,6 +10,7 @@
   import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte"
   import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte"
   import FrontendNavigatePane from "components/userInterface/FrontendNavigatePane.svelte"
+  import DataBindingDrawer from "components/userInterface/DataBindingDrawer/index.svelte"
 
   $: instance = $store.appInstance
 
@@ -47,6 +48,10 @@
     {/if}
   </div>
 
+  {#if $store.bottomDrawerVisible}
+    <DataBindingDrawer />
+  {/if}
+
   {#if $selectedComponent != null}
     <div class="components-pane">
       <ComponentPropertiesPanel />
@@ -103,6 +108,15 @@
     padding: var(--spacing-l) var(--spacing-xl);
   }
 
+  .binding-drawer-container {
+    height: 50vh;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background: var(--background);
+    padding: var(--spacing-xl);
+  }
+
   .nav-group-header > div:nth-child(1) {
     padding: 0rem 0.5rem 0rem 0rem;
     vertical-align: bottom;
diff --git a/packages/client/src/api/queries.js b/packages/client/src/api/queries.js
index e3a4749f95..1d1ad5ced7 100644
--- a/packages/client/src/api/queries.js
+++ b/packages/client/src/api/queries.js
@@ -13,10 +13,12 @@ export const fetchQueryData = async ({ _id }) => {
 /**
  * Executes a query against an external data connector.
  */
-export const executeQuery = async ({ _id }) => {
+export const executeQuery = async ({ queryId, params }) => {
   const response = await API.post({
-    url: `/api/queries/${_id}`,
-    // body: params,
+    url: `/api/queries/${queryId}`,
+    body: {
+      params,
+    },
   })
   return response.rows
 }
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index f17e5d0ee5..c6287bab70 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -26,19 +26,12 @@ const navigationHandler = action => {
 }
 
 const queryExecutionHandler = async (action, context) => {
-  const { datasourceId, queryId, params } = action.parameters
-  console.log(context)
-  // TODO: allow context based bindings for query params
-  // const enrichedQueryParameters = enrichDataBindings(params, context)
+  const { datasourceId, queryId, queryParams } = action.parameters
 
-  // console.log({
-  //   action,
-  //   context,
-  //   // enrichedQueryParameters,
-  //   datasourceId,
-  //   // queryId
-  // })
-  await executeQuery({ datasourceId, queryId })
+  // TODO: allow context based bindings for query params
+  const enrichedQueryParameters = enrichDataBindings(queryParams, context)
+
+  await executeQuery({ datasourceId, queryId, params: enrichedQueryParameters })
 }
 
 const handlerMap = {
diff --git a/packages/server/src/api/controllers/query.js b/packages/server/src/api/controllers/query.js
index 9c4b2cc8a8..2972938528 100644
--- a/packages/server/src/api/controllers/query.js
+++ b/packages/server/src/api/controllers/query.js
@@ -75,9 +75,13 @@ exports.preview = async function(ctx) {
 exports.execute = async function(ctx) {
   const db = new CouchDB(ctx.user.appId)
 
-  const datasource = await db.get(ctx.params.datasourceId)
+  const query = await db.get(ctx.params.queryId)
+  const datasource = await db.get(query.datasourceId)
 
-  const query = datasource.queries[ctx.params.queryId]
+  const queryTemplate = handlebars.compile(query.queryString)
+
+  // TODO: Take the default params into account
+  const parsedQuery = queryTemplate(ctx.request.body.params)
 
   const Integration = integrations[datasource.source]
 
@@ -85,17 +89,7 @@ exports.execute = async function(ctx) {
     ctx.throw(400, "Integration type does not exist.")
     return
   }
-
-  // TODO: allow the ability to POST parameters down when executing the query
-  // const customParams = ctx.request.body
-  const queryTemplate = handlebars.compile(query.queryString)
-
-  const response = await new Integration(
-    datasource.config,
-    queryTemplate({
-      // pass the params here from the UI and backend contexts
-    })
-  ).query()
+  const response = await new Integration(datasource.config, parsedQuery).query()
 
   ctx.body = response
 }
diff --git a/packages/server/src/db/client.js b/packages/server/src/db/client.js
index 1d025a1402..1477ee4315 100644
--- a/packages/server/src/db/client.js
+++ b/packages/server/src/db/client.js
@@ -38,6 +38,6 @@ function replicateLocal() {
   })
 }
 
-replicateLocal()
+// replicateLocal()
 
 module.exports = Pouch
diff --git a/packages/server/src/integrations/postgres.js b/packages/server/src/integrations/postgres.js
index 7f5bbf782c..2d8011d84b 100644
--- a/packages/server/src/integrations/postgres.js
+++ b/packages/server/src/integrations/postgres.js
@@ -1,5 +1,47 @@
 const { Client } = require("pg")
 
+const SCHEMA = {
+  datasource: {
+    host: {
+      type: "string",
+      default: "localhost",
+      required: true,
+    },
+    port: {
+      type: "number",
+      required: true,
+      default: 5432,
+    },
+    database: {
+      type: "string",
+      default: "postgres",
+      required: true,
+    },
+    username: {
+      type: "string",
+      default: "root",
+      required: true,
+    },
+    password: {
+      type: "password",
+      default: "root",
+      required: true,
+    },
+  },
+  editor: {
+    sql: {
+      type: "sql",
+    },
+    gui: {
+      type: "config",
+      fields: {
+        something: "",
+        other: "",
+      },
+    },
+  },
+}
+
 const DATASOURCE_CONFIG = {
   host: {
     type: "string",
@@ -34,10 +76,16 @@ const QUERY_CONFIG = {
   },
   gui: {
     type: "config",
-    fields: {
-      something: "",
-      other: "",
-    },
+    fields: [
+      {
+        name: "",
+        type: "",
+      },
+      {
+        name: "",
+        type: "",
+      },
+    ],
   },
 }
 

From 102b7ce61f0e77e641021d8edbee75181c515a63 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 8 Jan 2021 18:22:03 +0000
Subject: [PATCH 13/70] binding data context in component

---
 .../EditIntegrationConfigButton.svelte        |  43 ----
 .../src/components/common/BottomDrawer.svelte |  36 +++-
 .../components/integration/QueryEditor.svelte |   3 +
 .../integration/QueryParameterBuilder.svelte  |  49 +++--
 .../src/components/integration/index.svelte   |   3 +-
 .../DataBindingDrawer/index.svelte            |  57 +++--
 .../EventsEditor/EventEditor.svelte           | 200 ++++++++++++++++++
 .../EventsEditor/EventEditorModal.svelte      | 176 ---------------
 .../EventsEditor/EventPropertyControl.svelte  |  11 +-
 .../userInterface/TableViewSelect.svelte      |  53 ++++-
 .../design/[assetType]/_layout.svelte         |   5 -
 packages/client/src/api/datasources.js        |  11 +-
 packages/client/src/api/queries.js            |  14 +-
 packages/client/src/utils/buttonActions.js    |   7 +-
 packages/server/src/api/controllers/query.js  |  27 +--
 packages/server/src/api/routes/query.js       |   3 +-
 16 files changed, 367 insertions(+), 331 deletions(-)
 delete mode 100644 packages/builder/src/components/backend/DataTable/buttons/EditIntegrationConfigButton.svelte
 create mode 100644 packages/builder/src/components/userInterface/EventsEditor/EventEditor.svelte
 delete mode 100644 packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte

diff --git a/packages/builder/src/components/backend/DataTable/buttons/EditIntegrationConfigButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/EditIntegrationConfigButton.svelte
deleted file mode 100644
index e78e7ac93d..0000000000
--- a/packages/builder/src/components/backend/DataTable/buttons/EditIntegrationConfigButton.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script>
-  import {
-    DropdownMenu,
-    TextButton as Button,
-    Icon,
-    Modal,
-    ModalContent,
-  } from "@budibase/bbui"
-  import { backendUiStore } from "builderStore"
-  import api from "builderStore/api"
-  import EditIntegrationConfig from "../modals/EditIntegrationConfig.svelte"
-
-  export let table
-
-  $: console.log("The table config is", table)
-
-  let modal
-
-  // TODO: revisit
-  async function saveTable() {
-    const SAVE_TABLE_URL = `/api/tables`
-    const response = await api.post(SAVE_TABLE_URL, table)
-    const savedTable = await response.json()
-    await backendUiStore.actions.tables.fetch()
-    backendUiStore.actions.tables.select(savedTable)
-  }
-</script>
-
-<div>
-  <Button text small on:click={modal.show}>
-    <Icon name="edit" />
-    Configure Datasource
-  </Button>
-</div>
-<Modal bind:this={modal}>
-  <ModalContent
-    confirmText="Save"
-    cancelText="Cancel"
-    onConfirm={saveTable}
-    title={'Datasource Configuration'}>
-    <EditIntegrationConfig onClosed={modal.hide} bind:table />
-  </ModalContent>
-</Modal>
diff --git a/packages/builder/src/components/common/BottomDrawer.svelte b/packages/builder/src/components/common/BottomDrawer.svelte
index d2a4bcbaab..863102e826 100644
--- a/packages/builder/src/components/common/BottomDrawer.svelte
+++ b/packages/builder/src/components/common/BottomDrawer.svelte
@@ -3,15 +3,19 @@
   import Portal from "svelte-portal"
 
   export let title
-  export let onClose
+  export let onClose = () => {}
 </script>
 
 <Portal>
   <section class="drawer" transition:slide>
-    {#if title}
-      <heading>{title}</heading>
-    {/if}
-    <slot />
+    <header>
+      {title}
+      <div class="controls">
+        <slot name="buttons" />
+        <i class="ri-close-fill close" on:click={onClose} />
+      </div>
+    </header>
+    <slot name="body" />
   </section>
 </Portal>
 
@@ -20,10 +24,28 @@
     height: 50vh;
     position: absolute;
     bottom: 0;
-    width: 97%;
+    width: 100vw;
     background: var(--background);
-    padding: var(--spacing-xl);
     border-top: var(--border-light);
     z-index: 2;
   }
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: var(--border-light);
+    padding: var(--spacing-s);
+  }
+
+  .controls {
+    display: grid;
+    grid-auto-flow: column;
+    grid-gap: var(--spacing-m);
+    align-items: center;
+  }
+
+  .close {
+    font-size: var(--font-size-xl);
+  }
 </style>
diff --git a/packages/builder/src/components/integration/QueryEditor.svelte b/packages/builder/src/components/integration/QueryEditor.svelte
index 5def206c90..a4256c42e8 100644
--- a/packages/builder/src/components/integration/QueryEditor.svelte
+++ b/packages/builder/src/components/integration/QueryEditor.svelte
@@ -44,4 +44,7 @@
     background: var(--background);
     border-radius: var(--border-radius-m);
   }
+  :global(.CodeMirror) {
+    border-radius: var(--border-radius-m);
+  }
 </style>
diff --git a/packages/builder/src/components/integration/QueryParameterBuilder.svelte b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
index d78018768d..2466ccbada 100644
--- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { TextArea, Label, Input, Heading } from "@budibase/bbui"
+  import { Button, TextArea, Label, Input, Heading } from "@budibase/bbui"
   import Editor from "./QueryEditor.svelte"
   import BindableInput from "components/userInterface/BindableInput.svelte"
 
@@ -17,26 +17,28 @@
   }
 </script>
 
-<Heading extraSmall black>Parameters</Heading>
-<div class="parameters">
-  <Label extraSmall grey>Parameter Name</Label>
-  <Label extraSmall grey>Default</Label>
-  <Label extraSmall grey>Value</Label>
-  <div />
-  {#each parameters as parameter, idx}
-    <Input thin bind:value={parameter.name} />
-    <Input thin bind:value={parameter.default} />
-    <BindableInput
-      type="string"
-      thin
-      bind:value={customParams[parameter.name]}
-      {bindings} />
-    <i
-      class="ri-close-circle-line delete"
-      on:click={() => deleteQueryParameter(idx)} />
-  {/each}
-</div>
-<i class="ri-add-circle-line add" on:click={newQueryParameter} />
+<section>
+  <Heading extraSmall black>Parameters</Heading>
+  <div class="parameters">
+    <Label extraSmall grey>Parameter Name</Label>
+    <Label extraSmall grey>Default</Label>
+    <Label extraSmall grey>Value</Label>
+    <div />
+    {#each parameters as parameter, idx}
+      <Input thin bind:value={parameter.name} />
+      <Input thin bind:value={parameter.default} />
+      <BindableInput
+        type="string"
+        thin
+        bind:value={customParams[parameter.name]}
+        {bindings} />
+      <i
+        class="ri-close-circle-line delete"
+        on:click={() => deleteQueryParameter(idx)} />
+    {/each}
+  </div>
+  <Button thin secondary on:click={newQueryParameter}>New Parameter</Button>
+</section>
 
 <style>
   .parameters {
@@ -44,9 +46,6 @@
     grid-template-columns: 1fr 1fr 1fr 5%;
     grid-gap: 10px;
     align-items: center;
-  }
-
-  .add {
-    margin-top: var(--spacing-m);
+    margin-bottom: var(--spacing-xl);
   }
 </style>
diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte
index acea9cdd3f..c8db464f4e 100644
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { TextArea, Label, Input, Heading } from "@budibase/bbui"
+  import { TextArea, Label, Input, Heading, Spacer } from "@budibase/bbui"
   import Editor from "./QueryEditor.svelte"
   import ParameterBuilder from "./QueryParameterBuilder.svelte"
 
@@ -12,5 +12,6 @@
 
 {#if query.queryType === QueryTypes.SQL}
   <ParameterBuilder bind:parameters={query.parameters} />
+  <Spacer large />
   <Editor label="Query" bind:value={query.queryString} />
 {/if}
diff --git a/packages/builder/src/components/userInterface/DataBindingDrawer/index.svelte b/packages/builder/src/components/userInterface/DataBindingDrawer/index.svelte
index 736117c30e..aaf78f20fc 100644
--- a/packages/builder/src/components/userInterface/DataBindingDrawer/index.svelte
+++ b/packages/builder/src/components/userInterface/DataBindingDrawer/index.svelte
@@ -1,35 +1,62 @@
 <script>
   import BottomDrawer from "components/common/BottomDrawer.svelte"
-  import { store, backendUiStore } from "builderStore"
+  import { Button } from "@budibase/bbui"
+  import { store, backendUiStore, currentAsset } from "builderStore"
   import { slide } from "svelte/transition"
-  import QueryInterface from "components/integration/QueryViewer.svelte"
+  import fetchBindableProperties from "builderStore/fetchBindableProperties"
+  import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
 
-  $: query = $backendUiStore.queries.find(
-    query => query._id === $backendUiStore.selectedQueryId
-  )
+  export let query
+  export let parameters = {}
+
+  $: console.log("CUSTOM PARAMS", parameters)
+
+  $: bindableProperties = fetchBindableProperties({
+    componentInstanceId: $store.selectedComponentId,
+    components: $store.components,
+    screen: $currentAsset,
+    tables: $backendUiStore.tables,
+  }).map(property => ({
+    ...property,
+    category: property.type === "instance" ? "Component" : "Table",
+    label: property.readableBinding,
+    path: property.runtimeBinding,
+  }))
 
   function closeDatabindingDrawer() {
     store.update(state => {
-      state.bindingDrawerVisible = false
+      state.bottomDrawerVisible = false
       return state
     })
   }
+
+  function saveComponentQuery() {
+    // save the parameters to the datasource of the component
+  }
 </script>
 
 {#if query}
-  <BottomDrawer>
-    <div class="drawer-contents">
-      <i class="ri-close-fill close" on:click={closeDatabindingDrawer} />
-      <QueryInterface {query} />
+  <BottomDrawer title={'Query'} onClose={closeDatabindingDrawer}>
+    <div slot="buttons">
+      <Button blue thin on:click={saveComponentQuery}>Save</Button>
+    </div>
+    <div class="drawer-contents" slot="body">
+      <pre>{query.queryString}</pre>
+      <ParameterBuilder
+        bind:customParams={parameters}
+        parameters={query.parameters}
+        bindings={bindableProperties} />
     </div>
   </BottomDrawer>
 {/if}
 
 <style>
-  i {
-    position: absolute;
-    top: var(--spacing-xl);
-    right: var(--spacing-xl);
-    font-size: var(--font-size-m);
+  .drawer-contents {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-columns: 20% 1fr;
+    grid-gap: var(--spacing-m);
+    height: 100%;
+    padding: var(--spacing-xl);
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditor.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditor.svelte
new file mode 100644
index 0000000000..5a94dadc5d
--- /dev/null
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditor.svelte
@@ -0,0 +1,200 @@
+<script>
+  import {
+    Button,
+    TextButton,
+    Body,
+    DropdownMenu,
+    ModalContent,
+  } from "@budibase/bbui"
+  import { AddIcon, ArrowDownIcon } from "components/common/Icons/"
+  import actionTypes from "./actions"
+  import { createEventDispatcher } from "svelte"
+
+  const dispatch = createEventDispatcher()
+  const eventTypeKey = "##eventHandlerType"
+
+  export let event
+
+  let addActionButton
+  let addActionDropdown
+  let selectedAction
+
+  let draftEventHandler = { parameters: [] }
+
+  $: actions = event || []
+  $: selectedActionComponent =
+    selectedAction &&
+    actionTypes.find(t => t.name === selectedAction[eventTypeKey]).component
+
+  const updateEventHandler = (updatedHandler, index) => {
+    actions[index] = updatedHandler
+  }
+
+  const deleteAction = index => {
+    actions.splice(index, 1)
+    actions = actions
+  }
+
+  const addAction = actionType => () => {
+    const newAction = {
+      parameters: {},
+      [eventTypeKey]: actionType.name,
+    }
+    actions.push(newAction)
+    selectedAction = newAction
+    actions = actions
+    addActionDropdown.hide()
+  }
+
+  const selectAction = action => () => {
+    selectedAction = action
+  }
+
+  const saveEventData = () => {
+    dispatch("change", actions)
+  }
+</script>
+
+<div class="actions-container">
+  <div class="actions-list">
+    <div>
+      <div bind:this={addActionButton}>
+        <TextButton text small blue on:click={addActionDropdown.show}>
+          <div style="height: 20px; width: 20px;">
+            <AddIcon />
+          </div>
+          Add Action
+        </TextButton>
+      </div>
+      <DropdownMenu
+        bind:this={addActionDropdown}
+        anchor={addActionButton}
+        align="right">
+        <div class="available-actions-container">
+          {#each actionTypes as actionType}
+            <div class="available-action" on:click={addAction(actionType)}>
+              <span>{actionType.name}</span>
+            </div>
+          {/each}
+        </div>
+      </DropdownMenu>
+    </div>
+
+    {#if actions && actions.length > 0}
+      {#each actions as action, index}
+        <div class="action-container">
+          <div class="action-header" on:click={selectAction(action)}>
+            <span class:selected={action === selectedAction}>
+              {index + 1}. {action[eventTypeKey]}
+            </span>
+            <!-- <Body small lh>{index + 1}. {action[eventTypeKey]}</Body> -->
+            <!-- <div class="row-expander" class:rotate={action !== selectedAction}>
+              <ArrowDownIcon />
+            </div> -->
+          </div>
+          <!-- {#if action === selectedAction}
+            <div class="selected-action-container">
+              <svelte:component
+                this={selectedActionComponent}
+                parameters={selectedAction.parameters} />
+              <div class="delete-action-button">
+                <TextButton text medium on:click={() => deleteAction(index)}>
+                  Delete
+                </TextButton>
+              </div>
+            </div>
+          {/if} -->
+        </div>
+      {/each}
+    {/if}
+  </div>
+  <div class="action-config">
+    {#if selectedAction}
+      <div class="selected-action-container">
+        <svelte:component
+          this={selectedActionComponent}
+          parameters={selectedAction.parameters} />
+        <div class="delete-action-button">
+          <!-- <TextButton text medium on:click={() => deleteAction(index)}>
+            Delete
+          </TextButton> -->
+        </div>
+      </div>
+    {/if}
+    <Button thin blue on:click={saveEventData}>Save</Button>
+  </div>
+</div>
+
+<a href="https://docs.budibase.com">Learn more about Actions</a>
+
+<style>
+  .action-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .action-header > span {
+    margin-bottom: var(--spacing-m);
+  }
+
+  .action-header > span:hover,
+  .selected {
+    cursor: pointer;
+    font-weight: 500;
+  }
+
+  .actions-list {
+    border: var(--border-light);
+  }
+
+  .available-action {
+    padding: var(--spacing-s);
+    font-size: var(--font-size-m);
+    cursor: pointer;
+  }
+
+  .available-action:hover {
+    background: var(--grey-2);
+  }
+
+  .actions-container {
+    display: grid;
+    grid-gap: var(--spacing-m);
+    grid-template-columns: 15% 1fr;
+    grid-auto-flow: column;
+    min-height: 0;
+    padding-top: 0;
+    border: var(--border-light);
+    border-width: 0 0 1px 0;
+    overflow-y: auto;
+  }
+
+  .action-container {
+    border: var(--border-light);
+    border-width: 1px 0 0 0;
+  }
+
+  .selected-action-container {
+    padding-bottom: var(--spacing-s);
+    padding-top: var(--spacing-s);
+  }
+
+  .delete-action-button {
+    padding-top: var(--spacing-l);
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: row;
+  }
+
+  a {
+    flex: 1;
+    color: var(--grey-5);
+    font-size: var(--font-size-s);
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: var(--blue);
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
deleted file mode 100644
index fda964a7ba..0000000000
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
+++ /dev/null
@@ -1,176 +0,0 @@
-<script>
-  import {
-    Button,
-    TextButton,
-    Body,
-    DropdownMenu,
-    ModalContent,
-  } from "@budibase/bbui"
-  import { AddIcon, ArrowDownIcon } from "components/common/Icons/"
-  import actionTypes from "./actions"
-  import { createEventDispatcher } from "svelte"
-
-  const dispatch = createEventDispatcher()
-  const eventTypeKey = "##eventHandlerType"
-
-  export let event
-
-  let addActionButton
-  let addActionDropdown
-  let selectedAction
-
-  let draftEventHandler = { parameters: [] }
-
-  $: actions = event || []
-  $: selectedActionComponent =
-    selectedAction &&
-    actionTypes.find(t => t.name === selectedAction[eventTypeKey]).component
-
-  const updateEventHandler = (updatedHandler, index) => {
-    actions[index] = updatedHandler
-  }
-
-  const deleteAction = index => {
-    actions.splice(index, 1)
-    actions = actions
-  }
-
-  const addAction = actionType => () => {
-    const newAction = {
-      parameters: {},
-      [eventTypeKey]: actionType.name,
-    }
-    actions.push(newAction)
-    selectedAction = newAction
-    actions = actions
-    addActionDropdown.hide()
-  }
-
-  const selectAction = action => () => {
-    selectedAction = action
-  }
-
-  const saveEventData = () => {
-    dispatch("change", actions)
-  }
-</script>
-
-<div>
-  <div bind:this={addActionButton}>
-    <TextButton text small blue on:click={addActionDropdown.show}>
-      <div style="height: 20px; width: 20px;">
-        <AddIcon />
-      </div>
-      Add Action
-    </TextButton>
-  </div>
-  <DropdownMenu
-    bind:this={addActionDropdown}
-    anchor={addActionButton}
-    align="right">
-    <div class="available-actions-container">
-      {#each actionTypes as actionType}
-        <div class="available-action" on:click={addAction(actionType)}>
-          <span>{actionType.name}</span>
-        </div>
-      {/each}
-    </div>
-  </DropdownMenu>
-</div>
-
-<div class="actions-container">
-  {#if actions && actions.length > 0}
-    {#each actions as action, index}
-      <div class="action-container">
-        <div class="action-header" on:click={selectAction(action)}>
-          <Body small lh>{index + 1}. {action[eventTypeKey]}</Body>
-          <div class="row-expander" class:rotate={action !== selectedAction}>
-            <ArrowDownIcon />
-          </div>
-        </div>
-        {#if action === selectedAction}
-          <div class="selected-action-container">
-            <svelte:component
-              this={selectedActionComponent}
-              parameters={selectedAction.parameters} />
-            <div class="delete-action-button">
-              <TextButton text medium on:click={() => deleteAction(index)}>
-                Delete
-              </TextButton>
-            </div>
-          </div>
-        {/if}
-      </div>
-    {/each}
-  {/if}
-  <Button thin blue on:click={saveEventData}>Save</Button>
-</div>
-
-<a href="https://docs.budibase.com">Learn more about Actions</a>
-
-<style>
-  .action-header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-
-  .action-header > p {
-    flex: 1;
-  }
-
-  .row-expander {
-    height: 30px;
-    width: 30px;
-  }
-
-  .available-action {
-    padding: var(--spacing-s);
-    font-size: var(--font-size-m);
-    cursor: pointer;
-  }
-
-  .available-action:hover {
-    background: var(--grey-2);
-  }
-
-  .actions-container {
-    flex: 1;
-    min-height: 0;
-    padding-top: 0;
-    border: var(--border-light);
-    border-width: 0 0 1px 0;
-    overflow-y: auto;
-  }
-
-  .action-container {
-    border: var(--border-light);
-    border-width: 1px 0 0 0;
-  }
-
-  .selected-action-container {
-    padding-bottom: var(--spacing-s);
-    padding-top: var(--spacing-s);
-  }
-
-  .delete-action-button {
-    padding-top: var(--spacing-l);
-    display: flex;
-    justify-content: flex-end;
-    flex-direction: row;
-  }
-
-  a {
-    flex: 1;
-    color: var(--grey-5);
-    font-size: var(--font-size-s);
-    text-decoration: none;
-  }
-  a:hover {
-    color: var(--blue);
-  }
-
-  .rotate :global(svg) {
-    transform: rotate(90deg);
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
index 40a8e77f0c..6d42a25a38 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
@@ -2,7 +2,7 @@
   import { Button, Modal } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { store } from "builderStore"
-  import EventEditorModal from "./EventEditorModal.svelte"
+  import EventEditor from "./EventEditor.svelte"
   import BottomDrawer from "components/common/BottomDrawer.svelte"
 
   const dispatch = createEventDispatcher()
@@ -20,7 +20,12 @@
 <Button secondary small on:click={showDrawer}>Define Actions</Button>
 
 {#if drawerVisible}
-  <BottomDrawer>
-    <EventEditorModal event={value} eventType={name} on:change />
+  <BottomDrawer title={'Actions'} onClose={() => (drawerVisible = false)}>
+    <heading slot="buttons">
+      <Button thin blue>Save</Button>
+    </heading>
+    <div slot="body">
+      <EventEditor event={value} eventType={name} on:change />
+    </div>
   </BottomDrawer>
 {/if}
diff --git a/packages/builder/src/components/userInterface/TableViewSelect.svelte b/packages/builder/src/components/userInterface/TableViewSelect.svelte
index 423ff390e3..a395497cc4 100644
--- a/packages/builder/src/components/userInterface/TableViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableViewSelect.svelte
@@ -2,10 +2,14 @@
   import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { store, backendUiStore, currentAsset } from "builderStore"
+  // import DataBindingDrawer from "components/userInterface/DataBindingDrawer/index.svelte"
+  import BottomDrawer from "components/common/BottomDrawer.svelte"
+  import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
   import fetchBindableProperties from "../../builderStore/fetchBindableProperties"
 
   const dispatch = createEventDispatcher()
   let anchorRight, dropdownRight
+  let bindingDrawerOpen
 
   export let value = {}
 
@@ -15,14 +19,11 @@
   }
 
   function openBindingDrawer() {
-    backendUiStore.update(state => {
-      state.selectedQueryId = value._id
-      return state
-    })
-    store.update(state => {
-      state.bottomDrawerVisible = true
-      return state
-    })
+    bindingDrawerOpen = true
+  }
+
+  function closeDatabindingDrawer() {
+    bindingDrawerOpen = false
   }
 
   $: tables = $backendUiStore.tables.map(m => ({
@@ -47,6 +48,7 @@
       name: query.name,
       ...query,
       schema: query.schema,
+      parameters: query.parameters,
       type: "query",
   }))
 
@@ -57,6 +59,15 @@
     tables: $backendUiStore.tables,
   })
 
+  $: queryBindableProperties = bindableProperties.map(property => ({
+    ...property,
+    category: property.type === "instance" ? "Component" : "Table",
+    label: property.readableBinding,
+    path: property.runtimeBinding,
+  }))
+
+  $: console.log("selected", value)
+
   $: links = bindableProperties
     .filter(x => x.fieldSchema?.type === "link")
     .map(property => {
@@ -78,9 +89,6 @@
   <span>{value.label ? value.label : 'Table / View / Query'}</span>
   <Icon name="arrowdown" />
 </div>
-{#if value.type === "query"}
-  <i class="ri-settings-3-line" on:click={openBindingDrawer} />
-{/if}
 <DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
   <div class="dropdown">
     <div class="title">
@@ -138,6 +146,25 @@
   </div>
 </DropdownMenu>
 
+{#if value.type === "query"}
+  <Button blue on:click={openBindingDrawer}/>
+  {#if bindingDrawerOpen}
+    <BottomDrawer title={'Query'} onClose={closeDatabindingDrawer}>
+      <div slot="buttons">
+        <Button blue thin on:click={() => handleSelected(value)}>Save</Button>
+      </div>
+      <div class="drawer-contents" slot="body">
+        <pre>{value.queryString}</pre>
+        <ParameterBuilder
+          bind:customParams={value.queryParams}
+          parameters={value.parameters || []}
+          bindings={queryBindableProperties} />
+      </div>
+    </BottomDrawer>
+  {/if}
+{/if}
+
+
 <style>
   .dropdownbutton {
     background-color: var(--grey-2);
@@ -199,4 +226,8 @@
   li:hover {
     background-color: var(--grey-4);
   }
+
+  .drawer-contents {
+    padding: var(--spacing-xl);
+  }
 </style>
diff --git a/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte
index 40565ee3b5..64060ef6b7 100644
--- a/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte
@@ -10,7 +10,6 @@
   import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte"
   import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte"
   import FrontendNavigatePane from "components/userInterface/FrontendNavigatePane.svelte"
-  import DataBindingDrawer from "components/userInterface/DataBindingDrawer/index.svelte"
 
   $: instance = $store.appInstance
 
@@ -48,10 +47,6 @@
     {/if}
   </div>
 
-  {#if $store.bottomDrawerVisible}
-    <DataBindingDrawer />
-  {/if}
-
   {#if $selectedComponent != null}
     <div class="components-pane">
       <ComponentPropertiesPanel />
diff --git a/packages/client/src/api/datasources.js b/packages/client/src/api/datasources.js
index ef1ff49723..1ea592c94c 100644
--- a/packages/client/src/api/datasources.js
+++ b/packages/client/src/api/datasources.js
@@ -1,8 +1,9 @@
 import { fetchTableData } from "./tables"
 import { fetchViewData } from "./views"
 import { fetchRelationshipData } from "./relationships"
-import { fetchQueryData } from "./queries"
+import { executeQuery } from "./queries"
 import { enrichRows } from "./rows"
+import { enrichDataBindings } from "../utils/enrichDataBinding"
 
 /**
  * Fetches all rows for a particular Budibase data source.
@@ -20,8 +21,12 @@ export const fetchDatasource = async (datasource, dataContext) => {
   } else if (type === "view") {
     rows = await fetchViewData(datasource)
   } else if (type === "query") {
-    // TODO: map to schema
-    return await fetchQueryData(datasource)
+    console.log("Query Datasource", datasource)
+    console.log("Data Context", dataContext)
+    // TODO: You left here
+    const parameters = enrichDataBindings(datasource.queryParams, dataContext)
+    console.log("PARSED PARAMS", parameters)
+    return await executeQuery({ _id: datasource._id, parameters })
   } else if (type === "link") {
     const row = dataContext[datasource.providerId]
     rows = await fetchRelationshipData({
diff --git a/packages/client/src/api/queries.js b/packages/client/src/api/queries.js
index 1d1ad5ced7..29ca197d19 100644
--- a/packages/client/src/api/queries.js
+++ b/packages/client/src/api/queries.js
@@ -1,23 +1,13 @@
 import API from "./api"
 
-/**
- * Fetches all rows from a query.
- */
-export const fetchQueryData = async ({ _id }) => {
-  const response = await API.get({
-    url: `/api/queries/${_id}`,
-  })
-  return response.rows
-}
-
 /**
  * Executes a query against an external data connector.
  */
-export const executeQuery = async ({ queryId, params }) => {
+export const executeQuery = async ({ queryId, parameters }) => {
   const response = await API.post({
     url: `/api/queries/${queryId}`,
     body: {
-      params,
+      parameters,
     },
   })
   return response.rows
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index c6287bab70..4d0ff98dfb 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -28,10 +28,13 @@ const navigationHandler = action => {
 const queryExecutionHandler = async (action, context) => {
   const { datasourceId, queryId, queryParams } = action.parameters
 
-  // TODO: allow context based bindings for query params
   const enrichedQueryParameters = enrichDataBindings(queryParams, context)
 
-  await executeQuery({ datasourceId, queryId, params: enrichedQueryParameters })
+  await executeQuery({
+    datasourceId,
+    queryId,
+    parameters: enrichedQueryParameters,
+  })
 }
 
 const handlerMap = {
diff --git a/packages/server/src/api/controllers/query.js b/packages/server/src/api/controllers/query.js
index 2972938528..89c4a5a08b 100644
--- a/packages/server/src/api/controllers/query.js
+++ b/packages/server/src/api/controllers/query.js
@@ -81,7 +81,7 @@ exports.execute = async function(ctx) {
   const queryTemplate = handlebars.compile(query.queryString)
 
   // TODO: Take the default params into account
-  const parsedQuery = queryTemplate(ctx.request.body.params)
+  const parsedQuery = queryTemplate(ctx.request.body.parameters)
 
   const Integration = integrations[datasource.source]
 
@@ -94,31 +94,6 @@ exports.execute = async function(ctx) {
   ctx.body = response
 }
 
-exports.fetchQuery = async function(ctx) {
-  const db = new CouchDB(ctx.user.appId)
-
-  const query = await db.get(ctx.params.queryId)
-
-  const datasource = await db.get(query.datasourceId)
-
-  const Integration = integrations[datasource.source]
-
-  if (!Integration) {
-    ctx.throw(400, "Integration type does not exist.")
-    return
-  }
-
-  const rows = await new Integration(
-    datasource.config,
-    query.queryString
-  ).query()
-
-  ctx.body = {
-    schema: query.schema,
-    rows,
-  }
-}
-
 exports.destroy = async function(ctx) {
   const db = new CouchDB(ctx.user.appId)
   await db.destroy(ctx.params.queryId)
diff --git a/packages/server/src/api/routes/query.js b/packages/server/src/api/routes/query.js
index 06597e52cf..c04bc14fb9 100644
--- a/packages/server/src/api/routes/query.js
+++ b/packages/server/src/api/routes/query.js
@@ -8,10 +8,9 @@ const router = Router()
 // TODO: sort out auth so apps have the right permissions
 router
   .get("/api/queries", authorized(BUILDER), queryController.fetch)
-  .get("/api/queries/:queryId", authorized(BUILDER), queryController.fetchQuery)
   .post("/api/queries", authorized(BUILDER), queryController.save)
-  .post("/api/queries/preview", authorized(BUILDER), queryController.preview)
   .post("/api/queries/:queryId", authorized(BUILDER), queryController.execute)
+  .post("/api/queries/preview", authorized(BUILDER), queryController.preview)
   .delete("/api/queries/:queryId", authorized(BUILDER), queryController.destroy)
 
 module.exports = router

From 35934a4da004dcb4e148f9a84d20749cd421fd3b Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Sun, 10 Jan 2021 10:09:47 +0000
Subject: [PATCH 14/70] Updated the design of the items within the component
 dropdown

Icons were a little hard to make out. Increased the size and visability.
The icons are not ideal, but I will tackle this another day - Budi Icons!
---
 .../components/common/Dropdowns/DropdownItem.svelte  | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
index 66a384fc90..f6f1ec2d12 100644
--- a/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
+++ b/packages/builder/src/components/common/Dropdowns/DropdownItem.svelte
@@ -11,7 +11,9 @@
   on:click
   class:big={subtitle != null}
   {...$$restProps}>
-  {#if icon}<i class={icon} />{/if}
+  {#if icon}
+    <i class={icon} />
+  {/if}
   <div class="content">
     <div class="title">{title}</div>
     {#if subtitle != null}
@@ -56,7 +58,7 @@
   }
 
   .title {
-    font-weight: 400;
+    font-weight: 500;
   }
 
   .subtitle {
@@ -65,6 +67,10 @@
   }
 
   i {
-    font-size: 16px;
+    padding: 0.5rem;
+    background-color: var(--grey-2);
+    font-size: 24px;
+    border-radius: var(--border-radius-s);
+    color: var(--ink);
   }
 </style>

From a3fb1c860f1aabcf8d5de7dc53c3bde75474f431 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 11 Jan 2021 11:51:22 +0000
Subject: [PATCH 15/70] Bump ini from 1.3.5 to 1.3.8 in /packages/server

Bumps [ini](https://github.com/isaacs/ini) from 1.3.5 to 1.3.8.
- [Release notes](https://github.com/isaacs/ini/releases)
- [Commits](https://github.com/isaacs/ini/compare/v1.3.5...v1.3.8)

Signed-off-by: dependabot[bot] <support@github.com>
---
 packages/server/yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index 88ec4fa357..6c830c6009 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -3802,9 +3802,9 @@ inherits@2.0.3:
   integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
 ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
-  integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
 inline-process-browser@^1.0.0:
   version "1.0.0"

From ec03dc065572f20e4aa44b2c8d22ae5fa1699af4 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 11 Jan 2021 11:51:27 +0000
Subject: [PATCH 16/70] Bump urijs from 1.19.2 to 1.19.5 in /packages/server

Bumps [urijs](https://github.com/medialize/URI.js) from 1.19.2 to 1.19.5.
- [Release notes](https://github.com/medialize/URI.js/releases)
- [Changelog](https://github.com/medialize/URI.js/blob/gh-pages/CHANGELOG.md)
- [Commits](https://github.com/medialize/URI.js/compare/v1.19.2...v1.19.5)

Signed-off-by: dependabot[bot] <support@github.com>
---
 packages/server/yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index 88ec4fa357..08c49836d9 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -7880,9 +7880,9 @@ uri-js@^4.2.2:
     punycode "^2.1.0"
 
 urijs@^1.19.2:
-  version "1.19.2"
-  resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.19.2.tgz#f9be09f00c4c5134b7cb3cf475c1dd394526265a"
-  integrity sha512-s/UIq9ap4JPZ7H1EB5ULo/aOUbWqfDi7FKzMC2Nz+0Si8GiT1rIEaprt8hy3Vy2Ex2aJPpOQv4P4DuOZ+K1c6w==
+  version "1.19.5"
+  resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.19.5.tgz#119683ab4b2fb0bd637e5ea6dd9117bcac68d3e4"
+  integrity sha512-48z9VGWwdCV5KfizHsE05DWS5fhK6gFlx5MjO7xu0Krc5FGPWzjlXEVV0nPMrdVuP7xmMHiPZ2HoYZwKOFTZOg==
 
 urix@^0.1.0:
   version "0.1.0"

From 2f0eb182b4c404c232d40f2295e5c215c0a6b2ad Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 11 Jan 2021 11:52:07 +0000
Subject: [PATCH 17/70] Bump ini from 1.3.5 to 1.3.8

Bumps [ini](https://github.com/isaacs/ini) from 1.3.5 to 1.3.8.
- [Release notes](https://github.com/isaacs/ini/releases)
- [Commits](https://github.com/isaacs/ini/compare/v1.3.5...v1.3.8)

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json          | 146 +++++++++++++++++++++++---
 packages/builder/yarn.lock | 208 +++++++++++++++++++++++++++++++++++--
 packages/server/yarn.lock  |   6 +-
 yarn.lock                  |   5 +-
 4 files changed, 336 insertions(+), 29 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9a1f0055cb..40073784fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -615,6 +615,17 @@
             "ssri": "^6.0.1",
             "unique-filename": "^1.1.1",
             "y18n": "^4.0.0"
+          },
+          "dependencies": {
+            "rimraf": {
+              "version": "2.7.1",
+              "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+              "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+              "dev": true,
+              "requires": {
+                "glob": "^7.1.3"
+              }
+            }
           }
         },
         "make-fetch-happen": {
@@ -1004,6 +1015,17 @@
             "ssri": "^6.0.1",
             "unique-filename": "^1.1.1",
             "y18n": "^4.0.0"
+          },
+          "dependencies": {
+            "rimraf": {
+              "version": "2.7.1",
+              "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+              "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+              "dev": true,
+              "requires": {
+                "glob": "^7.1.3"
+              }
+            }
           }
         },
         "make-fetch-happen": {
@@ -1087,6 +1109,17 @@
         "npmlog": "^4.1.2",
         "path-exists": "^3.0.0",
         "rimraf": "^2.6.2"
+      },
+      "dependencies": {
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
       }
     },
     "@lerna/run": {
@@ -1900,6 +1933,17 @@
         "ssri": "^6.0.1",
         "unique-filename": "^1.1.1",
         "y18n": "^4.0.0"
+      },
+      "dependencies": {
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
       }
     },
     "cache-base": {
@@ -2494,6 +2538,17 @@
         "mkdirp": "^0.5.1",
         "rimraf": "^2.5.4",
         "run-queue": "^1.0.0"
+      },
+      "dependencies": {
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
       }
     },
     "copy-descriptor": {
@@ -3394,6 +3449,17 @@
         "flatted": "^2.0.0",
         "rimraf": "2.6.3",
         "write": "1.0.3"
+      },
+      "dependencies": {
+        "rimraf": {
+          "version": "2.6.3",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+          "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
       }
     },
     "flatted": {
@@ -3767,6 +3833,12 @@
         "pump": "^3.0.0"
       }
     },
+    "get-them-args": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/get-them-args/-/get-them-args-1.3.2.tgz",
+      "integrity": "sha1-dKILqKSr7OWuGZrQPyvMaP38m6U=",
+      "dev": true
+    },
     "get-value": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
@@ -4354,9 +4426,9 @@
       "dev": true
     },
     "ini": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
-      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "dev": true
     },
     "init-package-json": {
@@ -4829,6 +4901,16 @@
         "verror": "1.10.0"
       }
     },
+    "kill-port": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/kill-port/-/kill-port-1.6.1.tgz",
+      "integrity": "sha512-un0Y55cOM7JKGaLnGja28T38tDDop0AQ8N0KlAdyh+B1nmMoX8AnNmqPNZbS3mUMgiST51DCVqmbFT1gNJpVNw==",
+      "dev": true,
+      "requires": {
+        "get-them-args": "1.3.2",
+        "shell-exec": "1.0.2"
+      }
+    },
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -5370,6 +5452,17 @@
         "mkdirp": "^0.5.1",
         "rimraf": "^2.5.4",
         "run-queue": "^1.0.3"
+      },
+      "dependencies": {
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
       }
     },
     "ms": {
@@ -5469,6 +5562,15 @@
         "which": "1"
       },
       "dependencies": {
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
         "semver": {
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
@@ -5966,6 +6068,15 @@
         "which": "^1.3.1"
       },
       "dependencies": {
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -6192,13 +6303,10 @@
       }
     },
     "prettier-plugin-svelte": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-0.7.0.tgz",
-      "integrity": "sha512-SuZSeMh48rx42kCFEpI/xE1XgjxQcS3r22Yo7jIhBYRhwbAa8laNxiIHsfeWWkX8BdyELkEayaTQp4ricckwTQ==",
-      "dev": true,
-      "requires": {
-        "tslib": "^1.9.3"
-      }
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-1.4.2.tgz",
+      "integrity": "sha512-O9VsNwII+raTG8QPoQWouk5ABQy/hmLm4dZ2eqJ7DPnbO35A+BxMSjlfqkw0cNP+UcbykHFYU8zNXm93ytWP9g==",
+      "dev": true
     },
     "process-nextick-args": {
       "version": "2.0.1",
@@ -6603,9 +6711,9 @@
       "dev": true
     },
     "rimraf": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
-      "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
       "dev": true,
       "requires": {
         "glob": "^7.1.3"
@@ -6733,6 +6841,12 @@
       "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
       "dev": true
     },
+    "shell-exec": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/shell-exec/-/shell-exec-1.0.2.tgz",
+      "integrity": "sha512-jyVd+kU2X+mWKMmGhx4fpWbPsjvD53k9ivqetutVW/BQ+WIZoDoP4d8vUMGezV6saZsiNoW2f9GIhg9Dondohg==",
+      "dev": true
+    },
     "signal-exit": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
@@ -7213,9 +7327,9 @@
       }
     },
     "svelte": {
-      "version": "3.29.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.29.0.tgz",
-      "integrity": "sha512-f+A65eyOQ5ujETLy+igNXtlr6AEjAQLYd1yJE1VwNiXMQO5Z/Vmiy3rL+zblV/9jd7rtTTWqO1IcuXsP2Qv0OA==",
+      "version": "3.31.2",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.31.2.tgz",
+      "integrity": "sha512-TxZGrXzX2ggFH3BIKY5fmbeMdJuZrMIMDYPMX6R9255bueuYIuVaBQSLUeY2oD7W4IdeqRZiAVGCjDw2POKBRA==",
       "dev": true
     },
     "table": {
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index f2f7363669..a1589049c8 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -854,6 +854,16 @@
     svelte-portal "^1.0.0"
     turndown "^7.0.0"
 
+"@budibase/client@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.4.3.tgz#eaf1ac83ed04722c29ea51907ac7c2190bd09b74"
+  integrity sha512-gfVIU7P1HCMuH9rgmqgv2pD5oFDwwuX0QF3+FXuKR3/Cr6JW+bstVsNZHGgwOrmbxT3oAxfeNX186zrQupJ42w==
+  dependencies:
+    deep-equal "^2.0.1"
+    mustache "^4.0.1"
+    regexparam "^1.3.0"
+    svelte-spa-router "^3.0.5"
+
 "@budibase/colorpicker@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@budibase/colorpicker/-/colorpicker-1.0.1.tgz#940c180e7ebba0cb0756c4c8ef13f5dfab58e810"
@@ -1646,6 +1656,11 @@ array-equal@^1.0.0:
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
   integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
 
+array-filter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
+  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
+
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
@@ -1713,6 +1728,13 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+available-typed-arrays@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
+  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
+  dependencies:
+    array-filter "^1.0.0"
+
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -2876,6 +2898,27 @@ deep-equal@^1.0.1:
     object-keys "^1.1.1"
     regexp.prototype.flags "^1.2.0"
 
+deep-equal@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.5.tgz#55cd2fe326d83f9cbf7261ef0e060b3f724c5cb9"
+  integrity sha512-nPiRgmbAtm1a3JsnLCf6/SLfXcjyN5v8L1TXzdCmHrXJ4hx+gW/w1YCcn7z8gJtSiDArZCgYtbao3QqLm/N1Sw==
+  dependencies:
+    call-bind "^1.0.0"
+    es-get-iterator "^1.1.1"
+    get-intrinsic "^1.0.1"
+    is-arguments "^1.0.4"
+    is-date-object "^1.0.2"
+    is-regex "^1.1.1"
+    isarray "^2.0.5"
+    object-is "^1.1.4"
+    object-keys "^1.1.1"
+    object.assign "^4.1.2"
+    regexp.prototype.flags "^1.3.0"
+    side-channel "^1.0.3"
+    which-boxed-primitive "^1.0.1"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.2"
+
 deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -3102,6 +3145,20 @@ es-abstract@^1.18.0-next.1:
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
+es-get-iterator@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.1.tgz#b93ddd867af16d5118e00881396533c1c6647ad9"
+  integrity sha512-qorBw8Y7B15DVLaJWy6WdEV/ZkieBcu6QCq/xzWzGOKJqgG1j754vXRfZ3NY7HSShneqU43mPB4OkQBTkvHhFw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.1"
+    has-symbols "^1.0.1"
+    is-arguments "^1.0.4"
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-string "^1.0.5"
+    isarray "^2.0.5"
+
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -3485,7 +3542,7 @@ for-in@^1.0.2:
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
   integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
 
-foreach@~2.0.1:
+foreach@^2.0.5, foreach@~2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
   integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
@@ -3584,6 +3641,15 @@ get-intrinsic@^1.0.0:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
+get-intrinsic@^1.0.1, get-intrinsic@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.0.2.tgz#6820da226e50b24894e08859469dc68361545d49"
+  integrity sha512-aeX0vrFm21ILl3+JpFFRNe9aUvp6VFZb2/CTbgLb8j75kOhvoNYjt9d8KA/tJG4gSo8nzEDedRl0h7vDmBYRVg==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+
 get-port@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
@@ -3911,9 +3977,9 @@ inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1,
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
 ini@^1.3.5:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
-  integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
 invariant@^2.2.4:
   version "2.2.4"
@@ -3951,6 +4017,11 @@ is-arrayish@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
+is-bigint@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.1.tgz#6923051dfcbc764278540b9ce0e6b3213aa5ebc2"
+  integrity sha512-J0ELF4yHFxHy0cmSxZuheDOz2luOdVvqjwmEcj8H/L1JHeuEDSDbeRP+Dk9kFVk5RTFzbucJ2Kb9F7ixY2QaCg==
+
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@@ -3958,6 +4029,13 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
+is-boolean-object@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.0.tgz#e2aaad3a3a8fca34c28f6eee135b156ed2587ff0"
+  integrity sha512-a7Uprx8UtD+HWdyYwnD1+ExtTgqQtD2k/1yJgtXP6wnMm8byhkoTZRl+95LLThpzNZJ5aEvi46cdH+ayMFRwmA==
+  dependencies:
+    call-bind "^1.0.0"
+
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -3996,7 +4074,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1:
+is-date-object@^1.0.1, is-date-object@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
   integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
@@ -4073,6 +4151,11 @@ is-installed-globally@^0.3.2:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
+is-map@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
+  integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==
+
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
@@ -4083,6 +4166,11 @@ is-negative-zero@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
   integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
 
+is-number-object@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
+  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
+
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -4148,6 +4236,11 @@ is-regex@^1.0.4, is-regex@^1.1.1:
   dependencies:
     has-symbols "^1.0.1"
 
+is-set@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
+  integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==
+
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@@ -4158,18 +4251,44 @@ is-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
   integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
 
-is-symbol@^1.0.2:
+is-string@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
+  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
+
+is-symbol@^1.0.2, is-symbol@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
   integrity sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==
   dependencies:
     has-symbols "^1.0.1"
 
+is-typed-array@^1.1.3:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.4.tgz#1f66f34a283a3c94a4335434661ca53fff801120"
+  integrity sha512-ILaRgn4zaSrVNXNGtON6iFNotXW3hAPF3+0fB1usg2jFlWqo5fEDdmJkz0zBfoi7Dgskr8Khi2xZ8cXqZEfXNA==
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    call-bind "^1.0.0"
+    es-abstract "^1.18.0-next.1"
+    foreach "^2.0.5"
+    has-symbols "^1.0.1"
+
 is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
+is-weakmap@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
+  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
+
+is-weakset@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
+  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
+
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -4195,6 +4314,11 @@ isarray@1.0.0, isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
 isbuffer@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/isbuffer/-/isbuffer-0.0.0.tgz#38c146d9df528b8bf9b0701c3d43cf12df3fc39b"
@@ -5484,6 +5608,11 @@ object-inspect@^1.8.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
   integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
 
+object-inspect@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.9.0.tgz#c90521d74e1127b67266ded3394ad6116986533a"
+  integrity sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==
+
 object-is@^1.0.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.3.tgz#2e3b9e65560137455ee3bd62aec4d90a2ea1cc81"
@@ -5492,6 +5621,14 @@ object-is@^1.0.1:
     define-properties "^1.1.3"
     es-abstract "^1.18.0-next.1"
 
+object-is@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.4.tgz#63d6c83c00a43f4cbc9434eb9757c8a5b8565068"
+  integrity sha512-1ZvAZ4wlF7IyPVOcE1Omikt7UpaFlOQq0HlSti+ZvDH3UiD2brwGMwDbyV43jao2bKJ+4+WdPJHSd7kgzKYVqg==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+
 object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -5518,7 +5655,7 @@ object-visit@^1.0.0:
   dependencies:
     isobject "^3.0.0"
 
-object.assign@^4.1.0, object.assign@^4.1.1:
+object.assign@^4.1.0, object.assign@^4.1.1, object.assign@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
   integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
@@ -6098,7 +6235,7 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexp.prototype.flags@^1.2.0:
+regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
   integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
@@ -6106,6 +6243,11 @@ regexp.prototype.flags@^1.2.0:
     define-properties "^1.1.3"
     es-abstract "^1.17.0-next.1"
 
+regexparam@1.3.0, regexparam@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
+  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
+
 regexpu-core@^4.7.1:
   version "4.7.1"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.1.tgz#2dea5a9a07233298fbf0db91fa9abc4c6e0f8ad6"
@@ -6590,6 +6732,15 @@ shortid@^2.2.15:
   dependencies:
     nanoid "^2.1.0"
 
+side-channel@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -7006,6 +7157,13 @@ svelte-portal@^1.0.0:
   resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-1.0.0.tgz#36a47c5578b1a4d9b4dc60fa32a904640ec4cdd3"
   integrity sha512-nHf+DS/jZ6jjnZSleBMSaZua9JlG5rZv9lOGKgJuaZStfevtjIlUJrkLc3vbV8QdBvPPVmvcjTlazAzfKu0v3Q==
 
+svelte-spa-router@^3.0.5:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/svelte-spa-router/-/svelte-spa-router-3.1.0.tgz#a929f0def7e12c41f32bc356f91685aeadcd75bf"
+  integrity sha512-jlM/xwjn57mylr+pzHYCOOy+IPQauT46gOucNGTBu6jHcFXu3F+oaojN4PXC1LYizRGxFB6QA0qnYbZnRfX7Sg==
+  dependencies:
+    regexparam "1.3.0"
+
 svelte@^3.30.0:
   version "3.30.0"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.30.0.tgz#cbde341e96bf34f4ac73c8f14f8a014e03bfb7d6"
@@ -7435,11 +7593,45 @@ whatwg-url@^8.0.0:
     tr46 "^2.0.2"
     webidl-conversions "^6.1.0"
 
+which-boxed-primitive@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
+  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
+  dependencies:
+    is-bigint "^1.0.1"
+    is-boolean-object "^1.1.0"
+    is-number-object "^1.0.4"
+    is-string "^1.0.5"
+    is-symbol "^1.0.3"
+
+which-collection@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
+  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
+  dependencies:
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-weakmap "^2.0.1"
+    is-weakset "^2.0.1"
+
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
+which-typed-array@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.4.tgz#8fcb7d3ee5adf2d771066fba7cf37e32fe8711ff"
+  integrity sha512-49E0SpUe90cjpoc7BOJwyPHRqSAd12c10Qm2amdEZrJPCY2NDxaW01zHITrem+rnETY3dwrbH3UUrUwagfCYDA==
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    call-bind "^1.0.0"
+    es-abstract "^1.18.0-next.1"
+    foreach "^2.0.5"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.1"
+    is-typed-array "^1.1.3"
+
 which@^1.2.9, which@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index 88ec4fa357..6c830c6009 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -3802,9 +3802,9 @@ inherits@2.0.3:
   integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
 ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
-  integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
 inline-process-browser@^1.0.0:
   version "1.0.0"
diff --git a/yarn.lock b/yarn.lock
index f4d4d2114f..c8ca3bebd6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2475,8 +2475,9 @@ inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.3:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
 
 ini@^1.3.2, ini@^1.3.4:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
+  integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
 init-package-json@^1.10.3:
   version "1.10.3"

From b76d42bcde7b03723c33a23558bedb324e9351fc Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Mon, 11 Jan 2021 15:34:43 +0000
Subject: [PATCH 18/70] use dynamic input in query

---
 .../TableNavigator/TableDataImport.svelte     |   2 +-
 .../actions/RefreshComponent.svelte           |  40 ++++++
 packages/client/src/api/datasources.js        |  15 ++-
 packages/client/src/api/queries.js            |   2 +-
 packages/server/scripts/exportAppTemplate.js  |   2 +-
 packages/server/src/integrations/postgres.js  |  54 +-------
 packages/standard-components/src/Input.svelte |   8 +-
 .../src/grid/Component.svelte                 | 117 +++++++++---------
 8 files changed, 119 insertions(+), 121 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/EventsEditor/actions/RefreshComponent.svelte

diff --git a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
index 810d7960f5..293f52b487 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
@@ -5,7 +5,7 @@
   import api from "builderStore/api"
 
   const BYTES_IN_MB = 1000000
-  const FILE_SIZE_LIMIT = BYTES_IN_MB * 1
+  const FILE_SIZE_LIMIT = BYTES_IN_MB * 5
 
   export let files = []
   export let dataImport = {
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/RefreshComponent.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/RefreshComponent.svelte
new file mode 100644
index 0000000000..7b144bdf88
--- /dev/null
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/RefreshComponent.svelte
@@ -0,0 +1,40 @@
+<script>
+  import { Select, Label, Spacer } from "@budibase/bbui"
+  import { store, backendUiStore, currentAsset } from "builderStore"
+  import fetchBindableProperties from "builderStore/fetchBindableProperties"
+  import ParameterBuilder from "../../../integration/QueryParameterBuilder.svelte"
+
+  export let parameters
+
+  let components = []
+
+  $: components = componentList($currentAsset)
+
+  // traverse the layout or screen tree
+  // and build an array of all available components
+  function componentList(asset) {
+    const components = []
+
+    function traverse(node) {
+      if (node._component) components.push(node)
+
+      if (node._children) node._children.forEach(traverse)
+
+      if (node.props) traverse(node.props)
+    }
+
+    traverse(asset.props)
+
+    return components
+  }
+</script>
+
+<div class="root">
+  <Label size="m" color="dark">Component</Label>
+  <Select thin secondary bind:value={parameters.componentId}>
+    <option value="" />
+    {#each components as component}
+      <option value={component._id}>{component._instanceName}</option>
+    {/each}
+  </Select>
+</div>
diff --git a/packages/client/src/api/datasources.js b/packages/client/src/api/datasources.js
index 1ea592c94c..f5adb0fc06 100644
--- a/packages/client/src/api/datasources.js
+++ b/packages/client/src/api/datasources.js
@@ -1,9 +1,11 @@
+import { get } from "svelte/store"
 import { fetchTableData } from "./tables"
 import { fetchViewData } from "./views"
 import { fetchRelationshipData } from "./relationships"
 import { executeQuery } from "./queries"
 import { enrichRows } from "./rows"
 import { enrichDataBindings } from "../utils/enrichDataBinding"
+import { bindingStore } from "../store/binding"
 
 /**
  * Fetches all rows for a particular Budibase data source.
@@ -21,12 +23,13 @@ export const fetchDatasource = async (datasource, dataContext) => {
   } else if (type === "view") {
     rows = await fetchViewData(datasource)
   } else if (type === "query") {
-    console.log("Query Datasource", datasource)
-    console.log("Data Context", dataContext)
-    // TODO: You left here
-    const parameters = enrichDataBindings(datasource.queryParams, dataContext)
-    console.log("PARSED PARAMS", parameters)
-    return await executeQuery({ _id: datasource._id, parameters })
+    const bindings = get(bindingStore)
+    const fullContext = {
+      ...bindings,
+      ...dataContext,
+    }
+    const parameters = enrichDataBindings(datasource.queryParams, fullContext)
+    return await executeQuery({ queryId: datasource._id, parameters })
   } else if (type === "link") {
     const row = dataContext[datasource.providerId]
     rows = await fetchRelationshipData({
diff --git a/packages/client/src/api/queries.js b/packages/client/src/api/queries.js
index 29ca197d19..1c2fb852e8 100644
--- a/packages/client/src/api/queries.js
+++ b/packages/client/src/api/queries.js
@@ -10,5 +10,5 @@ export const executeQuery = async ({ queryId, parameters }) => {
       parameters,
     },
   })
-  return response.rows
+  return response
 }
diff --git a/packages/server/scripts/exportAppTemplate.js b/packages/server/scripts/exportAppTemplate.js
index 8268b802d4..e896917d5b 100755
--- a/packages/server/scripts/exportAppTemplate.js
+++ b/packages/server/scripts/exportAppTemplate.js
@@ -3,7 +3,7 @@ const { exportTemplateFromApp } = require("../src/utilities/templates")
 const yargs = require("yargs")
 
 // Script to export a chosen budibase app into a package
-// Usage: ./scripts/exportAppTemplate.js export --name=Funky --appId=someInstanceId --appId=appId
+// Usage: ./scripts/exportAppTemplate.js export --name=Funky --appId=appId
 
 yargs
   .command(
diff --git a/packages/server/src/integrations/postgres.js b/packages/server/src/integrations/postgres.js
index 2d8011d84b..f2ddc31749 100644
--- a/packages/server/src/integrations/postgres.js
+++ b/packages/server/src/integrations/postgres.js
@@ -28,7 +28,7 @@ const SCHEMA = {
       required: true,
     },
   },
-  editor: {
+  query: {
     sql: {
       type: "sql",
     },
@@ -42,53 +42,6 @@ const SCHEMA = {
   },
 }
 
-const DATASOURCE_CONFIG = {
-  host: {
-    type: "string",
-    default: "localhost",
-    required: true,
-  },
-  port: {
-    type: "number",
-    required: true,
-    default: 5432,
-  },
-  database: {
-    type: "string",
-    default: "postgres",
-    required: true,
-  },
-  username: {
-    type: "string",
-    default: "root",
-    required: true,
-  },
-  password: {
-    type: "password",
-    default: "root",
-    required: true,
-  },
-}
-
-const QUERY_CONFIG = {
-  sql: {
-    type: "sql",
-  },
-  gui: {
-    type: "config",
-    fields: [
-      {
-        name: "",
-        type: "",
-      },
-      {
-        name: "",
-        type: "",
-      },
-    ],
-  },
-}
-
 class PostgresIntegration {
   constructor(config, query) {
     this.config = config
@@ -113,9 +66,6 @@ class PostgresIntegration {
 }
 
 module.exports = {
-  schema: {
-    datasource: DATASOURCE_CONFIG,
-    query: QUERY_CONFIG,
-  },
+  schema: SCHEMA,
   integration: PostgresIntegration,
 }
diff --git a/packages/standard-components/src/Input.svelte b/packages/standard-components/src/Input.svelte
index 30aada63d0..18a8880529 100644
--- a/packages/standard-components/src/Input.svelte
+++ b/packages/standard-components/src/Input.svelte
@@ -4,9 +4,11 @@
   const { styleable, setBindableValue } = getContext("sdk")
   const component = getContext("component")
 
-  // Keep bindable value up to date
   let value
-  $: setBindableValue(value, $component.id)
+
+  function onBlur() {
+    setBindableValue(value, $component.id)
+  }
 </script>
 
-<input bind:value on:change={onchange} use:styleable={$component.styles} />
+<input bind:value on:blur={onBlur} use:styleable={$component.styles} />
diff --git a/packages/standard-components/src/grid/Component.svelte b/packages/standard-components/src/grid/Component.svelte
index cb259fefb0..e9ec8fa645 100644
--- a/packages/standard-components/src/grid/Component.svelte
+++ b/packages/standard-components/src/grid/Component.svelte
@@ -57,63 +57,68 @@
     pagination,
   }
 
-  onMount(async () => {
-    if (!isEmpty(datasource)) {
-      data = await API.fetchDatasource(datasource, $dataContext)
-      let schema
+  async function fetchData() {
+    data = await API.fetchDatasource(datasource, $dataContext)
 
-      // Get schema for datasource
-      // Views with "Calculate" applied provide their own schema.
-      // For everything else, use the tableId property to pull to table schema
-      if (datasource.schema) {
-        schema = datasource.schema
-      } else {
-        schema = (await API.fetchTableDefinition(datasource.tableId)).schema
-      }
+    let schema
 
-      columnDefs = Object.keys(schema).map((key, i) => {
-        return {
-          headerCheckboxSelection: i === 0 && canEdit,
-          checkboxSelection: i === 0 && canEdit,
-          valueSetter: setters.get(schema[key].type),
-          headerName: key,
-          field: key,
-          hide: shouldHideField(key),
-          sortable: true,
-          editable: canEdit && schema[key].type !== "link",
-          cellRenderer: getRenderer(schema[key], canEdit, SDK),
-          autoHeight: true,
-        }
-      })
-
-      if (detailUrl) {
-        columnDefs = [
-          ...columnDefs,
-          {
-            headerName: "Detail",
-            field: "_id",
-            minWidth: 100,
-            width: 100,
-            flex: 0,
-            editable: false,
-            sortable: false,
-            cellRenderer: getRenderer(
-              {
-                type: "_id",
-                options: { detailUrl },
-              },
-              false,
-              SDK
-            ),
-            autoHeight: true,
-            pinned: "left",
-            filter: false,
-          },
-        ]
-      }
-
-      dataLoaded = true
+    // Get schema for datasource
+    // Views with "Calculate" applied provide their own schema.
+    // For everything else, use the tableId property to pull to table schema
+    if (datasource.schema) {
+      schema = datasource.schema
+    } else {
+      schema = (await API.fetchTableDefinition(datasource.tableId)).schema
     }
+
+    columnDefs = Object.keys(schema).map((key, i) => {
+      return {
+        headerCheckboxSelection: i === 0 && canEdit,
+        checkboxSelection: i === 0 && canEdit,
+        valueSetter: setters.get(schema[key].type),
+        headerName: key,
+        field: key,
+        hide: shouldHideField(key),
+        sortable: true,
+        editable: canEdit && schema[key].type !== "link",
+        cellRenderer: getRenderer(schema[key], canEdit, SDK),
+        autoHeight: true,
+      }
+    })
+
+    if (detailUrl) {
+      columnDefs = [
+        ...columnDefs,
+        {
+          headerName: "Detail",
+          field: "_id",
+          minWidth: 100,
+          width: 100,
+          flex: 0,
+          editable: false,
+          sortable: false,
+          cellRenderer: getRenderer(
+            {
+              type: "_id",
+              options: { detailUrl },
+            },
+            false,
+            SDK
+          ),
+          autoHeight: true,
+          pinned: "left",
+          filter: false,
+        },
+      ]
+    }
+
+    dataLoaded = true
+  }
+
+  $: datasource && fetchData()
+
+  onMount(() => {
+    if (!isEmpty(datasource)) fetchData()
   })
 
   const shouldHideField = name => {
@@ -150,9 +155,7 @@
         {#if selectedRows.length > 0}
           <DeleteButton text small on:click={modal.show()}>
             <Icon name="addrow" />
-            Delete
-            {selectedRows.length}
-            row(s)
+            Delete {selectedRows.length} row(s)
           </DeleteButton>
         {/if}
       </div>

From 579e3a79b73829ff39f03346c53d4f8faaec5620 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Mon, 11 Jan 2021 17:18:22 +0000
Subject: [PATCH 19/70] direct airtable integration works

---
 .../components/integration/QueryEditor.svelte |  21 +-
 .../integration/QueryParameterBuilder.svelte  |   1 -
 .../components/integration/QueryViewer.svelte |   4 -
 .../src/components/integration/index.svelte   |   6 +-
 .../actions/RefreshComponent.svelte           |  40 ---
 .../[selectedDatasource]/[query]/index.svelte |   1 -
 packages/server/package.json                  |   3 +-
 packages/server/src/api/controllers/query.js  |  10 +-
 packages/server/src/api/routes/query.js       |   2 +-
 packages/server/src/integrations/airtable.js  |  58 ++++
 packages/server/src/integrations/couchdb.js   |  34 ++-
 packages/server/src/integrations/dynamodb.js  |  87 +++---
 .../server/src/integrations/elasticsearch.js  |  28 +-
 packages/server/src/integrations/index.js     |   3 +
 .../src/integrations/microsoftSqlServer.js    |  43 +--
 packages/server/src/integrations/mongodb.js   |  35 +--
 packages/server/src/integrations/postgres.js  |  17 ++
 packages/server/src/integrations/s3.js        |  40 +--
 packages/server/yarn.lock                     | 261 +++++++++++++++++-
 19 files changed, 513 insertions(+), 181 deletions(-)
 delete mode 100644 packages/builder/src/components/userInterface/EventsEditor/actions/RefreshComponent.svelte
 create mode 100644 packages/server/src/integrations/airtable.js

diff --git a/packages/builder/src/components/integration/QueryEditor.svelte b/packages/builder/src/components/integration/QueryEditor.svelte
index a4256c42e8..4bbf335f86 100644
--- a/packages/builder/src/components/integration/QueryEditor.svelte
+++ b/packages/builder/src/components/integration/QueryEditor.svelte
@@ -10,13 +10,17 @@
   let editor
   let codemirror
 
-  // $: codemirror && codemirror.setValue(value)
+  $: {
+    if (codemirror) {
+      const { left, top } = codemirror.getScrollInfo()
+      codemirror.setValue(value)
+      codemirror.scrollTo(left, top)
+    }
+  }
 
-  console.log("Running init")
+  onMount(() => {
+    if (codemirror) codemirror.toTextArea()
 
-  $: console.log("Running reactive")
-
-  onMount(async () => {
     codemirror = cm.fromTextArea(editor, {
       lineNumbers: true,
       mode,
@@ -31,9 +35,14 @@
     })
     codemirror.on("change", instance => {
       const code = instance.getValue()
-      value = code
       dispatch("change", code)
     })
+
+    codemirror.setValue(value || "")
+
+    return () => {
+      if (codemirror) codemirror.toTextArea()
+    }
   })
 </script>
 
diff --git a/packages/builder/src/components/integration/QueryParameterBuilder.svelte b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
index 2466ccbada..440dd5ea5e 100644
--- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@@ -1,6 +1,5 @@
 <script>
   import { Button, TextArea, Label, Input, Heading } from "@budibase/bbui"
-  import Editor from "./QueryEditor.svelte"
   import BindableInput from "components/userInterface/BindableInput.svelte"
 
   export let parameters = []
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index afba48c9f6..f8c5ff1853 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -85,11 +85,7 @@
 
   async function previewQuery() {
     try {
-      // parse all the parameters in the UI
-      // send them
-
       const response = await api.post(`/api/queries/preview`, {
-        // TODO: revisit
         parameters: query.parameters.reduce(
           (acc, next) => ({
             ...acc,
diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte
index c8db464f4e..9f81442074 100644
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@@ -8,10 +8,14 @@
   }
 
   export let query
+
+  function updateQuery({ detail }) {
+    query.queryString = detail
+  }
 </script>
 
 {#if query.queryType === QueryTypes.SQL}
   <ParameterBuilder bind:parameters={query.parameters} />
   <Spacer large />
-  <Editor label="Query" bind:value={query.queryString} />
+  <Editor label="Query" on:change={updateQuery} value={query.queryString} />
 {/if}
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/RefreshComponent.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/RefreshComponent.svelte
deleted file mode 100644
index 7b144bdf88..0000000000
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/RefreshComponent.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-  import { Select, Label, Spacer } from "@budibase/bbui"
-  import { store, backendUiStore, currentAsset } from "builderStore"
-  import fetchBindableProperties from "builderStore/fetchBindableProperties"
-  import ParameterBuilder from "../../../integration/QueryParameterBuilder.svelte"
-
-  export let parameters
-
-  let components = []
-
-  $: components = componentList($currentAsset)
-
-  // traverse the layout or screen tree
-  // and build an array of all available components
-  function componentList(asset) {
-    const components = []
-
-    function traverse(node) {
-      if (node._component) components.push(node)
-
-      if (node._children) node._children.forEach(traverse)
-
-      if (node.props) traverse(node.props)
-    }
-
-    traverse(asset.props)
-
-    return components
-  }
-</script>
-
-<div class="root">
-  <Label size="m" color="dark">Component</Label>
-  <Select thin secondary bind:value={parameters.componentId}>
-    <option value="" />
-    {#each components as component}
-      <option value={component._id}>{component._instanceName}</option>
-    {/each}
-  </Select>
-</div>
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 557c0e954b..137920b874 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
@@ -18,7 +18,6 @@
         // TODO: set dynamically
       }
     }
-    console.log("The query changes", query)
   }
 </script>
 
diff --git a/packages/server/package.json b/packages/server/package.json
index 73c76082ce..c4e2377ed8 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -49,11 +49,12 @@
   "author": "Budibase",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@elastic/elasticsearch": "^7.10.0",
     "@budibase/client": "^0.4.3",
+    "@elastic/elasticsearch": "^7.10.0",
     "@koa/router": "^8.0.0",
     "@sendgrid/mail": "^7.1.1",
     "@sentry/node": "^5.19.2",
+    "airtable": "^0.10.1",
     "aws-sdk": "^2.767.0",
     "bcryptjs": "^2.4.3",
     "chmodr": "^1.2.0",
diff --git a/packages/server/src/api/controllers/query.js b/packages/server/src/api/controllers/query.js
index 89c4a5a08b..30c0943126 100644
--- a/packages/server/src/api/controllers/query.js
+++ b/packages/server/src/api/controllers/query.js
@@ -1,7 +1,6 @@
 const handlebars = require("handlebars")
 const Joi = require("joi")
 const CouchDB = require("../../db")
-const bcrypt = require("../../utilities/bcrypt")
 const { generateQueryID, getQueryParams } = require("../../db/utils")
 const { integrations } = require("../../integrations")
 const joiValidator = require("../../middleware/joi-validator")
@@ -53,10 +52,11 @@ exports.save = async function(ctx) {
 exports.preview = async function(ctx) {
   const { query, datasourceId, parameters } = ctx.request.body
 
-  const queryTemplate = handlebars.compile(query)
-  const parsedQuery = queryTemplate(parameters)
-
-  console.log(parsedQuery)
+  let parsedQuery = ""
+  if (query) {
+    const queryTemplate = handlebars.compile(query)
+    parsedQuery = queryTemplate(parameters)
+  }
 
   const db = new CouchDB(ctx.user.appId)
 
diff --git a/packages/server/src/api/routes/query.js b/packages/server/src/api/routes/query.js
index c04bc14fb9..ed25b47263 100644
--- a/packages/server/src/api/routes/query.js
+++ b/packages/server/src/api/routes/query.js
@@ -9,8 +9,8 @@ const router = Router()
 router
   .get("/api/queries", authorized(BUILDER), queryController.fetch)
   .post("/api/queries", authorized(BUILDER), queryController.save)
-  .post("/api/queries/:queryId", authorized(BUILDER), queryController.execute)
   .post("/api/queries/preview", authorized(BUILDER), queryController.preview)
+  .post("/api/queries/:queryId", authorized(BUILDER), queryController.execute)
   .delete("/api/queries/:queryId", authorized(BUILDER), queryController.destroy)
 
 module.exports = router
diff --git a/packages/server/src/integrations/airtable.js b/packages/server/src/integrations/airtable.js
new file mode 100644
index 0000000000..561df03cc2
--- /dev/null
+++ b/packages/server/src/integrations/airtable.js
@@ -0,0 +1,58 @@
+const Airtable = require("airtable")
+
+const SCHEMA = {
+  datasource: {
+    apiKey: {
+      type: "string",
+      default: "enter api key",
+      required: true,
+    },
+    base: {
+      type: "string",
+      default: "mybase",
+      required: true,
+    },
+    table: {
+      type: "string",
+      default: "mytable",
+      required: true,
+    },
+  },
+  query: {},
+}
+
+class AirtableIntegration {
+  constructor(config) {
+    this.config = config
+    this.client = new Airtable(config).base(config.base)
+  }
+
+  // async create() {
+
+  // }
+
+  async read() {
+    const response = await this.client.query(this.queryString)
+    return response.rows
+  }
+
+  // async update() {
+
+  // }
+
+  // async delete() {
+
+  // }
+
+  async query() {
+    const records = await this.client(this.config.table)
+      .select({ maxRecords: 10, view: "Grid view" })
+      .firstPage()
+    return records.map(({ fields }) => fields)
+  }
+}
+
+module.exports = {
+  schema: SCHEMA,
+  integration: AirtableIntegration,
+}
diff --git a/packages/server/src/integrations/couchdb.js b/packages/server/src/integrations/couchdb.js
index ef5a1ebe9b..0d7a1dd05d 100644
--- a/packages/server/src/integrations/couchdb.js
+++ b/packages/server/src/integrations/couchdb.js
@@ -1,18 +1,26 @@
 const PouchDB = require("pouchdb")
 
-const COUCHDB_OPTIONS = {
-  url: {
-    type: "string",
-    required: true,
-    default: "localhost",
+const SCHEMA = {
+  datasource: {
+    url: {
+      type: "string",
+      required: true,
+      default: "localhost",
+    },
+    database: {
+      type: "string",
+      required: true,
+    },
+    view: {
+      type: "string",
+      required: true,
+    },
   },
-  database: {
-    type: "string",
-    required: true,
-  },
-  view: {
-    type: "string",
-    required: true,
+  query: {
+    json: {
+      type: "json",
+      required: true,
+    },
   },
 }
 
@@ -36,6 +44,6 @@ class CouchDBIntegration {
 }
 
 module.exports = {
-  schema: COUCHDB_OPTIONS,
+  schema: SCHEMA,
   integration: CouchDBIntegration,
 }
diff --git a/packages/server/src/integrations/dynamodb.js b/packages/server/src/integrations/dynamodb.js
index a5220decf7..3f5f3b8a76 100644
--- a/packages/server/src/integrations/dynamodb.js
+++ b/packages/server/src/integrations/dynamodb.js
@@ -1,38 +1,53 @@
 const AWS = require("aws-sdk")
 
-const DYNAMODB_OPTIONS = {
-  table: {
-    type: "string",
-    required: true,
+const SCHEMA = {
+  datasource: {
+    table: {
+      type: "string",
+      required: true,
+    },
+    region: {
+      type: "string",
+      required: true,
+      default: "us-east-1",
+    },
+    accessKeyId: {
+      type: "string",
+      required: true,
+    },
+    secretKey: {
+      type: "secretKey",
+      required: true,
+      default: 5432,
+    },
+    indexName: {
+      type: "string",
+    },
   },
-  region: {
-    type: "string",
-    required: true,
-    default: "us-east-1",
-  },
-  accessKeyId: {
-    type: "string",
-    required: true,
-  },
-  secretKey: {
-    type: "secretKey",
-    required: true,
-    default: 5432,
-  },
-  indexName: {
-    type: "string",
-  },
-  keyConditionExpression: {
-    type: "string",
-    required: true,
-  },
-  attributeNames: {
-    type: "json",
-    required: true,
-  },
-  attributeValues: {
-    type: "json",
-    required: true,
+  query: {
+    type: "fields",
+    fields: [
+      {
+        name: "Index",
+        key: "Index",
+        type: "string",
+      },
+      {
+        name: "Key Condition Expression",
+        key: "KeyConditionExpression",
+        type: "string",
+      },
+      {
+        name: "Attribute Names",
+        key: "ExpressionAttributeNames",
+        type: "string",
+      },
+      {
+        name: "Attribute Values",
+        key: "ExpressionAttributeValues",
+        type: "string",
+      },
+    ],
   },
 }
 
@@ -50,15 +65,15 @@ class DynamoDBIntegration {
   async query() {
     const response = await this.client.query({
       TableName: this.config.table,
-      KeyConditionExpression: this.config.keyConditionExpression,
-      ExpressionAttributeNames: this.config.attributeNames,
-      ExpressionAttributeValues: this.config.attributeValues,
+      KeyConditionExpression: this.config.KeyConditionExpression,
+      ExpressionAttributeNames: this.config.ExpressionAttributeNames,
+      ExpressionAttributeValues: this.config.ExpressionAttributeValues,
     })
     return response
   }
 }
 
 module.exports = {
-  schema: DYNAMODB_OPTIONS,
+  schema: SCHEMA,
   integration: DynamoDBIntegration,
 }
diff --git a/packages/server/src/integrations/elasticsearch.js b/packages/server/src/integrations/elasticsearch.js
index d7b8f8cbd6..048e5b4bfd 100644
--- a/packages/server/src/integrations/elasticsearch.js
+++ b/packages/server/src/integrations/elasticsearch.js
@@ -1,18 +1,22 @@
 const { Client } = require("@elastic/elasticsearch")
 
-const ELASTICSEARCH_OPTIONS = {
-  url: {
-    type: "string",
-    required: true,
-    default: "localhost",
-  },
-  index: {
-    type: "string",
-    required: true,
+const SCHEMA = {
+  datasource: {
+    url: {
+      type: "string",
+      required: true,
+      default: "localhost",
+    },
+    index: {
+      type: "string",
+      required: true,
+    },
   },
   query: {
-    type: "json",
-    required: true,
+    json: {
+      type: "json",
+      required: true,
+    },
   },
 }
 
@@ -39,6 +43,6 @@ class ElasticSearchIntegration {
 }
 
 module.exports = {
-  schema: ELASTICSEARCH_OPTIONS,
+  schema: SCHEMA,
   integration: ElasticSearchIntegration,
 }
diff --git a/packages/server/src/integrations/index.js b/packages/server/src/integrations/index.js
index eef62ef199..c23b8e8e83 100644
--- a/packages/server/src/integrations/index.js
+++ b/packages/server/src/integrations/index.js
@@ -6,6 +6,7 @@ const couchdb = require("./couchdb")
 // const redis = require("./redis")
 const sqlServer = require("./microsoftSqlServer")
 const s3 = require("./s3")
+const airtable = require("./airtable")
 
 const DEFINITIONS = {
   POSTGRES: postgres.schema,
@@ -15,6 +16,7 @@ const DEFINITIONS = {
   COUCHDB: couchdb.schema,
   SQL_SERVER: sqlServer.schema,
   S3: s3.schema,
+  AIRTABLE: airtable.schema,
 }
 
 const INTEGRATIONS = {
@@ -25,6 +27,7 @@ const INTEGRATIONS = {
   COUCHDB: couchdb.integration,
   S3: s3.integration,
   SQL_SERVER: sqlServer.integration,
+  AIRTABLE: airtable.integration,
 }
 
 module.exports = {
diff --git a/packages/server/src/integrations/microsoftSqlServer.js b/packages/server/src/integrations/microsoftSqlServer.js
index 6694151bdb..99f661d649 100644
--- a/packages/server/src/integrations/microsoftSqlServer.js
+++ b/packages/server/src/integrations/microsoftSqlServer.js
@@ -1,26 +1,29 @@
 const sqlServer = require("mssql")
 
-const SQL_SERVER_OPTIONS = {
-  user: {
-    type: "string",
-    required: true,
-    default: "localhost",
-  },
-  password: {
-    type: "password",
-    required: true,
-  },
-  server: {
-    type: "string",
-    default: "localhost",
-  },
-  database: {
-    type: "string",
-    default: "root",
+const SCHEMA = {
+  datasource: {
+    user: {
+      type: "string",
+      required: true,
+      default: "localhost",
+    },
+    password: {
+      type: "password",
+      required: true,
+    },
+    server: {
+      type: "string",
+      default: "localhost",
+    },
+    database: {
+      type: "string",
+      default: "root",
+    },
   },
   query: {
-    type: "query",
-    required: true,
+    sql: {
+      type: "sql",
+    },
   },
 }
 
@@ -47,6 +50,6 @@ class SqlServerIntegration {
 }
 
 module.exports = {
-  schema: SQL_SERVER_OPTIONS,
+  schema: SCHEMA,
   integration: SqlServerIntegration,
 }
diff --git a/packages/server/src/integrations/mongodb.js b/packages/server/src/integrations/mongodb.js
index 1d1d7e3918..5a15ac906b 100644
--- a/packages/server/src/integrations/mongodb.js
+++ b/packages/server/src/integrations/mongodb.js
@@ -1,22 +1,25 @@
 const { MongoClient } = require("mongodb")
 
-const MONGODB_OPTIONS = {
-  connectionString: {
-    type: "string",
-    required: true,
-    default: "localhost",
-  },
-  db: {
-    type: "string",
-    required: true,
-  },
-  collection: {
-    type: "string",
-    required: true,
+const SCHEMA = {
+  datasource: {
+    connectionString: {
+      type: "string",
+      required: true,
+      default: "localhost",
+    },
+    db: {
+      type: "string",
+      required: true,
+    },
+    collection: {
+      type: "string",
+      required: true,
+    },
   },
   query: {
-    type: "query",
-    required: true,
+    json: {
+      type: "json",
+    },
   },
 }
 
@@ -52,6 +55,6 @@ class MongoIntegration {
 }
 
 module.exports = {
-  schema: MONGODB_OPTIONS,
+  schema: SCHEMA,
   integration: MongoIntegration,
 }
diff --git a/packages/server/src/integrations/postgres.js b/packages/server/src/integrations/postgres.js
index f2ddc31749..1c28f2f906 100644
--- a/packages/server/src/integrations/postgres.js
+++ b/packages/server/src/integrations/postgres.js
@@ -59,6 +59,23 @@ class PostgresIntegration {
     return this.client.connect()
   }
 
+  // async create() {
+
+  // }
+
+  async read() {
+    const response = await this.client.query(this.queryString)
+    return response.rows
+  }
+
+  // async update() {
+
+  // }
+
+  // async delete() {
+
+  // }
+
   async query() {
     const response = await this.client.query(this.queryString)
     return response.rows
diff --git a/packages/server/src/integrations/s3.js b/packages/server/src/integrations/s3.js
index 24e4edfa1d..fd1e079bee 100644
--- a/packages/server/src/integrations/s3.js
+++ b/packages/server/src/integrations/s3.js
@@ -1,24 +1,26 @@
 const AWS = require("aws-sdk")
 
-const S3_OPTIONS = {
-  bucket: {
-    type: "string",
-    required: true,
-  },
-  region: {
-    type: "string",
-    required: true,
-    default: "us-east-1",
-  },
-  accessKeyId: {
-    type: "string",
-    required: true,
-  },
-  secretAccessKey: {
-    type: "secretKey",
-    required: true,
-    default: 5432,
+const SCHEMA = {
+  datasource: {
+    bucket: {
+      type: "string",
+      required: true,
+    },
+    region: {
+      type: "string",
+      required: true,
+      default: "us-east-1",
+    },
+    accessKeyId: {
+      type: "string",
+      required: true,
+    },
+    secretAccessKey: {
+      type: "string",
+      required: true,
+    },
   },
+  query: {},
 }
 
 class S3Integration {
@@ -43,6 +45,6 @@ class S3Integration {
 }
 
 module.exports = {
-  schema: S3_OPTIONS,
+  schema: SCHEMA,
   integration: S3Integration,
 }
diff --git a/packages/server/yarn.lock b/packages/server/yarn.lock
index a91510210c..db188cf296 100644
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
@@ -229,6 +229,16 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@budibase/client@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.4.3.tgz#eaf1ac83ed04722c29ea51907ac7c2190bd09b74"
+  integrity sha512-gfVIU7P1HCMuH9rgmqgv2pD5oFDwwuX0QF3+FXuKR3/Cr6JW+bstVsNZHGgwOrmbxT3oAxfeNX186zrQupJ42w==
+  dependencies:
+    deep-equal "^2.0.1"
+    mustache "^4.0.1"
+    regexparam "^1.3.0"
+    svelte-spa-router "^3.0.5"
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@@ -947,6 +957,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.10.tgz#5958a82e41863cfc71f2307b3748e3491ba03785"
   integrity sha512-J32dgx2hw8vXrSbu4ZlVhn1Nm3GbeCFNw2FWL8S5QKucHGY0cyNwjdQdO+KMBZ4wpmC7KhLCiNsdk1RFRIYUQQ==
 
+"@types/node@>=8.0.0 <15":
+  version "14.14.20"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.20.tgz#f7974863edd21d1f8a494a73e8e2b3658615c340"
+  integrity sha512-Y93R97Ouif9JEOWPIUyU+eyIdyRqQR0I8Ez1dzku4hDx34NWh4HbtIc3WNzwB1Y9ULvNGeu5B8h8bVL5cAk4/A==
+
 "@types/node@^12.0.12":
   version "12.19.7"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.19.7.tgz#cf8b6ac088dd9182ac9a1d765f787a8d12490c04"
@@ -1021,13 +1036,18 @@ abbrev@1:
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
   integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
 
-abort-controller@3.0.0:
+abort-controller@3.0.0, abort-controller@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
   integrity sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==
   dependencies:
     event-target-shim "^5.0.0"
 
+abortcontroller-polyfill@^1.4.0:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.1.tgz#27084bac87d78a7224c8ee78135d05df430c2d2f"
+  integrity sha512-yml9NiDEH4M4p0G4AcPkg8AAa4mF3nfYF28VQxaokpO67j9H7gWgmsVWJ/f1Rn+PzsnDYvzJzWIQzCqDKRvWlA==
+
 abstract-leveldown@^6.2.1:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/abstract-leveldown/-/abstract-leveldown-6.3.0.tgz#d25221d1e6612f820c35963ba4bd739928f6026a"
@@ -1125,6 +1145,17 @@ agent-base@6:
   dependencies:
     debug "4"
 
+airtable@^0.10.1:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/airtable/-/airtable-0.10.1.tgz#0b311002bb44b39f19bf7c4bd2d47d75c733bf87"
+  integrity sha512-obFW+R3ly2mKtCj0D/xto0ggUvYwdM0RJT3VJ9wvgqoxDkzqg2mNtkuTNfYjF6wWQA0GvoHG9guqzgBBqFjItw==
+  dependencies:
+    "@types/node" ">=8.0.0 <15"
+    abort-controller "^3.0.0"
+    abortcontroller-polyfill "^1.4.0"
+    lodash "^4.17.19"
+    node-fetch "^2.6.1"
+
 ajv-keywords@^3.4.1:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
@@ -1306,6 +1337,11 @@ array-equal@^1.0.0:
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
   integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
 
+array-filter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
+  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
+
 array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
@@ -1383,6 +1419,13 @@ atomic-sleep@^1.0.0:
   resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
   integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
 
+available-typed-arrays@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
+  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
+  dependencies:
+    array-filter "^1.0.0"
+
 aws-sdk@^2.767.0:
   version "2.799.0"
   resolved "https://registry.yarnpkg.com/aws-sdk/-/aws-sdk-2.799.0.tgz#8b1a64c1a9f8ccf5794eb07bdd8051e4cb6adcfd"
@@ -2286,6 +2329,27 @@ decompress@^4.2.1:
     pify "^2.3.0"
     strip-dirs "^2.0.0"
 
+deep-equal@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.5.tgz#55cd2fe326d83f9cbf7261ef0e060b3f724c5cb9"
+  integrity sha512-nPiRgmbAtm1a3JsnLCf6/SLfXcjyN5v8L1TXzdCmHrXJ4hx+gW/w1YCcn7z8gJtSiDArZCgYtbao3QqLm/N1Sw==
+  dependencies:
+    call-bind "^1.0.0"
+    es-get-iterator "^1.1.1"
+    get-intrinsic "^1.0.1"
+    is-arguments "^1.0.4"
+    is-date-object "^1.0.2"
+    is-regex "^1.1.1"
+    isarray "^2.0.5"
+    object-is "^1.1.4"
+    object-keys "^1.1.1"
+    object.assign "^4.1.2"
+    regexp.prototype.flags "^1.3.0"
+    side-channel "^1.0.3"
+    which-boxed-primitive "^1.0.1"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.2"
+
 deep-equal@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -2689,6 +2753,38 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.2:
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
+es-abstract@^1.18.0-next.1:
+  version "1.18.0-next.1"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.1.tgz#6e3a0a4bda717e5023ab3b8e90bec36108d22c68"
+  integrity sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.2"
+    is-negative-zero "^2.0.0"
+    is-regex "^1.1.1"
+    object-inspect "^1.8.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.1"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
+es-get-iterator@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.1.tgz#b93ddd867af16d5118e00881396533c1c6647ad9"
+  integrity sha512-qorBw8Y7B15DVLaJWy6WdEV/ZkieBcu6QCq/xzWzGOKJqgG1j754vXRfZ3NY7HSShneqU43mPB4OkQBTkvHhFw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.1"
+    has-symbols "^1.0.1"
+    is-arguments "^1.0.4"
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-string "^1.0.5"
+    isarray "^2.0.5"
+
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -3380,6 +3476,15 @@ get-intrinsic@^1.0.0:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
+get-intrinsic@^1.0.1, get-intrinsic@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.0.2.tgz#6820da226e50b24894e08859469dc68361545d49"
+  integrity sha512-aeX0vrFm21ILl3+JpFFRNe9aUvp6VFZb2/CTbgLb8j75kOhvoNYjt9d8KA/tJG4gSo8nzEDedRl0h7vDmBYRVg==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+
 get-stream@3.0.0, get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
@@ -3921,11 +4026,23 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
+is-arguments@^1.0.4:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.0.tgz#62353031dfbee07ceb34656a6bde59efecae8dd9"
+  integrity sha512-1Ij4lOMPl/xB5kBDn7I+b2ttPMKa8szhEIrXDuXQD/oe3HJLTLhqhgGspwgyGd6MOywBUqVvYicF72lkgDnIHg==
+  dependencies:
+    call-bind "^1.0.0"
+
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
+is-bigint@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.1.tgz#6923051dfcbc764278540b9ce0e6b3213aa5ebc2"
+  integrity sha512-J0ELF4yHFxHy0cmSxZuheDOz2luOdVvqjwmEcj8H/L1JHeuEDSDbeRP+Dk9kFVk5RTFzbucJ2Kb9F7ixY2QaCg==
+
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@@ -3933,6 +4050,13 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
+is-boolean-object@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.0.tgz#e2aaad3a3a8fca34c28f6eee135b156ed2587ff0"
+  integrity sha512-a7Uprx8UtD+HWdyYwnD1+ExtTgqQtD2k/1yJgtXP6wnMm8byhkoTZRl+95LLThpzNZJ5aEvi46cdH+ayMFRwmA==
+  dependencies:
+    call-bind "^1.0.0"
+
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -3976,7 +4100,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1:
+is-date-object@^1.0.1, is-date-object@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
   integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
@@ -4061,16 +4185,31 @@ is-installed-globally@^0.3.1:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
+is-map@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
+  integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==
+
 is-natural-number@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/is-natural-number/-/is-natural-number-4.0.1.tgz#ab9d76e1db4ced51e35de0c72ebecf09f734cde8"
   integrity sha1-q5124dtM7VHjXeDHLr7PCfc0zeg=
 
+is-negative-zero@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.1.tgz#3de746c18dda2319241a53675908d8f766f11c24"
+  integrity sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w==
+
 is-npm@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"
   integrity sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==
 
+is-number-object@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
+  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
+
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -4122,12 +4261,22 @@ is-retry-allowed@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz#d778488bd0a4666a3be8a1482b9f2baafedea8b4"
   integrity sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==
 
+is-set@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
+  integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==
+
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
 
-is-symbol@^1.0.2:
+is-string@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
+  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
+
+is-symbol@^1.0.2, is-symbol@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
   integrity sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==
@@ -4143,6 +4292,17 @@ is-type-of@^1.0.0:
     is-class-hotfix "~0.0.6"
     isstream "~0.1.2"
 
+is-typed-array@^1.1.3:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.4.tgz#1f66f34a283a3c94a4335434661ca53fff801120"
+  integrity sha512-ILaRgn4zaSrVNXNGtON6iFNotXW3hAPF3+0fB1usg2jFlWqo5fEDdmJkz0zBfoi7Dgskr8Khi2xZ8cXqZEfXNA==
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    call-bind "^1.0.0"
+    es-abstract "^1.18.0-next.1"
+    foreach "^2.0.5"
+    has-symbols "^1.0.1"
+
 is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
@@ -4153,6 +4313,16 @@ is-utf8@^0.2.0:
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
   integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
 
+is-weakmap@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
+  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
+
+is-weakset@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
+  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
+
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -4185,6 +4355,11 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
 isbinaryfile@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.6.tgz#edcb62b224e2b4710830b67498c8e4e5a4d2610b"
@@ -5621,7 +5796,7 @@ node-fetch@2.6.0:
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
   integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
 
-node-fetch@^2.6.0:
+node-fetch@^2.6.0, node-fetch@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
   integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
@@ -5760,6 +5935,19 @@ object-inspect@^1.8.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
   integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
 
+object-inspect@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.9.0.tgz#c90521d74e1127b67266ded3394ad6116986533a"
+  integrity sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==
+
+object-is@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.4.tgz#63d6c83c00a43f4cbc9434eb9757c8a5b8565068"
+  integrity sha512-1ZvAZ4wlF7IyPVOcE1Omikt7UpaFlOQq0HlSti+ZvDH3UiD2brwGMwDbyV43jao2bKJ+4+WdPJHSd7kgzKYVqg==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+
 object-keys@^1.0.12, object-keys@^1.0.6, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -5772,7 +5960,7 @@ object-visit@^1.0.0:
   dependencies:
     isobject "^3.0.0"
 
-object.assign@^4.1.1:
+object.assign@^4.1.1, object.assign@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
   integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
@@ -6715,6 +6903,19 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
+regexp.prototype.flags@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
+  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+
+regexparam@1.3.0, regexparam@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
+  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
+
 regexpp@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
@@ -7100,6 +7301,15 @@ shellwords@^0.1.1:
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
   integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
 
+side-channel@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -7547,6 +7757,13 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+svelte-spa-router@^3.0.5:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/svelte-spa-router/-/svelte-spa-router-3.1.0.tgz#a929f0def7e12c41f32bc356f91685aeadcd75bf"
+  integrity sha512-jlM/xwjn57mylr+pzHYCOOy+IPQauT46gOucNGTBu6jHcFXu3F+oaojN4PXC1LYizRGxFB6QA0qnYbZnRfX7Sg==
+  dependencies:
+    regexparam "1.3.0"
+
 svelte@^3.30.0:
   version "3.30.0"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.30.0.tgz#cbde341e96bf34f4ac73c8f14f8a014e03bfb7d6"
@@ -8168,11 +8385,45 @@ whatwg-url@^7.0.0:
     tr46 "^1.0.1"
     webidl-conversions "^4.0.2"
 
+which-boxed-primitive@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
+  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
+  dependencies:
+    is-bigint "^1.0.1"
+    is-boolean-object "^1.1.0"
+    is-number-object "^1.0.4"
+    is-string "^1.0.5"
+    is-symbol "^1.0.3"
+
+which-collection@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
+  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
+  dependencies:
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-weakmap "^2.0.1"
+    is-weakset "^2.0.1"
+
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
+which-typed-array@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.4.tgz#8fcb7d3ee5adf2d771066fba7cf37e32fe8711ff"
+  integrity sha512-49E0SpUe90cjpoc7BOJwyPHRqSAd12c10Qm2amdEZrJPCY2NDxaW01zHITrem+rnETY3dwrbH3UUrUwagfCYDA==
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    call-bind "^1.0.0"
+    es-abstract "^1.18.0-next.1"
+    foreach "^2.0.5"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.1"
+    is-typed-array "^1.1.3"
+
 which@^1.2.9, which@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"

From 15de3c8f837f511af7900da375845b081fcf7970 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Mon, 11 Jan 2021 20:17:56 +0000
Subject: [PATCH 20/70] styling, async data fetching

---
 .../DatasourceNavigator.svelte                |  1 -
 .../integration/QueryParameterBuilder.svelte  | 25 ++++++----
 .../components/integration/QueryViewer.svelte | 18 +++----
 .../src/components/integration/index.svelte   |  5 +-
 .../EventsEditor/EventEditor.svelte           |  5 +-
 .../userInterface/TableViewSelect.svelte      | 48 ++++++++++++-------
 packages/client/src/api/datasources.js        | 13 +++--
 packages/standard-components/src/List.svelte  |  8 +++-
 8 files changed, 79 insertions(+), 44 deletions(-)

diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
index 408e1edd3c..3955e34041 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
@@ -13,7 +13,6 @@
     $backendUiStore.selectedView && $backendUiStore.selectedView.name
 
   function selectDatasource(datasource) {
-    // You can't actually select a datasource, just edit it
     backendUiStore.actions.datasources.select(datasource._id)
     $goto(`./datasource/${datasource._id}`)
   }
diff --git a/packages/builder/src/components/integration/QueryParameterBuilder.svelte b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
index 440dd5ea5e..91f0eb023c 100644
--- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@@ -2,6 +2,7 @@
   import { Button, TextArea, Label, Input, Heading } from "@budibase/bbui"
   import BindableInput from "components/userInterface/BindableInput.svelte"
 
+  export let bindable = true
   export let parameters = []
   export let bindings = []
   export let customParams = {}
@@ -18,19 +19,23 @@
 
 <section>
   <Heading extraSmall black>Parameters</Heading>
-  <div class="parameters">
+  <div class="parameters" class:bindable>
     <Label extraSmall grey>Parameter Name</Label>
     <Label extraSmall grey>Default</Label>
-    <Label extraSmall grey>Value</Label>
+    {#if bindable}
+      <Label extraSmall grey>Value</Label>
+    {/if}
     <div />
     {#each parameters as parameter, idx}
       <Input thin bind:value={parameter.name} />
       <Input thin bind:value={parameter.default} />
-      <BindableInput
-        type="string"
-        thin
-        bind:value={customParams[parameter.name]}
-        {bindings} />
+      {#if bindable}
+        <BindableInput
+          type="string"
+          thin
+          bind:value={customParams[parameter.name]}
+          {bindings} />
+      {/if}
       <i
         class="ri-close-circle-line delete"
         on:click={() => deleteQueryParameter(idx)} />
@@ -40,9 +45,13 @@
 </section>
 
 <style>
+  .parameters.bindable {
+    grid-template-columns: 1fr 1fr 1fr 5%;
+  }
+
   .parameters {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr 5%;
+    grid-template-columns: 1fr 1fr 5%;
     grid-gap: 10px;
     align-items: center;
     margin-bottom: var(--spacing-xl);
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index f8c5ff1853..246bfaf4cc 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -117,7 +117,7 @@
   async function saveQuery() {
     try {
       await backendUiStore.actions.queries.save(query.datasourceId, query)
-      notifier.success(`Query created successfully.`)
+      notifier.success(`Query saved successfully.`)
     } catch (err) {
       console.error(err)
       notifier.danger(`Error creating query. ${err.message}`)
@@ -146,12 +146,12 @@
 
     <Spacer medium />
 
-    <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>
+    <div class="viewer-controls">
+      <Button wide thin blue disabled={!data} on:click={saveQuery}>Save</Button>
+      <Button wide thin primary on:click={previewQuery}>Run</Button>
+    </div>
 
+    <section class="viewer">
       {#if data}
         <Switcher headings={PREVIEW_HEADINGS} bind:value={tab}>
           {#if tab === 'JSON'}
@@ -208,14 +208,14 @@
   }
 
   .viewer {
-    position: relative;
   }
 
   .viewer-controls {
-    position: absolute;
-    right: 0;
     display: grid;
     grid-gap: var(--spacing-m);
     grid-auto-flow: column;
+    direction: rtl;
+    grid-template-columns: 10% 10% 1fr;
+    margin-bottom: var(--spacing-m);
   }
 </style>
diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte
index 9f81442074..9b9b7e5d11 100644
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@@ -15,7 +15,8 @@
 </script>
 
 {#if query.queryType === QueryTypes.SQL}
-  <ParameterBuilder bind:parameters={query.parameters} />
+  <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
   <Spacer large />
-  <Editor label="Query" on:change={updateQuery} value={query.queryString} />
+  <TextArea bind:value={query.queryString} />
+  <!-- <Editor label="Query" on:change={updateQuery} value={query.queryString} /> -->
 {/if}
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditor.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditor.svelte
index 5a94dadc5d..35a053c4aa 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditor.svelte
@@ -132,6 +132,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    margin-top: var(--spacing-m);
   }
 
   .action-header > span {
@@ -146,6 +147,7 @@
 
   .actions-list {
     border: var(--border-light);
+    padding: var(--spacing-s);
   }
 
   .available-action {
@@ -159,14 +161,13 @@
   }
 
   .actions-container {
+    height: 40vh;
     display: grid;
     grid-gap: var(--spacing-m);
     grid-template-columns: 15% 1fr;
     grid-auto-flow: column;
     min-height: 0;
     padding-top: 0;
-    border: var(--border-light);
-    border-width: 0 0 1px 0;
     overflow-y: auto;
   }
 
diff --git a/packages/builder/src/components/userInterface/TableViewSelect.svelte b/packages/builder/src/components/userInterface/TableViewSelect.svelte
index a395497cc4..715a2f200e 100644
--- a/packages/builder/src/components/userInterface/TableViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableViewSelect.svelte
@@ -89,6 +89,23 @@
   <span>{value.label ? value.label : 'Table / View / Query'}</span>
   <Icon name="arrowdown" />
 </div>
+{#if value.type === "query"}
+  <i class="ri-settings-5-line" on:click={openBindingDrawer}/>
+  {#if bindingDrawerOpen}
+    <BottomDrawer title={'Query'} onClose={closeDatabindingDrawer}>
+      <div slot="buttons">
+        <Button blue thin on:click={() => handleSelected(value)}>Save</Button>
+      </div>
+      <div class="drawer-contents" slot="body">
+        <pre>{value.queryString}</pre>
+        <ParameterBuilder
+          bind:customParams={value.queryParams}
+          parameters={value.parameters || []}
+          bindings={queryBindableProperties} />
+      </div>
+    </BottomDrawer>
+  {/if}
+{/if}
 <DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
   <div class="dropdown">
     <div class="title">
@@ -146,24 +163,6 @@
   </div>
 </DropdownMenu>
 
-{#if value.type === "query"}
-  <Button blue on:click={openBindingDrawer}/>
-  {#if bindingDrawerOpen}
-    <BottomDrawer title={'Query'} onClose={closeDatabindingDrawer}>
-      <div slot="buttons">
-        <Button blue thin on:click={() => handleSelected(value)}>Save</Button>
-      </div>
-      <div class="drawer-contents" slot="body">
-        <pre>{value.queryString}</pre>
-        <ParameterBuilder
-          bind:customParams={value.queryParams}
-          parameters={value.parameters || []}
-          bindings={queryBindableProperties} />
-      </div>
-    </BottomDrawer>
-  {/if}
-{/if}
-
 
 <style>
   .dropdownbutton {
@@ -230,4 +229,17 @@
   .drawer-contents {
     padding: var(--spacing-xl);
   }
+
+  i {
+    margin-left: 5px;
+    display: flex;
+    align-items: center;
+    transition: all 0.2s;
+  }
+
+  i:hover {
+    transform: scale(1.1);
+    font-weight: 500;
+    cursor: pointer;
+  }
 </style>
diff --git a/packages/client/src/api/datasources.js b/packages/client/src/api/datasources.js
index f5adb0fc06..15e3a6fc10 100644
--- a/packages/client/src/api/datasources.js
+++ b/packages/client/src/api/datasources.js
@@ -24,11 +24,18 @@ export const fetchDatasource = async (datasource, dataContext) => {
     rows = await fetchViewData(datasource)
   } else if (type === "query") {
     const bindings = get(bindingStore)
-    const fullContext = {
+
+    // TODO: refactor. Set these defaults up somewhere else
+    let queryParams = datasource.queryParams || {}
+    for (let param of datasource.parameters) {
+      if (!queryParams[param.name]) {
+        queryParams[param.name] = param.default
+      }
+    }
+    const parameters = enrichDataBindings(queryParams, {
       ...bindings,
       ...dataContext,
-    }
-    const parameters = enrichDataBindings(datasource.queryParams, fullContext)
+    })
     return await executeQuery({ queryId: datasource._id, parameters })
   } else if (type === "link") {
     const row = dataContext[datasource.providerId]
diff --git a/packages/standard-components/src/List.svelte b/packages/standard-components/src/List.svelte
index 038269d4bd..1a5638404a 100644
--- a/packages/standard-components/src/List.svelte
+++ b/packages/standard-components/src/List.svelte
@@ -10,9 +10,15 @@
 
   let rows = []
 
+  $: datasource && fetchData()
+
+  async function fetchData() {
+    rows = await API.fetchDatasource(datasource, $dataContext)
+  }
+
   onMount(async () => {
     if (!isEmpty(datasource)) {
-      rows = await API.fetchDatasource(datasource, $dataContext)
+      fetchData()
     }
   })
 </script>

From f7383f37dafaa4371ad44239d68f3536043e42c3 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Mon, 11 Jan 2021 21:01:21 +0000
Subject: [PATCH 21/70] type safe schema validation

---
 .../src/components/integration/Query.js       |  9 ++-
 .../components/integration/QueryViewer.svelte |  2 +-
 .../src/components/integration/index.svelte   |  6 +-
 packages/server/src/api/controllers/query.js  | 20 -------
 packages/server/src/api/routes/query.js       | 60 ++++++++++++++++++-
 packages/server/src/integrations/postgres.js  | 38 ++++++++++--
 .../src/utilities/security/permissions.js     |  3 +
 7 files changed, 106 insertions(+), 32 deletions(-)

diff --git a/packages/builder/src/components/integration/Query.js b/packages/builder/src/components/integration/Query.js
index 4057da508b..25e9bb2745 100644
--- a/packages/builder/src/components/integration/Query.js
+++ b/packages/builder/src/components/integration/Query.js
@@ -1,9 +1,14 @@
+const handlebars = require("handlebars")
+
 class Query {
-  constructor(source, schema, type) {
+  constructor(source, schema, type, queryString) {
     this.source = source
     this.schema = schema
     this.type = type
+    this.queryString = queryString
   }
 
-  build(parameters) {}
+  build(parameters) {
+    this.queryStr
+  }
 }
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 246bfaf4cc..a77e0cc211 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -136,7 +136,7 @@
     <Select secondary bind:value={query.queryType}>
       <option value={''}>Select an option</option>
       {#each Object.keys(config) as queryType}
-        <option value={queryType}>{queryType}</option>
+        <option value={config[queryType].type}>{queryType}</option>
       {/each}
     </Select>
 
diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte
index 9b9b7e5d11..3876df5a09 100644
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@@ -5,6 +5,8 @@
 
   const QueryTypes = {
     SQL: "sql",
+    JSON: "json",
+    FIELDS: "fields",
   }
 
   export let query
@@ -19,4 +21,6 @@
   <Spacer large />
   <TextArea bind:value={query.queryString} />
   <!-- <Editor label="Query" on:change={updateQuery} value={query.queryString} /> -->
-{/if}
+{:else if query.queryType === QueryTypes.JSON}
+
+{:else if query.queryType === QueryTypes.FIELDS}{/if}
diff --git a/packages/server/src/api/controllers/query.js b/packages/server/src/api/controllers/query.js
index 30c0943126..f1e3201681 100644
--- a/packages/server/src/api/controllers/query.js
+++ b/packages/server/src/api/controllers/query.js
@@ -1,20 +1,7 @@
 const handlebars = require("handlebars")
-const Joi = require("joi")
 const CouchDB = require("../../db")
 const { generateQueryID, getQueryParams } = require("../../db/utils")
 const { integrations } = require("../../integrations")
-const joiValidator = require("../../middleware/joi-validator")
-
-function generateQueryValidation() {
-  // prettier-ignore
-  return joiValidator.body(Joi.object({
-    name: Joi.string().required(),
-    queryString: Joi.string().required(),
-    datasourceId: Joi.string().required(),
-    queryType: Joi.string().required(),
-    schema: Joi.object({}).required().unknown(true)
-  }))
-}
 
 exports.fetch = async function(ctx) {
   const db = new CouchDB(ctx.user.appId)
@@ -31,13 +18,6 @@ exports.save = async function(ctx) {
   const db = new CouchDB(ctx.user.appId)
   const query = ctx.request.body
 
-  //
-  // {
-  //   type: "",
-  //   query: "",
-  //   otherStuff: ""
-  // }
-
   if (!query._id) {
     query._id = generateQueryID(query.datasourceId)
   }
diff --git a/packages/server/src/api/routes/query.js b/packages/server/src/api/routes/query.js
index ed25b47263..35f1f31f12 100644
--- a/packages/server/src/api/routes/query.js
+++ b/packages/server/src/api/routes/query.js
@@ -2,15 +2,69 @@ const Router = require("@koa/router")
 const queryController = require("../controllers/query")
 const authorized = require("../../middleware/authorized")
 const { BUILDER } = require("../../utilities/security/permissions")
+const Joi = require("joi")
+const {
+  PermissionLevels,
+  PermissionTypes,
+} = require("../../utilities/security/permissions")
+const joiValidator = require("../../middleware/joi-validator")
 
 const router = Router()
 
+const QueryVerb = {
+  Create: "CREATE",
+  Read: "READ",
+  Update: "UPDATE",
+  Delete: "DELETE",
+}
+
+function generateQueryValidation() {
+  // prettier-ignore
+  return joiValidator.body(Joi.object({
+    _id: Joi.string(),
+    _rev: Joi.string(),
+    name: Joi.string().required(),
+    queryString: Joi.string().required(),
+    datasourceId: Joi.string().required(),
+    parameters: Joi.array().items(Joi.object({
+      name: Joi.string(),
+      default: Joi.string()
+    })),
+    // queryVerb: Joi.string().allow(...Object.values(QueryVerb)).required(),
+    queryType: Joi.string().required(),
+    schema: Joi.object({}).required().unknown(true)
+  }))
+}
+
+function generateQueryPreviewValidation() {
+  // prettier-ignore
+  return joiValidator.body(Joi.object({
+    query: Joi.string().required(),
+    datasourceId: Joi.string().required(),
+    parameters: Joi.object({}).required().unknown(true)
+  }))
+}
+
 // TODO: sort out auth so apps have the right permissions
 router
   .get("/api/queries", authorized(BUILDER), queryController.fetch)
-  .post("/api/queries", authorized(BUILDER), queryController.save)
-  .post("/api/queries/preview", authorized(BUILDER), queryController.preview)
-  .post("/api/queries/:queryId", authorized(BUILDER), queryController.execute)
+  .post(
+    "/api/queries",
+    authorized(BUILDER),
+    generateQueryValidation(),
+    queryController.save
+  )
+  .post(
+    "/api/queries/preview",
+    authorized(BUILDER),
+    generateQueryPreviewValidation(),
+    queryController.preview
+  )
+  .post(
+    "/api/queries/:queryId",
+    authorized(PermissionTypes.QUERY, PermissionLevels.WRITE),
+    queryController.execute
+  )
   .delete("/api/queries/:queryId", authorized(BUILDER), queryController.destroy)
 
 module.exports = router
diff --git a/packages/server/src/integrations/postgres.js b/packages/server/src/integrations/postgres.js
index 1c28f2f906..2f7eca7fd0 100644
--- a/packages/server/src/integrations/postgres.js
+++ b/packages/server/src/integrations/postgres.js
@@ -29,14 +29,42 @@ const SCHEMA = {
     },
   },
   query: {
-    sql: {
+    SQL: {
       type: "sql",
     },
-    gui: {
-      type: "config",
+    "Simple Query": {
+      type: "fields",
       fields: {
-        something: "",
-        other: "",
+        table: {
+          type: "string",
+        },
+        column: {
+          type: "string",
+        },
+        condition: {
+          type: "options",
+          options: [
+            {
+              name: "Equals",
+              value: "=",
+            },
+            {
+              name: "Not Equals",
+              value: "!=",
+            },
+            {
+              name: "Greater Than",
+              value: ">",
+            },
+            {
+              name: "Less Than",
+              value: "<",
+            },
+          ],
+        },
+        value: {
+          type: "string",
+        },
       },
     },
   },
diff --git a/packages/server/src/utilities/security/permissions.js b/packages/server/src/utilities/security/permissions.js
index 008145cc99..c00f3ce6c7 100644
--- a/packages/server/src/utilities/security/permissions.js
+++ b/packages/server/src/utilities/security/permissions.js
@@ -58,6 +58,7 @@ exports.BUILTIN_PERMISSIONS = {
     _id: exports.BUILTIN_PERMISSION_IDS.READ_ONLY,
     name: "Read only",
     permissions: [
+      new Permission(PermissionTypes.QUERY, PermissionLevels.READ),
       new Permission(PermissionTypes.TABLE, PermissionLevels.READ),
       new Permission(PermissionTypes.VIEW, PermissionLevels.READ),
     ],
@@ -66,6 +67,7 @@ exports.BUILTIN_PERMISSIONS = {
     _id: exports.BUILTIN_PERMISSION_IDS.WRITE,
     name: "Read/Write",
     permissions: [
+      new Permission(PermissionTypes.QUERY, PermissionLevels.WRITE),
       new Permission(PermissionTypes.TABLE, PermissionLevels.WRITE),
       new Permission(PermissionTypes.VIEW, PermissionLevels.READ),
     ],
@@ -90,6 +92,7 @@ exports.BUILTIN_PERMISSIONS = {
       new Permission(PermissionTypes.AUTOMATION, PermissionLevels.ADMIN),
       new Permission(PermissionTypes.VIEW, PermissionLevels.ADMIN),
       new Permission(PermissionTypes.WEBHOOK, PermissionLevels.READ),
+      new Permission(PermissionTypes.QUERY, PermissionLevels.ADMIN),
     ],
   },
 }

From 23d83739b0e39183716c11486bc28623701b9611 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 12 Jan 2021 10:28:41 +0000
Subject: [PATCH 22/70] readable to writable bindings

---
 .../builder/src/builderStore/store/backend.js    |  2 +-
 .../integration/QueryParameterBuilder.svelte     | 16 +++++++++++++++-
 .../components/integration/QueryViewer.svelte    |  1 +
 .../src/components/integration/index.svelte      | 15 +++++++++++----
 .../userInterface/BindableInput.svelte           |  5 +++++
 .../userInterface/DataBindingDrawer/index.svelte |  2 +-
 .../EventsEditor/actions/ExecuteQuery.svelte     |  2 +-
 .../userInterface/TableViewSelect.svelte         |  4 +---
 packages/server/src/api/routes/query.js          |  3 +--
 9 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index 507b4e3fe9..0ada121790 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -142,7 +142,7 @@ export const getBackendUiStore = () => {
       delete: async queryId => {
         await api.delete(`/api/queries/${queryId}`)
         store.update(state => {
-          state.datasources = state.queries.filter(
+          state.queries = state.queries.filter(
             existing => existing._id !== queryId
           )
           if (state.selectedQueryId === queryId) {
diff --git a/packages/builder/src/components/integration/QueryParameterBuilder.svelte b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
index 91f0eb023c..ef9a1f25a3 100644
--- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@@ -1,6 +1,10 @@
 <script>
   import { Button, TextArea, Label, Input, Heading } from "@budibase/bbui"
   import BindableInput from "components/userInterface/BindableInput.svelte"
+  import {
+    readableToRuntimeBinding,
+    runtimeToReadableBinding,
+  } from "builderStore/replaceBindings"
 
   export let bindable = true
   export let parameters = []
@@ -15,6 +19,12 @@
     parameters.splice(idx, 1)
     parameters = parameters
   }
+
+  function onBindingChange(param, valueToParse) {
+    const parsedBindingValue = readableToRuntimeBinding(bindings, valueToParse)
+    console.log(parsedBindingValue)
+    customParams[param] = parsedBindingValue
+  }
 </script>
 
 <section>
@@ -33,7 +43,11 @@
         <BindableInput
           type="string"
           thin
-          bind:value={customParams[parameter.name]}
+          on:change={evt => {
+            console.log('changing', evt.detail)
+            onBindingChange(parameter.name, evt.detail)
+          }}
+          value={runtimeToReadableBinding(bindings, customParams[parameter.name])}
           {bindings} />
       {/if}
       <i
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index a77e0cc211..66d0ca1c49 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -126,6 +126,7 @@
 </script>
 
 <section>
+  <Heading>{query.name}</Heading>
   <div class="config">
     <Label extraSmall grey>Query Name</Label>
     <Input thin bind:value={query.name} />
diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte
index 3876df5a09..3c370f9b19 100644
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@@ -16,11 +16,18 @@
   }
 </script>
 
+<ParameterBuilder bind:parameters={query.parameters} bindable={false} />
+<Spacer large />
+
+<Label grey medium>Query</Label>
+
 {#if query.queryType === QueryTypes.SQL}
-  <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
-  <Spacer large />
   <TextArea bind:value={query.queryString} />
   <!-- <Editor label="Query" on:change={updateQuery} value={query.queryString} /> -->
 {:else if query.queryType === QueryTypes.JSON}
-
-{:else if query.queryType === QueryTypes.FIELDS}{/if}
+  <!-- <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
+  <Spacer large />
+  <TextArea bind:value={query.queryString} /> -->
+{:else if query.queryType === QueryTypes.FIELDS}
+  <!-- {#each Object.keys()} -->
+{/if}
diff --git a/packages/builder/src/components/userInterface/BindableInput.svelte b/packages/builder/src/components/userInterface/BindableInput.svelte
index 76624abd06..b1521bee20 100644
--- a/packages/builder/src/components/userInterface/BindableInput.svelte
+++ b/packages/builder/src/components/userInterface/BindableInput.svelte
@@ -1,9 +1,13 @@
 <script>
+  import { createEventDispatcher } from "svelte"
   import GenericBindingPopover from "./GenericBindingPopover.svelte"
   import { Input, Icon } from "@budibase/bbui"
 
+  const dispatch = createEventDispatcher()
+
   export let bindings = []
   export let value
+
   let anchor
   let popover = undefined
   let enrichedValue
@@ -14,6 +18,7 @@
     let { bindings, ...otherProps } = $$props
     inputProps = otherProps
   }
+  $: value && dispatch("change", value)
 </script>
 
 <div class="container" bind:this={anchor}>
diff --git a/packages/builder/src/components/userInterface/DataBindingDrawer/index.svelte b/packages/builder/src/components/userInterface/DataBindingDrawer/index.svelte
index aaf78f20fc..023784b3f2 100644
--- a/packages/builder/src/components/userInterface/DataBindingDrawer/index.svelte
+++ b/packages/builder/src/components/userInterface/DataBindingDrawer/index.svelte
@@ -20,7 +20,7 @@
     ...property,
     category: property.type === "instance" ? "Component" : "Table",
     label: property.readableBinding,
-    path: property.runtimeBinding,
+    path: property.readableBinding,
   }))
 
   function closeDatabindingDrawer() {
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
index 060d8fe412..a8e7d15e93 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
@@ -20,7 +20,7 @@
     ...property,
     category: property.type === "instance" ? "Component" : "Table",
     label: property.readableBinding,
-    path: property.runtimeBinding,
+    path: property.readableBinding,
   }))
 
   $: query =
diff --git a/packages/builder/src/components/userInterface/TableViewSelect.svelte b/packages/builder/src/components/userInterface/TableViewSelect.svelte
index 715a2f200e..42ac6e7c7e 100644
--- a/packages/builder/src/components/userInterface/TableViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableViewSelect.svelte
@@ -63,11 +63,9 @@
     ...property,
     category: property.type === "instance" ? "Component" : "Table",
     label: property.readableBinding,
-    path: property.runtimeBinding,
+    path: property.readableBinding,
   }))
 
-  $: console.log("selected", value)
-
   $: links = bindableProperties
     .filter(x => x.fieldSchema?.type === "link")
     .map(property => {
diff --git a/packages/server/src/api/routes/query.js b/packages/server/src/api/routes/query.js
index 35f1f31f12..22d308bac9 100644
--- a/packages/server/src/api/routes/query.js
+++ b/packages/server/src/api/routes/query.js
@@ -39,13 +39,12 @@ function generateQueryValidation() {
 function generateQueryPreviewValidation() {
   // prettier-ignore
   return joiValidator.body(Joi.object({
-    query: Joi.string().required(),
+    query: Joi.string(),
     datasourceId: Joi.string().required(),
     parameters: Joi.object({}).required().unknown(true)
   }))
 }
 
-// TODO: sort out auth so apps have the right permissions
 router
   .get("/api/queries", authorized(BUILDER), queryController.fetch)
   .post(

From d05f1666fc1b96dd2ff4710cc0a8e46b0aba93d1 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 12 Jan 2021 16:49:11 +0000
Subject: [PATCH 23/70] further syntax highlighting updates

---
 .../DatasourceNavigator.svelte                |   8 +-
 .../TableIntegrationMenu/index.svelte         |  23 +-
 .../DatasourceNavigator/icons/Airtable.svelte |  46 +++
 .../DatasourceNavigator/icons/CouchDB.svelte  |  35 ++
 .../DatasourceNavigator/icons/DynamoDB.svelte |  58 +++
 .../icons/Elasticsearch.svelte                |  47 +++
 .../DatasourceNavigator/icons/MongoDB.svelte  |  77 ++++
 .../DatasourceNavigator/icons/Postgres.svelte | 149 +++++++
 .../DatasourceNavigator/icons/S3.svelte       |  55 +++
 .../icons/SQLServer.svelte                    | 391 ++++++++++++++++++
 .../DatasourceNavigator/icons/index.js        |  19 +
 .../modals/CreateDatasourceModal.svelte       |   2 +-
 .../src/components/common/BottomDrawer.svelte |   2 +-
 .../src/components/common/NavItem.svelte      |   6 +-
 .../src/components/integration/Query.js       |  14 -
 .../integration/QueryParameterBuilder.svelte  |  38 +-
 .../components/integration/QueryViewer.svelte | 160 ++++---
 .../integration/SvelteEditor.svelte           | 188 +++++++++
 .../src/components/integration/index.svelte   |  22 +-
 .../EventsEditor/EventEditor.svelte           |  44 +-
 .../EventsEditor/EventPropertyControl.svelte  |  10 +-
 .../EventsEditor/actions/ExecuteQuery.svelte  |   6 +
 .../server/src/api/controllers/datasource.js  |  23 +-
 packages/server/src/api/controllers/query.js  |  11 +-
 packages/server/src/api/routes/query.js       |  11 +-
 packages/server/src/db/utils.js               |  12 +-
 packages/server/src/integrations/airtable.js  |   9 +-
 packages/server/src/integrations/couchdb.js   |   2 +-
 packages/server/src/integrations/dynamodb.js  |   2 +-
 .../server/src/integrations/elasticsearch.js  |   2 +-
 .../src/integrations/microsoftSqlServer.js    |   2 +-
 packages/server/src/integrations/mongodb.js   |   6 +-
 packages/server/src/integrations/postgres.js  |   8 +-
 33 files changed, 1306 insertions(+), 182 deletions(-)
 create mode 100644 packages/builder/src/components/backend/DatasourceNavigator/icons/Airtable.svelte
 create mode 100644 packages/builder/src/components/backend/DatasourceNavigator/icons/CouchDB.svelte
 create mode 100644 packages/builder/src/components/backend/DatasourceNavigator/icons/DynamoDB.svelte
 create mode 100644 packages/builder/src/components/backend/DatasourceNavigator/icons/Elasticsearch.svelte
 create mode 100644 packages/builder/src/components/backend/DatasourceNavigator/icons/MongoDB.svelte
 create mode 100644 packages/builder/src/components/backend/DatasourceNavigator/icons/Postgres.svelte
 create mode 100644 packages/builder/src/components/backend/DatasourceNavigator/icons/S3.svelte
 create mode 100644 packages/builder/src/components/backend/DatasourceNavigator/icons/SQLServer.svelte
 create mode 100644 packages/builder/src/components/backend/DatasourceNavigator/icons/index.js
 delete mode 100644 packages/builder/src/components/integration/Query.js
 create mode 100644 packages/builder/src/components/integration/SvelteEditor.svelte

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}
       <NavItem
         border={idx > 0}
-        icon={'ri-database-2-line'}
         text={datasource.name}
         selected={$backendUiStore.selectedDatasourceId === datasource._id}
         on:click={() => selectDatasource(datasource)}>
+        <div class="datasource-icon" slot="icon">
+          <svelte:component
+            this={ICONS[datasource.source]}
+            height="15"
+            width="15" />
+        </div>
         <EditDatasourcePopover {datasource} />
       </NavItem>
       {#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,
                 }
               },
               {}
             ) }
         }}>
-        <i class="ri-database-2-line" />
+        <svelte:component
+          this={ICONS[integrationType]}
+          height="100"
+          width="100" />
         <span>{integrationType}</span>
       </div>
     {/each}
   </div>
 
-  {#if selectedIntegration}
-    {#each Object.keys(selectedIntegration) as configKey}
+  {#if selectedIntegrationConfig}
+    {#each Object.keys(selectedIntegrationConfig) as configKey}
       <Input
         thin
-        type={selectedIntegration[configKey].type}
+        type={selectedIntegrationConfig[configKey].type}
         label={configKey}
         bind:value={integration[configKey]} />
       <Spacer medium />
@@ -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 @@
+<script>
+  export let width = "100"
+  export let height = "100"
+</script>
+
+<svg
+  {width}
+  {height}
+  viewBox="0 0 256 215"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0)">
+    <path
+      d="M114.259 2.701L18.86 42.176C13.555 44.371 13.61 51.906 18.949
+      54.023L114.746 92.012C123.163 95.3503 132.537 95.3503 140.954
+      92.012L236.753 54.022C242.09 51.907 242.146 44.372 236.839 42.176L141.442
+      2.7C132.739 -0.901099 122.962 -0.901099 114.259 2.7"
+      fill="#FFBF00" />
+    <path
+      d="M136.35 112.757V207.659C136.35 212.173 140.9 215.264 145.096
+      213.601L251.844 172.166C253.034 171.694 254.056 170.875 254.775
+      169.816C255.495 168.757 255.879 167.506 255.879 166.225V71.322C255.879
+      66.808 251.328 63.718 247.132 65.381L140.384 106.815C139.194 107.287
+      138.172 108.106 137.453 109.166C136.734 110.225 136.349 111.476 136.349
+      112.757"
+      fill="#26B5F8" />
+    <path
+      d="M111.423 117.654L79.743 132.95L76.526 134.505L9.65 166.548C5.411
+      168.593 0 165.504 0 160.795V71.72C0 70.016 0.874 68.545 2.046
+      67.437C2.52616 66.9592 3.07076 66.5509 3.664 66.224C5.262 65.265 7.542
+      65.009 9.48 65.776L110.89 105.956C116.045 108.001 116.45 115.224 111.423
+      117.653"
+      fill="#ED3049" />
+    <path
+      d="M111.423 117.654L79.743 132.95L2.045 67.438C2.52516 66.9602 3.06976
+      66.5519 3.663 66.225C5.261 65.266 7.541 65.01 9.479 65.777L110.889
+      105.957C116.044 108.002 116.449 115.225 111.422 117.654"
+      fill="black"
+      fill-opacity="0.25" />
+  </g>
+  <defs>
+    <clipPath id="clip0">
+      <rect width="256" height="215" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
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 @@
+<script>
+  export let width = "100"
+  export let height = "100"
+</script>
+
+<svg
+  {width}
+  {height}
+  viewBox="0 0 175 115"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M142.187 76.6667C142.187 83.9288 138.367 87.4876 131.249
+    87.6136V87.6184H43.7507V87.6136C36.6331 87.4876 32.8132 83.9288 32.8132
+    76.666C32.8132 69.4052 36.6331 65.845 43.7507
+    65.7204V65.7136H131.249V65.7204C138.367 65.845 142.187 69.4052 142.187
+    76.666V76.6667ZM131.249 93.1014V93.0952H43.7507V93.1021C36.6331 93.2267
+    32.8132 96.7869 32.8132 104.05C32.8132 111.312 36.6331 114.869 43.7507
+    114.995V115H131.249V114.993C138.367 114.869 142.187 111.31 142.187
+    104.048C142.187 96.7848 138.367 93.2267 131.249 93.1021V93.1014ZM158.593
+    32.8695V32.8633C151.477 32.9893 147.656 36.5481 147.656
+    43.8109V104.048C147.656 111.31 151.477 114.867 158.593
+    114.993V114.982C169.269 114.606 175 103.929 175 82.1429V54.7619C175 40.2384
+    169.269 33.1214 158.594 32.8688L158.593 32.8695ZM16.4062
+    32.8626V32.8695C5.73193 33.1207 0 40.2377 0 54.7619V82.1429C0 103.929
+    5.73125 114.605 16.4062 114.982V114.993C23.5238 114.869 27.3438 111.31
+    27.3438 104.048V43.8095C27.3438 36.5474 23.5238 32.9886 16.4062
+    32.8626ZM158.594 27.381C158.594 9.22533 149.042 0.328571 131.25
+    0.014375V0H43.75V0.014375C25.9595 0.329256 16.4062 9.22533 16.4062
+    27.3816V27.3905C27.0819 27.5788 32.8132 32.9167 32.8132 43.8102C32.8132
+    54.703 38.5444 60.0403 49.2194 60.2292V60.2381H125.782V60.2299C136.456
+    60.0416 142.187 54.7037 142.187 43.8109C142.187 32.9174 147.918 27.5795
+    158.593 27.3912V27.381H158.594Z"
+    fill="#E42528" />
+</svg>
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 @@
+<script>
+  export let width = "100"
+  export let height = "100"
+</script>
+
+<svg
+  {width}
+  {height}
+  viewBox="0 0 256 289"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0)">
+    <path
+      d="M165.258 288.501H168.766L226.027 259.867L226.98 258.52V29.964L226.027
+      28.61L168.766 0H165.215L165.258 288.501Z"
+      fill="#5294CF" />
+    <path
+      d="M90.741 288.501H87.184L29.972 259.867L28.811 257.87L28.222
+      31.128L29.972 28.61L87.184 0H90.785L90.741 288.501Z"
+      fill="#1F5B98" />
+    <path d="M87.285 0H168.711V288.501H87.285V0Z" fill="#2D72B8" />
+    <path
+      d="M256 137.769L254.065 137.34L226.437 134.764L226.027 134.968L168.715
+      132.676H87.285L29.972 134.968V91.264L29.912 91.296L29.972 91.168L87.285
+      77.888H168.715L226.027 91.168L247.096 102.367V95.167L256 94.193L255.078
+      92.395L226.886 72.236L226.027 72.515L168.715 54.756H87.285L29.972
+      72.515V28.61L0 63.723V94.389L0.232 94.221L8.904 95.167V102.515L0
+      107.28V137.793L0.232 137.769L8.904 137.897V150.704L1.422 150.816L0
+      150.68V181.205L8.904 185.993V193.426L0.373 194.368L0
+      194.088V224.749L29.972 259.867V215.966L87.285 233.725H168.715L226.196
+      215.914L226.96 216.249L254.781 196.387L256 194.408L247.096
+      193.426V186.142L245.929 185.676L226.886 195.941L226.196 197.381L168.715
+      210.584V210.6H87.285V210.584L29.972 197.325V153.461L87.285
+      155.745V155.801H168.715L226.027 153.461L227.332 154.061L254.111
+      151.755L256 150.832L247.096 150.704V137.897L256 137.769"
+      fill="#1A476F" />
+    <path
+      d="M226.027 215.966V259.867L256 224.749V194.288L226.2 215.914L226.027
+      215.966Z"
+      fill="#2D72B8" />
+    <path
+      d="M226.027 197.421L226.2 197.381L256 181.353V150.704L226.027
+      153.461V197.421"
+      fill="#2D72B8" />
+    <path
+      d="M226.2 91.208L226.027 91.168V134.968L256 137.769V107.135L226.2 91.208Z"
+      fill="#2D72B8" />
+    <path
+      d="M226.2 72.687L256 94.193V63.731L226.027 28.61V72.515L226.2
+      72.575V72.687Z"
+      fill="#2D72B8" />
+  </g>
+  <defs>
+    <clipPath id="clip0">
+      <rect width="256" height="289" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
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 @@
+<script>
+  export let width = "100"
+  export let height = "100"
+</script>
+
+<svg
+  {width}
+  {height}
+  viewBox="0 0 128 143"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0)">
+    <path
+      d="M7.172 40.0865H101.775C112.201 40.0865 121.51 35.3065 127.757
+      27.843C114.727 10.918 94.2765 0 71.265 0C43.089 0 18.738 16.3555 7.172
+      40.0865Z"
+      fill="#F0BF1A" />
+    <path
+      d="M93.7575 51.222H2.8775C0.969102 57.732 0.000154178 64.4811 0 71.265C0
+      78.227 1.0165 84.9485 2.8775 91.3085H93.7575C104.67 91.3085 113.801
+      82.4005 113.801 71.265C113.801 60.13 104.893 51.222 93.7575 51.222"
+      fill="#07A5DE" />
+    <path
+      d="M128 114.378C121.793 107.082 112.559 102.443 102.22
+      102.443H7.173C18.7385 126.175 43.0895 142.53 71.265 142.53C94.418 142.53
+      114.983 131.482 128 114.378Z"
+      fill="#3EBEB0" />
+    <path
+      d="M2.87749 51.222C-0.959651 64.3087 -0.959651 78.2218 2.87749
+      91.3085H62.357C63.916 85.2955 64.8065 78.6145 64.8065 71.265C64.8065
+      63.916 63.916 57.235 62.3565 51.222H2.87849H2.87749Z"
+      fill="#231F20" />
+    <path
+      d="M35.41 9.5765C23.3835 16.703 13.362 27.3925 7.1265
+      40.0865H59.6845C54.3395 27.838 45.877 17.594 35.4095 9.5765"
+      fill="#D7A229" />
+    <path
+      d="M37.637 134.068C47.881 125.828 56.121 114.915 61.2435
+      102.443H7.1265C13.8075 115.806 24.4975 126.941 37.637 134.068Z"
+      fill="#019B8F" />
+  </g>
+  <defs>
+    <clipPath id="clip0">
+      <rect width="128" height="143" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
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 @@
+<script>
+  export let width = "100"
+  export let height = "100"
+</script>
+
+<svg
+  {width}
+  {height}
+  viewBox="0 0 179 179"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M153.828 30.7656H101.806L90.0594
+    54.2594H24.6125V148.234H165.575V30.7656H153.828ZM153.828
+    54.2594H107.959L114.112 42.5125H153.828V54.2594Z"
+    fill="#458248" />
+  <path
+    d="M149.773 173.406L146.623 172.36C146.623 172.36 147.026 156.412 141.276
+    155.299C137.483 150.903 141.835 -32.4046 155.635 154.673C153.015 156 151.011
+    158.289 150.041 161.061C149.521 165.155 149.431 169.293 149.773
+    173.406V173.406Z"
+    fill="url(#paint0_linear)" />
+  <path
+    d="M151.473 158.007C159.86 151.69 166.283 143.124 169.994 133.302C173.705
+    123.48 174.553 112.807 172.439 102.522C166.285 75.3142 151.68 66.3698
+    150.108 62.9577C148.75 60.8316 147.591 58.5845 146.646 56.2452L147.809
+    132.052C147.809 132.052 145.398 155.215 151.473 158.007Z"
+    fill="url(#paint1_linear)" />
+  <path
+    d="M145.018 159.014C145.018 159.014 119.337 141.522 120.825 110.583C120.964
+    101.255 123.102 92.0662 127.096 83.636C131.091 75.2058 136.847 67.7308
+    143.978 61.7158C144.809 61.0059 145.469 60.1177 145.91 59.1173C146.351
+    58.1169 146.56 57.03 146.523 55.9375C148.123 59.3777 147.86 107.299 148.027
+    112.904C148.682 134.709 146.819 154.897 145.018 159.014V159.014Z"
+    fill="url(#paint2_linear)" />
+  <defs>
+    <linearGradient
+      id="paint0_linear"
+      x1="128.589"
+      y1="115.729"
+      x2="164.805"
+      y2="128.016"
+      gradientUnits="userSpaceOnUse">
+      <stop offset="0.231" stop-color="#999875" />
+      <stop offset="0.563" stop-color="#9B9977" />
+      <stop offset="0.683" stop-color="#A09F7E" />
+      <stop offset="0.768" stop-color="#A9A889" />
+      <stop offset="0.837" stop-color="#B7B69A" />
+      <stop offset="0.896" stop-color="#C9C7B0" />
+      <stop offset="0.948" stop-color="#DEDDCB" />
+      <stop offset="0.994" stop-color="#F8F6EB" />
+      <stop offset="1" stop-color="#FBF9EF" />
+    </linearGradient>
+    <linearGradient
+      id="paint1_linear"
+      x1="141.872"
+      y1="55.7038"
+      x2="157.883"
+      y2="155.673"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#48A547" />
+      <stop offset="1" stop-color="#3F9143" />
+    </linearGradient>
+    <linearGradient
+      id="paint2_linear"
+      x1="118.614"
+      y1="113.645"
+      x2="161.577"
+      y2="99.2572"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#41A247" />
+      <stop offset="0.352" stop-color="#4BA74B" />
+      <stop offset="0.956" stop-color="#67B554" />
+      <stop offset="1" stop-color="#69B655" />
+    </linearGradient>
+  </defs>
+</svg>
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 @@
+<script>
+  export let width = "100"
+  export let height = "100"
+</script>
+
+<svg
+  {width}
+  {height}
+  viewBox="0 0 170 175"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M169.341 104.792C168.322 101.71 165.652 99.5637 162.199 99.0487C160.57
+    98.8061 158.706 98.9095 156.499 99.3635C152.653 100.156 149.799 100.457
+    147.717 100.516C155.577 87.268 161.969 72.161 165.648 57.9402C171.598
+    34.9456 168.419 24.4702 164.704 19.7319C154.871 7.19025 140.525 0.452754
+    123.218 0.246599C113.986 0.13391 105.881 1.95351 101.653 3.26203C97.7162
+    2.56866 93.4835 2.18154 89.0422 2.10995C80.7169 1.97738 73.361 3.78902
+    67.0757 7.51241C63.596 6.33779 58.0112 4.68192 51.5619 3.62529C36.3933
+    1.1395 24.1679 3.07643 15.2257 9.38239C4.39748 17.0174 -0.622171 30.283
+    0.306188 48.8104C0.601032 54.6928 3.89744 72.5905 9.08775 89.5642C12.0707
+    99.3205 15.2516 107.422 18.542 113.647C23.2084 122.473 28.2015 127.67
+    33.8068 129.537C36.9485 130.582 42.6568 131.314 48.6606 126.322C49.4216
+    127.242 50.4369 128.156 51.7843 129.005C53.4956 130.083 55.5881 130.963
+    57.6779 131.485C65.209 133.364 72.2633 132.894 78.2817 130.26C78.3189
+    131.328 78.3475 132.349 78.3714 133.231C78.4112 134.661 78.4511 136.063
+    78.5035 137.374C78.8601 146.239 79.4644 153.132 81.2548 157.955C81.353
+    158.221 81.4852 158.625 81.6246 159.054C82.5178 161.784 84.0113 166.353
+    87.811 169.932C91.7456 173.64 96.5049 174.777 100.864 174.777C103.05 174.777
+    105.136 174.49 106.965 174.099C113.486 172.704 120.893 170.579 126.25
+    162.963C131.316 155.765 133.778 144.922 134.224 127.838C134.281 127.354
+    134.335 126.893 134.386 126.453L134.492 125.551L135.685 125.655L135.993
+    125.676C142.635 125.978 150.756 124.572 155.744 122.259C159.685 120.434
+    172.315 113.778 169.341 104.792"
+    fill="black" />
+  <path
+    d="M157.984 106.539C138.235 110.606 136.877 103.931 136.877 103.931C157.729
+    73.046 166.446 33.8413 158.924 24.2462C138.402 -1.92761 102.878 10.451
+    102.285 10.7718L102.094 10.8063C98.1923 9.99759 93.8261 9.51633 88.918
+    9.43613C79.9824 9.29029 73.2036 11.7748 68.0598 15.6685C68.0598 15.6685
+    4.68831 -10.3919 7.63609 48.4439C8.26296 60.9604 25.6083 143.151 46.2965
+    118.326C53.8582 109.248 61.1648 101.572 61.1648 101.572C64.7933 103.979
+    69.1376 105.206 73.6917 104.765L74.0457 104.466C73.9354 105.593 73.9859
+    106.695 74.1871 108C68.8573 113.944 70.4239 114.988 59.7696 117.177C48.9886
+    119.395 55.3218 123.343 59.4569 124.376C64.4699 125.627 76.0671 127.399
+    83.903 116.449L83.5909 117.699C85.6787 119.369 87.1449 128.559 86.8992
+    136.89C86.6535 145.222 86.4895 150.942 88.1344 155.409C89.7806 159.877
+    91.4202 169.93 105.427 166.934C117.129 164.43 123.194 157.943 124.038
+    147.121C124.637 139.427 125.992 140.565 126.077 133.686L127.164
+    130.43C128.417 120.001 127.363 116.636 134.573 118.201L136.326
+    118.355C141.632 118.596 148.578 117.503 152.655 115.611C161.432 111.545
+    166.639 104.755 157.983 106.539H157.984"
+    fill="#336791" />
+  <path
+    d="M71.7692 54.0412C69.9895 53.7939 68.3778 54.0226 67.5623 54.6391C67.1041
+    54.9858 66.962 55.3875 66.9235 55.6639C66.8212 56.3964 67.3352 57.2064
+    67.6513 57.624C68.5452 58.8066 69.8507 59.6193 71.143 59.7983C71.3302
+    59.8248 71.5168 59.8367 71.7021 59.8367C73.857 59.8367 75.8167 58.1616
+    75.9893 56.9254C76.2051 55.3769 73.9533 54.3448 71.7692 54.0418"
+    fill="white" />
+  <path
+    d="M130.727 54.0902C130.557 52.8765 128.394 52.5305 126.341 52.8155C124.29
+    53.1006 122.302 54.0246 122.468 55.241C122.601 56.1869 124.312 57.8017
+    126.337 57.8017C126.509 57.8017 126.681 57.7904 126.855 57.7659C128.207
+    57.579 129.199 56.7219 129.671 56.228C130.388 55.475 130.804 54.6358 130.727
+    54.0902"
+    fill="white" />
+  <path
+    d="M164.556 106.077C163.803 103.804 161.379 103.073 157.352 103.903C145.396
+    106.366 141.114 104.66 139.708 103.627C149.002 89.494 156.647 72.4103
+    160.771 56.4713C162.725 48.9212 163.804 41.9092 163.893 36.1939C163.99
+    29.9211 162.92 25.3114 160.712 22.4955C151.813 11.1437 138.751 5.05449
+    122.939 4.88744C112.069 4.76547 102.885 7.54227 101.105 8.32314C97.3555
+    7.39246 93.2682 6.82106 88.8183 6.74814C80.6583 6.61623 73.6046 8.56642
+    67.7649 12.5417C65.2282 11.5991 58.6725 9.35259 50.6553 8.06329C36.795
+    5.83602 25.7809 7.52371 17.921 13.0819C8.54246 19.7147 4.21277 31.571
+    5.05148 48.3206C5.33371 53.9557 8.55043 71.2913 13.6265 87.8931C20.3083
+    109.744 27.5718 122.114 35.2139 124.659C36.1084 124.957 37.1396 125.165
+    38.2772 125.165C41.0649 125.165 44.4829 123.911 48.0389 119.643C52.3763
+    114.449 56.863 109.381 61.4935 104.446C64.4977 106.055 67.7981 106.954
+    71.1735 107.044C71.1802 107.133 71.1888 107.221 71.1968 107.308C70.6157 108
+    70.0468 108.701 69.4901 109.413C67.1513 112.377 66.6645 112.994 59.1361
+    114.541C56.9945 114.982 51.3068 116.152 51.2231 120.132C51.1328 124.481
+    57.9467 126.307 58.723 126.501C61.4284 127.177 64.0348 127.51 66.5204
+    127.51C72.5654 127.51 77.8852 125.527 82.1365 121.689C82.0057 137.191
+    82.6532 152.467 84.5179 157.121C86.0452 160.931 89.7759 170.243 101.56
+    170.242C103.29 170.242 105.193 170.041 107.287 169.593C119.586 166.961
+    124.927 161.535 126.993 149.572C128.098 143.179 129.996 127.912 130.888
+    119.723C132.771 120.309 135.196 120.578 137.817 120.577C143.283 120.577
+    149.591 119.418 153.547 117.585C157.991 115.525 166.01 110.469 164.556
+    106.077V106.077ZM135.267 50.7401C135.226 53.1576 134.893 55.3524 134.54
+    57.6433C134.159 60.1072 133.766 62.6547 133.667 65.747C133.569 68.7565
+    133.946 71.8853 134.31 74.9113C135.046 81.023 135.801 87.3151 132.878
+    93.5236C132.393 92.665 131.96 91.7775 131.583 90.8661C131.22 89.9872 130.431
+    88.5752 129.339 86.6211C125.089 79.0139 115.138 61.1997 120.232
+    53.9305C121.75 51.7669 125.601 49.5423 135.267 50.7401V50.7401ZM123.55
+    9.7828C137.717 10.095 148.924 15.3855 156.858 25.5063C162.944 33.2693
+    156.243 68.5921 136.843 99.0653C136.648 98.8177 136.452 98.5708 136.255
+    98.3248L136.009 98.0186C141.022 89.7545 140.042 81.5779 139.17
+    74.3286C138.811 71.3536 138.472 68.5437 138.559 65.9041C138.648 63.1068
+    139.018 60.7071 139.377 58.3871C139.817 55.5281 140.265 52.5696 140.142
+    49.0822C140.234 48.7163 140.271 48.2841 140.223 47.7711C139.907 44.4268
+    136.082 34.418 128.286 25.3591C124.022 20.4041 117.803 14.8591 109.311
+    11.1192C112.964 10.3635 117.958 9.65884 123.55 9.7828V9.7828ZM44.2757
+    116.52C40.3577 121.222 37.6523 120.32 36.7625 120.025C30.9652 118.095
+    24.2382 105.863 18.3075 86.4673C13.1756 69.6845 10.1767 52.8083 9.93898
+    48.076C9.18992 33.1095 12.8243 22.6791 20.742 17.0738C33.6274 7.95259
+    54.8123 13.4121 63.325 16.1809C63.2028 16.3016 63.0753 16.4142 62.9544
+    16.5369C48.9852 30.6191 49.3166 54.6789 49.3511 56.1498C49.3498 56.7173
+    49.3976 57.5207 49.4627 58.6257C49.703 62.6726 50.1506 70.2042 48.9553
+    78.7335C47.845 86.6595 50.2927 94.4172 55.6696 100.018C56.2215 100.592
+    56.8015 101.138 57.4075 101.654C55.0142 104.213 49.8126 109.871 44.2757
+    116.52V116.52ZM59.2031 96.6378C54.8695 92.1236 52.9012 85.8448 53.8023
+    79.4096C55.064 70.3998 54.5985 62.5526 54.3482 58.3367C54.313 57.7467
+    54.2818 57.2297 54.2638 56.822C56.3045 55.0157 65.7614 49.9579 72.5056
+    51.5004C75.5829 52.2037 77.4582 54.2958 78.2378 57.8939C82.2727 76.5228
+    78.7717 84.2871 75.9587 90.5267C75.379 91.8121 74.8312 93.0271 74.3637
+    94.2839L74.0011 95.2557C73.0834 97.7123 72.2294 99.9966 71.7001
+    102.166C67.0929 102.152 62.6111 100.188 59.2031 96.6372V96.6378ZM59.9104
+    121.761C58.565 121.426 57.355 120.843 56.6452 120.36C57.2382 120.081 58.2934
+    119.702 60.1235 119.326C68.9801 117.506 70.3481 116.221 73.335
+    112.436C74.0197 111.567 74.796 110.583 75.8711 109.385L75.8724
+    109.384C77.4735 107.594 78.2059 107.897 79.5341 108.448C80.6105 108.892
+    81.6591 110.239 82.0841 111.721C82.2853 112.421 82.5111 113.749 81.772
+    114.783C75.5324 123.504 66.4401 123.392 59.9104 121.761V121.761ZM106.261
+    164.816C95.4264 167.134 91.5901 161.615 89.062 155.307C87.4304 151.234
+    86.6282 132.868 87.1973 112.586C87.2047 112.316 87.1661 112.056 87.0918
+    111.81C87.0252 111.326 86.924 110.847 86.7889 110.377C85.9429 107.426 83.881
+    104.958 81.4074 103.934C80.4246 103.528 78.621 102.782 76.4535
+    103.336C76.9157 101.434 77.7172 99.2873 78.5864 96.9626L78.951
+    95.9849C79.3614 94.8825 79.8767 93.7404 80.4213 92.5313C83.365 86.0033
+    87.3966 77.0617 83.0211 56.8618C81.3821 49.2957 75.9089 45.6008 67.6121
+    46.4592C62.6383 46.973 58.0875 48.9762 55.8177 50.1249C55.3296 50.3715
+    54.8834 50.6102 54.4664 50.8422C55.0999 43.2191 57.4932 28.9725 66.4461
+    19.9587C72.0833 14.2844 79.5905 11.4818 88.7373 11.6329C106.76 11.9272
+    118.317 21.1598 124.84 28.8538C130.46 35.4833 133.504 42.1618 134.718
+    45.7639C125.584 44.8365 119.372 46.6362 116.223 51.1305C109.372 60.9067
+    119.971 79.8809 125.065 89.0001C125.999 90.6712 126.805 92.1157 127.059
+    92.7295C128.718 96.7426 130.865 99.4219 132.433 101.377C132.914 101.977
+    133.38 102.558 133.735 103.066C130.968 103.862 125.999 105.701 126.452
+    114.896C126.087 119.51 123.49 141.11 122.17 148.742C120.428 158.824 116.712
+    162.58 106.261 164.817V164.816ZM151.487 113.154C148.658 114.465 143.924
+    115.448 139.427 115.659C134.459 115.891 131.931 115.104 131.336
+    114.619C131.057 108.889 133.193 108.291 135.454 107.657C135.809 107.557
+    136.156 107.46 136.491 107.343C136.699 107.512 136.926 107.68 137.176
+    107.844C141.168 110.475 148.289 110.758 158.342 108.687L158.453
+    108.665C157.097 109.931 154.776 111.629 151.487 113.154Z"
+    fill="white" />
+</svg>
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 @@
+<script>
+  export let width = "100"
+  export let height = "100"
+</script>
+
+<svg
+  {width}
+  {height}
+  viewBox="0 0 128 155"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M10.312 26.843L0 32V122.51L10.312 127.637L10.374 127.562V26.914L10.312
+    26.843Z"
+    fill="#8C3123" />
+  <path
+    d="M65.5 114.5L10.312 127.637V26.843L65.5 39.6935V114.5Z"
+    fill="#E05243" />
+  <path
+    d="M40.589 93.933L63.998 96.913L64.145 96.574L64.2765 58.189L63.998
+    57.889L40.589 60.826V93.933"
+    fill="#8C3123" />
+  <path
+    d="M63.998 114.647L117.683 127.665L117.768 127.53L117.766 26.933L117.681
+    26.843L63.998 39.841V114.647"
+    fill="#8C3123" />
+  <path
+    d="M87.4135 93.933L63.998 96.913V57.889L87.4135 60.826V93.933Z"
+    fill="#E05243" />
+  <path
+    d="M87.4135 44.8155L63.998 49.083L40.589 44.8155L63.9685 38.6875L87.4135
+    44.8155Z"
+    fill="#5E1F18" />
+  <path
+    d="M87.4135 109.901L63.998 105.605L40.589 109.901L63.9695 116.427L87.4135
+    109.901Z"
+    fill="#F2B0A9" />
+  <path
+    d="M40.589 44.8155L63.998 39.0225L64.1875 38.964V0.1565L63.998 0L40.589
+    11.7065V44.8155Z"
+    fill="#8C3123" />
+  <path
+    d="M87.4135 44.8155L63.998 39.0225V0L87.4135 11.7065V44.8155Z"
+    fill="#E05243" />
+  <path
+    d="M63.998 154.714L40.5865 143.012V109.903L63.998 115.694L64.3425
+    116.086L64.249 154.039L63.998 154.714Z"
+    fill="#8C3123" />
+  <path
+    d="M63.998 154.714L87.4115 143.012V109.903L63.998 115.694V154.714"
+    fill="#E05243" />
+  <path
+    d="M117.684 26.843L128 32V122.51L117.684 127.665V26.843Z"
+    fill="#E05243" />
+</svg>
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 @@
+<script>
+  export let width = "100"
+  export let height = "100"
+</script>
+
+<svg
+  {width}
+  {height}
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 1478.201 1195.111">
+  <g transform="matrix(.569 0 0 .569 199.451 -82.735)">
+    <linearGradient
+      id="a"
+      gradientUnits="userSpaceOnUse"
+      x1="-2901.952"
+      y1="923.573"
+      x2="-2061.249"
+      y2="1420.331"
+      gradientTransform="matrix(.1234 0 0 -.1234 1158.33 1550.273)">
+      <stop offset="0" stop-color="#909ca9" />
+      <stop offset="1" stop-color="#ededee" />
+    </linearGradient>
+    <path
+      fill="url(#a)"
+      d="M1410.773 814.195l-286.9 93.683-249.599 110.161-69.829 18.435c-17.784
+      16.916-36.431 34.049-56.599 51.397-22.119 19.082-42.72 36.433-58.553
+      49.008-17.564 13.88-43.587 39.902-56.814 56.38-19.735 24.721-35.348
+      50.96-42.071 71.13-11.928 36.433-6.07 73.297 16.916 107.346 29.492 43.369
+      88.261 87.606 156.785 117.749 34.916 15.4 93.683 35.132 137.92 46.19
+      73.512 18.651 215.771 38.819 294.054 41.857 15.828.65 37.082.65 37.947 0
+      1.737-1.088 13.881-24.289 27.979-53.129 48.142-98.238 82.838-190.402
+      101.703-269.119 11.276-47.706 20.166-111.246 26.019-186.492 1.521-21.036
+      2.169-91.514.868-115.37-1.953-39.033-5.423-70.692-10.84-101.703-.868-4.555-1.088-8.676-.652-8.892.865-.65
+      3.467-1.517 38.815-11.712l-7.153-16.912v-.005h.004zm-65.49 38.386c2.602 0
+      9.539 66.573 11.273 108.646.436 8.89.216 14.745-.216 14.745-1.733
+      0-36.649-20.599-61.583-36.212-21.687-13.663-62.888-40.988-69.393-46.192-2.173-1.517-1.957-1.733
+      15.828-7.807 30.14-10.194 101.706-33.18 104.091-33.18zm-146.161
+      48.143c1.953 0 6.937 2.816 18.865 10.191 44.671 27.974 105.393 61.805
+      131.415 73.083 8.022 3.469 8.887 2.166-9.542 14.746-39.468 26.889-88.697
+      53.344-148.983 80.018-10.624 4.771-19.514 8.456-19.73 8.456-.432 0
+      .865-5.418 2.598-11.925 14.53-54.001 22.772-108.647
+      23.208-152.452.216-21.687.216-21.687 2.169-22.334-.436.217-.22.217 0
+      .217zm-30.142 11.492c1.297 1.299.432 49.877-1.304 63.104-3.903
+      31.662-9.975 61.153-19.947 94.335-2.386 8.018-4.558 14.745-4.987
+      15.177-.872
+      1.083-30.581-27.975-40.339-39.251-16.916-19.518-30.141-39.035-39.9-58.117-4.988-9.759-12.793-28.84-12.144-29.492
+      3.469-2.385 117.753-46.622 118.621-45.756zm-141.826 55.731c.216 0 .432 0
+      .652.216.432.434 1.953 3.905 3.254 7.807 6.937 18.867 22.548 46.624 35.997
+      64.407 14.746 19.518 34.048 40.334 50.091 53.996 5.207 4.337 9.975 8.456
+      10.624 9.108 1.304 1.302 1.737 1.083-33.612 14.53-40.981 15.613-85.656
+      31.226-136.835 47.706a6825.474 6825.474 0 0 0-36.643
+      11.928c-1.955.652-1.303-.434 4.335-9.323 25.371-39.686 63.97-117.536
+      85.657-172.618 3.687-9.542 7.373-19.082 8.025-21.251.868-3.038 1.95-4.121
+      4.768-5.64 1.518-.43 3.038-.866 3.687-.866zm-43.367 17.999c.649.436-10.411
+      23.637-21.254 44.889-21.036 40.985-44.022 81.323-74.815 130.331-5.204
+      8.456-10.19 16.265-10.842 17.132-1.083 1.519-1.519
+      1.083-4.988-5.638-7.373-14.53-13.447-33.181-16.699-50.313-3.254-16.916-2.602-46.406
+      1.086-64.621 2.816-13.444 2.602-13.227 9.107-16.481 27.757-14.095
+      117.537-56.166 118.405-55.299zm374.073 15.182v9.107c0 48.359-5.204
+      114.716-12.797 163.077-1.301 8.456-2.389 15.393-2.602 15.613 0
+      0-6.288-1.733-13.661-3.905-32.527-10.193-67.875-25.156-99.754-42.718-21.038-11.494-51.612-30.363-50.743-31.231.213-.215
+      9.323-4.986 19.947-10.625 42.509-22.118 83.274-45.972 118.622-69.609
+      13.229-8.892 33.176-23.202 37.518-27.107l3.47-2.602zm-537.802 64.185c.867
+      0 .65 1.735-.651 9.542-.868 5.64-1.951 16.049-2.382 23.202-1.739 31.662
+      3.469 55.084 19.082 87.177 4.337 8.892 7.809 16.265 7.589 16.48-1.519
+      1.303-145.074 43.375-190.183 55.734-13.444 3.685-25.152 6.939-26.024
+      7.153-1.515.436-1.733.22-1.083-3.47 4.987-31.875 29.276-73.512
+      63.104-108.644 22.554-23.419 40.554-37.08 71.347-54.648 22.119-12.575
+      56.165-31.439 58.767-32.309.002-.217.218-.217.434-.217zm338.295
+      60.503c.216-.216 5.42 2.605 11.708 6.29 46.408 26.891 111.03 51.83 166.108
+      64.623l4.991 1.086-6.941 3.899c-28.84 16.049-123.606 55.515-220.538
+      91.732-14.098 5.202-27.975 10.409-30.581 11.492-2.602 1.083-4.988
+      1.735-4.988 1.519 0-.22 3.906-7.809 8.89-17.132 27.107-50.744
+      54.433-112.547 68.311-155.485 1.739-4.12 2.82-7.805 3.04-8.024zm-34.48
+      11.278c.22.221-1.517 4.771-3.687 9.975-18.865 45.756-43.59 95.636-75.249
+      151.583-8.022 14.314-14.746 25.808-14.966 25.808-.213
+      0-6.721-3.906-14.527-8.676-45.976-28.192-86.743-62.888-113.414-96.501l-3.905-4.771
+      19.732-5.422c70.696-19.298 130.762-40.116 190.4-65.704 8.459-3.471
+      15.4-6.292 15.616-6.292zm214.253 74.815s.217.217 0 0c.216 4.988-10.844
+      49.661-19.953 81.969-7.589 27.107-14.098 48.361-26.022 85.874-5.204
+      16.485-9.755 30.143-9.975 30.143-.216
+      0-1.517-.216-2.818-.647-64.405-11.714-122.089-27.977-176.303-49.661-15.182-6.074-36.866-15.833-38.167-16.916-.432-.438
+      12.58-6.506 29.06-13.663 98.669-43.154 201.024-92.164 236.153-113.196
+      4.119-2.603 7.373-3.903 8.025-3.903zm-494.646 16.916c.434.432-27.107
+      40.118-65.709 94.114-13.444 18.867-29.057 40.985-34.911 49.225-5.856
+      8.241-14.746 21.253-19.734 29.06l-9.112
+      14.096-9.759-8.24c-11.494-9.544-31.442-29.927-40.333-41.204-18.651-23.201-31.226-47.706-36.214-70.04-2.386-10.411-2.386-15.618-.22-16.265
+      3.252-.867 61.153-14.53 115.37-27.11 30.143-6.937 65.054-15.177
+      77.632-18.213 12.579-3.041 22.774-5.423 22.99-5.423zm27.756 10.626l6.937
+      7.806c31.231 34.914 63.108 60.724 101.708 83.272 6.941 3.906 12.144 7.373
+      11.708 7.594-1.514 1.083-134.016 48.136-195.385 69.389-34.478
+      12.143-62.888 21.901-63.102 21.901-.216
+      0-2.169-1.299-4.341-2.818l-3.901-2.82 6.288-9.106c20.383-29.493
+      45.976-61.803 101.707-129.028l38.381-46.19zm173.053 123.822c.213-.215
+      9.755 3.252 21.464 7.594 28.195 10.624 50.527 17.345 80.456 24.936 36.866
+      9.326 90.211 18.434 121.657 21.035 4.771.432 7.373.868 6.505
+      1.519-1.521.868-33.395 11.494-56.816 18.867-37.302 11.708-151.149
+      45.32-243.962 71.995-17.132 4.987-31.879 9.108-32.746
+      9.323-2.166.436-9.325-1.519-9.325-2.386 0-.431 5.204-7.153 11.494-14.527
+      31.225-37.3 62.238-78.935 88.044-118.403 7.154-10.846 13.229-19.736
+      13.229-19.953zm-38.17 1.087c.216.216-15.179 24.936-42.066 67.439-11.496
+      17.999-24.291 38.383-28.846 45.54-4.337 6.939-10.842 17.784-14.527
+      23.854l-6.29
+      11.061-3.252-.868c-7.809-2.169-62.672-21.471-77.202-27.325-18-7.157-36.649-15.829-50.529-23.202-17.346-9.326-39.03-23.206-37.297-23.637.433-.216
+      30.143-8.243 65.922-17.999 94.984-25.809 147.678-40.77 182.161-51.612
+      6.29-1.952 11.71-3.471 11.926-3.251zm269.985 63.318h.216c.868 2.171-34.26
+      99.755-47.06 130.547-2.815 6.939-3.896 8.677-5.417
+      8.456-3.687-.213-54.646-7.37-85.66-11.925-53.994-8.24-144.641-24.073-167.409-29.275l-5.204-1.083
+      32.307-7.378c69.396-15.613 102.791-24.069 136.619-34.478 42.722-13.011
+      85.011-29.276 127.729-49.225 6.722-3.037 12.361-5.422 13.879-5.639z" />
+    <linearGradient
+      id="b"
+      gradientUnits="userSpaceOnUse"
+      x1="-2882.7"
+      y1="10288.81"
+      x2="-2206.249"
+      y2="10288.81"
+      gradientTransform="matrix(.1234 0 0 -.1234 1158.33 1550.273)">
+      <stop offset="0" stop-color="#939fab" />
+      <stop offset="1" stop-color="#dcdee1" />
+    </linearGradient>
+    <path
+      fill="url(#b)"
+      d="M1114.983 145.414c-4.771-.647-81.757 27.11-131.415 47.275-67.01
+      27.327-119.052 53.351-151.148 75.899-11.925 8.461-26.891 23.422-29.273
+      29.276-.867 2.169-1.303 4.771-1.303 7.373l29.06 27.541 69.175 22.119
+      164.594 29.493 188.228 32.312 1.953-16.264c-.649
+      0-1.085-.216-1.73-.216l-24.728-3.905-4.984-8.89c-25.59-45.107-53.781-101.056-70.261-138.789-12.793-29.276-24.938-63.102-31.662-87.391-3.687-14.746-4.119-15.613-6.501-15.829v-.005h-.005zm-3.474
+      11.063h.223c.213.214 1.081 6.29 1.95 13.442 3.683 30.364 10.411 59.635
+      21.035 91.297 8.022 23.855 8.022 22.555-1.301
+      19.734-22.119-6.07-121.221-23.202-193-33.177-11.494-1.519-21.253-3.036-21.253-3.252-.867-.867
+      51.827-28.41 75.031-39.25 29.709-13.665 111.246-47.711
+      117.315-48.794zm-209.047 97.15l8.461 2.816c45.97 15.616 161.551 37.736
+      225.31 42.94 7.154.651 13.229 1.303 13.442 1.303.216.216-5.852
+      3.469-13.661 7.154-30.79 15.397-64.621 34.264-88.042 48.794-6.937
+      4.335-13.229 7.807-14.094 7.807-.868
+      0-5.42-.868-10.191-1.519l-8.674-1.303-21.683-21.253c-38.167-37.08-68.094-65.704-79.588-76.549l-11.28-10.19zm-8.671
+      6.721l30.576 38.168c16.696 21.035 33.611 41.635 37.301 46.187 3.683 4.557
+      6.721 8.245 6.505
+      8.461-.868.65-44.236-7.809-67.226-13.011-23.637-5.423-33.395-8.025-47.924-12.577l-11.928-3.905v-3.038c.216-14.53
+      18.651-36.214 49.877-58.331l2.819-1.954zm259.791 52.046c.869 0 1.95 1.951
+      4.552 7.806 7.373 16.263 30.364 60.07 35.997 68.526 1.74 2.822 4.771
+      3.038-25.802-1.95-73.512-11.93-97.152-15.829-97.152-16.263 0-.216
+      2.169-1.735 4.988-3.254 22.771-12.575 45.756-28.624 66.142-45.756
+      4.988-4.121 9.542-8.024 10.407-8.676.216-.433.652-.649.868-.433z" />
+    <radialGradient
+      id="c"
+      cx="-14217.448"
+      cy="7277.705"
+      r="898.12"
+      gradientTransform="matrix(-.1185 -.0178 -.036 .237 -198.955 -1314.415)"
+      gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ee352c" />
+      <stop offset="1" stop-color="#a91d22" />
+    </radialGradient>
+    <path
+      fill="url(#c)"
+      d="M804.66 294.828s-4.768 7.593-.215 18.87c2.822 6.937 11.061 15.393
+      20.384 24.069 0 0 96.5 94.114 108.211 107.561 53.344 61.585 76.549 122.305
+      78.718 206.012 1.301 53.78-8.894 101.054-34.264 155.919-45.106
+      98.453-140.307 207.098-287.117 327.67l21.472-7.157c13.878-10.411
+      32.745-21.467 76.982-45.756 102.137-55.952 217.071-107.346 358.028-160.258
+      202.971-76.335 536.715-165.681
+      726.676-194.736l19.737-3.038-3.038-4.771c-17.345-26.891-29.276-43.587-43.59-61.369-41.633-51.612-92.157-93.463-153.964-128.161-85.007-47.489-194.956-84.571-334.173-112.112-26.239-5.207-83.923-15.181-130.763-22.337-99.321-15.393-163.51-26.021-234.203-38.165-25.37-4.339-63.323-10.843-88.478-16.263-13.011-2.822-37.947-8.676-57.464-15.398-15.613-6.075-38.168-12.147-42.939-30.58zm55.952
+      54.216c.214-.214 3.683 1.083 8.24 2.602 8.24 2.816 18.865 6.07 31.446
+      9.542a1599.47 1599.47 0 0 0 28.624 7.589c13.011 3.251 23.852 6.288 24.068
+      6.288 1.521 1.519 23.424 71.558 30.797 98.449 2.815 10.195 4.988 18.867
+      4.771
+      18.867-.223.22-2.605-3.469-5.423-8.456-25.373-44.673-65.491-89.995-111.899-126.428-6.069-4.333-10.624-8.237-10.624-8.453zm106.692
+      29.492c1.085 0 5.856.651 11.708 1.951 36.866 8.24 103.008 20.818 145.293
+      27.975 7.157 1.083 12.797 2.387 12.797 2.818 0 .436-2.605 1.951-5.859
+      3.688-7.153 3.685-35.997 20.815-45.536 27.322-24.073 16.047-45.756
+      33.395-61.371 49.008-6.288 6.29-11.712 11.494-11.712
+      11.494s-1.297-3.685-2.386-8.242c-7.802-30.143-24.069-74.816-38.815-106.258-2.386-4.986-4.339-9.541-4.339-9.973
+      0 .433 0 .217.22.217zm187.795 35.781c1.301.432 3.47 7.806 7.806 24.069
+      8.025 31.446 11.712 66.576 10.411 99.321-.436 9.108-.868 17.564-1.304
+      18.651l-.649
+      2.166-11.276-3.685c-23.204-7.373-60.935-18.435-93.245-27.541-18.436-4.988-33.395-9.542-33.395-9.975
+      0-1.303 26.891-28.192 38.383-38.383 21.898-19.303 81.316-65.275
+      83.269-64.623zm14.963 2.166c.652-.647 89.779 14.746 130.331 22.554 30.145
+      5.854 73.948 14.963 76.549 16.049 1.301.432-3.254 3.034-17.784
+      9.539-57.248 25.808-99.754 49.008-142.036 77.202-11.06 7.373-20.386
+      13.444-20.602 13.444-.216 0-.433-6.287-.433-13.878
+      0-41.201-8.241-82.838-23.424-117.968-1.517-3.47-2.818-6.722-2.601-6.942zm230.516
+      45.542c.652.65-2.169 18.217-4.771 28.624-7.806 32.312-28.84 80.24-54.643
+      125.343-4.558 8.024-8.677 14.53-9.114
+      14.746-.429.216-6.285-3.038-13.009-6.941-25.154-14.746-53.778-28.624-85.007-41.637-8.671-3.685-16.263-6.723-16.48-7.153-1.521-1.303
+      68.308-47.493 105.174-69.612 29.276-17.781 76.982-44.239
+      77.85-43.37zm16.48 2.601c1.953 0 41.421 10.844 62.019 16.916 50.963 15.181
+      109.512 36.648 147.679 53.996l15.828 7.159-11.056 2.6c-93.245
+      21.467-173.049 46.192-250.034 77.418-6.289 2.602-11.928 4.771-12.357
+      4.771-.436 0 1.733-4.987 4.552-11.061 23.204-49.225 38.167-100.62
+      41.85-144.427.221-4.121.867-7.372 1.519-7.372zm-392.938 90.213c.649-.652
+      30.793 6.506 47.057 11.056 24.721 6.942 77.198 24.505 77.198 25.808 0
+      .216-5.853 5.204-12.79 11.278-28.408 23.637-55.734 48.572-88.481
+      80.234-9.759 9.328-17.997 16.917-18.429 16.917-.436
+      0-.649-1.304-.436-3.038 4.987-36.433
+      3.906-83.272-3.034-130.763-.653-6.074-1.302-11.276-1.085-11.492zm633.433.652c.429.431-13.881
+      22.984-22.988 35.777-13.009 18.649-32.098 43.375-75.252 97.588-22.765
+      28.622-48.358 60.936-56.812 71.778-8.678 10.842-15.831 19.948-16.051
+      19.948-.216
+      0-3.031-3.901-6.069-8.671-24.289-36.433-53.349-68.311-87.829-96.935-6.505-5.423-13.658-11.278-16.044-13.013-2.386-1.734-4.339-3.469-4.339-3.685
+      0-.649 36.862-16.483 64.841-27.757 49.01-19.952 115.794-43.805
+      165.892-59.203 26.24-8.239 54.215-16.263 54.651-15.827zm16.696
+      4.334c.865-.215 6.072 2.387 12.361 6.07 52.697 30.143 104.305 68.962
+      145.077 108.864 11.492 11.278 39.9 40.77 39.464 40.986 0
+      0-9.975.867-21.683 1.733-91.296 6.942-208.178 26.239-320.511 53.345-7.589
+      1.733-14.31 3.252-14.746 3.252-.429 0 8.025-8.456 18.653-18.647
+      65.922-63.538 96.067-103.656 131.628-175.22 4.986-10.623 9.325-19.731
+      9.757-20.383-.216 0-.216 0 0 0zm-482.936 49.446c3.038.647 31.229 13.88
+      52.48 24.503 19.517 9.755 48.794 25.372 50.311 26.671.216.216-10.195
+      5.638-22.984 11.928-40.772 20.384-75.684 39.682-112.118 61.802-10.408
+      6.29-19.082 11.497-19.298 11.497-.868 0-.652-.872 5.204-11.497
+      19.518-35.561 35.129-78.065 44.023-119.486.864-3.252 1.733-5.418
+      2.382-5.418zm-28.192 5.202c.652.652-6.721 27.323-11.273 41.853-8.894
+      27.541-23.856 62.02-38.383 88.043-3.474 6.069-8.677 14.961-11.496
+      19.948l-5.42
+      8.674-12.144-11.707c-14.094-13.663-25.59-22.12-40.333-29.712-5.859-3.033-10.411-5.638-10.411-6.069
+      0-1.735 37.082-35.347 65.49-59.635 20.383-17.566 63.321-52.045
+      63.97-51.395zm172.404 70.913l10.627 6.937c24.282 15.833 52.906 36.866
+      74.813 55.298 12.357 10.19 36.21 31.662 40.985 36.866l2.598 2.822-17.561
+      4.986c-99.321 27.538-176.087 52.043-265.649 85.007-9.975 3.685-18.433
+      6.721-19.085 6.721-1.297 0-2.385 1.083 19.954-19.519 57.251-52.691
+      107.992-110.812 145.726-167.411l7.592-11.707zm-45.324
+      11.276c.432.432-29.276 42.284-47.06 65.922-21.251 28.192-58.985
+      75.465-85.007 106.256-10.84 12.797-20.163 23.422-20.599
+      23.64-.652.216-.868-3.036-.868-8.024
+      0-26.242-6.721-54.216-18.433-78.068-4.988-9.975-5.856-12.361-4.768-13.444
+      4.119-3.688 67.223-39.686 107.123-61.153 26.89-14.312 68.956-35.563
+      69.612-35.129zm-274.107 67.225c.652 0 5.64 2.6 11.279 5.638 13.878 7.589
+      26.239 16.046 37.298 25.156.432.432-5.204 4.988-12.577 10.406-20.602
+      14.746-51.828 38.385-70.041 52.915-19.088 15.18-19.734 15.613-17.568
+      12.361 14.314-21.903 21.467-34.264 29.06-50.093 6.721-14.094 13.442-30.793
+      18.213-45.323 1.734-6.289 3.904-11.06 4.336-11.06zm73.083
+      57.248c1.081-.214 2.386 1.735 8.238 10.411 12.361 18.429 21.903 43.154
+      24.292 63.104l.429 4.339-29.705 11.494c-53.133 20.599-102.139
+      40.985-135.322 56.162-9.322 4.339-25.587 12.144-36.211 17.352-10.627
+      5.418-19.301 9.539-19.301 9.323s6.721-5.204 14.961-11.278c64.844-47.055
+      121.007-98.669 163.076-150.279 4.555-5.423 8.677-10.411
+      9.107-10.627l.436-.001zm-33.612 8.242c.868.867-23.853 28.84-40.768
+      45.971-41.853 42.723-83.273 76.12-134.669 108.649-6.505 4.119-12.359
+      7.804-13.011 8.24-1.519.867.432-1.303 22.986-25.808 14.314-15.397
+      25.155-28.408 37.516-44.453 8.24-10.624 9.759-12.143 21.688-20.604
+      31.878-22.987 105.39-72.864 106.258-71.995z" />
+  </g>
+  <path
+    fill="#231F1F"
+    d="M265.747 900.102c-2.276 0-4.553.217-6.809.217-45.975 2.45-76.983
+    22.683-95.113 62.195-15.506 35.735-13.813 82.446.174 118.4 16.265 35.131
+    42.547 53.672 86.416 60.675 9.282 1.52 15.506 6.616 33.483 27.606l22.12
+    25.915h40.118l-26.676-26.892c-14.746-14.745-26.673-27.584-26.673-28.712
+    0-1.127 5.641-3.599 12.469-5.68 22.51-6.812 41.203-24.202 54.279-50.854
+    10.583-21.402 12.102-28.018 13.619-54.646
+    3.969-79.26-37.82-128.813-107.409-128.247l.002.023zm35.173 207.27c-19.517
+    9.453-47.857 11.34-66.356
+    4.553-19.127-7.025-37.646-26.889-45.975-49.377-9.259-24.591-7.937-69.956
+    2.646-90.386 17.023-32.528 39.534-47.49 72.43-47.49 48.792 0 76.549 29.884
+    80.171 86.048 2.863 46.885-12.838 82.058-42.895
+    96.632l-.021.02zm693.025-139.568c-16.828 0-29.709 6.811-38.385 20.231l-6.809
+    10.627v-27.628h-29.123v165.678h29.104v-52.956c0-48.424.604-54.084
+    7.371-67.335 9.326-18.172 25.371-27.234 40.879-22.897l10.408
+    3.036v-28.712h-13.445v-.044zm-171.098-1.519c-5.705 0-11.756.76-17.781
+    2.084-38.971 10.19-60.938 47.489-59.594 85.873 0 32.139 6.244 48.206 21.752
+    65.057 31.77 26.065 60.502 28.146 99.275 14.161 6.615-2.819 13.814-6.072
+    13.814-6.072v-26.065l-13.814 7.156c-31.379 13.661-55.016
+    13.661-73.949-2.43-12.076-12.296-17.391-27.042-19.84-43.868h117.426v-22.339c0-45.539-27.41-74.294-67.313-73.557h.024zm-47.492
+    72.647s4.338-28.407 20.428-39.554c7.744-5.466 16.633-8.11 25.328-8.11 8.719
+    0 17.414 2.818 24.592 8.306 14.748 11.341 17.219 39.143 17.219
+    39.143h-87.566v.215h-.001zm-702.111-29.881c-31.573-19.128-45.582-32.921-43.869-49.185
+    4.9-44.997 60.503-38.773
+    91.295-21.749l.219-30.272s-17.024-7.373-41.421-7.764c-37.429-.564-61.63
+    11.709-72.97 36.691-16.656 36.865-1.908 64.665 51.396 95.677 29.925 17.412
+    43.152 32.528 43.152 49.008 0 34.047-41.05 45.931-83.401
+    24.57-8.716-4.337-16.09-7.959-16.48-7.959-1.519 9.651-.736 32.745-.736
+    32.745s13.012 5.466 32.527 9.236c48.4 9.65 92.445-13.054 96.608-49.919
+    3.622-34.609-8.893-52.761-56.318-81.104l-.002.025zm1178.454-43.155c-5.682
+    0-11.711.78-18 2.103-38.924 10.192-60.85 47.492-59.354 85.876 0 32.095 6.225
+    48.011 21.729 64.838 31.771 26.089 60.504 28.191 99.473 14.184 6.592-2.818
+    13.77-6.026 13.77-6.026v-26.109l-13.791 7.197c-31.443 13.619-55.082
+    13.619-73.947-2.471-12.145-12.274-17.414-26.847-19.865-43.871h117.232v-22.336c0-45.321-27.412-74.099-67.313-73.339l.066-.046zm-47.492
+    72.646s4.381-28.365 20.449-39.729c7.721-5.485 16.611-8.132 25.307-8.132
+    8.674 0 17.414 2.819 24.594 8.327 14.746 11.342 17.219 39.338 17.219
+    39.338h-87.545l-.024.196zm-533.809-29.123c-31.573-19.083-45.54-32.92-43.848-49.185
+    4.9-45.02 60.504-38.773
+    91.296-21.749l.218-30.272s-17.024-7.374-41.421-7.722c-37.429-.563-61.63
+    11.711-72.991 36.692-16.633 36.864-1.692 64.666 51.437 95.677 29.884 17.393
+    43.111 32.312 43.111 48.792 0 34.047-41.029 46.126-83.381
+    24.569-8.674-4.337-16.046-7.916-16.48-7.916-1.519 9.649-.736 32.746-.736
+    32.746s12.858 5.27 32.31 9.237c48.445 9.672 92.51-13.012 96.653-49.877
+    3.6-34.437-8.891-52.587-56.167-80.952v-.04zm752.421-42.005c-16.828 0-29.859
+    6.829-38.383 20.254l-6.811
+    10.582v-27.583h-29.123V1136.3h29.102v-52.954c0-48.403.584-54.085
+    7.375-67.313 9.324-18.15 25.369-27.235 40.875-22.878l10.408
+    3.035v-28.775h-13.443zm-984.021
+    41.05V902.941h-29.361v233.728h123.478v-27.604h-94.116v-100.601zm679.015
+    32.896l-24.201 62.975-23.27-63.322-23.637-70.173h-30.055c19.475 55.212
+    40.658 111.376 62.02 165.829 9.26.216 18.541 0 27.799 0l32.682-82.058
+    33.287-83.75h-28.732s-12.688 33.266-25.914 70.521l.021-.022zM506.455
+    839.251c4.728 0 8.674-1.516 11.927-4.769 3.208-3.211 4.9-6.984 4.9-11.711
+    0-4.728-1.692-8.675-4.9-11.711-3.253-3.035-7.005-4.555-11.711-4.555-4.769
+    0-8.717 1.52-11.927 4.728-3.252 3.211-4.727 7.158-4.727 11.712 0 4.771 1.519
+    8.716 4.727 11.711 3.037 3.034 6.984 4.553 11.711
+    4.553v.042zm-10.408-26.889c2.818-2.818 6.245-4.121 10.625-4.121 4.121 0
+    7.548 1.303 10.411 4.121 2.819 2.819 4.337 6.245 4.337 10.409 0 4.163-1.518
+    7.764-4.337 10.582-2.862 2.817-6.29 4.163-10.411 4.163-4.185
+    0-7.59-1.301-10.408-4.163-2.819-2.818-4.337-6.419-4.337-10.582 0-4.164
+    1.301-7.589 4.12-10.409zm7.003 11.928h1.908c1.346 0 2.668 1.3 3.795
+    3.773l2.279 5.116h3.577l-2.818-5.683c-1.149-2.275-2.276-3.598-3.6-3.969
+    1.67-.39 2.992-.953 3.947-2.082.952-.974 1.3-2.298 1.3-3.795
+    0-1.734-.542-3.034-1.69-3.989-1.302-1.084-3.384-1.669-6.074-1.669h-6.026v21.187h3.035v-8.891l.367.002zm0-9.846h2.647c1.908
+    0 3.253.39 3.99.953.716.564.911 1.303.911 2.646 0 2.45-1.52 3.601-4.337
+    3.601h-3.252v-7.2h.041zm-485.018
+    7.958c0-7.373-.216-12.858-.39-16.09h.174c.758 3.814 1.691 6.657 2.45
+    8.543l28.19 62.975h4.728l28.19-63.538c.761-1.733 1.52-4.337
+    2.452-7.959h.216c-.563 6.29-.758 11.754-.758
+    16.112v55.581h9.648v-82.622h-12.1L54.919 852.87c-.955 2.276-2.278
+    5.683-3.969
+    10.193h-.392c-.563-2.234-1.886-5.639-3.772-9.803l-25.33-58.053H8.598v82.621h9.281v-55.385l.153-.041zm96.045.154h8.329v51.458h-8.329v-51.458zm4.164-18.868c1.736
+    0 3.21-.587 4.337-1.734 1.15-1.129 1.91-2.603 1.91-4.337
+    0-1.692-.565-3.211-1.887-4.337-1.171-1.15-2.668-1.737-4.381-1.737-1.69
+    0-3.208.587-4.338 1.737-1.146 1.126-1.907 2.645-1.907 4.337 0 1.887.586
+    3.208 1.907 4.337 1.304 1.147 2.647 1.734 4.338 1.734h.021zm63.54
+    71.455v-9.066c-4.555 3.405-9.456 5.098-14.53 5.098-6.07
+    0-10.995-2.081-14.595-6.07-3.577-3.947-5.485-9.436-5.485-16.266 0-7.156
+    1.908-12.84 5.854-17.177 3.795-4.163 8.719-6.245 14.748-6.245 4.922 0 9.647
+    1.52 14.009 4.557v-9.65c-3.968-2.082-8.5-3.037-13.619-3.037-9.456 0-16.827
+    3.037-22.335 8.894-5.466 5.854-8.285 13.813-8.285 23.42 0 8.543 2.45 15.722
+    7.548 21.209 5.312 5.637 12.102 8.5 20.428 8.5 6.438-.178 11.707-1.523
+    16.262-4.167zm23.831-27.433c0-6.788 1.518-12.273 4.337-16.049 2.647-3.403
+    5.855-5.116 9.65-5.116 3.21 0 5.486.585 7.155
+    1.908v-9.846c-1.3-.563-3.187-.758-5.637-.758-3.405 0-6.439 1.146-9.107
+    3.253-2.819 2.231-5.074 5.638-6.397
+    9.975h-.216v-12.08h-9.433v58.985h9.454V847.71h.194zm54.279 31.443c8.892 0
+    16.048-2.863 21.36-8.543 5.29-5.641 7.936-13.229 7.936-22.686
+    0-9.647-2.427-17.021-7.372-22.51-4.9-5.483-11.711-8.132-20.603-8.132s-16.048
+    2.647-21.36 7.764c-5.681 5.641-8.674 13.599-8.674 23.813 0 8.891 2.429
+    16.265 7.548 21.751 5.29 5.68 12.295 8.521 21.165
+    8.521v.022zm-13.445-48.055c3.6-3.795 8.329-5.683 14.182-5.683 6.074 0 10.627
+    1.888 14.01 5.683 3.404 3.969 5.097 9.63 5.097 17.197 0 7.198-1.519
+    12.859-4.729 16.654-3.208 3.969-7.936 6.071-14.183 6.071-6.071
+    0-10.777-2.104-14.377-6.071-3.577-3.99-5.291-9.456-5.291-16.654-.368-7.156
+    1.519-13.01 5.291-17.197zm84.141 42.916c3.599-3.208 5.509-7.155 5.509-12.102
+    0-4.337-1.52-7.936-4.338-10.777-2.3-2.275-5.854-4.337-10.994-6.419-4.556-1.906-7.374-3.6-8.893-4.923-1.517-1.517-2.45-3.402-2.45-6.071
+    0-2.45.955-4.337 2.821-5.855 1.908-1.516 4.337-2.253 7.59-2.253 5.096 0
+    9.454 1.343 13.443 4.185v-9.456c-3.816-1.906-7.958-2.817-12.686-2.817-6.071
+    0-11.189 1.671-14.964 4.899-3.969 3.212-5.854 7.375-5.854 12.274 0 4.337 1.3
+    7.938 3.771 10.582 2.082 2.256 5.641 4.556 10.583 6.614 4.729 2.083 7.938
+    3.968 9.65 5.485 1.691 1.52 2.45 3.405 2.45 5.641 0 5.506-3.772 8.349-11.146
+    8.349-5.682 0-10.776-1.866-15.333-5.638v10.189c4.121 2.475 9.066 3.601 14.53
+    3.601 7.005-.368 12.49-2.081 16.264-5.486l.047-.022zm45.019-56.73c-8.893
+    0-16.048 2.647-21.361 7.764-5.638 5.641-8.674 13.599-8.674 23.813 0 8.891
+    2.452 16.265 7.547 21.751 5.313 5.68 12.295 8.521 21.187 8.521 9.107 0
+    16.048-2.861 21.36-8.545 5.313-5.637 7.958-13.227 7.958-22.683
+    0-9.65-2.472-17.022-7.374-22.509-5.115-5.487-11.927-8.133-20.601-8.133l-.042.021zm18.345
+    31.012c0 7.198-1.518 12.859-4.727 16.654-3.21 3.969-7.938 6.071-14.184
+    6.071-6.074 0-10.778-2.104-14.379-6.071-3.577-3.99-5.29-9.456-5.29-16.654
+    0-7.59 1.888-13.444 5.683-17.393 3.576-3.773 8.306-5.682 14.182-5.682 5.854
+    0 10.561 1.907 13.964 5.682 3.037 4.163 4.729 9.824 4.729
+    17.393h.022zm25.547 29.513h9.433v-51.068h13.813v-7.938H428.93v-9.108c0-8.282
+    3.208-12.446 9.845-12.446 2.234 0 4.511.563 6.203
+    1.518v-8.521c-1.692-.759-3.969-.932-6.812-.932-5.095 0-9.258 1.519-12.664
+    4.727-3.969 3.773-6.071 8.674-6.071
+    15.312v9.672h-9.978v7.936h9.978v50.876l.067-.028zm38.75-16.091c0 11.538
+    5.098 17.414 15.506 17.414 3.774 0 6.614-.606 8.891-1.951v-8.11c-1.734
+    1.302-3.795 1.91-6.071 1.91-3.208
+    0-5.464-.762-6.788-2.475-1.345-1.689-2.103-4.554-2.103-8.501v-33.286h14.961v-7.938h-14.961v-17.39c-3.253
+    1.127-6.44 2.082-9.456
+    3.034v14.355h-10.192v7.938h10.192v34.979l.021.021zm1014.88
+    108.73c-3.209-3.034-7.004-4.553-11.709-4.553-4.77 0-8.719 1.519-11.928
+    4.771-3.209 3.188-4.729 7.155-4.729 11.711 0 4.728 1.52 8.675 4.705 11.709
+    3.211 3.036 7.156 4.556 11.928 4.556 4.705 0 8.674-1.52 11.928-4.729
+    3.188-3.253 4.879-7.004
+    4.879-11.709-.174-4.771-1.887-8.719-5.096-11.754l.022-.002zm-1.517
+    22.338c-2.82 2.818-6.246 4.119-10.41 4.119-4.119
+    0-7.545-1.301-10.408-4.119-2.818-2.863-4.338-6.441-4.338-10.627 0-4.121
+    1.301-7.545 4.164-10.408 2.818-2.817 6.225-4.121 10.582-4.121 4.121 0 7.549
+    1.304 10.41 4.121 2.818 2.863 4.336 6.287 4.336 10.408 0 4.382-1.301
+    7.764-4.336 10.627zm-8.502-9.651c1.691-.39 3.037-1.149 3.969-2.081.955-.977
+    1.303-2.301 1.303-3.815
+    0-1.692-.543-3.037-1.691-3.969-1.301-1.085-3.404-1.671-6.07-1.671h-6.029v21.164h3.037v-8.891h1.885c1.303
+    0 2.604 1.3 3.773 3.773l2.254
+    5.096h3.602l-2.818-5.683c-.977-2.472-2.105-3.601-3.252-3.97l.037.047zm-2.082-1.907h-3.252v-7.155h2.668c1.887
+    0 3.209.345 3.969.932.758.563.932 1.301.932 2.646 0 2.45-1.518 3.579-4.336
+    3.579l.019-.002zM933.443
+    816.353h2.646v-21.187h7.002v-2.646h-16.652v2.646h7.006v21.187h-.002zm16.047-15.917c0-2.062
+    0-3.753-.152-4.705.174 1.126.564 1.887.738 2.45l8.133
+    18.172h1.301l8.152-18.347c.219-.563.393-1.301.76-2.275-.174 1.887-.174
+    3.401-.174 4.553v16.048h2.82V792.52h-3.406l-7.371 16.438c-.174.587-.762
+    1.734-1.129
+    3.037h-.217c-.152-.761-.541-1.519-1.084-2.818l-7.373-16.655h-3.816v23.854h2.666v-15.917l.152-.023z" />
+</svg>
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} />
-  <Label grey extraSmall>Create Integrated Table from External Source</Label>
+  <Label grey extraSmall>Source</Label>
   <TableIntegrationMenu bind:integration />
 </ModalContent>
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 @@
         <i class="ri-arrow-right-s-line" />
       </div>
     {/if}
+
+    <slot name="icon" />
     {#if icon}
-      <div class="icon"><i class={icon} /></div>
+      <div class="icon">
+        <i class={icon} />
+      </div>
     {/if}
     <div class="text">{text}</div>
     {#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
   }
 </script>
@@ -34,8 +36,9 @@
     <Label extraSmall grey>Default</Label>
     {#if bindable}
       <Label extraSmall grey>Value</Label>
+    {:else}
+      <div />
     {/if}
-    <div />
     {#each parameters as parameter, idx}
       <Input thin bind:value={parameter.name} />
       <Input thin bind:value={parameter.default} />
@@ -43,24 +46,27 @@
         <BindableInput
           type="string"
           thin
-          on:change={evt => {
-            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}
+        <i
+          class="ri-close-circle-line delete"
+          on:click={() => deleteQueryParameter(idx)} />
       {/if}
-      <i
-        class="ri-close-circle-line delete"
-        on:click={() => deleteQueryParameter(idx)} />
     {/each}
   </div>
-  <Button thin secondary on:click={newQueryParameter}>New Parameter</Button>
+  {#if !bindable}
+    <Button thin secondary small on:click={newQueryParameter}>
+      Add Parameter
+    </Button>
+  {/if}
+
 </section>
 
 <style>
   .parameters.bindable {
-    grid-template-columns: 1fr 1fr 1fr 5%;
+    grid-template-columns: 1fr 1fr 1fr;
   }
 
   .parameters {
@@ -70,4 +76,14 @@
     align-items: center;
     margin-bottom: var(--spacing-xl);
   }
+
+  .delete {
+    transition: all 0.2s;
+  }
+
+  .delete:hover {
+    transform: scale(1.1);
+    font-weight: 500;
+    cursor: pointer;
+  }
 </style>
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 @@
   }
 </script>
 
-<section>
-  <Heading>{query.name}</Heading>
-  <div class="config">
-    <Label extraSmall grey>Query Name</Label>
-    <Input thin bind:value={query.name} />
-
-    <Spacer medium />
-
-    <Label extraSmall grey>Query Type</Label>
-    <Select secondary bind:value={query.queryType}>
-      <option value={''}>Select an option</option>
-      {#each Object.keys(config) as queryType}
-        <option value={config[queryType].type}>{queryType}</option>
-      {/each}
-    </Select>
-
-    <Spacer medium />
-
-    <IntegrationQueryEditor {query} bind:parameters />
-
-    <Spacer medium />
-
-    <div class="viewer-controls">
-      <Button wide thin blue disabled={!data} on:click={saveQuery}>Save</Button>
-      <Button wide thin primary on:click={previewQuery}>Run</Button>
-    </div>
-
-    <section class="viewer">
-      {#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>
+<header>
+  <Heading small>{query.name}</Heading>
+  <div class="queryVerbs">
+    {#each QueryVerb as queryVerb}
+      <div
+        class="queryVerb"
+        class:selected={queryVerb === query.queryVerb}
+        on:click={() => {
+          query.queryVerb = queryVerb
+        }}>
+        {queryVerb}
+      </div>
+    {/each}
   </div>
-</section>
+  <Select thin secondary bind:value={query.queryType}>
+    <option value={''}>Select an option</option>
+    {#each Object.keys(config) as queryType}
+      <option value={config[queryType].type}>{queryType}</option>
+    {/each}
+  </Select>
+</header>
+
+<Spacer large />
+
+{#if query.queryVerb && query.queryType}
+  <section>
+    <div class="config">
+      <Label extraSmall grey>Query Name</Label>
+      <Input thin bind:value={query.name} />
+
+      <Spacer medium />
+
+      <IntegrationQueryEditor {query} bind:parameters />
+
+      <Spacer medium />
+
+      <div class="viewer-controls">
+        <Button wide thin blue disabled={!data} on:click={saveQuery}>
+          Save
+        </Button>
+        <Button wide thin primary on:click={previewQuery}>Run</Button>
+      </div>
+
+      <section class="viewer">
+        {#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>
+{/if}
 
 <style>
   .field {
@@ -208,7 +224,29 @@
     white-space: pre-wrap;
   }
 
-  .viewer {
+  header {
+    display: flex;
+    align-items: center;
+  }
+
+  .queryVerbs {
+    display: flex;
+    flex: 1;
+    font-size: var(--font-size-m);
+    align-items: center;
+    margin-left: var(--spacing-l);
+  }
+
+  .queryVerb {
+    text-transform: capitalize;
+    margin-right: var(--spacing-m);
+    color: var(--grey-5);
+    cursor: pointer;
+  }
+
+  .selected {
+    color: var(--white);
+    font-weight: 500;
   }
 
   .viewer-controls {
diff --git a/packages/builder/src/components/integration/SvelteEditor.svelte b/packages/builder/src/components/integration/SvelteEditor.svelte
new file mode 100644
index 0000000000..b90bd69a3c
--- /dev/null
+++ b/packages/builder/src/components/integration/SvelteEditor.svelte
@@ -0,0 +1,188 @@
+<script>
+  import CodeMirror from "./codemirror"
+  import { onMount, createEventDispatcher } from "svelte"
+
+  const dispatch = createEventDispatcher()
+
+  export let value = ""
+  export let readonly = false
+  export let errorLoc = null
+  export let lineNumbers = true
+  export let tab = true
+  export let mode
+
+  let w
+  let h
+
+  // We have to expose set and update methods, rather
+  // than making this state-driven through props,
+  // because it's difficult to update an editor
+  // without resetting scroll otherwise
+  export async function set(new_value, new_mode) {
+    if (new_mode !== mode) {
+      await createEditor((mode = new_mode))
+    }
+
+    value = new_value
+    updating_externally = true
+    if (editor) editor.setValue(value)
+    updating_externally = false
+  }
+
+  export function update(new_value) {
+    value = new_value
+
+    if (editor) {
+      const { left, top } = editor.getScrollInfo()
+      editor.setValue((value = new_value))
+      editor.scrollTo(left, top)
+    }
+  }
+
+  export function resize() {
+    editor.refresh()
+  }
+
+  export function focus() {
+    editor.focus()
+  }
+
+  const modes = {
+    js: {
+      name: "javascript",
+      json: false,
+    },
+    json: {
+      name: "javascript",
+      json: true,
+    },
+    sql: {
+      name: "sql",
+    },
+    svelte: {
+      name: "handlebars",
+      base: "text/html",
+    },
+  }
+
+  const refs = {}
+  let editor
+  let updating_externally = false
+  let marker
+  let error_line
+  let destroyed = false
+
+  $: if (editor && w && h) {
+    editor.refresh()
+  }
+
+  $: {
+    if (marker) marker.clear()
+
+    if (errorLoc) {
+      const line = errorLoc.line - 1
+      const ch = errorLoc.column
+
+      marker = editor.markText(
+        { line, ch },
+        { line, ch: ch + 1 },
+        {
+          className: "error-loc",
+        }
+      )
+
+      error_line = line
+    } else {
+      error_line = null
+    }
+  }
+
+  let previous_error_line
+  $: if (editor) {
+    if (previous_error_line != null) {
+      editor.removeLineClass(previous_error_line, "wrap", "error-line")
+    }
+
+    if (error_line && error_line !== previous_error_line) {
+      editor.addLineClass(error_line, "wrap", "error-line")
+      previous_error_line = error_line
+    }
+  }
+
+  onMount(() => {
+    createEditor(mode).then(() => {
+      if (editor) editor.setValue(value || "")
+    })
+
+    return () => {
+      destroyed = true
+      if (editor) editor.toTextArea()
+    }
+  })
+
+  let first = true
+
+  async function createEditor(mode) {
+    if (destroyed || !CodeMirror) return
+
+    if (editor) editor.toTextArea()
+
+    const opts = {
+      lineNumbers,
+      lineWrapping: true,
+      indentWithTabs: true,
+      indentUnit: 2,
+      tabSize: 2,
+      value: "",
+      mode: modes[mode] || {
+        name: mode,
+      },
+      readOnly: readonly,
+      autoCloseBrackets: true,
+      autoCloseTags: true,
+    }
+
+    if (!tab)
+      opts.extraKeys = {
+        Tab: tab,
+        "Shift-Tab": tab,
+      }
+
+    // Creating a text editor is a lot of work, so we yield
+    // the main thread for a moment. This helps reduce jank
+    if (first) await sleep(50)
+
+    if (destroyed) return
+
+    editor = CodeMirror.fromTextArea(refs.editor, opts)
+
+    editor.on("change", instance => {
+      if (!updating_externally) {
+        const value = instance.getValue()
+        dispatch("change", { value })
+      }
+    })
+
+    if (first) await sleep(50)
+    editor.refresh()
+
+    first = false
+  }
+
+  function sleep(ms) {
+    return new Promise(fulfil => setTimeout(fulfil, ms))
+  }
+</script>
+
+<textarea tabindex="0" bind:this={refs.editor} readonly {value} />
+
+<style>
+  textarea {
+    visibility: hidden;
+  }
+
+  :global(.CodeMirror) {
+    border-radius: var(--border-radius-m);
+    font-family: var(--font-sans) !important;
+  }
+</style>
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 @@
 <script>
   import { TextArea, Label, Input, Heading, Spacer } from "@budibase/bbui"
-  import Editor from "./QueryEditor.svelte"
+  import Editor from "./SvelteEditor.svelte"
   import ParameterBuilder from "./QueryParameterBuilder.svelte"
 
   const QueryTypes = {
@@ -12,22 +12,30 @@
   export let query
 
   function updateQuery({ detail }) {
-    query.queryString = detail
+    query.queryString = detail.value
   }
 </script>
 
 <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
 <Spacer large />
 
-<Label grey medium>Query</Label>
+<Heading extraSmall black>Query</Heading>
+<Spacer large />
 
 {#if query.queryType === QueryTypes.SQL}
-  <TextArea bind:value={query.queryString} />
-  <!-- <Editor label="Query" on:change={updateQuery} value={query.queryString} /> -->
+  <!-- <TextArea bind:value={query.queryString} /> -->
+  <Editor
+    label="Query"
+    mode="sql"
+    on:change={updateQuery}
+    value={query.queryString} />
 {:else if query.queryType === QueryTypes.JSON}
-  <!-- <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
   <Spacer large />
-  <TextArea bind:value={query.queryString} /> -->
+  <Editor
+    label="Query"
+    mode="json"
+    on:change={updateQuery}
+    value={query.queryString} />
 {:else if query.queryType === QueryTypes.FIELDS}
   <!-- {#each Object.keys()} -->
 {/if}
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditor.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditor.svelte
index 35a053c4aa..dd28ad1c6e 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditor.svelte
@@ -8,9 +8,7 @@
   } from "@budibase/bbui"
   import { AddIcon, ArrowDownIcon } from "components/common/Icons/"
   import actionTypes from "./actions"
-  import { createEventDispatcher } from "svelte"
 
-  const dispatch = createEventDispatcher()
   const eventTypeKey = "##eventHandlerType"
 
   export let event
@@ -49,10 +47,6 @@
   const selectAction = action => () => {
     selectedAction = action
   }
-
-  const saveEventData = () => {
-    dispatch("change", actions)
-  }
 </script>
 
 <div class="actions-container">
@@ -87,23 +81,11 @@
             <span class:selected={action === selectedAction}>
               {index + 1}. {action[eventTypeKey]}
             </span>
-            <!-- <Body small lh>{index + 1}. {action[eventTypeKey]}</Body> -->
-            <!-- <div class="row-expander" class:rotate={action !== selectedAction}>
-              <ArrowDownIcon />
-            </div> -->
           </div>
-          <!-- {#if action === selectedAction}
-            <div class="selected-action-container">
-              <svelte:component
-                this={selectedActionComponent}
-                parameters={selectedAction.parameters} />
-              <div class="delete-action-button">
-                <TextButton text medium on:click={() => deleteAction(index)}>
-                  Delete
-                </TextButton>
-              </div>
-            </div>
-          {/if} -->
+          <i
+            class="ri-close-fill"
+            style="margin-left: var(--spacing-m);"
+            on:click={() => deleteAction(index)} />
         </div>
       {/each}
     {/if}
@@ -114,19 +96,11 @@
         <svelte:component
           this={selectedActionComponent}
           parameters={selectedAction.parameters} />
-        <div class="delete-action-button">
-          <!-- <TextButton text medium on:click={() => deleteAction(index)}>
-            Delete
-          </TextButton> -->
-        </div>
       </div>
     {/if}
-    <Button thin blue on:click={saveEventData}>Save</Button>
   </div>
 </div>
 
-<a href="https://docs.budibase.com">Learn more about Actions</a>
-
 <style>
   .action-header {
     display: flex;
@@ -137,6 +111,7 @@
 
   .action-header > span {
     margin-bottom: var(--spacing-m);
+    font-size: var(--font-size-s);
   }
 
   .action-header > span:hover,
@@ -174,6 +149,8 @@
   .action-container {
     border: var(--border-light);
     border-width: 1px 0 0 0;
+    display: flex;
+    align-items: center;
   }
 
   .selected-action-container {
@@ -181,13 +158,6 @@
     padding-top: var(--spacing-s);
   }
 
-  .delete-action-button {
-    padding-top: var(--spacing-l);
-    display: flex;
-    justify-content: flex-end;
-    flex-direction: row;
-  }
-
   a {
     flex: 1;
     color: var(--grey-5);
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
index 6d42a25a38..8ee65bcc81 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
@@ -2,6 +2,7 @@
   import { Button, Modal } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { store } from "builderStore"
+  import { notifier } from "builderStore/store/notifications"
   import EventEditor from "./EventEditor.svelte"
   import BottomDrawer from "components/common/BottomDrawer.svelte"
 
@@ -15,6 +16,11 @@
   function showDrawer() {
     drawerVisible = true
   }
+
+  const saveEventData = () => {
+    dispatch("change", value)
+    notifier.success("Component actions saved.")
+  }
 </script>
 
 <Button secondary small on:click={showDrawer}>Define Actions</Button>
@@ -22,10 +28,10 @@
 {#if drawerVisible}
   <BottomDrawer title={'Actions'} onClose={() => (drawerVisible = false)}>
     <heading slot="buttons">
-      <Button thin blue>Save</Button>
+      <Button thin blue on:click={saveEventData}>Save</Button>
     </heading>
     <div slot="body">
-      <EventEditor event={value} eventType={name} on:change />
+      <EventEditor event={value} eventType={name} />
     </div>
   </BottomDrawer>
 {/if}
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
index a8e7d15e93..2cbfbcd6e3 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
@@ -60,3 +60,9 @@
     <pre>{query.queryString}</pre>
   {/if}
 </div>
+
+<style>
+  .root {
+    padding: var(--spacing-m);
+  }
+</style>
diff --git a/packages/server/src/api/controllers/datasource.js b/packages/server/src/api/controllers/datasource.js
index 2cbe4fb107..b3ef1d7c0e 100644
--- a/packages/server/src/api/controllers/datasource.js
+++ b/packages/server/src/api/controllers/datasource.js
@@ -1,6 +1,10 @@
 const CouchDB = require("../../db")
 const bcrypt = require("../../utilities/bcrypt")
-const { generateDatasourceID, getDatasourceParams } = require("../../db/utils")
+const {
+  generateDatasourceID,
+  getDatasourceParams,
+  getQueryParams,
+} = require("../../db/utils")
 
 exports.fetch = async function(ctx) {
   const database = new CouchDB(ctx.user.appId)
@@ -17,11 +21,6 @@ exports.fetch = async function(ctx) {
 exports.save = async function(ctx) {
   const db = new CouchDB(ctx.user.appId)
 
-  // TODO: validate the config against the integration type
-  // if (!somethingIsntValid) {
-  //   // ctx.throw(400, "email and Password Required.")
-  // }
-
   const datasource = {
     _id: generateDatasourceID(),
     type: "datasource",
@@ -60,9 +59,15 @@ 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)
+  const db = new CouchDB(ctx.user.appId)
+
+  // Delete all queries for the datasource
+  const rows = await db.allDocs(getQueryParams(ctx.params.datasourceId, null))
+  await db.bulkDocs(rows.rows.map(row => ({ ...row.doc, _deleted: true })))
+
+  // delete the datasource
+  await db.destroy(ctx.params.datasourceId)
+
   ctx.message = `Datasource deleted.`
   ctx.status = 200
 }
diff --git a/packages/server/src/api/controllers/query.js b/packages/server/src/api/controllers/query.js
index f1e3201681..3b907a56ec 100644
--- a/packages/server/src/api/controllers/query.js
+++ b/packages/server/src/api/controllers/query.js
@@ -30,7 +30,7 @@ exports.save = async function(ctx) {
 }
 
 exports.preview = async function(ctx) {
-  const { query, datasourceId, parameters } = ctx.request.body
+  const { query, datasourceId, parameters, queryVerb } = ctx.request.body
 
   let parsedQuery = ""
   if (query) {
@@ -49,7 +49,7 @@ exports.preview = async function(ctx) {
     return
   }
 
-  ctx.body = await new Integration(datasource.config, parsedQuery).query()
+  ctx.body = await new Integration(datasource.config, parsedQuery)[queryVerb]()
 }
 
 exports.execute = async function(ctx) {
@@ -60,7 +60,6 @@ exports.execute = async function(ctx) {
 
   const queryTemplate = handlebars.compile(query.queryString)
 
-  // TODO: Take the default params into account
   const parsedQuery = queryTemplate(ctx.request.body.parameters)
 
   const Integration = integrations[datasource.source]
@@ -69,7 +68,11 @@ exports.execute = async function(ctx) {
     ctx.throw(400, "Integration type does not exist.")
     return
   }
-  const response = await new Integration(datasource.config, parsedQuery).query()
+
+  // call the relevant CRUD method on the integration class
+  const response = await new Integration(datasource.config, parsedQuery)[
+    query.queryVerb
+  ]()
 
   ctx.body = response
 }
diff --git a/packages/server/src/api/routes/query.js b/packages/server/src/api/routes/query.js
index 22d308bac9..0159064c4c 100644
--- a/packages/server/src/api/routes/query.js
+++ b/packages/server/src/api/routes/query.js
@@ -12,10 +12,10 @@ const joiValidator = require("../../middleware/joi-validator")
 const router = Router()
 
 const QueryVerb = {
-  Create: "CREATE",
-  Read: "READ",
-  Update: "UPDATE",
-  Delete: "DELETE",
+  Create: "create",
+  Read: "read",
+  Update: "update",
+  Delete: "delete",
 }
 
 function generateQueryValidation() {
@@ -30,7 +30,7 @@ function generateQueryValidation() {
       name: Joi.string(),
       default: Joi.string()
     })),
-    // queryVerb: Joi.string().allow(...Object.values(QueryVerb)).required(),
+    queryVerb: Joi.string().allow(...Object.values(QueryVerb)).required(),
     queryType: Joi.string().required(),
     schema: Joi.object({}).required().unknown(true)
   }))
@@ -40,6 +40,7 @@ function generateQueryPreviewValidation() {
   // prettier-ignore
   return joiValidator.body(Joi.object({
     query: Joi.string(),
+    queryVerb: Joi.string().allow(...Object.values(QueryVerb)).required(),
     datasourceId: Joi.string().required(),
     parameters: Joi.object({}).required().unknown(true)
   }))
diff --git a/packages/server/src/db/utils.js b/packages/server/src/db/utils.js
index 4ebd95ca98..4045e63313 100644
--- a/packages/server/src/db/utils.js
+++ b/packages/server/src/db/utils.js
@@ -254,6 +254,14 @@ exports.generateQueryID = datasourceId => {
 /**
  * Gets parameters for retrieving a query, this is a utility function for the getDocParams function.
  */
-exports.getQueryParams = (queryId = null, otherProps = {}) => {
-  return getDocParams(DocumentTypes.QUERY, queryId, otherProps)
+exports.getQueryParams = (datasourceId = null, otherProps = {}) => {
+  if (datasourceId == null) {
+    return getDocParams(DocumentTypes.QUERY, null, otherProps)
+  }
+
+  return getDocParams(
+    DocumentTypes.QUERY,
+    `${datasourceId}${SEPARATOR}`,
+    otherProps
+  )
 }
diff --git a/packages/server/src/integrations/airtable.js b/packages/server/src/integrations/airtable.js
index 561df03cc2..0d109e8b54 100644
--- a/packages/server/src/integrations/airtable.js
+++ b/packages/server/src/integrations/airtable.js
@@ -31,11 +31,6 @@ class AirtableIntegration {
 
   // }
 
-  async read() {
-    const response = await this.client.query(this.queryString)
-    return response.rows
-  }
-
   // async update() {
 
   // }
@@ -44,9 +39,9 @@ class AirtableIntegration {
 
   // }
 
-  async query() {
+  async read() {
     const records = await this.client(this.config.table)
-      .select({ maxRecords: 10, view: "Grid view" })
+      .select({ maxRecords: this.query.records, view: this.query.view })
       .firstPage()
     return records.map(({ fields }) => fields)
   }
diff --git a/packages/server/src/integrations/couchdb.js b/packages/server/src/integrations/couchdb.js
index 0d7a1dd05d..8a2dcaa214 100644
--- a/packages/server/src/integrations/couchdb.js
+++ b/packages/server/src/integrations/couchdb.js
@@ -30,7 +30,7 @@ class CouchDBIntegration {
     this.client = new PouchDB(`${config.url}/${config.database}`)
   }
 
-  async query() {
+  async read() {
     try {
       const result = await this.client.allDocs({
         include_docs: true,
diff --git a/packages/server/src/integrations/dynamodb.js b/packages/server/src/integrations/dynamodb.js
index 3f5f3b8a76..aec93e0933 100644
--- a/packages/server/src/integrations/dynamodb.js
+++ b/packages/server/src/integrations/dynamodb.js
@@ -62,7 +62,7 @@ class DynamoDBIntegration {
     AWS.config.update(this.config)
   }
 
-  async query() {
+  async read() {
     const response = await this.client.query({
       TableName: this.config.table,
       KeyConditionExpression: this.config.KeyConditionExpression,
diff --git a/packages/server/src/integrations/elasticsearch.js b/packages/server/src/integrations/elasticsearch.js
index 048e5b4bfd..d4ac64d0e7 100644
--- a/packages/server/src/integrations/elasticsearch.js
+++ b/packages/server/src/integrations/elasticsearch.js
@@ -26,7 +26,7 @@ class ElasticSearchIntegration {
     this.client = new Client({ node: config.url })
   }
 
-  async query() {
+  async read() {
     try {
       const result = await this.client.search({
         index: this.config.index,
diff --git a/packages/server/src/integrations/microsoftSqlServer.js b/packages/server/src/integrations/microsoftSqlServer.js
index 99f661d649..d8e7949aad 100644
--- a/packages/server/src/integrations/microsoftSqlServer.js
+++ b/packages/server/src/integrations/microsoftSqlServer.js
@@ -37,7 +37,7 @@ class SqlServerIntegration {
     return await this.client.connect(this.config)
   }
 
-  async query() {
+  async read() {
     try {
       await this.connect()
       const response = await this.client.query(this.config.query)
diff --git a/packages/server/src/integrations/mongodb.js b/packages/server/src/integrations/mongodb.js
index 5a15ac906b..984ed11068 100644
--- a/packages/server/src/integrations/mongodb.js
+++ b/packages/server/src/integrations/mongodb.js
@@ -17,7 +17,7 @@ const SCHEMA = {
     },
   },
   query: {
-    json: {
+    JSON: {
       type: "json",
     },
   },
@@ -32,15 +32,15 @@ class MongoIntegration {
     } catch (err) {
       this.config.query = {}
     }
+    this.connect()
   }
 
   async connect() {
     return this.client.connect()
   }
 
-  async query() {
+  async read() {
     try {
-      await this.connect()
       const db = this.client.db(this.config.db)
       const collection = db.collection(this.config.collection)
       const result = await collection.find(this.config.query).toArray()
diff --git a/packages/server/src/integrations/postgres.js b/packages/server/src/integrations/postgres.js
index 2f7eca7fd0..e7a0c4dab6 100644
--- a/packages/server/src/integrations/postgres.js
+++ b/packages/server/src/integrations/postgres.js
@@ -104,10 +104,10 @@ class PostgresIntegration {
 
   // }
 
-  async query() {
-    const response = await this.client.query(this.queryString)
-    return response.rows
-  }
+  // async query() {
+  //   const response = await this.client.query(this.queryString)
+  //   return response.rows
+  // }
 }
 
 module.exports = {

From 19f6139a1adabf4923c22456f24975a7ccfbb947 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 12 Jan 2021 17:04:51 +0000
Subject: [PATCH 24/70] allow deletion of queries and datasources

---
 packages/builder/src/components/common/BottomDrawer.svelte | 1 +
 .../src/components/userInterface/TableViewSelect.svelte    | 7 +++++--
 packages/server/src/api/controllers/datasource.js          | 2 +-
 packages/server/src/api/controllers/query.js               | 2 +-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/common/BottomDrawer.svelte b/packages/builder/src/components/common/BottomDrawer.svelte
index 970b8dbbd5..dc442bc2c3 100644
--- a/packages/builder/src/components/common/BottomDrawer.svelte
+++ b/packages/builder/src/components/common/BottomDrawer.svelte
@@ -47,5 +47,6 @@
 
   .close {
     font-size: var(--font-size-xl);
+    cursor: pointer;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/TableViewSelect.svelte b/packages/builder/src/components/userInterface/TableViewSelect.svelte
index 42ac6e7c7e..a7f1f87a0e 100644
--- a/packages/builder/src/components/userInterface/TableViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableViewSelect.svelte
@@ -2,7 +2,7 @@
   import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { store, backendUiStore, currentAsset } from "builderStore"
-  // import DataBindingDrawer from "components/userInterface/DataBindingDrawer/index.svelte"
+  import { notifier } from "builderStore/store/notifications"
   import BottomDrawer from "components/common/BottomDrawer.svelte"
   import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
   import fetchBindableProperties from "../../builderStore/fetchBindableProperties"
@@ -92,7 +92,10 @@
   {#if bindingDrawerOpen}
     <BottomDrawer title={'Query'} onClose={closeDatabindingDrawer}>
       <div slot="buttons">
-        <Button blue thin on:click={() => handleSelected(value)}>Save</Button>
+        <Button blue thin on:click={() => { 
+          notifier.success("Query parameters saved.")
+          handleSelected(value)
+        }}>Save</Button>
       </div>
       <div class="drawer-contents" slot="body">
         <pre>{value.queryString}</pre>
diff --git a/packages/server/src/api/controllers/datasource.js b/packages/server/src/api/controllers/datasource.js
index b3ef1d7c0e..ba8cb589ef 100644
--- a/packages/server/src/api/controllers/datasource.js
+++ b/packages/server/src/api/controllers/datasource.js
@@ -66,7 +66,7 @@ exports.destroy = async function(ctx) {
   await db.bulkDocs(rows.rows.map(row => ({ ...row.doc, _deleted: true })))
 
   // delete the datasource
-  await db.destroy(ctx.params.datasourceId)
+  await db.remove(ctx.params.datasourceId)
 
   ctx.message = `Datasource deleted.`
   ctx.status = 200
diff --git a/packages/server/src/api/controllers/query.js b/packages/server/src/api/controllers/query.js
index 3b907a56ec..c1e0b879c0 100644
--- a/packages/server/src/api/controllers/query.js
+++ b/packages/server/src/api/controllers/query.js
@@ -79,7 +79,7 @@ exports.execute = async function(ctx) {
 
 exports.destroy = async function(ctx) {
   const db = new CouchDB(ctx.user.appId)
-  await db.destroy(ctx.params.queryId)
+  await db.remove(ctx.params.queryId)
   ctx.message = `Query deleted.`
   ctx.status = 200
 }

From 33d63607e237c9742215119d23652e1730794108 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 12 Jan 2021 17:45:43 +0000
Subject: [PATCH 25/70] Add all CRUD ops to airtable integration

---
 .../builder/src/builderStore/store/backend.js |  8 +--
 .../popovers/EditDatasourcePopover.svelte     |  2 -
 .../popovers/EditQueryPopover.svelte          |  2 +-
 .../DataBindingDrawer/index.svelte            | 62 -------------------
 .../[selectedDatasource]/[query]/index.svelte | 12 +++-
 .../server/src/api/controllers/datasource.js  |  2 +-
 packages/server/src/api/controllers/query.js  |  2 +-
 packages/server/src/api/routes/query.js       |  6 +-
 packages/server/src/integrations/airtable.js  | 61 ++++++++++++++----
 .../server/src/integrations/elasticsearch.js  | 19 +++++-
 packages/server/src/integrations/postgres.js  | 61 ++++--------------
 11 files changed, 101 insertions(+), 136 deletions(-)
 delete mode 100644 packages/builder/src/components/userInterface/DataBindingDrawer/index.svelte

diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index 0ada121790..f646c84d3d 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -139,13 +139,13 @@ export const getBackendUiStore = () => {
           state.selectedQueryId = queryId
           return state
         }),
-      delete: async queryId => {
-        await api.delete(`/api/queries/${queryId}`)
+      delete: async query => {
+        await api.delete(`/api/queries/${query._id}/${query._rev}`)
         store.update(state => {
           state.queries = state.queries.filter(
-            existing => existing._id !== queryId
+            existing => existing._id !== query._id
           )
-          if (state.selectedQueryId === queryId) {
+          if (state.selectedQueryId === query._id) {
             state.selectedQueryId = null
           }
 
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
index d72ca668b1..d76c8cdcd5 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
@@ -25,9 +25,7 @@
   }
 
   async function deleteDatasource() {
-    // TODO: update the store correctly
     await backendUiStore.actions.datasources.delete(datasource)
-    // await backendUiStore.actions.datasources.fetch()
     notifier.success("Datasource deleted")
     hideEditor()
   }
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
index ccd48c2d9e..676458fd29 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
@@ -24,7 +24,7 @@
   }
 
   async function deleteQuery() {
-    await backendUiStore.actions.queries.delete(query._id)
+    await backendUiStore.actions.queries.delete(query)
     notifier.success("Query deleted")
     hideEditor()
   }
diff --git a/packages/builder/src/components/userInterface/DataBindingDrawer/index.svelte b/packages/builder/src/components/userInterface/DataBindingDrawer/index.svelte
deleted file mode 100644
index 023784b3f2..0000000000
--- a/packages/builder/src/components/userInterface/DataBindingDrawer/index.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<script>
-  import BottomDrawer from "components/common/BottomDrawer.svelte"
-  import { Button } from "@budibase/bbui"
-  import { store, backendUiStore, currentAsset } from "builderStore"
-  import { slide } from "svelte/transition"
-  import fetchBindableProperties from "builderStore/fetchBindableProperties"
-  import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
-
-  export let query
-  export let parameters = {}
-
-  $: console.log("CUSTOM PARAMS", parameters)
-
-  $: bindableProperties = fetchBindableProperties({
-    componentInstanceId: $store.selectedComponentId,
-    components: $store.components,
-    screen: $currentAsset,
-    tables: $backendUiStore.tables,
-  }).map(property => ({
-    ...property,
-    category: property.type === "instance" ? "Component" : "Table",
-    label: property.readableBinding,
-    path: property.readableBinding,
-  }))
-
-  function closeDatabindingDrawer() {
-    store.update(state => {
-      state.bottomDrawerVisible = false
-      return state
-    })
-  }
-
-  function saveComponentQuery() {
-    // save the parameters to the datasource of the component
-  }
-</script>
-
-{#if query}
-  <BottomDrawer title={'Query'} onClose={closeDatabindingDrawer}>
-    <div slot="buttons">
-      <Button blue thin on:click={saveComponentQuery}>Save</Button>
-    </div>
-    <div class="drawer-contents" slot="body">
-      <pre>{query.queryString}</pre>
-      <ParameterBuilder
-        bind:customParams={parameters}
-        parameters={query.parameters}
-        bindings={bindableProperties} />
-    </div>
-  </BottomDrawer>
-{/if}
-
-<style>
-  .drawer-contents {
-    display: grid;
-    grid-auto-flow: column;
-    grid-template-columns: 20% 1fr;
-    grid-gap: var(--spacing-m);
-    height: 100%;
-    padding: var(--spacing-xl);
-  }
-</style>
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 137920b874..c10813076e 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
@@ -6,6 +6,17 @@
 
   let query
 
+  async function fetchQueryConfig() {
+    try {
+      const response = await api.get(`/api/integrations/${datasource.source}`)
+      const json = await response.json()
+      config = json.query
+    } catch (err) {
+      notifier.danger("Error fetching datasource configuration options.")
+      console.error(err)
+    }
+  }
+
   $: {
     if ($params.query !== "new") {
       query = $backendUiStore.queries.find(query => query._id === $params.query)
@@ -15,7 +26,6 @@
         datasourceId: $params.selectedDatasource,
         name: "New Query",
         parameters: [],
-        // TODO: set dynamically
       }
     }
   }
diff --git a/packages/server/src/api/controllers/datasource.js b/packages/server/src/api/controllers/datasource.js
index ba8cb589ef..7cd530121d 100644
--- a/packages/server/src/api/controllers/datasource.js
+++ b/packages/server/src/api/controllers/datasource.js
@@ -66,7 +66,7 @@ exports.destroy = async function(ctx) {
   await db.bulkDocs(rows.rows.map(row => ({ ...row.doc, _deleted: true })))
 
   // delete the datasource
-  await db.remove(ctx.params.datasourceId)
+  await db.remove(ctx.params.datasourceId, ctx.params.revId)
 
   ctx.message = `Datasource deleted.`
   ctx.status = 200
diff --git a/packages/server/src/api/controllers/query.js b/packages/server/src/api/controllers/query.js
index c1e0b879c0..d967c83d09 100644
--- a/packages/server/src/api/controllers/query.js
+++ b/packages/server/src/api/controllers/query.js
@@ -79,7 +79,7 @@ exports.execute = async function(ctx) {
 
 exports.destroy = async function(ctx) {
   const db = new CouchDB(ctx.user.appId)
-  await db.remove(ctx.params.queryId)
+  await db.remove(ctx.params.queryId, ctx.params.revId)
   ctx.message = `Query deleted.`
   ctx.status = 200
 }
diff --git a/packages/server/src/api/routes/query.js b/packages/server/src/api/routes/query.js
index 0159064c4c..8d1526f1e2 100644
--- a/packages/server/src/api/routes/query.js
+++ b/packages/server/src/api/routes/query.js
@@ -65,6 +65,10 @@ router
     authorized(PermissionTypes.QUERY, PermissionLevels.WRITE),
     queryController.execute
   )
-  .delete("/api/queries/:queryId", authorized(BUILDER), queryController.destroy)
+  .delete(
+    "/api/queries/:queryId/:revId",
+    authorized(BUILDER),
+    queryController.destroy
+  )
 
 module.exports = router
diff --git a/packages/server/src/integrations/airtable.js b/packages/server/src/integrations/airtable.js
index 0d109e8b54..f21fc3e301 100644
--- a/packages/server/src/integrations/airtable.js
+++ b/packages/server/src/integrations/airtable.js
@@ -18,7 +18,15 @@ const SCHEMA = {
       required: true,
     },
   },
-  query: {},
+  query: {
+    Custom: {
+      type: "fields",
+      custom: true,
+    },
+    "Airtable Ids": {
+      type: "list",
+    },
+  },
 }
 
 class AirtableIntegration {
@@ -27,17 +35,19 @@ class AirtableIntegration {
     this.client = new Airtable(config).base(config.base)
   }
 
-  // async create() {
-
-  // }
-
-  // async update() {
-
-  // }
-
-  // async delete() {
-
-  // }
+  async create(record) {
+    try {
+      const records = await this.client(this.config.table).create([
+        {
+          fields: record,
+        },
+      ])
+      return records
+    } catch (err) {
+      console.error("Error writing to airtable", err)
+      throw err
+    }
+  }
 
   async read() {
     const records = await this.client(this.config.table)
@@ -45,6 +55,33 @@ class AirtableIntegration {
       .firstPage()
     return records.map(({ fields }) => fields)
   }
+
+  async update(document) {
+    const { id, ...rest } = document
+
+    try {
+      const records = await this.client(this.config.table).update([
+        {
+          id,
+          fields: rest,
+        },
+      ])
+      return records
+    } catch (err) {
+      console.error("Error writing to airtable", err)
+      throw err
+    }
+  }
+
+  async delete(id) {
+    try {
+      const records = await this.client(this.config.table).destroy([id])
+      return records
+    } catch (err) {
+      console.error("Error writing to airtable", err)
+      throw err
+    }
+  }
 }
 
 module.exports = {
diff --git a/packages/server/src/integrations/elasticsearch.js b/packages/server/src/integrations/elasticsearch.js
index d4ac64d0e7..8e9e92be42 100644
--- a/packages/server/src/integrations/elasticsearch.js
+++ b/packages/server/src/integrations/elasticsearch.js
@@ -26,11 +26,26 @@ class ElasticSearchIntegration {
     this.client = new Client({ node: config.url })
   }
 
-  async read() {
+  async create(document) {
+    try {
+      const result = await this.client.index({
+        index: this.config.index,
+        body: JSON.parse(document),
+      })
+      return [result]
+    } catch (err) {
+      console.error("Error writing to elasticsearch", err)
+      throw err
+    } finally {
+      await this.client.close()
+    }
+  }
+
+  async read(query) {
     try {
       const result = await this.client.search({
         index: this.config.index,
-        body: JSON.parse(this.config.query),
+        body: JSON.parse(query),
       })
       return result.body.hits.hits.map(({ _source }) => _source)
     } catch (err) {
diff --git a/packages/server/src/integrations/postgres.js b/packages/server/src/integrations/postgres.js
index e7a0c4dab6..8b6ce6f618 100644
--- a/packages/server/src/integrations/postgres.js
+++ b/packages/server/src/integrations/postgres.js
@@ -32,41 +32,6 @@ const SCHEMA = {
     SQL: {
       type: "sql",
     },
-    "Simple Query": {
-      type: "fields",
-      fields: {
-        table: {
-          type: "string",
-        },
-        column: {
-          type: "string",
-        },
-        condition: {
-          type: "options",
-          options: [
-            {
-              name: "Equals",
-              value: "=",
-            },
-            {
-              name: "Not Equals",
-              value: "!=",
-            },
-            {
-              name: "Greater Than",
-              value: ">",
-            },
-            {
-              name: "Less Than",
-              value: "<",
-            },
-          ],
-        },
-        value: {
-          type: "string",
-        },
-      },
-    },
   },
 }
 
@@ -87,27 +52,25 @@ class PostgresIntegration {
     return this.client.connect()
   }
 
-  // async create() {
-
-  // }
+  async create() {
+    const response = await this.client.query(this.queryString)
+    return response.rows
+  }
 
   async read() {
     const response = await this.client.query(this.queryString)
     return response.rows
   }
 
-  // async update() {
+  async update() {
+    const response = await this.client.query(this.queryString)
+    return response.rows
+  }
 
-  // }
-
-  // async delete() {
-
-  // }
-
-  // async query() {
-  //   const response = await this.client.query(this.queryString)
-  //   return response.rows
-  // }
+  async delete() {
+    const response = await this.client.query(this.queryString)
+    return response.rows
+  }
 }
 
 module.exports = {

From 94ee5855a519920e83ad46386ba92ac7057e12f3 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Wed, 13 Jan 2021 14:11:53 +0000
Subject: [PATCH 26/70] custom fields in queries

---
 .../integration/QueryFieldsBuilder.svelte     | 69 +++++++++++++++
 .../components/integration/QueryViewer.svelte | 31 ++++---
 .../src/components/integration/index.svelte   | 17 ++--
 .../EventsEditor/actions/ExecuteQuery.svelte  |  4 +-
 .../[selectedDatasource]/[query]/index.svelte |  1 +
 packages/server/src/api/controllers/query.js  | 39 +++++----
 packages/server/src/api/routes/query.js       |  4 +-
 .../server/src/integrations/Integration.js    |  7 ++
 packages/server/src/integrations/airtable.js  | 85 ++++++++++++++-----
 packages/server/src/integrations/postgres.js  | 45 ++++++----
 10 files changed, 223 insertions(+), 79 deletions(-)
 create mode 100644 packages/builder/src/components/integration/QueryFieldsBuilder.svelte

diff --git a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
new file mode 100644
index 0000000000..cf067dfb93
--- /dev/null
+++ b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
@@ -0,0 +1,69 @@
+<script>
+  import {
+    Button,
+    TextArea,
+    Label,
+    Input,
+    Heading,
+    Spacer,
+    Select
+  } from "@budibase/bbui"
+
+  export let fields = {}
+  export let schema
+
+  let customSchema = {}
+  let draftField = {}
+
+  function addField() {
+    // Add the new field to custom fields for the query
+    customSchema[draftField.name] = {
+      type: draftField.type
+    }
+    // reset the draft field
+    draftField = {}
+  }
+</script>
+
+<form on:submit|preventDefault>
+  {#each Object.keys(schema.fields) as field}
+    <Label extraSmall grey>{field}</Label>
+    <Input
+      type={schema.fields[field]?.type}
+      required={schema.fields[field]?.required}
+      bind:value={fields[field]} />
+    <Spacer medium />
+  {/each}
+  {#if schema.customisable}
+    <Label>Add Custom Field</Label>
+    {#each Object.keys(customSchema) as field}
+      <Label extraSmall grey>{field}</Label>
+      <Input 
+        thin
+        type={customSchema[field]?.type}
+        bind:value={fields[field]} 
+      />
+      <Spacer medium />
+    {/each}
+    <div class="new-field">
+      <Label extraSmall grey>Name</Label>
+      <Label extraSmall grey>Type</Label>
+      <Input thin bind:value={draftField.name} />
+      <Select thin secondary bind:value={draftField.name}>
+        <option value={"text"}>String</option>
+        <option value={"number"}>Number</option>
+      </Select>
+    </div>
+    <Button small thin primary on:click={addField}>Add Field</Button>
+  {/if}
+</form>
+
+<style>
+.new-field {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: var(--spacing-m);
+  margin-top: var(--spacing-m);
+  margin-bottom: var(--spacing-m);
+}
+</style>
\ No newline at end of file
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 99d3afbdf4..48eda4016b 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -37,7 +37,7 @@
   export let query
   export let fields = []
 
-  let config = {}
+  let config
   let tab = "JSON"
   let parameters
   let data
@@ -60,6 +60,8 @@
   $: datasourceType = datasource.source
   $: datasourceType && fetchQueryConfig()
 
+  $: shouldShowQueryConfig = config && query.queryVerb && query.queryType
+
   function newField() {
     fields = [...fields, {}]
   }
@@ -75,8 +77,7 @@
       const json = await response.json()
       config = json.query
     } catch (err) {
-      // TODO: Error fetching integration config
-      // notifier.danger()
+      notifier.danger("Error fetching integration configuration.")
       console.error(err)
     }
   }
@@ -84,6 +85,7 @@
   async function previewQuery() {
     try {
       const response = await api.post(`/api/queries/preview`, {
+        fields: query.fields,
         queryVerb: query.queryVerb,
         parameters: query.parameters.reduce(
           (acc, next) => ({
@@ -93,7 +95,6 @@
           {}
         ),
         datasourceId: datasource._id,
-        query: query.queryString,
       })
       const json = await response.json()
 
@@ -107,6 +108,7 @@
         name: field,
         type: "STRING",
       }))
+      notifier.success("Query executed successfully.")
     } catch (err) {
       notifier.danger(`Query Error: ${err.message}`)
       console.error(err)
@@ -138,17 +140,19 @@
       </div>
     {/each}
   </div>
-  <Select thin secondary bind:value={query.queryType}>
-    <option value={''}>Select an option</option>
-    {#each Object.keys(config) as queryType}
-      <option value={config[queryType].type}>{queryType}</option>
-    {/each}
-  </Select>
+  {#if config && query.queryVerb}
+    <Select thin secondary bind:value={query.queryType}>
+      <option value={''}>Select an option</option>
+      {#each Object.keys(config[query.queryVerb]) as queryType}
+        <option value={queryType}>{queryType}</option>
+      {/each}
+    </Select>
+  {/if}
 </header>
 
 <Spacer large />
 
-{#if query.queryVerb && query.queryType}
+{#if shouldShowQueryConfig}
   <section>
     <div class="config">
       <Label extraSmall grey>Query Name</Label>
@@ -156,7 +160,10 @@
 
       <Spacer medium />
 
-      <IntegrationQueryEditor {query} bind:parameters />
+      <IntegrationQueryEditor
+        schema={config[query.queryVerb][query.queryType]}
+        {query}
+        bind:parameters />
 
       <Spacer medium />
 
diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte
index 9e3e9aaa08..b0003ef2ef 100644
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@@ -2,6 +2,7 @@
   import { TextArea, Label, Input, Heading, Spacer } from "@budibase/bbui"
   import Editor from "./SvelteEditor.svelte"
   import ParameterBuilder from "./QueryParameterBuilder.svelte"
+  import FieldsBuilder from "./QueryFieldsBuilder.svelte"
 
   const QueryTypes = {
     SQL: "sql",
@@ -10,9 +11,10 @@
   }
 
   export let query
+  export let schema
 
   function updateQuery({ detail }) {
-    query.queryString = detail.value
+    query.fields.sql = detail.value
   }
 </script>
 
@@ -22,20 +24,19 @@
 <Heading extraSmall black>Query</Heading>
 <Spacer large />
 
-{#if query.queryType === QueryTypes.SQL}
-  <!-- <TextArea bind:value={query.queryString} /> -->
+{#if schema.type === QueryTypes.SQL}
   <Editor
     label="Query"
     mode="sql"
     on:change={updateQuery}
-    value={query.queryString} />
-{:else if query.queryType === QueryTypes.JSON}
+    value={query.fields.sql} />
+{:else if schema.type === QueryTypes.JSON}
   <Spacer large />
   <Editor
     label="Query"
     mode="json"
     on:change={updateQuery}
-    value={query.queryString} />
-{:else if query.queryType === QueryTypes.FIELDS}
-  <!-- {#each Object.keys()} -->
+    value={query.fields.json} />
+{:else if schema.type === QueryTypes.FIELDS}
+  <FieldsBuilder bind:fields={query.fields} {schema} />
 {/if}
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
index 2cbfbcd6e3..910fa1e593 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
@@ -57,7 +57,9 @@
       bind:customParams={parameters.queryParams}
       parameters={query.parameters}
       bindings={bindableProperties} />
-    <pre>{query.queryString}</pre>
+    {#if query.fields.sql}
+      <pre>{query.fields.queryString}</pre>
+    {/if}
   {/if}
 </div>
 
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 c10813076e..bc2cae7537 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
@@ -26,6 +26,7 @@
         datasourceId: $params.selectedDatasource,
         name: "New Query",
         parameters: [],
+        fields: {},
       }
     }
   }
diff --git a/packages/server/src/api/controllers/query.js b/packages/server/src/api/controllers/query.js
index d967c83d09..257e644b3c 100644
--- a/packages/server/src/api/controllers/query.js
+++ b/packages/server/src/api/controllers/query.js
@@ -29,18 +29,20 @@ exports.save = async function(ctx) {
   ctx.message = `Query ${query.name} saved successfully.`
 }
 
-exports.preview = async function(ctx) {
-  const { query, datasourceId, parameters, queryVerb } = ctx.request.body
-
-  let parsedQuery = ""
-  if (query) {
-    const queryTemplate = handlebars.compile(query)
-    parsedQuery = queryTemplate(parameters)
+function enrichQueryFields(fields, parameters) {
+  const enrichedQuery = {}
+  // enrich the fields with dynamic parameters
+  for (let key in fields) {
+    const template = handlebars.compile(fields[key])
+    enrichedQuery[key] = template(parameters)
   }
+  return enrichedQuery
+}
 
+exports.preview = async function(ctx) {
   const db = new CouchDB(ctx.user.appId)
 
-  const datasource = await db.get(datasourceId)
+  const datasource = await db.get(ctx.request.body.datasourceId)
 
   const Integration = integrations[datasource.source]
 
@@ -49,7 +51,11 @@ exports.preview = async function(ctx) {
     return
   }
 
-  ctx.body = await new Integration(datasource.config, parsedQuery)[queryVerb]()
+  const { fields, parameters, queryVerb } = ctx.request.body
+
+  const enrichedQuery = enrichQueryFields(fields, parameters)
+
+  ctx.body = await new Integration(datasource.config)[queryVerb](enrichedQuery)
 }
 
 exports.execute = async function(ctx) {
@@ -58,10 +64,6 @@ exports.execute = async function(ctx) {
   const query = await db.get(ctx.params.queryId)
   const datasource = await db.get(query.datasourceId)
 
-  const queryTemplate = handlebars.compile(query.queryString)
-
-  const parsedQuery = queryTemplate(ctx.request.body.parameters)
-
   const Integration = integrations[datasource.source]
 
   if (!Integration) {
@@ -69,10 +71,15 @@ exports.execute = async function(ctx) {
     return
   }
 
+  const enrichedQuery = enrichQueryFields(
+    query.fields,
+    ctx.request.body.parameters
+  )
+
   // call the relevant CRUD method on the integration class
-  const response = await new Integration(datasource.config, parsedQuery)[
-    query.queryVerb
-  ]()
+  const response = await new Integration(datasource.config)[query.queryVerb](
+    enrichedQuery
+  )
 
   ctx.body = response
 }
diff --git a/packages/server/src/api/routes/query.js b/packages/server/src/api/routes/query.js
index 8d1526f1e2..62ddc83ac0 100644
--- a/packages/server/src/api/routes/query.js
+++ b/packages/server/src/api/routes/query.js
@@ -24,7 +24,7 @@ function generateQueryValidation() {
     _id: Joi.string(),
     _rev: Joi.string(),
     name: Joi.string().required(),
-    queryString: Joi.string().required(),
+    fields: Joi.object().required(),
     datasourceId: Joi.string().required(),
     parameters: Joi.array().items(Joi.object({
       name: Joi.string(),
@@ -39,7 +39,7 @@ function generateQueryValidation() {
 function generateQueryPreviewValidation() {
   // prettier-ignore
   return joiValidator.body(Joi.object({
-    query: Joi.string(),
+    fields: Joi.object().required(),
     queryVerb: Joi.string().allow(...Object.values(QueryVerb)).required(),
     datasourceId: Joi.string().required(),
     parameters: Joi.object({}).required().unknown(true)
diff --git a/packages/server/src/integrations/Integration.js b/packages/server/src/integrations/Integration.js
index e69de29bb2..2305f0ea55 100644
--- a/packages/server/src/integrations/Integration.js
+++ b/packages/server/src/integrations/Integration.js
@@ -0,0 +1,7 @@
+class Field {
+  constructor(type, defaultValue, required) {
+    this.type = type
+    this.default = defaultValue
+    this.required = required
+  }
+}
diff --git a/packages/server/src/integrations/airtable.js b/packages/server/src/integrations/airtable.js
index f21fc3e301..b7300ac446 100644
--- a/packages/server/src/integrations/airtable.js
+++ b/packages/server/src/integrations/airtable.js
@@ -12,19 +12,51 @@ const SCHEMA = {
       default: "mybase",
       required: true,
     },
-    table: {
-      type: "string",
-      default: "mytable",
-      required: true,
-    },
   },
   query: {
-    Custom: {
-      type: "fields",
-      custom: true,
+    create: {
+      "Airtable Record": {
+        type: "fields",
+        customisable: true,
+        fields: {
+          table: {
+            type: "string",
+            required: true,
+          },
+        },
+      },
     },
-    "Airtable Ids": {
-      type: "list",
+    read: {
+      Table: {
+        type: "fields",
+        fields: {
+          table: {
+            type: "string",
+            required: true,
+          },
+          view: {
+            type: "string",
+            required: true,
+          },
+        },
+      },
+    },
+    update: {
+      Fields: {
+        type: "fields",
+        customisable: true,
+        fields: {
+          id: {
+            type: "string",
+            required: true,
+          },
+        },
+      },
+    },
+    delete: {
+      "Airtable Ids": {
+        type: "list",
+      },
     },
   },
 }
@@ -35,11 +67,13 @@ class AirtableIntegration {
     this.client = new Airtable(config).base(config.base)
   }
 
-  async create(record) {
+  async create(query) {
+    const { table, ...rest } = query
+
     try {
-      const records = await this.client(this.config.table).create([
+      const records = await this.client(table).create([
         {
-          fields: record,
+          fields: rest,
         },
       ])
       return records
@@ -49,18 +83,23 @@ class AirtableIntegration {
     }
   }
 
-  async read() {
-    const records = await this.client(this.config.table)
-      .select({ maxRecords: this.query.records, view: this.query.view })
-      .firstPage()
-    return records.map(({ fields }) => fields)
+  async read(query) {
+    try {
+      const records = await this.client(query.table)
+        .select({ maxRecords: 10, view: query.view })
+        .firstPage()
+      return records.map(({ fields }) => fields)
+    } catch (err) {
+      console.error("Error writing to airtable", err)
+      return []
+    }
   }
 
-  async update(document) {
-    const { id, ...rest } = document
+  async update(query) {
+    const { table, id, ...rest } = query
 
     try {
-      const records = await this.client(this.config.table).update([
+      const records = await this.client(table).update([
         {
           id,
           fields: rest,
@@ -73,9 +112,9 @@ class AirtableIntegration {
     }
   }
 
-  async delete(id) {
+  async delete(query) {
     try {
-      const records = await this.client(this.config.table).destroy([id])
+      const records = await this.client(query.table).destroy(query.ids)
       return records
     } catch (err) {
       console.error("Error writing to airtable", err)
diff --git a/packages/server/src/integrations/postgres.js b/packages/server/src/integrations/postgres.js
index 8b6ce6f618..d6e5041003 100644
--- a/packages/server/src/integrations/postgres.js
+++ b/packages/server/src/integrations/postgres.js
@@ -29,46 +29,57 @@ const SCHEMA = {
     },
   },
   query: {
-    SQL: {
-      type: "sql",
+    create: {
+      SQL: {
+        type: "sql",
+      },
+    },
+    read: {
+      SQL: {
+        type: "sql",
+      },
+    },
+    update: {
+      SQL: {
+        type: "sql",
+      },
+    },
+    delete: {
+      SQL: {
+        type: "sql",
+      },
     },
   },
 }
 
 class PostgresIntegration {
-  constructor(config, query) {
+  constructor(config) {
     this.config = config
-    this.queryString = this.buildQuery(query)
     this.client = new Client(config)
     this.connect()
   }
 
-  buildQuery(query) {
-    // TODO: account for different types
-    return query
-  }
-
   async connect() {
     return this.client.connect()
   }
 
-  async create() {
-    const response = await this.client.query(this.queryString)
+  async create({ sql }) {
+    const response = await this.client.query(sql)
     return response.rows
   }
 
-  async read() {
-    const response = await this.client.query(this.queryString)
+  async read({ sql }) {
+    const response = await this.client.query(sql)
     return response.rows
   }
 
-  async update() {
-    const response = await this.client.query(this.queryString)
+  async update({ sql }) {
+    const response = await this.client.query(sql)
     return response.rows
   }
 
-  async delete() {
-    const response = await this.client.query(this.queryString)
+  async delete({ sql }) {
+    const response = await this.client.query(sql)
     return response.rows
   }
 }

From 01ff661f17ed9967cd5fa7fbce59ca6d6c4e5922 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Wed, 13 Jan 2021 16:39:47 +0000
Subject: [PATCH 27/70] schema updates, custom fields

---
 .../IntegrationConfigForm.svelte              |  2 +-
 .../integration/QueryFieldsBuilder.svelte     |  3 +-
 .../components/integration/QueryViewer.svelte | 40 +++++------
 .../src/components/integration/index.svelte   | 34 ++++-----
 .../[selectedDatasource]/index.svelte         |  4 +-
 .../server/src/integrations/Integration.js    | 17 +++--
 packages/server/src/integrations/airtable.js  | 19 ++---
 packages/server/src/integrations/dynamodb.js  | 69 +++++++++----------
 .../server/src/integrations/elasticsearch.js  |  6 +-
 .../src/integrations/microsoftSqlServer.js    | 35 +++++++---
 packages/server/src/integrations/mongodb.js   | 39 ++++++++---
 packages/server/src/integrations/s3.js        | 26 ++++---
 12 files changed, 170 insertions(+), 124 deletions(-)

diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
index e7ce7aea49..79bb951c01 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
@@ -8,7 +8,7 @@
   {#each Object.keys(integration) as configKey}
     <Input
       thin
-      type={configKey.type}
+      type={integration[configKey].type}
       label={configKey}
       bind:value={integration[configKey]} />
     <Spacer medium />
diff --git a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
index cf067dfb93..993dc43c0e 100644
--- a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
@@ -35,6 +35,7 @@
     <Spacer medium />
   {/each}
   {#if schema.customisable}
+    <Spacer large />
     <Label>Add Custom Field</Label>
     {#each Object.keys(customSchema) as field}
       <Label extraSmall grey>{field}</Label>
@@ -54,7 +55,7 @@
         <option value={"number"}>Number</option>
       </Select>
     </div>
-    <Button small thin primary on:click={addField}>Add Field</Button>
+    <Button small thin secondary on:click={addField}>Add Field</Button>
   {/if}
 </form>
 
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 48eda4016b..01be849d0d 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -32,8 +32,6 @@
     },
   ]
 
-  const QueryVerb = ["create", "read", "update", "delete"]
-
   export let query
   export let fields = []
 
@@ -128,25 +126,27 @@
 
 <header>
   <Heading small>{query.name}</Heading>
-  <div class="queryVerbs">
-    {#each QueryVerb as queryVerb}
-      <div
-        class="queryVerb"
-        class:selected={queryVerb === query.queryVerb}
-        on:click={() => {
-          query.queryVerb = queryVerb
-        }}>
-        {queryVerb}
-      </div>
-    {/each}
-  </div>
-  {#if config && query.queryVerb}
-    <Select thin secondary bind:value={query.queryType}>
-      <option value={''}>Select an option</option>
-      {#each Object.keys(config[query.queryVerb]) as queryType}
-        <option value={queryType}>{queryType}</option>
+  {#if config}
+    <div class="queryVerbs">
+      {#each Object.keys(config) as queryVerb}
+        <div
+          class="queryVerb"
+          class:selected={queryVerb === query.queryVerb}
+          on:click={() => {
+            query.queryVerb = queryVerb
+          }}>
+          {queryVerb}
+        </div>
       {/each}
-    </Select>
+    </div>
+    {#if query.queryVerb}
+      <Select thin secondary bind:value={query.queryType}>
+        <option value={''}>Select an option</option>
+        {#each Object.keys(config[query.queryVerb]) as queryType}
+          <option value={queryType}>{queryType}</option>
+        {/each}
+      </Select>
+    {/if}
   {/if}
 </header>
 
diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte
index b0003ef2ef..ad6ec7b761 100644
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@@ -14,7 +14,7 @@
   export let schema
 
   function updateQuery({ detail }) {
-    query.fields.sql = detail.value
+    query.fields[schema.type] = detail.value
   }
 </script>
 
@@ -24,19 +24,21 @@
 <Heading extraSmall black>Query</Heading>
 <Spacer large />
 
-{#if schema.type === QueryTypes.SQL}
-  <Editor
-    label="Query"
-    mode="sql"
-    on:change={updateQuery}
-    value={query.fields.sql} />
-{:else if schema.type === QueryTypes.JSON}
-  <Spacer large />
-  <Editor
-    label="Query"
-    mode="json"
-    on:change={updateQuery}
-    value={query.fields.json} />
-{:else if schema.type === QueryTypes.FIELDS}
-  <FieldsBuilder bind:fields={query.fields} {schema} />
+{#if schema}
+  {#if schema.type === QueryTypes.SQL}
+    <Editor
+      label="Query"
+      mode="sql"
+      on:change={updateQuery}
+      value={query.fields.sql} />
+  {:else if schema.type === QueryTypes.JSON}
+    <Spacer large />
+    <Editor
+      label="Query"
+      mode="json"
+      on:change={updateQuery}
+      value={query.fields.json} />
+  {:else if schema.type === QueryTypes.FIELDS}
+    <FieldsBuilder bind:fields={query.fields} {schema} />
+  {/if}
 {/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 9f4f2d1aaa..1c5696a552 100644
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
@@ -26,9 +26,7 @@
     <IntegrationConfigForm integration={datasource.config} />
     <Spacer medium />
     <footer>
-      <Button primary wide disabled={false} on:click={saveDatasource}>
-        Save
-      </Button>
+      <Button blue wide on:click={saveDatasource}>Save</Button>
     </footer>
   </section>
 {/if}
diff --git a/packages/server/src/integrations/Integration.js b/packages/server/src/integrations/Integration.js
index 2305f0ea55..f24080853f 100644
--- a/packages/server/src/integrations/Integration.js
+++ b/packages/server/src/integrations/Integration.js
@@ -1,7 +1,12 @@
-class Field {
-  constructor(type, defaultValue, required) {
-    this.type = type
-    this.default = defaultValue
-    this.required = required
-  }
+exports.QUERY_TYPES = {
+  SQL: "sql",
+  JSON: "json",
+  FIELDS: "fields",
+}
+
+exports.FIELD_TYPES = {
+  STRING: "string",
+  NUMBER: "number",
+  PASSWORD: "password",
+  LIST: "list",
 }
diff --git a/packages/server/src/integrations/airtable.js b/packages/server/src/integrations/airtable.js
index b7300ac446..a0d56bac9d 100644
--- a/packages/server/src/integrations/airtable.js
+++ b/packages/server/src/integrations/airtable.js
@@ -1,14 +1,15 @@
 const Airtable = require("airtable")
+const { FIELD_TYPES, QUERY_TYPES } = require("./Integration")
 
 const SCHEMA = {
   datasource: {
     apiKey: {
-      type: "string",
+      type: FIELD_TYPES.STRING,
       default: "enter api key",
       required: true,
     },
     base: {
-      type: "string",
+      type: FIELD_TYPES.STRING,
       default: "mybase",
       required: true,
     },
@@ -20,7 +21,7 @@ const SCHEMA = {
         customisable: true,
         fields: {
           table: {
-            type: "string",
+            type: FIELD_TYPES.STRING,
             required: true,
           },
         },
@@ -28,14 +29,14 @@ const SCHEMA = {
     },
     read: {
       Table: {
-        type: "fields",
+        type: QUERY_TYPES.FIELDS,
         fields: {
           table: {
-            type: "string",
+            type: FIELD_TYPES.STRING,
             required: true,
           },
           view: {
-            type: "string",
+            type: FIELD_TYPES.STRING,
             required: true,
           },
         },
@@ -43,11 +44,11 @@ const SCHEMA = {
     },
     update: {
       Fields: {
-        type: "fields",
+        type: QUERY_TYPES.FIELDS,
         customisable: true,
         fields: {
           id: {
-            type: "string",
+            type: FIELD_TYPES.STRING,
             required: true,
           },
         },
@@ -55,7 +56,7 @@ const SCHEMA = {
     },
     delete: {
       "Airtable Ids": {
-        type: "list",
+        type: FIELD_TYPES.LIST,
       },
     },
   },
diff --git a/packages/server/src/integrations/dynamodb.js b/packages/server/src/integrations/dynamodb.js
index aec93e0933..196f7fd97f 100644
--- a/packages/server/src/integrations/dynamodb.js
+++ b/packages/server/src/integrations/dynamodb.js
@@ -1,53 +1,46 @@
 const AWS = require("aws-sdk")
+const { FIELD_TYPES, QUERY_TYPES } = require("./Integration")
 
 const SCHEMA = {
   datasource: {
-    table: {
-      type: "string",
-      required: true,
-    },
     region: {
-      type: "string",
+      type: FIELD_TYPES.STRING,
       required: true,
       default: "us-east-1",
     },
     accessKeyId: {
-      type: "string",
+      type: FIELD_TYPES.PASSWORD,
       required: true,
     },
     secretKey: {
-      type: "secretKey",
+      type: FIELD_TYPES.PASSWORD,
       required: true,
-      default: 5432,
-    },
-    indexName: {
-      type: "string",
     },
   },
   query: {
-    type: "fields",
-    fields: [
-      {
-        name: "Index",
-        key: "Index",
-        type: "string",
+    read: {
+      DynamoConfig: {
+        type: QUERY_TYPES.FIELDS,
+        fields: {
+          Table: {
+            type: FIELD_TYPES.STRING,
+            required: true,
+          },
+          Index: {
+            type: FIELD_TYPES.STRING,
+          },
+          KeyConditionExpression: {
+            type: FIELD_TYPES.STRING,
+          },
+          ExpressionAttributeNames: {
+            type: FIELD_TYPES.STRING,
+          },
+          ExpressionAttributeValues: {
+            type: FIELD_TYPES.STRING,
+          },
+        },
       },
-      {
-        name: "Key Condition Expression",
-        key: "KeyConditionExpression",
-        type: "string",
-      },
-      {
-        name: "Attribute Names",
-        key: "ExpressionAttributeNames",
-        type: "string",
-      },
-      {
-        name: "Attribute Values",
-        key: "ExpressionAttributeValues",
-        type: "string",
-      },
-    ],
+    },
   },
 }
 
@@ -62,12 +55,12 @@ class DynamoDBIntegration {
     AWS.config.update(this.config)
   }
 
-  async read() {
+  async read(query) {
     const response = await this.client.query({
-      TableName: this.config.table,
-      KeyConditionExpression: this.config.KeyConditionExpression,
-      ExpressionAttributeNames: this.config.ExpressionAttributeNames,
-      ExpressionAttributeValues: this.config.ExpressionAttributeValues,
+      TableName: query.Table,
+      KeyConditionExpression: query.KeyConditionExpression,
+      ExpressionAttributeNames: query.ExpressionAttributeNames,
+      ExpressionAttributeValues: query.ExpressionAttributeValues,
     })
     return response
   }
diff --git a/packages/server/src/integrations/elasticsearch.js b/packages/server/src/integrations/elasticsearch.js
index 8e9e92be42..610fa99041 100644
--- a/packages/server/src/integrations/elasticsearch.js
+++ b/packages/server/src/integrations/elasticsearch.js
@@ -26,11 +26,11 @@ class ElasticSearchIntegration {
     this.client = new Client({ node: config.url })
   }
 
-  async create(document) {
+  async create(query) {
     try {
       const result = await this.client.index({
         index: this.config.index,
-        body: JSON.parse(document),
+        body: JSON.parse(query.json),
       })
       return [result]
     } catch (err) {
@@ -45,7 +45,7 @@ class ElasticSearchIntegration {
     try {
       const result = await this.client.search({
         index: this.config.index,
-        body: JSON.parse(query),
+        body: JSON.parse(query.json),
       })
       return result.body.hits.hits.map(({ _source }) => _source)
     } catch (err) {
diff --git a/packages/server/src/integrations/microsoftSqlServer.js b/packages/server/src/integrations/microsoftSqlServer.js
index d8e7949aad..cabf70c2bf 100644
--- a/packages/server/src/integrations/microsoftSqlServer.js
+++ b/packages/server/src/integrations/microsoftSqlServer.js
@@ -1,28 +1,36 @@
 const sqlServer = require("mssql")
+const { FIELD_TYPES } = require("./Integration")
 
 const SCHEMA = {
   datasource: {
     user: {
-      type: "string",
+      type: FIELD_TYPES.STRING,
       required: true,
       default: "localhost",
     },
     password: {
-      type: "password",
+      type: FIELD_TYPES.PASSWORD,
       required: true,
     },
     server: {
-      type: "string",
+      type: FIELD_TYPES.STRING,
       default: "localhost",
     },
     database: {
-      type: "string",
+      type: FIELD_TYPES.STRING,
       default: "root",
     },
   },
   query: {
-    sql: {
-      type: "sql",
+    create: {
+      SQL: {
+        type: "sql",
+      },
+    },
+    read: {
+      SQL: {
+        type: "sql",
+      },
     },
   },
 }
@@ -37,10 +45,21 @@ class SqlServerIntegration {
     return await this.client.connect(this.config)
   }
 
-  async read() {
+  async read(query) {
     try {
       await this.connect()
-      const response = await this.client.query(this.config.query)
+      const response = await this.client.query(query.sql)
+      return response.recordset
+    } catch (err) {
+      console.error("Error querying MS SQL Server", err)
+      throw err
+    }
+  }
+
+  async create(query) {
+    try {
+      await this.connect()
+      const response = await this.client.query(query.sql)
       return response.recordset
     } catch (err) {
       console.error("Error querying MS SQL Server", err)
diff --git a/packages/server/src/integrations/mongodb.js b/packages/server/src/integrations/mongodb.js
index 984ed11068..69a49c43d3 100644
--- a/packages/server/src/integrations/mongodb.js
+++ b/packages/server/src/integrations/mongodb.js
@@ -17,8 +17,15 @@ const SCHEMA = {
     },
   },
   query: {
-    JSON: {
-      type: "json",
+    create: {
+      JSON: {
+        type: "json",
+      },
+    },
+    read: {
+      JSON: {
+        type: "json",
+      },
     },
   },
 }
@@ -27,23 +34,35 @@ class MongoIntegration {
   constructor(config) {
     this.config = config
     this.client = new MongoClient(config.connectionString)
-    try {
-      this.config.query = JSON.parse(this.config.query)
-    } catch (err) {
-      this.config.query = {}
-    }
-    this.connect()
   }
 
   async connect() {
     return this.client.connect()
   }
 
-  async read() {
+  async create(query) {
     try {
+      const mongoQuery = query.json ? JSON.parse(query.json) : {}
+      await this.connect()
       const db = this.client.db(this.config.db)
       const collection = db.collection(this.config.collection)
-      const result = await collection.find(this.config.query).toArray()
+      const result = await collection.insertOne(mongoQuery)
+      return result
+    } catch (err) {
+      console.error("Error querying mongodb", err)
+      throw err
+    } finally {
+      await this.client.close()
+    }
+  }
+
+  async read(query) {
+    try {
+      const mongoQuery = query.json ? JSON.parse(query.json) : {}
+      await this.connect()
+      const db = this.client.db(this.config.db)
+      const collection = db.collection(this.config.collection)
+      const result = await collection.find(mongoQuery).toArray()
       return result
     } catch (err) {
       console.error("Error querying mongodb", err)
diff --git a/packages/server/src/integrations/s3.js b/packages/server/src/integrations/s3.js
index fd1e079bee..e01c45227d 100644
--- a/packages/server/src/integrations/s3.js
+++ b/packages/server/src/integrations/s3.js
@@ -2,25 +2,33 @@ const AWS = require("aws-sdk")
 
 const SCHEMA = {
   datasource: {
-    bucket: {
-      type: "string",
-      required: true,
-    },
     region: {
       type: "string",
       required: true,
       default: "us-east-1",
     },
     accessKeyId: {
-      type: "string",
+      type: "password",
       required: true,
     },
     secretAccessKey: {
-      type: "string",
+      type: "password",
       required: true,
     },
   },
-  query: {},
+  query: {
+    read: {
+      Bucket: {
+        type: "fields",
+        fields: {
+          bucket: {
+            type: "string",
+            required: true,
+          },
+        },
+      },
+    },
+  },
 }
 
 class S3Integration {
@@ -34,10 +42,10 @@ class S3Integration {
     AWS.config.update(this.config)
   }
 
-  async query() {
+  async read(query) {
     const response = await this.client
       .listObjects({
-        Bucket: this.config.bucket,
+        Bucket: query.bucket,
       })
       .promise()
     return response.Contents

From 267e85c2bf4b075f9dc6f716ba2907af3e65ba7a Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Wed, 13 Jan 2021 18:29:51 +0000
Subject: [PATCH 28/70] tidy up

---
 .../DataTable/ExternalDataSourceTable.svelte  | 32 +++++++++----------
 .../src/components/backend/DataTable/api.js   | 12 -------
 .../EventsEditor/actions/ExecuteQuery.svelte  |  4 +--
 packages/server/src/integrations/airtable.js  |  2 +-
 packages/server/src/integrations/couchdb.js   |  9 +++---
 packages/server/src/integrations/mongodb.js   | 11 ++++---
 6 files changed, 29 insertions(+), 41 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte b/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
index e0f429cb3b..071f0fe393 100644
--- a/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
@@ -11,22 +11,22 @@
   let loading = false
   let error = false
 
-  async function fetchData() {
-    try {
-      loading = true
-      const response = await api.fetchDataForQuery(
-        $params.selectedDatasource,
-        query._id
-      )
-      data = response.rows || []
-      error = false
-    } catch (err) {
-      error = `${query}: Query error. (${err.message}). This could be a problem with your datasource configuration.`
-      notifier.danger(error)
-    } finally {
-      loading = false
-    }
-  }
+  // async function fetchData() {
+  //   try {
+  //     loading = true
+  //     const response = await api.fetchDataForQuery(
+  //       $params.selectedDatasource,
+  //       query._id
+  //     )
+  //     data = response.rows || []
+  //     error = false
+  //   } catch (err) {
+  //     error = `${query}: Query error. (${err.message}). This could be a problem with your datasource configuration.`
+  //     notifier.danger(error)
+  //   } finally {
+  //     loading = false
+  //   }
+  // }
 
   // Fetch rows for specified query
   // $: query && fetchData()
diff --git a/packages/builder/src/components/backend/DataTable/api.js b/packages/builder/src/components/backend/DataTable/api.js
index 024a15bcdc..91ebc19b26 100644
--- a/packages/builder/src/components/backend/DataTable/api.js
+++ b/packages/builder/src/components/backend/DataTable/api.js
@@ -30,15 +30,3 @@ export async function fetchDataForView(view) {
   }
   return json
 }
-
-export async function fetchDataForQuery(datasourceId, queryId) {
-  const FETCH_QUERY_URL = `/api/queries/${queryId}`
-
-  const response = await api.get(FETCH_QUERY_URL)
-  const json = await response.json()
-
-  if (response.status !== 200) {
-    throw new Error(json.message)
-  }
-  return json
-}
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
index 910fa1e593..8ffdc4ef14 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
@@ -9,8 +9,7 @@
   $: datasource = $backendUiStore.datasources.find(
     ds => ds._id === parameters.datasourceId
   )
-  // TODO: binding needs a significant refactor and needs to
-  // be centralised
+  // TODO: binding needs to be centralised
   $: bindableProperties = fetchBindableProperties({
     componentInstanceId: $store.selectedComponentId,
     components: $store.components,
@@ -51,7 +50,6 @@
 
   <Spacer medium />
 
-  <!-- TODO: Need to render defaults, but allow interpolation of frontend values -->
   {#if query}
     <ParameterBuilder
       bind:customParams={parameters.queryParams}
diff --git a/packages/server/src/integrations/airtable.js b/packages/server/src/integrations/airtable.js
index a0d56bac9d..19aa3236ed 100644
--- a/packages/server/src/integrations/airtable.js
+++ b/packages/server/src/integrations/airtable.js
@@ -17,7 +17,7 @@ const SCHEMA = {
   query: {
     create: {
       "Airtable Record": {
-        type: "fields",
+        type: QUERY_TYPES.FIELDS,
         customisable: true,
         fields: {
           table: {
diff --git a/packages/server/src/integrations/couchdb.js b/packages/server/src/integrations/couchdb.js
index 8a2dcaa214..c47e3698f6 100644
--- a/packages/server/src/integrations/couchdb.js
+++ b/packages/server/src/integrations/couchdb.js
@@ -1,24 +1,25 @@
 const PouchDB = require("pouchdb")
+const { FIELD_TYPES, QUERY_TYPES } = require("./Integration")
 
 const SCHEMA = {
   datasource: {
     url: {
-      type: "string",
+      type: FIELD_TYPES.STRING,
       required: true,
       default: "localhost",
     },
     database: {
-      type: "string",
+      type: FIELD_TYPES.STRING,
       required: true,
     },
     view: {
-      type: "string",
+      type: FIELD_TYPES.STRING,
       required: true,
     },
   },
   query: {
     json: {
-      type: "json",
+      type: QUERY_TYPES.JSON,
       required: true,
     },
   },
diff --git a/packages/server/src/integrations/mongodb.js b/packages/server/src/integrations/mongodb.js
index 69a49c43d3..2fa8719825 100644
--- a/packages/server/src/integrations/mongodb.js
+++ b/packages/server/src/integrations/mongodb.js
@@ -1,30 +1,31 @@
 const { MongoClient } = require("mongodb")
+const { FIELD_TYPES, QUERY_TYPES } = require("./Integration")
 
 const SCHEMA = {
   datasource: {
     connectionString: {
-      type: "string",
+      type: FIELD_TYPES.STRING,
       required: true,
       default: "localhost",
     },
     db: {
-      type: "string",
+      type: FIELD_TYPES.STRING,
       required: true,
     },
     collection: {
-      type: "string",
+      type: FIELD_TYPES.STRING,
       required: true,
     },
   },
   query: {
     create: {
       JSON: {
-        type: "json",
+        type: QUERY_TYPES.JSON,
       },
     },
     read: {
       JSON: {
-        type: "json",
+        type: QUERY_TYPES.JSON,
       },
     },
   },

From 1b51113c44885fbfcfbc35c72c4c85a31ffb42a9 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 14 Jan 2021 14:22:24 +0000
Subject: [PATCH 29/70] pass field values in binding drawer

---
 .../builder/src/builderStore/store/backend.js |  6 +++
 .../TableIntegrationMenu/index.svelte         | 40 +++++++-------
 .../integration/QueryFieldsBuilder.svelte     |  4 +-
 .../integration/QueryParameterBuilder.svelte  |  4 +-
 .../components/integration/QueryViewer.svelte | 28 +++++-----
 .../integration/SvelteEditor.svelte           | 52 +++++--------------
 .../src/components/integration/codemirror.js  |  2 +
 .../src/components/integration/index.svelte   | 12 +++--
 .../userInterface/TableViewSelect.svelte      | 50 ++++++++++++------
 .../[selectedDatasource]/[query]/index.svelte | 37 ++++++++-----
 10 files changed, 121 insertions(+), 114 deletions(-)

diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index f646c84d3d..df752cf6a1 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -9,6 +9,7 @@ const INITIAL_BACKEND_UI_STATE = {
   roles: [],
   datasources: [],
   queries: [],
+  integrations: {},
   selectedDatabase: {},
   selectedTable: {},
   draftTable: {},
@@ -27,11 +28,15 @@ export const getBackendUiStore = () => {
         const datasources = await datasourcesResponse.json()
         const queriesResponse = await api.get(`/api/queries`)
         const queries = await queriesResponse.json()
+        const integrationsResponse = await api.get("/api/integrations")
+        const integrations = await integrationsResponse.json()
+
         store.update(state => {
           state.selectedDatabase = db
           state.tables = tables
           state.datasources = datasources
           state.queries = queries
+          state.integrations = integrations
           return state
         })
       },
@@ -132,6 +137,7 @@ export const getBackendUiStore = () => {
           state.selectedQueryId = json._id
           return state
         })
+        return json
       },
       select: queryId =>
         store.update(state => {
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
index 29d7c0ffba..11beefff63 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
@@ -1,26 +1,33 @@
 <script>
   import { onMount } from "svelte"
+  import { backendUiStore } from "builderStore"
   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",
-  }
-
   export let integration = {}
 
-  let integrationsPromise = fetchIntegrations()
-  let selectedIntegrationConfig
+  let schema
   let integrations = []
 
   async function fetchIntegrations() {
     const response = await api.get("/api/integrations")
     const json = await response.json()
+
     integrations = json
     return json
   }
 
+  function selectIntegration(integrationType) {
+    schema = integrations[integrationType].datasource
+    integration = {
+      type: integrationType,
+      ...Object.keys(schema).reduce(
+        (acc, next) => ({ ...acc, [next]: schema[next].default }),
+        {}
+      ),
+    }
+  }
+
   onMount(() => {
     fetchIntegrations()
   })
@@ -32,18 +39,7 @@
       <div
         class="integration hoverable"
         class:selected={integration.type === integrationType}
-        on:click={() => {
-          selectedIntegrationConfig = integrations[integrationType].datasource
-          integration = { type: integrationType, ...Object.keys(selectedIntegrationConfig).reduce(
-              (acc, next) => {
-                return {
-                  ...acc,
-                  [next]: selectedIntegrationConfig[next].default,
-                }
-              },
-              {}
-            ) }
-        }}>
+        on:click={() => selectIntegration(integrationType)}>
         <svelte:component
           this={ICONS[integrationType]}
           height="100"
@@ -53,11 +49,11 @@
     {/each}
   </div>
 
-  {#if selectedIntegrationConfig}
-    {#each Object.keys(selectedIntegrationConfig) as configKey}
+  {#if schema}
+    {#each Object.keys(schema) as configKey}
       <Input
         thin
-        type={selectedIntegrationConfig[configKey].type}
+        type={schema[configKey].type}
         label={configKey}
         bind:value={integration[configKey]} />
       <Spacer medium />
diff --git a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
index 993dc43c0e..4638a8bc36 100644
--- a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
@@ -11,6 +11,7 @@
 
   export let fields = {}
   export let schema
+  export let editable
 
   let customSchema = {}
   let draftField = {}
@@ -29,12 +30,13 @@
   {#each Object.keys(schema.fields) as field}
     <Label extraSmall grey>{field}</Label>
     <Input
+      disabled={!editable}
       type={schema.fields[field]?.type}
       required={schema.fields[field]?.required}
       bind:value={fields[field]} />
     <Spacer medium />
   {/each}
-  {#if schema.customisable}
+  {#if schema.customisable && editable}
     <Spacer large />
     <Label>Add Custom Field</Label>
     {#each Object.keys(customSchema) as field}
diff --git a/packages/builder/src/components/integration/QueryParameterBuilder.svelte b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
index 5db7511336..34a5eb9bae 100644
--- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@@ -40,8 +40,8 @@
       <div />
     {/if}
     {#each parameters as parameter, idx}
-      <Input thin bind:value={parameter.name} />
-      <Input thin bind:value={parameter.default} />
+      <Input thin disabled={bindable} bind:value={parameter.name} />
+      <Input thin disabled={bindable} bind:value={parameter.default} />
       {#if bindable}
         <BindableInput
           type="string"
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 01be849d0d..735379bd15 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -1,5 +1,6 @@
 <script>
   import { onMount } from "svelte"
+  import { goto } from "@sveltech/routify"
   import {
     Select,
     Button,
@@ -55,8 +56,9 @@
     {}
   )
 
-  $: datasourceType = datasource.source
-  $: datasourceType && fetchQueryConfig()
+  $: datasourceType = datasource?.source
+  
+  $: config = $backendUiStore.integrations[datasourceType]?.query
 
   $: shouldShowQueryConfig = config && query.queryVerb && query.queryType
 
@@ -69,17 +71,6 @@
     fields = fields
   }
 
-  async function fetchQueryConfig() {
-    try {
-      const response = await api.get(`/api/integrations/${datasource.source}`)
-      const json = await response.json()
-      config = json.query
-    } catch (err) {
-      notifier.danger("Error fetching integration configuration.")
-      console.error(err)
-    }
-  }
-
   async function previewQuery() {
     try {
       const response = await api.post(`/api/queries/preview`, {
@@ -115,8 +106,12 @@
 
   async function saveQuery() {
     try {
-      await backendUiStore.actions.queries.save(query.datasourceId, query)
+      const { _id } = await backendUiStore.actions.queries.save(
+        query.datasourceId,
+        query
+      )
       notifier.success(`Query saved successfully.`)
+      $goto(`../../${_id}`)
     } catch (err) {
       console.error(err)
       notifier.danger(`Error creating query. ${err.message}`)
@@ -161,9 +156,10 @@
       <Spacer medium />
 
       <IntegrationQueryEditor
-        schema={config[query.queryVerb][query.queryType]}
         {query}
-        bind:parameters />
+        schema={config[query.queryVerb][query.queryType]}
+        bind:parameters
+      />
 
       <Spacer medium />
 
diff --git a/packages/builder/src/components/integration/SvelteEditor.svelte b/packages/builder/src/components/integration/SvelteEditor.svelte
index b90bd69a3c..22cddb5606 100644
--- a/packages/builder/src/components/integration/SvelteEditor.svelte
+++ b/packages/builder/src/components/integration/SvelteEditor.svelte
@@ -1,18 +1,23 @@
 <script>
   import CodeMirror from "./codemirror"
   import { onMount, createEventDispatcher } from "svelte"
+  import { themeStore } from "builderStore"
 
   const dispatch = createEventDispatcher()
 
+  const THEMES = {
+    DARK: "tomorrow-night-eighties",
+    LIGHT: "default",
+  }
+
   export let value = ""
-  export let readonly = false
-  export let errorLoc = null
+  export let readOnly = false
   export let lineNumbers = true
   export let tab = true
   export let mode
 
-  let w
-  let h
+  let width
+  let height
 
   // We have to expose set and update methods, rather
   // than making this state-driven through props,
@@ -72,43 +77,10 @@
   let error_line
   let destroyed = false
 
-  $: if (editor && w && h) {
+  $: if (editor && width && height) {
     editor.refresh()
   }
 
-  $: {
-    if (marker) marker.clear()
-
-    if (errorLoc) {
-      const line = errorLoc.line - 1
-      const ch = errorLoc.column
-
-      marker = editor.markText(
-        { line, ch },
-        { line, ch: ch + 1 },
-        {
-          className: "error-loc",
-        }
-      )
-
-      error_line = line
-    } else {
-      error_line = null
-    }
-  }
-
-  let previous_error_line
-  $: if (editor) {
-    if (previous_error_line != null) {
-      editor.removeLineClass(previous_error_line, "wrap", "error-line")
-    }
-
-    if (error_line && error_line !== previous_error_line) {
-      editor.addLineClass(error_line, "wrap", "error-line")
-      previous_error_line = error_line
-    }
-  }
-
   onMount(() => {
     createEditor(mode).then(() => {
       if (editor) editor.setValue(value || "")
@@ -137,9 +109,10 @@
       mode: modes[mode] || {
         name: mode,
       },
-      readOnly: readonly,
+      readOnly,
       autoCloseBrackets: true,
       autoCloseTags: true,
+      theme: $themeStore.darkMode ? THEMES.DARK : THEMES.LIGHT,
     }
 
     if (!tab)
@@ -182,6 +155,7 @@
   }
 
   :global(.CodeMirror) {
+    height: auto !important;
     border-radius: var(--border-radius-m);
     font-family: var(--font-sans) !important;
   }
diff --git a/packages/builder/src/components/integration/codemirror.js b/packages/builder/src/components/integration/codemirror.js
index 6d731ab9af..434adc254b 100644
--- a/packages/builder/src/components/integration/codemirror.js
+++ b/packages/builder/src/components/integration/codemirror.js
@@ -1,5 +1,7 @@
 import CodeMirror from "codemirror"
 import "codemirror/lib/codemirror.css"
+import "codemirror/theme/tomorrow-night-eighties.css"
+import "codemirror/theme/neo.css"
 import "codemirror/mode/sql/sql"
 import "codemirror/mode/css/css"
 import "codemirror/mode/handlebars/handlebars"
diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte
index ad6ec7b761..34f0ad9f11 100644
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { onMount } from "svelte"
   import { TextArea, Label, Input, Heading, Spacer } from "@budibase/bbui"
   import Editor from "./SvelteEditor.svelte"
   import ParameterBuilder from "./QueryParameterBuilder.svelte"
@@ -12,14 +13,17 @@
 
   export let query
   export let schema
+  export let editable = true
 
   function updateQuery({ detail }) {
     query.fields[schema.type] = detail.value
   }
 </script>
 
-<ParameterBuilder bind:parameters={query.parameters} bindable={false} />
-<Spacer large />
+{#if editable}
+  <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
+  <Spacer large />
+{/if}
 
 <Heading extraSmall black>Query</Heading>
 <Spacer large />
@@ -30,6 +34,7 @@
       label="Query"
       mode="sql"
       on:change={updateQuery}
+      readOnly={!editable}
       value={query.fields.sql} />
   {:else if schema.type === QueryTypes.JSON}
     <Spacer large />
@@ -37,8 +42,9 @@
       label="Query"
       mode="json"
       on:change={updateQuery}
+      readOnly={!editable}
       value={query.fields.json} />
   {:else if schema.type === QueryTypes.FIELDS}
-    <FieldsBuilder bind:fields={query.fields} {schema} />
+    <FieldsBuilder bind:fields={query.fields} {schema} {editable} />
   {/if}
 {/if}
diff --git a/packages/builder/src/components/userInterface/TableViewSelect.svelte b/packages/builder/src/components/userInterface/TableViewSelect.svelte
index a7f1f87a0e..e5adf611d6 100644
--- a/packages/builder/src/components/userInterface/TableViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableViewSelect.svelte
@@ -5,6 +5,7 @@
   import { notifier } from "builderStore/store/notifications"
   import BottomDrawer from "components/common/BottomDrawer.svelte"
   import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
+  import IntegrationQueryEditor from "components/integration/index.svelte"
   import fetchBindableProperties from "../../builderStore/fetchBindableProperties"
 
   const dispatch = createEventDispatcher()
@@ -13,18 +14,6 @@
 
   export let value = {}
 
-  function handleSelected(selected) {
-    dispatch("change", selected)
-    dropdownRight.hide()
-  }
-
-  function openBindingDrawer() {
-    bindingDrawerOpen = true
-  }
-
-  function closeDatabindingDrawer() {
-    bindingDrawerOpen = false
-  }
 
   $: tables = $backendUiStore.tables.map(m => ({
     label: m.name,
@@ -78,6 +67,24 @@
         type: "link",
       }
     })
+
+  function handleSelected(selected) {
+    dispatch("change", selected)
+    dropdownRight.hide()
+  }
+
+  function openBindingDrawer() {
+    bindingDrawerOpen = true
+  }
+
+  function closeDatabindingDrawer() {
+    bindingDrawerOpen = false
+  }
+
+  function fetchDatasourceSchema(query) {
+    const source = $backendUiStore.datasources.find(ds => ds._id === query.datasourceId).source
+    return $backendUiStore.integrations[source].query[query.queryVerb][query.queryType];
+  }
 </script>
 
 <div
@@ -98,11 +105,18 @@
         }}>Save</Button>
       </div>
       <div class="drawer-contents" slot="body">
-        <pre>{value.queryString}</pre>
-        <ParameterBuilder
-          bind:customParams={value.queryParams}
-          parameters={value.parameters || []}
-          bindings={queryBindableProperties} />
+        <IntegrationQueryEditor 
+          query={value}
+          schema={fetchDatasourceSchema(value)}
+          editable={false}
+        />
+        <Spacer large />
+        {#if value.parameters.length > 0}
+          <ParameterBuilder
+            bind:customParams={value.queryParams}
+            parameters={value.parameters}
+            bindings={queryBindableProperties} />
+        {/if}
       </div>
     </BottomDrawer>
   {/if}
@@ -229,6 +243,8 @@
 
   .drawer-contents {
     padding: var(--spacing-xl);
+    height: 40vh;
+    overflow-y: auto;
   }
 
   i {
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 bc2cae7537..760c2b322a 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
@@ -17,24 +17,33 @@
     }
   }
 
-  $: {
-    if ($params.query !== "new") {
-      query = $backendUiStore.queries.find(query => query._id === $params.query)
-    } else {
-      // New query
-      query = {
-        datasourceId: $params.selectedDatasource,
-        name: "New Query",
-        parameters: [],
-        fields: {},
-      }
-    }
+  $: selectedQuery = $backendUiStore.queries.find(
+    query => query._id === $backendUiStore.selectedQueryId
+  ) || {
+    datasourceId: $params.selectedDatasource,
+    name: "New Query",
+    parameters: [],
+    fields: {},
   }
+
+  // $: {
+  //   if ($params.query !== "new") {
+  //     query = $backendUiStore.queries.find(query => query._id === $params.query)
+  //   } else {
+  //     // New query
+  //     query = {
+  //       datasourceId: $params.selectedDatasource,
+  //       name: "New Query",
+  //       parameters: [],
+  //       fields: {},
+  //     }
+  //   }
+  // }
 </script>
 
 <section>
-  {#if $backendUiStore.selectedDatabase._id && query}
-    <QueryInterface {query} />
+  {#if $backendUiStore.selectedDatabase._id && selectedQuery}
+    <QueryInterface query={selectedQuery} />
   {/if}
 </section>
 

From 16a25a7cff78ed2718518d9ebc0e0802dc4170d7 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Thu, 14 Jan 2021 17:01:31 +0000
Subject: [PATCH 30/70] When self hosting it is now possible to use a pretty
 URL to access the app rather than the normal appId.

---
 hosting/docker-compose.yaml                   |   8 +-
 hosting/hosting.properties                    |   1 -
 .../src/builderStore/store/frontend.js        |   2 +
 .../builder/src/builderStore/store/hosting.js |  19 +-
 .../deploy/DeploymentHistory.svelte           |   5 +-
 .../components/settings/tabs/General.svelte   |  65 +-
 .../components/start/CreateAppModal.svelte    |   6 +-
 .../server/src/api/controllers/application.js |  49 +-
 .../server/src/api/controllers/hosting.js     |   5 +
 .../src/api/controllers/static/index.js       |  27 +-
 packages/server/src/api/routes/hosting.js     |   7 +
 packages/server/src/db/client.js              |   1 +
 packages/server/src/environment.js            |   2 +
 .../server/src/middleware/authenticated.js    |   2 +
 packages/server/src/middleware/selfhost.js    |  16 +
 .../server/src/utilities/builder/hosting.js   |  21 +
 packages/server/src/utilities/index.js        |  15 +
 packages/worker/package.json                  |   3 +
 packages/worker/src/api/controllers/app.js    |  29 +
 packages/worker/src/api/controllers/deploy.js |   2 +-
 packages/worker/src/api/routes/app.js         |   9 +
 packages/worker/src/api/routes/index.js       |   3 +-
 packages/worker/src/db/index.js               |  16 +
 packages/worker/src/environment.js            |   8 +-
 packages/worker/src/middleware/check-key.js   |  10 +-
 packages/worker/yarn.lock                     | 691 +++++++++++++++++-
 26 files changed, 964 insertions(+), 58 deletions(-)
 create mode 100644 packages/server/src/middleware/selfhost.js
 create mode 100644 packages/worker/src/api/controllers/app.js
 create mode 100644 packages/worker/src/api/routes/app.js
 create mode 100644 packages/worker/src/db/index.js

diff --git a/hosting/docker-compose.yaml b/hosting/docker-compose.yaml
index c4a6c669b3..5b7c266c1e 100644
--- a/hosting/docker-compose.yaml
+++ b/hosting/docker-compose.yaml
@@ -6,8 +6,11 @@ services:
     ports:
       - "${APP_PORT}:4002"
     environment:
-      SELF_HOSTED: 1 
+      SELF_HOSTED: 1
+      CLOUD: 1
       COUCH_DB_URL: http://${COUCH_DB_USER}:${COUCH_DB_PASSWORD}@couchdb-service:5984
+      WORKER_URL: http://worker-service:4003
+      HOSTING_KEY: ${HOSTING_KEY}
       BUDIBASE_ENVIRONMENT: ${BUDIBASE_ENVIRONMENT}
       PORT: 4002
       JWT_SECRET: ${JWT_SECRET}
@@ -20,14 +23,13 @@ services:
       - "${WORKER_PORT}:4003"
     environment:
       SELF_HOSTED: 1,
-      DEPLOYMENT_API_KEY: ${WORKER_API_KEY}
       PORT: 4003
       MINIO_ACCESS_KEY: ${MINIO_ACCESS_KEY}
       MINIO_SECRET_KEY: ${MINIO_SECRET_KEY}
       RAW_MINIO_URL: http://minio-service:9000
       COUCH_DB_USERNAME: ${COUCH_DB_USER}
       COUCH_DB_PASSWORD: ${COUCH_DB_PASSWORD}
-      RAW_COUCH_DB_URL: http://couchdb-service:5984
+      COUCH_DB_URL: http://${COUCH_DB_USER}:${COUCH_DB_PASSWORD}@couchdb-service:5984
       SELF_HOST_KEY: ${HOSTING_KEY}
     depends_on:
       - minio-service
diff --git a/hosting/hosting.properties b/hosting/hosting.properties
index 2ef83543a4..ad047a3826 100644
--- a/hosting/hosting.properties
+++ b/hosting/hosting.properties
@@ -12,7 +12,6 @@ MINIO_ACCESS_KEY=budibase
 MINIO_SECRET_KEY=budibase
 COUCH_DB_PASSWORD=budibase
 COUCH_DB_USER=budibase
-WORKER_API_KEY=budibase
 
 # This section contains variables that do not need to be altered under normal circumstances
 APP_PORT=4002
diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 501725f029..2082a3e49b 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -28,6 +28,7 @@ import {
 const INITIAL_FRONTEND_STATE = {
   apps: [],
   name: "",
+  url: "",
   description: "",
   layouts: [],
   screens: [],
@@ -62,6 +63,7 @@ export const getFrontendStore = () => {
         libraries: pkg.application.componentLibraries,
         components,
         name: pkg.application.name,
+        url: pkg.application.url,
         description: pkg.application.description,
         appId: pkg.application._id,
         layouts,
diff --git a/packages/builder/src/builderStore/store/hosting.js b/packages/builder/src/builderStore/store/hosting.js
index 36067773b5..d265eeddff 100644
--- a/packages/builder/src/builderStore/store/hosting.js
+++ b/packages/builder/src/builderStore/store/hosting.js
@@ -1,13 +1,16 @@
 import { writable } from "svelte/store"
-import api from "../api"
+import api, {get} from "../api"
 
-const INITIAL_BACKEND_UI_STATE = {
+const INITIAL_HOSTING_UI_STATE = {
   hostingInfo: {},
   appUrl: "",
+  deployedApps: {},
+  deployedAppNames: [],
+  deployedAppUrls: [],
 }
 
 export const getHostingStore = () => {
-  const store = writable({ ...INITIAL_BACKEND_UI_STATE })
+  const store = writable({ ...INITIAL_HOSTING_UI_STATE })
   store.actions = {
     fetch: async () => {
       const responses = await Promise.all([
@@ -33,6 +36,16 @@ export const getHostingStore = () => {
         return state
       })
     },
+    fetchDeployedApps: async () => {
+      let deployments = await (await get("/api/hosting/apps")).json()
+      store.update(state => {
+        state.deployedApps = deployments
+        state.deployedAppNames = Object.values(deployments).map(app => app.name)
+        state.deployedAppUrls = Object.values(deployments).map(app => app.url)
+        return state
+      })
+      return deployments
+    }
   }
   return store
 }
diff --git a/packages/builder/src/components/deploy/DeploymentHistory.svelte b/packages/builder/src/components/deploy/DeploymentHistory.svelte
index fe95b1369f..e65ddf80cf 100644
--- a/packages/builder/src/components/deploy/DeploymentHistory.svelte
+++ b/packages/builder/src/components/deploy/DeploymentHistory.svelte
@@ -6,7 +6,7 @@
   import api from "builderStore/api"
   import { notifier } from "builderStore/store/notifications"
   import CreateWebhookDeploymentModal from "./CreateWebhookDeploymentModal.svelte"
-  import { hostingStore } from "builderStore"
+  import { store, hostingStore } from "builderStore"
 
   const DeploymentStatus = {
     SUCCESS: "SUCCESS",
@@ -36,7 +36,8 @@
   let errorReason
   let poll
   let deployments = []
-  let deploymentUrl = `${$hostingStore.appUrl}/${appId}`
+  let urlComponent = $hostingStore.hostingInfo.type === "self" ? $store.url : `/${appId}`
+  let deploymentUrl = `${$hostingStore.appUrl}${urlComponent}`
 
   const formatDate = (date, format) =>
     Intl.DateTimeFormat("en-GB", DATE_OPTIONS[format]).format(date)
diff --git a/packages/builder/src/components/settings/tabs/General.svelte b/packages/builder/src/components/settings/tabs/General.svelte
index 809917f27d..3852f7dc8d 100644
--- a/packages/builder/src/components/settings/tabs/General.svelte
+++ b/packages/builder/src/components/settings/tabs/General.svelte
@@ -1,11 +1,20 @@
 <script>
-  import { Input, TextArea, Button } from "@budibase/bbui"
-  import { store } from "builderStore"
+  import { Input, TextArea } from "@budibase/bbui"
+  import { store, hostingStore } from "builderStore"
   import api from "builderStore/api"
+  import {object, string} from "yup"
+  import { onMount } from "svelte"
+  import { get } from "svelte/store"
+
+  let nameValidation, nameError
+  let urlValidation, urlError
+
+  $: checkName($store.name)
+  $: checkUrl($store.url)
 
   async function updateApplication(data) {
     const response = await api.put(`/api/applications/${$store.appId}`, data)
-    const app = await response.json()
+    await response.json()
     store.update(state => {
       state = {
         ...state,
@@ -14,6 +23,44 @@
       return state
     })
   }
+
+  async function checkValidation(input, validation) {
+    if (!input || !validation) {
+      return
+    }
+    try {
+      await object(validation).validate(input, { abortEarly: false })
+    } catch (error) {
+      if (!error || !error.inner) return ""
+      return error.inner.reduce((acc, err) => {
+        return acc + err.message
+      }, "")
+    }
+  }
+
+  async function checkName(name) {
+    nameError = await checkValidation({ name }, nameValidation)
+  }
+
+  async function checkUrl(url) {
+    urlError = await checkValidation({ url }, urlValidation)
+  }
+
+  onMount(async () => {
+    const nameError = "Your application must have a name.", urlError = "Your application must have a URL."
+    let hostingInfo = await hostingStore.actions.fetch()
+    if (hostingInfo.type === "self") {
+      await hostingStore.actions.fetchDeployedApps()
+      const existingAppNames = get(hostingStore).deployedAppNames
+      const existingAppUrls = get(hostingStore).deployedAppUrls
+      existingAppNames.splice(existingAppNames.indexOf(get(store).name), 1)
+      existingAppUrls.splice(existingAppUrls.indexOf(get(store).url), 1)
+      nameValidation = { name: string().required(nameError).notOneOf(existingAppNames) }
+      urlValidation = { url: string().required(urlError).notOneOf(existingAppUrls) }
+    } else {
+      nameValidation = { name: string.required(nameError) }
+    }
+  })
 </script>
 
 <div class="container">
@@ -21,8 +68,18 @@
     on:save={e => updateApplication({ name: e.detail })}
     thin
     edit
-    value={$store.name}
+    bind:value={$store.name}
+    bind:error={nameError}
     label="App Name" />
+  {#if $hostingStore.hostingInfo.type === "self"}
+    <Input
+      on:save={e => updateApplication({ url: e.detail })}
+      thin
+      edit
+      bind:value={$store.url}
+      bind:error={urlError}
+      label="App URL" />
+  {/if}
   <TextArea
     on:save={e => updateApplication({ description: e.detail })}
     thin
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 1ca192a6c9..b35638dc9e 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { writable } from "svelte/store"
+  import { writable, get as svelteGet } from "svelte/store"
   import {
     store,
     automationStore,
@@ -28,6 +28,7 @@
   let isApiKeyValid
   let lastApiKey
   let fetchApiKeyPromise
+
   const validateApiKey = async apiKey => {
     if (isApiKeyValid) return true
     if (!apiKey) return false
@@ -81,6 +82,9 @@
     let hostingInfo = await hostingStore.actions.fetch()
     // re-init the steps based on whether self hosting or cloud hosted
     if (hostingInfo.type === "self") {
+      await hostingStore.actions.fetchDeployedApps()
+      const existingAppNames = svelteGet(hostingStore).deployedAppNames
+      infoValidation.applicationName = string().required("Your application must have a name.").notOneOf(existingAppNames)
       isApiKeyValid = true
       steps = [buildStep(Info), buildStep(User)]
       validationSchemas = [infoValidation, userValidation]
diff --git a/packages/server/src/api/controllers/application.js b/packages/server/src/api/controllers/application.js
index 1d259ac425..81d68d7e05 100644
--- a/packages/server/src/api/controllers/application.js
+++ b/packages/server/src/api/controllers/application.js
@@ -12,8 +12,6 @@ const { createRoutingView } = require("../../utilities/routing")
 const { downloadTemplate } = require("../../utilities/templates")
 const {
   generateAppID,
-  DocumentTypes,
-  SEPARATOR,
   getLayoutParams,
   getScreenParams,
   generateScreenID,
@@ -32,9 +30,13 @@ const {
 } = require("../../constants/screens")
 const { cloneDeep } = require("lodash/fp")
 const { recurseMustache } = require("../../utilities/mustache")
+const { getAllApps } = require("../../utilities")
 const { USERS_TABLE_SCHEMA } = require("../../constants")
-
-const APP_PREFIX = DocumentTypes.APP + SEPARATOR
+const {
+  getDeployedApps,
+  getHostingInfo,
+  HostingTypes,
+} = require("../../utilities/builder/hosting")
 
 // utility function, need to do away with this
 async function getLayouts(db) {
@@ -63,6 +65,28 @@ function getUserRoleId(ctx) {
     : ctx.user.role._id
 }
 
+async function getAppUrlIfNotInUse(ctx) {
+  let url
+  if (ctx.request.body.url) {
+    url = encodeURI(ctx.request.body.url)
+  } else {
+    url = encodeURI(`${ctx.request.body.name}`)
+  }
+  url = `/${url.replace(/\/|\\/g, "")}`
+  const hostingInfo = await getHostingInfo()
+  if (hostingInfo.type === HostingTypes.CLOUD) {
+    return url
+  }
+  const deployedApps = await getDeployedApps()
+  if (
+    deployedApps[url] != null &&
+    deployedApps[url].appId !== ctx.params.appId
+  ) {
+    ctx.throw(400, "App name/URL is already in use.")
+  }
+  return url
+}
+
 async function createInstance(template) {
   const appId = generateAppID()
 
@@ -96,17 +120,7 @@ async function createInstance(template) {
 }
 
 exports.fetch = async function(ctx) {
-  let allDbs = await CouchDB.allDbs()
-  const appDbNames = allDbs.filter(dbName => dbName.startsWith(APP_PREFIX))
-  const apps = appDbNames.map(db => new CouchDB(db).get(db))
-  if (apps.length === 0) {
-    ctx.body = []
-  } else {
-    const response = await Promise.allSettled(apps)
-    ctx.body = response
-      .filter(result => result.status === "fulfilled")
-      .map(({ value }) => value)
-  }
+  ctx.body = await getAllApps()
 }
 
 exports.fetchAppDefinition = async function(ctx) {
@@ -139,6 +153,7 @@ exports.fetchAppPackage = async function(ctx) {
 }
 
 exports.create = async function(ctx) {
+  const url = await getAppUrlIfNotInUse(ctx)
   const instance = await createInstance(ctx.request.body.template)
   const appId = instance._id
   const version = packageJson.version
@@ -148,6 +163,7 @@ exports.create = async function(ctx) {
     version: packageJson.version,
     componentLibraries: ["@budibase/standard-components"],
     name: ctx.request.body.name,
+    url: url,
     template: ctx.request.body.template,
     instance: instance,
     deployment: {
@@ -169,11 +185,12 @@ exports.create = async function(ctx) {
 }
 
 exports.update = async function(ctx) {
+  const url = await getAppUrlIfNotInUse(ctx)
   const db = new CouchDB(ctx.params.appId)
   const application = await db.get(ctx.params.appId)
 
   const data = ctx.request.body
-  const newData = { ...application, ...data }
+  const newData = { ...application, ...data, url }
 
   const response = await db.put(newData)
   data._rev = response.rev
diff --git a/packages/server/src/api/controllers/hosting.js b/packages/server/src/api/controllers/hosting.js
index fd876c2300..1d1884eb52 100644
--- a/packages/server/src/api/controllers/hosting.js
+++ b/packages/server/src/api/controllers/hosting.js
@@ -2,6 +2,7 @@ const CouchDB = require("../../db")
 const { BUILDER_CONFIG_DB, HOSTING_DOC } = require("../../constants")
 const {
   getHostingInfo,
+  getDeployedApps,
   HostingTypes,
   getAppUrl,
 } = require("../../utilities/builder/hosting")
@@ -37,3 +38,7 @@ exports.fetchUrls = async ctx => {
     app: await getAppUrl(ctx.appId),
   }
 }
+
+exports.getDeployedApps = async ctx => {
+  ctx.body = await getDeployedApps()
+}
diff --git a/packages/server/src/api/controllers/static/index.js b/packages/server/src/api/controllers/static/index.js
index 52e12d92e7..b956efef9d 100644
--- a/packages/server/src/api/controllers/static/index.js
+++ b/packages/server/src/api/controllers/static/index.js
@@ -12,6 +12,7 @@ const {
   budibaseAppsDir,
   budibaseTempDir,
 } = require("../../../utilities/budibaseDir")
+const { getDeployedApps } = require("../../../utilities/builder/hosting")
 const CouchDB = require("../../../db")
 const setBuilderToken = require("../../../utilities/builder/setBuilderToken")
 const fileProcessor = require("../../../utilities/fileProcessor")
@@ -26,6 +27,17 @@ function objectStoreUrl() {
   }
 }
 
+async function checkForSelfHostedURL(ctx) {
+  // the "appId" component of the URL may actually be a specific self hosted URL
+  let possibleAppUrl = `/${ctx.params.appId}`
+  const apps = await getDeployedApps()
+  if (apps[possibleAppUrl] && apps[possibleAppUrl].appId) {
+    return apps[possibleAppUrl].appId
+  } else {
+    return ctx.params.appId
+  }
+}
+
 // this was the version before we started versioning the component library
 const COMP_LIB_BASE_APP_VERSION = "0.2.5"
 
@@ -149,14 +161,18 @@ exports.performLocalFileProcessing = async function(ctx) {
 }
 
 exports.serveApp = async function(ctx) {
+  let appId = ctx.params.appId
+  if (env.SELF_HOSTED) {
+    appId = await checkForSelfHostedURL(ctx)
+  }
   const App = require("./templates/BudibaseApp.svelte").default
-  const db = new CouchDB(ctx.params.appId)
-  const appInfo = await db.get(ctx.params.appId)
+  const db = new CouchDB(appId, { skip_setup: true })
+  const appInfo = await db.get(appId)
 
   const { head, html, css } = App.render({
     title: appInfo.name,
     production: env.CLOUD,
-    appId: ctx.params.appId,
+    appId,
     objectStoreUrl: objectStoreUrl(),
   })
 
@@ -168,7 +184,7 @@ exports.serveApp = async function(ctx) {
     head,
     body: html,
     style: css.code,
-    appId: ctx.params.appId,
+    appId,
   })
 }
 
@@ -176,8 +192,7 @@ exports.serveAttachment = async function(ctx) {
   const appId = ctx.user.appId
   const attachmentsPath = resolve(budibaseAppsDir(), appId, "attachments")
 
-  // Serve from CloudFront
-  // TODO: need to replace this with link to self hosted object store
+  // Serve from object store
   if (env.CLOUD) {
     const S3_URL = join(objectStoreUrl(), appId, "attachments", ctx.file)
     const response = await fetch(S3_URL)
diff --git a/packages/server/src/api/routes/hosting.js b/packages/server/src/api/routes/hosting.js
index 7f7b9798bc..44429dacbf 100644
--- a/packages/server/src/api/routes/hosting.js
+++ b/packages/server/src/api/routes/hosting.js
@@ -1,6 +1,7 @@
 const Router = require("@koa/router")
 const controller = require("../controllers/hosting")
 const authorized = require("../../middleware/authorized")
+const selfhost = require("../../middleware/selfhost")
 const { BUILDER } = require("../../utilities/security/permissions")
 
 const router = Router()
@@ -10,5 +11,11 @@ router
   .get("/api/hosting/urls", authorized(BUILDER), controller.fetchUrls)
   .get("/api/hosting", authorized(BUILDER), controller.fetch)
   .post("/api/hosting", authorized(BUILDER), controller.save)
+  .get(
+    "/api/hosting/apps",
+    authorized(BUILDER),
+    selfhost,
+    controller.getDeployedApps
+  )
 
 module.exports = router
diff --git a/packages/server/src/db/client.js b/packages/server/src/db/client.js
index 1477ee4315..a3a053f3c7 100644
--- a/packages/server/src/db/client.js
+++ b/packages/server/src/db/client.js
@@ -12,6 +12,7 @@ PouchDB.adapter("writableStream", replicationStream.adapters.writableStream)
 
 let POUCH_DB_DEFAULTS = {
   prefix: COUCH_DB_URL,
+  skip_setup: !!env.CLOUD,
 }
 
 if (isInMemory) {
diff --git a/packages/server/src/environment.js b/packages/server/src/environment.js
index 5fbf57448a..4faaabe6ab 100644
--- a/packages/server/src/environment.js
+++ b/packages/server/src/environment.js
@@ -28,6 +28,8 @@ module.exports = {
   SENDGRID_API_KEY: process.env.SENDGRID_API_KEY,
   CLOUD: process.env.CLOUD,
   SELF_HOSTED: process.env.SELF_HOSTED,
+  WORKER_URL: process.env.WORKER_URL,
+  HOSTING_KEY: process.env.HOSTING_KEY,
   DYNAMO_ENDPOINT: process.env.DYNAMO_ENDPOINT,
   AWS_REGION: process.env.AWS_REGION,
   DEPLOYMENT_CREDENTIALS_URL: process.env.DEPLOYMENT_CREDENTIALS_URL,
diff --git a/packages/server/src/middleware/authenticated.js b/packages/server/src/middleware/authenticated.js
index 277c2b28db..27b3f52725 100644
--- a/packages/server/src/middleware/authenticated.js
+++ b/packages/server/src/middleware/authenticated.js
@@ -49,6 +49,8 @@ module.exports = async (ctx, next) => {
       role: await getRole(appId, jwtPayload.roleId),
     }
   } catch (err) {
+    // TODO - this can happen if the JWT secret is changed and can never login
+    // TODO: wipe cookies if they exist
     ctx.throw(err.status || STATUS_CODES.FORBIDDEN, err.text)
   }
 
diff --git a/packages/server/src/middleware/selfhost.js b/packages/server/src/middleware/selfhost.js
new file mode 100644
index 0000000000..1c96cee33c
--- /dev/null
+++ b/packages/server/src/middleware/selfhost.js
@@ -0,0 +1,16 @@
+const env = require("../environment")
+const hosting = require("../utilities/builder/hosting")
+// if added as a middleware will stop requests unless builder is in self host mode
+// or cloud is in self host
+module.exports = async (ctx, next) => {
+  if (env.CLOUD && env.SELF_HOSTED) {
+    await next()
+    return
+  }
+  const hostingInfo = await hosting.getHostingInfo()
+  if (hostingInfo.type === hosting.HostingTypes.SELF) {
+    await next()
+    return
+  }
+  ctx.throw(400, "Endpoint unavailable in cloud hosting.")
+}
diff --git a/packages/server/src/utilities/builder/hosting.js b/packages/server/src/utilities/builder/hosting.js
index b72544e3f7..814796ff7e 100644
--- a/packages/server/src/utilities/builder/hosting.js
+++ b/packages/server/src/utilities/builder/hosting.js
@@ -1,5 +1,7 @@
 const CouchDB = require("../../db")
 const { BUILDER_CONFIG_DB, HOSTING_DOC } = require("../../constants")
+const fetch = require("node-fetch")
+const env = require("../../environment")
 
 const PROD_HOSTING_URL = "app.budi.live"
 
@@ -81,3 +83,22 @@ exports.getTemplatesUrl = async (appId, type, name) => {
   }
   return `${protocol}${hostingInfo.templatesUrl}/${path}`
 }
+
+exports.getDeployedApps = async () => {
+  const hostingInfo = await exports.getHostingInfo()
+  if (
+    (!env.CLOUD && hostingInfo.type === exports.HostingTypes.CLOUD) ||
+    (env.CLOUD && !env.SELF_HOSTED)
+  ) {
+    throw "Can only check apps for self hosted environments"
+  }
+  const workerUrl = !env.CLOUD ? await exports.getWorkerUrl() : env.WORKER_URL
+  const hostingKey = !env.CLOUD ? hostingInfo.selfHostKey : env.HOSTING_KEY
+  const response = await fetch(`${workerUrl}/api/apps`, {
+    method: "GET",
+    headers: {
+      "x-budibase-auth": hostingKey,
+    },
+  })
+  return response.json()
+}
diff --git a/packages/server/src/utilities/index.js b/packages/server/src/utilities/index.js
index b9b512a80f..fd51bcdaf0 100644
--- a/packages/server/src/utilities/index.js
+++ b/packages/server/src/utilities/index.js
@@ -2,6 +2,7 @@ const env = require("../environment")
 const { DocumentTypes, SEPARATOR } = require("../db/utils")
 const fs = require("fs")
 const { cloneDeep } = require("lodash/fp")
+const CouchDB = require("../db")
 
 const APP_PREFIX = DocumentTypes.APP + SEPARATOR
 
@@ -184,3 +185,17 @@ exports.coerceRowValues = (row, table) => {
 exports.getLogoUrl = () => {
   return "https://d33wubrfki0l68.cloudfront.net/aac32159d7207b5085e74a7ef67afbb7027786c5/2b1fd/img/logo/bb-emblem.svg"
 }
+
+exports.getAllApps = async () => {
+  let allDbs = await CouchDB.allDbs()
+  const appDbNames = allDbs.filter(dbName => dbName.startsWith(APP_PREFIX))
+  const appPromises = appDbNames.map(db => new CouchDB(db).get(db))
+  if (appPromises.length === 0) {
+    return []
+  } else {
+    const response = await Promise.allSettled(appPromises)
+    return response
+      .filter(result => result.status === "fulfilled")
+      .map(({ value }) => value)
+  }
+}
diff --git a/packages/worker/package.json b/packages/worker/package.json
index d3def44844..eb52bd840e 100644
--- a/packages/worker/package.json
+++ b/packages/worker/package.json
@@ -28,7 +28,10 @@
     "koa-send": "^5.0.0",
     "koa-session": "^5.12.0",
     "koa-static": "^5.0.0",
+    "node-fetch": "^2.6.1",
     "pino-pretty": "^4.0.0",
+    "pouchdb": "^7.2.2",
+    "pouchdb-all-dbs": "^1.0.2",
     "server-destroy": "^1.0.1"
   }
 }
diff --git a/packages/worker/src/api/controllers/app.js b/packages/worker/src/api/controllers/app.js
new file mode 100644
index 0000000000..114970a61b
--- /dev/null
+++ b/packages/worker/src/api/controllers/app.js
@@ -0,0 +1,29 @@
+const fetch = require("node-fetch")
+const CouchDB = require("../../db")
+const env = require("../../environment")
+
+const APP_PREFIX = "app_"
+
+exports.getApps = async ctx => {
+  let allDbs
+  // allDbs call of CouchDB is very inaccurate in production
+  if (env.COUCH_DB_URL) {
+    allDbs = await (await fetch(`${env.COUCH_DB_URL}/_all_dbs`)).json()
+  } else {
+    allDbs = await CouchDB.allDbs()
+  }
+  const appDbNames = allDbs.filter(dbName => dbName.startsWith(APP_PREFIX))
+  const appPromises = appDbNames.map(db => new CouchDB(db).get(db))
+  const apps = await Promise.all(appPromises)
+  const body = {}
+  for (let app of apps) {
+    let url = app.url || encodeURI(`${app.name}`)
+    url = `/${url.replace(/\/|\\/g, "")}`
+    body[url] = {
+      appId: app._id,
+      name: app.name,
+      url,
+    }
+  }
+  ctx.body = body
+}
diff --git a/packages/worker/src/api/controllers/deploy.js b/packages/worker/src/api/controllers/deploy.js
index 956d56f3ca..207be71c90 100644
--- a/packages/worker/src/api/controllers/deploy.js
+++ b/packages/worker/src/api/controllers/deploy.js
@@ -21,7 +21,7 @@ const PUBLIC_READ_POLICY = {
 
 async function getCouchSession() {
   // fetch session token for the api user
-  const session = await got.post(`${env.RAW_COUCH_DB_URL}/_session`, {
+  const session = await got.post(`${env.COUCH_DB_URL}/_session`, {
     responseType: "json",
     credentials: "include",
     json: {
diff --git a/packages/worker/src/api/routes/app.js b/packages/worker/src/api/routes/app.js
new file mode 100644
index 0000000000..10656e5362
--- /dev/null
+++ b/packages/worker/src/api/routes/app.js
@@ -0,0 +1,9 @@
+const Router = require("@koa/router")
+const controller = require("../controllers/app")
+const checkKey = require("../../middleware/check-key")
+
+const router = Router()
+
+router.get("/api/apps", checkKey, controller.getApps)
+
+module.exports = router
diff --git a/packages/worker/src/api/routes/index.js b/packages/worker/src/api/routes/index.js
index 3b4455cef9..7ad619c2b7 100644
--- a/packages/worker/src/api/routes/index.js
+++ b/packages/worker/src/api/routes/index.js
@@ -1,3 +1,4 @@
 const deployRoutes = require("./deploy")
+const appRoutes = require("./app")
 
-exports.routes = [deployRoutes]
+exports.routes = [deployRoutes, appRoutes]
diff --git a/packages/worker/src/db/index.js b/packages/worker/src/db/index.js
new file mode 100644
index 0000000000..9095682172
--- /dev/null
+++ b/packages/worker/src/db/index.js
@@ -0,0 +1,16 @@
+const PouchDB = require("pouchdb")
+const allDbs = require("pouchdb-all-dbs")
+const env = require("../environment")
+const { join } = require("path")
+const { homedir } = require("os")
+
+// level option is purely for testing (development)
+const COUCH_DB_URL = env.COUCH_DB_URL || `leveldb://${join(homedir(), ".budibase")}/.data/`
+
+const Pouch = PouchDB.defaults({
+  prefix: COUCH_DB_URL,
+})
+
+allDbs(Pouch)
+
+module.exports = Pouch
\ No newline at end of file
diff --git a/packages/worker/src/environment.js b/packages/worker/src/environment.js
index c8863f5b51..0cd7860869 100644
--- a/packages/worker/src/environment.js
+++ b/packages/worker/src/environment.js
@@ -1,16 +1,14 @@
 module.exports = {
   SELF_HOSTED: process.env.SELF_HOSTED,
-  WORKER_API_KEY: process.env.WORKER_API_KEY,
   PORT: process.env.PORT,
   MINIO_ACCESS_KEY: process.env.MINIO_ACCESS_KEY,
   MINIO_SECRET_KEY: process.env.MINIO_SECRET_KEY,
-  COUCH_DB_USERNAME: process.env.COUCH_DB_USERNAME,
-  COUCH_DB_PASSWORD: process.env.COUCH_DB_PASSWORD,
-  RAW_COUCH_DB_URL: process.env.RAW_COUCH_DB_URL,
   RAW_MINIO_URL: process.env.RAW_MINIO_URL,
-  COUCH_DB_PORT: process.env.COUCH_DB_PORT,
   MINIO_PORT: process.env.MINIO_PORT,
   SELF_HOST_KEY: process.env.SELF_HOST_KEY,
+  COUCH_DB_USERNAME: process.env.COUCH_DB_USERNAME,
+  COUCH_DB_PASSWORD: process.env.COUCH_DB_PASSWORD,
+  COUCH_DB_URL: process.env.COUCH_DB_URL,
   _set(key, value) {
     process.env[key] = value
     module.exports[key] = value
diff --git a/packages/worker/src/middleware/check-key.js b/packages/worker/src/middleware/check-key.js
index c234e2dc65..762cb1ae45 100644
--- a/packages/worker/src/middleware/check-key.js
+++ b/packages/worker/src/middleware/check-key.js
@@ -1,11 +1,11 @@
 const env = require("../environment")
 
 module.exports = async (ctx, next) => {
-  if (
-    !ctx.request.body.selfHostKey ||
-    env.SELF_HOST_KEY !== ctx.request.body.selfHostKey
-  ) {
-    ctx.throw(401, "Deployment unauthorised")
+  const selfHostKey =
+    ctx.request.headers["x-budibase-auth"] ||
+    ctx.request.body.selfHostKey
+  if (!selfHostKey || env.SELF_HOST_KEY !== selfHostKey) {
+    ctx.throw(401, "Request unauthorised")
   } else {
     await next()
   }
diff --git a/packages/worker/yarn.lock b/packages/worker/yarn.lock
index 92205158a0..d88e560173 100644
--- a/packages/worker/yarn.lock
+++ b/packages/worker/yarn.lock
@@ -107,6 +107,35 @@
   dependencies:
     "@types/node" "*"
 
+abort-controller@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
+  integrity sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==
+  dependencies:
+    event-target-shim "^5.0.0"
+
+abstract-leveldown@^6.2.1:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/abstract-leveldown/-/abstract-leveldown-6.3.0.tgz#d25221d1e6612f820c35963ba4bd739928f6026a"
+  integrity sha512-TU5nlYgta8YrBMNpc9FwQzRbiXsj49gsALsXadbGHt9CROPzX5fB0rWDR5mtdpOOKa5XqRFpbj1QroPAoPzVjQ==
+  dependencies:
+    buffer "^5.5.0"
+    immediate "^3.2.3"
+    level-concat-iterator "~2.0.0"
+    level-supports "~1.0.0"
+    xtend "~4.0.0"
+
+abstract-leveldown@~6.2.1, abstract-leveldown@~6.2.3:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/abstract-leveldown/-/abstract-leveldown-6.2.3.tgz#036543d87e3710f2528e47040bc3261b77a9a8eb"
+  integrity sha512-BsLm5vFMRUrrLeCcRc+G0t2qOaTzpoJQLOubq2XM72eNpjF5UdU5o/5NvlNhx95XHcAvcl8OMXr4mlg/fRgUXQ==
+  dependencies:
+    buffer "^5.5.0"
+    immediate "^3.2.3"
+    level-concat-iterator "~2.0.0"
+    level-supports "~1.0.0"
+    xtend "~4.0.0"
+
 accepts@^1.3.5:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
@@ -115,6 +144,21 @@ accepts@^1.3.5:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
+acorn@^1.0.3:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-1.2.2.tgz#c8ce27de0acc76d896d2b1fad3df588d9e82f014"
+  integrity sha1-yM4n3grMdtiW0rH6099YjZ6C8BQ=
+
+acorn@^5.2.1:
+  version "5.7.4"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.4.tgz#3e8d8a9947d0599a1796d10225d7432f4a4acf5e"
+  integrity sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==
+
+amdefine@>=0.0.4:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
+  integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
+
 ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -144,6 +188,21 @@ args@^5.0.1:
     leven "2.1.0"
     mri "1.1.4"
 
+argsarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/argsarray/-/argsarray-0.0.1.tgz#6e7207b4ecdb39b0af88303fa5ae22bda8df61cb"
+  integrity sha1-bnIHtOzbObCviDA/pa4ivajfYcs=
+
+ast-types@0.8.15:
+  version "0.8.15"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.8.15.tgz#8eef0827f04dff0ec8857ba925abe3fea6194e52"
+  integrity sha1-ju8IJ/BN/w7IhXupJavj/qYZTlI=
+
+ast-types@0.9.6:
+  version "0.9.6"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.6.tgz#102c9e9e9005d3e7e3829bf0c4fa24ee862ee9b9"
+  integrity sha1-ECyenpAF0+fjgpvwxPok7oYu6bk=
+
 atomic-sleep@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
@@ -164,11 +223,39 @@ aws-sdk@^2.811.0:
     uuid "3.3.2"
     xml2js "0.4.19"
 
+balanced-match@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
+
+base62@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/base62/-/base62-0.1.1.tgz#7b4174c2f94449753b11c2651c083da841a7b084"
+  integrity sha1-e0F0wvlESXU7EcJlHAg9qEGnsIQ=
+
+base62@^1.1.0:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/base62/-/base62-1.2.8.tgz#1264cb0fb848d875792877479dbe8bae6bae3428"
+  integrity sha512-V6YHUbjLxN1ymqNLb1DPHoU1CpfdL7d2YTIp5W3U4hhoG4hhxNmsFDs66M9EXxBiSEke5Bt5dwdfMwwZF70iLA==
+
 base64-js@^1.0.2, base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
 
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+buffer-from@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
+  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
+
 buffer@4.9.2:
   version "4.9.2"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.2.tgz#230ead344002988644841ab0244af8c44bbe3ef8"
@@ -178,7 +265,7 @@ buffer@4.9.2:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
-buffer@^5.1.0:
+buffer@^5.1.0, buffer@^5.5.0, buffer@^5.6.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
   integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
@@ -239,6 +326,11 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+clone-buffer@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58"
+  integrity sha1-4+JbIHrE5wGvch4staFnksrD3Fg=
+
 clone-response@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/clone-response/-/clone-response-1.0.2.tgz#d1dc973920314df67fbeb94223b4ee350239e96b"
@@ -285,6 +377,26 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+commander@^2.5.0:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
+commoner@^0.10.1:
+  version "0.10.8"
+  resolved "https://registry.yarnpkg.com/commoner/-/commoner-0.10.8.tgz#34fc3672cd24393e8bb47e70caa0293811f4f2c5"
+  integrity sha1-NPw2cs0kOT6LtH5wyqApOBH08sU=
+  dependencies:
+    commander "^2.5.0"
+    detective "^4.3.1"
+    glob "^5.0.15"
+    graceful-fs "^4.1.2"
+    iconv-lite "^0.4.5"
+    mkdirp "^0.5.0"
+    private "^0.1.6"
+    q "^1.1.2"
+    recast "^0.11.17"
+
 compressible@^2.0.0:
   version "2.0.18"
   resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
@@ -292,6 +404,11 @@ compressible@^2.0.0:
   dependencies:
     mime-db ">= 1.43.0 < 2"
 
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
+
 content-disposition@~0.5.2:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
@@ -312,7 +429,7 @@ cookies@~0.8.0:
     depd "~2.0.0"
     keygrip "~1.1.0"
 
-core-util-is@^1.0.2:
+core-util-is@^1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
   integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
@@ -367,6 +484,19 @@ defer-to-connect@^2.0.0:
   resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-2.0.0.tgz#83d6b199db041593ac84d781b5222308ccf4c2c1"
   integrity sha512-bYL2d05vOSf1JEZNx5vSAtPuBMkX8K9EUutg7zlKvTqKXHt7RhWJFbmd7qakVuf13i+IkGmp6FwSsONOf6VYIg==
 
+deferred-leveldown@~5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/deferred-leveldown/-/deferred-leveldown-5.3.0.tgz#27a997ad95408b61161aa69bd489b86c71b78058"
+  integrity sha512-a59VOT+oDy7vtAbLRCZwWgxu2BaCfd5Hk7wxJd48ei7I+nsg8Orlb9CLG0PMZienk9BSUKgeAqkO2+Lw+1+Ukw==
+  dependencies:
+    abstract-leveldown "~6.2.1"
+    inherits "^2.0.3"
+
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+  integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
+
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -387,6 +517,19 @@ destroy@^1.0.4:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
   integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
 
+detective@^4.3.1:
+  version "4.7.1"
+  resolved "https://registry.yarnpkg.com/detective/-/detective-4.7.1.tgz#0eca7314338442febb6d65da54c10bb1c82b246e"
+  integrity sha512-H6PmeeUcZloWtdt4DAkFyzFL94arpHr3NOwwmVILFiy+9Qd4JTxxXrzfyGk/lmct2qVGBwTSwSXagqu2BxmWig==
+  dependencies:
+    acorn "^5.2.1"
+    defined "^1.0.0"
+
+double-ended-queue@2.1.0-0:
+  version "2.1.0-0"
+  resolved "https://registry.yarnpkg.com/double-ended-queue/-/double-ended-queue-2.1.0-0.tgz#103d3527fd31528f40188130c841efdd78264e5c"
+  integrity sha1-ED01J/0xUo9AGIEwyEHv3XgmTlw=
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -397,6 +540,16 @@ encodeurl@^1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
+encoding-down@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/encoding-down/-/encoding-down-6.3.0.tgz#b1c4eb0e1728c146ecaef8e32963c549e76d082b"
+  integrity sha512-QKrV0iKR6MZVJV08QY0wp1e7vF6QbhnbQhb07bwpEyuz4uZiZgPlEGdkCROuFkUwdxlFaiPIhjyarH1ee/3vhw==
+  dependencies:
+    abstract-leveldown "^6.2.1"
+    inherits "^2.0.3"
+    level-codec "^9.0.0"
+    level-errors "^2.0.0"
+
 end-of-stream@^1.1.0:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -404,6 +557,38 @@ end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
+end-stream@~0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/end-stream/-/end-stream-0.1.0.tgz#32003f3f438a2b0143168137f8fa6e9866c81ed5"
+  integrity sha1-MgA/P0OKKwFDFoE3+PpumGbIHtU=
+  dependencies:
+    write-stream "~0.4.3"
+
+errno@~0.1.1:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
+  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
+  dependencies:
+    prr "~1.0.1"
+
+es3ify@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/es3ify/-/es3ify-0.1.4.tgz#ad9fa5df1ae34f3f31e1211b5818b2d51078dfd1"
+  integrity sha1-rZ+l3xrjTz8x4SEbWBiy1RB439E=
+  dependencies:
+    esprima-fb "~3001.0001.0000-dev-harmony-fb"
+    jstransform "~3.0.0"
+    through "~2.3.4"
+
+es3ify@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/es3ify/-/es3ify-0.2.2.tgz#5dae3e650e5be3684b88066513d528d092629862"
+  integrity sha1-Xa4+ZQ5b42hLiAZlE9Uo0JJimGI=
+  dependencies:
+    esprima "^2.7.1"
+    jstransform "~11.0.0"
+    through "~2.3.4"
+
 escape-html@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
@@ -414,11 +599,56 @@ escape-string-regexp@^1.0.5:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
+esmangle-evaluator@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/esmangle-evaluator/-/esmangle-evaluator-1.0.1.tgz#620d866ef4861b3311f75766d52a8572bb3c6336"
+  integrity sha1-Yg2GbvSGGzMR91dm1SqFcrs8YzY=
+
+esprima-fb@^15001.1.0-dev-harmony-fb:
+  version "15001.1.0-dev-harmony-fb"
+  resolved "https://registry.yarnpkg.com/esprima-fb/-/esprima-fb-15001.1.0-dev-harmony-fb.tgz#30a947303c6b8d5e955bee2b99b1d233206a6901"
+  integrity sha1-MKlHMDxrjV6VW+4rmbHSMyBqaQE=
+
+esprima-fb@~15001.1001.0-dev-harmony-fb:
+  version "15001.1001.0-dev-harmony-fb"
+  resolved "https://registry.yarnpkg.com/esprima-fb/-/esprima-fb-15001.1001.0-dev-harmony-fb.tgz#43beb57ec26e8cf237d3dd8b33e42533577f2659"
+  integrity sha1-Q761fsJujPI3092LM+QlM1d/Jlk=
+
+esprima-fb@~3001.0001.0000-dev-harmony-fb, esprima-fb@~3001.1.0-dev-harmony-fb:
+  version "3001.1.0-dev-harmony-fb"
+  resolved "https://registry.yarnpkg.com/esprima-fb/-/esprima-fb-3001.0001.0000-dev-harmony-fb.tgz#b77d37abcd38ea0b77426bb8bc2922ce6b426411"
+  integrity sha1-t303q8046gt3Qmu4vCkizmtCZBE=
+
+esprima@^2.7.1:
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
+  integrity sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=
+
+esprima@~3.1.0:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
+  integrity sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=
+
+event-target-shim@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
+  integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
+
 events@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
   integrity sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=
 
+falafel@^1.0.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/falafel/-/falafel-1.2.0.tgz#c18d24ef5091174a497f318cd24b026a25cddab4"
+  integrity sha1-wY0k71CRF0pJfzGM0ksCaiXN2rQ=
+  dependencies:
+    acorn "^1.0.3"
+    foreach "^2.0.5"
+    isarray "0.0.1"
+    object-keys "^1.0.6"
+
 fast-redact@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/fast-redact/-/fast-redact-3.0.0.tgz#ac2f9e36c9f4976f5db9fb18c6ffbaf308cf316d"
@@ -436,11 +666,23 @@ fast-url-parser@^1.1.3:
   dependencies:
     punycode "^1.3.2"
 
+fetch-cookie@0.10.1:
+  version "0.10.1"
+  resolved "https://registry.yarnpkg.com/fetch-cookie/-/fetch-cookie-0.10.1.tgz#5ea88f3d36950543c87997c27ae2aeafb4b5c4d4"
+  integrity sha512-beB+VEd4cNeVG1PY+ee74+PkuCQnik78pgLi5Ah/7qdUfov8IctU0vLUbBT8/10Ma5GMBeI4wtxhGrEfKNYs2g==
+  dependencies:
+    tough-cookie "^2.3.3 || ^3.0.1 || ^4.0.0"
+
 flatstr@^1.0.12:
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/flatstr/-/flatstr-1.0.12.tgz#c2ba6a08173edbb6c9640e3055b95e287ceb5931"
   integrity sha512-4zPxDyhCyiN2wIAtSLI6gc82/EjqZc1onI4Mz/l0pWrAlsSfYH/2ZIcU+e3oA2wDwbzIWNKwa23F8rh6+DRWkw==
 
+foreach@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
+  integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
+
 formidable@^1.1.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/formidable/-/formidable-1.2.2.tgz#bf69aea2972982675f00865342b982986f6b8dd9"
@@ -458,6 +700,17 @@ get-stream@^5.1.0:
   dependencies:
     pump "^3.0.0"
 
+glob@^5.0.15:
+  version "5.0.15"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
+  integrity sha1-G8k2ueAvSmA/zCIuz3Yz0wuLk7E=
+  dependencies:
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "2 || 3"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 got@^11.8.1:
   version "11.8.1"
   resolved "https://registry.yarnpkg.com/got/-/got-11.8.1.tgz#df04adfaf2e782babb3daabc79139feec2f7e85d"
@@ -475,6 +728,11 @@ got@^11.8.1:
     p-cancelable "^2.0.0"
     responselike "^2.0.0"
 
+graceful-fs@^4.1.2:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
+  integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
+
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -538,7 +796,7 @@ http2-wrapper@^1.0.0-beta.5.2:
     quick-lru "^5.1.1"
     resolve-alpn "^1.0.0"
 
-iconv-lite@0.4.24:
+iconv-lite@0.4.24, iconv-lite@^0.4.5:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -555,20 +813,46 @@ ieee754@^1.1.13, ieee754@^1.1.4:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
+immediate@3.3.0, immediate@^3.2.3:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.3.0.tgz#1aef225517836bcdf7f2a2de2600c79ff0269266"
+  integrity sha512-HR7EVodfFUdQCTIeySw+WDRFJlPcLOJbXfwwZ7Oom6tjsvZ3bOkCDJHehQC3nxJrv7+f9XecwazynjU8e4Vw3Q==
+
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
+
 inflation@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/inflation/-/inflation-2.0.0.tgz#8b417e47c28f925a45133d914ca1fd389107f30f"
   integrity sha1-i0F+R8KPklpFEz2RTKH9OJEH8w8=
 
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@2.0.4, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
 inherits@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
   integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
-inherits@2.0.4, inherits@^2.0.3:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
-  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+inline-process-browser@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/inline-process-browser/-/inline-process-browser-1.0.0.tgz#46a61b153dd3c9b1624b1a00626edb4f7f414f22"
+  integrity sha1-RqYbFT3TybFiSxoAYm7bT39BTyI=
+  dependencies:
+    falafel "^1.0.1"
+    through2 "^0.6.5"
 
 is-class-hotfix@~0.0.6:
   version "0.0.6"
@@ -630,6 +914,26 @@ json-buffer@3.0.1:
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
   integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
 
+jstransform@~11.0.0:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/jstransform/-/jstransform-11.0.3.tgz#09a78993e0ae4d4ef4487f6155a91f6190cb4223"
+  integrity sha1-CaeJk+CuTU70SH9hVakfYZDLQiM=
+  dependencies:
+    base62 "^1.1.0"
+    commoner "^0.10.1"
+    esprima-fb "^15001.1.0-dev-harmony-fb"
+    object-assign "^2.0.0"
+    source-map "^0.4.2"
+
+jstransform@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/jstransform/-/jstransform-3.0.0.tgz#a2591ab6cee8d97bf3be830dbfa2313b87cd640b"
+  integrity sha1-olkats7o2XvzvoMNv6IxO4fNZAs=
+  dependencies:
+    base62 "0.1.1"
+    esprima-fb "~3001.1.0-dev-harmony-fb"
+    source-map "0.1.31"
+
 keygrip@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/keygrip/-/keygrip-1.1.0.tgz#871b1681d5e159c62a445b0c74b615e0917e7226"
@@ -752,16 +1056,120 @@ koa@^2.7.0:
     type-is "^1.6.16"
     vary "^1.1.2"
 
+level-codec@9.0.2, level-codec@^9.0.0:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/level-codec/-/level-codec-9.0.2.tgz#fd60df8c64786a80d44e63423096ffead63d8cbc"
+  integrity sha512-UyIwNb1lJBChJnGfjmO0OR+ezh2iVu1Kas3nvBS/BzGnx79dv6g7unpKIDNPMhfdTEGoc7mC8uAu51XEtX+FHQ==
+  dependencies:
+    buffer "^5.6.0"
+
+level-concat-iterator@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/level-concat-iterator/-/level-concat-iterator-2.0.1.tgz#1d1009cf108340252cb38c51f9727311193e6263"
+  integrity sha512-OTKKOqeav2QWcERMJR7IS9CUo1sHnke2C0gkSmcR7QuEtFNLLzHQAvnMw8ykvEcv0Qtkg0p7FOwP1v9e5Smdcw==
+
+level-errors@^2.0.0, level-errors@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/level-errors/-/level-errors-2.0.1.tgz#2132a677bf4e679ce029f517c2f17432800c05c8"
+  integrity sha512-UVprBJXite4gPS+3VznfgDSU8PTRuVX0NXwoWW50KLxd2yw4Y1t2JUR5In1itQnudZqRMT9DlAM3Q//9NCjCFw==
+  dependencies:
+    errno "~0.1.1"
+
+level-iterator-stream@~4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/level-iterator-stream/-/level-iterator-stream-4.0.2.tgz#7ceba69b713b0d7e22fcc0d1f128ccdc8a24f79c"
+  integrity sha512-ZSthfEqzGSOMWoUGhTXdX9jv26d32XJuHz/5YnuHZzH6wldfWMOVwI9TBtKcya4BKTyTt3XVA0A3cF3q5CY30Q==
+  dependencies:
+    inherits "^2.0.4"
+    readable-stream "^3.4.0"
+    xtend "^4.0.2"
+
+level-js@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/level-js/-/level-js-5.0.2.tgz#5e280b8f93abd9ef3a305b13faf0b5397c969b55"
+  integrity sha512-SnBIDo2pdO5VXh02ZmtAyPP6/+6YTJg2ibLtl9C34pWvmtMEmRTWpra+qO/hifkUtBTOtfx6S9vLDjBsBK4gRg==
+  dependencies:
+    abstract-leveldown "~6.2.3"
+    buffer "^5.5.0"
+    inherits "^2.0.3"
+    ltgt "^2.1.2"
+
+level-packager@^5.1.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/level-packager/-/level-packager-5.1.1.tgz#323ec842d6babe7336f70299c14df2e329c18939"
+  integrity sha512-HMwMaQPlTC1IlcwT3+swhqf/NUO+ZhXVz6TY1zZIIZlIR0YSn8GtAAWmIvKjNY16ZkEg/JcpAuQskxsXqC0yOQ==
+  dependencies:
+    encoding-down "^6.3.0"
+    levelup "^4.3.2"
+
+level-supports@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/level-supports/-/level-supports-1.0.1.tgz#2f530a596834c7301622521988e2c36bb77d122d"
+  integrity sha512-rXM7GYnW8gsl1vedTJIbzOrRv85c/2uCMpiiCzO2fndd06U/kUXEEU9evYn4zFggBOg36IsBW8LzqIpETwwQzg==
+  dependencies:
+    xtend "^4.0.2"
+
+level-write-stream@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/level-write-stream/-/level-write-stream-1.0.0.tgz#3f7fbb679a55137c0feb303dee766e12ee13c1dc"
+  integrity sha1-P3+7Z5pVE3wP6zA97nZuEu4Twdw=
+  dependencies:
+    end-stream "~0.1.0"
+
+level@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/level/-/level-6.0.1.tgz#dc34c5edb81846a6de5079eac15706334b0d7cd6"
+  integrity sha512-psRSqJZCsC/irNhfHzrVZbmPYXDcEYhA5TVNwr+V92jF44rbf86hqGp8fiT702FyiArScYIlPSBTDUASCVNSpw==
+  dependencies:
+    level-js "^5.0.0"
+    level-packager "^5.1.0"
+    leveldown "^5.4.0"
+
+leveldown@5.6.0, leveldown@^5.4.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/leveldown/-/leveldown-5.6.0.tgz#16ba937bb2991c6094e13ac5a6898ee66d3eee98"
+  integrity sha512-iB8O/7Db9lPaITU1aA2txU/cBEXAt4vWwKQRrrWuS6XDgbP4QZGj9BL2aNbwb002atoQ/lIotJkfyzz+ygQnUQ==
+  dependencies:
+    abstract-leveldown "~6.2.1"
+    napi-macros "~2.0.0"
+    node-gyp-build "~4.1.0"
+
+levelup@4.4.0, levelup@^4.3.2:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/levelup/-/levelup-4.4.0.tgz#f89da3a228c38deb49c48f88a70fb71f01cafed6"
+  integrity sha512-94++VFO3qN95cM/d6eBXvd894oJE0w3cInq9USsyQzzoJxmiYzPAocNcuGCPGGjoXqDVJcr3C1jzt1TSjyaiLQ==
+  dependencies:
+    deferred-leveldown "~5.3.0"
+    level-errors "~2.0.0"
+    level-iterator-stream "~4.0.0"
+    level-supports "~1.0.0"
+    xtend "~4.0.0"
+
 leven@2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-2.1.0.tgz#c2e7a9f772094dee9d34202ae8acce4687875580"
   integrity sha1-wuep93IJTe6dNCAq6KzORoeHVYA=
 
+lie@3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.0.4.tgz#bc7ae1ebe7f1c8de39afdcd4f789076b47b0f634"
+  integrity sha1-vHrh6+fxyN45r9zU94kHa0ew9jQ=
+  dependencies:
+    es3ify "^0.2.2"
+    immediate "~3.0.5"
+    inline-process-browser "^1.0.0"
+    unreachable-branch-transform "^0.3.0"
+
 lowercase-keys@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
   integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==
 
+ltgt@2.2.1, ltgt@^2.1.2:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ltgt/-/ltgt-2.2.1.tgz#f35ca91c493f7b73da0e07495304f17b31f87ee5"
+  integrity sha1-81ypHEk/e3PaDgdJUwTxezH4fuU=
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -799,6 +1207,25 @@ mimic-response@^3.1.0:
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
   integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==
 
+"minimatch@2 || 3":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+
+mkdirp@^0.5.0:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
+  dependencies:
+    minimist "^1.2.5"
+
 mri@1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.4.tgz#7cb1dd1b9b40905f1fac053abe25b6720f44744a"
@@ -819,16 +1246,46 @@ ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+napi-macros@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/napi-macros/-/napi-macros-2.0.0.tgz#2b6bae421e7b96eb687aa6c77a7858640670001b"
+  integrity sha512-A0xLykHtARfueITVDernsAWdtIMbOJgKgcluwENp3AlsKN/PloyO10HtmoqnFAQAcxPkgZN7wdfPfEd0zNGxbg==
+
 negotiator@0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
   integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
 
+node-fetch@2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
+  integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
+
+node-fetch@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
+  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
+
+node-gyp-build@~4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.1.1.tgz#d7270b5d86717068d114cc57fff352f96d745feb"
+  integrity sha512-dSq1xmcPDKPZ2EED2S6zw/b9NKsqzXRE6dVr8TVQnI3FJOTteUMuqF3Qqs6LZg+mLGYJWqQzMbIjMtJqTv87nQ==
+
 normalize-url@^4.1.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129"
   integrity sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==
 
+object-assign@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-2.1.1.tgz#43c36e5d569ff8e4816c4efa8be02d26967c18aa"
+  integrity sha1-Q8NuXVaf+OSBbE76i+AtJpZ8GKo=
+
+object-keys@^1.0.6:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
 on-finished@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
@@ -836,7 +1293,7 @@ on-finished@^2.3.0:
   dependencies:
     ee-first "1.1.1"
 
-once@^1.3.1, once@^1.4.0:
+once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
@@ -858,7 +1315,7 @@ parseurl@^1.3.2:
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
   integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
 
-path-is-absolute@1.0.1:
+path-is-absolute@1.0.1, path-is-absolute@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
   integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
@@ -913,6 +1370,65 @@ pino@^6.0.0:
     quick-format-unescaped "^4.0.1"
     sonic-boom "^1.0.2"
 
+pouchdb-all-dbs@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pouchdb-all-dbs/-/pouchdb-all-dbs-1.0.2.tgz#8fa1aa4b01665e00e0da9c61bf6dbb99eca05d3c"
+  integrity sha1-j6GqSwFmXgDg2pxhv227meygXTw=
+  dependencies:
+    argsarray "0.0.1"
+    es3ify "^0.1.3"
+    inherits "~2.0.1"
+    pouchdb-promise "5.4.3"
+    tiny-queue "^0.2.0"
+
+pouchdb-promise@5.4.3:
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/pouchdb-promise/-/pouchdb-promise-5.4.3.tgz#331d670b1989d5a03f268811214f27f54150cb2b"
+  integrity sha1-Mx1nCxmJ1aA/JogRIU8n9UFQyys=
+  dependencies:
+    lie "3.0.4"
+
+pouchdb@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/pouchdb/-/pouchdb-7.2.2.tgz#fcae82862db527e4cf7576ed8549d1384961f364"
+  integrity sha512-5gf5nw5XH/2H/DJj8b0YkvG9fhA/4Jt6kL0Y8QjtztVjb1y4J19Rg4rG+fUbXu96gsUrlyIvZ3XfM0b4mogGmw==
+  dependencies:
+    abort-controller "3.0.0"
+    argsarray "0.0.1"
+    buffer-from "1.1.1"
+    clone-buffer "1.0.0"
+    double-ended-queue "2.1.0-0"
+    fetch-cookie "0.10.1"
+    immediate "3.3.0"
+    inherits "2.0.4"
+    level "6.0.1"
+    level-codec "9.0.2"
+    level-write-stream "1.0.0"
+    leveldown "5.6.0"
+    levelup "4.4.0"
+    ltgt "2.2.1"
+    node-fetch "2.6.0"
+    readable-stream "1.1.14"
+    spark-md5 "3.0.1"
+    through2 "3.0.2"
+    uuid "8.1.0"
+    vuvuzela "1.0.3"
+
+private@^0.1.6, private@~0.1.5:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
+  integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==
+
+prr@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
+  integrity sha1-0/wRS6BplaRexok/SEzrHXj19HY=
+
+psl@^1.1.33:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
+  integrity sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==
+
 pump@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
@@ -931,6 +1447,16 @@ punycode@^1.3.2:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
   integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
 
+punycode@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
+q@^1.1.2:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+  integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
+
 qs@^6.4.0:
   version "6.9.4"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.4.tgz#9090b290d1f91728d3c22e54843ca44aea5ab687"
@@ -961,7 +1487,17 @@ raw-body@^2.2.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-readable-stream@^3.0.0, readable-stream@^3.6.0:
+readable-stream@1.1.14:
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
+  integrity sha1-fPTFTvZI44EwhMY23SB54WbAgdk=
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+"readable-stream@2 || 3", readable-stream@^3.0.0, readable-stream@^3.4.0, readable-stream@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
   integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
@@ -970,6 +1506,41 @@ readable-stream@^3.0.0, readable-stream@^3.6.0:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
+"readable-stream@>=1.0.33-1 <1.1.0-0":
+  version "1.0.34"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
+  integrity sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
+readable-stream@~0.0.2:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-0.0.4.tgz#f32d76e3fb863344a548d79923007173665b3b8d"
+  integrity sha1-8y124/uGM0SlSNeZIwBxc2ZbO40=
+
+recast@^0.10.1:
+  version "0.10.43"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.10.43.tgz#b95d50f6d60761a5f6252e15d80678168491ce7f"
+  integrity sha1-uV1Q9tYHYaX2JS4V2AZ4FoSRzn8=
+  dependencies:
+    ast-types "0.8.15"
+    esprima-fb "~15001.1001.0-dev-harmony-fb"
+    private "~0.1.5"
+    source-map "~0.5.0"
+
+recast@^0.11.17:
+  version "0.11.23"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.11.23.tgz#451fd3004ab1e4df9b4e4b66376b2a21912462d3"
+  integrity sha1-RR/TAEqx5N+bTktmN2sqIZEkYtM=
+  dependencies:
+    ast-types "0.9.6"
+    esprima "~3.1.0"
+    private "~0.1.5"
+    source-map "~0.5.0"
+
 resolve-alpn@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/resolve-alpn/-/resolve-alpn-1.0.0.tgz#745ad60b3d6aff4b4a48e01b8c0bdc70959e0e8c"
@@ -1043,6 +1614,30 @@ sonic-boom@^1.0.2:
     atomic-sleep "^1.0.0"
     flatstr "^1.0.12"
 
+source-map@0.1.31:
+  version "0.1.31"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.31.tgz#9f704d0d69d9e138a81badf6ebb4fde33d151c61"
+  integrity sha1-n3BNDWnZ4TioG63267T94z0VHGE=
+  dependencies:
+    amdefine ">=0.0.4"
+
+source-map@^0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
+  integrity sha1-66T12pwNyZneaAMti092FzZSA2s=
+  dependencies:
+    amdefine ">=0.0.4"
+
+source-map@~0.5.0:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
+
+spark-md5@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/spark-md5/-/spark-md5-3.0.1.tgz#83a0e255734f2ab4e5c466e5a2cfc9ba2aa2124d"
+  integrity sha512-0tF3AGSD1ppQeuffsLDIOWlKUd3lS92tFxcsrh5Pe3ZphhnoK+oXIBTzOAThZCiuINZLvpiLH/1VS1/ANEJVig==
+
 split2@^3.1.1:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/split2/-/split2-3.2.2.tgz#bf2cf2a37d838312c249c89206fd7a17dd12365f"
@@ -1067,6 +1662,11 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
+string_decoder@~0.10.x:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+  integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=
+
 strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
@@ -1086,11 +1686,46 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+through2@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-3.0.2.tgz#99f88931cfc761ec7678b41d5d7336b5b6a07bf4"
+  integrity sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==
+  dependencies:
+    inherits "^2.0.4"
+    readable-stream "2 || 3"
+
+through2@^0.6.2, through2@^0.6.5:
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-0.6.5.tgz#41ab9c67b29d57209071410e1d7a7a968cd3ad48"
+  integrity sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=
+  dependencies:
+    readable-stream ">=1.0.33-1 <1.1.0-0"
+    xtend ">=4.0.0 <4.1.0-0"
+
+through@~2.3.4:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
+
+tiny-queue@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/tiny-queue/-/tiny-queue-0.2.1.tgz#25a67f2c6e253b2ca941977b5ef7442ef97a6046"
+  integrity sha1-JaZ/LG4lOyypQZd7XvdELvl6YEY=
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
+"tough-cookie@^2.3.3 || ^3.0.1 || ^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.0.0.tgz#d822234eeca882f991f0f908824ad2622ddbece4"
+  integrity sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==
+  dependencies:
+    psl "^1.1.33"
+    punycode "^2.1.1"
+    universalify "^0.1.2"
+
 tsscmp@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.6.tgz#85b99583ac3589ec4bfef825b5000aa911d605eb"
@@ -1104,11 +1739,25 @@ type-is@^1.6.14, type-is@^1.6.16:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
+universalify@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
+  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
+
 unpipe@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
   integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
 
+unreachable-branch-transform@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/unreachable-branch-transform/-/unreachable-branch-transform-0.3.0.tgz#d99cc4c6e746d264928845b611db54b0f3474caa"
+  integrity sha1-2ZzExudG0mSSiEW2EdtUsPNHTKo=
+  dependencies:
+    esmangle-evaluator "^1.0.0"
+    recast "^0.10.1"
+    through2 "^0.6.2"
+
 urijs@^1.19.2:
   version "1.19.2"
   resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.19.2.tgz#f9be09f00c4c5134b7cb3cf475c1dd394526265a"
@@ -1132,6 +1781,11 @@ uuid@3.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
   integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==
 
+uuid@8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.1.0.tgz#6f1536eb43249f473abc6bd58ff983da1ca30d8d"
+  integrity sha512-CI18flHDznR0lq54xBycOVmphdCYnQLKn8abKn7PXUiKUGdEd+/l9LWNJmugXel4hXq7S+RMNl34ecyC9TntWg==
+
 uuid@^3.3.2:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
@@ -1142,11 +1796,23 @@ vary@^1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
 
+vuvuzela@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/vuvuzela/-/vuvuzela-1.0.3.tgz#3be145e58271c73ca55279dd851f12a682114b0b"
+  integrity sha1-O+FF5YJxxzylUnndhR8SpoIRSws=
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
+write-stream@~0.4.3:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/write-stream/-/write-stream-0.4.3.tgz#83cc8c0347d0af6057a93862b4e3ae01de5c81c1"
+  integrity sha1-g8yMA0fQr2BXqThitOOuAd5cgcE=
+  dependencies:
+    readable-stream "~0.0.2"
+
 xml2js@0.4.19:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.19.tgz#686c20f213209e94abf0d1bcf1efaa291c7827a7"
@@ -1160,6 +1826,11 @@ xmlbuilder@~9.0.1:
   resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.7.tgz#132ee63d2ec5565c557e20f4c22df9aca686b10d"
   integrity sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=
 
+"xtend@>=4.0.0 <4.1.0-0", xtend@^4.0.2, xtend@~4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+
 ylru@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/ylru/-/ylru-1.2.1.tgz#f576b63341547989c1de7ba288760923b27fe84f"

From 0e9d831e7308876e47efe8a32eb1eef6499fa287 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Thu, 14 Jan 2021 17:02:05 +0000
Subject: [PATCH 31/70] Linting.

---
 .../builder/src/builderStore/store/hosting.js |  4 +-
 .../AutomationBuilder/BlockList.svelte        |  5 ++-
 .../automation/SetupPanel/SchemaSetup.svelte  | 14 +++----
 .../deploy/DeploymentHistory.svelte           |  3 +-
 .../components/settings/tabs/General.svelte   | 19 ++++++---
 .../components/start/CreateAppModal.svelte    |  4 +-
 .../EventsEditor/EventEditorModal.svelte      | 26 +++++++-----
 .../EventsEditor/actions/SaveFields.svelte    | 20 ++++++---
 .../actions/TriggerAutomation.svelte          | 41 +++++++++----------
 packages/worker/src/db/index.js               |  5 ++-
 packages/worker/src/middleware/check-key.js   |  3 +-
 11 files changed, 84 insertions(+), 60 deletions(-)

diff --git a/packages/builder/src/builderStore/store/hosting.js b/packages/builder/src/builderStore/store/hosting.js
index d265eeddff..f180d4157a 100644
--- a/packages/builder/src/builderStore/store/hosting.js
+++ b/packages/builder/src/builderStore/store/hosting.js
@@ -1,5 +1,5 @@
 import { writable } from "svelte/store"
-import api, {get} from "../api"
+import api, { get } from "../api"
 
 const INITIAL_HOSTING_UI_STATE = {
   hostingInfo: {},
@@ -45,7 +45,7 @@ export const getHostingStore = () => {
         return state
       })
       return deployments
-    }
+    },
   }
   return store
 }
diff --git a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
index 5ea1d64e51..e00fb92e27 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
@@ -50,7 +50,10 @@
 
   function addBlockToAutomation(stepId, blockDefinition) {
     const newBlock = $automationStore.selectedAutomation.constructBlock(
-      selectedTab, stepId, blockDefinition)
+      selectedTab,
+      stepId,
+      blockDefinition
+    )
     automationStore.actions.addBlockToAutomation(newBlock)
     closePopover()
     if (stepId === "WEBHOOK") {
diff --git a/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte b/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
index 51c105e9f4..8855fb6895 100644
--- a/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
@@ -36,9 +36,7 @@
 </script>
 
 <div class="root">
-  <div class="add-field">
-    <i class="ri-add-line" on:click={addField} />
-  </div>
+  <div class="add-field"><i class="ri-add-line" on:click={addField} /></div>
   <div class="spacer" />
   {#each fieldsArray as field}
     <div class="field">
@@ -57,13 +55,11 @@
         <option>datetime</option>
       </Select>
 
-      <i class="remove-field ri-delete-bin-line"
+      <i
+        class="remove-field ri-delete-bin-line"
         on:click={() => removeField(field.name)} />
-
-      
     </div>
   {/each}
-
 </div>
 
 <style>
@@ -105,7 +101,8 @@
   }
 
   .field :global(input) {
-    padding: var(--spacing-m) var(--spacing-xl) var(--spacing-xs) var(--spacing-m);
+    padding: var(--spacing-m) var(--spacing-xl) var(--spacing-xs)
+      var(--spacing-m);
     font-size: var(--font-size-s);
     font-weight: bold;
   }
@@ -129,5 +126,4 @@
   .add-field > i {
     cursor: pointer;
   }
-
 </style>
diff --git a/packages/builder/src/components/deploy/DeploymentHistory.svelte b/packages/builder/src/components/deploy/DeploymentHistory.svelte
index e65ddf80cf..8061e08ed1 100644
--- a/packages/builder/src/components/deploy/DeploymentHistory.svelte
+++ b/packages/builder/src/components/deploy/DeploymentHistory.svelte
@@ -36,7 +36,8 @@
   let errorReason
   let poll
   let deployments = []
-  let urlComponent = $hostingStore.hostingInfo.type === "self" ? $store.url : `/${appId}`
+  let urlComponent =
+    $hostingStore.hostingInfo.type === "self" ? $store.url : `/${appId}`
   let deploymentUrl = `${$hostingStore.appUrl}${urlComponent}`
 
   const formatDate = (date, format) =>
diff --git a/packages/builder/src/components/settings/tabs/General.svelte b/packages/builder/src/components/settings/tabs/General.svelte
index 3852f7dc8d..314b1923ea 100644
--- a/packages/builder/src/components/settings/tabs/General.svelte
+++ b/packages/builder/src/components/settings/tabs/General.svelte
@@ -2,7 +2,7 @@
   import { Input, TextArea } from "@budibase/bbui"
   import { store, hostingStore } from "builderStore"
   import api from "builderStore/api"
-  import {object, string} from "yup"
+  import { object, string } from "yup"
   import { onMount } from "svelte"
   import { get } from "svelte/store"
 
@@ -47,7 +47,8 @@
   }
 
   onMount(async () => {
-    const nameError = "Your application must have a name.", urlError = "Your application must have a URL."
+    const nameError = "Your application must have a name.",
+      urlError = "Your application must have a URL."
     let hostingInfo = await hostingStore.actions.fetch()
     if (hostingInfo.type === "self") {
       await hostingStore.actions.fetchDeployedApps()
@@ -55,8 +56,16 @@
       const existingAppUrls = get(hostingStore).deployedAppUrls
       existingAppNames.splice(existingAppNames.indexOf(get(store).name), 1)
       existingAppUrls.splice(existingAppUrls.indexOf(get(store).url), 1)
-      nameValidation = { name: string().required(nameError).notOneOf(existingAppNames) }
-      urlValidation = { url: string().required(urlError).notOneOf(existingAppUrls) }
+      nameValidation = {
+        name: string()
+          .required(nameError)
+          .notOneOf(existingAppNames),
+      }
+      urlValidation = {
+        url: string()
+          .required(urlError)
+          .notOneOf(existingAppUrls),
+      }
     } else {
       nameValidation = { name: string.required(nameError) }
     }
@@ -71,7 +80,7 @@
     bind:value={$store.name}
     bind:error={nameError}
     label="App Name" />
-  {#if $hostingStore.hostingInfo.type === "self"}
+  {#if $hostingStore.hostingInfo.type === 'self'}
     <Input
       on:save={e => updateApplication({ url: e.detail })}
       thin
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index b35638dc9e..1e93892f86 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -84,7 +84,9 @@
     if (hostingInfo.type === "self") {
       await hostingStore.actions.fetchDeployedApps()
       const existingAppNames = svelteGet(hostingStore).deployedAppNames
-      infoValidation.applicationName = string().required("Your application must have a name.").notOneOf(existingAppNames)
+      infoValidation.applicationName = string()
+        .required("Your application must have a name.")
+        .notOneOf(existingAppNames)
       isApiKeyValid = true
       steps = [buildStep(Info), buildStep(User)]
       validationSchemas = [infoValidation, userValidation]
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
index d92ebed33e..ac976317ec 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
@@ -47,32 +47,36 @@
         await createAutomation(action.parameters)
       }
     }
-    dispatch("change", actions)    
+    dispatch("change", actions)
   }
 
-    // called by the parent modal when actions are saved
+  // called by the parent modal when actions are saved
   const createAutomation = async parameters => {
     if (parameters.automationId || !parameters.newAutomationName) return
 
-    await automationStore.actions.create({name: parameters.newAutomationName})
+    await automationStore.actions.create({ name: parameters.newAutomationName })
 
     const appActionDefinition = $automationStore.blockDefinitions.TRIGGER.APP
 
     const newBlock = $automationStore.selectedAutomation.constructBlock(
-      "TRIGGER", "APP", appActionDefinition)
-
+      "TRIGGER",
+      "APP",
+      appActionDefinition
+    )
 
     newBlock.inputs = {
-      fields: Object.entries(parameters.fields).reduce((fields, [key, value]) => {
-        fields[key] = value.type
-        return fields
-      }, {})
+      fields: Object.entries(parameters.fields).reduce(
+        (fields, [key, value]) => {
+          fields[key] = value.type
+          return fields
+        },
+        {}
+      ),
     }
 
     automationStore.actions.addBlockToAutomation(newBlock)
 
-    await automationStore.actions.save(
-      $automationStore.selectedAutomation)
+    await automationStore.actions.save($automationStore.selectedAutomation)
 
     parameters.automationId = $automationStore.selectedAutomation.automation._id
     delete parameters.newAutomationName
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/SaveFields.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/SaveFields.svelte
index 71d0ddf17f..221b41f199 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/SaveFields.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/SaveFields.svelte
@@ -1,6 +1,13 @@
 <script>
   // accepts an array of field names, and outputs an object of { FieldName: value }
-  import { DataList, Label, TextButton, Spacer, Select, Input } from "@budibase/bbui"
+  import {
+    DataList,
+    Label,
+    TextButton,
+    Spacer,
+    Select,
+    Input,
+  } from "@budibase/bbui"
   import { store, backendUiStore, currentAsset } from "builderStore"
   import fetchBindableProperties from "builderStore/fetchBindableProperties"
   import { CloseCircleIcon, AddIcon } from "components/common/Icons"
@@ -14,7 +21,7 @@
 
   export let parameterFields
   export let schemaFields
-  export let fieldLabel="Column"
+  export let fieldLabel = "Column"
 
   const emptyField = () => ({ name: "", value: "" })
 
@@ -60,7 +67,9 @@
         // value and type is needed by the client, so it can parse
         // a string into a correct type
         newParameterFields[field.name] = {
-          type: schemaFields ? schemaFields.find(f => f.name === field.name).type : "string",
+          type: schemaFields
+            ? schemaFields.find(f => f.name === field.name).type
+            : "string",
           value: readableToRuntimeBinding(bindableProperties, field.value),
         }
       }
@@ -83,7 +92,7 @@
         {/each}
       </Select>
     {:else}
-      <Input secondary bind:value={field.name} on:blur={rebuildParameters}/> 
+      <Input secondary bind:value={field.name} on:blur={rebuildParameters} />
     {/if}
     <Label size="m" color="dark">Value</Label>
     <DataList secondary bind:value={field.value} on:blur={rebuildParameters}>
@@ -105,7 +114,8 @@
     <Spacer small />
 
     <TextButton text small blue on:click={addField}>
-      Add {fieldLabel}
+      Add
+      {fieldLabel}
       <div style="height: 20px; width: 20px;">
         <AddIcon />
       </div>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/TriggerAutomation.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/TriggerAutomation.svelte
index 3e46f813fd..3addd55ea0 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/TriggerAutomation.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/TriggerAutomation.svelte
@@ -41,53 +41,53 @@
     newOrExisting = "existing"
     parameters.newAutomationName = ""
   }
-
 </script>
 
 <div class="root">
-
   <div class="radio-container" on:click={setNew}>
-    <input 
-      type="radio" 
-      value="new" 
+    <input
+      type="radio"
+      value="new"
       bind:group={newOrExisting}
-      disabled={!hasAutomations}> 
-      
-    <Label disabled={!hasAutomations}>Create a new automation </Label>
+      disabled={!hasAutomations} />
 
+    <Label disabled={!hasAutomations}>Create a new automation</Label>
   </div>
 
   <div class="radio-container" on:click={setExisting}>
-
-    <input 
-      type="radio" 
-      value="existing" 
+    <input
+      type="radio"
+      value="existing"
       bind:group={newOrExisting}
-      disabled={!hasAutomations}> 
-      
-    <Label disabled={!hasAutomations}>Use an existing automation </Label>
+      disabled={!hasAutomations} />
 
+    <Label disabled={!hasAutomations}>Use an existing automation</Label>
   </div>
 
   <Label size="m" color="dark">Automation</Label>
 
-  {#if newOrExisting=== "existing"}
-    <Select secondary bind:value={parameters.automationId} placeholder="Choose automation">
+  {#if newOrExisting === 'existing'}
+    <Select
+      secondary
+      bind:value={parameters.automationId}
+      placeholder="Choose automation">
       <option value="" />
       {#each automations as automation}
         <option value={automation._id}>{automation.name}</option>
       {/each}
     </Select>
   {:else}
-    <Input secondary bind:value={parameters.newAutomationName} placeholder="Enter automation name" />
+    <Input
+      secondary
+      bind:value={parameters.newAutomationName}
+      placeholder="Enter automation name" />
   {/if}
 
   <SaveFields
     parameterFields={parameters.fields}
-    schemaFields={newOrExisting === "existing" && selectedAutomation && selectedAutomation.schema}
+    schemaFields={newOrExisting === 'existing' && selectedAutomation && selectedAutomation.schema}
     fieldLabel="Field"
     on:fieldschanged={onFieldsChanged} />
-
 </div>
 
 <style>
@@ -127,5 +127,4 @@
   .radio-container > input:focus {
     outline: none;
   }
-
 </style>
diff --git a/packages/worker/src/db/index.js b/packages/worker/src/db/index.js
index 9095682172..24bbb55092 100644
--- a/packages/worker/src/db/index.js
+++ b/packages/worker/src/db/index.js
@@ -5,7 +5,8 @@ const { join } = require("path")
 const { homedir } = require("os")
 
 // level option is purely for testing (development)
-const COUCH_DB_URL = env.COUCH_DB_URL || `leveldb://${join(homedir(), ".budibase")}/.data/`
+const COUCH_DB_URL =
+  env.COUCH_DB_URL || `leveldb://${join(homedir(), ".budibase")}/.data/`
 
 const Pouch = PouchDB.defaults({
   prefix: COUCH_DB_URL,
@@ -13,4 +14,4 @@ const Pouch = PouchDB.defaults({
 
 allDbs(Pouch)
 
-module.exports = Pouch
\ No newline at end of file
+module.exports = Pouch
diff --git a/packages/worker/src/middleware/check-key.js b/packages/worker/src/middleware/check-key.js
index 762cb1ae45..03d54a9dd6 100644
--- a/packages/worker/src/middleware/check-key.js
+++ b/packages/worker/src/middleware/check-key.js
@@ -2,8 +2,7 @@ const env = require("../environment")
 
 module.exports = async (ctx, next) => {
   const selfHostKey =
-    ctx.request.headers["x-budibase-auth"] ||
-    ctx.request.body.selfHostKey
+    ctx.request.headers["x-budibase-auth"] || ctx.request.body.selfHostKey
   if (!selfHostKey || env.SELF_HOST_KEY !== selfHostKey) {
     ctx.throw(401, "Request unauthorised")
   } else {

From cfe3c6e3d25988ccbd821c7606e346b34ef0d2f6 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Thu, 14 Jan 2021 17:11:39 +0000
Subject: [PATCH 32/70] Found small issue with encoding uris, simple fix.

---
 packages/server/src/api/controllers/static/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/server/src/api/controllers/static/index.js b/packages/server/src/api/controllers/static/index.js
index b956efef9d..80be9fd683 100644
--- a/packages/server/src/api/controllers/static/index.js
+++ b/packages/server/src/api/controllers/static/index.js
@@ -29,7 +29,7 @@ function objectStoreUrl() {
 
 async function checkForSelfHostedURL(ctx) {
   // the "appId" component of the URL may actually be a specific self hosted URL
-  let possibleAppUrl = `/${ctx.params.appId}`
+  let possibleAppUrl = `/${encodeURI(ctx.params.appId)}`
   const apps = await getDeployedApps()
   if (apps[possibleAppUrl] && apps[possibleAppUrl].appId) {
     return apps[possibleAppUrl].appId

From d820e3287e6afd1e5bdc733041de61ab493d0d62 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Thu, 14 Jan 2021 17:31:17 +0000
Subject: [PATCH 33/70] Making sure URLs are always lower-case.

---
 packages/builder/src/components/settings/tabs/General.svelte | 2 +-
 packages/server/src/api/controllers/application.js           | 2 +-
 packages/server/src/api/controllers/static/index.js          | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/settings/tabs/General.svelte b/packages/builder/src/components/settings/tabs/General.svelte
index 314b1923ea..55d7312f37 100644
--- a/packages/builder/src/components/settings/tabs/General.svelte
+++ b/packages/builder/src/components/settings/tabs/General.svelte
@@ -43,7 +43,7 @@
   }
 
   async function checkUrl(url) {
-    urlError = await checkValidation({ url }, urlValidation)
+    urlError = await checkValidation({ url: url.toLowerCase() }, urlValidation)
   }
 
   onMount(async () => {
diff --git a/packages/server/src/api/controllers/application.js b/packages/server/src/api/controllers/application.js
index 81d68d7e05..eda2a77ee0 100644
--- a/packages/server/src/api/controllers/application.js
+++ b/packages/server/src/api/controllers/application.js
@@ -72,7 +72,7 @@ async function getAppUrlIfNotInUse(ctx) {
   } else {
     url = encodeURI(`${ctx.request.body.name}`)
   }
-  url = `/${url.replace(/\/|\\/g, "")}`
+  url = `/${url.replace(/\/|\\/g, "")}`.toLowerCase()
   const hostingInfo = await getHostingInfo()
   if (hostingInfo.type === HostingTypes.CLOUD) {
     return url
diff --git a/packages/server/src/api/controllers/static/index.js b/packages/server/src/api/controllers/static/index.js
index 80be9fd683..2ca9d5ce60 100644
--- a/packages/server/src/api/controllers/static/index.js
+++ b/packages/server/src/api/controllers/static/index.js
@@ -29,7 +29,7 @@ function objectStoreUrl() {
 
 async function checkForSelfHostedURL(ctx) {
   // the "appId" component of the URL may actually be a specific self hosted URL
-  let possibleAppUrl = `/${encodeURI(ctx.params.appId)}`
+  let possibleAppUrl = `/${encodeURI(ctx.params.appId).toLowerCase()}`
   const apps = await getDeployedApps()
   if (apps[possibleAppUrl] && apps[possibleAppUrl].appId) {
     return apps[possibleAppUrl].appId

From 69f40d6b4ee29d9ac9302aa677d46f98985de497 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Thu, 14 Jan 2021 17:46:59 +0000
Subject: [PATCH 34/70] Fixing an issue with updating not recognising apps not
 deployed yet.

---
 .../src/components/settings/tabs/General.svelte        | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/settings/tabs/General.svelte b/packages/builder/src/components/settings/tabs/General.svelte
index 55d7312f37..deb1602957 100644
--- a/packages/builder/src/components/settings/tabs/General.svelte
+++ b/packages/builder/src/components/settings/tabs/General.svelte
@@ -54,8 +54,14 @@
       await hostingStore.actions.fetchDeployedApps()
       const existingAppNames = get(hostingStore).deployedAppNames
       const existingAppUrls = get(hostingStore).deployedAppUrls
-      existingAppNames.splice(existingAppNames.indexOf(get(store).name), 1)
-      existingAppUrls.splice(existingAppUrls.indexOf(get(store).url), 1)
+      const nameIdx = existingAppNames.indexOf(get(store).name)
+      const urlIdx = existingAppUrls.indexOf(get(store).url)
+      if (nameIdx !== -1) {
+      existingAppNames.splice(nameIdx, 1)
+      }
+      if (urlIdx !== -1) {
+        existingAppUrls.splice(urlIdx, 1)
+      }
       nameValidation = {
         name: string()
           .required(nameError)

From a9f36d1a427d75fa29d5d035c74dd7254b3cf2ba Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Thu, 14 Jan 2021 17:52:49 +0000
Subject: [PATCH 35/70] Adding some fixes for general settings menu not
 respecting non-deployed apps fully.

---
 .../builder/src/components/settings/tabs/General.svelte   | 1 +
 packages/server/src/utilities/builder/hosting.js          | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/settings/tabs/General.svelte b/packages/builder/src/components/settings/tabs/General.svelte
index deb1602957..fd2fb54e31 100644
--- a/packages/builder/src/components/settings/tabs/General.svelte
+++ b/packages/builder/src/components/settings/tabs/General.svelte
@@ -62,6 +62,7 @@
       if (urlIdx !== -1) {
         existingAppUrls.splice(urlIdx, 1)
       }
+      console.log(existingAppUrls)
       nameValidation = {
         name: string()
           .required(nameError)
diff --git a/packages/server/src/utilities/builder/hosting.js b/packages/server/src/utilities/builder/hosting.js
index 814796ff7e..3c02410afd 100644
--- a/packages/server/src/utilities/builder/hosting.js
+++ b/packages/server/src/utilities/builder/hosting.js
@@ -100,5 +100,11 @@ exports.getDeployedApps = async () => {
       "x-budibase-auth": hostingKey,
     },
   })
-  return response.json()
+  const json = await response.json()
+  for (let value of Object.values(json)) {
+    if (value.url) {
+      value.url = value.url.toLowerCase()
+    }
+  }
+  return json
 }

From 770dde61ec96514de63e6ab452353bf898dbc452 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Thu, 14 Jan 2021 17:57:18 +0000
Subject: [PATCH 36/70] Linting.

---
 packages/builder/src/components/settings/tabs/General.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/settings/tabs/General.svelte b/packages/builder/src/components/settings/tabs/General.svelte
index fd2fb54e31..624ca9d617 100644
--- a/packages/builder/src/components/settings/tabs/General.svelte
+++ b/packages/builder/src/components/settings/tabs/General.svelte
@@ -57,7 +57,7 @@
       const nameIdx = existingAppNames.indexOf(get(store).name)
       const urlIdx = existingAppUrls.indexOf(get(store).url)
       if (nameIdx !== -1) {
-      existingAppNames.splice(nameIdx, 1)
+        existingAppNames.splice(nameIdx, 1)
       }
       if (urlIdx !== -1) {
         existingAppUrls.splice(urlIdx, 1)

From 0a3d338985df0e6e0f0551226b722689978ad4f1 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Thu, 14 Jan 2021 20:51:03 +0000
Subject: [PATCH 37/70] query and datasource unit tests

---
 .../TableIntegrationMenu/index.svelte         |   1 +
 .../modals/CreateDatasourceModal.svelte       |   2 -
 .../TableNavigator/TableNavigator.svelte      |   2 +-
 .../modals/CreateTableModal.svelte            |   3 +-
 .../components/integration/QueryEditor.svelte | 169 ++++++++++++++----
 .../integration/QueryFieldsBuilder.svelte     |  93 ++++++----
 .../integration/SvelteEditor.svelte           | 162 -----------------
 .../src/components/integration/index.svelte   |   7 +-
 .../[selectedDatasource]/[query]/index.svelte |  14 --
 .../server/src/api/controllers/datasource.js  |   2 +-
 .../src/api/routes/tests/datasource.spec.js   | 149 +++++++++++++++
 .../server/src/api/routes/tests/query.spec.js | 153 ++++++++++++++++
 12 files changed, 506 insertions(+), 251 deletions(-)
 delete mode 100644 packages/builder/src/components/integration/SvelteEditor.svelte
 create mode 100644 packages/server/src/api/routes/tests/datasource.spec.js
 create mode 100644 packages/server/src/api/routes/tests/query.spec.js

diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
index 11beefff63..dbe289caba 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
@@ -1,6 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import { backendUiStore } from "builderStore"
+  import api from "builderStore/api"
   import { Input, TextArea, Spacer } from "@budibase/bbui"
   import ICONS from "../icons"
 
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
index 7a85ba1b8b..97f5bfad07 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
@@ -35,8 +35,6 @@
     notifier.success(`Datasource ${name} created successfully.`)
     analytics.captureEvent("Datasource Created", { name })
 
-    console.log(response)
-
     // Navigate to new datasource
     $goto(`./datasource/${response._id}`)
   }
diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
index 07246626eb..3719d62c62 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
@@ -36,7 +36,7 @@
     {#each $backendUiStore.tables as table, idx}
       <NavItem
         border={idx > 0}
-        icon={table.integration?.type ? 'ri-database-2-line' : `ri-${table._id === TableNames.USERS ? 'user' : 'table'}-line`}
+        icon={`ri-${table._id === TableNames.USERS ? 'user' : 'table'}-line`}
         text={table.name}
         selected={selectedView === `all_${table._id}`}
         on:click={() => selectTable(table)}>
diff --git a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
index bffa32a75d..e517dc1e23 100644
--- a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
@@ -2,7 +2,7 @@
   import { goto } from "@sveltech/routify"
   import { backendUiStore, store } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import { Input, Label, ModalContent, Button, Spacer } from "@budibase/bbui"
+  import { Input, Label, ModalContent, Button, Spacer, Toggle } from "@budibase/bbui"
   import TableDataImport from "../TableDataImport.svelte"
   import analytics from "analytics"
   import screenTemplates from "builderStore/store/screenTemplates"
@@ -19,7 +19,6 @@
   let modal
   let name
   let dataImport
-  let integration
   let error = ""
   let createAutoscreens = true
 
diff --git a/packages/builder/src/components/integration/QueryEditor.svelte b/packages/builder/src/components/integration/QueryEditor.svelte
index 4bbf335f86..22cddb5606 100644
--- a/packages/builder/src/components/integration/QueryEditor.svelte
+++ b/packages/builder/src/components/integration/QueryEditor.svelte
@@ -1,59 +1,162 @@
 <script>
-  import cm from "./codemirror"
+  import CodeMirror from "./codemirror"
   import { onMount, createEventDispatcher } from "svelte"
+  import { themeStore } from "builderStore"
 
   const dispatch = createEventDispatcher()
 
-  export let value
-  export let mode = "sql"
+  const THEMES = {
+    DARK: "tomorrow-night-eighties",
+    LIGHT: "default",
+  }
 
-  let editor
-  let codemirror
+  export let value = ""
+  export let readOnly = false
+  export let lineNumbers = true
+  export let tab = true
+  export let mode
 
-  $: {
-    if (codemirror) {
-      const { left, top } = codemirror.getScrollInfo()
-      codemirror.setValue(value)
-      codemirror.scrollTo(left, top)
+  let width
+  let height
+
+  // We have to expose set and update methods, rather
+  // than making this state-driven through props,
+  // because it's difficult to update an editor
+  // without resetting scroll otherwise
+  export async function set(new_value, new_mode) {
+    if (new_mode !== mode) {
+      await createEditor((mode = new_mode))
     }
+
+    value = new_value
+    updating_externally = true
+    if (editor) editor.setValue(value)
+    updating_externally = false
+  }
+
+  export function update(new_value) {
+    value = new_value
+
+    if (editor) {
+      const { left, top } = editor.getScrollInfo()
+      editor.setValue((value = new_value))
+      editor.scrollTo(left, top)
+    }
+  }
+
+  export function resize() {
+    editor.refresh()
+  }
+
+  export function focus() {
+    editor.focus()
+  }
+
+  const modes = {
+    js: {
+      name: "javascript",
+      json: false,
+    },
+    json: {
+      name: "javascript",
+      json: true,
+    },
+    sql: {
+      name: "sql",
+    },
+    svelte: {
+      name: "handlebars",
+      base: "text/html",
+    },
+  }
+
+  const refs = {}
+  let editor
+  let updating_externally = false
+  let marker
+  let error_line
+  let destroyed = false
+
+  $: if (editor && width && height) {
+    editor.refresh()
   }
 
   onMount(() => {
-    if (codemirror) codemirror.toTextArea()
-
-    codemirror = cm.fromTextArea(editor, {
-      lineNumbers: true,
-      mode,
-      lineWrapping: true,
-      indentUnit: 2,
-      tabSize: 2,
-      autoCloseBrackets: true,
-      autoCloseTags: true,
-      extraKeys: {
-        "Ctrl-/": "toggleComment",
-      },
+    createEditor(mode).then(() => {
+      if (editor) editor.setValue(value || "")
     })
-    codemirror.on("change", instance => {
-      const code = instance.getValue()
-      dispatch("change", code)
-    })
-
-    codemirror.setValue(value || "")
 
     return () => {
-      if (codemirror) codemirror.toTextArea()
+      destroyed = true
+      if (editor) editor.toTextArea()
     }
   })
+
+  let first = true
+
+  async function createEditor(mode) {
+    if (destroyed || !CodeMirror) return
+
+    if (editor) editor.toTextArea()
+
+    const opts = {
+      lineNumbers,
+      lineWrapping: true,
+      indentWithTabs: true,
+      indentUnit: 2,
+      tabSize: 2,
+      value: "",
+      mode: modes[mode] || {
+        name: mode,
+      },
+      readOnly,
+      autoCloseBrackets: true,
+      autoCloseTags: true,
+      theme: $themeStore.darkMode ? THEMES.DARK : THEMES.LIGHT,
+    }
+
+    if (!tab)
+      opts.extraKeys = {
+        Tab: tab,
+        "Shift-Tab": tab,
+      }
+
+    // Creating a text editor is a lot of work, so we yield
+    // the main thread for a moment. This helps reduce jank
+    if (first) await sleep(50)
+
+    if (destroyed) return
+
+    editor = CodeMirror.fromTextArea(refs.editor, opts)
+
+    editor.on("change", instance => {
+      if (!updating_externally) {
+        const value = instance.getValue()
+        dispatch("change", { value })
+      }
+    })
+
+    if (first) await sleep(50)
+    editor.refresh()
+
+    first = false
+  }
+
+  function sleep(ms) {
+    return new Promise(fulfil => setTimeout(fulfil, ms))
+  }
 </script>
 
-<textarea bind:value bind:this={editor} />
+<textarea tabindex="0" bind:this={refs.editor} readonly {value} />
 
 <style>
   textarea {
-    background: var(--background);
-    border-radius: var(--border-radius-m);
+    visibility: hidden;
   }
+
   :global(.CodeMirror) {
+    height: auto !important;
     border-radius: var(--border-radius-m);
+    font-family: var(--font-sans) !important;
   }
 </style>
diff --git a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
index 4638a8bc36..24916ef170 100644
--- a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
@@ -5,7 +5,6 @@
     Label,
     Input,
     Heading,
-    Spacer,
     Select
   } from "@budibase/bbui"
 
@@ -13,53 +12,62 @@
   export let schema
   export let editable
 
-  let customSchema = {}
   let draftField = {}
 
+  $: fieldKeys = Object.keys(fields)
+  $: schemaKeys = Object.keys(schema.fields)
+
+  $: console.log({ fields, schema })
+
   function addField() {
     // Add the new field to custom fields for the query
-    customSchema[draftField.name] = {
+    schema.fields[draftField.name] = {
       type: draftField.type
     }
     // reset the draft field
     draftField = {}
   }
+
+  function removeField(field) {
+    delete fields[field]
+    fields = fields
+
+    delete schema.fields[field]
+    schema = schema
+  }
 </script>
 
 <form on:submit|preventDefault>
-  {#each Object.keys(schema.fields) as field}
+  {#each schemaKeys as field}
     <Label extraSmall grey>{field}</Label>
-    <Input
-      disabled={!editable}
-      type={schema.fields[field]?.type}
-      required={schema.fields[field]?.required}
-      bind:value={fields[field]} />
-    <Spacer medium />
+    <div class="field">
+      <Input
+        disabled={!editable}
+        type={schema.fields[field]?.type}
+        required={schema.fields[field]?.required}
+        bind:value={fields[field]} />
+        {#if !schema.fields[field]?.required}
+          <i class="ri-close-circle-line" on:click={() => removeField(field)} />
+        {/if}
+      </div>
   {/each}
-  {#if schema.customisable && editable}
-    <Spacer large />
-    <Label>Add Custom Field</Label>
-    {#each Object.keys(customSchema) as field}
-      <Label extraSmall grey>{field}</Label>
-      <Input 
-        thin
-        type={customSchema[field]?.type}
-        bind:value={fields[field]} 
-      />
-      <Spacer medium />
-    {/each}
-    <div class="new-field">
-      <Label extraSmall grey>Name</Label>
-      <Label extraSmall grey>Type</Label>
-      <Input thin bind:value={draftField.name} />
-      <Select thin secondary bind:value={draftField.name}>
-        <option value={"text"}>String</option>
-        <option value={"number"}>Number</option>
-      </Select>
-    </div>
-    <Button small thin secondary on:click={addField}>Add Field</Button>
-  {/if}
 </form>
+{#if schema.customisable && editable}
+  <div>
+      <Label>Add Custom Field</Label>
+      <div class="new-field">
+        <Label extraSmall grey>Name</Label>
+        <Label extraSmall grey>Type</Label>
+        <Input thin bind:value={draftField.name} />
+        <Select thin secondary bind:value={draftField.type}>
+          <option value={"text"}>String</option>
+          <option value={"number"}>Number</option>
+        </Select>
+      </div>
+      <Button small thin secondary on:click={addField}>Add Field</Button>
+  </div>
+{/if}
+
 
 <style>
 .new-field {
@@ -69,4 +77,23 @@
   margin-top: var(--spacing-m);
   margin-bottom: var(--spacing-m);
 }
+
+.field {
+  margin-bottom: var(--spacing-m);
+  display: grid;
+  grid-template-columns: 1fr 2%;
+  grid-gap: var(--spacing-m);
+  align-items: center;
+}
+
+i {
+  transition: all 0.2s;
+}
+
+i:hover {
+  transform: scale(1.1);
+  font-weight: 500;
+  cursor: pointer;
+}
+
 </style>
\ No newline at end of file
diff --git a/packages/builder/src/components/integration/SvelteEditor.svelte b/packages/builder/src/components/integration/SvelteEditor.svelte
deleted file mode 100644
index 22cddb5606..0000000000
--- a/packages/builder/src/components/integration/SvelteEditor.svelte
+++ /dev/null
@@ -1,162 +0,0 @@
-<script>
-  import CodeMirror from "./codemirror"
-  import { onMount, createEventDispatcher } from "svelte"
-  import { themeStore } from "builderStore"
-
-  const dispatch = createEventDispatcher()
-
-  const THEMES = {
-    DARK: "tomorrow-night-eighties",
-    LIGHT: "default",
-  }
-
-  export let value = ""
-  export let readOnly = false
-  export let lineNumbers = true
-  export let tab = true
-  export let mode
-
-  let width
-  let height
-
-  // We have to expose set and update methods, rather
-  // than making this state-driven through props,
-  // because it's difficult to update an editor
-  // without resetting scroll otherwise
-  export async function set(new_value, new_mode) {
-    if (new_mode !== mode) {
-      await createEditor((mode = new_mode))
-    }
-
-    value = new_value
-    updating_externally = true
-    if (editor) editor.setValue(value)
-    updating_externally = false
-  }
-
-  export function update(new_value) {
-    value = new_value
-
-    if (editor) {
-      const { left, top } = editor.getScrollInfo()
-      editor.setValue((value = new_value))
-      editor.scrollTo(left, top)
-    }
-  }
-
-  export function resize() {
-    editor.refresh()
-  }
-
-  export function focus() {
-    editor.focus()
-  }
-
-  const modes = {
-    js: {
-      name: "javascript",
-      json: false,
-    },
-    json: {
-      name: "javascript",
-      json: true,
-    },
-    sql: {
-      name: "sql",
-    },
-    svelte: {
-      name: "handlebars",
-      base: "text/html",
-    },
-  }
-
-  const refs = {}
-  let editor
-  let updating_externally = false
-  let marker
-  let error_line
-  let destroyed = false
-
-  $: if (editor && width && height) {
-    editor.refresh()
-  }
-
-  onMount(() => {
-    createEditor(mode).then(() => {
-      if (editor) editor.setValue(value || "")
-    })
-
-    return () => {
-      destroyed = true
-      if (editor) editor.toTextArea()
-    }
-  })
-
-  let first = true
-
-  async function createEditor(mode) {
-    if (destroyed || !CodeMirror) return
-
-    if (editor) editor.toTextArea()
-
-    const opts = {
-      lineNumbers,
-      lineWrapping: true,
-      indentWithTabs: true,
-      indentUnit: 2,
-      tabSize: 2,
-      value: "",
-      mode: modes[mode] || {
-        name: mode,
-      },
-      readOnly,
-      autoCloseBrackets: true,
-      autoCloseTags: true,
-      theme: $themeStore.darkMode ? THEMES.DARK : THEMES.LIGHT,
-    }
-
-    if (!tab)
-      opts.extraKeys = {
-        Tab: tab,
-        "Shift-Tab": tab,
-      }
-
-    // Creating a text editor is a lot of work, so we yield
-    // the main thread for a moment. This helps reduce jank
-    if (first) await sleep(50)
-
-    if (destroyed) return
-
-    editor = CodeMirror.fromTextArea(refs.editor, opts)
-
-    editor.on("change", instance => {
-      if (!updating_externally) {
-        const value = instance.getValue()
-        dispatch("change", { value })
-      }
-    })
-
-    if (first) await sleep(50)
-    editor.refresh()
-
-    first = false
-  }
-
-  function sleep(ms) {
-    return new Promise(fulfil => setTimeout(fulfil, ms))
-  }
-</script>
-
-<textarea tabindex="0" bind:this={refs.editor} readonly {value} />
-
-<style>
-  textarea {
-    visibility: hidden;
-  }
-
-  :global(.CodeMirror) {
-    height: auto !important;
-    border-radius: var(--border-radius-m);
-    font-family: var(--font-sans) !important;
-  }
-</style>
diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte
index 34f0ad9f11..455f2fef40 100644
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@@ -1,7 +1,7 @@
 <script>
   import { onMount } from "svelte"
   import { TextArea, Label, Input, Heading, Spacer } from "@budibase/bbui"
-  import Editor from "./SvelteEditor.svelte"
+  import Editor from "./QueryEditor.svelte"
   import ParameterBuilder from "./QueryParameterBuilder.svelte"
   import FieldsBuilder from "./QueryFieldsBuilder.svelte"
 
@@ -9,6 +9,7 @@
     SQL: "sql",
     JSON: "json",
     FIELDS: "fields",
+    LIST: "list",
   }
 
   export let query
@@ -26,7 +27,7 @@
 {/if}
 
 <Heading extraSmall black>Query</Heading>
-<Spacer large />
+<Spacer medium />
 
 {#if schema}
   {#if schema.type === QueryTypes.SQL}
@@ -46,5 +47,5 @@
       value={query.fields.json} />
   {:else if schema.type === QueryTypes.FIELDS}
     <FieldsBuilder bind:fields={query.fields} {schema} {editable} />
-  {/if}
+  {:else if schema.type === QueryTypes.LIST}LIST STUFF{/if}
 {/if}
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 760c2b322a..11ad9d43ff 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
@@ -25,20 +25,6 @@
     parameters: [],
     fields: {},
   }
-
-  // $: {
-  //   if ($params.query !== "new") {
-  //     query = $backendUiStore.queries.find(query => query._id === $params.query)
-  //   } else {
-  //     // New query
-  //     query = {
-  //       datasourceId: $params.selectedDatasource,
-  //       name: "New Query",
-  //       parameters: [],
-  //       fields: {},
-  //     }
-  //   }
-  // }
 </script>
 
 <section>
diff --git a/packages/server/src/api/controllers/datasource.js b/packages/server/src/api/controllers/datasource.js
index 7cd530121d..8fc3efc8a9 100644
--- a/packages/server/src/api/controllers/datasource.js
+++ b/packages/server/src/api/controllers/datasource.js
@@ -32,7 +32,7 @@ exports.save = async function(ctx) {
     datasource._rev = response.rev
 
     ctx.status = 200
-    ctx.message = "Datasource created successfully."
+    ctx.message = "Datasource saved successfully."
     ctx.body = datasource
   } catch (err) {
     ctx.throw(err.status, err)
diff --git a/packages/server/src/api/routes/tests/datasource.spec.js b/packages/server/src/api/routes/tests/datasource.spec.js
new file mode 100644
index 0000000000..b699710143
--- /dev/null
+++ b/packages/server/src/api/routes/tests/datasource.spec.js
@@ -0,0 +1,149 @@
+const { 
+  supertest,
+  createApplication,
+  defaultHeaders,
+  builderEndpointShouldBlockNormalUsers,
+  getDocument,
+  insertDocument
+} = require("./couchTestUtils")
+let { generateDatasourceID, generateQueryID } = require("../../../db/utils")
+
+const DATASOURCE_ID = generateDatasourceID()
+const TEST_DATASOURCE = {
+  _id: DATASOURCE_ID,
+  type: "datasource",
+  name: "Test",
+  source: "POSTGRES",
+  config: {},
+  type: "datasource",
+}
+
+const TEST_QUERY = {
+  _id: generateQueryID(DATASOURCE_ID),
+  datasourceId: DATASOURCE_ID,
+  name:"New Query",
+  parameters:[],
+  fields:{},
+  schema:{},
+  queryVerb:"read",
+  queryType:"Table",
+}
+
+describe("/datasources", () => {
+  let request
+  let server
+  let app
+  let appId
+  let datasource
+
+  beforeAll(async () => {
+    ({ request, server } = await supertest())
+  });
+
+  afterAll(() => {
+    server.close()
+  })
+
+  beforeEach(async () => {
+    app = await createApplication(request)
+    appId = app.instance._id
+  });
+
+  async function createDatasource() {
+    return await insertDocument(appId, TEST_DATASOURCE)
+  }
+
+  async function createQuery() {
+    return await insertDocument(appId, TEST_QUERY)
+  }
+
+  describe("create", () => {
+    it("should create a new datasource", async () => {
+      const res = await request
+        .post(`/api/datasources`)
+        .send(TEST_DATASOURCE)
+        .set(defaultHeaders(appId))
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+        expect(res.res.statusMessage).toEqual("Datasource saved successfully.");            
+        expect(res.body.name).toEqual("Test");
+      })
+    });
+
+  describe("fetch", () => {
+    let datasource
+
+    beforeEach(async () => {
+      datasource = await createDatasource()
+    });
+
+    afterEach(() => {
+      delete datasource._rev
+    });
+
+    it("returns all the datasources from the server", async () => {
+      const res = await request
+        .get(`/api/datasources`)
+        .set(defaultHeaders(appId))
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+        const datasources = res.body;
+        expect(datasources).toEqual([
+          {
+            "_rev": datasources[0]._rev,
+            ...TEST_DATASOURCE
+          }
+        ]);            
+    })
+
+    it("should apply authorization to endpoint", async () => {
+        await builderEndpointShouldBlockNormalUsers({
+          request,
+          method: "GET",
+          url: `/api/datasources`,
+          appId: appId,
+        })
+      })
+    });
+
+  describe("destroy", () => {
+    let datasource;
+
+    beforeEach(async () => {
+      datasource = await createDatasource()
+    });
+
+    afterEach(() => {
+      delete datasource._rev
+    });
+
+    it("deletes queries for the datasource after deletion and returns a success message", async () => {
+      await createQuery(datasource.id)
+
+      await request
+        .delete(`/api/datasources/${datasource.id}/${datasource.rev}`)
+        .set(defaultHeaders(appId))
+        .expect(200)
+
+      const res = await request
+        .get(`/api/datasources`)
+        .set(defaultHeaders(appId))
+        .expect('Content-Type', /json/)
+        .expect(200)
+      
+        expect(res.body).toEqual([])
+    })
+
+    it("should apply authorization to endpoint", async () => {
+      await builderEndpointShouldBlockNormalUsers({
+        request,
+        method: "DELETE",
+        url: `/api/datasources/${datasource._id}/${datasource._rev}`,
+        appId: appId,
+      })
+    })
+
+  });
+});
diff --git a/packages/server/src/api/routes/tests/query.spec.js b/packages/server/src/api/routes/tests/query.spec.js
new file mode 100644
index 0000000000..f8c31e48e6
--- /dev/null
+++ b/packages/server/src/api/routes/tests/query.spec.js
@@ -0,0 +1,153 @@
+const { 
+  supertest,
+  createApplication,
+  defaultHeaders,
+  builderEndpointShouldBlockNormalUsers,
+  getDocument,
+  insertDocument
+} = require("./couchTestUtils")
+let { generateDatasourceID, generateQueryID } = require("../../../db/utils")
+
+const DATASOURCE_ID = generateDatasourceID()
+const TEST_DATASOURCE = {
+  _id: DATASOURCE_ID,
+  type: "datasource",
+  name: "Test",
+  source: "POSTGRES",
+  config: {},
+  type: "datasource",
+}
+
+const TEST_QUERY = {
+  _id: generateQueryID(DATASOURCE_ID),
+  datasourceId: DATASOURCE_ID,
+  name:"New Query",
+  parameters:[],
+  fields:{},
+  schema:{},
+  queryVerb:"read",
+  queryType:"Table",
+}
+
+describe("/queries", () => {
+  let request
+  let server
+  let app
+  let appId
+  let datasource
+  let query
+
+  beforeAll(async () => {
+    ({ request, server } = await supertest())
+  });
+
+  afterAll(() => {
+    server.close()
+  })
+
+  beforeEach(async () => {
+    app = await createApplication(request)
+    appId = app.instance._id
+  });
+
+  async function createDatasource() {
+    return await insertDocument(appId, TEST_DATASOURCE)
+  }
+
+  async function createQuery() {
+    return await insertDocument(appId, TEST_QUERY)
+  }
+
+  describe("create", () => {
+    it("should create a new query", async () => {
+      const res = await request
+        .post(`/api/queries`)
+        .send(TEST_QUERY)
+        .set(defaultHeaders(appId))
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+        expect(res.res.statusMessage).toEqual(`Query ${TEST_QUERY.name} saved successfully.`);            
+        expect(res.body).toEqual({
+          _rev: res.body._rev,
+          ...TEST_QUERY,
+        });
+      })
+    });
+
+  describe("fetch", () => {
+    let datasource
+
+    beforeEach(async () => {
+      datasource = await createDatasource()
+    });
+
+    afterEach(() => {
+      delete datasource._rev
+    });
+
+    it("returns all the queries from the server", async () => {
+      const query = await createQuery()
+      const res = await request
+        .get(`/api/queries`)
+        .set(defaultHeaders(appId))
+        .expect('Content-Type', /json/)
+        .expect(200)
+
+        const queries = res.body;
+        expect(queries).toEqual([
+          {
+            "_rev": query.rev,
+            ...TEST_QUERY
+          }
+        ]);            
+    })
+
+    it("should apply authorization to endpoint", async () => {
+        await builderEndpointShouldBlockNormalUsers({
+          request,
+          method: "GET",
+          url: `/api/datasources`,
+          appId: appId,
+        })
+      })
+    });
+
+  describe("destroy", () => {
+    let datasource;
+
+    beforeEach(async () => {
+      datasource = await createDatasource()
+    });
+
+    afterEach(() => {
+      delete datasource._rev
+    });
+
+    it("deletes a query and returns a success message", async () => {
+      const query = await createQuery()
+
+      await request
+        .delete(`/api/queries/${query.id}/${query.rev}`)
+        .set(defaultHeaders(appId))
+        .expect(200)
+
+      const res = await request
+        .get(`/api/queries`)
+        .set(defaultHeaders(appId))
+        .expect('Content-Type', /json/)
+        .expect(200)
+      
+        expect(res.body).toEqual([])
+    })
+
+    it("should apply authorization to endpoint", async () => {
+      await builderEndpointShouldBlockNormalUsers({
+        request,
+        method: "DELETE",
+        url: `/api/datasources/${datasource._id}/${datasource._rev}`,
+        appId: appId,
+      })
+    })
+  });
+});

From 6d5dc7592e1ee46456acf2df8b475db45d09a448 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 15 Jan 2021 13:24:36 +0000
Subject: [PATCH 38/70] dynamo integration

---
 .../EventsEditor/actions/ExecuteQuery.svelte  |  2 +-
 packages/server/src/integrations/dynamodb.js  | 71 ++++++++++++++++---
 2 files changed, 64 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
index 8ffdc4ef14..175eff823b 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
@@ -50,7 +50,7 @@
 
   <Spacer medium />
 
-  {#if query}
+  {#if query?.parameters.length > 0}
     <ParameterBuilder
       bind:customParams={parameters.queryParams}
       parameters={query.parameters}
diff --git a/packages/server/src/integrations/dynamodb.js b/packages/server/src/integrations/dynamodb.js
index 196f7fd97f..b1c406fdf4 100644
--- a/packages/server/src/integrations/dynamodb.js
+++ b/packages/server/src/integrations/dynamodb.js
@@ -18,25 +18,56 @@ const SCHEMA = {
     },
   },
   query: {
+    create: {
+      DynamoConfig: {
+        type: QUERY_TYPES.FIELDS,
+        fields: {
+          table: {
+            type: FIELD_TYPES.STRING,
+            required: true,
+          },
+          customisable: true,
+        },
+      },
+    },
     read: {
       DynamoConfig: {
         type: QUERY_TYPES.FIELDS,
         fields: {
-          Table: {
+          table: {
             type: FIELD_TYPES.STRING,
             required: true,
           },
-          Index: {
+          index: {
             type: FIELD_TYPES.STRING,
           },
-          KeyConditionExpression: {
+          customisable: true,
+        },
+      },
+    },
+    update: {
+      DynamoConfig: {
+        type: QUERY_TYPES.FIELDS,
+        fields: {
+          table: {
             type: FIELD_TYPES.STRING,
+            required: true,
           },
-          ExpressionAttributeNames: {
+          customisable: true,
+        },
+      },
+    },
+    delete: {
+      "Dynamo Partition Key": {
+        type: QUERY_TYPES.FIELDS,
+        fields: {
+          table: {
             type: FIELD_TYPES.STRING,
+            required: true,
           },
-          ExpressionAttributeValues: {
+          key: {
             type: FIELD_TYPES.STRING,
+            required: true,
           },
         },
       },
@@ -55,12 +86,36 @@ class DynamoDBIntegration {
     AWS.config.update(this.config)
   }
 
+  async create(query) {
+    const response = await this.client.query({
+      TableName: query.table,
+      Item: query.json,
+    })
+    return response
+  }
+
   async read(query) {
     const response = await this.client.query({
       TableName: query.Table,
-      KeyConditionExpression: query.KeyConditionExpression,
-      ExpressionAttributeNames: query.ExpressionAttributeNames,
-      ExpressionAttributeValues: query.ExpressionAttributeValues,
+      ...query.json,
+    })
+    return response
+  }
+
+  async update(query) {
+    const response = await this.client.query({
+      TableName: query.Table,
+      ...query.json,
+    })
+    return response
+  }
+
+  async delete(query) {
+    const response = await this.client.query({
+      TableName: query.Table,
+      Key: {
+        id: query.key,
+      },
     })
     return response
   }

From fc5ebd6b53cbc5dc04b35c217242f7fb42f7e6b2 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 15 Jan 2021 13:42:14 +0000
Subject: [PATCH 39/70] mongo config

---
 packages/server/src/api/controllers/query.js | 6 ++++--
 packages/server/src/integrations/mongodb.js  | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/server/src/api/controllers/query.js b/packages/server/src/api/controllers/query.js
index d4dd693ca7..1aebfefa07 100644
--- a/packages/server/src/api/controllers/query.js
+++ b/packages/server/src/api/controllers/query.js
@@ -38,8 +38,10 @@ function enrichQueryFields(fields, parameters) {
     enrichedQuery[key] = template(parameters)
   }
 
-  if (fields.json || fields.customData) {
-    enrichedQuery.json = JSON.parse(fields.json || fields.customData)
+  if (enrichedQuery.json || enrichedQuery.customData) {
+    enrichedQuery.json = JSON.parse(
+      enrichedQuery.json || enrichedQuery.customData
+    )
     delete enrichedQuery.customData
   }
 
diff --git a/packages/server/src/integrations/mongodb.js b/packages/server/src/integrations/mongodb.js
index 51af4573aa..b0ccb2d78a 100644
--- a/packages/server/src/integrations/mongodb.js
+++ b/packages/server/src/integrations/mongodb.js
@@ -6,7 +6,7 @@ const SCHEMA = {
     connectionString: {
       type: FIELD_TYPES.STRING,
       required: true,
-      default: "localhost",
+      default: "mongodb://localhost:27017",
     },
     db: {
       type: FIELD_TYPES.STRING,

From 75c787553bd3ef93812f6d471a70a6b65eafebb9 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 15 Jan 2021 13:42:55 +0000
Subject: [PATCH 40/70] lint :sparkles:

---
 .../AutomationBuilder/BlockList.svelte        |  5 ++-
 .../automation/SetupPanel/SchemaSetup.svelte  | 14 +++---
 .../modals/CreateDatasourceModal.svelte       |  8 +++-
 .../modals/CreateQueryModal.svelte            |  8 +++-
 .../popovers/EditDatasourcePopover.svelte     | 18 ++++----
 .../popovers/EditQueryPopover.svelte          | 21 +++++----
 .../modals/CreateTableModal.svelte            | 16 +++++--
 .../src/components/common/NavItem.svelte      |  4 +-
 .../integration/QueryFieldsBuilder.svelte     | 21 +++++----
 .../integration/QueryParameterBuilder.svelte  |  1 -
 .../components/integration/QueryViewer.svelte |  5 +--
 .../EventsEditor/EventEditor.svelte           |  3 +-
 .../EventsEditor/actions/SaveFields.svelte    | 20 ++++++---
 .../actions/TriggerAutomation.svelte          | 41 ++++++++---------
 .../userInterface/TableViewSelect.svelte      | 44 +++++++++++--------
 .../data/table/[selectedTable]/index.svelte   |  4 +-
 .../src/grid/Component.svelte                 |  4 +-
 17 files changed, 132 insertions(+), 105 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
index 5ea1d64e51..e00fb92e27 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
@@ -50,7 +50,10 @@
 
   function addBlockToAutomation(stepId, blockDefinition) {
     const newBlock = $automationStore.selectedAutomation.constructBlock(
-      selectedTab, stepId, blockDefinition)
+      selectedTab,
+      stepId,
+      blockDefinition
+    )
     automationStore.actions.addBlockToAutomation(newBlock)
     closePopover()
     if (stepId === "WEBHOOK") {
diff --git a/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte b/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
index 51c105e9f4..8855fb6895 100644
--- a/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
@@ -36,9 +36,7 @@
 </script>
 
 <div class="root">
-  <div class="add-field">
-    <i class="ri-add-line" on:click={addField} />
-  </div>
+  <div class="add-field"><i class="ri-add-line" on:click={addField} /></div>
   <div class="spacer" />
   {#each fieldsArray as field}
     <div class="field">
@@ -57,13 +55,11 @@
         <option>datetime</option>
       </Select>
 
-      <i class="remove-field ri-delete-bin-line"
+      <i
+        class="remove-field ri-delete-bin-line"
         on:click={() => removeField(field.name)} />
-
-      
     </div>
   {/each}
-
 </div>
 
 <style>
@@ -105,7 +101,8 @@
   }
 
   .field :global(input) {
-    padding: var(--spacing-m) var(--spacing-xl) var(--spacing-xs) var(--spacing-m);
+    padding: var(--spacing-m) var(--spacing-xl) var(--spacing-xs)
+      var(--spacing-m);
     font-size: var(--font-size-s);
     font-weight: bold;
   }
@@ -129,5 +126,4 @@
   .add-field > i {
     cursor: pointer;
   }
-
 </style>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
index 97f5bfad07..a41cbd2466 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
@@ -16,7 +16,11 @@
 
   function checkValid(evt) {
     const datasourceName = evt.target.value
-    if ($backendUiStore.datasources?.some(datasource => datasource.name === datasourceName)) {
+    if (
+      $backendUiStore.datasources?.some(
+        datasource => datasource.name === datasourceName
+      )
+    ) {
       error = `Datasource with name ${datasourceName} already exists. Please choose another name.`
       return
     }
@@ -30,7 +34,7 @@
     const response = await backendUiStore.actions.datasources.save({
       name,
       source: type,
-      config
+      config,
     })
     notifier.success(`Datasource ${name} created successfully.`)
     analytics.captureEvent("Datasource Created", { name })
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateQueryModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateQueryModal.svelte
index cc22870ec2..6a98313335 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateQueryModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateQueryModal.svelte
@@ -16,7 +16,11 @@
 
   function checkValid(evt) {
     const datasourceName = evt.target.value
-    if ($backendUiStore.datasources?.some(datasource => datasource.name === datasourceName)) {
+    if (
+      $backendUiStore.datasources?.some(
+        datasource => datasource.name === datasourceName
+      )
+    ) {
       error = `Datasource with name ${tableName} already exists. Please choose another name.`
       return
     }
@@ -30,7 +34,7 @@
     await backendUiStore.actions.datasources.save({
       name,
       source: type,
-      config
+      config,
     })
     notifier.success(`Datasource ${name} created successfully.`)
     analytics.captureEvent("Datasource Created", { name })
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
index d76c8cdcd5..1bbaddf5ef 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
@@ -3,7 +3,7 @@
   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 IntegrationConfigForm from "../TableIntegrationMenu//IntegrationConfigForm.svelte"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let datasource
@@ -36,13 +36,13 @@
     <i class="ri-more-line" />
   </div>
   <DropdownMenu align="left" {anchor} bind:this={dropdown}>
-      <DropdownContainer>
-        <DropdownItem
-          icon="ri-delete-bin-line"
-          title="Delete"
-          on:click={showModal}
-          data-cy="delete-datasource" />
-      </DropdownContainer>
+    <DropdownContainer>
+      <DropdownItem
+        icon="ri-delete-bin-line"
+        title="Delete"
+        on:click={showModal}
+        data-cy="delete-datasource" />
+    </DropdownContainer>
   </DropdownMenu>
 </div>
 <ConfirmDialog
@@ -66,7 +66,7 @@
   div.icon i {
     font-size: 16px;
   }
-  
+
   .actions {
     padding: var(--spacing-xl);
     display: grid;
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
index 676458fd29..92a541ac1d 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
@@ -3,7 +3,7 @@
   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 IntegrationConfigForm from "../TableIntegrationMenu//IntegrationConfigForm.svelte"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
 
   export let query
@@ -35,13 +35,13 @@
     <i class="ri-more-line" />
   </div>
   <DropdownMenu align="left" {anchor} bind:this={dropdown}>
-      <DropdownContainer>
-        <DropdownItem
-          icon="ri-delete-bin-line"
-          title="Delete"
-          on:click={showModal}
-          data-cy="delete-datasource" />
-      </DropdownContainer>
+    <DropdownContainer>
+      <DropdownItem
+        icon="ri-delete-bin-line"
+        title="Delete"
+        on:click={showModal}
+        data-cy="delete-datasource" />
+    </DropdownContainer>
   </DropdownMenu>
 </div>
 <ConfirmDialog
@@ -49,8 +49,7 @@
   okText="Delete Query"
   onOk={deleteQuery}
   title="Confirm Deletion">
-  Are you sure you wish to delete this query?
-  This action cannot be undone.
+  Are you sure you wish to delete this query? This action cannot be undone.
 </ConfirmDialog>
 
 <style>
@@ -64,7 +63,7 @@
   div.icon i {
     font-size: 16px;
   }
-  
+
   .actions {
     padding: var(--spacing-xl);
     display: grid;
diff --git a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
index e517dc1e23..faadbdeb49 100644
--- a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
@@ -2,7 +2,14 @@
   import { goto } from "@sveltech/routify"
   import { backendUiStore, store } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import { Input, Label, ModalContent, Button, Spacer, Toggle } from "@budibase/bbui"
+  import {
+    Input,
+    Label,
+    ModalContent,
+    Button,
+    Spacer,
+    Toggle,
+  } from "@budibase/bbui"
   import TableDataImport from "../TableDataImport.svelte"
   import analytics from "analytics"
   import screenTemplates from "builderStore/store/screenTemplates"
@@ -35,7 +42,7 @@
     let newTable = {
       name,
       schema: dataImport.schema || {},
-      dataImport
+      dataImport,
     }
 
     // Only set primary display if defined
@@ -90,6 +97,7 @@
     text="Generate screens in the design section"
     bind:checked={createAutoscreens} />
   <div>
-  <Label grey extraSmall>Create Table from CSV (Optional)</Label>
-  <TableDataImport bind:dataImport />
+    <Label grey extraSmall>Create Table from CSV (Optional)</Label>
+    <TableDataImport bind:dataImport />
+  </div>
 </ModalContent>
diff --git a/packages/builder/src/components/common/NavItem.svelte b/packages/builder/src/components/common/NavItem.svelte
index e3e9fe60eb..972427328b 100644
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@@ -32,9 +32,7 @@
 
     <slot name="icon" />
     {#if icon}
-      <div class="icon">
-        <i class={icon} />
-      </div>
+      <div class="icon"><i class={icon} /></div>
     {/if}
     <div class="text">{text}</div>
     {#if withActions}
diff --git a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
index dfcf03b5ba..83a03c72d1 100644
--- a/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryFieldsBuilder.svelte
@@ -5,7 +5,7 @@
     Label,
     Input,
     Heading,
-    Select
+    Select,
   } from "@budibase/bbui"
   import Editor from "./QueryEditor.svelte"
 
@@ -32,7 +32,7 @@
         type={schema.fields[field]?.type}
         required={schema.fields[field]?.required}
         bind:value={fields[field]} />
-      </div>
+    </div>
   {/each}
 </form>
 <Label extraSmall grey>Data</Label>
@@ -45,13 +45,12 @@
     value={fields.customData} />
 {/if}
 
-
 <style>
-.field {
-  margin-bottom: var(--spacing-m);
-  display: grid;
-  grid-template-columns: 1fr 2%;
-  grid-gap: var(--spacing-m);
-  align-items: center;
-}
-</style>
\ No newline at end of file
+  .field {
+    margin-bottom: var(--spacing-m);
+    display: grid;
+    grid-template-columns: 1fr 2%;
+    grid-gap: var(--spacing-m);
+    align-items: center;
+  }
+</style>
diff --git a/packages/builder/src/components/integration/QueryParameterBuilder.svelte b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
index 34a5eb9bae..1be4a9d1ce 100644
--- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@@ -61,7 +61,6 @@
       Add Parameter
     </Button>
   {/if}
-
 </section>
 
 <style>
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 735379bd15..641f3a64c1 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -57,7 +57,7 @@
   )
 
   $: datasourceType = datasource?.source
-  
+
   $: config = $backendUiStore.integrations[datasourceType]?.query
 
   $: shouldShowQueryConfig = config && query.queryVerb && query.queryType
@@ -158,8 +158,7 @@
       <IntegrationQueryEditor
         {query}
         schema={config[query.queryVerb][query.queryType]}
-        bind:parameters
-      />
+        bind:parameters />
 
       <Spacer medium />
 
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditor.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditor.svelte
index 55ec125773..5dd8f8a423 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditor.svelte
@@ -75,7 +75,8 @@
         <div class="action-container">
           <div class="action-header" on:click={selectAction(action)}>
             <span class:selected={action === selectedAction}>
-              {index + 1}. {action[EVENT_TYPE_KEY]}
+              {index + 1}.
+              {action[EVENT_TYPE_KEY]}
             </span>
           </div>
           <i
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/SaveFields.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/SaveFields.svelte
index 71d0ddf17f..221b41f199 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/SaveFields.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/SaveFields.svelte
@@ -1,6 +1,13 @@
 <script>
   // accepts an array of field names, and outputs an object of { FieldName: value }
-  import { DataList, Label, TextButton, Spacer, Select, Input } from "@budibase/bbui"
+  import {
+    DataList,
+    Label,
+    TextButton,
+    Spacer,
+    Select,
+    Input,
+  } from "@budibase/bbui"
   import { store, backendUiStore, currentAsset } from "builderStore"
   import fetchBindableProperties from "builderStore/fetchBindableProperties"
   import { CloseCircleIcon, AddIcon } from "components/common/Icons"
@@ -14,7 +21,7 @@
 
   export let parameterFields
   export let schemaFields
-  export let fieldLabel="Column"
+  export let fieldLabel = "Column"
 
   const emptyField = () => ({ name: "", value: "" })
 
@@ -60,7 +67,9 @@
         // value and type is needed by the client, so it can parse
         // a string into a correct type
         newParameterFields[field.name] = {
-          type: schemaFields ? schemaFields.find(f => f.name === field.name).type : "string",
+          type: schemaFields
+            ? schemaFields.find(f => f.name === field.name).type
+            : "string",
           value: readableToRuntimeBinding(bindableProperties, field.value),
         }
       }
@@ -83,7 +92,7 @@
         {/each}
       </Select>
     {:else}
-      <Input secondary bind:value={field.name} on:blur={rebuildParameters}/> 
+      <Input secondary bind:value={field.name} on:blur={rebuildParameters} />
     {/if}
     <Label size="m" color="dark">Value</Label>
     <DataList secondary bind:value={field.value} on:blur={rebuildParameters}>
@@ -105,7 +114,8 @@
     <Spacer small />
 
     <TextButton text small blue on:click={addField}>
-      Add {fieldLabel}
+      Add
+      {fieldLabel}
       <div style="height: 20px; width: 20px;">
         <AddIcon />
       </div>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/TriggerAutomation.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/TriggerAutomation.svelte
index 688b4757cb..18431daf0a 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/TriggerAutomation.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/TriggerAutomation.svelte
@@ -5,12 +5,14 @@
 
   const AUTOMATION_STATUS = {
     NEW: "new",
-    EXISTING: "existing"
+    EXISTING: "existing",
   }
 
   export let parameters = {}
 
-  let automationStatus = parameters.automationId ? AUTOMATION_STATUS.EXISTING : AUTOMATION_STATUS.NEW
+  let automationStatus = parameters.automationId
+    ? AUTOMATION_STATUS.EXISTING
+    : AUTOMATION_STATUS.NEW
 
   $: automations = $automationStore.automations
     .filter(a => a.definition.trigger?.stepId === "APP")
@@ -46,45 +48,46 @@
     automationStatus = AUTOMATION_STATUS.EXISTING
     parameters.newAutomationName = ""
   }
-
 </script>
 
 <div class="root">
-
   <div class="radio-container" on:click={setNew}>
-    <input 
-      type="radio" 
-      value={AUTOMATION_STATUS.NEW} 
+    <input
+      type="radio"
+      value={AUTOMATION_STATUS.NEW}
       bind:group={automationStatus}
-      disabled={!hasAutomations}> 
-      
-    <Label disabled={!hasAutomations}>Create a new automation </Label>
+      disabled={!hasAutomations} />
 
+    <Label disabled={!hasAutomations}>Create a new automation</Label>
   </div>
 
   <div class="radio-container" on:click={setExisting}>
-
-    <input 
-      type="radio" 
+    <input
+      type="radio"
       value={AUTOMATION_STATUS.EXISTING}
       bind:group={automationStatus}
-      disabled={!hasAutomations}> 
-      
-    <Label disabled={!hasAutomations}>Use an existing automation </Label>
+      disabled={!hasAutomations} />
 
+    <Label disabled={!hasAutomations}>Use an existing automation</Label>
   </div>
 
   <Label size="m" color="dark">Automation</Label>
 
   {#if automationStatus === AUTOMATION_STATUS.EXISTING}
-    <Select secondary bind:value={parameters.automationId} placeholder="Choose automation">
+    <Select
+      secondary
+      bind:value={parameters.automationId}
+      placeholder="Choose automation">
       <option value="" />
       {#each automations as automation}
         <option value={automation._id}>{automation.name}</option>
       {/each}
     </Select>
   {:else}
-    <Input secondary bind:value={parameters.newAutomationName} placeholder="Enter automation name" />
+    <Input
+      secondary
+      bind:value={parameters.newAutomationName}
+      placeholder="Enter automation name" />
   {/if}
 
   <SaveFields
@@ -92,7 +95,6 @@
     schemaFields={automationStatus === AUTOMATION_STATUS.EXISTING && selectedAutomation && selectedAutomation.schema}
     fieldLabel="Field"
     on:fieldschanged={onFieldsChanged} />
-
 </div>
 
 <style>
@@ -132,5 +134,4 @@
   .radio-container > input:focus {
     outline: none;
   }
-
 </style>
diff --git a/packages/builder/src/components/userInterface/TableViewSelect.svelte b/packages/builder/src/components/userInterface/TableViewSelect.svelte
index e5adf611d6..694a2c0b7a 100644
--- a/packages/builder/src/components/userInterface/TableViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableViewSelect.svelte
@@ -14,7 +14,6 @@
 
   export let value = {}
 
-
   $: tables = $backendUiStore.tables.map(m => ({
     label: m.name,
     name: `all_${m._id}`,
@@ -33,12 +32,12 @@
   }, [])
 
   $: queries = $backendUiStore.queries.map(query => ({
-      label: query.name,
-      name: query.name,
-      ...query,
-      schema: query.schema,
-      parameters: query.parameters,
-      type: "query",
+    label: query.name,
+    name: query.name,
+    ...query,
+    schema: query.schema,
+    parameters: query.parameters,
+    type: "query",
   }))
 
   $: bindableProperties = fetchBindableProperties({
@@ -82,8 +81,12 @@
   }
 
   function fetchDatasourceSchema(query) {
-    const source = $backendUiStore.datasources.find(ds => ds._id === query.datasourceId).source
-    return $backendUiStore.integrations[source].query[query.queryVerb][query.queryType];
+    const source = $backendUiStore.datasources.find(
+      ds => ds._id === query.datasourceId
+    ).source
+    return $backendUiStore.integrations[source].query[query.queryVerb][
+      query.queryType
+    ]
   }
 </script>
 
@@ -94,22 +97,26 @@
   <span>{value.label ? value.label : 'Table / View / Query'}</span>
   <Icon name="arrowdown" />
 </div>
-{#if value.type === "query"}
-  <i class="ri-settings-5-line" on:click={openBindingDrawer}/>
+{#if value.type === 'query'}
+  <i class="ri-settings-5-line" on:click={openBindingDrawer} />
   {#if bindingDrawerOpen}
     <BottomDrawer title={'Query'} onClose={closeDatabindingDrawer}>
       <div slot="buttons">
-        <Button blue thin on:click={() => { 
-          notifier.success("Query parameters saved.")
-          handleSelected(value)
-        }}>Save</Button>
+        <Button
+          blue
+          thin
+          on:click={() => {
+            notifier.success('Query parameters saved.')
+            handleSelected(value)
+          }}>
+          Save
+        </Button>
       </div>
       <div class="drawer-contents" slot="body">
-        <IntegrationQueryEditor 
+        <IntegrationQueryEditor
           query={value}
           schema={fetchDatasourceSchema(value)}
-          editable={false}
-        />
+          editable={false} />
         <Spacer large />
         {#if value.parameters.length > 0}
           <ParameterBuilder
@@ -178,7 +185,6 @@
   </div>
 </DropdownMenu>
 
-
 <style>
   .dropdownbutton {
     background-color: var(--grey-2);
diff --git a/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte b/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte
index 2a0c36a67f..c71edee2df 100644
--- a/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte
@@ -7,9 +7,7 @@
 
 {#if $backendUiStore.selectedDatabase._id && selectedTable.name}
   <TableDataTable />
-{:else}
-  <i>Create your first table to start building</i>
-{/if}
+{:else}<i>Create your first table to start building</i>{/if}
 
 <style>
   i {
diff --git a/packages/standard-components/src/grid/Component.svelte b/packages/standard-components/src/grid/Component.svelte
index e9ec8fa645..0d1380d8a7 100644
--- a/packages/standard-components/src/grid/Component.svelte
+++ b/packages/standard-components/src/grid/Component.svelte
@@ -155,7 +155,9 @@
         {#if selectedRows.length > 0}
           <DeleteButton text small on:click={modal.show()}>
             <Icon name="addrow" />
-            Delete {selectedRows.length} row(s)
+            Delete
+            {selectedRows.length}
+            row(s)
           </DeleteButton>
         {/if}
       </div>

From dfca8a7f4b9e62e4755e483102ea01343d0bbbdd Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 15 Jan 2021 13:44:42 +0000
Subject: [PATCH 41/70] lint

---
 packages/server/src/api/controllers/row.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/server/src/api/controllers/row.js b/packages/server/src/api/controllers/row.js
index af88b8cc54..6cf094cd1f 100644
--- a/packages/server/src/api/controllers/row.js
+++ b/packages/server/src/api/controllers/row.js
@@ -9,7 +9,6 @@ const {
   ViewNames,
 } = require("../../db/utils")
 const usersController = require("./user")
-const { integrations } = require("../../integrations")
 const { coerceRowValues } = require("../../utilities")
 
 const TABLE_VIEW_BEGINS_WITH = `all${SEPARATOR}${DocumentTypes.TABLE}${SEPARATOR}`

From 21ff46f18e0a3328116b834be61e5f91130c2d07 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 15 Jan 2021 13:50:11 +0000
Subject: [PATCH 42/70] fix import

---
 .../src/components/backend/DatasourceNavigator/icons/index.js   | 2 +-
 packages/builder/src/components/integration/index.svelte        | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/builder/src/components/backend/DatasourceNavigator/icons/index.js b/packages/builder/src/components/backend/DatasourceNavigator/icons/index.js
index fa5b0d021a..afedb9e78f 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/index.js
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/index.js
@@ -5,7 +5,7 @@ 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"
+import SqlServer from "./SQLServer.svelte"
 
 export default {
   POSTGRES: Postgres,
diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte
index fa56853d40..ebaf63898e 100644
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@@ -9,7 +9,6 @@
     SQL: "sql",
     JSON: "json",
     FIELDS: "fields",
-    LIST: "list",
   }
 
   export let query

From 7ed062bf1e7c75ba68b972af86486e2c7453400d Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Fri, 15 Jan 2021 17:29:46 +0000
Subject: [PATCH 43/70] fix no schema bug, feedback from demo

---
 .../src/components/integration/QueryViewer.svelte   | 13 ++++++++++---
 packages/server/src/integrations/airtable.js        |  1 +
 packages/server/src/integrations/couchdb.js         |  1 +
 packages/server/src/integrations/dynamodb.js        |  1 +
 packages/server/src/integrations/elasticsearch.js   |  2 ++
 .../server/src/integrations/microsoftSqlServer.js   |  1 +
 packages/server/src/integrations/mongodb.js         |  1 +
 packages/server/src/integrations/postgres.js        |  1 +
 packages/server/src/integrations/s3.js              |  1 +
 9 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 641f3a64c1..6d3d984962 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -39,7 +39,7 @@
   let config
   let tab = "JSON"
   let parameters
-  let data
+  let data = []
 
   $: datasource = $backendUiStore.datasources.find(
     ds => ds._id === query.datasourceId
@@ -91,13 +91,20 @@
 
       data = json || []
 
+
+      if (data.length === 0) {
+        notifier.info("Query results empty. Please execute a query with results to create your schema.")
+        return
+      } 
+
+      notifier.success("Query executed successfully.")
+
       // Assume all the fields are strings and create a basic schema
       // from the first record returned by the query
       fields = Object.keys(json[0]).map(field => ({
         name: field,
         type: "STRING",
       }))
-      notifier.success("Query executed successfully.")
     } catch (err) {
       notifier.danger(`Query Error: ${err.message}`)
       console.error(err)
@@ -163,7 +170,7 @@
       <Spacer medium />
 
       <div class="viewer-controls">
-        <Button wide thin blue disabled={!data} on:click={saveQuery}>
+        <Button wide thin blue disabled={data.length === 0} on:click={saveQuery}>
           Save
         </Button>
         <Button wide thin primary on:click={previewQuery}>Run</Button>
diff --git a/packages/server/src/integrations/airtable.js b/packages/server/src/integrations/airtable.js
index cb085f823c..cd72c5e3e2 100644
--- a/packages/server/src/integrations/airtable.js
+++ b/packages/server/src/integrations/airtable.js
@@ -2,6 +2,7 @@ const Airtable = require("airtable")
 const { FIELD_TYPES, QUERY_TYPES } = require("./Integration")
 
 const SCHEMA = {
+  docs: "https://airtable.com/api",
   datasource: {
     apiKey: {
       type: FIELD_TYPES.STRING,
diff --git a/packages/server/src/integrations/couchdb.js b/packages/server/src/integrations/couchdb.js
index c6474ff2b5..bf2a009027 100644
--- a/packages/server/src/integrations/couchdb.js
+++ b/packages/server/src/integrations/couchdb.js
@@ -2,6 +2,7 @@ const PouchDB = require("pouchdb")
 const { FIELD_TYPES, QUERY_TYPES } = require("./Integration")
 
 const SCHEMA = {
+  docs: "https://docs.couchdb.org/en/stable/",
   datasource: {
     url: {
       type: FIELD_TYPES.STRING,
diff --git a/packages/server/src/integrations/dynamodb.js b/packages/server/src/integrations/dynamodb.js
index b1c406fdf4..026d791b1f 100644
--- a/packages/server/src/integrations/dynamodb.js
+++ b/packages/server/src/integrations/dynamodb.js
@@ -2,6 +2,7 @@ const AWS = require("aws-sdk")
 const { FIELD_TYPES, QUERY_TYPES } = require("./Integration")
 
 const SCHEMA = {
+  docs: "https://github.com/dabit3/dynamodb-documentclient-cheat-sheet",
   datasource: {
     region: {
       type: FIELD_TYPES.STRING,
diff --git a/packages/server/src/integrations/elasticsearch.js b/packages/server/src/integrations/elasticsearch.js
index 817cb43696..e8637f7c32 100644
--- a/packages/server/src/integrations/elasticsearch.js
+++ b/packages/server/src/integrations/elasticsearch.js
@@ -2,6 +2,8 @@ const { Client } = require("@elastic/elasticsearch")
 const { QUERY_TYPES, FIELD_TYPES } = require("./Integration")
 
 const SCHEMA = {
+  docs:
+    "https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/current/index.html",
   datasource: {
     url: {
       type: "string",
diff --git a/packages/server/src/integrations/microsoftSqlServer.js b/packages/server/src/integrations/microsoftSqlServer.js
index cabf70c2bf..7431465065 100644
--- a/packages/server/src/integrations/microsoftSqlServer.js
+++ b/packages/server/src/integrations/microsoftSqlServer.js
@@ -2,6 +2,7 @@ const sqlServer = require("mssql")
 const { FIELD_TYPES } = require("./Integration")
 
 const SCHEMA = {
+  docs: "https://github.com/tediousjs/node-mssql",
   datasource: {
     user: {
       type: FIELD_TYPES.STRING,
diff --git a/packages/server/src/integrations/mongodb.js b/packages/server/src/integrations/mongodb.js
index b0ccb2d78a..96457d5c2f 100644
--- a/packages/server/src/integrations/mongodb.js
+++ b/packages/server/src/integrations/mongodb.js
@@ -2,6 +2,7 @@ const { MongoClient } = require("mongodb")
 const { FIELD_TYPES, QUERY_TYPES } = require("./Integration")
 
 const SCHEMA = {
+  docs: "https://github.com/mongodb/node-mongodb-native",
   datasource: {
     connectionString: {
       type: FIELD_TYPES.STRING,
diff --git a/packages/server/src/integrations/postgres.js b/packages/server/src/integrations/postgres.js
index d6e5041003..cd87e20a64 100644
--- a/packages/server/src/integrations/postgres.js
+++ b/packages/server/src/integrations/postgres.js
@@ -1,6 +1,7 @@
 const { Client } = require("pg")
 
 const SCHEMA = {
+  docs: "https://node-postgres.com",
   datasource: {
     host: {
       type: "string",
diff --git a/packages/server/src/integrations/s3.js b/packages/server/src/integrations/s3.js
index e01c45227d..30a204a175 100644
--- a/packages/server/src/integrations/s3.js
+++ b/packages/server/src/integrations/s3.js
@@ -1,6 +1,7 @@
 const AWS = require("aws-sdk")
 
 const SCHEMA = {
+  docs: "https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html",
   datasource: {
     region: {
       type: "string",

From 6be84b81b977e19cbbc46d82a839deb4ff513567 Mon Sep 17 00:00:00 2001
From: mike12345567 <me@michaeldrury.co.uk>
Date: Mon, 18 Jan 2021 12:36:49 +0000
Subject: [PATCH 44/70] Review comments.

---
 packages/builder/src/components/settings/tabs/General.svelte | 1 -
 packages/server/src/api/controllers/application.js           | 4 +++-
 packages/worker/src/api/controllers/app.js                   | 3 ++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/settings/tabs/General.svelte b/packages/builder/src/components/settings/tabs/General.svelte
index 624ca9d617..9e9daf5f57 100644
--- a/packages/builder/src/components/settings/tabs/General.svelte
+++ b/packages/builder/src/components/settings/tabs/General.svelte
@@ -62,7 +62,6 @@
       if (urlIdx !== -1) {
         existingAppUrls.splice(urlIdx, 1)
       }
-      console.log(existingAppUrls)
       nameValidation = {
         name: string()
           .required(nameError)
diff --git a/packages/server/src/api/controllers/application.js b/packages/server/src/api/controllers/application.js
index eda2a77ee0..ba381974a8 100644
--- a/packages/server/src/api/controllers/application.js
+++ b/packages/server/src/api/controllers/application.js
@@ -38,6 +38,8 @@ const {
   HostingTypes,
 } = require("../../utilities/builder/hosting")
 
+const URL_REGEX_SLASH = /\/|\\/g
+
 // utility function, need to do away with this
 async function getLayouts(db) {
   return (
@@ -72,7 +74,7 @@ async function getAppUrlIfNotInUse(ctx) {
   } else {
     url = encodeURI(`${ctx.request.body.name}`)
   }
-  url = `/${url.replace(/\/|\\/g, "")}`.toLowerCase()
+  url = `/${url.replace(URL_REGEX_SLASH, "")}`.toLowerCase()
   const hostingInfo = await getHostingInfo()
   if (hostingInfo.type === HostingTypes.CLOUD) {
     return url
diff --git a/packages/worker/src/api/controllers/app.js b/packages/worker/src/api/controllers/app.js
index 114970a61b..eac0c47c18 100644
--- a/packages/worker/src/api/controllers/app.js
+++ b/packages/worker/src/api/controllers/app.js
@@ -3,6 +3,7 @@ const CouchDB = require("../../db")
 const env = require("../../environment")
 
 const APP_PREFIX = "app_"
+const URL_REGEX_SLASH = /\/|\\/g
 
 exports.getApps = async ctx => {
   let allDbs
@@ -18,7 +19,7 @@ exports.getApps = async ctx => {
   const body = {}
   for (let app of apps) {
     let url = app.url || encodeURI(`${app.name}`)
-    url = `/${url.replace(/\/|\\/g, "")}`
+    url = `/${url.replace(URL_REGEX_SLASH, "")}`
     body[url] = {
       appId: app._id,
       name: app.name,

From 46ae0f755860fa72f4e397047bb98ab13c5cfb6b Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 18 Jan 2021 14:26:01 +0100
Subject: [PATCH 45/70] switches to remix

---
 .gitignore                                    |    3 +
 package.json                                  |    3 -
 packages/builder/package.json                 |    1 -
 .../AppPreview/iframeTemplate.html            |    1 +
 .../IconSelect/IconSelect.svelte              |   57 +-
 .../userInterface/IconSelect/icons.js         | 8972 +++++------------
 .../userInterface/IconSelect/index.js         |    2 -
 .../userInterface/temporaryPanelStructure.js  |   25 +-
 packages/builder/yarn.lock                    |  202 +-
 packages/standard-components/components.json  |    2 +-
 packages/standard-components/package.json     |    2 +-
 packages/standard-components/src/Icon.svelte  |    1 -
 packages/standard-components/yarn.lock        |    5 +
 yarn.lock                                     |   10 -
 14 files changed, 2773 insertions(+), 6513 deletions(-)

diff --git a/.gitignore b/.gitignore
index edad41cdec..b6cfa424ad 100644
--- a/.gitignore
+++ b/.gitignore
@@ -81,3 +81,6 @@ typings/
 
 # Mac files
 .DS_Store
+
+# Nova Editor
+.nova
\ No newline at end of file
diff --git a/package.json b/package.json
index fd601dd099..37efca51ba 100644
--- a/package.json
+++ b/package.json
@@ -34,8 +34,5 @@
     "test:e2e": "lerna run cy:test",
     "test:e2e:ci": "lerna run cy:ci",
     "build:docker": "cd hosting/scripts/linux/ && ./release-to-docker-hub.sh && cd -"
-  },
-  "dependencies": {
-    "@fortawesome/fontawesome": "^1.1.8"
   }
 }
diff --git a/packages/builder/package.json b/packages/builder/package.json
index df660229fa..28ba6b627c 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -67,7 +67,6 @@
     "@budibase/client": "^0.4.3",
     "@budibase/colorpicker": "^1.0.1",
     "@budibase/svelte-ag-grid": "^0.0.16",
-    "@fortawesome/fontawesome-free": "^5.14.0",
     "@sentry/browser": "5.19.1",
     "@svelteschool/svelte-forms": "^0.7.0",
     "britecharts": "^2.16.0",
diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.html b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.html
index cec0b789da..49df3b5c0b 100644
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.html
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.html
@@ -1,6 +1,7 @@
 <html>
   <head>
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
     <style>
       body, html {
         height: 100% !important;
diff --git a/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte b/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte
index fe3a029716..80c729af27 100644
--- a/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte
+++ b/packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte
@@ -1,9 +1,15 @@
+<script context="module">
+  import iconData from "./icons.js"
+  
+  const categories = Object.keys(iconData)
+  const icons = Object.keys(iconData).reduce((acc, cat) => [...acc, ...Object.keys(iconData[cat])], [])
+
+</script>
+
 <script>
   import { DropdownMenu, Button, Input } from "@budibase/bbui"
   import { createEventDispatcher, tick } from "svelte"
 
-  import icons from "./icons.js"
-
   const dispatch = createEventDispatcher()
 
   export let value = ""
@@ -45,12 +51,13 @@
     "Y",
     "Z",
   ]
+
   let buttonAnchor, dropdown
   let loading = false
 
   function findIconByTerm(term) {
     const r = new RegExp(`\^${term}`, "i")
-    return icons.filter(i => r.test(i.label))
+    return icons.filter(i => r.test(i))
   }
 
   async function switchLetter(letter) {
@@ -62,7 +69,6 @@
     await tick() //svg icons do not update without tick
     loading = false
   }
-
   async function findIconOnPage() {
     loading = true
     const iconIdx = filteredIcons.findIndex(i => i.value === value)
@@ -100,7 +106,7 @@
     loading = false
   }
 
-  $: displayValue = value ? value.substring(7) : "Pick Icon"
+  $: displayValue = value ? value.substring(3) : "Pick Icon"
 
   $: totalPages = Math.ceil(filteredIcons.length / maxIconsPerPage)
   $: pageEndIdx = maxIconsPerPage * currentPage
@@ -138,11 +144,11 @@
       <div class="page-area">
         <div class="pager">
           <span on:click={() => pageClick(false)}>
-            <i class="page-btn fas fa-chevron-left" />
+            <i class="page-btn ri-arrow-left-line ri-sm" />
           </span>
           <span>{pagerText}</span>
           <span on:click={() => pageClick(true)}>
-            <i class="page-btn fas fa-chevron-right" />
+            <i class="page-btn ri-arrow-right-line ri-sm" />
           </span>
         </div>
       </div>
@@ -153,12 +159,21 @@
           {#each pagedIcons as icon}
             <div
               class="icon-container"
-              class:selected={value === icon.value}
-              on:click={() => (value = icon.value)}>
+              class:selected={value === `ri-${icon}-fill`}
+              on:click={() => (value = `ri-${icon}-fill`)}>
               <div class="icon-preview">
-                <i class={`${icon.value} fa-3x`} />
+                <i class={`ri-${icon}-fill ri-xl`} />
               </div>
-              <div class="icon-label">{icon.label}</div>
+              <div class="icon-label">{icon}-fill</div>
+            </div>
+            <div
+              class="icon-container"
+              class:selected={value === `ri-${icon}-line`}
+              on:click={() => (value = `ri-${icon}-line`)}>
+              <div class="icon-preview">
+                <i class={`ri-${icon}-line ri-xl`} />
+              </div>
+              <div class="icon-label">{icon}-line</div>
             </div>
           {/each}
         {/if}
@@ -182,13 +197,11 @@
     padding: 10px 0px 10px 15px;
     overflow-x: hidden;
   }
-
   .search-area {
     flex: 0 0 80px;
     display: flex;
     flex-direction: column;
   }
-
   .icon-area {
     flex: 1;
     display: grid;
@@ -199,13 +212,11 @@
     overflow-x: hidden;
     padding-right: 10px;
   }
-
   .no-icons {
     display: flex;
     justify-content: center;
     align-items: center;
   }
-
   .alphabet-area {
     display: flex;
     flex-flow: row wrap;
@@ -213,44 +224,36 @@
     padding-right: 15px;
     justify-content: space-around;
   }
-
   .loading-container {
     display: flex;
     justify-content: center;
     align-items: center;
   }
-
   .search-input {
     display: flex;
     flex-flow: row nowrap;
     width: 100%;
     padding-right: 15px;
   }
-
   .input-wrapper {
     width: 510px;
     margin-right: 5px;
   }
-
   .page-area {
     padding: 10px;
     display: flex;
     justify-content: center;
   }
-
   .letter {
     color: var(--blue);
   }
-
   .letter:hover {
     cursor: pointer;
     text-decoration: underline;
   }
-
   .letter-selected {
     text-decoration: underline;
   }
-
   .icon-container {
     height: 100px;
     display: flex;
@@ -258,34 +261,28 @@
     flex-direction: column;
     border: var(--border-dark);
   }
-
   .icon-container:hover {
     cursor: pointer;
     background: var(--grey-2);
   }
-
   .selected {
     background: var(--grey-3);
   }
-
   .icon-preview {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
   }
-
   .icon-label {
     flex: 0 0 20px;
     text-align: center;
     font-size: 12px;
   }
-
   .page-btn {
     color: var(--blue);
   }
-
   .page-btn:hover {
     cursor: pointer;
   }
-</style>
+</style>
\ No newline at end of file
diff --git a/packages/builder/src/components/userInterface/IconSelect/icons.js b/packages/builder/src/components/userInterface/IconSelect/icons.js
index dbc0fd6acc..8baf58c589 100644
--- a/packages/builder/src/components/userInterface/IconSelect/icons.js
+++ b/packages/builder/src/components/userInterface/IconSelect/icons.js
@@ -1,6450 +1,2522 @@
-export default [
-  {
-    value: "fab fa-500px",
-    label: "500px",
-  },
-  {
-    value: "fab fa-accessible-icon",
-    label: "accessible-icon",
-  },
-  {
-    value: "fab fa-accusoft",
-    label: "accusoft",
-  },
-  {
-    value: "fab fa-acquisitions-incorporated",
-    label: "acquisitions-incorporated",
-  },
-  {
-    value: "fas fa-ad",
-    label: "ad",
-  },
-  {
-    value: "fas fa-address-book",
-    label: "address-book",
-  },
-  {
-    value: "far fa-address-book",
-    label: "address-book",
-  },
-  {
-    value: "fas fa-address-card",
-    label: "address-card",
-  },
-  {
-    value: "far fa-address-card",
-    label: "address-card",
-  },
-  {
-    value: "fas fa-adjust",
-    label: "adjust",
-  },
-  {
-    value: "fab fa-adn",
-    label: "adn",
-  },
-  {
-    value: "fab fa-adobe",
-    label: "adobe",
-  },
-  {
-    value: "fab fa-adversal",
-    label: "adversal",
-  },
-  {
-    value: "fab fa-affiliatetheme",
-    label: "affiliatetheme",
-  },
-  {
-    value: "fas fa-air-freshener",
-    label: "air-freshener",
-  },
-  {
-    value: "fab fa-airbnb",
-    label: "airbnb",
-  },
-  {
-    value: "fab fa-algolia",
-    label: "algolia",
-  },
-  {
-    value: "fas fa-align-center",
-    label: "align-center",
-  },
-  {
-    value: "fas fa-align-justify",
-    label: "align-justify",
-  },
-  {
-    value: "fas fa-align-left",
-    label: "align-left",
-  },
-  {
-    value: "fas fa-align-right",
-    label: "align-right",
-  },
-  {
-    value: "fab fa-alipay",
-    label: "alipay",
-  },
-  {
-    value: "fas fa-allergies",
-    label: "allergies",
-  },
-  {
-    value: "fab fa-amazon",
-    label: "amazon",
-  },
-  {
-    value: "fab fa-amazon-pay",
-    label: "amazon-pay",
-  },
-  {
-    value: "fas fa-ambulance",
-    label: "ambulance",
-  },
-  {
-    value: "fas fa-american-sign-language-interpreting",
-    label: "american-sign-language-interpreting",
-  },
-  {
-    value: "fab fa-amilia",
-    label: "amilia",
-  },
-  {
-    value: "fas fa-anchor",
-    label: "anchor",
-  },
-  {
-    value: "fab fa-android",
-    label: "android",
-  },
-  {
-    value: "fab fa-angellist",
-    label: "angellist",
-  },
-  {
-    value: "fas fa-angle-double-down",
-    label: "angle-double-down",
-  },
-  {
-    value: "fas fa-angle-double-left",
-    label: "angle-double-left",
-  },
-  {
-    value: "fas fa-angle-double-right",
-    label: "angle-double-right",
-  },
-  {
-    value: "fas fa-angle-double-up",
-    label: "angle-double-up",
-  },
-  {
-    value: "fas fa-angle-down",
-    label: "angle-down",
-  },
-  {
-    value: "fas fa-angle-left",
-    label: "angle-left",
-  },
-  {
-    value: "fas fa-angle-right",
-    label: "angle-right",
-  },
-  {
-    value: "fas fa-angle-up",
-    label: "angle-up",
-  },
-  {
-    value: "fas fa-angry",
-    label: "angry",
-  },
-  {
-    value: "far fa-angry",
-    label: "angry",
-  },
-  {
-    value: "fab fa-angrycreative",
-    label: "angrycreative",
-  },
-  {
-    value: "fab fa-angular",
-    label: "angular",
-  },
-  {
-    value: "fas fa-ankh",
-    label: "ankh",
-  },
-  {
-    value: "fab fa-app-store",
-    label: "app-store",
-  },
-  {
-    value: "fab fa-app-store-ios",
-    label: "app-store-ios",
-  },
-  {
-    value: "fab fa-apper",
-    label: "apper",
-  },
-  {
-    value: "fab fa-apple",
-    label: "apple",
-  },
-  {
-    value: "fas fa-apple-alt",
-    label: "apple-alt",
-  },
-  {
-    value: "fab fa-apple-pay",
-    label: "apple-pay",
-  },
-  {
-    value: "fas fa-archive",
-    label: "archive",
-  },
-  {
-    value: "fas fa-archway",
-    label: "archway",
-  },
-  {
-    value: "fas fa-arrow-alt-circle-down",
-    label: "arrow-alt-circle-down",
-  },
-  {
-    value: "far fa-arrow-alt-circle-down",
-    label: "arrow-alt-circle-down",
-  },
-  {
-    value: "fas fa-arrow-alt-circle-left",
-    label: "arrow-alt-circle-left",
-  },
-  {
-    value: "far fa-arrow-alt-circle-left",
-    label: "arrow-alt-circle-left",
-  },
-  {
-    value: "fas fa-arrow-alt-circle-right",
-    label: "arrow-alt-circle-right",
-  },
-  {
-    value: "far fa-arrow-alt-circle-right",
-    label: "arrow-alt-circle-right",
-  },
-  {
-    value: "fas fa-arrow-alt-circle-up",
-    label: "arrow-alt-circle-up",
-  },
-  {
-    value: "far fa-arrow-alt-circle-up",
-    label: "arrow-alt-circle-up",
-  },
-  {
-    value: "fas fa-arrow-circle-down",
-    label: "arrow-circle-down",
-  },
-  {
-    value: "fas fa-arrow-circle-left",
-    label: "arrow-circle-left",
-  },
-  {
-    value: "fas fa-arrow-circle-right",
-    label: "arrow-circle-right",
-  },
-  {
-    value: "fas fa-arrow-circle-up",
-    label: "arrow-circle-up",
-  },
-  {
-    value: "fas fa-arrow-down",
-    label: "arrow-down",
-  },
-  {
-    value: "fas fa-arrow-left",
-    label: "arrow-left",
-  },
-  {
-    value: "fas fa-arrow-right",
-    label: "arrow-right",
-  },
-  {
-    value: "fas fa-arrow-up",
-    label: "arrow-up",
-  },
-  {
-    value: "fas fa-arrows-alt",
-    label: "arrows-alt",
-  },
-  {
-    value: "fas fa-arrows-alt-h",
-    label: "arrows-alt-h",
-  },
-  {
-    value: "fas fa-arrows-alt-v",
-    label: "arrows-alt-v",
-  },
-  {
-    value: "fab fa-artstation",
-    label: "artstation",
-  },
-  {
-    value: "fas fa-assistive-listening-systems",
-    label: "assistive-listening-systems",
-  },
-  {
-    value: "fas fa-asterisk",
-    label: "asterisk",
-  },
-  {
-    value: "fab fa-asymmetrik",
-    label: "asymmetrik",
-  },
-  {
-    value: "fas fa-at",
-    label: "at",
-  },
-  {
-    value: "fas fa-atlas",
-    label: "atlas",
-  },
-  {
-    value: "fab fa-atlassian",
-    label: "atlassian",
-  },
-  {
-    value: "fas fa-atom",
-    label: "atom",
-  },
-  {
-    value: "fab fa-audible",
-    label: "audible",
-  },
-  {
-    value: "fas fa-audio-description",
-    label: "audio-description",
-  },
-  {
-    value: "fab fa-autoprefixer",
-    label: "autoprefixer",
-  },
-  {
-    value: "fab fa-avianex",
-    label: "avianex",
-  },
-  {
-    value: "fab fa-aviato",
-    label: "aviato",
-  },
-  {
-    value: "fas fa-award",
-    label: "award",
-  },
-  {
-    value: "fab fa-aws",
-    label: "aws",
-  },
-  {
-    value: "fas fa-baby",
-    label: "baby",
-  },
-  {
-    value: "fas fa-baby-carriage",
-    label: "baby-carriage",
-  },
-  {
-    value: "fas fa-backspace",
-    label: "backspace",
-  },
-  {
-    value: "fas fa-backward",
-    label: "backward",
-  },
-  {
-    value: "fas fa-bacon",
-    label: "bacon",
-  },
-  {
-    value: "fas fa-bacteria",
-    label: "bacteria",
-  },
-  {
-    value: "fas fa-bacterium",
-    label: "bacterium",
-  },
-  {
-    value: "fas fa-bahai",
-    label: "bahai",
-  },
-  {
-    value: "fas fa-balance-scale",
-    label: "balance-scale",
-  },
-  {
-    value: "fas fa-balance-scale-left",
-    label: "balance-scale-left",
-  },
-  {
-    value: "fas fa-balance-scale-right",
-    label: "balance-scale-right",
-  },
-  {
-    value: "fas fa-ban",
-    label: "ban",
-  },
-  {
-    value: "fas fa-band-aid",
-    label: "band-aid",
-  },
-  {
-    value: "fab fa-bandcamp",
-    label: "bandcamp",
-  },
-  {
-    value: "",
-    label: "",
-  },
-  {
-    value: "fas fa-barcode",
-    label: "barcode",
-  },
-  {
-    value: "fas fa-bars",
-    label: "bars",
-  },
-  {
-    value: "fas fa-baseball-ball",
-    label: "baseball-ball",
-  },
-  {
-    value: "fas fa-basketball-ball",
-    label: "basketball-ball",
-  },
-  {
-    value: "fas fa-bath",
-    label: "bath",
-  },
-  {
-    value: "fas fa-battery-empty",
-    label: "battery-empty",
-  },
-  {
-    value: "fas fa-battery-full",
-    label: "battery-full",
-  },
-  {
-    value: "fas fa-battery-half",
-    label: "battery-half",
-  },
-  {
-    value: "fas fa-battery-quarter",
-    label: "battery-quarter",
-  },
-  {
-    value: "fas fa-battery-three-quarters",
-    label: "battery-three-quarters",
-  },
-  {
-    value: "fab fa-battle-net",
-    label: "battle-net",
-  },
-  {
-    value: "fas fa-bed",
-    label: "bed",
-  },
-  {
-    value: "fas fa-beer",
-    label: "beer",
-  },
-  {
-    value: "fab fa-behance",
-    label: "behance",
-  },
-  {
-    value: "fab fa-behance-square",
-    label: "behance-square",
-  },
-  {
-    value: "fas fa-bell",
-    label: "bell",
-  },
-  {
-    value: "far fa-bell",
-    label: "bell",
-  },
-  {
-    value: "fas fa-bell-slash",
-    label: "bell-slash",
-  },
-  {
-    value: "far fa-bell-slash",
-    label: "bell-slash",
-  },
-  {
-    value: "fas fa-bezier-curve",
-    label: "bezier-curve",
-  },
-  {
-    value: "fas fa-bible",
-    label: "bible",
-  },
-  {
-    value: "fas fa-bicycle",
-    label: "bicycle",
-  },
-  {
-    value: "fas fa-biking",
-    label: "biking",
-  },
-  {
-    value: "fab fa-bimobject",
-    label: "bimobject",
-  },
-  {
-    value: "fas fa-binoculars",
-    label: "binoculars",
-  },
-  {
-    value: "fas fa-biohazard",
-    label: "biohazard",
-  },
-  {
-    value: "fas fa-birthday-cake",
-    label: "birthday-cake",
-  },
-  {
-    value: "fab fa-bitbucket",
-    label: "bitbucket",
-  },
-  {
-    value: "fab fa-bitcoin",
-    label: "bitcoin",
-  },
-  {
-    value: "fab fa-bity",
-    label: "bity",
-  },
-  {
-    value: "fab fa-black-tie",
-    label: "black-tie",
-  },
-  {
-    value: "fab fa-blackberry",
-    label: "blackberry",
-  },
-  {
-    value: "fas fa-blender",
-    label: "blender",
-  },
-  {
-    value: "fas fa-blender-phone",
-    label: "blender-phone",
-  },
-  {
-    value: "fas fa-blind",
-    label: "blind",
-  },
-  {
-    value: "fas fa-blog",
-    label: "blog",
-  },
-  {
-    value: "fab fa-blogger",
-    label: "blogger",
-  },
-  {
-    value: "fab fa-blogger-b",
-    label: "blogger-b",
-  },
-  {
-    value: "fab fa-bluetooth",
-    label: "bluetooth",
-  },
-  {
-    value: "fab fa-bluetooth-b",
-    label: "bluetooth-b",
-  },
-  {
-    value: "fas fa-bold",
-    label: "bold",
-  },
-  {
-    value: "fas fa-bolt",
-    label: "bolt",
-  },
-  {
-    value: "fas fa-bomb",
-    label: "bomb",
-  },
-  {
-    value: "fas fa-bone",
-    label: "bone",
-  },
-  {
-    value: "fas fa-bong",
-    label: "bong",
-  },
-  {
-    value: "fas fa-book",
-    label: "book",
-  },
-  {
-    value: "fas fa-book-dead",
-    label: "book-dead",
-  },
-  {
-    value: "fas fa-book-medical",
-    label: "book-medical",
-  },
-  {
-    value: "fas fa-book-open",
-    label: "book-open",
-  },
-  {
-    value: "fas fa-book-reader",
-    label: "book-reader",
-  },
-  {
-    value: "fas fa-bookmark",
-    label: "bookmark",
-  },
-  {
-    value: "far fa-bookmark",
-    label: "bookmark",
-  },
-  {
-    value: "fab fa-bootstrap",
-    label: "bootstrap",
-  },
-  {
-    value: "fas fa-border-all",
-    label: "border-all",
-  },
-  {
-    value: "fas fa-border-none",
-    label: "border-none",
-  },
-  {
-    value: "fas fa-border-style",
-    label: "border-style",
-  },
-  {
-    value: "fas fa-bowling-ball",
-    label: "bowling-ball",
-  },
-  {
-    value: "fas fa-box",
-    label: "box",
-  },
-  {
-    value: "fas fa-box-open",
-    label: "box-open",
-  },
-  {
-    value: "fas fa-box-tissue",
-    label: "box-tissue",
-  },
-  {
-    value: "fas fa-boxes",
-    label: "boxes",
-  },
-  {
-    value: "fas fa-braille",
-    label: "braille",
-  },
-  {
-    value: "fas fa-brain",
-    label: "brain",
-  },
-  {
-    value: "fas fa-bread-slice",
-    label: "bread-slice",
-  },
-  {
-    value: "fas fa-briefcase",
-    label: "briefcase",
-  },
-  {
-    value: "fas fa-briefcase-medical",
-    label: "briefcase-medical",
-  },
-  {
-    value: "fas fa-broadcast-tower",
-    label: "broadcast-tower",
-  },
-  {
-    value: "fas fa-broom",
-    label: "broom",
-  },
-  {
-    value: "fas fa-brush",
-    label: "brush",
-  },
-  {
-    value: "fab fa-btc",
-    label: "btc",
-  },
-  {
-    value: "fab fa-buffer",
-    label: "buffer",
-  },
-  {
-    value: "fas fa-bug",
-    label: "bug",
-  },
-  {
-    value: "fas fa-building",
-    label: "building",
-  },
-  {
-    value: "far fa-building",
-    label: "building",
-  },
-  {
-    value: "fas fa-bullhorn",
-    label: "bullhorn",
-  },
-  {
-    value: "fas fa-bullseye",
-    label: "bullseye",
-  },
-  {
-    value: "fas fa-burn",
-    label: "burn",
-  },
-  {
-    value: "fab fa-buromobelexperte",
-    label: "buromobelexperte",
-  },
-  {
-    value: "fas fa-bus",
-    label: "bus",
-  },
-  {
-    value: "fas fa-bus-alt",
-    label: "bus-alt",
-  },
-  {
-    value: "fas fa-business-time",
-    label: "business-time",
-  },
-  {
-    value: "fab fa-buy-n-large",
-    label: "buy-n-large",
-  },
-  {
-    value: "fab fa-buysellads",
-    label: "buysellads",
-  },
-  {
-    value: "fas fa-calculator",
-    label: "calculator",
-  },
-  {
-    value: "fas fa-calendar",
-    label: "calendar",
-  },
-  {
-    value: "far fa-calendar",
-    label: "calendar",
-  },
-  {
-    value: "fas fa-calendar-alt",
-    label: "calendar-alt",
-  },
-  {
-    value: "far fa-calendar-alt",
-    label: "calendar-alt",
-  },
-  {
-    value: "fas fa-calendar-check",
-    label: "calendar-check",
-  },
-  {
-    value: "far fa-calendar-check",
-    label: "calendar-check",
-  },
-  {
-    value: "fas fa-calendar-day",
-    label: "calendar-day",
-  },
-  {
-    value: "fas fa-calendar-minus",
-    label: "calendar-minus",
-  },
-  {
-    value: "far fa-calendar-minus",
-    label: "calendar-minus",
-  },
-  {
-    value: "fas fa-calendar-plus",
-    label: "calendar-plus",
-  },
-  {
-    value: "far fa-calendar-plus",
-    label: "calendar-plus",
-  },
-  {
-    value: "fas fa-calendar-times",
-    label: "calendar-times",
-  },
-  {
-    value: "far fa-calendar-times",
-    label: "calendar-times",
-  },
-  {
-    value: "fas fa-calendar-week",
-    label: "calendar-week",
-  },
-  {
-    value: "fas fa-camera",
-    label: "camera",
-  },
-  {
-    value: "fas fa-camera-retro",
-    label: "camera-retro",
-  },
-  {
-    value: "",
-    label: "",
-  },
-  {
-    value: "fas fa-campground",
-    label: "campground",
-  },
-  {
-    value: "fab fa-canadian-maple-leaf",
-    label: "canadian-maple-leaf",
-  },
-  {
-    value: "fas fa-candy-cane",
-    label: "candy-cane",
-  },
-  {
-    value: "fas fa-cannabis",
-    label: "cannabis",
-  },
-  {
-    value: "fas fa-capsules",
-    label: "capsules",
-  },
-  {
-    value: "fas fa-car",
-    label: "car",
-  },
-  {
-    value: "fas fa-car-alt",
-    label: "car-alt",
-  },
-  {
-    value: "fas fa-car-battery",
-    label: "car-battery",
-  },
-  {
-    value: "fas fa-car-crash",
-    label: "car-crash",
-  },
-  {
-    value: "fas fa-car-side",
-    label: "car-side",
-  },
-  {
-    value: "fas fa-caravan",
-    label: "caravan",
-  },
-  {
-    value: "fas fa-caret-down",
-    label: "caret-down",
-  },
-  {
-    value: "fas fa-caret-left",
-    label: "caret-left",
-  },
-  {
-    value: "fas fa-caret-right",
-    label: "caret-right",
-  },
-  {
-    value: "fas fa-caret-square-down",
-    label: "caret-square-down",
-  },
-  {
-    value: "far fa-caret-square-down",
-    label: "caret-square-down",
-  },
-  {
-    value: "fas fa-caret-square-left",
-    label: "caret-square-left",
-  },
-  {
-    value: "far fa-caret-square-left",
-    label: "caret-square-left",
-  },
-  {
-    value: "fas fa-caret-square-right",
-    label: "caret-square-right",
-  },
-  {
-    value: "far fa-caret-square-right",
-    label: "caret-square-right",
-  },
-  {
-    value: "fas fa-caret-square-up",
-    label: "caret-square-up",
-  },
-  {
-    value: "far fa-caret-square-up",
-    label: "caret-square-up",
-  },
-  {
-    value: "fas fa-caret-up",
-    label: "caret-up",
-  },
-  {
-    value: "fas fa-carrot",
-    label: "carrot",
-  },
-  {
-    value: "fas fa-cart-arrow-down",
-    label: "cart-arrow-down",
-  },
-  {
-    value: "fas fa-cart-plus",
-    label: "cart-plus",
-  },
-  {
-    value: "fas fa-cash-register",
-    label: "cash-register",
-  },
-  {
-    value: "fas fa-cat",
-    label: "cat",
-  },
-  {
-    value: "fab fa-cc-amazon-pay",
-    label: "cc-amazon-pay",
-  },
-  {
-    value: "fab fa-cc-amex",
-    label: "cc-amex",
-  },
-  {
-    value: "fab fa-cc-apple-pay",
-    label: "cc-apple-pay",
-  },
-  {
-    value: "fab fa-cc-diners-club",
-    label: "cc-diners-club",
-  },
-  {
-    value: "fab fa-cc-discover",
-    label: "cc-discover",
-  },
-  {
-    value: "fab fa-cc-jcb",
-    label: "cc-jcb",
-  },
-  {
-    value: "fab fa-cc-mastercard",
-    label: "cc-mastercard",
-  },
-  {
-    value: "fab fa-cc-paypal",
-    label: "cc-paypal",
-  },
-  {
-    value: "fab fa-cc-stripe",
-    label: "cc-stripe",
-  },
-  {
-    value: "fab fa-cc-visa",
-    label: "cc-visa",
-  },
-  {
-    value: "fab fa-centercode",
-    label: "centercode",
-  },
-  {
-    value: "fab fa-centos",
-    label: "centos",
-  },
-  {
-    value: "fas fa-certificate",
-    label: "certificate",
-  },
-  {
-    value: "fas fa-chair",
-    label: "chair",
-  },
-  {
-    value: "fas fa-chalkboard",
-    label: "chalkboard",
-  },
-  {
-    value: "fas fa-chalkboard-teacher",
-    label: "chalkboard-teacher",
-  },
-  {
-    value: "fas fa-charging-station",
-    label: "charging-station",
-  },
-  {
-    value: "fas fa-chart-area",
-    label: "chart-area",
-  },
-  {
-    value: "fas fa-chart-bar",
-    label: "chart-bar",
-  },
-  {
-    value: "far fa-chart-bar",
-    label: "chart-bar",
-  },
-  {
-    value: "fas fa-chart-line",
-    label: "chart-line",
-  },
-  {
-    value: "fas fa-chart-pie",
-    label: "chart-pie",
-  },
-  {
-    value: "fas fa-check",
-    label: "check",
-  },
-  {
-    value: "fas fa-check-circle",
-    label: "check-circle",
-  },
-  {
-    value: "far fa-check-circle",
-    label: "check-circle",
-  },
-  {
-    value: "fas fa-check-double",
-    label: "check-double",
-  },
-  {
-    value: "fas fa-check-square",
-    label: "check-square",
-  },
-  {
-    value: "far fa-check-square",
-    label: "check-square",
-  },
-  {
-    value: "fas fa-cheese",
-    label: "cheese",
-  },
-  {
-    value: "fas fa-chess",
-    label: "chess",
-  },
-  {
-    value: "fas fa-chess-bishop",
-    label: "chess-bishop",
-  },
-  {
-    value: "fas fa-chess-board",
-    label: "chess-board",
-  },
-  {
-    value: "fas fa-chess-king",
-    label: "chess-king",
-  },
-  {
-    value: "fas fa-chess-knight",
-    label: "chess-knight",
-  },
-  {
-    value: "fas fa-chess-pawn",
-    label: "chess-pawn",
-  },
-  {
-    value: "fas fa-chess-queen",
-    label: "chess-queen",
-  },
-  {
-    value: "fas fa-chess-rook",
-    label: "chess-rook",
-  },
-  {
-    value: "fas fa-chevron-circle-down",
-    label: "chevron-circle-down",
-  },
-  {
-    value: "fas fa-chevron-circle-left",
-    label: "chevron-circle-left",
-  },
-  {
-    value: "fas fa-chevron-circle-right",
-    label: "chevron-circle-right",
-  },
-  {
-    value: "fas fa-chevron-circle-up",
-    label: "chevron-circle-up",
-  },
-  {
-    value: "fas fa-chevron-down",
-    label: "chevron-down",
-  },
-  {
-    value: "fas fa-chevron-left",
-    label: "chevron-left",
-  },
-  {
-    value: "fas fa-chevron-right",
-    label: "chevron-right",
-  },
-  {
-    value: "fas fa-chevron-up",
-    label: "chevron-up",
-  },
-  {
-    value: "fas fa-child",
-    label: "child",
-  },
-  {
-    value: "fab fa-chrome",
-    label: "chrome",
-  },
-  {
-    value: "fab fa-chromecast",
-    label: "chromecast",
-  },
-  {
-    value: "fas fa-church",
-    label: "church",
-  },
-  {
-    value: "fas fa-circle",
-    label: "circle",
-  },
-  {
-    value: "far fa-circle",
-    label: "circle",
-  },
-  {
-    value: "fas fa-circle-notch",
-    label: "circle-notch",
-  },
-  {
-    value: "fas fa-city",
-    label: "city",
-  },
-  {
-    value: "fas fa-clinic-medical",
-    label: "clinic-medical",
-  },
-  {
-    value: "fas fa-clipboard",
-    label: "clipboard",
-  },
-  {
-    value: "far fa-clipboard",
-    label: "clipboard",
-  },
-  {
-    value: "fas fa-clipboard-check",
-    label: "clipboard-check",
-  },
-  {
-    value: "fas fa-clipboard-list",
-    label: "clipboard-list",
-  },
-  {
-    value: "fas fa-clock",
-    label: "clock",
-  },
-  {
-    value: "far fa-clock",
-    label: "clock",
-  },
-  {
-    value: "fas fa-clone",
-    label: "clone",
-  },
-  {
-    value: "far fa-clone",
-    label: "clone",
-  },
-  {
-    value: "fas fa-closed-captioning",
-    label: "closed-captioning",
-  },
-  {
-    value: "far fa-closed-captioning",
-    label: "closed-captioning",
-  },
-  {
-    value: "fas fa-cloud",
-    label: "cloud",
-  },
-  {
-    value: "fas fa-cloud-download-alt",
-    label: "cloud-download-alt",
-  },
-  {
-    value: "fas fa-cloud-meatball",
-    label: "cloud-meatball",
-  },
-  {
-    value: "fas fa-cloud-moon",
-    label: "cloud-moon",
-  },
-  {
-    value: "fas fa-cloud-moon-rain",
-    label: "cloud-moon-rain",
-  },
-  {
-    value: "fas fa-cloud-rain",
-    label: "cloud-rain",
-  },
-  {
-    value: "fas fa-cloud-showers-heavy",
-    label: "cloud-showers-heavy",
-  },
-  {
-    value: "fas fa-cloud-sun",
-    label: "cloud-sun",
-  },
-  {
-    value: "fas fa-cloud-sun-rain",
-    label: "cloud-sun-rain",
-  },
-  {
-    value: "fas fa-cloud-upload-alt",
-    label: "cloud-upload-alt",
-  },
-  {
-    value: "fab fa-cloudscale",
-    label: "cloudscale",
-  },
-  {
-    value: "fab fa-cloudsmith",
-    label: "cloudsmith",
-  },
-  {
-    value: "fab fa-cloudversify",
-    label: "cloudversify",
-  },
-  {
-    value: "fas fa-cocktail",
-    label: "cocktail",
-  },
-  {
-    value: "fas fa-code",
-    label: "code",
-  },
-  {
-    value: "fas fa-code-branch",
-    label: "code-branch",
-  },
-  {
-    value: "fab fa-codepen",
-    label: "codepen",
-  },
-  {
-    value: "fab fa-codiepie",
-    label: "codiepie",
-  },
-  {
-    value: "fas fa-coffee",
-    label: "coffee",
-  },
-  {
-    value: "fas fa-cog",
-    label: "cog",
-  },
-  {
-    value: "fas fa-cogs",
-    label: "cogs",
-  },
-  {
-    value: "fas fa-coins",
-    label: "coins",
-  },
-  {
-    value: "fas fa-columns",
-    label: "columns",
-  },
-  {
-    value: "fas fa-comment",
-    label: "comment",
-  },
-  {
-    value: "far fa-comment",
-    label: "comment",
-  },
-  {
-    value: "fas fa-comment-alt",
-    label: "comment-alt",
-  },
-  {
-    value: "far fa-comment-alt",
-    label: "comment-alt",
-  },
-  {
-    value: "fas fa-comment-dollar",
-    label: "comment-dollar",
-  },
-  {
-    value: "fas fa-comment-dots",
-    label: "comment-dots",
-  },
-  {
-    value: "far fa-comment-dots",
-    label: "comment-dots",
-  },
-  {
-    value: "fas fa-comment-medical",
-    label: "comment-medical",
-  },
-  {
-    value: "fas fa-comment-slash",
-    label: "comment-slash",
-  },
-  {
-    value: "fas fa-comments",
-    label: "comments",
-  },
-  {
-    value: "far fa-comments",
-    label: "comments",
-  },
-  {
-    value: "fas fa-comments-dollar",
-    label: "comments-dollar",
-  },
-  {
-    value: "fas fa-compact-disc",
-    label: "compact-disc",
-  },
-  {
-    value: "fas fa-compass",
-    label: "compass",
-  },
-  {
-    value: "far fa-compass",
-    label: "compass",
-  },
-  {
-    value: "fas fa-compress",
-    label: "compress",
-  },
-  {
-    value: "fas fa-compress-alt",
-    label: "compress-alt",
-  },
-  {
-    value: "fas fa-compress-arrows-alt",
-    label: "compress-arrows-alt",
-  },
-  {
-    value: "fas fa-concierge-bell",
-    label: "concierge-bell",
-  },
-  {
-    value: "fab fa-confluence",
-    label: "confluence",
-  },
-  {
-    value: "fab fa-connectdevelop",
-    label: "connectdevelop",
-  },
-  {
-    value: "fab fa-contao",
-    label: "contao",
-  },
-  {
-    value: "fas fa-cookie",
-    label: "cookie",
-  },
-  {
-    value: "fas fa-cookie-bite",
-    label: "cookie-bite",
-  },
-  {
-    value: "fas fa-copy",
-    label: "copy",
-  },
-  {
-    value: "far fa-copy",
-    label: "copy",
-  },
-  {
-    value: "fas fa-copyright",
-    label: "copyright",
-  },
-  {
-    value: "far fa-copyright",
-    label: "copyright",
-  },
-  {
-    value: "fab fa-cotton-bureau",
-    label: "cotton-bureau",
-  },
-  {
-    value: "fas fa-couch",
-    label: "couch",
-  },
-  {
-    value: "fab fa-cpanel",
-    label: "cpanel",
-  },
-  {
-    value: "fab fa-creative-commons",
-    label: "creative-commons",
-  },
-  {
-    value: "fab fa-creative-commons-by",
-    label: "creative-commons-by",
-  },
-  {
-    value: "fab fa-creative-commons-nc",
-    label: "creative-commons-nc",
-  },
-  {
-    value: "fab fa-creative-commons-nc-eu",
-    label: "creative-commons-nc-eu",
-  },
-  {
-    value: "fab fa-creative-commons-nc-jp",
-    label: "creative-commons-nc-jp",
-  },
-  {
-    value: "fab fa-creative-commons-nd",
-    label: "creative-commons-nd",
-  },
-  {
-    value: "fab fa-creative-commons-pd",
-    label: "creative-commons-pd",
-  },
-  {
-    value: "fab fa-creative-commons-pd-alt",
-    label: "creative-commons-pd-alt",
-  },
-  {
-    value: "fab fa-creative-commons-remix",
-    label: "creative-commons-remix",
-  },
-  {
-    value: "fab fa-creative-commons-sa",
-    label: "creative-commons-sa",
-  },
-  {
-    value: "fab fa-creative-commons-sampling",
-    label: "creative-commons-sampling",
-  },
-  {
-    value: "fab fa-creative-commons-sampling-plus",
-    label: "creative-commons-sampling-plus",
-  },
-  {
-    value: "fab fa-creative-commons-share",
-    label: "creative-commons-share",
-  },
-  {
-    value: "fab fa-creative-commons-zero",
-    label: "creative-commons-zero",
-  },
-  {
-    value: "fas fa-credit-card",
-    label: "credit-card",
-  },
-  {
-    value: "far fa-credit-card",
-    label: "credit-card",
-  },
-  {
-    value: "fab fa-critical-role",
-    label: "critical-role",
-  },
-  {
-    value: "fas fa-crop",
-    label: "crop",
-  },
-  {
-    value: "fas fa-crop-alt",
-    label: "crop-alt",
-  },
-  {
-    value: "fas fa-cross",
-    label: "cross",
-  },
-  {
-    value: "fas fa-crosshairs",
-    label: "crosshairs",
-  },
-  {
-    value: "fas fa-crow",
-    label: "crow",
-  },
-  {
-    value: "fas fa-crown",
-    label: "crown",
-  },
-  {
-    value: "fas fa-crutch",
-    label: "crutch",
-  },
-  {
-    value: "fab fa-css3",
-    label: "css3",
-  },
-  {
-    value: "fab fa-css3-alt",
-    label: "css3-alt",
-  },
-  {
-    value: "fas fa-cube",
-    label: "cube",
-  },
-  {
-    value: "fas fa-cubes",
-    label: "cubes",
-  },
-  {
-    value: "fas fa-cut",
-    label: "cut",
-  },
-  {
-    value: "fab fa-cuttlefish",
-    label: "cuttlefish",
-  },
-  {
-    value: "fab fa-d-and-d",
-    label: "d-and-d",
-  },
-  {
-    value: "fab fa-d-and-d-beyond",
-    label: "d-and-d-beyond",
-  },
-  {
-    value: "fab fa-dailymotion",
-    label: "dailymotion",
-  },
-  {
-    value: "fab fa-dashcube",
-    label: "dashcube",
-  },
-  {
-    value: "fas fa-database",
-    label: "database",
-  },
-  {
-    value: "fas fa-deaf",
-    label: "deaf",
-  },
-  {
-    value: "fab fa-deezer",
-    label: "deezer",
-  },
-  {
-    value: "fab fa-delicious",
-    label: "delicious",
-  },
-  {
-    value: "fas fa-democrat",
-    label: "democrat",
-  },
-  {
-    value: "fab fa-deploydog",
-    label: "deploydog",
-  },
-  {
-    value: "fab fa-deskpro",
-    label: "deskpro",
-  },
-  {
-    value: "fas fa-desktop",
-    label: "desktop",
-  },
-  {
-    value: "fab fa-dev",
-    label: "dev",
-  },
-  {
-    value: "fab fa-deviantart",
-    label: "deviantart",
-  },
-  {
-    value: "fas fa-dharmachakra",
-    label: "dharmachakra",
-  },
-  {
-    value: "fab fa-dhl",
-    label: "dhl",
-  },
-  {
-    value: "fas fa-diagnoses",
-    label: "diagnoses",
-  },
-  {
-    value: "fab fa-diaspora",
-    label: "diaspora",
-  },
-  {
-    value: "fas fa-dice",
-    label: "dice",
-  },
-  {
-    value: "fas fa-dice-d20",
-    label: "dice-d20",
-  },
-  {
-    value: "fas fa-dice-d6",
-    label: "dice-d6",
-  },
-  {
-    value: "fas fa-dice-five",
-    label: "dice-five",
-  },
-  {
-    value: "fas fa-dice-four",
-    label: "dice-four",
-  },
-  {
-    value: "fas fa-dice-one",
-    label: "dice-one",
-  },
-  {
-    value: "",
-    label: "",
-  },
-  {
-    value: "fas fa-dice-six",
-    label: "dice-six",
-  },
-  {
-    value: "fas fa-dice-three",
-    label: "dice-three",
-  },
-  {
-    value: "fas fa-dice-two",
-    label: "dice-two",
-  },
-  {
-    value: "fab fa-digg",
-    label: "digg",
-  },
-  {
-    value: "fab fa-digital-ocean",
-    label: "digital-ocean",
-  },
-  {
-    value: "fas fa-digital-tachograph",
-    label: "digital-tachograph",
-  },
-  {
-    value: "fas fa-directions",
-    label: "directions",
-  },
-  {
-    value: "fab fa-discord",
-    label: "discord",
-  },
-  {
-    value: "fab fa-discourse",
-    label: "discourse",
-  },
-  {
-    value: "fas fa-disease",
-    label: "disease",
-  },
-  {
-    value: "fas fa-divide",
-    label: "divide",
-  },
-  {
-    value: "fas fa-dizzy",
-    label: "dizzy",
-  },
-  {
-    value: "far fa-dizzy",
-    label: "dizzy",
-  },
-  {
-    value: "fas fa-dna",
-    label: "dna",
-  },
-  {
-    value: "fab fa-dochub",
-    label: "dochub",
-  },
-  {
-    value: "fab fa-docker",
-    label: "docker",
-  },
-  {
-    value: "fas fa-dog",
-    label: "dog",
-  },
-  {
-    value: "fas fa-dollar-sign",
-    label: "dollar-sign",
-  },
-  {
-    value: "fas fa-dolly",
-    label: "dolly",
-  },
-  {
-    value: "fas fa-dolly-flatbed",
-    label: "dolly-flatbed",
-  },
-  {
-    value: "fas fa-donate",
-    label: "donate",
-  },
-  {
-    value: "fas fa-door-closed",
-    label: "door-closed",
-  },
-  {
-    value: "fas fa-door-open",
-    label: "door-open",
-  },
-  {
-    value: "fas fa-dot-circle",
-    label: "dot-circle",
-  },
-  {
-    value: "far fa-dot-circle",
-    label: "dot-circle",
-  },
-  {
-    value: "fas fa-dove",
-    label: "dove",
-  },
-  {
-    value: "fas fa-download",
-    label: "download",
-  },
-  {
-    value: "fab fa-draft2digital",
-    label: "draft2digital",
-  },
-  {
-    value: "fas fa-drafting-compass",
-    label: "drafting-compass",
-  },
-  {
-    value: "fas fa-dragon",
-    label: "dragon",
-  },
-  {
-    value: "fas fa-draw-polygon",
-    label: "draw-polygon",
-  },
-  {
-    value: "fab fa-dribbble",
-    label: "dribbble",
-  },
-  {
-    value: "fab fa-dribbble-square",
-    label: "dribbble-square",
-  },
-  {
-    value: "fab fa-dropbox",
-    label: "dropbox",
-  },
-  {
-    value: "fas fa-drum",
-    label: "drum",
-  },
-  {
-    value: "fas fa-drum-steelpan",
-    label: "drum-steelpan",
-  },
-  {
-    value: "fas fa-drumstick-bite",
-    label: "drumstick-bite",
-  },
-  {
-    value: "fab fa-drupal",
-    label: "drupal",
-  },
-  {
-    value: "fas fa-dumbbell",
-    label: "dumbbell",
-  },
-  {
-    value: "fas fa-dumpster",
-    label: "dumpster",
-  },
-  {
-    value: "fas fa-dumpster-fire",
-    label: "dumpster-fire",
-  },
-  {
-    value: "fas fa-dungeon",
-    label: "dungeon",
-  },
-  {
-    value: "fab fa-dyalog",
-    label: "dyalog",
-  },
-  {
-    value: "fab fa-earlybirds",
-    label: "earlybirds",
-  },
-  {
-    value: "fab fa-ebay",
-    label: "ebay",
-  },
-  {
-    value: "fab fa-edge",
-    label: "edge",
-  },
-  {
-    value: "fab fa-edge-legacy",
-    label: "edge-legacy",
-  },
-  {
-    value: "fas fa-edit",
-    label: "edit",
-  },
-  {
-    value: "far fa-edit",
-    label: "edit",
-  },
-  {
-    value: "fas fa-egg",
-    label: "egg",
-  },
-  {
-    value: "fas fa-eject",
-    label: "eject",
-  },
-  {
-    value: "fab fa-elementor",
-    label: "elementor",
-  },
-  {
-    value: "fas fa-ellipsis-h",
-    label: "ellipsis-h",
-  },
-  {
-    value: "fas fa-ellipsis-v",
-    label: "ellipsis-v",
-  },
-  {
-    value: "fab fa-ello",
-    label: "ello",
-  },
-  {
-    value: "fab fa-ember",
-    label: "ember",
-  },
-  {
-    value: "fab fa-empire",
-    label: "empire",
-  },
-  {
-    value: "fas fa-envelope",
-    label: "envelope",
-  },
-  {
-    value: "far fa-envelope",
-    label: "envelope",
-  },
-  {
-    value: "fas fa-envelope-open",
-    label: "envelope-open",
-  },
-  {
-    value: "far fa-envelope-open",
-    label: "envelope-open",
-  },
-  {
-    value: "fas fa-envelope-open-text",
-    label: "envelope-open-text",
-  },
-  {
-    value: "fas fa-envelope-square",
-    label: "envelope-square",
-  },
-  {
-    value: "fab fa-envira",
-    label: "envira",
-  },
-  {
-    value: "fas fa-equals",
-    label: "equals",
-  },
-  {
-    value: "fas fa-eraser",
-    label: "eraser",
-  },
-  {
-    value: "fab fa-erlang",
-    label: "erlang",
-  },
-  {
-    value: "fab fa-ethereum",
-    label: "ethereum",
-  },
-  {
-    value: "fas fa-ethernet",
-    label: "ethernet",
-  },
-  {
-    value: "fab fa-etsy",
-    label: "etsy",
-  },
-  {
-    value: "fas fa-euro-sign",
-    label: "euro-sign",
-  },
-  {
-    value: "fab fa-evernote",
-    label: "evernote",
-  },
-  {
-    value: "fas fa-exchange-alt",
-    label: "exchange-alt",
-  },
-  {
-    value: "fas fa-exclamation",
-    label: "exclamation",
-  },
-  {
-    value: "fas fa-exclamation-circle",
-    label: "exclamation-circle",
-  },
-  {
-    value: "fas fa-exclamation-triangle",
-    label: "exclamation-triangle",
-  },
-  {
-    value: "fas fa-expand",
-    label: "expand",
-  },
-  {
-    value: "fas fa-expand-alt",
-    label: "expand-alt",
-  },
-  {
-    value: "fas fa-expand-arrows-alt",
-    label: "expand-arrows-alt",
-  },
-  {
-    value: "fab fa-expeditedssl",
-    label: "expeditedssl",
-  },
-  {
-    value: "fas fa-external-link-alt",
-    label: "external-link-alt",
-  },
-  {
-    value: "fas fa-external-link-square-alt",
-    label: "external-link-square-alt",
-  },
-  {
-    value: "fas fa-eye",
-    label: "eye",
-  },
-  {
-    value: "far fa-eye",
-    label: "eye",
-  },
-  {
-    value: "fas fa-eye-dropper",
-    label: "eye-dropper",
-  },
-  {
-    value: "fas fa-eye-slash",
-    label: "eye-slash",
-  },
-  {
-    value: "far fa-eye-slash",
-    label: "eye-slash",
-  },
-  {
-    value: "fab fa-facebook",
-    label: "facebook",
-  },
-  {
-    value: "fab fa-facebook-f",
-    label: "facebook-f",
-  },
-  {
-    value: "fab fa-facebook-messenger",
-    label: "facebook-messenger",
-  },
-  {
-    value: "fab fa-facebook-square",
-    label: "facebook-square",
-  },
-  {
-    value: "fas fa-fan",
-    label: "fan",
-  },
-  {
-    value: "fab fa-fantasy-flight-games",
-    label: "fantasy-flight-games",
-  },
-  {
-    value: "fas fa-fast-backward",
-    label: "fast-backward",
-  },
-  {
-    value: "fas fa-fast-forward",
-    label: "fast-forward",
-  },
-  {
-    value: "fas fa-faucet",
-    label: "faucet",
-  },
-  {
-    value: "fas fa-fax",
-    label: "fax",
-  },
-  {
-    value: "fas fa-feather",
-    label: "feather",
-  },
-  {
-    value: "fas fa-feather-alt",
-    label: "feather-alt",
-  },
-  {
-    value: "fab fa-fedex",
-    label: "fedex",
-  },
-  {
-    value: "",
-    label: "",
-  },
-  {
-    value: "fab fa-fedora",
-    label: "fedora",
-  },
-  {
-    value: "fas fa-female",
-    label: "female",
-  },
-  {
-    value: "fas fa-fighter-jet",
-    label: "fighter-jet",
-  },
-  {
-    value: "fab fa-figma",
-    label: "figma",
-  },
-  {
-    value: "fas fa-file",
-    label: "file",
-  },
-  {
-    value: "far fa-file",
-    label: "file",
-  },
-  {
-    value: "fas fa-file-alt",
-    label: "file-alt",
-  },
-  {
-    value: "far fa-file-alt",
-    label: "file-alt",
-  },
-  {
-    value: "fas fa-file-archive",
-    label: "file-archive",
-  },
-  {
-    value: "far fa-file-archive",
-    label: "file-archive",
-  },
-  {
-    value: "fas fa-file-audio",
-    label: "file-audio",
-  },
-  {
-    value: "far fa-file-audio",
-    label: "file-audio",
-  },
-  {
-    value: "fas fa-file-code",
-    label: "file-code",
-  },
-  {
-    value: "far fa-file-code",
-    label: "file-code",
-  },
-  {
-    value: "fas fa-file-contract",
-    label: "file-contract",
-  },
-  {
-    value: "fas fa-file-csv",
-    label: "file-csv",
-  },
-  {
-    value: "fas fa-file-download",
-    label: "file-download",
-  },
-  {
-    value: "fas fa-file-excel",
-    label: "file-excel",
-  },
-  {
-    value: "far fa-file-excel",
-    label: "file-excel",
-  },
-  {
-    value: "fas fa-file-export",
-    label: "file-export",
-  },
-  {
-    value: "fas fa-file-image",
-    label: "file-image",
-  },
-  {
-    value: "far fa-file-image",
-    label: "file-image",
-  },
-  {
-    value: "fas fa-file-import",
-    label: "file-import",
-  },
-  {
-    value: "fas fa-file-invoice",
-    label: "file-invoice",
-  },
-  {
-    value: "fas fa-file-invoice-dollar",
-    label: "file-invoice-dollar",
-  },
-  {
-    value: "fas fa-file-medical",
-    label: "file-medical",
-  },
-  {
-    value: "fas fa-file-medical-alt",
-    label: "file-medical-alt",
-  },
-  {
-    value: "fas fa-file-pdf",
-    label: "file-pdf",
-  },
-  {
-    value: "far fa-file-pdf",
-    label: "file-pdf",
-  },
-  {
-    value: "fas fa-file-powerpoint",
-    label: "file-powerpoint",
-  },
-  {
-    value: "far fa-file-powerpoint",
-    label: "file-powerpoint",
-  },
-  {
-    value: "fas fa-file-prescription",
-    label: "file-prescription",
-  },
-  {
-    value: "fas fa-file-signature",
-    label: "file-signature",
-  },
-  {
-    value: "fas fa-file-upload",
-    label: "file-upload",
-  },
-  {
-    value: "fas fa-file-video",
-    label: "file-video",
-  },
-  {
-    value: "far fa-file-video",
-    label: "file-video",
-  },
-  {
-    value: "fas fa-file-word",
-    label: "file-word",
-  },
-  {
-    value: "far fa-file-word",
-    label: "file-word",
-  },
-  {
-    value: "fas fa-fill",
-    label: "fill",
-  },
-  {
-    value: "fas fa-fill-drip",
-    label: "fill-drip",
-  },
-  {
-    value: "fas fa-film",
-    label: "film",
-  },
-  {
-    value: "fas fa-filter",
-    label: "filter",
-  },
-  {
-    value: "fas fa-fingerprint",
-    label: "fingerprint",
-  },
-  {
-    value: "fas fa-fire",
-    label: "fire",
-  },
-  {
-    value: "fas fa-fire-alt",
-    label: "fire-alt",
-  },
-  {
-    value: "fas fa-fire-extinguisher",
-    label: "fire-extinguisher",
-  },
-  {
-    value: "fab fa-firefox",
-    label: "firefox",
-  },
-  {
-    value: "fab fa-firefox-browser",
-    label: "firefox-browser",
-  },
-  {
-    value: "fas fa-first-aid",
-    label: "first-aid",
-  },
-  {
-    value: "fab fa-first-order",
-    label: "first-order",
-  },
-  {
-    value: "fab fa-first-order-alt",
-    label: "first-order-alt",
-  },
-  {
-    value: "fab fa-firstdraft",
-    label: "firstdraft",
-  },
-  {
-    value: "fas fa-fish",
-    label: "fish",
-  },
-  {
-    value: "fas fa-fist-raised",
-    label: "fist-raised",
-  },
-  {
-    value: "fas fa-flag",
-    label: "flag",
-  },
-  {
-    value: "far fa-flag",
-    label: "flag",
-  },
-  {
-    value: "fas fa-flag-checkered",
-    label: "flag-checkered",
-  },
-  {
-    value: "fas fa-flag-usa",
-    label: "flag-usa",
-  },
-  {
-    value: "fas fa-flask",
-    label: "flask",
-  },
-  {
-    value: "fab fa-flickr",
-    label: "flickr",
-  },
-  {
-    value: "fab fa-flipboard",
-    label: "flipboard",
-  },
-  {
-    value: "fas fa-flushed",
-    label: "flushed",
-  },
-  {
-    value: "far fa-flushed",
-    label: "flushed",
-  },
-  {
-    value: "fab fa-fly",
-    label: "fly",
-  },
-  {
-    value: "fas fa-folder",
-    label: "folder",
-  },
-  {
-    value: "far fa-folder",
-    label: "folder",
-  },
-  {
-    value: "fas fa-folder-minus",
-    label: "folder-minus",
-  },
-  {
-    value: "fas fa-folder-open",
-    label: "folder-open",
-  },
-  {
-    value: "far fa-folder-open",
-    label: "folder-open",
-  },
-  {
-    value: "fas fa-folder-plus",
-    label: "folder-plus",
-  },
-  {
-    value: "fas fa-font",
-    label: "font",
-  },
-  {
-    value: "fab fa-font-awesome",
-    label: "font-awesome",
-  },
-  {
-    value: "fab fa-font-awesome-alt",
-    label: "font-awesome-alt",
-  },
-  {
-    value: "fab fa-font-awesome-flag",
-    label: "font-awesome-flag",
-  },
-  {
-    value: "fab fa-fonticons",
-    label: "fonticons",
-  },
-  {
-    value: "fab fa-fonticons-fi",
-    label: "fonticons-fi",
-  },
-  {
-    value: "fas fa-football-ball",
-    label: "football-ball",
-  },
-  {
-    value: "fab fa-fort-awesome",
-    label: "fort-awesome",
-  },
-  {
-    value: "fab fa-fort-awesome-alt",
-    label: "fort-awesome-alt",
-  },
-  {
-    value: "fab fa-forumbee",
-    label: "forumbee",
-  },
-  {
-    value: "fas fa-forward",
-    label: "forward",
-  },
-  {
-    value: "fab fa-foursquare",
-    label: "foursquare",
-  },
-  {
-    value: "fab fa-free-code-camp",
-    label: "free-code-camp",
-  },
-  {
-    value: "fab fa-freebsd",
-    label: "freebsd",
-  },
-  {
-    value: "fas fa-frog",
-    label: "frog",
-  },
-  {
-    value: "fas fa-frown",
-    label: "frown",
-  },
-  {
-    value: "far fa-frown",
-    label: "frown",
-  },
-  {
-    value: "fas fa-frown-open",
-    label: "frown-open",
-  },
-  {
-    value: "far fa-frown-open",
-    label: "frown-open",
-  },
-  {
-    value: "fab fa-fulcrum",
-    label: "fulcrum",
-  },
-  {
-    value: "fas fa-funnel-dollar",
-    label: "funnel-dollar",
-  },
-  {
-    value: "fas fa-futbol",
-    label: "futbol",
-  },
-  {
-    value: "far fa-futbol",
-    label: "futbol",
-  },
-  {
-    value: "fab fa-galactic-republic",
-    label: "galactic-republic",
-  },
-  {
-    value: "fab fa-galactic-senate",
-    label: "galactic-senate",
-  },
-  {
-    value: "fas fa-gamepad",
-    label: "gamepad",
-  },
-  {
-    value: "fas fa-gas-pump",
-    label: "gas-pump",
-  },
-  {
-    value: "fas fa-gavel",
-    label: "gavel",
-  },
-  {
-    value: "fas fa-gem",
-    label: "gem",
-  },
-  {
-    value: "far fa-gem",
-    label: "gem",
-  },
-  {
-    value: "",
-    label: "",
-  },
-  {
-    value: "fas fa-genderless",
-    label: "genderless",
-  },
-  {
-    value: "fab fa-get-pocket",
-    label: "get-pocket",
-  },
-  {
-    value: "fab fa-gg",
-    label: "gg",
-  },
-  {
-    value: "fab fa-gg-circle",
-    label: "gg-circle",
-  },
-  {
-    value: "fas fa-ghost",
-    label: "ghost",
-  },
-  {
-    value: "fas fa-gift",
-    label: "gift",
-  },
-  {
-    value: "fas fa-gifts",
-    label: "gifts",
-  },
-  {
-    value: "fab fa-git",
-    label: "git",
-  },
-  {
-    value: "fab fa-git-alt",
-    label: "git-alt",
-  },
-  {
-    value: "fab fa-git-square",
-    label: "git-square",
-  },
-  {
-    value: "fab fa-github",
-    label: "github",
-  },
-  {
-    value: "fab fa-github-alt",
-    label: "github-alt",
-  },
-  {
-    value: "fab fa-github-square",
-    label: "github-square",
-  },
-  {
-    value: "fab fa-gitkraken",
-    label: "gitkraken",
-  },
-  {
-    value: "fab fa-gitlab",
-    label: "gitlab",
-  },
-  {
-    value: "fab fa-gitter",
-    label: "gitter",
-  },
-  {
-    value: "fas fa-glass-cheers",
-    label: "glass-cheers",
-  },
-  {
-    value: "fas fa-glass-martini",
-    label: "glass-martini",
-  },
-  {
-    value: "fas fa-glass-martini-alt",
-    label: "glass-martini-alt",
-  },
-  {
-    value: "fas fa-glass-whiskey",
-    label: "glass-whiskey",
-  },
-  {
-    value: "fas fa-glasses",
-    label: "glasses",
-  },
-  {
-    value: "fab fa-glide",
-    label: "glide",
-  },
-  {
-    value: "fab fa-glide-g",
-    label: "glide-g",
-  },
-  {
-    value: "fas fa-globe",
-    label: "globe",
-  },
-  {
-    value: "fas fa-globe-africa",
-    label: "globe-africa",
-  },
-  {
-    value: "fas fa-globe-americas",
-    label: "globe-americas",
-  },
-  {
-    value: "fas fa-globe-asia",
-    label: "globe-asia",
-  },
-  {
-    value: "fas fa-globe-europe",
-    label: "globe-europe",
-  },
-  {
-    value: "fab fa-gofore",
-    label: "gofore",
-  },
-  {
-    value: "fas fa-golf-ball",
-    label: "golf-ball",
-  },
-  {
-    value: "fab fa-goodreads",
-    label: "goodreads",
-  },
-  {
-    value: "fab fa-goodreads-g",
-    label: "goodreads-g",
-  },
-  {
-    value: "fab fa-google",
-    label: "google",
-  },
-  {
-    value: "fab fa-google-drive",
-    label: "google-drive",
-  },
-  {
-    value: "fab fa-google-pay",
-    label: "google-pay",
-  },
-  {
-    value: "fab fa-google-play",
-    label: "google-play",
-  },
-  {
-    value: "fab fa-google-plus",
-    label: "google-plus",
-  },
-  {
-    value: "fab fa-google-plus-g",
-    label: "google-plus-g",
-  },
-  {
-    value: "fab fa-google-plus-square",
-    label: "google-plus-square",
-  },
-  {
-    value: "fab fa-google-wallet",
-    label: "google-wallet",
-  },
-  {
-    value: "fas fa-gopuram",
-    label: "gopuram",
-  },
-  {
-    value: "fas fa-graduation-cap",
-    label: "graduation-cap",
-  },
-  {
-    value: "fab fa-gratipay",
-    label: "gratipay",
-  },
-  {
-    value: "fab fa-grav",
-    label: "grav",
-  },
-  {
-    value: "fas fa-greater-than",
-    label: "greater-than",
-  },
-  {
-    value: "fas fa-greater-than-equal",
-    label: "greater-than-equal",
-  },
-  {
-    value: "fas fa-grimace",
-    label: "grimace",
-  },
-  {
-    value: "far fa-grimace",
-    label: "grimace",
-  },
-  {
-    value: "fas fa-grin",
-    label: "grin",
-  },
-  {
-    value: "far fa-grin",
-    label: "grin",
-  },
-  {
-    value: "fas fa-grin-alt",
-    label: "grin-alt",
-  },
-  {
-    value: "far fa-grin-alt",
-    label: "grin-alt",
-  },
-  {
-    value: "fas fa-grin-beam",
-    label: "grin-beam",
-  },
-  {
-    value: "far fa-grin-beam",
-    label: "grin-beam",
-  },
-  {
-    value: "fas fa-grin-beam-sweat",
-    label: "grin-beam-sweat",
-  },
-  {
-    value: "far fa-grin-beam-sweat",
-    label: "grin-beam-sweat",
-  },
-  {
-    value: "fas fa-grin-hearts",
-    label: "grin-hearts",
-  },
-  {
-    value: "far fa-grin-hearts",
-    label: "grin-hearts",
-  },
-  {
-    value: "fas fa-grin-squint",
-    label: "grin-squint",
-  },
-  {
-    value: "far fa-grin-squint",
-    label: "grin-squint",
-  },
-  {
-    value: "fas fa-grin-squint-tears",
-    label: "grin-squint-tears",
-  },
-  {
-    value: "far fa-grin-squint-tears",
-    label: "grin-squint-tears",
-  },
-  {
-    value: "fas fa-grin-stars",
-    label: "grin-stars",
-  },
-  {
-    value: "far fa-grin-stars",
-    label: "grin-stars",
-  },
-  {
-    value: "fas fa-grin-tears",
-    label: "grin-tears",
-  },
-  {
-    value: "far fa-grin-tears",
-    label: "grin-tears",
-  },
-  {
-    value: "fas fa-grin-tongue",
-    label: "grin-tongue",
-  },
-  {
-    value: "far fa-grin-tongue",
-    label: "grin-tongue",
-  },
-  {
-    value: "fas fa-grin-tongue-squint",
-    label: "grin-tongue-squint",
-  },
-  {
-    value: "far fa-grin-tongue-squint",
-    label: "grin-tongue-squint",
-  },
-  {
-    value: "fas fa-grin-tongue-wink",
-    label: "grin-tongue-wink",
-  },
-  {
-    value: "far fa-grin-tongue-wink",
-    label: "grin-tongue-wink",
-  },
-  {
-    value: "fas fa-grin-wink",
-    label: "grin-wink",
-  },
-  {
-    value: "far fa-grin-wink",
-    label: "grin-wink",
-  },
-  {
-    value: "fas fa-grip-horizontal",
-    label: "grip-horizontal",
-  },
-  {
-    value: "fas fa-grip-lines",
-    label: "grip-lines",
-  },
-  {
-    value: "fas fa-grip-lines-vertical",
-    label: "grip-lines-vertical",
-  },
-  {
-    value: "fas fa-grip-vertical",
-    label: "grip-vertical",
-  },
-  {
-    value: "fab fa-gripfire",
-    label: "gripfire",
-  },
-  {
-    value: "fab fa-grunt",
-    label: "grunt",
-  },
-  {
-    value: "fas fa-guitar",
-    label: "guitar",
-  },
-  {
-    value: "fab fa-gulp",
-    label: "gulp",
-  },
-  {
-    value: "fas fa-h-square",
-    label: "h-square",
-  },
-  {
-    value: "fab fa-hacker-news",
-    label: "hacker-news",
-  },
-  {
-    value: "fab fa-hacker-news-square",
-    label: "hacker-news-square",
-  },
-  {
-    value: "fab fa-hackerrank",
-    label: "hackerrank",
-  },
-  {
-    value: "fas fa-hamburger",
-    label: "hamburger",
-  },
-  {
-    value: "fas fa-hammer",
-    label: "hammer",
-  },
-  {
-    value: "fas fa-hamsa",
-    label: "hamsa",
-  },
-  {
-    value: "fas fa-hand-holding",
-    label: "hand-holding",
-  },
-  {
-    value: "fas fa-hand-holding-heart",
-    label: "hand-holding-heart",
-  },
-  {
-    value: "fas fa-hand-holding-medical",
-    label: "hand-holding-medical",
-  },
-  {
-    value: "fas fa-hand-holding-usd",
-    label: "hand-holding-usd",
-  },
-  {
-    value: "fas fa-hand-holding-water",
-    label: "hand-holding-water",
-  },
-  {
-    value: "fas fa-hand-lizard",
-    label: "hand-lizard",
-  },
-  {
-    value: "far fa-hand-lizard",
-    label: "hand-lizard",
-  },
-  {
-    value: "fas fa-hand-middle-finger",
-    label: "hand-middle-finger",
-  },
-  {
-    value: "fas fa-hand-paper",
-    label: "hand-paper",
-  },
-  {
-    value: "far fa-hand-paper",
-    label: "hand-paper",
-  },
-  {
-    value: "fas fa-hand-peace",
-    label: "hand-peace",
-  },
-  {
-    value: "",
-    label: "",
-  },
-  {
-    value: "far fa-hand-peace",
-    label: "hand-peace",
-  },
-  {
-    value: "fas fa-hand-point-down",
-    label: "hand-point-down",
-  },
-  {
-    value: "far fa-hand-point-down",
-    label: "hand-point-down",
-  },
-  {
-    value: "fas fa-hand-point-left",
-    label: "hand-point-left",
-  },
-  {
-    value: "far fa-hand-point-left",
-    label: "hand-point-left",
-  },
-  {
-    value: "fas fa-hand-point-right",
-    label: "hand-point-right",
-  },
-  {
-    value: "far fa-hand-point-right",
-    label: "hand-point-right",
-  },
-  {
-    value: "fas fa-hand-point-up",
-    label: "hand-point-up",
-  },
-  {
-    value: "far fa-hand-point-up",
-    label: "hand-point-up",
-  },
-  {
-    value: "fas fa-hand-pointer",
-    label: "hand-pointer",
-  },
-  {
-    value: "far fa-hand-pointer",
-    label: "hand-pointer",
-  },
-  {
-    value: "fas fa-hand-rock",
-    label: "hand-rock",
-  },
-  {
-    value: "far fa-hand-rock",
-    label: "hand-rock",
-  },
-  {
-    value: "fas fa-hand-scissors",
-    label: "hand-scissors",
-  },
-  {
-    value: "far fa-hand-scissors",
-    label: "hand-scissors",
-  },
-  {
-    value: "fas fa-hand-sparkles",
-    label: "hand-sparkles",
-  },
-  {
-    value: "fas fa-hand-spock",
-    label: "hand-spock",
-  },
-  {
-    value: "far fa-hand-spock",
-    label: "hand-spock",
-  },
-  {
-    value: "fas fa-hands",
-    label: "hands",
-  },
-  {
-    value: "fas fa-hands-helping",
-    label: "hands-helping",
-  },
-  {
-    value: "fas fa-hands-wash",
-    label: "hands-wash",
-  },
-  {
-    value: "fas fa-handshake",
-    label: "handshake",
-  },
-  {
-    value: "far fa-handshake",
-    label: "handshake",
-  },
-  {
-    value: "fas fa-handshake-alt-slash",
-    label: "handshake-alt-slash",
-  },
-  {
-    value: "fas fa-handshake-slash",
-    label: "handshake-slash",
-  },
-  {
-    value: "fas fa-hanukiah",
-    label: "hanukiah",
-  },
-  {
-    value: "fas fa-hard-hat",
-    label: "hard-hat",
-  },
-  {
-    value: "fas fa-hashtag",
-    label: "hashtag",
-  },
-  {
-    value: "fas fa-hat-cowboy",
-    label: "hat-cowboy",
-  },
-  {
-    value: "fas fa-hat-cowboy-side",
-    label: "hat-cowboy-side",
-  },
-  {
-    value: "fas fa-hat-wizard",
-    label: "hat-wizard",
-  },
-  {
-    value: "fas fa-hdd",
-    label: "hdd",
-  },
-  {
-    value: "far fa-hdd",
-    label: "hdd",
-  },
-  {
-    value: "fas fa-head-side-cough",
-    label: "head-side-cough",
-  },
-  {
-    value: "fas fa-head-side-cough-slash",
-    label: "head-side-cough-slash",
-  },
-  {
-    value: "fas fa-head-side-mask",
-    label: "head-side-mask",
-  },
-  {
-    value: "fas fa-head-side-virus",
-    label: "head-side-virus",
-  },
-  {
-    value: "fas fa-heading",
-    label: "heading",
-  },
-  {
-    value: "fas fa-headphones",
-    label: "headphones",
-  },
-  {
-    value: "fas fa-headphones-alt",
-    label: "headphones-alt",
-  },
-  {
-    value: "fas fa-headset",
-    label: "headset",
-  },
-  {
-    value: "fas fa-heart",
-    label: "heart",
-  },
-  {
-    value: "far fa-heart",
-    label: "heart",
-  },
-  {
-    value: "fas fa-heart-broken",
-    label: "heart-broken",
-  },
-  {
-    value: "fas fa-heartbeat",
-    label: "heartbeat",
-  },
-  {
-    value: "fas fa-helicopter",
-    label: "helicopter",
-  },
-  {
-    value: "fas fa-highlighter",
-    label: "highlighter",
-  },
-  {
-    value: "fas fa-hiking",
-    label: "hiking",
-  },
-  {
-    value: "fas fa-hippo",
-    label: "hippo",
-  },
-  {
-    value: "fab fa-hips",
-    label: "hips",
-  },
-  {
-    value: "fab fa-hire-a-helper",
-    label: "hire-a-helper",
-  },
-  {
-    value: "fas fa-history",
-    label: "history",
-  },
-  {
-    value: "fas fa-hockey-puck",
-    label: "hockey-puck",
-  },
-  {
-    value: "fas fa-holly-berry",
-    label: "holly-berry",
-  },
-  {
-    value: "fas fa-home",
-    label: "home",
-  },
-  {
-    value: "fab fa-hooli",
-    label: "hooli",
-  },
-  {
-    value: "fab fa-hornbill",
-    label: "hornbill",
-  },
-  {
-    value: "fas fa-horse",
-    label: "horse",
-  },
-  {
-    value: "fas fa-horse-head",
-    label: "horse-head",
-  },
-  {
-    value: "fas fa-hospital",
-    label: "hospital",
-  },
-  {
-    value: "far fa-hospital",
-    label: "hospital",
-  },
-  {
-    value: "fas fa-hospital-alt",
-    label: "hospital-alt",
-  },
-  {
-    value: "fas fa-hospital-symbol",
-    label: "hospital-symbol",
-  },
-  {
-    value: "fas fa-hospital-user",
-    label: "hospital-user",
-  },
-  {
-    value: "fas fa-hot-tub",
-    label: "hot-tub",
-  },
-  {
-    value: "fas fa-hotdog",
-    label: "hotdog",
-  },
-  {
-    value: "fas fa-hotel",
-    label: "hotel",
-  },
-  {
-    value: "fab fa-hotjar",
-    label: "hotjar",
-  },
-  {
-    value: "fas fa-hourglass",
-    label: "hourglass",
-  },
-  {
-    value: "far fa-hourglass",
-    label: "hourglass",
-  },
-  {
-    value: "fas fa-hourglass-end",
-    label: "hourglass-end",
-  },
-  {
-    value: "fas fa-hourglass-half",
-    label: "hourglass-half",
-  },
-  {
-    value: "fas fa-hourglass-start",
-    label: "hourglass-start",
-  },
-  {
-    value: "fas fa-house-damage",
-    label: "house-damage",
-  },
-  {
-    value: "fas fa-house-user",
-    label: "house-user",
-  },
-  {
-    value: "fab fa-houzz",
-    label: "houzz",
-  },
-  {
-    value: "fas fa-hryvnia",
-    label: "hryvnia",
-  },
-  {
-    value: "fab fa-html5",
-    label: "html5",
-  },
-  {
-    value: "fab fa-hubspot",
-    label: "hubspot",
-  },
-  {
-    value: "fas fa-i-cursor",
-    label: "i-cursor",
-  },
-  {
-    value: "fas fa-ice-cream",
-    label: "ice-cream",
-  },
-  {
-    value: "fas fa-icicles",
-    label: "icicles",
-  },
-  {
-    value: "fas fa-icons",
-    label: "icons",
-  },
-  {
-    value: "fas fa-id-badge",
-    label: "id-badge",
-  },
-  {
-    value: "far fa-id-badge",
-    label: "id-badge",
-  },
-  {
-    value: "fas fa-id-card",
-    label: "id-card",
-  },
-  {
-    value: "far fa-id-card",
-    label: "id-card",
-  },
-  {
-    value: "fas fa-id-card-alt",
-    label: "id-card-alt",
-  },
-  {
-    value: "fab fa-ideal",
-    label: "ideal",
-  },
-  {
-    value: "fas fa-igloo",
-    label: "igloo",
-  },
-  {
-    value: "fas fa-image",
-    label: "image",
-  },
-  {
-    value: "far fa-image",
-    label: "image",
-  },
-  {
-    value: "fas fa-images",
-    label: "images",
-  },
-  {
-    value: "far fa-images",
-    label: "images",
-  },
-  {
-    value: "fab fa-imdb",
-    label: "imdb",
-  },
-  {
-    value: "fas fa-inbox",
-    label: "inbox",
-  },
-  {
-    value: "fas fa-indent",
-    label: "indent",
-  },
-  {
-    value: "fas fa-industry",
-    label: "industry",
-  },
-  {
-    value: "fas fa-infinity",
-    label: "infinity",
-  },
-  {
-    value: "fas fa-info",
-    label: "info",
-  },
-  {
-    value: "",
-    label: "",
-  },
-  {
-    value: "fas fa-info-circle",
-    label: "info-circle",
-  },
-  {
-    value: "fab fa-instagram",
-    label: "instagram",
-  },
-  {
-    value: "fab fa-instagram-square",
-    label: "instagram-square",
-  },
-  {
-    value: "fab fa-intercom",
-    label: "intercom",
-  },
-  {
-    value: "fab fa-internet-explorer",
-    label: "internet-explorer",
-  },
-  {
-    value: "fab fa-invision",
-    label: "invision",
-  },
-  {
-    value: "fab fa-ioxhost",
-    label: "ioxhost",
-  },
-  {
-    value: "fas fa-italic",
-    label: "italic",
-  },
-  {
-    value: "fab fa-itch-io",
-    label: "itch-io",
-  },
-  {
-    value: "fab fa-itunes",
-    label: "itunes",
-  },
-  {
-    value: "fab fa-itunes-note",
-    label: "itunes-note",
-  },
-  {
-    value: "fab fa-java",
-    label: "java",
-  },
-  {
-    value: "fas fa-jedi",
-    label: "jedi",
-  },
-  {
-    value: "fab fa-jedi-order",
-    label: "jedi-order",
-  },
-  {
-    value: "fab fa-jenkins",
-    label: "jenkins",
-  },
-  {
-    value: "fab fa-jira",
-    label: "jira",
-  },
-  {
-    value: "fab fa-joget",
-    label: "joget",
-  },
-  {
-    value: "fas fa-joint",
-    label: "joint",
-  },
-  {
-    value: "fab fa-joomla",
-    label: "joomla",
-  },
-  {
-    value: "fas fa-journal-whills",
-    label: "journal-whills",
-  },
-  {
-    value: "fab fa-js",
-    label: "js",
-  },
-  {
-    value: "fab fa-js-square",
-    label: "js-square",
-  },
-  {
-    value: "fab fa-jsfiddle",
-    label: "jsfiddle",
-  },
-  {
-    value: "fas fa-kaaba",
-    label: "kaaba",
-  },
-  {
-    value: "fab fa-kaggle",
-    label: "kaggle",
-  },
-  {
-    value: "fas fa-key",
-    label: "key",
-  },
-  {
-    value: "fab fa-keybase",
-    label: "keybase",
-  },
-  {
-    value: "fas fa-keyboard",
-    label: "keyboard",
-  },
-  {
-    value: "far fa-keyboard",
-    label: "keyboard",
-  },
-  {
-    value: "fab fa-keycdn",
-    label: "keycdn",
-  },
-  {
-    value: "fas fa-khanda",
-    label: "khanda",
-  },
-  {
-    value: "fab fa-kickstarter",
-    label: "kickstarter",
-  },
-  {
-    value: "fab fa-kickstarter-k",
-    label: "kickstarter-k",
-  },
-  {
-    value: "fas fa-kiss",
-    label: "kiss",
-  },
-  {
-    value: "far fa-kiss",
-    label: "kiss",
-  },
-  {
-    value: "fas fa-kiss-beam",
-    label: "kiss-beam",
-  },
-  {
-    value: "far fa-kiss-beam",
-    label: "kiss-beam",
-  },
-  {
-    value: "fas fa-kiss-wink-heart",
-    label: "kiss-wink-heart",
-  },
-  {
-    value: "far fa-kiss-wink-heart",
-    label: "kiss-wink-heart",
-  },
-  {
-    value: "fas fa-kiwi-bird",
-    label: "kiwi-bird",
-  },
-  {
-    value: "fab fa-korvue",
-    label: "korvue",
-  },
-  {
-    value: "fas fa-landmark",
-    label: "landmark",
-  },
-  {
-    value: "fas fa-language",
-    label: "language",
-  },
-  {
-    value: "fas fa-laptop",
-    label: "laptop",
-  },
-  {
-    value: "fas fa-laptop-code",
-    label: "laptop-code",
-  },
-  {
-    value: "fas fa-laptop-house",
-    label: "laptop-house",
-  },
-  {
-    value: "fas fa-laptop-medical",
-    label: "laptop-medical",
-  },
-  {
-    value: "fab fa-laravel",
-    label: "laravel",
-  },
-  {
-    value: "fab fa-lastfm",
-    label: "lastfm",
-  },
-  {
-    value: "fab fa-lastfm-square",
-    label: "lastfm-square",
-  },
-  {
-    value: "fas fa-laugh",
-    label: "laugh",
-  },
-  {
-    value: "far fa-laugh",
-    label: "laugh",
-  },
-  {
-    value: "fas fa-laugh-beam",
-    label: "laugh-beam",
-  },
-  {
-    value: "far fa-laugh-beam",
-    label: "laugh-beam",
-  },
-  {
-    value: "fas fa-laugh-squint",
-    label: "laugh-squint",
-  },
-  {
-    value: "far fa-laugh-squint",
-    label: "laugh-squint",
-  },
-  {
-    value: "fas fa-laugh-wink",
-    label: "laugh-wink",
-  },
-  {
-    value: "far fa-laugh-wink",
-    label: "laugh-wink",
-  },
-  {
-    value: "fas fa-layer-group",
-    label: "layer-group",
-  },
-  {
-    value: "fas fa-leaf",
-    label: "leaf",
-  },
-  {
-    value: "fab fa-leanpub",
-    label: "leanpub",
-  },
-  {
-    value: "fas fa-lemon",
-    label: "lemon",
-  },
-  {
-    value: "far fa-lemon",
-    label: "lemon",
-  },
-  {
-    value: "fab fa-less",
-    label: "less",
-  },
-  {
-    value: "fas fa-less-than",
-    label: "less-than",
-  },
-  {
-    value: "fas fa-less-than-equal",
-    label: "less-than-equal",
-  },
-  {
-    value: "fas fa-level-down-alt",
-    label: "level-down-alt",
-  },
-  {
-    value: "fas fa-level-up-alt",
-    label: "level-up-alt",
-  },
-  {
-    value: "fas fa-life-ring",
-    label: "life-ring",
-  },
-  {
-    value: "far fa-life-ring",
-    label: "life-ring",
-  },
-  {
-    value: "fas fa-lightbulb",
-    label: "lightbulb",
-  },
-  {
-    value: "far fa-lightbulb",
-    label: "lightbulb",
-  },
-  {
-    value: "fab fa-line",
-    label: "line",
-  },
-  {
-    value: "fas fa-link",
-    label: "link",
-  },
-  {
-    value: "fab fa-linkedin",
-    label: "linkedin",
-  },
-  {
-    value: "fab fa-linkedin-in",
-    label: "linkedin-in",
-  },
-  {
-    value: "fab fa-linode",
-    label: "linode",
-  },
-  {
-    value: "fab fa-linux",
-    label: "linux",
-  },
-  {
-    value: "fas fa-lira-sign",
-    label: "lira-sign",
-  },
-  {
-    value: "fas fa-list",
-    label: "list",
-  },
-  {
-    value: "fas fa-list-alt",
-    label: "list-alt",
-  },
-  {
-    value: "far fa-list-alt",
-    label: "list-alt",
-  },
-  {
-    value: "fas fa-list-ol",
-    label: "list-ol",
-  },
-  {
-    value: "fas fa-list-ul",
-    label: "list-ul",
-  },
-  {
-    value: "fas fa-location-arrow",
-    label: "location-arrow",
-  },
-  {
-    value: "fas fa-lock",
-    label: "lock",
-  },
-  {
-    value: "fas fa-lock-open",
-    label: "lock-open",
-  },
-  {
-    value: "fas fa-long-arrow-alt-down",
-    label: "long-arrow-alt-down",
-  },
-  {
-    value: "fas fa-long-arrow-alt-left",
-    label: "long-arrow-alt-left",
-  },
-  {
-    value: "fas fa-long-arrow-alt-right",
-    label: "long-arrow-alt-right",
-  },
-  {
-    value: "fas fa-long-arrow-alt-up",
-    label: "long-arrow-alt-up",
-  },
-  {
-    value: "fas fa-low-vision",
-    label: "low-vision",
-  },
-  {
-    value: "fas fa-luggage-cart",
-    label: "luggage-cart",
-  },
-  {
-    value: "fas fa-lungs",
-    label: "lungs",
-  },
-  {
-    value: "fas fa-lungs-virus",
-    label: "lungs-virus",
-  },
-  {
-    value: "fab fa-lyft",
-    label: "lyft",
-  },
-  {
-    value: "fab fa-magento",
-    label: "magento",
-  },
-  {
-    value: "fas fa-magic",
-    label: "magic",
-  },
-  {
-    value: "fas fa-magnet",
-    label: "magnet",
-  },
-  {
-    value: "fas fa-mail-bulk",
-    label: "mail-bulk",
-  },
-  {
-    value: "",
-    label: "",
-  },
-  {
-    value: "fab fa-mailchimp",
-    label: "mailchimp",
-  },
-  {
-    value: "fas fa-male",
-    label: "male",
-  },
-  {
-    value: "fab fa-mandalorian",
-    label: "mandalorian",
-  },
-  {
-    value: "fas fa-map",
-    label: "map",
-  },
-  {
-    value: "far fa-map",
-    label: "map",
-  },
-  {
-    value: "fas fa-map-marked",
-    label: "map-marked",
-  },
-  {
-    value: "fas fa-map-marked-alt",
-    label: "map-marked-alt",
-  },
-  {
-    value: "fas fa-map-marker",
-    label: "map-marker",
-  },
-  {
-    value: "fas fa-map-marker-alt",
-    label: "map-marker-alt",
-  },
-  {
-    value: "fas fa-map-pin",
-    label: "map-pin",
-  },
-  {
-    value: "fas fa-map-signs",
-    label: "map-signs",
-  },
-  {
-    value: "fab fa-markdown",
-    label: "markdown",
-  },
-  {
-    value: "fas fa-marker",
-    label: "marker",
-  },
-  {
-    value: "fas fa-mars",
-    label: "mars",
-  },
-  {
-    value: "fas fa-mars-double",
-    label: "mars-double",
-  },
-  {
-    value: "fas fa-mars-stroke",
-    label: "mars-stroke",
-  },
-  {
-    value: "fas fa-mars-stroke-h",
-    label: "mars-stroke-h",
-  },
-  {
-    value: "fas fa-mars-stroke-v",
-    label: "mars-stroke-v",
-  },
-  {
-    value: "fas fa-mask",
-    label: "mask",
-  },
-  {
-    value: "fab fa-mastodon",
-    label: "mastodon",
-  },
-  {
-    value: "fab fa-maxcdn",
-    label: "maxcdn",
-  },
-  {
-    value: "fab fa-mdb",
-    label: "mdb",
-  },
-  {
-    value: "fas fa-medal",
-    label: "medal",
-  },
-  {
-    value: "fab fa-medapps",
-    label: "medapps",
-  },
-  {
-    value: "fab fa-medium",
-    label: "medium",
-  },
-  {
-    value: "fab fa-medium-m",
-    label: "medium-m",
-  },
-  {
-    value: "fas fa-medkit",
-    label: "medkit",
-  },
-  {
-    value: "fab fa-medrt",
-    label: "medrt",
-  },
-  {
-    value: "fab fa-meetup",
-    label: "meetup",
-  },
-  {
-    value: "fab fa-megaport",
-    label: "megaport",
-  },
-  {
-    value: "fas fa-meh",
-    label: "meh",
-  },
-  {
-    value: "far fa-meh",
-    label: "meh",
-  },
-  {
-    value: "fas fa-meh-blank",
-    label: "meh-blank",
-  },
-  {
-    value: "far fa-meh-blank",
-    label: "meh-blank",
-  },
-  {
-    value: "fas fa-meh-rolling-eyes",
-    label: "meh-rolling-eyes",
-  },
-  {
-    value: "far fa-meh-rolling-eyes",
-    label: "meh-rolling-eyes",
-  },
-  {
-    value: "fas fa-memory",
-    label: "memory",
-  },
-  {
-    value: "fab fa-mendeley",
-    label: "mendeley",
-  },
-  {
-    value: "fas fa-menorah",
-    label: "menorah",
-  },
-  {
-    value: "fas fa-mercury",
-    label: "mercury",
-  },
-  {
-    value: "fas fa-meteor",
-    label: "meteor",
-  },
-  {
-    value: "fab fa-microblog",
-    label: "microblog",
-  },
-  {
-    value: "fas fa-microchip",
-    label: "microchip",
-  },
-  {
-    value: "fas fa-microphone",
-    label: "microphone",
-  },
-  {
-    value: "fas fa-microphone-alt",
-    label: "microphone-alt",
-  },
-  {
-    value: "fas fa-microphone-alt-slash",
-    label: "microphone-alt-slash",
-  },
-  {
-    value: "fas fa-microphone-slash",
-    label: "microphone-slash",
-  },
-  {
-    value: "fas fa-microscope",
-    label: "microscope",
-  },
-  {
-    value: "fab fa-microsoft",
-    label: "microsoft",
-  },
-  {
-    value: "fas fa-minus",
-    label: "minus",
-  },
-  {
-    value: "fas fa-minus-circle",
-    label: "minus-circle",
-  },
-  {
-    value: "fas fa-minus-square",
-    label: "minus-square",
-  },
-  {
-    value: "far fa-minus-square",
-    label: "minus-square",
-  },
-  {
-    value: "fas fa-mitten",
-    label: "mitten",
-  },
-  {
-    value: "fab fa-mix",
-    label: "mix",
-  },
-  {
-    value: "fab fa-mixcloud",
-    label: "mixcloud",
-  },
-  {
-    value: "fab fa-mixer",
-    label: "mixer",
-  },
-  {
-    value: "fab fa-mizuni",
-    label: "mizuni",
-  },
-  {
-    value: "fas fa-mobile",
-    label: "mobile",
-  },
-  {
-    value: "fas fa-mobile-alt",
-    label: "mobile-alt",
-  },
-  {
-    value: "fab fa-modx",
-    label: "modx",
-  },
-  {
-    value: "fab fa-monero",
-    label: "monero",
-  },
-  {
-    value: "fas fa-money-bill",
-    label: "money-bill",
-  },
-  {
-    value: "fas fa-money-bill-alt",
-    label: "money-bill-alt",
-  },
-  {
-    value: "far fa-money-bill-alt",
-    label: "money-bill-alt",
-  },
-  {
-    value: "fas fa-money-bill-wave",
-    label: "money-bill-wave",
-  },
-  {
-    value: "fas fa-money-bill-wave-alt",
-    label: "money-bill-wave-alt",
-  },
-  {
-    value: "fas fa-money-check",
-    label: "money-check",
-  },
-  {
-    value: "fas fa-money-check-alt",
-    label: "money-check-alt",
-  },
-  {
-    value: "fas fa-monument",
-    label: "monument",
-  },
-  {
-    value: "fas fa-moon",
-    label: "moon",
-  },
-  {
-    value: "far fa-moon",
-    label: "moon",
-  },
-  {
-    value: "fas fa-mortar-pestle",
-    label: "mortar-pestle",
-  },
-  {
-    value: "fas fa-mosque",
-    label: "mosque",
-  },
-  {
-    value: "fas fa-motorcycle",
-    label: "motorcycle",
-  },
-  {
-    value: "fas fa-mountain",
-    label: "mountain",
-  },
-  {
-    value: "fas fa-mouse",
-    label: "mouse",
-  },
-  {
-    value: "fas fa-mouse-pointer",
-    label: "mouse-pointer",
-  },
-  {
-    value: "fas fa-mug-hot",
-    label: "mug-hot",
-  },
-  {
-    value: "fas fa-music",
-    label: "music",
-  },
-  {
-    value: "fab fa-napster",
-    label: "napster",
-  },
-  {
-    value: "fab fa-neos",
-    label: "neos",
-  },
-  {
-    value: "fas fa-network-wired",
-    label: "network-wired",
-  },
-  {
-    value: "fas fa-neuter",
-    label: "neuter",
-  },
-  {
-    value: "fas fa-newspaper",
-    label: "newspaper",
-  },
-  {
-    value: "far fa-newspaper",
-    label: "newspaper",
-  },
-  {
-    value: "fab fa-nimblr",
-    label: "nimblr",
-  },
-  {
-    value: "fab fa-node",
-    label: "node",
-  },
-  {
-    value: "fab fa-node-js",
-    label: "node-js",
-  },
-  {
-    value: "fas fa-not-equal",
-    label: "not-equal",
-  },
-  {
-    value: "fas fa-notes-medical",
-    label: "notes-medical",
-  },
-  {
-    value: "fab fa-npm",
-    label: "npm",
-  },
-  {
-    value: "fab fa-ns8",
-    label: "ns8",
-  },
-  {
-    value: "fab fa-nutritionix",
-    label: "nutritionix",
-  },
-  {
-    value: "fas fa-object-group",
-    label: "object-group",
-  },
-  {
-    value: "far fa-object-group",
-    label: "object-group",
-  },
-  {
-    value: "fas fa-object-ungroup",
-    label: "object-ungroup",
-  },
-  {
-    value: "far fa-object-ungroup",
-    label: "object-ungroup",
-  },
-  {
-    value: "fab fa-odnoklassniki",
-    label: "odnoklassniki",
-  },
-  {
-    value: "fab fa-odnoklassniki-square",
-    label: "odnoklassniki-square",
-  },
-  {
-    value: "",
-    label: "",
-  },
-  {
-    value: "fas fa-oil-can",
-    label: "oil-can",
-  },
-  {
-    value: "fab fa-old-republic",
-    label: "old-republic",
-  },
-  {
-    value: "fas fa-om",
-    label: "om",
-  },
-  {
-    value: "fab fa-opencart",
-    label: "opencart",
-  },
-  {
-    value: "fab fa-openid",
-    label: "openid",
-  },
-  {
-    value: "fab fa-opera",
-    label: "opera",
-  },
-  {
-    value: "fab fa-optin-monster",
-    label: "optin-monster",
-  },
-  {
-    value: "fab fa-orcid",
-    label: "orcid",
-  },
-  {
-    value: "fab fa-osi",
-    label: "osi",
-  },
-  {
-    value: "fas fa-otter",
-    label: "otter",
-  },
-  {
-    value: "fas fa-outdent",
-    label: "outdent",
-  },
-  {
-    value: "fab fa-page4",
-    label: "page4",
-  },
-  {
-    value: "fab fa-pagelines",
-    label: "pagelines",
-  },
-  {
-    value: "fas fa-pager",
-    label: "pager",
-  },
-  {
-    value: "fas fa-paint-brush",
-    label: "paint-brush",
-  },
-  {
-    value: "fas fa-paint-roller",
-    label: "paint-roller",
-  },
-  {
-    value: "fas fa-palette",
-    label: "palette",
-  },
-  {
-    value: "fab fa-palfed",
-    label: "palfed",
-  },
-  {
-    value: "fas fa-pallet",
-    label: "pallet",
-  },
-  {
-    value: "fas fa-paper-plane",
-    label: "paper-plane",
-  },
-  {
-    value: "far fa-paper-plane",
-    label: "paper-plane",
-  },
-  {
-    value: "fas fa-paperclip",
-    label: "paperclip",
-  },
-  {
-    value: "fas fa-parachute-box",
-    label: "parachute-box",
-  },
-  {
-    value: "fas fa-paragraph",
-    label: "paragraph",
-  },
-  {
-    value: "fas fa-parking",
-    label: "parking",
-  },
-  {
-    value: "fas fa-passport",
-    label: "passport",
-  },
-  {
-    value: "fas fa-pastafarianism",
-    label: "pastafarianism",
-  },
-  {
-    value: "fas fa-paste",
-    label: "paste",
-  },
-  {
-    value: "fab fa-patreon",
-    label: "patreon",
-  },
-  {
-    value: "fas fa-pause",
-    label: "pause",
-  },
-  {
-    value: "fas fa-pause-circle",
-    label: "pause-circle",
-  },
-  {
-    value: "far fa-pause-circle",
-    label: "pause-circle",
-  },
-  {
-    value: "fas fa-paw",
-    label: "paw",
-  },
-  {
-    value: "fab fa-paypal",
-    label: "paypal",
-  },
-  {
-    value: "fas fa-peace",
-    label: "peace",
-  },
-  {
-    value: "fas fa-pen",
-    label: "pen",
-  },
-  {
-    value: "fas fa-pen-alt",
-    label: "pen-alt",
-  },
-  {
-    value: "fas fa-pen-fancy",
-    label: "pen-fancy",
-  },
-  {
-    value: "fas fa-pen-nib",
-    label: "pen-nib",
-  },
-  {
-    value: "fas fa-pen-square",
-    label: "pen-square",
-  },
-  {
-    value: "fas fa-pencil-alt",
-    label: "pencil-alt",
-  },
-  {
-    value: "fas fa-pencil-ruler",
-    label: "pencil-ruler",
-  },
-  {
-    value: "fab fa-penny-arcade",
-    label: "penny-arcade",
-  },
-  {
-    value: "fas fa-people-arrows",
-    label: "people-arrows",
-  },
-  {
-    value: "fas fa-people-carry",
-    label: "people-carry",
-  },
-  {
-    value: "fas fa-pepper-hot",
-    label: "pepper-hot",
-  },
-  {
-    value: "fas fa-percent",
-    label: "percent",
-  },
-  {
-    value: "fas fa-percentage",
-    label: "percentage",
-  },
-  {
-    value: "fab fa-periscope",
-    label: "periscope",
-  },
-  {
-    value: "fas fa-person-booth",
-    label: "person-booth",
-  },
-  {
-    value: "fab fa-phabricator",
-    label: "phabricator",
-  },
-  {
-    value: "fab fa-phoenix-framework",
-    label: "phoenix-framework",
-  },
-  {
-    value: "fab fa-phoenix-squadron",
-    label: "phoenix-squadron",
-  },
-  {
-    value: "fas fa-phone",
-    label: "phone",
-  },
-  {
-    value: "fas fa-phone-alt",
-    label: "phone-alt",
-  },
-  {
-    value: "fas fa-phone-slash",
-    label: "phone-slash",
-  },
-  {
-    value: "fas fa-phone-square",
-    label: "phone-square",
-  },
-  {
-    value: "fas fa-phone-square-alt",
-    label: "phone-square-alt",
-  },
-  {
-    value: "fas fa-phone-volume",
-    label: "phone-volume",
-  },
-  {
-    value: "fas fa-photo-video",
-    label: "photo-video",
-  },
-  {
-    value: "fab fa-php",
-    label: "php",
-  },
-  {
-    value: "fab fa-pied-piper",
-    label: "pied-piper",
-  },
-  {
-    value: "fab fa-pied-piper-alt",
-    label: "pied-piper-alt",
-  },
-  {
-    value: "fab fa-pied-piper-hat",
-    label: "pied-piper-hat",
-  },
-  {
-    value: "fab fa-pied-piper-pp",
-    label: "pied-piper-pp",
-  },
-  {
-    value: "fab fa-pied-piper-square",
-    label: "pied-piper-square",
-  },
-  {
-    value: "fas fa-piggy-bank",
-    label: "piggy-bank",
-  },
-  {
-    value: "fas fa-pills",
-    label: "pills",
-  },
-  {
-    value: "fab fa-pinterest",
-    label: "pinterest",
-  },
-  {
-    value: "fab fa-pinterest-p",
-    label: "pinterest-p",
-  },
-  {
-    value: "fab fa-pinterest-square",
-    label: "pinterest-square",
-  },
-  {
-    value: "fas fa-pizza-slice",
-    label: "pizza-slice",
-  },
-  {
-    value: "fas fa-place-of-worship",
-    label: "place-of-worship",
-  },
-  {
-    value: "fas fa-plane",
-    label: "plane",
-  },
-  {
-    value: "fas fa-plane-arrival",
-    label: "plane-arrival",
-  },
-  {
-    value: "fas fa-plane-departure",
-    label: "plane-departure",
-  },
-  {
-    value: "fas fa-plane-slash",
-    label: "plane-slash",
-  },
-  {
-    value: "fas fa-play",
-    label: "play",
-  },
-  {
-    value: "fas fa-play-circle",
-    label: "play-circle",
-  },
-  {
-    value: "far fa-play-circle",
-    label: "play-circle",
-  },
-  {
-    value: "fab fa-playstation",
-    label: "playstation",
-  },
-  {
-    value: "fas fa-plug",
-    label: "plug",
-  },
-  {
-    value: "fas fa-plus",
-    label: "plus",
-  },
-  {
-    value: "fas fa-plus-circle",
-    label: "plus-circle",
-  },
-  {
-    value: "fas fa-plus-square",
-    label: "plus-square",
-  },
-  {
-    value: "far fa-plus-square",
-    label: "plus-square",
-  },
-  {
-    value: "fas fa-podcast",
-    label: "podcast",
-  },
-  {
-    value: "fas fa-poll",
-    label: "poll",
-  },
-  {
-    value: "fas fa-poll-h",
-    label: "poll-h",
-  },
-  {
-    value: "fas fa-poo",
-    label: "poo",
-  },
-  {
-    value: "fas fa-poo-storm",
-    label: "poo-storm",
-  },
-  {
-    value: "fas fa-poop",
-    label: "poop",
-  },
-  {
-    value: "fas fa-portrait",
-    label: "portrait",
-  },
-  {
-    value: "fas fa-pound-sign",
-    label: "pound-sign",
-  },
-  {
-    value: "fas fa-power-off",
-    label: "power-off",
-  },
-  {
-    value: "fas fa-pray",
-    label: "pray",
-  },
-  {
-    value: "fas fa-praying-hands",
-    label: "praying-hands",
-  },
-  {
-    value: "fas fa-prescription",
-    label: "prescription",
-  },
-  {
-    value: "fas fa-prescription-bottle",
-    label: "prescription-bottle",
-  },
-  {
-    value: "fas fa-prescription-bottle-alt",
-    label: "prescription-bottle-alt",
-  },
-  {
-    value: "",
-    label: "",
-  },
-  {
-    value: "fas fa-print",
-    label: "print",
-  },
-  {
-    value: "fas fa-procedures",
-    label: "procedures",
-  },
-  {
-    value: "fab fa-product-hunt",
-    label: "product-hunt",
-  },
-  {
-    value: "fas fa-project-diagram",
-    label: "project-diagram",
-  },
-  {
-    value: "fas fa-pump-medical",
-    label: "pump-medical",
-  },
-  {
-    value: "fas fa-pump-soap",
-    label: "pump-soap",
-  },
-  {
-    value: "fab fa-pushed",
-    label: "pushed",
-  },
-  {
-    value: "fas fa-puzzle-piece",
-    label: "puzzle-piece",
-  },
-  {
-    value: "fab fa-python",
-    label: "python",
-  },
-  {
-    value: "fab fa-qq",
-    label: "qq",
-  },
-  {
-    value: "fas fa-qrcode",
-    label: "qrcode",
-  },
-  {
-    value: "fas fa-question",
-    label: "question",
-  },
-  {
-    value: "fas fa-question-circle",
-    label: "question-circle",
-  },
-  {
-    value: "far fa-question-circle",
-    label: "question-circle",
-  },
-  {
-    value: "fas fa-quidditch",
-    label: "quidditch",
-  },
-  {
-    value: "fab fa-quinscape",
-    label: "quinscape",
-  },
-  {
-    value: "fab fa-quora",
-    label: "quora",
-  },
-  {
-    value: "fas fa-quote-left",
-    label: "quote-left",
-  },
-  {
-    value: "fas fa-quote-right",
-    label: "quote-right",
-  },
-  {
-    value: "fas fa-quran",
-    label: "quran",
-  },
-  {
-    value: "fab fa-r-project",
-    label: "r-project",
-  },
-  {
-    value: "fas fa-radiation",
-    label: "radiation",
-  },
-  {
-    value: "fas fa-radiation-alt",
-    label: "radiation-alt",
-  },
-  {
-    value: "fas fa-rainbow",
-    label: "rainbow",
-  },
-  {
-    value: "fas fa-random",
-    label: "random",
-  },
-  {
-    value: "fab fa-raspberry-pi",
-    label: "raspberry-pi",
-  },
-  {
-    value: "fab fa-ravelry",
-    label: "ravelry",
-  },
-  {
-    value: "fab fa-react",
-    label: "react",
-  },
-  {
-    value: "fab fa-reacteurope",
-    label: "reacteurope",
-  },
-  {
-    value: "fab fa-readme",
-    label: "readme",
-  },
-  {
-    value: "fab fa-rebel",
-    label: "rebel",
-  },
-  {
-    value: "fas fa-receipt",
-    label: "receipt",
-  },
-  {
-    value: "fas fa-row-vinyl",
-    label: "row-vinyl",
-  },
-  {
-    value: "fas fa-recycle",
-    label: "recycle",
-  },
-  {
-    value: "fab fa-red-river",
-    label: "red-river",
-  },
-  {
-    value: "fab fa-reddit",
-    label: "reddit",
-  },
-  {
-    value: "fab fa-reddit-alien",
-    label: "reddit-alien",
-  },
-  {
-    value: "fab fa-reddit-square",
-    label: "reddit-square",
-  },
-  {
-    value: "fab fa-redhat",
-    label: "redhat",
-  },
-  {
-    value: "fas fa-redo",
-    label: "redo",
-  },
-  {
-    value: "fas fa-redo-alt",
-    label: "redo-alt",
-  },
-  {
-    value: "fas fa-registered",
-    label: "registered",
-  },
-  {
-    value: "far fa-registered",
-    label: "registered",
-  },
-  {
-    value: "fas fa-remove-format",
-    label: "remove-format",
-  },
-  {
-    value: "fab fa-renren",
-    label: "renren",
-  },
-  {
-    value: "fas fa-reply",
-    label: "reply",
-  },
-  {
-    value: "fas fa-reply-all",
-    label: "reply-all",
-  },
-  {
-    value: "fab fa-replyd",
-    label: "replyd",
-  },
-  {
-    value: "fas fa-republican",
-    label: "republican",
-  },
-  {
-    value: "fab fa-researchgate",
-    label: "researchgate",
-  },
-  {
-    value: "fab fa-resolving",
-    label: "resolving",
-  },
-  {
-    value: "fas fa-restroom",
-    label: "restroom",
-  },
-  {
-    value: "fas fa-retweet",
-    label: "retweet",
-  },
-  {
-    value: "fab fa-rev",
-    label: "rev",
-  },
-  {
-    value: "fas fa-ribbon",
-    label: "ribbon",
-  },
-  {
-    value: "fas fa-ring",
-    label: "ring",
-  },
-  {
-    value: "fas fa-road",
-    label: "road",
-  },
-  {
-    value: "fas fa-robot",
-    label: "robot",
-  },
-  {
-    value: "fas fa-rocket",
-    label: "rocket",
-  },
-  {
-    value: "fab fa-rocketchat",
-    label: "rocketchat",
-  },
-  {
-    value: "fab fa-rockrms",
-    label: "rockrms",
-  },
-  {
-    value: "fas fa-route",
-    label: "route",
-  },
-  {
-    value: "fas fa-rss",
-    label: "rss",
-  },
-  {
-    value: "fas fa-rss-square",
-    label: "rss-square",
-  },
-  {
-    value: "fas fa-ruble-sign",
-    label: "ruble-sign",
-  },
-  {
-    value: "fas fa-ruler",
-    label: "ruler",
-  },
-  {
-    value: "fas fa-ruler-combined",
-    label: "ruler-combined",
-  },
-  {
-    value: "fas fa-ruler-horizontal",
-    label: "ruler-horizontal",
-  },
-  {
-    value: "fas fa-ruler-vertical",
-    label: "ruler-vertical",
-  },
-  {
-    value: "fas fa-running",
-    label: "running",
-  },
-  {
-    value: "fas fa-rupee-sign",
-    label: "rupee-sign",
-  },
-  {
-    value: "fab fa-rust",
-    label: "rust",
-  },
-  {
-    value: "fas fa-sad-cry",
-    label: "sad-cry",
-  },
-  {
-    value: "far fa-sad-cry",
-    label: "sad-cry",
-  },
-  {
-    value: "fas fa-sad-tear",
-    label: "sad-tear",
-  },
-  {
-    value: "far fa-sad-tear",
-    label: "sad-tear",
-  },
-  {
-    value: "fab fa-safari",
-    label: "safari",
-  },
-  {
-    value: "fab fa-salesforce",
-    label: "salesforce",
-  },
-  {
-    value: "fab fa-sass",
-    label: "sass",
-  },
-  {
-    value: "fas fa-satellite",
-    label: "satellite",
-  },
-  {
-    value: "fas fa-satellite-dish",
-    label: "satellite-dish",
-  },
-  {
-    value: "fas fa-save",
-    label: "save",
-  },
-  {
-    value: "far fa-save",
-    label: "save",
-  },
-  {
-    value: "fab fa-schlix",
-    label: "schlix",
-  },
-  {
-    value: "fas fa-school",
-    label: "school",
-  },
-  {
-    value: "fas fa-screwdriver",
-    label: "screwdriver",
-  },
-  {
-    value: "fab fa-scribd",
-    label: "scribd",
-  },
-  {
-    value: "fas fa-scroll",
-    label: "scroll",
-  },
-  {
-    value: "fas fa-sd-card",
-    label: "sd-card",
-  },
-  {
-    value: "fas fa-search",
-    label: "search",
-  },
-  {
-    value: "fas fa-search-dollar",
-    label: "search-dollar",
-  },
-  {
-    value: "fas fa-search-location",
-    label: "search-location",
-  },
-  {
-    value: "fas fa-search-minus",
-    label: "search-minus",
-  },
-  {
-    value: "fas fa-search-plus",
-    label: "search-plus",
-  },
-  {
-    value: "fab fa-searchengin",
-    label: "searchengin",
-  },
-  {
-    value: "fas fa-seedling",
-    label: "seedling",
-  },
-  {
-    value: "fab fa-sellcast",
-    label: "sellcast",
-  },
-  {
-    value: "fab fa-sellsy",
-    label: "sellsy",
-  },
-  {
-    value: "fas fa-server",
-    label: "server",
-  },
-  {
-    value: "fab fa-servicestack",
-    label: "servicestack",
-  },
-  {
-    value: "",
-    label: "",
-  },
-  {
-    value: "fas fa-shapes",
-    label: "shapes",
-  },
-  {
-    value: "fas fa-share",
-    label: "share",
-  },
-  {
-    value: "fas fa-share-alt",
-    label: "share-alt",
-  },
-  {
-    value: "fas fa-share-alt-square",
-    label: "share-alt-square",
-  },
-  {
-    value: "fas fa-share-square",
-    label: "share-square",
-  },
-  {
-    value: "far fa-share-square",
-    label: "share-square",
-  },
-  {
-    value: "fas fa-shekel-sign",
-    label: "shekel-sign",
-  },
-  {
-    value: "fas fa-shield-alt",
-    label: "shield-alt",
-  },
-  {
-    value: "fas fa-shield-virus",
-    label: "shield-virus",
-  },
-  {
-    value: "fas fa-ship",
-    label: "ship",
-  },
-  {
-    value: "fas fa-shipping-fast",
-    label: "shipping-fast",
-  },
-  {
-    value: "fab fa-shirtsinbulk",
-    label: "shirtsinbulk",
-  },
-  {
-    value: "fas fa-shoe-prints",
-    label: "shoe-prints",
-  },
-  {
-    value: "fab fa-shopify",
-    label: "shopify",
-  },
-  {
-    value: "fas fa-shopping-bag",
-    label: "shopping-bag",
-  },
-  {
-    value: "fas fa-shopping-basket",
-    label: "shopping-basket",
-  },
-  {
-    value: "fas fa-shopping-cart",
-    label: "shopping-cart",
-  },
-  {
-    value: "fab fa-shopware",
-    label: "shopware",
-  },
-  {
-    value: "fas fa-shower",
-    label: "shower",
-  },
-  {
-    value: "fas fa-shuttle-van",
-    label: "shuttle-van",
-  },
-  {
-    value: "fas fa-sign",
-    label: "sign",
-  },
-  {
-    value: "fas fa-sign-in-alt",
-    label: "sign-in-alt",
-  },
-  {
-    value: "fas fa-sign-language",
-    label: "sign-language",
-  },
-  {
-    value: "fas fa-sign-out-alt",
-    label: "sign-out-alt",
-  },
-  {
-    value: "fas fa-signal",
-    label: "signal",
-  },
-  {
-    value: "fas fa-signature",
-    label: "signature",
-  },
-  {
-    value: "fas fa-sim-card",
-    label: "sim-card",
-  },
-  {
-    value: "fab fa-simplybuilt",
-    label: "simplybuilt",
-  },
-  {
-    value: "fas fa-sink",
-    label: "sink",
-  },
-  {
-    value: "fab fa-sistrix",
-    label: "sistrix",
-  },
-  {
-    value: "fas fa-sitemap",
-    label: "sitemap",
-  },
-  {
-    value: "fab fa-sith",
-    label: "sith",
-  },
-  {
-    value: "fas fa-skating",
-    label: "skating",
-  },
-  {
-    value: "fab fa-sketch",
-    label: "sketch",
-  },
-  {
-    value: "fas fa-skiing",
-    label: "skiing",
-  },
-  {
-    value: "fas fa-skiing-nordic",
-    label: "skiing-nordic",
-  },
-  {
-    value: "fas fa-skull",
-    label: "skull",
-  },
-  {
-    value: "fas fa-skull-crossbones",
-    label: "skull-crossbones",
-  },
-  {
-    value: "fab fa-skyatlas",
-    label: "skyatlas",
-  },
-  {
-    value: "fab fa-skype",
-    label: "skype",
-  },
-  {
-    value: "fab fa-slack",
-    label: "slack",
-  },
-  {
-    value: "fab fa-slack-hash",
-    label: "slack-hash",
-  },
-  {
-    value: "fas fa-slash",
-    label: "slash",
-  },
-  {
-    value: "fas fa-sleigh",
-    label: "sleigh",
-  },
-  {
-    value: "fas fa-sliders-h",
-    label: "sliders-h",
-  },
-  {
-    value: "fab fa-slideshare",
-    label: "slideshare",
-  },
-  {
-    value: "fas fa-smile",
-    label: "smile",
-  },
-  {
-    value: "far fa-smile",
-    label: "smile",
-  },
-  {
-    value: "fas fa-smile-beam",
-    label: "smile-beam",
-  },
-  {
-    value: "far fa-smile-beam",
-    label: "smile-beam",
-  },
-  {
-    value: "fas fa-smile-wink",
-    label: "smile-wink",
-  },
-  {
-    value: "far fa-smile-wink",
-    label: "smile-wink",
-  },
-  {
-    value: "fas fa-smog",
-    label: "smog",
-  },
-  {
-    value: "fas fa-smoking",
-    label: "smoking",
-  },
-  {
-    value: "fas fa-smoking-ban",
-    label: "smoking-ban",
-  },
-  {
-    value: "fas fa-sms",
-    label: "sms",
-  },
-  {
-    value: "fab fa-snapchat",
-    label: "snapchat",
-  },
-  {
-    value: "fab fa-snapchat-ghost",
-    label: "snapchat-ghost",
-  },
-  {
-    value: "fab fa-snapchat-square",
-    label: "snapchat-square",
-  },
-  {
-    value: "fas fa-snowboarding",
-    label: "snowboarding",
-  },
-  {
-    value: "fas fa-snowflake",
-    label: "snowflake",
-  },
-  {
-    value: "far fa-snowflake",
-    label: "snowflake",
-  },
-  {
-    value: "fas fa-snowman",
-    label: "snowman",
-  },
-  {
-    value: "fas fa-snowplow",
-    label: "snowplow",
-  },
-  {
-    value: "fas fa-soap",
-    label: "soap",
-  },
-  {
-    value: "fas fa-socks",
-    label: "socks",
-  },
-  {
-    value: "fas fa-solar-panel",
-    label: "solar-panel",
-  },
-  {
-    value: "fas fa-sort",
-    label: "sort",
-  },
-  {
-    value: "fas fa-sort-alpha-down",
-    label: "sort-alpha-down",
-  },
-  {
-    value: "fas fa-sort-alpha-down-alt",
-    label: "sort-alpha-down-alt",
-  },
-  {
-    value: "fas fa-sort-alpha-up",
-    label: "sort-alpha-up",
-  },
-  {
-    value: "fas fa-sort-alpha-up-alt",
-    label: "sort-alpha-up-alt",
-  },
-  {
-    value: "fas fa-sort-amount-down",
-    label: "sort-amount-down",
-  },
-  {
-    value: "fas fa-sort-amount-down-alt",
-    label: "sort-amount-down-alt",
-  },
-  {
-    value: "fas fa-sort-amount-up",
-    label: "sort-amount-up",
-  },
-  {
-    value: "fas fa-sort-amount-up-alt",
-    label: "sort-amount-up-alt",
-  },
-  {
-    value: "fas fa-sort-down",
-    label: "sort-down",
-  },
-  {
-    value: "fas fa-sort-numeric-down",
-    label: "sort-numeric-down",
-  },
-  {
-    value: "fas fa-sort-numeric-down-alt",
-    label: "sort-numeric-down-alt",
-  },
-  {
-    value: "fas fa-sort-numeric-up",
-    label: "sort-numeric-up",
-  },
-  {
-    value: "fas fa-sort-numeric-up-alt",
-    label: "sort-numeric-up-alt",
-  },
-  {
-    value: "fas fa-sort-up",
-    label: "sort-up",
-  },
-  {
-    value: "fab fa-soundcloud",
-    label: "soundcloud",
-  },
-  {
-    value: "fab fa-sourcetree",
-    label: "sourcetree",
-  },
-  {
-    value: "fas fa-spa",
-    label: "spa",
-  },
-  {
-    value: "fas fa-space-shuttle",
-    label: "space-shuttle",
-  },
-  {
-    value: "fab fa-speakap",
-    label: "speakap",
-  },
-  {
-    value: "fab fa-speaker-deck",
-    label: "speaker-deck",
-  },
-  {
-    value: "fas fa-spell-check",
-    label: "spell-check",
-  },
-  {
-    value: "fas fa-spider",
-    label: "spider",
-  },
-  {
-    value: "fas fa-spinner",
-    label: "spinner",
-  },
-  {
-    value: "fas fa-splotch",
-    label: "splotch",
-  },
-  {
-    value: "fab fa-spotify",
-    label: "spotify",
-  },
-  {
-    value: "fas fa-spray-can",
-    label: "spray-can",
-  },
-  {
-    value: "fas fa-square",
-    label: "square",
-  },
-  {
-    value: "far fa-square",
-    label: "square",
-  },
-  {
-    value: "fas fa-square-full",
-    label: "square-full",
-  },
-  {
-    value: "fas fa-square-root-alt",
-    label: "square-root-alt",
-  },
-  {
-    value: "fab fa-squarespace",
-    label: "squarespace",
-  },
-  {
-    value: "fab fa-stack-exchange",
-    label: "stack-exchange",
-  },
-  {
-    value: "",
-    label: "",
-  },
-  {
-    value: "fab fa-stack-overflow",
-    label: "stack-overflow",
-  },
-  {
-    value: "fab fa-stackpath",
-    label: "stackpath",
-  },
-  {
-    value: "fas fa-stamp",
-    label: "stamp",
-  },
-  {
-    value: "fas fa-star",
-    label: "star",
-  },
-  {
-    value: "far fa-star",
-    label: "star",
-  },
-  {
-    value: "fas fa-star-and-crescent",
-    label: "star-and-crescent",
-  },
-  {
-    value: "fas fa-star-half",
-    label: "star-half",
-  },
-  {
-    value: "far fa-star-half",
-    label: "star-half",
-  },
-  {
-    value: "fas fa-star-half-alt",
-    label: "star-half-alt",
-  },
-  {
-    value: "fas fa-star-of-david",
-    label: "star-of-david",
-  },
-  {
-    value: "fas fa-star-of-life",
-    label: "star-of-life",
-  },
-  {
-    value: "fab fa-staylinked",
-    label: "staylinked",
-  },
-  {
-    value: "fab fa-steam",
-    label: "steam",
-  },
-  {
-    value: "fab fa-steam-square",
-    label: "steam-square",
-  },
-  {
-    value: "fab fa-steam-symbol",
-    label: "steam-symbol",
-  },
-  {
-    value: "fas fa-step-backward",
-    label: "step-backward",
-  },
-  {
-    value: "fas fa-step-forward",
-    label: "step-forward",
-  },
-  {
-    value: "fas fa-stethoscope",
-    label: "stethoscope",
-  },
-  {
-    value: "fab fa-sticker-mule",
-    label: "sticker-mule",
-  },
-  {
-    value: "fas fa-sticky-note",
-    label: "sticky-note",
-  },
-  {
-    value: "far fa-sticky-note",
-    label: "sticky-note",
-  },
-  {
-    value: "fas fa-stop",
-    label: "stop",
-  },
-  {
-    value: "fas fa-stop-circle",
-    label: "stop-circle",
-  },
-  {
-    value: "far fa-stop-circle",
-    label: "stop-circle",
-  },
-  {
-    value: "fas fa-stopwatch",
-    label: "stopwatch",
-  },
-  {
-    value: "fas fa-stopwatch-20",
-    label: "stopwatch-20",
-  },
-  {
-    value: "fas fa-store",
-    label: "store",
-  },
-  {
-    value: "fas fa-store-alt",
-    label: "store-alt",
-  },
-  {
-    value: "fas fa-store-alt-slash",
-    label: "store-alt-slash",
-  },
-  {
-    value: "fas fa-store-slash",
-    label: "store-slash",
-  },
-  {
-    value: "fab fa-strava",
-    label: "strava",
-  },
-  {
-    value: "fas fa-stream",
-    label: "stream",
-  },
-  {
-    value: "fas fa-street-view",
-    label: "street-view",
-  },
-  {
-    value: "fas fa-strikethrough",
-    label: "strikethrough",
-  },
-  {
-    value: "fab fa-stripe",
-    label: "stripe",
-  },
-  {
-    value: "fab fa-stripe-s",
-    label: "stripe-s",
-  },
-  {
-    value: "fas fa-stroopwafel",
-    label: "stroopwafel",
-  },
-  {
-    value: "fab fa-studiovinari",
-    label: "studiovinari",
-  },
-  {
-    value: "fab fa-stumbleupon",
-    label: "stumbleupon",
-  },
-  {
-    value: "fab fa-stumbleupon-circle",
-    label: "stumbleupon-circle",
-  },
-  {
-    value: "fas fa-subscript",
-    label: "subscript",
-  },
-  {
-    value: "fas fa-subway",
-    label: "subway",
-  },
-  {
-    value: "fas fa-suitcase",
-    label: "suitcase",
-  },
-  {
-    value: "fas fa-suitcase-rolling",
-    label: "suitcase-rolling",
-  },
-  {
-    value: "fas fa-sun",
-    label: "sun",
-  },
-  {
-    value: "far fa-sun",
-    label: "sun",
-  },
-  {
-    value: "fab fa-superpowers",
-    label: "superpowers",
-  },
-  {
-    value: "fas fa-superscript",
-    label: "superscript",
-  },
-  {
-    value: "fab fa-supple",
-    label: "supple",
-  },
-  {
-    value: "fas fa-surprise",
-    label: "surprise",
-  },
-  {
-    value: "far fa-surprise",
-    label: "surprise",
-  },
-  {
-    value: "fab fa-suse",
-    label: "suse",
-  },
-  {
-    value: "fas fa-swatchbook",
-    label: "swatchbook",
-  },
-  {
-    value: "fab fa-swift",
-    label: "swift",
-  },
-  {
-    value: "fas fa-swimmer",
-    label: "swimmer",
-  },
-  {
-    value: "fas fa-swimming-pool",
-    label: "swimming-pool",
-  },
-  {
-    value: "fab fa-symfony",
-    label: "symfony",
-  },
-  {
-    value: "fas fa-synagogue",
-    label: "synagogue",
-  },
-  {
-    value: "fas fa-sync",
-    label: "sync",
-  },
-  {
-    value: "fas fa-sync-alt",
-    label: "sync-alt",
-  },
-  {
-    value: "fas fa-syringe",
-    label: "syringe",
-  },
-  {
-    value: "fas fa-table",
-    label: "table",
-  },
-  {
-    value: "fas fa-table-tennis",
-    label: "table-tennis",
-  },
-  {
-    value: "fas fa-tablet",
-    label: "tablet",
-  },
-  {
-    value: "fas fa-tablet-alt",
-    label: "tablet-alt",
-  },
-  {
-    value: "fas fa-tablets",
-    label: "tablets",
-  },
-  {
-    value: "fas fa-tachometer-alt",
-    label: "tachometer-alt",
-  },
-  {
-    value: "fas fa-tag",
-    label: "tag",
-  },
-  {
-    value: "fas fa-tags",
-    label: "tags",
-  },
-  {
-    value: "fas fa-tape",
-    label: "tape",
-  },
-  {
-    value: "fas fa-tasks",
-    label: "tasks",
-  },
-  {
-    value: "fas fa-taxi",
-    label: "taxi",
-  },
-  {
-    value: "fab fa-teamspeak",
-    label: "teamspeak",
-  },
-  {
-    value: "fas fa-teeth",
-    label: "teeth",
-  },
-  {
-    value: "fas fa-teeth-open",
-    label: "teeth-open",
-  },
-  {
-    value: "fab fa-telegram",
-    label: "telegram",
-  },
-  {
-    value: "fab fa-telegram-plane",
-    label: "telegram-plane",
-  },
-  {
-    value: "fas fa-temperature-high",
-    label: "temperature-high",
-  },
-  {
-    value: "fas fa-temperature-low",
-    label: "temperature-low",
-  },
-  {
-    value: "fab fa-tencent-weibo",
-    label: "tencent-weibo",
-  },
-  {
-    value: "fas fa-tenge",
-    label: "tenge",
-  },
-  {
-    value: "fas fa-terminal",
-    label: "terminal",
-  },
-  {
-    value: "fas fa-text-height",
-    label: "text-height",
-  },
-  {
-    value: "fas fa-text-width",
-    label: "text-width",
-  },
-  {
-    value: "fas fa-th",
-    label: "th",
-  },
-  {
-    value: "fas fa-th-large",
-    label: "th-large",
-  },
-  {
-    value: "fas fa-th-list",
-    label: "th-list",
-  },
-  {
-    value: "fab fa-the-red-yeti",
-    label: "the-red-yeti",
-  },
-  {
-    value: "fas fa-theater-masks",
-    label: "theater-masks",
-  },
-  {
-    value: "fab fa-themeco",
-    label: "themeco",
-  },
-  {
-    value: "fab fa-themeisle",
-    label: "themeisle",
-  },
-  {
-    value: "fas fa-thermometer",
-    label: "thermometer",
-  },
-  {
-    value: "fas fa-thermometer-empty",
-    label: "thermometer-empty",
-  },
-  {
-    value: "fas fa-thermometer-full",
-    label: "thermometer-full",
-  },
-  {
-    value: "fas fa-thermometer-half",
-    label: "thermometer-half",
-  },
-  {
-    value: "fas fa-thermometer-quarter",
-    label: "thermometer-quarter",
-  },
-  {
-    value: "fas fa-thermometer-three-quarters",
-    label: "thermometer-three-quarters",
-  },
-  {
-    value: "fab fa-think-peaks",
-    label: "think-peaks",
-  },
-  {
-    value: "fas fa-thumbs-down",
-    label: "thumbs-down",
-  },
-  {
-    value: "far fa-thumbs-down",
-    label: "thumbs-down",
-  },
-  {
-    value: "",
-    label: "",
-  },
-  {
-    value: "fas fa-thumbs-up",
-    label: "thumbs-up",
-  },
-  {
-    value: "far fa-thumbs-up",
-    label: "thumbs-up",
-  },
-  {
-    value: "fas fa-thumbtack",
-    label: "thumbtack",
-  },
-  {
-    value: "fas fa-ticket-alt",
-    label: "ticket-alt",
-  },
-  {
-    value: "fab fa-tiktok",
-    label: "tiktok",
-  },
-  {
-    value: "fas fa-times",
-    label: "times",
-  },
-  {
-    value: "fas fa-times-circle",
-    label: "times-circle",
-  },
-  {
-    value: "far fa-times-circle",
-    label: "times-circle",
-  },
-  {
-    value: "fas fa-tint",
-    label: "tint",
-  },
-  {
-    value: "fas fa-tint-slash",
-    label: "tint-slash",
-  },
-  {
-    value: "fas fa-tired",
-    label: "tired",
-  },
-  {
-    value: "far fa-tired",
-    label: "tired",
-  },
-  {
-    value: "fas fa-toggle-off",
-    label: "toggle-off",
-  },
-  {
-    value: "fas fa-toggle-on",
-    label: "toggle-on",
-  },
-  {
-    value: "fas fa-toilet",
-    label: "toilet",
-  },
-  {
-    value: "fas fa-toilet-paper",
-    label: "toilet-paper",
-  },
-  {
-    value: "fas fa-toilet-paper-slash",
-    label: "toilet-paper-slash",
-  },
-  {
-    value: "fas fa-toolbox",
-    label: "toolbox",
-  },
-  {
-    value: "fas fa-tools",
-    label: "tools",
-  },
-  {
-    value: "fas fa-tooth",
-    label: "tooth",
-  },
-  {
-    value: "fas fa-torah",
-    label: "torah",
-  },
-  {
-    value: "fas fa-torii-gate",
-    label: "torii-gate",
-  },
-  {
-    value: "fas fa-tractor",
-    label: "tractor",
-  },
-  {
-    value: "fab fa-trade-federation",
-    label: "trade-federation",
-  },
-  {
-    value: "fas fa-trademark",
-    label: "trademark",
-  },
-  {
-    value: "fas fa-traffic-light",
-    label: "traffic-light",
-  },
-  {
-    value: "fas fa-trailer",
-    label: "trailer",
-  },
-  {
-    value: "fas fa-train",
-    label: "train",
-  },
-  {
-    value: "fas fa-tram",
-    label: "tram",
-  },
-  {
-    value: "fas fa-transgender",
-    label: "transgender",
-  },
-  {
-    value: "fas fa-transgender-alt",
-    label: "transgender-alt",
-  },
-  {
-    value: "fas fa-trash",
-    label: "trash",
-  },
-  {
-    value: "fas fa-trash-alt",
-    label: "trash-alt",
-  },
-  {
-    value: "far fa-trash-alt",
-    label: "trash-alt",
-  },
-  {
-    value: "fas fa-trash-restore",
-    label: "trash-restore",
-  },
-  {
-    value: "fas fa-trash-restore-alt",
-    label: "trash-restore-alt",
-  },
-  {
-    value: "fas fa-tree",
-    label: "tree",
-  },
-  {
-    value: "fab fa-trello",
-    label: "trello",
-  },
-  {
-    value: "fab fa-tripadvisor",
-    label: "tripadvisor",
-  },
-  {
-    value: "fas fa-trophy",
-    label: "trophy",
-  },
-  {
-    value: "fas fa-truck",
-    label: "truck",
-  },
-  {
-    value: "fas fa-truck-loading",
-    label: "truck-loading",
-  },
-  {
-    value: "fas fa-truck-monster",
-    label: "truck-monster",
-  },
-  {
-    value: "fas fa-truck-moving",
-    label: "truck-moving",
-  },
-  {
-    value: "fas fa-truck-pickup",
-    label: "truck-pickup",
-  },
-  {
-    value: "fas fa-tshirt",
-    label: "tshirt",
-  },
-  {
-    value: "fas fa-tty",
-    label: "tty",
-  },
-  {
-    value: "fab fa-tumblr",
-    label: "tumblr",
-  },
-  {
-    value: "fab fa-tumblr-square",
-    label: "tumblr-square",
-  },
-  {
-    value: "fas fa-tv",
-    label: "tv",
-  },
-  {
-    value: "fab fa-twitch",
-    label: "twitch",
-  },
-  {
-    value: "fab fa-twitter",
-    label: "twitter",
-  },
-  {
-    value: "fab fa-twitter-square",
-    label: "twitter-square",
-  },
-  {
-    value: "fab fa-typo3",
-    label: "typo3",
-  },
-  {
-    value: "fab fa-uber",
-    label: "uber",
-  },
-  {
-    value: "fab fa-ubuntu",
-    label: "ubuntu",
-  },
-  {
-    value: "fab fa-uikit",
-    label: "uikit",
-  },
-  {
-    value: "fab fa-umbraco",
-    label: "umbraco",
-  },
-  {
-    value: "fas fa-umbrella",
-    label: "umbrella",
-  },
-  {
-    value: "fas fa-umbrella-beach",
-    label: "umbrella-beach",
-  },
-  {
-    value: "fas fa-underline",
-    label: "underline",
-  },
-  {
-    value: "fas fa-undo",
-    label: "undo",
-  },
-  {
-    value: "fas fa-undo-alt",
-    label: "undo-alt",
-  },
-  {
-    value: "fab fa-uniregistry",
-    label: "uniregistry",
-  },
-  {
-    value: "fab fa-unity",
-    label: "unity",
-  },
-  {
-    value: "fas fa-universal-access",
-    label: "universal-access",
-  },
-  {
-    value: "fas fa-university",
-    label: "university",
-  },
-  {
-    value: "fas fa-unlink",
-    label: "unlink",
-  },
-  {
-    value: "fas fa-unlock",
-    label: "unlock",
-  },
-  {
-    value: "fas fa-unlock-alt",
-    label: "unlock-alt",
-  },
-  {
-    value: "fab fa-unsplash",
-    label: "unsplash",
-  },
-  {
-    value: "fab fa-untappd",
-    label: "untappd",
-  },
-  {
-    value: "fas fa-upload",
-    label: "upload",
-  },
-  {
-    value: "fab fa-ups",
-    label: "ups",
-  },
-  {
-    value: "fab fa-usb",
-    label: "usb",
-  },
-  {
-    value: "fas fa-user",
-    label: "user",
-  },
-  {
-    value: "far fa-user",
-    label: "user",
-  },
-  {
-    value: "fas fa-user-alt",
-    label: "user-alt",
-  },
-  {
-    value: "fas fa-user-alt-slash",
-    label: "user-alt-slash",
-  },
-  {
-    value: "fas fa-user-astronaut",
-    label: "user-astronaut",
-  },
-  {
-    value: "fas fa-user-check",
-    label: "user-check",
-  },
-  {
-    value: "fas fa-user-circle",
-    label: "user-circle",
-  },
-  {
-    value: "far fa-user-circle",
-    label: "user-circle",
-  },
-  {
-    value: "fas fa-user-clock",
-    label: "user-clock",
-  },
-  {
-    value: "fas fa-user-cog",
-    label: "user-cog",
-  },
-  {
-    value: "fas fa-user-edit",
-    label: "user-edit",
-  },
-  {
-    value: "fas fa-user-friends",
-    label: "user-friends",
-  },
-  {
-    value: "fas fa-user-graduate",
-    label: "user-graduate",
-  },
-  {
-    value: "fas fa-user-injured",
-    label: "user-injured",
-  },
-  {
-    value: "fas fa-user-lock",
-    label: "user-lock",
-  },
-  {
-    value: "fas fa-user-md",
-    label: "user-md",
-  },
-  {
-    value: "fas fa-user-minus",
-    label: "user-minus",
-  },
-  {
-    value: "fas fa-user-ninja",
-    label: "user-ninja",
-  },
-  {
-    value: "fas fa-user-nurse",
-    label: "user-nurse",
-  },
-  {
-    value: "fas fa-user-plus",
-    label: "user-plus",
-  },
-  {
-    value: "fas fa-user-secret",
-    label: "user-secret",
-  },
-  {
-    value: "fas fa-user-shield",
-    label: "user-shield",
-  },
-  {
-    value: "fas fa-user-slash",
-    label: "user-slash",
-  },
-  {
-    value: "fas fa-user-tag",
-    label: "user-tag",
-  },
-  {
-    value: "fas fa-user-tie",
-    label: "user-tie",
-  },
-  {
-    value: "",
-    label: "",
-  },
-  {
-    value: "fas fa-user-times",
-    label: "user-times",
-  },
-  {
-    value: "fas fa-users",
-    label: "users",
-  },
-  {
-    value: "fas fa-users-cog",
-    label: "users-cog",
-  },
-  {
-    value: "fas fa-users-slash",
-    label: "users-slash",
-  },
-  {
-    value: "fab fa-usps",
-    label: "usps",
-  },
-  {
-    value: "fab fa-ussunnah",
-    label: "ussunnah",
-  },
-  {
-    value: "fas fa-utensil-spoon",
-    label: "utensil-spoon",
-  },
-  {
-    value: "fas fa-utensils",
-    label: "utensils",
-  },
-  {
-    value: "fab fa-vaadin",
-    label: "vaadin",
-  },
-  {
-    value: "fas fa-vector-square",
-    label: "vector-square",
-  },
-  {
-    value: "fas fa-venus",
-    label: "venus",
-  },
-  {
-    value: "fas fa-venus-double",
-    label: "venus-double",
-  },
-  {
-    value: "fas fa-venus-mars",
-    label: "venus-mars",
-  },
-  {
-    value: "fab fa-viacoin",
-    label: "viacoin",
-  },
-  {
-    value: "fab fa-viadeo",
-    label: "viadeo",
-  },
-  {
-    value: "fab fa-viadeo-square",
-    label: "viadeo-square",
-  },
-  {
-    value: "fas fa-vial",
-    label: "vial",
-  },
-  {
-    value: "fas fa-vials",
-    label: "vials",
-  },
-  {
-    value: "fab fa-viber",
-    label: "viber",
-  },
-  {
-    value: "fas fa-video",
-    label: "video",
-  },
-  {
-    value: "fas fa-video-slash",
-    label: "video-slash",
-  },
-  {
-    value: "fas fa-vihara",
-    label: "vihara",
-  },
-  {
-    value: "fab fa-vimeo",
-    label: "vimeo",
-  },
-  {
-    value: "fab fa-vimeo-square",
-    label: "vimeo-square",
-  },
-  {
-    value: "fab fa-vimeo-v",
-    label: "vimeo-v",
-  },
-  {
-    value: "fab fa-vine",
-    label: "vine",
-  },
-  {
-    value: "fas fa-virus",
-    label: "virus",
-  },
-  {
-    value: "fas fa-virus-slash",
-    label: "virus-slash",
-  },
-  {
-    value: "fas fa-viruses",
-    label: "viruses",
-  },
-  {
-    value: "fab fa-vk",
-    label: "vk",
-  },
-  {
-    value: "fab fa-vnv",
-    label: "vnv",
-  },
-  {
-    value: "fas fa-voicemail",
-    label: "voicemail",
-  },
-  {
-    value: "fas fa-volleyball-ball",
-    label: "volleyball-ball",
-  },
-  {
-    value: "fas fa-volume-down",
-    label: "volume-down",
-  },
-  {
-    value: "fas fa-volume-mute",
-    label: "volume-mute",
-  },
-  {
-    value: "fas fa-volume-off",
-    label: "volume-off",
-  },
-  {
-    value: "fas fa-volume-up",
-    label: "volume-up",
-  },
-  {
-    value: "fas fa-vote-yea",
-    label: "vote-yea",
-  },
-  {
-    value: "fas fa-vr-cardboard",
-    label: "vr-cardboard",
-  },
-  {
-    value: "fab fa-vuejs",
-    label: "vuejs",
-  },
-  {
-    value: "fas fa-walking",
-    label: "walking",
-  },
-  {
-    value: "fas fa-wallet",
-    label: "wallet",
-  },
-  {
-    value: "fas fa-warehouse",
-    label: "warehouse",
-  },
-  {
-    value: "fas fa-water",
-    label: "water",
-  },
-  {
-    value: "fas fa-wave-square",
-    label: "wave-square",
-  },
-  {
-    value: "fab fa-waze",
-    label: "waze",
-  },
-  {
-    value: "fab fa-weebly",
-    label: "weebly",
-  },
-  {
-    value: "fab fa-weibo",
-    label: "weibo",
-  },
-  {
-    value: "fas fa-weight",
-    label: "weight",
-  },
-  {
-    value: "fas fa-weight-hanging",
-    label: "weight-hanging",
-  },
-  {
-    value: "fab fa-weixin",
-    label: "weixin",
-  },
-  {
-    value: "fab fa-whatsapp",
-    label: "whatsapp",
-  },
-  {
-    value: "fab fa-whatsapp-square",
-    label: "whatsapp-square",
-  },
-  {
-    value: "fas fa-wheelchair",
-    label: "wheelchair",
-  },
-  {
-    value: "fab fa-whmcs",
-    label: "whmcs",
-  },
-  {
-    value: "fas fa-wifi",
-    label: "wifi",
-  },
-  {
-    value: "fab fa-wikipedia-w",
-    label: "wikipedia-w",
-  },
-  {
-    value: "fas fa-wind",
-    label: "wind",
-  },
-  {
-    value: "fas fa-window-close",
-    label: "window-close",
-  },
-  {
-    value: "far fa-window-close",
-    label: "window-close",
-  },
-  {
-    value: "fas fa-window-maximize",
-    label: "window-maximize",
-  },
-  {
-    value: "far fa-window-maximize",
-    label: "window-maximize",
-  },
-  {
-    value: "fas fa-window-minimize",
-    label: "window-minimize",
-  },
-  {
-    value: "far fa-window-minimize",
-    label: "window-minimize",
-  },
-  {
-    value: "fas fa-window-restore",
-    label: "window-restore",
-  },
-  {
-    value: "far fa-window-restore",
-    label: "window-restore",
-  },
-  {
-    value: "fab fa-windows",
-    label: "windows",
-  },
-  {
-    value: "fas fa-wine-bottle",
-    label: "wine-bottle",
-  },
-  {
-    value: "fas fa-wine-glass",
-    label: "wine-glass",
-  },
-  {
-    value: "fas fa-wine-glass-alt",
-    label: "wine-glass-alt",
-  },
-  {
-    value: "fab fa-wix",
-    label: "wix",
-  },
-  {
-    value: "fab fa-wizards-of-the-coast",
-    label: "wizards-of-the-coast",
-  },
-  {
-    value: "fab fa-wolf-pack-battalion",
-    label: "wolf-pack-battalion",
-  },
-  {
-    value: "fas fa-won-sign",
-    label: "won-sign",
-  },
-  {
-    value: "fab fa-wordpress",
-    label: "wordpress",
-  },
-  {
-    value: "fab fa-wordpress-simple",
-    label: "wordpress-simple",
-  },
-  {
-    value: "fab fa-wpbeginner",
-    label: "wpbeginner",
-  },
-  {
-    value: "fab fa-wpexplorer",
-    label: "wpexplorer",
-  },
-  {
-    value: "fab fa-wpforms",
-    label: "wpforms",
-  },
-  {
-    value: "fab fa-wpressr",
-    label: "wpressr",
-  },
-  {
-    value: "fas fa-wrench",
-    label: "wrench",
-  },
-  {
-    value: "fas fa-x-ray",
-    label: "x-ray",
-  },
-  {
-    value: "fab fa-xbox",
-    label: "xbox",
-  },
-  {
-    value: "fab fa-xing",
-    label: "xing",
-  },
-  {
-    value: "fab fa-xing-square",
-    label: "xing-square",
-  },
-  {
-    value: "fab fa-y-combinator",
-    label: "y-combinator",
-  },
-  {
-    value: "fab fa-yahoo",
-    label: "yahoo",
-  },
-  {
-    value: "fab fa-yammer",
-    label: "yammer",
-  },
-  {
-    value: "fab fa-yandex",
-    label: "yandex",
-  },
-  {
-    value: "fab fa-yandex-international",
-    label: "yandex-international",
-  },
-  {
-    value: "fab fa-yarn",
-    label: "yarn",
-  },
-  {
-    value: "fab fa-yelp",
-    label: "yelp",
-  },
-  {
-    value: "fas fa-yen-sign",
-    label: "yen-sign",
-  },
-  {
-    value: "fas fa-yin-yang",
-    label: "yin-yang",
-  },
-  {
-    value: "fab fa-yoast",
-    label: "yoast",
-  },
-  {
-    value: "fab fa-youtube",
-    label: "youtube",
-  },
-  {
-    value: "fab fa-youtube-square",
-    label: "youtube-square",
-  },
-  {
-    value: "fab fa-zhihu",
-    label: "zhihu",
-  },
-]
+export default {
+  Buildings: {
+    home: ["house", "房子", "家", "主页"],
+    "home-2": ["house", "房子", "家", "主页"],
+    "home-3": ["house", "房子", "家", "主页"],
+    "home-4": ["house", "房子", "家", "主页"],
+    "home-5": ["house", "房子", "家", "主页"],
+    "home-6": ["house", "房子", "家", "主页"],
+    "home-7": ["house", "房子", "家", "主页"],
+    "home-8": ["house", "房子", "家", "主页"],
+    "home-gear": ["house", "房子", "工厂"],
+    "home-wifi": ["smart home", "房子", "家具", "智能家居"],
+    "home-smile": ["house", "smart home", "smile", "房子", "智能家居", "微笑"],
+    "home-smile-2": [
+      "house",
+      "smart home",
+      "smile",
+      "房子",
+      "智能家居",
+      "微笑",
+    ],
+    "home-heart": ["house", "心", "房子", "家", "主页", "孤儿院"],
+    building: [
+      "city",
+      "office",
+      "enterprise",
+      "建筑",
+      "城市",
+      "楼",
+      "办公楼",
+      "写字楼",
+      "企业",
+    ],
+    "building-2": [
+      "city",
+      "office",
+      "construction",
+      "enterprise",
+      "城市",
+      "建筑",
+      "楼",
+      "企业",
+    ],
+    "building-3": [
+      "factory",
+      "plant",
+      "enterprise",
+      "工厂",
+      "建筑",
+      "楼",
+      "企业",
+    ],
+    "building-4": [
+      "city",
+      "office",
+      "enterprise",
+      "建筑",
+      "城市",
+      "楼",
+      "办公楼",
+      "写字楼",
+      "企业",
+    ],
+    hotel: [
+      "building",
+      "hotel",
+      "office",
+      "enterprise",
+      "tavern",
+      "建筑",
+      "酒店",
+      "楼",
+      "办公楼",
+      "写字楼",
+      "企业",
+    ],
+    community: ["building", "hotel", "社区", "建筑", "酒店"],
+    government: ["building", "政府", "建筑", "大会堂"],
+    bank: ["bank", "finance", "savings", "banking", "银行", "交易所"],
+    store: ["shop", "mall", "supermarket", "商店", "超市", "店铺", "商家"],
+    "store-2": ["shop", "mall", "supermarket", "商店", "超市", "店铺", "商家"],
+    "store-3": ["shop", "mall", "supermarket", "商店", "超市", "店铺", "商家"],
+    hospital: ["medical", "health", "医院"],
+    "ancient-gate": [
+      "historical",
+      "genre",
+      "scenic",
+      "trip",
+      "travel",
+      "旅行",
+      "旅游",
+      "城门",
+      "古代",
+      "历史",
+      "景区",
+    ],
+    "ancient-pavilion": [
+      "historical",
+      "genre",
+      "scenic",
+      "trip",
+      "travel",
+      "旅行",
+      "旅游",
+      "凉亭",
+      "古代",
+      "历史",
+      "景区",
+    ],
+  },
+  Business: {
+    mail: ["envelope", "email", "inbox", "信封", "邮箱", "邮件", "收件箱"],
+    "mail-open": [
+      "envelope",
+      "email",
+      "inbox",
+      "信封",
+      "邮箱",
+      "邮件",
+      "收件箱",
+    ],
+    "mail-send": [
+      "envelope",
+      "email",
+      "inbox",
+      "信封",
+      "邮箱",
+      "邮件",
+      "发送",
+      "发件箱",
+    ],
+    "mail-unread": [
+      "envelope",
+      "email",
+      "inbox",
+      "信封",
+      "邮箱",
+      "邮件",
+      "未读",
+    ],
+    "mail-add": [
+      "envelope",
+      "email",
+      "inbox",
+      "add",
+      "信封",
+      "邮箱",
+      "邮件",
+      "新增",
+      "添加",
+    ],
+    "mail-check": [
+      "envelope",
+      "email",
+      "inbox",
+      "read",
+      "信封",
+      "邮箱",
+      "邮件",
+      "已读",
+    ],
+    "mail-close": [
+      "envelope",
+      "email",
+      "inbox",
+      "failed",
+      "x",
+      "信封",
+      "邮箱",
+      "邮件",
+      "失败",
+    ],
+    "mail-download": [
+      "envelope",
+      "email",
+      "inbox",
+      "download",
+      "信封",
+      "邮箱",
+      "邮件",
+      "下载",
+    ],
+    "mail-forbid": [
+      "envelope",
+      "email",
+      "inbox",
+      "privacy",
+      "信封",
+      "邮箱",
+      "邮件",
+      "禁止",
+    ],
+    "mail-lock": [
+      "envelope",
+      "email",
+      "inbox",
+      "lock",
+      "信封",
+      "邮箱",
+      "邮件",
+      "加密",
+    ],
+    "mail-settings": [
+      "envelope",
+      "email",
+      "inbox",
+      "settings",
+      "信封",
+      "邮箱",
+      "邮件",
+      "设置",
+    ],
+    "mail-star": [
+      "envelope",
+      "email",
+      "inbox",
+      "favorite",
+      "信封",
+      "邮箱",
+      "邮件",
+      "收藏",
+      "喜欢",
+    ],
+    "mail-volume": [
+      "envelope",
+      "email",
+      "inbox",
+      "promotional email",
+      "email campaign",
+      "subscription",
+      "信封",
+      "邮箱",
+      "邮件",
+      "收件箱",
+      "推广",
+      "订阅",
+    ],
+    inbox: ["收件箱"],
+    "inbox-archive": ["收件箱", "归档", "收纳"],
+    "inbox-unarchive": [
+      "unzip",
+      "unpack",
+      "extract",
+      "收件箱",
+      "取消归档",
+      "还原",
+      "解压缩",
+    ],
+    cloud: ["weather", "云端"],
+    "cloud-off": [
+      "offline-mode",
+      "connection-fail",
+      "slash",
+      "weather",
+      "云端",
+      "断网",
+      "无信号",
+      "连接失败",
+    ],
+    attachment: ["annex", "paperclip", "附件", "曲别针"],
+    profile: ["id", "档案", "资料", "身份证", "证件"],
+    archive: ["box", "收纳", "归档", "存档", "盒子", "纸箱"],
+    "archive-drawer": ["night table", "收纳", "抽屉", "归档", "存档", "床头柜"],
+    at: ["@", "mention", "提到", "在"],
+    award: ["medal", "achievement", "badge", "成就", "奖牌", "金牌", "勋章"],
+    medal: ["award", "achievement", "badge", "成就", "奖牌", "金牌", "勋章"],
+    "medal-2": [
+      "award",
+      "achievement",
+      "badge",
+      "成就",
+      "奖牌",
+      "金牌",
+      "勋章",
+    ],
+    "bar-chart": ["statistics", "rhythm", "柱状图", "统计", "韵律", "节奏"],
+    "bar-chart-horizontal": [
+      "statistics",
+      "rhythm",
+      "柱状图",
+      "统计",
+      "韵律",
+      "节奏",
+    ],
+    "bar-chart-2": ["statistics", "rhythm", "柱状图", "统计", "排行", "节奏"],
+    "bar-chart-box": ["statistics", "rhythm", "柱状图", "统计", "节奏"],
+    "bar-chart-grouped": ["statistics", "rhythm", "柱状图", "统计", "分组"],
+    "bubble-chart": ["data", "analysis", "statistics", "气泡图", "统计"],
+    "pie-chart": ["data", "analysis", "饼图", "饼状图", "数据", "分析"],
+    "pie-chart-2": ["data", "analysis", "饼图", "饼状图", "数据", "分析"],
+    "pie-chart-box": ["data", "analysis", "饼图", "饼状图", "数据", "分析"],
+    "donut-chart": ["data", "analysis", "环形图", "数据", "分析"],
+    "line-chart": ["data", "analysis", "stats", "折线图", "数据", "分析"],
+    bookmark: ["tag", "书签", "标记"],
+    "bookmark-2": ["tag", "书签", "标记"],
+    "bookmark-3": ["tag", "书签", "标记", "荣誉"],
+    briefcase: ["bag", "baggage", "公文包", "行李箱", "旅行箱", "皮包"],
+    "briefcase-2": ["bag", "baggage", "公文包", "行李箱", "旅行箱", "皮包"],
+    "briefcase-3": ["bag", "baggage", "公文包", "行李箱", "旅行箱", "皮包"],
+    "briefcase-4": ["bag", "baggage", "公文包", "行李箱", "旅行箱", "皮包"],
+    "briefcase-5": ["bag", "baggage", "公文包", "行李箱", "旅行箱", "皮包"],
+    calculator: ["计算器", "计算机"],
+    calendar: [
+      "date",
+      "plan",
+      "schedule",
+      "agenda",
+      "日历",
+      "日期",
+      "月份",
+      "计划",
+      "日程",
+      "时间表",
+    ],
+    "calendar-2": [
+      "date",
+      "plan",
+      "schedule",
+      "agenda",
+      "日历",
+      "日期",
+      "月份",
+      "计划",
+      "日程",
+      "时间表",
+    ],
+    "calendar-event": [
+      "date",
+      "plan",
+      "schedule",
+      "agenda",
+      "日历",
+      "日期",
+      "月份",
+      "计划",
+      "日程",
+      "时间表",
+    ],
+    "calendar-todo": [
+      "date",
+      "plan",
+      "schedule",
+      "agenda",
+      "日历",
+      "日期",
+      "月份",
+      "计划",
+      "日程",
+      "时间表",
+    ],
+    "calendar-check": [
+      "date",
+      "plan",
+      "schedule",
+      "agenda",
+      "check-in",
+      "punch",
+      "日历",
+      "日期",
+      "月份",
+      "计划",
+      "日程",
+      "时间表",
+      "签到",
+      "打卡",
+    ],
+    "customer-service": ["headset", "客服", "售后", "耳机", "耳麦"],
+    "customer-service-2": ["headset", "客服", "售后", "耳机", "耳麦"],
+    flag: ["banner", "pin", "旗帜", "旗子", "国旗", "标记"],
+    "flag-2": ["banner", "pin", "旗帜", "旗子", "国旗", "标记"],
+    global: [
+      "earth",
+      "union",
+      "world",
+      "language",
+      "地球",
+      "联合",
+      "世界",
+      "全球",
+      "语言",
+    ],
+    honour: ["honor", "glory", "锦旗", "荣誉", "荣耀", "军衔"],
+    links: ["connection", "address", "联系", "链接", "地址"],
+    printer: ["打印机"],
+    "printer-cloud": ["打印机", "云打印"],
+    "record-mail": ["voice mail", "tape", "录音", "留言", "语音信箱", "磁带"],
+    reply: ["forward", "回复全部", "回复所有"],
+    "reply-all": ["forward", "回复", "答复", "留言", "转发"],
+    "send-plane": ["发送", "纸飞机"],
+    "send-plane-2": ["发送", "纸飞机"],
+    projector: ["projection", "meeting", "投影仪", "会议室"],
+    "projector-2": ["projection", "meeting", "投影仪", "会议室", "极米"],
+    slideshow: [
+      "presentation",
+      "meeting",
+      "PPT",
+      "keynote",
+      "投影",
+      "放映",
+      "演示",
+      "演讲",
+      "幻灯片",
+      "会议室",
+    ],
+    "slideshow-2": [
+      "presentation",
+      "meeting",
+      "投影",
+      "放映",
+      "演示",
+      "演讲",
+      "幻灯片",
+      "会议室",
+    ],
+    "slideshow-3": [
+      "presentation",
+      "meeting",
+      "投影",
+      "放映",
+      "演示",
+      "演讲",
+      "视频会议",
+      "幻灯片",
+      "会议室",
+    ],
+    "slideshow-4": [
+      "presentation",
+      "meeting",
+      "投影",
+      "放映",
+      "演示",
+      "演讲",
+      "可视对讲",
+      "幻灯片",
+      "会议室",
+    ],
+    window: ["browser", "program", "web", "窗口", "浏览器", "程序", "网站"],
+    "window-2": ["browser", "program", "web", "窗口", "浏览器", "程序", "网站"],
+    stack: ["layers", "图层", "叠加", "堆栈"],
+    service: [
+      "heart",
+      "handshake",
+      "cooperation",
+      "服务",
+      "握手",
+      "心",
+      "合作",
+    ],
+    registered: ["注册", "商标"],
+    trademark: ["注册", "商标"],
+    advertisement: ["ad", "广告", "推广"],
+    copyleft: ["著佐权"],
+    copyright: ["版权"],
+    "creative-commons": ["知识共享"],
+    "creative-commons-by": [
+      "attribution",
+      "copyright",
+      "版权",
+      "知识共享",
+      "署名",
+    ],
+    "creative-commons-nc": [
+      "noncommercial",
+      "copyright",
+      "版权",
+      "知识共享",
+      "非商业用途",
+    ],
+    "creative-commons-nd": [
+      "no derivative works",
+      "copyright",
+      "版权",
+      "知识共享",
+      "禁止演绎",
+    ],
+    "creative-commons-sa": [
+      "share alike",
+      "copyright",
+      "版权",
+      "知识共享",
+      "相同方式共享",
+    ],
+    "creative-commons-zero": ["cc0", "copyright", "版权", "知识共享"],
+  },
+  Communication: {
+    "chat-1": ["message", "reply", "comment", "消息", "聊天", "回复", "评论"],
+    "chat-2": ["message", "reply", "comment", "消息", "聊天", "回复", "评论"],
+    "chat-3": ["message", "reply", "comment", "消息", "聊天", "回复", "评论"],
+    "chat-4": ["message", "reply", "comment", "消息", "聊天", "回复", "评论"],
+    message: ["chat", "comment", "reply", "消息", "聊天", "回复", "评论"],
+    "message-2": ["chat", "reply", "comment", "消息", "聊天", "回复", "评论"],
+    "message-3": ["chat", "reply", "comment", "消息", "聊天", "回复", "评论"],
+    "chat-check": [
+      "message",
+      "reply",
+      "comment",
+      "消息",
+      "聊天",
+      "回复",
+      "评论",
+      "已阅",
+    ],
+    "chat-delete": [
+      "message",
+      "comment",
+      "消息",
+      "聊天",
+      "回复",
+      "评论",
+      "清除",
+      "删除",
+    ],
+    "chat-forward": ["message", "comment", "消息", "聊天", "转发"],
+    "chat-upload": ["message", "comment", "消息", "聊天", "上传"],
+    "chat-download": ["message", "comment", "消息", "下载"],
+    "chat-new": ["message", "reply", "comment", "消息", "聊天", "回复", "评论"],
+    "chat-settings": [
+      "message",
+      "comment",
+      "消息",
+      "聊天",
+      "回复",
+      "评论",
+      "设置",
+    ],
+    "chat-smile": [
+      "message",
+      "reply",
+      "comment",
+      "消息",
+      "聊天",
+      "回复",
+      "评论",
+    ],
+    "chat-smile-2": [
+      "message",
+      "reply",
+      "comment",
+      "消息",
+      "聊天",
+      "回复",
+      "评论",
+    ],
+    "chat-smile-3": [
+      "message",
+      "reply",
+      "comment",
+      "消息",
+      "聊天",
+      "回复",
+      "评论",
+    ],
+    "chat-heart": [
+      "message",
+      "reply",
+      "comment",
+      "消息",
+      "聊天",
+      "回复",
+      "评论",
+      "心",
+      "点赞",
+      "收藏",
+    ],
+    "chat-off": [
+      "message",
+      "reply",
+      "comment",
+      "slash",
+      "消息",
+      "聊天",
+      "回复",
+      "评论",
+      "禁止",
+      "关闭",
+    ],
+    feedback: ["message", "comment", "消息", "聊天", "回复", "评论", "反馈"],
+    discuss: [
+      "message",
+      "reply",
+      "comment",
+      "消息",
+      "聊天",
+      "回复",
+      "评论",
+      "讨论",
+      "群聊",
+    ],
+    "question-answer": [
+      "message",
+      "reply",
+      "comment",
+      "消息",
+      "聊天",
+      "回复",
+      "评论",
+      "讨论",
+      "群聊",
+    ],
+    questionnaire: [
+      "message",
+      "comment",
+      "help",
+      "消息",
+      "聊天",
+      "回复",
+      "评论",
+      "讨论",
+      "调查问卷",
+      "帮助",
+    ],
+    "video-chat": ["message", "comment", "消息", "视频聊天"],
+    "chat-voice": ["message", "comment", "消息", "语音消息"],
+    "chat-quote": ["message", "reply", "comment", "消息", "引用回复"],
+    "chat-follow-up": ["message", "reply", "comment", "消息", "+1", "跟帖"],
+    "chat-poll": [
+      "message",
+      "vote",
+      "questionnaire",
+      "消息",
+      "投票",
+      "问卷调查",
+    ],
+    "chat-history": ["message", "历史消息", "消息记录"],
+    "chat-private": ["message", "私密消息", "密聊"],
+  },
+  Design: {
+    pencil: ["edit", "铅笔", "编辑"],
+    edit: ["pencil", "铅笔", "编辑"],
+    "edit-2": ["pencil", "铅笔", "编辑"],
+    "ball-pen": ["圆珠笔"],
+    "quill-pen": ["羽毛笔", "钢笔", "编辑"],
+    "pen-nib": ["钢笔", "笔尖"],
+    "ink-bottle": ["墨水瓶"],
+    "mark-pen": ["马克笔"],
+    markup: ["标记", "马克"],
+    "edit-box": ["编辑"],
+    "edit-circle": ["编辑"],
+    sip: ["吸管", "取色器"],
+    brush: ["笔刷", "画笔", "刷子"],
+    "brush-2": ["刷子"],
+    "brush-3": ["刷子"],
+    "brush-4": ["刷子"],
+    "paint-brush": ["填色", "填充", "刷子"],
+    contrast: ["brightness", "tonalit", "对比度", "亮度", "色调"],
+    "contrast-2": [
+      "moon",
+      "dark",
+      "brightness",
+      "tonalit",
+      "月亮",
+      "夜间",
+      "对比度",
+      "亮度",
+      "色调",
+    ],
+    drop: ["water", "blur", "模糊", "水", "滴"],
+    "blur-off": ["water", "drop", "slash", "模糊", "水", "滴", "禁止", "关闭"],
+    "contrast-drop": [
+      "water",
+      "brightness",
+      "tonalit",
+      "水",
+      "对比度",
+      "亮度",
+      "色调",
+      "滴",
+    ],
+    "contrast-drop-2": [
+      "water",
+      "brightness",
+      "tonalit",
+      "水",
+      "对比度",
+      "亮度",
+      "色调",
+      "滴",
+    ],
+    compasses: ["圆规"],
+    "compasses-2": ["圆规"],
+    scissors: ["剪刀", "裁剪"],
+    "scissors-cut": ["剪刀", "裁剪"],
+    "scissors-2": ["剪刀", "裁剪", "截屏"],
+    slice: ["knife", "切图", "切片", "刀"],
+    eraser: ["remove formatting", "橡皮", "擦除", "清除格式"],
+    ruler: ["尺子"],
+    "ruler-2": ["尺子"],
+    "pencil-ruler": ["design", "铅笔", "尺子", "文具", "设计"],
+    "pencil-ruler-2": ["design", "铅笔", "尺子", "文具", "设计"],
+    "t-box": ["文字", "字体", "字号"],
+    "input-method": ["输入法", "文字"],
+    artboard: ["grid", "crop", "画板", "裁切"],
+    "artboard-2": ["画板"],
+    crop: ["裁切"],
+    "crop-2": ["裁切"],
+    screenshot: ["capture", "屏幕截图", "截屏"],
+    "screenshot-2": ["capture", "屏幕截图", "截屏"],
+    "drag-move": ["arrow", "拖拽", "移动", "箭头"],
+    "drag-move-2": ["arrow", "拖拽", "移动", "箭头"],
+    focus: ["aim", "target", "焦点", "聚焦", "目标", "靶心"],
+    "focus-2": ["aim", "target", "bullseye", "焦点", "聚焦", "目标", "靶心"],
+    "focus-3": ["aim", "target", "bullseye", "焦点", "聚焦", "目标", "靶心"],
+    paint: ["填色", "填充", "油漆桶"],
+    palette: ["调色盘", "色板"],
+    pantone: ["色板", "潘通色", "色号"],
+    shape: ["border", "形状", "描边", "边框"],
+    "shape-2": ["border", "形状", "描边", "边框"],
+    magic: [
+      "fantasy",
+      "magic stick",
+      "beautify",
+      "魔法棒",
+      "美化",
+      "幻想",
+      "魔幻",
+    ],
+    anticlockwise: ["rotate", "left", "左翻转", "左旋转"],
+    "anticlockwise-2": ["rotate", "left", "左翻转", "左旋转"],
+    clockwise: ["rotate", "right", "右翻转", "右旋转"],
+    "clockwise-2": ["rotate", "right", "右翻转", "右旋转"],
+    hammer: ["锤子"],
+    tools: ["settings", "工具", "设置"],
+    "drag-drop": ["drag and drop", "mouse", "拖拽", "鼠标"],
+    table: ["表格"],
+    "table-alt": ["表格"],
+    layout: ["布局"],
+    "layout-2": ["collage", "布局", "拼贴画"],
+    "layout-3": ["collage", "布局", "拼贴画"],
+    "layout-4": ["collage", "布局", "拼贴画"],
+    "layout-5": ["collage", "布局", "拼贴画"],
+    "layout-6": ["collage", "布局", "拼贴画"],
+    "layout-column": ["左右布局"],
+    "layout-row": ["上下布局"],
+    "layout-top": ["顶部布局", "顶部导航"],
+    "layout-right": ["右侧布局", "右侧导航"],
+    "layout-bottom": ["底部布局", "底部导航"],
+    "layout-left": ["左侧布局", "左侧导航"],
+    "layout-top-2": ["顶部布局", "顶部导航"],
+    "layout-right-2": ["右侧布局", "右侧导航"],
+    "layout-bottom-2": ["底部布局", "底部导航"],
+    "layout-left-2": ["左侧布局", "左侧导航"],
+    "layout-grid": ["卡片布局", "网格"],
+    "layout-masonry": ["collage", "瀑布流布局", "拼贴画"],
+    collage: ["瀑布流布局", "拼贴画"],
+    grid: ["table", "网格", "表格"],
+  },
+  Development: {
+    bug: ["虫子"],
+    "bug-2": ["虫子"],
+    code: ["代码", "编程"],
+    "code-s": ["代码", "编程"],
+    "code-s-slash": ["代码", "编程"],
+    "code-box": ["代码", "编程"],
+    "terminal-box": ["code", "command line", "终端", "代码", "命令行"],
+    terminal: ["code", "command line", "终端", "代码", "命令行"],
+    "terminal-window": ["code", "command line", "终端", "代码", "命令行"],
+    parentheses: ["code", "math", "小括号"],
+    brackets: ["code", "math", "中括号"],
+    braces: ["code", "math", "大括号", "花括号"],
+    command: ["apple key", "花键", "苹果键"],
+    cursor: ["mouse", "指针", "鼠标"],
+    "git-commit": ["node", "提交"],
+    "git-pull-request": ["合并申请"],
+    "git-merge": ["合并"],
+    "git-branch": ["分支"],
+    "git-repository": ["仓库"],
+    "git-repository-commits": ["仓库", "提交"],
+    "git-repository-private": ["私密仓库", "私人仓库"],
+    html5: ["html", "h5"],
+    css3: ["css"],
+  },
+  Device: {
+    tv: ["电视"],
+    "tv-2": ["monitor", "电视", "显示器"],
+    computer: ["monitor", "电脑", "显示器"],
+    mac: ["monitor", "显示器"],
+    macbook: ["laptop", "笔记本"],
+    cellphone: ["手机", "电话"],
+    smartphone: ["mobile", "手机"],
+    tablet: ["平板电脑"],
+    device: ["设备"],
+    phone: ["电话"],
+    database: ["storage", "数据库", "存储"],
+    "database-2": ["storage", "数据库", "存储"],
+    server: ["服务器"],
+    "hard-drive": ["disc", "storage", "硬盘", "存储"],
+    "hard-drive-2": ["disc", "server", "storage", "硬盘", "服务器", "存储"],
+    install: ["安装"],
+    uninstall: ["卸载"],
+    save: ["floppy", "保存", "软盘"],
+    "save-2": ["floppy", "保存", "软盘"],
+    "save-3": ["floppy", "保存", "软盘"],
+    "sd-card": ["内存卡"],
+    "sd-card-mini": ["内存卡"],
+    "sim-card": ["电话卡"],
+    "sim-card-2": ["电话卡"],
+    "dual-sim-1": ["sim card", "电话卡", "卡槽", "双卡双待"],
+    "dual-sim-2": ["sim card", "电话卡", "卡槽", "双卡双待"],
+    "u-disk": ["U盘", "优盘"],
+    battery: ["电池"],
+    "battery-charge": ["电池", "充电"],
+    "battery-low": ["电池", "低电量"],
+    "battery-2": ["电池"],
+    "battery-2-charge": ["电池", "充电"],
+    "battery-saver": ["电池", "省电模式"],
+    "battery-share": ["电池共享", "共享电量"],
+    cast: ["mirroring", "投屏", "无线", "广播"],
+    airplay: ["mirroring", "投屏", "无线"],
+    cpu: ["中央处理器"],
+    gradienter: ["水平仪"],
+    keyboard: ["input", "键盘", "输入"],
+    "keyboard-box": ["input", "键盘", "输入"],
+    mouse: ["鼠标"],
+    sensor: ["capacitor", "传感器", "电容器"],
+    router: [
+      "wifi",
+      "signal tower",
+      "radio",
+      "station",
+      "路由器",
+      "信号塔",
+      "广播",
+      "基站",
+      "流量",
+    ],
+    radar: ["satellite receiver", "雷达", "卫星接收器", "锅"],
+    gamepad: ["consoles", "controller", "游戏手柄"],
+    "remote-control": ["controller", "遥控器"],
+    "remote-control-2": ["controller", "遥控器"],
+    "device-recover": ["恢复出厂设置"],
+    hotspot: ["手机热点"],
+    "phone-find": ["找回手机"],
+    "phone-lock": ["锁定手机"],
+    "rotate-lock": ["锁定旋转屏幕"],
+    restart: ["reload", "refresh", "重启"],
+    "shut-down": ["power off", "关机"],
+    fingerprint: ["指纹"],
+    "fingerprint-2": ["指纹"],
+    barcode: ["scan", "扫码", "条形码", "条码"],
+    "barcode-box": ["scan", "扫码", "条形码", "条码"],
+    "qr-code": ["二维码"],
+    "qr-scan": ["二维码", "扫描"],
+    "qr-scan-2": ["二维码", "扫描"],
+    scan: ["扫描"],
+    "scan-2": ["扫描"],
+    rss: ["feed", "subscribe", "订阅"],
+    gps: ["signal", "定位", "信号"],
+    "base-station": [
+      "wifi",
+      "signal tower",
+      "router",
+      "cast",
+      "基站",
+      "信号塔",
+      "路由器",
+      "广播",
+      "流量",
+    ],
+    bluetooth: ["wireless", "蓝牙", "无线"],
+    "bluetooth-connect": ["wireless", "蓝牙", "连接", "无线"],
+    wifi: ["无线网"],
+    "wifi-off": [
+      "slash",
+      "offline",
+      "connection-fail",
+      "无线网",
+      "关闭",
+      "断网",
+      "链接失败",
+    ],
+    "signal-wifi": ["cellular", "strength", "无线网", "信号"],
+    "signal-wifi-1": ["cellular", "strength", "无线网", "信号"],
+    "signal-wifi-2": ["cellular", "strength", "无线网", "信号"],
+    "signal-wifi-3": ["cellular", "strength", "无线网", "信号"],
+    "signal-wifi-error": [
+      "cellular",
+      "offline",
+      "connection-fail",
+      "无线网",
+      "断网",
+      "链接失败",
+      "无信号",
+    ],
+    "signal-wifi-off": [
+      "cellular",
+      "slash",
+      "offline",
+      "connection-fail",
+      "无线网",
+      "关闭",
+      "断网",
+      "链接失败",
+    ],
+    "wireless-charging": ["power", "flash", "无线充电", "闪充"],
+    "dashboard-2": ["仪表盘"],
+    "dashboard-3": ["仪表盘"],
+    usb: ["优盘"],
+  },
+  Document: {
+    file: ["new", "paper", "文件", "文档", "新建"],
+    "file-2": ["new", "paper", "文件", "文档", "新建"],
+    "file-3": ["new", "paper", "文件", "文档", "新建"],
+    "file-4": ["new", "paper", "文件", "文档", "新建"],
+    "sticky-note": ["new", "paper", "文件", "文档", "新建", "便签纸", "便利贴"],
+    "sticky-note-2": [
+      "new",
+      "paper",
+      "文件",
+      "文档",
+      "新建",
+      "便签纸",
+      "便利贴",
+    ],
+    "file-edit": ["文件", "文档", "编辑"],
+    draft: ["草稿箱", "文件", "文档", "编辑"],
+    "file-paper": ["文件", "文档", "纸", "谱"],
+    "file-paper-2": ["文件", "文档", "纸", "谱"],
+    "file-text": ["文件", "文档", "文本"],
+    "file-list": ["清单", "列表"],
+    "file-list-2": ["清单", "列表"],
+    "file-list-3": ["newspaper", "清单", "列表", "报纸"],
+    bill: ["账单"],
+    "file-copy": ["duplicate", "clone", "复制", "克隆"],
+    "file-copy-2": ["duplicate", "clone", "复制", "克隆"],
+    clipboard: ["copy", "复制", "剪切板"],
+    survey: ["research", "questionnaire", "调查", "问卷", "调研"],
+    article: ["newspaper", "文章", "报纸"],
+    newspaper: ["报纸"],
+    "file-zip": ["7z", "rar", "压缩包"],
+    "file-mark": ["文件", "文档", "标记"],
+    task: ["todo", "任务", "待办"],
+    todo: ["待办"],
+    book: ["read", "dictionary", "booklet", "书", "阅读", "字典", "小册子"],
+    "book-mark": [
+      "read",
+      "dictionary",
+      "booklet",
+      "书",
+      "阅读",
+      "字典",
+      "小册子",
+      "书签",
+    ],
+    "book-2": ["read", "dictionary", "booklet", "书", "阅读", "字典", "小册子"],
+    "book-3": ["read", "dictionary", "booklet", "书", "阅读", "字典", "小册子"],
+    "book-open": [
+      "read",
+      "booklet",
+      "magazine",
+      "书",
+      "阅读",
+      "小册子",
+      "杂志",
+    ],
+    "book-read": ["booklet", "magazine", "书", "阅读", "小册子", "杂志"],
+    "contacts-book": ["通讯录", "联系人"],
+    "contacts-book-2": ["通讯录", "联系人"],
+    "contacts-book-upload": ["upload", "通讯录", "联系人", "上传"],
+    booklet: ["notebook", "手册", "笔记本", "小册子"],
+    "file-code": ["config", "文件", "文档", "代码", "脚本", "配置文件"],
+    "file-pdf": ["文件", "文档"],
+    "file-word": ["文档"],
+    "file-ppt": ["文件", "文档"],
+    "file-excel": ["文档", "表单"],
+    "file-word-2": ["文档"],
+    "file-ppt-2": ["文件", "文档"],
+    "file-excel-2": ["文档", "表单"],
+    "file-hwp": ["文件", "文档", "hangul word processor"],
+    keynote: ["演示文稿", "幻灯片", "讲演"],
+    numbers: ["表格"],
+    pages: ["文稿"],
+    "file-search": ["文件", "文档", "搜索"],
+    "file-add": ["new", "文件", "文档", "新建"],
+    "file-reduce": ["文件", "文档", "减"],
+    "file-settings": ["文件", "文档", "设置"],
+    "file-upload": ["文件", "文档", "上传"],
+    "file-transfer": ["文件", "文档", "传输"],
+    "file-download": ["文件", "文档", "下载"],
+    "file-lock": ["文件", "文档", "锁"],
+    "file-chart": ["report", "文件", "文档", "柱状图", "报表"],
+    "file-chart-2": ["report", "文件", "文档", "饼图", "报表"],
+    "file-music": ["文件", "文档", "音乐"],
+    "file-gif": ["文件", "文档", "动图"],
+    "file-forbid": ["文件", "文档", "禁用"],
+    "file-info": ["文件", "文档", "信息"],
+    "file-warning": ["alert", "文件", "文档", "警告", "提醒"],
+    "file-unknow": ["文件", "文档", "未知", "问号"],
+    "file-user": ["文件", "文档", "用户"],
+    "file-shield": [
+      "protected",
+      "secured",
+      "文件",
+      "文档",
+      "盾牌",
+      "保护",
+      "安全",
+    ],
+    "file-shield-2": [
+      "protected",
+      "secured",
+      "文件",
+      "文档",
+      "盾牌",
+      "保护",
+      "安全",
+    ],
+    "file-damage": [
+      "breakdown",
+      "broken",
+      "文件",
+      "文档",
+      "损坏",
+      "破损",
+      "破裂",
+    ],
+    "file-history": ["record", "文件", "文档", "记录", "历史"],
+    "file-shred": [
+      "shredder",
+      "shred",
+      "destroy",
+      "cut",
+      "文档",
+      "销毁",
+      "碎纸机",
+      "破裂",
+      "粉碎",
+    ],
+    "file-cloud": ["文件", "文档", "云"],
+    folder: ["directory", "file", "文件夹", "目录", "文档"],
+    "folder-2": ["directory", "file", "文件夹", "目录", "文档"],
+    "folder-3": ["directory", "file", "文件夹", "目录", "文档"],
+    "folder-4": ["directory", "file", "文件夹", "目录", "文档"],
+    "folder-5": ["directory", "file", "文件夹", "目录", "文档"],
+    folders: ["directory", "file", "文件夹", "目录", "文档", "批量"],
+    "folder-add": ["directory", "file", "文件夹", "目录", "文档", "添加"],
+    "folder-reduce": ["directory", "file", "文件夹", "目录", "文档", "减"],
+    "folder-settings": ["directory", "file", "文件夹", "目录", "文档", "设置"],
+    "folder-upload": ["directory", "file", "文件夹", "目录", "文档", "上传"],
+    "folder-transfer": ["directory", "file", "文件夹", "目录", "文档", "传输"],
+    "folder-download": ["directory", "file", "文件夹", "目录", "文档", "下载"],
+    "folder-lock": ["directory", "file", "文件夹", "目录", "文档", "锁"],
+    "folder-chart": ["report", "文件夹", "目录", "文档", "柱状图", "报表"],
+    "folder-chart-2": ["report", "文件夹", "目录", "文档", "饼图", "报表"],
+    "folder-music": ["directory", "file", "文件夹", "目录", "文档", "音乐"],
+    "folder-forbid": ["directory", "file", "文件夹", "目录", "文档", "禁用"],
+    "folder-info": ["directory", "file", "文件夹", "目录", "文档", "信息"],
+    "folder-warning": [
+      "alert",
+      "directory",
+      "file",
+      "文件夹",
+      "目录",
+      "文档",
+      "警告",
+      "提醒",
+    ],
+    "folder-unknow": ["directory", "file", "文件夹", "目录", "文档", "未知"],
+    "folder-user": ["directory", "file", "文件夹", "目录", "文档", "用户"],
+    "folder-shield": [
+      "directory",
+      "file",
+      "protected",
+      "secured",
+      "文件夹",
+      "目录",
+      "文档",
+      "保护",
+      "盾牌",
+      "安全",
+    ],
+    "folder-shield-2": [
+      "directory",
+      "file",
+      "protected",
+      "secured",
+      "文件夹",
+      "目录",
+      "文档",
+      "保护",
+      "盾牌",
+      "安全",
+    ],
+    "folder-shared": ["directory", "file", "文件夹", "目录", "文档", "分享"],
+    "folder-received": ["directory", "file", "文件夹", "目录", "文档", "接收"],
+    "folder-open": ["directory", "file", "文件夹", "目录", "文档", "打开"],
+    "folder-keyhole": [
+      "directory",
+      "encryption",
+      "file",
+      "文件夹",
+      "目录",
+      "文档",
+      "打开",
+      "加密文档",
+    ],
+    "folder-zip": [
+      "directory",
+      "file",
+      "文件夹",
+      "目录",
+      "文档",
+      "打开",
+      "压缩",
+    ],
+    "folder-history": [
+      "directory",
+      "file",
+      "record",
+      "文件夹",
+      "目录",
+      "文档",
+      "记录",
+      "历史",
+    ],
+    markdown: ["arrow", "箭头", "下"],
+  },
+  Editor: {
+    bold: ["加粗"],
+    italic: ["斜体"],
+    heading: ["标题"],
+    text: ["字体"],
+    "font-color": ["文字色"],
+    "font-size": ["字号", "字体大小"],
+    "font-size-2": ["字号", "字体大小"],
+    underline: ["下划线"],
+    emphasis: ["着重号"],
+    "emphasis-cn": ["着重号"],
+    strikethrough: ["remove formatting", "删除线"],
+    "strikethrough-2": ["remove formatting", "删除线"],
+    "format-clear": ["remove formatting", "清除格式"],
+    "align-left": ["左对齐"],
+    "align-center": ["居中对齐"],
+    "align-right": ["右对齐"],
+    "align-justify": ["排列对齐"],
+    "align-top": ["顶部对齐"],
+    "align-vertically": ["垂直对齐"],
+    "align-bottom": ["底部对齐"],
+    "list-check": ["check list", "清单列表"],
+    "list-check-2": ["check list", "清单列表"],
+    "list-ordered": ["number list", "有序列表"],
+    "list-unordered": ["bullet list", "无序列表"],
+    "indent-decrease": ["indent more", "缩进"],
+    "indent-increase": ["indent less", "缩进"],
+    "line-height": ["行高"],
+    "text-spacing": ["字间距"],
+    "text-wrap": ["文本换行"],
+    "attachment-2": ["annex", "paperclip", "附件", "曲别针"],
+    link: ["connection", "address", "联系", "链接", "地址"],
+    "link-unlink": ["connection", "remove address", "去除链接"],
+    "link-m": ["connection", "address", "联系", "链接", "地址"],
+    "link-unlink-m": ["connection", "remove address", "去除链接"],
+    separator: ["分割线"],
+    space: ["空格"],
+    "page-separator": ["insert", "分页符", "插入"],
+    "code-view": ["代码视图"],
+    "double-quotes-l": ["left", "quotaion marks", "双引号"],
+    "double-quotes-r": ["right", "quotaion marks", "双引号"],
+    "single-quotes-l": ["left", "quotaion marks", "单引号"],
+    "single-quotes-r": ["right", "quotaion marks", "单引号"],
+    "table-2": ["表格"],
+    subscript: ["角标", "下标", "脚注"],
+    "subscript-2": ["角标", "下标", "脚注"],
+    superscript: ["角标", "上标"],
+    "superscript-2": ["角标", "上标"],
+    paragraph: ["段落"],
+    "text-direction-l": ["文本左对齐"],
+    "text-direction-r": ["文本左对齐"],
+    functions: ["功能"],
+    omega: ["Ω", "特殊符号"],
+    hashtag: ["#", "井号"],
+    asterisk: ["*", "星号"],
+    "question-mark": ["问号"],
+    translate: ["translator", "翻译"],
+    "translate-2": ["translator", "翻译"],
+    "a-b": ["a/b testing", "ab testing", "ab测试"],
+    "english-input": ["英文输入法"],
+    "pinyin-input": ["拼音输入法"],
+    "wubi-input": ["五笔输入法"],
+    "input-cursor-move": ["移动输入光标"],
+    "number-1": ["1", "一", "数字"],
+    "number-2": ["2", "二", "数字"],
+    "number-3": ["3", "三", "数字"],
+    "number-4": ["4", "四", "数字"],
+    "number-5": ["5", "五", "数字"],
+    "number-6": ["6", "六", "数字"],
+    "number-7": ["7", "七", "数字"],
+    "number-8": ["8", "八", "数字"],
+    "number-9": ["9", "九", "数字"],
+    "number-0": ["0", "零", "数字"],
+    "sort-asc": [
+      "ranking",
+      "ordering",
+      "sorting",
+      "ascending",
+      "descending",
+      "升序排列",
+      "排序",
+    ],
+    "sort-desc": ["ranking", "ordering", "降序排列", "排序"],
+    "bring-forward": ["arrange", "层级", "向上一层"],
+    "send-backward": ["arrange", "层级", "向下一层"],
+    "bring-to-front": ["arrange", "层级", "移到最前面"],
+    "send-to-back": ["arrange", "层级", "移到最后面"],
+    "h-1": ["heading", "一级标题"],
+    "h-2": ["heading", "一级标题"],
+    "h-3": ["heading", "一级标题"],
+    "h-4": ["heading", "一级标题"],
+    "h-5": ["heading", "一级标题"],
+    "h-6": ["heading", "一级标题"],
+    "insert-column-left": ["添加列", "左侧"],
+    "insert-column-right": ["添加列", "右侧"],
+    "insert-row-top": ["添加行", "顶部"],
+    "insert-row-bottom": ["添加行", "底部"],
+    "delete-column": ["删除列", "底部"],
+    "delete-row": ["添加行", "底部"],
+    "merge-cells-horizontal": ["合并单元格"],
+    "merge-cells-vertical": ["合并单元格"],
+    "split-cells-horizontal": ["拆分单元格"],
+    "split-cells-vertical": ["拆分单元格"],
+    "flow-chart": ["流程图"],
+    "mind-map": ["mindmap", "脑图", "思维导图"],
+    "node-tree": ["节点", "层级关系图"],
+    "organization-chart": ["组织架构图", "局域网"],
+    "rounded-corner": ["圆角"],
+  },
+  Finance: {
+    wallet: ["钱包", "卡包"],
+    "wallet-2": ["钱包", "卡包"],
+    "wallet-3": ["钱包", "卡包"],
+    "bank-card": [
+      "credit",
+      "purchase",
+      "payment",
+      "cc",
+      "银行卡",
+      "信用卡",
+      "购买",
+      "消费",
+      "支付",
+    ],
+    "bank-card-2": [
+      "credit",
+      "purchase",
+      "payment",
+      "cc",
+      "银行卡",
+      "信用卡",
+      "购买",
+      "消费",
+      "支付",
+    ],
+    "secure-payment": [
+      "credit",
+      "purchase",
+      "payment",
+      "cc",
+      "银行卡",
+      "信用卡",
+      "购买",
+      "消费",
+      "支付",
+      "安全",
+    ],
+    refund: ["credit card", "repayment", "cc", "银行卡", "信用卡还款"],
+    "refund-2": ["credit card", "repayment", "cc", "银行卡", "信用卡还款"],
+    safe: ["保险柜", "保险箱"],
+    "safe-2": ["保险柜", "保险箱"],
+    "price-tag": ["label", "标签", "价签"],
+    "price-tag-2": ["label", "标签", "价签"],
+    "price-tag-3": ["label", "标签", "价签"],
+    ticket: ["coupon", "票", "优惠券", "代金券"],
+    "ticket-2": ["coupon", "票", "优惠券", "代金券"],
+    coupon: ["ticket", "票", "优惠券", "代金券"],
+    "coupon-2": ["ticket", "票", "优惠券", "代金券"],
+    "coupon-3": ["ticket", "票", "优惠券", "代金券"],
+    "coupon-4": ["优惠券", "代金券"],
+    "coupon-5": ["优惠券", "代金券"],
+    "shopping-bag": ["purse", "购物袋", "购买", "消费", "商城"],
+    "shopping-bag-2": ["购物袋", "购买", "消费", "商城"],
+    "shopping-bag-3": ["购物袋", "购买", "消费", "商城"],
+    "shopping-basket": ["购物篮", "购买", "消费", "商城"],
+    "shopping-basket-2": ["购物篮", "购买", "消费", "商城"],
+    "shopping-cart": ["购物车", "购买", "消费", "商城"],
+    "shopping-cart-2": ["购物车", "购买", "消费", "商城"],
+    vip: ["会员"],
+    "vip-crown": ["king", "queen", "皇冠", "会员", "国王", "女王", "王后"],
+    "vip-crown-2": ["king", "queen", "皇冠", "会员", "国王", "女王", "王后"],
+    "vip-diamond": ["钻石", "会员"],
+    trophy: ["奖品", "奖杯", "金杯"],
+    exchange: ["swap", "交换", "换算", "兑换"],
+    "exchange-box": ["swap", "交换", "换算", "兑换"],
+    swap: ["exchange", "交换", "换算", "兑换"],
+    "swap-box": ["exchange", "交换", "换算", "兑换"],
+    "exchange-dollar": [
+      "swap",
+      "transfer",
+      "交换",
+      "换算",
+      "兑换",
+      "美元",
+      "转账",
+    ],
+    "exchange-cny": [
+      "swap",
+      "transfer",
+      "交换",
+      "换算",
+      "兑换",
+      "人民币",
+      "转账",
+    ],
+    "exchange-funds": [
+      "swap",
+      "transfer",
+      "交换",
+      "换算",
+      "兑换",
+      "基金",
+      "股票",
+      "转账",
+    ],
+    "increase-decrease": ["计算器"],
+    percent: ["百分之", "百分比"],
+    "copper-coin": [
+      "currency",
+      "payment",
+      "铜币",
+      "硬币",
+      "货币",
+      "钱",
+      "支付",
+    ],
+    "copper-diamond": [
+      "currency",
+      "coins",
+      "金币",
+      "钻石",
+      "货币",
+      "钱",
+      "支付",
+    ],
+    "money-cny-box": ["currency", "payment", "货币", "钱", "支付", "人民币"],
+    "money-cny-circle": [
+      "currency",
+      "coins",
+      "金币",
+      "payment",
+      "货币",
+      "钱",
+      "支付",
+      "人民币",
+    ],
+    "money-dollar-box": ["currency", "payment", "货币", "钱", "支付", "美元"],
+    "money-dollar-circle": [
+      "currency",
+      "coins",
+      "金币",
+      "payment",
+      "cent",
+      "penny",
+      "货币",
+      "钱",
+      "支付",
+      "美元",
+      "美分",
+      "便士",
+    ],
+    "money-euro-box": ["currency", "payment", "货币", "钱", "支付", "欧元"],
+    "money-euro-circle": [
+      "currency",
+      "coins",
+      "金币",
+      "payment",
+      "货币",
+      "钱",
+      "支付",
+      "欧元",
+    ],
+    "money-pound-box": ["currency", "payment", "货币", "钱", "支付", "英镑"],
+    "money-pound-circle": [
+      "currency",
+      "coins",
+      "金币",
+      "payment",
+      "货币",
+      "钱",
+      "支付",
+      "英镑",
+    ],
+    "bit-coin": ["currency", "payment", "货币", "钱", "比特币"],
+    coin: ["金币", "硬币"],
+    coins: ["金币", "硬币"],
+    currency: ["cash", "payment", "货币", "钱"],
+    funds: ["foundation", "stock", "基金", "股票"],
+    "funds-box": ["foundation", "stock", "基金", "股票"],
+    "red-packet": ["红包"],
+    "water-flash": ["水电费"],
+    stock: ["股票"],
+    auction: ["hammer", "拍卖", "锤子"],
+    gift: ["present", "礼物"],
+    "gift-2": ["present", "礼物"],
+    "hand-coin": ["donate", "business", "捐赠"],
+    "hand-heart": [
+      "help",
+      "donate",
+      "volunteer",
+      "welfare",
+      "帮助",
+      "爱心",
+      "捐赠",
+      "志愿者",
+      "公益",
+    ],
+    "24-hours": ["last", "24小时营业"],
+  },
+  "Health & Medical": {
+    heart: ["like", "love", "favorite", "心", "喜欢", "爱", "收藏"],
+    "heart-2": ["like", "love", "favorite", "心", "喜欢", "爱", "收藏"],
+    "heart-3": ["like", "love", "favorite", "心", "喜欢", "爱", "收藏"],
+    "heart-add": ["like", "love", "favorite", "心", "喜欢", "爱", "收藏"],
+    dislike: ["like", "love", "remove favorite", "心", "不喜欢", "取消收藏"],
+    hearts: ["romance", "爱情", "浪漫", "心"],
+    "heart-pulse": ["heart rate", "脉搏", "心率"],
+    pulse: ["wave", "heart rate", "脉搏", "心率", "波"],
+    empathize: ["care", "heart", "同理心", "关爱", "心"],
+    nurse: ["doctors", "医生", "护士"],
+    dossier: ["病例"],
+    "health-book": ["健康手册", "医疗手册"],
+    "first-aid-kit": ["case", "急救箱"],
+    capsule: ["medicine", " 胶囊", "药"],
+    "medicine-bottle": ["药瓶"],
+    flask: ["testing", "experimental", "experiment", "烧瓶", "实验", "试验"],
+    "test-tube": [
+      "testing",
+      "experimental",
+      "experiment",
+      "试管",
+      "实验",
+      "试验",
+    ],
+    microscope: [
+      "testing",
+      "experimental",
+      "experiment",
+      "显微镜",
+      "实验",
+      "试验",
+    ],
+    "hand-sanitizer": ["alcohol", "酒精消毒洗手液"],
+    "mental-health": ["心理健康"],
+    psychotherapy: ["心理治疗"],
+    stethoscope: ["听诊器"],
+    syringe: ["注射器"],
+    thermometer: ["体温计"],
+    "infrared-thermometer": ["红外线体温计", "体温枪"],
+    "surgical-mask": ["外科医用口罩"],
+    virus: ["病毒"],
+    lungs: ["肺部"],
+    "rest-time": ["close", "休息时间", "打烊"],
+    zzz: ["睡觉"],
+  },
+  Logos: {
+    alipay: ["zhifubao", "支付宝"],
+    amazon: ["亚马逊"],
+    android: ["applications", "安卓", "应用"],
+    angularjs: ["angular", "programing framework"],
+    "app-store": ["applications", "苹果应用商店"],
+    apple: ["苹果"],
+    baidu: ["du", "claw", "百度", "爪"],
+    behance: ["behance"],
+    bilibili: ["哔哩哔哩"],
+    centos: ["linux", "system", "系统"],
+    chrome: ["谷歌浏览器"],
+    codepen: ["代码笔"],
+    coreos: ["linux", "system", "系统"],
+    dingding: ["钉钉"],
+    discord: ["game", "chat"],
+    disqus: ["comments"],
+    douban: ["豆瓣"],
+    dribbble: ["追波"],
+    drive: ["google drive", "谷歌云端硬盘"],
+    dropbox: ["多宝箱"],
+    edge: ["microsoft edge", "edge浏览器"],
+    evernote: ["印象笔记"],
+    facebook: ["脸书"],
+    "facebook-circle": ["脸书"],
+    "facebook-box": ["脸书"],
+    finder: ["macintosh", "仿达"],
+    firefox: ["火狐浏览器"],
+    flutter: ["google"],
+    gatsby: ["gatsby"],
+    github: ["github"],
+    gitlab: ["gitlab"],
+    google: ["谷歌"],
+    "google-play": ["applications", "谷歌应用商店"],
+    "honor-of-kings": ["game", "王者荣耀"],
+    ie: ["internet explorer", "浏览器"],
+    instagram: ["照片墙"],
+    invision: ["invision"],
+    "kakao-talk": ["kakao talk", "chat"],
+    line: ["连我"],
+    linkedin: ["领英"],
+    "linkedin-box": ["领英"],
+    mastercard: ["bank card", "银行卡"],
+    mastodon: ["mastodon", "长毛象"],
+    medium: ["媒体"],
+    messenger: ["facebook", "脸书", "信使"],
+    microsoft: ["windows", "窗户", "微软"],
+    "mini-program": ["微信小程序"],
+    "netease-cloud-music": ["netease cloud music", "网易云音乐"],
+    netflix: ["网飞"],
+    npmjs: ["npm", "nodejs"],
+    "open-source": ["opensource", "开源"],
+    opera: ["欧朋浏览器"],
+    patreon: ["donate", "money", "捐赠", "打赏"],
+    paypal: ["贝宝"],
+    pinterest: ["拼趣"],
+    pixelfed: ["photography", "pixelfed"],
+    playstation: ["ps"],
+    "product-hunt": ["product hunt"],
+    qq: ["penguin", "tencent", "腾讯", "企鹅"],
+    reactjs: ["react", "programing framework", "facebook"],
+    reddit: ["reddit"],
+    remixicon: ["remix icon", "图标"],
+    safari: ["safari浏览器"],
+    skype: ["skype"],
+    slack: ["slack"],
+    snapchat: ["ghost", "色拉布", "幽灵"],
+    soundcloud: ["声云"],
+    spectrum: ["spectrum"],
+    spotify: ["music", "音乐"],
+    "stack-overflow": ["stack overflow"],
+    stackshare: ["share", "分享", "技术栈"],
+    steam: ["game", "store"],
+    switch: ["nintendo", "任天堂"],
+    taobao: ["淘宝"],
+    telegram: ["telegram"],
+    trello: ["trello"],
+    tumblr: ["汤博乐"],
+    twitch: ["twitch"],
+    twitter: ["推特"],
+    ubuntu: ["linux", "system", "系统"],
+    unsplash: ["photos"],
+    vimeo: ["视频"],
+    visa: ["bank card", "银行卡"],
+    vuejs: ["vue", "programing framework"],
+    wechat: ["微信"],
+    "wechat-2": ["微信"],
+    "wechat-pay": ["微信支付"],
+    weibo: ["新浪微博"],
+    whatsapp: ["瓦次艾普"],
+    windows: ["microsoft", "窗户", "微软"],
+    xbox: ["xbox"],
+    xing: ["xing"],
+    youtube: ["优兔", "油管"],
+    zcool: ["zcool", "站酷"],
+    zhihu: ["知乎"],
+  },
+  Map: {
+    "map-pin": [
+      "location",
+      "navigation",
+      "地图",
+      "坐标",
+      "定位",
+      "导航",
+      "位置",
+    ],
+    "map-pin-2": [
+      "location",
+      "navigation",
+      "地图",
+      "坐标",
+      "定位",
+      "导航",
+      "位置",
+    ],
+    "map-pin-3": [
+      "location",
+      "navigation",
+      "地图",
+      "坐标",
+      "定位",
+      "导航",
+      "位置",
+    ],
+    "map-pin-4": [
+      "location",
+      "navigation",
+      "地图",
+      "坐标",
+      "定位",
+      "导航",
+      "位置",
+    ],
+    "map-pin-5": [
+      "location",
+      "navigation",
+      "地图",
+      "坐标",
+      "定位",
+      "导航",
+      "位置",
+    ],
+    "map-pin-add": [
+      "location",
+      "navigation",
+      "地图",
+      "坐标",
+      "定位",
+      "导航",
+      "位置",
+      "新增",
+      "添加",
+    ],
+    "map-pin-range": [
+      "location",
+      "navigation",
+      "地图",
+      "坐标",
+      "定位",
+      "导航",
+      "位置",
+      "范围",
+    ],
+    "map-pin-time": [
+      "location",
+      "navigation",
+      "地图",
+      "坐标",
+      "定位",
+      "导航",
+      "位置",
+      "时间",
+    ],
+    "map-pin-user": [
+      "location",
+      "navigation",
+      "地图",
+      "坐标",
+      "定位",
+      "导航",
+      "位置",
+      "用户",
+    ],
+    "pin-distance": ["坐标", "距离"],
+    pushpin: ["图钉"],
+    "pushpin-2": ["图钉"],
+    compass: [
+      "navigation",
+      "safari",
+      "direction",
+      "discover",
+      "指南针",
+      "导航",
+      "方向",
+      "发现",
+      "探索",
+    ],
+    "compass-2": [
+      "navigation",
+      "direction",
+      "discover",
+      "指南针",
+      "导航",
+      "方向",
+      "发现",
+      "探索",
+    ],
+    "compass-3": [
+      "navigation",
+      "safari",
+      "direction",
+      "discover",
+      "指南针",
+      "导航",
+      "方向",
+      "发现",
+      "探索",
+    ],
+    "compass-4": [
+      "navigation",
+      "direction",
+      "discover",
+      "指南针",
+      "导航",
+      "方向",
+      "发现",
+      "探索",
+    ],
+    "compass-discover": [
+      "navigation",
+      "direction",
+      "指南针",
+      "导航",
+      "方向",
+      "发现",
+      "探索",
+    ],
+    anchor: ["锚"],
+    "china-railway": ["中铁", "铁路", "火车"],
+    "space-ship": ["太空飞船"],
+    rocket: ["火箭"],
+    "rocket-2": ["space ship", "火箭", "太空飞船"],
+    map: ["navigation", "travel", "地图", "导航", "旅行"],
+    "map-2": [
+      "location",
+      "navigation",
+      "travel",
+      "地图",
+      "定位",
+      "导航",
+      "旅行",
+    ],
+    "treasure-map": ["thriller", "adventure", "地图", "藏宝图"],
+    "road-map": ["navigation", "travel", "地图", "导航", "旅行"],
+    earth: [
+      "global",
+      "union",
+      "world",
+      "language",
+      "地球",
+      "全球",
+      "联合",
+      "世界",
+      "语言",
+    ],
+    globe: ["earth", "地球仪"],
+    parking: ["停车场"],
+    "parking-box": ["停车场"],
+    route: ["path", "路线"],
+    guide: ["path", "指引", "路线"],
+    "gas-station": ["加气站", "加油站"],
+    "charging-pile": ["充电桩"],
+    "charging-pile-2": ["充电桩"],
+    car: ["汽车"],
+    "car-washing": ["汽车", "洗车"],
+    roadster: ["car", "汽车", "跑车"],
+    taxi: ["car", "出租车", "汽车"],
+    "taxi-wifi": ["car", "出租车", "汽车"],
+    "police-car": ["汽车", "警车"],
+    bus: ["大巴", "巴士"],
+    "bus-2": ["大巴", "巴士"],
+    "bus-wifi": ["大巴", "巴士"],
+    truck: ["van", "delivery", "卡车", "货车", "运输"],
+    train: ["火车"],
+    "train-wifi": ["火车"],
+    subway: ["地铁"],
+    "subway-wifi": ["地铁"],
+    "flight-takeoff": [
+      "airplane",
+      "plane",
+      "origin",
+      "起飞",
+      "出发",
+      "始发",
+      "起点",
+      "飞机",
+    ],
+    "flight-land": [
+      "airplane",
+      "plane",
+      "destination",
+      "着陆",
+      "到达",
+      "抵达",
+      "终点",
+      "飞机",
+    ],
+    plane: ["fight", "飞机", "航班"],
+    sailboat: ["帆船"],
+    ship: ["轮船", "航海", "海运"],
+    "ship-2": ["轮船"],
+    bike: ["自行车"],
+    "e-bike": ["take out", "takeaway", "电动车", "外卖"],
+    "e-bike-2": ["take out", "takeaway", "电动车", "外卖"],
+    takeaway: ["take out", "takeaway", "电动车", "外卖"],
+    motorbike: ["摩托车"],
+    caravan: ["房车"],
+    walk: ["步行"],
+    run: ["奔跑", "跑步"],
+    riding: ["bike", "骑行", "自行车"],
+    barricade: ["路障"],
+    footprint: ["脚印", "足迹"],
+    "traffic-light": ["交通", "信号灯"],
+    "signal-tower": ["base station", "antenna", "信号塔", "基站", "天线"],
+    restaurant: ["餐厅", "饭店"],
+    "restaurant-2": ["餐厅", "饭店"],
+    cup: ["tea", "coffee", "杯子", "咖啡", "茶"],
+    goblet: ["cup", "wine glass", "高脚杯", "酒杯"],
+    "hotel-bed": ["酒店", "床"],
+    navigation: ["gps", "导航"],
+    oil: ["汽油", "机油"],
+    direction: ["right", "方向", "右转"],
+    steering: ["drive", "方向盘", "驾车"],
+    "steering-2": ["drive", "方向盘", "驾车"],
+    lifebuoy: ["life ring", "救生圈"],
+    passport: ["passports", "护照"],
+    suitcase: ["travel", "旅行", "行李箱"],
+    "suitcase-2": ["travel", "旅行", "行李箱", "拉杆箱"],
+    "suitcase-3": [
+      "travel",
+      "旅行",
+      "boarding case",
+      "行李箱",
+      "拉杆箱",
+      "登机箱",
+    ],
+    "luggage-deposit": ["consignment", "行李箱", "行李寄存", "托运"],
+    "luggage-cart": ["行李车"],
+  },
+  Media: {
+    image: ["picture", "photo", "图片", "照片"],
+    "image-2": ["picture", "photo", "图片", "照片"],
+    "image-add": ["picture", "photo", "图片", "照片", "添加"],
+    "image-edit": ["picture", "photo", "图片", "照片", "编辑"],
+    landscape: ["picture", "image", "photo", "图片", "照片"],
+    gallery: ["picture", "image", "图片", "相册"],
+    "gallery-upload": ["picture", "image", "图片", "相册", "上传"],
+    video: ["视频"],
+    movie: ["film", "video", "电影", "硬盘", "视频"],
+    "movie-2": ["film", "video", "电影", "硬盘", "视频"],
+    film: ["movie", "video", "影片", "电影", "视频"],
+    clapperboard: ["movie", "film", "场记板", "电影"],
+    vidicon: ["video", "camera", "摄像机", "摄影机", "视频"],
+    "vidicon-2": ["camera", "摄像机", "摄影机"],
+    live: ["video", "camera", "摄像机", "摄影机", "视频", "直播"],
+    "video-add": ["camera", "摄像机", "摄影机", "视频", "添加"],
+    "video-upload": ["camera", "摄像机", "摄影机", "视频", "上传"],
+    "video-download": ["camera", "摄像机", "摄影机", "视频", "下载"],
+    dv: ["vidicon", "camera", "摄像机", "摄影机"],
+    camera: ["photo", "照相机", "拍照", "照片"],
+    "camera-off": ["photo", "slash", "照相机", "拍照", "照片", "禁止", "关闭"],
+    "camera-2": ["photo", "照相机", "拍照", "照片"],
+    "camera-3": ["photo", "照相机", "拍照", "照片"],
+    "camera-lens": ["aperture", "photo", "照相机", "拍照", "照片", "朋友圈"],
+    "camera-switch": ["照相机", "拍照", "翻转"],
+    polaroid: ["camera", "相机", "宝丽来"],
+    "polaroid-2": ["camera", "相机", "宝丽来"],
+    "phone-camera": ["手机相机", "手机摄像头"],
+    webcam: ["摄像头"],
+    mv: ["music video", "音乐"],
+    music: ["音乐"],
+    "music-2": ["音乐"],
+    disc: ["music", "album", "音乐", "唱片"],
+    album: ["music", "唱片", "音乐"],
+    dvd: ["cd", "dvd", "record", "光盘", "刻录"],
+    headphone: ["music", "headset", "耳机", "音乐"],
+    radio: ["收音机", "电台"],
+    "radio-2": ["收音机", "电台"],
+    tape: ["录音", "磁带"],
+    mic: ["record", "voice", "话筒", "语音", "录音", "声音"],
+    "mic-2": ["record", "voice", "话筒", "语音", "录音", "声音"],
+    "mic-off": [
+      "record",
+      "voice",
+      "slash",
+      "关闭话筒",
+      "关闭语音",
+      "录音",
+      "关闭声音",
+      "静音",
+      "禁止",
+    ],
+    "volume-down": [
+      "trumpet",
+      "sound",
+      "speaker",
+      "音量低",
+      "喇叭",
+      "声音",
+      "扬声器",
+    ],
+    "volume-mute": [
+      "trumpet",
+      "sound",
+      "off",
+      "音量低",
+      "喇叭",
+      "声音",
+      "静音",
+    ],
+    "volume-up": [
+      "trumpet",
+      "sound",
+      "speaker",
+      "音量高",
+      "喇叭",
+      "声音",
+      "扬声器",
+    ],
+    "volume-vibrate": [
+      "trumpet",
+      "sound",
+      "speaker",
+      "喇叭",
+      "声音",
+      "扬声器",
+      "震动模式",
+    ],
+    "volume-off-vibrate": [
+      "trumpet",
+      "sound",
+      "speaker",
+      "静音",
+      "喇叭",
+      "声音",
+      "扬声器",
+      "静音模式",
+    ],
+    speaker: ["音响"],
+    "speaker-2": ["音响"],
+    "speaker-3": ["音响"],
+    "surround-sound": ["环绕立体声"],
+    broadcast: ["广播"],
+    notification: ["bell", "alarm", "通知", "铃铛", "提醒"],
+    "notification-2": ["bell", "alarm", "通知", "铃铛", "提醒"],
+    "notification-3": ["bell", "alarm", "通知", "铃铛", "提醒"],
+    "notification-4": ["bell", "alarm", "通知", "铃铛", "提醒"],
+    "notification-off": [
+      "bell",
+      "alarm",
+      "silent",
+      "slash",
+      "通知",
+      "铃铛",
+      "提醒",
+      "免打扰",
+      "静音",
+      "关闭",
+      "禁止",
+    ],
+    "play-circle": ["start", "播放", "开始"],
+    "pause-circle": ["暂停"],
+    "record-circle": ["录音"],
+    "stop-circle": ["停止"],
+    eject: ["推出"],
+    play: ["start", "播放", "开始"],
+    pause: ["暂停"],
+    stop: ["停止"],
+    rewind: ["fast", "快退"],
+    speed: ["fast", "快进"],
+    "skip-back": ["上一曲"],
+    "skip-forward": ["下一曲"],
+    "play-mini": ["播放"],
+    "pause-mini": ["暂停"],
+    "stop-mini": ["停止"],
+    "rewind-mini": ["fast", "快退"],
+    "speed-mini": ["fast", "快进"],
+    "skip-back-mini": ["上一曲"],
+    "skip-forward-mini": ["下一曲"],
+    repeat: ["循环播放"],
+    "repeat-2": ["循环播放"],
+    "repeat-one": ["单曲循环"],
+    "order-play": ["顺序播放"],
+    shuffle: ["随机播放"],
+    "play-list": ["播放列表"],
+    "play-list-2": ["播放列表"],
+    "play-list-add": ["列表", "添加"],
+    fullscreen: ["maximize", "全屏", "最大化"],
+    "fullscreen-exit": ["minimize", "退出全屏", "最小化"],
+    equalizer: [
+      "sliders",
+      "controls",
+      "settings",
+      "filter",
+      "均衡器",
+      "控制器",
+      "设置",
+      "筛选",
+    ],
+    "sound-module": [
+      "sliders",
+      "controls",
+      "settings",
+      "filter",
+      "均衡器",
+      "控制器",
+      "设置",
+      "筛选",
+    ],
+    rhythm: ["节奏", "韵律"],
+    voiceprint: ["声纹"],
+    hq: ["high quality", "高质量", "高品质"],
+    hd: ["high definition", "高清晰度"],
+    "4k": ["high definition", "high quality", "高清晰度", "高品质", "超清"],
+    "closed-captioning": ["隐藏字幕"],
+    "aspect-ratio": ["宽高比", "比例"],
+    "picture-in-picture": ["画中画", "小窗"],
+    "picture-in-picture-2": ["画中画", "小窗"],
+    "picture-in-picture-exit": ["退出画中画", "退出小窗"],
+  },
+  System: {
+    apps: ["应用"],
+    "apps-2": ["应用"],
+    function: ["layout", "功能", "应用", "卡片布局"],
+    dashboard: ["仪表盘"],
+    menu: ["navigation", "hamburger", "导航", "菜单", "汉堡包"],
+    "menu-2": ["navigation", "hamburger", "导航", "菜单", "汉堡包"],
+    "menu-3": ["navigation", "hamburger", "导航", "菜单", "汉堡包"],
+    "menu-4": ["navigation", "hamburger", "导航", "菜单", "汉堡包"],
+    "menu-5": ["navigation", "hamburger", "导航", "菜单", "汉堡包"],
+    "menu-add": ["navigation", "hamburger", "导航", "菜单", "汉堡包", "添加"],
+    "menu-fold": ["navigation", "hamburger", "导航", "菜单", "汉堡包", "展开"],
+    more: ["ellipsis", "更多", "省略"],
+    "more-2": ["ellipsis", "更多", "省略"],
+    star: ["favorite", "like", "mark", "星星", "星标", "喜欢"],
+    "star-s": ["favorite", "like", "mark", "星星", "星标", "喜欢", "半星"],
+    "star-half": ["favorite", "like", "mark", "星星", "星标", "喜欢"],
+    "star-half-s": ["favorite", "like", "mark", "星星", "星标", "喜欢", "半星"],
+    settings: ["edit", "gear", "preferences", "偏好设置", "编辑", "齿轮"],
+    "settings-2": ["edit", "gear", "preferences", "偏好设置", "编辑", "齿轮"],
+    "settings-3": ["edit", "gear", "preferences", "偏好设置", "编辑", "齿轮"],
+    "settings-4": ["edit", "gear", "preferences", "偏好设置", "编辑", "齿轮"],
+    "settings-5": ["edit", "gear", "preferences", "偏好设置", "编辑", "齿轮"],
+    "settings-6": ["edit", "gear", "preferences", "偏好设置", "编辑", "齿轮"],
+    "list-settings": ["列表", "设置"],
+    forbid: ["slash", "ban", "禁止", "禁用"],
+    "forbid-2": ["slash", "ban", "禁止", "禁用"],
+    information: ["信息"],
+    "error-warning": ["alert", "警告", "错误"],
+    question: ["help", "问号", "帮助"],
+    alert: ["提醒", "警告"],
+    spam: ["alert", "垃圾邮件", "警告"],
+    "spam-2": ["alert", "垃圾邮件", "警告"],
+    "spam-3": ["alert", "垃圾邮件", "警告"],
+    "checkbox-blank": ["复选框", "空"],
+    checkbox: ["复选框"],
+    "checkbox-indeterminate": ["复选框"],
+    "add-box": ["plus", "new", "复选框", "添加", "加号", "新增"],
+    "checkbox-blank-circle": ["复选框", "空"],
+    "checkbox-circle": ["复选框"],
+    "indeterminate-circle": ["slash", "ban", "复选框", "禁"],
+    "add-circle": ["plus", "new", "复选框", "添加", "加号", "新增"],
+    "close-circle": [
+      "cancel",
+      "remove",
+      "delete",
+      "empty",
+      "x",
+      "关闭",
+      "取消",
+      "移除",
+      "删除",
+      "清空",
+    ],
+    "radio-button": ["单选框"],
+    "checkbox-multiple-blank": ["复选框", "空"],
+    "checkbox-multiple": ["复选框", "空"],
+    check: ["对勾"],
+    "check-double": ["read", "done", "double-tick", "双对勾", "已读"],
+    close: [
+      "cancel",
+      "remove",
+      "delete",
+      "empty",
+      "x",
+      "关闭",
+      "取消",
+      "移除",
+      "删除",
+      "清空",
+    ],
+    add: ["plus", "new", "添加", "新增", "加号"],
+    subtract: ["减"],
+    divide: ["除以"],
+    "arrow-left-up": ["corner", "左上"],
+    "arrow-up": ["箭头", "向上"],
+    "arrow-right-up": ["corner", "右上"],
+    "arrow-right": ["forward", "箭头", "向右"],
+    "arrow-right-down": ["corner", "右下"],
+    "arrow-down": ["箭头", "向下"],
+    "arrow-left-down": ["corner", "箭头", "左下"],
+    "arrow-left": ["backward", "箭头", "向左", "返回"],
+    "arrow-up-circle": ["箭头", "向上"],
+    "arrow-right-circle": ["forward", "箭头", "向右"],
+    "arrow-down-circle": ["箭头", "向下", "下载"],
+    "arrow-left-circle": ["backward", "箭头", "向左", "返回"],
+    "arrow-up-s": ["箭头", "向上"],
+    "arrow-down-s": ["箭头", "向下"],
+    "arrow-right-s": ["forward", "箭头", "向右"],
+    "arrow-left-s": ["backward", "箭头", "向左", "返回"],
+    "arrow-drop-up": ["箭头", "向上"],
+    "arrow-drop-right": ["forward", "箭头", "向右"],
+    "arrow-drop-down": ["箭头", "向下"],
+    "arrow-drop-left": ["backward", "箭头", "向左", "返回"],
+    "arrow-left-right": [
+      "exchange",
+      "swap",
+      "箭头",
+      "左右",
+      "交换",
+      "换算",
+      "兑换",
+    ],
+    "arrow-up-down": [
+      "exchange",
+      "swap",
+      "箭头",
+      "上下",
+      "交换",
+      "换算",
+      "兑换",
+    ],
+    "arrow-go-back": ["undo", "箭头", "返回", "撤销", "撤回"],
+    "arrow-go-forward": ["redo", "箭头", "重做", "撤回"],
+    download: ["下载"],
+    upload: ["上传"],
+    "download-2": ["下载"],
+    "upload-2": ["上传"],
+    "download-cloud": ["下载", "云"],
+    "download-cloud-2": ["下载", "云"],
+    "upload-cloud": ["上传", "云"],
+    "upload-cloud-2": ["上传", "云"],
+    "login-box": ["sign in", "登录"],
+    "logout-box": ["sign out", "登出", "注销"],
+    "logout-box-r": ["sign out", "登出", "注销"],
+    "login-circle": ["sign in", "登录"],
+    "logout-circle": ["sign out", "登出", "注销"],
+    "logout-circle-r": ["sign out", "登出", "注销"],
+    refresh: [
+      "synchronization",
+      "reload",
+      "restart",
+      "spinner",
+      "loader",
+      "ajax",
+      "update",
+      "刷新",
+      "同步",
+    ],
+    shield: ["safety", "protect", "盾牌", "卫士", "安全", "防御"],
+    "shield-cross": [
+      "safety",
+      "protect",
+      "盾牌",
+      "卫士",
+      "安全",
+      "防御",
+      "闪电",
+    ],
+    "shield-flash": ["safety", "protect", "盾牌", "卫士", "安全", "防御"],
+    "shield-star": [
+      "safety",
+      "protect",
+      "盾牌",
+      "卫士",
+      "安全",
+      "防御",
+      "星星",
+    ],
+    "shield-user": [
+      "safety",
+      "protect",
+      "user protected",
+      "guarantor",
+      "盾牌",
+      "卫士",
+      "安全",
+      "防御",
+      "用户",
+    ],
+    "shield-keyhole": [
+      "safety",
+      "protect",
+      "guarantor",
+      "盾牌",
+      "卫士",
+      "安全",
+      "防御",
+      "钥匙孔",
+    ],
+    "shield-check": ["safety", "protect", "盾牌", "卫士", "安全", "防御"],
+    "delete-back": ["backspace", "删除", "退格"],
+    "delete-back-2": ["backspace", "删除", "退格"],
+    "delete-bin": [
+      "trash",
+      "remove",
+      "ash-bin",
+      "garbage",
+      "dustbin",
+      "uninstall",
+      "卸载",
+      "删除",
+      "垃圾桶",
+    ],
+    "delete-bin-2": [
+      "trash",
+      "remove",
+      "ash-bin",
+      "garbage",
+      "dustbin",
+      "uninstall",
+      "卸载",
+      "删除",
+      "垃圾桶",
+    ],
+    "delete-bin-3": [
+      "trash",
+      "remove",
+      "ash-bin",
+      "garbage",
+      "dustbin",
+      "uninstall",
+      "卸载",
+      "删除",
+      "垃圾桶",
+    ],
+    "delete-bin-4": [
+      "trash",
+      "remove",
+      "ash-bin",
+      "garbage",
+      "dustbin",
+      "uninstall",
+      "卸载",
+      "删除",
+      "垃圾桶",
+    ],
+    "delete-bin-5": [
+      "trash",
+      "remove",
+      "ash-bin",
+      "garbage",
+      "dustbin",
+      "uninstall",
+      "卸载",
+      "删除",
+      "垃圾桶",
+    ],
+    "delete-bin-6": [
+      "trash",
+      "remove",
+      "ash-bin",
+      "garbage",
+      "dustbin",
+      "uninstall",
+      "卸载",
+      "删除",
+      "垃圾桶",
+    ],
+    "delete-bin-7": [
+      "trash",
+      "remove",
+      "ash-bin",
+      "garbage",
+      "dustbin",
+      "uninstall",
+      "卸载",
+      "删除",
+      "垃圾桶",
+    ],
+    lock: ["security", "password", "锁子", "安全", "密码"],
+    "lock-2": ["security", "password", "锁子", "安全", "密码"],
+    "lock-password": ["security", "锁子", "安全", "密码"],
+    "lock-unlock": ["security", "password", "锁子", "安全", "密码"],
+    eye: ["watch", "view", "眼睛", "查看"],
+    "eye-off": ["slash", "眼睛", "不可见", "关闭", "禁止"],
+    "eye-2": ["watch", "view", "眼睛", "查看"],
+    "eye-close": ["x", "闭眼"],
+    search: ["搜索", "放大镜"],
+    "search-2": ["搜索", "放大镜"],
+    "search-eye": ["搜索", "放大镜", "眼睛"],
+    "zoom-in": ["放大", "放大镜"],
+    "zoom-out": ["缩小", "放大镜"],
+    "find-replace": ["查找", "搜索", "替换"],
+    share: ["分享", "转发"],
+    "share-box": ["分享", "转发"],
+    "share-circle": ["分享", "转发"],
+    "share-forward": ["分享", "转发"],
+    "share-forward-2": ["分享", "转发"],
+    "share-forward-box": ["分享", "转发"],
+    "side-bar": ["侧边栏"],
+    time: ["clock", "时间", "时钟", "钟表"],
+    timer: ["chronograph", "stopwatch", "秒表", "计时器"],
+    "timer-2": ["chronograph", "stopwatch", "秒表", "计时器"],
+    "timer-flash": ["chronograph", "stopwatch", "秒表", "计时器", "闪电"],
+    alarm: ["闹钟"],
+    history: ["record", "recent", "time machine", "历史记录", "最近"],
+    "thumb-down": ["dislike", "bad", "不喜欢", "不好"],
+    "thumb-up": ["like", "good", "喜欢", "好"],
+    "alarm-warning": [
+      "alert",
+      "report",
+      "police light",
+      "告警",
+      "举报",
+      "警灯",
+    ],
+    "notification-badge": ["red dot", "通知", "小红点"],
+    toggle: ["switch", "开关", "触发器"],
+    filter: ["filtration", "筛选", "过滤"],
+    "filter-2": ["filtration", "筛选", "过滤"],
+    "filter-3": ["filtration", "筛选", "过滤"],
+    "filter-off": ["filtration", "clear-filter", "筛选", "过滤"],
+    loader: [
+      "loader",
+      "spinner",
+      "ajax",
+      "waiting",
+      "delay",
+      "加载中",
+      "载入中",
+      "正在加载",
+    ],
+    "loader-2": [
+      "loader",
+      "spinner",
+      "ajax",
+      "waiting",
+      "delay",
+      "加载中",
+      "载入中",
+      "正在加载",
+    ],
+    "loader-3": [
+      "loader",
+      "spinner",
+      "ajax",
+      "waiting",
+      "delay",
+      "加载中",
+      "载入中",
+      "正在加载",
+    ],
+    "loader-4": [
+      "loader",
+      "spinner",
+      "ajax",
+      "waiting",
+      "delay",
+      "加载中",
+      "载入中",
+      "正在加载",
+    ],
+    "loader-5": [
+      "loader",
+      "spinner",
+      "ajax",
+      "waiting",
+      "delay",
+      "加载中",
+      "载入中",
+      "正在加载",
+    ],
+    "external-link": ["外链"],
+  },
+  "User & Faces": {
+    user: ["用户"],
+    "user-2": ["用户"],
+    "user-3": ["用户"],
+    "user-4": ["用户"],
+    "user-5": ["用户"],
+    "user-6": ["用户"],
+    "user-smile": ["用户", "微笑"],
+    "account-box": ["用户", "账户"],
+    "account-circle": ["用户", "账户"],
+    "account-pin-box": ["用户", "账户"],
+    "account-pin-circle": ["用户", "账户"],
+    "user-add": ["用户", "添加", "新增"],
+    "user-follow": ["关注"],
+    "user-unfollow": ["用户", "取消关注"],
+    "user-shared": ["transfer", "用户", "我分享的", "发送"],
+    "user-shared-2": ["transfer", "用户", "我分享的", "发送"],
+    "user-received": ["用户", "我接收的", "收取"],
+    "user-received-2": ["用户", "我接收的", "收取"],
+    "user-location": ["用户", "定位"],
+    "user-search": ["用户", "查找"],
+    "user-settings": ["admin", "用户", "设置", "管理员"],
+    "user-star": ["用户", "关注"],
+    "user-heart": ["用户", "关注"],
+    admin: ["admin", "用户", "管理员"],
+    contacts: ["联系人"],
+    group: ["team", "团队", "群组"],
+    "group-2": ["team", "团队", "群组"],
+    team: ["团队", "小组", "群主"],
+    "user-voice": ["用户", "录音", "演讲"],
+    emotion: ["表情", "笑脸"],
+    "emotion-2": ["表情", "笑脸"],
+    "emotion-happy": ["表情", "开心"],
+    "emotion-normal": ["表情", "一般"],
+    "emotion-unhappy": ["表情", "不开心"],
+    "emotion-laugh": [
+      "comedy",
+      "happy",
+      "表情",
+      "大笑",
+      "笑脸",
+      "开心",
+      "喜剧",
+    ],
+    "emotion-sad": ["drama", "tears", "悲剧", "哭泣", "泪"],
+    skull: ["ghost", "骷髅", "鬼怪"],
+    "skull-2": ["ghost", "horror", "thriller", "骷髅", "鬼怪", "恐惧", "恐怖"],
+    men: ["gender", "man", "male", "男人", "男性"],
+    women: ["gender", "woman", "female", "女人", "女性"],
+    travesti: ["女人", "女性"],
+    genderless: ["女人", "女性"],
+    "open-arm": ["张开双臂"],
+    "body-scan": [
+      "gesture recognition",
+      "body",
+      "扫描身体",
+      "体态识别",
+      "动作之别",
+      "手势识别",
+    ],
+    parent: ["patriarch", "父母", "亲子", "家长"],
+    robot: ["mechanic", "机器人"],
+    aliens: ["science fiction", "ET", "外星人", "科幻小说"],
+    "bear-smile": [
+      "cartoon",
+      "anime",
+      "cartoon",
+      "小熊",
+      "微笑",
+      "儿童",
+      "动画片",
+      "卡通",
+      "动漫",
+    ],
+    mickey: ["cartoon", "disney", "迪士尼", "米老鼠", "微笑", "儿童", "动画片"],
+    criminal: ["horror", "thriller", "罪犯", "犯罪", "恐怖"],
+    ghost: ["horror", "thriller", "鬼怪", "恐怖", "恐惧"],
+    "ghost-2": ["horror", "鬼怪", "恐怖", "恐惧"],
+    "ghost-smile": ["鬼怪", "笑"],
+    "star-smile": ["animation", "动画", "微笑", "星星"],
+    spy: [
+      "incognito mode",
+      "detective",
+      "secret",
+      "间谍",
+      "侦探",
+      "无痕模式",
+      "隐私模式",
+    ],
+  },
+  Weather: {
+    sun: ["light mode", "sunny", "太阳", "白天模式", "晴天"],
+    moon: ["dark mode", "night", "月亮", "夜间模式", "月牙"],
+    flashlight: ["闪电"],
+    cloudy: ["多云"],
+    "cloudy-2": ["多云"],
+    mist: ["雾气", "雾霾"],
+    foggy: ["大雾"],
+    "cloud-windy": ["风"],
+    windy: ["大风", "刮风"],
+    rainy: ["下雨", "雨天"],
+    drizzle: ["小雨"],
+    showers: ["中雨"],
+    "heavy-showers": ["大雨"],
+    thunderstorms: ["雷暴", "雷阵雨"],
+    hail: ["冰雹"],
+    snowy: ["下雪", "雪天"],
+    "sun-cloudy": ["晴转多云"],
+    "moon-cloudy": ["夜间多云"],
+    tornado: ["龙卷风"],
+    typhoon: ["cyclone", "tornado", "龙卷风", "旋风", "台风"],
+    haze: ["阴霾", "薄雾"],
+    "haze-2": ["阴霾", "薄雾"],
+    "sun-foggy": ["薄雾"],
+    "moon-foggy": ["薄雾"],
+    "moon-clear": ["夜间模式", "夜间无云"],
+    "temp-hot": ["temperature", "温度", "高温", "热"],
+    "temp-cold": ["temperature", "温度", "低温", "冷"],
+    celsius: ["temperature", "温度", "摄氏度"],
+    fahrenheit: ["temperature", "温度", "华氏度"],
+    fire: ["hot", "火", "热门"],
+    blaze: ["火灾"],
+    earthquake: ["地震"],
+    flood: ["洪水"],
+    meteor: ["流星", "陨石"],
+    rainbow: ["彩虹"],
+  },
+  Others: {
+    basketball: ["sports", "运动", "篮球"],
+    bell: ["cartoon", "anime", "doraemon", "铃铛", "哆啦A梦", "卡通", "动漫"],
+    billiards: ["sports", "运动", "台球", "8"],
+    boxing: ["sports", "运动", "拳击"],
+    cake: ["anniversary", "蛋糕"],
+    "cake-2": ["anniversary", "蛋糕"],
+    "cake-3": ["蛋糕"],
+    "door-lock": ["门锁"],
+    "door-lock-box": ["门锁"],
+    football: ["sports", "运动", "足球"],
+    game: ["pac man", "游戏", "吃豆人"],
+    handbag: ["fashion", "时尚", "手提包", "女包"],
+    key: ["password", "钥匙", "密码"],
+    "key-2": ["password", "钥匙", "密码"],
+    knife: ["刀"],
+    "knife-blood": ["crime", "刀", "犯罪", "血", "杀人"],
+    lightbulb: ["energy", "creativity", "灯泡", "能源"],
+    "lightbulb-flash": ["energy", "creativity", "灯泡", "能源", "闪电"],
+    outlet: ["插座"],
+    "outlet-2": ["插座"],
+    "ping-pong": ["sports", "table tennis", "运动", "乒乓球"],
+    plug: ["二脚插头"],
+    "plug-2": ["三脚插头"],
+    reserved: ["已预定"],
+    shirt: ["clothes", "衬衫", "衣服"],
+    sword: ["war", "刀剑", "战争", "战斗", "玄幻"],
+    "t-shirt": ["skin", "theme", "T恤", "皮肤", "主题"],
+    "t-shirt-2": ["skin", "theme", "T恤", "皮肤", "主题"],
+    "t-shirt-air": ["dry", "T恤", "风干", "烘干"],
+    umbrella: ["protect", "雨伞", "保护"],
+    "character-recognition": ["ocr", "文字识别"],
+    "voice-recognition": ["asr", "语音识别"],
+    leaf: ["energy", "ecology", "树叶", "节能", "环保", "语音识别"],
+    plant: ["植物"],
+    seedling: ["树苗", "植物"],
+    recycle: ["recyclable", "可回收"],
+    scales: ["balance", "称", "天平", "天秤"],
+    "scales-2": ["厨房称"],
+    "scales-3": ["balance", "称", "天平", "天秤"],
+    fridge: ["refrigerator", "电冰箱"],
+    wheelchair: ["accessbility", "轮椅", "可访问性", "辅助功能"],
+    cactus: ["desertr", "仙人掌", "沙漠"],
+    door: ["门"],
+    "door-open": ["开门"],
+    "door-closed": ["关门"],
+  },
+}
diff --git a/packages/builder/src/components/userInterface/IconSelect/index.js b/packages/builder/src/components/userInterface/IconSelect/index.js
index 716915d99b..5f62d8970b 100644
--- a/packages/builder/src/components/userInterface/IconSelect/index.js
+++ b/packages/builder/src/components/userInterface/IconSelect/index.js
@@ -1,3 +1 @@
-import "@fortawesome/fontawesome-free/js/all.js"
-
 export { default as IconSelect } from "./IconSelect.svelte"
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index fbbc54eec9..d41491d56a 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -1153,16 +1153,23 @@ export default {
                 label: "Size",
                 key: "size",
                 control: OptionSelect,
-                defaultValue: "fa-lg",
+                defaultValue: "md",
                 options: [
-                  { value: "fa-xs", label: "xs" },
-                  { value: "fa-sm", label: "sm" },
-                  { value: "fa-lg", label: "lg" },
-                  { value: "fa-2x", label: "2x" },
-                  { value: "fa-3x", label: "3x" },
-                  { value: "fa-5x", label: "5x" },
-                  { value: "fa-7x", label: "7x" },
-                  { value: "fa-10x", label: "10x" },
+                  { value: "ri-xxs", label: "xxs" },
+                  { value: "ri-xs", label: "xs" },
+                  { value: "ri-sm", label: "sm" },
+                  { value: "ri-1x", label: "md" },
+                  { value: "ri-lg", label: "lg" },
+                  { value: "ri-xl", label: "xl" },
+                  { value: "ri-2x", label: "2x" },
+                  { value: "ri-3x", label: "3x" },
+                  { value: "ri-4x", label: "4x" },
+                  { value: "ri-5x", label: "5x" },
+                  { value: "ri-6x", label: "6x" },
+                  { value: "ri-7x", label: "7x" },
+                  { value: "ri-8x", label: "8x" },
+                  { value: "ri-9x", label: "9x" },
+                  { value: "ri-10x", label: "10x" },
                 ],
               },
               {
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index f2f7363669..ca6c1252ae 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -854,6 +854,16 @@
     svelte-portal "^1.0.0"
     turndown "^7.0.0"
 
+"@budibase/client@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.4.3.tgz#eaf1ac83ed04722c29ea51907ac7c2190bd09b74"
+  integrity sha512-gfVIU7P1HCMuH9rgmqgv2pD5oFDwwuX0QF3+FXuKR3/Cr6JW+bstVsNZHGgwOrmbxT3oAxfeNX186zrQupJ42w==
+  dependencies:
+    deep-equal "^2.0.1"
+    mustache "^4.0.1"
+    regexparam "^1.3.0"
+    svelte-spa-router "^3.0.5"
+
 "@budibase/colorpicker@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@budibase/colorpicker/-/colorpicker-1.0.1.tgz#940c180e7ebba0cb0756c4c8ef13f5dfab58e810"
@@ -1646,6 +1656,11 @@ array-equal@^1.0.0:
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
   integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
 
+array-filter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
+  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
+
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
@@ -1713,6 +1728,13 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+available-typed-arrays@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
+  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
+  dependencies:
+    array-filter "^1.0.0"
+
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -2876,6 +2898,27 @@ deep-equal@^1.0.1:
     object-keys "^1.1.1"
     regexp.prototype.flags "^1.2.0"
 
+deep-equal@^2.0.1:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.5.tgz#55cd2fe326d83f9cbf7261ef0e060b3f724c5cb9"
+  integrity sha512-nPiRgmbAtm1a3JsnLCf6/SLfXcjyN5v8L1TXzdCmHrXJ4hx+gW/w1YCcn7z8gJtSiDArZCgYtbao3QqLm/N1Sw==
+  dependencies:
+    call-bind "^1.0.0"
+    es-get-iterator "^1.1.1"
+    get-intrinsic "^1.0.1"
+    is-arguments "^1.0.4"
+    is-date-object "^1.0.2"
+    is-regex "^1.1.1"
+    isarray "^2.0.5"
+    object-is "^1.1.4"
+    object-keys "^1.1.1"
+    object.assign "^4.1.2"
+    regexp.prototype.flags "^1.3.0"
+    side-channel "^1.0.3"
+    which-boxed-primitive "^1.0.1"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.2"
+
 deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -3102,6 +3145,20 @@ es-abstract@^1.18.0-next.1:
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
+es-get-iterator@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.1.tgz#b93ddd867af16d5118e00881396533c1c6647ad9"
+  integrity sha512-qorBw8Y7B15DVLaJWy6WdEV/ZkieBcu6QCq/xzWzGOKJqgG1j754vXRfZ3NY7HSShneqU43mPB4OkQBTkvHhFw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.1"
+    has-symbols "^1.0.1"
+    is-arguments "^1.0.4"
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-string "^1.0.5"
+    isarray "^2.0.5"
+
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -3485,7 +3542,7 @@ for-in@^1.0.2:
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
   integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
 
-foreach@~2.0.1:
+foreach@^2.0.5, foreach@~2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
   integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
@@ -3584,6 +3641,15 @@ get-intrinsic@^1.0.0:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
+get-intrinsic@^1.0.1, get-intrinsic@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.0.2.tgz#6820da226e50b24894e08859469dc68361545d49"
+  integrity sha512-aeX0vrFm21ILl3+JpFFRNe9aUvp6VFZb2/CTbgLb8j75kOhvoNYjt9d8KA/tJG4gSo8nzEDedRl0h7vDmBYRVg==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+
 get-port@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
@@ -3951,6 +4017,11 @@ is-arrayish@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
+is-bigint@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.1.tgz#6923051dfcbc764278540b9ce0e6b3213aa5ebc2"
+  integrity sha512-J0ELF4yHFxHy0cmSxZuheDOz2luOdVvqjwmEcj8H/L1JHeuEDSDbeRP+Dk9kFVk5RTFzbucJ2Kb9F7ixY2QaCg==
+
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@@ -3958,6 +4029,13 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
+is-boolean-object@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.0.tgz#e2aaad3a3a8fca34c28f6eee135b156ed2587ff0"
+  integrity sha512-a7Uprx8UtD+HWdyYwnD1+ExtTgqQtD2k/1yJgtXP6wnMm8byhkoTZRl+95LLThpzNZJ5aEvi46cdH+ayMFRwmA==
+  dependencies:
+    call-bind "^1.0.0"
+
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -3996,7 +4074,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1:
+is-date-object@^1.0.1, is-date-object@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
   integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
@@ -4073,6 +4151,11 @@ is-installed-globally@^0.3.2:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
+is-map@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
+  integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==
+
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
@@ -4083,6 +4166,11 @@ is-negative-zero@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
   integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
 
+is-number-object@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
+  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
+
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -4148,6 +4236,11 @@ is-regex@^1.0.4, is-regex@^1.1.1:
   dependencies:
     has-symbols "^1.0.1"
 
+is-set@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
+  integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==
+
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@@ -4158,18 +4251,44 @@ is-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
   integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
 
-is-symbol@^1.0.2:
+is-string@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
+  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
+
+is-symbol@^1.0.2, is-symbol@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
   integrity sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==
   dependencies:
     has-symbols "^1.0.1"
 
+is-typed-array@^1.1.3:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.4.tgz#1f66f34a283a3c94a4335434661ca53fff801120"
+  integrity sha512-ILaRgn4zaSrVNXNGtON6iFNotXW3hAPF3+0fB1usg2jFlWqo5fEDdmJkz0zBfoi7Dgskr8Khi2xZ8cXqZEfXNA==
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    call-bind "^1.0.0"
+    es-abstract "^1.18.0-next.1"
+    foreach "^2.0.5"
+    has-symbols "^1.0.1"
+
 is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
+is-weakmap@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
+  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
+
+is-weakset@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
+  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
+
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -4195,6 +4314,11 @@ isarray@1.0.0, isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
 isbuffer@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/isbuffer/-/isbuffer-0.0.0.tgz#38c146d9df528b8bf9b0701c3d43cf12df3fc39b"
@@ -5484,6 +5608,11 @@ object-inspect@^1.8.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
   integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
 
+object-inspect@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.9.0.tgz#c90521d74e1127b67266ded3394ad6116986533a"
+  integrity sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==
+
 object-is@^1.0.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.3.tgz#2e3b9e65560137455ee3bd62aec4d90a2ea1cc81"
@@ -5492,6 +5621,14 @@ object-is@^1.0.1:
     define-properties "^1.1.3"
     es-abstract "^1.18.0-next.1"
 
+object-is@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.4.tgz#63d6c83c00a43f4cbc9434eb9757c8a5b8565068"
+  integrity sha512-1ZvAZ4wlF7IyPVOcE1Omikt7UpaFlOQq0HlSti+ZvDH3UiD2brwGMwDbyV43jao2bKJ+4+WdPJHSd7kgzKYVqg==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+
 object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -5518,7 +5655,7 @@ object-visit@^1.0.0:
   dependencies:
     isobject "^3.0.0"
 
-object.assign@^4.1.0, object.assign@^4.1.1:
+object.assign@^4.1.0, object.assign@^4.1.1, object.assign@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
   integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
@@ -6098,7 +6235,7 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexp.prototype.flags@^1.2.0:
+regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
   integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
@@ -6106,6 +6243,11 @@ regexp.prototype.flags@^1.2.0:
     define-properties "^1.1.3"
     es-abstract "^1.17.0-next.1"
 
+regexparam@1.3.0, regexparam@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
+  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
+
 regexpu-core@^4.7.1:
   version "4.7.1"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.1.tgz#2dea5a9a07233298fbf0db91fa9abc4c6e0f8ad6"
@@ -6590,6 +6732,15 @@ shortid@^2.2.15:
   dependencies:
     nanoid "^2.1.0"
 
+side-channel@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -7006,6 +7157,13 @@ svelte-portal@^1.0.0:
   resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-1.0.0.tgz#36a47c5578b1a4d9b4dc60fa32a904640ec4cdd3"
   integrity sha512-nHf+DS/jZ6jjnZSleBMSaZua9JlG5rZv9lOGKgJuaZStfevtjIlUJrkLc3vbV8QdBvPPVmvcjTlazAzfKu0v3Q==
 
+svelte-spa-router@^3.0.5:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/svelte-spa-router/-/svelte-spa-router-3.1.0.tgz#a929f0def7e12c41f32bc356f91685aeadcd75bf"
+  integrity sha512-jlM/xwjn57mylr+pzHYCOOy+IPQauT46gOucNGTBu6jHcFXu3F+oaojN4PXC1LYizRGxFB6QA0qnYbZnRfX7Sg==
+  dependencies:
+    regexparam "1.3.0"
+
 svelte@^3.30.0:
   version "3.30.0"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.30.0.tgz#cbde341e96bf34f4ac73c8f14f8a014e03bfb7d6"
@@ -7435,11 +7593,45 @@ whatwg-url@^8.0.0:
     tr46 "^2.0.2"
     webidl-conversions "^6.1.0"
 
+which-boxed-primitive@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
+  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
+  dependencies:
+    is-bigint "^1.0.1"
+    is-boolean-object "^1.1.0"
+    is-number-object "^1.0.4"
+    is-string "^1.0.5"
+    is-symbol "^1.0.3"
+
+which-collection@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
+  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
+  dependencies:
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-weakmap "^2.0.1"
+    is-weakset "^2.0.1"
+
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
+which-typed-array@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.4.tgz#8fcb7d3ee5adf2d771066fba7cf37e32fe8711ff"
+  integrity sha512-49E0SpUe90cjpoc7BOJwyPHRqSAd12c10Qm2amdEZrJPCY2NDxaW01zHITrem+rnETY3dwrbH3UUrUwagfCYDA==
+  dependencies:
+    available-typed-arrays "^1.0.2"
+    call-bind "^1.0.0"
+    es-abstract "^1.18.0-next.1"
+    foreach "^2.0.5"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.1"
+    is-typed-array "^1.1.3"
+
 which@^1.2.9, which@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 7da618224e..fb924c08ee 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -133,7 +133,7 @@
 			"icon": "string",
 			"size": {
 				"type": "string",
-				"default": "fa-lg"
+				"default": "md"
 			},
 			"color": {
 				"type": "string",
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 006fe9da5c..ef60ef90aa 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -35,12 +35,12 @@
   "dependencies": {
     "@budibase/bbui": "^1.52.4",
     "@budibase/svelte-ag-grid": "^0.0.16",
-    "@fortawesome/fontawesome-free": "^5.14.0",
     "apexcharts": "^3.22.1",
     "flatpickr": "^4.6.6",
     "lodash.debounce": "^4.0.8",
     "markdown-it": "^12.0.2",
     "quill": "^1.3.7",
+    "remixicon": "^2.5.0",
     "svelte-apexcharts": "^1.0.2",
     "svelte-flatpickr": "^3.1.0",
     "turndown": "^7.0.0"
diff --git a/packages/standard-components/src/Icon.svelte b/packages/standard-components/src/Icon.svelte
index ee60f95a53..c3ab1e194b 100644
--- a/packages/standard-components/src/Icon.svelte
+++ b/packages/standard-components/src/Icon.svelte
@@ -1,5 +1,4 @@
 <script>
-  import "@fortawesome/fontawesome-free/js/all.js"
   import { getContext } from "svelte"
 
   const { styleable } = getContext("sdk")
diff --git a/packages/standard-components/yarn.lock b/packages/standard-components/yarn.lock
index 507dd84674..2a4358a78a 100644
--- a/packages/standard-components/yarn.lock
+++ b/packages/standard-components/yarn.lock
@@ -2362,6 +2362,11 @@ regexp.prototype.flags@^1.2.0:
     define-properties "^1.1.3"
     es-abstract "^1.17.0-next.1"
 
+remixicon@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/remixicon/-/remixicon-2.5.0.tgz#b5e245894a1550aa23793f95daceadbf96ad1a41"
+  integrity sha512-q54ra2QutYDZpuSnFjmeagmEiN9IMo56/zz5dDNitzKD23oFRw77cWo4TsrAdmdkPiEn8mxlrTqxnkujDbEGww==
+
 require-relative@^0.8.7:
   version "0.8.7"
   resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
diff --git a/yarn.lock b/yarn.lock
index f4d4d2114f..17823a5d74 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -107,16 +107,6 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@fortawesome/fontawesome-common-types@^0.1.7":
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz#4336c4b06d0b5608ff1215464b66fcf9f4795284"
-
-"@fortawesome/fontawesome@^1.1.8":
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome/-/fontawesome-1.1.8.tgz#75fe66a60f95508160bb16bd781ad7d89b280f5b"
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.1.7"
-
 "@lerna/add@3.14.0":
   version "3.14.0"
   resolved "https://registry.yarnpkg.com/@lerna/add/-/add-3.14.0.tgz#799d416e67d48c285967abf883be746557aefa48"

From b5c4bde66249badfce850fecd553f4e77bd88209 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Mon, 18 Jan 2021 14:41:59 +0000
Subject: [PATCH 46/70] queries working with repeater

---
 .../builderStore/fetchBindableProperties.js   | 47 +++++++++++++++++--
 .../EventsEditor/actions/CreateRow.svelte     |  1 +
 .../EventsEditor/actions/DeleteRow.svelte     |  1 +
 .../EventsEditor/actions/ExecuteQuery.svelte  |  1 +
 .../EventsEditor/actions/SaveFields.svelte    |  4 +-
 .../EventsEditor/actions/SaveRow.svelte       |  1 +
 .../EventsEditor/actions/UpdateRow.svelte     |  1 +
 .../userInterface/PropertyControl.svelte      |  1 +
 .../userInterface/ScreenSelect.svelte         |  1 +
 .../userInterface/TableViewSelect.svelte      |  1 +
 10 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/packages/builder/src/builderStore/fetchBindableProperties.js b/packages/builder/src/builderStore/fetchBindableProperties.js
index 962fb80ebf..9302f3c0f0 100644
--- a/packages/builder/src/builderStore/fetchBindableProperties.js
+++ b/packages/builder/src/builderStore/fetchBindableProperties.js
@@ -23,13 +23,20 @@ import { cloneDeep, difference } from "lodash/fp"
  * @param {fetchBindablePropertiesParameter} param
  * @returns {Array.<BindableProperty>}
  */
-export default function({ componentInstanceId, screen, components, tables }) {
+export default function({
+  componentInstanceId,
+  screen,
+  components,
+  tables,
+  queries,
+}) {
   const result = walk({
     // cloning so we are free to mutate props (e.g. by adding _contexts)
     instance: cloneDeep(screen.props),
     targetId: componentInstanceId,
     components,
     tables,
+    queries,
   })
 
   return [
@@ -37,6 +44,9 @@ export default function({ componentInstanceId, screen, components, tables }) {
       .filter(isInstanceInSharedContext(result))
       .map(componentInstanceToBindable),
     ...(result.target?._contexts.map(contextToBindables(tables)).flat() ?? []),
+    ...(result.target?._contexts
+      .map(context => queriesToBindables(queries, context))
+      .flat() ?? []),
   ]
 }
 
@@ -61,9 +71,36 @@ const componentInstanceToBindable = i => {
   }
 }
 
+const queriesToBindables = (queries, context) => {
+  let queryId = context.table._id
+
+  const query = queries.find(query => query._id === queryId)
+  let schema = query?.schema
+
+  // Avoid crashing whenever no data source has been selected
+  if (!schema) {
+    return []
+  }
+
+  const queryBindings = Object.entries(schema).map(([key, value]) => ({
+    type: "context",
+    fieldSchema: value,
+    instance: context.instance,
+    // how the binding expression persists, and is used in the app at runtime
+    runtimeBinding: `${context.instance._id}.${key}`,
+    // how the binding expressions looks to the user of the builder
+    readableBinding: `${context.instance._instanceName}.${query.name}.${key}`,
+    // table / view info
+    table: context.table,
+  }))
+
+  return queryBindings
+}
+
 const contextToBindables = tables => context => {
-  const tableId = context.table?.tableId ?? context.table
-  const table = tables.find(table => table._id === tableId)
+  let tableId = context.table?.tableId ?? context.table
+
+  const table = tables.find(table => table._id === tableId || context.table._id)
   let schema =
     context.table?.type === "view"
       ? table?.views?.[context.table.name]?.schema
@@ -152,8 +189,8 @@ const walk = ({ instance, targetId, components, tables, result }) => {
 
   const currentContexts = [...result.currentContexts]
   for (let child of instance._children || []) {
-    // attaching _contexts of components, for eas comparison later
-    // these have been deep cloned above, so shouln't modify the
+    // attaching _contexts of components, for easy comparison later
+    // these have been deep cloned above, so shouldn't modify the
     // original component instances
     child._contexts = currentContexts
     walk({ instance: child, targetId, components, tables, result })
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/CreateRow.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/CreateRow.svelte
index 388b247a4b..fa2186a909 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/CreateRow.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/CreateRow.svelte
@@ -11,6 +11,7 @@
     components: $store.components,
     screen: $currentAsset,
     tables: $backendUiStore.tables,
+    queries: $backendUiStore.queries,
   })
 
   const tableFields = tableId => {
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/DeleteRow.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/DeleteRow.svelte
index b53b6f664a..287f93f835 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/DeleteRow.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/DeleteRow.svelte
@@ -12,6 +12,7 @@
     components: $store.components,
     screen: $currentAsset,
     tables: $backendUiStore.tables,
+    queries: $backendUiStore.queries,
   })
 
   $: idFields = bindableProperties.filter(
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
index 175eff823b..0f56d1f7ed 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
@@ -15,6 +15,7 @@
     components: $store.components,
     screen: $currentAsset,
     tables: $backendUiStore.tables,
+    queries: $backendUiStore.queries
   }).map(property => ({
     ...property,
     category: property.type === "instance" ? "Component" : "Table",
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/SaveFields.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/SaveFields.svelte
index 221b41f199..ec1112f520 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/SaveFields.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/SaveFields.svelte
@@ -44,6 +44,7 @@
     components: $store.components,
     screen: $currentAsset,
     tables: $backendUiStore.tables,
+    queries: $backendUiStore.queries,
   })
 
   const addField = () => {
@@ -114,8 +115,7 @@
     <Spacer small />
 
     <TextButton text small blue on:click={addField}>
-      Add
-      {fieldLabel}
+      Add {fieldLabel}
       <div style="height: 20px; width: 20px;">
         <AddIcon />
       </div>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/SaveRow.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/SaveRow.svelte
index 8fba08b59b..5347dc47f5 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/SaveRow.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/SaveRow.svelte
@@ -20,6 +20,7 @@
     components: $store.components,
     screen: $currentAsset,
     tables: $backendUiStore.tables,
+    queries: $backendUiStore.queries,
   })
 
   $: {
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/UpdateRow.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/UpdateRow.svelte
index f1c06ff937..4630adfb2a 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/UpdateRow.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/UpdateRow.svelte
@@ -15,6 +15,7 @@
     components: $store.components,
     screen: $currentAsset,
     tables: $backendUiStore.tables,
+    queries: $backendUiStore.queries,
   })
 
   let idFields
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index f96e8e6a42..4bf9082091 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -35,6 +35,7 @@
       components: $store.components,
       screen: $currentAsset,
       tables: $backendUiStore.tables,
+      queries: $backendUiStore.queries,
     })
   }
 
diff --git a/packages/builder/src/components/userInterface/ScreenSelect.svelte b/packages/builder/src/components/userInterface/ScreenSelect.svelte
index 9a3e555740..a1f9f76f20 100644
--- a/packages/builder/src/components/userInterface/ScreenSelect.svelte
+++ b/packages/builder/src/components/userInterface/ScreenSelect.svelte
@@ -31,6 +31,7 @@
       components: $store.components,
       screen: $currentAsset,
       tables: $backendUiStore.tables,
+      queries: $backendUiStore.queries,
     })
 
     const detailScreens = $allScreens.filter(screen =>
diff --git a/packages/builder/src/components/userInterface/TableViewSelect.svelte b/packages/builder/src/components/userInterface/TableViewSelect.svelte
index 694a2c0b7a..be16a9109a 100644
--- a/packages/builder/src/components/userInterface/TableViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableViewSelect.svelte
@@ -45,6 +45,7 @@
     components: $store.components,
     screen: $currentAsset,
     tables: $backendUiStore.tables,
+    queries: $backendUiStore.queries
   })
 
   $: queryBindableProperties = bindableProperties.map(property => ({

From 9bd142244951cbdc33b67ddf81efdc21843a523c Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 18 Jan 2021 16:23:14 +0100
Subject: [PATCH 47/70] adds missing css link in the actual app output

---
 .../src/api/controllers/static/templates/BudibaseApp.svelte      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
index 818b6bbd45..71cb81b9cf 100644
--- a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
+++ b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
@@ -22,6 +22,7 @@
   <title>{title}</title>
   <link rel="icon" type="image/png" href={favicon} />
   <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+  <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
   <style>
     html,
     body {

From 956d1f4fc111bbca763710fbb4e6308d21be26b0 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Mon, 18 Jan 2021 16:34:34 +0100
Subject: [PATCH 48/70] turn off stylable action until we can expose specific
 design settings

---
 packages/standard-components/src/Icon.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/standard-components/src/Icon.svelte b/packages/standard-components/src/Icon.svelte
index c3ab1e194b..643b07836a 100644
--- a/packages/standard-components/src/Icon.svelte
+++ b/packages/standard-components/src/Icon.svelte
@@ -1,8 +1,9 @@
 <script>
   import { getContext } from "svelte"
 
-  const { styleable } = getContext("sdk")
-  const component = getContext("component")
+  // Add this back once we can define specific design options to expose
+  // const { styleable } = getContext("sdk")
+  // const component = getContext("component")
 
   export let icon = ""
   export let size = "fa-lg"
@@ -11,5 +12,4 @@
 
 <i
   style={`color: ${color};`}
-  class={`${icon} ${size}`}
-  use:styleable={$component.styles} />
+  class={`${icon} ${size}`} />

From 133d93fbeed5a84cce60b610aeb00fa15a2a1b10 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Mon, 18 Jan 2021 15:37:32 +0000
Subject: [PATCH 49/70] fix dynamic params

---
 .../builder/src/builderStore/store/backend.js |  6 +--
 .../DatasourceNavigator.svelte                | 11 +++---
 .../src/components/integration/index.svelte   | 38 ++++++++++---------
 .../EventsEditor/actions/ExecuteQuery.svelte  |  2 +-
 .../userInterface/TableViewFieldSelect.svelte |  8 ++--
 .../userInterface/TableViewSelect.svelte      |  2 +-
 packages/client/src/api/datasources.js        |  2 +-
 7 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index df752cf6a1..0a235dd9a0 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -139,10 +139,10 @@ export const getBackendUiStore = () => {
         })
         return json
       },
-      select: queryId =>
+      select: query =>
         store.update(state => {
-          state.selectedDatasourceId = null
-          state.selectedQueryId = queryId
+          state.selectedDatasourceId = query.datasourceId
+          state.selectedQueryId = query._id
           return state
         }),
       delete: async query => {
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
index 1bcdbaca64..aa8954cb8d 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
@@ -18,13 +18,12 @@
     $goto(`./datasource/${datasource._id}`)
   }
 
-  function onClickQuery(datasourceId, queryId) {
-    if ($backendUiStore.selectedQueryId === queryId) {
+  function onClickQuery(query) {
+    if ($backendUiStore.selectedQueryId === query._id) {
       return
     }
-    backendUiStore.actions.datasources.select(datasourceId)
-    backendUiStore.actions.queries.select(queryId)
-    $goto(`./datasource/${datasourceId}/${queryId}`)
+    backendUiStore.actions.queries.select(query)
+    $goto(`./datasource/${query.datasourceId}/${query._id}`)
   }
 
   onMount(() => {
@@ -55,7 +54,7 @@
           icon="ri-eye-line"
           text={query.name}
           selected={$backendUiStore.selectedQueryId === query._id}
-          on:click={() => onClickQuery(datasource._id, query._id)}>
+          on:click={() => onClickQuery(query)}>
           <EditQueryPopover {query} />
         </NavItem>
       {/each}
diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte
index ebaf63898e..1f0aa30c49 100644
--- a/packages/builder/src/components/integration/index.svelte
+++ b/packages/builder/src/components/integration/index.svelte
@@ -29,22 +29,24 @@
 <Spacer medium />
 
 {#if schema}
-  {#if schema.type === QueryTypes.SQL}
-    <Editor
-      label="Query"
-      mode="sql"
-      on:change={updateQuery}
-      readOnly={!editable}
-      value={query.fields.sql} />
-  {:else if schema.type === QueryTypes.JSON}
-    <Spacer large />
-    <Editor
-      label="Query"
-      mode="json"
-      on:change={updateQuery}
-      readOnly={!editable}
-      value={query.fields.json} />
-  {:else if schema.type === QueryTypes.FIELDS}
-    <FieldsBuilder bind:fields={query.fields} {schema} {editable} />
-  {/if}
+  {#key query._id}
+    {#if schema.type === QueryTypes.SQL}
+      <Editor
+        label="Query"
+        mode="sql"
+        on:change={updateQuery}
+        readOnly={!editable}
+        value={query.fields.sql} />
+    {:else if schema.type === QueryTypes.JSON}
+      <Spacer large />
+      <Editor
+        label="Query"
+        mode="json"
+        on:change={updateQuery}
+        readOnly={!editable}
+        value={query.fields.json} />
+    {:else if schema.type === QueryTypes.FIELDS}
+      <FieldsBuilder bind:fields={query.fields} {schema} {editable} />
+    {/if}
+  {/key}
 {/if}
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
index 0f56d1f7ed..34f0dbda7c 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
@@ -51,7 +51,7 @@
 
   <Spacer medium />
 
-  {#if query?.parameters.length > 0}
+  {#if query?.parameters?.length > 0}
     <ParameterBuilder
       bind:customParams={parameters.queryParams}
       parameters={query.parameters}
diff --git a/packages/builder/src/components/userInterface/TableViewFieldSelect.svelte b/packages/builder/src/components/userInterface/TableViewFieldSelect.svelte
index 756936be82..9a3b949e2b 100644
--- a/packages/builder/src/components/userInterface/TableViewFieldSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableViewFieldSelect.svelte
@@ -9,17 +9,19 @@
   export let multiselect = false
 
   const tables = $backendUiStore.tables
+  const queries = $backendUiStore.queries
 
   let options = []
 
-  $: table = componentInstance.datasource
+  $: table = componentInstance.datasource?.type === "table"
     ? tables.find(m => m._id === componentInstance.datasource.tableId)
-    : null
+    : queries.find(query => query._id === componentInstance.datasource._id)
 
   $: type = componentInstance.datasource.type
+
   $: if (table) {
     options =
-      type === "table" || type === "link"
+      type === "table" || type === "link" || type === "query"
         ? Object.keys(table.schema)
         : Object.keys(table.views[componentInstance.datasource.name].schema)
   }
diff --git a/packages/builder/src/components/userInterface/TableViewSelect.svelte b/packages/builder/src/components/userInterface/TableViewSelect.svelte
index be16a9109a..ccf3751a14 100644
--- a/packages/builder/src/components/userInterface/TableViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableViewSelect.svelte
@@ -122,7 +122,7 @@
         {#if value.parameters.length > 0}
           <ParameterBuilder
             bind:customParams={value.queryParams}
-            parameters={value.parameters}
+            parameters={queries.find(query => query._id === value._id).parameters}
             bindings={queryBindableProperties} />
         {/if}
       </div>
diff --git a/packages/client/src/api/datasources.js b/packages/client/src/api/datasources.js
index 15e3a6fc10..ff91a9f61d 100644
--- a/packages/client/src/api/datasources.js
+++ b/packages/client/src/api/datasources.js
@@ -25,7 +25,7 @@ export const fetchDatasource = async (datasource, dataContext) => {
   } else if (type === "query") {
     const bindings = get(bindingStore)
 
-    // TODO: refactor. Set these defaults up somewhere else
+    // Set the default query params
     let queryParams = datasource.queryParams || {}
     for (let param of datasource.parameters) {
       if (!queryParams[param.name]) {

From 4143718d70af8f36656157d9f5fb159ef5b242f3 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Mon, 18 Jan 2021 15:40:26 +0000
Subject: [PATCH 50/70] lint

---
 .../src/components/integration/QueryViewer.svelte  | 14 ++++++++++----
 .../EventsEditor/actions/ExecuteQuery.svelte       |  2 +-
 .../userInterface/TableViewFieldSelect.svelte      |  7 ++++---
 .../userInterface/TableViewSelect.svelte           |  2 +-
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 6d3d984962..c8157780b8 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -91,11 +91,12 @@
 
       data = json || []
 
-
       if (data.length === 0) {
-        notifier.info("Query results empty. Please execute a query with results to create your schema.")
+        notifier.info(
+          "Query results empty. Please execute a query with results to create your schema."
+        )
         return
-      } 
+      }
 
       notifier.success("Query executed successfully.")
 
@@ -170,7 +171,12 @@
       <Spacer medium />
 
       <div class="viewer-controls">
-        <Button wide thin blue disabled={data.length === 0} on:click={saveQuery}>
+        <Button
+          wide
+          thin
+          blue
+          disabled={data.length === 0}
+          on:click={saveQuery}>
           Save
         </Button>
         <Button wide thin primary on:click={previewQuery}>Run</Button>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
index 34f0dbda7c..05171a0256 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/actions/ExecuteQuery.svelte
@@ -15,7 +15,7 @@
     components: $store.components,
     screen: $currentAsset,
     tables: $backendUiStore.tables,
-    queries: $backendUiStore.queries
+    queries: $backendUiStore.queries,
   }).map(property => ({
     ...property,
     category: property.type === "instance" ? "Component" : "Table",
diff --git a/packages/builder/src/components/userInterface/TableViewFieldSelect.svelte b/packages/builder/src/components/userInterface/TableViewFieldSelect.svelte
index 9a3b949e2b..0b4b000488 100644
--- a/packages/builder/src/components/userInterface/TableViewFieldSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableViewFieldSelect.svelte
@@ -13,9 +13,10 @@
 
   let options = []
 
-  $: table = componentInstance.datasource?.type === "table"
-    ? tables.find(m => m._id === componentInstance.datasource.tableId)
-    : queries.find(query => query._id === componentInstance.datasource._id)
+  $: table =
+    componentInstance.datasource?.type === "table"
+      ? tables.find(m => m._id === componentInstance.datasource.tableId)
+      : queries.find(query => query._id === componentInstance.datasource._id)
 
   $: type = componentInstance.datasource.type
 
diff --git a/packages/builder/src/components/userInterface/TableViewSelect.svelte b/packages/builder/src/components/userInterface/TableViewSelect.svelte
index ccf3751a14..dc34923deb 100644
--- a/packages/builder/src/components/userInterface/TableViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableViewSelect.svelte
@@ -45,7 +45,7 @@
     components: $store.components,
     screen: $currentAsset,
     tables: $backendUiStore.tables,
-    queries: $backendUiStore.queries
+    queries: $backendUiStore.queries,
   })
 
   $: queryBindableProperties = bindableProperties.map(property => ({

From d3311fbae4ead3a78ed7603ca583ad78997c92b2 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Mon, 18 Jan 2021 15:47:02 +0000
Subject: [PATCH 51/70] tidy up

---
 .../DataTable/ExternalDataSourceTable.svelte  | 20 -------------------
 1 file changed, 20 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte b/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
index 071f0fe393..9be0481c58 100644
--- a/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
@@ -10,26 +10,6 @@
 
   let loading = false
   let error = false
-
-  // async function fetchData() {
-  //   try {
-  //     loading = true
-  //     const response = await api.fetchDataForQuery(
-  //       $params.selectedDatasource,
-  //       query._id
-  //     )
-  //     data = response.rows || []
-  //     error = false
-  //   } catch (err) {
-  //     error = `${query}: Query error. (${err.message}). This could be a problem with your datasource configuration.`
-  //     notifier.danger(error)
-  //   } finally {
-  //     loading = false
-  //   }
-  // }
-
-  // Fetch rows for specified query
-  // $: query && fetchData()
 </script>
 
 {#if error}

From 98f32d96d37de2bfa21da50b4933af0f806e2e70 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Mon, 18 Jan 2021 15:54:25 +0000
Subject: [PATCH 52/70] fix bindable test

---
 packages/builder/tests/fetchBindableProperties.spec.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/builder/tests/fetchBindableProperties.spec.js b/packages/builder/tests/fetchBindableProperties.spec.js
index 7f4c895ff9..0122573307 100644
--- a/packages/builder/tests/fetchBindableProperties.spec.js
+++ b/packages/builder/tests/fetchBindableProperties.spec.js
@@ -224,6 +224,8 @@ const testData = () => {
     },
   ]
 
+  const queries = []
+
   const components = {
     "@budibase/standard-components/container": {
       props: {},
@@ -247,5 +249,5 @@ const testData = () => {
     },
   }
 
-  return { screen, tables, components }
+  return { screen, tables, components, queries }
 }

From 72c5b173b6c33e38a15536ce23e972b6b61f4970 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Mon, 18 Jan 2021 17:01:41 +0000
Subject: [PATCH 53/70] docs link

---
 .../src/components/integration/QueryViewer.svelte        | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index c8157780b8..5ac3e550c1 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -59,6 +59,7 @@
   $: datasourceType = datasource?.source
 
   $: config = $backendUiStore.integrations[datasourceType]?.query
+  $: docsLink = $backendUiStore.integrations[datasourceType]?.docs
 
   $: shouldShowQueryConfig = config && query.queryVerb && query.queryType
 
@@ -150,6 +151,10 @@
         {/each}
       </Select>
     {/if}
+    <Spacer medium />
+    <Button primary href={docsLink} target="_blank">
+      <i class="ri-book-2-line" />
+    </Button>
   {/if}
 </header>
 
@@ -222,6 +227,10 @@
     margin-bottom: var(--spacing-m);
   }
 
+  a {
+    font-size: var(--font-size-s);
+  }
+
   .config {
     margin-bottom: var(--spacing-s);
   }

From 163dd255daf4e7a4f847f9202ec29dd3ee0dba33 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Mon, 18 Jan 2021 17:43:36 +0000
Subject: [PATCH 54/70] Update README.md

---
 README.md | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 50ef3dc855..cdd4d69dac 100644
--- a/README.md
+++ b/README.md
@@ -73,12 +73,9 @@ When other platforms chose the closed source route, we decided to go open source
 ## ⌛ Status
 - [x] Alpha: We are demoing Budibase to users and receiving feedback
 - [x] Private Beta: We are testing Budibase with a closed set of customers
-- [x] Public Beta: Anyone can [sign-up and use Budibase](https://portal.budi.live/signup) but it's not production ready. We cannot ensure backwards compatibility
+- [x] Public Beta: Anyone can [sign-up and use Budibase](https://portal.budi.live/signup).
 - [ ] Official Launch: Production-ready
 
-
-We are currently in Public Beta. Until our official launch, we cannot ensure backwards compatibility for your Budibase applications between versions. Issues may arise when trying to edit apps created with old versions of the Budibase builder.
-
 Watch "releases" of this repo to get notified of major updates, and give the star button a click whilst you're there. 
 
 <p align="center">

From cf4dfba0c44c4b3afa06cadcd3396f4fa568d48a Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Mon, 18 Jan 2021 17:44:08 +0000
Subject: [PATCH 55/70] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index cdd4d69dac..ada7b7fecd 100644
--- a/README.md
+++ b/README.md
@@ -8,10 +8,10 @@
 </h1>
 
 <h3 align="center">
-  Build business apps 50x faster
+  Build internal tools 50x faster
 </h3>
 <p align="center">
-  Budibase is an open-source low-code platform that helps developers and IT professionals design, build, and ship business apps 50x faster.
+  Budibase is an open-source low-code platform that helps developers and IT professionals build, automate and ship internal tools 50x faster.
 </p>
 
 <h3 align="center">

From ae4160019d6f4167dede9c6dc6e28877ec9d8101 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Mon, 18 Jan 2021 17:48:23 +0000
Subject: [PATCH 56/70] Update README.md

---
 README.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index ada7b7fecd..d146d668cf 100644
--- a/README.md
+++ b/README.md
@@ -67,7 +67,13 @@ When other platforms chose the closed source route, we decided to go open source
 
 - **Automate processes, integrate with other tools, and connect to webhooks.** Save time by automating manual processes and workflows. From connecting to webhooks, to automating emails, simply tell Budibase what to do and let it work for you. You can easily [create new automations for Budibase here](https://github.com/Budibase/automations) or [request new integrations here](https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas).
 
-- **Cloud hosting (available) and self-hosting (coming soon).** Users will soon have the option to host with Budibase in AWS (available now) or self-host (coming very soon). From the very beginning, we wanted our users to have the option to self-host. We understand the importance of having full control over data. This is why we are working incredibly hard to offer an easy path to self-hosting. If you are interested in self-hosting, please [join the conversation and add your thoughts](https://github.com/Budibase/budibase/discussions/648).
+- **Cloud hosting and self-hosting.** Users will soon have the option to host with Budibase in AWS (available now) or self-host (coming very soon). From the very beginning, we wanted our users to have the option to self-host. We understand the importance of having full control over data. This is why we are working incredibly hard to offer an easy path to self-hosting. If you are interested in self-hosting, please [join the conversation and add your thoughts](https://github.com/Budibase/budibase/discussions/648).
+
+
+## 🤖 Self-hosting
+Budibase wants to make sure anyone can use the tools we develop and we know a lot of people need to be able to host the apps they make on their own systems - that is why we've decided to try and make self hosting as easy as possible!
+
+Currently, you can host your apps using Docker. The documentation for self-hosting can be found [here](https://docs.budibase.com/self-hosting/introduction-to-self-hosting).
 
 
 ## ⌛ Status

From cbaffe798a324c2d50b7971c709218aea121b006 Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Mon, 18 Jan 2021 17:53:10 +0000
Subject: [PATCH 57/70] Update README.md

---
 README.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/README.md b/README.md
index d146d668cf..22643c93a6 100644
--- a/README.md
+++ b/README.md
@@ -71,6 +71,11 @@ When other platforms chose the closed source route, we decided to go open source
 
 
 ## 🤖 Self-hosting
+
+<p align="center">
+  <img src="https://i.imgur.com/jaCPmTT.png" />
+</p>
+
 Budibase wants to make sure anyone can use the tools we develop and we know a lot of people need to be able to host the apps they make on their own systems - that is why we've decided to try and make self hosting as easy as possible!
 
 Currently, you can host your apps using Docker. The documentation for self-hosting can be found [here](https://docs.budibase.com/self-hosting/introduction-to-self-hosting).

From 041dcec88a4ded695e137b001ea2dc2f441d4ffa Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 19 Jan 2021 08:41:15 +0100
Subject: [PATCH 58/70] updates bbui and adds dummy drawer component to binding

---
 packages/builder/package.json                 |   2 +-
 .../userInterface/PropertyControl.svelte      |  24 +-
 packages/builder/yarn.lock                    | 215 +-----------------
 3 files changed, 22 insertions(+), 219 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 781210041a..7d5b0ee31b 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.52.4",
+    "@budibase/bbui": "^1.53.0",
     "@budibase/client": "^0.5.3",
     "@budibase/colorpicker": "^1.0.1",
     "@budibase/svelte-ag-grid": "^0.0.16",
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 4bf9082091..2c6538add6 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Icon } from "@budibase/bbui"
+  import { Icon, Drawer } from "@budibase/bbui"
   import Input from "./PropertyPanelControls/Input.svelte"
   import { store, backendUiStore, currentAsset } from "builderStore"
   import fetchBindableProperties from "builderStore/fetchBindableProperties"
@@ -7,7 +7,6 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/replaceBindings"
-  import { DropdownMenu } from "@budibase/bbui"
   import BindingDropdown from "components/userInterface/BindingDropdown.svelte"
 
   export let label = ""
@@ -22,7 +21,7 @@
   let temporaryBindableValue = value
   let bindableProperties = []
   let anchor
-  let dropdown
+  let showDrawer = false
 
   function handleClose() {
     handleChange(key, temporaryBindableValue)
@@ -95,23 +94,24 @@
     <div
       class="icon"
       data-cy={`${key}-binding-button`}
-      on:click={dropdown.show}>
+      on:click={() => showDrawer = true}>
       <Icon name="edit" />
     </div>
   {/if}
 </div>
-{#if control == Input}
-  <DropdownMenu
-    on:close={handleClose}
-    bind:this={dropdown}
-    {anchor}
-    align="right">
+{#if showDrawer}
+  <Drawer
+    title="Binding"
+    onClose={() => {
+      handleClose()
+      showDrawer = false
+    }}>
     <BindingDropdown
       {...handlevalueKey(value)}
-      close={dropdown.hide}
+      close={() => showDrawer = false}
       on:update={e => (temporaryBindableValue = e.detail)}
       {bindableProperties} />
-  </DropdownMenu>
+  </Drawer>
 {/if}
 
 <style>
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index 9200f95b91..0a851e8179 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -842,10 +842,10 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.52.4":
-  version "1.52.4"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.52.4.tgz#ae3c17e1f49f14e65831703958bcddc6e64afd24"
-  integrity sha512-/wiv5dSyvXLgy2/zGEslnCsjwE8qqng1D8k5ScSOPEyMab8tzzd1XxfZAN9rp84zIMgAXeH6s5a4j4riR+jVkg==
+"@budibase/bbui@^1.53.0":
+  version "1.53.0"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.53.0.tgz#36b57e6803fb7622111dce3e9766f6c63e34dbb2"
+  integrity sha512-v+L2HCaZ9MD2uyzpAvWQ5vWF+rf3WOkZLMMFpil2GHJ+DHwgm3/9eC4BhHoNjCntF5zxbfpO+Y2DG7AF4UhNgw==
   dependencies:
     markdown-it "^12.0.2"
     quill "^1.3.7"
@@ -854,16 +854,6 @@
     svelte-portal "^1.0.0"
     turndown "^7.0.0"
 
-"@budibase/client@^0.4.3":
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/@budibase/client/-/client-0.4.3.tgz#eaf1ac83ed04722c29ea51907ac7c2190bd09b74"
-  integrity sha512-gfVIU7P1HCMuH9rgmqgv2pD5oFDwwuX0QF3+FXuKR3/Cr6JW+bstVsNZHGgwOrmbxT3oAxfeNX186zrQupJ42w==
-  dependencies:
-    deep-equal "^2.0.1"
-    mustache "^4.0.1"
-    regexparam "^1.3.0"
-    svelte-spa-router "^3.0.5"
-
 "@budibase/colorpicker@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@budibase/colorpicker/-/colorpicker-1.0.1.tgz#940c180e7ebba0cb0756c4c8ef13f5dfab58e810"
@@ -928,11 +918,6 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@fortawesome/fontawesome-free@^5.14.0":
-  version "5.15.1"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.1.tgz#ccfef6ddbe59f8fe8f694783e1d3eb88902dc5eb"
-  integrity sha512-OEdH7SyC1suTdhBGW91/zBfR6qaIhThbcN8PUXtXilY4GYnSBbVqOntdHbC1vXwsDnX0Qix2m2+DSU1J51ybOQ==
-
 "@hapi/hoek@^9.0.0":
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.1.0.tgz#6c9eafc78c1529248f8f4d92b0799a712b6052c6"
@@ -1656,11 +1641,6 @@ array-equal@^1.0.0:
   resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
   integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
 
-array-filter@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
-  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
-
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
@@ -1728,13 +1708,6 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-available-typed-arrays@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
-  integrity sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==
-  dependencies:
-    array-filter "^1.0.0"
-
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -2903,27 +2876,6 @@ deep-equal@^1.0.1:
     object-keys "^1.1.1"
     regexp.prototype.flags "^1.2.0"
 
-deep-equal@^2.0.1:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.0.5.tgz#55cd2fe326d83f9cbf7261ef0e060b3f724c5cb9"
-  integrity sha512-nPiRgmbAtm1a3JsnLCf6/SLfXcjyN5v8L1TXzdCmHrXJ4hx+gW/w1YCcn7z8gJtSiDArZCgYtbao3QqLm/N1Sw==
-  dependencies:
-    call-bind "^1.0.0"
-    es-get-iterator "^1.1.1"
-    get-intrinsic "^1.0.1"
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.2"
-    is-regex "^1.1.1"
-    isarray "^2.0.5"
-    object-is "^1.1.4"
-    object-keys "^1.1.1"
-    object.assign "^4.1.2"
-    regexp.prototype.flags "^1.3.0"
-    side-channel "^1.0.3"
-    which-boxed-primitive "^1.0.1"
-    which-collection "^1.0.1"
-    which-typed-array "^1.1.2"
-
 deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -3150,20 +3102,6 @@ es-abstract@^1.18.0-next.1:
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
-es-get-iterator@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.1.tgz#b93ddd867af16d5118e00881396533c1c6647ad9"
-  integrity sha512-qorBw8Y7B15DVLaJWy6WdEV/ZkieBcu6QCq/xzWzGOKJqgG1j754vXRfZ3NY7HSShneqU43mPB4OkQBTkvHhFw==
-  dependencies:
-    call-bind "^1.0.0"
-    get-intrinsic "^1.0.1"
-    has-symbols "^1.0.1"
-    is-arguments "^1.0.4"
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-string "^1.0.5"
-    isarray "^2.0.5"
-
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -3547,7 +3485,7 @@ for-in@^1.0.2:
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
   integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
 
-foreach@^2.0.5, foreach@~2.0.1:
+foreach@~2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
   integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
@@ -3646,15 +3584,6 @@ get-intrinsic@^1.0.0:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
-get-intrinsic@^1.0.1, get-intrinsic@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.0.2.tgz#6820da226e50b24894e08859469dc68361545d49"
-  integrity sha512-aeX0vrFm21ILl3+JpFFRNe9aUvp6VFZb2/CTbgLb8j75kOhvoNYjt9d8KA/tJG4gSo8nzEDedRl0h7vDmBYRVg==
-  dependencies:
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-
 get-port@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/get-port/-/get-port-3.2.0.tgz#dd7ce7de187c06c8bf353796ac71e099f0980ebc"
@@ -4022,11 +3951,6 @@ is-arrayish@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
-is-bigint@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.1.tgz#6923051dfcbc764278540b9ce0e6b3213aa5ebc2"
-  integrity sha512-J0ELF4yHFxHy0cmSxZuheDOz2luOdVvqjwmEcj8H/L1JHeuEDSDbeRP+Dk9kFVk5RTFzbucJ2Kb9F7ixY2QaCg==
-
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@@ -4034,13 +3958,6 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
-is-boolean-object@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.0.tgz#e2aaad3a3a8fca34c28f6eee135b156ed2587ff0"
-  integrity sha512-a7Uprx8UtD+HWdyYwnD1+ExtTgqQtD2k/1yJgtXP6wnMm8byhkoTZRl+95LLThpzNZJ5aEvi46cdH+ayMFRwmA==
-  dependencies:
-    call-bind "^1.0.0"
-
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -4079,7 +3996,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1, is-date-object@^1.0.2:
+is-date-object@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
   integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
@@ -4156,11 +4073,6 @@ is-installed-globally@^0.3.2:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
-is-map@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
-  integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==
-
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
@@ -4171,11 +4083,6 @@ is-negative-zero@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
   integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
 
-is-number-object@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
-  integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
-
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -4241,11 +4148,6 @@ is-regex@^1.0.4, is-regex@^1.1.1:
   dependencies:
     has-symbols "^1.0.1"
 
-is-set@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
-  integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==
-
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@@ -4256,44 +4158,18 @@ is-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
   integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
 
-is-string@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
-  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
-
-is-symbol@^1.0.2, is-symbol@^1.0.3:
+is-symbol@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
   integrity sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==
   dependencies:
     has-symbols "^1.0.1"
 
-is-typed-array@^1.1.3:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.4.tgz#1f66f34a283a3c94a4335434661ca53fff801120"
-  integrity sha512-ILaRgn4zaSrVNXNGtON6iFNotXW3hAPF3+0fB1usg2jFlWqo5fEDdmJkz0zBfoi7Dgskr8Khi2xZ8cXqZEfXNA==
-  dependencies:
-    available-typed-arrays "^1.0.2"
-    call-bind "^1.0.0"
-    es-abstract "^1.18.0-next.1"
-    foreach "^2.0.5"
-    has-symbols "^1.0.1"
-
 is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
-is-weakmap@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
-  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
-
-is-weakset@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.1.tgz#e9a0af88dbd751589f5e50d80f4c98b780884f83"
-  integrity sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==
-
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -4319,11 +4195,6 @@ isarray@1.0.0, isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 
-isarray@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
-  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
-
 isbuffer@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/isbuffer/-/isbuffer-0.0.0.tgz#38c146d9df528b8bf9b0701c3d43cf12df3fc39b"
@@ -5613,11 +5484,6 @@ object-inspect@^1.8.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
   integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
 
-object-inspect@^1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.9.0.tgz#c90521d74e1127b67266ded3394ad6116986533a"
-  integrity sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==
-
 object-is@^1.0.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.3.tgz#2e3b9e65560137455ee3bd62aec4d90a2ea1cc81"
@@ -5626,14 +5492,6 @@ object-is@^1.0.1:
     define-properties "^1.1.3"
     es-abstract "^1.18.0-next.1"
 
-object-is@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.4.tgz#63d6c83c00a43f4cbc9434eb9757c8a5b8565068"
-  integrity sha512-1ZvAZ4wlF7IyPVOcE1Omikt7UpaFlOQq0HlSti+ZvDH3UiD2brwGMwDbyV43jao2bKJ+4+WdPJHSd7kgzKYVqg==
-  dependencies:
-    call-bind "^1.0.0"
-    define-properties "^1.1.3"
-
 object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -5660,7 +5518,7 @@ object-visit@^1.0.0:
   dependencies:
     isobject "^3.0.0"
 
-object.assign@^4.1.0, object.assign@^4.1.1, object.assign@^4.1.2:
+object.assign@^4.1.0, object.assign@^4.1.1:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
   integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
@@ -6240,7 +6098,7 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.3.0:
+regexp.prototype.flags@^1.2.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
   integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
@@ -6248,11 +6106,6 @@ regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.3.0:
     define-properties "^1.1.3"
     es-abstract "^1.17.0-next.1"
 
-regexparam@1.3.0, regexparam@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexparam/-/regexparam-1.3.0.tgz#2fe42c93e32a40eff6235d635e0ffa344b92965f"
-  integrity sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==
-
 regexpu-core@^4.7.1:
   version "4.7.1"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.1.tgz#2dea5a9a07233298fbf0db91fa9abc4c6e0f8ad6"
@@ -6737,15 +6590,6 @@ shortid@^2.2.15:
   dependencies:
     nanoid "^2.1.0"
 
-side-channel@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
-  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
-  dependencies:
-    call-bind "^1.0.0"
-    get-intrinsic "^1.0.2"
-    object-inspect "^1.9.0"
-
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -7162,13 +7006,6 @@ svelte-portal@^1.0.0:
   resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-1.0.0.tgz#36a47c5578b1a4d9b4dc60fa32a904640ec4cdd3"
   integrity sha512-nHf+DS/jZ6jjnZSleBMSaZua9JlG5rZv9lOGKgJuaZStfevtjIlUJrkLc3vbV8QdBvPPVmvcjTlazAzfKu0v3Q==
 
-svelte-spa-router@^3.0.5:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/svelte-spa-router/-/svelte-spa-router-3.1.0.tgz#a929f0def7e12c41f32bc356f91685aeadcd75bf"
-  integrity sha512-jlM/xwjn57mylr+pzHYCOOy+IPQauT46gOucNGTBu6jHcFXu3F+oaojN4PXC1LYizRGxFB6QA0qnYbZnRfX7Sg==
-  dependencies:
-    regexparam "1.3.0"
-
 svelte@^3.30.0:
   version "3.30.0"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.30.0.tgz#cbde341e96bf34f4ac73c8f14f8a014e03bfb7d6"
@@ -7598,45 +7435,11 @@ whatwg-url@^8.0.0:
     tr46 "^2.0.2"
     webidl-conversions "^6.1.0"
 
-which-boxed-primitive@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
-  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
-  dependencies:
-    is-bigint "^1.0.1"
-    is-boolean-object "^1.1.0"
-    is-number-object "^1.0.4"
-    is-string "^1.0.5"
-    is-symbol "^1.0.3"
-
-which-collection@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
-  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
-  dependencies:
-    is-map "^2.0.1"
-    is-set "^2.0.1"
-    is-weakmap "^2.0.1"
-    is-weakset "^2.0.1"
-
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
-which-typed-array@^1.1.2:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.4.tgz#8fcb7d3ee5adf2d771066fba7cf37e32fe8711ff"
-  integrity sha512-49E0SpUe90cjpoc7BOJwyPHRqSAd12c10Qm2amdEZrJPCY2NDxaW01zHITrem+rnETY3dwrbH3UUrUwagfCYDA==
-  dependencies:
-    available-typed-arrays "^1.0.2"
-    call-bind "^1.0.0"
-    es-abstract "^1.18.0-next.1"
-    foreach "^2.0.5"
-    function-bind "^1.1.1"
-    has-symbols "^1.0.1"
-    is-typed-array "^1.1.3"
-
 which@^1.2.9, which@^1.3.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"

From dd76891181039766eb43b4b6e6e1c9cde914a7d3 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 19 Jan 2021 09:20:31 +0100
Subject: [PATCH 59/70] bump bbui

---
 packages/builder/package.json                 |  2 +-
 .../userInterface/BindingDropdown.svelte      | 32 ++-----------------
 .../userInterface/PropertyControl.svelte      | 29 +++++++++++++----
 3 files changed, 27 insertions(+), 36 deletions(-)

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 7d5b0ee31b..0ebc799ed5 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.53.0",
+    "@budibase/bbui": "^1.53.1",
     "@budibase/client": "^0.5.3",
     "@budibase/colorpicker": "^1.0.1",
     "@budibase/svelte-ag-grid": "^0.0.16",
diff --git a/packages/builder/src/components/userInterface/BindingDropdown.svelte b/packages/builder/src/components/userInterface/BindingDropdown.svelte
index afbad79f96..74dbc52fff 100644
--- a/packages/builder/src/components/userInterface/BindingDropdown.svelte
+++ b/packages/builder/src/components/userInterface/BindingDropdown.svelte
@@ -52,52 +52,26 @@
     {/if}
   </div>
   <div class="text">
-    <Heading extraSmall>Data binding</Heading>
-    <Spacer small />
-    <Body extraSmall lh>
-      Binding connects one piece of data to another and makes it dynamic. Click
-      the objects on the left, to add them to the textbox.
-    </Body>
-    <Spacer large />
     <TextArea
       thin
       bind:value
       placeholder="Add text, or click the objects on the left to add them to the
       textbox." />
-    <div class="controls">
-      <a href="https://docs.budibase.com/design/binding">
-        <Body small grey>Learn more about binding</Body>
-      </a>
-      <Button on:click={cancel} secondary>Cancel</Button>
-      <Button on:click={close} primary>Done</Button>
-    </div>
   </div>
 </div>
 
 <style>
   .container {
     display: grid;
-    grid-template-columns: auto auto;
-  }
-  .list,
-  .text {
-    padding: var(--spacing-m);
-  }
-  .controls {
-    margin-top: var(--spacing-m);
-    display: grid;
-    align-items: center;
-    grid-gap: var(--spacing-l);
-    grid-template-columns: 1fr auto auto;
+    grid-template-columns: auto 1fr;
   }
   .list {
     width: 150px;
     border-right: 1.5px solid var(--grey-4);
-    padding: var(--spacing-xl);
+    padding: var(--spacing-s);
   }
   .text {
-    width: 600px;
-    padding: var(--spacing-xl);
+    padding: var(--spacing-s);
     font-family: var(--font-sans);
   }
   .text :global(p) {
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 2c6538add6..0a7718e455 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Icon, Drawer } from "@budibase/bbui"
+  import { Button, Icon, Drawer } from "@budibase/bbui"
   import Input from "./PropertyPanelControls/Input.svelte"
   import { store, backendUiStore, currentAsset } from "builderStore"
   import fetchBindableProperties from "builderStore/fetchBindableProperties"
@@ -106,11 +106,24 @@
       handleClose()
       showDrawer = false
     }}>
-    <BindingDropdown
-      {...handlevalueKey(value)}
-      close={() => showDrawer = false}
-      on:update={e => (temporaryBindableValue = e.detail)}
-      {bindableProperties} />
+    <div slot="buttons">
+      <Button
+        blue
+        thin
+        on:click={() => {
+          notifier.success('Query parameters saved.')
+          handleSelected(value)
+        }}>
+        Save
+      </Button>
+    </div>
+    <div class="drawer-contents" slot="body">
+      <BindingDropdown
+        {...handlevalueKey(value)}
+        close={() => showDrawer = false}
+        on:update={e => (temporaryBindableValue = e.detail)}
+        {bindableProperties} />
+    </div>
   </Drawer>
 {/if}
 
@@ -161,4 +174,8 @@
     color: var(--ink);
     cursor: pointer;
   }
+  .drawer-contents {
+    height: 40vh;
+    overflow-y: auto;
+  }
 </style>

From 98c0e2dc42d78e93014526f0a53e9ff22c2d3783 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 19 Jan 2021 10:13:28 +0100
Subject: [PATCH 60/70] bump bbui

---
 packages/builder/package.json                 |   2 +-
 .../userInterface/BindingDropdown.svelte      | 106 ------------------
 .../userInterface/PropertyControl.svelte      |  40 ++-----
 packages/builder/yarn.lock                    |   8 +-
 4 files changed, 15 insertions(+), 141 deletions(-)
 delete mode 100644 packages/builder/src/components/userInterface/BindingDropdown.svelte

diff --git a/packages/builder/package.json b/packages/builder/package.json
index 0ebc799ed5..f1c91e9e7c 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.53.1",
+    "@budibase/bbui": "^1.54.0",
     "@budibase/client": "^0.5.3",
     "@budibase/colorpicker": "^1.0.1",
     "@budibase/svelte-ag-grid": "^0.0.16",
diff --git a/packages/builder/src/components/userInterface/BindingDropdown.svelte b/packages/builder/src/components/userInterface/BindingDropdown.svelte
deleted file mode 100644
index 74dbc52fff..0000000000
--- a/packages/builder/src/components/userInterface/BindingDropdown.svelte
+++ /dev/null
@@ -1,106 +0,0 @@
-<script>
-  import groupBy from "lodash/fp/groupBy"
-  import {
-    Button,
-    TextArea,
-    Label,
-    Body,
-    Heading,
-    Spacer,
-  } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
-
-  const dispatch = createEventDispatcher()
-  export let bindableProperties
-  export let value = ""
-  export let close
-
-  function addToText(readableBinding) {
-    value = value + `{{ ${readableBinding} }}`
-  }
-  let originalValue = value
-
-  $: dispatch("update", value)
-
-  function cancel() {
-    dispatch("update", originalValue)
-    close()
-  }
-
-  $: ({ instance, context } = groupBy("type", bindableProperties))
-</script>
-
-<div class="container" data-cy="binding-dropdown-modal">
-  <div class="list">
-    <Heading extraSmall>Objects</Heading>
-    <Spacer medium />
-    {#if context}
-      <Heading extraSmall>Tables</Heading>
-      <ul>
-        {#each context as { readableBinding }}
-          <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
-        {/each}
-      </ul>
-    {/if}
-    {#if instance}
-      <Heading extraSmall>Components</Heading>
-      <ul>
-        {#each instance as { readableBinding }}
-          <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
-        {/each}
-      </ul>
-    {/if}
-  </div>
-  <div class="text">
-    <TextArea
-      thin
-      bind:value
-      placeholder="Add text, or click the objects on the left to add them to the
-      textbox." />
-  </div>
-</div>
-
-<style>
-  .container {
-    display: grid;
-    grid-template-columns: auto 1fr;
-  }
-  .list {
-    width: 150px;
-    border-right: 1.5px solid var(--grey-4);
-    padding: var(--spacing-s);
-  }
-  .text {
-    padding: var(--spacing-s);
-    font-family: var(--font-sans);
-  }
-  .text :global(p) {
-    margin: 0;
-  }
-  ul {
-    list-style: none;
-    padding-left: 0;
-    margin: 0;
-    padding: 0;
-  }
-
-  li {
-    display: flex;
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    color: var(--grey-7);
-    padding: var(--spacing-s) 0;
-    margin: auto 0px;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  li:hover {
-    color: var(--ink);
-    font-weight: 500;
-  }
-
-  li:active {
-    color: var(--blue);
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 0a7718e455..56d82e2940 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Button, Icon, Drawer } from "@budibase/bbui"
+  import { Icon } from "@budibase/bbui"
   import Input from "./PropertyPanelControls/Input.svelte"
   import { store, backendUiStore, currentAsset } from "builderStore"
   import fetchBindableProperties from "builderStore/fetchBindableProperties"
@@ -7,7 +7,7 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/replaceBindings"
-  import BindingDropdown from "components/userInterface/BindingDropdown.svelte"
+  import BindingDrawer from "components/userInterface/BindingDrawer.svelte"
 
   export let label = ""
   export let bindable = true
@@ -17,7 +17,7 @@
   export let value
   export let props = {}
   export let onChange = () => {}
-
+  
   let temporaryBindableValue = value
   let bindableProperties = []
   let anchor
@@ -25,6 +25,7 @@
 
   function handleClose() {
     handleChange(key, temporaryBindableValue)
+    showDrawer = false
   }
 
   function getBindableProperties() {
@@ -99,33 +100,12 @@
     </div>
   {/if}
 </div>
-{#if showDrawer}
-  <Drawer
-    title="Binding"
-    onClose={() => {
-      handleClose()
-      showDrawer = false
-    }}>
-    <div slot="buttons">
-      <Button
-        blue
-        thin
-        on:click={() => {
-          notifier.success('Query parameters saved.')
-          handleSelected(value)
-        }}>
-        Save
-      </Button>
-    </div>
-    <div class="drawer-contents" slot="body">
-      <BindingDropdown
-        {...handlevalueKey(value)}
-        close={() => showDrawer = false}
-        on:update={e => (temporaryBindableValue = e.detail)}
-        {bindableProperties} />
-    </div>
-  </Drawer>
-{/if}
+<BindingDrawer
+  {...handlevalueKey(value)}
+  close={handleClose}
+  show={showDrawer}
+  on:update={e => (temporaryBindableValue = e.detail)}
+  {bindableProperties} />
 
 <style>
   .property-control {
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index 0a851e8179..e7f46418b1 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -842,10 +842,10 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.53.0":
-  version "1.53.0"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.53.0.tgz#36b57e6803fb7622111dce3e9766f6c63e34dbb2"
-  integrity sha512-v+L2HCaZ9MD2uyzpAvWQ5vWF+rf3WOkZLMMFpil2GHJ+DHwgm3/9eC4BhHoNjCntF5zxbfpO+Y2DG7AF4UhNgw==
+"@budibase/bbui@^1.54.0":
+  version "1.54.0"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.54.0.tgz#60e6c0faa3d8f1781c503e74f8b8990f75ba2c40"
+  integrity sha512-98koXkueqda6oQT6q0NPNvdL878ETRevtmmm34aSz9C6B4Oz68VVCsiFzRWuHvP/7wiNaAxMgY1nsEsCwP3LpQ==
   dependencies:
     markdown-it "^12.0.2"
     quill "^1.3.7"

From 7b474fef1ea451cb9e337ae17989696a27c37c15 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 19 Jan 2021 10:39:39 +0100
Subject: [PATCH 61/70] wire BindingPanel correctly to PropertyControl

---
 .../userInterface/BindingPanel.svelte         | 113 ++++++++++++++++++
 .../userInterface/PropertyControl.svelte      |  34 +++---
 2 files changed, 132 insertions(+), 15 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/BindingPanel.svelte

diff --git a/packages/builder/src/components/userInterface/BindingPanel.svelte b/packages/builder/src/components/userInterface/BindingPanel.svelte
new file mode 100644
index 0000000000..1e40e8e001
--- /dev/null
+++ b/packages/builder/src/components/userInterface/BindingPanel.svelte
@@ -0,0 +1,113 @@
+<script>
+  import groupBy from "lodash/fp/groupBy"
+  import {
+    Button,
+    TextArea,
+    Drawer,
+    Heading,
+    Spacer,
+  } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+
+  const dispatch = createEventDispatcher()
+  export let bindableProperties
+  export let value = ""
+  export let bindingDrawer
+
+  function addToText(readableBinding) {
+    value = value + `{{ ${readableBinding} }}`
+  }
+  let originalValue = value
+
+  $: dispatch("update", value)
+
+  export function cancel() {
+    dispatch("update", originalValue)
+    bindingDrawer.close()
+  }
+
+  $: ({ instance, context } = groupBy("type", bindableProperties))
+</script>
+
+<div class="drawer-contents">
+  <div class="container" data-cy="binding-dropdown-modal">
+    <div class="list">
+      <Heading extraSmall>Objects</Heading>
+      <Spacer medium />
+      {#if context}
+        <Heading extraSmall>Tables</Heading>
+        <ul>
+          {#each context as { readableBinding }}
+            <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
+          {/each}
+        </ul>
+      {/if}
+      {#if instance}
+        <Heading extraSmall>Components</Heading>
+        <ul>
+          {#each instance as { readableBinding }}
+            <li on:click={() => addToText(readableBinding)}>{readableBinding}</li>
+          {/each}
+        </ul>
+      {/if}
+    </div>
+    <div class="text">
+      <TextArea
+        thin
+        bind:value
+        placeholder="Add text, or click the objects on the left to add them to the
+        textbox." />
+    </div>
+  </div>
+</div>
+
+<style>
+  .container {
+    height: 100%;
+    display: grid;
+    grid-template-columns: auto 1fr;
+  }
+  .list {
+    width: 150px;
+    border-right: 1.5px solid var(--grey-4);
+    padding: var(--spacing-s);
+  }
+  .text {
+    padding: var(--spacing-s);
+    font-family: var(--font-sans);
+  }
+  .text :global(p) {
+    margin: 0;
+  }
+  ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    display: flex;
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xs);
+    color: var(--grey-7);
+    padding: var(--spacing-s) 0;
+    margin: auto 0px;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  li:hover {
+    color: var(--ink);
+    font-weight: 500;
+  }
+
+  li:active {
+    color: var(--blue);
+  }
+
+  .drawer-contents {
+    height: 40vh;
+    overflow-y: auto;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 56d82e2940..1fe0f542aa 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Icon } from "@budibase/bbui"
+  import { Button, Icon, Drawer } from "@budibase/bbui"
   import Input from "./PropertyPanelControls/Input.svelte"
   import { store, backendUiStore, currentAsset } from "builderStore"
   import fetchBindableProperties from "builderStore/fetchBindableProperties"
@@ -7,7 +7,7 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/replaceBindings"
-  import BindingDrawer from "components/userInterface/BindingDrawer.svelte"
+  import BindingPanel from "components/userInterface/BindingPanel.svelte"
 
   export let label = ""
   export let bindable = true
@@ -17,15 +17,16 @@
   export let value
   export let props = {}
   export let onChange = () => {}
+
+  let bindingDrawer
   
   let temporaryBindableValue = value
   let bindableProperties = []
   let anchor
-  let showDrawer = false
 
   function handleClose() {
     handleChange(key, temporaryBindableValue)
-    showDrawer = false
+    bindingDrawer.hide()
   }
 
   function getBindableProperties() {
@@ -95,17 +96,24 @@
     <div
       class="icon"
       data-cy={`${key}-binding-button`}
-      on:click={() => showDrawer = true}>
+      on:click={bindingDrawer.show}>
       <Icon name="edit" />
     </div>
   {/if}
 </div>
-<BindingDrawer
-  {...handlevalueKey(value)}
-  close={handleClose}
-  show={showDrawer}
-  on:update={e => (temporaryBindableValue = e.detail)}
-  {bindableProperties} />
+
+<Drawer bind:this={bindingDrawer} title="Bindings">
+  <div slot="description">This describes the drawer!</div>
+  <heading slot="buttons">
+    <Button thin blue on:click={handleClose}>Save</Button>
+  </heading>
+  <div slot="body">
+    <BindingPanel {...handlevalueKey(value)}
+    close={handleClose}
+    on:update={e => (temporaryBindableValue = e.detail)}
+    {bindableProperties} />
+  </div>
+</Drawer>
 
 <style>
   .property-control {
@@ -154,8 +162,4 @@
     color: var(--ink);
     cursor: pointer;
   }
-  .drawer-contents {
-    height: 40vh;
-    overflow-y: auto;
-  }
 </style>

From bf5a33b20505eac2ec9168e9501fa7205a5baab4 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 19 Jan 2021 10:47:02 +0100
Subject: [PATCH 62/70] adds missing description

---
 .../src/components/userInterface/PropertyControl.svelte      | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 1fe0f542aa..e118301862 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Button, Icon, Drawer } from "@budibase/bbui"
+  import { Button, Icon, Drawer, Body } from "@budibase/bbui"
   import Input from "./PropertyPanelControls/Input.svelte"
   import { store, backendUiStore, currentAsset } from "builderStore"
   import fetchBindableProperties from "builderStore/fetchBindableProperties"
@@ -103,7 +103,7 @@
 </div>
 
 <Drawer bind:this={bindingDrawer} title="Bindings">
-  <div slot="description">This describes the drawer!</div>
+  <div slot="description"><Body extraSmall grey>Add the objects on thel eft to enrich your text.</Body></div>
   <heading slot="buttons">
     <Button thin blue on:click={handleClose}>Save</Button>
   </heading>
@@ -116,6 +116,7 @@
 </Drawer>
 
 <style>
+
   .property-control {
     position: relative;
     display: flex;

From 7fc05daaf701ae5254f1ba90ab4b004fed59e84f Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 19 Jan 2021 10:56:02 +0100
Subject: [PATCH 63/70] fix typo

---
 .../builder/src/components/userInterface/PropertyControl.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index e118301862..0dda08f569 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -103,7 +103,7 @@
 </div>
 
 <Drawer bind:this={bindingDrawer} title="Bindings">
-  <div slot="description"><Body extraSmall grey>Add the objects on thel eft to enrich your text.</Body></div>
+  <div slot="description"><Body extraSmall grey>Add the objects on the left to enrich your text.</Body></div>
   <heading slot="buttons">
     <Button thin blue on:click={handleClose}>Save</Button>
   </heading>

From 74557a09ce6926dd53d76028ef892de4b63565ea Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 19 Jan 2021 14:16:55 +0100
Subject: [PATCH 64/70] changes earlier BottomDrawer to use the bbui component
 instead

---
 .../src/builderStore/store/frontend.js        |  3 +-
 .../src/components/common/BottomDrawer.svelte | 52 -------------------
 .../EventsEditor/EventPropertyControl.svelte  | 32 +++++-------
 .../userInterface/TableViewSelect.svelte      | 22 +++-----
 4 files changed, 19 insertions(+), 90 deletions(-)
 delete mode 100644 packages/builder/src/components/common/BottomDrawer.svelte

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 13a5cbc824..ad00d2bd55 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -41,8 +41,7 @@ const INITIAL_FRONTEND_STATE = {
   hasAppPackage: false,
   libraries: null,
   appId: "",
-  routes: {},
-  bottomDrawerVisible: false,
+  routes: {}
 }
 
 export const getFrontendStore = () => {
diff --git a/packages/builder/src/components/common/BottomDrawer.svelte b/packages/builder/src/components/common/BottomDrawer.svelte
deleted file mode 100644
index dc442bc2c3..0000000000
--- a/packages/builder/src/components/common/BottomDrawer.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script>
-  import { slide } from "svelte/transition"
-  import Portal from "svelte-portal"
-
-  export let title
-  export let onClose = () => {}
-</script>
-
-<Portal>
-  <section class="drawer" transition:slide>
-    <header>
-      {title}
-      <div class="controls">
-        <slot name="buttons" />
-        <i class="ri-close-fill close" on:click={onClose} />
-      </div>
-    </header>
-    <slot name="body" />
-  </section>
-</Portal>
-
-<style>
-  .drawer {
-    height: 50vh;
-    position: absolute;
-    bottom: 0;
-    width: 100vw;
-    background: var(--background);
-    border-top: var(--border-light);
-    z-index: 2;
-  }
-
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border: var(--border-light);
-    padding: var(--spacing-m);
-  }
-
-  .controls {
-    display: grid;
-    grid-auto-flow: column;
-    grid-gap: var(--spacing-m);
-    align-items: center;
-  }
-
-  .close {
-    font-size: var(--font-size-xl);
-    cursor: pointer;
-  }
-</style>
diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
index e171f31d65..9340ec4c28 100644
--- a/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte
@@ -1,10 +1,8 @@
 <script>
-  import { Button, Modal } from "@budibase/bbui"
+  import { Button, Drawer } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
-  import { store } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import EventEditor from "./EventEditor.svelte"
-  import BottomDrawer from "components/common/BottomDrawer.svelte"
   import { automationStore } from "builderStore"
 
   const dispatch = createEventDispatcher()
@@ -12,11 +10,7 @@
   export let value
   export let name
 
-  let drawerVisible
-
-  function showDrawer() {
-    drawerVisible = true
-  }
+  let drawer
 
   const saveEventData = async () => {
     // any automations that need created from event triggers
@@ -27,6 +21,7 @@
 
     dispatch("change", value)
     notifier.success("Component actions saved.")
+    drawer.hide()
   }
 
   // called by the parent modal when actions are saved
@@ -62,15 +57,12 @@
   }
 </script>
 
-<Button secondary small on:click={showDrawer}>Define Actions</Button>
-
-{#if drawerVisible}
-  <BottomDrawer title={'Actions'} onClose={() => (drawerVisible = false)}>
-    <heading slot="buttons">
-      <Button thin blue on:click={saveEventData}>Save</Button>
-    </heading>
-    <div slot="body">
-      <EventEditor event={value} eventType={name} />
-    </div>
-  </BottomDrawer>
-{/if}
+<Button secondary small on:click={drawer.show}>Define Actions</Button>
+<Drawer bind:this={drawer} title={'Actions'}>
+  <heading slot="buttons">
+    <Button thin blue on:click={saveEventData}>Save</Button>
+  </heading>
+  <div slot="body">
+    <EventEditor event={value} eventType={name} />
+  </div>
+</Drawer>
diff --git a/packages/builder/src/components/userInterface/TableViewSelect.svelte b/packages/builder/src/components/userInterface/TableViewSelect.svelte
index dc34923deb..c0ad36a79f 100644
--- a/packages/builder/src/components/userInterface/TableViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/TableViewSelect.svelte
@@ -1,16 +1,15 @@
 <script>
-  import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui"
+  import { Button, Icon, DropdownMenu, Spacer, Heading, Drawer } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { store, backendUiStore, currentAsset } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
-  import BottomDrawer from "components/common/BottomDrawer.svelte"
   import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
   import IntegrationQueryEditor from "components/integration/index.svelte"
   import fetchBindableProperties from "../../builderStore/fetchBindableProperties"
 
   const dispatch = createEventDispatcher()
   let anchorRight, dropdownRight
-  let bindingDrawerOpen
+  let drawer
 
   export let value = {}
 
@@ -73,14 +72,6 @@
     dropdownRight.hide()
   }
 
-  function openBindingDrawer() {
-    bindingDrawerOpen = true
-  }
-
-  function closeDatabindingDrawer() {
-    bindingDrawerOpen = false
-  }
-
   function fetchDatasourceSchema(query) {
     const source = $backendUiStore.datasources.find(
       ds => ds._id === query.datasourceId
@@ -99,9 +90,8 @@
   <Icon name="arrowdown" />
 </div>
 {#if value.type === 'query'}
-  <i class="ri-settings-5-line" on:click={openBindingDrawer} />
-  {#if bindingDrawerOpen}
-    <BottomDrawer title={'Query'} onClose={closeDatabindingDrawer}>
+  <i class="ri-settings-5-line" on:click={drawer.show} />
+    <Drawer title={'Query'}>
       <div slot="buttons">
         <Button
           blue
@@ -109,6 +99,7 @@
           on:click={() => {
             notifier.success('Query parameters saved.')
             handleSelected(value)
+            drawer.hide()
           }}>
           Save
         </Button>
@@ -126,9 +117,8 @@
             bindings={queryBindableProperties} />
         {/if}
       </div>
-    </BottomDrawer>
+    </Drawer>
   {/if}
-{/if}
 <DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
   <div class="dropdown">
     <div class="title">

From 76235348428d82f1a2e86c4b830553687865dd57 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Tue, 19 Jan 2021 14:31:37 +0100
Subject: [PATCH 65/70] lint fix

---
 packages/builder/src/builderStore/store/frontend.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index ad00d2bd55..2082a3e49b 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -41,7 +41,7 @@ const INITIAL_FRONTEND_STATE = {
   hasAppPackage: false,
   libraries: null,
   appId: "",
-  routes: {}
+  routes: {},
 }
 
 export const getFrontendStore = () => {

From 01aefbea7859c1d8a4aff0ff9746e6d9124d8cca Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Tue, 19 Jan 2021 14:16:54 +0000
Subject: [PATCH 66/70] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 22643c93a6..28e3c716c2 100644
--- a/README.md
+++ b/README.md
@@ -73,7 +73,7 @@ When other platforms chose the closed source route, we decided to go open source
 ## 🤖 Self-hosting
 
 <p align="center">
-  <img src="https://i.imgur.com/jaCPmTT.png" />
+  <img src="https://i.imgur.com/Z52cEvT.png?1" />
 </p>
 
 Budibase wants to make sure anyone can use the tools we develop and we know a lot of people need to be able to host the apps they make on their own systems - that is why we've decided to try and make self hosting as easy as possible!

From 3416beb83d5e561371af388b6a529b4825eba93f Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 20 Jan 2021 09:10:10 +0000
Subject: [PATCH 67/70] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 28e3c716c2..f1eeda2588 100644
--- a/README.md
+++ b/README.md
@@ -67,7 +67,7 @@ When other platforms chose the closed source route, we decided to go open source
 
 - **Automate processes, integrate with other tools, and connect to webhooks.** Save time by automating manual processes and workflows. From connecting to webhooks, to automating emails, simply tell Budibase what to do and let it work for you. You can easily [create new automations for Budibase here](https://github.com/Budibase/automations) or [request new integrations here](https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas).
 
-- **Cloud hosting and self-hosting.** Users will soon have the option to host with Budibase in AWS (available now) or self-host (coming very soon). From the very beginning, we wanted our users to have the option to self-host. We understand the importance of having full control over data. This is why we are working incredibly hard to offer an easy path to self-hosting. If you are interested in self-hosting, please [join the conversation and add your thoughts](https://github.com/Budibase/budibase/discussions/648).
+- **Cloud hosting and self-hosting.** Users can self-host (see below), or host their apps with Budibase. Currently, our cloud hosting offering is limited to the free tier but we aim to change this in the future. For heavy usage, we advise users to self-host.
 
 
 ## 🤖 Self-hosting

From 4b2586fc10a409cff566349a4aba5475afe6271f Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 20 Jan 2021 11:39:11 +0000
Subject: [PATCH 68/70] Update README.md

---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index f1eeda2588..95e012f3dd 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@
   Build internal tools 50x faster
 </h3>
 <p align="center">
-  Budibase is an open-source low-code platform that helps developers and IT professionals build, automate and ship internal tools 50x faster.
+  Budibase is an open-source low-code platform, helping developers and IT professionals build, automate, and ship internal tools 50x faster on their own infrastructure.
 </p>
 
 <h3 align="center">
@@ -61,7 +61,7 @@ When other platforms chose the closed source route, we decided to go open source
 
 - **Open source and extensable.** Budibase is open-source. The builder is licensed AGPL v3, the server is GPL v3, and the client is MPL. This should fill you with confidence that Budibase will always be around. You can also code against Budibase or fork it and make changes as you please, providing a developer-friendly experience.
 
-- **Load data or start from scratch.** Budibase pulls in data from multiple sources, whether it’s a CSV, an external database (coming very soon), or a REST API. And unlike other platforms, with Budibase you can start from scratch and create business apps with no data sources. [Request new data sources](https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas).
+- **Load data or start from scratch.** Budibase pulls in data from multiple sources, including MongoDB, CouchDB, PostgreSQL, mySQL, Airtable, Google Sheets, S3, DyanmoDB, or a REST API. And unlike other platforms, with Budibase you can start from scratch and create business apps with no data sources. [Request new data sources](https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas).
 
 - **Design and build apps with powerful pre-made components.** Budibase comes out of the box with beautifully designed, powerful components which you can use like building blocks to build your UI. We also expose a lot of your favourite CSS styling options so you can go that extra creative mile. [Request new components](https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas).
 
@@ -85,7 +85,7 @@ Currently, you can host your apps using Docker. The documentation for self-hosti
 - [x] Alpha: We are demoing Budibase to users and receiving feedback
 - [x] Private Beta: We are testing Budibase with a closed set of customers
 - [x] Public Beta: Anyone can [sign-up and use Budibase](https://portal.budi.live/signup).
-- [ ] Official Launch: Production-ready
+- [ ] Official Launch
 
 Watch "releases" of this repo to get notified of major updates, and give the star button a click whilst you're there. 
 

From be192704aea3e8acf1dac1408cf9a90089ab246c Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Wed, 20 Jan 2021 11:39:30 +0000
Subject: [PATCH 69/70] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 95e012f3dd..bc2e10e69e 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@
 </h1>
 
 <h3 align="center">
-  Build internal tools 50x faster
+  Build internal tools 50x faster on your own infrastructure
 </h3>
 <p align="center">
   Budibase is an open-source low-code platform, helping developers and IT professionals build, automate, and ship internal tools 50x faster on their own infrastructure.

From 4381fb2748fe596691bbbf17f76ec61f79e66e72 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 20 Jan 2021 13:23:06 +0000
Subject: [PATCH 70/70] Fix postgres integration schema credentials

---
 packages/server/src/integrations/postgres.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/server/src/integrations/postgres.js b/packages/server/src/integrations/postgres.js
index cd87e20a64..f295066a78 100644
--- a/packages/server/src/integrations/postgres.js
+++ b/packages/server/src/integrations/postgres.js
@@ -18,7 +18,7 @@ const SCHEMA = {
       default: "postgres",
       required: true,
     },
-    username: {
+    user: {
       type: "string",
       default: "root",
       required: true,