Merge branch 'develop' of github.com:Budibase/budibase into nord-theme

2022-04-04 12:19:29 +01:00 · 2022-04-04 12:19:29 +01:00 · 0427b9dc7f
parent 3acea6b148 aeea15e8db
commit 0427b9dc7f
208 changed files with 8436 additions and 5707 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -24,9 +24,28 @@
    {
      "files": ["*.svelte"],
      "processor": "svelte3/svelte3"
+    },
+    {
+      "files": ["**/*.ts"],
+      "parser": "@typescript-eslint/parser",
+      "plugins": [],
+      "extends": [
+        "eslint:recommended"
+      ],
+      "rules": {
+        "no-unused-vars": "off",
+        "no-inner-declarations": "off",
+        "no-case-declarations": "off",
+        "no-useless-escape": "off",
+        "no-undef": "off",
+        "no-prototype-builtins": "off"
+      }
    }
  ],
  "rules": {
    "no-self-assign": "off"
+  },
+  "globals": {
+    "GeolocationPositionError": true
  }
 }
--- a/.github/workflows/smoke_test.yaml
+++ b/.github/workflows/smoke_test.yaml
@ -2,6 +2,8 @@ name: Budibase Smoke Test

 on:
 workflow_dispatch:
+ schedule:
+  - cron: "0 5 * * *" # every day at 5AM

 jobs:
  release:
@ -23,10 +25,13 @@ jobs:
          -o packages/builder/cypress.env.json \
          -L https://api.github.com/repos/budibase/budibase-infra/contents/test/cypress.env.json
          wc -l packages/builder/cypress.env.json
-      - run: yarn test:e2e:ci
-        env:
-          CI: true
-          name: Budibase CI
+
+      - name: Cypress run
+        id: cypress
+        uses: cypress-io/github-action@v2
+        with:
+          install: false
+          command: yarn test:e2e:ci
      
      # TODO: upload recordings to s3
      # - name: Configure AWS Credentials
@ -36,11 +41,11 @@ jobs:
      #     aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
      #     aws-region: eu-west-1
        
-      # TODO look at cypress reporters
-      # - name: Discord Webhook Action
-      #   uses: tsickert/discord-webhook@v4.0.0
-      #   with:
-      #     webhook-url: ${{ secrets.PROD_DEPLOY_WEBHOOK_URL }}
-      #     content: "Production Deployment Complete: ${{ env.RELEASE_VERSION }} deployed to Budibase Cloud."
-      #     embed-title: ${{ env.RELEASE_VERSION }}
+      - name: Discord Webhook Action
+        uses: tsickert/discord-webhook@v4.0.0
+        with:
+          webhook-url: ${{ secrets.BUDI_QA_WEBHOOK }}
+          content: "Smoke test run completed with ${{ steps.cypress.outcome }}. See results at ${{ steps.cypress.dashboardUrl }}"
+          embed-title: ${{ steps.cypress.outcome }}
+          embed-color: ${{ steps.cypress.outcome == 'success' && '3066993' || '15548997' }}

--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -22,9 +22,16 @@
            "name": "Budibase Worker",
            "type": "node",
            "request": "launch",
-            "program": "${workspaceFolder}/packages/worker/src/index.js",
+            "runtimeArgs": [
+                "--nolazy",
+                "-r",
+                "ts-node/register/transpile-only"
+            ],
+            "args": [
+                "${workspaceFolder}/packages/worker/src/index.ts"
+            ],
            "cwd": "${workspaceFolder}/packages/worker"
