Merge branch 'feature/test-image' into feature/dependencies-image

.github/ISSUE_TEMPLATE/bug_report.md

@@ -6,6 +6,8 @@ labels: bug
 assignees: ''
 
 ---
+**Checklist**
+- [ ] I have searched budibase discussions and github issues to check if my issue already exists
 
 **Hosting**
 <!-- Delete as appropriate -->

hosting/docker-compose.dev.yaml

@@ -3,23 +3,25 @@ version: "3"
 # optional ports are specified throughout for more advanced use cases.
 
 services:
-  dependencies:
-    container_name: budi-dependencies
+  minio-service:
+    container_name: budi-minio-dev
     restart: on-failure
-    image: budibase/dependencies
+    # Last version that supports the "fs" backend
+    image: minio/minio:RELEASE.2022-10-24T18-35-07Z
+    volumes:
+      - minio_data:/data
     ports:
       - "${MINIO_PORT}:9000"
       - "9001:9001"
-      - "${COUCH_DB_PORT}:5984"
-      - "${REDIS_PORT}:6379"
     environment:
       MINIO_ACCESS_KEY: ${MINIO_ACCESS_KEY}
       MINIO_SECRET_KEY: ${MINIO_SECRET_KEY}
-      COUCHDB_PASSWORD: ${COUCH_DB_PASSWORD}
-      COUCHDB_USER: ${COUCH_DB_USER}
-      REDIS_PASSWORD: ${REDIS_PASSWORD}
-    volumes:
-      - dev_data:/data
+    command: server /data --console-address ":9001"
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:9000/minio/health/live"]
+      interval: 30s
+      timeout: 20s
+      retries: 3
 
   proxy-service:
     container_name: budi-nginx-dev
@@ -31,12 +33,54 @@ services:
     ports:
       - "${MAIN_PORT}:10000"
     depends_on:
-      - dependencies
+      - minio-service
+      - couchdb-service
     extra_hosts:
       - "host.docker.internal:host-gateway"
     environment:
       - PROXY_ADDRESS=host.docker.internal
 
+  couchdb-service:
+    # platform: linux/amd64
+    container_name: budi-couchdb3-dev
+    restart: on-failure
+    image: budibase/couchdb
+    environment:
+      - COUCHDB_PASSWORD=${COUCH_DB_PASSWORD}
+      - COUCHDB_USER=${COUCH_DB_USER}
+    ports:
+      - "${COUCH_DB_PORT}:5984"
+    volumes:
+      - couchdb_data:/data
+
+  couch-init:
+    container_name: budi-couchdb-init-dev
+    image: curlimages/curl
+    environment:
+      PUT_CALL: "curl -u ${COUCH_DB_USER}:${COUCH_DB_PASSWORD} -X PUT couchdb-service:5984"
+    depends_on:
+      - couchdb-service
+    command:
+      [
+        "sh",
+        "-c",
+        "sleep 10 && $${PUT_CALL}/_users && $${PUT_CALL}/_replicator; fg;",
+      ]
+
+  redis-service:
+    container_name: budi-redis-dev
+    restart: on-failure
+    image: redis
+    command: redis-server --requirepass ${REDIS_PASSWORD}
+    ports:
+      - "${REDIS_PORT}:6379"
+    volumes:
+      - redis_data:/data
+
 volumes:
