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#4995waleedlatif1 wants to merge 1 commit into
Conversation
… up tables feature
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
PR SummaryLow Risk Overview Validation and styling: field errors use the UX and perf fixes: expanded cell editing is split into a keyed Reviewed by Cursor Bugbot for commit 5bbc574. Configure here. |
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 5bbc574. Configure here.
| align='start' | ||
| matchTriggerWidth={false} | ||
| className='min-w-[100px]' | ||
| /> |
There was a problem hiding this comment.
Filter hides missing column label
Low Severity
Replacing the column picker with ChipDropdown drops the previous fallback when rule.column is set but no longer appears in options (for example after a column was removed). The trigger shows the placeholder Column even though a column id is still selected, so the active rule looks unset while the filter logic may still use the stale id.
Reviewed by Cursor Bugbot for commit 5bbc574. Configure here.
Greptile SummaryThis PR migrates all form-style inputs across the tables feature to the
Confidence Score: 4/5Safe to merge; all changes are additive UI migrations and correctness fixes with no data-path or API-contract changes. The ChipCombobox error-misuse fix, CSS variable correction, and ExpandedCellEditor keying are all improvements over the previous state. The only open question is the inline error paragraph in enrichment-config.tsx lacking the pl-0.5 spacing that FieldError provides, leaving a minor visual inconsistency. No regressions identified in the core table data or mutation paths. enrichment-config.tsx — the input-mapping validation error paragraph should use FieldError for consistent padding. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
subgraph "New shared: sidebar-fields"
RF[RequiredLabel]
FE[FieldError]
end
subgraph "column-config-sidebar"
CC[ColumnConfigBody] -->|imports| RF
CC -->|imports| FE
CC -->|ChipInput error=Boolean| CI1[ChipInput]
end
subgraph "workflow-sidebar"
WS[WorkflowSidebarBody] -->|imports| RF
WS -->|imports| FE
WS -->|ChipInput error=Boolean| CI2[ChipInput]
WS -->|error prop removed| CCB1[ChipCombobox]
WS -->|renders below| FE
end
subgraph "enrichment-config"
EC[EnrichmentConfig] -->|ChipInput error=Boolean| CI3[ChipInput]
EC -->|error prop removed| CCB2[ChipCombobox]
EC -->|inline p.text-error| ERR[error paragraph]
end
subgraph "table-filter"
TF[FilterRuleRow] -->|was hand-rolled pill| CD1[ChipDropdown column]
TF -->|was hand-rolled pill| CD2[ChipDropdown operator]
TF -->|was raw input| CI4[ChipInput value]
end
subgraph "expanded-cell-popover"
ECP[ExpandedCellPopover] -->|key=rowId:colKey| ECE[ExpandedCellEditor]
ECE -->|useState initialValue| DV[draftValue preserved on SSE refetch]
end
subgraph "tables.tsx"
T[Tables] -->|derived| UP[uploading = uploadProgress.total > 0]
T -->|useMemo| FC[filterConfig stable ref]
T -->|useMemo| HA[headerAside stable ref]
end
|
| <ExpandedCellEditor | ||
| key={`${expandedCell.rowId}:${expandedCell.columnKey ?? expandedCell.columnName}`} | ||
| initialValue={formatValueForInput(target.value, target.column.type)} | ||
| column={target.column} | ||
| rowId={target.row.id} | ||
| onSave={onSave} | ||
| onClose={onClose} | ||
| textareaRef={textareaRef} | ||
| /> |
There was a problem hiding this comment.
textareaRef focus during key-driven remount
When expandedCell changes, the useLayoutEffect (line 72) and the key on ExpandedCellEditor both react simultaneously. React unmounts the old editor, mounts the new one, attaches the ref, then runs layout effects — so textareaRef.current is set to the new textarea by the time the effect fires and the requestAnimationFrame fires a frame later. This is correct as written. Worth noting for future maintainers: if the focus logic ever moves outside useLayoutEffect into a regular useEffect, there could be a one-frame window where the ref is null between the old unmount and the new commit.
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
| {showValidation && input.required && !inputMappings[input.id] && ( | ||
| <p className='text-[var(--text-error)] text-caption'>Required</p> | ||
| )} |
There was a problem hiding this comment.
The inline error paragraph for input mapping validation is missing the
pl-0.5 left-padding that the shared FieldError component applies. Using FieldError here would keep spacing consistent across all sidebar field errors.
| {showValidation && input.required && !inputMappings[input.id] && ( | |
| <p className='text-[var(--text-error)] text-caption'>Required</p> | |
| )} | |
| {showValidation && input.required && !inputMappings[input.id] && ( | |
| <FieldError message='Required' /> | |
| )} |


Summary
icon={Search}), table find, and filter value now useChipInput; filter column/operator pickers now useChipDropdowninstead of hand-rolled 28px pillserrorprop instead of className border overrides; fixChipComboboxerrormisuse where the message replaced the options list (workflow picker, enrichment input mapping)--text-dangerCSS var (rendered incurrentColor, not red) and wrongtext-destructivetoken in field errors — both now--text-errorRequiredLabel/FieldErrorinto sharedsidebar-fields, extractActionIconButtonin the table action bar (4x duplicated chrome string), align enrichments-sidebar close buttons with sibling sidebars, swap lucideX/ChevronDownfor the emcn iconsExpandedCellEditorso an in-progress cell draft survives SSE/refetch row updates; memoizefilter/asideprops feeding the memoizedResource.Header/Resource.Options; deriveuploadingfromuploadProgress; drop unstable mutation object fromhandleCreateTabledeps; delete deaduseTableRowshookType of Change
Testing
bun run check:api-validationpasses, tables unit tests pass (28/28), typecheck clean. Tested manuallyChecklist