@budibase/frontend-core 2.24.2 → 2.26.0

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "2.24.2",
+  "version": "2.26.0",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "dependencies": {
-    "@budibase/bbui": "2.24.2",
-    "@budibase/shared-core": "2.24.2",
-    "@budibase/types": "2.24.2",
+    "@budibase/bbui": "2.26.0",
+    "@budibase/shared-core": "2.26.0",
+    "@budibase/types": "2.26.0",
     "dayjs": "^1.10.8",
     "lodash": "4.17.21",
     "shortid": "2.2.15",
     "socket.io-client": "^4.6.1"
   },
-  "gitHead": "9c6e0823094ac5bbf514d628152050bf25faf98d"
+  "gitHead": "a7b9a5e059543bc51a4d3393dd1f54bc98d61dec"
 }

package/src/components/FilterBuilder.svelte

@@ -125,6 +125,7 @@
     filter.type = fieldSchema?.type
     filter.subtype = fieldSchema?.subtype
     filter.formulaType = fieldSchema?.formulaType
+    filter.constraints = fieldSchema?.constraints
 
     // Update external type based on field
     filter.externalType = getSchema(filter)?.externalType
@@ -281,7 +282,7 @@
                   timeOnly={getSchema(filter)?.timeOnly}
                   bind:value={filter.value}
                 />
-              {:else if filter.type === FieldType.BB_REFERENCE}
+              {:else if [FieldType.BB_REFERENCE, FieldType.BB_REFERENCE_SINGLE].includes(filter.type)}
                 <FilterUsers
                   bind:value={filter.value}
                   multiselect={[
@@ -289,6 +290,7 @@
                     OperatorOptions.ContainsAny.value,
                   ].includes(filter.operator)}
                   disabled={filter.noValue}
+                  type={filter.valueType}
                 />
               {:else}
                 <Input disabled />
