Merge branch 'develop' into prevent_space_in_url

# Conflicts: # packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
2021-08-05 20:11:55 +02:00 · 2021-08-05 20:11:55 +02:00 · aa1d214c4d
parent fe3b81e72d 23081268d0
commit aa1d214c4d
236 changed files with 3922 additions and 1210 deletions
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@ -0,0 +1,14 @@
+---
+name: Feature Request
+about: Request a new budibase feature or enhancement
+title: ''
+labels: enhancement
+assignees: ''
+
+---
+
+**Describe the feature request**
+A clear and concise description of what the feature request.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
--- a/README.md
+++ b/README.md
@ -57,7 +57,7 @@

 - **Open source and extensible.** Budibase is open-source - licensed as GPL v3. This should fill you with confidence that Budibase will always be around. You can also code against Budibase or fork it and make changes as you please, providing a developer-friendly experience.

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

 - **Design and build apps with powerful pre-made components.** Budibase comes out of the box with beautifully designed, powerful components which you can use like building blocks to build your UI. We also expose a lot of your favourite CSS styling options so you can go that extra creative mile. [Request new component](https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas).

--- a/hosting/envoy.dev.yaml.hbs
+++ b/hosting/envoy.dev.yaml.hbs
@ -26,10 +26,18 @@ static_resources:
                  cluster: couchdb-service
                  prefix_rewrite: "/"

+              - match: { prefix: "/api/system/" }
+                route:
+                  cluster: worker-dev
+
              - match: { prefix: "/api/admin/" }
                route:
                  cluster: worker-dev

+              - match: { prefix: "/api/global/" }
+                route:
+                  cluster: worker-dev
+
              - match: { prefix: "/api/" }
                route:
                  cluster: server-dev
--- a/hosting/envoy.yaml
+++ b/hosting/envoy.yaml
@ -37,11 +37,19 @@ static_resources:
                route:
                  cluster: app-service

-              # special case for worker admin API
+              # special cases for worker admin (deprecated), global and system API
+              - match: { prefix: "/api/global/" }
+                route:
+                  cluster: worker-service
+
              - match: { prefix: "/api/admin/" }
                route:
                  cluster: worker-service

+              - match: { prefix: "/api/system/" }
+                route:
+                  cluster: worker-service
+
              - match: { path: "/" }
                route:
                  cluster: app-service
--- a/i18n/README.id.md
+++ b/i18n/README.id.md
@ -8,10 +8,10 @@
 </h1>

 <h3 align="center">
-  Membangun, mengotomatisasi dan hosting sendiri aplikasi internal dalam hitungan menit
+  Membangun, mengotomatisasi dan <i>hosting</i> sendiri aplikasi internal dalam hitungan menit
 </h3>
 <p align="center">
-  Budibase adalah sebuah platform low-code dengan sumber terbuka, bertujuan untuk membantu para developer dan professional IT, untuk membangun, mengotomatisasi, dan mengirimkan aplikasi internal di infrastruktur sendiri dalam waktu hitungan menit.
+  Budibase adalah sebuah platform <i>low-code</i> dengan sumber terbuka, bertujuan untuk membantu para <i>developer</i> dan professional IT, untuk membangun, mengotomatisasi, dan mengirimkan aplikasi internal di infrastruktur sendiri dalam waktu hitungan menit.
 </p>

 <h3 align="center">
@ -39,7 +39,7 @@
 </p>

 <h3 align="center">
-  <a href="https://docs.budibase.com/getting-started">Mari mulai</a>
+  <a href="https://docs.budibase.com/getting-started">Memulai</a>
  <span> · </span>
  <a href="https://docs.budibase.com">Dokumentasi</a>
  <span> · </span>
@ -53,17 +53,17 @@
 <br /><br />
 ## ✨ Fitur-fitur

- **Membangun dan mengirimkan software nyata.** Tidak seperti platform lain, dengan Budibase Anda membuat dan mengirimkan aplikasi-aplikasi satu halaman. Aplikasi-aplikasi Budibase memiliki kinerja yang matang dan dapat dirancang secara responsif, memberikan pengalaman yang menyenangkan bagi pengguna.
+- **Membangun dan mengirimkan perangkat lunak sebenarnya .** Tidak seperti platform lain, dengan Budibase Anda membuat dan mengirimkan aplikasi-aplikasi satu halaman. Aplikasi-aplikasi Budibase memiliki kinerja yang matang dan dapat dirancang secara responsif, memberikan pengalaman yang menyenangkan bagi pengguna.

- **Sumber terbuka dan dapat dikembangkan.** Budibase adalah platform dengan sumber terbuka - dilisensikan sebagai GPL v3. Ini akan membuat Anda yakin bahwa Budibase akan selalu ada. Anda juga dapat berkontribusi terhadap kode Budibase atau melakukan fork dan membuat perubahan sesuka Anda, memberikan pengalaman yang ramah developer.
+- **Sumber terbuka dan dapat dikembangkan.** Budibase adalah platform dengan sumber terbuka - dilisensikan sebagai GPL v3. Ini akan membuat Anda yakin bahwa Budibase akan selalu ada. Anda juga dapat berkontribusi terhadap kode Budibase atau melakukan <i>fork</i> dan membuat perubahan sesuka Anda, memberikan pengalaman yang ramah developer.

- **Muat data atau mulai dari awal.** Budibase menarik data dari berbagai sumber, termasuk MongoDB, CouchDB, PostgreSQL, mySQL, Airtable, S3, DyanmoDB, atau REST API. Dan tidak seperti platform lain, dengan Budibase Anda dapat memulai dari awal dan membuat aplikasi bisnis tanpa sumber data sekalipun. [Permintaan untuk sumber data baru](https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas).
+- **Memuat data atau mulai dari awal.** Budibase menarik data dari berbagai sumber, termasuk MongoDB, CouchDB, PostgreSQL, mySQL, Airtable, S3, DyanmoDB, atau REST API. Dan tidak seperti platform lain, dengan Budibase Anda dapat memulai dari awal dan membuat aplikasi bisnis tanpa sumber data sekalipun. [Permintaan untuk sumber data baru](https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas).

