improvement(tables): migrate inputs to emcn chip components and clean up tables feature (#4995)

* improvement(tables): migrate inputs to emcn chip components and clean up tables feature

* fix(tables): address review feedback — stale filter column label, shared FieldError in enrichment config

* improvement(tables): scope create-table callback to stable mutateAsync

Author: waleedlatif1

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

@@ -1,13 +1,24 @@
 'use client'
 
-import type React from 'react'
 import { useState } from 'react'
 import { toError } from '@sim/utils/errors'
-import { X } from 'lucide-react'
-import { Button, ChipCombobox, FieldDivider, Input, Label, Switch, toast } from '@/components/emcn'
+import {
+  Button,
+  ChipCombobox,
+  ChipInput,
+  FieldDivider,
+  Label,
+  Switch,
+  toast,
+} from '@/components/emcn'
+import { X } from '@/components/emcn/icons'
 import { findValidationIssue, isValidationError } from '@/lib/api/client/errors'
 import { cn } from '@/lib/core/utils/cn'
 import type { ColumnDefinition } from '@/lib/table'
+import {
+  FieldError,
+  RequiredLabel,
+} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/sidebar-fields'
 import { useAddTableColumn, useUpdateColumn } from '@/hooks/queries/tables'
 import { PLAIN_COLUMN_TYPE_OPTIONS } from './column-types'
 
@@ -169,7 +180,7 @@ function ColumnConfigBody({
       <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [overflow-anchor:none]'>
         <div className='flex flex-col gap-[9.5px]'>
           <RequiredLabel htmlFor='column-sidebar-name'>Column name</RequiredLabel>
-          <Input
+          <ChipInput
             id='column-sidebar-name'
             value={nameInput}
             onChange={(e) => {
@@ -178,6 +189,7 @@ function ColumnConfigBody({
             }}
             spellCheck={false}
             autoComplete='off'
+            error={Boolean((showValidation && !trimmedName) || nameError)}
             aria-invalid={(showValidation && !trimmedName) || nameError ? true : undefined}
           />
           {showValidation && !trimmedName && <FieldError message='Column name is required' />}
@@ -228,16 +240,3 @@ function ColumnConfigBody({
     </div>
   )
 }
-
-function RequiredLabel({ htmlFor, children }: { htmlFor?: string; children: React.ReactNode }) {
-  return (
-    <Label htmlFor={htmlFor} className='flex items-baseline gap-1.5 whitespace-nowrap pl-0.5'>
-      {children}
-      <span className='ml-0.5'>*</span>
-    </Label>
-  )
-}
-
-function FieldError({ message }: { message: string }) {
-  return <p className='pl-0.5 text-caption text-destructive'>{message}</p>
-}

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

@@ -7,18 +7,18 @@ import {
   Badge,
   Button,
   ChipCombobox,
+  ChipInput,
   CollapsibleCard,
   FieldDivider,
-  Input,
   Label,
   Switch,
   toast,
 } from '@/components/emcn'
 import { ArrowLeft, X } from '@/components/emcn/icons'
 import type { AddWorkflowGroupBodyInput } from '@/lib/api/contracts/tables'
-import { cn } from '@/lib/core/utils/cn'
 import type { ColumnDefinition, WorkflowGroup, WorkflowGroupOutput } from '@/lib/table'
 import { deriveOutputColumnName } from '@/lib/table/column-naming'
+import { FieldError } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/sidebar-fields'
 import type { EnrichmentConfig as EnrichmentDef } from '@/enrichments/types'
 import {
   useAddWorkflowGroup,
@@ -280,12 +280,10 @@ export function EnrichmentConfig({
                     onChange={(columnName: string) =>
                       setInputMappings((prev) => ({ ...prev, [input.id]: columnName }))
                     }
-                    error={
-                      showValidation && input.required && !inputMappings[input.id]
-                        ? 'Required'
-                        : null
-                    }
                   />
+                  {showValidation && input.required && !inputMappings[input.id] && (
+                    <FieldError message='Required' />
+                  )}
                 </CollapsibleCard>
               ))}
             </div>
@@ -317,16 +315,16 @@ export function EnrichmentConfig({
                   }
                 >
                   <Label className='text-small'>Column name</Label>
-                  <Input
+                  <ChipInput
                     value={outputNames[output.id] ?? ''}
                     onChange={(e) =>
                       setOutputNames((prev) => ({ ...prev, [output.id]: e.target.value }))
                     }
                     spellCheck={false}
                     autoComplete='off'
-                    className={cn(outErr && 'border-[var(--text-error)]')}
+                    error={Boolean(outErr)}
                   />
-                  {outErr && <p className='text-[var(--text-error)] text-caption'>{outErr}</p>}
+                  {outErr && <FieldError message={outErr} />}
                 </CollapsibleCard>
               )
             })}

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { Input } from '@/components/emcn'
+import { Button, ChipInput } from '@/components/emcn'
 import { Search, X } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import type { ColumnDefinition, WorkflowGroup } from '@/lib/table'
@@ -74,14 +74,15 @@ function EnrichmentsSidebarBody({
       <div className='flex h-full flex-col'>
         <div className='flex items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
           <h2 className='font-medium text-[var(--text-primary)] text-small'>Enrichment</h2>
-          <button
-            type='button'
+          <Button
+            variant='ghost'
+            size='sm'
             onClick={onClose}
-            className='flex size-7 flex-none items-center justify-center rounded-md text-[var(--text-muted)] transition-colors hover-hover:bg-[var(--surface-hover)] hover-hover:text-[var(--text-primary)]'
+            className='!p-1 size-7 flex-none'
             aria-label='Close'
           >
             <X className='size-[14px]' />
-          </button>
+          </Button>
         </div>
         <div className='flex flex-1 items-center justify-center px-6 text-center'>
           <p className='text-[var(--text-tertiary)] text-small'>
@@ -119,28 +120,26 @@ function EnrichmentsSidebarBody({
     <div className='flex h-full flex-col'>
       <div className='flex items-center justify-between border-[var(--border)] border-b px-3 py-[8.5px]'>
         <h2 className='font-medium text-[var(--text-primary)] text-small'>Enrichments</h2>
-        <button
-          type='button'
+        <Button
+          variant='ghost'
+          size='sm'
           onClick={onClose}
-          className='flex size-7 flex-none items-center justify-center rounded-md text-[var(--text-muted)] transition-colors hover-hover:bg-[var(--surface-hover)] hover-hover:text-[var(--text-primary)]'
+          className='!p-1 size-7 flex-none'
           aria-label='Close'
         >
           <X className='size-[14px]' />
-        </button>
+        </Button>
       </div>
 
       <div className='px-2 pt-3'>
-        <div className='relative'>
-          <Search className='-translate-y-1/2 pointer-events-none absolute top-1/2 left-2 size-[14px] text-[var(--text-muted)]' />
-          <Input
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            placeholder='Search'
-            spellCheck={false}
-            autoComplete='off'
-            className='pl-7'
-          />
-        </div>
+        <ChipInput
+          icon={Search}
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder='Search'
+          spellCheck={false}
+          autoComplete='off'
+        />
       </div>
 
       <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 py-3 [overflow-anchor:none]'>

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/index.ts

@@ -4,6 +4,7 @@ export * from './enrichments-sidebar'
 export * from './new-column-dropdown'
 export * from './row-modal'
 export * from './run-status-control'
+export * from './sidebar-fields'
 export * from './table-action-bar'
 export * from './table-filter'
 export * from './table-grid'

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/sidebar-fields/index.ts

@@ -0,0 +1 @@
+export { FieldError, RequiredLabel } from './sidebar-fields'

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

@@ -0,0 +1,30 @@
+'use client'
+
+import type React from 'react'
+import { Label } from '@/components/emcn'
+
+/**
+ * Field label with a trailing required marker, matching the sidebar field
+ * rhythm shared by the column-config and workflow sidebars.
+ */
+export function RequiredLabel({
+  htmlFor,
+  children,
+}: {
+  htmlFor?: string
+  children: React.ReactNode
+}) {
+  return (
+    <Label htmlFor={htmlFor} className='flex items-baseline gap-1.5 whitespace-nowrap pl-0.5'>
+      {children}
+      <span className='ml-0.5'>*</span>
+    </Label>
+  )
+}
+
+/**
+ * Inline validation error rendered under a sidebar field.
+ */
+export function FieldError({ message }: { message: string }) {
+  return <p className='pl-0.5 text-[var(--text-error)] text-caption'>{message}</p>
+}

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

@@ -1,5 +1,6 @@
 'use client'
 
+import type React from 'react'
 import { AnimatePresence, domAnimation, LazyMotion, m } from 'framer-motion'
 import { Button, Tooltip } from '@/components/emcn'
 import { Eye, PlayOutline, RefreshCw, Square } from '@/components/emcn/icons'
@@ -98,71 +99,35 @@ export function TableActionBar({
 
               <div className='flex items-center gap-[5px]'>
                 {showPlay && (
-                  <Tooltip.Root>
-                    <Tooltip.Trigger asChild>
-                      <Button
-                        variant='ghost'
-                        onClick={onPlay}
-                        disabled={isLoading}
-                        className='hover-hover:!text-[var(--text-inverse)] size-[28px] rounded-lg bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover-hover:bg-[var(--brand-secondary)]'
-                        aria-label={playLabel}
-                      >
-                        <PlayOutline className='size-[12px]' />
-                      </Button>
-                    </Tooltip.Trigger>
-                    <Tooltip.Content side='top'>{playLabel}</Tooltip.Content>
-                  </Tooltip.Root>
+                  <ActionIconButton label={playLabel} onClick={onPlay} disabled={isLoading}>
+                    <PlayOutline className='size-[12px]' />
+                  </ActionIconButton>
                 )}
 
                 {showRefresh && (
-                  <Tooltip.Root>
-                    <Tooltip.Trigger asChild>
-                      <Button
-                        variant='ghost'
-                        onClick={onRefresh}
-                        disabled={isLoading}
-                        className='hover-hover:!text-[var(--text-inverse)] size-[28px] rounded-lg bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover-hover:bg-[var(--brand-secondary)]'
-                        aria-label={refreshLabel}
-                      >
-                        <RefreshCw className='size-[12px]' />
-                      </Button>
-                    </Tooltip.Trigger>
-                    <Tooltip.Content side='top'>{refreshLabel}</Tooltip.Content>
-                  </Tooltip.Root>
+                  <ActionIconButton label={refreshLabel} onClick={onRefresh} disabled={isLoading}>
+                    <RefreshCw className='size-[12px]' />
+                  </ActionIconButton>
                 )}
 
                 {runningCount > 0 && (
-                  <Tooltip.Root>
-                    <Tooltip.Trigger asChild>
-                      <Button
-                        variant='ghost'
-                        onClick={onStopWorkflows}
-                        disabled={isLoading}
-                        className='hover-hover:!text-[var(--text-inverse)] size-[28px] rounded-lg bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover-hover:bg-[var(--brand-secondary)]'
-                        aria-label={stopLabel}
-                      >
-                        <Square className='size-[12px]' />
-                      </Button>
-                    </Tooltip.Trigger>
-                    <Tooltip.Content side='top'>{stopLabel}</Tooltip.Content>
-                  </Tooltip.Root>
+                  <ActionIconButton
+                    label={stopLabel}
+                    onClick={onStopWorkflows}
+                    disabled={isLoading}
+                  >
+                    <Square className='size-[12px]' />
+                  </ActionIconButton>
                 )}
 
                 {onViewExecution && (
-                  <Tooltip.Root>
-                    <Tooltip.Trigger asChild>
-                      <Button
-                        variant='ghost'
-                        onClick={onViewExecution}
-                        disabled={isLoading}
-                        className='hover-hover:!text-[var(--text-inverse)] size-[28px] rounded-lg bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover-hover:bg-[var(--brand-secondary)]'
-                        aria-label='View execution'
-                      >
-                        <Eye className='size-[12px]' />
-                      </Button>
-                    </Tooltip.Trigger>
-                    <Tooltip.Content side='top'>View execution</Tooltip.Content>
-                  </Tooltip.Root>
+                  <ActionIconButton
+                    label='View execution'
+                    onClick={onViewExecution}
+                    disabled={isLoading}
+                  >
+                    <Eye className='size-[12px]' />
+                  </ActionIconButton>
                 )}
               </div>
             </div>
@@ -172,3 +137,34 @@ export function TableActionBar({
     </LazyMotion>
   )
 }
+
+interface ActionIconButtonProps {
+  /** Tooltip text, also used as the button's accessible label. */
+  label: string
+  onClick: () => void
+  disabled: boolean
+  children: React.ReactNode
+}
+
+/**
+ * Tooltip-wrapped icon button sharing the action bar's brand-hover chrome,
+ * so the chrome string lives in one place.
+ */
+function ActionIconButton({ label, onClick, disabled, children }: ActionIconButtonProps) {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <Button
+          variant='ghost'
+          onClick={onClick}
+          disabled={disabled}
+          className='hover-hover:!text-[var(--text-inverse)] size-[28px] rounded-lg bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover-hover:bg-[var(--brand-secondary)]'
+          aria-label={label}
+        >
+          {children}
+        </Button>
+      </Tooltip.Trigger>
+      <Tooltip.Content side='top'>{label}</Tooltip.Content>
+    </Tooltip.Root>
+  )
+}