fix(tables): preserve column actions across undo

Author: j15z

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx

@@ -7,6 +7,7 @@ import { toError } from '@sim/utils/errors'
 import { useIsMutating } from '@tanstack/react-query'
 import { isValidationError } from '@/lib/api/client/errors'
 import type { ColumnDefinition, SelectOption } from '@/lib/table'
+import { getColumnId } from '@/lib/table/column-keys'
 import { getCurrencyOptions, resolveCurrencyCode } from '@/lib/table/currency'
 import {
   FieldError,
@@ -63,6 +64,11 @@ interface ColumnConfigSidebarProps {
    * or the create failed, and the owner has already surfaced why.
    */
   onDraftSave: (options: SelectOption[], multiple: boolean) => Promise<boolean>
+  onColumnTypeChange: (
+    columnName: string,
+    previousColumn: ColumnDefinition,
+    newColumn: ColumnDefinition
+  ) => void
   /** Existing column record for modes that carry a `columnName`; otherwise null. */
   existingColumn: ColumnDefinition | null
   workspaceId: string
@@ -108,15 +114,14 @@ function ColumnConfigBody({
   config,
   onClose,
   onDraftSave,
+  onColumnTypeChange,
   existingColumn,
   workspaceId,
   tableId,
 }: ColumnConfigBodyProps) {
   const updateColumn = useUpdateColumn({ workspaceId, tableId })
   const draftSaving = useIsMutating({ mutationKey: tableKeys.columnWrites(tableId) }) > 0
 
-  // draft-select and convert-select always edit an option set; configure
-  // shows whichever configuration the column's type carries.
   const isSelectTarget = config.mode !== 'configure' || existingColumn?.type === 'select'
   const isCurrencyTarget = config.mode === 'configure' && existingColumn?.type === 'currency'
 
@@ -148,7 +153,6 @@ function ColumnConfigBody({
       setOptionsError(optionsIssue)
       return
     }
-
     if (config.mode === 'draft-select') {
       // The draft's owner persists name + options together and reports back;
       // the parent closes the sidebar on success, so nothing to do here.
@@ -160,7 +164,7 @@ function ColumnConfigBody({
 
     try {
       if (config.mode === 'convert-select') {
-        await updateColumn.mutateAsync({
+        const result = await updateColumn.mutateAsync({
           columnName: config.columnName,
           updates: {
             type: 'select',
@@ -172,6 +176,18 @@ function ColumnConfigBody({
             ...(existingColumn?.unique ? { unique: false } : {}),
           },
         })
+        if (existingColumn) {
+          const updatedColumn = result.data.columns.find(
+            (candidate) => getColumnId(candidate) === config.columnName
+          ) ?? {
+            ...existingColumn,
+            type: 'select',
+            options: trimmedOptions,
+            unique: false,
+            ...(multipleInput ? { multiple: true } : {}),
+          }
+          onColumnTypeChange(config.columnName, existingColumn, updatedColumn)
+        }
         toast.success(`Saved "${columnLabel}"`)
         onClose()
         return
@@ -220,6 +236,7 @@ function ColumnConfigBody({
           variant='ghost'
           size='sm'
           onClick={onClose}
+          disabled={saveDisabled}
           className='!p-1 size-7'
           aria-label='Close'
         >
@@ -270,7 +287,7 @@ function ColumnConfigBody({
       </div>
 
       <div className='flex items-center justify-end gap-2 border-[var(--border)] border-t px-2 py-3'>
-        <Button variant='default' size='sm' onClick={onClose}>
+        <Button variant='default' size='sm' onClick={onClose} disabled={saveDisabled}>
           Cancel
         </Button>
         <Button variant='primary' size='sm' onClick={handleSave} disabled={saveDisabled}>

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu.tsx

@@ -19,7 +19,6 @@ interface ColumnHeaderMenuProps {
   isRenaming: boolean
   isColumnSelected: boolean
   renameValue: string
-  /** True after a refused rename — paints the name red until it's edited. */
   renameError?: boolean
   onRenameValueChange: (value: string) => void
   onRenameSubmit: () => void

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/draft-column-header.tsx

@@ -3,17 +3,15 @@
 import React, { useEffect, useRef } from 'react'
 import { cn } from '@sim/emcn'
 import type { ColumnDefinition } from '@/lib/table'
-import { ColumnTypeIcon } from './column-type-icon'
+import { ColumnTypeIcon } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-type-icon'
 
 interface DraftColumnHeaderProps {
   type: ColumnDefinition['type']
   name: string
   /** True after a refused commit — paints the name red until it's edited. */
   invalid: boolean
   onNameChange: (name: string) => void
-  /** Enter or blur. The grid decides whether this persists the column. */
   onCommit: () => void
-  /** Escape. Discards the draft — nothing was ever persisted. */
   onCancel: () => void
 }
 

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell.tsx

@@ -77,7 +77,6 @@ interface ColumnOptionsMenuProps {
    *  config surface behind it (the workflow sidebar); plain columns edit
    *  name/type/unique from this menu directly and omit it. */
   onOpenConfig?: (columnName: string) => void
-  /** Starts the inline header rename. Plain and enrichment columns only. */
   onRenameColumn?: (columnName: string) => void
   /** Converts the column to `type`. Callers route `select` conversions through
    *  the config sidebar (the option set must be collected first). */

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx

@@ -309,6 +309,14 @@ interface TableGridProps {
   draftSelectSaveSinkRef: React.MutableRefObject<
     ((options: SelectOption[], multiple: boolean) => Promise<boolean>) | null
   >
+  /**
+   * Ref the grid populates with the sidebar's successful type-conversion undo
+   * recorder, keeping the undo stack owned by the grid.
+   */
+  recordColumnTypeChangeSinkRef: React.MutableRefObject<
+    | ((columnName: string, previousColumn: ColumnDefinition, newColumn: ColumnDefinition) => void)
+    | null
+  >
   /**
    * Ref the grid populates with its draft discard. The wrapper fires it from
    * every slideout transition other than entering `draft-select`, so
@@ -501,6 +509,7 @@ export function TableGrid({
   columnRenameSinkRef,
   addColumnOfTypeSinkRef,
   draftSelectSaveSinkRef,
+  recordColumnTypeChangeSinkRef,
   abortColumnDraftSinkRef,
   layoutSnapshotSinkRef,
   afterDeleteRowsSinkRef,
@@ -1540,7 +1549,6 @@ export function TableGrid({
   const handleFindCloseRef = useRef(handleFindClose)
   handleFindCloseRef.current = handleFindClose
 
-  /** True after a refused rename — paints the header input red until it's edited. */
   const [renameError, setRenameError] = useState(false)
 
   const columnRename = useInlineRename({
@@ -3946,9 +3954,13 @@ export function TableGrid({
         { name, type: 'string', position: index },
         {
           onSuccess: (result) => {
-            const newId = result.data.columns.find((c) => c.name === name)?.id ?? name
+            const createdColumn = result.data.columns.find((c) => c.name === name) ?? {
+              name,
+              type: 'string' as const,
+            }
+            const newId = getColumnId(createdColumn)
             pushUndoRef.current(
-              { type: 'create-column', columnName: name, columnId: newId, position: index },
+              { type: 'create-column', column: createdColumn, position: index },
               owner
             )
             // Skipped after a mid-flight view switch: the destination re-seeded
@@ -3973,11 +3985,12 @@ export function TableGrid({
         { name, type: 'string', position },
         {
           onSuccess: (result) => {
-            const newId = result.data.columns.find((c) => c.name === name)?.id ?? name
-            pushUndoRef.current(
-              { type: 'create-column', columnName: name, columnId: newId, position },
-              owner
-            )
+            const createdColumn = result.data.columns.find((c) => c.name === name) ?? {
+              name,
+              type: 'string' as const,
+            }
+            const newId = getColumnId(createdColumn)
+            pushUndoRef.current({ type: 'create-column', column: createdColumn, position }, owner)
             if (owner === viewLayoutKeyRef.current) insertColumnInOrder(columnId, newId, 'right')
           },
         }
@@ -4042,11 +4055,12 @@ export function TableGrid({
       draftPersistingRef.current = true
       try {
         const result = await addColumnMutation.mutateAsync({ name, type: draft.type, ...metadata })
-        const newId = result.data.columns.find((c) => c.name === name)?.id ?? name
-        pushUndoRef.current(
-          { type: 'create-column', columnName: name, columnId: newId, position },
-          owner
-        )
+        const createdColumn = result.data.columns.find((c) => c.name === name) ?? {
+          name,
+          type: draft.type,
+          ...metadata,
+        }
+        pushUndoRef.current({ type: 'create-column', column: createdColumn, position }, owner)
         setColumnDraft(null)
         return true
       } catch (err) {
@@ -4089,19 +4103,25 @@ export function TableGrid({
     persistDraft({ options, ...(multiple ? { multiple: true } : {}) })
   abortColumnDraftSinkRef.current = () => setColumnDraft(null)
 
-  /** Toggle the `unique` constraint on a plain column, recording the flip for undo. */
+  /** Toggle the `unique` constraint on a plain column, recording successful flips for undo. */
   const handleToggleUnique = useCallback((columnKey: string) => {
     const column = columnsRef.current.find((c) => c.key === columnKey)
     if (!column) return
     const previousValue = !!column.unique
-    pushUndoRef.current({
-      type: 'toggle-column-constraint',
-      columnName: columnKey,
-      constraint: 'unique',
-      previousValue,
-      newValue: !previousValue,
-    })
-    updateColumnMutation.mutate({ columnName: columnKey, updates: { unique: !previousValue } })
+    updateColumnMutation.mutate(
+      { columnName: columnKey, updates: { unique: !previousValue } },
+      {
+        onSuccess: () => {
+          pushUndoRef.current({
+            type: 'toggle-column-constraint',
+            columnName: columnKey,
+            constraint: 'unique',
+            previousValue,
+            newValue: !previousValue,
+          })
+        },
+      }
+    )
   }, [])
 
   /** Open the workflow-config sidebar to spawn a brand-new workflow group. */
@@ -4128,7 +4148,6 @@ export function TableGrid({
     [onOpenWorkflowConfig, workflowGroupById]
   )
 
-  /** Starts the inline header rename from the menu's "Rename column" item. */
   const handleRenameColumn = useCallback(
     (columnName: string) => {
       const column = columnsRef.current.find((c) => c.key === columnName)
@@ -4150,22 +4169,41 @@ export function TableGrid({
         onOpenColumnConfig({ mode: 'convert-select', columnName })
         return
       }
-      const previousType = column.type
       // Recorded on success only: the server refuses a retype whose existing
       // values can't convert (the hook toasts why), and an entry for a change
       // that never landed would make undo "restore" the type it already has.
       updateColumnMutation.mutate(
         { columnName, updates: { type: newType } },
         {
-          onSuccess: () => {
-            pushUndoRef.current({ type: 'update-column-type', columnName, previousType, newType })
+          onSuccess: (result) => {
+            const updatedColumn = result.data.columns.find(
+              (candidate) => getColumnId(candidate) === columnName
+            ) ?? {
+              ...column,
+              type: newType,
+            }
+            pushUndoRef.current({
+              type: 'update-column-type',
+              columnName,
+              previousColumn: column,
+              newColumn: updatedColumn,
+            })
           },
         }
       )
     },
     [onOpenColumnConfig]
   )
 
+  recordColumnTypeChangeSinkRef.current = (columnName, previousColumn, newColumn) => {
+    pushUndoRef.current({
+      type: 'update-column-type',
+      columnName,
+      previousColumn,
+      newColumn,
+    })
+  }
+
   /** Opens the config sidebar for a select's options / a currency's code. */
   const handleOpenConfigure = useCallback(
     (columnName: string) => {
@@ -4192,12 +4230,6 @@ export function TableGrid({
     deleteWorkflowGroupRef.current({ groupId })
   }, [])
 
-  /**
-   * Computes the names slated for deletion given a click on `columnName` and
-   * the current column selection. If the click landed inside a multi-column
-   * selection, the entire selection is the target; otherwise it's just the
-   * clicked column.
-   */
   const resolveDeletionNames = useCallback((columnName: string): string[] => {
     const cols = columnsRef.current
     if (isColumnSelectionRef.current && selectionAnchorRef.current) {

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

@@ -231,6 +231,7 @@ export function Table({
   const { otherUsers: presenceUsers, remoteSelections, emitCellSelection } = useTableRoom(tableId)
 
   const [slideout, dispatchSlideout] = useReducer(slideoutReducer, { kind: 'none' })
+  const draftSelectSavingRef = useRef(false)
   /**
    * Sink the grid populates with its column-draft discard. A select draft
    * exists only while its options sidebar is open, so every slideout
@@ -240,6 +241,7 @@ export function Table({
    */
   const abortColumnDraftSinkRef = useRef<(() => void) | null>(null)
   const dispatch = useCallback((action: SlideoutAction) => {
+    if (draftSelectSavingRef.current) return
     dispatchSlideout(action)
     if (action.type !== 'OPEN_COLUMN' || action.config.mode !== 'draft-select') {
       abortColumnDraftSinkRef.current?.()
@@ -367,9 +369,28 @@ export function Table({
     ((options: SelectOption[], multiple: boolean) => Promise<boolean>) | null
   >(null)
   const onDraftSelectSave = async (options: SelectOption[], multiple: boolean) => {
-    const created = (await draftSelectSaveSinkRef.current?.(options, multiple)) ?? false
-    if (created) dispatch({ type: 'CLOSE' })
-    return created
+    if (draftSelectSavingRef.current) return false
+    draftSelectSavingRef.current = true
+    let created = false
+    try {
+      created = (await draftSelectSaveSinkRef.current?.(options, multiple)) ?? false
+      return created
+    } finally {
+      draftSelectSavingRef.current = false
+      if (created) dispatch({ type: 'CLOSE' })
+    }
+  }
+
+  const recordColumnTypeChangeSinkRef = useRef<
+    | ((columnName: string, previousColumn: ColumnDefinition, newColumn: ColumnDefinition) => void)
+    | null
+  >(null)
+  const onColumnTypeChange = (
+    columnName: string,
+    previousColumn: ColumnDefinition,
+    newColumn: ColumnDefinition
+  ) => {
+    recordColumnTypeChangeSinkRef.current?.(columnName, previousColumn, newColumn)
   }
 
   /**
@@ -1644,6 +1665,7 @@ export function Table({
         columnRenameSinkRef={columnRenameSinkRef}
         addColumnOfTypeSinkRef={addColumnOfTypeSinkRef}
         draftSelectSaveSinkRef={draftSelectSaveSinkRef}
+        recordColumnTypeChangeSinkRef={recordColumnTypeChangeSinkRef}
         abortColumnDraftSinkRef={abortColumnDraftSinkRef}
         layoutSnapshotSinkRef={layoutSnapshotRef}
         afterDeleteRowsSinkRef={afterDeleteRowsSinkRef}
@@ -1718,6 +1740,7 @@ export function Table({
         config={columnConfig}
         onClose={onCloseSlideout}
         onDraftSave={onDraftSelectSave}
+        onColumnTypeChange={onColumnTypeChange}
         existingColumn={
           columnConfig && columnConfig.mode !== 'draft-select'
             ? (columns.find((c) => getColumnId(c) === columnConfig.columnName) ?? null)

apps/sim/hooks/queries/tables.ts

@@ -647,7 +647,7 @@ export function useAddTableColumn({ workspaceId, tableId }: RowMutationContext)
       toast.error(error.message, { duration: 5000 })
     },
     onSettled: () => {
-      invalidateTableSchemaOnly(queryClient, tableId)
+      queryClient.invalidateQueries({ queryKey: tableKeys.lists() })
     },
   })
 }