merge with master

.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

.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 http://${COUCHDB_USER}:${COUCHDB_PASSWORD}@localhost:5984/_replicator
+curl -X PUT -u "${COUCHDB_USER}:${COUCHDB_PASSWORD}" http://localhost:5984/_users
+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.52",
+  "version": "2.14.4",
   "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",
@@ -109,7 +110,7 @@
     "passport": "0.6.0"
   },
   "engines": {
-    "node": ">=18.0.0 <19.0.0"
+    "node": ">=20.0.0 <21.0.0"
   },
   "dependencies": {}
 }

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/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()
-  if (env.MULTI_TENANCY) {
+  let tenantId: string | undefined = context.getTenantId()
+  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;
-    color: var(--grey-5);
+    width: 13px;
+    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/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 == "View" && context.type === "form")
+      (component.actionType === "Create" && context.type === "schema") ||
+      (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 = {
-      form: "Fields",
-      schema: "Row",
+    if (context.type === "form") {
+      category = `${component._instanceName} - Fields`
+      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

@@ -610,12 +610,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 +1289,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
-          const resetFields = settings.filter(setting => {
-            return (
+          // Reset dependent fields
+          settings.forEach(setting => {
+            const needsReset =
               name === setting.resetOn ||
               (Array.isArray(setting.resetOn) && setting.resetOn.includes(name))
-            )
-          })
-          resetFields?.forEach(setting => {
-            component[setting.key] = null
+            if (needsReset) {
+              component[setting.key] = setting.defaultValue || null
+            }
           })
 
           if (

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/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,171 @@
+<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 } 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"
+
+  setContext("multi-step-form-block", multiStepStore)
+
+  $: stepCount = value?.length || 0
+  $: updateStore(stepCount)
+  $: dataSource = getDatasourceForProvider($currentAsset, componentInstance)
+  $: emitCurrentStep($currentStep)
+  $: stepLabel = getStepLabel($multiStepStore)
+  $: stepDef = getDefinition(stepLabel)
+  $: stepSettings = value?.[$currentStep] || {}
+  $: defaults = Utils.buildMultiStepFormBlockDefaultProps({
+    _id: componentInstance._id,
+    stepCount: $multiStepStore.stepCount,
+    currentStep: $multiStepStore.currentStep,
+    actionType: componentInstance.actionType,
+    dataSource: componentInstance.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

@@ -32,4 +32,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")
     )
-
-    return getSchemaForDatasource(asset, formParent?.dataSource)
+    const dataSource = resolveDatasource(asset, component, formParent)
+    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/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 = [
-      ...(generalSettings?.length
-        ? [
-            {
-              name: "General",
-              settings: generalSettings,
-            },
-          ]
-        : []),
-      ...(customSections || []),
-    ]
+    let sections = []
+    if (generalSettings.length) {
+      sections.push({
+        name: "General",
+        settings: generalSettings,
+      })
+    }
+    if (customSections.length) {
+      sections = sections.concat(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

@@ -64,6 +64,7 @@
       on:change={event => (tempValue = event.detail)}
       allowJS
       {bindings}
+      autofocusEditor={true}
     />
   </Drawer>
 {/key}

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/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/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/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,164 @@
       }
     ]
   },
+  "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": [
+              {}
+            ]
+          }
+        ]
+      }
+    ],
+    "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 +6448,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,204 @@
+<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
+
+  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={{
+      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" order={0}>
+            <BlockComponent type="heading" props={{ text: step.title }} />
+          </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>
+          <BlockComponent
+            type="buttongroup"
+            props={{ buttons: step.buttons }}
+            styles={{
+              normal: {
+                "margin-top": "16px",
+              },
+            }}
+            order={3}
+          />
+        </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>
-  {#if actionType === "Create"}
-    <BlockComponent
-      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>
+<FormBlockWrapper {actionType} {dataSource} {rowId} {noRowsMessage}>
+  <InnerFormBlock {...innerProps} />
+</FormBlockWrapper>

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(--grey-7);
-    margin-right: 6px;
+    color: var(--spectrum-global-color-gray-600);
   }
-
   .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"
-    label.scrollIntoView({ behavior: "smooth", block: "nearest" })
+    if (label) {
+      label.style.scrollMargin = "100px"
+      label.scrollIntoView({ behavior: "smooth", block: "nearest" })
+    }
   }
 
   // Action context to pass to children

packages/client/src/index.js

@@ -1,4 +1,5 @@
 import ClientApp from "./components/ClientApp.svelte"
+import UpdatingApp from "./components/UpdatingApp.svelte"
 import {
   builderStore,
   appStore,
@@ -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,8 @@ const loadBudibase = async () => {
       } else {
         dndStore.actions.reset()
       }
+    } else if (type === "builder-meta") {
+      builderStore.actions.setMetadata(data)
     }
   }
 

packages/client/src/stores/builder.js

@@ -18,6 +18,7 @@ const createBuilderStore = () => {
     hiddenComponentIds: [],
     usedPlugins: null,
     eventResolvers: {},
+    metadata: null,
 
     // Legacy - allow the builder to specify a layout
     layout: null,
@@ -123,6 +124,12 @@ const createBuilderStore = () => {
         parentType,
       })
     },
+    setMetadata: metadata => {
+      store.update(state => ({
+        ...state,
+        metadata,
+      }))
+    },
   }
   return {
     ...store,

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",
+    })
+  },
+})

packages/frontend-core/src/components/Updating.svelte