-        }
+        },
    ],
    "compounds": [
        {
--- a/README.md
+++ b/README.md
@ -102,6 +102,35 @@ Budibase is made to scale. With Budibase, you can self-host on your own infrastr

 - Checkout the promo video: https://youtu.be/xoljVpty_Kw

+<br />
+
+---
+
+<br />
+
+
+## Budibase Public API
+As with anything that we build in Budibase, our new public API is simple to use, flexible, and introduces new extensibility. To summarize, the Budibase API enables:
+
+- Budibase as a backend
+- Interoperability
+
+
+#### Docs
+You can learn more about the Budibase API at the following places:
+
+- [General documentation](https://docs.budibase.com/docs/public-api) : Learn how to get your API key, how to use spec, and how to use with Postman
+- [Interactive API documentation](https://docs.budibase.com/reference/post_applications) : Learn how to interact with the API
+
+#### Guides
+
+- [Build an app with Budibase and Next.js](https://budibase.com/blog/building-a-crud-app-with-budibase-and-next.js/)
+
+<p align="center">
+  <img alt="Budibase data" src="https://res.cloudinary.com/daog6scxm/image/upload/v1647858558/Feb%20release/Start_building_with_Budibase_s_API_3_rhlzhv.png">
+</p>
+<br /><br />
+
 <br /><br /><br />

 ## 🏁 Get started
--- a/charts/budibase/Chart.yaml
+++ b/charts/budibase/Chart.yaml
@ -15,7 +15,7 @@ version: 0.2.8
 appVersion: 1.0.48
 dependencies:
  - name: couchdb
-    version: 3.3.4
+    version: 3.6.1
    repository: https://apache.github.io/couchdb-helm
    condition: services.couchdb.enabled
  - name: ingress-nginx
--- a/charts/budibase/templates/app-service-deployment.yaml
+++ b/charts/budibase/templates/app-service-deployment.yaml
@ -110,6 +110,10 @@ spec:
          value: {{ .Values.globals.cookieDomain | quote }}
        - name: HTTP_MIGRATIONS
          value: {{ .Values.globals.httpMigrations | quote }}
+        - name: GOOGLE_CLIENT_ID
+          value: {{ .Values.globals.google.clientId | quote }}
+        - name: GOOGLE_CLIENT_SECRET
+          value: {{ .Values.globals.google.secret | quote }}
        image: budibase/apps:{{ .Values.globals.appVersion }}
        imagePullPolicy: Always
        name: bbapps
--- a/hosting/digitalocean/files/etc/update-motd.d/99-one-click
+++ b/hosting/digitalocean/files/etc/update-motd.d/99-one-click
@ -12,7 +12,7 @@ All ports are BLOCKED except 22 (SSH), 80 (HTTP), 443 (HTTPS), and 10000

 * Budibase website: http://budibase.com

-For help and more information, visit https://docs.budibase.com/self-hosting/hosting-methods/digitalocean
+For help and more information, visit https://docs.budibase.com/docs/digitalocean

 ********************************************************************************
 To delete this message of the day: rm -rf $(readlink -f ${0})
--- a/hosting/docker-compose.dev.yaml
+++ b/hosting/docker-compose.dev.yaml
@ -5,7 +5,7 @@ version: "3"
 services:
  minio-service:
    container_name: budi-minio-dev
-    restart: always
+    restart: on-failure
    image: minio/minio
    volumes:
      - minio_data:/data
@ -23,7 +23,7 @@ services:

  proxy-service:
    container_name: budi-nginx-dev
-    restart: always
+    restart: on-failure
    image: nginx:latest
    volumes:
      - ./.generated-nginx.dev.conf:/etc/nginx/nginx.conf
@ -38,7 +38,7 @@ services:
  couchdb-service:
    # platform: linux/amd64
    container_name: budi-couchdb-dev
-    restart: always
+    restart: on-failure
    image: ibmcom/couchdb3
    environment:
      - COUCHDB_PASSWORD=${COUCH_DB_PASSWORD}
@ -59,7 +59,7 @@ services:

  redis-service:
    container_name: budi-redis-dev
-    restart: always
+    restart: on-failure
    image: redis
    command: redis-server --requirepass ${REDIS_PASSWORD}
    ports:
--- a/hosting/docker-compose.yaml
+++ b/hosting/docker-compose.yaml
@ -4,7 +4,7 @@ version: "3"

 services:
  app-service:
-    restart: always
+    restart: unless-stopped
    image: budibase.docker.scarf.sh/budibase/apps
    container_name: bbapps
    environment:
@ -28,7 +28,7 @@ services:
      - redis-service

  worker-service:
-    restart: always
+    restart: unless-stopped
    image: budibase.docker.scarf.sh/budibase/worker
    container_name: bbworker
    environment:
@ -53,7 +53,7 @@ services:
      - couch-init

  minio-service:
-    restart: always
+    restart: unless-stopped
    image: minio/minio
    volumes:
      - minio_data:/data
@ -69,7 +69,7 @@ services:
      retries: 3

  proxy-service:
-    restart: always
+    restart: unless-stopped
    ports:
      - "${MAIN_PORT}:10000"
    container_name: bbproxy
@ -81,7 +81,7 @@ services:
      - couchdb-service

  couchdb-service:
-    restart: always
+    restart: unless-stopped
    image: ibmcom/couchdb3
    environment:
      - COUCHDB_PASSWORD=${COUCH_DB_PASSWORD}
@ -98,13 +98,14 @@ services:
    command: ["sh","-c","sleep 10 && $${PUT_CALL}/_users && $${PUT_CALL}/_replicator; fg;"]

  redis-service:
-    restart: always
+    restart: unless-stopped
    image: redis
    command: redis-server --requirepass ${REDIS_PASSWORD}
    volumes:
      - redis_data:/data

  watchtower-service:
+    restart: always
    image: containrrr/watchtower
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
--- a/hosting/nginx.dev.conf.hbs
+++ b/hosting/nginx.dev.conf.hbs
@ -52,9 +52,8 @@ http {
      proxy_pass      http://{{ address }}:4001;
    }

-    location /app/ {
+    location /app {
      proxy_pass      http://{{ address }}:4001;
-      rewrite ^/app/(.*)$ /$1 break;
    }

    location /builder {
--- a/hosting/nginx.prod.conf.hbs
+++ b/hosting/nginx.prod.conf.hbs
@ -22,9 +22,8 @@ http {
  resolver {{ resolver }} valid=10s ipv6=off;

  # buffering
-  client_body_buffer_size 1K;
  client_header_buffer_size 1k;
-  client_max_body_size 10M;
+  client_max_body_size 20M;
  ignore_invalid_headers off;
  proxy_buffering off;

@ -43,13 +42,25 @@ http {
    client_max_body_size 1000m;
    ignore_invalid_headers off;
    proxy_buffering off;
-    # port_in_redirect off;
+    
+    set $csp_default "default-src 'self'"
+    set $csp_script "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.budi.live https://js.intercomcdn.com https://widget.intercom.io";
+    set $csp_style "style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://fonts.googleapis.com https://rsms.me https://maxcdn.bootstrapcdn.com";
+    set $csp_object "object-src 'none'";
+    set $csp_base_uri "base-uri 'self'";
+    set $csp_connect "connect-src 'self' https://api-iam.intercom.io https://api-iam.intercom.io  https://api-ping.intercom.io https://app.posthog.com wss://nexus-websocket-a.intercom.io  wss://nexus-websocket-b.intercom.io https://nexus-websocket-a.intercom.io https://nexus-websocket-b.intercom.io  https://uploads.intercomcdn.com  https://uploads.intercomusercontent.com";
+    set $csp_font "font-src 'self' data: https://cdn.jsdelivr.net https://fonts.gstatic.com https://rsms.me https://maxcdn.bootstrapcdn.com  https://js.intercomcdn.com  https://fonts.intercomcdn.com";
+    set $csp_frame "frame-src 'self' https:";
+    set $csp_img "img-src http: https: data: blob:";
+    set $csp_manifest "manifest-src 'self'";
+    set $csp_media "media-src 'self' https://js.intercomcdn.com";
+    set $csp_worker "worker-src 'none'";

    # Security Headers
    add_header X-Frame-Options SAMEORIGIN always;
    add_header X-Content-Type-Options nosniff always;
    add_header X-XSS-Protection "1; mode=block" always;
-    add_header Content-Security-Policy  "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.budi.live https://js.intercomcdn.com https://widget.intercom.io; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://fonts.googleapis.com https://rsms.me https://maxcdn.bootstrapcdn.com; object-src 'none'; base-uri 'self'; connect-src 'self' https://api-iam.intercom.io https://app.posthog.com wss://nexus-websocket-a.intercom.io ; font-src 'self' data https://cdn.jsdelivr.net https://fonts.gstatic.com https://rsms.me https://maxcdn.bootstrapcdn.com; frame-src 'self' https:; img-src http: https: data; manifest-src 'self'; media-src 'self'; worker-src 'none';" always;
+    add_header Content-Security-Policy ${csp_default}; ${csp_script}; ${csp_style}; ${csp_object}; ${csp_base_uri}; ${csp_connect}; ${csp_font}; ${csp_frame}; ${csp_img}; ${csp_manifest}; ${csp_media}; ${csp_worker};" always;

    # upstreams
    set $apps {{ apps }};
@ -62,7 +73,6 @@ http {

    location /app {
      proxy_pass      http://$apps:4002;
-      rewrite ^/app/(.*)$ /$1 break;
    }

    location = / {
--- a/i18n/README.de.md
+++ b/i18n/README.de.md
@ -39,7 +39,7 @@
 </p>

 <h3 align="center">
-  <a href="https://docs.budibase.com/getting-started">Los Geht's</a>
+  <a href="https://docs.budibase.com/docs/quickstart-tutorials">Los Geht's</a>
  <span> · </span>
  <a href="https://docs.budibase.com">Dokumentation</a>
  <span> · </span>
@ -109,7 +109,7 @@ $ budi hosting --start
 4. Lege einen Admin-Benutzer an.
 Gib die E-Mail und das Passwort für den neuen Admin-Benutzer ein.

-Schon geschafft! Jetzt kann es losgehen mit der minutenschnellen Entwicklung deiner Tools. Für weitere Informationen und Tipps schau doch mal in unsere [Dokumentation](https://docs.budibase.com/getting-started).
+Schon geschafft! Jetzt kann es losgehen mit der minutenschnellen Entwicklung deiner Tools. Für weitere Informationen und Tipps schau doch mal in unsere [Dokumentation](https://docs.budibase.com/docs/quickstart-tutorials).

 <br />

--- a/i18n/README.es.md
+++ b/i18n/README.es.md
@ -112,7 +112,7 @@ The Budibase builder runs in Electron, on Mac, PC and Linux. Follow the steps be

 Budibase wants to make sure anyone can use the tools we develop and we know a lot of people need to be able to host the apps they make on their own systems - that is why we've decided to try and make self hosting as easy as possible!

-Currently, you can host your apps using Docker or Digital Ocean. The documentation for self-hosting can be found [here](https://docs.budibase.com/self-hosting/introduction-to-self-hosting).
+Currently, you can host your apps using Docker or Digital Ocean. The documentation for self-hosting can be found [here](https://docs.budibase.com/docs/hosting-methods).

 [![Deploy to DO](https://www.deploytodo.com/do-btn-blue.svg)](https://cloud.digitalocean.com/droplets/new?onboarding_origin=marketplace&i=09038e&fleetUuid=bb04f9c8-1de8-4687-b2ae-1d5177a0535b&appId=77729671&type=applications&size=s-4vcpu-8gb&region=nyc1&refcode=0caaa6085a82&image=budibase-20-04)

--- a/lerna.json
+++ b/lerna.json
@ -1,5 +1,5 @@
 {
-  "version": "1.0.89-alpha.0",
+  "version": "1.0.104-alpha.0",
  "npmClient": "yarn",
  "packages": [
    "packages/*"
--- a/package.json
+++ b/package.json
@ -15,7 +15,9 @@
    "prettier-plugin-svelte": "^2.3.0",
    "rimraf": "^3.0.2",
    "rollup-plugin-replace": "^2.2.0",
-    "svelte": "^3.38.2"
+    "svelte": "^3.38.2",
+    "@typescript-eslint/parser": "4.28.0",
+    "typescript": "4.5.5"
  },
  "scripts": {
    "setup": "node ./hosting/scripts/setup.js && yarn && yarn bootstrap && yarn build && yarn dev",
@ -31,17 +33,19 @@
    "nuke:docker": "lerna run --parallel dev:stack:nuke",
    "clean": "lerna clean",
    "kill-port": "kill-port 4001",
-    "dev": "yarn run kill-port && lerna link && lerna run --parallel dev:builder --concurrency 1",
-    "dev:noserver": "lerna link && lerna run dev:stack:up && lerna run --parallel dev:builder --concurrency 1 --ignore @budibase/server --ignore @budibase/worker",
-    "dev:server": "lerna run --parallel dev:builder --concurrency 1 --scope @budibase/worker --scope @budibase/server",
+    "kill-builder": "kill-port 3000",
+    "kill-server": "kill-port 4001 4002",
+    "kill-all": "yarn run kill-builder && yarn run kill-server",
+    "dev": "yarn run kill-all && lerna link && lerna run --parallel dev:builder --concurrency 1",
+    "dev:noserver": "yarn run kill-builder && lerna link && lerna run dev:stack:up && lerna run --parallel dev:builder --concurrency 1 --ignore @budibase/server --ignore @budibase/worker",
+    "dev:server": "yarn run kill-server && lerna run --parallel dev:builder --concurrency 1 --scope @budibase/worker --scope @budibase/server",
    "test": "lerna run test",
    "lint:eslint": "eslint packages",
    "lint:prettier": "prettier --check \"packages/**/*.{js,ts,svelte}\"",
    "lint": "yarn run lint:eslint && yarn run lint:prettier",
    "lint:fix:eslint": "eslint --fix packages",
    "lint:fix:prettier": "prettier --write \"packages/**/*.{js,ts,svelte}\" && prettier --write \"examples/**/*.{js,ts,svelte}\"",
-    "lint:fix:ts": "lerna run lint:fix",
-    "lint:fix": "yarn run lint:fix:ts && yarn run lint:fix:prettier && yarn run lint:fix:eslint",
+    "lint:fix": "yarn run lint:fix:prettier && yarn run lint:fix:eslint",
    "test:e2e": "lerna run cy:test --stream",
    "test:e2e:ci": "lerna run cy:ci --stream",
    "build:specs": "lerna run specs",
--- a/packages/backend-core/package.json
+++ b/packages/backend-core/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/backend-core",
-  "version": "1.0.89-alpha.0",
+  "version": "1.0.104-alpha.0",
  "description": "Budibase backend core libraries used in server and worker",
  "main": "src/index.js",
  "author": "Budibase",
--- a/packages/backend-core/src/context/index.js
+++ b/packages/backend-core/src/context/index.js
@ -1,5 +1,6 @@
 const env = require("../environment")
 const { Headers } = require("../../constants")
+const { SEPARATOR, DocumentTypes } = require("../db/constants")
 const cls = require("./FunctionContext")
 const { getCouch } = require("../db")
 const { getProdAppID, getDevelopmentAppID } = require("../db/conversions")
@ -42,8 +43,39 @@ exports.doInTenant = (tenantId, task) => {
  })
 }

+/**
+ * Given an app ID this will attempt to retrieve the tenant ID from it.
+ * @return {null|string} The tenant ID found within the app ID.
+ */
+exports.getTenantIDFromAppID = appId => {
+  if (!appId) {
+    return null
+  }
+  const split = appId.split(SEPARATOR)
+  const hasDev = split[1] === DocumentTypes.DEV
+  if ((hasDev && split.length === 3) || (!hasDev && split.length === 2)) {
+    return null
+  }
+  if (hasDev) {
+    return split[2]
+  } else {
+    return split[1]
+  }
+}
+
+const setAppTenantId = appId => {
+  const appTenantId = this.getTenantIDFromAppID(appId) || this.DEFAULT_TENANT_ID
+  this.updateTenantId(appTenantId)
+}
+
 exports.doInAppContext = (appId, task) => {
+  if (!appId) {
+    throw new Error("appId is required")
+  }
  return cls.run(() => {
+    // set the app tenant id
+    setAppTenantId(appId)
+
    // set the app ID
    cls.setOnContext(ContextKeys.APP_ID, appId)

--- a/packages/backend-core/src/db/utils.js
+++ b/packages/backend-core/src/db/utils.js
@ -9,11 +9,7 @@ const {
  APP_PREFIX,
  APP_DEV,
 } = require("./constants")
-const {
-  getTenantId,
-  getTenantIDFromAppID,
-  getGlobalDBName,
-} = require("../tenancy")
+const { getTenantId, getGlobalDBName } = require("../tenancy")
 const fetch = require("node-fetch")
 const { getCouch } = require("./index")
 const { getAppMetadata } = require("../cache/appMetadata")
@ -39,7 +35,6 @@ exports.DocumentTypes = DocumentTypes
 exports.APP_PREFIX = APP_PREFIX
 exports.APP_DEV = exports.APP_DEV_PREFIX = APP_DEV
 exports.SEPARATOR = SEPARATOR
-exports.getTenantIDFromAppID = getTenantIDFromAppID
 exports.isDevApp = isDevApp
 exports.isProdAppID = isProdAppID
 exports.isDevAppID = isDevAppID
--- a/packages/backend-core/src/middleware/appTenancy.js
+++ b/packages/backend-core/src/middleware/appTenancy.js
@ -1,27 +0,0 @@
-const {
-  isMultiTenant,
-  updateTenantId,
-  isTenantIdSet,
-  DEFAULT_TENANT_ID,
-  updateAppId,
-} = require("../tenancy")
-const ContextFactory = require("../context/FunctionContext")
-const { getTenantIDFromAppID } = require("../db/utils")
-
-module.exports = () => {
-  return ContextFactory.getMiddleware(ctx => {
-    // if not in multi-tenancy mode make sure its default and exit
-    if (!isMultiTenant()) {
-      updateTenantId(DEFAULT_TENANT_ID)
-      return
-    }
-    // if tenant ID already set no need to continue
-    if (isTenantIdSet()) {
-      return
-    }
-    const appId = ctx.appId ? ctx.appId : ctx.user ? ctx.user.appId : null
-    const tenantId = getTenantIDFromAppID(appId) || DEFAULT_TENANT_ID
-    updateTenantId(tenantId)
-    updateAppId(appId)
-  })
-}
--- a/packages/backend-core/src/middleware/index.js
+++ b/packages/backend-core/src/middleware/index.js
@ -6,7 +6,6 @@ const { authError } = require("./passport/utils")
 const authenticated = require("./authenticated")
 const auditLog = require("./auditLog")
 const tenancy = require("./tenancy")
-const appTenancy = require("./appTenancy")
 const internalApi = require("./internalApi")
 const datasourceGoogle = require("./passport/datasource/google")
 const csrf = require("./csrf")
@ -19,7 +18,6 @@ module.exports = {
  authenticated,
  auditLog,
  tenancy,
-  appTenancy,
  authError,
  internalApi,
  datasource: {
--- a/packages/backend-core/src/middleware/passport/datasource/google.js
+++ b/packages/backend-core/src/middleware/passport/datasource/google.js
@ -1,15 +1,29 @@
 const google = require("../google")
-const { Cookies } = require("../../../constants")
+const { Cookies, Configs } = require("../../../constants")
 const { clearCookie, getCookie } = require("../../../utils")
 const { getDB } = require("../../../db")
+const { getScopedConfig } = require("../../../db/utils")
 const environment = require("../../../environment")
+const { getGlobalDB } = require("../../../tenancy")

-async function preAuth(passport, ctx, next) {
-  // get the relevant config
-  const googleConfig = {
+async function fetchGoogleCreds() {
+  // try and get the config from the tenant
+  const db = getGlobalDB()
+  const googleConfig = await getScopedConfig(db, {
+    type: Configs.GOOGLE,
+  })
+  // or fall back to env variables
+  const config = googleConfig || {
    clientID: environment.GOOGLE_CLIENT_ID,
    clientSecret: environment.GOOGLE_CLIENT_SECRET,
  }
+
+  return config
+}
+
+async function preAuth(passport, ctx, next) {
+  // get the relevant config
+  const googleConfig = await fetchGoogleCreds()
  let callbackUrl = `${environment.PLATFORM_URL}/api/global/auth/datasource/google/callback`
  const strategy = await google.strategyFactory(googleConfig, callbackUrl)

@ -26,10 +40,7 @@ async function preAuth(passport, ctx, next) {

 async function postAuth(passport, ctx, next) {
  // get the relevant config
-  const config = {
-    clientID: environment.GOOGLE_CLIENT_ID,
-    clientSecret: environment.GOOGLE_CLIENT_SECRET,
-  }
+  const config = await fetchGoogleCreds()

  let callbackUrl = `${environment.PLATFORM_URL}/api/global/auth/datasource/google/callback`
  const strategy = await google.strategyFactory(
--- a/packages/backend-core/src/middleware/passport/google.js
+++ b/packages/backend-core/src/middleware/passport/google.js
@ -51,7 +51,10 @@ exports.strategyFactory = async function (
    )
  } catch (err) {
    console.error(err)
-    throw new Error("Error constructing google authentication strategy", err)
+    throw new Error(
+      `Error constructing google authentication strategy: ${err}`,
+      err
+    )
  }
 }
 // expose for testing
--- a/packages/backend-core/src/security/roles.js
+++ b/packages/backend-core/src/security/roles.js
@ -1,5 +1,5 @@
 const { cloneDeep } = require("lodash/fp")
-const { BUILTIN_PERMISSION_IDS } = require("./permissions")
+const { BUILTIN_PERMISSION_IDS, PermissionLevels } = require("./permissions")
 const {
  generateRoleID,
  getRoleParams,
@ -180,6 +180,20 @@ exports.getUserRoleHierarchy = async (userRoleId, opts = { idOnly: true }) => {
  return opts.idOnly ? roles.map(role => role._id) : roles
 }

+// this function checks that the provided permissions are in an array format
+// some templates/older apps will use a simple string instead of array for roles
+// convert the string to an array using the theory that write is higher than read
+exports.checkForRoleResourceArray = (rolePerms, resourceId) => {
+  if (rolePerms && !Array.isArray(rolePerms[resourceId])) {
+    const permLevel = rolePerms[resourceId]
+    rolePerms[resourceId] = [permLevel]
+    if (permLevel === PermissionLevels.WRITE) {
+      rolePerms[resourceId].push(PermissionLevels.READ)
+    }
+  }
+  return rolePerms
+}
+
 /**
 * Given an app ID this will retrieve all of the roles that are currently within that app.
 * @return {Promise<object[]>} An array of the role objects that were found.
@ -209,15 +223,27 @@ exports.getAllRoles = async appId => {
      roles.push(Object.assign(builtinRole, dbBuiltin))
    }
  }
+  // check permissions
+  for (let role of roles) {
+    if (!role.permissions) {
+      continue
+    }
+    for (let resourceId of Object.keys(role.permissions)) {
+      role.permissions = exports.checkForRoleResourceArray(
+        role.permissions,
+        resourceId
+      )
+    }
+  }
  return roles
 }

 /**
- * This retrieves the required role
- * @param permLevel
- * @param resourceId
- * @param subResourceId
- * @return {Promise<{permissions}|Object>}
+ * This retrieves the required role for a resource
+ * @param permLevel The level of request
+ * @param resourceId The resource being requested
+ * @param subResourceId The sub resource being requested
+ * @return {Promise<{permissions}|Object>} returns the permissions required to access.
 */
 exports.getRequiredResourceRole = async (
  permLevel,
--- a/packages/backend-core/src/tenancy/tenancy.js
+++ b/packages/backend-core/src/tenancy/tenancy.js
@ -1,6 +1,11 @@
 const { getDB } = require("../db")
-const { SEPARATOR, StaticDatabases, DocumentTypes } = require("../db/constants")
-const { getTenantId, DEFAULT_TENANT_ID, isMultiTenant } = require("../context")
+const { SEPARATOR, StaticDatabases } = require("../db/constants")
+const {
+  getTenantId,
+  DEFAULT_TENANT_ID,
+  isMultiTenant,
+  getTenantIDFromAppID,
+} = require("../context")
 const env = require("../environment")

 const TENANT_DOC = StaticDatabases.PLATFORM_INFO.docs.tenants
@ -118,26 +123,6 @@ exports.getTenantUser = async identifier => {
  }
 }

-/**
- * Given an app ID this will attempt to retrieve the tenant ID from it.
- * @return {null|string} The tenant ID found within the app ID.
- */
-exports.getTenantIDFromAppID = appId => {
-  if (!appId) {
-    return null
-  }
-  const split = appId.split(SEPARATOR)
-  const hasDev = split[1] === DocumentTypes.DEV
-  if ((hasDev && split.length === 3) || (!hasDev && split.length === 2)) {
-    return null
-  }
-  if (hasDev) {
-    return split[2]
-  } else {
-    return split[1]
-  }
-}
-
 exports.isUserInAppTenant = (appId, user = null) => {
  let userTenantId
  if (user) {
@ -145,7 +130,7 @@ exports.isUserInAppTenant = (appId, user = null) => {
  } else {
    userTenantId = getTenantId()
  }
-  const tenantId = exports.getTenantIDFromAppID(appId) || DEFAULT_TENANT_ID
+  const tenantId = getTenantIDFromAppID(appId) || DEFAULT_TENANT_ID
  return tenantId === userTenantId
 }

--- a/packages/backend-core/src/utils.js
+++ b/packages/backend-core/src/utils.js
@ -3,6 +3,7 @@ const {
  SEPARATOR,
  ViewNames,
  generateGlobalUserID,
+  getAllApps,
 } = require("./db/utils")
 const jwt = require("jsonwebtoken")
 const { options } = require("./middleware/passport/jwt")
@ -20,8 +21,10 @@ const { hash } = require("./hashing")
 const userCache = require("./cache/user")
 const env = require("./environment")
 const { getUserSessions, invalidateSessions } = require("./security/sessions")
+const tenancy = require("./tenancy")

 const APP_PREFIX = DocumentTypes.APP + SEPARATOR
+const PROD_APP_PREFIX = "/app/"

 function confirmAppId(possibleAppId) {
  return possibleAppId && possibleAppId.startsWith(APP_PREFIX)
@ -29,16 +32,35 @@ function confirmAppId(possibleAppId) {
    : undefined
 }

+async function resolveAppUrl(ctx) {
+  const appUrl = ctx.path.split("/")[2]
+  let possibleAppUrl = `/${appUrl.toLowerCase()}`
+
+  let tenantId = tenancy.getTenantId()
+  if (!env.SELF_HOSTED && ctx.subdomains.length) {
+    // always use the tenant id from the url in cloud
+    tenantId = ctx.subdomains[0]
+  }
+
+  // search prod apps for a url that matches
+  const apps = await tenancy.doInTenant(tenantId, () =>
+    getAllApps({ dev: false })
+  )
+  const app = apps.filter(
+    a => a.url && a.url.toLowerCase() === possibleAppUrl
+  )[0]
+
+  return app && app.appId ? app.appId : undefined
+}
+
 /**
 * Given a request tries to find the appId, which can be located in various places
 * @param {object} ctx The main request body to look through.
 * @returns {string|undefined} If an appId was found it will be returned.
 */
-exports.getAppId = ctx => {
-  const options = [ctx.headers[Headers.APP_ID], ctx.params.appId]
-  if (ctx.subdomains) {
-    options.push(ctx.subdomains[1])
-  }
+exports.getAppIdFromCtx = async ctx => {
+  // look in headers
+  const options = [ctx.headers[Headers.APP_ID]]
  let appId
  for (let option of options) {
    appId = confirmAppId(option)
@ -47,16 +69,24 @@ exports.getAppId = ctx => {
    }
  }

-  // look in body if can't find it in subdomain
+  // look in body
  if (!appId && ctx.request.body && ctx.request.body.appId) {
    appId = confirmAppId(ctx.request.body.appId)
  }
+
+  // look in the url - dev app
  let appPath =
    ctx.request.headers.referrer ||
    ctx.path.split("/").filter(subPath => subPath.startsWith(APP_PREFIX))
-  if (!appId && appPath.length !== 0) {
+  if (!appId && appPath.length) {
    appId = confirmAppId(appPath[0])
  }
+
+  // look in the url - prod app
+  if (!appId && ctx.path.startsWith(PROD_APP_PREFIX)) {
+    appId = confirmAppId(await resolveAppUrl(ctx))
+  }
+
  return appId
 }

--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@ -1,7 +1,7 @@
 {
  "name": "@budibase/bbui",
  "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.89-alpha.0",
+  "version": "1.0.104-alpha.0",
  "license": "MPL-2.0",
  "svelte": "src/index.js",
  "module": "dist/bbui.es.js",
@ -38,7 +38,7 @@
  ],
  "dependencies": {
    "@adobe/spectrum-css-workflow-icons": "^1.2.1",
-    "@budibase/string-templates": "^1.0.89-alpha.0",
+    "@budibase/string-templates": "^1.0.104-alpha.0",
    "@spectrum-css/actionbutton": "^1.0.1",
    "@spectrum-css/actiongroup": "^1.0.1",
    "@spectrum-css/avatar": "^3.0.2",
--- a/packages/bbui/src/Button/Button.svelte
+++ b/packages/bbui/src/Button/Button.svelte
@ -13,6 +13,7 @@
  export let icon = undefined
  export let active = false
  export let tooltip = undefined
+  export let dataCy

  let showTooltip = false
 </script>
@ -27,6 +28,7 @@
  class:active
  class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
  {disabled}
+  data-cy={dataCy}
  on:click|preventDefault
  on:mouseover={() => (showTooltip = true)}
  on:focus={() => (showTooltip = true)}
--- a/packages/bbui/src/Modal/ModalContent.svelte
+++ b/packages/bbui/src/Modal/ModalContent.svelte
@ -5,6 +5,7 @@
  import Divider from "../Divider/Divider.svelte"
  import Icon from "../Icon/Icon.svelte"
  import Context from "../context"
+  import ProgressCircle from "../ProgressCircle/ProgressCircle.svelte"

  export let title = undefined
  export let size = "S"
@ -102,15 +103,22 @@
          <Button group secondary on:click={close}>{cancelText}</Button>
        {/if}
        {#if showConfirmButton}
-          <Button
-            group
-            cta
-            {...$$restProps}
-            disabled={confirmDisabled}
-            on:click={confirm}
-          >
-            {confirmText}
-          </Button>
+          <span class="confirm-wrap">
+            <Button
+              group
+              cta
+              {...$$restProps}
+              disabled={confirmDisabled}
+              on:click={confirm}
+            >
+              {#if loading}
+                <ProgressCircle overBackground={true} size="S" />
+              {/if}
+              {#if !loading}
+                {confirmText}
+              {/if}
+            </Button>
+          </span>
        {/if}
      </div>
    {/if}
@ -169,4 +177,8 @@
  .spectrum-Dialog-buttonGroup {
    padding-left: 0;
  }
+
+  .confirm-wrap :global(.spectrum-Button-label) {
+    display: contents;
+  }
 </style>
--- a/packages/bbui/src/Table/Table.svelte
+++ b/packages/bbui/src/Table/Table.svelte
@ -56,6 +56,7 @@
  $: if (!loading) loaded = true
  $: fields = getFields(schema, showAutoColumns, autoSortColumns)
  $: rows = fields?.length ? data || [] : []
+  $: totalRowCount = rows?.length || 0
  $: visibleRowCount = getVisibleRowCount(
    loaded,
    height,
@ -63,7 +64,12 @@
    rowCount,
    rowHeight
  )
-  $: contentStyle = getContentStyle(visibleRowCount, rowCount, rowHeight)
+  $: heightStyle = getHeightStyle(
+    visibleRowCount,
+    rowCount,
+    totalRowCount,
+    rowHeight
+  )
  $: sortedRows = sortRows(rows, sortColumn, sortOrder)
  $: gridStyle = getGridStyle(fields, schema, showEditColumn)
  $: showEditColumn = allowEditRows || allowSelectRows
@ -107,11 +113,16 @@
    return Math.min(allRows, Math.ceil(height / rowHeight))
  }

-  const getContentStyle = (visibleRows, rowCount, rowHeight) => {
-    if (!rowCount || !visibleRows) {
+  const getHeightStyle = (
+    visibleRowCount,
+    rowCount,
+    totalRowCount,
+    rowHeight
+  ) => {
+    if (!rowCount || !visibleRowCount || totalRowCount <= rowCount) {
      return ""
    }
-    return `height: ${headerHeight + visibleRows * rowHeight}px;`
+    return `height: ${headerHeight + visibleRowCount * rowHeight}px;`
  }

  const getGridStyle = (fields, schema, showEditColumn) => {
@ -264,11 +275,11 @@
  style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
 >
  {#if !loaded}
-    <div class="loading" style={contentStyle}>
+    <div class="loading" style={heightStyle}>
      <ProgressCircle />
    </div>
  {:else}
-    <div class="spectrum-Table" style={`${contentStyle}${gridStyle}`}>
+    <div class="spectrum-Table" style={`${heightStyle}${gridStyle}`}>
      {#if fields.length}
        <div class="spectrum-Table-head">
          {#if showEditColumn}
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
--- a/packages/builder/cypress/integration/changeAppIconAndColour.spec.js
+++ b/packages/builder/cypress/integration/changeAppIconAndColour.spec.js
@ -5,10 +5,14 @@ filterTests(['all'], () => {
      before(() => {
        cy.login()
      })
+
+      after(() => {
+        cy.deleteAllApps()
+      })
      
      it("should change the icon and colour for an application", () => {
          // Search for test application
-          cy.searchForApplication("Cypress Tests")
+          cy.applicationInAppTable("Cypress Tests")
          cy.get(".appTable")
            .within(() => {
              cy.get(".spectrum-Icon").eq(1).click()
--- a/packages/builder/cypress/integration/createApp.spec.js
+++ b/packages/builder/cypress/integration/createApp.spec.js
@ -2,11 +2,146 @@ import filterTests from '../support/filterTests'

 filterTests(['smoke', 'all'], () => {
  context("Create an Application", () => {
-    it("should create a new application", () => {
+
+    beforeEach(() => {
      cy.login()
-      cy.createTestApp()
-      cy.visit(`${Cypress.config().baseUrl}/builder`)
-      cy.contains("Cypress Tests").should("exist")
    })
+
+    it("should show the new user UI/UX", () => {
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.get(`[data-cy="create-app-btn"]`).contains('Start from scratch').should("exist")
+      cy.get(`[data-cy="import-app-btn"]`).should("exist")
+      
+      cy.get(".template-category-filters").should("exist")
+      cy.get(".template-categories").should("exist")
+      
+      cy.get(".appTable").should("not.exist")
+    })
+
+    it("should provide filterable templates", () => {
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.wait(500)
+
+      cy.get(".template-category-filters").should("exist")
+      cy.get(".template-categories").should("exist")
+      
+      cy.get(".template-category").its('length').should('be.gt', 1)
+      cy.get(".template-category-filters .spectrum-ActionButton").its('length').should('be.gt', 2)
+      
+      cy.get(".template-category-filters .spectrum-ActionButton").eq(1).click()
+      cy.get(".template-category").should('have.length', 1)
+
+      cy.get(".template-category-filters .spectrum-ActionButton").eq(0).click()
+      cy.get(".template-category").its('length').should('be.gt', 1)
+    })
+
+    it("should enforce a valid url before submission", () => {
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.wait(500)
+
+      const appName = "A New App"
+      
+      cy.get(`[data-cy="create-app-btn"]`).contains('Start from scratch').click({force: true})
+      cy.get(".spectrum-Modal").within(() => {
+
+        //Auto fill
+        cy.get("input").eq(0).type(appName).should("have.value", appName).blur()
+        cy.get("input").eq(1).should("have.value", "/a-new-app")
+        cy.get(".spectrum-ButtonGroup").contains("Create app").should('not.be.disabled')
+
+        //Empty the app url - disabled create
+        cy.get("input").eq(1).clear().blur()
+        cy.get(".spectrum-ButtonGroup").contains("Create app").should('be.disabled')
+
+        //Invalid url
+        cy.get("input").eq(1).type("/new app-url").blur()
+        cy.get(".spectrum-ButtonGroup").contains("Create app").should('be.disabled')
+
+        //Specifically alter the url
+        cy.get("input").eq(1).clear()
+        cy.get("input").eq(1).type("another-app-name").blur()
+        cy.get("input").eq(1).should("have.value", "/another-app-name")
+        cy.get("input").eq(0).should("have.value", appName)
+        cy.get(".spectrum-ButtonGroup").contains("Create app").should('not.be.disabled')
+
+      })
+    })
+
+    it("should create the first application from scratch", () => {
+      const appName = "Cypress Tests"
+      cy.deleteApp(appName)
+      cy.createApp(appName, "This app is used for Cypress testing.")
+
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.wait(1000)
+
+      cy.applicationInAppTable(appName)
+      cy.deleteApp(appName)
+    })
+
+    it("should generate the first application from a template", () => {
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.wait(500)
+
+      cy.get(".template-category-filters").should("exist")
+      cy.get(".template-categories").should("exist")
+
+      //### Select nth template and choose to create?
+      cy.get('.template-category').eq(0).within(() => {
+        const card = cy.get('.template-card').eq(0).should("exist");
+        const cardOverlay = card.get('.template-thumbnail-action-overlay').should("exist")
+        cardOverlay.invoke("show")
+        cardOverlay.get("button").contains("Use template").should("exist").click({force: true})
+      })
+
+      //### CMD Create app from theme card
+      cy.get(".spectrum-Modal").should('be.visible')
+      
+      const templateName = cy.get(".spectrum-Modal .template-thumbnail-text")
+      templateName.invoke('text')
+      .then(templateNameText => {
+        const templateNameParsed = "/"+templateNameText.toLowerCase().replace(/\s+/g, "-")
+        cy.get(".spectrum-Modal input").eq(0).should("have.value", templateNameText)
+        cy.get(".spectrum-Modal input").eq(1).should("have.value", templateNameParsed)
+
+        cy.get(".spectrum-Modal .spectrum-ButtonGroup").contains("Create app").click()
+        cy.wait(5000)
+        
+        cy.visit(`${Cypress.config().baseUrl}/builder`)
+        cy.wait(1000)
+
+        cy.applicationInAppTable(templateNameText)
+        cy.deleteAllApps() 
+      });
+
+    })
+
+    it("should display a second application and app filtering", () => {
+      const appName = "Cypress Tests"
+      cy.deleteApp(appName)
+      cy.createApp(appName, "This app is used for Cypress testing.")
+
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.wait(500)
+
+      const secondAppName = "Second App Demo"
+      cy.deleteApp(secondAppName)
+
+      cy.get(`[data-cy="create-app-btn"]`).contains('Create new app').click({force: true})
+      cy.wait(500)
+      cy.url().should('include', '/builder/portal/apps/create')
+
+      cy.createAppFromScratch(secondAppName)
+
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.wait(500)
+
+      //Both applications should exist and be searchable
+      cy.searchForApplication(appName)
+      cy.searchForApplication(secondAppName)
+
+      cy.deleteAllApps()
+    })
+
  })  
 })
--- a/packages/builder/cypress/integration/createTable.spec.js
+++ b/packages/builder/cypress/integration/createTable.spec.js
@ -7,6 +7,10 @@ filterTests(["smoke", "all"], () => {
      cy.createTestApp()
    })

+    after(() => {
+      cy.deleteAllApps()
+    })
+
    it("should create a new Table", () => {
      cy.createTable("dog")
      cy.wait(1000)
--- a/packages/builder/cypress/integration/createUserAndRoles.spec.js
+++ b/packages/builder/cypress/integration/createUserAndRoles.spec.js
@ -4,9 +4,14 @@ filterTests(["smoke", "all"], () => {
  context("Create a User and Assign Roles", () => {
    before(() => {
      cy.login()
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.wait(500)
+      cy.createAppFromScratch("Initial App")
    })

    it("should create a user", () => {
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.wait(1000)
      cy.createUser("bbuser@test.com")
      cy.get(".spectrum-Table").should("contain", "bbuser")
    })
@ -21,95 +26,104 @@ filterTests(["smoke", "all"], () => {
      cy.get(".spectrum-Table").eq(0).contains("No rows found")
    })

-    it("should assign role types", () => {
-      // 3 apps minimum required - to assign an app to each role type
-      cy.request(`${Cypress.config().baseUrl}/api/applications?status=all`)
-        .its("body")
-        .then(val => {
-          if (val.length < 3) {
-            for (let i = 1; i < 3; i++) {
-              const uuid = () => Cypress._.random(0, 1e6)
-              const name = uuid()
-              cy.createApp(name)
+    if (Cypress.env("TEST_ENV")) {
+      it("should assign role types", () => {
+        // 3 apps minimum required - to assign an app to each role type
+        cy.request(`${Cypress.config().baseUrl}/api/applications?status=all`)
+          .its("body")
+          .then(val => {
+            if (val.length < 3) {
+              for (let i = 1; i < 3; i++) {
+                const uuid = () => Cypress._.random(0, 1e6)
+                const name = uuid()
+                if(i < 1){
+                  cy.createApp(name)
+                } else {
+                  cy.visit(`${Cypress.config().baseUrl}/builder`)
+                  cy.wait(500)
+                  cy.get(`[data-cy="create-app-btn"]`).click({ force: true })
+                  cy.createAppFromScratch(name)
+                }
+              }
            }
-          }
-        })
-      // Navigate back to the user
-      cy.visit(`${Cypress.config().baseUrl}/builder`)
-      cy.wait(500)
-      cy.get(".spectrum-SideNav").contains("Users").click()
-      cy.wait(500)
-      cy.get(".spectrum-Table").contains("bbuser").click()
-      cy.wait(1000)
-      for (let i = 0; i < 3; i++) {
-        cy.get(".spectrum-Table")
-          .eq(1)
-          .find(".spectrum-Table-row")
-          .eq(0)
-          .find(".spectrum-Table-cell")
-          .eq(0)
-          .click()
-        cy.wait(500)
-        cy.get(".spectrum-Dialog-grid")
-          .contains("Choose an option")
-          .click()
-          .then(() => {
-            cy.wait(1000)
-            if (i == 0) {
-              cy.get(".spectrum-Popover").contains("Admin").click()
-            }
-            if (i == 1) {
-              cy.get(".spectrum-Popover").contains("Power").click()
-            }
-            if (i == 2) {
-              cy.get(".spectrum-Popover").contains("Basic").click()
-            }
-            cy.wait(1000)
-            cy.get(".spectrum-Button")
-              .contains("Update role")
-              .click({ force: true })
          })
-      }
-      // Confirm roles exist within Configure roles table
-      cy.wait(2000)
-      cy.get(".spectrum-Table")
-        .eq(0)
-        .within(assginedRoles => {
-          expect(assginedRoles).to.contain("Admin")
-          expect(assginedRoles).to.contain("Power")
-          expect(assginedRoles).to.contain("Basic")
-        })
-    })
-
-    it("should unassign role types", () => {
-      // Set each app within Configure roles table to 'No Access'
-      cy.get(".spectrum-Table")
-        .eq(0)
-        .find(".spectrum-Table-row")
-        .its("length")
-        .then(len => {
-          for (let i = 0; i < len; i++) {
-            cy.get(".spectrum-Table")
-              .eq(0)
-              .find(".spectrum-Table-row")
-              .eq(0)
-              .find(".spectrum-Table-cell")
-              .eq(0)
-              .click()
-              .then(() => {
-                cy.get(".spectrum-Picker").eq(1).click({ force: true })
-                cy.wait(500)
-                cy.get(".spectrum-Popover").contains("No Access").click()
-              })
-            cy.get(".spectrum-Button")
-              .contains("Update role")
-              .click({ force: true })
-            cy.wait(1000)
-          }
-        })
-      // Confirm Configure roles table no longer has any apps in it
-      cy.get(".spectrum-Table").eq(0).contains("No rows found")
-    })
+        // Navigate back to the user
+        cy.visit(`${Cypress.config().baseUrl}/builder`)
+        cy.wait(500)
+        cy.get(".spectrum-SideNav").contains("Users").click()
+        cy.wait(500)
+        cy.get(".spectrum-Table").contains("bbuser").click()
+        cy.wait(1000)
+        for (let i = 0; i < 3; i++) {
+          cy.get(".spectrum-Table")
+            .eq(1)
+            .find(".spectrum-Table-row")
+            .eq(0)
+            .find(".spectrum-Table-cell")
+            .eq(0)
+            .click()
+          cy.wait(500)
+          cy.get(".spectrum-Dialog-grid")
+            .contains("Choose an option")
+            .click()
+            .then(() => {
+              cy.wait(1000)
+              if (i == 0) {
+                cy.get(".spectrum-Popover").contains("Admin").click()
+              }
+              if (i == 1) {
+                cy.get(".spectrum-Popover").contains("Power").click()
+              }
+              if (i == 2) {
+                cy.get(".spectrum-Popover").contains("Basic").click()
+              }
+              cy.wait(1000)
+              cy.get(".spectrum-Button")
+                .contains("Update role")
+                .click({ force: true })
+            })
+        }
+        // Confirm roles exist within Configure roles table
+        cy.wait(2000)
+        cy.get(".spectrum-Table")
+          .eq(0)
+          .within(assginedRoles => {
+            expect(assginedRoles).to.contain("Admin")
+            expect(assginedRoles).to.contain("Power")
+            expect(assginedRoles).to.contain("Basic")
+          })
+      })
+  
+      it("should unassign role types", () => {
+        // Set each app within Configure roles table to 'No Access'
+        cy.get(".spectrum-Table")
+          .eq(0)
+          .find(".spectrum-Table-row")
+          .its("length")
+          .then(len => {
+            for (let i = 0; i < len; i++) {
+              cy.get(".spectrum-Table")
+                .eq(0)
+                .find(".spectrum-Table-row")
+                .eq(0)
+                .find(".spectrum-Table-cell")
+                .eq(0)
+                .click()
+                .then(() => {
+                  cy.get(".spectrum-Picker").eq(1).click({ force: true })
+                  cy.wait(500)
+                  cy.get(".spectrum-Popover").contains("No Access").click()
+                })
+              cy.get(".spectrum-Button")
+                .contains("Update role")
+                .click({ force: true })
+              cy.wait(1000)
+            }
+          })
+        // Confirm Configure roles table no longer has any apps in it
+        cy.get(".spectrum-Table").eq(0).contains("No rows found")
+      })
+    }

    it("should enable Developer access", () => {
      // Enable Developer access
--- a/packages/builder/cypress/integration/createView.spec.js
+++ b/packages/builder/cypress/integration/createView.spec.js
@ -4,6 +4,8 @@ filterTests(['smoke', 'all'], () => {
  context("Create a View", () => {
    before(() => {
      cy.login()
+      cy.deleteAllApps()
+
      cy.createTestApp()
      cy.createTable("data")
      cy.addColumn("data", "group", "Text")
--- a/packages/builder/cypress/integration/datasources/rest.spec.js
+++ b/packages/builder/cypress/integration/datasources/rest.spec.js
@ -4,6 +4,7 @@ filterTests(["smoke", "all"], () => {
  context("REST Datasource Testing", () => {
    before(() => {
      cy.login()
+      cy.deleteAllApps()
      cy.createTestApp()
    })

--- a/packages/builder/cypress/integration/queryLevelTransformers.spec.js
+++ b/packages/builder/cypress/integration/queryLevelTransformers.spec.js
@ -4,7 +4,7 @@ filterTests(["smoke", "all"], () => {
  context("Query Level Transformers", () => {
    before(() => {
      cy.login()
-      cy.deleteApp("Cypress Tests")
+      cy.deleteAllApps()
      cy.createApp("Cypress Tests")
    })

--- a/packages/builder/cypress/integration/renameAnApplication.spec.js
+++ b/packages/builder/cypress/integration/renameAnApplication.spec.js
@ -1,133 +1,133 @@
 import filterTests from "../support/filterTests"

 filterTests(['all'], () => {
-    context("Rename an App", () => {
-        beforeEach(() => {
-        cy.login()
-        cy.createTestApp()
-        })
+  context("Rename an App", () => {
+    beforeEach(() => {
+      cy.login()
+      cy.createTestApp()
+    })

    it("should rename an unpublished application", () => {
-        const appName = "Cypress Tests"
-        const appRename = "Cypress Renamed"
-        // Rename app, Search for app, Confirm name was changed
-        cy.get(".home-logo").click()
-        renameApp(appName, appRename)
-        cy.reload()
-        cy.wait(1000)
-        cy.searchForApplication(appRename)
-        cy.get(".appTable").find(".title").should("have.length", 1)
-        // Set app name back to Cypress Tests
-        cy.reload()
-        cy.wait(1000)
-        renameApp(appRename, appName)
+      const appName = "Cypress Tests"
+      const appRename = "Cypress Renamed"
+      // Rename app, Search for app, Confirm name was changed
+      cy.get(".home-logo").click()
+      renameApp(appName, appRename)
+      cy.reload()
+      cy.wait(1000)
+      cy.get(".appTable").find(".title").should("have.length", 1)
+      cy.applicationInAppTable(appRename)
+      // Set app name back to Cypress Tests
+      cy.reload()
+      cy.wait(1000)
+      renameApp(appRename, appName)
    })
-        
+
    xit("Should rename a published application", () => {
-        // It is not possible to rename a published application
-        const appName = "Cypress Tests"
-        const appRename = "Cypress Renamed"
-        // Publish the app
-        cy.get(".toprightnav")
-        cy.get(".spectrum-Button").contains("Publish").click({force: true})
-        cy.get(".spectrum-Dialog-grid")
-            .within(() => {
-                // Click publish again within the modal
-                cy.get(".spectrum-Button").contains("Publish").click({force: true})
-            })
-        // Rename app, Search for app, Confirm name was changed
-        cy.get(".home-logo").click()
-        renameApp(appName, appRename, true)
-        cy.searchForApplication(appRename)
-        cy.get(".appTable").find(".wrapper").should("have.length", 1)
+      // It is not possible to rename a published application
+      const appName = "Cypress Tests"
+      const appRename = "Cypress Renamed"
+      // Publish the app
+      cy.get(".toprightnav")
+      cy.get(".spectrum-Button").contains("Publish").click({ force: true })
+      cy.get(".spectrum-Dialog-grid")
+        .within(() => {
+          // Click publish again within the modal
+          cy.get(".spectrum-Button").contains("Publish").click({ force: true })
+        })
+      // Rename app, Search for app, Confirm name was changed
+      cy.get(".home-logo").click()
+      renameApp(appName, appRename, true)
+      cy.get(".appTable").find(".wrapper").should("have.length", 1)
+      cy.applicationInAppTable(appRename)
    })

    it("Should try to rename an application to have no name", () => {
-        const appName = "Cypress Tests"
-        cy.get(".home-logo").click()
-        renameApp(appName, " ", false, true)
-        cy.wait(500)
-        // Close modal and confirm name has not been changed
-        cy.get(".spectrum-Dialog-grid").contains("Cancel").click()
-        cy.reload() 
-        cy.wait(1000)
-        cy.searchForApplication(appName)
-        cy.get(".appTable").find(".title").should("have.length", 1)
+      const appName = "Cypress Tests"
+      cy.get(".home-logo").click()
+      renameApp(appName, " ", false, true)
+      cy.wait(500)
+      // Close modal and confirm name has not been changed
+      cy.get(".spectrum-Dialog-grid").contains("Cancel").click()
+      cy.reload()
+      cy.wait(1000)
+      cy.applicationInAppTable(appName)
+      cy.get(".appTable").find(".title").should("have.length", 1)

    })

    xit("Should create two applications with the same name", () => {
-        // It is not possible to have applications with the same name
-        const appName = "Cypress Tests"
-        cy.visit(`${Cypress.config().baseUrl}/builder`)
-        cy.wait(500)
-        cy.get(".spectrum-Button").contains("Create app").click({force: true})
-        cy.contains(/Start from scratch/).click()
-        cy.get(".spectrum-Modal")
+      // It is not possible to have applications with the same name
+      const appName = "Cypress Tests"
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.wait(500)
+      cy.get(".spectrum-Button").contains("Create app").click({ force: true })
+      cy.contains(/Start from scratch/).click()
+      cy.get(".spectrum-Modal")
        .within(() => {
-        cy.get("input").eq(0).type(appName)
-        cy.get(".spectrum-ButtonGroup").contains("Create app").click({force: true})
-        cy.get(".error").should("have.text", "Another app with the same name already exists")      
+          cy.get("input").eq(0).type(appName)
+          cy.get(".spectrum-ButtonGroup").contains("Create app").click({ force: true })
+          cy.get(".error").should("have.text", "Another app with the same name already exists")
        })
    })

    it("should validate application names", () => {
-        // App name must be letters, numbers and spaces only
-        // This test checks numbers and special characters specifically
-        const appName = "Cypress Tests"
-        const numberName = 12345
-        const specialCharName = "£$%^"
-        cy.get(".home-logo").click()
-        renameApp(appName, numberName)
-        cy.reload()
-        cy.wait(1000)
-        cy.searchForApplication(numberName)
-        cy.get(".appTable").find(".title").should("have.length", 1)
-        cy.reload()
-        cy.wait(1000)
-        renameApp(numberName, specialCharName)
-        cy.get(".error").should("have.text", "App name must be letters, numbers and spaces only")
-        // Set app name back to Cypress Tests
-        cy.reload()
-        cy.wait(1000)
-        renameApp(numberName, appName)
+      // App name must be letters, numbers and spaces only
+      // This test checks numbers and special characters specifically
+      const appName = "Cypress Tests"
+      const numberName = 12345
+      const specialCharName = "£$%^"
+      cy.get(".home-logo").click()
+      renameApp(appName, numberName)
+      cy.reload()
+      cy.wait(1000)
+      cy.applicationInAppTable(numberName)
+      cy.get(".appTable").find(".title").should("have.length", 1)
+      cy.reload()
+      cy.wait(1000)
+      renameApp(numberName, specialCharName)
+      cy.get(".error").should("have.text", "App name must be letters, numbers and spaces only")
+      // Set app name back to Cypress Tests
+      cy.reload()
+      cy.wait(1000)
+      renameApp(numberName, appName)
    })
-        
-        const renameApp = (originalName, changedName, published, noName) => {
-            cy.searchForApplication(originalName)
-            cy.request(`${Cypress.config().baseUrl}/api/applications?status=all`)
+
+    const renameApp = (originalName, changedName, published, noName) => {
+      cy.applicationInAppTable(originalName)
+      cy.request(`${Cypress.config().baseUrl}/api/applications?status=all`)
        .its("body")
        .then(val => {
-            if (val.length > 0) {
-                cy.get(".appTable")
-                .within(() => {
-                    cy.get(".spectrum-Icon").eq(1).click()
-                    })
-                // Check for when an app is published
-                if (published == true){
-                    // Should not have Edit as option, will unpublish app
-                    cy.should("not.have.value", "Edit")
-                    cy.get(".spectrum-Menu").contains("Unpublish").click()
-                    cy.get(".spectrum-Dialog-grid").contains("Unpublish app").click()
-                    cy.get(".appTable > :nth-child(5) > :nth-child(2) > .spectrum-Icon").click()
+          if (val.length > 0) {
+            cy.get(".appTable")
+              .within(() => {
+                cy.get(".spectrum-Icon").eq(1).click()
+              })
+            // Check for when an app is published
+            if (published == true) {
+              // Should not have Edit as option, will unpublish app
+              cy.should("not.have.value", "Edit")
+              cy.get(".spectrum-Menu").contains("Unpublish").click()
+              cy.get(".spectrum-Dialog-grid").contains("Unpublish app").click()
+              cy.get(".appTable > :nth-child(5) > :nth-child(2) > .spectrum-Icon").click()
+            }
+            cy.contains("Edit").click()
+            cy.get(".spectrum-Modal")
+              .within(() => {
+                if (noName == true) {
+                  cy.get("input").clear()
+                  cy.get(".spectrum-Dialog-grid").click()
+                    .contains("App name must be letters, numbers and spaces only")
+                  return cy
                }
-                cy.contains("Edit").click()
-                cy.get(".spectrum-Modal")
-                .within(() => {
-                    if (noName == true){
-                        cy.get("input").clear()
-                        cy.get(".spectrum-Dialog-grid").click()
-                        .contains("App name must be letters, numbers and spaces only")
-                        return cy
-                    }
-                    cy.get("input").clear()
-                    cy.get("input").eq(0).type(changedName).should("have.value", changedName).blur()
-                    cy.get(".spectrum-ButtonGroup").contains("Save").click({force: true})
-                    cy.wait(500)
-        })
-        }
+                cy.get("input").clear()
+                cy.get("input").eq(0).type(changedName).should("have.value", changedName).blur()
+                cy.get(".spectrum-ButtonGroup").contains("Save").click({ force: true })
+                cy.wait(500)
+              })
+          }
        })

    }
-    })
+  })
 })
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@ -35,7 +35,9 @@ Cypress.Commands.add("login", () => {
 Cypress.Commands.add("createApp", name => {
  cy.visit(`${Cypress.config().baseUrl}/builder`)
  cy.wait(500)
-  cy.get(".spectrum-Button").contains("Create app").click({ force: true })
+
+  cy.get(`[data-cy="create-app-btn"]`).click({ force: true })
+
  cy.get(".spectrum-Modal").within(() => {
    cy.get("input").eq(0).type(name).should("have.value", name).blur()
    cy.get(".spectrum-ButtonGroup").contains("Create app").click()
@ -51,10 +53,23 @@ Cypress.Commands.add("deleteApp", name => {
    .its("body")
    .then(val => {
      if (val.length > 0) {
-        cy.searchForApplication(name)
-        cy.get(".appTable").within(() => {
-          cy.get(".spectrum-Icon").eq(1).click()
+        const appId = val.reduce((acc, app) => {
+          if (name === app.name) {
+            acc = app.appId
+          }
+          return acc
+        }, "")
+
+        if (appId == "") {
+          return
+        }
+
+        const appIdParsed = appId.split("_").pop()
+        const actionEleId = `[data-cy=row_actions_${appIdParsed}]`
+        cy.get(actionEleId).within(() => {
+          cy.get(".spectrum-Icon").eq(0).click()
        })
+
        cy.get(".spectrum-Menu").then($menu => {
          if ($menu.text().includes("Unpublish")) {
            cy.get(".spectrum-Menu").contains("Unpublish").click()
@ -80,22 +95,18 @@ Cypress.Commands.add("deleteAllApps", () => {
    .its("body")
    .then(val => {
      for (let i = 0; i < val.length; i++) {
-        cy.get(".spectrum-Heading")
-          .eq(1)
-          .then(app => {
-            const name = app.text()
-            cy.get(".title")
-              .children()
-              .within(() => {
-                cy.get(".spectrum-Icon").eq(0).click()
-              })
-            cy.get(".spectrum-Menu").contains("Delete").click()
-            cy.get(".spectrum-Dialog-grid").within(() => {
-              cy.get("input").type(name)
-              cy.get(".spectrum-Button--warning").click()
-            })
-            cy.reload()
-          })
+        const appIdParsed = val[i].appId.split("_").pop()
+        const actionEleId = `[data-cy=row_actions_${appIdParsed}]`
+        cy.get(actionEleId).within(() => {
+          cy.get(".spectrum-Icon").eq(0).click()
+        })
+
+        cy.get(".spectrum-Menu").contains("Delete").click()
+        cy.get(".spectrum-Dialog-grid").within(() => {
+          cy.get("input").type(val[i].name)
+          cy.get(".spectrum-Button--warning").click()
+        })
+        cy.reload()
      }
    })
 })
@ -190,9 +201,11 @@ Cypress.Commands.add("addRowMultiValue", values => {
 Cypress.Commands.add("createUser", email => {
  // quick hacky recorded way to create a user
  cy.contains("Users").click()
-  cy.get(".spectrum-Button--primary").click()
+  cy.get(`[data-cy="add-user"]`).click()
  cy.get(".spectrum-Picker-label").click()
  cy.get(".spectrum-Menu-item:nth-child(2) > .spectrum-Menu-itemLabel").click()
+
+  //Onboarding type selector
  cy.get(
    ":nth-child(2) > .spectrum-Form-itemField > .spectrum-Textfield > .spectrum-Textfield-input"
  )
@ -247,7 +260,7 @@ Cypress.Commands.add("createScreen", (screenName, route) => {
  cy.get("[aria-label=AddCircle]").click()
  cy.get(".spectrum-Modal").within(() => {
    cy.get(".item").contains("Blank").click()
-    cy.get(".spectrum-Button").contains("Add Screens").click({ force: true })
+    cy.get(".spectrum-Button").contains("Add screens").click({ force: true })
    cy.wait(500)
  })
  cy.get(".spectrum-Dialog-grid").within(() => {
@ -265,7 +278,7 @@ Cypress.Commands.add("createAutogeneratedScreens", screenNames => {
  for (let i = 0; i < screenNames.length; i++) {
    cy.get(".item").contains(screenNames[i]).click()
  }
-  cy.get(".spectrum-Button").contains("Add Screens").click({ force: true })
+  cy.get(".spectrum-Button").contains("Add screens").click({ force: true })
  cy.wait(4000)
 })

@ -312,16 +325,37 @@ Cypress.Commands.add("addCustomSourceOptions", totalOptions => {
    })
 })

+//Filters visible with 1 or more
 Cypress.Commands.add("searchForApplication", appName => {
  cy.wait(1000)
  // Searches for the app
  cy.get(".filter").then(() => {
    cy.get(".spectrum-Textfield").within(() => {
+      cy.get("input").eq(0).clear()
      cy.get("input").eq(0).type(appName)
    })
  })
  // Confirms app exists after search
-  cy.get(".appTable").contains(appName)
+  cy.applicationInAppTable(appName)
+})
+
+//Assumes there are no others
+Cypress.Commands.add("applicationInAppTable", appName => {
+  cy.get(".appTable").within(() => {
+    cy.get(".title").contains(appName).should("exist")
+  })
+})
+
+Cypress.Commands.add("createAppFromScratch", appName => {
+  cy.get(`[data-cy="create-app-btn"]`)
+    .contains("Start from scratch")
+    .click({ force: true })
+  cy.get(".spectrum-Modal").within(() => {
+    cy.get("input").eq(0).type(appName).should("have.value", appName).blur()
+    cy.get(".spectrum-ButtonGroup").contains("Create app").click()
+    cy.wait(10000)
+  })
+  cy.createTable("Cypress Tests", true)
 })

 Cypress.Commands.add("selectExternalDatasource", datasourceName => {
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@ -1,6 +1,6 @@
 {
  "name": "@budibase/builder",
-  "version": "1.0.89-alpha.0",
+  "version": "1.0.104-alpha.0",
  "license": "GPL-3.0",
  "private": true,
  "scripts": {
@ -65,10 +65,10 @@
    }
  },
  "dependencies": {
-    "@budibase/bbui": "^1.0.89-alpha.0",
-    "@budibase/client": "^1.0.89-alpha.0",
-    "@budibase/frontend-core": "^1.0.89-alpha.0",
-    "@budibase/string-templates": "^1.0.89-alpha.0",
+    "@budibase/bbui": "^1.0.104-alpha.0",
+    "@budibase/client": "^1.0.104-alpha.0",
+    "@budibase/frontend-core": "^1.0.104-alpha.0",
+    "@budibase/string-templates": "^1.0.104-alpha.0",
    "@sentry/browser": "5.19.1",
    "@spectrum-css/page": "^3.0.1",
    "@spectrum-css/vars": "^3.0.1",
--- a/packages/builder/src/builderStore/componentUtils.js
+++ b/packages/builder/src/builderStore/componentUtils.js
@ -1,4 +1,10 @@
 import { store } from "./index"
+import { Helpers } from "@budibase/bbui"
+import {
+  decodeJSBinding,
+  encodeJSBinding,
+  findHBSBlocks,
+} from "@budibase/string-templates"

 /**
 * Recursively searches for a specific component ID
@ -161,3 +167,58 @@ export const getComponentSettings = componentType => {

  return settings
 }
+
+/**
+ * Randomises a components ID's, including all child component IDs, and also
+ * updates all data bindings to still be valid.
+ * This mutates the object in place.
+ * @param component the component to randomise
+ */
+export const makeComponentUnique = component => {
+  if (!component) {
+    return
+  }
+
+  // Replace component ID
+  const oldId = component._id
+  const newId = Helpers.uuid()
+  component._id = newId
+
+  if (component._children?.length) {
+    let children = JSON.stringify(component._children)
+
+    // Replace all instances of this ID in child HBS bindings
+    children = children.replace(new RegExp(oldId, "g"), newId)
+
+    // Replace all instances of this ID in child JS bindings
+    const bindings = findHBSBlocks(children)
+    bindings.forEach(binding => {
+      // JSON.stringify will have escaped double quotes, so we need
+      // to account for that
+      let sanitizedBinding = binding.replace(/\\"/g, '"')
+
+      // Check if this is a valid JS binding
+      let js = decodeJSBinding(sanitizedBinding)
+      if (js != null) {
+        // Replace ID inside JS binding
+        js = js.replace(new RegExp(oldId, "g"), newId)
+
+        // Create new valid JS binding
+        let newBinding = encodeJSBinding(js)
+
+        // Replace escaped double quotes
+        newBinding = newBinding.replace(/"/g, '\\"')
+
+        // Insert new JS back into binding.
+        // A single string replace here is better than a regex as
+        // the binding contains special characters, and we only need
+        // to replace a single instance.
+        children = children.replace(binding, newBinding)
+      }
+    })
+
+    // Recurse on all children
+    component._children = JSON.parse(children)
+    component._children.forEach(makeComponentUnique)
+  }
+}
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@ -126,7 +126,7 @@ export const getDatasourceForProvider = (asset, component) => {
  if (dataProviderSetting) {
    const settingValue = component[dataProviderSetting.key]
    const providerId = extractLiteralHandlebarsID(settingValue)
-    const provider = findComponent(asset.props, providerId)
+    const provider = findComponent(asset?.props, providerId)
    return getDatasourceForProvider(asset, provider)
  }

@ -393,18 +393,45 @@ const getUrlBindings = asset => {

 /**
 * Gets all bindable properties exposed in a button actions flow up until
- * the specified action ID.
+ * the specified action ID, as well as context provided for the action
+ * setting as a whole by the component.
 */
-export const getButtonContextBindings = (actions, actionId) => {
+export const getButtonContextBindings = (
+  asset,
+  componentId,
+  settingKey,
+  actions,
+  actionId
+) => {
+  let bindings = []
+
+  // Check if any context bindings are provided by the component for this
+  // setting
+  const component = findComponent(asset.props, componentId)
+  const settings = getComponentSettings(component?._component)
+  const eventSetting = settings.find(setting => setting.key === settingKey)
+  if (!eventSetting) {
+    return bindings
+  }
+  if (eventSetting.context?.length) {
+    eventSetting.context.forEach(contextEntry => {
+      bindings.push({
+        readableBinding: contextEntry.label,
+        runtimeBinding: `${makePropSafe("eventContext")}.${makePropSafe(
+          contextEntry.key
+        )}`,
+      })
+    })
+  }
+
  // Get the steps leading up to this value
  const index = actions?.findIndex(action => action.id === actionId)
  if (index == null || index === -1) {
-    return []
+    return bindings
  }
  const prevActions = actions.slice(0, index)

  // Generate bindings for any steps which provide context
-  let bindings = []
  prevActions.forEach((action, idx) => {
    const def = ActionDefinitions.actions.find(
      x => x.name === action["##eventHandlerType"]
@ -418,6 +445,7 @@ export const getButtonContextBindings = (actions, actionId) => {
      })
    }
  })
+
  return bindings
 }

@ -458,7 +486,7 @@ export const getSchemaForDatasource = (asset, datasource, options) => {
    // Determine the entity which backs this datasource.
    // "provider" datasources are those targeting another data provider
    if (type === "provider") {
-      const component = findComponent(asset.props, datasource.providerId)
+      const component = findComponent(asset?.props, datasource.providerId)
      const source = getDatasourceForProvider(asset, component)
      return getSchemaForDatasource(asset, source, options)
    }
--- a/packages/builder/src/builderStore/index.js
+++ b/packages/builder/src/builderStore/index.js
@ -3,7 +3,7 @@ import { getAutomationStore } from "./store/automation"
 import { getThemeStore } from "./store/theme"
 import { derived, writable } from "svelte/store"
 import { FrontendTypes, LAYOUT_NAMES } from "../constants"
-import { findComponent } from "./componentUtils"
+import { findComponent, findComponentPath } from "./componentUtils"

 export const store = getFrontendStore()
 export const automationStore = getAutomationStore()
@ -25,7 +25,17 @@ export const selectedComponent = derived(
    if (!$currentAsset || !$store.selectedComponentId) {
      return null
    }
-    return findComponent($currentAsset.props, $store.selectedComponentId)
+    return findComponent($currentAsset?.props, $store.selectedComponentId)
+  }
+)
+
+export const selectedComponentPath = derived(
+  [store, currentAsset],
+  ([$store, $currentAsset]) => {
+    return findComponentPath(
+      $currentAsset?.props,
+      $store.selectedComponentId
+    ).map(component => component._id)
  }
 )

--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@ -24,9 +24,9 @@ import {
  findAllMatchingComponents,
  findComponent,
  getComponentSettings,
+  makeComponentUnique,
 } from "../componentUtils"
 import { Helpers } from "@budibase/bbui"
-import { removeBindings } from "../dataBinding"

 const INITIAL_FRONTEND_STATE = {
  apps: [],
@ -45,6 +45,7 @@ const INITIAL_FRONTEND_STATE = {
    customThemes: false,
    devicePreview: false,
    messagePassing: false,
+    continueIfAction: false,
  },
  currentFrontEndType: "none",
  selectedScreenId: "",
@ -400,11 +401,11 @@ export const getFrontendStore = () => {
            parentComponent = selected
          } else {
            // Otherwise we need to use the parent of this component
-            parentComponent = findComponentParent(asset.props, selected._id)
+            parentComponent = findComponentParent(asset?.props, selected._id)
          }
        } else {
          // Use screen or layout if no component is selected
-          parentComponent = asset.props
+          parentComponent = asset?.props
        }

        // Attach component
@ -490,37 +491,22 @@ export const getFrontendStore = () => {
          }
        }
      },
-      paste: async (targetComponent, mode, preserveBindings = false) => {
+      paste: async (targetComponent, mode) => {
        let promises = []
        store.update(state => {
          // Stop if we have nothing to paste
          if (!state.componentToPaste) {
            return state
          }
-
-          // defines if this is a copy or a cut
          const cut = state.componentToPaste.isCut

-          // immediately need to remove bindings, currently these aren't valid when pasted
-          if (!cut && !preserveBindings) {
-            state.componentToPaste = removeBindings(state.componentToPaste, "")
-          }
-
-          // Clone the component to paste
-          // Retain the same ID if cutting as things may be referencing this component
+          // Clone the component to paste and make unique if copying
          delete state.componentToPaste.isCut
          let componentToPaste = cloneDeep(state.componentToPaste)
          if (cut) {
            state.componentToPaste = null
          } else {
-            const randomizeIds = component => {
-              if (!component) {
-                return
-              }
-              component._id = Helpers.uuid()
-              component._children?.forEach(randomizeIds)
-            }
-            randomizeIds(componentToPaste)
+            makeComponentUnique(componentToPaste)
          }

          if (mode === "inside") {
--- a/packages/builder/src/builderStore/store/screenTemplates/index.js
+++ b/packages/builder/src/builderStore/store/screenTemplates/index.js
@ -10,17 +10,18 @@ const allTemplates = tables => [
 ]

 // Allows us to apply common behaviour to all create() functions
-const createTemplateOverride = (frontendState, create) => () => {
-  const screen = create()
+const createTemplateOverride = (frontendState, template) => () => {
+  const screen = template.create()
  screen.name = screen.props._id
  screen.routing.route = screen.routing.route.toLowerCase()
+  screen.template = template.id
  return screen
 }

 export default (frontendState, tables) => {
  const enrichTemplate = template => ({
    ...template,
-    create: createTemplateOverride(frontendState, template.create),
+    create: createTemplateOverride(frontendState, template),
  })

  const fromScratch = enrichTemplate(createFromScratchScreen)
--- a/packages/builder/src/builderStore/store/theme.js
+++ b/packages/builder/src/builderStore/store/theme.js
@ -2,9 +2,10 @@ import { createLocalStorageStore } from "@budibase/frontend-core"

 export const getThemeStore = () => {
  const themeElement = document.documentElement
+
  const initialValue = {
    theme: "darkest",
-    options: ["lightest", "light", "dark", "darkest"],
+    options: ["lightest", "light", "dark", "darkest", "nord"],
  }
  const store = createLocalStorageStore("bb-theme", initialValue)

--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
@ -10,12 +10,10 @@
 <div class="title">
  <Tabs selected="Automations">
    <Tab title="Automations">
-      <div class="tab-content-padding">
-        <AutomationList />
-        <Modal bind:this={modal}>
-          <CreateAutomationModal {webhookModal} />
-        </Modal>
-      </div>
+      <AutomationList />
+      <Modal bind:this={modal}>
+        <CreateAutomationModal {webhookModal} />
+      </Modal>
    </Tab>
  </Tabs>
  <div class="add-button" data-cy="new-screen">
@ -24,9 +22,6 @@
 </div>

 <style>
-  .tab-content-padding {
-    padding: 0 var(--spacing-xl);
-  }
  .add-button {
    position: absolute;
    top: var(--spacing-l);
--- a/packages/builder/src/components/automation/AutomationPanel/UpdateAutomationModal.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/UpdateAutomationModal.svelte
@ -56,7 +56,7 @@
    <a
      slot="footer"
      target="_blank"
-      href="https://docs.budibase.com/automate/introduction-to-automate"
+      href="https://docs.budibase.com/docs/automation-steps"
    >
      <Icon name="InfoOutline" />
      <span>Learn about automations</span>
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@ -162,7 +162,7 @@
        <Select
          on:change={e => onChange(e, key)}
          value={inputData[key]}
-          options={Object.keys(table.schema)}
+          options={Object.keys(table?.schema || {})}
        />
      {:else if value.customType === "filters"}
        <ActionButton on:click={drawer.show}>Define filters</ActionButton>
--- a/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
@ -1,5 +1,5 @@
 <script>
-  import { Input, Select } from "@budibase/bbui"
+  import { Input, Select, Button } from "@budibase/bbui"
  import { createEventDispatcher } from "svelte"

  const dispatch = createEventDispatcher()
@ -62,9 +62,6 @@
 </script>

 <div class="root">
-  <div class="add-field">
-    <i class="ri-add-line" on:click={addField} />
-  </div>
  <div class="spacer" />
  {#each fieldsArray as field}
    <div class="field">
@ -88,6 +85,7 @@
      />
    </div>
  {/each}
+  <Button quiet secondary icon="Add" on:click={addField}>Add field</Button>
 </div>

 <style>
@ -103,52 +101,11 @@

  .field {
    max-width: 100%;
-    background-color: var(--grey-2);
    margin-bottom: var(--spacing-m);
-    border-style: solid;
-    border-width: 1px;
-    border-color: var(--grey-4);
    display: grid;
-    /*grid-template-rows: auto auto;
-    grid-template-columns: auto;*/
+    grid-template-columns: 1fr 1fr auto;
    position: relative;
-  }
-
-  .field :global(select) {
-    padding: var(--spacing-xs) 2rem var(--spacing-m) var(--spacing-s) !important;
-    font-size: var(--font-size-xs);
-    color: var(--grey-7);
-  }
-
-  .field :global(.pointer) {
-    padding-bottom: var(--spacing-m) !important;
-    color: var(--grey-2);
-  }
-
-  .field :global(input) {
-    padding: var(--spacing-m) var(--spacing-xl) var(--spacing-xs)
-      var(--spacing-m);
-    font-size: var(--font-size-s);
-    font-weight: bold;
-  }
-
-  .remove-field {
-    cursor: pointer;
-    color: var(--grey-6);
-    position: absolute;
-    top: var(--spacing-m);
-    right: 3px;
-  }
-
-  .remove-field:hover {
-    color: var(--black);
-  }
-
-  .add-field {
-    text-align: right;
-  }
-
-  .add-field > i {
-    cursor: pointer;
+    align-items: center;
+    gap: var(--spacing-m);
  }
 </style>
--- a/packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte
+++ b/packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte
@ -69,7 +69,7 @@
  <a
    slot="footer"
    target="_blank"
-    href="https://docs.budibase.com/automate/steps/triggers"
+    href="https://docs.budibase.com/docs/trigger"
  >
    <Icon name="InfoOutline" />
    <span>Learn about webhooks</span>
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@ -12,7 +12,7 @@
    Modal,
    notifications,
  } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher, onMount } from "svelte"
  import { cloneDeep } from "lodash/fp"
  import { tables } from "stores/backend"
  import { TableNames, UNEDITABLE_USER_FIELDS } from "constants"
@ -321,6 +321,12 @@
    }
    return newError
  }
+
+  onMount(() => {
+    if (primaryDisplay) {
+      field.constraints.presence = { allowEmpty: false }
+    }
+  })
 </script>

 <ModalContent
--- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte
@ -22,10 +22,11 @@
        const selected = $datasources.selected === datasource._id
        const open = openDataSources.includes(datasource._id)
        const containsSelected = containsActiveEntity(datasource)
+        const onlySource = $datasources.list.length === 1
        return {
          ...datasource,
          selected,
-          open: selected || open || containsSelected,
+          open: selected || open || containsSelected || onlySource,
        }
      })
    : []
--- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte
@ -15,6 +15,7 @@
  import ArrayRenderer from "components/common/renderers/ArrayRenderer.svelte"
  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
  import { goto } from "@roxi/routify"
+  import GoogleButton from "../_components/GoogleButton.svelte"

  export let datasource
  export let save
@ -160,6 +161,11 @@
      Fetch tables
    </Button>
    <Button cta icon="Add" on:click={createNewTable}>New table</Button>
+    {#if integration.auth}
+      {#if integration.auth.type === "google"}
+        <GoogleButton {datasource} />
+      {/if}
+    {/if}
  </div>
 </div>
 <Body>
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/Firebase.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/Firebase.svelte
@ -0,0 +1,54 @@
+<script>
+  export let width = "100"
+  export let height = "100"
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  viewBox="23 6 469 132"
+  {width}
+  {height}
+>
+  <defs id="defs202">
+    <linearGradient id="a" x1="-3.49%" x2="100.83%" y1="17.02%" y2="92.9%">
+      <stop offset="0%" stop-color="#fff" stop-opacity=".1" id="stop192" />
+      <stop offset="14%" stop-color="#fff" stop-opacity=".08" id="stop194" />
+      <stop offset="61%" stop-color="#fff" stop-opacity=".02" id="stop196" />
+      <stop offset="100%" stop-color="#fff" stop-opacity="0" id="stop198" />
+    </linearGradient>
+    <path
+      id="b"
+      d="M106.687 35.2742c-.186-1.0977-.967-2-2.0244-2.338s-2.2148-.057-3.0002.73L86.2473 49.166l-12.12-23.1455c-.5133-.9786-1.525-1.5914-2.6273-1.5914s-2.114.6128-2.6273 1.5914l-6.6277 12.656L45.62 7.5726c-.603-1.1297-1.8588-1.746-3.118-1.5297s-2.2394 1.216-2.4335 2.4827L24 111.701l42.9727 24.1654c2.6985 1.5113 5.985 1.5113 8.6836 0L119 111.701l-12.313-76.427z"
+    />
+  </defs>
+  <g id="g305" transform="matrix(2.9011579,0,0,2.9011579,43.533284,-135.93685)">
+    <path
+      fill="#ffa000"
+      d="M 23.8266,111.7182 39.9588,8.4901 c 0.1972,-1.266 1.1818,-2.264 2.445,-2.4786 1.2632,-0.2146 2.522,0.4028 3.126,1.5327 L 62.2133,38.6615 68.8633,26 c 0.515,-0.979 1.5303,-1.592 2.6366,-1.592 1.1063,0 2.1215,0.613 2.6366,1.592 l 45.0227,85.718 H 23.8266 Z"
+      id="path204"
+    />
+    <path
+      fill="#f57c00"
+      d="M 79.566,71.5074 62.2124,38.6472 23.8334,111.7187 Z"
+      id="path206"
+    />
+    <path
+      fill="#ffca28"
+      d="m 119.1666,111.7187 -12.356,-76.4603 c -0.1867,-1.098 -0.9703,-2 -2.0315,-2.34 -1.0612,-0.34 -2.2226,-0.057 -3.0107,0.7302 l -77.935,78.069 43.1234,24.1834 c 2.708,1.512 6.006,1.512 8.714,0 l 43.4958,-24.1834 z"
+      id="path208"
+    />
+    <path
+      fill="#ffffff"
+      fill-opacity="0.2"
+      d="m 106.8105,35.2584 c -0.1867,-1.098 -0.9703,-2 -2.0315,-2.34 -1.0612,-0.34 -2.2226,-0.057 -3.0107,0.7302 L 86.3,49.1562 74.1365,26 c -0.515,-0.979 -1.5303,-1.592 -2.6366,-1.592 -1.1063,0 -2.1215,0.613 -2.6366,1.592 L 62.2133,38.6615 45.529,7.5447 C 44.924,6.4145 43.6637,5.7981 42.399,6.0143 41.1343,6.2305 40.153,7.231 39.958,8.498 L 23.8333,111.7187 h -0.052 l 0.052,0.0596 0.4245,0.2085 77.488,-77.5775 c 0.7877,-0.7915 1.952,-1.076 3.016,-0.737 1.064,0.339 1.849,1.2445 2.0338,2.3457 l 12.2518,75.775 0.1192,-0.0745 -12.356,-76.4603 z M 23.9748,111.5772 39.9655,9.228 c 0.1948,-1.267 1.1784,-2.2675 2.442,-2.4837 1.2636,-0.2162 2.524,0.4 3.13,1.5304 L 62.22,39.392 68.87,26.7305 c 0.515,-0.979 1.5303,-1.592 2.6366,-1.592 1.1063,0 2.1215,0.613 2.6366,1.592 l 11.9167,22.664 -62.0858,62.1827 z"
+      id="path210"
+    />
+    <path
+      fill="#a52714"
+      opacity="0.2"
+      d="m 75.6708,135.1722 c -2.708,1.512 -6.006,1.512 -8.714,0 l -43.0192,-24.1162 -0.1043,0.663 43.1234,24.176 c 2.708,1.512 6.006,1.512 8.714,0 l 43.4958,-24.176 -0.1117,-0.6852 -43.384,24.1387 z"
+      id="path212"
+    />
+  </g>
+</svg>
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/firebase.svg
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/firebase.svg
@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="23 6 469 132"
+   width="100"
+   height="100"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs202">
+    <linearGradient
+       id="a"
+       x1="-3.49%"
+       x2="100.83%"
+       y1="17.02%"
+       y2="92.9%">
+      <stop
+         offset="0%"
+         stop-color="#fff"
+         stop-opacity=".1"
+         id="stop192" />
+      <stop
+         offset="14%"
+         stop-color="#fff"
+         stop-opacity=".08"
+         id="stop194" />
+      <stop
+         offset="61%"
+         stop-color="#fff"
+         stop-opacity=".02"
+         id="stop196" />
+      <stop
+         offset="100%"
+         stop-color="#fff"
+         stop-opacity="0"
+         id="stop198" />
+    </linearGradient>
+    <path
+       id="b"
+       d="M106.687 35.2742c-.186-1.0977-.967-2-2.0244-2.338s-2.2148-.057-3.0002.73L86.2473 49.166l-12.12-23.1455c-.5133-.9786-1.525-1.5914-2.6273-1.5914s-2.114.6128-2.6273 1.5914l-6.6277 12.656L45.62 7.5726c-.603-1.1297-1.8588-1.746-3.118-1.5297s-2.2394 1.216-2.4335 2.4827L24 111.701l42.9727 24.1654c2.6985 1.5113 5.985 1.5113 8.6836 0L119 111.701l-12.313-76.427z" />
+  </defs>
+  <g
+     id="g305"
+     transform="matrix(2.9011579,0,0,2.9011579,43.533284,-135.93685)">
+    <path
+       fill="#ffa000"
+       d="M 23.8266,111.7182 39.9588,8.4901 c 0.1972,-1.266 1.1818,-2.264 2.445,-2.4786 1.2632,-0.2146 2.522,0.4028 3.126,1.5327 L 62.2133,38.6615 68.8633,26 c 0.515,-0.979 1.5303,-1.592 2.6366,-1.592 1.1063,0 2.1215,0.613 2.6366,1.592 l 45.0227,85.718 H 23.8266 Z"
+       id="path204" />
+    <path
+       fill="#f57c00"
+       d="M 79.566,71.5074 62.2124,38.6472 23.8334,111.7187 Z"
+       id="path206" />
+    <path
+       fill="#ffca28"
+       d="m 119.1666,111.7187 -12.356,-76.4603 c -0.1867,-1.098 -0.9703,-2 -2.0315,-2.34 -1.0612,-0.34 -2.2226,-0.057 -3.0107,0.7302 l -77.935,78.069 43.1234,24.1834 c 2.708,1.512 6.006,1.512 8.714,0 l 43.4958,-24.1834 z"
+       id="path208" />
+    <path
+       fill="#ffffff"
+       fill-opacity="0.2"
+       d="m 106.8105,35.2584 c -0.1867,-1.098 -0.9703,-2 -2.0315,-2.34 -1.0612,-0.34 -2.2226,-0.057 -3.0107,0.7302 L 86.3,49.1562 74.1365,26 c -0.515,-0.979 -1.5303,-1.592 -2.6366,-1.592 -1.1063,0 -2.1215,0.613 -2.6366,1.592 L 62.2133,38.6615 45.529,7.5447 C 44.924,6.4145 43.6637,5.7981 42.399,6.0143 41.1343,6.2305 40.153,7.231 39.958,8.498 L 23.8333,111.7187 h -0.052 l 0.052,0.0596 0.4245,0.2085 77.488,-77.5775 c 0.7877,-0.7915 1.952,-1.076 3.016,-0.737 1.064,0.339 1.849,1.2445 2.0338,2.3457 l 12.2518,75.775 0.1192,-0.0745 -12.356,-76.4603 z M 23.9748,111.5772 39.9655,9.228 c 0.1948,-1.267 1.1784,-2.2675 2.442,-2.4837 1.2636,-0.2162 2.524,0.4 3.13,1.5304 L 62.22,39.392 68.87,26.7305 c 0.515,-0.979 1.5303,-1.592 2.6366,-1.592 1.1063,0 2.1215,0.613 2.6366,1.592 l 11.9167,22.664 -62.0858,62.1827 z"
+       id="path210" />
+    <path
+       fill="#a52714"
+       opacity="0.2"
+       d="m 75.6708,135.1722 c -2.708,1.512 -6.006,1.512 -8.714,0 l -43.0192,-24.1162 -0.1043,0.663 43.1234,24.176 c 2.708,1.512 6.006,1.512 8.714,0 l 43.4958,-24.176 -0.1117,-0.6852 -43.384,24.1387 z"
+       id="path212" />
+  </g>
+</svg>
--- a/packages/builder/src/components/backend/DatasourceNavigator/icons/index.js
+++ b/packages/builder/src/components/backend/DatasourceNavigator/icons/index.js
@ -12,6 +12,7 @@ import Rest from "./Rest.svelte"
 import Budibase from "./Budibase.svelte"
 import Oracle from "./Oracle.svelte"
 import GoogleSheets from "./GoogleSheets.svelte"
+import Firebase from "./Firebase.svelte"

 export default {
  BUDIBASE: Budibase,
@ -28,4 +29,5 @@ export default {
  REST: Rest,
  ORACLE: Oracle,
  GOOGLE_SHEETS: GoogleSheets,
+  FIREBASE: Firebase,
 }
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/ImportRestQueriesModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/ImportRestQueriesModal.svelte
@ -7,7 +7,6 @@
    Layout,
    Tabs,
    Tab,
-    Input,
    Heading,
    TextArea,
    Dropzone,
@ -98,15 +97,16 @@
    <Body size="XS"
      >Import your rest collection using one of the options below</Body
    >
-    <Tabs selected="Link">
-      <Tab title="Link">
+    <Tabs selected="File">
+      <!-- Commenting until nginx csp issue resolved -->
+      <!-- <Tab title="Link">
        <Input
          bind:value={$data.url}
          on:change={() => (lastTouched = "url")}
          label="Enter a URL"
          placeholder="e.g. https://petstore.swagger.io/v2/swagger.json"
        />
-      </Tab>
+      </Tab> -->
      <Tab title="File">
        <Dropzone
          gallery={false}
@ -115,7 +115,14 @@
            $data.file = e.detail?.[0]
            lastTouched = "file"
          }}
-          fileTags={["OpenAPI 2.0", "Swagger 2.0", "cURL", "YAML", "JSON"]}
+          fileTags={[
+            "OpenAPI 3.0",
+            "OpenAPI 2.0",
+            "Swagger 2.0",
+            "cURL",
+            "YAML",
+            "JSON",
+          ]}
          maximum={1}
        />
      </Tab>
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/packages/builder/src/components/common/NavItem.svelte
@ -1,6 +1,6 @@
 <script>
  import { Icon } from "@budibase/bbui"
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher, getContext } from "svelte"

  export let icon
  export let withArrow = false
@ -14,29 +14,46 @@
  export let iconText
  export let iconColor

+  const scrollApi = getContext("scroll")
  const dispatch = createEventDispatcher()

-  function onIconClick(event) {
-    event.stopPropagation()
+  let contentRef
+  $: selected && contentRef && scrollToView()
+
+  const onClick = () => {
+    scrollToView()
+    dispatch("click")
+  }
+
+  const onIconClick = e => {
+    e.stopPropagation()
    dispatch("iconClick")
  }
+
+  const scrollToView = () => {
+    if (!scrollApi || !contentRef) {
+      return
+    }
+    const bounds = contentRef.getBoundingClientRect()
+    scrollApi.scrollTo(bounds)
+  }
 </script>

 <div
  class="nav-item"
  class:border
  class:selected
-  style={`padding-left: ${indentLevel * 14}px`}
+  style={`padding-left: ${20 + indentLevel * 14}px`}
  {draggable}
  on:dragend
  on:dragstart
  on:dragover
  on:drop
-  on:click
+  on:click={onClick}
  ondragover="return false"
  ondragenter="return false"
 >
-  <div class="content">
+  <div class="nav-item-content" bind:this={contentRef}>
    {#if withArrow}
      <div class:opened class="icon arrow" on:click={onIconClick}>
        <Icon size="S" name="ChevronRight" />
@ -64,11 +81,16 @@

 <style>
  .nav-item {
-    border-radius: var(--border-radius-s);
    cursor: pointer;
    color: var(--grey-7);
    transition: background-color
      var(--spectrum-global-animation-duration-100, 130ms) ease-in-out;
+    padding: 0 var(--spacing-m) 0 var(--spacing-xl);
+    height: 32px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
  }
  .nav-item.selected {
    background-color: var(--grey-2);
@ -81,14 +103,14 @@
    visibility: visible;
  }

-  .content {
-    padding: 0 var(--spacing-s);
-    height: 32px;
+  .nav-item-content {
+    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-xs);
+    width: max-content;
  }

  .icon {
@ -111,12 +133,13 @@
  }

  .text {
-    flex: 1 1 auto;
    font-weight: 600;
    font-size: var(--spectrum-global-dimension-font-size-75);
+    white-space: nowrap;
+    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
-    white-space: nowrap;
+    flex: 0 0 auto;
  }

  .actions {
@ -125,9 +148,9 @@
    height: 20px;
    cursor: pointer;
    position: relative;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
+    display: grid;
+    margin-left: var(--spacing-s);
+    place-items: center;
  }

  .iconText {
--- a/packages/builder/src/components/common/TemplateCard.svelte
+++ b/packages/builder/src/components/common/TemplateCard.svelte
@ -0,0 +1,125 @@
+<script>
+  export let backgroundColour
+  export let imageSrc
+  export let name
+  export let icon
+  export let overlayEnabled = true
+
+  let imageError = false
+  let imageLoaded = false
+
+  const imageRenderError = () => {
+    imageError = true
+  }
+
+  const imageLoadSuccess = () => {
+    imageLoaded = true
+  }
+</script>
+
+<div class="template-card" style="background-color:{backgroundColour};">
+  <div class="template-thumbnail card-body">
+    <img
+      alt={name}
+      src={imageSrc}
+      on:error={imageRenderError}
+      on:load={imageLoadSuccess}
+      class={`${imageLoaded ? "loaded" : ""}`}
+    />
+    <div style={`display:${imageError ? "block" : "none"}`}>
+      <svg
+        width="26px"
+        height="26px"
+        class="spectrum-Icon"
+        style="color: white"
+        focusable="false"
+      >
+        <use xlink:href="#spectrum-icon-18-{icon}" />
+      </svg>
+    </div>
+    <div class={overlayEnabled ? "template-thumbnail-action-overlay" : ""}>
+      <slot />
+    </div>
+  </div>
+  <div class="template-thumbnail-text">
+    <div>{name}</div>
+  </div>
+</div>
+
+<style>
+  .template-thumbnail {
+    position: relative;
+  }
+
+  .template-card:hover .template-thumbnail-action-overlay {
+    opacity: 1;
+  }
+
+  .template-thumbnail-action-overlay {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 70%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.7);
+    opacity: 0;
+    transition: opacity var(--spectrum-global-animation-duration-100) ease;
+    border-top-right-radius: inherit;
+    border-top-left-radius: inherit;
+  }
+
+  .template-thumbnail-text {
+    position: absolute;
+    bottom: 0px;
+    display: flex;
+    align-items: center;
+    height: 30%;
+    width: 100%;
+    color: var(
+      --spectrum-heading-xs-text-color,
+      var(--spectrum-alias-heading-text-color)
+    );
+    background-color: var(--spectrum-global-color-gray-50);
+  }
+
+  .template-thumbnail-text > div {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .template-card {
+    position: relative;
+    display: flex;
+    border-radius: var(--border-radius-s);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    overflow: hidden;
+    min-height: 200px;
+  }
+
+  .template-card > * {
+    width: 100%;
+  }
+
+  .template-card img.loaded {
+    display: block;
+  }
+
+  .template-card img {
+    display: none;
+    max-width: 100%;
+    border-radius: var(--border-radius-s) 0px var(--border-radius-s) 0px;
+  }
+
+  .template-card:hover {
+    background: var(--spectrum-alias-background-color-tertiary);
+  }
+
+  .card-body {
+    padding-left: 1rem;
+    padding-top: 1rem;
+  }
+</style>
--- a/packages/builder/src/components/common/TemplateDisplay.svelte
+++ b/packages/builder/src/components/common/TemplateDisplay.svelte
@ -0,0 +1,152 @@
+<script>
+  import {
+    Layout,
+    Detail,
+    Heading,
+    Button,
+    Modal,
+    ActionGroup,
+    ActionButton,
+  } from "@budibase/bbui"
+  import TemplateCard from "components/common/TemplateCard.svelte"
+  import CreateAppModal from "components/start/CreateAppModal.svelte"
+
+  export let templates
+
+  let selectedTemplateCategory
+  let creationModal
+  let template
+
+  const groupTemplatesByCategory = (templates, categoryFilter) => {
+    let grouped = templates.reduce((acc, template) => {
+      if (
+        typeof categoryFilter === "string" &&
+        [categoryFilter].indexOf(template.category) < 0
+      ) {
+        return acc
+      }
+
+      acc[template.category] = !acc[template.category]
+        ? []
+        : acc[template.category]
+      acc[template.category].push(template)
+
+      return acc
+    }, {})
+    return grouped
+  }
+
+  $: filteredTemplates = groupTemplatesByCategory(
+    templates,
+    selectedTemplateCategory
+  )
+
+  $: filteredTemplateCategories = filteredTemplates
+    ? Object.keys(filteredTemplates).sort()
+    : []
+
+  $: templateCategories = templates
+    ? Object.keys(groupTemplatesByCategory(templates)).sort()
+    : []
+
+  const stopAppCreation = () => {
+    template = null
+  }
+</script>
+
+<div class="template-header">
+  <Layout noPadding gap="S">
+    <Heading size="S">Templates</Heading>
+    <div class="template-category-filters spectrum-ActionGroup">
+      <ActionGroup>
+        <ActionButton
+          selected={!selectedTemplateCategory}
+          on:click={() => {
+            selectedTemplateCategory = null
+          }}
+        >
+          All
+        </ActionButton>
+        {#each templateCategories as templateCategoryKey}
+          <ActionButton
+            dataCy={templateCategoryKey}
+            selected={templateCategoryKey == selectedTemplateCategory}
+            on:click={() => {
+              selectedTemplateCategory = templateCategoryKey
+            }}
+          >
+            {templateCategoryKey}
+          </ActionButton>
+        {/each}
+      </ActionGroup>
+    </div>
+  </Layout>
+</div>
+
+<div class="template-categories">
+  <Layout gap="XL" noPadding>
+    {#each filteredTemplateCategories as templateCategoryKey}
+      <div class="template-category" data-cy={templateCategoryKey}>
+        <Detail size="M">{templateCategoryKey}</Detail>
+        <div class="template-grid">
+          {#each filteredTemplates[templateCategoryKey] as templateEntry}
+            <TemplateCard
+              name={templateEntry.name}
+              imageSrc={templateEntry.image}
+              backgroundColour={templateEntry.background}
+              icon={templateEntry.icon}
+            >
+              <Button
+                cta
+                on:click={() => {
+                  template = templateEntry
+                  creationModal.show()
+                }}
+              >
+                Use template
+              </Button>
+              <a
+                href={templateEntry.url}
+                target="_blank"
+                class="overlay-preview-link spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary"
+                on:click|stopPropagation
+              >
+                Details
+              </a>
+            </TemplateCard>
+          {/each}
+        </div>
+      </div>
+    {/each}
+  </Layout>
+</div>
+
+<Modal
+  bind:this={creationModal}
+  padding={false}
+  width="600px"
+  on:hide={stopAppCreation}
+>
+  <CreateAppModal {template} />
+</Modal>
+
+<style>
+  .template-grid {
+    padding-top: 10px;
+    display: grid;
+    grid-gap: var(--spacing-xl);
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  }
+
+  a:hover.spectrum-Button.spectrum-Button--secondary.overlay-preview-link {
+    background-color: #c8c8c8;
+    border-color: #c8c8c8;
+    color: #505050;
+  }
+
+  a.spectrum-Button--secondary.overlay-preview-link {
+    margin-top: 20px;
+    border-color: #c8c8c8;
+    color: #c8c8c8;
+  }
+</style>
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@ -238,6 +238,7 @@
    border: var(--border-light);
    transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
      border-color 130ms ease-in-out;
+    word-wrap: break-word;
  }
  li:not(:last-of-type) {
    margin-bottom: var(--spacing-s);
--- a/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/ServerBindingPanel.svelte
@ -12,8 +12,8 @@
  const enrichBindings = bindings => {
    return bindings?.map(binding => ({
      ...binding,
-      readableBinding: binding.label || binding.readableBinding,
-      runtimeBinding: binding.path || binding.runtimeBinding,
+      readableBinding: binding.readableBinding || binding.label,
+      runtimeBinding: binding.runtimeBinding || binding.path,
    }))
  }
 </script>
--- a/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte
+++ b/packages/builder/src/components/deploy/CreateWebhookDeploymentModal.svelte
@ -40,7 +40,7 @@
  <a
    slot="footer"
    target="_blank"
-    href="https://docs.budibase.com/automate/steps/triggers"
+    href="https://docs.budibase.com/docs/trigger"
  >
    <i class="ri-information-line" />
    <span>Learn about webhooks</span>
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@ -68,6 +68,7 @@
    customTheme: $store.customTheme,
    previewDevice: $store.previewDevice,
    messagePassing: $store.clientFeatures.messagePassing,
+    isBudibaseEvent: true
  }
  $: json = JSON.stringify(previewData)

@ -160,6 +161,11 @@
        await store.actions.components.updateProp(data.prop, data.value)
      } else if (type === "delete-component" && data.id) {
        confirmDeleteComponent(data.id)
+      } else if (type === "duplicate-component" && data.id) {
+        const rootComponent = get(currentAsset).props
+        const component = findComponent(rootComponent, data.id)
+        store.actions.components.copy(component)
+        await store.actions.components.paste(component)
      } else if (type === "preview-loaded") {
        // Wait for this event to show the client library if intelligent
        // loading is supported
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@ -82,7 +82,8 @@
      "link",
      "icon",
      "embed",
-      "markdownviewer"
+      "markdownviewer",
+      "embeddedmap"
    ]
  }
 ]
--- a/packages/builder/src/components/design/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/design/AppPreview/iframeTemplate.js
@ -52,7 +52,7 @@ export default `
          console.error("Client received invalid JSON")
          // Ignore
        }
-        if (!parsed) {
+        if (!parsed || !parsed.isBudibaseEvent) {
          return
        }

--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentDropdownMenu.svelte
@ -21,7 +21,7 @@

  const moveUpComponent = () => {
    const asset = get(currentAsset)
-    const parent = findComponentParent(asset.props, component._id)
+    const parent = findComponentParent(asset?.props, component._id)
    if (!parent) {
      return
    }
@ -41,7 +41,7 @@

  const moveDownComponent = () => {
    const asset = get(currentAsset)
-    const parent = findComponentParent(asset.props, component._id)
+    const parent = findComponentParent(asset?.props, component._id)
    if (!parent) {
      return
    }
@ -61,7 +61,7 @@

  const duplicateComponent = () => {
    storeComponentForCopy(false)
-    pasteComponent("below", true)
+    pasteComponent("below")
  }

  const deleteComponent = async () => {
@ -73,14 +73,12 @@
  }

  const storeComponentForCopy = (cut = false) => {
-    // lives in store - also used by drag drop
    store.actions.components.copy(component, cut)
  }

-  const pasteComponent = (mode, preserveBindings = false) => {
+  const pasteComponent = mode => {
    try {
-      // lives in store - also used by drag drop
-      store.actions.components.paste(component, mode, preserveBindings)
+      store.actions.components.paste(component, mode)
    } catch (error) {
      notifications.error("Error saving component")
    }
@ -140,3 +138,10 @@
    onOk={deleteComponent}
  />
 {/if}
+
+<style>
+  .icon {
+    display: grid;
+    place-items: center;
+  }
+</style>
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ComponentTree.svelte
@ -1,10 +1,11 @@
 <script>
  import { store } from "builderStore"
  import { DropEffect, DropPosition } from "./dragDropStore"
-  import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte"
+  import ComponentDropdownMenu from "./ComponentDropdownMenu.svelte"
  import NavItem from "components/common/NavItem.svelte"
  import { capitalise } from "helpers"
  import { notifications } from "@budibase/bbui"
+  import { selectedComponentPath } from "builderStore"

  export let components = []
  export let currentComponent
@ -71,10 +72,20 @@
      notifications.error("Error saving component")
    }
  }
+
+  const isOpen = (component, selectedComponentPath, closedNodes) => {
+    if (!component?._children?.length) {
+      return false
+    }
+    if (selectedComponentPath.includes(component._id)) {
+      return true
+    }
+    return !closedNodes[component._id]
+  }
 </script>

 <ul>
-  {#each components as component, index (component._id)}
+  {#each components || [] as component, index (component._id)}
    <li on:click|stopPropagation={() => selectComponent(component)}>
      {#if $dragDropStore?.targetComponent === component && $dragDropStore.dropPosition === DropPosition.ABOVE}
        <div
@ -97,12 +108,12 @@
        withArrow
        indentLevel={level + 1}
        selected={$store.selectedComponentId === component._id}
-        opened={!closedNodes[component._id] && component?._children?.length}
+        opened={isOpen(component, $selectedComponentPath, closedNodes)}
      >
        <ComponentDropdownMenu {component} />
      </NavItem>

-      {#if component._children && !closedNodes[component._id]}
+      {#if isOpen(component, $selectedComponentPath, closedNodes)}
        <svelte:self
          components={component._children}
          {currentComponent}
@ -133,6 +144,10 @@
    padding-left: 0;
    margin: 0;
  }
+  ul,
+  li {
+    min-width: max-content;
+  }

  .drop-item {
    border-radius: var(--border-radius-m);
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
@ -51,7 +51,7 @@
  bind:this={confirmDeleteDialog}
  title="Confirm Deletion"
  body={"Are you sure you wish to delete this layout?"}
-  okText="Delete Layout"
+  okText="Delete layout"
  onOk={deleteLayout}
 />

@ -65,3 +65,10 @@
    <Input thin type="text" label="Name" bind:value={name} />
  </ModalContent>
 </Modal>
+
+<style>
+  .icon {
+    display: grid;
+    place-items: center;
+  }
+</style>
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathDropdownMenu.svelte
@ -0,0 +1,82 @@
+<script>
+  import { goto } from "@roxi/routify"
+  import { store } from "builderStore"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import {
+    ActionMenu,
+    MenuItem,
+    Icon,
+    Layout,
+    notifications,
+  } from "@budibase/bbui"
+  import { get } from "svelte/store"
+
+  export let path
+  export let screens
+
+  let confirmDeleteDialog
+
+  const deleteScreens = async () => {
+    if (!screens?.length) {
+      return
+    }
+    try {
+      for (let { id } of screens) {
+        // We have to fetch the screen to be deleted immediately before deleting
+        // as otherwise we're very likely to 409
+        const screen = get(store).screens.find(screen => screen._id === id)
+        if (!screen) {
+          continue
+        }
+        await store.actions.screens.delete(screen)
+      }
+      notifications.success("Screens deleted successfully")
+      $goto("../")
+    } catch (error) {
+      notifications.error("Error deleting screens")
+    }
+  }
+</script>
+
+<ActionMenu>
+  <div slot="control" class="icon">
+    <Icon size="S" hoverable name="MoreSmallList" />
+  </div>
+  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>
+    Delete all screens
+  </MenuItem>
+</ActionMenu>
+
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  title="Confirm Deletion"
+  okText="Delete screens"
+  onOk={deleteScreens}
+>
+  <Layout noPadding gap="S">
+    <div>
+      Are you sure you want to delete all screens under the <b>{path}</b> route?
+    </div>
+    <div>The following screens will be deleted:</div>
+    <div class="to-delete">
+      {#each screens as screen}
+        <div>{screen.route}</div>
+      {/each}
+    </div>
+  </Layout>
+</ConfirmDialog>
+
+<style>
+  .to-delete {
+    font-weight: bold;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    padding-left: var(--spacing-xl);
+  }
+  .icon {
+    display: grid;
+    place-items: center;
+  }
+</style>
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/PathTree.svelte
@ -8,6 +8,7 @@
  import instantiateStore from "./dragDropStore"
  import ComponentTree from "./ComponentTree.svelte"
  import NavItem from "components/common/NavItem.svelte"
+  import PathDropdownMenu from "./PathDropdownMenu.svelte"
  import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
  import { get } from "svelte/store"

@ -28,6 +29,7 @@
  export let border

  let routeManuallyOpened = false
+
  $: selectedScreen = $currentAsset
  $: allScreens = getAllScreens(route)
  $: filteredScreens = getFilteredScreens(allScreens, $screenSearchString)
@ -73,14 +75,17 @@
    opened={routeOpened}
    {border}
    withArrow={route.subpaths}
-  />
+  >
+    <PathDropdownMenu screens={allScreens} {path} />
+  </NavItem>

  {#if routeOpened}
    {#each filteredScreens as screen (screen.id)}
      <NavItem
        icon="WebPage"
        indentLevel={indent || 1}
-        selected={$store.selectedScreenId === screen.id}
+        selected={$store.selectedScreenId === screen.id &&
+          $store.currentView === "detail"}
        opened={$store.selectedScreenId === screen.id}
        text={ROUTE_NAME_MAP[screen.route]?.[screen.role] || screen.route}
        withArrow={route.subpaths}
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
@ -2,14 +2,57 @@
  import { goto } from "@roxi/routify"
  import { store, allScreens } from "builderStore"
  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { ActionMenu, MenuItem, Icon, notifications } from "@budibase/bbui"
+  import {
+    ActionMenu,
+    MenuItem,
+    Icon,
+    Modal,
+    Helpers,
+    notifications,
+  } from "@budibase/bbui"
+  import ScreenDetailsModal from "../ScreenDetailsModal.svelte"
+  import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
+  import analytics, { Events } from "analytics"
+  import { makeComponentUnique } from "builderStore/componentUtils"

  export let screenId

  let confirmDeleteDialog
+  let screenDetailsModal

  $: screen = $allScreens.find(screen => screen._id === screenId)

+  const duplicateScreen = () => {
+    screenDetailsModal.show()
+  }
+
+  const createDuplicateScreen = async ({ screenName, screenUrl }) => {
+    // Create a dupe and ensure it is unique
+    let duplicateScreen = Helpers.cloneDeep(screen)
+    delete duplicateScreen._id
+    delete duplicateScreen._rev
+    makeComponentUnique(duplicateScreen.props)
+
+    // Attach the new name and URL
+    duplicateScreen.routing.route = sanitizeUrl(screenUrl)
+    duplicateScreen.props._instanceName = screenName
+
+    try {
+      // Create the screen
+      await store.actions.screens.save(duplicateScreen)
+
+      // Analytics
+      if (screen.template) {
+        analytics.captureEvent(Events.SCREEN.CREATED, {
+          template: "createFromScratch",
+        })
+      }
+    } catch (error) {
+      notifications.error("Error duplicating screen")
+      console.log(error)
+    }
+  }
+
  const deleteScreen = async () => {
    try {
      await store.actions.screens.delete(screen)
@ -19,12 +62,28 @@
      notifications.error("Error deleting screen")
    }
  }
+
+  const pasteComponent = mode => {
+    try {
+      store.actions.components.paste(screen?.props, mode)
+    } catch (error) {
+      notifications.error("Error saving component")
+    }
+  }
 </script>

 <ActionMenu>
  <div slot="control" class="icon">
    <Icon size="S" hoverable name="MoreSmallList" />
  </div>
+  <MenuItem icon="Duplicate" on:click={duplicateScreen}>Duplicate</MenuItem>
+  <MenuItem
+    icon="ShowOneLayer"
+    on:click={() => pasteComponent("inside")}
+    disabled={!$store.componentToPaste}
+  >
+    Paste inside
+  </MenuItem>
  <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
 </ActionMenu>

@ -32,6 +91,22 @@
  bind:this={confirmDeleteDialog}
  title="Confirm Deletion"
  body={"Are you sure you wish to delete this screen?"}
-  okText="Delete Screen"
+  okText="Delete screen"
  onOk={deleteScreen}
 />
+
+<Modal bind:this={screenDetailsModal}>
+  <ScreenDetailsModal
+    onConfirm={createDuplicateScreen}
+    screenName={screen?.props._instanceName}
+    screenUrl={screen?.routing.route}
+    confirmText="Duplicate"
+  />
+</Modal>
+
+<style>
+  .icon {
+    display: grid;
+    place-items: center;
+  }
+</style>
--- a/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/index.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/index.svelte
@ -55,11 +55,10 @@
  }
 </script>

-<div class="root">
+<div class="root" class:has-screens={!!paths?.length}>
  {#each paths as path, idx (path)}
    <PathTree border={idx > 0} {path} route={routes[path]} />
  {/each}
-
  {#if !paths.length}
    <div class="empty">
      There aren't any screens configured with this access role.
@ -68,9 +67,12 @@
 </div>

 <style>
+  .root.has-screens {
+    min-width: max-content;
+  }
  div.empty {
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-s);
    color: var(--grey-5);
-    padding-top: var(--spacing-xs);
+    padding: var(--spacing-xs) var(--spacing-xl);
  }
 </style>
--- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
@ -1,5 +1,5 @@
 <script>
-  import { onMount } from "svelte"
+  import { onMount, setContext } from "svelte"
  import { goto, params } from "@roxi/routify"
  import {
    store,
@ -18,11 +18,63 @@
    Search,
    Tabs,
    Tab,
+    Layout as BBUILayout,
    notifications,
  } from "@budibase/bbui"

  export let showModal

+  let scrollRef
+
+  const scrollTo = bounds => {
+    if (!bounds) {
+      return
+    }
+
+    const sidebarWidth = 259
+    const navItemHeight = 32
+    const { scrollLeft, scrollTop, offsetHeight } = scrollRef
+
+    let scrollBounds = scrollRef.getBoundingClientRect()
+    let newOffsets = {}
+
+    // Calculate left offset
+    const offsetX = bounds.left + bounds.width + scrollLeft + 20
+    if (offsetX > sidebarWidth) {
+      newOffsets.left = offsetX - sidebarWidth
+    } else {
+      newOffsets.left = 0
+    }
+    if (newOffsets.left === scrollLeft) {
+      delete newOffsets.left
+    }
+
+    // Calculate top offset
+    const offsetY = bounds.top - scrollBounds?.top + scrollTop
+    if (offsetY > scrollTop + offsetHeight - 2 * navItemHeight) {
+      newOffsets.top = offsetY - offsetHeight + 2 * navItemHeight
+    } else if (offsetY < scrollTop + navItemHeight) {
+      newOffsets.top = offsetY - navItemHeight
+    } else {
+      delete newOffsets.top
+    }
+
+    // Skip if offset is unchanged
+    if (newOffsets.left == null && newOffsets.top == null) {
+      return
+    }
+
+    // Smoothly scroll to the offset
+    scrollRef.scroll({
+      ...newOffsets,
+      behavior: "smooth",
+    })
+  }
+
+  setContext("scroll", {
+    scrollTo,
+  })
+
  const tabs = [
    {
      title: "Screens",
@ -79,7 +131,7 @@
  <Tabs {selected} on:select={navigate}>
    <Tab title="Screens">
      <div class="tab-content-padding">
-        <div class="role-select">
+        <BBUILayout noPadding gap="XS">
          <Select
            on:change={updateAccessRole}
            value={$selectedAccessRole}
@ -93,17 +145,24 @@
            label="Search Screens"
            bind:value={$screenSearchString}
          />
-        </div>
-        <div class="nav-items-container">
+        </BBUILayout>
+        <div class="nav-items-container" bind:this={scrollRef}>
          <ComponentNavigationTree />
        </div>
      </div>
    </Tab>
    <Tab title="Layouts">
      <div class="tab-content-padding">
-        {#each $store.layouts as layout, idx (layout._id)}
-          <Layout {layout} border={idx > 0} />
-        {/each}
+        <div
+          class="nav-items-container nav-items-container--layouts"
+          bind:this={scrollRef}
+        >
+          <div class="layouts-container">
+            {#each $store.layouts as layout, idx (layout._id)}
+              <Layout {layout} border={idx > 0} />
+            {/each}
+          </div>
+        </div>
        <Modal bind:this={newLayoutModal}>
          <NewLayoutModal />
        </Modal>
@ -126,23 +185,45 @@
    justify-content: flex-start;
    align-items: stretch;
    position: relative;
+    flex: 1 1 auto;
  }
+  .title :global(.spectrum-Tabs-content),
+  .title :global(.spectrum-Tabs-content > div),
+  .title :global(.spectrum-Tabs-content > div > div) {
+    height: 100%;
+  }
+
  .add-button {
    position: absolute;
    top: var(--spacing-l);
    right: var(--spacing-xl);
  }

-  .role-select {
+  .tab-content-padding {
+    padding: 0 var(--spacing-xl);
+    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
-    margin-bottom: var(--spacing-m);
-    gap: var(--spacing-m);
+    gap: var(--spacing-xl);
  }

-  .tab-content-padding {
-    padding: 0 var(--spacing-xl);
+  .nav-items-container {
+    border-top: var(--border-light);
+    margin: 0 calc(-1 * var(--spacing-xl));
+    padding: var(--spacing-m) 0;
+    flex: 1 1 auto;
+    overflow: auto;
+    height: 0;
+    position: relative;
+  }
+  .nav-items-container--layouts {
+    border-top: none;
+    margin-top: calc(-1 * var(--spectrum-global-dimension-static-size-150));
+  }
+
+  .layouts-container {
+    min-width: max-content;
  }
 </style>
--- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
@ -10,39 +10,19 @@
    ProgressCircle,
  } from "@budibase/bbui"
  import getTemplates from "builderStore/store/screenTemplates"
-  import { onDestroy } from "svelte"

-  import { createEventDispatcher } from "svelte"
-
-  export let chooseModal
-  export let save
+  export let onConfirm
+  export let onCancel
  export let showProgressCircle = false

-  let selectedScreens = []
-
  const blankScreen = "createFromScratch"
-  const dispatch = createEventDispatcher()

-  function setScreens() {
-    dispatch("save", {
-      screens: selectedScreens,
-    })
-  }
+  let selectedScreens = []
+  let templates = getTemplates($store, $tables.list)

  $: blankSelected = selectedScreens?.length === 1
  $: autoSelected = selectedScreens?.length > 0 && !blankSelected

-  let templates = getTemplates($store, $tables.list)
-
-  const confirm = async () => {
-    if (autoSelected) {
-      setScreens()
-      await save()
-    } else {
-      setScreens()
-      chooseModal(1)
-    }
-  }
  const toggleScreenSelection = table => {
    if (selectedScreens.find(s => s.table === table.name)) {
      selectedScreens = selectedScreens.filter(
@ -56,25 +36,25 @@
    }
  }

-  onDestroy(() => {
-    selectedScreens = []
-  })
+  const confirmScreenSelection = async () => {
+    await onConfirm(selectedScreens)
+  }
 </script>

 <div>
  <ModalContent
    title="Add screens"
-    confirmText="Add Screens"
+    confirmText="Add screens"
    cancelText="Cancel"
-    onConfirm={() => confirm()}
+    onConfirm={confirmScreenSelection}
+    {onCancel}
    disabled={!selectedScreens.length}
    size="L"
  >
-    <Body size="S"
-      >Please select the screens you would like to add to your application.
-      Autogenerated screens come with CRUD functionality.</Body
-    >
-
+    <Body size="S">
+      Please select the screens you would like to add to your application.
+      Autogenerated screens come with CRUD functionality.
+    </Body>
    <Layout noPadding gap="S">
      <Detail size="S">Blank screen</Detail>
      <div
--- a/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte
@ -2,58 +2,62 @@
  import { ModalContent, Input, ProgressCircle } from "@budibase/bbui"
  import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
  import { selectedAccessRole, allScreens } from "builderStore"
-  import { onDestroy } from "svelte"
+  import { get } from "svelte/store"

-  export let screenName
-  export let url
-  export let chooseModal
-  export let save
+  export let onConfirm
+  export let onCancel
  export let showProgressCircle = false
+  export let screenName
+  export let screenUrl
+  export let confirmText = "Continue"

  let routeError
-  let roleId = $selectedAccessRole || "BASIC"
+  let touched = false

  const routeChanged = event => {
    if (!event.detail.startsWith("/")) {
-      url = "/" + event.detail
+      screenUrl = "/" + event.detail
    }
-    url = sanitizeUrl(url)
-
-    if (routeExists(url, roleId)) {
+    touched = true
+    screenUrl = sanitizeUrl(screenUrl)
+    if (routeExists(screenUrl)) {
      routeError = "This URL is already taken for this access role"
    } else {
-      routeError = ""
+      routeError = null
    }
  }

-  const routeExists = (url, roleId) => {
-    return $allScreens.some(
+  const routeExists = url => {
+    const roleId = get(selectedAccessRole) || "BASIC"
+    return get(allScreens).some(
      screen =>
        screen.routing.route.toLowerCase() === url.toLowerCase() &&
        screen.routing.roleId === roleId
    )
  }

-  onDestroy(() => {
-    screenName = ""
-    url = ""
-  })
+  const confirmScreenDetails = async () => {
+    await onConfirm({
+      screenName,
+      screenUrl,
+    })
+  }
 </script>

 <ModalContent
  size="M"
  title={"Enter details"}
-  confirmText={"Continue"}
-  onCancel={() => chooseModal(0)}
-  onConfirm={() => save()}
+  {confirmText}
+  onConfirm={confirmScreenDetails}
+  {onCancel}
  cancelText={"Back"}
-  disabled={!screenName || !url || routeError}
+  disabled={!screenName || !screenUrl || routeError || !touched}
 >
  <Input label="Name" bind:value={screenName} />
  <Input
    label="URL"
    error={routeError}
-    bind:value={url}
+    bind:value={screenUrl}
    on:change={routeChanged}
  />
  <div slot="footer">
--- a/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
@ -3,141 +3,133 @@
  import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
  import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
  import { Modal, notifications } from "@budibase/bbui"
-  import { store, selectedAccessRole, allScreens } from "builderStore"
+  import { store, selectedAccessRole } from "builderStore"
  import analytics, { Events } from "analytics"
+  import { get } from "svelte/store"

-  let newScreenModal
-  let navigationSelectionModal
-  let screenDetailsModal
-  let screenName = ""
-  let url = ""
-  let selectedScreens = []
+  let pendingScreen
  let showProgressCircle = false
-  let routeError
-  let createdScreens = []

-  $: roleId = $selectedAccessRole || "BASIC"
+  // Modal refs
+  let newScreenModal
+  let screenDetailsModal

-  const createScreens = async () => {
-    for (let screen of selectedScreens) {
-      let test = screen.create()
-      createdScreens.push(test)
-      analytics.captureEvent(Events.SCREEN.CREATED, {
-        template: screen.id || screen.name,
-      })
-    }
-  }
+  // External handler to show the screen wizard
+  export const showModal = () => {
+    newScreenModal.show()

-  const save = async () => {
-    showProgressCircle = true
-    try {
-      await createScreens()
-      for (let screen of createdScreens) {
-        await saveScreens(screen)
-      }
-      await store.actions.routing.fetch()
-      selectedScreens = []
-      createdScreens = []
-      screenName = ""
-      url = ""
-    } catch (error) {
-      notifications.error("Error creating screens")
-    }
+    // Reset state when showing modal again
+    pendingScreen = null
    showProgressCircle = false
  }

-  const saveScreens = async draftScreen => {
-    let existingScreenCount = $store.screens.filter(
-      s => s.props._instanceName == draftScreen.props._instanceName
-    ).length
-    if (existingScreenCount > 0) {
-      let oldUrlArr = draftScreen.routing.route.split("/")
-      oldUrlArr[1] = `${oldUrlArr[1]}-${existingScreenCount + 1}`
-      draftScreen.routing.route = oldUrlArr.join("/")
+  // Creates an array of screens, checking and sanitising their URLs
+  const createScreens = async screens => {
+    if (!screens?.length) {
+      return
    }
+    showProgressCircle = true

-    let route = url ? sanitizeUrl(`${url}`) : draftScreen.routing.route
-    if (draftScreen) {
-      if (!route) {
-        routeError = "URL is required"
-      } else {
-        if (routeExists(route, roleId)) {
-          routeError = "This URL is already taken for this access role"
-        } else {
-          routeError = ""
+    try {
+      for (let screen of screens) {
+        // Check we aren't clashing with an existing URL
+        if (hasExistingUrl(screen.routing.route)) {
+          let suffix = 2
+          let candidateUrl = makeCandidateUrl(screen, suffix)
+          while (hasExistingUrl(candidateUrl)) {
+            candidateUrl = makeCandidateUrl(screen, ++suffix)
+          }
+          screen.routing.route = candidateUrl
        }
-      }

-      if (routeError) return false
+        // Sanitise URL
+        screen.routing.route = sanitizeUrl(screen.routing.route)

-      if (screenName) {
-        draftScreen.props._instanceName = screenName
-      }
+        // Use the currently selected role
+        screen.routing.roleId = get(selectedAccessRole) || "BASIC"

-      draftScreen.routing.route = route
-      draftScreen.routing.roleId = roleId
+        // Create the screen
+        await store.actions.screens.save(screen)

-      await store.actions.screens.save(draftScreen)
-      if (draftScreen.props._instanceName.endsWith("List")) {
-        try {
+        // Analytics
+        if (screen.template) {
+          analytics.captureEvent(Events.SCREEN.CREATED, {
+            template: screen.template,
+          })
+        }
+
+        // Add link in layout for list screens
+        if (screen.props._instanceName.endsWith("List")) {
          await store.actions.components.links.save(
-            draftScreen.routing.route,
-            draftScreen.routing.route.split("/")[1]
+            screen.routing.route,
+            screen.routing.route.split("/")[1]
          )
-        } catch (error) {
-          notifications.error("Error creating link to screen")
        }
      }
+    } catch (error) {
+      notifications.error("Error creating screens")
+    }
+
+    showProgressCircle = false
+  }
+
+  // Checks if any screens exist in the store with the given route and
+  // currently selected role
+  const hasExistingUrl = url => {
+    const roleId = get(selectedAccessRole) || "BASIC"
+    const screens = get(store).screens.filter(s => s.routing.roleId === roleId)
+    return !!screens.find(s => s.routing?.route === url)
+  }
+
+  // Constructs a candidate URL for a new screen, suffixing the base of the
+  // screen's URL with a given suffix.
+  // e.g. "/sales/:id" => "/sales-1/:id"
+  const makeCandidateUrl = (screen, suffix) => {
+    let url = screen.routing?.route || ""
+    if (url.startsWith("/")) {
+      url = url.slice(1)
+    }
+    if (!url.includes("/")) {
+      return `/${url}-${suffix}`
+    } else {
+      const split = url.split("/")
+      return `/${split[0]}-${suffix}/${split.slice(1).join("/")}`
    }
  }

-  const routeExists = (route, roleId) => {
-    return $allScreens.some(
-      screen =>
-        screen.routing.route.toLowerCase() === route.toLowerCase() &&
-        screen.routing.roleId === roleId
-    )
-  }
-
-  export const showModal = () => {
-    newScreenModal.show()
-  }
-
-  const setScreens = evt => {
-    selectedScreens = evt.detail.screens
-  }
-
-  const chooseModal = index => {
-    /*
-    0 = newScreenModal
-    1 = screenDetailsModal
-    2 = navigationSelectionModal
-    */
-    if (index === 0) {
-      newScreenModal.show()
-    } else if (index === 1) {
+  // Handler for NewScreenModal
+  const confirmScreenSelection = async templates => {
+    // Handle template selection
+    if (templates?.length > 1) {
+      // Autoscreens, so create immediately
+      const screens = templates.map(template => template.create())
+      await createScreens(screens)
+    } else {
+      // Empty screen, so proceed to the next modal
+      pendingScreen = templates[0].create()
      screenDetailsModal.show()
-    } else if (index === 2) {
-      navigationSelectionModal.show()
    }
  }
+
+  // Handler for ScreenDetailsModal
+  const confirmScreenDetails = async ({ screenName, screenUrl }) => {
+    if (!pendingScreen) {
+      return
+    }
+    pendingScreen.props._instanceName = screenName
+    pendingScreen.routing.route = screenUrl
+    await createScreens([pendingScreen])
+  }
 </script>

 <Modal bind:this={newScreenModal}>
-  <NewScreenModal
-    on:save={setScreens}
-    {showProgressCircle}
-    {save}
-    {chooseModal}
-  />
+  <NewScreenModal onConfirm={confirmScreenSelection} {showProgressCircle} />
 </Modal>

 <Modal bind:this={screenDetailsModal}>
  <ScreenDetailsModal
-    bind:screenName
-    bind:url
    {showProgressCircle}
-    {save}
-    {chooseModal}
+    onConfirm={confirmScreenDetails}
+    onCancel={() => newScreenModal.show()}
  />
 </Modal>
--- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
@ -33,7 +33,7 @@
    const customSections = settings.filter(setting => setting.section)
    return [
      {
-        name: "General",
+        name: componentDefinition?.name || "General",
        info: componentDefinition?.info,
        settings: generalSettings,
      },
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionDrawer.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionDrawer.svelte
@ -12,11 +12,13 @@
  import { getAvailableActions } from "./index"
  import { generate } from "shortid"
  import { getButtonContextBindings } from "builderStore/dataBinding"
+  import { currentAsset, store } from "builderStore"

  const flipDurationMs = 150
  const EVENT_TYPE_KEY = "##eventHandlerType"
  const actionTypes = getAvailableActions()

+  export let key
  export let actions
  export let bindings = []

@ -24,6 +26,9 @@

  // These are ephemeral bindings which only exist while executing actions
  $: buttonContextBindings = getButtonContextBindings(
+    $currentAsset,
+    $store.selectedComponentId,
+    key,
    actions,
    selectedAction?.id
  )
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/ButtonActionEditor.svelte
@ -8,6 +8,7 @@

  const dispatch = createEventDispatcher()

+  export let key
  export let value = []
  export let name
  export let bindings
@ -81,5 +82,6 @@
    bind:actions={tmpValue}
    eventType={name}
    {bindings}
+    {key}
  />
 </Drawer>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/ContinueIf.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/ContinueIf.svelte
@ -0,0 +1,78 @@
+<script>
+  import { Select, Body } from "@budibase/bbui"
+  import { onMount } from "svelte"
+  import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
+  export let parameters
+  export let bindings
+
+  const typeOptions = [
+    {
+      label: "Continue if",
+      value: "continue",
+    },
+    {
+      label: "Stop if",
+      value: "stop",
+    },
+  ]
+  const operatorOptions = [
+    {
+      label: "Equals",
+      value: "equal",
+    },
+    {
+      label: "Not equals",
+      value: "notEqual",
+    },
+  ]
+
+  onMount(() => {
+    if (!parameters.type) {
+      parameters.type = "continue"
+    }
+    if (!parameters.operator) {
+      parameters.operator = "equal"
+    }
+  })
+</script>
+
+<div class="root">
+  <Body size="S">
+    Configure a condition to be evaluated which can stop further actions from
+    being executed.
+  </Body>
+  <Select
+    bind:value={parameters.type}
+    options={typeOptions}
+    placeholder={null}
+  />
+  <DrawerBindableInput
+    placeholder="Value"
+    value={parameters.value}
+    on:change={e => (parameters.value = e.detail)}
+    {bindings}
+  />
+  <Select
+    bind:value={parameters.operator}
+    options={operatorOptions}
+    placeholder={null}
+  />
+  <DrawerBindableInput
+    placeholder="Reference value"
+    bind:value={parameters.referenceValue}
+    on:change={e => (parameters.referenceValue = e.detail)}
+    {bindings}
+  />
+</div>
+
+<style>
+  .root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-l);
+    justify-content: flex-start;
+    align-items: stretch;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+</style>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/S3Upload.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/S3Upload.svelte
@ -5,7 +5,7 @@

  export let parameters

-  $: components = findAllMatchingComponents($currentAsset.props, component =>
+  $: components = findAllMatchingComponents($currentAsset?.props, component =>
    component._component.endsWith("s3upload")
  )
 </script>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/index.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/actions/index.js
@ -13,3 +13,4 @@ export { default as RefreshDataProvider } from "./RefreshDataProvider.svelte"
 export { default as DuplicateRow } from "./DuplicateRow.svelte"
 export { default as S3Upload } from "./S3Upload.svelte"
 export { default as ExportData } from "./ExportData.svelte"
+export { default as ContinueIf } from "./ContinueIf.svelte"
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ButtonActionEditor/manifest.json
@ -84,6 +84,11 @@
    {
      "name": "Export Data",
      "component": "ExportData"
+    },
+    {
+      "name": "Continue if / Stop if",
+      "component": "ContinueIf",
+      "dependsOnFeature": "continueIfAction"
    }
  ]
-}
+}
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
@ -10,7 +10,7 @@
  const dispatch = createEventDispatcher()
  const getValue = component => `{{ literal ${makePropSafe(component._id)} }}`

-  $: path = findComponentPath($currentAsset.props, $store.selectedComponentId)
+  $: path = findComponentPath($currentAsset?.props, $store.selectedComponentId)
  $: providers = path.filter(c => c._component?.endsWith("/dataprovider"))

  // Set initial value to closest data provider
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte
@ -18,9 +18,7 @@
  let tempValue = value || []

  $: dataSource = getDatasourceForProvider($currentAsset, componentInstance)
-  $: schema = getSchemaForDatasource($currentAsset, dataSource, {
-    searchableSchema: true,
-  })?.schema
+  $: schema = getSchemaForDatasource($currentAsset, dataSource)?.schema
  $: schemaFields = Object.values(schema || {})

  const saveFilter = async () => {
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
@ -12,7 +12,7 @@
  export let type

  $: form = findClosestMatchingComponent(
-    $currentAsset.props,
+    $currentAsset?.props,
    componentInstance._id,
    component => component._component === "@budibase/standard-components/form"
  )
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@ -79,6 +79,7 @@
      bindings={allBindings}
      name={key}
      text={label}
+      {key}
      {type}
      {...props}
    />
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ResetFieldsButton.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/ResetFieldsButton.svelte
@ -11,7 +11,7 @@

  const resetFormFields = async () => {
    const form = findClosestMatchingComponent(
-      $currentAsset.props,
+      $currentAsset?.props,
      componentInstance._id,
      component => component._component.endsWith("/form")
    )
--- a/packages/builder/src/components/feedback/NPSFeedbackForm.svelte
+++ b/packages/builder/src/components/feedback/NPSFeedbackForm.svelte
@ -1,171 +0,0 @@
-<script>
-  import analytics from "analytics"
-  import { createEventDispatcher } from "svelte"
-  import { fade, fly } from "svelte/transition"
-  import {
-    ActionButton,
-    ClearButton,
-    RadioGroup,
-    TextArea,
-    ButtonGroup,
-    Button,
-    Heading,
-    Detail,
-    Divider,
-    Layout,
-    notifications,
-  } from "@budibase/bbui"
-  import { auth } from "stores/portal"
-
-  let step = 0
-  let ratings = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
-  let options = [
-    "Importing / managing data",
-    "Designing",
-    "Automations",
-    "Managing users / groups",
-    "Deployment / hosting",
-    "Documentation",
-  ]
-
-  const dispatch = createEventDispatcher()
-
-  // Data to send off
-  let rating
-  let improvements = ""
-  let comment = ""
-
-  function selectNumber(n) {
-    rating = n
-    step = 1
-  }
-
-  function submitFeedback() {
-    analytics.submitFeedback({
-      rating,
-      improvements,
-      comment,
-    })
-    try {
-      auth.updateSelf({
-        flags: {
-          feedbackSubmitted: true,
-        },
-      })
-    } catch (error) {
-      notifications.error("Error updating user")
-    }
-    dispatch("complete")
-  }
-
-  function cancelFeedback() {
-    try {
-      auth.updateSelf({
-        flags: {
-          feedbackSubmitted: true,
-        },
-      })
-    } catch (error) {
-      notifications.error("Error updating user")
-    }
-    dispatch("complete")
-  }
-</script>
-
-<div
-  class="position"
-  in:fade={{ duration: 200 }}
-  out:fade|local={{ duration: 200 }}
->
-  <div
-    class="feedback-frame"
-    in:fly={{ y: 30, duration: 200 }}
-    out:fly|local={{ y: 30, duration: 200 }}
-  >
-    <div class="close">
-      <ClearButton on:click={cancelFeedback} />
-    </div>
-    <Layout gap="XS">
-      {#if step === 0}
-        <Heading size="XS"
-          >How likely are you to recommend Budibase to a colleague?</Heading
-        >
-        <Divider />
-        <div class="ratings">
-          {#each ratings as number}
-            <ActionButton
-              size="L"
-              emphasized
-              selected={number === rating}
-              on:click={() => selectNumber(number)}
-            >
-              {number}
-            </ActionButton>
-          {/each}
-        </div>
-        <div class="footer">
-          <Detail size="S">NOT LIKELY</Detail>
-          <Detail size="S">EXTREMELY LIKELY</Detail>
-        </div>
-      {:else if step === 1}
-        <Heading size="XS">What could be improved most in Budibase?</Heading>
-        <Divider />
-        <RadioGroup bind:value={improvements} {options} />
-        <div class="footer">
-          <Detail size="S">STEP 2 OF 3</Detail>
-          <ButtonGroup>
-            <Button secondary on:click={() => (step -= 1)}>Previous</Button>
-            <Button primary on:click={() => (step += 1)}>Next</Button>
-          </ButtonGroup>
-        </div>
-      {:else}
-        <Heading size="XS">How can we improve your experience?</Heading>
-        <Divider />
-        <TextArea bind:value={comment} placeholder="Add comments" />
-        <div class="footer">
-          <Detail size="S">STEP 3 OF 3</Detail>
-          <ButtonGroup>
-            <Button secondary on:click={() => (step -= 1)}>Previous</Button>
-            <Button cta on:click={submitFeedback}>Complete</Button>
-          </ButtonGroup>
-        </div>
-      {/if}
-    </Layout>
-  </div>
-</div>
-
-<style>
-  .feedback-frame :global(textarea) {
-    min-height: 180px !important;
-  }
-
-  .position {
-    position: absolute;
-    right: var(--spacing-l);
-    bottom: calc(5 * var(--spacing-xl));
-  }
-  .feedback-frame {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    min-width: 510px;
-    background: var(--background);
-    border-radius: var(--spectrum-global-dimension-size-50);
-    border: 2px solid var(--spectrum-global-color-blue-400);
-    padding: var(--spacing-xl);
-  }
-  .ratings {
-    display: flex;
-    justify-content: space-between;
-  }
-  .close {
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
-  .footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-</style>
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@ -33,8 +33,7 @@
  let parameters
  let data = []
  let saveId
-  const transformerDocs =
-    "https://docs.budibase.com/building-apps/data/transformers"
+  const transformerDocs = "https://docs.budibase.com/docs/transformers"

  $: datasource = $datasources.list.find(ds => ds._id === query.datasourceId)
  $: query.schema = fieldsToSchema(fields)
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@ -61,7 +61,7 @@
    {#if app.deployed}Published{:else}Unpublished{/if}
  </StatusLight>
 </div>
-<div>
+<div data-cy={`row_actions_${app.appId}`}>
  <Button
    size="S"
    disabled={app.lockedOther}
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@ -9,17 +9,57 @@
  import { goto } from "@roxi/routify"
  import { createValidationStore } from "helpers/validation/yup"
  import * as appValidation from "helpers/validation/yup/app"
+  import TemplateCard from "components/common/TemplateCard.svelte"

  export let template

+  let creating = false
+
  const values = writable({ name: "", url: null })
  const validation = createValidationStore()
  $: validation.check($values)

  onMount(async () => {
+    $values.name = resolveAppName(template, $values.name)
+    nameToUrl($values.name)
    await setupValidation()
  })

+  const appPrefix = "/app"
+
+  $: appUrl = `${window.location.origin}${
+    $values.url
+      ? `${appPrefix}${$values.url}`
+      : `${appPrefix}${resolveAppUrl(template, $values.name)}`
+  }`
+
+  const resolveAppUrl = (template, name) => {
+    let parsedName
+    const resolvedName = resolveAppName(template, name)
+    parsedName = resolvedName ? resolvedName.toLowerCase() : ""
+    const parsedUrl = parsedName ? parsedName.replace(/\s+/g, "-") : ""
+    return encodeURI(parsedUrl)
+  }
+
+  const resolveAppName = (template, name) => {
+    if (template && !name) {
+      return template.name
+    }
+    return name ? name.trim() : null
+  }
+
+  const tidyUrl = url => {
+    if (url && !url.startsWith("/")) {
+      url = `/${url}`
+    }
+    $values.url = url === "" ? null : url
+  }
+
+  const nameToUrl = appName => {
+    let resolvedUrl = resolveAppUrl(template, appName)
+    tidyUrl(resolvedUrl)
+  }
+
  const setupValidation = async () => {
    const applications = svelteGet(apps)
    appValidation.name(validation, { apps: applications })
@ -30,6 +70,8 @@
  }

  async function createNewApp() {
+    creating = true
+
    try {
      // Create form data to create app
      let data = new FormData()
@ -64,17 +106,11 @@
      await auth.setInitInfo({})
      $goto(`/builder/app/${createdApp.instance._id}`)
    } catch (error) {
+      creating = false
      console.error(error)
      notifications.error("Error creating app")
    }
  }
-
-  // auto add slash to url
-  $: {
-    if ($values.url && !$values.url.startsWith("/")) {
-      $values.url = `/${$values.url}`
-    }
-  }
 </script>

 <ModalContent
@ -83,6 +119,15 @@
  onConfirm={createNewApp}
  disabled={!$validation.valid}
 >
+  {#if template && !template?.fromFile}
+    <TemplateCard
+      name={template.name}
+      imageSrc={template.image}
+      backgroundColour={template.background}
+      overlayEnabled={false}
+      icon={template.icon}
+    />
+  {/if}
  {#if template?.fromFile}
    <Dropzone
      error={$validation.touched.file && $validation.errors.file}
@ -97,20 +142,42 @@
  {/if}
  <Input
    bind:value={$values.name}
+    disabled={creating}
    error={$validation.touched.name && $validation.errors.name}
    on:blur={() => ($validation.touched.name = true)}
+    on:change={nameToUrl($values.name)}
    label="Name"
-    placeholder={$auth.user.firstName
+    placeholder={$auth.user?.firstName
      ? `${$auth.user.firstName}s app`
      : "My app"}
  />
-  <Input
-    bind:value={$values.url}
-    error={$validation.touched.url && $validation.errors.url}
-    on:blur={() => ($validation.touched.url = true)}
-    label="URL"
-    placeholder={$values.name
-      ? "/" + encodeURIComponent($values.name).toLowerCase()
-      : "/"}
-  />
+  <span>
+    <Input
+      bind:value={$values.url}
+      disabled={creating}
+      error={$validation.touched.url && $validation.errors.url}
+      on:blur={() => ($validation.touched.url = true)}
+      on:change={tidyUrl($values.url)}
+      label="URL"
+      placeholder={$values.url
+        ? $values.url
+        : `/${resolveAppUrl(template, $values.name)}`}
+    />
+    {#if $values.url && $values.url !== "" && !$validation.errors.url}
+      <div class="app-server" title={appUrl}>
+        {appUrl}
+      </div>
+    {/if}
+  </span>
 </ModalContent>
+
+<style>
+  .app-server {
+    color: var(--spectrum-global-color-gray-600);
+    margin-top: 10px;
+    width: 320px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>
--- a/packages/builder/src/components/start/UpdateAppModal.svelte
+++ b/packages/builder/src/components/start/UpdateAppModal.svelte
@ -42,11 +42,31 @@
    }
  }

-  // auto add slash to url
-  $: {
-    if ($values.url && !$values.url.startsWith("/")) {
-      $values.url = `/${$values.url}`
+  const resolveAppUrl = (template, name) => {
+    let parsedName
+    const resolvedName = resolveAppName(null, name)
+    parsedName = resolvedName ? resolvedName.toLowerCase() : ""
+    const parsedUrl = parsedName ? parsedName.replace(/\s+/g, "-") : ""
+    return encodeURI(parsedUrl)
+  }
+
+  const resolveAppName = (template, name) => {
+    if (template && !name) {
+      return template.name
    }
+    return name ? name.trim() : null
+  }
+
+  const tidyUrl = url => {
+    if (url && !url.startsWith("/")) {
+      url = `/${url}`
+    }
+    $values.url = url === "" ? null : url
+  }
+
+  const nameToUrl = appName => {
+    let resolvedUrl = resolveAppUrl(null, appName)
+    tidyUrl(resolvedUrl)
  }
 </script>

@ -61,15 +81,17 @@
    bind:value={$values.name}
    error={$validation.touched.name && $validation.errors.name}
    on:blur={() => ($validation.touched.name = true)}
+    on:change={nameToUrl($values.name)}
    label="Name"
  />
  <Input
    bind:value={$values.url}
    error={$validation.touched.url && $validation.errors.url}
    on:blur={() => ($validation.touched.url = true)}
+    on:change={tidyUrl($values.url)}
    label="URL"
-    placeholder={$values.name
-      ? "/" + encodeURIComponent($values.name).toLowerCase()
-      : "/"}
+    placeholder={$values.url
+      ? $values.url
+      : `/${resolveAppUrl(null, $values.name)}`}
  />
 </ModalContent>
--- a/packages/builder/src/constants/backend/index.js
+++ b/packages/builder/src/constants/backend/index.js
@ -178,6 +178,7 @@ export const IntegrationTypes = {
  ORACLE: "ORACLE",
  INTERNAL: "INTERNAL",
  GOOGLE_SHEETS: "GOOGLE_SHEETS",
+  FIREBASE: "FIREBASE",
 }

 export const IntegrationNames = {
@ -195,6 +196,7 @@ export const IntegrationNames = {
  [IntegrationTypes.ORACLE]: "Oracle",
  [IntegrationTypes.INTERNAL]: "Internal",
  [IntegrationTypes.GOOGLE_SHEETS]: "Google Sheets",
+  [IntegrationTypes.FIREBASE]: "Firebase",
 }

 export const SchemaTypeOptions = [
--- a/packages/builder/src/helpers/validation/yup/app.js
+++ b/packages/builder/src/helpers/validation/yup/app.js
@ -35,13 +35,14 @@ export const url = (validation, { apps, currentApp } = { apps: [] }) => {
  validation.addValidator(
    "url",
    string()
+      .trim()
      .nullable()
-      .matches(APP_URL_REGEX, "App URL must not contain spaces")
+      .required("Your application must have a url")
+      .matches(APP_URL_REGEX, "Please enter a valid url")
      .test(
        "non-existing-app-url",
        "Another app with the same URL already exists",
        value => {
-          // url is nullable
          if (!value) {
            return true
          }
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@ -5,7 +5,6 @@
  import DeployModal from "components/deploy/DeployModal.svelte"
  import RevertModal from "components/deploy/RevertModal.svelte"
  import VersionModal from "components/deploy/VersionModal.svelte"
-  import NPSFeedbackForm from "components/feedback/NPSFeedbackForm.svelte"
  import { API } from "api"
  import { auth, admin } from "stores/portal"
  import { isActive, goto, layout, redirect } from "@roxi/routify"
@ -21,15 +20,11 @@

  // Sync once when you load the app
  let hasSynced = false
-  let userShouldPostFeedback = false
  $: selected = capitalise(
    $layout.children.find(layout => $isActive(layout.path))?.title ?? "data"
  )

  function previewApp() {
-    if (!$auth?.user?.flags?.feedbackSubmitted) {
-      userShouldPostFeedback = true
-    }
    window.open(`/${application}`)
  }

@ -126,10 +121,6 @@
  <p>Something went wrong: {error.message}</p>
 {/await}

-{#if userShouldPostFeedback}
-  <NPSFeedbackForm on:complete={() => (userShouldPostFeedback = false)} />
-{/if}
-
 <style>
  .loading {
    min-height: 100%;
--- a/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
@ -23,10 +23,8 @@
  <div class="nav">
    <Tabs {selected} on:select={selectFirstDatasource}>
      <Tab title="Sources">
-        <div class="tab-content-padding">
-          <DatasourceNavigator />
-          <CreateDatasourceModal bind:modal />
-        </div>
+        <DatasourceNavigator />
+        <CreateDatasourceModal bind:modal />
      </Tab>
    </Tabs>
    <div
@ -63,10 +61,6 @@
    display: contents;
  }

-  .tab-content-padding {
-    padding: 0 var(--spacing-xl);
-  }
-
  .nav {
    overflow-y: auto;
    background: var(--background);
--- a/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/datasource/[selectedDatasource]/rest/[query]/index.svelte
@ -415,9 +415,7 @@
                <Banner
                  extraButtonText="Learn more"
                  extraButtonAction={() =>
-                    window.open(
-                      "https://docs.budibase.com/building-apps/data/transformers"
-                    )}
+                    window.open("https://docs.budibase.com/docs/transformers")}
                  on:change={() => updateFlag("queryTransformerBanner", true)}
                >
                  Add a JavaScript function to transform the query result.
--- a/Show More
+++ b/Show More