fix(tables): harden inline column renaming

Author: j15z

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

@@ -132,12 +132,12 @@ describe('ColumnHeaderMenu interactions', () => {
     const headerButton = renderHeader({ onColumnSelect, onRenameColumn })
 
     act(() => {
-      headerButton.click()
-      headerButton.click()
+      headerButton.dispatchEvent(new MouseEvent('click', { bubbles: true, detail: 1 }))
+      headerButton.dispatchEvent(new MouseEvent('click', { bubbles: true, detail: 2 }))
       headerButton.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
     })
 
-    expect(onColumnSelect).toHaveBeenCalledTimes(2)
+    expect(onColumnSelect).toHaveBeenCalledTimes(1)
     expect(onRenameColumn).toHaveBeenCalledWith('col-name')
   })
 

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

@@ -234,6 +234,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
       return
     }
     if (isRenaming) return
+    if (e.detail > 1) return
     onColumnSelect(colIndex, e.shiftKey)
   }
 
@@ -294,7 +295,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
         <div className='flex h-full w-full min-w-0 items-center px-2 py-[7px]'>
           <ColumnTypeIcon
             type={column.type}
-            isWorkflowColumn={!!column.workflowGroupId && ownGroup?.type !== 'enrichment'}
+            isWorkflowColumn={isWorkflowOutput}
             blockIconInfo={sourceInfo?.blockIconInfo}
             blockMissing={blockMissing}
           />
@@ -319,7 +320,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
         <div className='flex h-full w-full min-w-0 items-center px-2 py-[7px]'>
           <ColumnTypeIcon
             type={column.type}
-            isWorkflowColumn={!!column.workflowGroupId && ownGroup?.type !== 'enrichment'}
+            isWorkflowColumn={isWorkflowOutput}
             blockIconInfo={sourceInfo?.blockIconInfo}
             blockMissing={blockMissing}
           />
@@ -351,7 +352,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
           >
             <ColumnTypeIcon
               type={column.type}
-              isWorkflowColumn={!!column.workflowGroupId && ownGroup?.type !== 'enrichment'}
+              isWorkflowColumn={isWorkflowOutput}
               blockIconInfo={sourceInfo?.blockIconInfo}
               blockMissing={blockMissing}
             />

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

@@ -1570,7 +1570,7 @@ export function TableGrid({
   const handleFindCloseRef = useRef(handleFindClose)
   handleFindCloseRef.current = handleFindClose
 
-  const [renameError, setRenameError] = useState(false)
+  const [renameErrorColumnId, setRenameErrorColumnId] = useState<string | null>(null)
 
   const columnRename = useInlineRename({
     // `columnName` is the column id; record the prior display name + id so undo
@@ -1585,7 +1585,7 @@ export function TableGrid({
           if (isValidationError(error)) {
             toast.error(extractValidationIssues(error)[0]?.message ?? getErrorMessage(error))
           }
-          setRenameError(true)
+          setRenameErrorColumnId(columnName)
           throw error
         })
     },
@@ -1594,7 +1594,7 @@ export function TableGrid({
   columnRenameRef.current = columnRename
 
   const handleRenameValueChange = useCallback((value: string) => {
-    setRenameError(false)
+    setRenameErrorColumnId(null)
     columnRenameRef.current.setEditValue(value)
   }, [])
 
@@ -1603,7 +1603,7 @@ export function TableGrid({
     const { editingId, editValue, submitRename } = columnRenameRef.current
     const trimmedName = editValue.trim()
     const currentColumn = columnsRef.current.find((column) => column.key === editingId)
-    if (trimmedName && currentColumn && trimmedName !== currentColumn.name) {
+    if (currentColumn && trimmedName !== currentColumn.name) {
       const issue = columnNameIssue(
         trimmedName,
         schemaColumnsRef.current
@@ -1612,16 +1612,16 @@ export function TableGrid({
       )
       if (issue) {
         toast.error(issue)
-        setRenameError(true)
+        setRenameErrorColumnId(editingId)
         return
       }
     }
-    setRenameError(false)
+    setRenameErrorColumnId(null)
     void submitRename()
   }, [])
 
   const handleRenameCancel = useCallback(() => {
-    setRenameError(false)
+    setRenameErrorColumnId(null)
     columnRenameRef.current.cancelRename()
   }, [])
 
@@ -4119,7 +4119,7 @@ export function TableGrid({
 
   const handleRenameColumn = useCallback(
     (columnName: string) => {
-      setRenameError(false)
+      setRenameErrorColumnId(null)
       const column = columnsRef.current.find((candidate) => candidate.key === columnName)
       columnRename.startRename(columnName, column?.name ?? columnName)
     },
@@ -5016,7 +5016,7 @@ export function TableGrid({
                             renameValue={
                               columnRename.editingId === column.key ? columnRename.editValue : ''
                             }
-                            renameError={renameError && columnRename.editingId === column.key}
+                            renameError={renameErrorColumnId === column.key}
                             onRenameValueChange={handleRenameValueChange}
                             onRenameSubmit={handleRenameSubmit}
                             onRenameCancel={handleRenameCancel}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/utils.test.ts

@@ -242,6 +242,10 @@ describe('columnNameIssue', () => {
     expect(columnNameIssue('email_address', ['name', 'status'])).toBeNull()
   })
 
+  it('requires a name', () => {
+    expect(columnNameIssue('', [])).toBe('Column name is required')
+  })
+
   it('refuses invalid patterns and names that begin with a digit', () => {
     expect(columnNameIssue('New Text', [])).toMatch(/letter or underscore/)
     expect(columnNameIssue('1st', [])).toMatch(/letter or underscore/)

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

@@ -521,6 +521,7 @@ export function canWriteRowsWithChip(opts: {
  * @param takenNames Names of every other column in the table.
  */
 export function columnNameIssue(name: string, takenNames: Iterable<string>): string | null {
+  if (!name) return 'Column name is required'
   if (name.length > TABLE_LIMITS.MAX_COLUMN_NAME_LENGTH) {
     return `Column names must be ${TABLE_LIMITS.MAX_COLUMN_NAME_LENGTH} characters or less`
   }