Merge branch 'master' into BUDI-7654/app-migration-builder-frontend

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
 

lerna.json

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

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/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,19 @@ export default function (
       if (!authenticated) {
         authenticated = false
       }
+
+      if (user) {
+        tracer.setUser({
+          id: user?._id,
+          tenantId: user?.tenantId,
+          admin: user?.admin,
+          builder: user?.builder,
+          budibaseAccess: user?.budibaseAccess,
+          status: user?.status,
+          roles: user?.roles,
+        })
+      }
+
       // 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

@@ -1,7 +1,7 @@
-import { env } from ".."
+import env from "../environment"
 
-export const PASSWORD_MIN_LENGTH = +(process.env.PASSWORD_MIN_LENGTH || 8)
+export const PASSWORD_MIN_LENGTH = +(env.PASSWORD_MIN_LENGTH || 8)
-export const PASSWORD_MAX_LENGTH = +(process.env.PASSWORD_MAX_LENGTH || 512)
+export const PASSWORD_MAX_LENGTH = +(env.PASSWORD_MAX_LENGTH || 512)
 
 export function validatePassword(
   password: string

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

@@ -44,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) => {
@@ -112,9 +118,11 @@ export class UserDB {
         throw new HTTPError("Password change is disabled for this user", 400)
       }
 
-      const passwordValidation = validatePassword(password)
+      if (!opts.skipPasswordValidation) {
-      if (!passwordValidation.valid) {
+        const passwordValidation = validatePassword(password)
-        throw new HTTPError(passwordValidation.error, 400)
+        if (!passwordValidation.valid) {
+          throw new HTTPError(passwordValidation.error, 400)
+        }
       }
 
       hashedPassword = opts.hashPassword ? await hash(password) : password
@@ -489,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,
@@ -513,6 +521,7 @@ export class UserDB {
     return await UserDB.save(user, {
       hashPassword: opts?.hashPassword,
       requirePassword: opts?.requirePassword,
+      skipPasswordValidation: opts?.skipPasswordValidation,
     })
   }
 

packages/bbui/src/ActionButton/ActionButton.svelte

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

packages/bbui/src/DetailSummary/DetailSummary.svelte

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

packages/bbui/src/Form/Field.svelte

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

packages/builder/src/builderStore/dataBinding.js

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

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

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

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/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/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/ValidationEditor/ValidationDrawer.svelte

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

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

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

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

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

packages/client/manifest.json

@@ -4879,7 +4879,7 @@
   },
   "chartblock": {
     "block": true,
-    "name": "Chart block",
+    "name": "Chart Block",
     "icon": "GraphPie",
     "hasChildren": false,
     "settings": [
@@ -5369,7 +5369,7 @@
   },
   "tableblock": {
     "block": true,
-    "name": "Table block",
+    "name": "Table Block",
     "icon": "Table",
     "styles": ["size"],
     "size": {
@@ -5615,7 +5615,7 @@
   },
   "cardsblock": {
     "block": true,
-    "name": "Cards block",
+    "name": "Cards Block",
     "icon": "PersonalizationField",
     "styles": ["size"],
     "size": {
@@ -5795,7 +5795,7 @@
   },
   "repeaterblock": {
     "block": true,
-    "name": "Repeater block",
+    "name": "Repeater Block",
     "icon": "ViewList",
     "illegalChildren": ["section"],
     "hasChildren": true,
@@ -6035,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",
@@ -6290,7 +6448,7 @@
     }
   },
   "gridblock": {
-    "name": "Grid block",
+    "name": "Grid Block",
     "icon": "Table",
     "styles": ["size"],
     "size": {

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

@@ -0,0 +1,187 @@
+<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")
+
+  // 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="fieldgroup" order={2}>
+            {#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}
+          </BlockComponent>
+          <BlockComponent
+            type="buttongroup"
+            props={{ buttons: step.buttons }}
+            styles={{
+              normal: {
+                "margin-top": "16px",
+              },
+            }}
+            order={3}
+          />
+        </BlockComponent>
+      </BlockComponent>
+    {/each}
+  </BlockComponent>
+</FormBlockWrapper>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

packages/client/src/index.js

@@ -76,6 +76,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/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/pro

@@ -1 +1 @@
-Subproject commit dc2b1b22e7f9bac705746bf1fb72c817db043fa3
+Subproject commit b1c10c2daf808d103724c324256cbff67f33fb46

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, {
+    const { rows, keys, info, extra } = (await Runner.run(inputs)) as any
-      datasourceId: datasource._id,
-    })
     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>(
+    const { rows, pagination, extra, info } = (await Runner.run(inputs)) as any
-      runFn,
-      {
-        datasourceId: datasource._id,
-      }
-    )
     // 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(
+    const { row, table } = await pickApi(tableId).patch(ctx)
-      () => pickApi(tableId).patch(ctx),
-      {
-        datasourceId: tableId,
-      }
-    )
     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)
-      () => sdk.rows.save(tableId, ctx.request.body, ctx.user?._id),
-      {
-        datasourceId: tableId,
-      }
-    )
   )
   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(
+  ctx.body = await sdk.rows.fetchView(tableId, viewName, {
-    () =>
+    calculation,
-      sdk.rows.fetchView(tableId, viewName, {
+    group: calculation ? group : null,
-        calculation,
+    field,
-        group: calculation ? group : null,
+  })
-        field,
-      }),
-    {
-      datasourceId: tableId,
-    }
-  )
 }
 
 export async function fetch(ctx: any) {
   const tableId = utils.getTableId(ctx)
-  ctx.body = await quotas.addQuery(() => sdk.rows.fetch(tableId), {
+  ctx.body = await sdk.rows.fetch(tableId)
-    datasourceId: tableId,
-  })
 }
 
 export async function find(ctx: UserCtx<void, GetRowResponse>) {
   const tableId = utils.getTableId(ctx)
-  ctx.body = await quotas.addQuery(() => pickApi(tableId).find(ctx), {
+  ctx.body = await pickApi(tableId).find(ctx)
-    datasourceId: tableId,
-  })
 }
 
 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 = await processDeleteRowsRequest(ctx)
-  deleteRequest.rows = rowDeletes
 
-  const { rows } = await quotas.addQuery(
+  const { rows } = await pickApi(tableId).bulkDestroy(ctx)
-    () => pickApi(tableId).bulkDestroy(ctx),
-    {
-      datasourceId: tableId,
-    }
-  )
   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), {
+  const resp = await pickApi(tableId).destroy(ctx)
-    datasourceId: tableId,
-  })
   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), {
+  ctx.body = await sdk.rows.search(searchParams)
-    datasourceId: tableId,
-  })
 }
 
 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(
+  ctx.body = await pickApi(tableId).fetchEnrichedRow(ctx)
-    () => pickApi(tableId).fetchEnrichedRow(ctx),
-    {
-      datasourceId: tableId,
-    }
-  )
 }
 
 export const exportRows = async (
@@ -268,22 +233,15 @@ export const exportRows = async (
     )
   }
 