- **Rancang dan bangun aplikasi dengan komponen siap pakai yang kuat.** Budibase tersedia dengan siap pakai dan dirancang dengan indah, komponen-komponen kuat yang dapat anda gunakan layaknya blok penyusun untuk merancang UI Anda. Kami juga menyediakan banyak sekali pilihan-pilihan CSS favorit yang dapat digunakan sesuai dengan kreatifitas yang Anda inginkan. [Permintaan komponen baru [Permintaan untuk komponen baru](https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas).
+- **Rancang dan bangun aplikasi dengan komponen siap pakai yang kuat.** Budibase tersedia dengan siap pakai dan dirancang dengan indah, komponen-komponen kuat yang dapat anda gunakan layaknya blok penyusun untuk merancang antar muka Anda. Kami juga menyediakan banyak sekali pilihan-pilihan CSS favorit yang dapat digunakan sesuai dengan kreatifitas yang Anda inginkan. [Permintaan komponen baru [Permintaan untuk komponen baru](https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas).

- **Otomatiskan proses, integrasikan dengan aplikasi lain, dan sambungkan ke webhook.** Menghemat waktu dengan mengotomatisasikan proses dan alur kerja yang masih dikerjakan secara manual. Dari menghubungkan ke webhooks, hingga mengotomatiasi email-email, cukup beritahu Budibase apa yang harus dilakukan dan biarkan dia berkerja untuk Anda. Anda bisa dengan mudah [membuat otomatisasi baru untuk Budibase disini ](https://github.com/Budibase/automations) atau [minta otomatisasi baru](https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas).
+- **Otomatiskan proses, integrasikan dengan aplikasi lain, dan sambungkan ke webhook.** Menghemat waktu dengan mengotomatisasikan proses dan alur kerja yang masih dikerjakan secara manual. Dari menghubungkan ke webhooks, hingga mengotomatiasi surel, cukup beritahu Budibase apa yang harus dilakukan dan biarkan dia berkerja untuk Anda. Anda bisa dengan mudah [membuat otomatisasi baru untuk Budibase disini ](https://github.com/Budibase/automations) atau [minta otomatisasi baru](https://github.com/Budibase/budibase/discussions?discussions_q=category%3AIdeas).

- **Surga bagi Admin.** Budibase dibuat untuk berkembang. Dengan Budibase, Anda dapat menghosting sendiri di infrastruktrur Anda punya dan secara global mengelola para pengguna, orientasi, SMTP, aplikasi-aplikasi, grup-grup, tema, dan masih masih banyak lagi. Anda juga dapat menyediakan para pengguna/grup dengan sebuah aplikasi portal dan menyebarkan pengelolaan pengguna kepada manaajer grup.
+- **Surga bagi Admin.** Budibase dibuat untuk berkembang. Dengan Budibase, Anda dapat meng<i>hosting</i> sendiri di infrastruktrur Anda punya dan secara global mengelola para pengguna, orientasi, SMTP, aplikasi-aplikasi, grup-grup, tema, dan masih masih banyak lagi. Anda juga dapat menyediakan para pengguna/grup dengan sebuah aplikasi portal dan menyebarkan pengelolaan pengguna kepada manaajer grup.

 <br />

@ -77,7 +77,7 @@ Saat ini ada 2 cara untuk memulai Budibase, yaitu: Digital Ocean dan Docker.

 ### Memulai Dengan Digital Ocean
 Cara paling mudah dan cepat untuk memulai adalah dengan menggunakan Digital Ocean:
-<a href="https://marketplace.digitalocean.com/apps/budibase">1-klik Digital Ocean deploy</a>
+<a href="https://marketplace.digitalocean.com/apps/budibase">1-klik Digital Ocean <i>deploy</i></a>

 <a href="https://marketplace.digitalocean.com/apps/budibase">
  <img src="https://user-images.githubusercontent.com/552074/87779219-5c3b7600-c824-11ea-9898-981a8ba94f6c.png" alt="digital ocean badge">
@ -85,17 +85,17 @@ Cara paling mudah dan cepat untuk memulai adalah dengan menggunakan Digital Ocea
 <br /><br />

 ### Memulai dengan Docker
-Untuk memulai, Anda harus memiliki docker dan docker compose  terinstal di mesin anda. 
-Setelah Anda docker terinstal, prosesnya akan memakan waktu 5 menit, dengan empat langkah ini:
+Untuk memulai, Anda harus memiliki docker dan docker compose ter<i>install</i> di mesin anda. 
+Setelah Anda docker ter<i>install</i>, prosesnya akan memakan waktu 5 menit, dengan empat langkah ini:

-1. Instal CLI Budibase.
+1. <i>Install</i> CLI Budibase.

 ```
 $ npm i -g @budibase/cli 
 ```


-2. Mempersiapkan Budibase (pilih tempat menyimpan Budibase dan port untuk menjalankannya)
+2. Mempersiapkan Budibase (pilih tempat menyimpan Budibase dan <i>port</i> untuk menjalankannya)

 ```
 budi hosting --init 
@ -144,7 +144,7 @@ Jika Anda memiliki pertanyaan atau ingin berbicara dengan pengguna Budibase lain

 ## ❗ Kode etik

-Budibase berdedikasi untuk memberikan pengalaman yang ramah, beragam, dan bebas pelecehan bagi semua orang. Kami mengharapkan semua orang di komunitas Budibase untuk mematuhi [**Kode etik**](https://github.com/Budibase/budibase/blob/HEAD/.github/CODE_OF_CONDUCT.md). Mohon dibac.
+Budibase berdedikasi untuk memberikan pengalaman yang ramah, beragam, dan bebas pelecehan bagi semua orang. Kami mengharapkan semua orang di komunitas Budibase untuk mematuhi [**Kode etik**](https://github.com/Budibase/budibase/blob/HEAD/.github/CODE_OF_CONDUCT.md). Mohon dibaca.
 <br />

 ---
@ -153,19 +153,19 @@ Budibase berdedikasi untuk memberikan pengalaman yang ramah, beragam, dan bebas

 ## 🙌 Berkontribusi untuk Budibase

-Dari membuka laporan bug hingga membuat pull request: setiap kontribusi dihargai dan disambut. Jika Anda berencana untuk menerapkan fitur baru atau mengubah API, harap buat issue terlebih dahulu. Dengan cara ini kami dapat memastikan pekerjaan Anda tidak sia-sia.
+Dari membuka laporan bug hingga membuat <i>pull request</i>: setiap kontribusi dihargai dan disambut. Jika Anda berencana untuk menerapkan fitur baru atau mengubah API, harap buat <i>issue</i> terlebih dahulu. Dengan cara ini kami dapat memastikan pekerjaan Anda tidak sia-sia.

 ### Tidak yakin memulai dari mana?
-Sebuat tempat yang baik untuk mulai berkontribusi, adalah  [Masalah pertama di proyek](https://github.com/Budibase/budibase/projects/22).
+Sebuat tempat yang baik untuk mulai berkontribusi, adalah [masalah pertama di proyek](https://github.com/Budibase/budibase/projects/22).

 ### Bagaimana repositori diatur
-Budibase adalah monorepo yang dikelola oleh lerna. Lerna mengelola pembangunan dan penerbitan paket budibase. Pada level tinggi, inilah paket-paket yang membentuk Budibase.
+Budibase adalah <i>monorepo</i> yang dikelola oleh lerna. Lerna mengelola pembangunan dan penerbitan paket Budibase. Pada level tinggi, inilah paket-paket yang membentuk Budibase.

- [packages/builder](https://github.com/Budibase/budibase/tree/HEAD/packages/builder) - berisi kode untuk aplikasi svelte sisi klien pembangun budibase.
+- [packages/builder](https://github.com/Budibase/budibase/tree/HEAD/packages/builder) - berisi kode untuk aplikasi svelte sisi klien pembangun Budibase.

- [packages/client](https://github.com/Budibase/budibase/tree/HEAD/packages/client) - Modul yang berjalan di browser yang bertanggung jawab untuk membaca definisi JSON dan membuat aplikasi web yang hidup dan bernafas darinya.
+- [packages/client](https://github.com/Budibase/budibase/tree/HEAD/packages/client) - Modul yang berjalan di <i>browser</i> yang bertanggung jawab untuk membaca definisi JSON dan membuat aplikasi web yang hidup dan bernafas darinya.

- [packages/server](https://github.com/Budibase/budibase/tree/HEAD/packages/server) - Server Budibase. Aplikasi Koa ini bertanggung jawab untuk melayani JS untuk aplikasi builder dan budibase, serta menyediakan API untuk interaksi dengan database dan sistem file.
+- [packages/server](https://github.com/Budibase/budibase/tree/HEAD/packages/server) - <i>Server</i> Budibase. Aplikasi Koa ini bertanggung jawab untuk melayani JS untuk aplikasi builder dan budibase, serta menyediakan API untuk interaksi dengan database dan sistem file.

 Untuk informasi lebih lanjut, lihat [CONTRIBUTING.md](https://github.com/Budibase/budibase/blob/HEAD/.github/CONTRIBUTING.md)
 <br /><br />
@ -188,7 +188,7 @@ Budibase adalah sumber terbuka, dilisensikan sebagai [GPL v3](https://www.gnu.or

 [![Stargazers over time](https://starchart.cc/Budibase/budibase.svg)](https://starchart.cc/Budibase/budibase)

-Jika Anda mengalami masalah di antara pembaruan, silakan gunakan panduan [disini](https://github.com/Budibase/budibase/blob/HEAD/.github/CONTRIBUTING.md#troubleshooting) untuk membersihkan environment Anda.
+Jika Anda mengalami masalah di antara pembaruan, silakan gunakan panduan [disini](https://github.com/Budibase/budibase/blob/HEAD/.github/CONTRIBUTING.md#troubleshooting) untuk membersihkan <i>environment</i> Anda.

 <br />

@ -227,4 +227,4 @@ Terima kasih untuk orang-orang hebat ini ([emoji key](https://allcontributors.or

 <!-- ALL-CONTRIBUTORS-LIST:END -->

-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+Proyek ini mengikuti spesifikasi [all-contributors](https://github.com/all-contributors/all-contributors). Kontribusi dalam bentuk apa pun dipersilakan!
--- a/lerna.json
+++ b/lerna.json
@ -1,5 +1,5 @@
 {
-  "version": "0.9.82",
+  "version": "0.9.99-alpha.6",
  "npmClient": "yarn",
  "packages": [
    "packages/*"
--- a/package.json
+++ b/package.json
@ -43,6 +43,8 @@
    "test:e2e": "lerna run cy:test",
    "test:e2e:ci": "lerna run cy:ci",
    "build:docker": "lerna run build:docker && cd hosting/scripts/linux/ && ./release-to-docker-hub.sh && cd -",
-    "build:docker:develop": "lerna run build:docker && cd hosting/scripts/linux/ && ./release-to-docker-hub.sh develop && cd -"
+    "build:docker:develop": "node scripts/pinVersions && lerna run build:docker && cd hosting/scripts/linux/ && ./release-to-docker-hub.sh develop && cd -",
+    "multi:enable": "lerna run multi:enable",
+    "multi:disable": "lerna run multi:disable"
  }
 }
--- a/packages/auth/db.js
+++ b/packages/auth/db.js
@ -1 +1,4 @@
-module.exports = require("./src/db/utils")
+module.exports = {
+  ...require("./src/db/utils"),
+  ...require("./src/db/constants"),
+}
--- a/packages/auth/package.json
+++ b/packages/auth/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/auth",
-  "version": "0.9.82",
+  "version": "0.9.99-alpha.6",
  "description": "Authentication middlewares for budibase builder and apps",
  "main": "src/index.js",
  "author": "Budibase",
@ -13,6 +13,7 @@
    "@techpass/passport-openidconnect": "^0.3.0",
    "aws-sdk": "^2.901.0",
    "bcryptjs": "^2.4.3",
+    "cls-hooked": "^4.2.2",
    "ioredis": "^4.27.1",
    "jsonwebtoken": "^8.5.1",
    "koa-passport": "^4.1.4",
--- a/packages/auth/src/cache/user.js
+++ b/packages/auth/src/cache/user.js
@ -1,15 +1,21 @@
-const { getDB } = require("../db")
-const { StaticDatabases } = require("../db/utils")
 const redis = require("../redis/authRedis")
+const { getTenantId, lookupTenantId, getGlobalDB } = require("../tenancy")

 const EXPIRY_SECONDS = 3600

-exports.getUser = async userId => {
+exports.getUser = async (userId, tenantId = null) => {
+  if (!tenantId) {
+    try {
+      tenantId = getTenantId()
+    } catch (err) {
+      tenantId = await lookupTenantId(userId)
+    }
+  }
  const client = await redis.getUserClient()
  // try cache
  let user = await client.get(userId)
  if (!user) {
-    user = await getDB(StaticDatabases.GLOBAL.name).get(userId)
+    user = await getGlobalDB(tenantId).get(userId)
    client.store(userId, user, EXPIRY_SECONDS)
  }
  return user
--- a/packages/auth/src/constants.js
+++ b/packages/auth/src/constants.js
@ -14,13 +14,14 @@ exports.Headers = {
  API_VER: "x-budibase-api-version",
  APP_ID: "x-budibase-app-id",
  TYPE: "x-budibase-type",
+  TENANT_ID: "x-budibase-tenant-id",
 }

 exports.GlobalRoles = {
  OWNER: "owner",
  ADMIN: "admin",
  BUILDER: "builder",
-  GROUP_MANAGER: "group_manager",
+  WORKSPACE_MANAGER: "workspace_manager",
 }

 exports.Configs = {
@ -31,3 +32,5 @@ exports.Configs = {
  OIDC: "oidc",
  OIDC_LOGOS: "logos_oidc",
 }
+
+exports.DEFAULT_TENANT_ID = "default"
--- a/packages/auth/src/db/constants.js
+++ b/packages/auth/src/db/constants.js
@ -0,0 +1,17 @@
+exports.SEPARATOR = "_"
+
+exports.StaticDatabases = {
+  GLOBAL: {
+    name: "global-db",
+    docs: {
+      apiKeys: "apikeys",
+    },
+  },
+  // contains information about tenancy and so on
+  PLATFORM_INFO: {
+    name: "global-info",
+    docs: {
+      tenants: "tenants",
+    },
+  },
+}
--- a/packages/auth/src/db/utils.js
+++ b/packages/auth/src/db/utils.js
@ -1,36 +1,36 @@
 const { newid } = require("../hashing")
 const Replication = require("./Replication")
+const { DEFAULT_TENANT_ID } = require("../constants")
+const env = require("../environment")
+const { StaticDatabases, SEPARATOR } = require("./constants")
+const { getTenantId } = require("../tenancy")

 const UNICODE_MAX = "\ufff0"
-const SEPARATOR = "_"

 exports.ViewNames = {
  USER_BY_EMAIL: "by_email",
 }

-exports.StaticDatabases = {
-  GLOBAL: {
-    name: "global-db",
-  },
-  DEPLOYMENTS: {
-    name: "deployments",
-  },
-}
+exports.StaticDatabases = StaticDatabases
+
+const PRE_APP = "app"
+const PRE_DEV = "dev"

 const DocumentTypes = {
  USER: "us",
-  GROUP: "group",
+  WORKSPACE: "workspace",
  CONFIG: "config",
  TEMPLATE: "template",
-  APP: "app",
-  APP_DEV: "app_dev",
-  APP_METADATA: "app_metadata",
+  APP: PRE_APP,
+  DEV: PRE_DEV,
+  APP_DEV: `${PRE_APP}${SEPARATOR}${PRE_DEV}`,
+  APP_METADATA: `${PRE_APP}${SEPARATOR}metadata`,
  ROLE: "role",
 }

 exports.DocumentTypes = DocumentTypes
 exports.APP_PREFIX = DocumentTypes.APP + SEPARATOR
-exports.APP_DEV_PREFIX = DocumentTypes.APP_DEV + SEPARATOR
+exports.APP_DEV = exports.APP_DEV_PREFIX = DocumentTypes.APP_DEV + SEPARATOR
 exports.SEPARATOR = SEPARATOR

 function isDevApp(app) {
@ -61,21 +61,21 @@ function getDocParams(docType, docId = null, otherProps = {}) {
 }

 /**
- * Generates a new group ID.
- * @returns {string} The new group ID which the group doc can be stored under.
+ * Generates a new workspace ID.
+ * @returns {string} The new workspace ID which the workspace doc can be stored under.
 */
-exports.generateGroupID = () => {
-  return `${DocumentTypes.GROUP}${SEPARATOR}${newid()}`
+exports.generateWorkspaceID = () => {
+  return `${DocumentTypes.WORKSPACE}${SEPARATOR}${newid()}`
 }

 /**
- * Gets parameters for retrieving groups.
+ * Gets parameters for retrieving workspaces.
 */
-exports.getGroupParams = (id = "", otherProps = {}) => {
+exports.getWorkspaceParams = (id = "", otherProps = {}) => {
  return {
    ...otherProps,
-    startkey: `${DocumentTypes.GROUP}${SEPARATOR}${id}`,
-    endkey: `${DocumentTypes.GROUP}${SEPARATOR}${id}${UNICODE_MAX}`,
+    startkey: `${DocumentTypes.WORKSPACE}${SEPARATOR}${id}`,
+    endkey: `${DocumentTypes.WORKSPACE}${SEPARATOR}${id}${UNICODE_MAX}`,
  }
 }

@ -103,14 +103,14 @@ exports.getGlobalUserParams = (globalId, otherProps = {}) => {

 /**
 * Generates a template ID.
- * @param ownerId The owner/user of the template, this could be global or a group level.
+ * @param ownerId The owner/user of the template, this could be global or a workspace level.
 */
 exports.generateTemplateID = ownerId => {
  return `${DocumentTypes.TEMPLATE}${SEPARATOR}${ownerId}${SEPARATOR}${newid()}`
 }

 /**
- * Gets parameters for retrieving templates. Owner ID must be specified, either global or a group level.
+ * Gets parameters for retrieving templates. Owner ID must be specified, either global or a workspace level.
 */
 exports.getTemplateParams = (ownerId, templateId, otherProps = {}) => {
  if (!templateId) {
@ -163,11 +163,26 @@ exports.getDeployedAppID = appId => {
 * different users/companies apps as there is no security around it - all apps are returned.
 * @return {Promise<object[]>} returns the app information document stored in each app database.
 */
-exports.getAllApps = async ({ CouchDB, dev, all } = {}) => {
+exports.getAllApps = async (CouchDB, { dev, all } = {}) => {
+  let tenantId = getTenantId()
+  if (!env.MULTI_TENANCY && !tenantId) {
+    tenantId = DEFAULT_TENANT_ID
+  }
  let allDbs = await CouchDB.allDbs()
-  const appDbNames = allDbs.filter(dbName =>
-    dbName.startsWith(exports.APP_PREFIX)
+  const appDbNames = allDbs.filter(dbName => {
+    const split = dbName.split(SEPARATOR)
+    // it is an app, check the tenantId
+    if (split[0] === DocumentTypes.APP) {
+      const noTenantId = split.length === 2 || split[1] === DocumentTypes.DEV
+      // tenantId is always right before the UUID
+      const possibleTenantId = split[split.length - 2]
+      return (
+        (tenantId === DEFAULT_TENANT_ID && noTenantId) ||
+        possibleTenantId === tenantId
      )
+    }
+    return false
+  })
  const appPromises = appDbNames.map(db =>
    // skip setup otherwise databases could be re-created
    new CouchDB(db, { skip_setup: true }).get(DocumentTypes.APP_METADATA)
@ -214,8 +229,8 @@ exports.dbExists = async (CouchDB, dbName) => {
 * Generates a new configuration ID.
 * @returns {string} The new configuration ID which the config doc can be stored under.
 */
-const generateConfigID = ({ type, group, user }) => {
-  const scope = [type, group, user].filter(Boolean).join(SEPARATOR)
+const generateConfigID = ({ type, workspace, user }) => {
+  const scope = [type, workspace, user].filter(Boolean).join(SEPARATOR)

  return `${DocumentTypes.CONFIG}${SEPARATOR}${scope}`
 }
@ -223,8 +238,8 @@ const generateConfigID = ({ type, group, user }) => {
 /**
 * Gets parameters for retrieving configurations.
 */
-const getConfigParams = ({ type, group, user }, otherProps = {}) => {
-  const scope = [type, group, user].filter(Boolean).join(SEPARATOR)
+const getConfigParams = ({ type, workspace, user }, otherProps = {}) => {
+  const scope = [type, workspace, user].filter(Boolean).join(SEPARATOR)

  return {
    ...otherProps,
@ -234,15 +249,15 @@ const getConfigParams = ({ type, group, user }, otherProps = {}) => {
 }

 /**
- * Returns the most granular configuration document from the DB based on the type, group and userID passed.
+ * Returns the most granular configuration document from the DB based on the type, workspace and userID passed.
 * @param {Object} db - db instance to query
- * @param {Object} scopes - the type, group and userID scopes of the configuration.
+ * @param {Object} scopes - the type, workspace and userID scopes of the configuration.
 * @returns The most granular configuration document based on the scope.
 */
-const getScopedFullConfig = async function (db, { type, user, group }) {
+const getScopedFullConfig = async function (db, { type, user, workspace }) {
  const response = await db.allDocs(
    getConfigParams(
-      { type, user, group },
+      { type, user, workspace },
      {
        include_docs: true,
      }
@ -252,14 +267,14 @@ const getScopedFullConfig = async function (db, { type, user, group }) {
  function determineScore(row) {
    const config = row.doc

-    // Config is specific to a user and a group
-    if (config._id.includes(generateConfigID({ type, user, group }))) {
+    // Config is specific to a user and a workspace
+    if (config._id.includes(generateConfigID({ type, user, workspace }))) {
      return 4
    } else if (config._id.includes(generateConfigID({ type, user }))) {
      // Config is specific to a user only
      return 3
-    } else if (config._id.includes(generateConfigID({ type, group }))) {
-      // Config is specific to a group only
+    } else if (config._id.includes(generateConfigID({ type, workspace }))) {
+      // Config is specific to a workspace only
      return 2
    } else if (config._id.includes(generateConfigID({ type }))) {
      // Config is specific to a type only
--- a/packages/auth/src/db/views.js
+++ b/packages/auth/src/db/views.js
@ -1,5 +1,4 @@
-const { DocumentTypes, ViewNames, StaticDatabases } = require("./utils")
-const { getDB } = require("./index")
+const { DocumentTypes, ViewNames } = require("./utils")

 function DesignDoc() {
  return {
@ -10,8 +9,7 @@ function DesignDoc() {
  }
 }

-exports.createUserEmailView = async () => {
-  const db = getDB(StaticDatabases.GLOBAL.name)
+exports.createUserEmailView = async db => {
  let designDoc
  try {
    designDoc = await db.get("_design/database")
--- a/packages/auth/src/environment.js
+++ b/packages/auth/src/environment.js
@ -16,6 +16,7 @@ module.exports = {
  MINIO_SECRET_KEY: process.env.MINIO_SECRET_KEY,
  MINIO_URL: process.env.MINIO_URL,
  INTERNAL_API_KEY: process.env.INTERNAL_API_KEY,
+  MULTI_TENANCY: process.env.MULTI_TENANCY,
  isTest,
  _set(key, value) {
    process.env[key] = value
--- a/packages/auth/src/index.js
+++ b/packages/auth/src/index.js
@ -2,6 +2,7 @@ const passport = require("koa-passport")
 const LocalStrategy = require("passport-local").Strategy
 const JwtStrategy = require("passport-jwt").Strategy
 const { StaticDatabases } = require("./db/utils")
+const { getGlobalDB } = require("./tenancy")
 const {
  jwt,
  local,
@ -9,8 +10,9 @@ const {
  google,
  oidc,
  auditLog,
+  tenancy,
 } = require("./middleware")
-const { setDB, getDB } = require("./db")
+const { setDB } = require("./db")
 const userCache = require("./cache/user")

 // Strategies
@ -20,7 +22,7 @@ passport.use(new JwtStrategy(jwt.options, jwt.authenticate))
 passport.serializeUser((user, done) => done(null, user))

 passport.deserializeUser(async (user, done) => {
-  const db = getDB(StaticDatabases.GLOBAL.name)
+  const db = getGlobalDB()

  try {
    const user = await db.get(user._id)
@ -54,6 +56,7 @@ module.exports = {
    google,
    oidc,
    jwt: require("jsonwebtoken"),
+    buildTenancyMiddleware: tenancy,
    auditLog,
  },
  cache: {
--- a/packages/auth/src/middleware/authenticated.js
+++ b/packages/auth/src/middleware/authenticated.js
@ -2,46 +2,34 @@ const { Cookies, Headers } = require("../constants")
 const { getCookie, clearCookie } = require("../utils")
 const { getUser } = require("../cache/user")
 const { getSession, updateSessionTTL } = require("../security/sessions")
+const { buildMatcherRegex, matches } = require("./matchers")
 const env = require("../environment")

-const PARAM_REGEX = /\/:(.*?)\//g
-
-function buildNoAuthRegex(patterns) {
-  return patterns.map(pattern => {
-    const isObj = typeof pattern === "object" && pattern.route
-    const method = isObj ? pattern.method : "GET"
-    let route = isObj ? pattern.route : pattern
-
-    const matches = route.match(PARAM_REGEX)
-    if (matches) {
-      for (let match of matches) {
-        route = route.replace(match, "/.*/")
-      }
-    }
-    return { regex: new RegExp(route), method }
-  })
-}
-
-function finalise(ctx, { authenticated, user, internal, version } = {}) {
+function finalise(
+  ctx,
+  { authenticated, user, internal, version, publicEndpoint } = {}
+) {
+  ctx.publicEndpoint = publicEndpoint || false
  ctx.isAuthenticated = authenticated || false
  ctx.user = user
  ctx.internal = internal || false
  ctx.version = version
 }

-module.exports = (noAuthPatterns = [], opts) => {
-  const noAuthOptions = noAuthPatterns ? buildNoAuthRegex(noAuthPatterns) : []
+/**
+ * This middleware is tenancy aware, so that it does not depend on other middlewares being used.
+ * The tenancy modules should not be used here and it should be assumed that the tenancy context
+ * has not yet been populated.
+ */
+module.exports = (noAuthPatterns = [], opts = { publicAllowed: false }) => {
+  const noAuthOptions = noAuthPatterns ? buildMatcherRegex(noAuthPatterns) : []
  return async (ctx, next) => {
+    let publicEndpoint = false
    const version = ctx.request.headers[Headers.API_VER]
    // the path is not authenticated
-    const found = noAuthOptions.find(({ regex, method }) => {
-      return (
-        regex.test(ctx.request.url) &&
-        ctx.request.method.toLowerCase() === method.toLowerCase()
-      )
-    })
-    if (found != null) {
-      return next()
+    const found = matches(ctx, noAuthOptions)
+    if (found) {
+      publicEndpoint = true
    }
    try {
      // check the actual user is authenticated first
@ -58,7 +46,7 @@ module.exports = (noAuthPatterns = [], opts) => {
          error = "No session found"
        } else {
          try {
-            user = await getUser(userId)
+            user = await getUser(userId, session.tenantId)
            delete user.password
            authenticated = true
          } catch (err) {
@ -66,6 +54,7 @@ module.exports = (noAuthPatterns = [], opts) => {
          }
        }
        if (error) {
+          console.error("Auth Error", error)
          // remove the cookie as the user does not exist anymore
          clearCookie(ctx, Cookies.Auth)
        } else {
@ -74,22 +63,26 @@ module.exports = (noAuthPatterns = [], opts) => {
        }
      }
      const apiKey = ctx.request.headers[Headers.API_KEY]
+      const tenantId = ctx.request.headers[Headers.TENANT_ID]
      // this is an internal request, no user made it
      if (!authenticated && apiKey && apiKey === env.INTERNAL_API_KEY) {
        authenticated = true
        internal = true
      }
+      if (!user && tenantId) {
+        user = { tenantId }
+      }
      // be explicit
      if (authenticated !== true) {
        authenticated = false
      }
      // isAuthenticated is a function, so use a variable to be able to check authed state
-      finalise(ctx, { authenticated, user, internal, version })
+      finalise(ctx, { authenticated, user, internal, version, publicEndpoint })
      return next()
    } catch (err) {
      // allow configuring for public access
-      if (opts && opts.publicAllowed) {
-        finalise(ctx, { authenticated: false, version })
+      if ((opts && opts.publicAllowed) || publicEndpoint) {
+        finalise(ctx, { authenticated: false, version, publicEndpoint })
      } else {
        ctx.throw(err.status || 403, err)
      }
--- a/packages/auth/src/middleware/index.js
+++ b/packages/auth/src/middleware/index.js
@ -4,6 +4,7 @@ const google = require("./passport/google")
 const oidc = require("./passport/oidc")
 const authenticated = require("./authenticated")
 const auditLog = require("./auditLog")
+const tenancy = require("./tenancy")

 module.exports = {
  google,
@ -12,4 +13,5 @@ module.exports = {
  local,
  authenticated,
  auditLog,
+  tenancy,
 }
--- a/packages/auth/src/middleware/matchers.js
+++ b/packages/auth/src/middleware/matchers.js
@ -0,0 +1,33 @@
+const PARAM_REGEX = /\/:(.*?)(\/.*)?$/g
+
+exports.buildMatcherRegex = patterns => {
+  if (!patterns) {
+    return []
+  }
+  return patterns.map(pattern => {
+    const isObj = typeof pattern === "object" && pattern.route
+    const method = isObj ? pattern.method : "GET"
+    let route = isObj ? pattern.route : pattern
+
+    const matches = route.match(PARAM_REGEX)
+    if (matches) {
+      for (let match of matches) {
+        const pattern = "/.*" + (match.endsWith("/") ? "/" : "")
+        route = route.replace(match, pattern)
+      }
+    }
+    return { regex: new RegExp(route), method }
+  })
+}
+
+exports.matches = (ctx, options) => {
+  return options.find(({ regex, method }) => {
+    const urlMatch = regex.test(ctx.request.url)
+    const methodMatch =
+      method === "ALL"
+        ? true
+        : ctx.request.method.toLowerCase() === method.toLowerCase()
+
+    return urlMatch && methodMatch
+  })
+}
--- a/packages/auth/src/middleware/passport/google.js
+++ b/packages/auth/src/middleware/passport/google.js
@ -27,13 +27,13 @@ async function authenticate(accessToken, refreshToken, profile, done) {
 * from couchDB rather than environment variables, using this factory is necessary for dynamically configuring passport.
 * @returns Dynamically configured Passport Google Strategy
 */
-exports.strategyFactory = async function (config) {
+exports.strategyFactory = async function (config, callbackUrl) {
  try {
-    const { clientID, clientSecret, callbackURL } = config
+    const { clientID, clientSecret } = config

-    if (!clientID || !clientSecret || !callbackURL) {
+    if (!clientID || !clientSecret) {
      throw new Error(
-        "Configuration invalid. Must contain google clientID, clientSecret and callbackURL"
+        "Configuration invalid. Must contain google clientID and clientSecret"
      )
    }

@ -41,7 +41,7 @@ exports.strategyFactory = async function (config) {
      {
        clientID: config.clientID,
        clientSecret: config.clientSecret,
-        callbackURL: config.callbackURL,
+        callbackURL: callbackUrl,
      },
      authenticate
    )
--- a/packages/auth/src/middleware/passport/local.js
+++ b/packages/auth/src/middleware/passport/local.js
@ -6,19 +6,23 @@ const { getGlobalUserByEmail } = require("../../utils")
 const { authError } = require("./utils")
 const { newid } = require("../../hashing")
 const { createASession } = require("../../security/sessions")
+const { getTenantId } = require("../../tenancy")

 const INVALID_ERR = "Invalid Credentials"

-exports.options = {}
+exports.options = {
+  passReqToCallback: true,
+}

 /**
 * Passport Local Authentication Middleware.
- * @param {*} email - username to login with
- * @param {*} password - plain text password to log in with
- * @param {*} done - callback from passport to return user information and errors
+ * @param {*} ctx the request structure
+ * @param {*} email username to login with
+ * @param {*} password plain text password to log in with
+ * @param {*} done callback from passport to return user information and errors
 * @returns The authenticated user, or errors if they occur
 */
-exports.authenticate = async function (email, password, done) {
+exports.authenticate = async function (ctx, email, password, done) {
  if (!email) return authError(done, "Email Required")
  if (!password) return authError(done, "Password Required")

@ -35,12 +39,14 @@ exports.authenticate = async function (email, password, done) {
  // authenticate
  if (await compare(password, dbUser.password)) {
    const sessionId = newid()
-    await createASession(dbUser._id, sessionId)
+    const tenantId = getTenantId()
+    await createASession(dbUser._id, { sessionId, tenantId })

    dbUser.token = jwt.sign(
      {
        userId: dbUser._id,
        sessionId,
+        tenantId,
      },
      env.JWT_SECRET
    )
--- a/packages/auth/src/middleware/passport/tests/google.spec.js
+++ b/packages/auth/src/middleware/passport/tests/google.spec.js
@ -2,8 +2,9 @@

 const { data } = require("./utilities/mock-data")

+const TENANT_ID = "default"
+
 const googleConfig = {
-  callbackURL: "http://somecallbackurl",
  clientID: data.clientID,
  clientSecret: data.clientSecret,
 }
@ -27,12 +28,13 @@ describe("google", () => {
    it("should create successfully create a google strategy", async () => {
      const google = require("../google")

-      await google.strategyFactory(googleConfig)
+      const callbackUrl = `/api/global/auth/${TENANT_ID}/google/callback`
+      await google.strategyFactory(googleConfig, callbackUrl)
  
      const expectedOptions = {
        clientID: googleConfig.clientID,
        clientSecret: googleConfig.clientSecret,
-        callbackURL: googleConfig.callbackURL,
+        callbackURL: callbackUrl,
      }

      expect(mockStrategy).toHaveBeenCalledWith(
--- a/packages/auth/src/middleware/passport/third-party-common.js
+++ b/packages/auth/src/middleware/passport/third-party-common.js
@ -1,11 +1,12 @@
 const env = require("../../environment")
 const jwt = require("jsonwebtoken")
-const database = require("../../db")
-const { StaticDatabases, generateGlobalUserID } = require("../../db/utils")
+const { generateGlobalUserID } = require("../../db/utils")
 const { authError } = require("./utils")
 const { newid } = require("../../hashing")
 const { createASession } = require("../../security/sessions")
 const { getGlobalUserByEmail } = require("../../utils")
+const { getGlobalDB, getTenantId } = require("../../tenancy")
+const fetch = require("node-fetch")

 /**
 * Common authentication logic for third parties. e.g. OAuth, OIDC.
@ -15,19 +16,21 @@ exports.authenticateThirdParty = async function (
  requireLocalAccount = true,
  done
 ) {
-  if (!thirdPartyUser.provider)
+  if (!thirdPartyUser.provider) {
    return authError(done, "third party user provider required")
-  if (!thirdPartyUser.userId)
+  }
+  if (!thirdPartyUser.userId) {
    return authError(done, "third party user id required")
-  if (!thirdPartyUser.email)
+  }
+  if (!thirdPartyUser.email) {
    return authError(done, "third party user email required")
-
-  const db = database.getDB(StaticDatabases.GLOBAL.name)
-
-  let dbUser
+  }

  // use the third party id
  const userId = generateGlobalUserID(thirdPartyUser.userId)
+  const db = getGlobalDB()
+
+  let dbUser

  // try to load by id
  try {
@ -65,7 +68,7 @@ exports.authenticateThirdParty = async function (
    }
  }

-  dbUser = syncUser(dbUser, thirdPartyUser)
+  dbUser = await syncUser(dbUser, thirdPartyUser)

  // create or sync the user
  const response = await db.post(dbUser)
@ -73,7 +76,8 @@ exports.authenticateThirdParty = async function (

  // authenticate
  const sessionId = newid()
-  await createASession(dbUser._id, sessionId)
+  const tenantId = getTenantId()
+  await createASession(dbUser._id, { sessionId, tenantId })

  dbUser.token = jwt.sign(
    {
@ -86,10 +90,26 @@ exports.authenticateThirdParty = async function (
  return done(null, dbUser)
 }

+async function syncProfilePicture(user, thirdPartyUser) {
+  const pictureUrl = thirdPartyUser.profile._json.picture
+  if (pictureUrl) {
+    const response = await fetch(pictureUrl)
+
+    if (response.status === 200) {
+      const type = response.headers.get("content-type")
+      if (type.startsWith("image/")) {
+        user.pictureUrl = pictureUrl
+      }
+    }
+  }
+
+  return user
+}
+
 /**
 * @returns a user that has been sync'd with third party information
 */
-function syncUser(user, thirdPartyUser) {
+async function syncUser(user, thirdPartyUser) {
  // provider
  user.provider = thirdPartyUser.provider
  user.providerType = thirdPartyUser.providerType
@ -112,6 +132,8 @@ function syncUser(user, thirdPartyUser) {
      }
    }

+    user = await syncProfilePicture(user, thirdPartyUser)
+
    // profile
    user.thirdPartyProfile = {
      ...profile._json,
--- a/packages/auth/src/middleware/tenancy.js
+++ b/packages/auth/src/middleware/tenancy.js
@ -0,0 +1,14 @@
+const { setTenantId } = require("../tenancy")
+const ContextFactory = require("../tenancy/FunctionContext")
+const { buildMatcherRegex, matches } = require("./matchers")
+
+module.exports = (allowQueryStringPatterns, noTenancyPatterns) => {
+  const allowQsOptions = buildMatcherRegex(allowQueryStringPatterns)
+  const noTenancyOptions = buildMatcherRegex(noTenancyPatterns)
+
+  return ContextFactory.getMiddleware(ctx => {
+    const allowNoTenant = !!matches(ctx, noTenancyOptions)
+    const allowQs = !!matches(ctx, allowQsOptions)
+    setTenantId(ctx, { allowQs, allowNoTenant })
+  })
+}
--- a/packages/auth/src/security/sessions.js
+++ b/packages/auth/src/security/sessions.js
@ -12,12 +12,13 @@ function makeSessionID(userId, sessionId) {
  return `${userId}/${sessionId}`
 }

-exports.createASession = async (userId, sessionId) => {
+exports.createASession = async (userId, session) => {
  const client = await redis.getSessionClient()
-  const session = {
+  const sessionId = session.sessionId
+  session = {
    createdAt: new Date().toISOString(),
    lastAccessedAt: new Date().toISOString(),
-    sessionId,
+    ...session,
    userId,
  }
  await client.store(makeSessionID(userId, sessionId), session, EXPIRY_SECONDS)
--- a/packages/auth/src/tenancy/FunctionContext.js
+++ b/packages/auth/src/tenancy/FunctionContext.js
@ -0,0 +1,73 @@
+const cls = require("cls-hooked")
+const { newid } = require("../hashing")
+
+const REQUEST_ID_KEY = "requestId"
+
+class FunctionContext {
+  static getMiddleware(updateCtxFn = null) {
+    const namespace = this.createNamespace()
+
+    return async function (ctx, next) {
+      await new Promise(
+        namespace.bind(function (resolve, reject) {
+          // store a contextual request ID that can be used anywhere (audit logs)
+          namespace.set(REQUEST_ID_KEY, newid())
+          namespace.bindEmitter(ctx.req)
+          namespace.bindEmitter(ctx.res)
+
+          if (updateCtxFn) {
+            updateCtxFn(ctx)
+          }
+          next().then(resolve).catch(reject)
+        })
+      )
+    }
+  }
+
+  static run(callback) {
+    const namespace = this.createNamespace()
+
+    return namespace.runAndReturn(callback)
+  }
+
+  static setOnContext(key, value) {
+    const namespace = this.createNamespace()
+    namespace.set(key, value)
+  }
+
+  static getContextStorage() {
+    if (this._namespace && this._namespace.active) {
+      let contextData = this._namespace.active
+      delete contextData.id
+      delete contextData._ns_name
+      return contextData
+    }
+
+    return {}
+  }
+
+  static getFromContext(key) {
+    const context = this.getContextStorage()
+    if (context) {
+      return context[key]
+    } else {
+      return null
+    }
+  }
+
+  static destroyNamespace() {
+    if (this._namespace) {
+      cls.destroyNamespace("session")
+      this._namespace = null
+    }
+  }
+
+  static createNamespace() {
+    if (!this._namespace) {
+      this._namespace = cls.createNamespace("session")
+    }
+    return this._namespace
+  }
+}
+
+module.exports = FunctionContext
--- a/packages/auth/src/tenancy/context.js
+++ b/packages/auth/src/tenancy/context.js
@ -0,0 +1,81 @@
+const env = require("../environment")
+const { Headers } = require("../../constants")
+const cls = require("./FunctionContext")
+
+exports.DEFAULT_TENANT_ID = "default"
+
+exports.isDefaultTenant = () => {
+  return exports.getTenantId() === exports.DEFAULT_TENANT_ID
+}
+
+exports.isMultiTenant = () => {
+  return env.MULTI_TENANCY
+}
+
+const TENANT_ID = "tenantId"
+
+// used for automations, API endpoints should always be in context already
+exports.doInTenant = (tenantId, task) => {
+  return cls.run(() => {
+    // set the tenant id
+    cls.setOnContext(TENANT_ID, tenantId)
+
+    // invoke the task
+    const result = task()
+
+    return result
+  })
+}
+
+exports.updateTenantId = tenantId => {
+  cls.setOnContext(TENANT_ID, tenantId)
+}
+
+exports.setTenantId = (
+  ctx,
+  opts = { allowQs: false, allowNoTenant: false }
+) => {
+  let tenantId
+  // exit early if not multi-tenant
+  if (!exports.isMultiTenant()) {
+    cls.setOnContext(TENANT_ID, this.DEFAULT_TENANT_ID)
+    return
+  }
+
+  const allowQs = opts && opts.allowQs
+  const allowNoTenant = opts && opts.allowNoTenant
+  const header = ctx.request.headers[Headers.TENANT_ID]
+  const user = ctx.user || {}
+  if (allowQs) {
+    const query = ctx.request.query || {}
+    tenantId = query.tenantId
+  }
+  // override query string (if allowed) by user, or header
+  // URL params cannot be used in a middleware, as they are
+  // processed later in the chain
+  tenantId = user.tenantId || header || tenantId
+
+  if (!tenantId && !allowNoTenant) {
+    ctx.throw(403, "Tenant id not set")
+  }
+  // check tenant ID just incase no tenant was allowed
+  if (tenantId) {
+    cls.setOnContext(TENANT_ID, tenantId)
+  }
+}
+
+exports.isTenantIdSet = () => {
+  const tenantId = cls.getFromContext(TENANT_ID)
+  return !!tenantId
+}
+
+exports.getTenantId = () => {
+  if (!exports.isMultiTenant()) {
+    return exports.DEFAULT_TENANT_ID
+  }
+  const tenantId = cls.getFromContext(TENANT_ID)
+  if (!tenantId) {
+    throw Error("Tenant id not found")
+  }
+  return tenantId
+}
--- a/packages/auth/src/tenancy/index.js
+++ b/packages/auth/src/tenancy/index.js
@ -0,0 +1,4 @@
+module.exports = {
+  ...require("./context"),
+  ...require("./tenancy"),
+}
--- a/packages/auth/src/tenancy/tenancy.js
+++ b/packages/auth/src/tenancy/tenancy.js
@ -0,0 +1,105 @@
+const { getDB } = require("../db")
+const { SEPARATOR, StaticDatabases } = require("../db/constants")
+const { getTenantId, DEFAULT_TENANT_ID, isMultiTenant } = require("./context")
+const env = require("../environment")
+
+const TENANT_DOC = StaticDatabases.PLATFORM_INFO.docs.tenants
+const PLATFORM_INFO_DB = StaticDatabases.PLATFORM_INFO.name
+
+exports.addTenantToUrl = url => {
+  const tenantId = getTenantId()
+
+  if (isMultiTenant()) {
+    const char = url.indexOf("?") === -1 ? "?" : "&"
+    url += `${char}tenantId=${tenantId}`
+  }
+
+  return url
+}
+
+exports.doesTenantExist = async tenantId => {
+  const db = getDB(PLATFORM_INFO_DB)
+  let tenants
+  try {
+    tenants = await db.get(TENANT_DOC)
+  } catch (err) {
+    // if theres an error the doc doesn't exist, no tenants exist
+    return false
+  }
+  return (
+    tenants &&
+    Array.isArray(tenants.tenantIds) &&
+    tenants.tenantIds.indexOf(tenantId) !== -1
+  )
+}
+
+exports.tryAddTenant = async (tenantId, userId, email) => {
+  const db = getDB(PLATFORM_INFO_DB)
+  const getDoc = async id => {
+    if (!id) {
+      return null
+    }
+    try {
+      return await db.get(id)
+    } catch (err) {
+      return { _id: id }
+    }
+  }
+  let [tenants, userIdDoc, emailDoc] = await Promise.all([
+    getDoc(TENANT_DOC),
+    getDoc(userId),
+    getDoc(email),
+  ])
+  if (!Array.isArray(tenants.tenantIds)) {
+    tenants = {
+      _id: TENANT_DOC,
+      tenantIds: [],
+    }
+  }
+  let promises = []
+  if (userIdDoc) {
+    userIdDoc.tenantId = tenantId
+    promises.push(db.put(userIdDoc))
+  }
+  if (emailDoc) {
+    emailDoc.tenantId = tenantId
+    promises.push(db.put(emailDoc))
+  }
+  if (tenants.tenantIds.indexOf(tenantId) === -1) {
+    tenants.tenantIds.push(tenantId)
+    promises.push(db.put(tenants))
+  }
+  await Promise.all(promises)
+}
+
+exports.getGlobalDB = (tenantId = null) => {
+  // tenant ID can be set externally, for example user API where
+  // new tenants are being created, this may be the case
+  if (!tenantId) {
+    tenantId = getTenantId()
+  }
+
+  let dbName
+
+  if (tenantId === DEFAULT_TENANT_ID) {
+    dbName = StaticDatabases.GLOBAL.name
+  } else {
+    dbName = `${tenantId}${SEPARATOR}${StaticDatabases.GLOBAL.name}`
+  }
+
+  return getDB(dbName)
+}
+
+exports.lookupTenantId = async userId => {
+  const db = getDB(StaticDatabases.PLATFORM_INFO.name)
+  let tenantId = env.MULTI_TENANCY ? DEFAULT_TENANT_ID : null
+  try {
+    const doc = await db.get(userId)
+    if (doc && doc.tenantId) {
+      tenantId = doc.tenantId
+    }
+  } catch (err) {
+    // just return the default
+  }
+  return tenantId
+}
--- a/packages/auth/src/utils.js
+++ b/packages/auth/src/utils.js
@ -1,14 +1,9 @@
-const {
-  DocumentTypes,
-  SEPARATOR,
-  ViewNames,
-  StaticDatabases,
-} = require("./db/utils")
+const { DocumentTypes, SEPARATOR, ViewNames } = require("./db/utils")
 const jwt = require("jsonwebtoken")
 const { options } = require("./middleware/passport/jwt")
 const { createUserEmailView } = require("./db/views")
-const { getDB } = require("./db")
 const { Headers } = require("./constants")
+const { getGlobalDB } = require("./tenancy")

 const APP_PREFIX = DocumentTypes.APP + SEPARATOR

@ -111,7 +106,7 @@ exports.getGlobalUserByEmail = async email => {
  if (email == null) {
    throw "Must supply an email address to view"
  }
-  const db = getDB(StaticDatabases.GLOBAL.name)
+  const db = getGlobalDB()
  try {
    let users = (
      await db.query(`database/${ViewNames.USER_BY_EMAIL}`, {
@ -123,7 +118,7 @@ exports.getGlobalUserByEmail = async email => {
    return users.length <= 1 ? users[0] : users
  } catch (err) {
    if (err != null && err.name === "not_found") {
-      await createUserEmailView()
+      await createUserEmailView(db)
      return exports.getGlobalUserByEmail(email)
    } else {
      throw err
--- a/packages/auth/tenancy.js
+++ b/packages/auth/tenancy.js
@ -0,0 +1 @@
+module.exports = require("./src/tenancy")
--- a/packages/auth/yarn.lock
+++ b/packages/auth/yarn.lock
@ -798,6 +798,13 @@ ast-types@0.9.6:
  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.6.tgz#102c9e9e9005d3e7e3829bf0c4fa24ee862ee9b9"
  integrity sha1-ECyenpAF0+fjgpvwxPok7oYu6bk=

+async-hook-jl@^1.7.6:
+  version "1.7.6"
+  resolved "https://registry.yarnpkg.com/async-hook-jl/-/async-hook-jl-1.7.6.tgz#4fd25c2f864dbaf279c610d73bf97b1b28595e68"
+  integrity sha512-gFaHkFfSxTjvoxDMYqDuGHlcRyUuamF8s+ZTtJdDzqjws4mCt7v0vuV79/E2Wr2/riMQgtG4/yUtXWs1gZ7JMg==
+  dependencies:
+    stack-chain "^1.3.7"
+
 async@~2.1.4:
  version "2.1.5"
  resolved "https://registry.yarnpkg.com/async/-/async-2.1.5.tgz#e587c68580994ac67fc56ff86d3ac56bdbe810bc"
@ -1144,6 +1151,15 @@ clone-buffer@1.0.0:
  resolved "https://registry.yarnpkg.com/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58"
  integrity sha1-4+JbIHrE5wGvch4staFnksrD3Fg=

+cls-hooked@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/cls-hooked/-/cls-hooked-4.2.2.tgz#ad2e9a4092680cdaffeb2d3551da0e225eae1908"
+  integrity sha512-J4Xj5f5wq/4jAvcdgoGsL3G103BtWpZrMo8NEinRltN+xpTZdI+M38pyQqhuFU/P792xkMFvnKSf+Lm81U1bxw==
+  dependencies:
+    async-hook-jl "^1.7.6"
+    emitter-listener "^1.0.1"
+    semver "^5.4.1"
+
 cluster-key-slot@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/cluster-key-slot/-/cluster-key-slot-1.1.0.tgz#30474b2a981fb12172695833052bc0d01336d10d"
@ -1444,6 +1460,13 @@ electron-to-chromium@^1.3.723:
  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.775.tgz#046517d1f2cea753e06fff549995b9dc45e20082"
  integrity sha512-EGuiJW4yBPOTj2NtWGZcX93ZE8IGj33HJAx4d3ouE2zOfW2trbWU+t1e0yzLr1qQIw81++txbM3BH52QwSRE6Q==

+emitter-listener@^1.0.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/emitter-listener/-/emitter-listener-1.1.2.tgz#56b140e8f6992375b3d7cb2cab1cc7432d9632e8"
+  integrity sha512-Bt1sBAGFHY9DKY+4/2cV6izcKJUf5T7/gkdmkxzX/qv9CcGH8xSwVRW5mtX03SWJtRTWSOpzCuWN9rBFYZepZQ==
+  dependencies:
+    shimmer "^1.2.0"
+
 emittery@^0.7.1:
  version "0.7.2"
  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.7.2.tgz#25595908e13af0f5674ab419396e2fb394cdfa82"
@ -4035,7 +4058,7 @@ saxes@^5.0.1:
  dependencies:
    xmlchars "^2.2.0"

-"semver@2 || 3 || 4 || 5", semver@^5.5.0, semver@^5.6.0:
+"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.6.0:
  version "5.7.1"
  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@ -4096,6 +4119,11 @@ shellwords@^0.1.1:
  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
  integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==

+shimmer@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/shimmer/-/shimmer-1.2.1.tgz#610859f7de327b587efebf501fb43117f9aff337"
+  integrity sha512-sQTKC1Re/rM6XyFM6fIAGHRPVGvyXfgzIDvzoq608vM+jeyVD0Tu1E6Np0Kc2zAIFWIj963V2800iF/9LPieQw==
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
  version "3.0.3"
  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@ -4250,6 +4278,11 @@ sshpk@^1.7.0:
    safer-buffer "^2.0.2"
    tweetnacl "~0.14.0"

+stack-chain@^1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/stack-chain/-/stack-chain-1.3.7.tgz#d192c9ff4ea6a22c94c4dd459171e3f00cea1285"
+  integrity sha1-0ZLJ/06moiyUxN1FkXHj8AzqEoU=
+
 stack-utils@^2.0.2:
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.3.tgz#cd5f030126ff116b78ccb3c027fe302713b61277"
--- 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": "0.9.82",
+  "version": "0.9.99-alpha.6",
  "license": "AGPL-3.0",
  "svelte": "src/index.js",
  "module": "dist/bbui.es.js",
--- a/packages/bbui/src/Form/Checkbox.svelte
+++ b/packages/bbui/src/Form/Checkbox.svelte
@ -9,6 +9,7 @@
  export let text = null
  export let disabled = false
  export let error = null
+  export let size = "M"

  const dispatch = createEventDispatcher()
  const onChange = e => {
@ -18,5 +19,5 @@
 </script>

 <Field {label} {labelPosition} {error}>
-  <Checkbox {error} {disabled} {text} {value} on:change={onChange} />
+  <Checkbox {error} {disabled} {text} {value} {size} on:change={onChange} />
 </Field>
--- a/packages/bbui/src/Form/Core/Checkbox.svelte
+++ b/packages/bbui/src/Form/Core/Checkbox.svelte
@ -8,6 +8,7 @@
  export let id = null
  export let text = null
  export let disabled = false
+  export let size = null

  const dispatch = createEventDispatcher()
  const onChange = event => {
@ -16,7 +17,7 @@
 </script>

 <label
-  class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized"
+  class="spectrum-Checkbox spectrum-Checkbox--size{size} spectrum-Checkbox--emphasized"
  class:is-invalid={!!error}
 >
  <input
--- a/packages/bbui/src/Form/Core/Switch.svelte
+++ b/packages/bbui/src/Form/Core/Switch.svelte
@ -6,6 +6,7 @@
  export let id = null
  export let text = null
  export let disabled = false
+  export let dataCy = null

  const dispatch = createEventDispatcher()
  const onChange = event => {
@ -15,6 +16,7 @@

 <div class="spectrum-Switch spectrum-Switch--emphasized">
  <input
+    data-cy={dataCy}
    checked={value}
    {disabled}
    on:change={onChange}
--- a/packages/bbui/src/Form/Toggle.svelte
+++ b/packages/bbui/src/Form/Toggle.svelte
@ -9,6 +9,7 @@
  export let text = null
  export let disabled = false
  export let error = null
+  export let dataCy = null

  const dispatch = createEventDispatcher()
  const onChange = e => {
@ -18,5 +19,5 @@
 </script>

 <Field {label} {labelPosition} {error}>
-  <Switch {error} {disabled} {text} {value} on:change={onChange} />
+  <Switch {dataCy} {error} {disabled} {text} {value} on:change={onChange} />
 </Field>
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@ -70,6 +70,7 @@
    >
      <div class="modal-wrapper" on:mousedown|self={cancel}>
        <div class="modal-inner-wrapper" on:mousedown|self={cancel}>
+          <slot name="outside" />
          <div
            use:focusFirstInput
            class="spectrum-Modal is-open"
@ -93,6 +94,7 @@
    z-index: 999;
    overflow: auto;
    overflow-x: hidden;
+    background: rgba(0, 0, 0, 0.75);
  }

  .modal-wrapper {
@ -112,6 +114,7 @@
    justify-content: center;
    align-items: flex-start;
    width: 0;
+    position: relative;
  }

  .spectrum-Modal {
@ -122,6 +125,7 @@
    --spectrum-dialog-confirm-border-radius: var(
      --spectrum-global-dimension-size-100
    );
+    max-width: 100%;
  }
  :global(.spectrum--lightest .spectrum-Modal.inline) {
    border: var(--border-light);
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@ -15,6 +15,7 @@
  export let showCloseIcon = true
  export let onConfirm = undefined
  export let disabled = false
+  export let showDivider = true

  const { hide, cancel } = getContext(Context.Modal)
  let loading = false
@ -41,11 +42,17 @@
  aria-modal="true"
 >
  <div class="spectrum-Dialog-grid">
-    <h1 class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader">
+    {#if title}
+      <h1
+        class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader"
+        class:noDivider={!showDivider}
+      >
        {title}
      </h1>
-
+      {#if showDivider}
        <Divider size="M" />
+      {/if}
+    {/if}
    <!-- TODO: Remove content-grid class once Layout components are in bbui -->
    <section class="spectrum-Dialog-content content-grid">
      <slot />
@ -72,8 +79,8 @@
      </div>
    {/if}
    {#if showCloseIcon}
-      <div class="close-icon" on:click={hide}>
-        <Icon hoverable name="Close" />
+      <div class="close-icon">
+        <Icon hoverable name="Close" on:click={cancel} />
      </div>
    {/if}
  </div>
@ -96,6 +103,9 @@
  .spectrum-Dialog-heading {
    font-family: var(--font-sans);
  }
+  .spectrum-Dialog-heading.noDivider {
+    margin-bottom: 12px;
+  }

  .spectrum-Dialog-buttonGroup {
    gap: var(--spectrum-global-dimension-static-size-200);
--- a/packages/bbui/src/Notification/Notification.svelte
+++ b/packages/bbui/src/Notification/Notification.svelte
@ -0,0 +1,20 @@
+<script>
+  export let type = "info"
+  export let icon = "Info"
+  export let message = ""
+</script>
+
+<div class="spectrum-Toast spectrum-Toast--{type}">
+  {#if icon}
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
+  {/if}
+  <div class="spectrum-Toast-body">
+    <div class="spectrum-Toast-content">{message || ""}</div>
+  </div>
+</div>
--- a/packages/bbui/src/Notification/NotificationDisplay.svelte
+++ b/packages/bbui/src/Notification/NotificationDisplay.svelte
@ -2,30 +2,16 @@
  import "@spectrum-css/toast/dist/index-vars.css"
  import Portal from "svelte-portal"
  import { flip } from "svelte/animate"
-  import { fly } from "svelte/transition"
  import { notifications } from "../Stores/notifications"
+  import Notification from "./Notification.svelte"
+  import { fly } from "svelte/transition"
 </script>

 <Portal target=".modal-container">
  <div class="notifications">
    {#each $notifications as { type, icon, message, id } (id)}
-      <div
-        animate:flip
-        transition:fly={{ y: -30 }}
-        class="spectrum-Toast spectrum-Toast--{type} notification-offset"
-      >
-        {#if icon}
-          <svg
-            class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon"
-            focusable="false"
-            aria-hidden="true"
-          >
-            <use xlink:href="#spectrum-icon-18-{icon}" />
-          </svg>
-        {/if}
-        <div class="spectrum-Toast-body">
-          <div class="spectrum-Toast-content">{message}</div>
-        </div>
+      <div animate:flip transition:fly={{ y: -30 }}>
+        <Notification {type} {icon} {message} />
      </div>
    {/each}
  </div>
@ -34,7 +20,7 @@
 <style>
  .notifications {
    position: fixed;
-    top: 10px;
+    top: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
@ -45,8 +31,6 @@
    justify-content: flex-start;
    align-items: center;
    pointer-events: none;
-  }
-  .notification-offset {
-    margin-bottom: 10px;
+    gap: 10px;
  }
 </style>
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@ -38,6 +38,7 @@ export { default as MenuItem } from "./Menu/Item.svelte"
 export { default as Modal } from "./Modal/Modal.svelte"
 export { default as ModalContent } from "./Modal/ModalContent.svelte"
 export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"
+export { default as Notification } from "./Notification/Notification.svelte"
 export { default as SideNavigation } from "./SideNavigation/Navigation.svelte"
 export { default as SideNavigationItem } from "./SideNavigation/Item.svelte"
 export { default as DatePicker } from "./Form/DatePicker.svelte"
--- a/packages/builder/cypress/integration/createAutomation.spec.js
+++ b/packages/builder/cypress/integration/createAutomation.spec.js
@ -29,10 +29,10 @@ context("Create a automation", () => {
    cy.get(".setup").within(() => {
      cy.get(".spectrum-Picker-label").click()
      cy.contains("dog").click()
-      cy.get("input")
+      cy.get(".spectrum-Textfield-input")
        .first()
        .type("goodboy")
-      cy.get("input")
+      cy.get(".spectrum-Textfield-input")
        .eq(1)
        .type("11")
    })
@ -41,7 +41,7 @@ context("Create a automation", () => {
    cy.contains("Save Automation").click()

    // Activate Automation
-    cy.get("[aria-label=PlayCircle]").click()
+    cy.get("[data-cy=activate-automation]").click()
  })

  it("should add row when a new row is added", () => {
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/builder",
-  "version": "0.9.82",
+  "version": "0.9.99-alpha.6",
  "license": "AGPL-3.0",
  "private": true,
  "scripts": {
@ -65,10 +65,10 @@
    }
  },
  "dependencies": {
-    "@budibase/bbui": "^0.9.82",
-    "@budibase/client": "^0.9.82",
-    "@budibase/colorpicker": "1.1.2",
-    "@budibase/string-templates": "^0.9.82",
+    "@budibase/bbui": "^0.9.99-alpha.6",
+    "@budibase/client": "^0.9.99-alpha.6",
+    "@budibase/colorpicker": "^1.1.2",
+    "@budibase/string-templates": "^0.9.99-alpha.6",
    "@sentry/browser": "5.19.1",
    "@spectrum-css/page": "^3.0.1",
    "@spectrum-css/vars": "^3.0.1",
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@ -70,7 +70,7 @@ export const getFrontendStore = () => {
        url: application.url,
        layouts,
        screens,
-        theme: application.theme,
+        theme: application.theme || "spectrum--light",
        hasAppPackage: true,
        appInstance: application.instance,
        clientLibPath,
--- a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
@ -1,7 +1,7 @@
 <script>
  import { automationStore } from "builderStore"
  import { database } from "stores/backend"
-  import { notifications, Icon, Button, Modal, Heading } from "@budibase/bbui"
+  import { notifications, Button, Modal, Heading, Toggle } from "@budibase/bbui"
  import AutomationBlockSetup from "./AutomationBlockSetup.svelte"
  import CreateWebookModal from "../Shared/CreateWebhookModal.svelte"

@ -12,7 +12,7 @@
  $: automationLive = automation?.live

  function setAutomationLive(live) {
-    if (automation.live === live) {
+    if (automationLive === live) {
      return
    }
    automation.live = live
@ -48,20 +48,11 @@

 <div class="title">
  <Heading size="S">Setup</Heading>
-  <Icon
-    l
-    disabled={!automationLive}
-    hoverable={automationLive}
-    name="PauseCircle"
-    on:click={() => setAutomationLive(false)}
-  />
-  <Icon
-    l
-    name="PlayCircle"
-    disabled={automationLive}
-    hoverable={!automationLive}
-    data-cy="activate-automation"
-    on:click={() => setAutomationLive(true)}
+  <Toggle
+    value={automationLive}
+    on:change={() => setAutomationLive(!automationLive)}
+    dataCy="activate-automation"
+    text="Live"
  />
 </div>
 {#if $automationStore.selectedBlock}
@ -69,7 +60,7 @@
    bind:block={$automationStore.selectedBlock}
    {webhookModal}
  />
-{:else if $automationStore.selectedAutomation}
+{:else if automation}
  <div class="block-label">{automation.name}</div>
  <Button secondary on:click={testAutomation}>Test Automation</Button>
 {/if}
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@ -172,6 +172,11 @@
        alt: `Many ${table.name} rows → many ${linkTable.name} rows`,
        value: RelationshipTypes.MANY_TO_MANY,
      },
+      {
+        name: `One ${linkName} row → many ${thisName} rows`,
+        alt: `One ${linkTable.name} rows → many ${table.name} rows`,
+        value: RelationshipTypes.ONE_TO_MANY,
+      },
      {
        name: `One ${thisName} row → many ${linkName} rows`,
        alt: `One ${table.name} rows → many ${linkTable.name} rows`,
--- a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
@ -18,8 +18,8 @@

  const dispatch = createEventDispatcher()
  let bindingDrawer
-  $: tempValue = Array.isArray(value) ? value : []
  $: readableValue = runtimeToReadableBinding(bindings, value)
+  $: tempValue = readableValue

  const handleClose = () => {
    onChange(tempValue)
@ -56,7 +56,7 @@
    slot="body"
    value={readableValue}
    close={handleClose}
-    on:update={event => (tempValue = event.detail)}
+    on:change={event => (tempValue = event.detail)}
    bindableProperties={bindings}
  />
 </Drawer>
--- a/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte
+++ b/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte
@ -24,7 +24,7 @@

 <div>
  <Select
-    value={$store.theme || "spectrum--light"}
+    value={$store.theme}
    options={themeOptions}
    placeholder={null}
    on:change={e => store.actions.theme.save(e.detail)}
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@ -49,6 +49,7 @@
    "children": [
      "heading",
      "text",
+      "divider",
      "image",
      "backgroundimage",
      "link",
--- a/packages/builder/src/components/design/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/design/AppPreview/iframeTemplate.js
@ -47,6 +47,18 @@ export default `
          return
        }

+        // Parse received message
+        // If parsing fails, just ignore and wait for the next message
+        let parsed
+        try {
+          parsed = JSON.parse(event.data)
+        } catch (error) {
+          // Ignore
+        }
+        if (!parsed) {
+          return
+        }
+        
        // Extract data from message
        const {
          selectedComponentId,
@ -55,7 +67,7 @@ export default `
          previewType,
          appId,
          theme
-        } = JSON.parse(event.data)
+        } = parsed

        // Set some flags so the app knows we're in the builder
        window["##BUDIBASE_IN_BUILDER##"] = true
--- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
@ -11,6 +11,7 @@
  export let componentDefinition
  export let componentInstance
  export let assetInstance
+  export let bindings

  const layoutDefinition = []
  const screenDefinition = [
@ -65,6 +66,7 @@
            options: setting.options,
            placeholder: setting.placeholder,
          }}
+          {bindings}
        />
      {/if}
    {/each}
--- a/packages/builder/src/components/design/PropertiesPanel/ConditionalUISection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ConditionalUISection.svelte
@ -4,6 +4,7 @@
  import ConditionalUIDrawer from "./PropertyControls/ConditionalUIDrawer.svelte"

  export let componentInstance
+  export let bindings

  let tempValue
  let drawer
@ -32,5 +33,5 @@
    Show, hide and update components in response to conditions being met.
  </svelte:fragment>
  <Button cta slot="buttons" on:click={() => save()}>Save</Button>
-  <ConditionalUIDrawer slot="body" bind:conditions={tempValue} />
+  <ConditionalUIDrawer slot="body" bind:conditions={tempValue} {bindings} />
 </Drawer>
--- a/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte
@ -4,6 +4,7 @@

  export let componentDefinition
  export let componentInstance
+  export let bindings

  const getStyles = def => {
    if (!def?.styles?.length) {
@ -29,6 +30,7 @@
      columns={style.columns}
      properties={style.settings}
      {componentInstance}
+      {bindings}
    />
  {/each}
 {/if}
--- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
@ -1,27 +1,45 @@
 <script>
-  import { store, selectedComponent } from "builderStore"
+  import { store, selectedComponent, currentAsset } from "builderStore"
  import { Tabs, Tab } from "@budibase/bbui"
  import ScreenSettingsSection from "./ScreenSettingsSection.svelte"
  import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
  import DesignSection from "./DesignSection.svelte"
  import CustomStylesSection from "./CustomStylesSection.svelte"
  import ConditionalUISection from "./ConditionalUISection.svelte"
+  import { getBindableProperties } from "builderStore/dataBinding"

  $: componentInstance = $selectedComponent
  $: componentDefinition = store.actions.components.getDefinition(
    $selectedComponent?._component
  )
+  $: bindings = getBindableProperties($currentAsset, $store.selectedComponentId)
 </script>

 <Tabs selected="Settings" noPadding>
  <Tab title="Settings">
    <div class="container">
      {#key componentInstance?._id}
-        <ScreenSettingsSection {componentInstance} {componentDefinition} />
-        <ComponentSettingsSection {componentInstance} {componentDefinition} />
-        <DesignSection {componentInstance} {componentDefinition} />
-        <CustomStylesSection {componentInstance} {componentDefinition} />
-        <ConditionalUISection {componentInstance} {componentDefinition} />
+        <ScreenSettingsSection
+          {componentInstance}
+          {componentDefinition}
+          {bindings}
+        />
+        <ComponentSettingsSection
+          {componentInstance}
+          {componentDefinition}
+          {bindings}
+        />
+        <DesignSection {componentInstance} {componentDefinition} {bindings} />
+        <CustomStylesSection
+          {componentInstance}
+          {componentDefinition}
+          {bindings}
+        />
+        <ConditionalUISection
+          {componentInstance}
+          {componentDefinition}
+          {bindings}
+        />
      {/key}
    </div>
  </Tab>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ConditionalUIDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ConditionalUIDrawer.svelte
@ -13,12 +13,12 @@
  import { generate } from "shortid"
  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
  import { OperatorOptions, getValidOperatorsForType } from "helpers/lucene"
-  import { getBindableProperties } from "builderStore/dataBinding"
-  import { currentAsset, selectedComponent, store } from "builderStore"
+  import { selectedComponent, store } from "builderStore"
  import { getComponentForSettingType } from "./componentSettings"
  import PropertyControl from "./PropertyControl.svelte"

  export let conditions = []
+  export let bindings = []

  const flipDurationMs = 150
  const actionOptions = [
@ -64,10 +64,6 @@
      value: setting.key,
    }
  })
-  $: bindableProperties = getBindableProperties(
-    $currentAsset,
-    $store.selectedComponentId
-  )
  $: conditions.forEach(link => {
    if (!link.id) {
      link.id = generate()
@ -101,6 +97,12 @@
    conditions = conditions.filter(link => link.id !== id)
  }

+  const duplicateCondition = id => {
+    const condition = conditions.find(link => link.id === id)
+    const duplicate = { ...condition, id: generate() }
+    conditions = [...conditions, duplicate]
+  }
+
  const handleFinalize = e => {
    updateConditions(e)
    dragDisabled = true
@ -188,6 +190,7 @@
                      placeholder: getSettingDefinition(condition.setting)
                        .placeholder,
                    }}
+                    {bindings}
                  />
                {:else}
                  <Select disabled placeholder=" " />
@ -195,7 +198,7 @@
              {/if}
              <div>IF</div>
              <DrawerBindableInput
-                bindings={bindableProperties}
+                {bindings}
                placeholder="Value"
                value={condition.newValue}
                on:change={e => (condition.newValue = e.detail)}
@ -216,7 +219,7 @@
              {#if ["string", "number"].includes(condition.valueType)}
                <DrawerBindableInput
                  disabled={condition.noValue}
-                  bindings={bindableProperties}
+                  {bindings}
                  placeholder="Value"
                  value={condition.referenceValue}
                  on:change={e => (condition.referenceValue = e.detail)}
@ -235,6 +238,12 @@
                  bind:value={condition.referenceValue}
                />
              {/if}
+              <Icon
+                name="Duplicate"
+                hoverable
+                size="S"
+                on:click={() => duplicateCondition(condition.id)}
+              />
              <Icon
                name="Close"
                hoverable
@ -273,7 +282,7 @@
    gap: var(--spacing-l);
    display: grid;
    align-items: center;
-    grid-template-columns: auto 1fr auto 1fr 1fr 1fr 1fr auto;
+    grid-template-columns: auto 1fr auto 1fr 1fr 1fr 1fr auto auto;
    border-radius: var(--border-radius-s);
    transition: background-color ease-in-out 130ms;
  }
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
@ -1,8 +1,5 @@
 <script>
-  import {
-    getBindableProperties,
-    getDataProviderComponents,
-  } from "builderStore/dataBinding"
+  import { getDataProviderComponents } from "builderStore/dataBinding"
  import {
    Button,
    Popover,
@ -31,6 +28,7 @@
  export let value = {}
  export let otherSources
  export let showAllQueries
+  export let bindings = []

  $: text = value?.label ?? "Choose an option"
  $: tables = $tablesStore.list.map(m => ({
@ -60,10 +58,6 @@
      parameters: query.parameters,
      type: "query",
    }))
-  $: bindableProperties = getBindableProperties(
-    $currentAsset,
-    $store.selectedComponentId
-  )
  $: dataProviders = getDataProviderComponents(
    $currentAsset,
    $store.selectedComponentId
@ -75,13 +69,13 @@
    type: "provider",
    schema: provider.schema,
  }))
-  $: queryBindableProperties = bindableProperties.map(property => ({
+  $: queryBindableProperties = bindings.map(property => ({
    ...property,
    category: property.type === "instance" ? "Component" : "Table",
    label: property.readableBinding,
    path: property.readableBinding,
  }))
-  $: links = bindableProperties
+  $: links = bindings
    .filter(x => x.fieldSchema?.type === "link")
    .map(property => {
      return {
@ -138,7 +132,7 @@
              bind:customParams={value.queryParams}
              parameters={queries.find(query => query._id === value._id)
                .parameters}
-              bindings={queryBindableProperties}
+              {bindings}
            />
          {/if}
          <IntegrationQueryEditor
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
@ -13,10 +13,10 @@
  import { generate } from "shortid"

  const flipDurationMs = 150
-
  const EVENT_TYPE_KEY = "##eventHandlerType"

  export let actions
+  export let bindings = []

  // dndzone needs an id on the array items, so this adds some temporary ones.
  $: {
@ -121,6 +121,7 @@
        <svelte:component
          this={selectedActionComponent}
          parameters={selectedAction.parameters}
+          {bindings}
        />
      </div>
    {/if}
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventPropertyControl.svelte
@ -9,6 +9,7 @@

  export let value = []
  export let name
+  export let bindings

  let drawer

@ -57,5 +58,5 @@
    Define what actions to run.
  </svelte:fragment>
  <Button cta slot="buttons" on:click={saveEventData}>Save</Button>
-  <EventEditor slot="body" bind:actions={value} eventType={name} />
+  <EventEditor slot="body" bind:actions={value} eventType={name} {bindings} />
 </Drawer>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ClearForm.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ClearForm.svelte
@ -0,0 +1,35 @@
+<script>
+  import { Select, Label } from "@budibase/bbui"
+  import { currentAsset, store } from "builderStore"
+  import { getActionProviderComponents } from "builderStore/dataBinding"
+
+  export let parameters
+
+  $: actionProviders = getActionProviderComponents(
+    $currentAsset,
+    $store.selectedComponentId,
+    "ClearForm"
+  )
+</script>
+
+<div class="root">
+  <Label small>Form</Label>
+  <Select
+    bind:value={parameters.componentId}
+    options={actionProviders}
+    getOptionLabel={x => x._instanceName}
+    getOptionValue={x => x._id}
+  />
+</div>
+
+<style>
+  .root {
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    grid-template-columns: 60px 1fr;
+    align-items: center;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+</style>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenModal.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenModal.svelte
@ -0,0 +1,17 @@
+<script>
+  import { Body } from "@budibase/bbui"
+</script>
+
+<div class="root">
+  <Body size="S">This action doesn't require any additional settings.</Body>
+  <Body size="S">
+    This action won't do anything if there isn't a screen modal open.
+  </Body>
+</div>
+
+<style>
+  .root {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+</style>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/DeleteRow.svelte
@ -1,14 +1,12 @@
 <script>
  import { Select, Label, Checkbox, Input } from "@budibase/bbui"
-  import { store, currentAsset } from "builderStore"
  import { tables } from "stores/backend"
-  import { getBindableProperties } from "builderStore/dataBinding"
  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"

  export let parameters
+  export let bindings = []

  $: tableOptions = $tables.list || []
-  $: bindings = getBindableProperties($currentAsset, $store.selectedComponentId)
 </script>

 <div class="root">
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
@ -1,21 +1,16 @@
 <script>
  import { Select, Layout, Input, Checkbox } from "@budibase/bbui"
-  import { store, currentAsset } from "builderStore"
  import { datasources, integrations, queries } from "stores/backend"
-  import { getBindableProperties } from "builderStore/dataBinding"
  import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
  import IntegrationQueryEditor from "components/integration/index.svelte"

  export let parameters
+  export let bindings = []

  $: query = $queries.list.find(q => q._id === parameters.queryId)
  $: datasource = $datasources.list.find(
    ds => ds._id === parameters.datasourceId
  )
-  $: bindableProperties = getBindableProperties(
-    $currentAsset,
-    $store.selectedComponentId
-  )

  function fetchQueryDefinition(query) {
    const source = $datasources.list.find(
@ -61,7 +56,7 @@
          <ParameterBuilder
            bind:customParams={parameters.queryParams}
            parameters={query.parameters}
-            bindings={bindableProperties}
+            {bindings}
          />
          <IntegrationQueryEditor
            height={200}
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
@ -1,12 +1,9 @@
 <script>
-  import { Label } from "@budibase/bbui"
-  import { getBindableProperties } from "builderStore/dataBinding"
-  import { currentAsset, store } from "builderStore"
+  import { Label, Checkbox } from "@budibase/bbui"
  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"

  export let parameters
-
-  $: bindings = getBindableProperties($currentAsset, $store.selectedComponentId)
+  export let bindings = []
 </script>

 <div class="root">
@ -18,19 +15,17 @@
    on:change={value => (parameters.url = value.detail)}
    {bindings}
  />
+  <div />
+  <Checkbox text="Open screen in modal" bind:value={parameters.peek} />
 </div>

 <style>
  .root {
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
+    display: grid;
+    align-items: center;
+    gap: var(--spacing-m);
+    grid-template-columns: auto 1fr;
    max-width: 800px;
    margin: 0 auto;
  }
-
-  .root :global(> div) {
-    flex: 1;
-    margin-left: var(--spacing-l);
-  }
 </style>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
@ -1,7 +1,5 @@
 <script>
  import { Label, ActionButton, Button, Select, Input } from "@budibase/bbui"
-  import { store, currentAsset } from "builderStore"
-  import { getBindableProperties } from "builderStore/dataBinding"
  import { createEventDispatcher } from "svelte"
  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"

@ -11,13 +9,10 @@
  export let schemaFields
  export let fieldLabel = "Column"
  export let valueLabel = "Value"
+  export let bindings = []

  let fields = Object.entries(parameterFields || {})
  $: onChange(fields)
-  $: bindableProperties = getBindableProperties(
-    $currentAsset,
-    $store.selectedComponentId
-  )

  const addField = () => {
    fields = [...fields.filter(field => field[0]), ["", ""]]
@ -69,7 +64,7 @@
    <DrawerBindableInput
      title={`Value for "${field[0]}"`}
      value={field[1]}
-      bindings={bindableProperties}
+      {bindings}
      on:change={event => updateFieldValue(idx, event.detail)}
    />
    <ActionButton
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte
@ -9,6 +9,7 @@
  import SaveFields from "./SaveFields.svelte"

  export let parameters
+  export let bindings = []

  $: dataProviderComponents = getDataProviderComponents(
    $currentAsset,
@ -70,6 +71,7 @@
        parameterFields={parameters.fields}
        {schemaFields}
        on:change={onFieldsChanged}
+        {bindings}
      />
    </div>
  {/if}
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte
@ -3,13 +3,14 @@
  import { automationStore } from "builderStore"
  import SaveFields from "./SaveFields.svelte"

+  export let parameters = {}
+  export let bindings = []
+
  const AUTOMATION_STATUS = {
    NEW: "new",
    EXISTING: "existing",
  }

-  export let parameters = {}
-
  let automationStatus = parameters.automationId
    ? AUTOMATION_STATUS.EXISTING
    : AUTOMATION_STATUS.NEW
@ -109,6 +110,7 @@
        parameterFields={parameters.fields}
        fieldLabel="Field"
        on:change={onFieldsChanged}
+        {bindings}
      />
    {/key}
  </div>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
@ -5,6 +5,8 @@ import ExecuteQuery from "./ExecuteQuery.svelte"
 import TriggerAutomation from "./TriggerAutomation.svelte"
 import ValidateForm from "./ValidateForm.svelte"
 import LogOut from "./LogOut.svelte"
+import ClearForm from "./ClearForm.svelte"
+import CloseScreenModal from "./CloseScreenModal.svelte"

 // Defines which actions are available to configure in the front end.
 // Unfortunately the "name" property is used as the identifier so please don't
@ -42,4 +44,12 @@ export default [
    name: "Log Out",
    component: LogOut,
  },
+  {
+    name: "Clear Form",
+    component: ClearForm,
+  },
+  {
+    name: "Close Screen Modal",
+    component: CloseScreenModal,
+  },
 ]
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte
@ -20,6 +20,8 @@

  export let value = []
  export let componentInstance
+  export let bindings = []
+
  let drawer
  let tempValue = value || []

@ -51,7 +53,7 @@
          constraints.
        {/if}
      </Body>
-      <LuceneFilterBuilder bind:value={tempValue} {schemaFields} />
+      <LuceneFilterBuilder bind:value={tempValue} {schemaFields} {bindings} />
    </Layout>
  </DrawerContent>
 </Drawer>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/LuceneFilterBuilder.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/LuceneFilterBuilder.svelte
@ -7,20 +7,15 @@
    Combobox,
    Input,
  } from "@budibase/bbui"
-  import { store, currentAsset } from "builderStore"
-  import { getBindableProperties } from "builderStore/dataBinding"
  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
  import { generate } from "shortid"
  import { OperatorOptions, getValidOperatorsForType } from "helpers/lucene"

  export let schemaFields
  export let value
+  export let bindings = []

  const BannedTypes = ["link", "attachment"]
-  $: bindableProperties = getBindableProperties(
-    $currentAsset,
-    $store.selectedComponentId
-  )
  $: fieldOptions = (schemaFields ?? [])
    .filter(field => !BannedTypes.includes(field.type))
    .map(field => field.name)
@ -101,7 +96,7 @@
          title={`Value for "${expression.field}"`}
          value={expression.value}
          placeholder="Value"
-          bindings={bindableProperties}
+          {bindings}
          on:change={event => (expression.value = event.detail)}
        />
      {:else if ["string", "longform", "number"].includes(expression.type)}
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@ -1,8 +1,6 @@
 <script>
  import { Button, Icon, Drawer, Label } from "@budibase/bbui"
-  import { store, currentAsset } from "builderStore"
  import {
-    getBindableProperties,
    readableToRuntimeBinding,
    runtimeToReadableBinding,
  } from "builderStore/dataBinding"
@ -18,18 +16,15 @@
  export let value = null
  export let props = {}
  export let onChange = () => {}
+  export let bindings = []

  let bindingDrawer
  let anchor
  let valid

-  $: bindableProperties = getBindableProperties(
-    $currentAsset,
-    $store.selectedComponentId
-  )
-  $: safeValue = getSafeValue(value, props.defaultValue, bindableProperties)
+  $: safeValue = getSafeValue(value, props.defaultValue, bindings)
  $: tempValue = safeValue
-  $: replaceBindings = val => readableToRuntimeBinding(bindableProperties, val)
+  $: replaceBindings = val => readableToRuntimeBinding(bindings, val)

  const handleClose = () => {
    handleChange(tempValue)
@ -61,8 +56,8 @@

  // The "safe" value is the value with any bindings made readable
  // If there is no value set, any default value is used
-  const getSafeValue = (value, defaultValue, bindableProperties) => {
-    const enriched = runtimeToReadableBinding(bindableProperties, value)
+  const getSafeValue = (value, defaultValue, bindings) => {
+    const enriched = runtimeToReadableBinding(bindings, value)
    return enriched == null && defaultValue !== undefined
      ? defaultValue
      : enriched
@ -83,6 +78,7 @@
      updateOnChange={false}
      on:change={handleChange}
      onChange={handleChange}
+      {bindings}
      name={key}
      text={label}
      {type}
@ -108,7 +104,7 @@
          bind:valid
          value={safeValue}
          on:change={e => (tempValue = e.detail)}
-          {bindableProperties}
+          bindableProperties={bindings}
        />
      </Drawer>
    {/if}
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte
@ -3,10 +3,11 @@
  import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"

  export let value
+  export let bindings

  $: urlOptions = $store.screens
    .map(screen => screen.routing?.route)
    .filter(x => x != null)
 </script>

-<DrawerBindableCombobox {value} on:change options={urlOptions} />
+<DrawerBindableCombobox {value} {bindings} on:change options={urlOptions} />
--- a/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
@ -9,6 +9,7 @@
  import { FrontendTypes } from "constants"

  export let componentInstance
+  export let bindings

  function setAssetProps(name, value, parser) {
    if (parser && typeof parser === "function") {
@ -53,6 +54,7 @@
        key={def.key}
        value={deepGet($currentAsset, def.key)}
        on:change={event => setAssetProps(def.key, event.detail, def.parser)}
+        {bindings}
      />
    {/each}
  </DetailSummary>
--- a/packages/builder/src/components/design/PropertiesPanel/StyleSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/StyleSection.svelte
@ -7,6 +7,7 @@
  export let columns
  export let properties
  export let componentInstance
+  export let bindings = []

  $: style = componentInstance._styles.normal || {}
  $: changed = properties?.some(prop => hasPropChanged(style, prop)) ?? false
@ -36,6 +37,7 @@
          value={style[prop.key]}
          onChange={val => store.actions.components.updateStyle(prop.key, val)}
          props={getControlProps(prop)}
+          {bindings}
        />
      </div>
    {/each}
--- a/packages/builder/src/components/integration/ExtraQueryConfig.svelte
+++ b/packages/builder/src/components/integration/ExtraQueryConfig.svelte
@ -0,0 +1,48 @@
+<script>
+  import { Select, Label, Input } from "@budibase/bbui"
+
+  /**
+   * This component takes the query object and populates the 'extra' property
+   * when a datasource has specified a configuration for these fields in SCHEMA.extra
+   */
+  export let populateExtraQuery
+  export let config
+  export let query
+
+  $: extraFields = Object.keys(config).map(key => ({
+    ...config[key],
+    key,
+  }))
+
+  $: extraQueryFields = query.fields.extra || {}
+</script>
+
+{#each extraFields as { key, displayName, type }}
+  <div class="config-field">
+    <Label>{displayName}</Label>
+    {#if type === "string"}
+      <Input
+        on:change={() => populateExtraQuery(extraQueryFields)}
+        bind:value={extraQueryFields[key]}
+      />
+    {/if}
+
+    {#if type === "list"}
+      <Select
+        on:change={() => populateExtraQuery(extraQueryFields)}
+        bind:value={extraQueryFields[key]}
+        options={config[key].data[query.queryVerb]}
+        getOptionLabel={current => current}
+      />
+    {/if}
+  </div>
+{/each}
+
+<style>
+  .config-field {
+    display: grid;
+    grid-template-columns: 20% 1fr;
+    grid-gap: var(--spacing-l);
+    align-items: center;
+  }
+</style>
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@ -15,6 +15,7 @@
  } from "@budibase/bbui"
  import { notifications, Divider } from "@budibase/bbui"
  import api from "builderStore/api"
+  import ExtraQueryConfig from "./ExtraQueryConfig.svelte"
  import IntegrationQueryEditor from "components/integration/index.svelte"
  import ExternalDataSourceTable from "components/backend/DataTable/ExternalDataSourceTable.svelte"
  import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
@ -60,6 +61,14 @@
    fields = fields
  }

+  function resetDependentFields() {
+    if (query.fields.extra) query.fields.extra = {}
+  }
+
+  function populateExtraQuery(extraQueryFields) {
+    query.fields.extra = extraQueryFields
+  }
+
  async function previewQuery() {
    try {
      const response = await api.post(`/api/queries/preview`, {
@ -127,11 +136,19 @@
        <Label>Function</Label>
        <Select
          bind:value={query.queryVerb}
+          on:change={resetDependentFields}
          options={Object.keys(queryConfig)}
          getOptionLabel={verb =>
            queryConfig[verb]?.displayName || capitalise(verb)}
        />
      </div>
+      {#if integrationInfo?.extra && query.queryVerb}
+        <ExtraQueryConfig
+          {query}
+          {populateExtraQuery}
+          config={integrationInfo.extra}
+        />
+      {/if}
      <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
    {/if}
  </div>
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@ -15,6 +15,7 @@
  export let exportApp
  export let viewApp
  export let editApp
+  export let updateApp
  export let deleteApp
  export let unpublishApp
  export let releaseLock
@ -53,6 +54,9 @@
          </MenuItem>
        {/if}
        {#if !app.deployed}
+          <MenuItem on:click={() => updateApp(app)} icon="Edit">
+            Update
+          </MenuItem>
          <MenuItem on:click={() => deleteApp(app)} icon="Delete">
            Delete
          </MenuItem>
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@ -14,6 +14,7 @@
  export let exportApp
  export let viewApp
  export let editApp
+  export let updateApp
  export let deleteApp
  export let unpublishApp
  export let releaseLock
@ -82,6 +83,7 @@
      </MenuItem>
    {/if}
    {#if !app.deployed}
+      <MenuItem on:click={() => updateApp(app)} icon="Edit">Update</MenuItem>
      <MenuItem on:click={() => deleteApp(app)} icon="Delete">Delete</MenuItem>
    {/if}
  </ActionMenu>
--- a/packages/builder/src/components/start/UpdateAppModal.svelte
+++ b/packages/builder/src/components/start/UpdateAppModal.svelte
@ -0,0 +1,111 @@
+<script>
+  import { writable, get as svelteGet } from "svelte/store"
+  import {
+    notifications,
+    Input,
+    Modal,
+    ModalContent,
+    Body,
+  } from "@budibase/bbui"
+  import { hostingStore } from "builderStore"
+  import { apps } from "stores/portal"
+  import { string, object } from "yup"
+  import { onMount } from "svelte"
+  import { capitalise } from "helpers"
+
+  const values = writable({ name: null })
+  const errors = writable({})
+  const touched = writable({})
+  const validator = {
+    name: string().required("Your application must have a name"),
+  }
+
+  export let app
+
+  let modal
+  let valid = false
+  let dirty = false
+  $: checkValidity($values, validator)
+  $: {
+    // prevent validation by setting name to undefined without an app
+    if (app) {
+      $values.name = app?.name
+    }
+  }
+
+  onMount(async () => {
+    await hostingStore.actions.fetchDeployedApps()
+    const existingAppNames = svelteGet(hostingStore).deployedAppNames
+    validator.name = string()
+      .required("Your application must have a name")
+      .test(
+        "non-existing-app-name",
+        "Another app with the same name already exists",
+        value => {
+          return !existingAppNames.some(
+            appName => dirty && appName.toLowerCase() === value.toLowerCase()
+          )
+        }
+      )
+  })
+
+  const checkValidity = async (values, validator) => {
+    const obj = object().shape(validator)
+    Object.keys(validator).forEach(key => ($errors[key] = null))
+    try {
+      await obj.validate(values, { abortEarly: false })
+    } catch (validationErrors) {
+      validationErrors.inner.forEach(error => {
+        $errors[error.path] = capitalise(error.message)
+      })
+    }
+    valid = await obj.isValid(values)
+  }
+
+  async function updateApp() {
+    try {
+      // Update App
+      await apps.update(app.instance._id, $values.name)
+      hide()
+    } catch (error) {
+      console.error(error)
+      notifications.error(error)
+    }
+  }
+
+  export const show = () => {
+    modal.show()
+  }
+  export const hide = () => {
+    modal.hide()
+  }
+
+  const onCancel = () => {
+    hide()
+  }
+
+  const onShow = () => {
+    dirty = false
+  }
+</script>
+
+<Modal bind:this={modal} on:hide={onCancel} on:show={onShow}>
+  <ModalContent
+    title={"Update app"}
+    confirmText={"Update app"}
+    onConfirm={updateApp}
+    disabled={!(valid && dirty)}
+  >
+    <Body size="S">
+      Give your new app a name, and choose which groups have access (paid plans
+      only).
+    </Body>
+    <Input
+      bind:value={$values.name}
+      error={$touched.name && $errors.name}
+      on:blur={() => ($touched.name = true)}
+      on:change={() => (dirty = true)}
+      label="Name"
+    />
+  </ModalContent>
+</Modal>
--- a/packages/builder/src/pages/builder/_layout.svelte
+++ b/packages/builder/src/pages/builder/_layout.svelte
@ -4,7 +4,10 @@
  import { onMount } from "svelte"

  let loaded = false
+
+  $: multiTenancyEnabled = $admin.multiTenancy
  $: hasAdminUser = !!$admin?.checklist?.adminUser
+  $: tenantSet = $auth.tenantSet

  onMount(async () => {
    await admin.init()
@ -12,9 +15,14 @@
    loaded = true
  })

-  // Force creation of an admin user if one doesn't exist
  $: {
-    if (loaded && !hasAdminUser) {
+    const apiReady = $admin.loaded && $auth.loaded
+    // if tenant is not set go to it
+    if (loaded && apiReady && multiTenancyEnabled && !tenantSet) {
+      $redirect("./auth/org")
+    }
+    // Force creation of an admin user if one doesn't exist
+    else if (loaded && apiReady && !hasAdminUser) {
      $redirect("./admin")
    }
  }
@ -29,7 +37,7 @@
      !$isActive("./invite")
    ) {
      const returnUrl = encodeURIComponent(window.location.pathname)
-      $redirect("./auth/login?", { returnUrl })
+      $redirect("./auth?", { returnUrl })
    } else if ($auth?.user?.forceResetPassword) {
      $redirect("./auth/reset")
    }
--- a/packages/builder/src/pages/builder/admin/index.svelte
+++ b/packages/builder/src/pages/builder/admin/index.svelte
@ -6,20 +6,25 @@
    Layout,
    Input,
    Body,
+    ActionButton,
  } from "@budibase/bbui"
  import { goto } from "@roxi/routify"
  import api from "builderStore/api"
-  import { admin } from "stores/portal"
+  import { admin, auth } from "stores/portal"
  import PasswordRepeatInput from "components/common/users/PasswordRepeatInput.svelte"
  import Logo from "assets/bb-emblem.svg"

  let adminUser = {}
  let error

+  $: tenantId = $auth.tenantId
+  $: multiTenancyEnabled = $admin.multiTenancy
+
  async function save() {
    try {
+      adminUser.tenantId = tenantId
      // Save the admin user
-      const response = await api.post(`/api/admin/users/init`, adminUser)
+      const response = await api.post(`/api/global/users/init`, adminUser)
      const json = await response.json()
      if (response.status !== 200) {
        throw new Error(json.message)
@ -47,9 +52,22 @@
        <Input label="Email" bind:value={adminUser.email} />
        <PasswordRepeatInput bind:password={adminUser.password} bind:error />
      </Layout>
+      <Layout gap="XS" noPadding>
        <Button cta disabled={error} on:click={save}>
          Create super admin user
        </Button>
+        {#if multiTenancyEnabled}
+          <ActionButton
+            quiet
+            on:click={() => {
+              admin.unload()
+              $goto("../auth/org")
+            }}
+          >
+            Change organisation
+          </ActionButton>
+        {/if}
+      </Layout>
    </Layout>
  </div>
 </section>
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/CreateEditRelationship/CreateEditRelationship.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/CreateEditRelationship/CreateEditRelationship.svelte
@ -158,10 +158,16 @@
        fieldName: fromTable.primary[0],
      }
    } else {
+      // the relateFrom.fieldName should remain the same, as it is the foreignKey in the other
+      // table, this is due to the way that budibase represents relationships, the fieldName in a
+      // link column schema is the column linked to (FK in this case). The foreignKey column is
+      // essentially what is linked to in the from table, this is unique to SQL as this isn't a feature
+      // of Budibase internal tables.
+      // Essentially this means the fieldName is what we are linking to in the other table, and the
+      // foreignKey is what is linking out of the current table.
      relateFrom = {
        ...relateFrom,
-        foreignKey: relateFrom.fieldName,
-        fieldName: fromTable.primary[0],
+        foreignKey: fromTable.primary[0],
      }
      relateTo = {
        ...relateTo,
--- a/packages/builder/src/pages/builder/apps/index.svelte
+++ b/packages/builder/src/pages/builder/apps/index.svelte
@ -54,7 +54,11 @@
            </Layout>
            <ActionMenu align="right">
              <div slot="control" class="avatar">
-                <Avatar size="M" initials={$auth.initials} />
+                <Avatar
+                  size="M"
+                  initials={$auth.initials}
+                  url={$auth.user.pictureUrl}
+                />
                <Icon size="XL" name="ChevronDown" />
              </div>
              <MenuItem icon="UserEdit" on:click={() => userInfoModal.show()}>
--- a/packages/builder/src/pages/builder/auth/_components/GoogleButton.svelte
+++ b/packages/builder/src/pages/builder/auth/_components/GoogleButton.svelte
@ -1,14 +1,18 @@
 <script>
  import { ActionButton } from "@budibase/bbui"
  import GoogleLogo from "assets/google-logo.png"
-  import { organisation } from "stores/portal"
+  import { auth, organisation } from "stores/portal"

+  let show
+
+  $: tenantId = $auth.tenantId
  $: show = $organisation.google
 </script>

 {#if show}
  <ActionButton
-    on:click={() => window.open("/api/admin/auth/google", "_blank")}
+    on:click={() =>
+      window.open(`/api/global/auth/${tenantId}/google`, "_blank")}
  >
    <div class="inner">
      <img src={GoogleLogo} alt="google icon" />
--- a/packages/builder/src/pages/builder/auth/_components/OIDCButton.svelte
+++ b/packages/builder/src/pages/builder/auth/_components/OIDCButton.svelte
@ -6,7 +6,7 @@
  import OktaLogo from "assets/okta-logo.png"
  import OneLoginLogo from "assets/onelogin-logo.png"

-  import { oidc, organisation } from "stores/portal"
+  import { oidc, organisation, auth } from "stores/portal"
  import { onMount } from "svelte"

  $: show = $organisation.oidc
@ -31,7 +31,10 @@
 {#if show}
  <ActionButton
    on:click={() =>
-      window.open(`/api/admin/auth/oidc/configs/${$oidc.uuid}`, "_blank")}
+      window.open(
+        `/api/global/auth/${$auth.tenantId}/oidc/configs/${$oidc.uuid}`,
+        "_blank"
+      )}
  >
    <div class="inner">
      <img {src} alt="oidc icon" />
--- a/packages/builder/src/pages/builder/auth/forgot.svelte
+++ b/packages/builder/src/pages/builder/auth/forgot.svelte
@ -6,10 +6,12 @@
    Layout,
    Body,
    Heading,
+    ActionButton,
  } from "@budibase/bbui"
  import { organisation, auth } from "stores/portal"
  import Logo from "assets/bb-emblem.svg"
  import { onMount } from "svelte"
+  import { goto } from "@roxi/routify"

  let email = ""

@ -41,9 +43,12 @@
        </Body>
        <Input label="Email" bind:value={email} />
      </Layout>
+      <Layout gap="XS" nopadding>
        <Button cta on:click={forgot} disabled={!email}>
          Reset your password
        </Button>
+        <ActionButton quiet on:click={() => $goto("../")}>Back</ActionButton>
+      </Layout>
    </Layout>
  </div>
 </div>
--- a/packages/builder/src/pages/builder/auth/index.svelte
+++ b/packages/builder/src/pages/builder/auth/index.svelte
@ -1,4 +1,24 @@
 <script>
  import { redirect } from "@roxi/routify"
+  import { auth, admin } from "stores/portal"
+  import { onMount } from "svelte"
+
+  $: tenantSet = $auth.tenantSet
+  $: multiTenancyEnabled = $admin.multiTenancy
+
+  let loaded = false
+
+  $: {
+    if (loaded && multiTenancyEnabled && !tenantSet) {
+      $redirect("./org")
+    } else if (loaded) {
      $redirect("./login")
+    }
+  }
+
+  onMount(async () => {
+    await admin.init()
+    await auth.checkQueryString()
+    loaded = true
+  })
 </script>
--- a/packages/builder/src/pages/builder/auth/login.svelte
+++ b/packages/builder/src/pages/builder/auth/login.svelte
@ -10,7 +10,7 @@
    notifications,
  } from "@budibase/bbui"
  import { goto, params } from "@roxi/routify"
-  import { auth, organisation, oidc } from "stores/portal"
+  import { auth, organisation, oidc, admin } from "stores/portal"
  import GoogleButton from "./_components/GoogleButton.svelte"
  import OIDCButton from "./_components/OIDCButton.svelte"
  import Logo from "assets/bb-emblem.svg"
@ -18,8 +18,10 @@

  let username = ""
  let password = ""
+  let loaded = false

  $: company = $organisation.company || "Budibase"
+  $: multiTenancyEnabled = $admin.multiTenancy

  async function login() {
    try {
@ -27,7 +29,6 @@
        username,
        password,
      })
-      notifications.success("Logged in successfully")
      if ($auth?.user?.forceResetPassword) {
        $goto("./reset")
      } else {
@ -50,6 +51,7 @@

  onMount(async () => {
    await organisation.init()
+    loaded = true
  })
 </script>

@ -61,8 +63,10 @@
        <img alt="logo" src={$organisation.logoUrl || Logo} />
        <Heading>Sign in to {company}</Heading>
      </Layout>
+      {#if loaded}
        <GoogleButton />
        <OIDCButton oidcIcon={$oidc.logo} oidcName={$oidc.name} />
+      {/if}
      <Divider noGrid />
      <Layout gap="XS" noPadding>
        <Body size="S" textAlign="center">Sign in with email</Body>
@ -79,6 +83,17 @@
        <ActionButton quiet on:click={() => $goto("./forgot")}>
          Forgot password?
        </ActionButton>
+        {#if multiTenancyEnabled}
+          <ActionButton
+            quiet
+            on:click={() => {
+              admin.unload()
+              $goto("./org")
+            }}
+          >
+            Change organisation
+          </ActionButton>
+        {/if}
      </Layout>
    </Layout>
  </div>
--- a/packages/builder/src/pages/builder/auth/org.svelte
+++ b/packages/builder/src/pages/builder/auth/org.svelte
@ -0,0 +1,73 @@
+<script>
+  import { Body, Button, Divider, Heading, Input, Layout } from "@budibase/bbui"
+  import { goto } from "@roxi/routify"
+  import { auth, admin } from "stores/portal"
+  import Logo from "assets/bb-emblem.svg"
+  import { get } from "svelte/store"
+  import { onMount } from "svelte"
+
+  let tenantId = get(auth).tenantSet ? get(auth).tenantId : ""
+  $: multiTenancyEnabled = $admin.multiTenancy
+
+  async function setOrg() {
+    if (tenantId == null || tenantId === "") {
+      tenantId = "default"
+    }
+    await auth.setOrg(tenantId)
+    // re-init now org selected
+    await admin.init()
+    $goto("../")
+  }
+
+  function handleKeydown(evt) {
+    if (evt.key === "Enter") setOrg()
+  }
+
+  onMount(async () => {
+    await auth.checkQueryString()
+    if (!multiTenancyEnabled) {
+      $goto("../")
+    } else {
+      admin.unload()
+    }
+  })
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+<div class="login">
+  <div class="main">
+    <Layout>
+      <Layout noPadding justifyItems="center">
+        <img alt="logo" src={Logo} />
+        <Heading>Set Budibase organisation</Heading>
+      </Layout>
+      <Divider noGrid />
+      <Layout gap="XS" noPadding>
+        <Body size="S" textAlign="center">Set organisation</Body>
+        <Input label="Organisation" bind:value={tenantId} />
+      </Layout>
+      <Layout gap="XS" noPadding>
+        <Button cta on:click={setOrg}>Set organisation</Button>
+      </Layout>
+    </Layout>
+  </div>
+</div>
+
+<style>
+  .login {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .main {
+    width: 300px;
+  }
+
+  img {
+    width: 48px;
+  }
+</style>
--- a/packages/builder/src/pages/builder/index.svelte
+++ b/packages/builder/src/pages/builder/index.svelte
@ -2,13 +2,15 @@
  import { redirect } from "@roxi/routify"
  import { auth } from "stores/portal"

+  auth.checkQueryString()
+
  $: {
    if (!$auth.user) {
-      $redirect("./auth/login")
+      $redirect(`./auth`)
    } else if ($auth.user.builder?.global) {
-      $redirect("./portal")
+      $redirect(`./portal`)
    } else {
-      $redirect("./apps")
+      $redirect(`./apps`)
    }
  }
 </script>
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@ -100,7 +100,11 @@
        <div />
        <ActionMenu align="right">
          <div slot="control" class="avatar">
-            <Avatar size="M" initials={$auth.initials} />
+            <Avatar
+              size="M"
+              initials={$auth.initials}
+              url={$auth.user.pictureUrl}
+            />
            <Icon size="XL" name="ChevronDown" />
          </div>
          <MenuItem icon="UserEdit" on:click={() => userInfoModal.show()}>
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@ -14,6 +14,7 @@
    Body,
  } from "@budibase/bbui"
  import CreateAppModal from "components/start/CreateAppModal.svelte"
+  import UpdateAppModal from "components/start/UpdateAppModal.svelte"
  import api, { del } from "builderStore/api"
  import analytics from "analytics"
  import { onMount } from "svelte"
@ -30,6 +31,7 @@
  let template
  let selectedApp
  let creationModal
+  let updatingModal
  let deletionModal
  let unpublishModal
  let creatingApp = false
@ -164,6 +166,11 @@
    selectedApp = null
  }

+  const updateApp = async app => {
+    selectedApp = app
+    updatingModal.show()
+  }
+
  const releaseLock = async app => {
    try {
      const response = await del(`/api/dev/${app.devId}/lock`)
@ -236,6 +243,7 @@
            {editApp}
            {exportApp}
            {deleteApp}
+            {updateApp}
          />
        {/each}
      </div>
@ -289,6 +297,8 @@
  Are you sure you want to unpublish the app <b>{selectedApp?.name}</b>?
 </ConfirmDialog>

+<UpdateAppModal app={selectedApp} bind:this={updatingModal} />
+
 <style>
  .title,
  .filter {
--- a/packages/builder/src/pages/builder/portal/manage/auth/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/auth/index.svelte
@ -7,7 +7,6 @@
  import OneLoginLogo from "assets/onelogin-logo.png"
  import OidcLogoPng from "assets/oidc-logo.png"
  import { isEqual, cloneDeep } from "lodash/fp"
-
  import {
    Button,
    Heading,
@ -22,36 +21,51 @@
  } from "@budibase/bbui"
  import { onMount } from "svelte"
  import api from "builderStore/api"
-  import { organisation } from "stores/portal"
+  import { organisation, auth, admin } from "stores/portal"
  import { uuid } from "builderStore/uuid"

+  $: tenantId = $auth.tenantId
+  $: multiTenancyEnabled = $admin.multiTenancy
+
  const ConfigTypes = {
    Google: "google",
    OIDC: "oidc",
-    // Github: "github",
-    // AzureAD: "ad",
  }

-  const GoogleConfigFields = {
-    Google: ["clientID", "clientSecret", "callbackURL"],
+  function callbackUrl(tenantId, end) {
+    let url = `/api/global/auth`
+    if (multiTenancyEnabled && tenantId) {
+      url += `/${tenantId}`
    }
-  const GoogleConfigLabels = {
-    Google: {
-      clientID: "Client ID",
-      clientSecret: "Client secret",
-      callbackURL: "Callback URL",
-    },
+    url += end
+    return url
  }

-  const OIDCConfigFields = {
-    Oidc: ["configUrl", "clientID", "clientSecret"],
-  }
-  const OIDCConfigLabels = {
-    Oidc: {
-      configUrl: "Config URL",
-      clientID: "Client ID",
-      clientSecret: "Client Secret",
+  $: GoogleConfigFields = {
+    Google: [
+      { name: "clientID", label: "Client ID" },
+      { name: "clientSecret", label: "Client secret" },
+      {
+        name: "callbackURL",
+        label: "Callback URL",
+        readonly: true,
+        placeholder: callbackUrl(tenantId, "/google/callback"),
      },
+    ],
+  }
+
+  $: OIDCConfigFields = {
+    Oidc: [
+      { name: "configUrl", label: "Config URL" },
+      { name: "clientID", label: "Client ID" },
+      { name: "clientSecret", label: "Client Secret" },
+      {
+        name: "callbackURL",
+        label: "Callback URL",
+        readonly: true,
+        placeholder: callbackUrl(tenantId, "/oidc/callback"),
+      },
+    ],
  }

  let iconDropdownOptions = [
@ -109,17 +123,13 @@

  // Create a flag so that it will only try to save completed forms
  $: partialGoogle =
-    providers.google?.config?.clientID ||
-    providers.google?.config?.clientSecret ||
-    providers.google?.config?.callbackURL
+    providers.google?.config?.clientID || providers.google?.config?.clientSecret
  $: partialOidc =
    providers.oidc?.config?.configs[0].configUrl ||
    providers.oidc?.config?.configs[0].clientID ||
    providers.oidc?.config?.configs[0].clientSecret
  $: googleComplete =
-    providers.google?.config?.clientID &&
-    providers.google?.config?.clientSecret &&
-    providers.google?.config?.callbackURL
+    providers.google?.config?.clientID && providers.google?.config?.clientSecret
  $: oidcComplete =
    providers.oidc?.config?.configs[0].configUrl &&
    providers.oidc?.config?.configs[0].clientID &&
@ -129,7 +139,7 @@
    let data = new FormData()
    data.append("file", file)
    const res = await api.post(
-      `/api/admin/configs/upload/logos_oidc/${file.name}`,
+      `/api/global/configs/upload/logos_oidc/${file.name}`,
      data,
      {}
    )
@ -149,17 +159,21 @@
    let calls = []
    docs.forEach(element => {
      if (element.type === ConfigTypes.OIDC) {
-        //Add a UUID here so each config is distinguishable when it arrives at the login page.
-        element.config.configs.forEach(config => {
-          !config.uuid && (config.uuid = uuid())
-        })
+        //Add a UUID here so each config is distinguishable when it arrives at the login page
+        for (let config of element.config.configs) {
+          if (!config.uuid) {
+            config.uuid = uuid()
+          }
+          // callback urls shouldn't be included
+          delete config.callbackURL
+        }
        if (partialOidc) {
          if (!oidcComplete) {
            notifications.error(
              `Please fill in all required ${ConfigTypes.OIDC} fields`
            )
          } else {
-            calls.push(api.post(`/api/admin/configs`, element))
+            calls.push(api.post(`/api/global/configs`, element))
            // turn the save button grey when clicked
            oidcSaveButtonDisabled = true
            originalOidcDoc = cloneDeep(providers.oidc)
@ -173,7 +187,7 @@
              `Please fill in all required ${ConfigTypes.Google} fields`
            )
          } else {
-            calls.push(api.post(`/api/admin/configs`, element))
+            calls.push(api.post(`/api/global/configs`, element))
            googleSaveButtonDisabled = true
            originalGoogleDoc = cloneDeep(providers.google)
          }
@ -206,7 +220,7 @@
    await organisation.init()
    // fetch the configs for oauth
    const googleResponse = await api.get(
-      `/api/admin/configs/${ConfigTypes.Google}`
+      `/api/global/configs/${ConfigTypes.Google}`
    )
    const googleDoc = await googleResponse.json()

@ -227,7 +241,7 @@

    //Get the list of user uploaded logos and push it to the dropdown options.
    //This needs to be done before the config call so they're available when the dropdown renders
-    const res = await api.get(`/api/admin/configs/logos_oidc`)
+    const res = await api.get(`/api/global/configs/logos_oidc`)
    const configSettings = await res.json()

    if (configSettings.config) {
@ -242,17 +256,16 @@
        })
      })
    }
-    const oidcResponse = await api.get(`/api/admin/configs/${ConfigTypes.OIDC}`)
+    const oidcResponse = await api.get(
+      `/api/global/configs/${ConfigTypes.OIDC}`
+    )
    const oidcDoc = await oidcResponse.json()
    if (!oidcDoc._id) {
-      console.log("hi")
-
      providers.oidc = {
        type: ConfigTypes.OIDC,
        config: { configs: [{ activated: true }] },
      }
    } else {
-      console.log("hello")
      originalOidcDoc = cloneDeep(oidcDoc)
      providers.oidc = oidcDoc
    }
@ -295,8 +308,12 @@
    <Layout gap="XS" noPadding>
      {#each GoogleConfigFields.Google as field}
        <div class="form-row">
-          <Label size="L">{GoogleConfigLabels.Google[field]}</Label>
-          <Input bind:value={providers.google.config[field]} />
+          <Label size="L">{field.label}</Label>
+          <Input
+            bind:value={providers.google.config[field.name]}
+            readonly={field.readonly}
+            placeholder={field.placeholder}
+          />
        </div>
      {/each}
      <div class="form-row">
@ -335,14 +352,14 @@
    <Layout gap="XS" noPadding>
      {#each OIDCConfigFields.Oidc as field}
        <div class="form-row">
-          <Label size="L">{OIDCConfigLabels.Oidc[field]}</Label>
-          <Input bind:value={providers.oidc.config.configs[0][field]} />
+          <Label size="L">{field.label}</Label>
+          <Input
+            bind:value={providers.oidc.config.configs[0][field.name]}
+            readonly={field.readonly}
+            placeholder={field.placeholder}
+          />
        </div>
      {/each}
-      <div class="form-row">
-        <Label size="L">Callback URL</Label>
-        <Input readonly placeholder="/api/admin/auth/oidc/callback" />
-      </div>
      <br />
      <Body size="S">
        To customize your login button, fill out the fields below.
--- a/packages/builder/src/pages/builder/portal/manage/email/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/email/index.svelte
@ -53,7 +53,7 @@
      delete smtp.config.auth
    }
    // Save your SMTP config
-    const response = await api.post(`/api/admin/configs`, smtp)
+    const response = await api.post(`/api/global/configs`, smtp)

    if (response.status !== 200) {
      const error = await response.text()
@ -75,7 +75,9 @@
  async function fetchSmtp() {
    loading = true
    // fetch the configs for smtp
-    const smtpResponse = await api.get(`/api/admin/configs/${ConfigTypes.SMTP}`)
+    const smtpResponse = await api.get(
+      `/api/global/configs/${ConfigTypes.SMTP}`
+    )
    const smtpDoc = await smtpResponse.json()

    if (!smtpDoc._id) {
@ -92,10 +94,15 @@
    requireAuth = smtpConfig.config.auth != null
    // always attach the auth for the forms purpose -
    // this will be removed later if required
+    if (!smtpDoc.config) {
+      smtpDoc.config = {}
+    }
+    if (!smtpDoc.config.auth) {
      smtpConfig.config.auth = {
        type: "login",
      }
    }
+  }

  fetchSmtp()
 </script>
--- a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
@ -47,8 +47,8 @@
  })
  let selectedApp

-  const userFetch = fetchData(`/api/admin/users/${userId}`)
-  const apps = fetchData(`/api/admin/roles`)
+  const userFetch = fetchData(`/api/global/users/${userId}`)
+  const apps = fetchData(`/api/global/roles`)

  async function deleteUser() {
    const res = await users.delete(userId)
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/UpdateRolesModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/UpdateRolesModal.svelte
@ -48,7 +48,7 @@
    on:change
    {options}
    label="Role"
-    getOptionLabel={role => role.name}
-    getOptionValue={role => role._id}
+    getOptionLabel={role => role.label}
+    getOptionValue={role => role.value}
  />
 </ModalContent>
--- a/packages/builder/src/pages/builder/portal/settings/organisation.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/organisation.svelte
@ -37,7 +37,7 @@
  async function uploadLogo(file) {
    let data = new FormData()
    data.append("file", file)
-    const res = await post("/api/admin/configs/upload/settings/logo", data, {})
+    const res = await post("/api/global/configs/upload/settings/logo", data, {})
    return await res.json()
  }

--- a/packages/builder/src/pages/index.svelte
+++ b/packages/builder/src/pages/index.svelte
@ -1,4 +1,11 @@
 <script>
  import { redirect } from "@roxi/routify"
-  $redirect("./builder")
+  import { auth } from "../stores/portal"
+  import { onMount } from "svelte"
+
+  auth.checkQueryString()
+
+  onMount(() => {
+    $redirect(`./builder`)
+  })
 </script>
--- a/packages/builder/src/stores/portal/admin.js
+++ b/packages/builder/src/stores/portal/admin.js
@ -1,12 +1,18 @@
-import { writable } from "svelte/store"
+import { writable, get } from "svelte/store"
 import api from "builderStore/api"
+import { auth } from "stores/portal"

 export function createAdminStore() {
-  const { subscribe, set } = writable({})
+  const admin = writable({
+    loaded: false,
+  })

  async function init() {
    try {
-      const response = await api.get("/api/admin/configs/checklist")
+      const tenantId = get(auth).tenantId
+      const response = await api.get(
+        `/api/global/configs/checklist?tenantId=${tenantId}`
+      )
      const json = await response.json()

      const onboardingSteps = Object.keys(json)
@ -16,20 +22,49 @@ export function createAdminStore() {
        0
      )

-      set({
-        checklist: json,
-        onboardingProgress: (stepsComplete / onboardingSteps.length) * 100,
+      await multiTenancyEnabled()
+      admin.update(store => {
+        store.loaded = true
+        store.checklist = json
+        store.onboardingProgress =
+          (stepsComplete / onboardingSteps.length) * 100
+        return store
      })
    } catch (err) {
-      set({
-        checklist: null,
+      admin.update(store => {
+        store.checklist = null
+        return store
      })
    }
  }

+  async function multiTenancyEnabled() {
+    let enabled = false
+    try {
+      const response = await api.get(`/api/system/flags`)
+      const json = await response.json()
+      enabled = json.multiTenancy
+    } catch (err) {
+      // just let it stay disabled
+    }
+    admin.update(store => {
+      store.multiTenancy = enabled
+      return store
+    })
+    return enabled
+  }
+
+  function unload() {
+    admin.update(store => {
+      store.loaded = false
+      return store
+    })
+  }
+
  return {
-    subscribe,
+    subscribe: admin.subscribe,
    init,
+    unload,
  }
 }

--- a/packages/builder/src/stores/portal/apps.js
+++ b/packages/builder/src/stores/portal/apps.js
@ -1,6 +1,7 @@
 import { writable } from "svelte/store"
 import { get } from "builderStore/api"
 import { AppStatus } from "../../constants"
+import api from "../../builderStore/api"

 export function createAppStore() {
  const store = writable([])
@ -53,9 +54,29 @@ export function createAppStore() {
    }
  }

+  async function update(appId, name) {
+    const response = await api.put(`/api/applications/${appId}`, { name })
+    if (response.status === 200) {
+      store.update(state => {
+        const updatedAppIndex = state.findIndex(
+          app => app.instance._id === appId
+        )
+        if (updatedAppIndex !== -1) {
+          const updatedApp = state[updatedAppIndex]
+          updatedApp.name = name
+          state.apps = state.splice(updatedAppIndex, 1, updatedApp)
+        }
+        return state
+      })
+    } else {
+      throw new Error("Error updating name")
+    }
+  }
+
  return {
    subscribe: store.subscribe,
    load,
+    update,
  }
 }

--- a/Show More
+++ b/Show More