@@ -0,0 +1,79 @@
+<script>
+  export let isMigrationDone
+  export let onMigrationDone
+  export let timeoutSeconds = 10 // 3 minutes
+
+  const loadTime = Date.now()
+  let timedOut = false
+
+  async function checkMigrationsFinished() {
+    setTimeout(async () => {
+      const isMigrated = await isMigrationDone()
+
+      const timeoutMs = timeoutSeconds * 1000
+      if (!isMigrated) {
+        if (loadTime + timeoutMs > Date.now()) {
+          return checkMigrationsFinished()
+        }
+
+        return migrationTimeout()
+      }
+
+      onMigrationDone()
+    }, 1000)
+  }
+
+  checkMigrationsFinished()
+
+  function migrationTimeout() {
+    timedOut = true
+  }
+</script>
+
+<div class="loading" class:timeout={timedOut}>
+  <span class="header">
+    {#if !timedOut}
+      System update
+    {:else}
+      Something went wrong!
+    {/if}
+  </span>
+  <span class="subtext">
+    {#if !timedOut}
+      Please wait and we will be back in a second!
+    {:else}
+      An error occurred, please try again later.
+      <br />
+      Contact
+      <a href="https://budibase.com/support/" target="_blank">support</a> if the
+      issue persists.
+    {/if}</span
+  >
+</div>
+
+<style>
+  .loading {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    gap: var(--spacing-l);
+    height: 100vh;
+    text-align: center;
+    font-size: 18px;
+  }
+  .header {
+    font-weight: 700;
+  }
+  .timeout .header {
+    color: rgb(196, 46, 46);
+  }
+  .subtext {
+    font-size: 16px;
+    color: var(--grey-7);
+  }
+
+  .subtext a {
+    color: var(--grey-7);
+    font-weight: 700;
+  }
+</style>

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

@@ -3,4 +3,5 @@ export { default as TestimonialPage } from "./TestimonialPage.svelte"
 export { default as Testimonial } from "./Testimonial.svelte"
 export { default as UserAvatar } from "./UserAvatar.svelte"
 export { default as UserAvatars } from "./UserAvatars.svelte"
+export { default as Updating } from "./Updating.svelte"
 export { Grid } from "./grid"

packages/frontend-core/src/utils/utils.js

@@ -116,7 +116,7 @@ export const domDebounce = callback => {
  *
  * @param {any} props
  * */
-export const buildDynamicButtonConfig = props => {
+export const buildFormBlockButtonConfig = props => {
   const {
     _id,
     actionType,
@@ -130,7 +130,6 @@ export const buildDynamicButtonConfig = props => {
   } = props || {}
 
   if (!_id) {
-    console.log("MISSING ID")
     return
   }
   const formId = `${_id}-form`
@@ -228,7 +227,7 @@ export const buildDynamicButtonConfig = props => {
     })
   }
 
-  if (actionType == "Update" && showDeleteButton !== false) {
+  if (actionType === "Update" && showDeleteButton !== false) {
     defaultButtons.push({
       text: deleteText || "Delete",
       _id: Helpers.uuid(),
@@ -241,3 +240,108 @@ export const buildDynamicButtonConfig = props => {
 
   return defaultButtons
 }
+
+export const buildMultiStepFormBlockDefaultProps = props => {
+  const { _id, stepCount, currentStep, actionType, dataSource } = props || {}
+
+  // Sanity check
+  if (!_id || !stepCount) {
+    return
+  }
+
+  const title = `Step {{ [${_id}-form].[__currentStep] }}`
+  const resourceId = dataSource?.resourceId
+  const formId = `${_id}-form`
+  let buttons = []
+
+  // Add previous step button if we aren't the first step
+  if (currentStep !== 0) {
+    buttons.push({
+      _id: Helpers.uuid(),
+      _component: "@budibase/standard-components/button",
+      _instanceName: Helpers.uuid(),
+      text: "Back",
+      type: "secondary",
+      size: "M",
+      onClick: [
+        {
+          parameters: {
+            type: "prev",
+            componentId: formId,
+          },
+          "##eventHandlerType": "Change Form Step",
+        },
+      ],
+    })
+  }
+
+  // Add a next button if we aren't the last step
+  if (currentStep !== stepCount - 1) {
+    buttons.push({
+      _id: Helpers.uuid(),
+      _component: "@budibase/standard-components/button",
+      _instanceName: Helpers.uuid(),
+      text: "Next",
+      type: "cta",
+      size: "M",
+      onClick: [
+        {
+          "##eventHandlerType": "Validate Form",
+          parameters: {
+            componentId: formId,
+          },
+        },
+        {
+          parameters: {
+            type: "next",
+            componentId: formId,
+          },
+          "##eventHandlerType": "Change Form Step",
+        },
+      ],
+    })
+  }
+
+  // Add save button if we are the last step
+  if (actionType !== "View" && currentStep === stepCount - 1) {
+    buttons.push({
+      _id: Helpers.uuid(),
+      _component: "@budibase/standard-components/button",
+      _instanceName: Helpers.uuid(),
+      text: "Save",
+      type: "cta",
+      size: "M",
+      onClick: [
+        {
+          "##eventHandlerType": "Validate Form",
+          parameters: {
+            componentId: formId,
+          },
+        },
+        {
+          "##eventHandlerType": "Save Row",
+          parameters: {
+            tableId: resourceId,
+            providerId: formId,
+          },
+        },
+        // Clear a create form once submitted
+        ...(actionType !== "Create"
+          ? []
+          : [
+              {
+                "##eventHandlerType": "Clear Form",
+                parameters: {
+                  componentId: formId,
+                },
+              },
+            ]),
+      ],
+    })
+  }
+
+  return {
+    buttons,
+    title,
+  }
+}

packages/server/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-slim
+FROM node:20-slim
 
 LABEL com.centurylinklabs.watchtower.lifecycle.pre-check="scripts/watchtower-hooks/pre-check.sh"
 LABEL com.centurylinklabs.watchtower.lifecycle.pre-update="scripts/watchtower-hooks/pre-update.sh"

packages/server/nodemon.json

@@ -7,7 +7,7 @@
     "../shared-core",
     "../string-templates"
   ],
-  "ext": "js,ts,json",
+  "ext": "js,ts,json,svelte",
   "ignore": ["src/**/*.spec.ts", "src/**/*.spec.js", "../*/dist/**/*"],
   "exec": "yarn build && node ./dist/index.js"
 }

packages/server/package.json

@@ -87,7 +87,7 @@
     "lodash": "4.17.21",
     "memorystream": "0.3.1",
     "mongodb": "^6.3.0",
-    "mssql": "9.1.1",
+    "mssql": "10.0.1",
     "mysql2": "3.5.2",
     "node-fetch": "2.6.7",
     "object-sizeof": "2.6.1",
@@ -123,8 +123,7 @@
     "@types/koa": "2.13.4",
     "@types/koa__router": "8.0.8",
     "@types/lodash": "4.14.200",
-    "@types/mssql": "8.1.2",
-    "@types/node": "18.17.0",
+    "@types/mssql": "9.1.4",
     "@types/node-fetch": "2.6.4",
     "@types/oracledb": "5.2.2",
     "@types/pg": "8.6.6",

packages/server/scripts/dev/manage.js

@@ -48,6 +48,7 @@ async function init() {
     HTTP_MIGRATIONS: "0",
     HTTP_LOGGING: "0",
     VERSION: "0.0.0+local",
+    PASSWORD_MIN_LENGTH: "1",
   }
 
   config = { ...config, ...existingConfig }

packages/server/src/api/controllers/datasource.ts

@@ -14,10 +14,7 @@ import {
   DatasourcePlus,
   FetchDatasourceInfoRequest,
   FetchDatasourceInfoResponse,
-  IntegrationBase,
-  Schema,
   SourceName,
-  Table,
   UpdateDatasourceResponse,
   UserCtx,
   VerifyDatasourceRequest,
@@ -28,65 +25,6 @@ import { builderSocket } from "../../websockets"
 import { setupCreationAuth as googleSetupCreationAuth } from "../../integrations/googlesheets"
 import { isEqual } from "lodash"
 
-async function getConnector(
-  datasource: Datasource
-): Promise<IntegrationBase | DatasourcePlus> {
-  const Connector = await getIntegration(datasource.source)
-  // can't enrich if it doesn't have an ID yet
-  if (datasource._id) {
-    datasource = await sdk.datasources.enrich(datasource)
-  }
-  // Connect to the DB and build the schema
-  return new Connector(datasource.config)
-}
-
-async function getAndMergeDatasource(datasource: Datasource) {
-  let existingDatasource: undefined | Datasource
-  if (datasource._id) {
-    existingDatasource = await sdk.datasources.get(datasource._id)
-  }
-  let enrichedDatasource = datasource
-  if (existingDatasource) {
-    enrichedDatasource = sdk.datasources.mergeConfigs(
-      datasource,
-      existingDatasource
-    )
-  }
-  return await sdk.datasources.enrich(enrichedDatasource)
-}
-
-async function buildSchemaHelper(datasource: Datasource): Promise<Schema> {
-  const connector = (await getConnector(datasource)) as DatasourcePlus
-  return await connector.buildSchema(
-    datasource._id!,
-    datasource.entities! as Record<string, Table>
-  )
-}
-
-async function buildFilteredSchema(
-  datasource: Datasource,
-  filter?: string[]
-): Promise<Schema> {
-  let schema = await buildSchemaHelper(datasource)
-  if (!filter) {
-    return schema
-  }
-
-  let filteredSchema: Schema = { tables: {}, errors: {} }
-  for (let key in schema.tables) {
-    if (filter.some(filter => filter.toLowerCase() === key.toLowerCase())) {
-      filteredSchema.tables[key] = schema.tables[key]
-    }
-  }
-
-  for (let key in schema.errors) {
-    if (filter.some(filter => filter.toLowerCase() === key.toLowerCase())) {
-      filteredSchema.errors[key] = schema.errors[key]
-    }
-  }
-  return filteredSchema
-}
-
 export async function fetch(ctx: UserCtx) {
   ctx.body = await sdk.datasources.fetch()
 }
@@ -95,8 +33,10 @@ export async function verify(
   ctx: UserCtx<VerifyDatasourceRequest, VerifyDatasourceResponse>
 ) {
   const { datasource } = ctx.request.body
-  const enrichedDatasource = await getAndMergeDatasource(datasource)
-  const connector = await getConnector(enrichedDatasource)
+  const enrichedDatasource = await sdk.datasources.getAndMergeDatasource(
+    datasource
+  )
+  const connector = await sdk.datasources.getConnector(enrichedDatasource)
   if (!connector.testConnection) {
     ctx.throw(400, "Connection information verification not supported")
   }
@@ -112,8 +52,12 @@ export async function information(
   ctx: UserCtx<FetchDatasourceInfoRequest, FetchDatasourceInfoResponse>
 ) {
   const { datasource } = ctx.request.body
-  const enrichedDatasource = await getAndMergeDatasource(datasource)
-  const connector = (await getConnector(enrichedDatasource)) as DatasourcePlus
+  const enrichedDatasource = await sdk.datasources.getAndMergeDatasource(
+    datasource
+  )
+  const connector = (await sdk.datasources.getConnector(
+    enrichedDatasource
+  )) as DatasourcePlus
   if (!connector.getTableNames) {
     ctx.throw(400, "Table name fetching not supported by datasource")
   }
@@ -128,7 +72,10 @@ export async function buildSchemaFromDb(ctx: UserCtx) {
   const tablesFilter = ctx.request.body.tablesFilter
   const datasource = await sdk.datasources.get(ctx.params.datasourceId)
 
-  const { tables, errors } = await buildFilteredSchema(datasource, tablesFilter)
+  const { tables, errors } = await sdk.datasources.buildFilteredSchema(
+    datasource,
+    tablesFilter
+  )
   datasource.entities = tables
 
   setDefaultDisplayColumns(datasource)
@@ -280,7 +227,10 @@ export async function save(
 
   let errors: Record<string, string> = {}
   if (fetchSchema) {
-    const schema = await buildFilteredSchema(datasource, tablesFilter)
+    const schema = await sdk.datasources.buildFilteredSchema(
+      datasource,
+      tablesFilter
+    )
     datasource.entities = schema.tables
     setDefaultDisplayColumns(datasource)
     errors = schema.errors
@@ -384,8 +334,10 @@ export async function query(ctx: UserCtx) {
 
 export async function getExternalSchema(ctx: UserCtx) {
   const datasource = await sdk.datasources.get(ctx.params.datasourceId)
-  const enrichedDatasource = await getAndMergeDatasource(datasource)
-  const connector = await getConnector(enrichedDatasource)
+  const enrichedDatasource = await sdk.datasources.getAndMergeDatasource(
+    datasource
+  )
+  const connector = await sdk.datasources.getConnector(enrichedDatasource)
 
   if (!connector.getExternalSchema) {
     ctx.throw(400, "Datasource does not support exporting external schema")

packages/server/src/api/controllers/query/index.ts

@@ -161,11 +161,8 @@ export async function preview(ctx: UserCtx) {
         auth: { ...authConfigCtx },
       },
     }
-    const runFn = () => Runner.run(inputs)
 
-    const { rows, keys, info, extra } = await quotas.addQuery<any>(runFn, {
-      datasourceId: datasource._id,
-    })
+    const { rows, keys, info, extra } = (await Runner.run(inputs)) as any
     const schemaFields: any = {}
     if (rows?.length > 0) {
       for (let key of [...new Set(keys)] as string[]) {
@@ -259,14 +256,8 @@ async function execute(
       },
       schema: query.schema,
     }
-    const runFn = () => Runner.run(inputs)
 
-    const { rows, pagination, extra, info } = await quotas.addQuery<any>(
-      runFn,
-      {
-        datasourceId: datasource._id,
-      }
-    )
+    const { rows, pagination, extra, info } = (await Runner.run(inputs)) as any
     // remove the raw from execution incase transformer being used to hide data
     if (extra?.raw) {
       delete extra.raw

packages/server/src/api/controllers/row/index.ts

@@ -4,20 +4,20 @@ import * as external from "./external"
 import { isExternalTableID } from "../../../integrations/utils"
 import {
   Ctx,
-  UserCtx,
-  DeleteRowRequest,
   DeleteRow,
+  DeleteRowRequest,
   DeleteRows,
-  Row,
-  PatchRowRequest,
-  PatchRowResponse,
-  SearchRowResponse,
-  SearchRowRequest,
-  SearchParams,
-  GetRowResponse,
-  ValidateResponse,
   ExportRowsRequest,
   ExportRowsResponse,
+  GetRowResponse,
+  PatchRowRequest,
+  PatchRowResponse,
+  Row,
+  SearchParams,
+  SearchRowRequest,
+  SearchRowResponse,
+  UserCtx,
+  ValidateResponse,
 } from "@budibase/types"
 import * as utils from "./utils"
 import { gridSocket } from "../../../websockets"
@@ -25,8 +25,8 @@ import { addRev } from "../public/utils"
 import { fixRow } from "../public/rows"
 import sdk from "../../../sdk"
 import * as exporters from "../view/exporters"
-import { apiFileReturn } from "../../../utilities/fileSystem"
 import { Format } from "../view/exporters"
+import { apiFileReturn } from "../../../utilities/fileSystem"
 
 export * as views from "./views"
 
@@ -49,12 +49,7 @@ export async function patch(
     return save(ctx)
   }
   try {
-    const { row, table } = await quotas.addQuery(
-      () => pickApi(tableId).patch(ctx),
-      {
-        datasourceId: tableId,
-      }
-    )
+    const { row, table } = await pickApi(tableId).patch(ctx)
     if (!row) {
       ctx.throw(404, "Row not found")
     }
@@ -84,12 +79,7 @@ export const save = async (ctx: UserCtx<Row, Row>) => {
     return patch(ctx as UserCtx<PatchRowRequest, PatchRowResponse>)
   }
   const { row, table, squashed } = await quotas.addRow(() =>
-    quotas.addQuery(
-      () => sdk.rows.save(tableId, ctx.request.body, ctx.user?._id),
-      {
-        datasourceId: tableId,
-      }
-    )
+    sdk.rows.save(tableId, ctx.request.body, ctx.user?._id)
   )
   ctx.status = 200
   ctx.eventEmitter && ctx.eventEmitter.emitRow(`row:save`, appId, row, table)
@@ -105,31 +95,21 @@ export async function fetchView(ctx: any) {
 
   const { calculation, group, field } = ctx.query
 
-  ctx.body = await quotas.addQuery(
-    () =>
-      sdk.rows.fetchView(tableId, viewName, {
-        calculation,
-        group: calculation ? group : null,
-        field,
-      }),
-    {
-      datasourceId: tableId,
-    }
-  )
+  ctx.body = await sdk.rows.fetchView(tableId, viewName, {
+    calculation,
+    group: calculation ? group : null,
+    field,
+  })
 }
 
 export async function fetch(ctx: any) {
   const tableId = utils.getTableId(ctx)
-  ctx.body = await quotas.addQuery(() => sdk.rows.fetch(tableId), {
-    datasourceId: tableId,
-  })
+  ctx.body = await sdk.rows.fetch(tableId)
 }
 
 export async function find(ctx: UserCtx<void, GetRowResponse>) {
   const tableId = utils.getTableId(ctx)
-  ctx.body = await quotas.addQuery(() => pickApi(tableId).find(ctx), {
-    datasourceId: tableId,
-  })
+  ctx.body = await pickApi(tableId).find(ctx)
 }
 
 function isDeleteRows(input: any): input is DeleteRows {
@@ -160,15 +140,9 @@ async function deleteRows(ctx: UserCtx<DeleteRowRequest>) {
 
   let deleteRequest = ctx.request.body as DeleteRows
 
-  const rowDeletes: Row[] = await processDeleteRowsRequest(ctx)
-  deleteRequest.rows = rowDeletes
+  deleteRequest.rows = await processDeleteRowsRequest(ctx)
 
-  const { rows } = await quotas.addQuery(
-    () => pickApi(tableId).bulkDestroy(ctx),
-    {
-      datasourceId: tableId,
-    }
-  )
+  const { rows } = await pickApi(tableId).bulkDestroy(ctx)
   await quotas.removeRows(rows.length)
 
   for (let row of rows) {
@@ -183,9 +157,7 @@ async function deleteRow(ctx: UserCtx<DeleteRowRequest>) {
   const appId = ctx.appId
   const tableId = utils.getTableId(ctx)
 
-  const resp = await quotas.addQuery(() => pickApi(tableId).destroy(ctx), {
-    datasourceId: tableId,
-  })
+  const resp = await pickApi(tableId).destroy(ctx)
   await quotas.removeRow()
 
   ctx.eventEmitter && ctx.eventEmitter.emitRow(`row:delete`, appId, resp.row)
@@ -223,9 +195,7 @@ export async function search(ctx: Ctx<SearchRowRequest, SearchRowResponse>) {
   }
 
   ctx.status = 200
-  ctx.body = await quotas.addQuery(() => sdk.rows.search(searchParams), {
-    datasourceId: tableId,
-  })
+  ctx.body = await sdk.rows.search(searchParams)
 }
 
 export async function validate(ctx: Ctx<Row, ValidateResponse>) {
@@ -243,12 +213,7 @@ export async function validate(ctx: Ctx<Row, ValidateResponse>) {
 
 export async function fetchEnrichedRow(ctx: any) {
   const tableId = utils.getTableId(ctx)
-  ctx.body = await quotas.addQuery(
-    () => pickApi(tableId).fetchEnrichedRow(ctx),
-    {
-      datasourceId: tableId,
-    }
-  )
+  ctx.body = await pickApi(tableId).fetchEnrichedRow(ctx)
 }
 
 export const exportRows = async (
@@ -268,22 +233,15 @@ export const exportRows = async (
     )
   }
 
-  ctx.body = await quotas.addQuery(
-    async () => {
-      const { fileName, content } = await sdk.rows.exportRows({
-        tableId,
-        format: format as Format,
-        rowIds: rows,
-        columns,
-        query,
-        sort,
-        sortOrder,
-      })
-      ctx.attachment(fileName)
-      return apiFileReturn(content)
-    },
-    {
-      datasourceId: tableId,
-    }
-  )
+  const { fileName, content } = await sdk.rows.exportRows({
+    tableId,
+    format: format as Format,
+    rowIds: rows,
+    columns,
+    query,
+    sort,
+    sortOrder,
+  })
+  ctx.attachment(fileName)
+  ctx.body = apiFileReturn(content)
 }

packages/server/src/api/controllers/row/views.ts

@@ -68,10 +68,7 @@ export async function searchView(
     paginate: body.paginate,
   }
 
-  const result = await quotas.addQuery(() => sdk.rows.search(searchOptions), {
-    datasourceId: view.tableId,
-  })
-
+  const result = await sdk.rows.search(searchOptions)
   result.rows.forEach(r => (r._viewId = view.id))
   ctx.body = result
 }

packages/server/src/api/controllers/static/index.ts

@@ -25,8 +25,12 @@ import fs from "fs"
 import sdk from "../../../sdk"
 import * as pro from "@budibase/pro"
 import { App, Ctx, ProcessAttachmentResponse } from "@budibase/types"
+import {
+  getAppMigrationVersion,
+  getLatestMigrationId,
+} from "../../../appMigrations"
 
-const send = require("koa-send")
+import send from "koa-send"
 
 export const toggleBetaUiFeature = async function (ctx: Ctx) {
   const cookieName = `beta:${ctx.params.feature}`
@@ -125,7 +129,26 @@ export const deleteObjects = async function (ctx: Ctx) {
   )
 }
 
+const requiresMigration = async (ctx: Ctx) => {
+  const appId = context.getAppId()
+  if (!appId) {
+    ctx.throw("AppId could not be found")
+  }
+
+  const latestMigration = getLatestMigrationId()
+  if (!latestMigration) {
+    return false
+  }
+
+  const latestMigrationApplied = await getAppMigrationVersion(appId)
+
+  const requiresMigrations = latestMigrationApplied !== latestMigration
+  return requiresMigrations
+}
+
 export const serveApp = async function (ctx: Ctx) {
+  const needMigrations = await requiresMigration(ctx)
+
   const bbHeaderEmbed =
     ctx.request.get("x-budibase-embed")?.toLowerCase() === "true"
 
@@ -145,8 +168,8 @@ export const serveApp = async function (ctx: Ctx) {
     let appId = context.getAppId()
 
     if (!env.isJest()) {
-      const App = require("./templates/BudibaseApp.svelte").default
       const plugins = objectStore.enrichPluginURLs(appInfo.usedPlugins)
+      const App = require("./templates/BudibaseApp.svelte").default
       const { head, html, css } = App.render({
         metaImage:
           branding?.metaImageUrl ||
@@ -167,6 +190,7 @@ export const serveApp = async function (ctx: Ctx) {
           config?.logoUrl !== ""
             ? objectStore.getGlobalFileUrl("settings", "logoUrl")
             : "",
+        appMigrating: needMigrations,
       })
       const appHbs = loadHandlebarsFile(appHbsPath)
       ctx.body = await processString(appHbs, {
@@ -273,7 +297,6 @@ export const getSignedUploadURL = async function (ctx: Ctx) {
     const { bucket, key } = ctx.request.body || {}
     if (!bucket || !key) {
       ctx.throw(400, "bucket and key values are required")
-      return
     }
     try {
       const s3 = new AWS.S3({

packages/server/src/api/controllers/static/templates/BudibaseApp.svelte

@@ -8,6 +8,7 @@
 
   export let clientLibPath
   export let usedPlugins
+  export let appMigrating
 </script>
 
 <svelte:head>
@@ -110,6 +111,11 @@
   <script type="application/javascript">
     window.INIT_TIME = Date.now()
   </script>
+  {#if appMigrating}
+    <script type="application/javascript">
+      window.MIGRATING_APP = true
+    </script>
+  {/if}
   <script type="application/javascript" src={clientLibPath}>
   </script>
   <!-- Custom components need inserted after the core client library -->

packages/server/src/api/routes/tests/row.spec.ts

@@ -132,11 +132,6 @@ describe.each([
     expect(usage).toBe(expected)
   }
 
-  const assertQueryUsage = async (expected: number) => {
-    const usage = await getQueryUsage()
-    expect(usage).toBe(expected)
-  }
-
   const defaultRowFields = isInternal
     ? {
         type: "row",
@@ -181,7 +176,6 @@ describe.each([
       expect(res.body.name).toEqual("Test Contact")
       expect(res.body._rev).toBeDefined()
       await assertRowUsage(rowUsage + 1)
-      await assertQueryUsage(queryUsage + 1)
     })
 
     it("Increment row autoId per create row request", async () => {
@@ -232,7 +226,6 @@ describe.each([
       }
 
       await assertRowUsage(rowUsage + ids.length)
-      await assertQueryUsage(queryUsage + ids.length)
     })
 
     it("updates a row successfully", async () => {
@@ -249,7 +242,6 @@ describe.each([
 
       expect(res.name).toEqual("Updated Name")
       await assertRowUsage(rowUsage)
-      await assertQueryUsage(queryUsage + 1)
     })
 
     it("should load a row", async () => {
@@ -262,7 +254,6 @@ describe.each([
         ...existing,
         ...defaultRowFields,
       })
-      await assertQueryUsage(queryUsage + 1)
     })
 
     it("should list all rows for given tableId", async () => {
@@ -284,7 +275,6 @@ describe.each([
       expect(res.length).toBe(2)
       expect(res.find((r: Row) => r.name === newRow.name)).toBeDefined()
       expect(res.find((r: Row) => r.name === firstRow.name)).toBeDefined()
-      await assertQueryUsage(queryUsage + 1)
     })
 
     it("load should return 404 when row does not exist", async () => {
@@ -294,7 +284,6 @@ describe.each([
       await config.api.row.get(tableId, "1234567", {
         expectStatus: 404,
       })
-      await assertQueryUsage(queryUsage) // no change
     })
 
     isInternal &&
@@ -558,7 +547,6 @@ describe.each([
       expect(savedRow.body.description).toEqual(existing.description)
       expect(savedRow.body.name).toEqual("Updated Name")
       await assertRowUsage(rowUsage)
-      await assertQueryUsage(queryUsage + 2) // account for the second load
     })
 
     it("should throw an error when given improper types", async () => {
@@ -578,7 +566,6 @@ describe.each([
       )
 
       await assertRowUsage(rowUsage)
-      await assertQueryUsage(queryUsage)
     })
 
     it("should not overwrite links if those links are not set", async () => {
@@ -668,7 +655,6 @@ describe.each([
       const res = await config.api.row.delete(table._id!, [createdRow])
       expect(res.body[0]._id).toEqual(createdRow._id)
       await assertRowUsage(rowUsage - 1)
-      await assertQueryUsage(queryUsage + 1)
     })
   })
 
@@ -687,7 +673,6 @@ describe.each([
       expect(res.valid).toBe(true)
       expect(Object.keys(res.errors)).toEqual([])
       await assertRowUsage(rowUsage)
-      await assertQueryUsage(queryUsage)
     })
 
     it("should errors on invalid row", async () => {
@@ -705,7 +690,6 @@ describe.each([
         expect(Object.keys(res.errors)).toEqual([])
       }
       await assertRowUsage(rowUsage)
-      await assertQueryUsage(queryUsage)
     })
   })
 
@@ -726,7 +710,6 @@ describe.each([
       expect(res.body.length).toEqual(2)
       await loadRow(row1._id!, table._id!, 404)
       await assertRowUsage(rowUsage - 2)
-      await assertQueryUsage(queryUsage + 1)
     })
 
     it("should be able to delete a variety of row set types", async () => {
@@ -747,7 +730,6 @@ describe.each([
       expect(res.body.length).toEqual(3)
       await loadRow(row1._id!, table._id!, 404)
       await assertRowUsage(rowUsage - 3)
-      await assertQueryUsage(queryUsage + 1)
     })
 
     it("should accept a valid row object and delete the row", async () => {
@@ -760,7 +742,6 @@ describe.each([
       expect(res.body.id).toEqual(row1._id)
       await loadRow(row1._id!, table._id!, 404)
       await assertRowUsage(rowUsage - 1)
-      await assertQueryUsage(queryUsage + 1)
     })
 
     it("Should ignore malformed/invalid delete requests", async () => {
@@ -787,7 +768,6 @@ describe.each([
       expect(res3.body.message).toEqual("Invalid delete rows request")
 
       await assertRowUsage(rowUsage)
-      await assertQueryUsage(queryUsage)
     })
   })
 
@@ -808,7 +788,6 @@ describe.each([
         expect(res.body.length).toEqual(1)
         expect(res.body[0]._id).toEqual(row._id)
         await assertRowUsage(rowUsage)
-        await assertQueryUsage(queryUsage + 1)
       })
 
       it("should throw an error if view doesn't exist", async () => {
@@ -818,7 +797,6 @@ describe.each([
         await config.api.legacyView.get("derp", { expectStatus: 404 })
 
         await assertRowUsage(rowUsage)
-        await assertQueryUsage(queryUsage)
       })
 
       it("should be able to run on a view", async () => {
@@ -837,7 +815,6 @@ describe.each([
         expect(res.body[0]._id).toEqual(row._id)
 
         await assertRowUsage(rowUsage)
-        await assertQueryUsage(queryUsage + 1)
       })
     })
 
@@ -910,7 +887,6 @@ describe.each([
       expect(resEnriched.body.link[0].name).toBe("Test Contact")
       expect(resEnriched.body.link[0].description).toBe("original description")
       await assertRowUsage(rowUsage)
-      await assertQueryUsage(queryUsage + 2)
     })
   })
 
@@ -1129,7 +1105,6 @@ describe.each([
         await config.api.row.delete(view.id, [createdRow])
 
         await assertRowUsage(rowUsage - 1)
-        await assertQueryUsage(queryUsage + 1)
 
         await config.api.row.get(tableId, createdRow._id!, {
           expectStatus: 404,
@@ -1157,7 +1132,6 @@ describe.each([
         await config.api.row.delete(view.id, [rows[0], rows[2]])
 
         await assertRowUsage(rowUsage - 2)
-        await assertQueryUsage(queryUsage + 1)
 
         await config.api.row.get(tableId, rows[0]._id!, {
           expectStatus: 404,

packages/server/src/appMigrations/index.ts

@@ -17,7 +17,7 @@ export const getLatestMigrationId = () =>
     .sort()
     .reverse()[0]
 
-const getTimestamp = (versionId: string) => versionId?.split("_")[0]
+const getTimestamp = (versionId: string) => versionId?.split("_")[0] || ""
 
 export async function checkMissingMigrations(
   ctx: UserCtx,

packages/server/src/ddApm.ts

@@ -3,5 +3,9 @@ import apm from "dd-trace"
 // enable APM if configured
 if (process.env.DD_APM_ENABLED) {
   console.log("Starting dd-trace")
-  apm.init()
+  apm.init({
+    // @ts-ignore for some reason dd-trace types don't include this options,
+    // even though it's spoken about in the docs.
+    debug: process.env.DD_ENV === "qa",
+  })
 }

packages/server/src/integration-test/postgres.spec.ts

@@ -1118,4 +1118,76 @@ describe("postgres integrations", () => {
       })
     })
   })
+
+  describe("Integration compatibility with postgres search_path", () => {
+    let client: Client, pathDatasource: Datasource
+    const schema1 = "test1",
+      schema2 = "test-2"
+
+    beforeAll(async () => {
+      const dsConfig = await databaseTestProviders.postgres.getDsConfig()
+      const dbConfig = dsConfig.config!
+
+      client = new Client(dbConfig)
+      await client.connect()
+      await client.query(`CREATE SCHEMA "${schema1}";`)
+      await client.query(`CREATE SCHEMA "${schema2}";`)
+
+      const pathConfig: any = {
+        ...dsConfig,
+        config: {
+          ...dbConfig,
+          schema: `${schema1}, ${schema2}`,
+        },
+      }
+      pathDatasource = await config.api.datasource.create(pathConfig)
+    })
+
+    afterAll(async () => {
+      await client.query(`DROP SCHEMA "${schema1}" CASCADE;`)
+      await client.query(`DROP SCHEMA "${schema2}" CASCADE;`)
+      await client.end()
+    })
+
+    it("discovers tables from any schema in search path", async () => {
+      await client.query(
+        `CREATE TABLE "${schema1}".table1 (id1 SERIAL PRIMARY KEY);`
+      )
+      await client.query(
+        `CREATE TABLE "${schema2}".table2 (id2 SERIAL PRIMARY KEY);`
+      )
+      const response = await makeRequest("post", "/api/datasources/info", {
+        datasource: pathDatasource,
+      })
+      expect(response.status).toBe(200)
+      expect(response.body.tableNames).toBeDefined()
+      expect(response.body.tableNames).toEqual(
+        expect.arrayContaining(["table1", "table2"])
+      )
+    })
+
+    it("does not mix columns from different tables", async () => {
+      const repeated_table_name = "table_same_name"
+      await client.query(
+        `CREATE TABLE "${schema1}".${repeated_table_name} (id SERIAL PRIMARY KEY, val1 TEXT);`
+      )
+      await client.query(
+        `CREATE TABLE "${schema2}".${repeated_table_name} (id2 SERIAL PRIMARY KEY, val2 TEXT);`
+      )
+      const response = await makeRequest(
+        "post",
+        `/api/datasources/${pathDatasource._id}/schema`,
+        {
+          tablesFilter: [repeated_table_name],
+        }
+      )
+      expect(response.status).toBe(200)
+      expect(
+        response.body.datasource.entities[repeated_table_name].schema
+      ).toBeDefined()
+      const schema =
+        response.body.datasource.entities[repeated_table_name].schema
+      expect(Object.keys(schema).sort()).toEqual(["id", "val1"])
+    })
+  })
 })

packages/server/src/integrations/postgres.ts

@@ -159,7 +159,8 @@ class PostgresIntegration extends Sql implements DatasourcePlus {
   JOIN pg_index ON pg_class.oid = pg_index.indrelid AND pg_index.indisprimary
   JOIN pg_attribute ON pg_attribute.attrelid = pg_class.oid AND pg_attribute.attnum = ANY(pg_index.indkey)
   JOIN pg_namespace ON pg_namespace.oid = pg_class.relnamespace
-  WHERE pg_namespace.nspname = '${this.config.schema}';
+  WHERE pg_namespace.nspname = ANY(current_schemas(false))
+  AND pg_table_is_visible(pg_class.oid);
   `
 
   ENUM_VALUES = () => `
@@ -219,8 +220,12 @@ class PostgresIntegration extends Sql implements DatasourcePlus {
     if (!this.config.schema) {
       this.config.schema = "public"
     }
-    await this.client.query(`SET search_path TO "${this.config.schema}"`)
-    this.COLUMNS_SQL = `select * from information_schema.columns where table_schema = '${this.config.schema}'`
+    const search_path = this.config.schema
+      .split(",")
+      .map(item => `"${item.trim()}"`)
+    await this.client.query(`SET search_path TO ${search_path.join(",")};`)
+    this.COLUMNS_SQL = `select * from information_schema.columns where table_schema = ANY(current_schemas(false))
+    AND pg_table_is_visible(to_regclass(table_schema || '.' || table_name));`
     this.open = true
   }
 
@@ -362,8 +367,8 @@ class PostgresIntegration extends Sql implements DatasourcePlus {
         })
       }
 
-      let finalizedTables = finaliseExternalTables(tables, entities)
-      let errors = checkExternalTables(finalizedTables)
+      const finalizedTables = finaliseExternalTables(tables, entities)
+      const errors = checkExternalTables(finalizedTables)
       return { tables: finalizedTables, errors }
     } catch (err) {
       // @ts-ignore

packages/server/src/integrations/utils.ts

@@ -305,8 +305,8 @@ export function shouldCopySpecialColumn(
 }
 
 /**
- * Looks for columns which need to be copied over into the new table definitions, like relationships
- * and options types.
+ * Looks for columns which need to be copied over into the new table definitions, like relationships,
+ * options types and views.
  * @param tableName The name of the table which is being checked.
  * @param table The specific table which is being checked.
  * @param entities All the tables that existed before - the old table definitions.
@@ -325,6 +325,9 @@ function copyExistingPropsOver(
     if (entities[tableName]?.created) {
       table.created = entities[tableName]?.created
     }
+
+    table.views = entities[tableName].views
+
     const existingTableSchema = entities[tableName].schema
     for (let key in existingTableSchema) {
       if (!existingTableSchema.hasOwnProperty(key)) {

packages/server/src/jsRunner.ts

@@ -12,33 +12,51 @@ export function init() {
       const perRequestLimit = env.JS_PER_REQUEST_TIME_LIMIT_MS
       let track: TrackerFn = f => f()
       if (perRequestLimit) {
-        const bbCtx = context.getCurrentContext()
-        if (bbCtx) {
-          if (!bbCtx.jsExecutionTracker) {
-            bbCtx.jsExecutionTracker =
-              timers.ExecutionTimeTracker.withLimit(perRequestLimit)
+        tracer.trace<any>("runJS.setupTracker", {}, span => {
+          const bbCtx = context.getCurrentContext()
+          if (bbCtx) {
+            if (!bbCtx.jsExecutionTracker) {
+              span?.addTags({
+                createdExecutionTracker: true,
+              })
+              bbCtx.jsExecutionTracker =
+                timers.ExecutionTimeTracker.withLimit(perRequestLimit)
+            }
+            span?.addTags({
+              js: {
+                limitMS: bbCtx.jsExecutionTracker.limitMs,
+                elapsedMS: bbCtx.jsExecutionTracker.elapsedMS,
+              },
+            })
+            // We call checkLimit() here to prevent paying the cost of creating
+            // a new VM context below when we don't need to.
+            bbCtx.jsExecutionTracker.checkLimit()
+            track = bbCtx.jsExecutionTracker.track.bind(
+              bbCtx.jsExecutionTracker
+            )
           }
-          track = bbCtx.jsExecutionTracker.track.bind(bbCtx.jsExecutionTracker)
-          span?.addTags({
-            js: {
-              limitMS: bbCtx.jsExecutionTracker.limitMs,
-              elapsedMS: bbCtx.jsExecutionTracker.elapsedMS,
-            },
-          })
-        }
+        })
       }
 
-      ctx = {
-        ...ctx,
-        alert: undefined,
-        setInterval: undefined,
-        setTimeout: undefined,
-      }
-      vm.createContext(ctx)
+      ctx = tracer.trace("runJS.ctxClone", {}, span => {
+        return {
+          ...ctx,
+          alert: undefined,
+          setInterval: undefined,
+          setTimeout: undefined,
+        }
+      })
+
+      tracer.trace("runJS.vm.createContext", {}, span => {
+        vm.createContext(ctx)
+      })
+
       return track(() =>
-        vm.runInNewContext(js, ctx, {
-          timeout: env.JS_PER_EXECUTION_TIME_LIMIT_MS,
-        })
+        tracer.trace("runJS.vm.runInNewContext", {}, span =>
+          vm.runInNewContext(js, ctx, {
+            timeout: env.JS_PER_EXECUTION_TIME_LIMIT_MS,
+          })
+        )
       )
     })
   })

packages/server/src/sdk/app/datasources/index.ts

@@ -1,5 +1,7 @@
 import * as datasources from "./datasources"
+import * as plus from "./plus"
 
 export default {
   ...datasources,
+  ...plus,
 }

packages/server/src/sdk/app/datasources/plus.ts

@@ -0,0 +1,62 @@
+import {
+  Datasource,
+  DatasourcePlus,
+  IntegrationBase,
+  Schema,
+} from "@budibase/types"
+import * as datasources from "./datasources"
+import { getIntegration } from "../../../integrations"
+
+export async function buildFilteredSchema(
+  datasource: Datasource,
+  filter?: string[]
+): Promise<Schema> {
+  const schema = await buildSchemaHelper(datasource)
+  if (!filter) {
+    return schema
+  }
+
+  let filteredSchema: Schema = { tables: {}, errors: {} }
+  for (let key in schema.tables) {
+    if (filter.some(filter => filter.toLowerCase() === key.toLowerCase())) {
+      filteredSchema.tables[key] = schema.tables[key]
+    }
+  }
+
+  for (let key in schema.errors) {
+    if (filter.some(filter => filter.toLowerCase() === key.toLowerCase())) {
+      filteredSchema.errors[key] = schema.errors[key]
+    }
+  }
+  return filteredSchema
+}
+
+async function buildSchemaHelper(datasource: Datasource): Promise<Schema> {
+  const connector = (await getConnector(datasource)) as DatasourcePlus
+  const externalSchema = await connector.buildSchema(
+    datasource._id!,
+    datasource.entities!
+  )
+  return externalSchema
+}
+
+export async function getConnector(
+  datasource: Datasource
+): Promise<IntegrationBase | DatasourcePlus> {
+  const Connector = await getIntegration(datasource.source)
+  // can't enrich if it doesn't have an ID yet
+  if (datasource._id) {
+    datasource = await datasources.enrich(datasource)
+  }
+  // Connect to the DB and build the schema
+  return new Connector(datasource.config)
+}
+
+export async function getAndMergeDatasource(datasource: Datasource) {
+  if (datasource._id) {
+    const existingDatasource = await datasources.get(datasource._id)
+
+    datasource = datasources.mergeConfigs(datasource, existingDatasource)
+  }
+  return await datasources.enrich(datasource)
+}

packages/server/src/startup.ts

@@ -138,7 +138,11 @@ export async function startup(app?: Koa, server?: Server) {
             bbAdminEmail,
             bbAdminPassword,
             tenantId,
-            { hashPassword: true, requirePassword: true }
+            {
+              hashPassword: true,
+              requirePassword: true,
+              skipPasswordValidation: true,
+            }
           )
           // Need to set up an API key for automated integration tests
           if (env.isTest()) {

packages/types/package.json

@@ -17,7 +17,6 @@
   "devDependencies": {
     "@budibase/nano": "10.1.4",
     "@types/koa": "2.13.4",
-    "@types/node": "18.17.0",
     "@types/pouchdb": "6.4.0",
     "@types/redlock": "4.0.3",
     "rimraf": "3.0.2",

packages/types/src/sdk/user.ts

@@ -2,4 +2,5 @@ export interface SaveUserOpts {
   hashPassword?: boolean
   requirePassword?: boolean
   currentUserId?: string
+  skipPasswordValidation?: boolean
 }