Merge branch 'qa/qa-core-jest' of github.com:Budibase/budibase into qa/qa-core-jest

2024-05-19 03:43:08 +12:00 · 2022-09-15 10:26:13 +01:00 · 2022-09-15 10:26:13 +01:00 · ef1c869b69
parent f4760d703b c1dc1aa488
commit ef1c869b69
234 changed files with 8680 additions and 5029 deletions
--- a/.gitignore
+++ b/.gitignore
@ -102,4 +102,6 @@ packages/builder/cypress/reports
 stats.html

 # TypeScript cache
-*.tsbuildinfo
+*.tsbuildinfo
+budibase-component
+budibase-datasource
--- a/README.md
+++ b/README.md
@ -65,7 +65,7 @@ Budibase is open-source - licensed as GPL v3. This should fill you with confiden
 <br /><br />

 ### Load data or start from scratch
-Budibase pulls in data from multiple sources, including MongoDB, CouchDB, PostgreSQL, MySQL, Airtable, S3, DynamoDB, 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).
+Budibase pulls in data from multiple sources, including MongoDB, CouchDB, PostgreSQL, MySQL, Airtable, S3, DynamoDB, or a REST API. And unlike other platforms, with Budibase you can start from scratch and create business apps with no datasources. [Request new datasources](https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas).

 <p align="center">
  <img alt="Budibase data" src="https://res.cloudinary.com/daog6scxm/image/upload/v1636970242/Out%20of%20beta%20launch/data_n1tlhf.png">
--- a/charts/budibase/templates/app-service-deployment.yaml
+++ b/charts/budibase/templates/app-service-deployment.yaml
@ -124,11 +124,15 @@ spec:
          value: {{ .Values.globals.tenantFeatureFlags | quote }}
        {{ if .Values.globals.bbAdminUserEmail }}
        - name: BB_ADMIN_USER_EMAIL
-          value: { { .Values.globals.bbAdminUserEmail | quote } }
+          value: {{ .Values.globals.bbAdminUserEmail | quote }}
        {{ end }}
        {{ if .Values.globals.bbAdminUserPassword }}
        - name: BB_ADMIN_USER_PASSWORD
-          value: { { .Values.globals.bbAdminUserPassword | quote } }
+          value: {{ .Values.globals.bbAdminUserPassword | quote }}
+        {{ end }}
+        {{ if .Values.globals.pluginsDir }}
+        - name: PLUGINS_DIR
+          value: {{ .Values.globals.pluginsDir | quote }}
        {{ end }}
        {{ if .Values.services.apps.nodeDebug }}
        - name: NODE_DEBUG
@ -158,7 +162,10 @@ spec:
        name: bbapps
        ports:
        - containerPort: {{ .Values.services.apps.port }}
-        resources: {}
+        {{ with .Values.services.apps.resources }}
+        resources:
+        {{- toYaml . | nindent 10 }}
+        {{ end }}
    {{- with .Values.affinity }}
      affinity:
        {{- toYaml . | nindent 8 }}
--- a/charts/budibase/templates/couchdb-backup.yaml
+++ b/charts/budibase/templates/couchdb-backup.yaml
@ -38,7 +38,10 @@ spec:
        image: redgeoff/replicate-couchdb-cluster
        imagePullPolicy: Always
        name: couchdb-backup
-        resources: {}
+        {{ with .Values.services.couchdb.backup.resources }}
+        resources:
+        {{- toYaml . | nindent 10 }}
+        {{ end }}
    {{- with .Values.affinity }}
      affinity:
        {{- toYaml . | nindent 8 }}
--- a/charts/budibase/templates/minio-service-deployment.yaml
+++ b/charts/budibase/templates/minio-service-deployment.yaml
@ -56,7 +56,10 @@ spec:
        name: minio-service
        ports:
        - containerPort: {{ .Values.services.objectStore.port }}
-        resources: {}
+        {{ with .Values.services.objectStore.resources }}
+        resources:
+        {{- toYaml . | nindent 10 }}
+        {{ end }}
        volumeMounts:
        - mountPath: /data
          name: minio-data
--- a/charts/budibase/templates/proxy-service-deployment.yaml
+++ b/charts/budibase/templates/proxy-service-deployment.yaml
@ -30,7 +30,10 @@ spec:
        name: proxy-service
        ports:
        - containerPort: {{ .Values.services.proxy.port }}
-        resources: {}
+        {{ with .Values.services.proxy.resources }}
+        resources:
+        {{- toYaml . | nindent 10 }}
+        {{ end }}
        volumeMounts:
    {{- with .Values.affinity }}
      affinity:
--- a/charts/budibase/templates/redis-service-deployment.yaml
+++ b/charts/budibase/templates/redis-service-deployment.yaml
@ -35,7 +35,10 @@ spec:
        name: redis-service
        ports:
        - containerPort: {{ .Values.services.redis.port }}
-        resources: {}
+        {{ with .Values.services.redis.resources }}
+        resources:
+        {{- toYaml . | nindent 10 }}
+        {{ end }}
        volumeMounts:
        - mountPath: /data
          name: redis-data
--- a/charts/budibase/templates/worker-service-deployment.yaml
+++ b/charts/budibase/templates/worker-service-deployment.yaml
@ -151,7 +151,10 @@ spec:
        name: bbworker
        ports:
        - containerPort: {{ .Values.services.worker.port }}
-        resources: {}
+        {{ with .Values.services.worker.resources }}
+        resources:
+        {{- toYaml . | nindent 10 }}
+        {{ end }}
    {{- with .Values.affinity }}
      affinity:
        {{- toYaml . | nindent 8 }}
--- a/charts/budibase/values.yaml
+++ b/charts/budibase/values.yaml
@ -60,19 +60,6 @@ ingress:
              port:
                number: 10000

-resources:
-  {}
-  # We usually recommend not to specify default resources and to leave this as a conscious
-  # choice for the user. This also increases chances charts run on environments with little
-  # resources, such as Minikube. If you do want to specify resources, uncomment the following
-  # lines, adjust them as necessary, and remove the curly braces after 'resources:'.
-  # limits:
-  #   cpu: 100m
-  #   memory: 128Mi
-  # requests:
-  #   cpu: 100m
-  #   memory: 128Mi
-
 autoscaling:
  enabled: false
  minReplicas: 1
@ -125,16 +112,19 @@ services:
  proxy:
    port: 10000
    replicaCount: 1
+    resources: {}

  apps:
    port: 4002
    replicaCount: 1
    logLevel: info
+    resources: {}
 #    nodeDebug: "" # set the value of NODE_DEBUG

  worker:
    port: 4003
    replicaCount: 1
+    resources: {}

  couchdb:
    enabled: true
@ -148,6 +138,7 @@ services:
      target: ""
      # backup interval in seconds
      interval: ""
+      resources: {}

  redis:
    enabled: true # disable if using external redis
@ -161,6 +152,7 @@ services:
    ## If undefined (the default) or set to null, no storageClassName spec is
    ##   set, choosing the default provisioner.
    storageClass: ""
+    resources: {}

  objectStore:
    minio: true
@ -177,6 +169,7 @@ services:
    ## If undefined (the default) or set to null, no storageClassName spec is
    ##   set, choosing the default provisioner.
    storageClass: ""
+    resources: {}

 # Override values in couchDB subchart
 couchdb:
