Improve data fetch reset logic, fix issues with stale cache in spreadsheets

packages/builder/src/components/backend/DataTable/modals/sheet/SheetEditColumnModal.svelte

@@ -9,7 +9,7 @@
   let editColumnModal
 
   const updateColumns = () => {
-    rows.actions.refreshTableDefinition()
+    rows.actions.refreshData()
   }
 
   const editColumn = column => {

packages/frontend-core/src/components/sheet/cells/SheetCell.svelte

@@ -47,7 +47,6 @@
     </div>
   {/if}
   <slot />
-
   {#if selectedUser && !focused}
     <div class="label">
       {selectedUser.label}
@@ -72,6 +71,8 @@
     position: relative;
     width: 0;
   }
+
+  /* Cell border */
   .cell.focused:after,
   .cell.error:after,
   .cell.selected-other:not(.focused):after {
@@ -86,7 +87,20 @@
     border-radius: 2px;
     box-sizing: border-box;
   }
-  .cell:hover {
+
+  /* Cell border for cells with labels */
+  .cell.error:after,
+  .cell.selected-other:not(.focused):after {
+    border-radius: 0 2px 2px 2px;
+  }
+  .cell[data-row="0"].error:after,
+  .cell[data-row="0"].selected-other:not(.focused):after {
+    border-radius: 2px 2px 2px 0;
+  }
+
+  /* Cell z-index */
+  .cell.error,
+  .cell.selected-other:not(.focused) {
     z-index: 1;
   }
   .cell.focused {
@@ -96,13 +110,7 @@
     border-color: var(--spectrum-global-color-blue-400);
   }
   .cell.error:after {
-    border-color: var(--spectrum-global-color-red-400);
-  }
-  .cell.selected-other:not(.focused) {
-    z-index: 1;
-  }
-  .cell.selected-other:not(.focused):after {
-    border-color: var(--spectrum-global-color-red-400);
+    border-color: var(--spectrum-global-color-red-500);
   }
   .cell:not(.focused) {
     user-select: none;
@@ -134,16 +142,15 @@
     height: calc(var(--row-height) + 2px);
   }
 
-  /* Other user email */
+  /* Label for additional text */
   .label {
     position: absolute;
     bottom: 100%;
     left: 0;
-    margin: 0 0 -2px 0;
     padding: 1px 4px 3px 4px;
     background: var(--user-color);
-    border-radius: 2px;
-    display: none;
+    border-radius: 2px 2px 0 0;
+    display: block;
     color: white;
     font-size: 12px;
     font-weight: 600;
@@ -158,15 +165,8 @@
     top: 100%;
     border-radius: 0 2px 2px 2px;
     padding: 2px 4px 2px 4px;
-    margin: -2px 0 0 0;
-  }
-  .cell:hover .label {
-    display: block;
   }
   .error .label {
-    background: var(--spectrum-global-color-red-400);
-  }
-  .error.focused .label {
-    display: block;
+    background: var(--spectrum-global-color-red-500);
   }
 </style>

packages/frontend-core/src/components/sheet/stores/rows.js

@@ -80,6 +80,7 @@ export const deriveStores = context => {
 
   // Reset everything when table ID changes
   let unsubscribe = null
+  let lastResetKey = null
   tableId.subscribe($tableId => {
     // Unsub from previous fetch if one exists
     unsubscribe?.()
@@ -109,7 +110,8 @@ export const deriveStores = context => {
     // Subscribe to changes of this fetch model
     unsubscribe = newFetch.subscribe($fetch => {
       if ($fetch.loaded && !$fetch.loading) {
-        const resetRows = $fetch.pageNumber === 0
+        const resetRows = $fetch.resetKey !== lastResetKey
+        lastResetKey = $fetch.resetKey
 
         // Reset scroll state when data changes
         if (!get(instanceLoaded)) {
@@ -211,6 +213,7 @@ export const deriveStores = context => {
     }
   }
 
+  // Duplicates a row, inserting the duplicate row after the existing one
   const duplicateRow = async row => {
     let clone = { ...row }
     delete clone._id
@@ -313,10 +316,10 @@ export const deriveStores = context => {
         }
         return state.slice()
       })
-      rowChangeCache.update(state => ({
-        ...state,
-        [rowId]: null,
-      }))
+      rowChangeCache.update(state => {
+        delete state[rowId]
+        return state
+      })
     } catch (error) {
       handleValidationError(rowId, error)
     }
@@ -391,11 +394,11 @@ export const deriveStores = context => {
 
   // Wipe the row change cache when changing row
   previousFocusedRowId.subscribe(id => {
-    if (!get(inProgressChanges)[id]) {
-      rowChangeCache.update(state => ({
-        ...state,
-        [id]: null,
-      }))
+    if (id && !get(inProgressChanges)[id]) {
+      rowChangeCache.update(state => {
+        delete state[id]
+        return state
+      })
     }
   })
 

packages/frontend-core/src/fetch/DataFetch.js

@@ -56,6 +56,7 @@ export default class DataFetch {
       pageNumber: 0,
       cursor: null,
       cursors: [],
+      resetKey: Math.random(),
     })
 
     // Merge options with their default values
@@ -185,6 +186,7 @@ export default class DataFetch {
       info: page.info,
       cursors: paginate && page.hasNextPage ? [null, page.cursor] : [null],
       error: page.error,
+      resetKey: Math.random(),
     }))
   }