@@ -325,8 +327,6 @@
 <style>
   .container {
     width: 100%;
-    max-width: 1000px;
-    margin: 0 auto;
   }
   .fields {
     display: grid;

package/src/components/FilterUsers.svelte

@@ -4,6 +4,7 @@
   import { createAPIClient } from "../api"
 
   export let API = createAPIClient()
+
   export let value = null
   export let disabled
   export let multiselect = false
@@ -23,12 +24,14 @@
   $: component = multiselect ? Multiselect : Select
 </script>
 
-<svelte:component
-  this={component}
-  bind:value
-  autocomplete
-  {options}
-  getOptionLabel={option => option.email}
-  getOptionValue={option => option._id}
-  {disabled}
-/>
+<div class="user-control">
+  <svelte:component
+    this={component}
+    bind:value
+    autocomplete
+    {options}
+    getOptionLabel={option => option.email}
+    getOptionValue={option => option._id}
+    {disabled}
+  />
+</div>

package/src/components/grid/cells/BBReferenceCell.svelte

@@ -1,19 +1,27 @@
 <script>
   import { getContext } from "svelte"
+  import { helpers } from "@budibase/shared-core"
   import RelationshipCell from "./RelationshipCell.svelte"
-  import { BBReferenceFieldSubType, RelationshipType } from "@budibase/types"
+  import {
+    BBReferenceFieldSubType,
+    FieldType,
+    RelationshipType,
+  } from "@budibase/types"
 
   export let api
+  export let hideCounter = false
+  export let schema
 
   const { API } = getContext("grid")
-  const { subtype } = $$props.schema
+  const { type, subtype } = schema
 
-  const schema = {
+  $: schema = {
     ...$$props.schema,
     // This is not really used, just adding some content to be able to render the relationship cell
     tableId: "external",
     relationshipType:
-      subtype === BBReferenceFieldSubType.USER
+      type === FieldType.BB_REFERENCE_SINGLE ||
+      helpers.schema.isDeprecatedSingleUserColumn(schema)
         ? RelationshipType.ONE_TO_MANY
         : RelationshipType.MANY_TO_MANY,
   }
@@ -44,8 +52,9 @@
 
 <RelationshipCell
   bind:api
-  {...$$props}
+  {...$$restProps}
   {schema}
   {searchFunction}
   primaryDisplay={"email"}
+  {hideCounter}
 />

package/src/components/grid/cells/BBReferenceSingleCell.svelte

@@ -0,0 +1,22 @@
+<script>
+  import BbReferenceCell from "./BBReferenceCell.svelte"
+
+  export let value
+  export let onChange
+  export let api
+
+  $: arrayValue = (!Array.isArray(value) && value ? [value] : value) || []
+
+  $: onValueChange = value => {
+    value = value[0] || null
+    onChange(value)
+  }
+</script>
+
+<BbReferenceCell
+  bind:api
+  {...$$restProps}
+  value={arrayValue}
+  onChange={onValueChange}
+  hideCounter={true}
+/>

package/src/components/grid/cells/RelationshipCell.svelte

@@ -17,6 +17,7 @@
   export let contentLines = 1
   export let searchFunction = API.searchTable
   export let primaryDisplay
+  export let hideCounter = false
 
   const color = getColor(0)
 
@@ -263,7 +264,7 @@
         </div>
       {/if}
     </div>
-    {#if value?.length}
+    {#if !hideCounter && value?.length}
       <div class="count">
         {value?.length || 0}
       </div>

package/src/components/grid/controls/MigrationModal.svelte

@@ -7,11 +7,6 @@
   } from "@budibase/bbui"
   import { getContext } from "svelte"
   import { ValidColumnNameRegex } from "@budibase/shared-core"
-  import {
-    BBReferenceFieldSubType,
-    FieldType,
-    RelationshipType,
-  } from "@budibase/types"
 
   const { API, definition, rows } = getContext("grid")
 
@@ -33,20 +28,11 @@
   }
 
   const migrateUserColumn = async () => {
-    let subtype = BBReferenceFieldSubType.USERS
-    if (column.schema.relationshipType === RelationshipType.ONE_TO_MANY) {
-      subtype = BBReferenceFieldSubType.USER
-    }
-
     try {
       await API.migrateColumn({
         tableId: $definition._id,
-        oldColumn: column.schema,
-        newColumn: {
-          name: newColumnName,
-          type: FieldType.BB_REFERENCE,
-          subtype,
-        },
+        oldColumn: column.schema.name,
+        newColumn: newColumnName,
       })
       notifications.success("Column migrated")
     } catch (e) {

package/src/components/grid/layout/GridRow.svelte

@@ -1,6 +1,7 @@
 <script>
   import { getContext } from "svelte"
   import DataCell from "../cells/DataCell.svelte"
+  import { getCellID } from "../lib/utils"
 
   export let row
   export let top = false
@@ -38,7 +39,7 @@
   on:click={() => dispatch("rowclick", rows.actions.cleanRow(row))}
 >
   {#each $visibleColumns as column, columnIdx}
-    {@const cellId = `${row._id}-${column.name}`}
+    {@const cellId = getCellID(row._id, column.name)}
     <DataCell
       {cellId}
       {column}

package/src/components/grid/layout/NewRow.svelte

@@ -7,6 +7,7 @@
   import { GutterWidth, NewRowID } from "../lib/constants"
   import GutterCell from "../cells/GutterCell.svelte"
   import KeyboardShortcut from "./KeyboardShortcut.svelte"
+  import { getCellID } from "../lib/utils"
 
   const {
     hoveredRowId,
@@ -70,7 +71,7 @@
 
       // Select the first cell if possible
       if (firstColumn) {
-        $focusedCellId = `${savedRow._id}-${firstColumn.name}`
+        $focusedCellId = getCellID(savedRow._id, firstColumn.name)
       }
     }
     isAdding = false
@@ -118,7 +119,7 @@
     visible = true
     $hoveredRowId = NewRowID
     if (firstColumn) {
-      $focusedCellId = `${NewRowID}-${firstColumn.name}`
+      $focusedCellId = getCellID(NewRowID, firstColumn.name)
     }
 
     // Attach key listener
@@ -194,7 +195,7 @@
         {/if}
       </GutterCell>
       {#if $stickyColumn}
-        {@const cellId = `${NewRowID}-${$stickyColumn.name}`}
+        {@const cellId = getCellID(NewRowID, $stickyColumn.name)}
         <DataCell
           {cellId}
           rowFocused

package/src/components/grid/layout/StickyColumn.svelte

@@ -8,6 +8,7 @@
   import { GutterWidth, BlankRowID } from "../lib/constants"
   import GutterCell from "../cells/GutterCell.svelte"
   import KeyboardShortcut from "./KeyboardShortcut.svelte"
+  import { getCellID } from "../lib/utils"
 
   const {
     rows,
@@ -71,7 +72,7 @@
         {@const rowSelected = !!$selectedRows[row._id]}
         {@const rowHovered = $hoveredRowId === row._id}
         {@const rowFocused = $focusedRow?._id === row._id}
-        {@const cellId = `${row._id}-${$stickyColumn?.name}`}
+        {@const cellId = getCellID(row._id, $stickyColumn?.name)}
         <div
           class="row"
           on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}

package/src/components/grid/lib/renderers.js

@@ -13,6 +13,7 @@ import JSONCell from "../cells/JSONCell.svelte"
 import AttachmentCell from "../cells/AttachmentCell.svelte"
 import AttachmentSingleCell from "../cells/AttachmentSingleCell.svelte"
 import BBReferenceCell from "../cells/BBReferenceCell.svelte"
+import BBReferenceSingleCell from "../cells/BBReferenceSingleCell.svelte"
 
 const TypeComponentMap = {
   [FieldType.STRING]: TextCell,
@@ -29,6 +30,7 @@ const TypeComponentMap = {
   [FieldType.FORMULA]: FormulaCell,
   [FieldType.JSON]: JSONCell,
   [FieldType.BB_REFERENCE]: BBReferenceCell,
+  [FieldType.BB_REFERENCE_SINGLE]: BBReferenceSingleCell,
 }
 export const getCellRenderer = column => {
   return TypeComponentMap[column?.schema?.type] || TextCell

package/src/components/grid/lib/utils.js

@@ -1,5 +1,23 @@
+import { helpers } from "@budibase/shared-core"
 import { TypeIconMap } from "../../../constants"
 
+// we can't use "-" for joining the ID/field, as this can be present in the ID or column name
+// using something very unusual to avoid this problem
+const JOINING_CHARACTER = "‽‽"
+
+export const parseCellID = rowId => {
+  if (!rowId) {
+    return undefined
+  }
+  const parts = rowId.split(JOINING_CHARACTER)
+  const field = parts.pop()
+  return { id: parts.join(JOINING_CHARACTER), field }
+}
+
+export const getCellID = (rowId, fieldName) => {
+  return `${rowId}${JOINING_CHARACTER}${fieldName}`
+}
+
 export const getColor = (idx, opacity = 0.3) => {
   if (idx == null || idx === -1) {
     idx = 0
@@ -11,8 +29,12 @@ export const getColumnIcon = column => {
   if (column.schema.autocolumn) {
     return "MagicWand"
   }
-  const { type, subtype } = column.schema
 
+  if (helpers.schema.isDeprecatedSingleUserColumn(column.schema)) {
+    return "User"
+  }
+
+  const { type, subtype } = column.schema
   const result =
     typeof TypeIconMap[type] === "object" && subtype
       ? TypeIconMap[type][subtype]

package/src/components/grid/overlays/KeyboardManager.svelte

@@ -2,6 +2,7 @@
   import { getContext, onMount } from "svelte"
   import { debounce } from "../../../utils/utils"
   import { NewRowID } from "../lib/constants"
+  import { getCellID, parseCellID } from "../lib/utils"
 
   const {
     rows,
@@ -154,7 +155,7 @@
     if (!firstColumn) {
       return
     }
-    focusedCellId.set(`${firstRow._id}-${firstColumn.name}`)
+    focusedCellId.set(getCellID(firstRow._id, firstColumn.name))
   }
 
   // Changes the focused cell by moving it left or right to a different column
@@ -163,8 +164,7 @@
       return
     }
     const cols = $visibleColumns
-    const split = $focusedCellId.split("-")
-    const columnName = split[1]
+    const { id, field: columnName } = parseCellID($focusedCellId)
     let newColumnName
     if (columnName === $stickyColumn?.name) {
       const index = delta - 1
@@ -178,7 +178,7 @@
       }
     }
     if (newColumnName) {
-      $focusedCellId = `${split[0]}-${newColumnName}`
+      $focusedCellId = getCellID(id, newColumnName)
     }
   }
 
@@ -189,8 +189,8 @@
     }
     const newRow = $rows[$focusedRow.__idx + delta]
     if (newRow) {
-      const split = $focusedCellId.split("-")
-      $focusedCellId = `${newRow._id}-${split[1]}`
+      const { field } = parseCellID($focusedCellId)
+      $focusedCellId = getCellID(newRow._id, field)
     }
   }
 

package/src/components/grid/overlays/MenuOverlay.svelte

@@ -3,6 +3,7 @@
   import { getContext } from "svelte"
   import { NewRowID } from "../lib/constants"
   import GridPopover from "./GridPopover.svelte"
+  import { getCellID } from "../lib/utils"
 
   const {
     focusedRow,
@@ -41,7 +42,7 @@
     const newRow = await rows.actions.duplicateRow($focusedRow)
     if (newRow) {
       const column = $stickyColumn?.name || $columns[0].name
-      $focusedCellId = `${newRow._id}-${column}`
+      $focusedCellId = getCellID(newRow._id, column)
     }
   }
 

package/src/components/grid/stores/rows.js

@@ -1,6 +1,7 @@
 import { writable, derived, get } from "svelte/store"
 import { fetchData } from "../../../fetch"
 import { NewRowID, RowPageSize } from "../lib/constants"
+import { getCellID, parseCellID } from "../lib/utils"
 import { tick } from "svelte"
 import { Helpers } from "@budibase/bbui"
 
@@ -206,7 +207,7 @@ export const createActions = context => {
     // If the server doesn't reply with a valid error, assume that the source
     // of the error is the focused cell's column
     if (!error?.json?.validationErrors && errorString) {
-      const focusedColumn = get(focusedCellId)?.split("-")[1]
+      const { field: focusedColumn } = parseCellID(get(focusedCellId))
       if (focusedColumn) {
         error = {
           json: {
@@ -245,7 +246,7 @@ export const createActions = context => {
         }
         // Set error against the cell
         validation.actions.setError(
-          `${rowId}-${column}`,
+          getCellID(rowId, column),
           Helpers.capitalise(err)
         )
         // Ensure the column is visible
@@ -265,7 +266,7 @@ export const createActions = context => {
 
       // Focus the first cell with an error
       if (erroredColumns.length) {
-        focusedCellId.set(`${rowId}-${erroredColumns[0]}`)
+        focusedCellId.set(getCellID(rowId, erroredColumns[0]))
       }
     } else {
       get(notifications).error(errorString || "An unknown error occurred")
@@ -571,9 +572,10 @@ export const initialise = context => {
       return
     }
     // Stop if we changed row
-    const oldRowId = id.split("-")[0]
-    const oldColumn = id.split("-")[1]
-    const newRowId = get(focusedCellId)?.split("-")[0]
+    const split = parseCellID(id)
+    const oldRowId = split.id
+    const oldColumn = split.field
+    const { id: newRowId } = parseCellID(get(focusedCellId))
     if (oldRowId !== newRowId) {
       return
     }

package/src/components/grid/stores/scroll.js

@@ -1,6 +1,7 @@
 import { writable, derived, get } from "svelte/store"
 import { tick } from "svelte"
 import { Padding, GutterWidth, FocusedCellMinOffset } from "../lib/constants"
+import { parseCellID } from "../lib/utils"
 
 export const createStores = () => {
   const scroll = writable({
@@ -176,7 +177,7 @@ export const initialise = context => {
     // Ensure horizontal position is viewable
     // Check horizontal position of columns next
     const $visibleColumns = get(visibleColumns)
-    const columnName = $focusedCellId?.split("-")[1]
+    const { field: columnName } = parseCellID($focusedCellId)
     const column = $visibleColumns.find(col => col.name === columnName)
     if (!column) {
       return

package/src/components/grid/stores/ui.js

@@ -7,6 +7,7 @@ import {
   MediumRowHeight,
   NewRowID,
 } from "../lib/constants"
+import { parseCellID } from "../lib/utils"
 
 export const createStores = context => {
   const { props } = context
@@ -25,7 +26,7 @@ export const createStores = context => {
   const focusedRowId = derived(
     focusedCellId,
     $focusedCellId => {
-      return $focusedCellId?.split("-")[0]
+      return parseCellID($focusedCellId)?.id
     },
     null
   )
@@ -72,7 +73,7 @@ export const deriveStores = context => {
   const focusedRow = derived(
     [focusedCellId, rowLookupMap, rows],
     ([$focusedCellId, $rowLookupMap, $rows]) => {
-      const rowId = $focusedCellId?.split("-")[0]
+      const rowId = parseCellID($focusedCellId)?.id
 
       // Edge case for new rows
       if (rowId === NewRowID) {
@@ -152,7 +153,7 @@ export const initialise = context => {
     const hasRow = rows.actions.hasRow
 
     // Check selected cell
-    const selectedRowId = $focusedCellId?.split("-")[0]
+    const selectedRowId = parseCellID($focusedCellId)?.id
     if (selectedRowId && !hasRow(selectedRowId)) {
       focusedCellId.set(null)
     }

package/src/components/grid/stores/validation.js

@@ -1,4 +1,5 @@
 import { writable, get, derived } from "svelte/store"
+import { getCellID, parseCellID } from "../lib/utils"
 
 // Normally we would break out actions into the explicit "createActions"
 // function, but for validation all these actions are pure so can go into
@@ -12,7 +13,7 @@ export const createStores = () => {
     Object.entries($validation).forEach(([key, error]) => {
       // Extract row ID from all errored cell IDs
       if (error) {
-        map[key.split("-")[0]] = true
+        map[parseCellID(key).id] = true
       }
     })
     return map
@@ -53,10 +54,10 @@ export const initialise = context => {
       const $stickyColumn = get(stickyColumn)
       validation.update(state => {
         $columns.forEach(column => {
-          state[`${id}-${column.name}`] = null
+          state[getCellID(id, column.name)] = null
         })
         if ($stickyColumn) {
-          state[`${id}-${$stickyColumn.name}`] = null
+          state[getCellID(id, stickyColumn.name)] = null
         }
         return state
       })

package/src/constants.js

@@ -132,10 +132,11 @@ export const TypeIconMap = {
   [FieldType.JSON]: "Brackets",
   [FieldType.BIGINT]: "TagBold",
   [FieldType.AUTO]: "MagicWand",
-  [FieldType.USER]: "User",
-  [FieldType.USERS]: "UserGroup",
   [FieldType.BB_REFERENCE]: {
-    [BBReferenceFieldSubType.USER]: "User",
+    [BBReferenceFieldSubType.USER]: "UserGroup",
     [BBReferenceFieldSubType.USERS]: "UserGroup",
   },
+  [FieldType.BB_REFERENCE_SINGLE]: {
+    [BBReferenceFieldSubType.USER]: "User",
+  },
 }