--- a/examples/nextjs-api-sales/definitions/openapi.ts
+++ b/examples/nextjs-api-sales/definitions/openapi.ts
@ -348,7 +348,7 @@ export interface paths {
        }
      }
      responses: {
-        /** Returns the created table, including the ID which has been generated for it. This can be internal or external data sources. */
+        /** Returns the created table, including the ID which has been generated for it. This can be internal or external datasources. */
        200: {
          content: {
            "application/json": components["schemas"]["tableOutput"]
@ -959,7 +959,7 @@ export interface components {
    query: {
      /** @description The ID of the query. */
      _id: string
-      /** @description The ID of the data source the query belongs to. */
+      /** @description The ID of the datasource the query belongs to. */
      datasourceId?: string
      /** @description The bindings which are required to perform this query. */
      parameters?: string[]
@ -983,7 +983,7 @@ export interface components {
      data: {
        /** @description The ID of the query. */
        _id: string
-        /** @description The ID of the data source the query belongs to. */
+        /** @description The ID of the datasource the query belongs to. */
        datasourceId?: string
        /** @description The bindings which are required to perform this query. */
        parameters?: string[]
--- a/examples/nextjs-api-sales/package.json
+++ b/examples/nextjs-api-sales/package.json
@ -11,8 +11,8 @@
  "dependencies": {
    "bulma": "^0.9.3",
    "next": "12.1.0",
-    "node-fetch": "^3.2.2",
-    "node-sass": "^7.0.1",
+    "node-fetch": "^3.2.10",
+    "sass": "^1.52.3",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-notifications-component": "^3.4.1"
@ -24,4 +24,4 @@
    "eslint-config-next": "12.1.0",
    "typescript": "4.6.2"
  }
-}
+}
--- a/examples/nextjs-api-sales/yarn.lock
+++ b/examples/nextjs-api-sales/yarn.lock
@ -2020,10 +2020,10 @@ node-domexception@^1.0.0:
  resolved "https://registry.yarnpkg.com/node-domexception/-/node-domexception-1.0.0.tgz#6888db46a1f71c0b76b3f7555016b63fe64766e5"
  integrity sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==

-node-fetch@^3.2.2:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-3.2.2.tgz#16d33fbe32ca7c6ca1ca8ba5dfea1dd885c59f04"
-  integrity sha512-Cwhq1JFIoon15wcIkFzubVNFE5GvXGV82pKf4knXXjvGmn7RJKcypeuqcVNZMGDZsAFWyIRya/anwAJr7TWJ7w==
+node-fetch@^3.2.10:
+  version "3.2.10"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-3.2.10.tgz#e8347f94b54ae18b57c9c049ef641cef398a85c8"
+  integrity sha512-MhuzNwdURnZ1Cp4XTazr69K0BTizsBroX7Zx3UgDSVcZYKF/6p0CBe4EUb/hLqmzVhl0UpYfgRljQ4yxE+iCxA==
  dependencies:
    data-uri-to-buffer "^4.0.0"
    fetch-blob "^3.1.4"
--- a/hosting/.env
+++ b/hosting/.env
@ -22,4 +22,7 @@ BUDIBASE_ENVIRONMENT=PRODUCTION

 # An admin user can be automatically created initially if these are set
 BB_ADMIN_USER_EMAIL=
-BB_ADMIN_USER_PASSWORD=
+BB_ADMIN_USER_PASSWORD=
+
+# A path that is watched for plugin bundles. Any bundles found are imported automatically/
+PLUGINS_DIR=
--- a/hosting/docker-compose.yaml
+++ b/hosting/docker-compose.yaml
@ -25,9 +25,12 @@ services:
      REDIS_PASSWORD: ${REDIS_PASSWORD}
      BB_ADMIN_USER_EMAIL: ${BB_ADMIN_USER_EMAIL}
      BB_ADMIN_USER_PASSWORD: ${BB_ADMIN_USER_PASSWORD}
+      PLUGINS_DIR: ${PLUGINS_DIR}
    depends_on:
      - worker-service
      - redis-service
+#    volumes:
+#      - /some/path/to/plugins:/plugins

  worker-service:
    restart: unless-stopped
@ -78,6 +81,7 @@ services:
    image: budibase/proxy
    environment:
      - PROXY_RATE_LIMIT_WEBHOOKS_PER_SECOND=10
+      - PROXY_RATE_LIMIT_API_PER_SECOND=20
    depends_on:
      - minio-service
      - worker-service
--- a/hosting/hosting.properties
+++ b/hosting/hosting.properties
@ -22,4 +22,7 @@ BUDIBASE_ENVIRONMENT=PRODUCTION

 # An admin user can be automatically created initially if these are set
 BB_ADMIN_USER_EMAIL=
-BB_ADMIN_USER_PASSWORD=
+BB_ADMIN_USER_PASSWORD=
+
+# A path that is watched for plugin bundles. Any bundles found are imported automatically/
+PLUGINS_DIR=
--- a/hosting/nginx.dev.conf.hbs
+++ b/hosting/nginx.dev.conf.hbs
@ -65,10 +65,6 @@ http {
      proxy_pass      http://{{ address }}:4001;
    }

-    location /preview {
-      proxy_pass      http://{{ address }}:4001;
-    }
-
    location /builder {
      proxy_pass      http://{{ address }}:3000;
      rewrite ^/builder(.*)$ /builder/$1 break;
@ -84,6 +80,20 @@ http {
      proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
    }

+    location /vite/ {
+      proxy_pass  http://{{ address }}:3000;
+      rewrite     ^/vite(.*)$ /$1 break;
+    }
+
+    location /socket/ {
+      proxy_http_version  1.1;
+      proxy_set_header    Upgrade     $http_upgrade;
+      proxy_set_header    Connection  'upgrade';
+      proxy_set_header    Host        $host;
+      proxy_cache_bypass  $http_upgrade;
+      proxy_pass          http://{{ address }}:4001;
+    }
+
    location / {
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
--- a/hosting/nginx.prod.conf.hbs
+++ b/hosting/nginx.prod.conf.hbs
@ -11,7 +11,7 @@ events {
 http {
  # rate limiting
  limit_req_status 429;
-  limit_req_zone $binary_remote_addr zone=ratelimit:10m rate=20r/s;
+  limit_req_zone $binary_remote_addr zone=ratelimit:10m rate=${PROXY_RATE_LIMIT_API_PER_SECOND}r/s;
  limit_req_zone $binary_remote_addr zone=webhooks:10m rate=${PROXY_RATE_LIMIT_WEBHOOKS_PER_SECOND}r/s;

  include       /etc/nginx/mime.types;
@ -88,10 +88,6 @@ http {
      proxy_pass      http://$apps:4002;
    }

-    location /preview {
-      proxy_pass      http://$apps:4002;
-    }
-
    location = / {
      proxy_pass      http://$apps:4002;
    }
@ -162,6 +158,15 @@ http {
      rewrite ^/db/(.*)$ /$1 break;
    }

+    location /socket/ {
+      proxy_http_version  1.1;
+      proxy_set_header    Upgrade     $http_upgrade;
+      proxy_set_header    Connection  'upgrade';
+      proxy_set_header    Host        $host;
+      proxy_cache_bypass  $http_upgrade;
+      proxy_pass          http://$apps:4002;
+    }
+
    location / {
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
--- a/hosting/proxy/Dockerfile
+++ b/hosting/proxy/Dockerfile
@ -10,4 +10,5 @@ COPY .generated-nginx.prod.conf /etc/nginx/templates/nginx.conf.template
 COPY error.html /usr/share/nginx/html/error.html

 # Default environment
-ENV PROXY_RATE_LIMIT_WEBHOOKS_PER_SECOND=10
+ENV PROXY_RATE_LIMIT_WEBHOOKS_PER_SECOND=10
+ENV PROXY_RATE_LIMIT_API_PER_SECOND=20
--- a/hosting/scripts/build-target-paths.sh
+++ b/hosting/scripts/build-target-paths.sh
@ -4,9 +4,9 @@ echo ${TARGETBUILD} > /buildtarget.txt
 if [[ "${TARGETBUILD}" = "aas" ]]; then
    # Azure AppService uses /home for persisent data & SSH on port 2222
    DATA_DIR=/home
-    mkdir -p $DATA_DIR/{search,minio,couchdb}
-    mkdir -p $DATA_DIR/couchdb/{dbs,views}
-    chown -R couchdb:couchdb $DATA_DIR/couchdb/
+    mkdir -p $DATA_DIR/{search,minio,couch}
+    mkdir -p $DATA_DIR/couch/{dbs,views}
+    chown -R couchdb:couchdb $DATA_DIR/couch/
    apt update
    apt-get install -y openssh-server
    sed -i "s/#Port 22/Port 2222/" /etc/ssh/sshd_config
@ -16,5 +16,4 @@ if [[ "${TARGETBUILD}" = "aas" ]]; then
 else
    sed -i "s#DATA_DIR#/data#g" /opt/clouseau/clouseau.ini
    sed -i "s#DATA_DIR#/data#g" /opt/couchdb/etc/local.ini
-
 fi
--- a/hosting/single/couch/local.ini
+++ b/hosting/single/couch/local.ini
@ -1,5 +1,5 @@
 ; CouchDB Configuration Settings

 [couchdb]
-database_dir = DATA_DIR/couchdb/dbs
-view_index_dir = DATA_DIR/couchdb/views
+database_dir = DATA_DIR/couch/dbs
+view_index_dir = DATA_DIR/couch/views
--- a/hosting/single/nginx/nginx-default-site.conf
+++ b/hosting/single/nginx/nginx-default-site.conf
@ -66,6 +66,15 @@ server {
        rewrite ^/db/(.*)$ /$1 break;
    }

+    location /socket/ {
+      proxy_http_version  1.1;
+      proxy_set_header    Upgrade     $http_upgrade;
+      proxy_set_header    Connection  'upgrade';
+      proxy_set_header    Host        $host;
+      proxy_cache_bypass  $http_upgrade;
+      proxy_pass          http://127.0.0.1:4001;
+    }
+
    location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
--- a/hosting/single/runner.sh
+++ b/hosting/single/runner.sh
@ -36,10 +36,10 @@ fi
 export COUCH_DB_URL=http://$COUCHDB_USER:$COUCHDB_PASSWORD@localhost:5984

 # make these directories in runner, incase of mount
-mkdir -p ${DATA_DIR}/couchdb/{dbs,views}
+mkdir -p ${DATA_DIR}/couch/{dbs,views}
 mkdir -p ${DATA_DIR}/minio
 mkdir -p ${DATA_DIR}/search
-chown -R couchdb:couchdb ${DATA_DIR}/couchdb
+chown -R couchdb:couchdb ${DATA_DIR}/couch
 redis-server --requirepass $REDIS_PASSWORD &
 /opt/clouseau/bin/clouseau &
 /minio/minio server ${DATA_DIR}/minio &
--- a/lerna.json
+++ b/lerna.json
@ -1,5 +1,5 @@
 {
-  "version": "1.2.59-alpha.0",
+  "version": "1.3.15-alpha.9",
  "npmClient": "yarn",
  "packages": [
    "packages/*"
--- a/packages/backend-core/package.json
+++ b/packages/backend-core/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/backend-core",
-  "version": "1.2.59-alpha.0",
+  "version": "1.3.15-alpha.9",
  "description": "Budibase backend core libraries used in server and worker",
  "main": "dist/src/index.js",
  "types": "dist/src/index.d.ts",
@ -20,10 +20,12 @@
    "test:watch": "jest --watchAll"
  },
  "dependencies": {
-    "@budibase/types": "1.2.59-alpha.0",
+    "@budibase/types": "1.3.15-alpha.9",
+    "@shopify/jest-koa-mocks": "5.0.1",
    "@techpass/passport-openidconnect": "0.3.2",
    "aws-sdk": "2.1030.0",
    "bcrypt": "5.0.1",
+    "bcryptjs": "2.4.3",
    "dotenv": "16.0.1",
    "emitter-listener": "1.1.2",
    "ioredis": "4.28.0",
@ -60,7 +62,6 @@
    ]
  },
  "devDependencies": {
-    "@shopify/jest-koa-mocks": "3.1.5",
    "@types/jest": "27.5.1",
    "@types/koa": "2.0.52",
    "@types/lodash": "4.14.180",
--- a/packages/backend-core/plugins.js
+++ b/packages/backend-core/plugins.js
@ -0,0 +1,3 @@
+module.exports = {
+  ...require("./src/plugin"),
+}
--- a/packages/backend-core/src/db/Replication.ts
+++ b/packages/backend-core/src/db/Replication.ts
@ -1,4 +1,5 @@
 import { dangerousGetDB, closeDB } from "."
+import { DocumentType } from "./constants"

 class Replication {
  source: any
@ -53,6 +54,14 @@ class Replication {
    return this.replication
  }

+  appReplicateOpts() {
+    return {
+      filter: (doc: any) => {
+        return doc._id !== DocumentType.APP_METADATA
+      },
+    }
+  }
+
  /**
   * Rollback the target DB back to the state of the source DB
   */
@ -60,6 +69,7 @@ class Replication {
    await this.target.destroy()
    // Recreate the DB again
    this.target = dangerousGetDB(this.target.name)
+    // take the opportunity to remove deleted tombstones
    await this.replicate()
  }

--- a/packages/backend-core/src/db/utils.ts
+++ b/packages/backend-core/src/db/utils.ts
@ -254,7 +254,16 @@ export async function getAllApps({ dev, all, idsOnly, efficient }: any = {}) {
    return false
  })
  if (idsOnly) {
-    return appDbNames
+    const devAppIds = appDbNames.filter(appId => isDevAppID(appId))
+    const prodAppIds = appDbNames.filter(appId => !isDevAppID(appId))
+    switch (dev) {
+      case true:
+        return devAppIds
+      case false:
+        return prodAppIds
+      default:
+        return appDbNames
+    }
  }
  const appPromises = appDbNames.map((app: any) =>
    // skip setup otherwise databases could be re-created
--- a/packages/backend-core/src/environment.ts
+++ b/packages/backend-core/src/environment.ts
@ -19,6 +19,7 @@ if (!LOADED && isDev() && !isTest()) {
 const env = {
  isTest,
  isDev,
+  JS_BCRYPT: process.env.JS_BCRYPT,
  JWT_SECRET: process.env.JWT_SECRET,
  COUCH_DB_URL: process.env.COUCH_DB_URL || "http://localhost:4005",
  COUCH_DB_USERNAME: process.env.COUCH_DB_USER,
@ -50,6 +51,7 @@ const env = {
  GLOBAL_BUCKET_NAME: process.env.GLOBAL_BUCKET_NAME || "global",
  GLOBAL_CLOUD_BUCKET_NAME:
    process.env.GLOBAL_CLOUD_BUCKET_NAME || "prod-budi-tenant-uploads",
+  PLUGIN_BUCKET_NAME: process.env.PLUGIN_BUCKET_NAME || "plugins",
  USE_COUCH: process.env.USE_COUCH || true,
  DISABLE_DEVELOPER_LICENSE: process.env.DISABLE_DEVELOPER_LICENSE,
  DEFAULT_LICENSE: process.env.DEFAULT_LICENSE,
--- a/packages/backend-core/src/hashing.js
+++ b/packages/backend-core/src/hashing.js
@ -1,5 +1,5 @@
-const bcrypt = require("bcrypt")
 const env = require("./environment")
+const bcrypt = env.JS_BCRYPT ? require("bcryptjs") : require("bcrypt")
 const { v4 } = require("uuid")

 const SALT_ROUNDS = env.SALT_ROUNDS || 10
--- a/packages/backend-core/src/index.ts
+++ b/packages/backend-core/src/index.ts
@ -18,6 +18,7 @@ import * as dbConstants from "./db/constants"
 import logging from "./logging"
 import pino from "./pino"
 import * as middleware from "./middleware"
+import plugins from "./plugin"

 // mimic the outer package exports
 import * as db from "./pkg/db"
@ -56,6 +57,7 @@ const core = {
  errors,
  logging,
  roles,
+  plugins,
  ...pino,
  ...errorClasses,
  middleware,
--- a/packages/backend-core/src/objectStore/index.ts
+++ b/packages/backend-core/src/objectStore/index.ts
@ -57,7 +57,11 @@ function publicPolicy(bucketName: any) {
  }
 }

-const PUBLIC_BUCKETS = [ObjectStoreBuckets.APPS, ObjectStoreBuckets.GLOBAL]
+const PUBLIC_BUCKETS = [
+  ObjectStoreBuckets.APPS,
+  ObjectStoreBuckets.GLOBAL,
+  ObjectStoreBuckets.PLUGINS,
+]

 /**
 * Gets a connection to the object store using the S3 SDK.
@ -172,6 +176,14 @@ export const streamUpload = async (
  const objectStore = ObjectStore(bucketName)
  await makeSureBucketExists(objectStore, bucketName)

+  // Set content type for certain known extensions
+  if (filename?.endsWith(".js")) {
+    extra = {
+      ...extra,
+      ContentType: "application/javascript",
+    }
+  }
+
  const params = {
    Bucket: sanitizeBucket(bucketName),
    Key: sanitizeKey(filename),
@ -295,9 +307,13 @@ export const uploadDirectory = async (
  return files
 }

-exports.downloadTarballDirect = async (url: string, path: string) => {
+exports.downloadTarballDirect = async (
+  url: string,
+  path: string,
+  headers = {}
+) => {
  path = sanitizeKey(path)
-  const response = await fetch(url)
+  const response = await fetch(url, { headers })
  if (!response.ok) {
    throw new Error(`unexpected response ${response.statusText}`)
  }
--- a/packages/backend-core/src/objectStore/utils.js
+++ b/packages/backend-core/src/objectStore/utils.js
@ -8,6 +8,7 @@ exports.ObjectStoreBuckets = {
  TEMPLATES: env.TEMPLATES_BUCKET_NAME,
  GLOBAL: env.GLOBAL_BUCKET_NAME,
  GLOBAL_CLOUD: env.GLOBAL_CLOUD_BUCKET_NAME,
+  PLUGINS: env.PLUGIN_BUCKET_NAME,
 }

 exports.budibaseTempDir = function () {
--- a/packages/backend-core/src/plugin/index.ts
+++ b/packages/backend-core/src/plugin/index.ts
@ -0,0 +1,7 @@
+import * as utils from "./utils"
+
+const pkg = {
+  ...utils,
+}
+
+export = pkg
--- a/packages/backend-core/src/plugin/utils.js
+++ b/packages/backend-core/src/plugin/utils.js
@ -0,0 +1,94 @@
+const {
+  DatasourceFieldType,
+  QueryType,
+  PluginType,
+} = require("@budibase/types")
+const joi = require("joi")
+
+const DATASOURCE_TYPES = [
+  "Relational",
+  "Non-relational",
+  "Spreadsheet",
+  "Object store",
+  "Graph",
+  "API",
+]
+
+function runJoi(validator, schema) {
+  const { error } = validator.validate(schema)
+  if (error) {
+    throw error
+  }
+}
+
+function validateComponent(schema) {
+  const validator = joi.object({
+    type: joi.string().allow("component").required(),
+    metadata: joi.object().unknown(true).required(),
+    hash: joi.string().optional(),
+    version: joi.string().optional(),
+    schema: joi
+      .object({
+        name: joi.string().required(),
+        settings: joi.array().items(joi.object().unknown(true)).required(),
+      })
+      .unknown(true),
+  })
+  runJoi(validator, schema)
+}
+
+function validateDatasource(schema) {
+  const fieldValidator = joi.object({
+    type: joi
+      .string()
+      .allow(...Object.values(DatasourceFieldType))
+      .required(),
+    required: joi.boolean().required(),
+    default: joi.any(),
+    display: joi.string(),
+  })
+
+  const queryValidator = joi
+    .object({
+      type: joi.string().allow(...Object.values(QueryType)),
+      fields: joi.object().pattern(joi.string(), fieldValidator),
+    })
+    .required()
+
+  const validator = joi.object({
+    type: joi.string().allow("datasource").required(),
+    metadata: joi.object().unknown(true).required(),
+    hash: joi.string().optional(),
+    version: joi.string().optional(),
+    schema: joi.object({
+      docs: joi.string(),
+      friendlyName: joi.string().required(),
+      type: joi.string().allow(...DATASOURCE_TYPES),
+      description: joi.string().required(),
+      datasource: joi.object().pattern(joi.string(), fieldValidator).required(),
+      query: joi
+        .object({
+          create: queryValidator,
+          read: queryValidator,
+          update: queryValidator,
+          delete: queryValidator,
+        })
+        .unknown(true)
+        .required(),
+    }),
+  })
+  runJoi(validator, schema)
+}
+
+exports.validate = schema => {
+  switch (schema?.type) {
+    case PluginType.COMPONENT:
+      validateComponent(schema)
+      break
+    case PluginType.DATASOURCE:
+      validateDatasource(schema)
+      break
+    default:
+      throw new Error(`Unknown plugin type - check schema.json: ${schema.type}`)
+  }
+}
--- a/packages/backend-core/yarn.lock
+++ b/packages/backend-core/yarn.lock
@ -543,13 +543,13 @@
    semver "^7.3.5"
    tar "^6.1.11"

-"@shopify/jest-koa-mocks@3.1.5":
-  version "3.1.5"
-  resolved "https://registry.yarnpkg.com/@shopify/jest-koa-mocks/-/jest-koa-mocks-3.1.5.tgz#11f77ccfbcaf35cf5ee2c6108a286e61e6bea084"
-  integrity sha512-gQ3/7ELerv00TWO37AGFX5mT9CsFCS+3/UbKMuoIlKEU0QH2OX8BV9WBf/EKw7adCDNlxss0lqV6J8kf5pgr4A==
+"@shopify/jest-koa-mocks@5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@shopify/jest-koa-mocks/-/jest-koa-mocks-5.0.1.tgz#fba490b6b7985fbb571eb9974897d396a3642e94"
+  integrity sha512-4YskS9q8+TEHNoyopmuoy2XyhInyqeOl7CF5ShJs19sm6m0EA/jGGvgf/osv2PeTfuf42/L2G9CzWUSg49yTSg==
  dependencies:
    koa "^2.13.4"
-    node-mocks-http "^1.5.8"
+    node-mocks-http "^1.11.0"

 "@sideway/address@^4.1.3":
  version "4.1.4"
@ -3914,7 +3914,7 @@ node-int64@^0.4.0:
  resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
  integrity sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==

-node-mocks-http@^1.5.8:
+node-mocks-http@^1.11.0:
  version "1.11.0"
  resolved "https://registry.yarnpkg.com/node-mocks-http/-/node-mocks-http-1.11.0.tgz#defc0febf6b935f08245397d47534a8de592996e"
  integrity sha512-jS/WzSOcKbOeGrcgKbenZeNhxUNnP36Yw11+hL4TTxQXErGfqYZ+MaYNNvhaTiGIJlzNSqgQkk9j8dSu1YWSuw==
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@ -1,7 +1,7 @@
 {
  "name": "@budibase/bbui",
  "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.2.59-alpha.0",
+  "version": "1.3.15-alpha.9",
  "license": "MPL-2.0",
  "svelte": "src/index.js",
  "module": "dist/bbui.es.js",
@ -38,7 +38,7 @@
  ],
  "dependencies": {
    "@adobe/spectrum-css-workflow-icons": "^1.2.1",
-    "@budibase/string-templates": "1.2.59-alpha.0",
+    "@budibase/string-templates": "1.3.15-alpha.9",
    "@spectrum-css/actionbutton": "^1.0.1",
    "@spectrum-css/actiongroup": "^1.0.1",
    "@spectrum-css/avatar": "^3.0.2",
--- a/packages/bbui/src/Actions/position_dropdown.js
+++ b/packages/bbui/src/Actions/position_dropdown.js
@ -1,4 +1,4 @@
-export default function positionDropdown(element, { anchor, align }) {
+export default function positionDropdown(element, { anchor, align, maxWidth }) {
  let positionSide = "top"
  let maxHeight = 0
  let dimensions = getDimensions(anchor)
@ -34,13 +34,24 @@ export default function positionDropdown(element, { anchor, align }) {
  }

  function calcLeftPosition() {
-    return align === "right"
-      ? dimensions.left + dimensions.width - dimensions.containerWidth
-      : dimensions.left
+    let left
+
+    if (align == "right") {
+      left = dimensions.left + dimensions.width - dimensions.containerWidth
+    } else if (align == "right-side") {
+      left = dimensions.left + dimensions.width
+    } else {
+      left = dimensions.left
+    }
+
+    return left
  }

  element.style.position = "absolute"
  element.style.zIndex = "9999"
+  if (maxWidth) {
+    element.style.maxWidth = `${maxWidth}px`
+  }
  element.style.minWidth = `${dimensions.width}px`
  element.style.maxHeight = `${maxHeight.toFixed(0)}px`
  element.style.transformOrigin = `center ${positionSide}`
@ -54,10 +65,8 @@ export default function positionDropdown(element, { anchor, align }) {
      element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
    })
  })
-
  resizeObserver.observe(anchor)
  resizeObserver.observe(element)
-
  return {
    destroy() {
      resizeObserver.disconnect()
--- a/packages/bbui/src/Label/Label.svelte
+++ b/packages/bbui/src/Label/Label.svelte
@ -4,10 +4,15 @@

  export let size = "M"
  export let tooltip = ""
+  export let muted
 </script>

 <TooltipWrapper {tooltip} {size}>
-  <label for="" class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}>
+  <label
+    class:muted
+    for=""
+    class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}
+  >
    <slot />
  </label>
 </TooltipWrapper>
@ -17,4 +22,8 @@
    padding: 0;
    white-space: nowrap;
  }
+
+  .muted {
+    opacity: 0.5;
+  }
 </style>
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@ -24,7 +24,6 @@
  export let secondaryAction = undefined
  export let secondaryButtonWarning = false
  export let dataCy = null
-
  const { hide, cancel } = getContext(Context.Modal)
  let loading = false
  $: confirmDisabled = disabled || loading
@ -88,12 +87,11 @@
    <section class="spectrum-Dialog-content content-grid">
      <slot />
    </section>
-    {#if showCancelButton || showConfirmButton}
+    {#if showCancelButton || showConfirmButton || $$slots.footer}
      <div
        class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter"
      >
        <slot name="footer" />
-
        {#if showSecondaryButton && secondaryButtonText && secondaryAction}
          <div class="secondary-action">
            <Button
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@ -11,6 +11,7 @@
  export let align = "right"
  export let portalTarget
  export let dataCy
+  export let maxWidth

  export let direction = "bottom"
  export let showTip = false
@ -45,7 +46,7 @@
  <Portal target={portalTarget}>
    <div
      tabindex="0"
-      use:positionDropdown={{ anchor, align }}
+      use:positionDropdown={{ anchor, align, maxWidth }}
      use:clickOutside={hide}
      on:keydown={handleEscape}
      class={"spectrum-Popover is-open " + (tooltipClasses || "")}
--- a/packages/bbui/src/Tabs/Tabs.svelte
+++ b/packages/bbui/src/Tabs/Tabs.svelte
@ -10,6 +10,7 @@
  export let noHorizPadding = false
  export let quiet = false
  export let emphasized = false
+  export let onTop = false
  export let size = "M"

  let thisSelected = undefined
@ -75,6 +76,7 @@
  bind:this={container}
  class:spectrum-Tabs--quiet={quiet}
  class:noHorizPadding
+  class:onTop
  class:spectrum-Tabs--vertical={vertical}
  class:spectrum-Tabs--horizontal={!vertical}
  class="spectrum-Tabs spectrum-Tabs--size{size}"
@ -122,4 +124,7 @@
  .noPadding {
    margin: 0;
  }
+  .onTop {
+    z-index: 100;
+  }
 </style>
--- a/packages/builder/cypress/integration/adminAndManagement/userManagement.spec.js
+++ b/packages/builder/cypress/integration/adminAndManagement/userManagement.spec.js
@ -74,11 +74,11 @@ filterTests(["smoke", "all"], () => {
                .contains("Update role")
                .click({ force: true })
            })
-            cy.reload({ timeout: 5000 })
+            cy.reload()
            cy.wait(1000)
        }
        // Confirm roles exist within Configure roles table
-        cy.get(interact.SPECTRUM_TABLE, { timeout: 2000 })
+        cy.get(interact.SPECTRUM_TABLE, { timeout: 20000 })
          .eq(0)
          .within(assginedRoles => {
            expect(assginedRoles).to.contain("Admin")
@ -180,7 +180,7 @@ filterTests(["smoke", "all"], () => {
      cy.reload()

      // Confirm details have been saved
-      cy.get(interact.FIELD, { timeout: 1000 }).eq(1).within(() => {
+      cy.get(interact.FIELD, { timeout: 20000 }).eq(1).within(() => {
        cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).should('have.value', "bb")
      })
      cy.get(interact.FIELD, { timeout: 1000 }).eq(2).within(() => {
--- a/packages/builder/cypress/integration/autoScreensUI.spec.js
+++ b/packages/builder/cypress/integration/autoScreensUI.spec.js
@ -82,10 +82,10 @@ filterTests(['smoke', 'all'], () => {
    })

    if (Cypress.env("TEST_ENV")) {
-      it("should generate data source screens", () => {
-        // Using MySQL data source for testing this
+      it("should generate datasource screens", () => {
+        // Using MySQL datasource for testing this
        const datasource = "MySQL"
-        // Select & configure MySQL data source
+        // Select & configure MySQL datasource
        cy.selectExternalDatasource(datasource)
        cy.addDatasourceConfig(datasource)
        // Create Autogenerated screens from a MySQL table - MySQL contains books table
--- a/packages/builder/cypress/integration/createBinding.spec.js
+++ b/packages/builder/cypress/integration/createBinding.spec.js
@ -10,7 +10,7 @@ filterTests(['smoke', 'all'], () => {

    it("should add a current user binding", () => {
      cy.searchAndAddComponent("Paragraph").then(() => {
-        addSettingBinding("text", "Current User._id")
+        addSettingBinding("text", ["Current User", "_id"], "Current User._id")
      })
    })

@ -28,7 +28,7 @@ filterTests(['smoke', 'all'], () => {
      const paramName = "foo"
      cy.createScreen(`/test/:${paramName}`)
      cy.searchAndAddComponent("Paragraph").then(componentId => {
-        addSettingBinding("text", `URL.${paramName}`)
+        addSettingBinding("text", ["URL", paramName], `URL.${paramName}`)
        // The builder preview pages don't have a real URL, so all we can do
        // is check that we were able to bind to the property, and that the
        // component exists on the page
@ -47,11 +47,13 @@ filterTests(['smoke', 'all'], () => {
    })
  })

-  const addSettingBinding = (setting, bindingText, clickOption = true) => {
+  const addSettingBinding = (setting, bindingCategories, bindingText, clickOption = true) => {
    cy.get(`[data-cy="setting-${setting}"] [data-cy=text-binding-button]`).click()
+    cy.get(".category-list li").contains(bindingCategories[0])
    cy.get(".drawer").within(() => {
      if (clickOption) {
-        cy.contains(bindingText).click()
+        cy.get(".category-list li").contains(bindingCategories[0]).click()
+        cy.get("li.binding").contains(bindingCategories[1]).click()
        cy.get("textarea").should("have.value", `{{ ${bindingText} }}`)
      } else {
        cy.get("textarea").type(bindingText)
--- a/packages/builder/cypress/integration/createComponents.spec.js
+++ b/packages/builder/cypress/integration/createComponents.spec.js
@ -20,7 +20,7 @@ filterTests(["all"], () => {
    //Use the tree to delete a selected component
    const deleteSelectedComponent = () => {
      cy.get(
-        ".nav-items-container .nav-item.selected .actions > div > .icon"
+        ".nav-item.selected .actions > div > .icon"
      ).click({
        force: true,
      })
@ -91,7 +91,7 @@ filterTests(["all"], () => {
      cy.searchAndAddComponent("Paragraph").then(componentId => {
        cy.get("[data-cy=setting-_instanceName] input").type(componentId).blur()
        cy.get(
-          ".nav-items-container .nav-item.selected .actions > div > .icon"
+          ".nav-item.selected .actions > div > .icon"
        ).click({
          force: true,
        })
@ -145,7 +145,7 @@ filterTests(["all"], () => {
            return testFieldFocusOnCreate(label)
          })
          .then(() => {
-            cy.get(".nav-items-container .nav-item")
+            cy.get(".nav-item")
              .contains(formId)
              .click({ force: true })
            deleteSelectedComponent()
@ -195,7 +195,7 @@ filterTests(["all"], () => {
            return testFocusOnCreate(label)
          })
          .then(() => {
-            cy.get(".nav-items-container .nav-item")
+            cy.get(".nav-item")
              .contains(providerId)
              .click({ force: true })
            deleteSelectedComponent()
@ -218,7 +218,7 @@ filterTests(["all"], () => {
          .find(".component-placeholder")
          .should("not.exist")
        cy.getComponent(imageId).find(`img[alt=${imageId}]`).should("exist")
-        cy.get(".nav-items-container .nav-item")
+        cy.get(".nav-item")
          .contains(imageId)
          .click({ force: true })
        deleteSelectedComponent()
@ -242,7 +242,7 @@ filterTests(["all"], () => {
        cy.getComponent(markdownId)
          .find(".editor-preview-full h1")
          .contains("Hi")
-        cy.get(".nav-items-container .nav-item")
+        cy.get(".nav-item")
          .contains(markdownId)
          .click({ force: true })
        deleteSelectedComponent()
@ -265,7 +265,7 @@ filterTests(["all"], () => {
          .find(".component-placeholder")
          .should("not.exist")
        cy.getComponent(iconId).find("i.ri-save-fill").should("exist")
-        cy.get(".nav-items-container .nav-item")
+        cy.get(".nav-item")
          .contains(iconId)
          .click({ force: true })
        deleteSelectedComponent()
--- a/packages/builder/cypress/integration/datasources/datasourceWizard.spec.js
+++ b/packages/builder/cypress/integration/datasources/datasourceWizard.spec.js
@ -1,7 +1,7 @@
 import filterTests from "../../support/filterTests"

 filterTests(['all'], () => {
-  context("Datasource Wizard", () => {
+  xcontext("Datasource Wizard", () => {
    if (Cypress.env("TEST_ENV")) {
      before(() => {
        cy.login()
--- a/packages/builder/cypress/integration/datasources/mySql.spec.js
+++ b/packages/builder/cypress/integration/datasources/mySql.spec.js
@ -11,8 +11,8 @@ filterTests(["all"], () => {
      const queryName = "Cypress Test Query"
      const queryRename = "CT Query Rename"

-      it("Should add MySQL data source without configuration", () => {
-        // Select MySQL data source
+      it("Should add MySQL datasource without configuration", () => {
+        // Select MySQL datasource
        cy.selectExternalDatasource(datasource)
        // Attempt to fetch tables without applying configuration
        cy.intercept("**/datasources").as("datasource")
@ -35,8 +35,8 @@ filterTests(["all"], () => {
        cy.get(".spectrum-Button").contains("Skip table fetch").click({ force: true })
      })

-      it("should add MySQL data source and fetch tables", () => {
-        // Add & configure MySQL data source
+      it("should add MySQL datasource and fetch tables", () => {
+        // Add & configure MySQL datasource
        cy.selectExternalDatasource(datasource)
        cy.intercept("**/datasources").as("datasource")
        cy.addDatasourceConfig(datasource)
@ -52,7 +52,7 @@ filterTests(["all"], () => {
      })

      it("should check table fetching error", () => {
-        // MySQL test data source contains tables without primary keys
+        // MySQL test datasource contains tables without primary keys
        cy.get(".spectrum-InLineAlert")
          .should("contain", "Error fetching tables")
          .and("contain", "No primary key constraint found")
--- a/packages/builder/cypress/integration/datasources/oracle.spec.js
+++ b/packages/builder/cypress/integration/datasources/oracle.spec.js
@ -1,7 +1,7 @@
 import filterTests from "../../support/filterTests"

 filterTests(["all"], () => {
-  context("Oracle Datasource Testing", () => {
+  xcontext("Oracle Datasource Testing", () => {
    if (Cypress.env("TEST_ENV")) {
      before(() => {
        cy.login()
@ -11,8 +11,8 @@ filterTests(["all"], () => {
      const queryName = "Cypress Test Query"
      const queryRename = "CT Query Rename"

-      it("Should add Oracle data source and skip table fetch", () => {
-        // Select Oracle data source
+      it("Should add Oracle datasource and skip table fetch", () => {
+        // Select Oracle datasource
        cy.selectExternalDatasource(datasource)
        // Skip table fetch - no config added
        cy.get(".spectrum-Button")
@ -23,7 +23,7 @@ filterTests(["all"], () => {
        cy.get(".spectrum-Textfield-input", { timeout: 500 })
          .eq(1)
          .should("have.value", "localhost")
-        // Add another Oracle data source, configure & skip table fetch
+        // Add another Oracle datasource, configure & skip table fetch
        cy.selectExternalDatasource(datasource)
        cy.addDatasourceConfig(datasource, true)
        // Confirm config and no tables
@ -33,8 +33,8 @@ filterTests(["all"], () => {
        cy.get(".spectrum-Body").eq(2).should("contain", "No tables found.")
      })

-      it("Should add Oracle data source and fetch tables without configuration", () => {
-        // Select Oracle data source
+      it("Should add Oracle datasource and fetch tables without configuration", () => {
+        // Select Oracle datasource
        cy.selectExternalDatasource(datasource)
        // Attempt to fetch tables without applying configuration
        cy.intercept("**/datasources").as("datasource")
@ -49,8 +49,8 @@ filterTests(["all"], () => {
        cy.get(".spectrum-Button").contains("Skip table fetch").click({ force: true })
      })

-      xit("should add Oracle data source and fetch tables", () => {
-        // Add & configure Oracle data source
+      xit("should add Oracle datasource and fetch tables", () => {
+        // Add & configure Oracle datasource
        cy.selectExternalDatasource(datasource)
        cy.intercept("**/datasources").as("datasource")
        cy.addDatasourceConfig(datasource)
--- a/packages/builder/cypress/integration/datasources/postgreSql.spec.js
+++ b/packages/builder/cypress/integration/datasources/postgreSql.spec.js
@ -11,8 +11,8 @@ filterTests(["all"], () => {
      const queryName = "Cypress Test Query"
      const queryRename = "CT Query Rename"

-      xit("Should add PostgreSQL data source without configuration", () => {
-        // Select PostgreSQL data source
+      xit("Should add PostgreSQL datasource without configuration", () => {
+        // Select PostgreSQL datasource
        cy.selectExternalDatasource(datasource)
        // Attempt to fetch tables without applying configuration
        cy.intercept("**/datasources").as("datasource")
@ -27,8 +27,8 @@ filterTests(["all"], () => {
        cy.get(".spectrum-Button").contains("Skip table fetch").click({ force: true })
      })

-      it("should add PostgreSQL data source and fetch tables", () => {
-        // Add & configure PostgreSQL data source
+      it("should add PostgreSQL datasource and fetch tables", () => {
+        // Add & configure PostgreSQL datasource
        cy.selectExternalDatasource(datasource)
        cy.intercept("**/datasources").as("datasource")
        cy.addDatasourceConfig(datasource)
@ -162,7 +162,7 @@ filterTests(["all"], () => {
        switchSchema("randomText")

        // No tables displayed
-        cy.get(".spectrum-Body", { timeout: 5000 }).eq(2).should("contain", "No tables found")
+        cy.get(".spectrum-Body", { timeout: 10000 }).eq(2, { timeout: 10000 }).should("contain", "No tables found")

        // Previously created query should be visible
        cy.get(".spectrum-Table").should("contain", queryName)
@ -173,7 +173,7 @@ filterTests(["all"], () => {
        switchSchema("1")

        // Confirm tables exist - Check for specific one
-        cy.get(".spectrum-Table", { timeout: 5000 }).eq(0).should("contain", "test")
+        cy.get(".spectrum-Table", { timeout: 20000 }).eq(0).should("contain", "test")
        cy.get(".spectrum-Table")
          .eq(0)
          .find(".spectrum-Table-row")
@ -187,7 +187,7 @@ filterTests(["all"], () => {
        switchSchema("public")

        // Confirm tables exist - again
-        cy.get(".spectrum-Table", { timeout: 5000 }).eq(0).should("contain", "REGIONS")
+        cy.get(".spectrum-Table", { timeout: 20000 }).eq(0).should("contain", "REGIONS")
        cy.get(".spectrum-Table")
          .eq(0)
          .find(".spectrum-Table-row")
--- a/packages/builder/cypress/integration/datasources/rest.spec.js
+++ b/packages/builder/cypress/integration/datasources/rest.spec.js
@ -10,11 +10,11 @@ filterTests(["smoke", "all"], () => {
    const datasource = "REST"
    const restUrl = "https://api.openbrewerydb.org/breweries"

-    it("Should add REST data source with incorrect API", () => {
-      // Select REST data source
+    it("Should add REST datasource with incorrect API", () => {
+      // Select REST datasource
      cy.selectExternalDatasource(datasource)
      // Enter incorrect api & attempt to send query
-      cy.get(".spectrum-Button", { timeout: 500 }).contains("Add query").click({ force: true })
+      cy.get(".query-buttons", { timeout: 1000 }).contains("Add query").click({ force: true })
      cy.intercept("**/preview").as("queryError")
      cy.get("input").clear().type("random text")
      cy.get(".spectrum-Button").contains("Send").click({ force: true })
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@ -4,7 +4,7 @@ Cypress.on("uncaught:exception", () => {

 // ACCOUNTS & USERS
 Cypress.Commands.add("login", (email, password) => {
-  cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 10000 })
+  cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 30000 })
  cy.url()
    .should("include", "/builder/")
    .then(url => {
@ -33,7 +33,7 @@ Cypress.Commands.add("login", (email, password) => {
 })

 Cypress.Commands.add("logOut", () => {
-  cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 2000 })
+  cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 30000 })
  cy.get(".user-dropdown .avatar > .icon").click({ force: true })
  cy.get(".spectrum-Popover[data-cy='user-menu']").within(() => {
    cy.get("li[data-cy='user-logout']").click({ force: true })
@ -43,7 +43,7 @@ Cypress.Commands.add("logOut", () => {

 Cypress.Commands.add("logoutNoAppGrid", () => {
  // Logs user out when app grid is not present
-  cy.visit(`${Cypress.config().baseUrl}/builder`)
+  cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 30000 })
  cy.get(".avatar > .icon").click({ force: true })
  cy.get(".spectrum-Popover[data-cy='user-menu']").within(() => {
    cy.get(".spectrum-Menu-item").contains("Log out").click({ force: true })
@ -68,11 +68,14 @@ Cypress.Commands.add("createUser", (email, permission) => {
          .click({ force: true })
      })
    }
-    // Add user and wait for modal to change
-    cy.get(".spectrum-Button").contains("Add user").click({ force: true })
+    // Add user
+    cy.get(".spectrum-Button").contains("Add users").click({ force: true })
    cy.get(".spectrum-ActionButton").contains("Add email").should("not.exist")
  })
  // Onboarding modal
+  cy.get(".spectrum-Dialog-grid", { timeout: 5000 }).contains(
+    "Choose your onboarding"
+  )
  cy.get(".spectrum-Dialog-grid").within(() => {
    cy.get(".onboarding-type").eq(1).click()
    cy.get(".spectrum-Button").contains("Done").click({ force: true })
@ -163,7 +166,7 @@ Cypress.Commands.add("createApp", (name, addDefaultTable) => {
  const shouldCreateDefaultTable =
    typeof addDefaultTable != "boolean" ? true : addDefaultTable

-  cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 10000 })
+  cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 30000 })
  cy.url({ timeout: 30000 }).should("include", "/apps")
  cy.get(`[data-cy="create-app-btn"]`, { timeout: 5000 }).click({ force: true })

@ -197,7 +200,7 @@ Cypress.Commands.add("createApp", (name, addDefaultTable) => {
 })

 Cypress.Commands.add("deleteApp", name => {
-  cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 5000 })
+  cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 30000 })
  cy.wait(2000)
  cy.request(`${Cypress.config().baseUrl}/api/applications?status=all`)
    .its("body")
@ -254,7 +257,7 @@ Cypress.Commands.add("deleteApp", name => {
 })

 Cypress.Commands.add("deleteAllApps", () => {
-  cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 5000 })
+  cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 30000 })
  cy.wait(500)
  cy.request(`${Cypress.config().baseUrl}/api/applications?status=all`, {
    timeout: 5000,
@ -351,7 +354,7 @@ Cypress.Commands.add("alterAppVersion", (appId, version) => {
 })

 Cypress.Commands.add("importApp", (exportFilePath, name) => {
-  cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 5000 })
+  cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 30000 })

  cy.request(`${Cypress.config().baseUrl}/api/applications?status=all`)
    .its("body")
@ -386,7 +389,7 @@ Cypress.Commands.add("importApp", (exportFilePath, name) => {

 // Filters visible with 1 or more
 Cypress.Commands.add("searchForApplication", appName => {
-  cy.visit(`${Cypress.config().baseUrl}/builder`)
+  cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 30000 })
  cy.wait(2000)

  // No app filter functionality if only 1 app exists
@ -409,7 +412,7 @@ Cypress.Commands.add("searchForApplication", appName => {

 // Assumes there are no others
 Cypress.Commands.add("applicationInAppTable", appName => {
-  cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 10000 })
+  cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 30000 })
  cy.get(".appTable", { timeout: 5000 }).within(() => {
    cy.get(".title").contains(appName).should("exist")
  })
@ -454,8 +457,8 @@ Cypress.Commands.add("createTable", (tableName, initialTable) => {
    cy.get(".spectrum-ButtonGroup").contains("Create").click()
  })
  // Ensure modal has closed and table is created
-  cy.get(".spectrum-Modal").should("not.exist")
-  cy.get(".spectrum-Tabs-content", { timeout: 1000 }).should(
+  cy.get(".spectrum-Modal", { timeout: 2000 }).should("not.exist")
+  cy.get(".spectrum-Tabs-content", { timeout: 2000 }).should(
    "contain",
    tableName
  )
@ -634,30 +637,32 @@ Cypress.Commands.add(
  (datasourceNames, accessLevelLabel) => {
    cy.contains("Design").click()
    cy.get(".spectrum-Button").contains("Add screen").click({ force: true })
-    cy.get(".spectrum-Modal").within(() => {
-      cy.get(".item").contains("Autogenerated screens").click()
+    cy.get(".spectrum-Dialog-grid").within(() => {
+      cy.get("[data-cy='autogenerated-screens']").click()
+      cy.intercept("**/api/datasources").as("autoScreens")
      cy.get(".spectrum-Button").contains("Continue").click({ force: true })
+      cy.wait("@autoScreens")
+      cy.wait(5000)
    })
-    cy.get(".spectrum-Modal [data-cy='data-source-modal']", {
-      timeout: 500,
-    }).within(() => {
+    cy.get("[data-cy='autogenerated-screens']").should("not.exist")
+    cy.get("[data-cy='data-source-modal']", { timeout: 10000 }).within(() => {
      for (let i = 0; i < datasourceNames.length; i++) {
-        cy.wait(500)
-        cy.get(".data-source-entry").contains(datasourceNames[i]).click()
-        //Ensure the check mark is visible
+        cy.get(".data-source-entry")
+          .contains(datasourceNames[i], { timeout: 20000 })
+          .click({ force: true })
+        // Ensure the check mark is visible
        cy.get(".data-source-entry")
          .contains(datasourceNames[i])
-          .get(".data-source-check")
+          .get(".data-source-check", { timeout: 20000 })
          .should("exist")
      }

      cy.get(".spectrum-Button").contains("Confirm").click({ force: true })
    })

-    cy.get(".spectrum-Modal").within(() => {
+    cy.get(".spectrum-Modal", { timeout: 10000 }).within(() => {
      if (accessLevelLabel) {
-        cy.get(".spectrum-Picker-label").click()
-        cy.wait(500)
+        cy.get(".spectrum-Picker-label", { timeout: 10000 }).click()
        cy.contains(accessLevelLabel).click()
      }
      cy.get(".spectrum-Button").contains("Done").click({ force: true })
@ -758,7 +763,7 @@ Cypress.Commands.add("navigateToDataSection", () => {
 })

 Cypress.Commands.add("navigateToAutogeneratedModal", () => {
-  // Screen name must already exist within data source
+  // Screen name must already exist within datasource
  cy.contains("Design").click()
  cy.get(".spectrum-Button").contains("Add screen").click({ force: true })
  cy.get(".spectrum-Modal").within(() => {
@ -774,7 +779,7 @@ Cypress.Commands.add("navigateToAutogeneratedModal", () => {
 Cypress.Commands.add("selectExternalDatasource", datasourceName => {
  // Navigates to Data Section
  cy.navigateToDataSection()
-  // Open Data Source modal
+  // Open Datasource modal
  cy.get(".nav").within(() => {
    cy.get(".add-button").click()
  })
@ -912,8 +917,9 @@ Cypress.Commands.add("createRestQuery", (method, restUrl, queryPrettyName) => {
 Cypress.Commands.add("closeModal", () => {
  cy.get(".spectrum-Modal", { timeout: 2000 }).within(() => {
    cy.get(".close-icon").click()
-    cy.wait(1000) // Wait for modal to close
  })
+  // Confirm modal has closed
+  cy.get(".spectrum-Modal", { timeout: 10000 }).should("not.exist")
 })

 Cypress.Commands.add("expandBudibaseConnection", () => {
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/builder",
-  "version": "1.2.59-alpha.0",
+  "version": "1.3.15-alpha.9",
  "license": "GPL-3.0",
  "private": true,
  "scripts": {
@ -69,10 +69,10 @@
    }
  },
  "dependencies": {
-    "@budibase/bbui": "1.2.59-alpha.0",
-    "@budibase/client": "1.2.59-alpha.0",
-    "@budibase/frontend-core": "1.2.59-alpha.0",
-    "@budibase/string-templates": "1.2.59-alpha.0",
+    "@budibase/bbui": "1.3.15-alpha.9",
+    "@budibase/client": "1.3.15-alpha.9",
+    "@budibase/frontend-core": "1.3.15-alpha.9",
+    "@budibase/string-templates": "1.3.15-alpha.9",
    "@sentry/browser": "5.19.1",
    "@spectrum-css/page": "^3.0.1",
    "@spectrum-css/vars": "^3.0.1",
@ -96,7 +96,7 @@
    "@babel/runtime": "^7.13.10",
    "@rollup/plugin-replace": "^2.4.2",
    "@roxi/routify": "2.18.5",
-    "@sveltejs/vite-plugin-svelte": "1.0.0-next.19",
+    "@sveltejs/vite-plugin-svelte": "1.0.1",
    "@testing-library/jest-dom": "^5.11.10",
    "@testing-library/svelte": "^3.0.0",
    "babel-jest": "^26.6.3",
@ -118,7 +118,7 @@
    "ts-node": "^10.4.0",
    "tsconfig-paths": "4.0.0",
    "typescript": "^4.5.5",
-    "vite": "^2.1.5"
+    "vite": "^3.0.8"
  },
  "gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
 }
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@ -299,7 +299,10 @@ const getProviderContextBindings = (asset, dataProviders) => {
        schema = {}
        const values = context.values || []
        values.forEach(value => {
-          schema[value.key] = { name: value.label, type: "string" }
+          schema[value.key] = {
+            name: value.label,
+            type: value.type || "string",
+          }
        })
      } else if (context.type === "schema") {
        // Schema contexts are generated dynamically depending on their data
@ -359,6 +362,12 @@ const getProviderContextBindings = (asset, dataProviders) => {
          providerId,
          // Table ID is used by JSON fields to know what table the field is in
          tableId: table?._id,
+          category: component._instanceName,
+          icon: def.icon,
+          display: {
+            name: fieldSchema.name || key,
+            type: fieldSchema.type,
+          },
        })
      })
    })
@ -385,6 +394,9 @@ const getUserBindings = () => {
      // datasource options, based on bindable properties
      fieldSchema,
      providerId: "user",
+      category: "Current User",
+      icon: "User",
+      display: fieldSchema,
    })
  })
  return bindings
@ -401,11 +413,17 @@ const getDeviceBindings = () => {
      type: "context",
      runtimeBinding: `${safeDevice}.${makePropSafe("mobile")}`,
      readableBinding: `Device.Mobile`,
+      category: "Device",
+      icon: "DevicePhone",
+      display: { type: "boolean", name: "mobile" },
    })
    bindings.push({
      type: "context",
      runtimeBinding: `${safeDevice}.${makePropSafe("tablet")}`,
      readableBinding: `Device.Tablet`,
+      category: "Device",
+      icon: "DevicePhone",
+      display: { type: "boolean", name: "tablet" },
    })
  }
  return bindings
@ -429,6 +447,8 @@ const getSelectedRowsBindings = asset => {
          "selectedRows"
        )}`,
        readableBinding: `${table._instanceName}.Selected rows`,
+        category: "Selected rows",
+        icon: "ViewRow",
      }))
    )

@ -460,6 +480,9 @@ const getStateBindings = () => {
      type: "context",
      runtimeBinding: `${safeState}.${makePropSafe(key)}`,
      readableBinding: `State.${key}`,
+      category: "State",
+      icon: "AutomatedSegment",
+      display: { name: key },
    }))
  }
  return bindings
@ -482,11 +505,17 @@ const getUrlBindings = asset => {
    type: "context",
    runtimeBinding: `${safeURL}.${makePropSafe(param)}`,
    readableBinding: `URL.${param}`,
+    category: "URL",
+    icon: "RailTop",
+    display: { type: "string" },
  }))
  const queryParamsBinding = {
    type: "context",
    runtimeBinding: makePropSafe("query"),
    readableBinding: "Query params",
+    category: "URL",
+    icon: "RailTop",
+    display: { type: "object" },
  }
  return urlParamBindings.concat([queryParamsBinding])
 }
@ -497,6 +526,9 @@ const getRoleBindings = () => {
      type: "context",
      runtimeBinding: `trim "${role._id}"`,
      readableBinding: `Role.${role.name}`,
+      category: "Role",
+      icon: "UserGroup",
+      display: { type: "string", name: role.name },
    }
  })
 }
@ -518,6 +550,7 @@ export const getEventContextBindings = (
  // Check if any context bindings are provided by the component for this
  // setting
  const component = findComponent(asset.props, componentId)
+  const def = store.actions.components.getDefinition(component?._component)
  const settings = getComponentSettings(component?._component)
  const eventSetting = settings.find(setting => setting.key === settingKey)
  if (eventSetting?.context?.length) {
@ -527,6 +560,8 @@ export const getEventContextBindings = (
        runtimeBinding: `${makePropSafe("eventContext")}.${makePropSafe(
          contextEntry.key
        )}`,
+        category: component._instanceName,
+        icon: def.icon,
      })
    })
  }
@ -548,6 +583,8 @@ export const getEventContextBindings = (
        bindings.push({
          readableBinding: `Action ${idx + 1}.${contextValue.label}`,
          runtimeBinding: `actions.${idx}.${contextValue.value}`,
+          category: "Actions",
+          icon: "JourneyAction",
        })
      })
    }
--- a/packages/builder/src/builderStore/datasource.js
+++ b/packages/builder/src/builderStore/datasource.js
@ -9,7 +9,7 @@ function prepareData(config) {
    ds => ds.source === config.type
  ).length

-  let baseName = IntegrationNames[config.type]
+  let baseName = IntegrationNames[config.type] || config.name
  let name =
    existingTypeCount === 0 ? baseName : `${baseName}-${existingTypeCount + 1}`

@ -27,7 +27,7 @@ export async function saveDatasource(config, skipFetch = false) {
  // Create datasource
  const resp = await datasources.save(datasource, !skipFetch && datasource.plus)

-  // update the tables incase data source plus
+  // update the tables incase datasource plus
  await tables.fetch()
  await datasources.select(resp._id)
  return resp
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@ -90,13 +90,21 @@ export const getFrontendStore = () => {

      // Fetch component definitions.
      // Allow errors to propagate.
-      let components = await API.fetchComponentLibDefinitions(application.appId)
+      const components = await API.fetchComponentLibDefinitions(
+        application.appId
+      )
+
+      // Filter out custom component keys so we can flag them
+      const customComponents = Object.keys(components).filter(name =>
+        name.startsWith("plugin/")
+      )

      // Reset store state
      store.update(state => ({
        ...state,
        libraries: application.componentLibraries,
        components,
+        customComponents,
        clientFeatures: {
          ...INITIAL_FRONTEND_STATE.clientFeatures,
          ...components.features,
@ -116,6 +124,7 @@ export const getFrontendStore = () => {
        version: application.version,
        revertableVersion: application.revertableVersion,
        navigation: application.navigation || {},
+        usedPlugins: application.usedPlugins || [],
      }))

      // Initialise backend stores
@ -189,9 +198,18 @@ export const getFrontendStore = () => {
        })
      },
      save: async screen => {
+        const state = get(store)
        const creatingNewScreen = screen._id === undefined
        const savedScreen = await API.saveScreen(screen)
        const routesResponse = await API.fetchAppRoutes()
+        let usedPlugins = state.usedPlugins
+
+        // If plugins changed we need to fetch the latest app metadata
+        if (savedScreen.pluginAdded) {
+          const { application } = await API.fetchAppPackage(state.appId)
+          usedPlugins = application.usedPlugins || []
+        }
+
        store.update(state => {
          // Update screen object
          const idx = state.screens.findIndex(x => x._id === savedScreen._id)
@ -210,6 +228,9 @@ export const getFrontendStore = () => {
          // Update routes
          state.routes = routesResponse.routes

+          // Update used plugins
+          state.usedPlugins = usedPlugins
+
          return state
        })
        return savedScreen
@ -368,9 +389,6 @@ export const getFrontendStore = () => {
        if (!componentName) {
          return null
        }
-        if (!componentName.startsWith("@budibase")) {
-          componentName = `@budibase/standard-components/${componentName}`
-        }
        return get(store).components[componentName]
      },
      createInstance: (componentName, presetProps) => {
--- a/packages/builder/src/components/automation/SetupPanel/CronBuilder.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/CronBuilder.svelte
@ -1,6 +1,7 @@
 <script>
  import { Button, Select, Input, Label } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
+  import { onMount, createEventDispatcher } from "svelte"
+  import { flags } from "stores/backend"
  const dispatch = createEventDispatcher()

  export let value
@ -29,11 +30,16 @@
      label: "Every Night at Midnight",
      value: "0 0 * * *",
    },
-    {
-      label: "Every Budibase Reboot",
-      value: "@reboot",
-    },
  ]
+
+  onMount(() => {
+    if (!$flags.cloud) {
+      CRON_EXPRESSIONS.push({
+        label: "Every Budibase Reboot",
+        value: "@reboot",
+      })
+    }
+  })
 </script>

 <div class="block-field">
--- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
@ -13,7 +13,7 @@
    customQueryIconColor,
    customQueryText,
  } from "helpers/data/utils"
-  import ICONS from "./icons"
+  import { getIcon } from "./icons"
  import { notifications } from "@budibase/bbui"

  let openDataSources = []
@ -32,8 +32,8 @@
    : []
  $: openDataSource = enrichedDataSources.find(x => x.open)
  $: {
-    // Ensure the open data source is always included in the list of open
-    // data sources
+    // Ensure the open datasource is always included in the list of open
+    // datasources
    if (openDataSource) {
      openNode(openDataSource)
    }
@ -79,7 +79,7 @@
  })

  const containsActiveEntity = datasource => {
-    // If we're view a query then the data source ID is in the URL
+    // If we're view a query then the datasource ID is in the URL
    if ($params.selectedDatasource === datasource._id) {
      return true
    }
@ -124,7 +124,7 @@
      >
        <div class="datasource-icon" slot="icon">
          <svelte:component
-            this={ICONS[datasource.source]}
+            this={getIcon(datasource.source, datasource.schema)}
            height="18"
            width="18"
          />
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte
@ -8,6 +8,7 @@
    notifications,
    Modal,
    Table,
+    Toggle,
  } from "@budibase/bbui"
  import { datasources, integrations, tables } from "stores/backend"
  import CreateEditRelationship from "components/backend/Datasources/CreateEditRelationship.svelte"
@ -15,6 +16,7 @@
  import ArrayRenderer from "components/common/renderers/ArrayRenderer.svelte"
  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
  import { goto } from "@roxi/routify"
+  import ValuesList from "components/common/ValuesList.svelte"

  export let datasource
  export let save
@ -31,6 +33,8 @@
  let createExternalTableModal
  let selectedFromRelationship, selectedToRelationship
  let confirmDialog
+  let specificTables = null
+  let requireSpecificTables = false

  $: integration = datasource && $integrations[datasource.source]
  $: plusTables = datasource?.plus
@ -87,7 +91,7 @@

  async function updateDatasourceSchema() {
    try {
-      await datasources.updateSchema(datasource)
+      await datasources.updateSchema(datasource, specificTables)
      notifications.success(`Datasource ${name} tables updated successfully.`)
      await tables.fetch()
    } catch (error) {
@ -150,6 +154,19 @@
  warning={false}
  title="Confirm table fetch"
 >
+  <Toggle
+    bind:value={requireSpecificTables}
+    on:change={e => {
+      requireSpecificTables = e.detail
+      specificTables = null
+    }}
+    thin
+    text="Fetch listed tables only (one per line)"
+  />
+  {#if requireSpecificTables}
+    <ValuesList label="" bind:values={specificTables} />
+  {/if}
+  <br />
  <Body>
    If you have fetched tables from this database before, this action may
    overwrite any changes you made after your initial fetch.
--- a/packages/builder/src/components/backend/DatasourceNavigator/_components/DatasourceCard.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/_components/DatasourceCard.svelte
@ -0,0 +1,65 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import { Heading, Detail } from "@budibase/bbui"
+  import { getIcon } from "../icons"
+
+  export let integration
+  export let integrationType
+  export let schema
+
+  let dispatcher = createEventDispatcher()
+</script>
+
+<div
+  class:selected={integration.type === integrationType}
+  on:click={() => dispatcher("selected", integrationType)}
+  class="item hoverable"
+>
+  <div class="item-body" class:with-type={!!schema.type}>
+    <svelte:component
+      this={getIcon(integrationType, schema)}
+      height="20"
+      width="20"
+    />
+    <div class="text">
+      <Heading size="XXS">{schema.friendlyName}</Heading>
+      {#if schema.type}
+        <Detail size="S">{schema.type || ""}</Detail>
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>
+  .item {
+    cursor: pointer;
+    display: grid;
+    grid-gap: var(--spectrum-alias-grid-margin-xsmall);
+    padding: var(--spectrum-alias-item-padding-s)
+      var(--spectrum-alias-item-padding-m);
+    background: var(--spectrum-alias-background-color-secondary);
+    transition: background 0.13s ease-out;
+    border: solid var(--spectrum-alias-border-color);
+    border-radius: 5px;
+    box-sizing: border-box;
+    border-width: 2px;
+  }
+  .item:hover,
+  .item.selected {
+    background: var(--spectrum-alias-background-color-tertiary);
+  }
+
+  .item-body {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+  .item-body.with-type {
+    align-items: flex-start;
+  }
+  .item-body.with-type :global(svg) {
+    margin-top: 4px;
+  }
+</style>
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/Custom.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/Custom.svelte
@ -0,0 +1,52 @@
+<script>
+  export let width = "100"
+  export let height = "100"
+</script>
+
+<svg
+  {width}
+  {height}
+  xmlns="http://www.w3.org/2000/svg"
+  x="0px"
+  y="0px"
+  viewBox="0 0 18.43 17.62"
+  xml:space="preserve"
+>
+  <style type="text/css">
+    .custom-st0 {
+      fill: var(
+        --spectrum-heading-xxs-text-color,
+        var(--spectrum-alias-heading-text-color)
+      );
+    }
+  </style>
+  <ellipse
+    id="Ellipse_9514"
+    class="custom-st0"
+    cx="9.14"
+    cy="2.88"
+    rx="8"
+    ry="2.5"
+  />
+  <path
+    id="Path_8355"
+    class="custom-st0"
+    d="M7.64,12.88c0-0.48,0.06-0.95,0.17-1.41c-2.53-0.16-5.92-0.76-6.67-1.95v4.36
+	c0,1.34,3.39,2.43,7.63,2.49C8.03,15.36,7.63,14.13,7.64,12.88z"
+  />
+  <path
+    id="Path_8356"
+    class="custom-st0"
+    d="M13.64,6.88c1.25,0,2.47,0.39,3.48,1.12c0.01-0.04,0.02-0.08,0.02-0.12V4.51
+	c-1.22,1.55-5.53,2-8,2s-7.11-0.58-8-2v3.36c0,1.28,3.09,2.33,7.06,2.48C9.18,8.24,11.3,6.88,13.64,6.88z"
+  />
+  <path
+    id="Path_8353"
+    class="custom-st0"
+    d="M10.32,14.42c-0.56-0.56-0.56-1.47,0-2.03l1.24-1.24l-0.01-0.01c-0.25-0.25-0.25-0.65,0-0.9l0,0
+	L12,9.79c0.25-0.25,0.65-0.25,0.9,0c0,0,0,0,0,0l0,0l0.45,0.45l1.53-1.53c0.09-0.09,0.24-0.09,0.34,0l0.34,0.34
+	c0.09,0.09,0.09,0.24,0,0.34l-1.53,1.53l1.35,1.35l1.53-1.53c0.09-0.09,0.24-0.09,0.34,0l0.34,0.34c0.09,0.09,0.09,0.24,0,0.34
+	l-1.53,1.53l0.45,0.45c0.25,0.25,0.25,0.65,0,0.9l0,0l-0.45,0.45c-0.25,0.25-0.65,0.25-0.9,0l0,0l-0.01-0.01l-1.24,1.24
+	c-0.56,0.56-1.47,0.56-2.03,0l0,0L10.32,14.42z"
+  />
+</svg>
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/index.js
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/index.js
@ -15,8 +15,9 @@ import GoogleSheets from "./GoogleSheets.svelte"
 import Firebase from "./Firebase.svelte"
 import Redis from "./Redis.svelte"
 import Snowflake from "./Snowflake.svelte"
+import Custom from "./Custom.svelte"

-export default {
+const ICONS = {
  BUDIBASE: Budibase,
  POSTGRES: Postgres,
  DYNAMODB: DynamoDB,
@ -34,4 +35,15 @@ export default {
  FIRESTORE: Firebase,
  REDIS: Redis,
  SNOWFLAKE: Snowflake,
+  CUSTOM: Custom,
+}
+
+export default ICONS
+
+export function getIcon(integrationType, schema) {
+  if (schema?.custom || !ICONS[integrationType]) {
+    return ICONS.CUSTOM
+  } else {
+    return ICONS[integrationType]
+  }
 }
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
@ -18,6 +18,7 @@
  import { createRestDatasource } from "builderStore/datasource"
  import { goto } from "@roxi/routify"
  import ImportRestQueriesModal from "./ImportRestQueriesModal.svelte"
+  import DatasourceCard from "../_components/DatasourceCard.svelte"

  export let modal
  let integrations = {}
@ -27,6 +28,9 @@
  let importModal

  $: showImportButton = false
+  $: customIntegrations = Object.entries(integrations).filter(
+    entry => entry[1].custom
+  )

  checkShowImport()

@ -49,6 +53,9 @@
      schema: selected.datasource,
      auth: selected.auth,
    }
+    if (selected.friendlyName) {
+      integration.name = selected.friendlyName
+    }
    checkShowImport()
  }

@ -119,7 +126,7 @@
 <Modal bind:this={modal}>
  <ModalContent
    disabled={!Object.keys(integration).length}
-    title="Add data source"
+    title="Add datasource"
    confirmText="Continue"
    showSecondaryButton={showImportButton}
    secondaryButtonText="Import"
@ -148,38 +155,41 @@
    </Layout>

    <Layout noPadding gap="XS">
-      <Body size="S">Connect to an external data source</Body>
+      <Body size="S">Connect to an external datasource</Body>
      <div class="item-list">
-        {#each Object.entries(integrations).filter(([key]) => key !== IntegrationTypes.INTERNAL) as [integrationType, schema]}
-          <div
-            class:selected={integration.type === integrationType}
-            on:click={() => selectIntegration(integrationType)}
-            class="item hoverable"
-          >
-            <div class="item-body" class:with-type={!!schema.type}>
-              <svelte:component
-                this={ICONS[integrationType]}
-                height="20"
-                width="20"
-              />
-              <div class="text">
-                <Heading size="XXS">{schema.friendlyName}</Heading>
-                {#if schema.type}
-                  <Detail size="S">{schema.type || ""}</Detail>
-                {/if}
-              </div>
-            </div>
-          </div>
+        {#each Object.entries(integrations).filter(([key, val]) => key !== IntegrationTypes.INTERNAL && !val.custom) as [integrationType, schema]}
+          <DatasourceCard
+            on:selected={evt => selectIntegration(evt.detail)}
+            {schema}
+            bind:integrationType
+            {integration}
+          />
        {/each}
      </div>
    </Layout>
+
+    {#if customIntegrations.length > 0}
+      <Layout noPadding gap="XS">
+        <Body size="S">Custom datasource</Body>
+        <div class="item-list">
+          {#each customIntegrations as [integrationType, schema]}
+            <DatasourceCard
+              on:selected={evt => selectIntegration(evt.detail)}
+              {schema}
+              bind:integrationType
+              {integration}
+            />
+          {/each}
+        </div>
+      </Layout>
+    {/if}
  </ModalContent>
 </Modal>

 <style>
  .item-list {
    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    grid-template-columns: repeat(2, minmax(150px, 1fr));
    grid-gap: var(--spectrum-alias-grid-baseline);
  }

--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
@ -14,8 +14,14 @@
  let datasource = cloneDeep(integration)
  let skipFetch = false

+  $: name =
+    IntegrationNames[datasource.type] || datasource.name || datasource.type
+
  async function saveDatasource() {
    try {
+      if (!datasource.name) {
+        datasource.name = name
+      }
      const resp = await save(datasource, skipFetch)
      $goto(`./datasource/${resp._id}`)
      notifications.success(`Datasource updated successfully.`)
@ -32,7 +38,7 @@
 </script>

 <ModalContent
-  title={`Connect to ${IntegrationNames[datasource.type]}`}
+  title={`Connect to ${name}`}
  onConfirm={() => saveDatasource()}
  onCancel={() => modal.show()}
  confirmText={datasource.plus
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@ -9,6 +9,9 @@
    Body,
    Layout,
    Button,
+    ActionButton,
+    Icon,
+    Popover,
  } from "@budibase/bbui"
  import { createEventDispatcher, onMount } from "svelte"
  import {
@ -45,9 +48,25 @@
  let jsValue = initialValueJS ? value : null
  let hbsValue = initialValueJS ? null : value

+  let selectedCategory = null
+
+  let popover
+  let popoverAnchor
+  let hoverTarget
+
  $: usingJS = mode === "JavaScript"
  $: searchRgx = new RegExp(search, "ig")
  $: categories = Object.entries(groupBy("category", bindings))
+
+  $: bindingIcons = bindings?.reduce((acc, ele) => {
+    if (ele.icon) {
+      acc[ele.category] = acc[ele.category] || ele.icon
+    }
+    return acc
+  }, {})
+
+  $: categoryIcons = { ...bindingIcons, Helpers: "MagicWand" }
+
  $: filteredCategories = categories
    .map(([name, categoryBindings]) => ({
      name,
@ -55,10 +74,19 @@
        return binding.readableBinding.match(searchRgx)
      }),
    }))
-    .filter(category => category.bindings?.length > 0)
+    .filter(category => {
+      return (
+        category.bindings?.length > 0 &&
+        (!selectedCategory ? true : selectedCategory === category.name)
+      )
+    })
+
  $: filteredHelpers = helpers?.filter(helper => {
    return helper.label.match(searchRgx) || helper.description.match(searchRgx)
  })
+
+  $: categoryNames = [...categories.map(cat => cat[0]), "Helpers"]
+
  $: codeMirrorHints = bindings?.map(x => `$("${x.readableBinding}")`)

  const updateValue = val => {
@ -140,58 +168,163 @@
  })
 </script>

+<span class="detailPopover">
+  <Popover
+    align="right-side"
+    bind:this={popover}
+    anchor={popoverAnchor}
+    maxWidth={300}
+  >
+    <Layout gap="S">
+      <div class="helper">
+        {#if hoverTarget.title}
+          <div class="helper__name">{hoverTarget.title}</div>
+        {/if}
+        {#if hoverTarget.description}
+          <div class="helper__description">
+            {@html hoverTarget.description}
+          </div>
+        {/if}
+        {#if hoverTarget.example}
+          <pre class="helper__example">{hoverTarget.example}</pre>
+        {/if}
+      </div>
+    </Layout>
+  </Popover>
+</span>
+
 <DrawerContent>
  <svelte:fragment slot="sidebar">
-    <div class="container">
-      <section>
+    <Layout noPadding gap="S">
+      {#if selectedCategory}
+        <div>
+          <ActionButton
+            secondary
+            icon={"ArrowLeft"}
+            on:click={() => {
+              selectedCategory = null
+            }}
+          >
+            Back
+          </ActionButton>
+        </div>
+      {/if}
+
+      {#if !selectedCategory}
        <div class="heading">Search</div>
        <Search placeholder="Search" bind:value={search} />
-      </section>
-      {#each filteredCategories as category}
-        {#if category.bindings?.length}
-          <section>
-            <div class="heading">{category.name}</div>
+      {/if}
+
+      {#if !selectedCategory && !search}
+        <ul class="category-list">
+          {#each categoryNames as categoryName}
+            <li
+              on:click={() => {
+                selectedCategory = categoryName
+              }}
+            >
+              <Icon name={categoryIcons[categoryName]} />
+              <span class="category-name">{categoryName} </span>
+              <span class="category-chevron"><Icon name="ChevronRight" /></span>
+            </li>
+          {/each}
+        </ul>
+      {/if}
+
+      {#if selectedCategory || search}
+        {#each filteredCategories as category}
+          {#if category.bindings?.length}
+            <div class="cat-heading">
+              <Icon name={categoryIcons[category.name]} />{category.name}
+            </div>
            <ul>
              {#each category.bindings as binding}
-                <li on:click={() => addBinding(binding)}>
-                  <span class="binding__label">{binding.readableBinding}</span>
-                  {#if binding.type}
-                    <span class="binding__type">{binding.type}</span>
-                  {/if}
-                  {#if binding.description}
-                    <br />
-                    <div class="binding__description">
-                      {binding.description || ""}
-                    </div>
+                <li
+                  class="binding"
+                  on:mouseenter={e => {
+                    popoverAnchor = e.target
+                    if (!binding.description) {
+                      return
+                    }
+                    hoverTarget = {
+                      title: binding.display.name || binding.fieldSchema.name,
+                      description: binding.description,
+                    }
+                    popover.show()
+                    e.stopPropagation()
+                  }}
+                  on:mouseleave={() => {
+                    popover.hide()
+                    popoverAnchor = null
+                    hoverTarget = null
+                  }}
+                  on:focus={() => {}}
+                  on:blur={() => {}}
+                  on:click={() => addBinding(binding)}
+                >
+                  <span class="binding__label">
+                    {#if binding.display?.name}
+                      {binding.display.name}
+                    {:else if binding.fieldSchema?.name}
+                      {binding.fieldSchema?.name}
+                    {:else}
+                      {binding.readableBinding}
+                    {/if}
+                  </span>
+
+                  {#if binding.display?.type || binding.fieldSchema?.type}
+                    <span class="binding__typeWrap">
+                      <span class="binding__type">
+                        {binding.display?.type || binding.fieldSchema?.type}
+                      </span>
+                    </span>
                  {/if}
                </li>
              {/each}
            </ul>
-          </section>
+          {/if}
+        {/each}
+
+        {#if selectedCategory === "Helpers" || search}
+          {#if filteredHelpers?.length}
+            <div class="heading">Helpers</div>
+            <ul class="helpers">
+              {#each filteredHelpers as helper}
+                <li
+                  class="binding"
+                  on:click={() => addHelper(helper, usingJS)}
+                  on:mouseenter={e => {
+                    popoverAnchor = e.target
+                    if (!helper.displayText && helper.description) {
+                      return
+                    }
+                    hoverTarget = {
+                      title: helper.displayText,
+                      description: helper.description,
+                      example: getHelperExample(helper, usingJS),
+                    }
+                    popover.show()
+                    e.stopPropagation()
+                  }}
+                  on:mouseleave={() => {
+                    popover.hide()
+                    popoverAnchor = null
+                    hoverTarget = null
+                  }}
+                  on:focus={() => {}}
+                  on:blur={() => {}}
+                >
+                  <span class="binding__label">{helper.displayText}</span>
+                  <span class="binding__typeWrap">
+                    <span class="binding__type">function</span>
+                  </span>
+                </li>
+              {/each}
+            </ul>
+          {/if}
        {/if}
-      {/each}
-      {#if filteredHelpers?.length}
-        <section>
-          <div class="heading">Helpers</div>
-          <ul>
-            {#each filteredHelpers as helper}
-              <li on:click={() => addHelper(helper, usingJS)}>
-                <div class="helper">
-                  <div class="helper__name">{helper.displayText}</div>
-                  <div class="helper__description">
-                    {@html helper.description}
-                  </div>
-                  <pre class="helper__example">{getHelperExample(
-                      helper,
-                      usingJS
-                    )}</pre>
-                </div>
-              </li>
-            {/each}
-          </ul>
-        </section>
      {/if}
-    </div>
+    </Layout>
  </svelte:fragment>
  <div class="main">
    <Tabs selected={mode} on:select={onChangeMode}>
@ -241,6 +374,35 @@
 </DrawerContent>

 <style>
+  ul.helpers li * {
+    pointer-events: none;
+  }
+  ul.category-list li {
+    display: flex;
+    gap: var(--spacing-m);
+    align-items: center;
+  }
+  ul.category-list .category-name {
+    font-weight: 600;
+    text-transform: capitalize;
+  }
+  ul.category-list .category-chevron {
+    flex: 1;
+    text-align: right;
+  }
+  ul.category-list .category-chevron :global(div.icon),
+  .cat-heading :global(div.icon) {
+    display: inline-block;
+  }
+  li.binding {
+    display: flex;
+    align-items: center;
+  }
+  li.binding .binding__typeWrap {
+    flex: 1;
+    text-align: right;
+    text-transform: capitalize;
+  }
  .main :global(textarea) {
    min-height: 202px !important;
  }
@ -251,23 +413,20 @@
    padding: var(--spacing-s) var(--spacing-xl);
  }

-  .container {
-    margin: calc(-1 * var(--spacing-xl));
-  }
-  .heading {
+  .heading,
+  .cat-heading {
    font-size: var(--font-size-s);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--spectrum-global-color-gray-600);
-    padding: var(--spacing-xl) 0 var(--spacing-m) 0;
  }

-  section {
-    padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
-  }
-  section:not(:first-child) {
-    border-top: var(--border-light);
+  .cat-heading {
+    display: flex;
+    gap: var(--spacing-m);
+    align-items: center;
  }
+
  ul {
    list-style: none;
    padding: 0;
@ -278,7 +437,7 @@
    font-size: var(--font-size-s);
    padding: var(--spacing-m);
    border-radius: 4px;
-    border: var(--border-light);
+    background-color: var(--spectrum-global-color-gray-200);
    transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
      border-color 130ms ease-in-out;
    word-wrap: break-word;
@ -292,22 +451,14 @@
  li:hover {
    color: var(--spectrum-global-color-gray-900);
    background-color: var(--spectrum-global-color-gray-50);
-    border-color: var(--spectrum-global-color-gray-500);
    cursor: pointer;
  }
-  li:hover :global(*) {
-    color: var(--spectrum-global-color-gray-900) !important;
-  }

  .binding__label {
    font-weight: 600;
    text-transform: capitalize;
  }
-  .binding__description {
-    color: var(--spectrum-global-color-gray-700);
-    margin: 0.5rem 0 0 0;
-    white-space: normal;
-  }
+
  .binding__type {
    font-family: monospace;
    background-color: var(--spectrum-global-color-gray-200);
--- a/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ClientBindingPanel.svelte
@ -15,7 +15,6 @@
    }
    return bindings?.map(binding => ({
      ...binding,
-      category: "Bindable Values",
      type: null,
    }))
  }
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@ -23,6 +23,7 @@
  const dispatch = createEventDispatcher()
  let bindingDrawer
  let valid = true
+  let currentVal = value

  $: readableValue = runtimeToReadableBinding(bindings, value)
  $: tempValue = readableValue
@ -30,11 +31,17 @@

  const saveBinding = () => {
    onChange(tempValue)
+    onBlur()
    bindingDrawer.hide()
  }

  const onChange = value => {
-    dispatch("change", readableToRuntimeBinding(bindings, value))
+    currentVal = readableToRuntimeBinding(bindings, value)
+    dispatch("change", currentVal)
+  }
+
+  const onBlur = () => {
+    dispatch("blur", currentVal)
  }
 </script>

@ -45,6 +52,7 @@
    readonly={isJS}
    value={isJS ? "(JavaScript function)" : readableValue}
    on:change={event => onChange(event.detail)}
+    on:blur={onBlur}
    {placeholder}
    {updateOnChange}
  />
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte
@ -52,7 +52,7 @@
      )

      newBlock.inputs = {
-        fields: Object.keys(parameters.fields).reduce((fields, key) => {
+        fields: Object.keys(parameters.fields ?? {}).reduce((fields, key) => {
          fields[key] = "string"
          return fields
        }, {}),
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DuplicateRow.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/DuplicateRow.svelte
@ -73,13 +73,13 @@

 <div class="root">
  <Body size="S">
-    Choose the data source that provides the row you would like to duplicate.
+    Choose the datasource that provides the row you would like to duplicate.
    <br />
    You can always add or override fields manually.
  </Body>

  <div class="params">
-    <Label small>Data Source</Label>
+    <Label small>Datasource</Label>
    <Select
      bind:value={parameters.providerId}
      options={providerOptions}
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/SaveRow.svelte
@ -71,13 +71,13 @@

 <div class="root">
  <Body size="S">
-    Choosing a Data Source will automatically use the data it provides, but it's
+    Choosing a Datasource will automatically use the data it provides, but it's
    optional.<br />
    You can always add or override fields manually.
  </Body>

  <div class="params">
-    <Label small>Data Source</Label>
+    <Label small>Datasource</Label>
    <Select
      bind:value={parameters.providerId}
      options={providerOptions}
--- a/packages/builder/src/components/integration/KeyValueBuilder.svelte
+++ b/packages/builder/src/components/integration/KeyValueBuilder.svelte
@ -107,7 +107,7 @@
        placeholder={keyPlaceholder}
        readonly={readOnly}
        bind:value={field.name}
-        on:change={changed}
+        on:blur={changed}
      />
      {#if options}
        <Select bind:value={field.value} on:change={changed} {options} />
@ -115,7 +115,10 @@
        <DrawerBindableInput
          {bindings}
          placeholder="Value"
-          on:change={e => (field.value = e.detail)}
+          on:blur={e => {
+            field.value = e.detail
+            changed()
+          }}
          disabled={readOnly}
          value={field.value}
          allowJS={false}
@ -127,7 +130,7 @@
          placeholder={valuePlaceholder}
          readonly={readOnly}
          bind:value={field.value}
-          on:change={changed}
+          on:blur={changed}
        />
      {/if}
      {#if toggle}
--- a/packages/builder/src/components/start/ExportAppModal.svelte
+++ b/packages/builder/src/components/start/ExportAppModal.svelte
@ -1,16 +1,24 @@
 <script>
-  import { ModalContent, Toggle } from "@budibase/bbui"
+  import { ModalContent, Toggle, Body } from "@budibase/bbui"

  export let app
+  export let published
  let excludeRows = false

+  $: title = published ? "Export published app" : "Export latest app"
+  $: confirmText = published ? "Export published" : "Export latest"
+
  const exportApp = () => {
-    const id = app.deployed ? app.prodId : app.devId
+    const id = published ? app.prodId : app.devId
    const appName = encodeURIComponent(app.name)
    window.location = `/api/backups/export?appId=${id}&appname=${appName}&excludeRows=${excludeRows}`
  }
 </script>

-<ModalContent title={"Export"} confirmText={"Export"} onConfirm={exportApp}>
+<ModalContent {title} {confirmText} onConfirm={exportApp}>
+  <Body
+    >Apps can be exported with or without data that is within internal tables -
+    select this below.</Body
+  >
  <Toggle text="Exclude Rows" bind:value={excludeRows} />
 </ModalContent>
--- a/packages/builder/src/constants/index.js
+++ b/packages/builder/src/constants/index.js
@ -57,3 +57,10 @@ export const DefaultAppTheme = {
  navBackground: "var(--spectrum-global-color-gray-50)",
  navTextColor: "var(--spectrum-global-color-gray-800)",
 }
+
+export const PluginSource = {
+  URL: "URL",
+  NPM: "NPM",
+  GITHUB: "Github",
+  FILE: "File Upload",
+}
--- a/packages/builder/src/helpers/data/utils.js
+++ b/packages/builder/src/helpers/data/utils.js
@ -46,7 +46,7 @@ export function buildQueryString(obj) {
      if (str !== "") {
        str += "&"
      }
-      str += `${key}=${value || ""}`
+      str += `${key}=${encodeURIComponent(value || "")}`
    }
  }
  return str
--- a/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
@ -31,7 +31,9 @@
      class="add-button"
      data-cy={`new-${isExternal ? "datasource" : "table"}`}
    >
-      <Icon hoverable name="AddCircle" on:click={modal.show} />
+      {#if modal}
+        <Icon hoverable name="AddCircle" on:click={modal.show} />
+      {/if}
    </div>
  </div>
  <div class="content">
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte
@ -28,25 +28,25 @@
  import { onMount } from "svelte"
  import restUtils from "helpers/data/utils"
  import {
-    RestBodyTypes as bodyTypes,
-    SchemaTypeOptions,
    PaginationLocations,
    PaginationTypes,
+    RawRestBodyTypes,
+    RestBodyTypes as bodyTypes,
+    SchemaTypeOptions,
  } from "constants/backend"
  import JSONPreview from "components/integration/JSONPreview.svelte"
  import AccessLevelSelect from "components/integration/AccessLevelSelect.svelte"
  import DynamicVariableModal from "../../_components/DynamicVariableModal.svelte"
  import Placeholder from "assets/bb-spaceship.svg"
  import { cloneDeep } from "lodash/fp"
-  import { RawRestBodyTypes } from "constants/backend"

  import {
    getRestBindings,
-    toBindingsArray,
-    runtimeToReadableBinding,
    readableToRuntimeBinding,
-    runtimeToReadableMap,
    readableToRuntimeMap,
+    runtimeToReadableBinding,
+    runtimeToReadableMap,
+    toBindingsArray,
  } from "builderStore/dataBinding"

  let query, datasource
@ -95,7 +95,7 @@
  $: runtimeUrlQueries = readableToRuntimeMap(mergedBindings, breakQs)

  function getSelectedQuery() {
-    const cloneQuery = cloneDeep(
+    return cloneDeep(
      $queries.list.find(q => q._id === $queries.selected) || {
        datasourceId: $params.selectedDatasource,
        parameters: [],
@ -107,7 +107,6 @@
        queryVerb: "read",
      }
    )
-    return cloneQuery
  }

  function checkQueryName(inputUrl = null) {
@ -121,14 +120,15 @@
    if (!base) {
      return base
    }
-    const qs = restUtils.buildQueryString(
+    let qs = restUtils.buildQueryString(
      runtimeToReadableMap(mergedBindings, qsObj)
    )
    let newUrl = base
    if (base.includes("?")) {
-      newUrl = base.split("?")[0]
+      const split = base.split("?")
+      newUrl = split[0]
    }
-    return qs.length > 0 ? `${newUrl}?${qs}` : newUrl
+    return qs.length === 0 ? newUrl : `${newUrl}?${qs}`
  }

  function buildQuery() {
@ -314,6 +314,25 @@
    }
  }

+  const paramsChanged = evt => {
+    breakQs = {}
+    for (let param of evt.detail) {
+      breakQs[param.name] = param.value
+    }
+  }
+
+  const urlChanged = evt => {
+    breakQs = {}
+    const qs = evt.target.value.split("?")[1]
+    if (qs && qs.length > 0) {
+      const parts = qs.split("&")
+      for (let part of parts) {
+        const [key, value] = part.split("=")
+        breakQs[key] = value
+      }
+    }
+  }
+
  onMount(async () => {
    query = getSelectedQuery()

@ -426,7 +445,11 @@
            />
          </div>
          <div class="url">
-            <Input bind:value={url} placeholder="http://www.api.com/endpoint" />
+            <Input
+              on:blur={urlChanged}
+              bind:value={url}
+              placeholder="http://www.api.com/endpoint"
+            />
          </div>
          <Button primary disabled={!url} on:click={runQuery}>Send</Button>
          <Button
@ -456,13 +479,16 @@
            />
          </Tab>
          <Tab title="Params">
-            <KeyValueBuilder
-              bind:object={breakQs}
-              name="param"
-              headings
-              bindings={mergedBindings}
-              bindingDrawerLeft="260px"
-            />
+            {#key breakQs}
+              <KeyValueBuilder
+                on:change={paramsChanged}
+                object={breakQs}
+                name="param"
+                headings
+                bindings={mergedBindings}
+                bindingDrawerLeft="260px"
+              />
+            {/key}
          </Tab>
          <Tab title="Headers">
            <KeyValueBuilder
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@ -85,6 +85,8 @@
        ? [$store.componentToPaste?._id]
        : [],
    isBudibaseEvent: true,
+    usedPlugins: $store.usedPlugins,
+    location: window.location,
  }

  // Refresh the preview when required
@ -290,7 +292,7 @@
  <iframe
    title="componentPreview"
    bind:this={iframe}
-    src="/preview"
+    src="/app/preview"
    class:hidden={loading || error}
    class:tablet={$store.previewDevice === "tablet"}
    class:mobile={$store.previewDevice === "mobile"}
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte
@ -54,7 +54,7 @@
    },
  }

-  const handleKeyAction = async (component, key, ctrlKey = false) => {
+  const handleKeyAction = async (event, component, key, ctrlKey = false) => {
    if (!component || !key) {
      return false
    }
@ -70,6 +70,9 @@
      const handler = keyHandlers[key]
      if (!handler) {
        return false
+      } else if (event) {
+        event.preventDefault()
+        event.stopPropagation()
      }
      return handler(component)
    } catch (error) {
@ -89,14 +92,19 @@
      return
    }
    // Key events are always for the selected component
-    return handleKeyAction($selectedComponent, e.key, e.ctrlKey || e.metaKey)
+    return await handleKeyAction(
+      e,
+      $selectedComponent,
+      e.key,
+      e.ctrlKey || e.metaKey
+    )
  }

  const handleComponentMenu = async e => {
    // Menu events can be for any component
    const { id, key, ctrlKey } = e.detail
    const component = findComponent($selectedScreen.props, id)
-    return await handleKeyAction(component, key, ctrlKey)
+    return await handleKeyAction(null, component, key, ctrlKey)
  }

  onMount(() => {
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
@ -28,7 +28,7 @@

 {#if $selectedComponent}
  {#key $selectedComponent._id}
-    <Panel {title} icon={componentDefinition.icon} borderLeft>
+    <Panel {title} icon={componentDefinition?.icon} borderLeft>
      <ComponentSettingsSection
        {componentInstance}
        {componentDefinition}
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
@ -24,7 +24,11 @@
  $: currentDefinition = store.actions.components.getDefinition(
    $selectedComponent?._component
  )
-  $: enrichedStructure = enrichStructure(structure, $store.components)
+  $: enrichedStructure = enrichStructure(
+    structure,
+    $store.components,
+    $store.customComponents
+  )
  $: filteredStructure = filterStructure(
    enrichedStructure,
    section,
@ -46,8 +50,25 @@

  // Parses the structure in the manifest and returns an enriched structure with
  // explicit categories
-  const enrichStructure = (structure, definitions) => {
+  const enrichStructure = (structure, definitions, customComponents) => {
    let enrichedStructure = []
+
+    // Add custom components category
+    if (customComponents?.length) {
+      enrichedStructure.push({
+        name: "Plugins",
+        isCategory: true,
+        children: customComponents
+          .map(x => ({
+            ...definitions[x],
+            name: definitions[x].friendlyName || definitions[x].name,
+          }))
+          .sort((a, b) => {
+            return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1
+          }),
+      })
+    }
+
    structure.forEach(item => {
      if (typeof item === "string") {
        const def = definitions[`@budibase/standard-components/${item}`]
@ -65,6 +86,7 @@
        })
      }
    })
+
    return enrichedStructure
  }

@ -225,7 +247,7 @@
    position: fixed;
    right: 0;
    z-index: 1;
-    height: 100%;
+    height: calc(100% - 60px);
    display: flex;
    flex-direction: row;
    align-items: stretch;
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/DatasourceModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/DatasourceModal.svelte
@ -77,7 +77,7 @@
    size="L"
  >
    <Body size="S">
-      Select which data source you would like to use to create your screens
+      Select which datasource you would like to use to create your screens
    </Body>
    <Layout noPadding gap="S">
      {#each filteredSources as datasource}
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte
@ -66,7 +66,7 @@
            <Heading size="XS">Autogenerated screens</Heading>
            <Body size="S">
              Add autogenerated screens with CRUD functionality to get a working
-              app quickly! (Requires a data source)
+              app quickly! (Requires a datasource)
            </Body>
          </div>
        </div>
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@ -55,6 +55,8 @@
        },
        { title: "Auth", href: "/builder/portal/manage/auth" },
        { title: "Email", href: "/builder/portal/manage/email" },
+        { title: "Plugins", href: "/builder/portal/manage/plugins" },
+
        {
          title: "Organisation",
          href: "/builder/portal/settings/organisation",
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@ -15,7 +15,6 @@
  import Spinner from "components/common/Spinner.svelte"
  import CreateAppModal from "components/start/CreateAppModal.svelte"
  import UpdateAppModal from "components/start/UpdateAppModal.svelte"
-  import ExportAppModal from "components/start/ExportAppModal.svelte"

  import { store, automationStore } from "builderStore"
  import { API } from "api"
@ -33,7 +32,6 @@
  let selectedApp
  let creationModal
  let updatingModal
-  let exportModal
  let creatingApp = false
  let loaded = $apps?.length || $templates?.length
  let searchTerm = ""
@ -407,10 +405,6 @@
  <UpdateAppModal app={selectedApp} />
 </Modal>

-<Modal bind:this={exportModal} padding={false} width="600px">
-  <ExportAppModal app={selectedApp} />
-</Modal>
-
 <style>
  .appTable {
    border-top: var(--border-light);
--- a/packages/builder/src/pages/builder/portal/manage/plugins/_components/AddPluginModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/plugins/_components/AddPluginModal.svelte
@ -0,0 +1,127 @@
+<script>
+  import {
+    ModalContent,
+    Label,
+    Input,
+    Select,
+    Dropzone,
+    Body,
+    notifications,
+  } from "@budibase/bbui"
+  import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
+  import { plugins } from "stores/portal"
+  import { PluginSource } from "constants"
+
+  function opt(name, optional) {
+    if (optional) {
+      return { name, optional }
+    }
+    return { name }
+  }
+
+  let authOptions = {
+    [PluginSource.URL]: [opt("URL"), opt("Headers", true)],
+    [PluginSource.NPM]: [opt("URL")],
+    [PluginSource.GITHUB]: [opt("URL"), opt("Github Token", true)],
+    [PluginSource.FILE]: [opt("File Upload")],
+  }
+  let file
+  let source = PluginSource.URL
+  let dynamicValues = {}
+
+  let validation
+  $: validation = source === "File Upload" ? file : dynamicValues["URL"]
+
+  function infoMessage(optionName) {
+    switch (optionName) {
+      case PluginSource.URL:
+        return "Please specify a URL which directs to a built plugin TAR archive. You can provide headers if authentication is required."
+      case PluginSource.NPM:
+        return "Please specify the URL to a public NPM package which contains the built version of the plugin you wish to install."
+      case PluginSource.GITHUB:
+        return "Please specify the URL to a Github repository which contains built plugin releases. If this is a private repo you can provide a token to access it."
+      case PluginSource.FILE:
+        return "Please provide a built plugin TAR archive. You can build a plugin locally using the Budibase CLI."
+    }
+  }
+
+  async function save() {
+    try {
+      if (source === PluginSource.FILE) {
+        await plugins.uploadPlugin(file)
+      } else {
+        const url = dynamicValues["URL"]
+        let auth =
+          source === PluginSource.GITHUB
+            ? dynamicValues["Github Token"]
+            : source === PluginSource.URL
+            ? dynamicValues["Headers"]
+            : undefined
+        await plugins.createPlugin(source, url, auth)
+      }
+      notifications.success("Plugin added successfully.")
+    } catch (err) {
+      const msg = err?.message ? err.message : JSON.stringify(err)
+      notifications.error(`Failed to add plugin: ${msg}`)
+    }
+  }
+</script>
+
+<ModalContent
+  confirmText={"Save"}
+  onConfirm={save}
+  disabled={!validation}
+  size="M"
+  title="Add new plugin"
+>
+  <div class="form-row">
+    <Label size="M">Source</Label>
+    <Select
+      placeholder={null}
+      bind:value={source}
+      options={Object.values(PluginSource)}
+    />
+  </div>
+  <Body size="S">{infoMessage(source)}</Body>
+  {#each authOptions[source] as option}
+    {#if option.name === PluginSource.FILE}
+      <div class="form-row">
+        <Label size="M">{option.name}</Label>
+        <Dropzone
+          gallery={false}
+          value={[file]}
+          on:change={e => {
+            if (!e.detail || e.detail.length === 0) {
+              file = null
+            } else {
+              file = e.detail[0]
+            }
+          }}
+        />
+      </div>
+    {:else}
+      <div class="form-row">
+        <div>
+          <Label size="M">{option.name}</Label>
+          {#if option.optional}
+            <Label size="S" muted><i>Optional</i></Label>
+          {/if}
+        </div>
+        {#if option.name === "Headers"}
+          <KeyValueBuilder bind:object={dynamicValues[option.name]} />
+        {:else}
+          <Input bind:value={dynamicValues[option.name]} />
+        {/if}
+      </div>
+    {/if}
+  {/each}
+</ModalContent>
+
+<style>
+  .form-row {
+    display: grid;
+    grid-template-columns: 60px 1fr;
+    grid-gap: var(--spacing-l);
+    align-items: center;
+  }
+</style>
--- a/packages/builder/src/pages/builder/portal/manage/plugins/_components/DeletePluginModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/plugins/_components/DeletePluginModal.svelte
@ -0,0 +1,33 @@
+<script>
+  import { Body, ModalContent, notifications } from "@budibase/bbui"
+  import { plugins } from "stores/portal"
+  import { createEventDispatcher } from "svelte"
+
+  export let plugin
+
+  let dispatch = createEventDispatcher()
+
+  async function deletePlugin() {
+    try {
+      await plugins.deletePlugin(plugin._id)
+      notifications.success(`Plugin ${plugin?.name} deleted`)
+      dispatch("deleted")
+    } catch (error) {
+      const msg = error?.message ? error.message : JSON.stringify(error)
+      notifications.error(`Error deleting plugin: ${msg}`)
+    }
+  }
+</script>
+
+<ModalContent
+  warning
+  onConfirm={deletePlugin}
+  title="Delete Plugin"
+  confirmText="Delete plugin"
+  cancelText="Cancel"
+  showCloseIcon={false}
+>
+  <Body>
+    Are you sure you want to delete <strong>{plugin?.name}</strong>
+  </Body>
+</ModalContent>
--- a/packages/builder/src/pages/builder/portal/manage/plugins/_components/PluginRow.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/plugins/_components/PluginRow.svelte
@ -0,0 +1,155 @@
+<script>
+  import {
+    Icon,
+    Body,
+    Modal,
+    ModalContent,
+    Button,
+    Label,
+    Input,
+  } from "@budibase/bbui"
+  import DeletePluginModal from "../_components/DeletePluginModal.svelte"
+
+  export let plugin
+
+  let detailsModal
+  let deleteModal
+
+  let icon =
+    plugin.schema.type === "component"
+      ? plugin.schema.schema.icon || "Book"
+      : plugin.schema.schema.icon || "Beaker"
+
+  $: friendlyName = plugin?.schema?.schema?.friendlyName
+
+  function pluginDeleted() {
+    if (detailsModal) {
+      detailsModal.hide()
+    }
+  }
+</script>
+
+<div class="row" on:click={() => detailsModal.show()}>
+  <div class="title">
+    <div class="name">
+      <div>
+        <Icon size="M" name={icon} />
+      </div>
+      <div>
+        <Body
+          size="S"
+          color="var(--spectrum-global-color-gray-900)"
+          weight="800"
+        >
+          {plugin.name}
+        </Body>
+        <Body size="XS" color="var(--spectrum-global-color-gray-900)">
+          {friendlyName}
+        </Body>
+      </div>
+    </div>
+  </div>
+  <div class="desktop">{plugin.version}</div>
+  <div class="desktop">
+    {plugin.schema.type.charAt(0).toUpperCase() + plugin.schema.type.slice(1)}
+  </div>
+  <div>
+    <Icon name="ChevronRight" />
+  </div>
+</div>
+
+<Modal bind:this={detailsModal}>
+  <ModalContent
+    size="M"
+    title="Plugin details"
+    showConfirmButton={false}
+    showCancelButton={false}
+  >
+    <div class="details-row">
+      <Label size="M">Name</Label>
+      <Input disabled value={plugin.name} />
+    </div>
+
+    <div class="details-row">
+      <Label size="M">Friendly name</Label>
+      <Input disabled value={friendlyName} />
+    </div>
+
+    <div class="details-row">
+      <Label size="M">Type</Label>
+      <Input
+        disabled
+        value={plugin.schema.type.charAt(0).toUpperCase() +
+          plugin.schema.type.slice(1)}
+      />
+    </div>
+    <div class="details-row">
+      <Label size="M">Source</Label>
+      <Input disabled value={plugin.source || "N/A"} />
+    </div>
+    <div class="details-row">
+      <Label size="M">Version</Label>
+      <Input disabled value={plugin.version} />
+    </div>
+    <div class="details-row">
+      <Label size="M">License</Label>
+      <Input disabled value={plugin.package.license} />
+    </div>
+    <div class="details-row">
+      <Label size="M">Author</Label>
+      <Input disabled value={plugin.package.author || "N/A"} />
+    </div>
+
+    <div class="footer" slot="footer">
+      <Button newStyles on:click={deleteModal.show()} warning>Delete</Button>
+    </div>
+  </ModalContent>
+
+  <Modal bind:this={deleteModal}>
+    <DeletePluginModal {plugin} on:deleted={pluginDeleted} />
+  </Modal>
+</Modal>
+
+<style>
+  .row {
+    display: grid;
+    grid-template-columns: 1fr 110px 140px 20px;
+    align-items: center;
+    background: var(--background);
+    border-radius: 4px;
+    padding: 0 16px;
+    height: 56px;
+    background: var(--spectrum-global-color-gray-50);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    transition: background 130ms ease-out;
+  }
+  .row:hover {
+    cursor: pointer;
+    background: var(--spectrum-global-color-gray-75);
+  }
+
+  .name {
+    grid-gap: var(--spacing-m);
+    grid-template-columns: 75px 75px;
+    align-items: center;
+    display: flex;
+  }
+
+  .details-row {
+    display: grid;
+    grid-template-columns: 70px 1fr;
+    grid-gap: var(--spacing-l) var(--spacing-l);
+    align-items: center;
+  }
+
+  @media (max-width: 640px) {
+    .desktop {
+      display: none !important;
+    }
+  }
+
+  .footer {
+    display: flex;
+    gap: var(--spacing-l);
+  }
+</style>
--- a/packages/builder/src/pages/builder/portal/manage/plugins/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/plugins/index.svelte
@ -0,0 +1,95 @@
+<script>
+  import {
+    Layout,
+    Heading,
+    Body,
+    Button,
+    Select,
+    Divider,
+    Modal,
+    Search,
+  } from "@budibase/bbui"
+  import { onMount } from "svelte"
+  import { plugins } from "stores/portal"
+  import PluginRow from "./_components/PluginRow.svelte"
+  import AddPluginModal from "./_components/AddPluginModal.svelte"
+
+  let modal
+  let searchTerm = ""
+  let filter = "all"
+  let filterOptions = [
+    { label: "All plugins", value: "all" },
+    { label: "Components", value: "component" },
+    { label: "Datasources", value: "datasource" },
+  ]
+
+  $: filteredPlugins = $plugins
+    .filter(plugin => {
+      return filter === "all" || plugin.schema.type === filter
+    })
+    .filter(plugin => {
+      return (
+        !searchTerm ||
+        plugin?.name?.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    })
+
+  onMount(async () => {
+    await plugins.load()
+  })
+</script>
+
+<Layout noPadding>
+  <Layout gap="XS" noPadding>
+    <Heading size="M">Plugins</Heading>
+    <Body>Add your own custom datasources and components</Body>
+  </Layout>
+  <Divider size="S" />
+  <Layout noPadding>
+    <div class="controls">
+      <div>
+        <Button on:click={modal.show} newStyles cta icon={"Add"}>
+          Add plugin
+        </Button>
+      </div>
+      <div class="filters">
+        <div class="select">
+          <Select
+            bind:value={filter}
+            placeholder={null}
+            options={filterOptions}
+            autoWidth
+            quiet
+          />
+        </div>
+        <Search bind:value={searchTerm} placeholder="Search plugins" />
+      </div>
+    </div>
+    {#if filteredPlugins?.length}
+      <Layout noPadding gap="S">
+        {#each filteredPlugins as plugin (plugin._id)}
+          <PluginRow {plugin} />
+        {/each}
+      </Layout>
+    {/if}
+  </Layout>
+</Layout>
+
+<Modal bind:this={modal}>
+  <AddPluginModal />
+</Modal>
+
+<style>
+  .filters {
+    display: flex;
+    gap: var(--spacing-xl);
+  }
+  .controls {
+    display: flex;
+    gap: var(--spacing-xl);
+    justify-content: space-between;
+  }
+  .controls :global(.spectrum-Search) {
+    width: 200px;
+  }
+</style>
--- a/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
@ -16,6 +16,7 @@
    MenuItem,
    Icon,
    Helpers,
+    Modal,
  } from "@budibase/bbui"
  import OverviewTab from "../_components/OverviewTab.svelte"
  import SettingsTab from "../_components/SettingsTab.svelte"
@ -29,6 +30,7 @@
  import EditableIcon from "components/common/EditableIcon.svelte"
  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
  import HistoryTab from "components/portal/overview/automation/HistoryTab.svelte"
+  import ExportAppModal from "components/start/ExportAppModal.svelte"
  import { checkIncomingDeploymentStatus } from "components/deploy/utils"
  import { onDestroy, onMount } from "svelte"

@ -38,7 +40,9 @@
  let loaded = false
  let deletionModal
  let unpublishModal
+  let exportModal
  let appName = ""
+  let published

  // App
  $: filteredApps = $apps.filter(app => app.devId === application)
@ -140,11 +144,9 @@
    notifications.success("App ID copied to clipboard.")
  }

-  const exportApp = (app, opts = { published: false }) => {
-    const appName = encodeURIComponent(app.name)
-    const id = opts?.published ? app.prodId : app.devId
-    // always export the development version
-    window.location = `/api/backups/export?appId=${id}&appname=${appName}`
+  const exportApp = opts => {
+    published = opts.published
+    exportModal.show()
  }

  const unpublishApp = app => {
@ -206,6 +208,10 @@
  })
 </script>

+<Modal bind:this={exportModal} padding={false} width="600px">
+  <ExportAppModal app={selectedApp} {published} />
+</Modal>
+
 <span class="overview-wrap">
  <Page wide noPadding>
    {#await promise}
@ -269,14 +275,14 @@
                <Icon hoverable name="More" />
              </span>
              <MenuItem
-                on:click={() => exportApp(selectedApp, { published: false })}
+                on:click={() => exportApp({ published: false })}
                icon="DownloadFromCloud"
              >
                Export latest
              </MenuItem>
              {#if isPublished}
                <MenuItem
-                  on:click={() => exportApp(selectedApp, { published: true })}
+                  on:click={() => exportApp({ published: true })}
                  icon="DownloadFromCloudOutline"
                >
                  Export published
--- a/packages/builder/src/pages/builder/portal/settings/organisation.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/organisation.svelte
@ -88,14 +88,14 @@
      <Heading size="S">Information</Heading>
      <Body size="S">Here you can update your logo and organization name.</Body>
    </Layout>
-    <div class="fields">
-      <div class="field">
+    <div className="fields">
+      <div className="field">
        <Label size="L">Org. name</Label>
        <Input thin bind:value={$values.company} />
      </div>
-      <div class="field logo">
+      <div className="field logo">
        <Label size="L">Logo</Label>
-        <div class="file">
+        <div className="file">
          <Dropzone
            value={[$values.logo]}
            on:change={e => {
@ -115,8 +115,8 @@
        <Heading size="S">Platform</Heading>
        <Body size="S">Here you can set up general platform settings.</Body>
      </Layout>
-      <div class="fields">
-        <div class="field">
+      <div className="fields">
+        <div className="field">
          <Label
            size="L"
            tooltip={"Update the Platform URL to match your Budibase web URL. This keeps email templates and authentication configs up to date."}
@ -150,15 +150,18 @@
    display: grid;
    grid-gap: var(--spacing-m);
  }
+
  .field {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-gap: var(--spacing-l);
    align-items: center;
  }
+
  .file {
    max-width: 30ch;
  }
+
  .logo {
    align-items: start;
  }
--- a/packages/builder/src/stores/backend/datasources.js
+++ b/packages/builder/src/stores/backend/datasources.js
@ -62,8 +62,11 @@ export function createDatasourcesStore() {
    unselect: () => {
      update(state => ({ ...state, selected: null }))
    },
-    updateSchema: async datasource => {
-      const response = await API.buildDatasourceSchema(datasource?._id)
+    updateSchema: async (datasource, tablesFilter) => {
+      const response = await API.buildDatasourceSchema({
+        datasourceId: datasource?._id,
+        tablesFilter,
+      })
      return await updateDatasource(response)
    },
    save: async (body, fetchSchema = false) => {
--- a/packages/builder/src/stores/portal/index.js
+++ b/packages/builder/src/stores/portal/index.js
@ -8,3 +8,4 @@ export { oidc } from "./oidc"
 export { templates } from "./templates"
 export { licensing } from "./licensing"
 export { groups } from "./groups"
+export { plugins } from "./plugins"
--- a/packages/builder/src/stores/portal/plugins.js
+++ b/packages/builder/src/stores/portal/plugins.js
@ -0,0 +1,77 @@
+import { writable } from "svelte/store"
+import { API } from "api"
+import { PluginSource } from "constants"
+
+export function createPluginsStore() {
+  const { subscribe, set, update } = writable([])
+
+  async function load() {
+    const plugins = await API.getPlugins()
+    set(plugins)
+  }
+
+  async function deletePlugin(pluginId) {
+    await API.deletePlugin(pluginId)
+    update(state => {
+      state = state.filter(existing => existing._id !== pluginId)
+      return state
+    })
+  }
+
+  async function createPlugin(source, url, auth = null) {
+    let pluginData = {
+      source,
+      url,
+    }
+
+    switch (source) {
+      case PluginSource.URL:
+        pluginData.headers = auth
+        break
+      case PluginSource.GITHUB:
+        pluginData.githubToken = auth
+        break
+    }
+
+    let res = await API.createPlugin(pluginData)
+
+    let newPlugin = res.plugins[0]
+    update(state => {
+      const currentIdx = state.findIndex(plugin => plugin._id === newPlugin._id)
+      if (currentIdx >= 0) {
+        state.splice(currentIdx, 1, newPlugin)
+      } else {
+        state.push(newPlugin)
+      }
+      return state
+    })
+  }
+
+  async function uploadPlugin(file) {
+    if (!file) {
+      return
+    }
+    let data = new FormData()
+    data.append("file", file)
+    let resp = await API.uploadPlugin(data)
+    let newPlugin = resp.plugins[0]
+    update(state => {
+      const currentIdx = state.findIndex(plugin => plugin._id === newPlugin._id)
+      if (currentIdx >= 0) {
+        state.splice(currentIdx, 1, newPlugin)
+      } else {
+        state.push(newPlugin)
+      }
+      return state
+    })
+  }
+  return {
+    subscribe,
+    load,
+    createPlugin,
+    deletePlugin,
+    uploadPlugin,
+  }
+}
+
+export const plugins = createPluginsStore()
--- a/packages/builder/vite.config.js
+++ b/packages/builder/vite.config.js
@ -1,15 +1,23 @@
 import { svelte } from "@sveltejs/vite-plugin-svelte"
 import replace from "@rollup/plugin-replace"
+import { defineConfig, loadEnv } from "vite"

 import path from "path"

-export default ({ mode }) => {
+export default defineConfig(({ mode }) => {
  const isProduction = mode === "production"
+  const env = loadEnv(mode, process.cwd())
  return {
    server: {
      fs: {
        strict: false,
      },
+      hmr: {
+        protocol: env.VITE_HMR_PROTOCOL || "ws",
+        clientPort: env.VITE_HMR_CLIENT_PORT || 3000,
+        path: env.VITE_HMR_PATH || "/",
+      },
+      port: 3000,
    },
    base: "/builder/",
    build: {
@ -79,4 +87,4 @@ export default ({ mode }) => {
      ],
    },
  }
-}
+})
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@ -967,6 +967,11 @@
    debug "^3.1.0"
    lodash.once "^4.1.1"

+"@esbuild/linux-loong64@0.14.54":
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz#de2a4be678bd4d0d1ffbb86e6de779cde5999028"
+  integrity sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==
+
 "@hapi/hoek@^9.0.0":
  version "9.2.1"
  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.2.1.tgz#9551142a1980503752536b5050fd99f4a7f13b17"
@ -1215,10 +1220,10 @@
    estree-walker "^1.0.1"
    picomatch "^2.2.2"

-"@rollup/pluginutils@^4.1.1":
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.1.tgz#1d4da86dd4eded15656a57d933fda2b9a08d47ec"
-  integrity sha512-clDjivHqWGXi7u+0d2r2sBi4Ie6VLEAzWMIkvJLnDmxoOhBYOTfzGbOQBA32THHm11/LiJbd01tJUpJsbshSWQ==
+"@rollup/pluginutils@^4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
+  integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==
  dependencies:
    estree-walker "^2.0.1"
    picomatch "^2.2.2"
@ -1350,17 +1355,17 @@
  resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-4.3.0.tgz#03ddf67d3aa8a9a4cb0edbbd259465c9ced7e70d"
  integrity sha512-ZQ2XAhgu4G9yBeXQNDAz07Z8oZNnMt5o9vzf/mpBA7Teb/JI+8qXp2wt8D245SzmtNlFkG/bzRYvQc0scgZeCQ==

-"@sveltejs/vite-plugin-svelte@1.0.0-next.19":
-  version "1.0.0-next.19"
-  resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.19.tgz#9646abc2cd1982146db4bb341aafdb5f32f19dd2"
-  integrity sha512-q9hHkMzodScwDq64pNaWhekpj97vWg3wO9T0rqd8bC2EsrBQs2uD1qMJvDqlNd63AbO2uSJMGo+TQ0Xt2xgyYg==
+"@sveltejs/vite-plugin-svelte@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.1.tgz#7f468f03c933fcdfc60d4773671c73f33b9ef4d6"
+  integrity sha512-PorCgUounn0VXcpeJu+hOweZODKmGuLHsLomwqSj+p26IwjjGffmYQfVHtiTWq+NqaUuuHWWG7vPge6UFw4Aeg==
  dependencies:
-    "@rollup/pluginutils" "^4.1.1"
-    debug "^4.3.2"
-    kleur "^4.1.4"
-    magic-string "^0.25.7"
-    require-relative "^0.8.7"
-    svelte-hmr "^0.14.7"
+    "@rollup/pluginutils" "^4.2.1"
+    debug "^4.3.4"
+    deepmerge "^4.2.2"
+    kleur "^4.1.5"
+    magic-string "^0.26.2"
+    svelte-hmr "^0.14.12"

 "@testing-library/dom@^7.0.3":
  version "7.31.2"
@ -2493,6 +2498,13 @@ debug@^3.1.0:
  dependencies:
    ms "^2.1.1"

+debug@^4.3.4:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
 decamelize@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@ -2655,113 +2667,132 @@ error-ex@^1.3.1:
  dependencies:
    is-arrayish "^0.2.1"

-esbuild-android-arm64@0.13.14:
-  version "0.13.14"
-  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.13.14.tgz#c85083ece26be3d67e6c720e088968a98409e023"
-  integrity sha512-Q+Xhfp827r+ma8/DJgpMRUbDZfefsk13oePFEXEIJ4gxFbNv5+vyiYXYuKm43/+++EJXpnaYmEnu4hAKbAWYbA==
+esbuild-android-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.54.tgz#505f41832884313bbaffb27704b8bcaa2d8616be"
+  integrity sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ==

-esbuild-darwin-64@0.13.14:
-  version "0.13.14"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.13.14.tgz#8e4e237ad847cc54a1d3a5caee26a746b9f0b81f"
-  integrity sha512-YmOhRns6QBNSjpVdTahi/yZ8dscx9ai7a6OY6z5ACgOuQuaQ2Qk2qgJ0/siZ6LgD0gJFMV8UINFV5oky5TFNQQ==
+esbuild-android-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.54.tgz#8ce69d7caba49646e009968fe5754a21a9871771"
+  integrity sha512-F9E+/QDi9sSkLaClO8SOV6etqPd+5DgJje1F9lOWoNncDdOBL2YF59IhsWATSt0TLZbYCf3pNlTHvVV5VfHdvg==

-esbuild-darwin-arm64@0.13.14:
-  version "0.13.14"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.14.tgz#b3b5ebd40b2cb06ee0f6fb342dd4bdcca54ad273"
-  integrity sha512-Lp00VTli2jqZghSa68fx3fEFCPsO1hK59RMo1PRap5RUjhf55OmaZTZYnCDI0FVlCtt+gBwX5qwFt4lc6tI1xg==
+esbuild-darwin-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.54.tgz#24ba67b9a8cb890a3c08d9018f887cc221cdda25"
+  integrity sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug==

-esbuild-freebsd-64@0.13.14:
-  version "0.13.14"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.14.tgz#175ecb2fa8141428cf70ea2d5f4c27534bad53e0"
-  integrity sha512-BKosI3jtvTfnmsCW37B1TyxMUjkRWKqopR0CE9AF2ratdpkxdR24Vpe3gLKNyWiZ7BE96/SO5/YfhbPUzY8wKw==
+esbuild-darwin-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.54.tgz#3f7cdb78888ee05e488d250a2bdaab1fa671bf73"
+  integrity sha512-OPafJHD2oUPyvJMrsCvDGkRrVCar5aVyHfWGQzY1dWnzErjrDuSETxwA2HSsyg2jORLY8yBfzc1MIpUkXlctmw==

-esbuild-freebsd-arm64@0.13.14:
-  version "0.13.14"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.14.tgz#a7d64e41d1fa581f8db7775e5200f18e67d70c4d"
-  integrity sha512-yd2uh0yf+fWv5114+SYTl4/1oDWtr4nN5Op+PGxAkMqHfYfLjFKpcxwCo/QOS/0NWqPVE8O41IYZlFhbEN2B8Q==
+esbuild-freebsd-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.54.tgz#09250f997a56ed4650f3e1979c905ffc40bbe94d"
+  integrity sha512-OKwd4gmwHqOTp4mOGZKe/XUlbDJ4Q9TjX0hMPIDBUWWu/kwhBAudJdBoxnjNf9ocIB6GN6CPowYpR/hRCbSYAg==

-esbuild-linux-32@0.13.14:
-  version "0.13.14"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.13.14.tgz#14bdd4f6b6cfd35c65c835894651ba335c2117da"
-  integrity sha512-a8rOnS1oWSfkkYWXoD2yXNV4BdbDKA7PNVQ1klqkY9SoSApL7io66w5H44mTLsfyw7G6Z2vLlaLI2nz9MMAowA==
+esbuild-freebsd-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.54.tgz#bafb46ed04fc5f97cbdb016d86947a79579f8e48"
+  integrity sha512-sFwueGr7OvIFiQT6WeG0jRLjkjdqWWSrfbVwZp8iMP+8UHEHRBvlaxL6IuKNDwAozNUmbb8nIMXa7oAOARGs1Q==

-esbuild-linux-64@0.13.14:
-  version "0.13.14"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.13.14.tgz#7fd56851b2982fdd0cd8447ee9858c2c5711708a"
-  integrity sha512-yPZSoMs9W2MC3Dw+6kflKt5FfQm6Dicex9dGIr1OlHRsn3Hm7yGMUTctlkW53KknnZdOdcdd5upxvbxqymczVQ==
+esbuild-linux-32@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.54.tgz#e2a8c4a8efdc355405325033fcebeb941f781fe5"
+  integrity sha512-1ZuY+JDI//WmklKlBgJnglpUL1owm2OX+8E1syCD6UAxcMM/XoWd76OHSjl/0MR0LisSAXDqgjT3uJqT67O3qw==

-esbuild-linux-arm64@0.13.14:
-  version "0.13.14"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.14.tgz#a55634d70679ba509adeafd68eebb9fd1ec5af6c"
-  integrity sha512-Lvo391ln9PzC334e+jJ2S0Rt0cxP47eoH5gFyv/E8HhOnEJTvm7A+RRnMjjHnejELacTTfYgFGQYPjLsi/jObQ==
+esbuild-linux-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz#de5fdba1c95666cf72369f52b40b03be71226652"
+  integrity sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==

-esbuild-linux-arm@0.13.14:
-  version "0.13.14"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.13.14.tgz#bb96a99677e608b31ff61f37564326d38e846ca2"
-  integrity sha512-8chZE4pkKRvJ/M/iwsNQ1KqsRg2RyU5eT/x2flNt/f8F2TVrDreR7I0HEeCR50wLla3B1C3wTIOzQBmjuc6uWg==
+esbuild-linux-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.54.tgz#dae4cd42ae9787468b6a5c158da4c84e83b0ce8b"
+  integrity sha512-WL71L+0Rwv+Gv/HTmxTEmpv0UgmxYa5ftZILVi2QmZBgX3q7+tDeOQNqGtdXSdsL8TQi1vIaVFHUPDe0O0kdig==

-esbuild-linux-mips64le@0.13.14:
-  version "0.13.14"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.14.tgz#6a55362a8fd1e593dea2ecc41877beed8b8184b9"
-  integrity sha512-MZhgxbmrWbpY3TOE029O6l5tokG9+Yoj2hW7vdit/d/VnmneqeGrSHADuDL6qXM8L5jaCiaivb4VhsyVCpdAbQ==
+esbuild-linux-arm@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.54.tgz#a2c1dff6d0f21dbe8fc6998a122675533ddfcd59"
+  integrity sha512-qqz/SjemQhVMTnvcLGoLOdFpCYbz4v4fUo+TfsWG+1aOu70/80RV6bgNpR2JCrppV2moUQkww+6bWxXRL9YMGw==

-esbuild-linux-ppc64le@0.13.14:
-  version "0.13.14"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.14.tgz#9e0048587ece0a7f184ab147f20d077098045e7f"
-  integrity sha512-un7KMwS7fX1Un6BjfSZxTT8L5cV/8Uf4SAhM7WYy2XF8o8TI+uRxxD03svZnRNIPsN2J5cl6qV4n7Iwz+yhhVw==
+esbuild-linux-mips64le@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.54.tgz#d9918e9e4cb972f8d6dae8e8655bf9ee131eda34"
+  integrity sha512-qTHGQB8D1etd0u1+sB6p0ikLKRVuCWhYQhAHRPkO+OF3I/iSlTKNNS0Lh2Oc0g0UFGguaFZZiPJdJey3AGpAlw==

-esbuild-netbsd-64@0.13.14:
-  version "0.13.14"
-  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.14.tgz#dcab16a4bbcfa16e2e8535dadc5f64fdc891c63b"
-  integrity sha512-5ekKx/YbOmmlTeNxBjh38Uh5TGn5C4uyqN17i67k18pS3J+U2hTVD7rCxcFcRS1AjNWumkVL3jWqYXadFwMS0Q==
+esbuild-linux-ppc64le@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.54.tgz#3f9a0f6d41073fb1a640680845c7de52995f137e"
+  integrity sha512-j3OMlzHiqwZBDPRCDFKcx595XVfOfOnv68Ax3U4UKZ3MTYQB5Yz3X1mn5GnodEVYzhtZgxEBidLWeIs8FDSfrQ==

-esbuild-openbsd-64@0.13.14:
-  version "0.13.14"
-  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.14.tgz#3c7453b155ebb68dc34d5aec3bd6505337bdda08"
-  integrity sha512-9bzvwewHjct2Cv5XcVoE1yW5YTW12Sk838EYfA46abgnhxGoFSD1mFcaztp5HHC43AsF+hQxbSFG/RilONARUA==
+esbuild-linux-riscv64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.54.tgz#618853c028178a61837bc799d2013d4695e451c8"
+  integrity sha512-y7Vt7Wl9dkOGZjxQZnDAqqn+XOqFD7IMWiewY5SPlNlzMX39ocPQlOaoxvT4FllA5viyV26/QzHtvTjVNOxHZg==

-esbuild-sunos-64@0.13.14:
-  version "0.13.14"
-  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.13.14.tgz#85addf5fef6b5db154a955d4f2e88953359d75ce"
-  integrity sha512-mjMrZB76M6FmoiTvj/RGWilrioR7gVwtFBRVugr9qLarXMIU1W/pQx+ieEOtflrW61xo8w1fcxyHsVVGRvoQ0w==
+esbuild-linux-s390x@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.54.tgz#d1885c4c5a76bbb5a0fe182e2c8c60eb9e29f2a6"
+  integrity sha512-zaHpW9dziAsi7lRcyV4r8dhfG1qBidQWUXweUjnw+lliChJqQr+6XD71K41oEIC3Mx1KStovEmlzm+MkGZHnHA==

-esbuild-windows-32@0.13.14:
-  version "0.13.14"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.13.14.tgz#f77f98f30a5c636c44db2428ecdf9bcbbaedb1a7"
-  integrity sha512-GZa6mrx2rgfbH/5uHg0Rdw50TuOKbdoKCpEBitzmG5tsXBdce+cOL+iFO5joZc6fDVCLW3Y6tjxmSXRk/v20Hg==
+esbuild-netbsd-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.54.tgz#69ae917a2ff241b7df1dbf22baf04bd330349e81"
+  integrity sha512-PR01lmIMnfJTgeU9VJTDY9ZerDWVFIUzAtJuDHwwceppW7cQWjBBqP48NdeRtoP04/AtO9a7w3viI+PIDr6d+w==

-esbuild-windows-64@0.13.14:
-  version "0.13.14"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.13.14.tgz#bc778674c40d65150d12385e0f23eb3a0badbd0d"
-  integrity sha512-Lsgqah24bT7ClHjLp/Pj3A9wxjhIAJyWQcrOV4jqXAFikmrp2CspA8IkJgw7HFjx6QrJuhpcKVbCAe/xw0i2yw==
+esbuild-openbsd-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.54.tgz#db4c8495287a350a6790de22edea247a57c5d47b"
+  integrity sha512-Qyk7ikT2o7Wu76UsvvDS5q0amJvmRzDyVlL0qf5VLsLchjCa1+IAvd8kTBgUxD7VBUUVgItLkk609ZHUc1oCaw==

-esbuild-windows-arm64@0.13.14:
-  version "0.13.14"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.14.tgz#91a8dad35ab2c4dd27cd83860742955b25a354d7"
-  integrity sha512-KP8FHVlWGhM7nzYtURsGnskXb/cBCPTfj0gOKfjKq2tHtYnhDZywsUG57nk7TKhhK0fL11LcejHG3LRW9RF/9A==
+esbuild-sunos-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.54.tgz#54287ee3da73d3844b721c21bc80c1dc7e1bf7da"
+  integrity sha512-28GZ24KmMSeKi5ueWzMcco6EBHStL3B6ubM7M51RmPwXQGLe0teBGJocmWhgwccA1GeFXqxzILIxXpHbl9Q/Kw==

-esbuild@^0.13.2:
-  version "0.13.14"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.13.14.tgz#98a3f7f42809abdc2b57c84565d0f713382dc1a5"
-  integrity sha512-xu4D+1ji9x53ocuomcY+KOrwAnWzhBu/wTEjpdgZ8I1c8i5vboYIeigMdzgY1UowYBKa2vZgVgUB32bu7gkxeg==
+esbuild-windows-32@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.54.tgz#f8aaf9a5667630b40f0fb3aa37bf01bbd340ce31"
+  integrity sha512-T+rdZW19ql9MjS7pixmZYVObd9G7kcaZo+sETqNH4RCkuuYSuv9AGHUVnPoP9hhuE1WM1ZimHz1CIBHBboLU7w==
+
+esbuild-windows-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.54.tgz#bf54b51bd3e9b0f1886ffdb224a4176031ea0af4"
+  integrity sha512-AoHTRBUuYwXtZhjXZbA1pGfTo8cJo3vZIcWGLiUcTNgHpJJMC1rVA44ZereBHMJtotyN71S8Qw0npiCIkW96cQ==
+
+esbuild-windows-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.54.tgz#937d15675a15e4b0e4fafdbaa3a01a776a2be982"
+  integrity sha512-M0kuUvXhot1zOISQGXwWn6YtS+Y/1RT9WrVIOywZnJHo3jCDyewAc79aKNQWFCQm+xNHVTq9h8dZKvygoXQQRg==
+
+esbuild@^0.14.47:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.54.tgz#8b44dcf2b0f1a66fc22459943dccf477535e9aa2"
+  integrity sha512-Cy9llcy8DvET5uznocPyqL3BFRrFXSVqbgpMJ9Wz8oVjZlh/zUSNbPRbov0VX7VxN2JH1Oa0uNxZ7eLRb62pJA==
  optionalDependencies:
-    esbuild-android-arm64 "0.13.14"
-    esbuild-darwin-64 "0.13.14"
-    esbuild-darwin-arm64 "0.13.14"
-    esbuild-freebsd-64 "0.13.14"
-    esbuild-freebsd-arm64 "0.13.14"
-    esbuild-linux-32 "0.13.14"
-    esbuild-linux-64 "0.13.14"
-    esbuild-linux-arm "0.13.14"
-    esbuild-linux-arm64 "0.13.14"
-    esbuild-linux-mips64le "0.13.14"
-    esbuild-linux-ppc64le "0.13.14"
-    esbuild-netbsd-64 "0.13.14"
-    esbuild-openbsd-64 "0.13.14"
-    esbuild-sunos-64 "0.13.14"
-    esbuild-windows-32 "0.13.14"
-    esbuild-windows-64 "0.13.14"
-    esbuild-windows-arm64 "0.13.14"
+    "@esbuild/linux-loong64" "0.14.54"
+    esbuild-android-64 "0.14.54"
+    esbuild-android-arm64 "0.14.54"
+    esbuild-darwin-64 "0.14.54"
+    esbuild-darwin-arm64 "0.14.54"
+    esbuild-freebsd-64 "0.14.54"
+    esbuild-freebsd-arm64 "0.14.54"
+    esbuild-linux-32 "0.14.54"
+    esbuild-linux-64 "0.14.54"
+    esbuild-linux-arm "0.14.54"
+    esbuild-linux-arm64 "0.14.54"
+    esbuild-linux-mips64le "0.14.54"
+    esbuild-linux-ppc64le "0.14.54"
+    esbuild-linux-riscv64 "0.14.54"
+    esbuild-linux-s390x "0.14.54"
+    esbuild-netbsd-64 "0.14.54"
+    esbuild-openbsd-64 "0.14.54"
+    esbuild-sunos-64 "0.14.54"
+    esbuild-windows-32 "0.14.54"
+    esbuild-windows-64 "0.14.54"
+    esbuild-windows-arm64 "0.14.54"

 escalade@^3.1.1:
  version "3.1.1"
@ -3519,6 +3550,13 @@ is-core-module@^2.2.0:
  dependencies:
    has "^1.0.3"

+is-core-module@^2.9.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.10.0.tgz#9012ede0a91c69587e647514e1d5277019e728ed"
+  integrity sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==
+  dependencies:
+    has "^1.0.3"
+
 is-data-descriptor@^0.1.4:
  version "0.1.4"
  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
@ -4285,10 +4323,10 @@ kleur@^3.0.3:
  resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==

-kleur@^4.1.4:
-  version "4.1.4"
-  resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.4.tgz#8c202987d7e577766d039a8cd461934c01cda04d"
-  integrity sha512-8QADVssbrFjivHWQU7KkMgptGTl6WAcSdlbBPY4uNF+mWr6DGcKrvY2w4FQJoXch7+fKMjj0dRrL75vk3k23OA==
+kleur@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
+  integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==

 lazy-ass@1.6.0, lazy-ass@^1.6.0:
  version "1.6.0"
@ -4425,6 +4463,13 @@ magic-string@^0.25.7:
  dependencies:
    sourcemap-codec "^1.4.4"

+magic-string@^0.26.2:
+  version "0.26.2"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.26.2.tgz#5331700e4158cd6befda738bb6b0c7b93c0d4432"
+  integrity sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A==
+  dependencies:
+    sourcemap-codec "^1.4.8"
+
 make-dir@^3.0.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
@ -4615,10 +4660,10 @@ nanoid@^2.1.0:
  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
  integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==

-nanoid@^3.1.30:
-  version "3.1.30"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362"
-  integrity sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==
+nanoid@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
+  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==

 nanomatch@^1.2.9:
  version "1.2.13"
@ -4887,7 +4932,7 @@ path-key@^3.0.0, path-key@^3.1.0:
  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==

-path-parse@^1.0.6:
+path-parse@^1.0.6, path-parse@^1.0.7:
  version "1.0.7"
  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
@ -4948,14 +4993,14 @@ 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=

-postcss@^8.3.8:
-  version "8.3.11"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.11.tgz#c3beca7ea811cd5e1c4a3ec6d2e7599ef1f8f858"
-  integrity sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA==
+postcss@^8.4.16:
+  version "8.4.16"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.16.tgz#33a1d675fac39941f5f445db0de4db2b6e01d43c"
+  integrity sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==
  dependencies:
-    nanoid "^3.1.30"
+    nanoid "^3.3.4"
    picocolors "^1.0.0"
-    source-map-js "^0.6.2"
+    source-map-js "^1.0.2"

 posthog-js@1.4.5:
  version "1.4.5"
@ -5184,11 +5229,6 @@ 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-relative@^0.8.7:
-  version "0.8.7"
-  resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
-  integrity sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=
-
 resolve-cwd@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
@ -5206,7 +5246,7 @@ resolve-url@^0.2.1:
  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
  integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=

-resolve@^1.10.0, resolve@^1.14.2, resolve@^1.18.1, resolve@^1.20.0:
+resolve@^1.10.0, resolve@^1.14.2, resolve@^1.18.1:
  version "1.20.0"
  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
  integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@ -5214,6 +5254,15 @@ resolve@^1.10.0, resolve@^1.14.2, resolve@^1.18.1, resolve@^1.20.0:
    is-core-module "^2.2.0"
    path-parse "^1.0.6"

+resolve@^1.22.1:
+  version "1.22.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
+  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 restore-cursor@^3.1.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
@ -5262,7 +5311,14 @@ rollup-pluginutils@^2.8.2:
  dependencies:
    estree-walker "^0.6.1"

-rollup@^2.44.0, rollup@^2.57.0:
+"rollup@>=2.75.6 <2.77.0 || ~2.77.0":
+  version "2.77.3"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.77.3.tgz#8f00418d3a2740036e15deb653bed1a90ee0cc12"
+  integrity sha512-/qxNTG7FbmefJWoeeYJFbHehJ2HNWnjkAFRKzWN/45eNBBF/r8lo992CwcJXEzyVxs5FmfId+vTSTQDb+bxA+g==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+rollup@^2.44.0:
  version "2.60.0"
  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.60.0.tgz#4ee60ab7bdd0356763f87d7099f413e5460fc193"
  integrity sha512-cHdv9GWd58v58rdseC8e8XIaPUo8a9cgZpnCMMDGZFDZKEODOiPPEQFXLriWr/TjXzhPPmG5bkAztPsOARIcGQ==
@ -5475,10 +5531,10 @@ snapdragon@^0.8.1:
    source-map-resolve "^0.5.0"
    use "^3.1.0"

-source-map-js@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
-  integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
+source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==

 source-map-resolve@^0.5.0:
  version "0.5.3"
@ -5527,7 +5583,7 @@ source-map@^0.7.3:
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==

-sourcemap-codec@^1.4.4:
+sourcemap-codec@^1.4.4, sourcemap-codec@^1.4.8:
  version "1.4.8"
  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
@ -5707,15 +5763,20 @@ supports-hyperlinks@^2.0.0:
    has-flag "^4.0.0"
    supports-color "^7.0.0"

+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
 svelte-dnd-action@^0.9.8:
  version "0.9.12"
  resolved "https://registry.yarnpkg.com/svelte-dnd-action/-/svelte-dnd-action-0.9.12.tgz#78cf33097986488c6d069eca517af473cd998730"
  integrity sha512-GlXIB3/56IMR5A0+qUx+FX7Q7n8uCAIeuYdgSBmn9iOlxWc+mgM8P1kNwAKCMSTdQ4IQETVQILNgWVY1KIFzsg==

-svelte-hmr@^0.14.7:
-  version "0.14.7"
-  resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.7.tgz#7fa8261c7b225d9409f0a86f3b9ea5c3ca6f6607"
-  integrity sha512-pDrzgcWSoMaK6AJkBWkmgIsecW0GChxYZSZieIYfCP0v2oPyx2CYU/zm7TBIcjLVUPP714WxmViE9Thht4etog==
+svelte-hmr@^0.14.12:
+  version "0.14.12"
+  resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.12.tgz#a127aec02f1896500b10148b2d4d21ddde39973f"
+  integrity sha512-4QSW/VvXuqVcFZ+RhxiR8/newmwOCTlbYIezvkeN6302YFRE8cXy0naamHcjz8Y9Ce3ITTZtrHrIL0AGfyo61w==

 svelte-jester@^1.3.2:
  version "1.8.2"
@ -6081,15 +6142,15 @@ verror@1.10.0:
    core-util-is "1.0.2"
    extsprintf "^1.2.0"

-vite@^2.1.5:
-  version "2.6.14"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-2.6.14.tgz#35c09a15e4df823410819a2a239ab11efb186271"
-  integrity sha512-2HA9xGyi+EhY2MXo0+A2dRsqsAG3eFNEVIo12olkWhOmc8LfiM+eMdrXf+Ruje9gdXgvSqjLI9freec1RUM5EA==
+vite@^3.0.8:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-3.0.8.tgz#aa095ad8e3e5da46d9ec7e878f262678965d6531"
+  integrity sha512-AOZ4eN7mrkJiOLuw8IA7piS4IdOQyQCA81GxGsAQvAZzMRi9ZwGB3TOaYsj4uLAWK46T5L4AfQ6InNGlxX30IQ==
  dependencies:
-    esbuild "^0.13.2"
-    postcss "^8.3.8"
-    resolve "^1.20.0"
-    rollup "^2.57.0"
+    esbuild "^0.14.47"
+    postcss "^8.4.16"
+    resolve "^1.22.1"
+    rollup ">=2.75.6 <2.77.0 || ~2.77.0"
  optionalDependencies:
    fsevents "~2.3.2"

--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/cli",
-  "version": "1.2.59-alpha.0",
+  "version": "1.3.15-alpha.9",
  "description": "Budibase CLI, for developers, self hosting and migrations.",
  "main": "src/index.js",
  "bin": {
@ -26,14 +26,18 @@
    "outputPath": "build"
  },
  "dependencies": {
-    "@budibase/backend-core": "1.2.58-alpha.7",
+    "@budibase/backend-core": "1.3.15-alpha.9",
+    "@budibase/string-templates": "1.3.15-alpha.9",
+    "@budibase/types": "1.3.15-alpha.9",
    "axios": "0.21.2",
    "chalk": "4.1.0",
    "cli-progress": "3.11.2",
    "commander": "7.1.0",
    "docker-compose": "0.23.6",
    "dotenv": "16.0.1",
+    "download": "8.0.0",
    "inquirer": "8.0.0",
+    "joi": "17.6.0",
    "lookpath": "1.1.0",
    "node-fetch": "2",
    "pkg": "5.7.0",
--- a/packages/cli/src/constants.js
+++ b/packages/cli/src/constants.js
@ -3,6 +3,7 @@ exports.CommandWords = {
  HOSTING: "hosting",
  ANALYTICS: "analytics",
  HELP: "help",
+  PLUGIN: "plugins",
 }

 exports.InitTypes = {
--- a/packages/cli/src/environment.js
+++ b/packages/cli/src/environment.js
@ -0,0 +1,2 @@
+process.env.NO_JS = "1"
+process.env.JS_BCRYPT = "1"
--- a/packages/cli/src/exec.js
+++ b/packages/cli/src/exec.js
@ -0,0 +1,27 @@
+const util = require("util")
+const exec = util.promisify(require("child_process").exec)
+
+exports.exec = async (command, dir = "./") => {
+  const { stdout } = await exec(command, { cwd: dir })
+  return stdout
+}
+
+exports.utilityInstalled = async utilName => {
+  try {
+    await exports.exec(`${utilName} --version`)
+    return true
+  } catch (err) {
+    return false
+  }
+}
+
+exports.runPkgCommand = async (command, dir = "./") => {
+  const yarn = await exports.utilityInstalled("yarn")
+  const npm = await exports.utilityInstalled("npm")
+  if (!yarn && !npm) {
+    throw new Error("Must have yarn or npm installed to run build.")
+  }
+  const npmCmd = command === "install" ? `npm ${command}` : `npm run ${command}`
+  const cmd = yarn ? `yarn ${command}` : npmCmd
+  await exports.exec(cmd, dir)
+}
--- a/packages/cli/src/index.js
+++ b/packages/cli/src/index.js
@ -1,5 +1,6 @@
 #!/usr/bin/env node
 require("./prebuilds")
+require("./environment")
 const { getCommands } = require("./options")
 const { Command } = require("commander")
 const { getHelpDescription } = require("./utils")
--- a/packages/cli/src/options.js
+++ b/packages/cli/src/options.js
@ -1,7 +1,8 @@
 const analytics = require("./analytics")
 const hosting = require("./hosting")
 const backups = require("./backups")
+const plugins = require("./plugins")

 exports.getCommands = () => {
-  return [hosting.command, analytics.command, backups.command]
+  return [hosting.command, analytics.command, backups.command, plugins.command]
 }
--- a/Show more
+++ b/Show more