Merge branch 'master' of github.com:Budibase/budibase into feature/sql-query-aliasing

.github/workflows/budibase_ci.yml

@@ -38,10 +38,10 @@ jobs:
           submodules: ${{ env.IS_OSS_CONTRIBUTOR == 'false' }}
           token: ${{ secrets.PERSONAL_ACCESS_TOKEN || github.token }}
 
-      - name: Use Node.js 18.x
+      - name: Use Node.js 20.x
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: yarn
       - run: yarn --frozen-lockfile
       - run: yarn lint
@@ -56,10 +56,10 @@ jobs:
           token: ${{ secrets.PERSONAL_ACCESS_TOKEN || github.token }}
           fetch-depth: 0
 
-      - name: Use Node.js 18.x
+      - name: Use Node.js 20.x
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: yarn
       - run: yarn --frozen-lockfile
 
@@ -84,7 +84,7 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Use Node.js 18.x
+      - name: Use Node.js 20.x
         uses: azure/setup-helm@v3
       - run: cd charts/budibase && helm lint .
 
@@ -98,10 +98,10 @@ jobs:
           token: ${{ secrets.PERSONAL_ACCESS_TOKEN || github.token }}
           fetch-depth: 0
 
-      - name: Use Node.js 18.x
+      - name: Use Node.js 20.x
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: yarn
       - run: yarn --frozen-lockfile
       - name: Test
@@ -122,10 +122,10 @@ jobs:
           token: ${{ secrets.PERSONAL_ACCESS_TOKEN || github.token }}
           fetch-depth: 0
 
-      - name: Use Node.js 18.x
+      - name: Use Node.js 20.x
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: yarn
       - run: yarn --frozen-lockfile
       - name: Test worker
@@ -146,10 +146,10 @@ jobs:
           token: ${{ secrets.PERSONAL_ACCESS_TOKEN || github.token }}
           fetch-depth: 0
 
-      - name: Use Node.js 18.x
+      - name: Use Node.js 20.x
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: yarn
       - run: yarn --frozen-lockfile
       - name: Test server
@@ -171,10 +171,10 @@ jobs:
           token: ${{ secrets.PERSONAL_ACCESS_TOKEN || github.token }}
           fetch-depth: 0
 
-      - name: Use Node.js 18.x
+      - name: Use Node.js 20.x
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: yarn
       - run: yarn --frozen-lockfile
       - name: Test
@@ -194,10 +194,10 @@ jobs:
           submodules: ${{ env.IS_OSS_CONTRIBUTOR == 'false' }}
           token: ${{ secrets.PERSONAL_ACCESS_TOKEN || github.token }}
 
-      - name: Use Node.js 18.x
+      - name: Use Node.js 20.x
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: yarn
       - run: yarn --frozen-lockfile
       - name: Build packages

.github/workflows/stale_bot.yml

@@ -16,8 +16,8 @@ jobs:
           days-before-pr-stale: 7
           stale-issue-label: stale
           exempt-pr-labels: pinned,security,roadmap
-
           days-before-pr-close: 7
+          days-before-issue-close: 30
 
       - uses: actions/stale@v8
         with:
@@ -26,6 +26,7 @@ jobs:
           days-before-stale: 30
           only-issue-labels: bug,High priority
           stale-issue-label: warn
+          days-before-close: 30
 
       - uses: actions/stale@v8
         with:
@@ -34,6 +35,7 @@ jobs:
           days-before-stale: 90
           only-issue-labels: bug,Medium priority
           stale-issue-label: warn
+          days-before-close: 30
 
       - uses: actions/stale@v8
         with:
@@ -43,5 +45,4 @@ jobs:
           stale-issue-label: stale
           only-issue-labels: bug
           stale-issue-message: "This issue has been automatically marked as stale because it has not had any activity for six months."
-
           days-before-close: 30

.nvmrc

@@ -1 +1 @@
-v18.17.0
+v20.10.0

.tool-versions

@@ -1,3 +1,3 @@
-nodejs 18.17.0
+nodejs 20.10.0
 python 3.10.0
 yarn 1.22.19

charts/budibase/templates/app-service-deployment.yaml

@@ -252,4 +252,10 @@ spec:
       {{ end }}
       restartPolicy: Always
       serviceAccountName: ""
+      {{ if .Values.services.apps.ndots }}
+      dnsConfig:
+        options:
+          - name: ndots
+            value: {{ .Values.services.apps.ndots | quote }}
+      {{ end }}
 status: {}

charts/budibase/templates/automation-worker-service-deployment.yaml

@@ -227,6 +227,7 @@ spec:
         resources:
         {{- toYaml . | nindent 10 }}
         {{ end }}
+        {{ if .Values.services.automationWorkers.command }}
         command:
         {{- toYaml .Values.services.automationWorkers.command | nindent 10 }}
         {{ end }}
@@ -251,6 +252,11 @@ spec:
       {{ end }}
       restartPolicy: Always
       serviceAccountName: ""
-      {{ if .Values.services.automationWorkers.command }}}
+      {{ if .Values.services.automationWorkers.ndots }}
+      dnsConfig:
+        options:
+          - name: ndots
+            value: {{ .Values.services.automationWorkers.ndots | quote }}
+      {{ end }}
 status: {}
 {{- end }}

charts/budibase/templates/proxy-service-deployment.yaml

@@ -109,4 +109,10 @@ spec:
       {{- toYaml .Values.services.proxy.args | nindent 8 }}
       {{ end }}
       volumes:
+      {{ if .Values.services.proxy.ndots }}
+      dnsConfig:
+        options:
+          - name: ndots
+            value: {{ .Values.services.proxy.ndots | quote }}
+      {{ end }}
 status: {}

charts/budibase/templates/worker-service-deployment.yaml

@@ -238,4 +238,10 @@ spec:
       {{ end }}
       restartPolicy: Always
       serviceAccountName: ""
+      {{ if .Values.services.worker.ndots }}
+      dnsConfig:
+        options:
+          - name: ndots
+            value: {{ .Values.services.worker.ndots | quote }}
+      {{ end }}
 status: {}

docs/CONTRIBUTING.md

@@ -90,7 +90,7 @@ Component libraries are collections of components as well as the definition of t
 
 #### 1. Prerequisites
 
-- NodeJS version `18.x.x`
+- NodeJS version `20.x.x`
 - Python version `3.x`
 
 ### Using asdf (recommended)

hosting/couchdb/runner.sh

@@ -76,6 +76,6 @@ done
 
 # CouchDB needs the `_users` and `_replicator` databases to exist before it will
 # function correctly, so we create them here.
-curl -X PUT http://${COUCHDB_USER}:${COUCHDB_PASSWORD}@localhost:5984/_users
+curl -X PUT -u "${COUCHDB_USER}:${COUCHDB_PASSWORD}" http://localhost:5984/_users
-curl -X PUT http://${COUCHDB_USER}:${COUCHDB_PASSWORD}@localhost:5984/_replicator
+curl -X PUT -u "${COUCHDB_USER}:${COUCHDB_PASSWORD}" http://localhost:5984/_replicator
 sleep infinity

hosting/docker-compose.yaml

@@ -26,7 +26,7 @@ services:
       BB_ADMIN_USER_EMAIL: ${BB_ADMIN_USER_EMAIL}
       BB_ADMIN_USER_PASSWORD: ${BB_ADMIN_USER_PASSWORD}
       PLUGINS_DIR: ${PLUGINS_DIR}
-      OFFLINE_MODE: ${OFFLINE_MODE}
+      OFFLINE_MODE: ${OFFLINE_MODE:-}
     depends_on:
       - worker-service
       - redis-service
@@ -53,7 +53,7 @@ services:
       INTERNAL_API_KEY: ${INTERNAL_API_KEY}
       REDIS_URL: redis-service:6379
       REDIS_PASSWORD: ${REDIS_PASSWORD}
-      OFFLINE_MODE: ${OFFLINE_MODE}
+      OFFLINE_MODE: ${OFFLINE_MODE:-}
     depends_on:
       - redis-service
       - minio-service
@@ -109,7 +109,7 @@ services:
   redis-service:
     restart: unless-stopped
     image: redis
-    command: redis-server --requirepass ${REDIS_PASSWORD}
+    command: redis-server --requirepass "${REDIS_PASSWORD}"
     volumes:
       - redis_data:/data
 

hosting/single/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-slim as build
+FROM node:20-slim as build
 
 # install node-gyp dependencies
 RUN apt-get update && apt-get install -y --no-install-recommends g++ make python3 jq
@@ -42,7 +42,7 @@ COPY packages/string-templates packages/string-templates
 FROM budibase/couchdb as runner
 ARG TARGETARCH
 ENV TARGETARCH $TARGETARCH
-ENV NODE_MAJOR 18
+ENV NODE_MAJOR 20
 #TARGETBUILD can be set to single (for single docker image) or aas (for azure app service)
 # e.g. docker build --build-arg TARGETBUILD=aas ....
 ARG TARGETBUILD=single

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.13.51",
+  "version": "2.14.7",
   "npmClient": "yarn",
   "packages": [
     "packages/*",

package.json

@@ -6,6 +6,7 @@
     "@babel/eslint-parser": "^7.22.5",
     "@babel/preset-env": "^7.22.5",
     "@esbuild-plugins/tsconfig-paths": "^0.1.2",
+    "@types/node": "20.10.0",
     "@typescript-eslint/parser": "6.9.0",
     "esbuild": "^0.18.17",
     "esbuild-node-externals": "^1.8.0",
@@ -99,7 +100,7 @@
     "@budibase/types": "0.0.0"
   },
   "engines": {
-    "node": ">=18.0.0 <19.0.0"
+    "node": ">=20.0.0 <21.0.0"
   },
   "dependencies": {}
 }

packages/account-portal

@@ -1 +1 @@
-Subproject commit c1a53bb2f4cafcb4c55ad7181146617b449907f2
+Subproject commit 319c8499e7c3d33fbb96cf4d73a922690709686c

packages/backend-core/package.json

@@ -65,7 +65,6 @@
     "@types/cookies": "0.7.8",
     "@types/jest": "29.5.5",
     "@types/lodash": "4.14.200",
-    "@types/node": "18.17.0",
     "@types/node-fetch": "2.6.4",
     "@types/pouchdb": "6.4.0",
     "@types/redlock": "4.0.3",

packages/backend-core/src/context/mainContext.ts

