@budibase/frontend-core 2.23.11 → 2.24.0

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

@@ -196,6 +196,20 @@ export const createActions = context => {
   // Handles validation errors from the rows API and updates local validation
   // state, storing error messages against relevant cells
   const handleValidationError = (rowId, error) => {
+    // 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 && error?.message) {
+      const focusedColumn = get(focusedCellId)?.split("-")[1]
+      if (focusedColumn) {
+        error = {
+          json: {
+            validationErrors: {
+              [focusedColumn]: error.message,
+            },
+          },
+        }
+      }
+    }
     if (error?.json?.validationErrors) {
       // Normal validation errors
       const keys = Object.keys(error.json.validationErrors)
@@ -214,11 +228,19 @@ export const createActions = context => {
 
       // Process errors for columns that we have
       for (let column of erroredColumns) {
+        // Ensure we have a valid error to display
+        let err = error.json.validationErrors[column]
+        if (Array.isArray(err)) {
+          err = err[0]
+        }
+        if (typeof err !== "string" || !err.length) {
+          error = "Something went wrong"
+        }
+        // Set error against the cell
         validation.actions.setError(
           `${rowId}-${column}`,
-          `${column} ${error.json.validationErrors[column]}`
+          Helpers.capitalise(err)
         )
-
         // Ensure the column is visible
         const index = $columns.findIndex(x => x.name === column)
         if (index !== -1 && !$columns[index].visible) {
@@ -523,6 +545,7 @@ export const initialise = context => {
     previousFocusedCellId,
     rows,
     validation,
+    focusedCellId,
   } = context
 
   // Wipe the row change cache when changing row
@@ -537,12 +560,22 @@ export const initialise = context => {
 
   // Ensure any unsaved changes are saved when changing cell
   previousFocusedCellId.subscribe(async id => {
-    const rowId = id?.split("-")[0]
-    const hasErrors = validation.actions.rowHasErrors(rowId)
-    const hasChanges = Object.keys(get(rowChangeCache)[rowId] || {}).length > 0
-    const isSavingChanges = get(inProgressChanges)[rowId]
-    if (rowId && !hasErrors && hasChanges && !isSavingChanges) {
-      await rows.actions.applyRowChanges(rowId)
+    if (!id) {
+      return
+    }
+    // Stop if we changed row
+    const oldRowId = id.split("-")[0]
+    const oldColumn = id.split("-")[1]
+    const newRowId = get(focusedCellId)?.split("-")[0]
+    if (oldRowId !== newRowId) {
+      return
+    }
+    // Otherwise we just changed cell in the same row
+    const hasChanges = oldColumn in (get(rowChangeCache)[oldRowId] || {})
+    const hasErrors = validation.actions.rowHasErrors(oldRowId)
+    const isSavingChanges = get(inProgressChanges)[oldRowId]
+    if (oldRowId && !hasErrors && hasChanges && !isSavingChanges) {
+      await rows.actions.applyRowChanges(oldRowId)
     }
   })
 }

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

@@ -98,7 +98,7 @@ export const deriveStores = context => {
 
   // Derive whether we should use the compact UI, depending on width
   const compact = derived([stickyColumn, width], ([$stickyColumn, $width]) => {
-    return ($stickyColumn?.width || 0) + $width + GutterWidth < 1100
+    return ($stickyColumn?.width || 0) + $width + GutterWidth < 800
   })
 
   return {

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

@@ -1,7 +1,6 @@
 import { derived } from "svelte/store"
 import {
-  MaxCellRenderHeight,
-  MaxCellRenderWidthOverflow,
+  MaxCellRenderOverflow,
   MinColumnWidth,
   ScrollBarSize,
 } from "../lib/constants"
@@ -95,11 +94,11 @@ export const deriveStores = context => {
 
       // Compute the last row index with space to render popovers below it
       const minBottom =
-        $height - ScrollBarSize * 3 - MaxCellRenderHeight + offset
+        $height - ScrollBarSize * 3 - MaxCellRenderOverflow + offset
       const lastIdx = Math.floor(minBottom / $rowHeight)
 
       // Compute the first row index with space to render popovers above it
-      const minTop = MaxCellRenderHeight + offset
+      const minTop = MaxCellRenderOverflow + offset
       const firstIdx = Math.ceil(minTop / $rowHeight)
 
       // Use the greater of the two indices so that we prefer content below,
@@ -117,7 +116,7 @@ export const deriveStores = context => {
       let inversionIdx = $visibleColumns.length
       for (let i = $visibleColumns.length - 1; i >= 0; i--, inversionIdx--) {
         const rightEdge = $visibleColumns[i].left + $visibleColumns[i].width
-        if (rightEdge + MaxCellRenderWidthOverflow <= cutoff) {
+        if (rightEdge + MaxCellRenderOverflow <= cutoff) {
           break
         }
       }

package/src/constants.js

@@ -4,7 +4,7 @@
 export { OperatorOptions, SqlNumberTypeRangeMap } from "@budibase/shared-core"
 export { Feature as Features } from "@budibase/types"
 import { BpmCorrelationKey } from "@budibase/shared-core"
-import { FieldType, FieldTypeSubtypes } from "@budibase/types"
+import { FieldType, BBReferenceFieldSubType } from "@budibase/types"
 
 // Cookie names
 export const Cookies = {
@@ -134,7 +134,7 @@ export const TypeIconMap = {
   [FieldType.USER]: "User",
   [FieldType.USERS]: "UserGroup",
   [FieldType.BB_REFERENCE]: {
-    [FieldTypeSubtypes.BB_REFERENCE.USER]: "User",
-    [FieldTypeSubtypes.BB_REFERENCE.USERS]: "UserGroup",
+    [BBReferenceFieldSubType.USER]: "User",
+    [BBReferenceFieldSubType.USERS]: "UserGroup",
   },
 }

package/src/utils/rows.js

@@ -8,6 +8,10 @@ const isBetterSample = (newValue, oldValue) => {
     return true
   }
 
+  if (oldValue != null && newValue == null) {
+    return false
+  }
+
   // Don't change type
   const oldType = typeof oldValue
   const newType = typeof newValue