Merge branch 'master' into worker-remove-mocks

lerna.json

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

packages/bbui/src/Actions/click_outside.js

@@ -79,7 +79,8 @@ const removeHandler = id => {
 export default (element, opts) => {
   const id = Math.random()
   const update = newOpts => {
-    const callback = newOpts?.callback || newOpts
+    const callback =
+      newOpts?.callback || (typeof newOpts === "function" ? newOpts : null)
     const anchor = newOpts?.anchor || element
     const allowedType = newOpts?.allowedType || "click"
     updateHandler(id, element, anchor, callback, allowedType)

packages/bbui/src/Drawer/DrawerContent.svelte

@@ -42,7 +42,6 @@
   .main {
     height: 100%;
     overflow: auto;
-    overflow-x: hidden;
   }
   .padding .main {
     padding: var(--spacing-xl);

packages/bbui/src/Table/CellRenderer.svelte

@@ -12,6 +12,7 @@
   export let schema
   export let value
   export let customRenderers = []
+  export let snippets
 
   let renderer
   const typeMap = {
@@ -44,7 +45,7 @@
     if (!template) {
       return value
     }
-    return processStringSync(template, { value })
+    return processStringSync(template, { value, snippets })
   }
 </script>
 

packages/bbui/src/Table/Table.svelte

@@ -42,6 +42,7 @@
   export let customPlaceholder = false
   export let showHeaderBorder = true
   export let placeholderText = "No rows found"
+  export let snippets = []
 
   const dispatch = createEventDispatcher()
 
@@ -425,6 +426,7 @@
                   <CellRenderer
                     {customRenderers}
                     {row}
+                    {snippets}
                     schema={schema[field]}
                     value={deepGet(row, field)}
                     on:clickrelationship

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

@@ -34,7 +34,12 @@
   import { getBindings } from "components/backend/DataTable/formula"
   import JSONSchemaModal from "./JSONSchemaModal.svelte"
   import { ValidColumnNameRegex } from "@budibase/shared-core"
-  import { FieldType, FieldSubtype, SourceName } from "@budibase/types"
+  import {
+    FieldType,
+    FieldSubtype,
+    SourceName,
+    FieldTypeSubtypes,
+  } from "@budibase/types"
   import RelationshipSelector from "components/common/RelationshipSelector.svelte"
   import { RowUtils } from "@budibase/frontend-core"
   import ServerBindingPanel from "components/common/bindings/ServerBindingPanel.svelte"
@@ -191,8 +196,10 @@
     // don't make field IDs for auto types
     if (type === AUTO_TYPE || autocolumn) {
       return type.toUpperCase()
-    } else {
+    } else if (type === FieldType.BB_REFERENCE) {
       return `${type}${subtype || ""}`.toUpperCase()
+    } else {
+      return type.toUpperCase()
     }
   }
 
@@ -705,17 +712,14 @@
     />
   {:else if editableColumn.type === FieldType.ATTACHMENT}
     <Toggle
-      value={editableColumn.constraints?.length?.maximum !== 1}
+      value={editableColumn.subtype !== FieldTypeSubtypes.ATTACHMENT.SINGLE &&
+        // Checking config before the subtype was added
+        editableColumn.constraints?.length?.maximum !== 1}
       on:change={e => {
         if (!e.detail) {
-          editableColumn.constraints ??= { length: {} }
-          editableColumn.constraints.length ??= {}
-          editableColumn.constraints.length.maximum = 1
-          editableColumn.constraints.length.message =
-            "cannot contain multiple files"
+          editableColumn.subtype = FieldTypeSubtypes.ATTACHMENT.SINGLE
         } else {
-          delete editableColumn.constraints?.length?.maximum
-          delete editableColumn.constraints?.length?.message
+          delete editableColumn.subtype
         }
       }}
       thin

packages/builder/src/components/common/CodeEditor/index.js

@@ -313,7 +313,7 @@ export const bindingsToCompletions = (bindings, mode) => {
       ...bindingByCategory[catKey].reduce((acc, binding) => {
         let displayType = binding.fieldSchema?.type || binding.display?.type
         acc.push({
-          label: binding.display?.name || "NO NAME",
+          label: binding.display?.name || binding.readableBinding || "NO NAME",
           info: completion => {
             return buildBindingInfoNode(completion, binding)
           },

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

@@ -8,6 +8,7 @@
   export let allowJS = false
   export let allowHelpers = true
   export let autofocusEditor = false
+  export let context = null
 
   $: enrichedBindings = enrichBindings(bindings)
 
@@ -27,7 +28,7 @@
 
 <BindingPanel
   bindings={enrichedBindings}
-  context={$previewStore.selectedComponentContext}
+  context={{ ...$previewStore.selectedComponentContext, ...context }}
   snippets={$snippets}
   {value}
   {allowJS}

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

@@ -44,6 +44,7 @@
   let appActionPopoverOpen = false
   let appActionPopoverAnchor
   let publishing = false
+  let lastOpened
 
   $: filteredApps = $appsStore.apps.filter(app => app.devId === application)
   $: selectedApp = filteredApps?.length ? filteredApps[0] : null
@@ -57,7 +58,7 @@
     $appStore.version &&
     $appStore.upgradableVersion !== $appStore.version
   $: canPublish = !publishing && loaded && $sortedScreens.length > 0
-  $: lastDeployed = getLastDeployedString($deploymentStore)
+  $: lastDeployed = getLastDeployedString($deploymentStore, lastOpened)
 
   const initialiseApp = async () => {
     const applicationPkg = await API.fetchAppPackage($appStore.devId)
@@ -201,6 +202,7 @@
       class="app-action-button publish app-action-popover"
       on:click={() => {
         if (!appActionPopoverOpen) {
+          lastOpened = new Date()
           appActionPopover.show()
         } else {
           appActionPopover.hide()

packages/builder/src/components/design/settings/controls/ColumnEditor/CellDrawer.svelte

@@ -7,10 +7,13 @@
     Layout,
     Label,
   } from "@budibase/bbui"
-  import { themeStore } from "stores/builder"
+  import { themeStore, previewStore } from "stores/builder"
   import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 
   export let column
+
+  $: columnValue =
+    $previewStore.selectedComponentContext?.eventContext?.row?.[column.name]
 </script>
 
 <DrawerContent>
@@ -41,6 +44,9 @@
             icon: "TableColumnMerge",
           },
         ]}
+        context={{
+          value: columnValue,
+        }}
       />
       <Layout noPadding gap="XS">
         <Label>Background color</Label>

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

@@ -3,8 +3,6 @@
     "name": "Blocks",
     "icon": "Article",
     "children": [
-      "gridblock",
-      "tableblock",
       "cardsblock",
       "repeaterblock",
       "formblock",
@@ -16,7 +14,7 @@
   {
     "name": "Layout",
     "icon": "ClassicGridView",
-    "children": ["container", "section", "grid", "sidepanel"]
+    "children": ["container", "section", "sidepanel"]
   },
   {
     "name": "Data",
@@ -24,7 +22,7 @@
     "children": [
       "dataprovider",
       "repeater",
-      "table",
+      "gridblock",
       "spreadsheet",
       "dynamicfilter",
       "daterangepicker"

packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte

@@ -19,7 +19,8 @@
   import { goto } from "@roxi/routify"
   import { TOUR_KEYS } from "components/portal/onboarding/tours.js"
   import formScreen from "templates/formScreen"
-  import rowListScreen from "templates/rowListScreen"
+  import gridListScreen from "templates/gridListScreen"
+  import gridDetailsScreen from "templates/gridDetailsScreen"
 
   let mode
   let pendingScreen
@@ -127,7 +128,7 @@
     screenAccessRole = Roles.BASIC
     formType = null
 
-    if (mode === "table" || mode === "grid" || mode === "form") {
+    if (mode === "grid" || mode === "gridDetails" || mode === "form") {
       datasourceModal.show()
     } else if (mode === "blank") {
       let templates = getTemplates($tables.list)
@@ -153,7 +154,10 @@
 
   // Handler for Datasource Screen Creation
   const completeDatasourceScreenCreation = async () => {
-    templates = rowListScreen(selectedDatasources, mode)
+    templates =
+      mode === "grid"
+        ? gridListScreen(selectedDatasources)
+        : gridDetailsScreen(selectedDatasources)
 
     const screens = templates.map(template => {
       let screenTemplate = template.create()

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

@@ -2,8 +2,8 @@
   import { Body } from "@budibase/bbui"
   import CreationPage from "components/common/CreationPage.svelte"
   import blankImage from "./images/blank.png"
-  import tableImage from "./images/table.png"
-  import gridImage from "./images/grid.png"
+  import tableInline from "./images/tableInline.png"
+  import tableDetails from "./images/tableDetails.png"
   import formImage from "./images/form.png"
   import CreateScreenModal from "./CreateScreenModal.svelte"
   import { screenStore } from "stores/builder"
@@ -38,23 +38,23 @@
         </div>
       </div>
 
-      <div class="card" on:click={() => createScreenModal.show("table")}>
+      <div class="card" on:click={() => createScreenModal.show("grid")}>
         <div class="image">
-          <img alt="" src={tableImage} />
+          <img alt="" src={tableInline} />
         </div>
         <div class="text">
-          <Body size="S">Table</Body>
-          <Body size="XS">View, edit and delete rows on a table</Body>
+          <Body size="S">Table with inline editing</Body>
+          <Body size="XS">View, edit and delete rows inline</Body>
         </div>
       </div>
 
-      <div class="card" on:click={() => createScreenModal.show("grid")}>
+      <div class="card" on:click={() => createScreenModal.show("gridDetails")}>
         <div class="image">
-          <img alt="" src={gridImage} />
+          <img alt="" src={tableDetails} />
         </div>
         <div class="text">
-          <Body size="S">Grid</Body>
-          <Body size="XS">View and manipulate rows on a grid</Body>
+          <Body size="S">Table with details panel</Body>
+          <Body size="XS">Manage your row details in a side panel</Body>
         </div>
       </div>
 
@@ -113,6 +113,11 @@
     width: 100%;
   }
 
+  .card .image {
+    min-height: 130px;
+    min-width: 235px;
+  }
+
   .text {
     border: 1px solid var(--grey-4);
     border-radius: 0 0 4px 4px;

packages/builder/src/stores/builder/components.js

@@ -279,12 +279,10 @@ export class ComponentStore extends BudiStore {
       else {
         if (setting.type === "dataProvider") {
           // Validate data provider exists, or else clear it
-          const treeId = parent?._id || component._id
-          const path = findComponentPath(screen?.props, treeId)
-          const providers = path.filter(component =>
-            component._component?.endsWith("/dataprovider")
+          const providers = findAllMatchingComponents(
+            screen?.props,
+            x => x._component === "@budibase/standard-components/dataprovider"
           )
-          // Validate non-empty values
           const valid = providers?.some(dp => value.includes?.(dp._id))
           if (!valid) {
             if (providers.length) {

packages/builder/src/stores/builder/hover.js

@@ -7,12 +7,25 @@ export const INITIAL_HOVER_STATE = {
 }
 
 export class HoverStore extends BudiStore {
+  hoverTimeout
+
   constructor() {
     super({ ...INITIAL_HOVER_STATE })
     this.hover = this.hover.bind(this)
   }
 
   hover(componentId, notifyClient = true) {
+    clearTimeout(this.hoverTimeout)
+    if (componentId) {
+      this.processHover(componentId, notifyClient)
+    } else {
+      this.hoverTimeout = setTimeout(() => {
+        this.processHover(componentId, notifyClient)
+      }, 10)
+    }
+  }
+
+  processHover(componentId, notifyClient) {
     if (componentId === get(this.store).componentId) {
       return
     }

packages/builder/src/templates/gridDetailsScreen.js

@@ -0,0 +1,158 @@
+import sanitizeUrl from "helpers/sanitizeUrl"
+import { Screen } from "./Screen"
+import { Component } from "./Component"
+import { generate } from "shortid"
+import { makePropSafe as safe } from "@budibase/string-templates"
+import { Utils } from "@budibase/frontend-core"
+
+export default function (datasources) {
+  if (!Array.isArray(datasources)) {
+    return []
+  }
+  return datasources.map(datasource => {
+    return {
+      name: `${datasource.label} - List with panel`,
+      create: () => createScreen(datasource),
+      id: GRID_DETAILS_TEMPLATE,
+      resourceId: datasource.resourceId,
+    }
+  })
+}
+
+export const GRID_DETAILS_TEMPLATE = "GRID_DETAILS_TEMPLATE"
+export const gridDetailsUrl = datasource => sanitizeUrl(`/${datasource.label}`)
+
+const createScreen = datasource => {
+  /*
+    Create Row
+   */
+  const createRowSidePanel = new Component(
+    "@budibase/standard-components/sidepanel"
+  ).instanceName("New row side panel")
+
+  const buttonGroup = new Component("@budibase/standard-components/buttongroup")
+  const createButton = new Component("@budibase/standard-components/button")
+
+  createButton.customProps({
+    onClick: [
+      {
+        id: 0,
+        "##eventHandlerType": "Open Side Panel",
+        parameters: {
+          id: createRowSidePanel._json._id,
+        },
+      },
+    ],
+    text: "Create row",
+    type: "cta",
+  })
+
+  buttonGroup.instanceName(`${datasource.label} - Create`).customProps({
+    hAlign: "right",
+    buttons: [createButton.json()],
+  })
+
+  const gridHeader = new Component("@budibase/standard-components/container")
+    .instanceName("Heading container")
+    .customProps({
+      direction: "row",
+      hAlign: "stretch",
+    })
+
+  const heading = new Component("@budibase/standard-components/heading")
+    .instanceName("Table heading")
+    .customProps({
+      text: datasource?.label,
+    })
+
+  gridHeader.addChild(heading)
+  gridHeader.addChild(buttonGroup)
+
+  const createFormBlock = new Component(
+    "@budibase/standard-components/formblock"
+  )
+  createFormBlock.instanceName("Create row form block").customProps({
+    dataSource: datasource,
+    labelPosition: "left",
+    buttonPosition: "top",
+    actionType: "Create",
+    title: "Create row",
+    buttons: Utils.buildFormBlockButtonConfig({
+      _id: createFormBlock._json._id,
+      showDeleteButton: false,
+      showSaveButton: true,
+      saveButtonLabel: "Save",
+      actionType: "Create",
+      dataSource: datasource,
+    }),
+  })
+
+  createRowSidePanel.addChild(createFormBlock)
+
+  /*
+    Edit Row
+   */
+  const stateKey = `ID_${generate()}`
+  const detailsSidePanel = new Component(
+    "@budibase/standard-components/sidepanel"
+  ).instanceName("Edit row side panel")
+
+  const editFormBlock = new Component("@budibase/standard-components/formblock")
+  editFormBlock.instanceName("Edit row form block").customProps({
+    dataSource: datasource,
+    labelPosition: "left",
+    buttonPosition: "top",
+    actionType: "Update",
+    title: "Edit",
+    rowId: `{{ ${safe("state")}.${safe(stateKey)} }}`,
+    buttons: Utils.buildFormBlockButtonConfig({
+      _id: editFormBlock._json._id,
+      showDeleteButton: true,
+      showSaveButton: true,
+      saveButtonLabel: "Save",
+      deleteButtonLabel: "Delete",
+      actionType: "Update",
+      dataSource: datasource,
+    }),
+  })
+
+  detailsSidePanel.addChild(editFormBlock)
+
+  const gridBlock = new Component("@budibase/standard-components/gridblock")
+  gridBlock
+    .customProps({
+      table: datasource,
+      allowAddRows: false,
+      allowEditRows: false,
+      allowDeleteRows: false,
+      onRowClick: [
+        {
+          id: 0,
+          "##eventHandlerType": "Update State",
+          parameters: {
+            key: stateKey,
+            type: "set",
+            persist: false,
+            value: `{{ ${safe("eventContext")}.${safe("row")}._id }}`,
+          },
+        },
+        {
+          id: 1,
+          "##eventHandlerType": "Open Side Panel",
+          parameters: {
+            id: detailsSidePanel._json._id,
+          },
+        },
+      ],
+    })
+    .instanceName(`${datasource.label} - Table`)
+
+  return new Screen()
+    .route(gridDetailsUrl(datasource))
+    .instanceName(`${datasource.label} - List and details`)
+    .addChild(gridHeader)
+    .addChild(gridBlock)
+    .addChild(createRowSidePanel)
+    .addChild(detailsSidePanel)
+    .json()
+}

packages/builder/src/templates/gridListScreen.js

@@ -0,0 +1,41 @@
+import sanitizeUrl from "helpers/sanitizeUrl"
+import { Screen } from "./Screen"
+import { Component } from "./Component"
+
+export default function (datasources) {
+  if (!Array.isArray(datasources)) {
+    return []
+  }
+  return datasources.map(datasource => {
+    return {
+      name: `${datasource.label} - List`,
+      create: () => createScreen(datasource),
+      id: GRID_LIST_TEMPLATE,
+      resourceId: datasource.resourceId,
+    }
+  })
+}
+
+export const GRID_LIST_TEMPLATE = "GRID_LIST_TEMPLATE"
+export const gridListUrl = datasource => sanitizeUrl(`/${datasource.label}`)
+
+const createScreen = datasource => {
+  const heading = new Component("@budibase/standard-components/heading")
+    .instanceName("Table heading")
+    .customProps({
+      text: datasource?.label,
+    })
+
+  const gridBlock = new Component("@budibase/standard-components/gridblock")
+    .instanceName(`${datasource.label} - Table`)
+    .customProps({
+      table: datasource,
+    })
+
+  return new Screen()
+    .route(gridListUrl(datasource))
+    .instanceName(`${datasource.label} - List`)
+    .addChild(heading)
+    .addChild(gridBlock)
+    .json()
+}

packages/builder/src/templates/index.js

@@ -1,9 +1,11 @@
-import rowListScreen from "./rowListScreen"
+import gridListScreen from "./gridListScreen"
+import gridDetailsScreen from "./gridDetailsScreen"
 import createFromScratchScreen from "./createFromScratchScreen"
 import formScreen from "./formScreen"
 
 const allTemplates = datasources => [
-  ...rowListScreen(datasources),
+  ...gridListScreen(datasources),
+  ...gridDetailsScreen(datasources),
   ...formScreen(datasources),
 ]
 

packages/builder/src/templates/rowListScreen.js

@@ -1,63 +0,0 @@
-import sanitizeUrl from "helpers/sanitizeUrl"
-import { Screen } from "./Screen"
-import { Component } from "./Component"
-
-export default function (datasources, mode = "table") {
-  if (!Array.isArray(datasources)) {
-    return []
-  }
-  return datasources.map(datasource => {
-    return {
-      name: `${datasource.label} - List`,
-      create: () => createScreen(datasource, mode),
-      id: ROW_LIST_TEMPLATE,
-      resourceId: datasource.resourceId,
-    }
-  })
-}
-
-export const ROW_LIST_TEMPLATE = "ROW_LIST_TEMPLATE"
-export const rowListUrl = datasource => sanitizeUrl(`/${datasource.label}`)
-
-const generateTableBlock = datasource => {
-  const tableBlock = new Component("@budibase/standard-components/tableblock")
-  tableBlock
-    .customProps({
-      title: datasource.label,
-      dataSource: datasource,
-      sortOrder: "Ascending",
-      size: "spectrum--medium",
-      paginate: true,
-      rowCount: 8,
-      clickBehaviour: "details",
-      showTitleButton: true,
-      titleButtonText: "Create row",
-      titleButtonClickBehaviour: "new",
-      sidePanelSaveLabel: "Save",
-      sidePanelDeleteLabel: "Delete",
-    })
-    .instanceName(`${datasource.label} - Table block`)
-  return tableBlock
-}
-
-const generateGridBlock = datasource => {
-  const gridBlock = new Component("@budibase/standard-components/gridblock")
-  gridBlock
-    .customProps({
-      table: datasource,
-    })
-    .instanceName(`${datasource.label} - Grid block`)
-  return gridBlock
-}
-
-const createScreen = (datasource, mode) => {
-  return new Screen()
-    .route(rowListUrl(datasource))
-    .instanceName(`${datasource.label} - List`)
-    .addChild(
-      mode === "table"
-        ? generateTableBlock(datasource)
-        : generateGridBlock(datasource)
-    )
-    .json()
-}

packages/client/manifest.json

@@ -4673,6 +4673,7 @@
     }
   },
   "table": {
+    "deprecated": true,
     "name": "Table",
     "icon": "Table",
     "illegalChildren": ["section"],
@@ -5418,6 +5419,7 @@
     ]
   },
   "tableblock": {
+    "deprecated": true,
     "block": true,
     "name": "Table Block",
     "icon": "Table",
@@ -6595,7 +6597,7 @@
     ]
   },
   "gridblock": {
-    "name": "Grid Block",
+    "name": "Table",
     "icon": "Table",
     "styles": ["size"],
     "size": {

packages/client/src/components/Component.svelte

@@ -246,15 +246,18 @@
       return
     }
 
+    const cacheId = `${definition.name}${
+      definition?.deprecated === true ? "_deprecated" : ""
+    }`
     // Get the settings definition for this component, and cache it
-    if (SettingsDefinitionCache[definition.name]) {
-      settingsDefinition = SettingsDefinitionCache[definition.name]
-      settingsDefinitionMap = SettingsDefinitionMapCache[definition.name]
+    if (SettingsDefinitionCache[cacheId]) {
+      settingsDefinition = SettingsDefinitionCache[cacheId]
+      settingsDefinitionMap = SettingsDefinitionMapCache[cacheId]
     } else {
       settingsDefinition = getSettingsDefinition(definition)
       settingsDefinitionMap = getSettingsDefinitionMap(settingsDefinition)
-      SettingsDefinitionCache[definition.name] = settingsDefinition
-      SettingsDefinitionMapCache[definition.name] = settingsDefinitionMap
+      SettingsDefinitionCache[cacheId] = settingsDefinition
+      SettingsDefinitionMapCache[cacheId] = settingsDefinitionMap
     }
 
     // Parse the instance settings, and cache them

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

@@ -26,9 +26,12 @@
 
   let schema
 
+  $: id = $component.id
+  $: selected = $component.selected
+  $: builderStep = $builderStore.metadata?.step
   $: fetchSchema(dataSource)
-  $: enrichedSteps = enrichSteps(steps, schema, $component.id, $currentStep)
-  $: updateCurrentStep(enrichedSteps, $builderStore, $component)
+  $: enrichedSteps = enrichSteps(steps, schema, id)
+  $: updateCurrentStep(enrichedSteps, selected, builderStep)
 
   // Provide additional data context for live binding eval
   export const getAdditionalDataContext = () => {
@@ -40,30 +43,22 @@
     }
   }
 
-  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
-    ) {
+  const updateCurrentStep = (steps, selected, builderStep) => {
+    // If we aren't selected in the builder then just allowing the normal form
+    // to take control.
+    if (!selected) {
       return
     }
 
     // Ensure we have a valid step selected
-    let newStep = Math.min(step || 0, steps.length - 1)
-
-    // Sanity check
+    let newStep = Math.min(builderStep || 0, steps.length - 1)
     newStep = Math.max(newStep, 0)
 
     // Add 1 because the form component expects 1 indexed rather than 0 indexed
     currentStep.set(newStep + 1)
   }
 
-  const fetchSchema = async () => {
+  const fetchSchema = async dataSource => {
     schema = (await fetchDatasourceSchema(dataSource)) || {}
   }
 

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

@@ -34,6 +34,7 @@
   $: formattedFields = convertOldFieldFormat(fields)
   $: fieldsOrDefault = getDefaultFields(formattedFields, schema)
   $: fetchSchema(dataSource)
+  $: id = $component.id
   // 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
@@ -53,7 +54,7 @@
     buttons:
       buttons ||
       Utils.buildFormBlockButtonConfig({
-        _id: $component.id,
+        _id: id,
         showDeleteButton,
         showSaveButton,
         saveButtonLabel,

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

@@ -1,4 +1,3 @@
-export { default as tableblock } from "./TableBlock.svelte"
 export { default as cardsblock } from "./CardsBlock.svelte"
 export { default as repeaterblock } from "./RepeaterBlock.svelte"
 export { default as formblock } from "./form/FormBlock.svelte"

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

@@ -50,6 +50,7 @@
   let schemaLoaded = false
 
   $: deleteLabel = setDeleteLabel(sidePanelDeleteLabel, sidePanelShowDelete)
+  $: id = $component.id
   $: isDSPlus = dataSource?.type === "table" || dataSource?.type === "viewV2"
   $: fetchSchema(dataSource)
   $: enrichSearchColumns(searchColumns, schema).then(
@@ -279,7 +280,7 @@
               dataSource,
               buttonPosition: "top",
               buttons: Utils.buildFormBlockButtonConfig({
-                _id: $component.id + "-form-edit",
+                _id: id + "-form-edit",
                 showDeleteButton: deleteLabel !== "",
                 showSaveButton: true,
                 saveButtonLabel: sidePanelSaveLabel || "Save",
@@ -313,7 +314,7 @@
               dataSource,
               buttonPosition: "top",
               buttons: Utils.buildFormBlockButtonConfig({
-                _id: $component.id + "-form-new",
+                _id: id + "-form-new",
                 showDeleteButton: false,
                 showSaveButton: true,
                 saveButtonLabel: "Save",

packages/client/src/components/app/deprecated/table/Table.svelte

@@ -3,7 +3,7 @@
   import { Table } from "@budibase/bbui"
   import SlotRenderer from "./SlotRenderer.svelte"
   import { canBeSortColumn } from "@budibase/shared-core"
-  import Provider from "../../context/Provider.svelte"
+  import Provider from "components/context/Provider.svelte"
 
   export let dataProvider
   export let columns
@@ -16,8 +16,15 @@
   export let noRowsMessage
 
   const component = getContext("component")
-  const { styleable, getAction, ActionTypes, rowSelectionStore } =
-    getContext("sdk")
+  const context = getContext("context")
+  const {
+    styleable,
+    getAction,
+    ActionTypes,
+    rowSelectionStore,
+    generateGoldenSample,
+  } = getContext("sdk")
+
   const customColumnKey = `custom-${Math.random()}`
   const customRenderers = [
     {
@@ -28,6 +35,7 @@
 
   let selectedRows = []
 
+  $: snippets = $context.snippets
   $: hasChildren = $component.children
   $: loading = dataProvider?.loading ?? false
   $: data = dataProvider?.rows || []
@@ -61,6 +69,16 @@
     selectedRows,
   }
 
+  // Provide additional data context for live binding eval
+  export const getAdditionalDataContext = () => {
+    const goldenRow = generateGoldenSample(data)
+    return {
+      eventContext: {
+        row: goldenRow,
+      },
+    }
+  }
+
   const getFields = (
     schema,
     customColumns,
@@ -178,6 +196,7 @@
       {quiet}
       {compact}
       {customRenderers}
+      {snippets}
       allowSelectRows={allowSelectRows && table}
       bind:selectedRows
       allowEditRows={false}

packages/client/src/components/app/forms/optionsParser.js

@@ -6,36 +6,24 @@ export const getOptions = (
   valueColumn,
   customOptions
 ) => {
-  const isArray = fieldSchema?.type === "array"
   // Take options from schema
   if (optionsSource == null || optionsSource === "schema") {
     return fieldSchema?.constraints?.inclusion ?? []
   }
 
-  if (optionsSource === "provider" && isArray) {
-    let optionsSet = {}
-
-    dataProvider?.rows?.forEach(row => {
-      const value = row?.[valueColumn]
-      if (value != null) {
-        const label = row[labelColumn] || value
-        optionsSet[value] = { value, label }
-      }
-    })
-    return Object.values(optionsSet)
-  }
-
   // Extract options from data provider
   if (optionsSource === "provider" && valueColumn) {
-    let optionsSet = {}
+    let valueCache = {}
+    let options = []
     dataProvider?.rows?.forEach(row => {
       const value = row?.[valueColumn]
-      if (value != null) {
+      if (value != null && !valueCache[value]) {
+        valueCache[value] = true
         const label = row[labelColumn] || value
-        optionsSet[value] = { value, label }
+        options.push({ value, label })
       }
     })
-    return Object.values(optionsSet)
+    return options
   }
 
   // Extract custom options

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

@@ -40,11 +40,12 @@ export { default as sidepanel } from "./SidePanel.svelte"
 export { default as gridblock } from "./GridBlock.svelte"
 export * from "./charts"
 export * from "./forms"
-export * from "./table"
 export * from "./blocks"
 export * from "./dynamic-filter"
 
 // Deprecated component left for compatibility in old apps
+export * from "./deprecated/table"
+export { default as tableblock } from "./deprecated/TableBlock.svelte"
 export { default as navigation } from "./deprecated/Navigation.svelte"
 export { default as cardhorizontal } from "./deprecated/CardHorizontal.svelte"
 export { default as stackedlist } from "./deprecated/StackedList.svelte"

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

@@ -345,8 +345,7 @@
 <IndicatorSet
   componentId={$dndParent}
   color="var(--spectrum-global-color-static-green-500)"
-  zIndex="930"
-  transition
+  zIndex={920}
   prefix="Inside"
 />
 

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

@@ -1,10 +1,11 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import IndicatorSet from "./IndicatorSet.svelte"
-  import { builderStore, dndIsDragging, hoverStore } from "stores"
+  import { dndIsDragging, hoverStore, builderStore } from "stores"
 
   $: componentId = $hoverStore.hoveredComponentId
-  $: zIndex = componentId === $builderStore.selectedComponentId ? 900 : 920
+  $: selectedComponentId = $builderStore.selectedComponentId
+  $: selected = componentId === selectedComponentId
 
   const onMouseOver = e => {
     // Ignore if dragging
@@ -45,7 +46,6 @@
 <IndicatorSet
   componentId={$dndIsDragging ? null : componentId}
   color="var(--spectrum-global-color-static-blue-200)"
-  transition
-  {zIndex}
+  zIndex={selected ? 890 : 910}
   allowResizeAnchors
 />

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

@@ -1,5 +1,4 @@
 <script>
-  import { fade } from "svelte/transition"
   import { Icon } from "@budibase/bbui"
 
   export let top
@@ -11,7 +10,6 @@
   export let color
   export let zIndex
   export let componentId
-  export let transition = false
   export let line = false
   export let alignRight = false
   export let showResizeAnchors = false
@@ -31,10 +29,6 @@
 </script>
 
 <div
-  in:fade={{
-    delay: transition ? 100 : 0,
-    duration: transition ? 100 : 0,
-  }}
   class="indicator"
   class:flipped
   class:line
@@ -127,10 +121,6 @@
     font-weight: 600;
   }
 
-  /* Icon styles */
-  .label :global(.spectrum-Icon + .text) {
-  }
-
   /* Anchor */
   .anchor {
     --size: 24px;

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

@@ -4,27 +4,39 @@
   import { domDebounce } from "utils/domDebounce"
   import { builderStore } from "stores"
 
-  export let componentId
-  export let color
-  export let transition
-  export let zIndex
+  export let componentId = null
+  export let color = null
+  export let zIndex = 900
   export let prefix = null
   export let allowResizeAnchors = false
 
-  let indicators = []
+  const errorColor = "var(--spectrum-global-color-static-red-600)"
+  const defaultState = () => ({
+    // Cached props
+    componentId,
+    color,
+    zIndex,
+    prefix,
+    allowResizeAnchors,
+
+    // Computed state
+    indicators: [],
+    text: null,
+    icon: null,
+    insideGrid: false,
+    error: false,
+  })
+
   let interval
-  let text
-  let icon
-  let insideGrid = false
-  let errorState = false
-
-  $: visibleIndicators = indicators.filter(x => x.visible)
-  $: offset = $builderStore.inBuilder ? 0 : 2
-
+  let state = defaultState()
+  let nextState = null
   let updating = false
   let observers = []
   let callbackCount = 0
-  let nextIndicators = []
+
+  $: visibleIndicators = state.indicators.filter(x => x.visible)
+  $: offset = $builderStore.inBuilder ? 0 : 2
+  $: $$props, debouncedUpdate()
 
   const checkInsideGrid = id => {
     const component = document.getElementsByClassName(id)[0]
@@ -44,10 +56,10 @@
     if (callbackCount >= observers.length) {
       return
     }
-    nextIndicators[idx].visible =
-      nextIndicators[idx].insideSidePanel || entries[0].isIntersecting
+    nextState.indicators[idx].visible =
+      nextState.indicators[idx].insideSidePanel || entries[0].isIntersecting
     if (++callbackCount === observers.length) {
-      indicators = nextIndicators
+      state = nextState
       updating = false
     }
   }
@@ -59,7 +71,7 @@
 
     // Sanity check
     if (!componentId) {
-      indicators = []
+      state = defaultState()
       return
     }
 
@@ -68,25 +80,25 @@
     callbackCount = 0
     observers.forEach(o => o.disconnect())
     observers = []
-    nextIndicators = []
+    nextState = defaultState()
 
     // Check if we're inside a grid
     if (allowResizeAnchors) {
-      insideGrid = checkInsideGrid(componentId)
+      nextState.insideGrid = checkInsideGrid(componentId)
     }
 
     // Determine next set of indicators
     const parents = document.getElementsByClassName(componentId)
     if (parents.length) {
-      text = parents[0].dataset.name
-      if (prefix) {
-        text = `${prefix} ${text}`
+      nextState.text = parents[0].dataset.name
+      if (nextState.prefix) {
+        nextState.text = `${nextState.prefix} ${nextState.text}`
       }
       if (parents[0].dataset.icon) {
-        icon = parents[0].dataset.icon
+        nextState.icon = parents[0].dataset.icon
       }
     }
-    errorState = parents?.[0]?.classList.contains("error")
+    nextState.error = parents?.[0]?.classList.contains("error")
 
     // Batch reads to minimize reflow
     const scrollX = window.scrollX
@@ -102,8 +114,9 @@
 
     // If there aren't any nodes then reset
     if (!children.length) {
-      indicators = []
+      state = defaultState()
       updating = false
+      return
     }
 
     const device = document.getElementById("app-root")
@@ -119,7 +132,7 @@
       observers.push(observer)
 
       const elBounds = child.getBoundingClientRect()
-      nextIndicators.push({
+      nextState.indicators.push({
         top: elBounds.top + scrollY - deviceBounds.top - offset,
         left: elBounds.left + scrollX - deviceBounds.left - offset,
         width: elBounds.width + 4,
@@ -144,20 +157,17 @@
   })
 </script>
 
-{#key componentId}
-  {#each visibleIndicators as indicator, idx}
-    <Indicator
-      top={indicator.top}
-      left={indicator.left}
-      width={indicator.width}
-      height={indicator.height}
-      text={idx === 0 ? text : null}
-      icon={idx === 0 ? icon : null}
-      showResizeAnchors={allowResizeAnchors && insideGrid}
-      color={errorState ? "var(--spectrum-global-color-static-red-600)" : color}
-      {componentId}
-      {transition}
-      {zIndex}
-    />
-  {/each}
-{/key}
+{#each visibleIndicators as indicator, idx}
+  <Indicator
+    top={indicator.top}
+    left={indicator.left}
+    width={indicator.width}
+    height={indicator.height}
+    text={idx === 0 ? state.text : null}
+    icon={idx === 0 ? state.icon : null}
+    showResizeAnchors={state.allowResizeAnchors && state.insideGrid}
+    color={state.error ? errorColor : state.color}
+    componentId={state.componentId}
+    zIndex={state.zIndex}
+  />
+{/each}

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

@@ -10,7 +10,6 @@
 <IndicatorSet
   componentId={$builderStore.selectedComponentId}
   {color}
-  zIndex="910"
-  transition
+  zIndex={900}
   allowResizeAnchors
 />

packages/client/src/index.js

@@ -98,7 +98,7 @@ const loadBudibase = async () => {
         context: stringifiedContext,
       })
     } else if (type === "hover-component") {
-      hoverStore.actions.hoverComponent(data)
+      hoverStore.actions.hoverComponent(data, false)
     } else if (type === "builder-meta") {
       builderStore.actions.setMetadata(data)
     }

packages/client/src/sdk.js

@@ -34,6 +34,8 @@ import {
   LuceneUtils,
   Constants,
   RowUtils,
+  memo,
+  derivedMemo,
 } from "@budibase/frontend-core"
 
 export default {
@@ -71,6 +73,8 @@ export default {
   makePropSafe,
   createContextStore,
   generateGoldenSample: RowUtils.generateGoldenSample,
+  memo,
+  derivedMemo,
 
   // Components
   Provider,

packages/client/src/stores/hover.js

@@ -5,13 +5,27 @@ const createHoverStore = () => {
   const store = writable({
     hoveredComponentId: null,
   })
+  let hoverTimeout
 
-  const hoverComponent = id => {
+  const hoverComponent = (id, notifyBuilder = true) => {
+    clearTimeout(hoverTimeout)
+    if (id) {
+      processHover(id, notifyBuilder)
+    } else {
+      hoverTimeout = setTimeout(() => {
+        processHover(id, notifyBuilder)
+      }, 10)
+    }
+  }
+
+  const processHover = (id, notifyBuilder = true) => {
     if (id === get(store).hoveredComponentId) {
       return
     }
     store.set({ hoveredComponentId: id })
-    eventStore.actions.dispatchEvent("hover-component", { id })
+    if (notifyBuilder) {
+      eventStore.actions.dispatchEvent("hover-component", { id })
+    }
   }
 
   return {

packages/server/src/api/controllers/table/utils.ts

@@ -30,6 +30,8 @@ import {
   View,
   RelationshipFieldMetadata,
   FieldType,
+  FieldTypeSubtypes,
+  AttachmentFieldMetadata,
 } from "@budibase/types"
 
 export async function clearColumns(table: Table, columnNames: string[]) {
@@ -88,6 +90,27 @@ export async function checkForColumnUpdates(
     // Update views
     await checkForViewUpdates(updatedTable, deletedColumns, columnRename)
   }
+
+  const changedAttachmentSubtypeColumns = Object.values(
+    updatedTable.schema
+  ).filter(
+    (column): column is AttachmentFieldMetadata =>
+      column.type === FieldType.ATTACHMENT &&
+      column.subtype !== oldTable?.schema[column.name]?.subtype
+  )
+  for (const attachmentColumn of changedAttachmentSubtypeColumns) {
+    if (attachmentColumn.subtype === FieldTypeSubtypes.ATTACHMENT.SINGLE) {
+      attachmentColumn.constraints ??= { length: {} }
+      attachmentColumn.constraints.length ??= {}
+      attachmentColumn.constraints.length.maximum = 1
+      attachmentColumn.constraints.length.message =
+        "cannot contain multiple files"
+    } else {
+      delete attachmentColumn.constraints?.length?.maximum
+      delete attachmentColumn.constraints?.length?.message
+    }
+  }
+
   return { rows: updatedRows, table: updatedTable }
 }
 

packages/server/src/integrations/base/sqlTable.ts

@@ -60,7 +60,7 @@ function generateSchema(
         schema.text(key)
         break
       case FieldType.BB_REFERENCE: {
-        const subtype = column.subtype as FieldSubtype
+        const subtype = column.subtype
         switch (subtype) {
           case FieldSubtype.USER:
             schema.text(key)

packages/server/src/jsRunner/bundles/index-helpers.ts

@@ -1,6 +1,5 @@
-const {
-  getJsHelperList,
-} = require("../../../../string-templates/src/helpers/list.js")
+// eslint-disable-next-line local-rules/no-budibase-imports
+import { getJsHelperList } from "@budibase/string-templates/src/helpers/list"
 
 export default {
   ...getJsHelperList(),

packages/server/src/jsRunner/bundles/snippets.ivm.bundle.js

@@ -1,3 +1,3 @@
-"use strict";var snippets=(()=>{var u=Object.create;var n=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var l=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),W=(i,e)=>{for(var p in e)n(i,p,{get:e[p],enumerable:!0})},f=(i,e,p,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of h(e))!C.call(i,t)&&t!==p&&n(i,t,{get:()=>e[t],enumerable:!(r=a(e,t))||r.enumerable});return i};var d=(i,e,p)=>(p=i!=null?u(x(i)):{},f(e||!i||!i.__esModule?n(p,"default",{value:i,enumerable:!0}):p,i)),g=i=>f(n({},"__esModule",{value:!0}),i);var s=l((D,o)=>{o.exports.iifeWrapper=i=>`(function(){
+"use strict";var snippets=(()=>{var p=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var u=(i,e)=>{for(var n in e)p(i,n,{get:e[n],enumerable:!0})},a=(i,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of s(e))!c.call(i,t)&&t!==n&&p(i,t,{get:()=>e[t],enumerable:!(r=f(e,t))||r.enumerable});return i};var h=i=>a(p({},"__esModule",{value:!0}),i);var C={};u(C,{default:()=>x});var o=i=>`(function(){
 ${i}
-})();`});var w={};W(w,{default:()=>v});var c=d(s()),v=new Proxy({},{get:function(i,e){return e in snippetCache||(snippetCache[e]=[eval][0]((0,c.iifeWrapper)(snippetDefinitions[e]))),snippetCache[e]}});return g(w);})();
+})();`;var x=new Proxy({},{get:function(i,e){return e in snippetCache||(snippetCache[e]=[eval][0](o(snippetDefinitions[e]))),snippetCache[e]}});return h(C);})();

packages/server/src/sdk/app/rows/search/utils.ts

@@ -67,7 +67,7 @@ export function searchInputMapping(table: Table, options: SearchParams) {
   for (let [key, column] of Object.entries(table.schema)) {
     switch (column.type) {
       case FieldType.BB_REFERENCE: {
-        const subtype = column.subtype as FieldSubtype
+        const subtype = column.subtype
         switch (subtype) {
           case FieldSubtype.USER:
           case FieldSubtype.USERS:

packages/server/src/utilities/rowProcessor/bbReferenceProcessor.ts

@@ -7,7 +7,7 @@ const ROW_PREFIX = DocumentType.ROW + SEPARATOR
 
 export async function processInputBBReferences(
   value: string | string[] | { _id: string } | { _id: string }[],
-  subtype: FieldSubtype
+  subtype: FieldSubtype.USER | FieldSubtype.USERS
 ): Promise<string | string[] | null> {
   let referenceIds: string[] = []
 
@@ -61,7 +61,7 @@ export async function processInputBBReferences(
 
 export async function processOutputBBReferences(
   value: string | string[],
-  subtype: FieldSubtype
+  subtype: FieldSubtype.USER | FieldSubtype.USERS
 ) {
   if (value === null || value === undefined) {
     // Already processed or nothing to process

packages/server/src/utilities/rowProcessor/index.ts

@@ -6,7 +6,6 @@ import { TYPE_TRANSFORM_MAP } from "./map"
 import {
   FieldType,
   AutoFieldSubType,
-  FieldSubtype,
   Row,
   RowAttachment,
   Table,
@@ -159,10 +158,7 @@ export async function inputProcessing(
     }
 
     if (field.type === FieldType.BB_REFERENCE && value) {
-      clonedRow[key] = await processInputBBReferences(
-        value,
-        field.subtype as FieldSubtype
-      )
+      clonedRow[key] = await processInputBBReferences(value, field.subtype)
     }
   }
 
@@ -238,7 +234,7 @@ export async function outputProcessing<T extends Row[] | Row>(
       for (let row of enriched) {
         row[property] = await processOutputBBReferences(
           row[property],
-          column.subtype as FieldSubtype
+          column.subtype
         )
       }
     }

packages/server/src/utilities/schema.ts

@@ -1,26 +1,14 @@
-import { FieldType, FieldSubtype } from "@budibase/types"
+import {
+  FieldType,
+  FieldSubtype,
+  TableSchema,
+  FieldSchema,
+  Row,
+} from "@budibase/types"
 import { ValidColumnNameRegex, utils } from "@budibase/shared-core"
 import { db } from "@budibase/backend-core"
 import { parseCsvExport } from "../api/controllers/view/exporters"
 
-interface SchemaColumn {
-  readonly name: string
-  readonly type: FieldType
-  readonly subtype: FieldSubtype
-  readonly autocolumn?: boolean
-  readonly constraints?: {
-    presence: boolean
-  }
-}
-
-interface Schema {
-  readonly [index: string]: SchemaColumn
-}
-
-interface Row {
-  [index: string]: any
-}
-
 type Rows = Array<Row>
 
 interface SchemaValidation {
@@ -34,12 +22,10 @@ interface ValidationResults {
   errors: Record<string, string>
 }
 
-export function isSchema(schema: any): schema is Schema {
+export function isSchema(schema: any): schema is TableSchema {
   return (
     typeof schema === "object" &&
-    Object.values(schema).every(rawColumn => {
-      const column = rawColumn as SchemaColumn
-
+    Object.values<FieldSchema>(schema).every(column => {
       return (
         column !== null &&
         typeof column === "object" &&
@@ -54,7 +40,7 @@ export function isRows(rows: any): rows is Rows {
   return Array.isArray(rows) && rows.every(row => typeof row === "object")
 }
 
-export function validate(rows: Rows, schema: Schema): ValidationResults {
+export function validate(rows: Rows, schema: TableSchema): ValidationResults {
   const results: ValidationResults = {
     schemaValidation: {},
     allValid: false,
@@ -64,9 +50,11 @@ export function validate(rows: Rows, schema: Schema): ValidationResults {
 
   rows.forEach(row => {
     Object.entries(row).forEach(([columnName, columnData]) => {
-      const columnType = schema[columnName]?.type
-      const columnSubtype = schema[columnName]?.subtype
-      const isAutoColumn = schema[columnName]?.autocolumn
+      const {
+        type: columnType,
+        subtype: columnSubtype,
+        autocolumn: isAutoColumn,
+      } = schema[columnName]
 
       // If the column had an invalid value we don't want to override it
       if (results.schemaValidation[columnName] === false) {
@@ -123,7 +111,7 @@ export function validate(rows: Rows, schema: Schema): ValidationResults {
   return results
 }
 
-export function parse(rows: Rows, schema: Schema): Rows {
+export function parse(rows: Rows, schema: TableSchema): Rows {
   return rows.map(row => {
     const parsedRow: Row = {}
 
@@ -133,9 +121,7 @@ export function parse(rows: Rows, schema: Schema): Rows {
         return
       }
 
-      const columnType = schema[columnName].type
-      const columnSubtype = schema[columnName].subtype
-
+      const { type: columnType, subtype: columnSubtype } = schema[columnName]
       if (columnType === FieldType.NUMBER) {
         // If provided must be a valid number
         parsedRow[columnName] = columnData ? Number(columnData) : columnData
@@ -172,7 +158,7 @@ export function parse(rows: Rows, schema: Schema): Rows {
 
 function isValidBBReference(
   columnData: any,
-  columnSubtype: FieldSubtype
+  columnSubtype: FieldSubtype.USER | FieldSubtype.USERS
 ): boolean {
   switch (columnSubtype) {
     case FieldSubtype.USER:

packages/server/tsconfig.build.json

@@ -18,7 +18,8 @@
       "@budibase/backend-core/*": ["../backend-core/*"],
       "@budibase/shared-core": ["../shared-core/src"],
       "@budibase/pro": ["../pro/src"],
-      "@budibase/string-templates": ["../string-templates/src"]
+      "@budibase/string-templates": ["../string-templates/src"],
+      "@budibase/string-templates/*": ["../string-templates/*"]
     },
     "allowArbitraryExtensions": true
   },

packages/string-templates/src/helpers/list.ts

@@ -1,17 +1,29 @@
 import { date, duration } from "./date"
 
-import {
-  math,
-  array,
-  number,
-  url,
-  string,
-  comparison,
-  object,
-  regex,
-  uuid,
-  // @ts-expect-error
-} from "@budibase/handlebars-helpers"
+/* 
+@budibase/handlebars-helpers is not treeshakeable, so we can't use the barrel files. 
+Otherwise, we have issues when generating the isolated-vm bundle because of the treeshaking
+*/
+/* eslint-disable local-rules/no-budibase-imports */
+// @ts-expect-error
+import math from "@budibase/handlebars-helpers/lib/math"
+// @ts-expect-error
+import array from "@budibase/handlebars-helpers/lib/array"
+// @ts-expect-error
+import number from "@budibase/handlebars-helpers/lib/number"
+// @ts-expect-error
+import url from "@budibase/handlebars-helpers/lib/url"
+// @ts-expect-error
+import string from "@budibase/handlebars-helpers/lib/string"
+// @ts-expect-error
+import comparison from "@budibase/handlebars-helpers/lib/comparison"
+// @ts-expect-error
+import object from "@budibase/handlebars-helpers/lib/object"
+// @ts-expect-error
+import regex from "@budibase/handlebars-helpers/lib/regex"
+// @ts-expect-error
+import uuid from "@budibase/handlebars-helpers/lib/uuid"
+/* eslint-enable local-rules/no-budibase-imports */
 
 // https://github.com/evanw/esbuild/issues/56
 const externalCollections = {
@@ -42,14 +54,14 @@ export function getJsHelperList() {
 
   helpers = {}
   for (let collection of Object.values(externalCollections)) {
-    for (let [key, func] of Object.entries<any>(collection())) {
+    for (let [key, func] of Object.entries<any>(collection)) {
       // Handlebars injects the hbs options to the helpers by default. We are adding an empty {} as a last parameter to simulate it
       helpers[key] = (...props: any) => func(...props, {})
     }
   }
   helpers = {
     ...helpers,
-    addedHelpers,
+    ...addedHelpers,
   }
 
   for (const toRemove of helpersToRemoveForJs) {

packages/string-templates/src/index.ts

@@ -94,7 +94,7 @@ export async function processObject<T extends Record<string, any>>(
   for (const key of Object.keys(object || {})) {
     if (object[key] != null) {
       const val = object[key]
-      let parsedValue
+      let parsedValue = val
       if (typeof val === "string") {
         parsedValue = await processString(object[key], context, opts)
       } else if (typeof val === "object") {

packages/string-templates/test/basic.spec.ts

@@ -104,6 +104,26 @@ describe("Test that the object processing works correctly", () => {
     }
     expect(error).toBeNull()
   })
+
+  it("should be able to handle booleans", async () => {
+    const output = await processObject(
+      {
+        first: true,
+        second: "true",
+        third: "another string",
+        forth: "with {{ template }}",
+      },
+      {
+        template: "value",
+      }
+    )
+    expect(output).toEqual({
+      first: true,
+      second: "true",
+      third: "another string",
+      forth: "with value",
+    })
+  })
 })
 
 describe("check returning objects", () => {

packages/types/src/documents/app/row.ts

@@ -38,11 +38,16 @@ export interface Row extends Document {
 export enum FieldSubtype {
   USER = "user",
   USERS = "users",
+  SINGLE = "single",
 }
 
+// The 'as' are required for typescript not to type the outputs as generic FieldSubtype
 export const FieldTypeSubtypes = {
   BB_REFERENCE: {
-    USER: FieldSubtype.USER,
-    USERS: FieldSubtype.USERS,
+    USER: FieldSubtype.USER as FieldSubtype.USER,
+    USERS: FieldSubtype.USERS as FieldSubtype.USERS,
+  },
+  ATTACHMENT: {
+    SINGLE: FieldSubtype.SINGLE as FieldSubtype.SINGLE,
   },
 }

packages/types/src/documents/app/table/schema.ts

@@ -112,6 +112,12 @@ export interface BBReferenceFieldMetadata
   relationshipType?: RelationshipType
 }
 
+export interface AttachmentFieldMetadata
+  extends Omit<BaseFieldSchema, "subtype"> {
+  type: FieldType.ATTACHMENT
+  subtype?: FieldSubtype.SINGLE
+}
+
 export interface FieldConstraints {
   type?: string
   email?: boolean
@@ -119,6 +125,7 @@ export interface FieldConstraints {
   length?: {
     minimum?: string | number | null
     maximum?: string | number | null
+    message?: string
   }
   numericality?: {
     greaterThanOrEqualTo: string | null
@@ -156,6 +163,8 @@ interface OtherFieldMetadata extends BaseFieldSchema {
     | FieldType.FORMULA
     | FieldType.NUMBER
     | FieldType.LONGFORM
+    | FieldType.BB_REFERENCE
+    | FieldType.ATTACHMENT
   >
 }
 
@@ -169,6 +178,7 @@ export type FieldSchema =
   | LongFormFieldMetadata
   | BBReferenceFieldMetadata
   | JsonFieldMetadata
+  | AttachmentFieldMetadata
 
 export interface TableSchema {
   [key: string]: FieldSchema
@@ -203,3 +213,9 @@ export function isBBReferenceField(
 ): field is BBReferenceFieldMetadata {
   return field.type === FieldType.BB_REFERENCE
 }
+
+export function isAttachmentField(
+  field: FieldSchema
+): field is AttachmentFieldMetadata {
+  return field.type === FieldType.ATTACHMENT
+}