fix(tables): don't emit ready after cancel; honor cancel during the upload phase

Author: TheodoreSpeaks

apps/sim/app/workspace/[workspaceId]/tables/components/import-csv-dialog/import-csv-dialog.tsx

@@ -30,6 +30,7 @@ import { buildAutoMapping, parseCsvBuffer } from '@/lib/table/import'
 import type { TableDefinition } from '@/lib/table/types'
 import {
   type CsvImportMode,
+  cancelTableImport,
   useImportCsvIntoTable,
   useImportCsvIntoTableAsync,
 } from '@/hooks/queries/tables'
@@ -343,17 +344,26 @@ export function ImportCsvDialog({
           mode,
           mapping,
           createColumns,
-          onProgress: (percent) =>
+          onProgress: (percent) => {
+            if (useImportTrayStore.getState().isCanceled(table.id)) return
             useImportTrayStore.getState().upsert({
               tableId: table.id,
               workspaceId,
               title: table.name,
               phase: 'importing',
               percent,
-            }),
+            })
+          },
         },
         {
           onSuccess: (data) => {
+            // Canceled mid-upload — the worker just started; cancel it instead of re-seeding.
+            if (useImportTrayStore.getState().consumeCanceled(table.id)) {
+              if (data?.importId) {
+                void cancelTableImport(workspaceId, table.id, data.importId).catch(() => {})
+              }
+              return
+            }
             // Record the import id so the tracker can ignore replayed events from a prior import.
             useImportTrayStore.getState().upsert({
               tableId: table.id,

apps/sim/app/workspace/[workspaceId]/tables/components/import-progress-menu/import-progress-menu.tsx

@@ -39,6 +39,7 @@ export function ImportProgressMenu({ workspaceId, tableId }: ImportProgressMenuP
     useShallow((state) => selectWorkspaceImports(state, workspaceId))
   )
   const dismiss = useImportTrayStore((state) => state.dismiss)
+  const cancelEntry = useImportTrayStore((state) => state.cancel)
   const menuOpen = useImportTrayStore((state) => state.menuOpen)
   const setMenuOpen = useImportTrayStore((state) => state.setMenuOpen)
 
@@ -52,9 +53,11 @@ export function ImportProgressMenu({ workspaceId, tableId }: ImportProgressMenuP
   const done = imports.filter((e) => e.phase === 'ready').length
 
   const cancel = (entry: (typeof imports)[number]) => {
-    // Optimistically clear it; the server flips status → the SSE `canceled` event also dismisses.
-    dismiss(entry.tableId)
+    // Clear it + flag canceled so an in-flight upload's callbacks don't re-create it.
+    cancelEntry(entry.tableId)
     if (entry.importId) {
+      // Worker already running — cancel it server-side now. (Otherwise the kickoff handler cancels
+      // it once the importId is known; see the `consumeCanceled` branches.)
       void cancelTableImport(entry.workspaceId, entry.tableId, entry.importId).catch(() => {})
     }
   }

apps/sim/app/workspace/[workspaceId]/tables/tables.tsx

@@ -37,6 +37,7 @@ import {
 import { TableContextMenu } from '@/app/workspace/[workspaceId]/tables/components/table-context-menu'
 import { useContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
 import {
+  cancelTableImport,
   downloadTableExport,
   useCreateTable,
   useDeleteTable,
@@ -431,17 +432,24 @@ export function Tables() {
                 const result = await importCsvAsync.mutateAsync({
                   workspaceId,
                   file,
-                  onProgress: (percent) =>
+                  onProgress: (percent) => {
+                    if (useImportTrayStore.getState().isCanceled(pendingId)) return
                     useImportTrayStore.getState().upsert({
                       tableId: pendingId,
                       workspaceId,
                       title: file.name,
                       phase: 'importing',
                       percent,
-                    }),
+                    })
+                  },
                 })
                 useImportTrayStore.getState().dismiss(pendingId)
-                if (result?.tableId) {
+                if (result?.tableId && useImportTrayStore.getState().consumeCanceled(pendingId)) {
+                  // Canceled mid-upload — the worker just started; cancel it server-side.
+                  void cancelTableImport(workspaceId, result.tableId, result.importId).catch(
+                    () => {}
+                  )
+                } else if (result?.tableId) {
                   useImportTrayStore.getState().upsert({
                     tableId: result.tableId,
                     workspaceId,

apps/sim/lib/table/import-runner.ts

@@ -246,16 +246,28 @@ export async function runTableImport(payload: TableImportPayload): Promise<void>
     }
 
     await updateImportProgress(tableId, inserted, importId)
-    await markImportReady(tableId, importId)
-    void appendTableEvent({
-      kind: 'import',
-      tableId,
-      importId,
-      status: 'ready',
-      progress: inserted,
-      percent: 100,
-    })
-    logger.info(`[${requestId}] Import complete`, { tableId, fileName, mode, rows: inserted })
+    // Only announce success if we actually won the transition — a cancel/supersede that landed
+    // right at the end makes this a no-op, and we must not emit a false `ready`.
+    const becameReady = await markImportReady(tableId, importId)
+    if (becameReady) {
+      void appendTableEvent({
+        kind: 'import',
+        tableId,
+        importId,
+        status: 'ready',
+        progress: inserted,
+        percent: 100,
+      })
+      logger.info(`[${requestId}] Import complete`, { tableId, fileName, mode, rows: inserted })
+    } else {
+      logger.info(
+        `[${requestId}] Import finished but no longer owns the run (canceled/superseded)`,
+        {
+          tableId,
+          importId,
+        }
+      )
+    }
   } catch (err) {
     if (err instanceof ImportSupersededError) {
       // A newer import owns the table now — leave its status alone and just stop.

apps/sim/lib/table/service.ts

@@ -1394,12 +1394,18 @@ function ownsActiveImport(tableId: string, importId: string) {
   )
 }
 
-/** Marks an import complete; rows become visible. No-op unless it's still this in-flight run. */
-export async function markImportReady(tableId: string, importId: string): Promise<void> {
-  await db
+/**
+ * Marks an import complete; rows become visible. No-op unless it's still this in-flight run.
+ * Returns whether it transitioned, so the worker only emits the `ready` event when it actually
+ * won (and not after a cancel / supersede).
+ */
+export async function markImportReady(tableId: string, importId: string): Promise<boolean> {
+  const updated = await db
     .update(userTableDefinitions)
     .set({ importStatus: 'ready', importError: null, updatedAt: new Date() })
     .where(ownsActiveImport(tableId, importId))
+    .returning({ id: userTableDefinitions.id })
+  return updated.length > 0
 }
 
 /**

apps/sim/stores/table/import-tray/store.ts

@@ -35,6 +35,10 @@ export type ImportTrayUpsert = Pick<ImportTrayEntry, 'tableId' | 'workspaceId' |
 interface ImportTrayState {
   /** Active + recently-terminal imports, keyed by tableId. */
   entries: Record<string, ImportTrayEntry>
+  /** Tray ids canceled while still uploading (before an importId exists). The kickoff flow checks
+   *  this so its `onProgress`/`onSuccess` don't re-create a dismissed entry and cancels the worker
+   *  once the importId is known. */
+  canceledIds: Record<string, true>
   /** Whether the header import dropdown is open (controlled so the start toast can open it). */
   menuOpen: boolean
   /**
@@ -44,17 +48,27 @@ interface ImportTrayState {
   upsert: (entry: ImportTrayUpsert) => void
   /** Removes a single entry (the user dismissed a terminal card). */
   dismiss: (tableId: string) => void
+  /** Dismiss + flag the id canceled so an in-flight upload's callbacks don't re-create it. */
+  cancel: (tableId: string) => void
+  /** Whether an id is flagged canceled (read without clearing). */
+  isCanceled: (tableId: string) => boolean
+  /** Returns whether the id was canceled and clears the flag (one-shot, for the kickoff handler). */
+  consumeCanceled: (tableId: string) => boolean
   /** Drops all terminal (`ready` / `failed`) entries for a workspace. */
   clearTerminalFor: (workspaceId: string) => void
   setMenuOpen: (open: boolean) => void
   reset: () => void
 }
 
-const initialState = { entries: {} as Record<string, ImportTrayEntry>, menuOpen: false }
+const initialState = {
+  entries: {} as Record<string, ImportTrayEntry>,
+  canceledIds: {} as Record<string, true>,
+  menuOpen: false,
+}
 
 export const useImportTrayStore = create<ImportTrayState>()(
   devtools(
-    (set) => ({
+    (set, get) => ({
       ...initialState,
 
       upsert: (entry) =>
@@ -80,6 +94,25 @@ export const useImportTrayStore = create<ImportTrayState>()(
           return { entries: rest }
         }),
 
+      cancel: (tableId) =>
+        set((state) => {
+          const { [tableId]: _removed, ...rest } = state.entries
+          return { entries: rest, canceledIds: { ...state.canceledIds, [tableId]: true } }
+        }),
+
+      isCanceled: (tableId) => Boolean(get().canceledIds[tableId]),
+
+      consumeCanceled: (tableId) => {
+        const was = Boolean(get().canceledIds[tableId])
+        if (was) {
+          set((state) => {
+            const { [tableId]: _removed, ...rest } = state.canceledIds
+            return { canceledIds: rest }
+          })
+        }
+        return was
+      },
+
       clearTerminalFor: (workspaceId) =>
         set((state) => {
           const rest: Record<string, ImportTrayEntry> = {}