-  ctx.body = await quotas.addQuery(
+  const { fileName, content } = await sdk.rows.exportRows({
-    async () => {
+    tableId,
-      const { fileName, content } = await sdk.rows.exportRows({
+    format: format as Format,
-        tableId,
+    rowIds: rows,
-        format: format as Format,
+    columns,
-        rowIds: rows,
+    query,
-        columns,
+    sort,
-        query,
+    sortOrder,
-        sort,
+  })
-        sortOrder,
+  ctx.attachment(fileName)
-      })
+  ctx.body = apiFileReturn(content)
-      ctx.attachment(fileName)
-      return apiFileReturn(content)
-    },
-    {
-      datasourceId: tableId,
-    }
-  )
 }

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), {
+  const result = await sdk.rows.search(searchOptions)
-    datasourceId: view.tableId,
-  })
-
   result.rows.forEach(r => (r._viewId = view.id))
   ctx.body = result
 }

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/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/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
+ * Looks for columns which need to be copied over into the new table definitions, like relationships,
- * and options types.
+ * 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/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/src/sdk/user.ts

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

packages/worker/tsconfig.json

@@ -4,6 +4,9 @@
     "composite": true,
     "baseUrl": "."
   },
+  "ts-node": {
+    "require": ["tsconfig-paths/register"]
+  },
   "include": ["src/**/*", "__mocks__/**/*"],
   "exclude": ["node_modules", "dist"]
 }