-  dev_data:
-    driver: local
+  couchdb_data:
+    driver: local
+  minio_data:
+    driver: local
+  redis_data:
+    driver: local

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.2.12-alpha.6",
+  "version": "2.2.12-alpha.32",
   "npmClient": "yarn",
   "packages": [
     "packages/*"

packages/backend-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/backend-core",
-  "version": "2.2.12-alpha.6",
+  "version": "2.2.12-alpha.32",
   "description": "Budibase backend core libraries used in server and worker",
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@budibase/nano": "10.1.1",
-    "@budibase/types": "2.2.12-alpha.6",
+    "@budibase/types": "2.2.12-alpha.32",
     "@shopify/jest-koa-mocks": "5.0.1",
     "@techpass/passport-openidconnect": "0.3.2",
     "aws-cloudfront-sign": "2.2.0",
@@ -31,6 +31,7 @@
     "bcrypt": "5.0.1",
     "bcryptjs": "2.4.3",
     "bull": "4.10.1",
+    "correlation-id": "4.0.0",
     "dotenv": "16.0.1",
     "emitter-listener": "1.1.2",
     "ioredis": "4.28.0",
@@ -63,15 +64,17 @@
     "@types/ioredis": "4.28.0",
     "@types/jest": "27.5.1",
     "@types/koa": "2.13.4",
+    "@types/koa-pino-logger": "3.0.0",
     "@types/lodash": "4.14.180",
     "@types/node": "14.18.20",
     "@types/node-fetch": "2.6.1",
+    "@types/pino-http": "5.8.1",
     "@types/pouchdb": "6.4.0",
     "@types/redlock": "4.0.3",
     "@types/semver": "7.3.7",
     "@types/tar-fs": "2.0.1",
     "@types/uuid": "8.3.4",
-    "chance": "1.1.3",
+    "chance": "1.1.8",
     "ioredis-mock": "5.8.0",
     "jest": "28.1.1",
     "koa": "2.13.4",

packages/backend-core/src/cloud/api.ts

@@ -1,4 +1,5 @@
 import fetch from "node-fetch"
+import * as logging from "../logging"
 
 export default class API {
   host: string
@@ -22,6 +23,9 @@ export default class API {
 
     let json = options.headers["Content-Type"] === "application/json"
 
+    // add x-budibase-correlation-id header
+    logging.correlation.setHeader(options.headers)
+
     const requestOptions = {
       method: method,
       body: json ? JSON.stringify(options.body) : options.body,

packages/backend-core/src/constants/misc.ts

@@ -22,6 +22,7 @@ export enum Header {
   TENANT_ID = "x-budibase-tenant-id",
   TOKEN = "x-budibase-token",
   CSRF_TOKEN = "x-csrf-token",
+  CORRELATION_ID = "x-budibase-correlation-id",
 }
 
 export enum GlobalRole {

packages/backend-core/src/events/processors/LoggingProcessor.ts

@@ -23,7 +23,7 @@ export default class LoggingProcessor implements EventProcessor {
       return
     }
     let timestampString = getTimestampString(timestamp)
-    let message = `[audit] [tenant=${identity.tenantId}] [identityType=${identity.type}] [identity=${identity.id}] ${timestampString} ${event} `
+    let message = `[audit] [identityType=${identity.type}] ${timestampString} ${event} `
     if (env.isDev()) {
       message = message + `[debug: [properties=${JSON.stringify(properties)}] ]`
     }

packages/backend-core/src/events/publishers/rows.ts

@@ -3,7 +3,6 @@ import {
   Event,
   RowsImportedEvent,
   RowsCreatedEvent,
-  RowImportFormat,
   Table,
 } from "@budibase/types"
 
@@ -16,14 +15,9 @@ const created = async (count: number, timestamp?: string | number) => {
   await publishEvent(Event.ROWS_CREATED, properties, timestamp)
 }
 
-const imported = async (
-  table: Table,
-  format: RowImportFormat,
-  count: number
-) => {
+const imported = async (table: Table, count: number) => {
   const properties: RowsImportedEvent = {
     tableId: table._id as string,
-    format,
     count,
   }
   await publishEvent(Event.ROWS_IMPORTED, properties)

packages/backend-core/src/events/publishers/table.ts

@@ -2,7 +2,6 @@ import { publishEvent } from "../events"
 import {
   Event,
   TableExportFormat,
-  TableImportFormat,
   Table,
   TableCreatedEvent,
   TableUpdatedEvent,
@@ -40,10 +39,9 @@ async function exported(table: Table, format: TableExportFormat) {
   await publishEvent(Event.TABLE_EXPORTED, properties)
 }
 
-async function imported(table: Table, format: TableImportFormat) {
+async function imported(table: Table) {
   const properties: TableImportedEvent = {
     tableId: table._id as string,
-    format,
   }
   await publishEvent(Event.TABLE_IMPORTED, properties)
 }

packages/backend-core/src/logging.ts

@@ -1,4 +1,8 @@
+import { Header } from "./constants"
 import env from "./environment"
+const correlator = require("correlation-id")
+import { Options } from "pino-http"
+import { IncomingMessage } from "http"
 
 const NonErrors = ["AccountError"]
 
@@ -31,14 +35,26 @@ export function logWarn(message: string) {
   console.warn(`bb-warn: ${message}`)
 }
 
-export function pinoSettings() {
+export function pinoSettings(): Options {
   return {
     prettyPrint: {
       levelFirst: true,
     },
+    genReqId: correlator.getId,
     level: env.LOG_LEVEL || "error",
     autoLogging: {
-      ignore: (req: { url: string }) => req.url.includes("/health"),
+      ignore: (req: IncomingMessage) => !!req.url?.includes("/health"),
     },
   }
 }
+
+const setCorrelationHeader = (headers: any) => {
+  const correlationId = correlator.getId()
+  if (correlationId) {
+    headers[Header.CORRELATION_ID] = correlationId
+  }
+}
+
+export const correlation = {
+  setHeader: setCorrelationHeader,
+}

packages/backend-core/src/middleware/index.ts

@@ -15,4 +15,5 @@ export { default as csrf } from "./csrf"
 export { default as adminOnly } from "./adminOnly"
 export { default as builderOrAdmin } from "./builderOrAdmin"
 export { default as builderOnly } from "./builderOnly"
+export { default as logging } from "./logging"
 export * as joiValidator from "./joi-validator"

packages/backend-core/src/middleware/logging.ts

@@ -0,0 +1,88 @@
+const correlator = require("correlation-id")
+import { Header } from "../constants"
+import { v4 as uuid } from "uuid"
+import * as context from "../context"
+
+const debug = console.warn
+const trace = console.trace
+const log = console.log
+const info = console.info
+const warn = console.warn
+const error = console.error
+
+const getTenantId = () => {
+  let tenantId
+  try {
+    tenantId = context.getTenantId()
+  } catch (e: any) {
+    // do nothing
+  }
+  return tenantId
+}
+
+const getAppId = () => {
+  let appId
+  try {
+    appId = context.getAppId()
+  } catch (e) {
+    // do nothing
+  }
+  return appId
+}
+
+const getIdentityId = () => {
+  let identityId
+  try {
+    const identity = context.getIdentity()
+    identityId = identity?._id
+  } catch (e) {
+    // do nothing
+  }
+  return identityId
+}
+
+const print = (fn: any, data: any[]) => {
+  let message = ""
+
+  const correlationId = correlator.getId()
+  if (correlationId) {
+    message = message + `[correlationId=${correlator.getId()}]`
+  }
+
+  const tenantId = getTenantId()
+  if (tenantId) {
+    message = message + ` [tenantId=${tenantId}]`
+  }
+
+  const appId = getAppId()
+  if (appId) {
+    message = message + ` [appId=${appId}]`
+  }
+
+  const identityId = getIdentityId()
+  if (identityId) {
+    message = message + ` [identityId=${identityId}]`
+  }
+
+  fn(message, data)
+}
+
+const logging = (ctx: any, next: any) => {
+  // use the provided correlation id header if present
+  let correlationId = ctx.headers[Header.CORRELATION_ID]
+  if (!correlationId) {
+    correlationId = uuid()
+  }
+
+  return correlator.withId(correlationId, () => {
+    console.debug = data => print(debug, data)
+    console.trace = data => print(trace, data)
+    console.log = data => print(log, data)
+    console.info = data => print(info, data)
+    console.warn = data => print(warn, data)
+    console.error = data => print(error, data)
+    return next()
+  })
+}
+
+export default logging

packages/backend-core/src/utils/tests/utils.spec.ts

@@ -1,7 +1,8 @@
 import { structures } from "../../../tests"
 import * as utils from "../../utils"
 import * as events from "../../events"
-import { DEFAULT_TENANT_ID } from "../../constants"
+import * as db from "../../db"
+import { DEFAULT_TENANT_ID, Header } from "../../constants"
 import { doInTenant } from "../../context"
 
 describe("utils", () => {
@@ -14,4 +15,95 @@ describe("utils", () => {
       })
     })
   })
+
+  describe("getAppIdFromCtx", () => {
+    it("gets appId from header", async () => {
+      const ctx = structures.koa.newContext()
+      const expected = db.generateAppID()
+      ctx.request.headers = {
+        [Header.APP_ID]: expected,
+      }
+
+      const actual = await utils.getAppIdFromCtx(ctx)
+      expect(actual).toBe(expected)
+    })
+
+    it("gets appId from body", async () => {
+      const ctx = structures.koa.newContext()
+      const expected = db.generateAppID()
+      ctx.request.body = {
+        appId: expected,
+      }
+
+      const actual = await utils.getAppIdFromCtx(ctx)
+      expect(actual).toBe(expected)
+    })
+
+    it("gets appId from path", async () => {
+      const ctx = structures.koa.newContext()
+      const expected = db.generateAppID()
+      ctx.path = `/apps/${expected}`
+
+      const actual = await utils.getAppIdFromCtx(ctx)
+      expect(actual).toBe(expected)
+    })
+
+    it("gets appId from url", async () => {
+      const ctx = structures.koa.newContext()
+      const expected = db.generateAppID()
+      const app = structures.apps.app(expected)
+
+      // set custom url
+      const appUrl = "custom-url"
+      app.url = `/${appUrl}`
+      ctx.path = `/app/${appUrl}`
+
+      // save the app
+      const database = db.getDB(expected)
+      await database.put(app)
+
+      const actual = await utils.getAppIdFromCtx(ctx)
+      expect(actual).toBe(expected)
+    })
+
+    it("doesn't get appId from url when previewing", async () => {
+      const ctx = structures.koa.newContext()
+      const appId = db.generateAppID()
+      const app = structures.apps.app(appId)
+
+      // set custom url
+      const appUrl = "preview"
+      app.url = `/${appUrl}`
+      ctx.path = `/app/${appUrl}`
+
+      // save the app
+      const database = db.getDB(appId)
+      await database.put(app)
+
+      const actual = await utils.getAppIdFromCtx(ctx)
+      expect(actual).toBe(undefined)
+    })
+
+    it("gets appId from referer", async () => {
+      const ctx = structures.koa.newContext()
+      const expected = db.generateAppID()
+      ctx.request.headers = {
+        referer: `http://test.com/builder/app/${expected}/design/screen_123/screens`,
+      }
+
+      const actual = await utils.getAppIdFromCtx(ctx)
+      expect(actual).toBe(expected)
+    })
+
+    it("doesn't get appId from referer when not builder", async () => {
+      const ctx = structures.koa.newContext()
+      const appId = db.generateAppID()
+      ctx.request.headers = {
+        referer: `http://test.com/foo/app/${appId}/bar`,
+      }
+
+      const actual = await utils.getAppIdFromCtx(ctx)
+      expect(actual).toBe(undefined)
+    })
+  })
 })

packages/backend-core/src/utils/utils.ts

@@ -25,13 +25,16 @@ const jwt = require("jsonwebtoken")
 const APP_PREFIX = DocumentType.APP + SEPARATOR
 const PROD_APP_PREFIX = "/app/"
 
+const BUILDER_PREVIEW_PATH = "/app/preview"
+const BUILDER_REFERER_PREFIX = "/builder/app/"
+
 function confirmAppId(possibleAppId: string | undefined) {
   return possibleAppId && possibleAppId.startsWith(APP_PREFIX)
     ? possibleAppId
     : undefined
 }
 
-async function resolveAppUrl(ctx: Ctx) {
+export async function resolveAppUrl(ctx: Ctx) {
   const appUrl = ctx.path.split("/")[2]
   let possibleAppUrl = `/${appUrl.toLowerCase()}`
 
@@ -75,7 +78,7 @@ export function isServingApp(ctx: Ctx) {
  */
 export async function getAppIdFromCtx(ctx: Ctx) {
   // look in headers
-  const options = [ctx.headers[Header.APP_ID]]
+  const options = [ctx.request.headers[Header.APP_ID]]
   let appId
   for (let option of options) {
     appId = confirmAppId(option as string)
@@ -95,15 +98,23 @@ export async function getAppIdFromCtx(ctx: Ctx) {
     appId = confirmAppId(pathId)
   }
 
-  // look in the referer
-  const refererId = parseAppIdFromUrl(ctx.request.headers.referer)
-  if (!appId && refererId) {
-    appId = confirmAppId(refererId)
+  // lookup using custom url - prod apps only
+  // filter out the builder preview path which collides with the prod app path
+  // to ensure we don't load all apps excessively
+  const isBuilderPreview = ctx.path.startsWith(BUILDER_PREVIEW_PATH)
+  const isViewingProdApp =
+    ctx.path.startsWith(PROD_APP_PREFIX) && !isBuilderPreview
+  if (!appId && isViewingProdApp) {
+    appId = confirmAppId(await resolveAppUrl(ctx))
   }
 
-  // look in the url - prod app
-  if (!appId && ctx.path.startsWith(PROD_APP_PREFIX)) {
-    appId = confirmAppId(await resolveAppUrl(ctx))
+  // look in the referer - builder only
+  // make sure this is performed after prod app url resolution, in case the
+  // referer header is present from a builder redirect
+  const referer = ctx.request.headers.referer
+  if (!appId && referer?.includes(BUILDER_REFERER_PREFIX)) {
+    const refererId = parseAppIdFromUrl(ctx.request.headers.referer)
+    appId = confirmAppId(refererId)
   }
 
   return appId

packages/backend-core/tests/utilities/structures/apps.ts

@@ -0,0 +1,21 @@
+import { generator } from "."
+import { App } from "@budibase/types"
+import { DEFAULT_TENANT_ID, DocumentType } from "../../../src/constants"
+
+export function app(id: string): App {
+  return {
+    _id: DocumentType.APP_METADATA,
+    appId: id,
+    type: "",
+    version: "0.0.1",
+    componentLibraries: [],
+    name: generator.name(),
+    url: `/custom-url`,
+    instance: {
+      _id: id,
+    },
+    tenantId: DEFAULT_TENANT_ID,
+    status: "",
+    template: undefined,
+  }
+}

packages/backend-core/tests/utilities/structures/index.ts

@@ -3,7 +3,8 @@ export * from "./common"
 import Chance from "chance"
 export const generator = new Chance()
 
-export * as koa from "./koa"
 export * as accounts from "./accounts"
+export * as apps from "./apps"
+export * as koa from "./koa"
 export * as licenses from "./licenses"
 export * as plugins from "./plugins"

packages/backend-core/tests/utilities/structures/koa.ts

@@ -5,9 +5,11 @@ export const newContext = (): BBContext => {
   const ctx = createMockContext()
   return {
     ...ctx,
+    path: "/",
     cookies: createMockCookies(),
     request: {
       ...ctx.request,
+      headers: {},
       body: {},
     },
   }

packages/backend-core/tsconfig.build.json

@@ -12,6 +12,7 @@
     "declaration": true,
     "types": [ "node", "jest" ],
     "outDir": "dist",
+    "skipLibCheck": true
   },
   "include": [
     "**/*.js",

packages/bbui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.2.12-alpha.6",
+  "version": "2.2.12-alpha.32",
   "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": "2.2.12-alpha.6",
+    "@budibase/string-templates": "2.2.12-alpha.32",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
     "@spectrum-css/avatar": "3.0.2",

packages/bbui/src/Actions/click_outside.js

@@ -1,11 +1,11 @@
-const ignoredClasses = [".flatpickr-calendar", ".modal-container"]
+const ignoredClasses = [".flatpickr-calendar"]
 let clickHandlers = []
 
 /**
  * Handle a body click event
  */
 const handleClick = event => {
-  // Ignore click if needed
+  // Ignore click if this is an ignored class
   for (let className of ignoredClasses) {
     if (event.target.closest(className)) {
       return
@@ -14,9 +14,18 @@ const handleClick = event => {
 
   // Process handlers
   clickHandlers.forEach(handler => {
-    if (!handler.element.contains(event.target)) {
-      handler.callback?.(event)
+    if (handler.element.contains(event.target)) {
+      return
     }
+
+    // Ignore clicks for modals, unless the handler is registered from a modal
+    const sourceInModal = handler.element.closest(".spectrum-Modal") != null
+    const clickInModal = event.target.closest(".spectrum-Modal") != null
+    if (clickInModal && !sourceInModal) {
+      return
+    }
+
+    handler.callback?.(event)
   })
 }
 document.documentElement.addEventListener("click", handleClick, true)

packages/bbui/src/Actions/position_dropdown.js

@@ -1,75 +1,68 @@
-export default function positionDropdown(element, { anchor, align, maxWidth }) {
-  let positionSide = "top"
-  let maxHeight = 0
-  let dimensions = getDimensions(anchor)
+export default function positionDropdown(
+  element,
+  { anchor, align, maxWidth, useAnchorWidth }
+) {
+  const update = () => {
+    const anchorBounds = anchor.getBoundingClientRect()
+    const elementBounds = element.getBoundingClientRect()
+    let styles = {
+      maxHeight: null,
+      minWidth: null,
+      maxWidth,
+      left: null,
+      top: null,
+    }
 
-  function getDimensions() {
-    const {
-      bottom,
-      top: spaceAbove,
-      left,
-      width,
-    } = anchor.getBoundingClientRect()
-    const spaceBelow = window.innerHeight - bottom
-    const containerRect = element.getBoundingClientRect()
-
-    let y
-
-    if (spaceAbove > spaceBelow) {
-      positionSide = "bottom"
-      maxHeight = spaceAbove - 20
-      y = window.innerHeight - spaceAbove + 5
+    // Determine vertical styles
+    if (window.innerHeight - anchorBounds.bottom < 100) {
+      styles.top = anchorBounds.top - elementBounds.height - 5
     } else {
-      positionSide = "top"
-      y = bottom + 5
-      maxHeight = spaceBelow - 20
+      styles.top = anchorBounds.bottom + 5
+      styles.maxHeight = window.innerHeight - anchorBounds.bottom - 20
     }
 
-    return {
-      [positionSide]: y,
-      left,
-      width,
-      containerWidth: containerRect.width,
+    // Determine horizontal styles
+    if (!maxWidth && useAnchorWidth) {
+      styles.maxWidth = anchorBounds.width
     }
+    if (useAnchorWidth) {
+      styles.minWidth = anchorBounds.width
+    }
+    if (align === "right") {
+      styles.left = anchorBounds.left + anchorBounds.width - elementBounds.width
+    } else if (align === "right-side") {
+      styles.left = anchorBounds.left + anchorBounds.width
+    } else {
+      styles.left = anchorBounds.left
+    }
+
+    // Apply styles
+    Object.entries(styles).forEach(([style, value]) => {
+      if (value) {
+        element.style[style] = `${value.toFixed(0)}px`
+      } else {
+        element.style[style] = null
+      }
+    })
   }
 
-  function calcLeftPosition() {
-    let left
-
-    if (align == "right") {
-      left = dimensions.left + dimensions.width - dimensions.containerWidth
-    } else if (align == "right-side") {
-      left = dimensions.left + dimensions.width
-    } else {
-      left = dimensions.left
-    }
-
-    return left
-  }
-
+  // Apply initial styles which don't need to change
   element.style.position = "absolute"
   element.style.zIndex = "9999"
-  if (maxWidth) {
-    element.style.maxWidth = `${maxWidth}px`
-  }
-  element.style.minWidth = `${dimensions.width}px`
-  element.style.maxHeight = `${maxHeight.toFixed(0)}px`
-  element.style.transformOrigin = `center ${positionSide}`
-  element.style[positionSide] = `${dimensions[positionSide]}px`
-  element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
 
+  // Observe both anchor and element and resize the popover as appropriate
   const resizeObserver = new ResizeObserver(entries => {
-    entries.forEach(() => {
-      dimensions = getDimensions()
-      element.style[positionSide] = `${dimensions[positionSide]}px`
-      element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
-    })
+    entries.forEach(update)
   })
   resizeObserver.observe(anchor)
   resizeObserver.observe(element)
+
+  document.addEventListener("scroll", update, true)
+
   return {
     destroy() {
       resizeObserver.disconnect()
+      document.removeEventListener("scroll", update, true)
     },
   }
 }

packages/bbui/src/Avatar/Avatar.svelte

@@ -58,5 +58,6 @@
     overflow: hidden;
     user-select: none;
     text-transform: uppercase;
+    flex-shrink: 0;
   }
 </style>

packages/bbui/src/Button/Button.svelte

@@ -14,7 +14,7 @@
   export let active = false
   export let tooltip = undefined
   export let dataCy
-  export let newStyles = false
+  export let newStyles = true
 
   let showTooltip = false
 </script>
@@ -28,6 +28,7 @@
   class:spectrum-Button--quiet={quiet}
   class:new-styles={newStyles}
   class:active
+  class:disabled
   class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
   {disabled}
   data-cy={dataCy}
@@ -108,7 +109,10 @@
     border-color: transparent;
     color: var(--spectrum-global-color-gray-900);
   }
-  .spectrum-Button--secondary.new-styles:hover {
+  .spectrum-Button--secondary.new-styles:not(.disabled):hover {
     background: var(--spectrum-global-color-gray-300);
   }
+  .spectrum-Button--secondary.new-styles.disabled {
+    color: var(--spectrum-global-color-gray-500);
+  }
 </style>

packages/bbui/src/Drawer/DrawerContent.svelte

@@ -34,7 +34,6 @@
     display: none;
   }
   .main {
-    font-family: var(--font-sans);
     padding: var(--spacing-xl);
   }
   .main :global(textarea) {

packages/bbui/src/Form/Core/DatePicker.svelte

@@ -264,7 +264,7 @@
     max-height: 100%;
   }
   :global(.flatpickr-calendar) {
-    font-family: "Source Sans Pro", sans-serif;
+    font-family: var(--font-sans);
   }
   .is-disabled {
     pointer-events: none !important;

packages/bbui/src/Form/Core/Picker.svelte

@@ -2,12 +2,12 @@
   import "@spectrum-css/picker/dist/index-vars.css"
   import "@spectrum-css/popover/dist/index-vars.css"
   import "@spectrum-css/menu/dist/index-vars.css"
-  import { fly } from "svelte/transition"
   import { createEventDispatcher } from "svelte"
   import clickOutside from "../../Actions/click_outside"
   import Search from "./Search.svelte"
   import Icon from "../../Icon/Icon.svelte"
   import StatusLight from "../../StatusLight/StatusLight.svelte"
+  import Popover from "../../Popover/Popover.svelte"
 
   export let id = null
   export let disabled = false
@@ -33,7 +33,10 @@
   export let sort = false
 
   const dispatch = createEventDispatcher()
+
   let searchTerm = null
+  let button
+  let popover
 
   $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
   $: filteredOptions = getFilteredOptions(
@@ -42,7 +45,9 @@
     getOptionLabel
   )
 
-  const onClick = () => {
+  const onClick = e => {
+    e.preventDefault()
+    e.stopPropagation()
     dispatch("click")
     if (readonly) {
       return
@@ -76,77 +81,119 @@
   }
 </script>
 
-<div use:clickOutside={() => (open = false)}>
-  <button
-    {id}
-    class="spectrum-Picker spectrum-Picker--sizeM"
-    class:spectrum-Picker--quiet={quiet}
-    {disabled}
-    class:is-invalid={!!error}
-    class:is-open={open}
-    aria-haspopup="listbox"
-    on:click={onClick}
-  >
-    {#if fieldIcon}
-      <span class="option-extra">
-        <Icon name={fieldIcon} />
-      </span>
-    {/if}
-    {#if fieldColour}
-      <span class="option-extra">
-        <StatusLight square color={fieldColour} />
-      </span>
-    {/if}
-    <span
-      class="spectrum-Picker-label"
-      class:is-placeholder={isPlaceholder}
-      class:auto-width={autoWidth}
-    >
-      {fieldText}
+<button
+  {id}
+  class="spectrum-Picker spectrum-Picker--sizeM"
+  class:spectrum-Picker--quiet={quiet}
+  {disabled}
+  class:is-invalid={!!error}
+  class:is-open={open}
+  aria-haspopup="listbox"
+  on:click={onClick}
+  bind:this={button}
+>
+  {#if fieldIcon}
+    <span class="option-extra icon">
+      <Icon size="S" name={fieldIcon} />
     </span>
-    {#if error}
-      <svg
-        class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
-        focusable="false"
-        aria-hidden="true"
-        aria-label="Folder"
-      >
-        <use xlink:href="#spectrum-icon-18-Alert" />
-      </svg>
-    {/if}
+  {/if}
+  {#if fieldColour}
+    <span class="option-extra">
+      <StatusLight square color={fieldColour} />
+    </span>
+  {/if}
+  <span
+    class="spectrum-Picker-label"
+    class:is-placeholder={isPlaceholder}
+    class:auto-width={autoWidth}
+  >
+    {fieldText}
+  </span>
+  {#if error}
     <svg
-      class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
+      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
       focusable="false"
       aria-hidden="true"
+      aria-label="Folder"
     >
-      <use xlink:href="#spectrum-css-icon-Chevron100" />
+      <use xlink:href="#spectrum-icon-18-Alert" />
     </svg>
-  </button>
-  {#if open}
-    <div
-      transition:fly|local={{ y: -20, duration: 200 }}
-      class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
-      class:auto-width={autoWidth}
-    >
-      {#if autocomplete}
-        <Search
-          value={searchTerm}
-          on:change={event => (searchTerm = event.detail)}
-          {disabled}
-          placeholder="Search"
-        />
+  {/if}
+  <svg
+    class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
+    focusable="false"
+    aria-hidden="true"
+  >
+    <use xlink:href="#spectrum-css-icon-Chevron100" />
+  </svg>
+</button>
+
+<Popover
+  anchor={button}
+  align="left"
+  bind:this={popover}
+  {open}
+  on:close={() => (open = false)}
+  useAnchorWidth={!autoWidth}
+  maxWidth={autoWidth ? 400 : null}
+>
+  <div
+    class="popover-content"
+    class:auto-width={autoWidth}
+    use:clickOutside={() => (open = false)}
+  >
+    {#if autocomplete}
+      <Search
+        value={searchTerm}
+        on:change={event => (searchTerm = event.detail)}
+        {disabled}
+        placeholder="Search"
+      />
+    {/if}
+    <ul class="spectrum-Menu" role="listbox">
+      {#if placeholderOption}
+        <li
+          class="spectrum-Menu-item placeholder"
+          class:is-selected={isPlaceholder}
+          role="option"
+          aria-selected="true"
+          tabindex="0"
+          on:click={() => onSelectOption(null)}
+        >
+          <span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
+          <svg
+            class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
+            focusable="false"
+            aria-hidden="true"
+          >
+            <use xlink:href="#spectrum-css-icon-Checkmark100" />
+          </svg>
+        </li>
       {/if}
-      <ul class="spectrum-Menu" role="listbox">
-        {#if placeholderOption}
+      {#if filteredOptions.length}
+        {#each filteredOptions as option, idx}
           <li
-            class="spectrum-Menu-item placeholder"
-            class:is-selected={isPlaceholder}
+            class="spectrum-Menu-item"
+            class:is-selected={isOptionSelected(getOptionValue(option, idx))}
             role="option"
             aria-selected="true"
             tabindex="0"
-            on:click={() => onSelectOption(null)}
+            on:click={() => onSelectOption(getOptionValue(option, idx))}
+            class:is-disabled={!isOptionEnabled(option)}
           >
-            <span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
+            {#if getOptionIcon(option, idx)}
+              <span class="option-extra icon">
+                <Icon size="S" name={getOptionIcon(option, idx)} />
+              </span>
+            {/if}
+            {#if getOptionColour(option, idx)}
+              <span class="option-extra">
+                <StatusLight square color={getOptionColour(option, idx)} />
+              </span>
+            {/if}
+            <span class="spectrum-Menu-itemLabel">
+              {getOptionLabel(option, idx)}
+            </span>
             <svg
               class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
               focusable="false"
@@ -155,61 +202,13 @@
               <use xlink:href="#spectrum-css-icon-Checkmark100" />
             </svg>
           </li>
-        {/if}
-        {#if filteredOptions.length}
-          {#each filteredOptions as option, idx}
-            <li
-              class="spectrum-Menu-item"
-              class:is-selected={isOptionSelected(getOptionValue(option, idx))}
-              role="option"
-              aria-selected="true"
-              tabindex="0"
-              on:click={() => onSelectOption(getOptionValue(option, idx))}
-              class:is-disabled={!isOptionEnabled(option)}
-            >
-              {#if getOptionIcon(option, idx)}
-                <span class="option-extra">
-                  <Icon name={getOptionIcon(option, idx)} />
-                </span>
-              {/if}
-              {#if getOptionColour(option, idx)}
-                <span class="option-extra">
-                  <StatusLight square color={getOptionColour(option, idx)} />
-                </span>
-              {/if}
-              <span class="spectrum-Menu-itemLabel">
-                {getOptionLabel(option, idx)}
-              </span>
-              <svg
-                class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
-                focusable="false"
-                aria-hidden="true"
-              >
-                <use xlink:href="#spectrum-css-icon-Checkmark100" />
-              </svg>
-            </li>
-          {/each}
-        {/if}
-      </ul>
-    </div>
-  {/if}
-</div>
+        {/each}
+      {/if}
+    </ul>
+  </div>
+</Popover>
 
 <style>
-  .spectrum-Popover {
-    max-height: 240px;
-    z-index: 999;
-    top: 100%;
-  }
-  .spectrum-Popover:not(.auto-width) {
-    width: 100%;
-  }
-  .spectrum-Popover.auto-width :global(.spectrum-Menu-itemLabel) {
-    max-width: 400px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
   .spectrum-Picker {
     width: 100%;
     box-shadow: none;
@@ -229,9 +228,6 @@
   .spectrum-Picker-label.auto-width.is-placeholder {
     padding-right: 2px;
   }
-  .auto-width .spectrum-Menu-item {
-    padding-right: var(--spacing-xl);
-  }
 
   /* Icon and colour alignment */
   .spectrum-Menu-checkmark {
@@ -241,27 +237,48 @@
   .option-extra {
     padding-right: 8px;
   }
+  .option-extra.icon {
+    margin: 0 -1px;
+  }
 
-  .spectrum-Popover :global(.spectrum-Search) {
+  /* Popover */
+  .popover-content {
+    display: contents;
+  }
+  .popover-content.auto-width .spectrum-Menu-itemLabel {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .popover-content:not(.auto-width) .spectrum-Menu-itemLabel {
+    width: 0;
+    flex: 1 1 auto;
+  }
+  .popover-content.auto-width .spectrum-Menu-item {
+    padding-right: var(--spacing-xl);
+  }
+  .spectrum-Menu-item.is-disabled {
+    pointer-events: none;
+  }
+
+  /* Search styles inside popover */
+  .popover-content :global(.spectrum-Search) {
     margin-top: -1px;
     margin-left: -1px;
     width: calc(100% + 2px);
   }
-  .spectrum-Popover :global(.spectrum-Search input) {
+  .popover-content :global(.spectrum-Search input) {
     height: auto;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     padding-top: var(--spectrum-global-dimension-size-100);
     padding-bottom: var(--spectrum-global-dimension-size-100);
   }
-  .spectrum-Popover :global(.spectrum-Search .spectrum-ClearButton) {
+  .popover-content :global(.spectrum-Search .spectrum-ClearButton) {
     right: 1px;
     top: 2px;
   }
-  .spectrum-Popover :global(.spectrum-Search .spectrum-Textfield-icon) {
+  .popover-content :global(.spectrum-Search .spectrum-Textfield-icon) {
     top: 9px;
   }
-  .spectrum-Menu-item.is-disabled {
-    pointer-events: none;
-  }
 </style>

packages/bbui/src/Form/Core/TextField.svelte

@@ -112,8 +112,4 @@
   .spectrum-Textfield {
     width: 100%;
   }
-  input:disabled {
-    color: var(--spectrum-global-color-gray-600) !important;
-    -webkit-text-fill-color: var(--spectrum-global-color-gray-600) !important;
-  }
 </style>

packages/bbui/src/Icon/IconAvatar.svelte

@@ -19,6 +19,7 @@
   .icon {
     width: 28px;
     height: 28px;
+    flex: 0 0 28px;
     display: grid;
     place-items: center;
     border-radius: 50%;
@@ -34,6 +35,7 @@
   .icon.size--S {
     width: 22px;
     height: 22px;
+    flex: 0 0 22px;
   }
   .icon.size--S :global(.spectrum-Icon) {
     width: 16px;
@@ -46,6 +48,7 @@
   .icon.size--L {
     width: 40px;
     height: 40px;
+    flex: 0 0 40px;
   }
   .icon.size--L :global(.spectrum-Icon) {
     width: 28px;

packages/bbui/src/InlineAlert/InlineAlert.svelte

@@ -56,5 +56,6 @@
     --spectrum-semantic-positive-icon-color: #2d9d78;
     --spectrum-semantic-negative-icon-color: #e34850;
     min-width: 100px;
+    margin: 0;
   }
 </style>

packages/bbui/src/Label/Label.svelte

@@ -21,6 +21,7 @@
   label {
     padding: 0;
     white-space: nowrap;
+    color: var(--spectrum-global-color-gray-600);
   }
 
   .muted {

packages/bbui/src/Layout/Page.svelte

@@ -1,32 +1,95 @@
 <script>
+  import { setContext } from "svelte"
+  import clickOutside from "../Actions/click_outside"
+
   export let wide = false
-  export let maxWidth = "80ch"
+  export let narrow = false
   export let noPadding = false
+
+  let sidePanelVisble = false
+
+  setContext("side-panel", {
+    open: () => (sidePanelVisble = true),
+    close: () => (sidePanelVisble = false),
+  })
 </script>
 
-<div style="--max-width: {maxWidth}" class:wide class:noPadding>
-  <slot />
+<div class="page">
+  <div class="main">
+    <div class="content" class:wide class:noPadding class:narrow>
+      <slot />
+    </div>
+  </div>
+  <div
+    id="side-panel"
+    class:visible={sidePanelVisble}
+    use:clickOutside={() => {
+      sidePanelVisble = false
+    }}
+  >
+    <slot name="side-panel" />
+  </div>
 </div>
 
 <style>
-  div {
+  .page {
+    position: relative;
+  }
+  .page,
+  .main {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    flex: 1 1 auto;
+    overflow-x: hidden;
+  }
+  .main {
+    overflow: auto;
+  }
+  .content {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    max-width: var(--max-width);
+    max-width: 1080px;
     margin: 0 auto;
-    padding: calc(var(--spacing-xl) * 2);
-    min-height: calc(100% - var(--spacing-xl) * 4);
+    flex: 1 1 auto;
+    padding: 50px;
+    z-index: 1;
   }
-
-  .wide {
+  .content.wide {
     max-width: none;
-    margin: 0;
+  }
+  .content.narrow {
+    max-width: 840px;
+  }
+  #side-panel {
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 24px;
+    background: var(--background);
+    border-left: var(--border-light);
+    width: 320px;
+    max-width: calc(100vw - 48px - 48px);
+    overflow: auto;
+    overflow-x: hidden;
+    transform: translateX(100%);
+    transition: transform 130ms ease-out;
+    height: calc(100% - 48px);
+    z-index: 2;
+  }
+  #side-panel.visible {
+    transform: translateX(0);
   }
 
-  .noPadding {
-    padding: 0px;
-    margin: 0px;
+  @media (max-width: 640px) {
+    .content {
+      padding: 24px;
+      max-width: calc(100vw - 48px) !important;
+      width: calc(100vw - 48px) !important;
+      overflow: auto;
+    }
   }
 </style>

packages/bbui/src/List/ListItem.svelte

@@ -30,9 +30,11 @@
       <Label>{subtitle}</Label>
     {/if}
   </div>
-  <div class="right">
-    <slot />
-  </div>
+  {#if $$slots.default}
+    <div class="right">
+      <slot />
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -45,6 +47,7 @@
     justify-content: space-between;
     border: 1px solid var(--spectrum-global-color-gray-300);
     transition: background 130ms ease-out;
+    gap: var(--spacing-m);
   }
   .list-item:not(:first-child) {
     border-top: none;

packages/bbui/src/Modal/CustomContent.svelte

@@ -26,7 +26,6 @@
     padding: 40px;
     background-color: var(--purple);
     color: white;
-    font-family: var(--font-sans);
     font-weight: bold;
     text-align: center;
     user-select: none;

packages/bbui/src/Modal/Modal.svench

@@ -19,7 +19,6 @@
 
 <style>
   p, span {
-    font-family: var(--font-sans);
     font-size: var(--font-size-s);
   }
 

packages/bbui/src/Modal/ModalContent.svelte

@@ -104,7 +104,7 @@
         {/if}
 
         {#if showCancelButton}
-          <Button group secondary newStyles on:click={close}>
+          <Button group secondary on:click={close}>
             {cancelText}
           </Button>
         {/if}
@@ -151,7 +151,8 @@
     overflow: visible;
   }
   .spectrum-Dialog-heading {
-    font-family: var(--font-sans);
+    font-family: var(--font-accent);
+    font-weight: 600;
   }
   .spectrum-Dialog-heading.noDivider {
     margin-bottom: 12px;

packages/bbui/src/Modal/QuizModal.svelte

@@ -42,7 +42,6 @@
 <style>
   p {
     margin: 0;
-    font-family: var(--font-sans);
     font-size: var(--font-size-s);
   }
   p.error {

packages/bbui/src/Popover/Popover.svelte

@@ -4,6 +4,9 @@
   import { createEventDispatcher } from "svelte"
   import positionDropdown from "../Actions/position_dropdown"
   import clickOutside from "../Actions/click_outside"
+  import { fly } from "svelte/transition"
+  import { getContext } from "svelte"
+  import Context from "../context"
 
   const dispatch = createEventDispatcher()
 
@@ -12,9 +15,10 @@
   export let portalTarget
   export let dataCy
   export let maxWidth
-
   export let direction = "bottom"
   export let showTip = false
+  export let open = false
+  export let useAnchorWidth = false
 
   let tipSvg =
     '<svg xmlns="http://www.w3.org/svg/2000" width="23" height="12" class="spectrum-Popover-tip" > <path class="spectrum-Popover-tip-triangle" d="M 0.7071067811865476 0 L 11.414213562373096 10.707106781186548 L 22.121320343559645 0" /> </svg>'
@@ -22,6 +26,7 @@
   $: tooltipClasses = showTip
     ? `spectrum-Popover--withTip spectrum-Popover--${direction}`
     : ""
+  $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
 
   export const show = () => {
     dispatch("open")
@@ -35,13 +40,22 @@
 
   const handleOutsideClick = e => {
     if (open) {
-      e.stopPropagation()
+      // Stop propagation if the source is the anchor
+      let node = e.target
+      let fromAnchor = false
+      while (!fromAnchor && node && node.parentNode) {
+        fromAnchor = node === anchor
+        node = node.parentNode
+      }
+      if (fromAnchor) {
+        e.stopPropagation()
+      }
+
+      // Hide the popover
       hide()
     }
   }
 
-  let open = null
-
   function handleEscape(e) {
     if (open && e.key === "Escape") {
       hide()
@@ -50,15 +64,16 @@
 </script>
 
 {#if open}
-  <Portal target={portalTarget}>
+  <Portal {target}>
     <div
       tabindex="0"
-      use:positionDropdown={{ anchor, align, maxWidth }}
+      use:positionDropdown={{ anchor, align, maxWidth, useAnchorWidth }}
       use:clickOutside={handleOutsideClick}
       on:keydown={handleEscape}
       class={"spectrum-Popover is-open " + (tooltipClasses || "")}
       role="presentation"
       data-cy={dataCy}
+      transition:fly|local={{ y: -20, duration: 200 }}
     >
       {#if showTip}
         {@html tipSvg}

packages/bbui/src/Popover/Popover.svench

@@ -29,7 +29,6 @@
     font-size: var(--font-size-m);
     margin: 0 0 var(--spacing-l) 0;
     font-weight: 600;
-    font-family: var(--font-sans);
   }
 
   .input-group-column {

packages/bbui/src/Table/StringRenderer.svelte

@@ -1,8 +1,11 @@
 <script>
   export let value
+  export let schema
 </script>
 
-<div>{typeof value === "object" ? JSON.stringify(value) : value}</div>
+<div class:capitalise={schema?.capitalise}>
+  {typeof value === "object" ? JSON.stringify(value) : value}
+</div>
 
 <style>
   div {
@@ -10,5 +13,10 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     max-width: var(--max-cell-width);
+    width: 0;
+    flex: 1 1 auto;
+  }
+  div.capitalise {
+    text-transform: capitalize;
   }
 </style>

packages/bbui/src/Table/Table.svelte

@@ -21,6 +21,8 @@
    * template: a HBS or JS binding to use as the value
    * background: the background color
    * color: the text color
+   * borderLeft: show a left border
+   * borderRight: show a right border
    */
   export let data = []
   export let schema = {}
@@ -31,6 +33,7 @@
   export let allowSelectRows
   export let allowEditRows = true
   export let allowEditColumns = true
+  export let allowClickRows = true
   export let selectedRows = []
   export let customRenderers = []
   export let disableSorting = false
@@ -270,6 +273,17 @@
       if (schema[field].align === "Right") {
         styles[field] += "justify-content: flex-end; text-align: right;"
       }
+      if (schema[field].borderLeft) {
+        styles[field] +=
+          "border-left: 1px solid var(--spectrum-global-color-gray-200);"
+      }
+      if (schema[field].borderLeft) {
+        styles[field] +=
+          "border-right: 1px solid var(--spectrum-global-color-gray-200);"
+      }
+      if (schema[field].minWidth) {
+        styles[field] += `min-width: ${schema[field].minWidth};`
+      }
     })
     return styles
   }
@@ -290,7 +304,11 @@
         </slot>
       </div>
     {:else}
-      <div class="spectrum-Table" style={`${heightStyle}${gridStyle}`}>
+      <div
+        class="spectrum-Table"
+        class:no-scroll={!rowCount}
+        style={`${heightStyle}${gridStyle}`}
+      >
         {#if fields.length}
           <div class="spectrum-Table-head">
             {#if showEditColumn}
@@ -356,7 +374,7 @@
         {/if}
         {#if sortedRows?.length}
           {#each sortedRows as row, idx}
-            <div class="spectrum-Table-row">
+            <div class="spectrum-Table-row" class:clickable={allowClickRows}>
               {#if showEditColumn}
                 <div
                   class:noBorderCheckbox={!showHeaderBorder}
@@ -433,10 +451,10 @@
   /* Wrapper */
   .wrapper {
     position: relative;
-    z-index: 0;
     --table-bg: var(--spectrum-global-color-gray-50);
     --table-border: 1px solid var(--spectrum-alias-border-color-mid);
     --cell-padding: var(--spectrum-global-dimension-size-250);
+    overflow: auto;
   }
   .wrapper--quiet {
     --table-bg: var(--spectrum-alias-background-color-transparent);
@@ -460,6 +478,9 @@
     display: grid;
     overflow: auto;
   }
+  .spectrum-Table.no-scroll {
+    overflow: visible;
+  }
 
   /* Header */
   .spectrum-Table-head {
@@ -546,12 +567,13 @@
   /* Table rows */
   .spectrum-Table-row {
     display: contents;
+    cursor: auto;
   }
-  .spectrum-Table-row:hover .spectrum-Table-cell {
-    /*background-color: var(--hover-bg) !important;*/
+  .spectrum-Table-row.clickable {
+    cursor: pointer;
   }
-  .spectrum-Table-row:hover .spectrum-Table-cell:after {
-    background-color: var(--spectrum-alias-highlight-hover);
+  .spectrum-Table-row.clickable:hover .spectrum-Table-cell {
+    background-color: var(--spectrum-global-color-gray-100);
   }
   .wrapper--quiet .spectrum-Table-row {
     border-left: none;
@@ -584,24 +606,13 @@
     border-bottom: 1px solid var(--spectrum-alias-border-color-mid);
     background-color: var(--table-bg);
     z-index: auto;
+    transition: background-color 130ms ease-out;
   }
   .spectrum-Table-cell--edit {
     position: sticky;
     left: 0;
     z-index: 2;
   }
-  .spectrum-Table-cell:after {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background-color: transparent;
-    top: 0;
-    left: 0;
-    pointer-events: none;
-    transition: background-color
-      var(--spectrum-global-animation-duration-100, 0.13s) ease-in-out;
-  }
 
   /* Placeholder  */
   .placeholder {

packages/bbui/src/Tabs/Tab.svelte

@@ -82,7 +82,8 @@
   .spectrum-Tabs-item {
     color: var(--spectrum-global-color-gray-600);
   }
-  .spectrum-Tabs-item.is-selected {
+  .spectrum-Tabs-item.is-selected,
+  .spectrum-Tabs-item:hover {
     color: var(--spectrum-global-color-gray-900);
   }
 </style>

packages/bbui/src/Tags/Tag.svelte

@@ -37,7 +37,7 @@
 
 <style>
   .spectrum-Tags-item {
-    margin-top: 0;
     margin-bottom: 0;
+    margin-top: 0;
   }
 </style>

packages/bbui/src/Tags/Tags.svelte

@@ -5,3 +5,13 @@
 <div class="spectrum-Tags" role="list" aria-label="list">
   <slot />
 </div>
+
+<style>
+  .spectrum-Tags {
+    margin-top: -8px;
+    margin-left: -4px;
+  }
+  .spectrum-Tags :global(.spectrum-Tags-item) {
+    margin: 8px 0 0 4px !important;
+  }
+</style>

packages/bbui/src/Typography/Heading.svelte

@@ -15,3 +15,9 @@
 >
   <slot />
 </h1>
+
+<style>
+  h1 {
+    font-family: var(--font-accent);
+  }
+</style>

packages/bbui/src/bbui.css

@@ -40,12 +40,14 @@
   --rounded-medium: 8px;
   --rounded-large: 16px;
 
-  --font-sans: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
-    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  --font-accent: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
   --font-serif: "Georgia", Cambria, Times New Roman, Times, serif;
   --font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
     monospace;
+  --spectrum-alias-body-text-font-family: var(--font-sans);
 
   font-size: 16px;
   --font-size-xs: 0.75rem;
@@ -89,6 +91,8 @@
   --border-light-2: 2px var(--grey-3) solid;
   --border-blue: 2px var(--blue) solid;
   --border-transparent: 2px transparent solid;
+
+  --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-600);
 }
 
 a {

packages/bbui/src/context.js

@@ -1,3 +1,4 @@
 export default {
   Modal: "bbui-modal",
+  PopoverRoot: "bbui-popover-root",
 }

packages/builder/assets/bb-emblem.svg

@@ -3,7 +3,7 @@
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#393C44;}
+	.st0{fill:#000000;}
 	.st1{fill:#FFFFFF;}
 	.st2{fill:#4285F4;}
 </style>

packages/builder/cypress.json

@@ -11,9 +11,5 @@
     "WORKER_PORT": "4200",
     "JWT_SECRET": "test",
     "HOST_IP": ""
-  },
-  "retries": {
-    "runMode": 1,
-    "openMode": 0
   }
 }

packages/builder/cypress/integration/adminAndManagement/authentication.spec.js

@@ -2,7 +2,7 @@ import filterTests from "../../support/filterTests"
 // const interact = require("../support/interact")
 
 filterTests(["smoke", "all"], () => {
-  context("Auth Configuration", () => {
+  xcontext("Auth Configuration", () => {
     before(() => {
       cy.login()
     })
@@ -21,7 +21,7 @@ filterTests(["smoke", "all"], () => {
       cy.get("[data-cy=oidc-active]").should('not.be.checked')
 
       cy.intercept("POST", "/api/global/configs").as("updateAuth")
-      cy.get("button[data-cy=oidc-save]").contains("Save").click({force: true})
+      cy.get("button[data-cy=oidc-save]").contains("Save").click({ force: true })
       cy.wait("@updateAuth")
       cy.get("@updateAuth").its("response.statusCode").should("eq", 200)
 
@@ -45,7 +45,7 @@ filterTests(["smoke", "all"], () => {
       cy.get("button[data-cy=oidc-save]").should("not.be.disabled");
 
       cy.intercept("POST", "/api/global/configs").as("updateAuth")
-      cy.get("button[data-cy=oidc-save]").contains("Save").click({force: true})
+      cy.get("button[data-cy=oidc-save]").contains("Save").click({ force: true })
       cy.wait("@updateAuth")
       cy.get("@updateAuth").its("response.statusCode").should("eq", 200)
 
@@ -85,11 +85,11 @@ filterTests(["smoke", "all"], () => {
       cy.get(".auth-form input.spectrum-Textfield-input").type("Another ")
       cy.get(".spectrum-Tags").find(".spectrum-Tags-item").its("length").should("eq", 6)
       cy.get(".spectrum-Tags-item").contains("Another")
-      
+
       cy.get("button[data-cy=oidc-save]").should("not.be.disabled");
 
       cy.intercept("POST", "/api/global/configs").as("updateAuth")
-      cy.get("button[data-cy=oidc-save]").contains("Save").click({force: true})
+      cy.get("button[data-cy=oidc-save]").contains("Save").click({ force: true })
       cy.wait("@updateAuth")
       cy.get("@updateAuth").its("response.statusCode").should("eq", 200)
 
@@ -123,7 +123,7 @@ filterTests(["smoke", "all"], () => {
       cy.get("button[data-cy=oidc-save]").should("not.be.disabled");
 
       cy.intercept("POST", "/api/global/configs").as("updateAuth")
-      cy.get("button[data-cy=oidc-save]").contains("Save").click({force: true})
+      cy.get("button[data-cy=oidc-save]").contains("Save").click({ force: true })
       cy.wait("@updateAuth")
       cy.get("@updateAuth").its("response.statusCode").should("eq", 200)
 
@@ -144,7 +144,7 @@ filterTests(["smoke", "all"], () => {
 
       cy.get("div.content").scrollTo("bottom")
 
-      cy.get("[data-cy=restore-oidc-default-scopes]").click({force: true})
+      cy.get("[data-cy=restore-oidc-default-scopes]").click({ force: true })
 
       cy.get(".spectrum-Tags").find(".spectrum-Tags-item").its("length").should("eq", 4)
 

packages/builder/cypress/integration/adminAndManagement/userSettings.spec.js

@@ -3,107 +3,112 @@ const interact = require('../../support/interact')
 
 filterTests(["smoke", "all"], () => {
   context("User Settings Menu", () => {
-    
+
     before(() => {
       cy.login()
     })
-    
+
     it("should update user information via user settings menu", () => {
-        const fname = "test"
-        const lname = "user"
+      const fname = "test"
+      const lname = "user"
 
-        cy.visit(`${Cypress.config().baseUrl}/builder`)
-        cy.updateUserInformation(fname, lname)
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.updateUserInformation(fname, lname)
 
-        // Go to user info and confirm name update
-        cy.contains("Users").click()
-        cy.contains("test@test.com").click()
+      // Go to user info and confirm name update
+      cy.contains("Users").click()
+      cy.contains("test@test.com").click()
 
-        cy.get(interact.FIELD, { timeout: 1000 }).eq(1).within(() => {
-            cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).should('have.value', fname)
-          })
-        cy.get(interact.FIELD).eq(2).within(() => {
-            cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).should('have.value', lname)
-          })
+      cy.get(interact.FIELD, { timeout: 1000 }).eq(1).within(() => {
+        cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).should('have.value', fname)
+      })
+      cy.get(interact.FIELD).eq(2).within(() => {
+        cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).should('have.value', lname)
+      })
     })
 
-    it("should allow copying of the users API key", () => {
-        cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true })
-        cy.get(interact.SPECTRUM_MENU_ITEM).contains("View API key").click({ force: true })
-        cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => {
-            cy.get(interact.SPECTRUM_ICON).click({force: true})
-        })
-        // There may be timing issues with this on the smoke build
-        cy.wait(500)
-        cy.get(".spectrum-Toast-content")
+    xit("should allow copying of the users API key", () => {
+      cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true })
+      cy.get(interact.SPECTRUM_MENU_ITEM).contains("View API key").click({ force: true })
+      cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => {
+        cy.get(interact.SPECTRUM_ICON).click({ force: true })
+      })
+      // There may be timing issues with this on the smoke build
+      cy.wait(500)
+      cy.get(".spectrum-Toast-content")
         .contains("URL copied to clipboard")
         .should("be.visible")
     })
 
     it("should allow API key regeneration", () => {
-        // Get initial API key value
-        cy.get(interact.SPECTRUM_DIALOG_CONTENT)
+      cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true })
+      cy.get(interact.SPECTRUM_MENU_ITEM).contains("View API key").click({ force: true })
+      cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => {
+        cy.get(interact.SPECTRUM_ICON).click({ force: true })
+      })
+      // Get initial API key value
+      cy.get(interact.SPECTRUM_DIALOG_CONTENT)
         .find(interact.SPECTRUM_TEXTFIELD_INPUT).invoke('val').as('keyOne')
 
-        // Click re-generate key button
-        cy.get("button").contains("Re-generate key").click({ force: true })
+      // Click re-generate key button
+      cy.get("button").contains("Regenerate key").click({ force: true })
 
-        // Verify API key was changed
-        cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => {
-            cy.get('@keyOne').then((keyOne) => {
-                cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).invoke('val').should('not.eq', keyOne)
-            })
+      // Verify API key was changed
+      cy.get(interact.SPECTRUM_DIALOG_CONTENT).within(() => {
+        cy.get('@keyOne').then((keyOne) => {
+          cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).invoke('val').should('not.eq', keyOne)
         })
-        cy.closeModal()
+      })
+      cy.closeModal()
     })
 
     it("should update password", () => {
-        // Access Update password modal
-        cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true })
-        cy.get(interact.SPECTRUM_MENU_ITEM).contains("Update password").click({ force: true })
+      // Access Update password modal
+      cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true })
+      cy.get(interact.SPECTRUM_MENU_ITEM).contains("Update password").click({ force: true })
 
-        // Enter new password and update
-        cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => {
-            for (let i = 0; i < 2; i++) {
-                // password set to 'newpwd'
-                cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).eq(i).type("newpwd")
-              }
-            cy.get("button").contains("Update password").click({ force: true })
-        })
+      // Enter new password and update
+      cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => {
+        for (let i = 0; i < 2; i++) {
+          // password set to 'newpwd'
+          cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).eq(i).type("newpwd")
+        }
+        cy.get("button").contains("Update password").click({ force: true })
+      })
 
-        // Logout & in with new password
-        //cy.logOut()
-        cy.login("test@test.com", "newpwd")
+      // Logout & in with new password
+      //cy.logOut()
+      cy.login("test@test.com", "newpwd")
     })
 
-    it("should open and close developer mode", () => {
-        cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true })
-        
-        // Close developer mode & verify
-        cy.get(interact.SPECTRUM_MENU_ITEM).contains("Close developer mode").click({ force: true })
-        cy.get(interact.SPECTRUM_SIDENAV).should('not.exist') // No config sections
-        cy.get(interact.CREATE_APP_BUTTON).should('not.exist') // No create app button
-        cy.get(".app").should('not.exist') // At least one app should be available
+    xit("should open and close developer mode", () => {
+      cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true })
 
-        // Open developer mode & verify
-        cy.get(".avatar > .icon").click({ force: true })
-        cy.get(interact.SPECTRUM_MENU_ITEM).contains("Open developer mode").click({ force: true })
-        cy.get(interact.SPECTRUM_SIDENAV).should('exist') // config sections available
-        cy.get(interact.CREATE_APP_BUTTON).should('exist') // create app button available
+      // Close developer mode & verify
+      cy.get(interact.SPECTRUM_MENU_ITEM).contains("Close developer mode").click({ force: true })
+      cy.get(interact.SPECTRUM_SIDENAV).should('not.exist') // No config sections
+      cy.get(interact.CREATE_APP_BUTTON).should('not.exist') // No create app button
+      cy.get(".app").should('not.exist') // At least one app should be available
+
+      // Open developer mode & verify
+      cy.get(".avatar > .icon").click({ force: true })
+      cy.get(interact.SPECTRUM_MENU_ITEM).contains("Open developer mode").click({ force: true })
+      cy.get(".app-table").should('exist') // config sections available
+      cy.get(interact.CREATE_APP_BUTTON).should('exist') // create app button available
     })
 
     after(() => {
-        // Change password back to original value
-        cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({ force: true })
-        cy.get(interact.SPECTRUM_MENU_ITEM).contains("Update password").click({ force: true })
-        cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => {
-            for (let i = 0; i < 2; i++) {
-                cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).eq(i).type("test")
-              }
-            cy.get("button").contains("Update password").click({ force: true })
-        })
-        // Remove users name
-        cy.updateUserInformation()
+      // Change password back to original value
+      cy.get(".user-dropdown .icon", { timeout: 2000 }).click({ force: true })
+      cy.get(interact.SPECTRUM_MENU_ITEM).contains("Update password").click({ force: true })
+      cy.get(interact.SPECTRUM_DIALOG_GRID).within(() => {
+        for (let i = 0; i < 2; i++) {
+          cy.get(interact.SPECTRUM_TEXTFIELD_INPUT).eq(i).type("test")
+        }
+        cy.get("button").contains("Update password").click({ force: true })
       })
+      // Remove users name
+      cy.updateUserInformation()
+    })
   })
 })

packages/builder/cypress/integration/appOverview.spec.js

@@ -2,7 +2,7 @@ import filterTests from "../support/filterTests"
 import clientPackage from "@budibase/client/package.json"
 
 filterTests(["all"], () => {
-  context("Application Overview screen", () => {
+  xcontext("Application Overview screen", () => {
     before(() => {
       cy.login()
       cy.deleteAllApps()

packages/builder/cypress/integration/createApp.spec.js

@@ -14,15 +14,15 @@ filterTests(['smoke', 'all'], () => {
         cy.visit(`${Cypress.config().baseUrl}/builder/portal/apps/create`, { timeout: 5000 }) //added /portal/apps/create
         cy.wait(1000)
         cy.get(interact.CREATE_APP_BUTTON, { timeout: 10000 }).contains('Start from scratch').should("exist")
-        
+
         cy.get(interact.TEMPLATE_CATEGORY_FILTER).should("exist")
         cy.get(interact.TEMPLATE_CATEGORY).should("exist")
-        
+
         cy.get(interact.APP_TABLE).should("not.exist")
       })
     }
 
-    it("should provide filterable templates", () => {
+    xit("should provide filterable templates", () => {
       cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 5000 })
       cy.wait(500)
 
@@ -30,16 +30,16 @@ filterTests(['smoke', 'all'], () => {
         .its("body")
         .then(val => {
           if (val.length > 0) {
-            cy.get(interact.SPECTRUM_BUTTON).contains("Templates").click({force: true})
+            cy.get(interact.SPECTRUM_BUTTON).contains("View Templates").click({ force: true })
           }
         })
 
       cy.get(interact.TEMPLATE_CATEGORY_FILTER).should("exist")
       cy.get(interact.TEMPLATE_CATEGORY).should("exist")
-      
+
       cy.get(interact.TEMPLATE_CATEGORY_ACTIONGROUP).its('length').should('be.gt', 1)
       cy.get(interact.TEMPLATE_CATEGORY_FILTER_ACTIONBUTTON).its('length').should('be.gt', 2)
-      
+
       cy.get(interact.TEMPLATE_CATEGORY_FILTER_ACTIONBUTTON).eq(1).click()
       cy.get(interact.TEMPLATE_CATEGORY_ACTIONGROUP).should('have.length', 1)
 
@@ -104,14 +104,14 @@ filterTests(['smoke', 'all'], () => {
       cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 5000 })
 
       cy.updateUserInformation("Ted", "Userman")
-      
+
       cy.createApp("", false)
       cy.applicationInAppTable("Teds app")
       cy.deleteApp("Teds app")
 
       // Accomodate names that end in 'S'
       cy.updateUserInformation("Chris", "Userman")
-      
+
       cy.createApp("", false)
       cy.applicationInAppTable("Chris app")
       cy.deleteApp("Chris app")
@@ -123,35 +123,49 @@ filterTests(['smoke', 'all'], () => {
       const exportedApp = 'cypress/fixtures/exported-app.txt'
 
       cy.importApp(exportedApp, "")
-
       cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 2000 })
-
       cy.applicationInAppTable("My app")
-      
-      cy.get(".appTable .name").eq(0).click()
-
-      cy.deleteApp("My app")
+      cy.get(".app-table .name").eq(0).click()
+      cy.closeModal()
+      cy.get(`[aria-label="ShowMenu"]`).click()
+      cy.get(".spectrum-Menu").within(() => {
+        cy.contains("Overview").click()
+      })
+      cy.get(".app-overview-actions-icon").within(() => {
+        cy.get(".spectrum-Icon").click({ force: true })
+      })
+      cy.get(".spectrum-Menu").contains("Delete").click({ force: true })
+      cy.get(".spectrum-Dialog-grid").within(() => {
+        cy.get("input").type("My app")
+      })
+      cy.get(".spectrum-Button--warning").click()
     })
 
     it("should create an application from an export, using the users first name as the default app name", () => {
       const exportedApp = 'cypress/fixtures/exported-app.txt'
 
       cy.updateUserInformation("Ted", "Userman")
-
       cy.importApp(exportedApp, "")
-
       cy.visit(`${Cypress.config().baseUrl}/builder`)
-
       cy.applicationInAppTable("Teds app")
-      
-      cy.get(".appTable .name").eq(0).click()
-
-      cy.deleteApp("Teds app")
-
+      cy.get(".app-table .name").eq(0).click()
+      cy.closeModal()
+      cy.get(`[aria-label="ShowMenu"]`).click()
+      cy.get(".spectrum-Menu").within(() => {
+        cy.contains("Overview").click()
+      })
+      cy.get(".app-overview-actions-icon").within(() => {
+        cy.get(".spectrum-Icon").click({ force: true })
+      })
+      cy.get(".spectrum-Menu").contains("Delete").click({ force: true })
+      cy.get(".spectrum-Dialog-grid").within(() => {
+        cy.get("input").type("Teds app")
+      })
+      cy.get(".spectrum-Button--warning").click()
       cy.updateUserInformation("", "")
     })
 
-    it("should generate the first application from a template", () => {
+    xit("should generate the first application from a template", () => {
       cy.visit(`${Cypress.config().baseUrl}/builder`)
       cy.wait(500)
 
@@ -172,28 +186,28 @@ filterTests(['smoke', 'all'], () => {
         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})
+        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(interact.SPECTRUM_MODAL_INPUT).eq(0).should("have.value", templateNameText)
-        cy.get(interact.SPECTRUM_MODAL_INPUT).eq(1).should("have.value", templateNameParsed)
+        .then(templateNameText => {
+          const templateNameParsed = "/" + templateNameText.toLowerCase().replace(/\s+/g, "-")
+          cy.get(interact.SPECTRUM_MODAL_INPUT).eq(0).should("have.value", templateNameText)
+          cy.get(interact.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(2000)
+          cy.get(".spectrum-Modal .spectrum-ButtonGroup").contains("Create app").click()
+          cy.wait(5000)
 
-        cy.applicationInAppTable(templateNameText)
-        cy.deleteApp(templateNameText) 
-      });
+          cy.visit(`${Cypress.config().baseUrl}/builder`)
+          cy.wait(2000)
+
+          cy.applicationInAppTable(templateNameText)
+          cy.deleteApp(templateNameText)
+        });
 
     })
 
@@ -217,5 +231,5 @@ filterTests(['smoke', 'all'], () => {
       cy.deleteApp(secondAppName)
     })
 
-  })  
+  })
 })

packages/builder/cypress/integration/createScreen.spec.js

@@ -2,7 +2,7 @@ import filterTests from "../support/filterTests"
 const interact = require('../support/interact')
 
 filterTests(["smoke", "all"], () => {
-  context("Screen Tests", () => {
+  xcontext("Screen Tests", () => {
     before(() => {
       cy.login()
       cy.createTestApp()
@@ -25,7 +25,7 @@ filterTests(["smoke", "all"], () => {
 
     it.skip("should delete all screens then create first screen via button", () => {
       cy.deleteAllScreens()
-      
+
       cy.contains("Create first screen").click()
       cy.get(interact.BODY, { timeout: 2000 }).should('contain', '/home')
     })
@@ -33,7 +33,7 @@ filterTests(["smoke", "all"], () => {
     it("Should create and filter screens by access level", () => {
       const accessLevels = ["Basic", "Admin", "Public", "Power"]
 
-      for (const access of accessLevels){
+      for (const access of accessLevels) {
         // Create screen with specified access level
         cy.createScreen(access, access)
         // Filter by access level and confirm screen visible
@@ -46,9 +46,9 @@ filterTests(["smoke", "all"], () => {
       // Filter by All screens - Confirm all screens visible
       cy.filterScreensAccessLevel("All screens")
       cy.get(interact.BODY).should('contain', accessLevels[0])
-      .and('contain', accessLevels[1])
-      .and('contain', accessLevels[2])
-      .and('contain', accessLevels[3])
+        .and('contain', accessLevels[1])
+        .and('contain', accessLevels[2])
+        .and('contain', accessLevels[3])
     })
   })
 })

packages/builder/cypress/integration/queryLevelTransformers.spec.js

@@ -13,9 +13,9 @@ filterTests(["smoke", "all"], () => {
       const datasource = "REST"
       const restUrl = "https://api.openbrewerydb.org/breweries"
       cy.selectExternalDatasource(datasource)
-      cy.createRestQuery("GET", restUrl, "/breweries")
+      cy.createRestQuery("GET", restUrl, "breweries")
       cy.reload()
-      cy.contains(".nav-item-content", "/breweries", { timeout: 20000 }).click()
+      cy.contains(".nav-item-content", "breweries", { timeout: 20000 }).click()
       cy.contains(interact.SPECTRUM_TABS_ITEM, "Transformer", { timeout: 5000 }).click({ force: true })
       // Get Transformer Function from file
       cy.readFile("cypress/support/queryLevelTransformerFunction.js").then(
@@ -44,9 +44,9 @@ filterTests(["smoke", "all"], () => {
       const datasource = "REST"
       const restUrl = "https://api.openbrewerydb.org/breweries"
       cy.selectExternalDatasource(datasource)
-      cy.createRestQuery("GET", restUrl, "/breweries")
+      cy.createRestQuery("GET", restUrl, "breweries")
       cy.reload()
-      cy.contains(".nav-item-content", "/breweries", { timeout: 2000 }).click()
+      cy.contains(".nav-item-content", "breweries", { timeout: 2000 }).click()
       cy.contains(interact.SPECTRUM_TABS_ITEM, "Transformer", { timeout: 5000 }).click({ force: true })
       // Get Transformer Function with Data from file
       cy.readFile(
@@ -75,9 +75,9 @@ filterTests(["smoke", "all"], () => {
       const datasource = "REST"
       const restUrl = "https://api.openbrewerydb.org/breweries"
       cy.selectExternalDatasource(datasource)
-      cy.createRestQuery("GET", restUrl, "/breweries")
+      cy.createRestQuery("GET", restUrl, "breweries")
       cy.reload()
-      cy.contains(".nav-item-content", "/breweries", { timeout: 2000 }).click()
+      cy.contains(".nav-item-content", "breweries", { timeout: 10000 }).click()
       cy.contains(interact.SPECTRUM_TABS_ITEM, "Transformer", { timeout: 5000 }).click({ force: true })
       // Clear the code box and add "test"
       cy.get(interact.CODEMIRROR_TEXTAREA)

packages/builder/cypress/support/commands.js

@@ -101,7 +101,7 @@ Cypress.Commands.add("deleteUser", email => {
 })
 
 Cypress.Commands.add("updateUserInformation", (firstName, lastName) => {
-  cy.get(".user-dropdown .avatar > .icon", { timeout: 2000 }).click({
+  cy.get(".user-dropdown .icon", { timeout: 2000 }).click({
     force: true,
   })
 
@@ -132,7 +132,7 @@ Cypress.Commands.add("updateUserInformation", (firstName, lastName) => {
         .blur()
     }
     cy.get(".confirm-wrap").within(() => {
-      cy.get("button").contains("Update information").click({ force: true })
+      cy.get("button").contains("Save").click({ force: true })
     })
     cy.get(".spectrum-Dialog-grid").should("not.exist")
   })
@@ -222,9 +222,12 @@ Cypress.Commands.add("deleteApp", name => {
           // Go to app overview
           const appIdParsed = appId.split("_").pop()
           const actionEleId = `[data-cy=row_actions_${appIdParsed}]`
-          cy.get(actionEleId).within(() => {
-            cy.contains("Manage").click({ force: true })
+          cy.get(actionEleId).click()
+          cy.get(`[aria-label="ShowMenu"]`).click()
+          cy.get(".spectrum-Menu").within(() => {
+            cy.contains("Overview").click()
           })
+
           cy.wait(500)
 
           // Unpublish first if needed
@@ -400,7 +403,7 @@ Cypress.Commands.add("searchForApplication", appName => {
         return
       } else {
         // Searches for the app
-        cy.get(".filter").then(() => {
+        cy.get(".spectrum-Search").then(() => {
           cy.get(".spectrum-Textfield").within(() => {
             cy.get("input").eq(0).clear({ force: true })
             cy.get("input").eq(0).type(appName, { force: true })
@@ -413,7 +416,7 @@ Cypress.Commands.add("searchForApplication", appName => {
 // Assumes there are no others
 Cypress.Commands.add("applicationInAppTable", appName => {
   cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 30000 })
-  cy.get(".appTable", { timeout: 30000 }).within(() => {
+  cy.get(".app-table", { timeout: 30000 }).within(() => {
     cy.get(".title").contains(appName).should("exist")
   })
 })

packages/builder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "2.2.12-alpha.6",
+  "version": "2.2.12-alpha.32",
   "license": "GPL-3.0",
   "private": true,
   "scripts": {
@@ -71,10 +71,10 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "2.2.12-alpha.6",
-    "@budibase/client": "2.2.12-alpha.6",
-    "@budibase/frontend-core": "2.2.12-alpha.6",
-    "@budibase/string-templates": "2.2.12-alpha.6",
+    "@budibase/bbui": "2.2.12-alpha.32",
+    "@budibase/client": "2.2.12-alpha.32",
+    "@budibase/frontend-core": "2.2.12-alpha.32",
+    "@budibase/string-templates": "2.2.12-alpha.32",
     "@sentry/browser": "5.19.1",
     "@spectrum-css/page": "^3.0.1",
     "@spectrum-css/vars": "^3.0.1",
@@ -87,7 +87,7 @@
     "shortid": "2.2.15",
     "svelte-dnd-action": "^0.9.8",
     "svelte-loading-spinners": "^0.1.1",
-    "svelte-portal": "0.1.0",
+    "svelte-portal": "1.0.0",
     "uuid": "8.3.1",
     "yup": "0.29.2"
   },

packages/builder/src/App.svelte

@@ -11,11 +11,8 @@
 
 <div class="banner-container" />
 <BannerDisplay />
-
 <NotificationDisplay />
-
 <LicensingOverlays />
-
 <Router {routes} config={{ queryHandler }} />
 <div class="modal-container" />
 <HelpIcon />

packages/builder/src/builderStore/dataBinding.js

@@ -378,6 +378,7 @@ const getProviderContextBindings = (asset, dataProviders) => {
           providerId,
           // Table ID is used by JSON fields to know what table the field is in
           tableId: table?._id,
+          component: component._component,
           category: component._instanceName,
           icon: def.icon,
           display: {

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -25,7 +25,6 @@
   export let loading = false
   export let hideAutocolumns
   export let rowCount
-  export let type
   export let disableSorting = false
   export let customPlaceholder = false
 

packages/builder/src/components/backend/DataTable/modals/ExportModal.svelte

@@ -12,6 +12,10 @@
       name: "JSON",
       key: "json",
     },
+    {
+      name: "JSON with Schema",
+      key: "jsonWithSchema",
+    },
   ]
 
   export let view
@@ -24,7 +28,7 @@
         viewName: view,
         format: exportFormat,
       })
-      download(data, `export.${exportFormat}`)
+      download(data, `export.${exportFormat === "csv" ? "csv" : "json"}`)
     } catch (error) {
       notifications.error(`Unable to export ${exportFormat.toUpperCase()} data`)
     }

packages/builder/src/components/backend/DataTable/modals/ImportModal.svelte

@@ -6,22 +6,22 @@
     Body,
     Layout,
   } from "@budibase/bbui"
-  import TableDataImport from "../../TableNavigator/TableDataImport.svelte"
+  import TableDataImport from "../../TableNavigator/ExistingTableDataImport.svelte"
   import { API } from "api"
   import { createEventDispatcher } from "svelte"
 
   const dispatch = createEventDispatcher()
 
   export let tableId
-  let dataImport
-
-  $: valid = dataImport?.csvString != null && dataImport?.valid
+  let rows = []
+  let allValid = false
+  let displayColumn = null
 
   async function importData() {
     try {
       await API.importTableData({
         tableId,
-        data: dataImport,
+        rows,
       })
       notifications.success("Rows successfully imported")
     } catch (error) {
@@ -37,14 +37,14 @@
   title="Import Data"
   confirmText="Import"
   onConfirm={importData}
-  disabled={!valid}
+  disabled={!allValid}
 >
   <Body size="S">
-    Import rows to an existing table from a CSV. Only columns from the CSV which
-    exist in the table will be imported.
+    Import rows to an existing table from a CSV or JSON file. Only columns from
+    the file which exist in the table will be imported.
   </Body>
   <Layout gap="XS" noPadding>
-    <Label grey extraSmall>CSV to import</Label>
-    <TableDataImport bind:dataImport bind:existingTableId={tableId} />
+    <Label grey extraSmall>CSV or JSON file to import</Label>
+    <TableDataImport {tableId} bind:rows bind:allValid bind:displayColumn />
   </Layout>
 </ModalContent>

packages/builder/src/components/backend/Datasources/CreateEditRelationship.svelte

@@ -10,7 +10,6 @@
   } from "@budibase/bbui"
   import { tables } from "stores/backend"
   import { Helpers } from "@budibase/bbui"
-  import { writable } from "svelte/store"
 
   export let save
   export let datasource
@@ -18,41 +17,95 @@
   export let fromRelationship = {}
   export let toRelationship = {}
   export let close
-  export let selectedFromTable
 
-  let originalFromName = fromRelationship.name,
-    originalToName = toRelationship.name
-  let fromTable, toTable, through, linkTable, tableOptions
-  let isManyToMany, isManyToOne, relationshipTypes
-  let errors, valid
-  let currentTables = {}
+  const colNotSet = "Please specify a column name"
+  const relationshipTypes = [
+    {
+      label: "One to Many",
+      value: RelationshipTypes.MANY_TO_ONE,
+    },
+    {
+      label: "Many to Many",
+      value: RelationshipTypes.MANY_TO_MANY,
+    },
+  ]
 
-  if (fromRelationship && !fromRelationship.relationshipType) {
-    fromRelationship.relationshipType = RelationshipTypes.MANY_TO_ONE
-  }
+  let originalFromColumnName = toRelationship.name,
+    originalToColumnName = fromRelationship.name
+  let originalFromTable = plusTables.find(
+    table => table._id === toRelationship?.tableId
+  )
+  let originalToTable = plusTables.find(
+    table => table._id === fromRelationship?.tableId
+  )
 
-  if (toRelationship && selectedFromTable) {
-    toRelationship.tableId = selectedFromTable._id
-  }
+  let tableOptions
+  let errors = {}
+  let hasClickedSave = !!fromRelationship.relationshipType
+  let fromPrimary,
+    fromForeign,
+    fromTable,
+    toTable,
+    throughTable,
+    fromColumn,
+    toColumn
+  let fromId, toId, throughId, throughToKey, throughFromKey
+  let isManyToMany, isManyToOne, relationshipType
 
-  function inSchema(table, prop, ogName) {
-    if (!table || !prop || prop === ogName) {
-      return false
+  $: {
+    if (!fromPrimary) {
+      fromPrimary = fromRelationship.foreignKey
+      fromForeign = toRelationship.foreignKey
+    }
+    if (!fromColumn && !errors.fromColumn) {
+      fromColumn = toRelationship.name
+    }
+    if (!toColumn && !errors.toColumn) {
+      toColumn = fromRelationship.name
+    }
+    if (!fromId) {
+      fromId = toRelationship.tableId
+    }
+    if (!toId) {
+      toId = fromRelationship.tableId
+    }
+    if (!throughId) {
+      throughId = fromRelationship.through
+      throughFromKey = fromRelationship.throughFrom
+      throughToKey = fromRelationship.throughTo
+    }
+    if (!relationshipType) {
+      relationshipType = fromRelationship.relationshipType
     }
-    const keys = Object.keys(table.schema).map(key => key.toLowerCase())
-    return keys.indexOf(prop.toLowerCase()) !== -1
   }
 
-  const touched = writable({})
+  $: tableOptions = plusTables.map(table => ({
+    label: table.name,
+    value: table._id,
+  }))
+  $: valid = getErrorCount(errors) === 0 || !hasClickedSave
 
-  function invalidThroughTable({ through, throughTo, throughFrom }) {
+  $: isManyToMany = relationshipType === RelationshipTypes.MANY_TO_MANY
+  $: isManyToOne = relationshipType === RelationshipTypes.MANY_TO_ONE
+  $: fromTable = plusTables.find(table => table._id === fromId)
+  $: toTable = plusTables.find(table => table._id === toId)
+  $: throughTable = plusTables.find(table => table._id === throughId)
+
+  $: toRelationship.relationshipType = fromRelationship?.relationshipType
+
+  const getErrorCount = errors =>
+    Object.entries(errors)
+      .filter(entry => !!entry[1])
+      .map(entry => entry[0]).length
+
+  function invalidThroughTable() {
     // need to know the foreign key columns to check error
-    if (!through || !throughTo || !throughFrom) {
+    if (!throughId || !throughToKey || !throughFromKey) {
       return false
     }
-    const throughTable = plusTables.find(tbl => tbl._id === through)
-    const otherColumns = Object.values(throughTable.schema).filter(
-      col => col.name !== throughFrom && col.name !== throughTo
+    const throughTbl = plusTables.find(tbl => tbl._id === throughId)
+    const otherColumns = Object.values(throughTbl.schema).filter(
+      col => col.name !== throughFromKey && col.name !== throughToKey
     )
     for (let col of otherColumns) {
       if (col.constraints?.presence && !col.autocolumn) {
@@ -62,142 +115,134 @@
     return false
   }
 
-  function checkForErrors(fromRelate, toRelate) {
-    const isMany =
-      fromRelate.relationshipType === RelationshipTypes.MANY_TO_MANY
+  function validate() {
+    const isMany = relationshipType === RelationshipTypes.MANY_TO_MANY
     const tableNotSet = "Please specify a table"
+    const foreignKeyNotSet = "Please pick a foreign key"
     const errObj = {}
-    if ($touched.from && !fromTable) {
-      errObj.from = tableNotSet
+    if (!relationshipType) {
+      errObj.relationshipType = "Please specify a relationship type"
     }
-    if ($touched.to && !toTable) {
-      errObj.to = tableNotSet
+    if (!fromTable) {
+      errObj.fromTable = tableNotSet
     }
-    if ($touched.through && isMany && !fromRelate.through) {
-      errObj.through = tableNotSet
+    if (!toTable) {
+      errObj.toTable = tableNotSet
     }
-    if ($touched.through && invalidThroughTable(fromRelate)) {
-      errObj.through =
-        "Ensure all columns in table are nullable or auto generated"
+    if (isMany && !throughTable) {
+      errObj.throughTable = tableNotSet
     }
-    if ($touched.foreign && !isMany && !fromRelate.fieldName) {
-      errObj.foreign = "Please pick the foreign key"
+    if (isMany && !throughFromKey) {
+      errObj.throughFromKey = foreignKeyNotSet
     }
-    const colNotSet = "Please specify a column name"
-    if ($touched.fromCol && !fromRelate.name) {
-      errObj.fromCol = colNotSet
+    if (isMany && !throughToKey) {
+      errObj.throughToKey = foreignKeyNotSet
     }
-    if ($touched.toCol && !toRelate.name) {
-      errObj.toCol = colNotSet
+    if (invalidThroughTable()) {
+      errObj.throughTable =
+        "Ensure non-key columns are nullable or auto-generated"
     }
-    if ($touched.primary && !fromPrimary) {
-      errObj.primary = "Please pick the primary key"
+    if (!isMany && !fromForeign) {
+      errObj.fromForeign = foreignKeyNotSet
     }
+    if (!fromColumn) {
+      errObj.fromColumn = colNotSet
+    }
+    if (!toColumn) {
+      errObj.toColumn = colNotSet
+    }
+    if (!isMany && !fromPrimary) {
+      errObj.fromPrimary = "Please pick the primary key"
+    }
+
     // currently don't support relationships back onto the table itself, needs to relate out
     const tableError = "From/to/through tables must be different"
-    if (fromTable && (fromTable === toTable || fromTable === through)) {
-      errObj.from = tableError
+    if (fromTable && (fromTable === toTable || fromTable === throughTable)) {
+      errObj.fromTable = tableError
     }
-    if (toTable && (toTable === fromTable || toTable === through)) {
-      errObj.to = tableError
+    if (toTable && (toTable === fromTable || toTable === throughTable)) {
+      errObj.toTable = tableError
     }
-    if (through && (through === fromTable || through === toTable)) {
-      errObj.through = tableError
+    if (
+      throughTable &&
+      (throughTable === fromTable || throughTable === toTable)
+    ) {
+      errObj.throughTable = tableError
     }
     const colError = "Column name cannot be an existing column"
-    if (inSchema(fromTable, fromRelate.name, originalFromName)) {
-      errObj.fromCol = colError
+    if (isColumnNameBeingUsed(toTable, fromColumn, originalFromColumnName)) {
+      errObj.fromColumn = colError
     }
-    if (inSchema(toTable, toRelate.name, originalToName)) {
-      errObj.toCol = colError
+    if (isColumnNameBeingUsed(fromTable, toColumn, originalToColumnName)) {
+      errObj.toColumn = colError
     }
 
     let fromType, toType
-    if (fromPrimary && fromRelate.fieldName) {
+    if (fromPrimary && fromForeign) {
       fromType = fromTable?.schema[fromPrimary]?.type
-      toType = toTable?.schema[fromRelate.fieldName]?.type
+      toType = toTable?.schema[fromForeign]?.type
     }
     if (fromType && toType && fromType !== toType) {
-      errObj.foreign =
+      errObj.fromForeign =
         "Column type of the foreign key must match the primary key"
     }
+
     errors = errObj
+    return getErrorCount(errors) === 0
   }
 
-  let fromPrimary
-  $: {
-    if (!fromPrimary && fromTable) {
-      fromPrimary = fromTable.primary[0]
-    }
-  }
-  $: isManyToMany =
-    fromRelationship?.relationshipType === RelationshipTypes.MANY_TO_MANY
-  $: isManyToOne =
-    fromRelationship?.relationshipType === RelationshipTypes.MANY_TO_ONE
-  $: tableOptions = plusTables.map(table => ({
-    label: table.name,
-    value: table._id,
-  }))
-  $: fromTable = plusTables.find(table => table._id === toRelationship?.tableId)
-  $: toTable = plusTables.find(table => table._id === fromRelationship?.tableId)
-  $: through = plusTables.find(table => table._id === fromRelationship?.through)
-  $: checkForErrors(fromRelationship, toRelationship)
-  $: valid =
-    Object.keys(errors).length === 0 && Object.keys($touched).length !== 0
-  $: linkTable = through || toTable
-  $: relationshipTypes = [
-    {
-      label: "Many",
-      value: RelationshipTypes.MANY_TO_MANY,
-    },
-    {
-      label: "One",
-      value: RelationshipTypes.MANY_TO_ONE,
-    },
-  ]
-  $: updateRelationshipType(fromRelationship?.relationshipType)
-  $: tableChanged(fromTable, toTable)
-
-  function updateRelationshipType(fromType) {
-    if (fromType === RelationshipTypes.MANY_TO_MANY) {
-      toRelationship.relationshipType = RelationshipTypes.MANY_TO_MANY
-    } else {
-      toRelationship.relationshipType = RelationshipTypes.MANY_TO_ONE
+  function isColumnNameBeingUsed(table, columnName, originalName) {
+    if (!table || !columnName || columnName === originalName) {
+      return false
     }
+    const keys = Object.keys(table.schema).map(key => key.toLowerCase())
+    return keys.indexOf(columnName.toLowerCase()) !== -1
   }
 
   function buildRelationships() {
-    // if any to many only need to check from
-    const manyToMany =
-      fromRelationship.relationshipType === RelationshipTypes.MANY_TO_MANY
-    // main is simply used to know this is the side the user configured it from
     const id = Helpers.uuid()
-    if (!manyToMany) {
-      delete fromRelationship.through
-      delete toRelationship.through
-    }
+    //Map temporary variables
     let relateFrom = {
       ...fromRelationship,
+      tableId: toId,
+      name: toColumn,
+      relationshipType,
+      fieldName: fromForeign,
+      through: throughId,
+      throughFrom: throughFromKey,
+      throughTo: throughToKey,
       type: "link",
       main: true,
       _id: id,
     }
-    let relateTo = {
+    let relateTo = (toRelationship = {
       ...toRelationship,
+      tableId: fromId,
+      name: fromColumn,
+      through: throughId,
       type: "link",
       _id: id,
+    })
+
+    // if any to many only need to check from
+    const manyToMany =
+      relateFrom.relationshipType === RelationshipTypes.MANY_TO_MANY
+
+    if (!manyToMany) {
+      delete relateFrom.through
+      delete relateTo.through
     }
 
     // [0] is because we don't support composite keys for relationships right now
     if (manyToMany) {
       relateFrom = {
         ...relateFrom,
-        through: through._id,
+        through: throughTable._id,
         fieldName: toTable.primary[0],
       }
       relateTo = {
         ...relateTo,
-        through: through._id,
+        through: throughTable._id,
         fieldName: fromTable.primary[0],
         throughFrom: relateFrom.throughTo,
         throughTo: relateFrom.throughFrom,
@@ -226,9 +271,27 @@
     toRelationship = relateTo
   }
 
-  // save the relationship on to the datasource
+  function removeExistingRelationship() {
+    if (originalFromTable && originalFromColumnName) {
+      delete datasource.entities[originalFromTable.name].schema[
+        originalToColumnName
+      ]
+    }
+    if (originalToTable && originalToColumnName) {
+      delete datasource.entities[originalToTable.name].schema[
+        originalFromColumnName
+      ]
+    }
+  }
+
   async function saveRelationship() {
+    hasClickedSave = true
+    if (!validate()) {
+      return false
+    }
     buildRelationships()
+    removeExistingRelationship()
+
     // source of relationship
     datasource.entities[fromTable.name].schema[fromRelationship.name] =
       fromRelationship
@@ -236,43 +299,14 @@
     datasource.entities[toTable.name].schema[toRelationship.name] =
       toRelationship
 
-    // If relationship has been renamed
-    if (originalFromName !== fromRelationship.name) {
-      delete datasource.entities[fromTable.name].schema[originalFromName]
-    }
-    if (originalToName !== toRelationship.name) {
-      delete datasource.entities[toTable.name].schema[originalToName]
-    }
-
-    // store the original names so it won't cause an error
-    originalToName = toRelationship.name
-    originalFromName = fromRelationship.name
     await save()
   }
-
   async function deleteRelationship() {
-    delete datasource.entities[fromTable.name].schema[fromRelationship.name]
-    delete datasource.entities[toTable.name].schema[toRelationship.name]
+    removeExistingRelationship()
     await save()
     await tables.fetch()
     close()
   }
-
-  function tableChanged(fromTbl, toTbl) {
-    if (
-      (currentTables?.from?._id === fromTbl?._id &&
-        currentTables?.to?._id === toTbl?._id) ||
-      originalFromName ||
-      originalToName
-    ) {
-      return
-    }
-    fromRelationship.name = toTbl?.name || ""
-    errors.fromCol = ""
-    toRelationship.name = fromTbl?.name || ""
-    errors.toCol = ""
-    currentTables = { from: fromTbl, to: toTbl }
-  }
 </script>
 
 <ModalContent
@@ -284,7 +318,9 @@
   <Select
     label="Relationship type"
     options={relationshipTypes}
-    bind:value={fromRelationship.relationshipType}
+    bind:value={relationshipType}
+    bind:error={errors.relationshipType}
+    on:change={() => (errors.relationshipType = null)}
   />
   <div class="headings">
     <Detail>Tables</Detail>
@@ -292,60 +328,74 @@
   <Select
     label="Select from table"
     options={tableOptions}
-    disabled={!!selectedFromTable}
-    on:change={() => ($touched.from = true)}
-    bind:error={errors.from}
-    bind:value={toRelationship.tableId}
+    bind:value={fromId}
+    bind:error={errors.fromTable}
+    on:change={e => {
+      fromColumn = tableOptions.find(opt => opt.value === e.detail)?.label || ""
+      errors.fromTable = null
+      errors.fromColumn = null
+    }}
   />
   {#if isManyToOne && fromTable}
     <Select
-      label={`Primary Key (${fromTable?.name})`}
-      options={Object.keys(fromTable?.schema)}
-      on:change={() => ($touched.primary = true)}
-      bind:error={errors.primary}
+      label={`Primary Key (${fromTable.name})`}
+      options={Object.keys(fromTable.schema)}
       bind:value={fromPrimary}
+      bind:error={errors.fromPrimary}
+      on:change={() => (errors.fromPrimary = null)}
     />
   {/if}
   <Select
     label={"Select to table"}
     options={tableOptions}
-    on:change={() => ($touched.to = true)}
-    bind:error={errors.to}
-    bind:value={fromRelationship.tableId}
+    bind:value={toId}
+    bind:error={errors.toTable}
+    on:change={e => {
+      toColumn = tableOptions.find(opt => opt.value === e.detail)?.label || ""
+      errors.toTable = null
+      errors.toColumn = null
+    }}
   />
   {#if isManyToMany}
     <Select
       label={"Through"}
       options={tableOptions}
-      on:change={() => ($touched.through = true)}
-      bind:error={errors.through}
-      bind:value={fromRelationship.through}
+      bind:value={throughId}
+      bind:error={errors.throughTable}
     />
-    {#if fromTable && toTable && through}
+    {#if fromTable && toTable && throughTable}
       <Select
         label={`Foreign Key (${fromTable?.name})`}
-        options={Object.keys(through?.schema)}
-        on:change={() => ($touched.fromForeign = true)}
-        bind:error={errors.fromForeign}
-        bind:value={fromRelationship.throughTo}
+        options={Object.keys(throughTable?.schema)}
+        bind:value={throughToKey}
+        bind:error={errors.throughToKey}
+        on:change={e => {
+          if (throughFromKey === e.detail) {
+            throughFromKey = null
+          }
+          errors.throughToKey = null
+        }}
       />
       <Select
         label={`Foreign Key (${toTable?.name})`}
-        options={Object.keys(through?.schema)}
-        on:change={() => ($touched.toForeign = true)}
-        bind:error={errors.toForeign}
-        bind:value={fromRelationship.throughFrom}
+        options={Object.keys(throughTable?.schema)}
+        bind:value={throughFromKey}
+        bind:error={errors.throughFromKey}
+        on:change={e => {
+          if (throughToKey === e.detail) {
+            throughToKey = null
+          }
+          errors.throughFromKey = null
+        }}
       />
     {/if}
   {:else if isManyToOne && toTable}
     <Select
       label={`Foreign Key (${toTable?.name})`}
-      options={Object.keys(toTable?.schema).filter(
-        field => toTable?.primary.indexOf(field) === -1
-      )}
-      on:change={() => ($touched.foreign = true)}
-      bind:error={errors.foreign}
-      bind:value={fromRelationship.fieldName}
+      options={Object.keys(toTable?.schema)}
+      bind:value={fromForeign}
+      bind:error={errors.fromForeign}
+      on:change={() => (errors.fromForeign = null)}
     />
   {/if}
   <div class="headings">
@@ -356,19 +406,21 @@
     provide a name for these columns.
   </Body>
   <Input
-    on:blur={() => ($touched.fromCol = true)}
-    bind:error={errors.fromCol}
     label="From table column"
-    bind:value={fromRelationship.name}
+    bind:value={fromColumn}
+    bind:error={errors.fromColumn}
+    on:change={e => {
+      errors.fromColumn = e.detail?.length > 0 ? null : colNotSet
+    }}
   />
   <Input
-    on:blur={() => ($touched.toCol = true)}
-    bind:error={errors.toCol}
     label="To table column"
-    bind:value={toRelationship.name}
+    bind:value={toColumn}
+    bind:error={errors.toColumn}
+    on:change={e => (errors.toColumn = e.detail?.length > 0 ? null : colNotSet)}
   />
   <div slot="footer">
-    {#if originalFromName != null}
+    {#if originalFromColumnName != null}
       <Button warning text on:click={deleteRelationship}>Delete</Button>
     {/if}
   </div>

packages/builder/src/components/backend/TableNavigator/ExistingTableDataImport.svelte

@@ -0,0 +1,251 @@
+<script>
+  import { Select } from "@budibase/bbui"
+  import { FIELDS } from "constants/backend"
+  import { API } from "api"
+  import { parseFile } from "./utils"
+
+  let error = null
+  let fileName = null
+  let fileType = null
+
+  let loading = false
+  let validation = {}
+  let validateHash = ""
+  let schema = null
+  let invalidColumns = []
+
+  export let tableId = null
+  export let rows = []
+  export let allValid = false
+
+  const typeOptions = [
+    {
+      label: "Text",
+      value: FIELDS.STRING.type,
+    },
+    {
+      label: "Number",
+      value: FIELDS.NUMBER.type,
+    },
+    {
+      label: "Date",
+      value: FIELDS.DATETIME.type,
+    },
+    {
+      label: "Options",
+      value: FIELDS.OPTIONS.type,
+    },
+    {
+      label: "Multi-select",
+      value: FIELDS.ARRAY.type,
+    },
+    {
+      label: "Barcode/QR",
+      value: FIELDS.BARCODEQR.type,
+    },
+    {
+      label: "Long Form Text",
+      value: FIELDS.LONGFORM.type,
+    },
+  ]
+
+  $: {
+    schema = fetchSchema(tableId)
+  }
+
+  async function fetchSchema(tableId) {
+    try {
+      const definition = await API.fetchTableDefinition(tableId)
+      schema = definition.schema
+    } catch (e) {
+      error = e
+    }
+  }
+
+  async function handleFile(e) {
+    loading = true
+    error = null
+    validation = {}
+
+    try {
+      const response = await parseFile(e)
+      rows = response.rows
+      fileName = response.fileName
+      fileType = response.fileType
+    } catch (e) {
+      loading = false
+      error = e
+    }
+  }
+
+  async function validate(rows) {
+    loading = true
+    error = null
+    validation = {}
+    allValid = false
+
+    try {
+      if (rows.length > 0) {
+        const response = await API.validateExistingTableImport({
+          rows,
+          tableId,
+        })
+
+        validation = response.schemaValidation
+        invalidColumns = response.invalidColumns
+        allValid = response.allValid
+      }
+    } catch (e) {
+      error = e.message
+    }
+
+    loading = false
+  }
+
+  $: {
+    // binding in consumer is causing double renders here
+    const newValidateHash = JSON.stringify(rows)
+
+    if (newValidateHash !== validateHash) {
+      validate(rows)
+    }
+
+    validateHash = newValidateHash
+  }
+</script>
+
+<div class="dropzone">
+  <input
+    disabled={!schema || loading}
+    id="file-upload"
+    accept="text/csv,application/json"
+    type="file"
+    on:change={handleFile}
+  />
+  <label for="file-upload" class:uploaded={rows.length > 0}>
+    {#if loading}
+      loading...
+    {:else if error}
+      error: {error}
+    {:else if fileName}
+      {fileName}
+    {:else}
+      Upload
+    {/if}
+  </label>
+</div>
+{#if fileName && Object.keys(validation).length === 0}
+  <p>No valid fields, try another file</p>
+{:else if rows.length > 0 && !error}
+  <div class="schema-fields">
+    {#each Object.keys(validation) as name}
+      <div class="field">
+        <span>{name}</span>
+        <Select
+          value={schema[name]?.type}
+          options={typeOptions}
+          placeholder={null}
+          getOptionLabel={option => option.label}
+          getOptionValue={option => option.value}
+          disabled
+        />
+        <span
+          class={loading || validation[name]
+            ? "fieldStatusSuccess"
+            : "fieldStatusFailure"}
+        >
+          {validation[name] ? "Success" : "Failure"}
+        </span>
+      </div>
+    {/each}
+  </div>
+  {#if invalidColumns.length > 0}
+    <p class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">
+      The following columns are present in the data you wish to import, but do
+      not match the schema of this table and will be ignored.
+    </p>
+    <ul class="ignoredList">
+      {#each invalidColumns as column}
+        <li>{column}</li>
+      {/each}
+    </ul>
+  {/if}
+{/if}
+
+<style>
+  .dropzone {
+    text-align: center;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    border-radius: 10px;
+    transition: all 0.3s;
+  }
+
+  input {
+    display: none;
+  }
+
+  label {
+    font-family: var(--font-sans);
+    cursor: pointer;
+    font-weight: 600;
+    box-sizing: border-box;
+    overflow: hidden;
+    border-radius: var(--border-radius-s);
+    color: var(--ink);
+    padding: var(--spacing-m) var(--spacing-l);
+    transition: all 0.2s ease 0s;
+    display: inline-flex;
+    text-rendering: optimizeLegibility;
+    min-width: auto;
+    outline: none;
+    font-feature-settings: "case" 1, "rlig" 1, "calt" 0;
+    -webkit-box-align: center;
+    user-select: none;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    background-color: var(--grey-2);
+    font-size: var(--font-size-xs);
+    line-height: normal;
+    border: var(--border-transparent);
+  }
+
+  .uploaded {
+    color: var(--blue);
+  }
+
+  .schema-fields {
+    margin-top: var(--spacing-xl);
+  }
+
+  .field {
+    display: grid;
+    grid-template-columns: 2fr 2fr 1fr auto;
+    margin-top: var(--spacing-m);
+    align-items: center;
+    grid-gap: var(--spacing-m);
+    font-size: var(--spectrum-global-dimension-font-size-75);
+  }
+
+  .fieldStatusSuccess {
+    color: var(--green);
+    justify-self: center;
+    font-weight: 600;
+  }
+
+  .fieldStatusFailure {
+    color: var(--red);
+    justify-self: center;
+    font-weight: 600;
+  }
+
+  .ignoredList {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: var(--spectrum-global-dimension-font-size-75);
+  }
+</style>

packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte

@@ -1,107 +1,21 @@
 <script>
-  import { Select, InlineAlert, notifications } from "@budibase/bbui"
+  import { Select } from "@budibase/bbui"
   import { FIELDS } from "constants/backend"
   import { API } from "api"
+  import { parseFile } from "./utils"
 
-  const BYTES_IN_MB = 1000000
-  const FILE_SIZE_LIMIT = BYTES_IN_MB * 5
+  let error = null
+  let fileName = null
+  let fileType = null
 
-  export let files = []
-  export let dataImport = {
-    valid: true,
-    schema: {},
-  }
-  export let existingTableId
+  let loading = false
+  let validation = {}
+  let validateHash = ""
 
-  let csvString = undefined
-  let primaryDisplay = undefined
-  let schema = {}
-  let fields = []
-  let hasValidated = false
-
-  $: valid =
-    !schema ||
-    (fields.every(column => schema[column].success) &&
-      (!hasValidated || Object.keys(schema).length > 0))
-  $: dataImport = {
-    valid,
-    schema: buildTableSchema(schema),
-    csvString,
-    primaryDisplay,
-  }
-  $: noFieldsError = existingTableId
-    ? "No columns in CSV match existing table schema"
-    : "Could not find any columns to import"
-
-  function buildTableSchema(schema) {
-    const tableSchema = {}
-    for (let key in schema) {
-      const type = schema[key].type
-
-      if (type === "omit") continue
-
-      tableSchema[key] = {
-        name: key,
-        type,
-        constraints: FIELDS[type.toUpperCase()].constraints,
-      }
-    }
-    return tableSchema
-  }
-
-  async function validateCSV() {
-    try {
-      const parseResult = await API.validateTableCSV({
-        csvString,
-        schema: schema || {},
-        tableId: existingTableId,
-      })
-      schema = parseResult?.schema
-      fields = Object.keys(schema || {}).filter(
-        key => schema[key].type !== "omit"
-      )
-
-      // Check primary display is valid
-      if (!primaryDisplay || fields.indexOf(primaryDisplay) === -1) {
-        primaryDisplay = fields[0]
-      }
-
-      hasValidated = true
-    } catch (error) {
-      notifications.error("CSV Invalid, please try another CSV file")
-    }
-  }
-
-  async function handleFile(evt) {
-    const fileArray = Array.from(evt.target.files)
-    if (fileArray.some(file => file.size >= FILE_SIZE_LIMIT)) {
-      notifications.error(
-        `Files cannot exceed ${
-          FILE_SIZE_LIMIT / BYTES_IN_MB
-        }MB. Please try again with smaller files.`
-      )
-      return
-    }
-
-    // Read CSV as plain text to upload alongside schema
-    let reader = new FileReader()
-    reader.addEventListener("load", function (e) {
-      csvString = e.target.result
-      files = fileArray
-      validateCSV()
-    })
-    reader.readAsText(fileArray[0])
-  }
-
-  async function omitColumn(columnName) {
-    schema[columnName].type = "omit"
-    await validateCSV()
-  }
-
-  const handleTypeChange = column => evt => {
-    schema[column].type = evt.detail
-    validateCSV()
-  }
+  export let rows = []
+  export let schema = {}
+  export let allValid = true
+  export let displayColumn = null
 
   const typeOptions = [
     {
@@ -133,54 +47,114 @@
       value: FIELDS.LONGFORM.type,
     },
   ]
+
+  async function handleFile(e) {
+    loading = true
+    error = null
+    validation = {}
+
+    try {
+      const response = await parseFile(e)
+      rows = response.rows
+      schema = response.schema
+      fileName = response.fileName
+      fileType = response.fileType
+    } catch (e) {
+      loading = false
+      error = e
+    }
+  }
+
+  async function validate(rows, schema) {
+    loading = true
+    error = null
+    validation = {}
+    allValid = false
+
+    try {
+      if (rows.length > 0) {
+        const response = await API.validateNewTableImport({ rows, schema })
+        validation = response.schemaValidation
+        allValid = response.allValid
+      }
+    } catch (e) {
+      error = e.message
+    }
+
+    loading = false
+  }
+
+  $: {
+    // binding in consumer is causing double renders here
+    const newValidateHash = JSON.stringify(rows) + JSON.stringify(schema)
+
+    if (newValidateHash !== validateHash) {
+      validate(rows, schema)
+    }
+
+    validateHash = newValidateHash
+  }
 </script>
 
 <div class="dropzone">
-  <input id="file-upload" accept=".csv" type="file" on:change={handleFile} />
-  <label for="file-upload" class:uploaded={files[0]}>
-    {#if files[0]}{files[0].name}{:else}Upload{/if}
+  <input
+    disabled={loading}
+    id="file-upload"
+    accept="text/csv,application/json"
+    type="file"
+    on:change={handleFile}
+  />
+  <label for="file-upload" class:uploaded={rows.length > 0}>
+    {#if loading}
+      loading...
+    {:else if error}
+      error: {error}
+    {:else if fileName}
+      {fileName}
+    {:else}
+      Upload
+    {/if}
   </label>
 </div>
-{#if fields.length}
+{#if rows.length > 0 && !error}
   <div class="schema-fields">
-    {#each fields as columnName}
+    {#each Object.values(schema) as column}
       <div class="field">
-        <span>{columnName}</span>
+        <span>{column.name}</span>
         <Select
-          bind:value={schema[columnName].type}
-          on:change={handleTypeChange(columnName)}
+          bind:value={column.type}
+          on:change={e => (column.type = e.detail)}
           options={typeOptions}
           placeholder={null}
           getOptionLabel={option => option.label}
           getOptionValue={option => option.value}
-          disabled={!!existingTableId}
+          disabled={loading}
         />
-        <span class="field-status" class:error={!schema[columnName].success}>
-          {schema[columnName].success ? "Success" : "Failure"}
+        <span
+          class={loading || validation[column.name]
+            ? "fieldStatusSuccess"
+            : "fieldStatusFailure"}
+        >
+          {validation[column.name] ? "Success" : "Failure"}
         </span>
         <i
-          class="omit-button ri-close-circle-fill"
-          on:click={() => omitColumn(columnName)}
+          class={`omit-button ri-close-circle-fill ${
+            loading ? "omit-button-disabled" : ""
+          }`}
+          on:click={() => {
+            delete schema[column.name]
+            schema = schema
+          }}
         />
       </div>
     {/each}
   </div>
-  {#if !existingTableId}
-    <div class="display-column">
-      <Select
-        label="Display Column"
-        bind:value={primaryDisplay}
-        options={fields}
-        sort
-      />
-    </div>
-  {/if}
-{:else if hasValidated}
-  <div>
-    <InlineAlert
-      header="Invalid CSV"
-      bind:message={noFieldsError}
-      type="error"
+  <div class="display-column">
+    <Select
+      label="Display Column"
+      bind:value={displayColumn}
+      options={Object.keys(schema)}
+      sort
     />
   </div>
 {/if}
@@ -195,30 +169,11 @@
     transition: all 0.3s;
   }
 
-  .field-status {
-    color: var(--green);
-    justify-self: center;
-    font-weight: 600;
-  }
-
-  .error {
-    color: var(--red);
-  }
-
-  .uploaded {
-    color: var(--blue);
-  }
-
-  input[type="file"] {
+  input {
     display: none;
   }
 
-  .schema-fields {
-    margin-top: var(--spacing-xl);
-  }
-
   label {
-    font-family: var(--font-sans);
     cursor: pointer;
     font-weight: 600;
     box-sizing: border-box;
@@ -244,11 +199,12 @@
     border: var(--border-transparent);
   }
 
-  .omit-button {
-    font-size: 1.2em;
-    color: var(--grey-7);
-    cursor: pointer;
-    justify-self: flex-end;
+  .uploaded {
+    color: var(--blue);
+  }
+
+  .schema-fields {
+    margin-top: var(--spacing-xl);
   }
 
   .field {
@@ -260,6 +216,30 @@
     font-size: var(--spectrum-global-dimension-font-size-75);
   }
 
+  .fieldStatusSuccess {
+    color: var(--green);
+    justify-self: center;
+    font-weight: 600;
+  }
+
+  .fieldStatusFailure {
+    color: var(--red);
+    justify-self: center;
+    font-weight: 600;
+  }
+
+  .omit-button {
+    font-size: 1.2em;
+    color: var(--grey-7);
+    cursor: pointer;
+    justify-self: flex-end;
+  }
+
+  .omit-button-disabled {
+    pointer-events: none;
+    opacity: 70%;
+  }
+
   .display-column {
     margin-top: var(--spacing-xl);
   }

packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte

@@ -29,18 +29,27 @@
     : BUDIBASE_INTERNAL_DB_ID
 
   export let name
-  let dataImport
   let error = ""
   let autoColumns = getAutoColumnInformation()
+  let schema = {}
+  let rows = []
+  let allValid = true
+  let displayColumn = null
 
-  function addAutoColumns(tableName, schema) {
-    for (let [subtype, col] of Object.entries(autoColumns)) {
-      if (!col.enabled) {
-        continue
+  function getAutoColumns() {
+    const selectedAutoColumns = {}
+
+    Object.entries(autoColumns).forEach(([subtype, column]) => {
+      if (column.enabled) {
+        selectedAutoColumns[column.name] = buildAutoColumn(
+          name,
+          column.name,
+          subtype
+        )
       }
-      schema[col.name] = buildAutoColumn(tableName, col.name, subtype)
-    }
-    return schema
+    })
+
+    return selectedAutoColumns
   }
 
   function checkValid(evt) {
@@ -55,15 +64,15 @@
   async function saveTable() {
     let newTable = {
       name,
-      schema: addAutoColumns(name, dataImport.schema || {}),
-      dataImport,
+      schema: { ...schema, ...getAutoColumns() },
+      rows,
       type: "internal",
       sourceId: targetDatasourceId,
     }
 
     // Only set primary display if defined
-    if (dataImport.primaryDisplay && dataImport.primaryDisplay.length) {
-      newTable.primaryDisplay = dataImport.primaryDisplay
+    if (displayColumn && displayColumn.length) {
+      newTable.primaryDisplay = displayColumn
     }
 
     // Create table
@@ -90,7 +99,7 @@
   title="Create Table"
   confirmText="Create"
   onConfirm={saveTable}
-  disabled={error || !name || (dataImport && !dataImport.valid)}
+  disabled={error || !name || (rows.length && !allValid)}
 >
   <Input
     data-cy="table-name-input"
@@ -117,8 +126,10 @@
   </div>
   <div>
     <Layout gap="XS" noPadding>
-      <Label grey extraSmall>Create Table from CSV (Optional)</Label>
-      <TableDataImport bind:dataImport />
+      <Label grey extraSmall
+        >Create a Table from a CSV or JSON file (Optional)</Label
+      >
+      <TableDataImport bind:rows bind:schema bind:allValid bind:displayColumn />
     </Layout>
   </div>
 </ModalContent>

packages/builder/src/components/backend/TableNavigator/utils.js

@@ -0,0 +1,71 @@
+import { API } from "api"
+import { FIELDS } from "constants/backend"
+
+const BYTES_IN_MB = 1000000
+const FILE_SIZE_LIMIT = BYTES_IN_MB * 5
+
+const getDefaultSchema = rows => {
+  const newSchema = {}
+
+  rows.forEach(row => {
+    Object.keys(row).forEach(column => {
+      newSchema[column] = {
+        name: column,
+        type: "string",
+        constraints: FIELDS["STRING"].constraints,
+      }
+    })
+  })
+
+  return newSchema
+}
+
+export const parseFile = e => {
+  return new Promise((resolve, reject) => {
+    const file = Array.from(e.target.files)[0]
+
+    if (file.size >= FILE_SIZE_LIMIT) {
+      reject("file too large")
+      return
+    }
+
+    let reader = new FileReader()
+
+    const resolveRows = (rows, schema = null) => {
+      resolve({
+        rows,
+        schema: schema ?? getDefaultSchema(rows),
+        fileName: file.name,
+        fileType: file.type,
+      })
+    }
+
+    reader.addEventListener("load", function (e) {
+      const fileData = e.target.result
+
+      if (file.type === "text/csv") {
+        API.csvToJson(fileData)
+          .then(rows => {
+            resolveRows(rows)
+          })
+          .catch(() => {
+            reject("can't convert csv to json")
+          })
+      } else if (file.type === "application/json") {
+        const parsedFileData = JSON.parse(fileData)
+
+        if (Array.isArray(parsedFileData)) {
+          resolveRows(parsedFileData)
+        } else if (typeof parsedFileData === "object") {
+          resolveRows(parsedFileData.rows, parsedFileData.schema)
+        } else {
+          reject("invalid json format")
+        }
+      } else {
+        reject("invalid file type")
+      }
+    })
+
+    reader.readAsText(file)
+  })
+}

packages/builder/src/components/common/AppLockModal.svelte

@@ -8,6 +8,7 @@
     ProgressCircle,
     Layout,
     Body,
+    Icon,
   } from "@budibase/bbui"
   import { auth, apps } from "stores/portal"
   import { processStringSync } from "@budibase/string-templates"
@@ -56,85 +57,77 @@
   }
 </script>
 
-<div class="lock-status">
-  {#if lockedBy}
-    <Button
-      quiet
-      secondary
-      icon="LockClosed"
+{#if lockedBy}
+  <div class="lock-status">
+    <Icon
+      name="LockClosed"
+      hoverable
       size={buttonSize}
-      on:click={() => {
+      on:click={e => {
+        e.stopPropagation()
         appLockModal.show()
       }}
-    >
-      <span class="lock-status-text">
-        {lockedByHeading}
-      </span>
-    </Button>
-  {/if}
-</div>
-
-{#key app}
-  <div>
-    <Modal bind:this={appLockModal}>
-      <ModalContent
-        title={lockedByHeading}
-        dataCy={"app-lock-modal"}
-        showConfirmButton={false}
-        showCancelButton={false}
-      >
-        <Layout noPadding>
-          <Body size="S">
-            Apps are locked to prevent work from being lost from overlapping
-            changes between your team.
-          </Body>
-          {#if lockedByYou && getExpiryDuration(app) > 0}
-            <span class="lock-expiry-body">
-              {processStringSync(
-                "This lock will expire in {{ duration time 'millisecond' }} from now. This lock will expire in This lock will expire in ",
-                {
-                  time: getExpiryDuration(app),
-                }
-              )}
-            </span>
-          {/if}
-          <div class="lock-modal-actions">
-            <ButtonGroup>
-              <Button
-                secondary
-                quiet={lockedBy && lockedByYou}
-                disabled={processing}
-                on:click={() => {
-                  appLockModal.hide()
-                }}
-              >
-                <span class="cancel"
-                  >{lockedBy && !lockedByYou ? "Done" : "Cancel"}</span
-                >
-              </Button>
-              {#if lockedByYou}
-                <Button
-                  secondary
-                  disabled={processing}
-                  on:click={() => {
-                    releaseLock()
-                    appLockModal.hide()
-                  }}
-                >
-                  {#if processing}
-                    <ProgressCircle overBackground={true} size="S" />
-                  {:else}
-                    <span class="unlock">Release Lock</span>
-                  {/if}
-                </Button>
-              {/if}
-            </ButtonGroup>
-          </div>
-        </Layout>
-      </ModalContent>
-    </Modal>
+    />
   </div>
-{/key}
+{/if}
+
+<Modal bind:this={appLockModal}>
+  <ModalContent
+    title={lockedByHeading}
+    dataCy={"app-lock-modal"}
+    showConfirmButton={false}
+    showCancelButton={false}
+  >
+    <Layout noPadding>
+      <Body size="S">
+        Apps are locked to prevent work being lost from overlapping changes
+        between your team.
+      </Body>
+      {#if lockedByYou && getExpiryDuration(app) > 0}
+        <span class="lock-expiry-body">
+          {processStringSync(
+            "This lock will expire in {{ duration time 'millisecond' }} from now.",
+            {
+              time: getExpiryDuration(app),
+            }
+          )}
+        </span>
+      {/if}
+      <div class="lock-modal-actions">
+        <ButtonGroup>
+          <Button
+            secondary
+            quiet={lockedBy && lockedByYou}
+            disabled={processing}
+            on:click={() => {
+              appLockModal.hide()
+            }}
+          >
+            <span class="cancel"
+              >{lockedBy && !lockedByYou ? "Done" : "Cancel"}</span
+            >
+          </Button>
+          {#if lockedByYou}
+            <Button
+              cta
+              disabled={processing}
+              on:click={() => {
+                releaseLock()
+                appLockModal.hide()
+              }}
+            >
+              {#if processing}
+                <ProgressCircle overBackground={true} size="S" />
+              {:else}
+                <span class="unlock">Release Lock</span>
+              {/if}
+            </Button>
+          {/if}
+        </ButtonGroup>
+      </div>
+    </Layout>
+  </ModalContent>
+</Modal>
 
 <style>
   .lock-modal-actions {
@@ -148,8 +141,4 @@
     gap: var(--spacing-s);
     max-width: 175px;
   }
-  .lock-status-text {
-    font-weight: 400;
-    color: var(--spectrum-global-color-gray-800);
-  }
 </style>

packages/builder/src/components/common/CodeMirrorEditor.svelte

@@ -135,7 +135,7 @@
   div :global(.CodeMirror) {
     height: var(--code-mirror-height);
     min-height: var(--code-mirror-height);
-    font-family: monospace;
+    font-family: var(--font-mono);
     line-height: 1.3;
     border: var(--spectrum-alias-border-size-thin) solid;
     border-color: var(--spectrum-alias-border-color);

packages/builder/src/components/common/ConfigChecklist.svelte

@@ -1,64 +0,0 @@
-<script>
-  import {
-    ActionMenu,
-    Checkbox,
-    MenuItem,
-    Heading,
-    ProgressCircle,
-  } from "@budibase/bbui"
-  import { admin } from "stores/portal"
-  import { goto } from "@roxi/routify"
-  import { onMount } from "svelte"
-
-  let width = window.innerWidth
-  $: side = width < 500 ? "right" : "left"
-
-  const resizeObserver = new ResizeObserver(entries => {
-    if (entries?.[0]) {
-      width = entries[0].contentRect?.width
-    }
-  })
-
-  onMount(() => {
-    const doc = document.documentElement
-    resizeObserver.observe(doc)
-
-    return () => {
-      resizeObserver.unobserve(doc)
-    }
-  })
-</script>
-
-<ActionMenu align={side}>
-  <div slot="control" class="icon">
-    <ProgressCircle size="S" value={$admin.onboardingProgress} />
-  </div>
-  <MenuItem disabled>
-    <header class="item">
-      <Heading size="XXS">Get Started Checklist</Heading>
-      <ProgressCircle size="S" value={$admin.onboardingProgress} />
-    </header>
-  </MenuItem>
-  {#each Object.keys($admin.checklist) as checklistItem, idx}
-    <MenuItem>
-      <div
-        class="item"
-        on:click={() => $goto($admin.checklist[checklistItem].link)}
-      >
-        <span>{idx + 1}. {$admin.checklist[checklistItem].label}</span>
-        <Checkbox value={$admin.checklist[checklistItem].checked} />
-      </div>
-    </MenuItem>
-  {/each}
-</ActionMenu>
-
-<style>
-  .item {
-    display: grid;
-    align-items: center;
-    grid-template-columns: 175px 20px;
-  }
-  .icon {
-    cursor: pointer;
-  }
-</style>

packages/builder/src/components/common/EditableIcon.svelte

@@ -1,47 +1,46 @@
 <script>
-  import { Icon } from "@budibase/bbui"
+  import { Icon, Modal } from "@budibase/bbui"
   import ChooseIconModal from "components/start/ChooseIconModal.svelte"
 
   export let name
-  export let size
+  export let size = "M"
   export let app
+  export let color
+  export let autoSave = false
 
-  let iconModal
+  let modal
 </script>
 
 <div class="editable-icon">
-  <div
-    class="edit-hover"
-    on:click={() => {
-      iconModal.show()
-    }}
-  >
-    <Icon name={"Edit"} size={"L"} />
+  <div class="hover" on:click={modal.show}>
+    <Icon name="Edit" {size} color="var(--spectrum-global-color-gray-600)" />
   </div>
-  <div class="app-icon">
-    <Icon {name} {size} />
+  <div class="normal">
+    <Icon {name} {size} {color} />
   </div>
 </div>
-<ChooseIconModal {app} bind:this={iconModal} />
+
+<Modal bind:this={modal}>
+  <ChooseIconModal {name} {color} {app} {autoSave} on:change />
+</Modal>
 
 <style>
-  .editable-icon:hover .app-icon {
-    opacity: 0;
-  }
   .editable-icon {
     position: relative;
+    display: flex;
+    justify-content: flex-start;
   }
-  .editable-icon:hover .edit-hover {
-    opacity: 1;
+  .normal {
+    display: block;
   }
-  .edit-hover {
-    color: var(--spectrum-global-color-gray-600);
+  .hover {
+    display: none;
     cursor: pointer;
-    z-index: 100;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    opacity: 0;
-    /* transition: opacity var(--spectrum-global-animation-duration-100) ease; */
+  }
+  .editable-icon:hover .normal {
+    display: none;
+  }
+  .editable-icon:hover .hover {
+    display: block;
   }
 </style>

packages/builder/src/components/common/HelpIcon.svelte

@@ -31,6 +31,7 @@
     bottom: var(--spacing-m);
     right: var(--spacing-m);
     border-radius: 55%;
+    z-index: 99999;
   }
   .hidden {
     display: none;

packages/builder/src/components/common/RoleSelect.svelte

@@ -2,6 +2,7 @@
   import { Select } from "@budibase/bbui"
   import { roles } from "stores/backend"
   import { Constants, RoleUtils } from "@budibase/frontend-core"
+  import { createEventDispatcher } from "svelte"
 
   export let value
   export let error
@@ -9,26 +10,62 @@
   export let autoWidth = false
   export let quiet = false
   export let allowPublic = true
+  export let allowRemove = false
 
-  $: options = getOptions($roles, allowPublic)
+  const dispatch = createEventDispatcher()
+  const RemoveID = "remove"
+
+  $: options = getOptions($roles, allowPublic, allowRemove)
 
   const getOptions = (roles, allowPublic) => {
+    if (allowRemove) {
+      roles = [
+        ...roles,
+        {
+          _id: RemoveID,
+          name: "Remove",
+        },
+      ]
+    }
     if (allowPublic) {
       return roles
     }
     return roles.filter(role => role._id !== Constants.Roles.PUBLIC)
   }
+
+  const getColor = role => {
+    if (allowRemove && role._id === RemoveID) {
+      return null
+    }
+    return RoleUtils.getRoleColour(role._id)
+  }
+
+  const getIcon = role => {
+    if (allowRemove && role._id === RemoveID) {
+      return "Close"
+    }
+    return null
+  }
+
+  const onChange = e => {
+    if (allowRemove && e.detail === RemoveID) {
+      dispatch("remove")
+    } else {
+      dispatch("change", e.detail)
+    }
+  }
 </script>
 
 <Select
   {autoWidth}
   {quiet}
   bind:value
-  on:change
+  on:change={onChange}
   {options}
   getOptionLabel={role => role.name}
   getOptionValue={role => role._id}
-  getOptionColour={role => RoleUtils.getRoleColour(role._id)}
+  getOptionColour={getColor}
+  getOptionIcon={getIcon}
   {placeholder}
   {error}
 />

packages/builder/src/components/common/TemplateDisplay.svelte

@@ -1,128 +1,110 @@
 <script>
-  import {
-    Layout,
-    Detail,
-    Heading,
-    Button,
-    Modal,
-    ActionGroup,
-    ActionButton,
-  } from "@budibase/bbui"
+  import { Layout, Detail, Button, Modal } from "@budibase/bbui"
   import TemplateCard from "components/common/TemplateCard.svelte"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import { licensing } from "stores/portal"
+  import { Content, SideNav, SideNavItem } from "components/portal/page"
 
   export let templates
 
-  let selectedTemplateCategory
+  let selectedCategory
   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
+  $: categories = getCategories(templates)
+  $: filteredCategories = getFilteredCategories(categories, selectedCategory)
+
+  const getCategories = templates => {
+    let categories = {}
+    templates?.forEach(template => {
+      if (!categories[template.category]) {
+        categories[template.category] = []
       }
-
-      acc[template.category] = !acc[template.category]
-        ? []
-        : acc[template.category]
-      acc[template.category].push(template)
-
-      return acc
-    }, {})
-    return grouped
+      categories[template.category].push(template)
+    })
+    categories = Object.entries(categories).map(
+      ([category, categoryTemplates]) => {
+        return {
+          name: category,
+          templates: categoryTemplates,
+        }
+      }
+    )
+    categories.sort((a, b) => {
+      return a.name < b.name ? -1 : 1
+    })
+    return categories
   }
 
-  $: filteredTemplates = groupTemplatesByCategory(
-    templates,
-    selectedTemplateCategory
-  )
-
-  $: filteredTemplateCategories = filteredTemplates
-    ? Object.keys(filteredTemplates).sort()
-    : []
-
-  $: templateCategories = templates
-    ? Object.keys(groupTemplatesByCategory(templates)).sort()
-    : []
+  const getFilteredCategories = (categories, selectedCategory) => {
+    if (!selectedCategory) {
+      return categories
+    }
+    return categories.filter(x => x.name === selectedCategory)
+  }
 
   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}
-            >
-              {#if !($licensing?.usageMetrics?.apps >= 100)}
-                <Button
-                  cta
-                  on:click={() => {
-                    template = templateEntry
-                    creationModal.show()
-                  }}
-                >
-                  Use template
-                </Button>
-              {/if}
-              <a
-                href={templateEntry.url}
-                target="_blank"
-                class="overlay-preview-link spectrum-Button spectrum-Button--sizeM spectrum-Button--secondary"
-                on:click|stopPropagation
+<Content>
+  <div slot="side-nav">
+    <SideNav>
+      <SideNavItem
+        on:click={() => (selectedCategory = null)}
+        text="All"
+        active={selectedCategory == null}
+      />
+      {#each categories as category}
+        <SideNavItem
+          on:click={() => (selectedCategory = category.name)}
+          text={category.name}
+          active={selectedCategory === category.name}
+        />
+      {/each}
+    </SideNav>
+  </div>
+  <div class="template-categories">
+    <Layout gap="XL" noPadding>
+      {#each filteredCategories as category}
+        <div class="template-category" data-cy={category.name}>
+          <Detail size="M">{category.name}</Detail>
+          <div class="template-grid">
+            {#each category.templates as templateEntry}
+              <TemplateCard
+                name={templateEntry.name}
+                imageSrc={templateEntry.image}
+                backgroundColour={templateEntry.background}
+                icon={templateEntry.icon}
               >
-                Details
-              </a>
-            </TemplateCard>
-          {/each}
+                {#if !($licensing?.usageMetrics?.apps >= 100)}
+                  <Button
+                    cta
+                    on:click={() => {
+                      template = templateEntry
+                      creationModal.show()
+                    }}
+                  >
+                    Use template
+                  </Button>
+                {/if}
+                <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>
-      </div>
-    {/each}
-  </Layout>
-</div>
+      {/each}
+    </Layout>
+  </div>
+</Content>
 
 <Modal
   bind:this={creationModal}

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -469,7 +469,7 @@
   }
 
   .binding__type {
-    font-family: monospace;
+    font-family: var(--font-mono);
     background-color: var(--spectrum-global-color-gray-200);
     border-radius: var(--border-radius-s);
     padding: 2px 4px;

packages/builder/src/components/common/inputs/CopyInput.svelte

@@ -12,7 +12,7 @@
     dummy.select()
     document.execCommand("copy")
     document.body.removeChild(dummy)
-    notifications.success(`URL copied to clipboard`)
+    notifications.success(`Copied to clipboard`)
   }
 </script>
 

packages/builder/src/components/deploy/DeployModal.svelte

@@ -57,15 +57,13 @@
 <Button cta on:click={publishModal.show}>Publish</Button>
 <Modal bind:this={publishModal}>
   <ModalContent
-    title="Publish to Production"
+    title="Publish to production"
     confirmText="Publish"
     onConfirm={publishApp}
     dataCy={"deploy-app-modal"}
   >
-    <span
-      >The changes you have made will be published to the production version of
-      the application.</span
-    >
+    The changes you have made will be published to the production version of the
+    application.
   </ModalContent>
 </Modal>
 

packages/builder/src/components/deploy/DeployNavigation.svelte

@@ -179,7 +179,7 @@
 </ConfirmDialog>
 
 <div class="buttons">
-  <Button on:click={previewApp} newStyles secondary>Preview</Button>
+  <Button on:click={previewApp} secondary>Preview</Button>
   <DeployModal onOk={completePublish} />
 </div>
 

packages/builder/src/components/design/settings/controls/DataSourceSelect.svelte

@@ -70,7 +70,10 @@
       type: "provider",
     }))
   $: links = bindings
+    // Get only link bindings
     .filter(x => x.fieldSchema?.type === "link")
+    // Filter out bindings provided by forms
+    .filter(x => !x.component?.endsWith("/form"))
     .map(binding => {
       const { providerId, readableBinding, fieldSchema } = binding || {}
       const { name, tableId } = fieldSchema || {}

packages/builder/src/components/integration/QueryEditor.svelte

@@ -185,7 +185,7 @@
   div :global(.CodeMirror) {
     height: var(--code-mirror-height) !important;
     border-radius: var(--border-radius-s);
-    font-family: monospace !important;
+    font-family: var(--font-mono);
     line-height: 1.3;
   }
 </style>

packages/builder/src/components/portal/overview/automation/HistoryDetailsPanel.svelte

@@ -1,106 +0,0 @@
-<script>
-  import { Layout, Icon, ActionButton, InlineAlert } from "@budibase/bbui"
-  import StatusRenderer from "./StatusRenderer.svelte"
-  import DateTimeRenderer from "components/common/renderers/DateTimeRenderer.svelte"
-  import TestDisplay from "components/automation/AutomationBuilder/TestDisplay.svelte"
-  import { goto } from "@roxi/routify"
-  import { automationStore } from "builderStore"
-
-  export let history
-  export let appId
-  export let close
-  const STOPPED_ERROR = "stopped_error"
-
-  $: exists = $automationStore.automations?.find(
-    auto => auto._id === history?.automationId
-  )
-</script>
-
-{#if history}
-  <div class="body">
-    <div class="top">
-      <div class="controls">
-        <StatusRenderer value={history.status} />
-        <ActionButton noPadding size="S" icon="Close" quiet on:click={close} />
-      </div>
-    </div>
-    <Layout paddingY="XL" paddingX="XL" gap="S">
-      <div class="icon">
-        <Icon name="Clock" />
-        <DateTimeRenderer value={history.createdAt} />
-      </div>
-      <div class="icon">
-        <Icon name="JourneyVoyager" />
-        <div>{history.automationName}</div>
-      </div>
-      {#if history.status === STOPPED_ERROR}
-        <div class="cron-error">
-          <InlineAlert
-            type="error"
-            header="CRON automation disabled"
-            message="Fix the error and re-publish your app to re-activate."
-          />
-        </div>
-      {/if}
-      <div>
-        {#if exists}
-          <ActionButton
-            icon="Edit"
-            fullWidth={false}
-            on:click={() =>
-              $goto(`../../../app/${appId}/automate/${history.automationId}`)}
-            >Edit automation</ActionButton
-          >
-        {/if}
-      </div>
-    </Layout>
-    <div class="bottom">
-      {#key history}
-        <TestDisplay testResults={history} width="100%" />
-      {/key}
-    </div>
-  </div>
-{:else}
-  <div>No details found</div>
-{/if}
-
-<style>
-  .body {
-    right: 0;
-    background-color: var(--background);
-    border-left: var(--border-light);
-    width: 420px;
-    height: calc(100vh - 240px);
-    position: fixed;
-    overflow: auto;
-  }
-
-  .top {
-    padding: var(--spacing-m) 0 var(--spacing-m) 0;
-    border-bottom: var(--border-light);
-  }
-
-  .bottom {
-    border-top: var(--border-light);
-    padding-top: calc(var(--spacing-xl) * 2);
-    padding-bottom: calc(var(--spacing-xl) * 2);
-  }
-
-  .icon {
-    display: flex;
-    gap: var(--spacing-m);
-  }
-
-  .controls {
-    padding: 0 var(--spacing-l) 0 var(--spacing-l);
-    display: grid;
-    grid-template-columns: 1fr auto;
-    gap: var(--spacing-s);
-  }
-
-  .cron-error {
-    display: flex;
-    width: 100%;
-    justify-content: center;
-  }
-</style>

packages/builder/src/components/portal/overview/automation/StatusRenderer.svelte

@@ -1,39 +0,0 @@
-<script>
-  import { Icon } from "@budibase/bbui"
-  export let value
-
-  $: isError = !value || value.toLowerCase() === "error"
-  $: isStoppedError = value?.toLowerCase() === "stopped_error"
-  $: isStopped = value?.toLowerCase() === "stopped" || isStoppedError
-  $: status = getStatus(isError, isStopped)
-
-  function getStatus(error, stopped) {
-    if (error) {
-      return { color: "var(--red)", message: "Error", icon: "Alert" }
-    } else if (stopped) {
-      return { color: "var(--yellow)", message: "Stopped", icon: "StopCircle" }
-    } else {
-      return {
-        color: "var(--green)",
-        message: "Success",
-        icon: "CheckmarkCircle",
-      }
-    }
-  }
-</script>
-
-<div class="cell">
-  <Icon color={status.color} name={status.icon} />
-  <div style={`color: ${status.color};`}>
-    {status.message}
-  </div>
-</div>
-
-<style>
-  .cell {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-m);
-    align-items: center;
-  }
-</style>

packages/builder/src/components/portal/page/Breadcrumb.svelte

@@ -0,0 +1,37 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+
+  export let url
+  export let text
+</script>
+
+<div>
+  <a href={url}>
+    {text}
+  </a>
+  <Icon name="ChevronRight" />
+</div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    color: var(--spectrum-global-color-gray-700);
+    gap: var(--spacing-m);
+    font-size: 16px;
+    font-weight: 600;
+  }
+  div :global(.spectrum-Icon),
+  a {
+    color: inherit;
+    transition: color 130ms ease-out;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  a:hover {
+    color: var(--spectrum-global-color-gray-900);
+  }
+</style>

packages/builder/src/components/portal/page/Breadcrumbs.svelte

@@ -0,0 +1,22 @@
+<div>
+  <slot />
+</div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+
+  div :global(> *:last-child .spectrum-Icon) {
+    display: none;
+  }
+  div :global(> *:last-child) {
+    color: var(--spectrum-global-color-gray-900);
+    flex: 1 1 auto;
+    width: 0;
+  }
+</style>

packages/builder/src/components/portal/page/Content.svelte

@@ -0,0 +1,46 @@
+<script>
+  export let narrow = false
+  export let showMobileNav = false
+</script>
+
+<div class="content">
+  <div class="side-nav" class:show-mobile={showMobileNav}>
+    <slot name="side-nav" />
+  </div>
+  <div class="main" class:narrow>
+    <slot />
+  </div>
+</div>
+
+<style>
+  .content {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 40px;
+  }
+  .side-nav {
+    flex: 0 0 200px;
+  }
+  .main {
+    flex: 1 1 auto;
+  }
+  .main.narrow {
+    max-width: 600px;
+  }
+
+  @media (max-width: 640px) {
+    .content {
+      flex-direction: column;
+    }
+    .side-nav:not(.show-mobile) {
+      display: none;
+    }
+    .side-nav.show-mobile :global(.side-nav) {
+      border-bottom: var(--border-light);
+      margin: 0 -24px;
+      padding: 0 24px 32px 24px;
+    }
+  }
+</style>

packages/builder/src/components/portal/page/Header.svelte

@@ -0,0 +1,52 @@
+<script>
+  import { Heading } from "@budibase/bbui"
+
+  export let title
+  export let wrap = true
+</script>
+
+<div class="header" class:wrap>
+  <slot name="icon" />
+  <Heading size="L">{title}</Heading>
+  <div class="buttons">
+    <slot name="buttons" />
+  </div>
+</div>
+
+<style>
+  .header {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xl);
+  }
+  .header.wrap {
+    flex-wrap: wrap;
+  }
+  .header :global(.spectrum-Heading) {
+    flex: 1 1 auto;
+    margin-top: -2px;
+  }
+  .header:not(.wrap) :global(.spectrum-Heading) {
+    overflow: hidden;
+    width: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-xl);
+  }
+  .buttons :global(> div) {
+    display: contents;
+  }
+  @media (max-width: 640px) {
+    .wrap .buttons {
+      margin-bottom: var(--spacing-m);
+    }
+  }
+</style>

packages/builder/src/components/portal/page/SideNav.svelte

@@ -0,0 +1,26 @@
+<script>
+  export let title
+</script>
+
+<div class="side-nav">
+  {#if title}
+    <div class="title">{title}</div>
+  {/if}
+  <slot />
+</div>
+
+<style>
+  .side-nav {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 4px;
+  }
+  .title {
+    margin-left: var(--spacing-m);
+    font-size: 12px;
+    color: var(--spectrum-global-color-gray-700);
+    margin-bottom: var(--spacing-m);
+  }
+</style>

packages/builder/src/components/portal/page/SideNavItem.svelte

@@ -0,0 +1,23 @@
+<script>
+  export let text
+  export let url
+  export let active = false
+</script>
+
+<a on:click href={url} class:active>
+  {text}
+</a>
+
+<style>
+  a {
+    padding: var(--spacing-s) var(--spacing-m);
+    color: var(--spectrum-global-color-gray-900);
+    border-radius: 4px;
+    transition: background 130ms ease-out;
+  }
+  .active,
+  a:hover {
+    background-color: var(--spectrum-global-color-gray-200);
+    cursor: pointer;
+  }
+</style>

packages/builder/src/components/portal/page/index.js

@@ -0,0 +1,6 @@
+export { default as Breadcrumb } from "./Breadcrumb.svelte"
+export { default as Breadcrumbs } from "./Breadcrumbs.svelte"
+export { default as Header } from "./Header.svelte"
+export { default as Content } from "./Content.svelte"
+export { default as SideNavItem } from "./SideNavItem.svelte"
+export { default as SideNav } from "./SideNav.svelte"

packages/builder/src/components/settings/APIKeyModal.svelte

@@ -1,5 +1,6 @@
 <script>
-  import { ModalContent, Body, notifications } from "@budibase/bbui"
+  import { ModalContent } from "@budibase/bbui"
+  import { Body, notifications } from "@budibase/bbui"
   import { auth } from "stores/portal"
   import { onMount } from "svelte"
   import CopyInput from "components/common/inputs/CopyInput.svelte"
@@ -27,15 +28,13 @@
 </script>
 
 <ModalContent
-  title="Developer information"
-  showConfirmButton={false}
-  showSecondaryButton={true}
-  secondaryButtonText="Re-generate key"
+  title="API Key"
+  showSecondaryButton
+  secondaryButtonText="Regenerate key"
   secondaryAction={generateAPIKey}
+  showCancelButton={false}
+  confirmText="Close"
 >
-  <Body size="S">
-    You can find information about your developer account here, such as the API
-    key used to access the Budibase API.
-  </Body>
-  <CopyInput bind:value={apiKey} label="API key" />
+  <Body size="S">Your API key for accessing the Budibase public API:</Body>
+  <CopyInput bind:value={apiKey} />
 </ModalContent>

packages/builder/src/components/settings/ProfileModal.svelte

@@ -18,11 +18,7 @@
   }
 </script>
 
-<ModalContent
-  title="Update user information"
-  confirmText="Update information"
-  onConfirm={updateInfo}
->
+<ModalContent title="My profile" confirmText="Save" onConfirm={updateInfo}>
   <Body size="S">
     Personalise the platform by adding your first name and last name.
   </Body>

packages/builder/src/components/settings/ThemeModal.svelte

@@ -0,0 +1,16 @@
+<script>
+  import { ModalContent } from "@budibase/bbui"
+  import { Select } from "@budibase/bbui"
+  import { themeStore } from "builderStore"
+  import { Constants } from "@budibase/frontend-core"
+</script>
+
+<ModalContent title="Theme">
+  <Select
+    options={Constants.Themes}
+    bind:value={$themeStore.theme}
+    placeholder={null}
+    getOptionLabel={x => x.name}
+    getOptionValue={x => x.class}
+  />
+</ModalContent>

packages/builder/src/components/start/AppRow.svelte

@@ -1,85 +1,126 @@
 <script>
-  import { Heading, Button, Icon } from "@budibase/bbui"
+  import { Heading, Body, Button, Icon, notifications } from "@budibase/bbui"
   import AppLockModal from "../common/AppLockModal.svelte"
   import { processStringSync } from "@budibase/string-templates"
+  import { goto } from "@roxi/routify"
 
   export let app
-  export let editApp
-  export let appOverview
+
+  const handleDefaultClick = () => {
+    if (window.innerWidth < 640) {
+      goToOverview()
+    } else {
+      goToBuilder()
+    }
+  }
+
+  const goToBuilder = () => {
+    if (app.lockedOther) {
+      notifications.error(
+        `App locked by ${app.lockedBy.email}. Please allow lock to expire or have them unlock this app.`
+      )
+      return
+    }
+    $goto(`../../app/${app.devId}`)
+  }
+
+  const goToOverview = () => {
+    $goto(`../overview/${app.devId}`)
+  }
 </script>
 
-<div class="title" data-cy={`${app.devId}`}>
-  <div>
-    <div class="app-icon" style="color: {app.icon?.color || ''}">
-      <Icon size="XL" name={app.icon?.name || "Apps"} />
+<div class="app-row" on:click={handleDefaultClick}>
+  <div class="title" data-cy={`${app.devId}`}>
+    <div class="app-icon">
+      <Icon size="L" name={app.icon?.name || "Apps"} color={app.icon?.color} />
     </div>
-    <div class="name" data-cy="app-name-link" on:click={() => editApp(app)}>
-      <Heading size="XS">
+    <div class="name" data-cy="app-name-link">
+      <Heading size="S">
         {app.name}
       </Heading>
     </div>
   </div>
-</div>
-<div class="desktop">
-  {#if app.updatedAt}
-    {processStringSync("Updated {{ duration time 'millisecond' }} ago", {
-      time: new Date().getTime() - new Date(app.updatedAt).getTime(),
-    })}
-  {:else}
-    Never updated
-  {/if}
-</div>
-<div class="desktop">
-  <span><AppLockModal {app} buttonSize="M" /></span>
-</div>
-<div class="desktop">
-  <div class="app-status">
-    {#if app.deployed}
-      <Icon name="Globe" disabled={false} />
-      Published
+
+  <div class="updated">
+    {#if app.updatedAt}
+      {processStringSync("Updated {{ duration time 'millisecond' }} ago", {
+        time: new Date().getTime() - new Date(app.updatedAt).getTime(),
+      })}
     {:else}
-      <Icon name="GlobeStrike" disabled={true} />
-      <span class="disabled"> Unpublished </span>
+      Never updated
     {/if}
   </div>
-</div>
-<div data-cy={`row_actions_${app.appId}`}>
-  <div class="app-row-actions">
-    <Button size="S" secondary newStyles on:click={() => appOverview(app)}>
-      Manage
-    </Button>
-    <Button
-      size="S"
-      primary
-      newStyles
-      disabled={app.lockedOther}
-      on:click={() => editApp(app)}
-    >
+
+  <div class="title app-status" class:deployed={app.deployed}>
+    <Icon size="L" name={app.deployed ? "GlobeCheck" : "GlobeStrike"} />
+    <Body size="S">{app.deployed ? "Published" : "Unpublished"}</Body>
+  </div>
+
+  <div class="app-row-actions" data-cy={`row_actions_${app.appId}`}>
+    <AppLockModal {app} buttonSize="M" />
+    <Button size="S" secondary on:click={goToOverview}>Manage</Button>
+    <Button size="S" primary disabled={app.lockedOther} on:click={goToBuilder}>
       Edit
     </Button>
   </div>
 </div>
 
 <style>
-  div.title,
-  div.title > div {
-    display: flex;
-    max-width: 100%;
+  .app-row {
+    background: var(--background);
+    padding: 24px 32px;
+    border-radius: 8px;
+    display: grid;
+    grid-template-columns: 35% 25% 15% auto;
+    align-items: center;
+    gap: var(--spacing-m);
+    transition: border 130ms ease-out;
+    border: 1px solid transparent;
   }
+  .app-row:hover {
+    cursor: pointer;
+    border-color: var(--spectrum-global-color-gray-300);
+  }
+
+  .updated {
+    color: var(--spectrum-global-color-gray-700);
+  }
+
+  .title,
+  .name {
+    flex: 1 1 auto;
+  }
+  .name {
+    width: 0;
+  }
+  .title,
+  .app-status {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .title :global(.spectrum-Heading),
+  .title :global(.spectrum-Icon),
+  .title :global(.spectrum-Body) {
+    color: var(--spectrum-global-color-gray-900);
+  }
+
+  .app-status:not(.deployed) :global(.spectrum-Icon),
+  .app-status:not(.deployed) :global(.spectrum-Body) {
+    color: var(--spectrum-global-color-gray-600);
+  }
+
   .app-row-actions {
-    grid-gap: var(--spacing-s);
+    gap: var(--spacing-m);
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
+    align-items: center;
   }
-  .app-status {
-    display: grid;
-    grid-gap: var(--spacing-s);
-    grid-template-columns: 24px 100px;
-  }
-  .app-status span.disabled {
-    opacity: 0.3;
-  }
+
   .name {
     text-decoration: none;
     overflow: hidden;
@@ -88,17 +129,30 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    margin-left: calc(1.5 * var(--spacing-xl));
-  }
-  .title :global(h1:hover) {
-    color: var(--spectrum-global-color-blue-600);
-    cursor: pointer;
-    transition: color 130ms ease;
   }
 
+  @media (max-width: 1000px) {
+    .app-row {
+      grid-template-columns: 45% 30% auto;
+    }
+    .updated {
+      display: none;
+    }
+  }
+  @media (max-width: 800px) {
+    .app-row {
+      grid-template-columns: 1fr auto;
+    }
+    .app-status {
+      display: none;
+    }
+  }
   @media (max-width: 640px) {
-    .desktop {
-      display: none !important;
+    .app-row {
+      padding: 20px;
+    }
+    .app-row-actions {
+      display: none;
     }
   }
 </style>

packages/builder/src/components/start/ChooseIconModal.svelte

@@ -1,18 +1,20 @@
 <script>
   import {
     ModalContent,
-    Modal,
     Icon,
     ColorPicker,
     Label,
     notifications,
   } from "@budibase/bbui"
   import { apps } from "stores/portal"
+  import { createEventDispatcher } from "svelte"
 
   export let app
-  let modal
-  $: selectedIcon = app?.icon?.name || "Apps"
-  $: selectedColor = app?.icon?.color
+  export let name
+  export let color
+  export let autoSave = false
+
+  const dispatch = createEventDispatcher()
 
   let iconsList = [
     "Apps",
@@ -40,30 +42,15 @@
     "GraphBarHorizontal",
     "Demographic",
   ]
-  export const show = () => {
-    modal.show()
-  }
-  export const hide = () => {
-    modal.hide()
-  }
-
-  const onCancel = () => {
-    selectedIcon = ""
-    selectedColor = ""
-    hide()
-  }
-
-  const changeColor = val => {
-    selectedColor = val
-  }
 
   const save = async () => {
+    if (!autoSave) {
+      dispatch("change", { color, name })
+      return
+    }
     try {
       await apps.update(app.instance._id, {
-        icon: {
-          name: selectedIcon,
-          color: selectedColor,
-        },
+        icon: { name, color },
       })
     } catch (error) {
       notifications.error("Error updating app")
@@ -71,41 +58,32 @@
   }
 </script>
 
-<Modal bind:this={modal} on:hide={onCancel}>
-  <ModalContent
-    title={"Edit Icon"}
-    confirmText={"Save"}
-    onConfirm={() => save()}
-  >
-    <div class="scrollable-icons">
-      <div class="title-spacing">
-        <Label>Select an icon</Label>
-      </div>
-      <div class="grid">
-        {#each iconsList as item}
-          <div
-            class="icon-item"
-            class:selected={item === selectedIcon}
-            on:click={() => (selectedIcon = item)}
-          >
-            <Icon name={item} />
-          </div>
-        {/each}
-      </div>
+<ModalContent title="Edit Icon" confirmText="Save" onConfirm={save}>
+  <div class="scrollable-icons">
+    <div class="title-spacing">
+      <Label>Select an icon</Label>
     </div>
-    <div class="color-selection">
-      <div>
-        <Label>Select a color</Label>
-      </div>
-      <div class="color-selection-item">
-        <ColorPicker
-          bind:value={selectedColor}
-          on:change={e => changeColor(e.detail)}
-        />
-      </div>
+    <div class="grid">
+      {#each iconsList as item}
+        <div
+          class="icon-item"
+          class:selected={item === name}
+          on:click={() => (name = item)}
+        >
+          <Icon name={item} />
+        </div>
+      {/each}
     </div>
-  </ModalContent>
-</Modal>
+  </div>
+  <div class="color-selection">
+    <div>
+      <Label>Select a color</Label>
+    </div>
+    <div class="color-selection-item">
+      <ColorPicker bind:value={color} on:change={e => (color = e.detail)} />
+    </div>
+  </div>
+</ModalContent>
 
 <style>
   .scrollable-icons {

packages/builder/src/components/start/CreateAppModal.svelte

@@ -138,6 +138,7 @@
       }
 
       $goto(`/builder/app/${createdApp.instance._id}`)
+      // apps.load()
     } catch (error) {
       creating = false
       console.error(error)

packages/builder/src/components/start/UpdateAppModal.svelte

@@ -1,22 +1,29 @@
 <script>
   import { writable, get as svelteGet } from "svelte/store"
-  import { notifications, Input, ModalContent, Body } from "@budibase/bbui"
+  import {
+    notifications,
+    Input,
+    ModalContent,
+    Layout,
+    Label,
+  } from "@budibase/bbui"
   import { apps } from "stores/portal"
   import { onMount } from "svelte"
   import { createValidationStore } from "helpers/validation/yup"
   import * as appValidation from "helpers/validation/yup/app"
+  import EditableIcon from "../common/EditableIcon.svelte"
 
   export let app
 
-  const values = writable({ name: "", url: null })
-  const validation = createValidationStore()
-  $: validation.check($values)
-
-  onMount(async () => {
-    $values.name = app.name
-    $values.url = app.url
-    setupValidation()
+  const values = writable({
+    name: app.name,
+    url: app.url,
+    iconName: app.icon?.name,
+    iconColor: app.icon?.color,
   })
+  const validation = createValidationStore()
+
+  $: validation.check($values)
 
   const setupValidation = async () => {
     const applications = svelteGet(apps)
@@ -28,14 +35,14 @@
 
   async function updateApp() {
     try {
-      // Update App
-      const body = {
-        name: $values.name.trim(),
-      }
-      if ($values.url) {
-        body.url = $values.url.trim()
-      }
-      await apps.update(app.instance._id, body)
+      await apps.update(app.instance._id, {
+        name: $values.name?.trim(),
+        url: $values.url?.trim(),
+        icon: {
+          name: $values.iconName,
+          color: $values.iconColor,
+        },
+      })
     } catch (error) {
       console.error(error)
       notifications.error("Error updating app")
@@ -68,15 +75,22 @@
     let resolvedUrl = resolveAppUrl(null, appName)
     tidyUrl(resolvedUrl)
   }
+
+  const updateIcon = e => {
+    const { name, color } = e.detail
+    $values.iconColor = color
+    $values.iconName = name
+  }
+
+  onMount(setupValidation)
 </script>
 
 <ModalContent
-  title={"Edit app"}
-  confirmText={"Save"}
+  title="Edit name and URL"
+  confirmText="Save"
   onConfirm={updateApp}
   disabled={!$validation.valid}
 >
-  <Body size="S">Update the name of your app.</Body>
   <Input
     bind:value={$values.name}
     error={$validation.touched.name && $validation.errors.name}
@@ -84,6 +98,16 @@
     on:change={nameToUrl($values.name)}
     label="Name"
   />
+  <Layout noPadding gap="XS">
+    <Label>Icon</Label>
+    <EditableIcon
+      {app}
+      size="XL"
+      name={$values.iconName}
+      color={$values.iconColor}
+      on:change={updateIcon}
+    />
+  </Layout>
   <Input
     bind:value={$values.url}
     error={$validation.touched.url && $validation.errors.url}

packages/builder/src/components/usage/Usage.svelte

@@ -39,15 +39,21 @@
       {#if showWarning}
         <Icon name="Alert" />
       {/if}
-      <div class="heading header-item">
-        <Heading size="XS" weight="light">{usage.name}</Heading>
-      </div>
+      <Heading size="XS" weight="light">
+        <span class="nowrap">
+          {usage.name}
+        </span>
+      </Heading>
     </div>
-    {#if unlimited}
-      <Body size="S">{usage.used} / Unlimited</Body>
-    {:else}
-      <Body size="S">{usage.used} / {usage.total}</Body>
-    {/if}
+    <Body size="S">
+      <span class="nowrap">
+        {#if unlimited}
+          {usage.used} / Unlimited
+        {:else}
+          {usage.used} / {usage.total}
+        {/if}
+      </span>
+    </Body>
   </div>
   <div>
     {#if unlimited}
@@ -89,13 +95,14 @@
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    align-items: flex-end;
     margin-bottom: 12px;
+    gap: var(--spacing-m);
   }
   .header-container {
     display: flex;
   }
-  .heading {
-    margin-top: 3px;
-    margin-left: 5px;
+  .nowrap {
+    white-space: nowrap;
   }
 </style>

packages/builder/src/components/usage/UsageDashCard.svelte

@@ -47,7 +47,7 @@
     <div class="header-actions">
       {#if secondaryDefined}
         <div>
-          <Button newStyles secondary on:click={secondaryAction}
+          <Button secondary on:click={secondaryAction}
             >{secondaryActionText}</Button
           >
         </div>

packages/builder/src/global.css

@@ -23,7 +23,6 @@ body {
   --grey-8: var(--spectrum-global-color-gray-800);
   --grey-9: var(--spectrum-global-color-gray-900);
 
-  font-family: var(--font-sans);
   color: var(--ink);
   background-color: var(--background-alt);
 }

packages/builder/src/pages/builder/app/[application]/_layout.svelte

@@ -105,32 +105,34 @@
           </MenuItem>
           <MenuItem
             on:click={() =>
-              $goto(`../../portal/overview/${application}?tab=Access`)}
+              $goto(`../../portal/overview/${application}/access`)}
           >
             Access
           </MenuItem>
           <MenuItem
             on:click={() =>
-              $goto(
-                `../../portal/overview/${application}?tab=${encodeURIComponent(
-                  "Automation History"
-                )}`
-              )}
+              $goto(`../../portal/overview/${application}/automation-history`)}
           >
             Automation history
           </MenuItem>
           <MenuItem
             on:click={() =>
-              $goto(`../../portal/overview/${application}?tab=Backups`)}
+              $goto(`../../portal/overview/${application}/backups`)}
           >
             Backups
           </MenuItem>
 
           <MenuItem
             on:click={() =>
-              $goto(`../../portal/overview/${application}?tab=Settings`)}
+              $goto(`../../portal/overview/${application}/name-and-url`)}
           >
-            Settings
+            Name and URL
+          </MenuItem>
+          <MenuItem
+            on:click={() =>
+              $goto(`../../portal/overview/${application}/version`)}
+          >
+            Version
           </MenuItem>
         </ActionMenu>
         <Heading size="XS">{$store.name || "App"}</Heading>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte

@@ -176,7 +176,6 @@
   const addComponent = async component => {
     try {
       await store.actions.components.create(component)
-      $goto("../")
     } catch (error) {
       notifications.error(error || "Error creating component")
     }
@@ -263,6 +262,7 @@
                     orderMap[component.component]}
                   on:click={() => addComponent(component.component)}
                   on:mouseover={() => (selectedIndex = null)}
+                  on:focus
                 >
                   <Icon name={component.icon} />
                   <Body size="XS">{component.name}</Body>