@budibase/frontend-core 2.28.4 → 2.28.6

package/package.json

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

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

@@ -81,6 +81,7 @@
   }
   input {
     flex: 1 1 auto;
+    width: 0;
     border: none;
     padding: var(--cell-padding);
     overflow: hidden;

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

@@ -116,7 +116,9 @@
       {#each displayColumns as column}
         <div class="column">
           <Icon size="S" name={getColumnIcon(column)} />
-          {column.label}
+          <div class="column-label" title={column.label}>
+            {column.label}
+          </div>
         </div>
         <ToggleActionButtonGroup
           on:click={e => toggleColumn(column, e.detail)}
@@ -139,7 +141,8 @@
     display: grid;
     align-items: center;
     grid-template-columns: 1fr auto;
-    gap: 8px;
+    grid-row-gap: 8px;
+    grid-column-gap: 24px;
   }
   .columns :global(.spectrum-Switch) {
     margin-right: 0;
@@ -148,4 +151,11 @@
     display: flex;
     gap: 8px;
   }
+  .column-label {
+    min-width: 80px;
+    max-width: 200px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
 </style>

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

@@ -29,7 +29,6 @@
   .permissionPicker {
     display: flex;
     gap: var(--spacing-xs);
-    padding-left: calc(var(--spacing-xl) * 2);
   }
 
   .permissionPicker :global(.spectrum-Icon) {

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

@@ -23,14 +23,24 @@
     0
   )
 
+  const updateBounds = () => {
+    bounds.set(body.getBoundingClientRect())
+  }
+
   onMount(() => {
     // Observe and record the height of the body
-    const observer = new ResizeObserver(() => {
-      bounds.set(body.getBoundingClientRect())
-    })
-    observer.observe(body)
+    const resizeObserver = new ResizeObserver(updateBounds)
+    resizeObserver.observe(body)
+
+    // Capture any wheel events on the page to ensure our scroll offset is
+    // correct. We don't care about touch events as we only need this for
+    // hovering over rows with a mouse.
+    window.addEventListener("wheel", updateBounds, true)
+
+    // Clean up listeners
     return () => {
-      observer.disconnect()
+      resizeObserver.disconnect()
+      window.removeEventListener("wheel", updateBounds, true)
     }
   })
 </script>

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

@@ -94,6 +94,7 @@ export const createActions = context => {
     nonPlus,
     schemaMutations,
     schema,
+    notifications,
   } = context
 
   // Gets the appropriate API for the configured datasource type
@@ -125,16 +126,25 @@ export const createActions = context => {
   // Saves the datasource definition
   const saveDefinition = async newDefinition => {
     // Update local state
+    const originalDefinition = get(definition)
     definition.set(newDefinition)
 
     // Update server
     if (get(config).canSaveSchema) {
-      await getAPI()?.actions.saveDefinition(newDefinition)
+      try {
+        await getAPI()?.actions.saveDefinition(newDefinition)
 
-      // Broadcast change so external state can be updated, as this change
-      // will not be received by the builder websocket because we caused it
-      // ourselves
-      dispatch("updatedatasource", newDefinition)
+        // Broadcast change so external state can be updated, as this change
+        // will not be received by the builder websocket because we caused it
+        // ourselves
+        dispatch("updatedatasource", newDefinition)
+      } catch (error) {
+        const msg = error?.message || error || "Unknown error"
+        get(notifications).error(`Error saving schema: ${msg}`)
+
+        // Reset the definition if saving failed
+        definition.set(originalDefinition)
+      }
     }
   }