@@ -134,7 +134,7 @@ export async function doInContext(appId: string, task: any): Promise<any> {
 }
 
 export async function doInTenant<T>(
-  tenantId: string | null,
+  tenantId: string | undefined,
   task: () => T
 ): Promise<T> {
   // make sure default always selected in single tenancy

packages/backend-core/src/db/couch/DatabaseImpl.ts

@@ -19,6 +19,8 @@ import { WriteStream, ReadStream } from "fs"
 import { newid } from "../../docIds/newid"
 import { DDInstrumentedDatabase } from "../instrumentation"
 
+const DATABASE_NOT_FOUND = "Database does not exist."
+
 function buildNano(couchInfo: { url: string; cookie: string }) {
   return Nano({
     url: couchInfo.url,
@@ -31,6 +33,8 @@ function buildNano(couchInfo: { url: string; cookie: string }) {
   })
 }
 
+type DBCall<T> = () => Promise<T>
+
 export function DatabaseWithConnection(
   dbName: string,
   connection: string,
@@ -78,7 +82,11 @@ export class DatabaseImpl implements Database {
     return this.instanceNano || DatabaseImpl.nano
   }
 
-  async checkSetup() {
+  private getDb() {
+    return this.nano().db.use(this.name)
+  }
+
+  private async checkAndCreateDb() {
     let shouldCreate = !this.pouchOpts?.skip_setup
     // check exists in a lightweight fashion
     let exists = await this.exists()
@@ -95,14 +103,22 @@ export class DatabaseImpl implements Database {
         }
       }
     }
-    return this.nano().db.use(this.name)
+    return this.getDb()
   }
 
-  private async updateOutput(fnc: any) {
+  // this function fetches the DB and handles if DB creation is needed
+  private async performCall<T>(
+    call: (db: Nano.DocumentScope<any>) => Promise<DBCall<T>> | DBCall<T>
+  ): Promise<any> {
+    const db = this.getDb()
+    const fnc = await call(db)
     try {
       return await fnc()
     } catch (err: any) {
-      if (err.statusCode) {
+      if (err.statusCode === 404 && err.reason === DATABASE_NOT_FOUND) {
+        await this.checkAndCreateDb()
+        return await this.performCall(call)
+      } else if (err.statusCode) {
         err.status = err.statusCode
       }
       throw err
@@ -110,11 +126,12 @@ export class DatabaseImpl implements Database {
   }
 
   async get<T extends Document>(id?: string): Promise<T> {
-    const db = await this.checkSetup()
+    return this.performCall(db => {
-    if (!id) {
+      if (!id) {
-      throw new Error("Unable to get doc without a valid _id.")
+        throw new Error("Unable to get doc without a valid _id.")
-    }
+      }
-    return this.updateOutput(() => db.get(id))
+      return () => db.get(id)
+    })
   }
 
   async getMultiple<T extends Document>(
@@ -147,22 +164,23 @@ export class DatabaseImpl implements Database {
   }
 
   async remove(idOrDoc: string | Document, rev?: string) {
-    const db = await this.checkSetup()
+    return this.performCall(db => {
-    let _id: string
+      let _id: string
-    let _rev: string
+      let _rev: string
 
-    if (isDocument(idOrDoc)) {
+      if (isDocument(idOrDoc)) {
-      _id = idOrDoc._id!
+        _id = idOrDoc._id!
-      _rev = idOrDoc._rev!
+        _rev = idOrDoc._rev!
-    } else {
+      } else {
-      _id = idOrDoc
+        _id = idOrDoc
-      _rev = rev!
+        _rev = rev!
-    }
+      }
 
-    if (!_id || !_rev) {
+      if (!_id || !_rev) {
-      throw new Error("Unable to remove doc without a valid _id and _rev.")
+        throw new Error("Unable to remove doc without a valid _id and _rev.")
-    }
+      }
-    return this.updateOutput(() => db.destroy(_id, _rev))
+      return () => db.destroy(_id, _rev)
+    })
   }
 
   async post(document: AnyDocument, opts?: DatabasePutOpts) {
@@ -176,45 +194,49 @@ export class DatabaseImpl implements Database {
     if (!document._id) {
       throw new Error("Cannot store document without _id field.")
     }
-    const db = await this.checkSetup()
+    return this.performCall(async db => {
-    if (!document.createdAt) {
+      if (!document.createdAt) {
-      document.createdAt = new Date().toISOString()
+        document.createdAt = new Date().toISOString()
-    }
+      }
-    document.updatedAt = new Date().toISOString()
+      document.updatedAt = new Date().toISOString()
-    if (opts?.force && document._id) {
+      if (opts?.force && document._id) {
-      try {
+        try {
-        const existing = await this.get(document._id)
+          const existing = await this.get(document._id)
-        if (existing) {
+          if (existing) {
-          document._rev = existing._rev
+            document._rev = existing._rev
-        }
+          }
-      } catch (err: any) {
+        } catch (err: any) {
-        if (err.status !== 404) {
+          if (err.status !== 404) {
-          throw err
+            throw err
+          }
         }
       }
-    }
+      return () => db.insert(document)
-    return this.updateOutput(() => db.insert(document))
+    })
   }
 
   async bulkDocs(documents: AnyDocument[]) {
-    const db = await this.checkSetup()
+    return this.performCall(db => {
-    return this.updateOutput(() => db.bulk({ docs: documents }))
+      return () => db.bulk({ docs: documents })
+    })
   }
 
   async allDocs<T extends Document>(
     params: DatabaseQueryOpts
   ): Promise<AllDocsResponse<T>> {
-    const db = await this.checkSetup()
+    return this.performCall(db => {
-    return this.updateOutput(() => db.list(params))
+      return () => db.list(params)
+    })
   }
 
   async query<T extends Document>(
     viewName: string,
     params: DatabaseQueryOpts
   ): Promise<AllDocsResponse<T>> {
-    const db = await this.checkSetup()
+    return this.performCall(db => {
-    const [database, view] = viewName.split("/")
+      const [database, view] = viewName.split("/")
-    return this.updateOutput(() => db.view(database, view, params))
+      return () => db.view(database, view, params)
+    })
   }
 
   async destroy() {
@@ -231,8 +253,9 @@ export class DatabaseImpl implements Database {
   }
 
   async compact() {
-    const db = await this.checkSetup()
+    return this.performCall(db => {
-    return this.updateOutput(() => db.compact())
+      return () => db.compact()
+    })
   }
 
   // All below functions are in-frequently called, just utilise PouchDB

packages/backend-core/src/db/instrumentation.ts

@@ -31,13 +31,6 @@ export class DDInstrumentedDatabase implements Database {
     })
   }
 
-  checkSetup(): Promise<DocumentScope<any>> {
-    return tracer.trace("db.checkSetup", span => {
-      span?.addTags({ db_name: this.name })
-      return this.db.checkSetup()
-    })
-  }
-
   get<T extends Document>(id?: string | undefined): Promise<T> {
     return tracer.trace("db.get", span => {
       span?.addTags({ db_name: this.name, doc_id: id })

packages/backend-core/src/environment.ts

@@ -166,6 +166,8 @@ const environment = {
   DISABLE_JWT_WARNING: process.env.DISABLE_JWT_WARNING,
   BLACKLIST_IPS: process.env.BLACKLIST_IPS,
   SERVICE_TYPE: "unknown",
+  PASSWORD_MIN_LENGTH: process.env.PASSWORD_MIN_LENGTH,
+  PASSWORD_MAX_LENGTH: process.env.PASSWORD_MAX_LENGTH,
   /**
    * Enable to allow an admin user to login using a password.
    * This can be useful to prevent lockout when configuring SSO.

packages/backend-core/src/index.ts

@@ -33,6 +33,7 @@ export * as docUpdates from "./docUpdates"
 export * from "./utils/Duration"
 export { SearchParams } from "./db"
 export * as docIds from "./docIds"
+export * as security from "./security"
 // Add context to tenancy for backwards compatibility
 // only do this for external usages to prevent internal
 // circular dependencies

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

@@ -15,6 +15,7 @@ import * as identity from "../context/identity"
 import env from "../environment"
 import { Ctx, EndpointMatcher, SessionCookie } from "@budibase/types"
 import { InvalidAPIKeyError, ErrorCode } from "../errors"
+import tracer from "dd-trace"
 
 const ONE_MINUTE = env.SESSION_UPDATE_PERIOD
   ? parseInt(env.SESSION_UPDATE_PERIOD)
@@ -166,6 +167,16 @@ export default function (
       if (!authenticated) {
         authenticated = false
       }
+
+      if (user) {
+        tracer.setUser({
+          id: user?._id,
+          tenantId: user?.tenantId,
+          budibaseAccess: user?.budibaseAccess,
+          status: user?.status,
+        })
+      }
+
       // isAuthenticated is a function, so use a variable to be able to check authed state
       finalise(ctx, { authenticated, user, internal, version, publicEndpoint })
 

packages/backend-core/src/redis/redlockImpl.ts

@@ -2,7 +2,6 @@ import Redlock from "redlock"
 import { getLockClient } from "./init"
 import { LockOptions, LockType } from "@budibase/types"
 import * as context from "../context"
-import { logWarn } from "../logging"
 import { utils } from "@budibase/shared-core"
 import { Duration } from "../utils"
 

packages/backend-core/src/security/auth.ts

@@ -0,0 +1,24 @@
+import env from "../environment"
+
+export const PASSWORD_MIN_LENGTH = +(env.PASSWORD_MIN_LENGTH || 8)
+export const PASSWORD_MAX_LENGTH = +(env.PASSWORD_MAX_LENGTH || 512)
+
+export function validatePassword(
+  password: string
+): { valid: true } | { valid: false; error: string } {
+  if (!password || password.length < PASSWORD_MIN_LENGTH) {
+    return {
+      valid: false,
+      error: `Password invalid. Minimum ${PASSWORD_MIN_LENGTH} characters.`,
+    }
+  }
+
+  if (password.length > PASSWORD_MAX_LENGTH) {
+    return {
+      valid: false,
+      error: `Password invalid. Maximum ${PASSWORD_MAX_LENGTH} characters.`,
+    }
+  }
+
+  return { valid: true }
+}

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

@@ -0,0 +1 @@
+export * from "./auth"

packages/backend-core/src/security/tests/auth.spec.ts

@@ -0,0 +1,45 @@
+import { generator } from "../../../tests"
+import { PASSWORD_MAX_LENGTH, validatePassword } from "../auth"
+
+describe("auth", () => {
+  describe("validatePassword", () => {
+    it("a valid password returns successful", () => {
+      expect(validatePassword("password")).toEqual({ valid: true })
+    })
+
+    it.each([
+      ["undefined", undefined],
+      ["null", null],
+      ["empty", ""],
+    ])("%s returns unsuccessful", (_, password) => {
+      expect(validatePassword(password as string)).toEqual({
+        valid: false,
+        error: "Password invalid. Minimum 8 characters.",
+      })
+    })
+
+    it.each([
+      generator.word({ length: PASSWORD_MAX_LENGTH }),
+      generator.paragraph().substring(0, PASSWORD_MAX_LENGTH),
+    ])(`can use passwords up to 512 characters in length`, password => {
+      expect(validatePassword(password)).toEqual({
+        valid: true,
+      })
+    })
+
+    it.each([
+      generator.word({ length: PASSWORD_MAX_LENGTH + 1 }),
+      generator
+        .paragraph({ sentences: 50 })
+        .substring(0, PASSWORD_MAX_LENGTH + 1),
+    ])(
+      `passwords cannot have more than ${PASSWORD_MAX_LENGTH} characters`,
+      password => {
+        expect(validatePassword(password)).toEqual({
+          valid: false,
+          error: "Password invalid. Maximum 512 characters.",
+        })
+      }
+    )
+  })
+})

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

@@ -39,7 +39,7 @@ const ALL_STRATEGIES = Object.values(TenantResolutionStrategy)
 export const getTenantIDFromCtx = (
   ctx: BBContext,
   opts: GetTenantIdOptions
-): string | null => {
+): string | undefined => {
   // exit early if not multi-tenant
   if (!isMultiTenant()) {
     return DEFAULT_TENANT_ID
@@ -144,5 +144,5 @@ export const getTenantIDFromCtx = (
     ctx.throw(403, "Tenant id not set")
   }
 
-  return null
+  return undefined
 }

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

@@ -157,12 +157,12 @@ describe("getTenantIDFromCtx", () => {
           TenantResolutionStrategy.PATH,
         ],
       }
-      expect(getTenantIDFromCtx(ctx, mockOpts)).toBeNull()
+      expect(getTenantIDFromCtx(ctx, mockOpts)).toBeUndefined()
       expect(ctx.throw).toBeCalledTimes(1)
       expect(ctx.throw).toBeCalledWith(403, "Tenant id not set")
     })
 
-    it("returns null if allowNoTenant is true", () => {
+    it("returns undefined if allowNoTenant is true", () => {
       const ctx = createCtx({})
       mockOpts = {
         allowNoTenant: true,
@@ -172,7 +172,7 @@ describe("getTenantIDFromCtx", () => {
           TenantResolutionStrategy.PATH,
         ],
       }
-      expect(getTenantIDFromCtx(ctx, mockOpts)).toBeNull()
+      expect(getTenantIDFromCtx(ctx, mockOpts)).toBeUndefined()
     })
   })
 

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

@@ -50,7 +50,7 @@ export class ExecutionTimeTracker {
     return this.totalTimeMs
   }
 
-  private checkLimit() {
+  checkLimit() {
     if (this.totalTimeMs > this.limitMs) {
       throw new ExecutionTimeoutError(
         `Execution time limit of ${this.limitMs}ms exceeded: ${this.totalTimeMs}ms`

packages/backend-core/src/users/db.ts

@@ -27,6 +27,7 @@ import {
 } from "./utils"
 import { searchExistingEmails } from "./lookup"
 import { hash } from "../utils"
+import { validatePassword } from "../security"
 
 type QuotaUpdateFn = (
   change: number,
@@ -43,6 +44,12 @@ type GroupFns = {
   getBulk: GroupGetFn
   getGroupBuilderAppIds: GroupBuildersFn
 }
+type CreateAdminUserOpts = {
+  ssoId?: string
+  hashPassword?: boolean
+  requirePassword?: boolean
+  skipPasswordValidation?: boolean
+}
 type FeatureFns = { isSSOEnforced: FeatureFn; isAppBuildersEnabled: FeatureFn }
 
 const bulkDeleteProcessing = async (dbUser: User) => {
@@ -110,6 +117,14 @@ export class UserDB {
       if (await UserDB.isPreventPasswordActions(user, account)) {
         throw new HTTPError("Password change is disabled for this user", 400)
       }
+
+      if (!opts.skipPasswordValidation) {
+        const passwordValidation = validatePassword(password)
+        if (!passwordValidation.valid) {
+          throw new HTTPError(passwordValidation.error, 400)
+        }
+      }
+
       hashedPassword = opts.hashPassword ? await hash(password) : password
     } else if (dbUser) {
       hashedPassword = dbUser.password
@@ -482,7 +497,7 @@ export class UserDB {
     email: string,
     password: string,
     tenantId: string,
-    opts?: { ssoId?: string; hashPassword?: boolean; requirePassword?: boolean }
+    opts?: CreateAdminUserOpts
   ) {
     const user: User = {
       email: email,
@@ -506,6 +521,7 @@ export class UserDB {
     return await UserDB.save(user, {
       hashPassword: opts?.hashPassword,
       requirePassword: opts?.requirePassword,
+      skipPasswordValidation: opts?.skipPasswordValidation,
     })
   }
 

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

@@ -31,8 +31,8 @@ export async function resolveAppUrl(ctx: Ctx) {
   const appUrl = ctx.path.split("/")[2]
   let possibleAppUrl = `/${appUrl.toLowerCase()}`
 
-  let tenantId: string | null = context.getTenantId()
+  let tenantId: string | undefined = context.getTenantId()
-  if (env.MULTI_TENANCY) {
+  if (!env.isDev() && env.MULTI_TENANCY) {
     // always use the tenant id from the subdomain in multi tenancy
     // this ensures the logged-in user tenant id doesn't overwrite
     // e.g. in the case of viewing a public app while already logged-in to another tenant
@@ -41,7 +41,7 @@ export async function resolveAppUrl(ctx: Ctx) {
     })
   }
 
-  // search prod apps for a url that matches
+  // search prod apps for an url that matches
   const apps: App[] = await context.doInTenant(
     tenantId,
     () => getAllApps({ dev: false }) as Promise<App[]>

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

@@ -21,7 +21,7 @@ export const user = (userProps?: Partial<Omit<User, "userId">>): User => {
     _id: userId,
     userId,
     email: newEmail(),
-    password: "test",
+    password: "password",
     roles: { app_test: "admin" },
     firstName: generator.first(),
     lastName: generator.last(),

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -130,5 +130,6 @@
     max-width: 150px;
     transform: translateX(-50%);
     text-align: center;
+    z-index: 1;
   }
 </style>

packages/bbui/src/DetailSummary/DetailSummary.svelte

@@ -78,7 +78,7 @@
       var(--spacing-xl);
   }
   .property-panel.no-title {
-    padding: var(--spacing-xl);
+    padding-top: var(--spacing-xl);
   }
 
   .show {

packages/bbui/src/Form/Field.svelte

@@ -51,15 +51,13 @@
     margin-top: var(--spectrum-global-dimension-size-75);
     align-items: center;
   }
-
   .helpText :global(svg) {
-    width: 14px;
+    width: 13px;
-    color: var(--grey-5);
+    color: var(--spectrum-global-color-gray-600);
     margin-right: 6px;
   }
-
   .helpText span {
-    color: var(--grey-7);
+    color: var(--spectrum-global-color-gray-800);
     font-size: var(--spectrum-global-dimension-font-size-75);
   }
 </style>

packages/bbui/src/Markdown/MarkdownEditor.svelte

@@ -19,7 +19,7 @@
   // Ensure the value is updated if the value prop changes outside the editor's
   // control
   $: checkValue(value)
-  $: mde?.codemirror.on("change", debouncedUpdate)
+  $: mde?.codemirror.on("blur", update)
   $: if (readonly || disabled) {
     mde?.togglePreview()
   }
@@ -30,21 +30,10 @@
     }
   }
 
-  const debounce = (fn, interval) => {
-    let timeout
-    return () => {
-      clearTimeout(timeout)
-      timeout = setTimeout(fn, interval)
-    }
-  }
-
   const update = () => {
     latestValue = mde.value()
     dispatch("change", latestValue)
   }
-
-  // Debounce the update function to avoid spamming it constantly
-  const debouncedUpdate = debounce(update, 250)
 </script>
 
 {#key height}

packages/bbui/src/Modal/ModalContent.svelte

@@ -40,7 +40,7 @@
     loading = false
   }
 
-  async function confirm() {
+  export async function confirm() {
     loading = true
     if (!onConfirm || (await onConfirm()) !== keepOpen) {
       hide()

packages/builder/src/api.js

@@ -5,7 +5,7 @@ import {
 } from "@budibase/frontend-core"
 import { store } from "./builderStore"
 import { get } from "svelte/store"
-import { auth } from "./stores/portal"
+import { auth, navigation } from "./stores/portal"
 
 export const API = createAPIClient({
   attachHeaders: headers => {
@@ -45,4 +45,15 @@ export const API = createAPIClient({
       }
     }
   },
+  onMigrationDetected: appId => {
+    const updatingUrl = `/builder/app/updating/${appId}`
+
+    if (window.location.pathname === updatingUrl) {
+      return
+    }
+
+    get(navigation).goto(
+      `${updatingUrl}?returnUrl=${encodeURIComponent(window.location.pathname)}`
+    )
+  },
 })

packages/builder/src/builderStore/dataBinding.js

@@ -465,8 +465,8 @@ const filterCategoryByContext = (component, context) => {
   const { _component } = component
   if (_component.endsWith("formblock")) {
     if (
-      (component.actionType == "Create" && context.type === "schema") ||
+      (component.actionType === "Create" && context.type === "schema") ||
-      (component.actionType == "View" && context.type === "form")
+      (component.actionType === "View" && context.type === "form")
     ) {
       return false
     }
@@ -474,20 +474,21 @@ const filterCategoryByContext = (component, context) => {
   return true
 }
 
+// Enrich binding category information for certain components
 const getComponentBindingCategory = (component, context, def) => {
   let icon = def.icon
   let category = component._instanceName
 
   if (component._component.endsWith("formblock")) {
-    let contextCategorySuffix = {
+    if (context.type === "form") {
-      form: "Fields",
+      category = `${component._instanceName} - Fields`
-      schema: "Row",
+      icon = "Form"
+    } else if (context.type === "schema") {
+      category = `${component._instanceName} - Row`
+      icon = "Data"
     }
-    category = `${component._instanceName} - ${
-      contextCategorySuffix[context.type]
-    }`
-    icon = context.type === "form" ? "Form" : "Data"
   }
+
   return {
     icon,
     category,

packages/builder/src/builderStore/store/frontend.js

@@ -85,7 +85,6 @@ const INITIAL_FRONTEND_STATE = {
   selectedScreenId: null,
   selectedComponentId: null,
   selectedLayoutId: null,
-  hoverComponentId: null,
 
   // Client state
   selectedComponentInstance: null,
@@ -93,6 +92,9 @@ const INITIAL_FRONTEND_STATE = {
   // Onboarding
   onboarding: false,
   tourNodes: null,
+
+  // UI state
+  hoveredComponentId: null,
 }
 
 export const getFrontendStore = () => {
@@ -610,12 +612,12 @@ export const getFrontendStore = () => {
           // Use default config if the 'buttons' prop has never been initialised
           if (!("buttons" in enrichedComponent)) {
             enrichedComponent["buttons"] =
-              Utils.buildDynamicButtonConfig(enrichedComponent)
+              Utils.buildFormBlockButtonConfig(enrichedComponent)
             migrated = true
           } else if (enrichedComponent["buttons"] == null) {
             // Ignore legacy config if 'buttons' has been reset by 'resetOn'
             const { _id, actionType, dataSource } = enrichedComponent
-            enrichedComponent["buttons"] = Utils.buildDynamicButtonConfig({
+            enrichedComponent["buttons"] = Utils.buildFormBlockButtonConfig({
               _id,
               actionType,
               dataSource,
@@ -1289,15 +1291,14 @@ export const getFrontendStore = () => {
           const settings = getComponentSettings(component._component)
           const updatedSetting = settings.find(setting => setting.key === name)
 
-          // Can be a single string or array of strings
+          // Reset dependent fields
-          const resetFields = settings.filter(setting => {
+          settings.forEach(setting => {
-            return (
+            const needsReset =
               name === setting.resetOn ||
               (Array.isArray(setting.resetOn) && setting.resetOn.includes(name))
-            )
+            if (needsReset) {
-          })
+              component[setting.key] = setting.defaultValue || null
-          resetFields?.forEach(setting => {
+            }
-            component[setting.key] = null
           })
 
           if (
@@ -1414,6 +1415,18 @@ export const getFrontendStore = () => {
           return state
         })
       },
+      hover: (componentId, notifyClient = true) => {
+        if (componentId === get(store).hoveredComponentId) {
+          return
+        }
+        store.update(state => {
+          state.hoveredComponentId = componentId
+          return state
+        })
+        if (notifyClient) {
+          store.actions.preview.sendEvent("hover-component", componentId)
+        }
+      },
     },
     links: {
       save: async (url, title) => {

packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte

@@ -152,7 +152,7 @@
             {#if isDisabled && !syncAutomationsEnabled && action.stepId === ActionStepID.COLLECT}
               <div class="tag-color">
                 <Tags>
-                  <Tag icon="LockClosed">Business</Tag>
+                  <Tag icon="LockClosed">Premium</Tag>
                 </Tags>
               </div>
             {:else if isDisabled}

packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte

@@ -41,7 +41,7 @@
       { label: "False", value: "false" },
     ]}
   />
-{:else if schema.type === "array"}
+{:else if schemaHasOptions(schema) && schema.type === "array"}
   <Multiselect
     bind:value={value[field]}
     options={schema.constraints.inclusion}
@@ -77,7 +77,7 @@
     on:change={e => onChange(e, field)}
     useLabel={false}
   />
-{:else if ["string", "number", "bigint", "barcodeqr"].includes(schema.type)}
+{:else if ["string", "number", "bigint", "barcodeqr", "array"].includes(schema.type)}
   <svelte:component
     this={isTestModal ? ModalBindableInput : DrawerBindableInput}
     panel={AutomationBindingPanel}

packages/builder/src/components/backend/Datasources/ConfigEditor/stores/validation.js

@@ -1,4 +1,4 @@
-import { string, number } from "yup"
+import { string, number, object } from "yup"
 
 const propertyValidator = type => {
   if (type === "number") {
@@ -9,6 +9,10 @@ const propertyValidator = type => {
     return string().email().nullable()
   }
 
+  if (type === "object") {
+    return object().nullable()
+  }
+
   return string().nullable()
 }
 

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

@@ -53,6 +53,7 @@
   export let value = ""
   export let placeholder = null
   export let autocompleteEnabled = true
+  export let autofocus = false
 
   // Export a function to expose caret position
   export const getCaretPosition = () => {
@@ -241,6 +242,12 @@
     })
   }
 
+  $: {
+    if (autofocus && isEditorInitialised) {
+      editor.focus()
+    }
+  }
+
   $: editorHeight = typeof height === "number" ? `${height}px` : height
 
   // Init when all elements are ready

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

@@ -45,6 +45,7 @@
   export let valid
   export let allowJS = false
   export let allowHelpers = true
+  export let autofocusEditor = false
 
   const drawerActions = getContext("drawer-actions")
   const bindingDrawerActions = getContext("binding-drawer-actions")
@@ -199,6 +200,7 @@
                   ]}
                   placeholder=""
                   height="100%"
+                  autofocus={autofocusEditor}
                 />
               </div>
               <div class="binding-footer">
@@ -301,6 +303,7 @@
                     bind:getCaretPosition
                     bind:insertAtPos
                     height="100%"
+                    autofocus={autofocusEditor}
                   />
                 </div>
                 <div class="binding-footer">

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

@@ -6,6 +6,7 @@
   export let value = ""
   export let allowJS = false
   export let allowHelpers = true
+  export let autofocusEditor = false
 
   $: enrichedBindings = enrichBindings(bindings)
 
@@ -27,5 +28,6 @@
   {value}
   {allowJS}
   {allowHelpers}
+  {autofocusEditor}
   on:change
 />

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

@@ -44,7 +44,11 @@
   })
 
   const onChange = value => {
-    if (type === "link" && value && hasValidLinks(value)) {
+    if (
+      (type === "link" || type === "bb_reference") &&
+      value &&
+      hasValidLinks(value)
+    ) {
       currentVal = value.split(",")
     } else if (type === "array" && value && hasValidOptions(value)) {
       currentVal = value.split(",")
@@ -95,6 +99,7 @@
     date: isValidDate,
     datetime: isValidDate,
     link: hasValidLinks,
+    bb_reference: hasValidLinks,
     array: hasValidOptions,
     longform: value => !isJSBinding(value),
     json: value => !isJSBinding(value),

packages/builder/src/components/design/ScreenDetailsModal.svelte

@@ -13,6 +13,7 @@
   const appPrefix = "/app"
   let touched = false
   let error
+  let modal
 
   $: appUrl = screenUrl
     ? `${window.location.origin}${appPrefix}${screenUrl}`
@@ -50,6 +51,7 @@
 </script>
 
 <ModalContent
+  bind:this={modal}
   size="M"
   title={"Screen details"}
   {confirmText}
@@ -58,15 +60,17 @@
   cancelText={"Back"}
   disabled={!screenUrl || error || !touched}
 >
-  <Input
+  <form on:submit|preventDefault={() => modal.confirm()}>
-    label="Enter a URL for the new screen"
+    <Input
-    {error}
+      label="Enter a URL for the new screen"
-    bind:value={screenUrl}
+      {error}
-    on:change={routeChanged}
+      bind:value={screenUrl}
-  />
+      on:change={routeChanged}
-  <div class="app-server" title={appUrl}>
+    />
-    {appUrl}
+    <div class="app-server" title={appUrl}>
-  </div>
+      {appUrl}
+    </div>
+  </form>
 </ModalContent>
 
 <style>

packages/builder/src/components/design/settings/componentSettings.js

@@ -25,6 +25,8 @@ import BarButtonList from "./controls/BarButtonList.svelte"
 import FieldConfiguration from "./controls/FieldConfiguration/FieldConfiguration.svelte"
 import ButtonConfiguration from "./controls/ButtonConfiguration/ButtonConfiguration.svelte"
 import RelationshipFilterEditor from "./controls/RelationshipFilterEditor.svelte"
+import FormStepConfiguration from "./controls/FormStepConfiguration.svelte"
+import FormStepControls from "components/design/settings/controls/FormStepControls.svelte"
 
 const componentMap = {
   text: DrawerBindableInput,
@@ -51,6 +53,8 @@ const componentMap = {
   url: URLSelect,
   fieldConfiguration: FieldConfiguration,
   buttonConfiguration: ButtonConfiguration,
+  stepConfiguration: FormStepConfiguration,
+  formStepControls: FormStepControls,
   columns: ColumnEditor,
   "columns/basic": BasicColumnEditor,
   "columns/grid": GridColumnEditor,

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

@@ -34,6 +34,9 @@
   $: canAddButtons = max == null || buttonList.length < max
 
   const sanitizeValue = val => {
+    if (!Array.isArray(val)) {
+      return null
+    }
     return val?.map(button => {
       return button._component ? button : buildPseudoInstance(button)
     })

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

@@ -13,6 +13,8 @@
   export let draggable = true
   export let focus
 
+  let zoneType = generate()
+
   let store = writable({
     selected: null,
     actions: {
@@ -46,6 +48,7 @@
         return {
           id: listItemKey ? item[listItemKey] : generate(),
           item,
+          type: zoneType,
         }
       })
       .filter(item => item.id)
@@ -83,6 +86,8 @@
     items: draggableItems,
     dropTargetStyle: { outline: "none" },
     dragDisabled: !draggable || inactive,
+    type: zoneType,
+    dropFromOthersDisabled: true,
   }}
   on:finalize={handleFinalize}
   on:consider={updateRowOrder}

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

@@ -14,6 +14,7 @@
   import { convertOldFieldFormat, getComponentForField } from "./utils"
 
   export let componentInstance
+  export let bindings
   export let value
 
   const dispatch = createEventDispatcher()
@@ -28,7 +29,9 @@
 
   let selectAll = true
 
-  $: bindings = getBindableProperties($selectedScreen, componentInstance._id)
+  $: resolvedBindings =
+    bindings || getBindableProperties($selectedScreen, componentInstance._id)
+
   $: actionType = componentInstance.actionType
   let componentBindings = []
 
@@ -39,7 +42,10 @@
     )
   }
 
-  $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
+  $: datasource =
+    componentInstance.dataSource ||
+    getDatasourceForProvider($currentAsset, componentInstance)
+
   $: resourceId = datasource?.resourceId || datasource?.tableId
 
   $: if (!isEqual(value, cachedValue)) {
@@ -179,7 +185,7 @@
       listType={FieldSetting}
       listTypeProps={{
         componentBindings,
-        bindings,
+        bindings: resolvedBindings,
       }}
     />
   {/if}

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

@@ -41,7 +41,7 @@
 <div class="filter-editor">
   <ActionButton on:click={drawer.show}>{text}</ActionButton>
 </div>
-<Drawer bind:this={drawer} title="Filtering">
+<Drawer bind:this={drawer} title="Filtering" on:drawerHide on:drawerShow>
   <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
   <FilterDrawer
     slot="body"

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

@@ -0,0 +1,182 @@
+<script>
+  import { createEventDispatcher, setContext } from "svelte"
+  import ComponentSettingsSection from "../../../../pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
+  import { getDatasourceForProvider } from "builderStore/dataBinding"
+  import { currentAsset, store } from "builderStore"
+  import { Helpers } from "@budibase/bbui"
+  import { derived, writable } from "svelte/store"
+  import { Utils } from "@budibase/frontend-core"
+  import { cloneDeep, isEqual } from "lodash"
+
+  export let componentInstance
+  export let componentBindings
+  export let value
+  export let bindings
+
+  const dispatch = createEventDispatcher()
+  const multiStepStore = writable({
+    stepCount: value?.length ?? 0,
+    currentStep: 0,
+  })
+  const currentStep = derived(multiStepStore, state => state.currentStep)
+  const componentType = "@budibase/standard-components/multistepformblockstep"
+
+  let cachedValue
+  let cachedInstance = {}
+
+  $: if (!isEqual(cachedValue, value)) {
+    cachedValue = value
+  }
+
+  $: if (!isEqual(componentInstance, cachedInstance)) {
+    cachedInstance = componentInstance
+  }
+
+  setContext("multi-step-form-block", multiStepStore)
+
+  $: stepCount = cachedValue?.length || 0
+  $: updateStore(stepCount)
+  $: dataSource = getDatasourceForProvider($currentAsset, cachedInstance)
+  $: emitCurrentStep($currentStep)
+  $: stepLabel = getStepLabel($multiStepStore)
+  $: stepDef = getDefinition(stepLabel)
+  $: stepSettings = cachedValue?.[$currentStep] || {}
+  $: defaults = Utils.buildMultiStepFormBlockDefaultProps({
+    _id: cachedInstance._id,
+    stepCount: $multiStepStore.stepCount,
+    currentStep: $multiStepStore.currentStep,
+    actionType: cachedInstance.actionType,
+    dataSource: cachedInstance.dataSource,
+  })
+  $: stepInstance = {
+    _id: Helpers.uuid(),
+    _component: componentType,
+    _instanceName: `Step ${currentStep + 1}`,
+    title: stepSettings.title ?? defaults.title,
+    buttons: stepSettings.buttons || defaults.buttons,
+    fields: stepSettings.fields,
+    desc: stepSettings.desc,
+
+    // Needed for field configuration
+    dataSource,
+  }
+
+  const getDefinition = stepLabel => {
+    let def = cloneDeep(store.actions.components.getDefinition(componentType))
+    def.settings.find(x => x.key === "steps").label = stepLabel
+    return def
+  }
+
+  const updateStore = stepCount => {
+    multiStepStore.update(state => {
+      state.stepCount = stepCount
+      if (state.currentStep >= stepCount) {
+        state.currentStep = 0
+      }
+      return { ...state }
+    })
+  }
+
+  const getStepLabel = ({ stepCount, currentStep }) => {
+    if (stepCount <= 1) {
+      return "Steps"
+    }
+    return `Steps (${currentStep + 1}/${stepCount})`
+  }
+
+  const emitCurrentStep = step => {
+    store.actions.preview.sendEvent("builder-meta", {
+      componentId: componentInstance._id,
+      step: step,
+    })
+  }
+
+  const addStep = () => {
+    value = value.toSpliced($currentStep + 1, 0, {})
+    dispatch("change", value)
+    multiStepStore.update(state => ({
+      ...state,
+      currentStep: $currentStep + 1,
+    }))
+  }
+
+  const removeStep = () => {
+    value = value.toSpliced($currentStep, 1)
+    dispatch("change", value)
+    multiStepStore.update(state => ({
+      ...state,
+      currentStep: Math.min($currentStep, stepCount - 2),
+    }))
+  }
+
+  const previousStep = () => {
+    multiStepStore.update(state => ({
+      ...state,
+      currentStep: Math.max($currentStep - 1, 0),
+    }))
+  }
+
+  const nextStep = () => {
+    multiStepStore.update(state => ({
+      ...state,
+      currentStep: Math.min($currentStep + 1, value.length - 1),
+    }))
+  }
+
+  const updateStep = (field, val) => {
+    const newStep = {
+      ...value[$currentStep],
+      [field.key]: val,
+    }
+    value = value.toSpliced($currentStep, 1, newStep)
+    dispatch("change", value)
+  }
+
+  const handleStepAction = action => {
+    switch (action) {
+      case "addStep":
+        addStep()
+        break
+      case "removeStep":
+        removeStep()
+        break
+      case "nextStep":
+        nextStep()
+        break
+      case "previousStep":
+        previousStep()
+    }
+  }
+
+  const processUpdate = (field, val) => {
+    if (field.key === "steps") {
+      handleStepAction(val.action)
+    } else {
+      updateStep(field, val)
+    }
+  }
+</script>
+
+<div class="nested-section">
+  <ComponentSettingsSection
+    includeHidden
+    componentInstance={stepInstance}
+    componentDefinition={stepDef}
+    onUpdateSetting={processUpdate}
+    showSectionTitle={false}
+    isScreen={false}
+    nested={true}
+    {bindings}
+    {componentBindings}
+  />
+</div>
+
+<style>
+  .nested-section {
+    margin: 0 calc(-1 * var(--spacing-xl)) calc(-1 * var(--spacing-xl))
+      calc(-1 * var(--spacing-xl));
+  }
+  .nested-section :global(.property-panel) {
+    padding-top: 0;
+  }
+</style>

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

@@ -0,0 +1,84 @@
+<script>
+  import { createEventDispatcher, getContext } from "svelte"
+  import { ActionButton } from "@budibase/bbui"
+
+  const multiStepStore = getContext("multi-step-form-block")
+  const dispatch = createEventDispatcher()
+
+  $: ({ stepCount, currentStep } = $multiStepStore)
+
+  const stepAction = action => {
+    dispatch("change", {
+      action,
+    })
+  }
+</script>
+
+{#if stepCount === 1}
+  <div class="stretch">
+    <ActionButton
+      icon="MultipleAdd"
+      secondary
+      on:click={() => {
+        stepAction("addStep")
+      }}
+    >
+      Add step
+    </ActionButton>
+  </div>
+{:else}
+  <div class="step-actions">
+    <ActionButton
+      size="S"
+      secondary
+      icon="ChevronLeft"
+      disabled={currentStep === 0}
+      on:click={() => {
+        stepAction("previousStep")
+      }}
+      tooltip={"Previous step"}
+    />
+    <ActionButton
+      size="S"
+      secondary
+      disabled={currentStep === stepCount - 1}
+      icon="ChevronRight"
+      on:click={() => {
+        stepAction("nextStep")
+      }}
+      tooltip={"Next step"}
+    />
+    <ActionButton
+      size="S"
+      secondary
+      icon="Close"
+      disabled={stepCount === 1}
+      on:click={() => {
+        stepAction("removeStep")
+      }}
+      tooltip={"Remove step"}
+    />
+    <ActionButton
+      size="S"
+      secondary
+      icon="MultipleAdd"
+      on:click={() => {
+        stepAction("addStep")
+      }}
+      tooltip={"Add step"}
+    />
+  </div>
+{/if}
+
+<style>
+  .stretch :global(.spectrum-ActionButton) {
+    width: 100%;
+  }
+  .step-actions {
+    display: flex;
+    gap: var(--spacing-s);
+  }
+  .step-actions :global(.spectrum-ActionButton) {
+    height: 32px;
+  }
+</style>

packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js

@@ -114,7 +114,7 @@ const getColumns = ({
     primary,
     sortable,
     updateSortable: newDraggableList => {
-      onChange(toGridFormat(newDraggableList.concat(primary)))
+      onChange(toGridFormat(newDraggableList.concat(primary || [])))
     },
     update: newEntry => {
       const newDraggableList = draggableList.map(entry => {

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

@@ -25,7 +25,6 @@
 </script>
 
 <div class="options-wrap">
-  <div />
   <div><ActionButton on:click={drawer.show}>Define Options</ActionButton></div>
 </div>
 <Drawer bind:this={drawer} title="Options" on:drawerHide on:drawerShow>

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

@@ -24,6 +24,7 @@
   export let propertyFocus = false
   export let info = null
   export let disableBindings = false
+  export let wide
 
   $: nullishValue = value == null || value === ""
   $: allBindings = getAllBindings(bindings, componentBindings, nested)
@@ -78,7 +79,7 @@
 
 <div
   class="property-control"
-  class:wide={!label || labelHidden}
+  class:wide={!label || labelHidden || wide === true}
   class:highlighted={highlighted && nullishValue}
   class:property-focus={propertyFocus}
 >
@@ -104,6 +105,7 @@
       {...props}
       on:drawerHide
       on:drawerShow
+      on:meta
     />
   </div>
   {#if info}
@@ -146,15 +148,28 @@
   .control {
     position: relative;
   }
-  .property-control.wide .control {
-    grid-column: 1 / -1;
-  }
   .text {
     font-size: var(--spectrum-global-dimension-font-size-75);
     color: var(--grey-6);
     grid-column: 2 / 2;
   }
+
+  .property-control.wide .control {
+    flex: 1;
+  }
+  .property-control.wide {
+    grid-template-columns: unset;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+  .property-control.wide > * {
+    width: 100%;
+  }
   .property-control.wide .text {
     grid-column: 1 / -1;
   }
+  .property-control.wide .label {
+    margin-bottom: -8px;
+  }
 </style>

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

@@ -1,6 +1,9 @@
 <script>
-  import { currentAsset } from "builderStore"
+  import { currentAsset, store } from "builderStore"
-  import { findClosestMatchingComponent } from "builderStore/componentUtils"
+  import {
+    findClosestMatchingComponent,
+    findComponent,
+  } from "builderStore/componentUtils"
   import {
     getDatasourceForProvider,
     getSchemaForDatasource,
@@ -20,8 +23,23 @@
     component => component._component.endsWith("/form")
   )
 
+  const resolveDatasource = (currentAsset, componentInstance, form) => {
+    if (!form && componentInstance._id != $store.selectedComponentId) {
+      const block = findComponent(
+        currentAsset.props,
+        $store.selectedComponentId
+      )
+      const def = store.actions.components.getDefinition(block._component)
+      return def?.block === true
+        ? getDatasourceForProvider(currentAsset, block)
+        : {}
+    } else {
+      return getDatasourceForProvider(currentAsset, form)
+    }
+  }
+
   // Get that form's schema
-  $: datasource = getDatasourceForProvider($currentAsset, form)
+  $: datasource = resolveDatasource($currentAsset, componentInstance, form)
   $: formSchema = getSchemaForDatasource($currentAsset, datasource)?.schema
 
   // Get the schema for the relationship field that this picker is using
@@ -32,4 +50,4 @@
   $: schema = linkedTable?.schema
 </script>
 
-<FilterEditor on:change {...$$props} {schema} />
+<FilterEditor on:change {...$$props} {schema} on:drawerHide on:drawerShow />

packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte

@@ -12,7 +12,10 @@
   } from "@budibase/bbui"
   import { currentAsset, selectedComponent } from "builderStore"
   import { findClosestMatchingComponent } from "builderStore/componentUtils"
-  import { getSchemaForDatasource } from "builderStore/dataBinding"
+  import {
+    getSchemaForDatasource,
+    getDatasourceForProvider,
+  } from "builderStore/dataBinding"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
   import { generate } from "shortid"
 
@@ -124,6 +127,12 @@
     ],
   }
 
+  const resolveDatasource = (currentAsset, componentInstance, parent) => {
+    return (
+      getDatasourceForProvider(currentAsset, parent || componentInstance) || {}
+    )
+  }
+
   $: dataSourceSchema = getDataSourceSchema($currentAsset, $selectedComponent)
   $: field = fieldName || $selectedComponent?.field
   $: schemaRules = parseRulesFromSchema(field, dataSourceSchema || {})
@@ -146,8 +155,8 @@
         component._component.endsWith("/formblock") ||
         component._component.endsWith("/tableblock")
     )
-
+    const dataSource = resolveDatasource(asset, component, formParent)
-    return getSchemaForDatasource(asset, formParent?.dataSource)
+    return getSchemaForDatasource(asset, dataSource)
   }
 
   const parseRulesFromSchema = (field, dataSourceSchema) => {

packages/builder/src/pages/builder/_layout.svelte

@@ -1,6 +1,6 @@
 <script>
   import { isActive, redirect, params } from "@roxi/routify"
-  import { admin, auth, licensing } from "stores/portal"
+  import { admin, auth, licensing, navigation } from "stores/portal"
   import { onMount } from "svelte"
   import { CookieUtils, Constants } from "@budibase/frontend-core"
   import { API } from "api"
@@ -17,6 +17,8 @@
 
   $: useAccountPortal = cloud && !$admin.disableAccountPortal
 
+  navigation.actions.init($redirect)
+
   const validateTenantId = async () => {
     const host = window.location.host
     if (host.includes("localhost:") || !baseUrl) {

packages/builder/src/pages/builder/admin/index.svelte

@@ -38,7 +38,7 @@
       $goto("../portal")
     } catch (error) {
       submitted = false
-      notifications.error("Failed to create admin user")
+      notifications.error(error.message || "Failed to create admin user")
     }
   }
 </script>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte

@@ -108,6 +108,8 @@
           {componentInstance}
           {componentDefinition}
           {bindings}
+          iconTooltip={componentName}
+          componentTitle={title}
         />
       {/if}
       {#if section == "conditions"}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte

@@ -32,21 +32,19 @@
     const generalSettings = settings.filter(
       setting => !setting.section && setting.tag === tag
     )
-
     const customSections = settings.filter(
       setting => setting.section && setting.tag === tag
     )
-    let sections = [
+    let sections = []
-      ...(generalSettings?.length
+    if (generalSettings.length) {
-        ? [
+      sections.push({
-            {
+        name: "General",
-              name: "General",
+        settings: generalSettings,
-              settings: generalSettings,
+      })
-            },
+    }
-          ]
+    if (customSections.length) {
-        : []),
+      sections = sections.concat(customSections)
-      ...(customSections || []),
+    }
-    ]
 
     // Filter out settings which shouldn't be rendered
     sections.forEach(section => {
@@ -153,6 +151,7 @@
     <DetailSummary
       name={showSectionTitle ? section.name : ""}
       initiallyShow={section.collapsed !== true}
+      collapsible={section.name !== "General"}
     >
       {#if section.info}
         <div class="section-info">
@@ -172,6 +171,7 @@
               control={getComponentForSetting(setting)}
               label={setting.label}
               labelHidden={setting.labelHidden}
+              wide={setting.wide}
               key={setting.key}
               value={componentInstance[setting.key]}
               defaultValue={setting.defaultValue}
@@ -208,7 +208,7 @@
     </DetailSummary>
   {/if}
 {/each}
-{#if componentDefinition?.block && !tag}
+{#if componentDefinition?.block && !tag && componentDefinition.ejectable !== false}
   <DetailSummary name="Eject" collapsible={false}>
     <EjectBlockButton />
   </DetailSummary>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte

@@ -5,6 +5,9 @@
     Drawer,
     Button,
     notifications,
+    AbsTooltip,
+    Icon,
+    Body,
   } from "@budibase/bbui"
   import { selectedScreen, store } from "builderStore"
   import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
@@ -15,6 +18,9 @@
   } from "builderStore/dataBinding"
 
   export let componentInstance
+  export let componentDefinition
+  export let iconTooltip
+  export let componentTitle
 
   let tempValue
   let drawer
@@ -24,6 +30,8 @@
     $store.selectedComponentId
   )
 
+  $: icon = componentDefinition?.icon
+
   const openDrawer = () => {
     tempValue = runtimeToReadableBinding(
       bindings,
@@ -54,7 +62,19 @@
 {#key componentInstance?._id}
   <Drawer bind:this={drawer} title="Custom CSS">
     <svelte:fragment slot="description">
-      Custom CSS overrides all other component styles.
+      <div class="header">
+        Your CSS will overwrite styles for:
+        {#if icon}
+          <AbsTooltip type="info" text={iconTooltip}>
+            <Icon
+              color={`var(--spectrum-global-color-gray-600)`}
+              size="S"
+              name={icon}
+            />
+          </AbsTooltip>
+          <Body size="S"><b>{componentTitle || ""}</b></Body>
+        {/if}
+      </div>
     </svelte:fragment>
     <Button cta slot="buttons" on:click={save}>Save</Button>
     <svelte:component
@@ -64,6 +84,17 @@
       on:change={event => (tempValue = event.detail)}
       allowJS
       {bindings}
+      autofocusEditor={true}
     />
   </Drawer>
 {/key}
+
+<style>
+  .header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+</style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json

@@ -8,6 +8,7 @@
       "cardsblock",
       "repeaterblock",
       "formblock",
+      "multistepformblock",
       "chartblock",
       "rowexplorer"
     ]

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte

@@ -36,14 +36,12 @@
 
   // Determine selected component ID
   $: selectedComponentId = $store.selectedComponentId
-  $: hoverComponentId = $store.hoverComponentId
 
   $: previewData = {
     appId: $store.appId,
     layout,
     screen,
     selectedComponentId,
-    hoverComponentId,
     theme: $store.theme,
     customTheme: $store.customTheme,
     previewDevice: $store.previewDevice,
@@ -119,8 +117,8 @@
       error = event.error || "An unknown error occurred"
     } else if (type === "select-component" && data.id) {
       $store.selectedComponentId = data.id
-    } else if (type === "hover-component" && data.id) {
+    } else if (type === "hover-component") {
-      $store.hoverComponentId = data.id
+      store.actions.components.hover(data.id, false)
     } else if (type === "update-prop") {
       await store.actions.components.updateSetting(data.prop, data.value)
     } else if (type === "update-styles") {

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentDropdownMenu.svelte

@@ -7,6 +7,7 @@
   $: definition = store.actions.components.getDefinition(component?._component)
   $: noPaste = !$store.componentToPaste
   $: isBlock = definition?.block === true
+  $: canEject = !(definition?.ejectable === false)
 
   const keyboardEvent = (key, ctrlKey = false) => {
     document.dispatchEvent(
@@ -32,7 +33,7 @@
   >
     Delete
   </MenuItem>
-  {#if isBlock}
+  {#if isBlock && canEject}
     <MenuItem
       icon="Export"
       keyBind="Ctrl+E"

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentKeyHandler.svelte

@@ -32,8 +32,15 @@
       await store.actions.components.paste(component, "below")
     },
     ["Ctrl+e"]: component => {
-      componentToEject = component
+      const definition = store.actions.components.getDefinition(
-      confirmEjectDialog.show()
+        component._component
+      )
+      const isBlock = definition?.block === true
+      const canEject = !(definition?.ejectable === false)
+      if (isBlock && canEject) {
+        componentToEject = component
+        confirmEjectDialog.show()
+      }
     },
     ["Ctrl+Enter"]: () => {
       $goto(`./:componentId/new`)

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte

@@ -90,16 +90,7 @@
     return findComponentPath($selectedComponent, component._id)?.length > 0
   }
 
-  const handleMouseover = componentId => {
+  const hover = store.actions.components.hover
-    if ($store.hoverComponentId !== componentId) {
-      $store.hoverComponentId = componentId
-    }
-  }
-  const handleMouseout = componentId => {
-    if ($store.hoverComponentId === componentId) {
-      $store.hoverComponentId = null
-    }
-  }
 </script>
 
 <ul>
@@ -120,9 +111,9 @@
         on:dragover={dragover(component, index)}
         on:iconClick={() => toggleNodeOpen(component._id)}
         on:drop={onDrop}
-        hovering={$store.hoverComponentId === component._id}
+        hovering={$store.hoveredComponentId === component._id}
-        on:mouseenter={() => handleMouseover(component._id)}
+        on:mouseenter={() => hover(component._id)}
-        on:mouseleave={() => handleMouseout(component._id)}
+        on:mouseleave={() => hover(null)}
         text={getComponentText(component)}
         icon={getComponentIcon(component)}
         iconTooltip={getComponentName(component)}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte

@@ -12,6 +12,9 @@
 
   let scrolling = false
 
+  $: screenComponentId = `${$store.selectedScreenId}-screen`
+  $: navComponentId = `${$store.selectedScreenId}-navigation`
+
   const toNewComponentRoute = () => {
     if ($isActive(`./:componentId/new`)) {
       $goto(`./:componentId`)
@@ -33,16 +36,7 @@
     scrolling = e.target.scrollTop !== 0
   }
 
-  const handleMouseover = componentId => {
+  const hover = store.actions.components.hover
-    if ($store.hoverComponentId !== componentId) {
-      $store.hoverComponentId = componentId
-    }
-  }
-  const handleMouseout = componentId => {
-    if ($store.hoverComponentId === componentId) {
-      $store.hoverComponentId = null
-    }
-  }
 </script>
 
 <div class="components">
@@ -65,46 +59,31 @@
             scrollable
             icon="WebPage"
             on:drop={onDrop}
-            on:click={() => {
+            on:click={() => ($store.selectedComponentId = screenComponentId)}
-              $store.selectedComponentId = `${$store.selectedScreenId}-screen`
+            hovering={$store.hoveredComponentId === screenComponentId}
-            }}
+            on:mouseenter={() => hover(screenComponentId)}
-            hovering={$store.hoverComponentId ===
+            on:mouseleave={() => hover(null)}
-              `${$store.selectedScreenId}-screen`}
+            id="component-screen"
-            on:mouseenter={() =>
+            selectedBy={$userSelectedResourceMap[screenComponentId]}
-              handleMouseover(`${$store.selectedScreenId}-screen`)}
-            on:mouseleave={() =>
-              handleMouseout(`${$store.selectedScreenId}-screen`)}
-            id={`component-screen`}
-            selectedBy={$userSelectedResourceMap[
-              `${$store.selectedScreenId}-screen`
-            ]}
           >
             <ScreenslotDropdownMenu component={$selectedScreen?.props} />
           </NavItem>
           <NavItem
             text="Navigation"
             indentLevel={0}
-            selected={$store.selectedComponentId ===
+            selected={$store.selectedComponentId === navComponentId}
-              `${$store.selectedScreenId}-navigation`}
             opened
             scrollable
             icon={$selectedScreen.showNavigation
               ? "Visibility"
               : "VisibilityOff"}
             on:drop={onDrop}
-            on:click={() => {
+            on:click={() => ($store.selectedComponentId = navComponentId)}
-              $store.selectedComponentId = `${$store.selectedScreenId}-navigation`
+            hovering={$store.hoveredComponentId === navComponentId}
-            }}
+            on:mouseenter={() => hover(navComponentId)}
-            hovering={$store.hoverComponentId ===
+            on:mouseleave={() => hover(null)}
-              `${$store.selectedScreenId}-navigation`}
+            id="component-nav"
-            on:mouseenter={() =>
+            selectedBy={$userSelectedResourceMap[navComponentId]}
-              handleMouseover(`${$store.selectedScreenId}-navigation`)}
-            on:mouseleave={() =>
-              handleMouseout(`${$store.selectedScreenId}-navigation`)}
-            id={`component-nav`}
-            selectedBy={$userSelectedResourceMap[
-              `${$store.selectedScreenId}-navigation`
-            ]}
           />
           <ComponentTree
             level={0}

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

@@ -0,0 +1,19 @@
+<script>
+  import { Updating } from "@budibase/frontend-core"
+  import { redirect, params } from "@roxi/routify"
+
+  import { API } from "api"
+
+  async function isMigrationDone() {
+    const response = await API.getMigrationStatus()
+    return response.migrated
+  }
+
+  async function onMigrationDone() {
+    // For some reason routify params is not stripping the ? properly, so we need to check both with and without ?
+    const returnUrl = $params.returnUrl || $params["?returnUrl"]
+    $redirect(returnUrl)
+  }
+</script>
+
+<Updating {isMigrationDone} {onMigrationDone} />

packages/builder/src/pages/builder/auth/reset.svelte

@@ -45,7 +45,7 @@
       }
     } catch (err) {
       submitted = false
-      notifications.error("Unable to reset password")
+      notifications.error(err.message || "Unable to reset password")
     }
   }
 

packages/builder/src/pages/builder/portal/settings/branding.svelte

@@ -214,7 +214,7 @@
         <Heading size="M">Branding</Heading>
         {#if !isCloud && !brandingEnabled}
           <Tags>
-            <Tag icon="LockClosed">Business</Tag>
+            <Tag icon="LockClosed">Premium</Tag>
           </Tags>
         {/if}
         {#if isCloud && !brandingEnabled}

packages/builder/src/pages/builder/portal/users/groups/index.svelte

@@ -97,7 +97,7 @@
       <Heading size="M">Groups</Heading>
       {#if !$licensing.groupsEnabled}
         <Tags>
-          <Tag icon="LockClosed">Business</Tag>
+          <Tag icon="LockClosed">Enterpise</Tag>
         </Tags>
       {/if}
     </div>

packages/builder/src/stores/portal/index.js

@@ -16,5 +16,6 @@ export { environment } from "./environment"
 export { menu } from "./menu"
 export { auditLogs } from "./auditLogs"
 export { features } from "./features"
+export { navigation } from "./navigation"
 
 export const sideBarCollapsed = writable(false)

packages/builder/src/stores/portal/navigation.js

@@ -0,0 +1,31 @@
+import { writable } from "svelte/store"
+
+export function createNavigationStore() {
+  const store = writable({
+    initialisated: false,
+    goto: undefined,
+  })
+  const { set, subscribe } = store
+
+  const init = gotoFunc => {
+    if (typeof gotoFunc !== "function") {
+      throw new Error(
+        `gotoFunc must be a function, found a "${typeof gotoFunc}" instead`
+      )
+    }
+
+    set({
+      initialisated: true,
+      goto: gotoFunc,
+    })
+  }
+
+  return {
+    subscribe,
+    actions: {
+      init,
+    },
+  }
+}
+
+export const navigation = createNavigationStore()

packages/cli/.gitignore

@@ -5,7 +5,6 @@ build/
 docker-error.log
 envoy.yaml
 *.tar.gz
-prebuilds/
 dist/
 budibase-automation/
 budibase-component/

packages/cli/package.json

@@ -9,26 +9,11 @@
   "author": "Budibase",
   "license": "GPL-3.0",
   "scripts": {
-    "prebuild": "rm -rf prebuilds 2> /dev/null && cp -r ../../node_modules/leveldown/prebuilds prebuilds",
-    "rename": "renamer --find .node --replace .fake 'prebuilds/**'",
     "tsc": "node ../../scripts/build.js",
-    "pkg": "pkg . --out-path build --no-bytecode --public --public-packages \"*\" -C GZip",
+    "build": "yarn tsc",
-    "build": "yarn prebuild && yarn rename && yarn tsc && yarn pkg && yarn postbuild",
     "check:types": "tsc -p tsconfig.json --noEmit --paths null",
-    "postbuild": "rm -rf prebuilds 2> /dev/null",
     "start": "ts-node ./src/index.ts"
   },
-  "pkg": {
-    "targets": [
-      "node18-linux",
-      "node18-win",
-      "node18-macos"
-    ],
-    "assets": [
-      "prebuilds/**/*"
-    ],
-    "outputPath": "build"
-  },
   "dependencies": {
     "@budibase/backend-core": "0.0.0",
     "@budibase/string-templates": "0.0.0",
@@ -43,7 +28,6 @@
     "inquirer": "8.0.0",
     "lookpath": "1.1.0",
     "node-fetch": "2.6.7",
-    "pkg": "5.8.0",
     "posthog-node": "1.3.0",
     "pouchdb": "7.3.0",
     "pouchdb-replication-stream": "1.2.9",
@@ -55,7 +39,6 @@
     "@types/jest": "29.5.5",
     "@types/node-fetch": "2.6.4",
     "@types/pouchdb": "^6.4.0",
-    "renamer": "^4.0.0",
     "ts-node": "10.8.1",
     "typescript": "5.2.2"
   }

packages/cli/src/index.ts

@@ -1,10 +1,9 @@
 #!/usr/bin/env node
 process.env.DISABLE_PINO_LOGGER = "1"
-import "./prebuilds"
 import "./environment"
 import { getCommands } from "./options"
 import { Command } from "commander"
-import { getHelpDescription } from "./utils"
+import { getHelpDescription, error } from "./utils"
 import { version } from "../package.json"
 
 // add hosting config
@@ -21,6 +20,23 @@ async function init() {
   await program.parseAsync(process.argv)
 }
 
+const events = ["exit", "SIGINT", "SIGUSR1", "SIGUSR2", "uncaughtException"]
+events.forEach(event => {
+  process.on(event, (evt?: number) => {
+    if (evt && !isNaN(evt)) {
+      return
+    }
+    if (evt) {
+      console.error(
+        error(
+          "Failed to run CLI command - please report with the following message:"
+        )
+      )
+      console.error(error(evt))
+    }
+  })
+})
+
 init().catch(err => {
   console.error(`Unexpected error - `, err)
 })

packages/cli/src/prebuilds.ts

@@ -1,57 +0,0 @@
-import os from "os"
-import { join } from "path"
-import fs from "fs"
-import { error } from "./utils"
-
-const PREBUILDS = "prebuilds"
-const ARCH = `${os.platform()}-${os.arch()}`
-const PREBUILD_DIR = join(process.execPath, "..", "cli", PREBUILDS, ARCH)
-
-// running as built CLI pkg bundle
-if (!process.argv[0].includes("node")) {
-  checkForBinaries()
-}
-
-function localPrebuildPath() {
-  return join(process.execPath, "..", PREBUILDS)
-}
-
-function checkForBinaries() {
-  const readDir = join(__filename, "..", "..", "..", "cli", PREBUILDS, ARCH)
-  if (fs.existsSync(PREBUILD_DIR) || !fs.existsSync(readDir)) {
-    return
-  }
-  const natives = fs.readdirSync(readDir)
-  if (fs.existsSync(readDir)) {
-    const writePath = join(localPrebuildPath(), ARCH)
-    fs.mkdirSync(writePath, { recursive: true })
-    for (let native of natives) {
-      const filename = `${native.split(".fake")[0]}.node`
-      fs.cpSync(join(readDir, native), join(writePath, filename))
-    }
-  }
-}
-
-function cleanup(evt?: number) {
-  // cleanup prebuilds first
-  const path = localPrebuildPath()
-  if (fs.existsSync(path)) {
-    fs.rmSync(path, { recursive: true })
-  }
-  if (evt && !isNaN(evt)) {
-    return
-  }
-  if (evt) {
-    console.error(
-      error(
-        "Failed to run CLI command - please report with the following message:"
-      )
-    )
-    console.error(error(evt))
-  }
-}
-
-const events = ["exit", "SIGINT", "SIGUSR1", "SIGUSR2", "uncaughtException"]
-events.forEach(event => {
-  process.on(event, cleanup)
-})

packages/client/manifest.json

@@ -3295,6 +3295,7 @@
       },
       {
         "type": "options",
+        "label": "Custom options",
         "key": "customOptions",
         "dependsOn": {
           "setting": "optionsSource",
@@ -3502,6 +3503,7 @@
       },
       {
         "type": "options",
+        "label": "Custom options",
         "key": "customOptions",
         "dependsOn": {
           "setting": "optionsSource",
@@ -4877,7 +4879,7 @@
   },
   "chartblock": {
     "block": true,
-    "name": "Chart block",
+    "name": "Chart Block",
     "icon": "GraphPie",
     "hasChildren": false,
     "settings": [
@@ -5367,7 +5369,7 @@
   },
   "tableblock": {
     "block": true,
-    "name": "Table block",
+    "name": "Table Block",
     "icon": "Table",
     "styles": ["size"],
     "size": {
@@ -5613,7 +5615,7 @@
   },
   "cardsblock": {
     "block": true,
-    "name": "Cards block",
+    "name": "Cards Block",
     "icon": "PersonalizationField",
     "styles": ["size"],
     "size": {
@@ -5793,7 +5795,7 @@
   },
   "repeaterblock": {
     "block": true,
-    "name": "Repeater block",
+    "name": "Repeater Block",
     "icon": "ViewList",
     "illegalChildren": ["section"],
     "hasChildren": true,
@@ -6033,6 +6035,193 @@
       }
     ]
   },
+  "multistepformblock": {
+    "name": "Multi-step Form Block",
+    "icon": "AssetsAdded",
+    "block": true,
+    "hasChildren": false,
+    "ejectable": false,
+    "size": {
+      "width": 400,
+      "height": 400
+    },
+    "styles": ["size"],
+    "settings": [
+      {
+        "type": "table",
+        "label": "Data",
+        "key": "dataSource"
+      },
+      {
+        "type": "radio",
+        "label": "Type",
+        "key": "actionType",
+        "options": ["Create", "Update", "View"],
+        "defaultValue": "Create"
+      },
+      {
+        "section": true,
+        "dependsOn": {
+          "setting": "actionType",
+          "value": "Create",
+          "invert": true
+        },
+        "name": "Row ID",
+        "info": "<a href='https://docs.budibase.com/docs/form-block' target='_blank'>How to pass a row ID using bindings</a>",
+        "settings": [
+          {
+            "type": "text",
+            "label": "Row ID",
+            "key": "rowId",
+            "nested": true
+          },
+          {
+            "type": "text",
+            "label": "No rows found",
+            "key": "noRowsMessage",
+            "defaultValue": "We couldn't find a row to display",
+            "nested": true
+          }
+        ]
+      },
+      {
+        "section": true,
+        "name": "Details",
+        "settings": [
+          {
+            "type": "stepConfiguration",
+            "key": "steps",
+            "nested": true,
+            "labelHidden": true,
+            "resetOn": ["dataSource", "actionType"],
+            "defaultValue": [{}]
+          }
+        ]
+      },
+      {
+        "tag": "style",
+        "type": "select",
+        "label": "Size",
+        "key": "size",
+        "options": [
+          {
+            "label": "Medium",
+            "value": "spectrum--medium"
+          },
+          {
+            "label": "Large",
+            "value": "spectrum--large"
+          }
+        ],
+        "defaultValue": "spectrum--medium"
+      },
+      {
+        "tag": "style",
+        "type": "select",
+        "label": "Button position",
+        "key": "buttonPosition",
+        "options": [
+          {
+            "label": "Bottom",
+            "value": "bottom"
+          },
+          {
+            "label": "Top",
+            "value": "top"
+          }
+        ],
+        "defaultValue": "bottom"
+      }
+    ],
+    "actions": [
+      {
+        "type": "ValidateForm",
+        "suffix": "form"
+      },
+      {
+        "type": "ClearForm",
+        "suffix": "form"
+      },
+      {
+        "type": "UpdateFieldValue",
+        "suffix": "form"
+      },
+      {
+        "type": "ScrollTo",
+        "suffix": "form"
+      },
+      {
+        "type": "ChangeFormStep",
+        "suffix": "form"
+      }
+    ],
+    "context": [
+      {
+        "type": "form",
+        "suffix": "form"
+      },
+      {
+        "type": "static",
+        "suffix": "form",
+        "values": [
+          {
+            "label": "Value",
+            "key": "__value",
+            "type": "object"
+          },
+          {
+            "label": "Valid",
+            "key": "__valid",
+            "type": "boolean"
+          },
+          {
+            "label": "Current Step",
+            "key": "__currentStep",
+            "type": "number"
+          },
+          {
+            "label": "Current Step Valid",
+            "key": "__currentStepValid",
+            "type": "boolean"
+          }
+        ]
+      }
+    ]
+  },
+  "multistepformblockstep": {
+    "name": "Multi-step Form Block Step",
+    "settings": [
+      {
+        "type": "formStepControls",
+        "label": "Steps",
+        "key": "steps"
+      },
+      {
+        "type": "text",
+        "label": "Title",
+        "key": "title",
+        "nested": true
+      },
+      {
+        "type": "text",
+        "label": "Description",
+        "key": "desc",
+        "nested": true
+      },
+      {
+        "type": "fieldConfiguration",
+        "key": "fields",
+        "nested": true
+      },
+      {
+        "type": "buttonConfiguration",
+        "label": "Buttons",
+        "key": "buttons",
+        "wide": true,
+        "nested": true
+      }
+    ]
+  },
   "formblock": {
     "name": "Form Block",
     "icon": "Form",
@@ -6288,7 +6477,7 @@
     }
   },
   "gridblock": {
-    "name": "Grid block",
+    "name": "Grid Block",
     "icon": "Table",
     "styles": ["size"],
     "size": {

packages/client/package.json

@@ -37,7 +37,6 @@
     "downloadjs": "1.4.7",
     "html5-qrcode": "^2.2.1",
     "leaflet": "^1.7.1",
-    "regexparam": "^1.3.0",
     "sanitize-html": "^2.7.0",
     "screenfull": "^6.0.1",
     "shortid": "^2.2.15",

packages/client/src/api/api.js

@@ -77,4 +77,10 @@ export const API = createAPIClient({
     // Log all errors to console
     console.warn(`[Client] HTTP ${status} on ${method}:${url}\n\t${message}`)
   },
+  onMigrationDetected: _appId => {
+    if (!window.MIGRATING_APP) {
+      // We will force a reload, that will display the updating screen until the migration is running
+      window.location.reload()
+    }
+  },
 })

packages/client/src/components/UpdatingApp.svelte

@@ -0,0 +1,23 @@
+<script>
+  import { Updating } from "@budibase/frontend-core"
+  import { API } from "../api"
+
+  async function isMigrationDone() {
+    const response = await API.getMigrationStatus()
+    return response.migrated
+  }
+
+  async function onMigrationDone() {
+    window.location.reload()
+  }
+</script>
+
+<div class="updating">
+  <Updating {isMigrationDone} {onMigrationDone} />
+</div>
+
+<style>
+  .updating {
+    font-family: var(--font-sans);
+  }
+</style>

packages/client/src/components/app/blocks/MultiStepFormblock.svelte

@@ -0,0 +1,229 @@
+<script>
+  import BlockComponent from "components/BlockComponent.svelte"
+  import { getContext, setContext } from "svelte"
+  import { builderStore } from "stores"
+  import { Utils } from "@budibase/frontend-core"
+  import FormBlockWrapper from "./form/FormBlockWrapper.svelte"
+  import { writable } from "svelte/store"
+
+  export let actionType
+  export let rowId
+  export let noRowsMessage
+  export let steps
+  export let dataSource
+  export let buttonPosition = "bottom"
+  export let size
+
+  const { fetchDatasourceSchema } = getContext("sdk")
+  const component = getContext("component")
+  const context = getContext("context")
+
+  // Set current step context to force child form to use it
+  const currentStep = writable(1)
+  setContext("current-step", currentStep)
+
+  const FieldTypeToComponentMap = {
+    string: "stringfield",
+    number: "numberfield",
+    bigint: "bigintfield",
+    options: "optionsfield",
+    array: "multifieldselect",
+    boolean: "booleanfield",
+    longform: "longformfield",
+    datetime: "datetimefield",
+    attachment: "attachmentfield",
+    link: "relationshipfield",
+    json: "jsonfield",
+    barcodeqr: "codescanner",
+    bb_reference: "bbreferencefield",
+  }
+
+  let schema
+
+  $: fetchSchema(dataSource)
+  $: enrichedSteps = enrichSteps(steps, schema, $component.id)
+  $: updateCurrentStep(enrichedSteps, $builderStore, $component)
+
+  const updateCurrentStep = (steps, builderStore, component) => {
+    const { componentId, step } = builderStore.metadata || {}
+
+    // If we aren't in the builder or aren't selected then don't update the step
+    // context at all, allowing the normal form to take control.
+    if (
+      !component.selected ||
+      !builderStore.inBuilder ||
+      componentId !== component.id
+    ) {
+      return
+    }
+
+    // Ensure we have a valid step selected
+    let newStep = Math.min(step || 0, steps.length - 1)
+
+    // Sanity check
+    newStep = Math.max(newStep, 0)
+
+    // Add 1 because the form component expects 1 indexed rather than 0 indexed
+    currentStep.set(newStep + 1)
+  }
+
+  const getPropsForField = field => {
+    if (field._component) {
+      return field
+    }
+    return {
+      field: field.name,
+      label: field.name,
+      placeholder: field.name,
+      _instanceName: field.name,
+    }
+  }
+
+  const getComponentForField = field => {
+    const fieldSchemaName = field.field || field.name
+    if (!fieldSchemaName || !schema?.[fieldSchemaName]) {
+      return null
+    }
+    const type = schema[fieldSchemaName].type
+    return FieldTypeToComponentMap[type]
+  }
+
+  const fetchSchema = async () => {
+    schema = (await fetchDatasourceSchema(dataSource)) || {}
+  }
+
+  const getDefaultFields = (fields, schema) => {
+    if (fields?.length) {
+      return fields.filter(field => field.active)
+    }
+    return Object.values(schema || {})
+      .filter(field => !field.autocolumn)
+      .map(field => ({
+        name: field.name,
+      }))
+  }
+
+  const enrichSteps = (steps, schema, id) => {
+    const safeSteps = steps?.length ? steps : [{}]
+    return safeSteps.map((step, idx) => {
+      const { title, desc, fields, buttons } = step
+      const defaultProps = Utils.buildMultiStepFormBlockDefaultProps({
+        _id: id,
+        stepCount: safeSteps.length,
+        currentStep: idx,
+        actionType,
+        dataSource,
+      })
+      return {
+        fields: getDefaultFields(fields || [], schema),
+        title: title ?? defaultProps.title,
+        desc,
+        buttons: buttons || defaultProps.buttons,
+      }
+    })
+  }
+</script>
+
+<FormBlockWrapper {actionType} {dataSource} {rowId} {noRowsMessage}>
+  <BlockComponent
+    type="form"
+    context="form"
+    props={{
+      size,
+      dataSource,
+      actionType: actionType === "Create" ? "Create" : "Update",
+      readonly: actionType === "View",
+    }}
+    styles={{
+      normal: {
+        width: "600px",
+        "margin-left": "auto",
+        "margin-right": "auto",
+      },
+    }}
+  >
+    {#each enrichedSteps as step, stepIdx}
+      <BlockComponent
+        type="formstep"
+        props={{ step: stepIdx + 1, _instanceName: `Step ${stepIdx + 1}` }}
+      >
+        <BlockComponent
+          type="container"
+          props={{
+            gap: "M",
+            direction: "column",
+            hAlign: "stretch",
+            vAlign: "top",
+            size: "shrink",
+          }}
+        >
+          <BlockComponent
+            type="container"
+            props={{
+              direction: "column",
+              gap: "S",
+            }}
+            order={0}
+          >
+            <BlockComponent
+              type="container"
+              props={{
+                direction: "row",
+                hAlign: "stretch",
+                vAlign: "center",
+                gap: "M",
+                wrap: true,
+              }}
+              order={0}
+            >
+              <BlockComponent type="heading" props={{ text: step.title }} />
+              {#if buttonPosition === "top"}
+                <BlockComponent
+                  type="buttongroup"
+                  props={{ buttons: step.buttons }}
+                />
+              {/if}
+            </BlockComponent>
+          </BlockComponent>
+          <BlockComponent type="text" props={{ text: step.desc }} order={1} />
+          <BlockComponent type="container" order={2}>
+            <div
+              class="form-block fields"
+              class:mobile={$context.device.mobile}
+            >
+              {#each step.fields as field, fieldIdx (`${field.field || field.name}_${stepIdx}_${fieldIdx}`)}
+                {#if getComponentForField(field)}
+                  <BlockComponent
+                    type={getComponentForField(field)}
+                    props={getPropsForField(field)}
+                    order={fieldIdx}
+                    interactive
+                    name={field.field}
+                  />
+                {/if}
+              {/each}
+            </div>
+          </BlockComponent>
+          {#if buttonPosition === "bottom"}
+            <BlockComponent
+              type="buttongroup"
+              props={{ buttons: step.buttons }}
+              order={3}
+            />
+          {/if}
+        </BlockComponent>
+      </BlockComponent>
+    {/each}
+  </BlockComponent>
+</FormBlockWrapper>
+
+<style>
+  .fields {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 8px 16px;
+  }
+  .fields.mobile :global(.spectrum-Form-item) {
+    grid-column: span 6 !important;
+  }
+</style>

packages/client/src/components/app/blocks/TableBlock.svelte

@@ -265,7 +265,7 @@
             props={{
               dataSource,
               buttonPosition: "top",
-              buttons: Utils.buildDynamicButtonConfig({
+              buttons: Utils.buildFormBlockButtonConfig({
                 _id: $component.id + "-form-edit",
                 showDeleteButton: deleteLabel !== "",
                 showSaveButton: true,
@@ -299,7 +299,7 @@
             props={{
               dataSource,
               buttonPosition: "top",
-              buttons: Utils.buildDynamicButtonConfig({
+              buttons: Utils.buildFormBlockButtonConfig({
                 _id: $component.id + "-form-new",
                 showDeleteButton: false,
                 showSaveButton: true,

packages/client/src/components/app/blocks/form/FormBlock.svelte

@@ -1,10 +1,8 @@
 <script>
   import { getContext } from "svelte"
-  import BlockComponent from "components/BlockComponent.svelte"
-  import Block from "components/Block.svelte"
-  import { makePropSafe as safe } from "@budibase/string-templates"
   import InnerFormBlock from "./InnerFormBlock.svelte"
   import { Utils } from "@budibase/frontend-core"
+  import FormBlockWrapper from "./FormBlockWrapper.svelte"
 
   export let actionType
   export let dataSource
@@ -71,22 +69,10 @@
   }
 
   let schema
-  let providerId
-  let repeaterId
 
   $: formattedFields = convertOldFieldFormat(fields)
   $: fieldsOrDefault = getDefaultFields(formattedFields, schema)
   $: fetchSchema(dataSource)
-  $: dataProvider = `{{ literal ${safe(providerId)} }}`
-  $: filter = [
-    {
-      field: "_id",
-      operator: "equal",
-      type: "string",
-      value: !rowId ? `{{ ${safe("url")}.${safe("id")} }}` : rowId,
-      valueType: "Binding",
-    },
-  ]
   // We could simply spread $$props into the inner form and append our
   // additions, but that would create svelte warnings about unused props and
   // make maintenance in future more confusing as we typically always have a
@@ -102,11 +88,10 @@
     title,
     description,
     schema,
-    repeaterId,
     notificationOverride,
     buttons:
       buttons ||
-      Utils.buildDynamicButtonConfig({
+      Utils.buildFormBlockButtonConfig({
         _id: $component.id,
         showDeleteButton,
         showSaveButton,
@@ -124,43 +109,6 @@
   }
 </script>
 
-<Block>
+<FormBlockWrapper {actionType} {dataSource} {rowId} {noRowsMessage}>
-  {#if actionType === "Create"}
+  <InnerFormBlock {...innerProps} />
-    <BlockComponent
+</FormBlockWrapper>
-      type="container"
-      props={{
-        direction: "column",
-        hAlign: "left",
-        vAlign: "stretch",
-      }}
-    >
-      <InnerFormBlock {...innerProps} />
-    </BlockComponent>
-  {:else}
-    <BlockComponent
-      type="dataprovider"
-      context="provider"
-      bind:id={providerId}
-      props={{
-        dataSource,
-        filter,
-        limit: 1,
-        paginate: false,
-      }}
-    >
-      <BlockComponent
-        type="repeater"
-        context="repeater"
-        bind:id={repeaterId}
-        props={{
-          dataProvider,
-          noRowsMessage: noRowsMessage || "We couldn't find a row to display",
-          direction: "column",
-          hAlign: "center",
-        }}
-      >
-        <InnerFormBlock {...innerProps} />
-      </BlockComponent>
-    </BlockComponent>
-  {/if}
-</Block>

packages/client/src/components/app/blocks/form/FormBlockWrapper.svelte

@@ -0,0 +1,64 @@
+<script>
+  import BlockComponent from "components/BlockComponent.svelte"
+  import Block from "components/Block.svelte"
+  import { makePropSafe as safe } from "@budibase/string-templates"
+  import { getContext } from "svelte"
+
+  export let actionType
+  export let dataSource
+  export let rowId
+  export let noRowsMessage
+
+  const component = getContext("component")
+
+  $: providerId = `${$component.id}-provider`
+  $: dataProvider = `{{ literal ${safe(providerId)} }}`
+  $: filter = [
+    {
+      field: "_id",
+      operator: "equal",
+      type: "string",
+      value: !rowId ? `{{ ${safe("url")}.${safe("id")} }}` : rowId,
+      valueType: "Binding",
+    },
+  ]
+</script>
+
+<Block>
+  {#if actionType === "Create"}
+    <BlockComponent
+      type="container"
+      props={{
+        direction: "column",
+        hAlign: "left",
+        vAlign: "stretch",
+      }}
+    >
+      <slot />
+    </BlockComponent>
+  {:else}
+    <BlockComponent
+      type="dataprovider"
+      context="provider"
+      props={{
+        dataSource,
+        filter,
+        limit: 1,
+        paginate: false,
+      }}
+    >
+      <BlockComponent
+        type="repeater"
+        context="repeater"
+        props={{
+          dataProvider,
+          noRowsMessage: noRowsMessage || "We couldn't find a row to display",
+          direction: "column",
+          hAlign: "center",
+        }}
+      >
+        <slot />
+      </BlockComponent>
+    </BlockComponent>
+  {/if}
+</Block>

packages/client/src/components/app/blocks/index.js

@@ -4,3 +4,4 @@ export { default as repeaterblock } from "./RepeaterBlock.svelte"
 export { default as formblock } from "./form/FormBlock.svelte"
 export { default as chartblock } from "./ChartBlock.svelte"
 export { default as rowexplorer } from "./RowExplorer.svelte"
+export { default as multistepformblock } from "./MultiStepFormblock.svelte"

packages/client/src/components/app/forms/Field.svelte

@@ -137,21 +137,23 @@
     width: 100%;
   }
 
+  .error :global(svg),
+  .helpText :global(svg) {
+    width: 13px;
+    margin-right: 6px;
+  }
+
   .error {
     display: flex;
     margin-top: var(--spectrum-global-dimension-size-75);
     align-items: center;
   }
-
   .error :global(svg) {
-    width: 14px;
     color: var(
       --spectrum-semantic-negative-color-default,
       var(--spectrum-global-color-red-500)
     );
-    margin-right: 4px;
   }
-
   .error span {
     color: var(
       --spectrum-semantic-negative-color-default,
@@ -165,17 +167,14 @@
     margin-top: var(--spectrum-global-dimension-size-75);
     align-items: center;
   }
-
   .helpText :global(svg) {
-    width: 14px;
+    color: var(--spectrum-global-color-gray-600);
-    color: var(--grey-7);
-    margin-right: 6px;
   }
-
   .helpText span {
-    color: var(--grey-5);
+    color: var(--spectrum-global-color-gray-800);
     font-size: var(--spectrum-global-dimension-font-size-75);
   }
+
   .spectrum-FieldLabel--right,
   .spectrum-FieldLabel--left {
     padding-right: var(--spectrum-global-dimension-size-200);

packages/client/src/components/app/forms/Form.svelte

@@ -34,7 +34,7 @@
   let loaded = false
   let schema
   let table
-  let currentStep = writable(getInitialFormStep())
+  let currentStep = getContext("current-step") || writable(getInitialFormStep())
 
   $: fetchSchema(dataSource)
   $: schemaKey = generateSchemaKey(schema)

packages/client/src/components/app/forms/InnerForm.svelte

@@ -423,10 +423,14 @@
     }
     const fieldId = field.fieldState.fieldId
     const fieldElement = document.getElementById(fieldId)
-    fieldElement.focus({ preventScroll: true })
+    if (fieldElement) {
+      fieldElement.focus({ preventScroll: true })
+    }
     const label = document.querySelector(`label[for="${fieldId}"]`)
-    label.style.scrollMargin = "100px"
+    if (label) {
-    label.scrollIntoView({ behavior: "smooth", block: "nearest" })
+      label.style.scrollMargin = "100px"
+      label.scrollIntoView({ behavior: "smooth", block: "nearest" })
+    }
   }
 
   // Action context to pass to children

packages/client/src/components/preview/HoverIndicator.svelte

@@ -1,9 +1,9 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import IndicatorSet from "./IndicatorSet.svelte"
-  import { builderStore, dndIsDragging } from "stores"
+  import { builderStore, dndIsDragging, hoverStore } from "stores"
 
-  $: componentId = $builderStore.hoverComponentId
+  $: componentId = $hoverStore.hoveredComponentId
   $: zIndex = componentId === $builderStore.selectedComponentId ? 900 : 920
 
   const onMouseOver = e => {
@@ -23,12 +23,12 @@
     }
 
     if (newId !== componentId) {
-      builderStore.actions.hoverComponent(newId)
+      hoverStore.actions.hoverComponent(newId)
     }
   }
 
   const onMouseLeave = () => {
-    builderStore.actions.hoverComponent(null)
+    hoverStore.actions.hoverComponent(null)
   }
 
   onMount(() => {

packages/client/src/index.js

@@ -1,4 +1,5 @@
 import ClientApp from "./components/ClientApp.svelte"
+import UpdatingApp from "./components/UpdatingApp.svelte"
 import {
   builderStore,
   appStore,
@@ -7,6 +8,7 @@ import {
   environmentStore,
   dndStore,
   eventStore,
+  hoverStore,
 } from "./stores"
 import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-rollup.js"
 import { get } from "svelte/store"
@@ -32,7 +34,6 @@ const loadBudibase = async () => {
     layout: window["##BUDIBASE_PREVIEW_LAYOUT##"],
     screen: window["##BUDIBASE_PREVIEW_SCREEN##"],
     selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"],
-    hoverComponentId: window["##BUDIBASE_HOVER_COMPONENT_ID##"],
     previewId: window["##BUDIBASE_PREVIEW_ID##"],
     theme: window["##BUDIBASE_PREVIEW_THEME##"],
     customTheme: window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"],
@@ -52,6 +53,13 @@ const loadBudibase = async () => {
     window["##BUDIBASE_APP_EMBEDDED##"] === "true"
   )
 
+  if (window.MIGRATING_APP) {
+    new UpdatingApp({
+      target: window.document.body,
+    })
+    return
+  }
+
   // Fetch environment info
   if (!get(environmentStore)?.loaded) {
     await environmentStore.actions.fetchEnvironment()
@@ -76,6 +84,10 @@ const loadBudibase = async () => {
       } else {
         dndStore.actions.reset()
       }
+    } else if (type === "hover-component") {
+      hoverStore.actions.hoverComponent(data)
+    } else if (type === "builder-meta") {
+      builderStore.actions.setMetadata(data)
     }
   }
 

packages/client/src/stores/builder.js

@@ -8,7 +8,6 @@ const createBuilderStore = () => {
     inBuilder: false,
     screen: null,
     selectedComponentId: null,
-    hoverComponentId: null,
     editMode: false,
     previewId: null,
     theme: null,
@@ -18,22 +17,13 @@ const createBuilderStore = () => {
     hiddenComponentIds: [],
     usedPlugins: null,
     eventResolvers: {},
+    metadata: null,
 
     // Legacy - allow the builder to specify a layout
     layout: null,
   }
   const store = writable(initialState)
   const actions = {
-    hoverComponent: id => {
-      if (id === get(store).hoverComponentId) {
-        return
-      }
-      store.update(state => ({
-        ...state,
-        hoverComponentId: id,
-      }))
-      eventStore.actions.dispatchEvent("hover-component", { id })
-    },
     selectComponent: id => {
       if (id === get(store).selectedComponentId) {
         return
@@ -123,6 +113,12 @@ const createBuilderStore = () => {
         parentType,
       })
     },
+    setMetadata: metadata => {
+      store.update(state => ({
+        ...state,
+        metadata,
+      }))
+    },
   }
   return {
     ...store,

packages/client/src/stores/hover.js

@@ -0,0 +1,25 @@
+import { get, writable } from "svelte/store"
+import { eventStore } from "./events.js"
+
+const createHoverStore = () => {
+  const store = writable({
+    hoveredComponentId: null,
+  })
+
+  const hoverComponent = id => {
+    if (id === get(store).hoveredComponentId) {
+      return
+    }
+    store.set({ hoveredComponentId: id })
+    eventStore.actions.dispatchEvent("hover-component", { id })
+  }
+
+  return {
+    ...store,
+    actions: {
+      hoverComponent,
+    },
+  }
+}
+
+export const hoverStore = createHoverStore()

packages/client/src/stores/index.js

@@ -27,6 +27,7 @@ export {
   dndIsDragging,
 } from "./dnd"
 export { sidePanelStore } from "./sidePanel"
+export { hoverStore } from "./hover"
 
 // Context stores are layered and duplicated, so it is not a singleton
 export { createContextStore } from "./context"

packages/frontend-core/src/api/index.js

@@ -33,6 +33,7 @@ import { buildEnvironmentVariableEndpoints } from "./environmentVariables"
 import { buildEventEndpoints } from "./events"
 import { buildAuditLogsEndpoints } from "./auditLogs"
 import { buildLogsEndpoints } from "./logs"
+import { buildMigrationEndpoints } from "./migrations"
 
 /**
  * Random identifier to uniquely identify a session in a tab. This is
@@ -298,6 +299,7 @@ export const createAPIClient = config => {
     ...buildEventEndpoints(API),
     ...buildAuditLogsEndpoints(API),
     ...buildLogsEndpoints(API),
+    ...buildMigrationEndpoints(API),
     viewV2: buildViewV2Endpoints(API),
   }
 }

packages/frontend-core/src/api/migrations.js

@@ -0,0 +1,10 @@
+export const buildMigrationEndpoints = API => ({
+  /**
+   * Gets the info about the current app migration
+   */
+  getMigrationStatus: async () => {
+    return await API.get({
+      url: "/api/migrations/status",
+    })
+  },
+})