Skip to content

feat: Table bulk inline edit (v0, AWSUI-56121) [WIP]#4818

Draft
ernst-dev wants to merge 2 commits into
mainfrom
feat/table-bulk-inline-edit-wip
Draft

feat: Table bulk inline edit (v0, AWSUI-56121) [WIP]#4818
ernst-dev wants to merge 2 commits into
mainfrom
feat/table-bulk-inline-edit-wip

Conversation

@ernst-dev

Copy link
Copy Markdown
Member

Description

[WIP / v0 — do not merge] First-cut (v0) of an opt-in bulk inline editing mode for Table, tracked by SIM AWSUI-56121. Bulk inline edit lets users edit multiple editable cells at once (a "bulk edit mode") and commit them together via a single callback, rather than editing one cell at a time.

This is an epic-sized, multi-week feature; this PR is a coherent, buildable starting point that layers on top of the existing single-cell inline-edit (editConfig) machinery. It is additive and opt-in — with no bulkEdit prop the Table behaves exactly as before (verified: the only behavioral tie-in is gated on bulkEditing.isActive, which is always false when disabled).

⚠️ Ticket mismatch note: https://taskei.amazon.dev/tasks/AWSUI-56121 currently resolves to an unrelated Aperture Form Submission record (a VPC console CLASS satisfaction survey, ticket V1491224149), not a Table bulk-inline-edit feature request. This PR was implemented against the feature description provided in the task, not the resolved ticket content. Please re-point the SIM ID before this leaves WIP.

Related links, issue #: AWSUI-56121 (see mismatch note above)

What's included (v0 / done)

  • useBulkEditing hook (src/table/use-bulk-editing.ts) — the core, UI-agnostic state machine:
    • enter / exit bulk-edit mode (startBulkEdit / discardBulkEdit)
    • dirty-cell tracking keyed by (rowId, columnId) with setCellValue / clearCellValue / getCellValue
    • collectChanges() resolves pending edits back to { item, column, newValue }
    • submitBulkEdit() — commit-all with a submitting state, calls bulkEdit.onSubmit({ changes })
    • trackBy-aware row identity with row-index fallback
  • Public API additions (src/table/interfaces.tsx), fully JSDoc'd:
    • bulkEdit?: TableProps.BulkEditConfig<T> prop
    • TableProps.BulkEditConfig, TableProps.BulkEditSubmitDetail, TableProps.BulkEditChange
  • Minimal, additive wiring in internal.tsx — instantiates the controller behind the opt-in prop; no-op when bulkEdit is absent.
  • Dev page (pages/table/bulk-editable.page.tsx) demonstrating the intended UX (Edit all → cells become inputs → Save all / Discard all), reusing existing input pieces.
  • Unit tests (src/table/__tests__/use-bulk-editing.test.tsx) — 6 tests covering enable/disable, enter/exit, dirty tracking, change collection, commit-all, and trackBy fallback.
  • Documenter snapshot updated for the new public bulkEdit prop.

Remaining work (follow-ups, not in this PR)

  • Wire the controller into the Table render path so editable cells render editConfig.editingCell editors automatically in bulk mode (today the dev page renders editors itself).
  • Built-in bulk-edit toolbar/affordance (activate / save-all / discard-all controls) + ariaLabels integration.
  • Per-cell validation aggregation using existing editConfig.validation, and surfacing errors before/after commit-all.
  • Keyboard navigation, focus management, and screen-reader announcements for bulk mode.
  • disabledReason handling and per-cell "dirty"/"error" visual states.
  • Partial-failure handling in onSubmit (keep failed cells dirty).
  • Integration tests + a11y tests; component test-utils selectors for bulk mode.
  • Design/API review sign-off before the prop is treated as stable (currently marked WIP in JSDoc).

How has this been tested?

  • eslint (Node v24) on all changed/new files — clean.
  • npm run quick-build (TypeScript) — pass.
  • npm run build (full build incl. definitions generation) — pass.
  • jest -c jest.unit.config.js:
    • src/table/__tests__/use-bulk-editing.test.tsx6/6 pass
    • src/table/__tests__/table-editable.test.tsx (regression) — 5/5 pass
    • src/__tests__/snapshot-tests/documenter.test.ts97/97 pass (snapshot updated for bulkEdit)

Reviewers can open the Table/bulk-editable dev page to try the flow.


By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@codecov

codecov Bot commented Jul 23, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 94.59459% with 4 lines in your changes missing coverage. Please review.
✅ Project coverage is 97.60%. Comparing base (f97729a) to head (9673e3e).
⚠️ Report is 2 commits behind head on main.

Files with missing lines Patch % Lines
src/table/use-bulk-editing.ts 94.44% 4 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #4818      +/-   ##
==========================================
- Coverage   97.61%   97.60%   -0.01%     
==========================================
  Files         952      953       +1     
  Lines       30816    30889      +73     
  Branches    11318    11326       +8     
==========================================
+ Hits        30081    30150      +69     
- Misses        688      732      +44     
+ Partials       47        7      -40     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

The bulk-editable dev page rendered {lastCommit && <StatusIndicator/>} where
lastCommit is a string. When empty, this evaluates to '' (an empty-string text
child) rather than false, which SpaceBetween flattens into a keyless child and
renders inside a mapped list. React then logs a SEVERE 'unique key' console
warning, which the accessibility test harness treats as a failure.

Use a ternary so the falsy branch is null and no keyless child is produced.
@ernst-dev ernst-dev changed the title [WIP] feat: Table bulk inline edit (v0, AWSUI-56121) feat: Table bulk inline edit (v0, AWSUI-56121) [WIP] Jul 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant