Skip to content

refactor(data-table): CU-86akejaw4 prep for removing the legacy Table - #2113

Open
romanivan-flamingo wants to merge 1 commit into
mainfrom
hotfix/legacy-table-removal-prep
Open

romanivan-flamingo wants to merge 1 commit into
mainfrom
hotfix/legacy-table-removal-prep

Conversation

@romanivan-flamingo

Copy link
Copy Markdown
Contributor

Step 1 of CU-86ak94xr2 (remove the legacy ui/table from the core lib once multi-platform-hub is on DataTable). Subtask: CU-86akejaw4.

Additive only: no consumer sees a change. It clears every in-lib import of the legacy module except the two re-export blocks in ui/index.ts and the two stories that go with the deletion PR.

What changes

  • TableFilters moves to data-table/types.ts and is exported from data-table (so from components/ui). The legacy table/types.ts re-exports it; filter-modal.tsx, layout/list-page-layout.tsx and FilterModal.stories import the new location.
  • QueryReportTable renders DataTableEmpty instead of TableEmptyState, the last runtime import of the legacy module. Same two-vocabulary rule as DataTable.Body: a caller-supplied emptyMessage is the title alone, no default hint under it. Only consumer today: the monitoring query page in openframe-frontend.
  • animateRowReorder ported to DataTable. use-table-motion.ts (lazy import('framer-motion')) moves into data-table/; DataTable.Body takes the opt-in prop and wraps the real rows (not the pad rows) in LayoutGroup; DataTable.Row renders its card as motion.div with layout="position". Off by default, framer-motion is fetched only when set, React.memo on rows is untouched (the new props are undefined everywhere else), whole-card link rows stay plain. The JSDoc spells out the getRowId requirement. The hub's performance dashboard is the only user of the legacy prop and needs this to migrate.
  • Stories: ListPageLayout and PageLayout show a DataTable as their page body (ListPageLayout maps TableFilters to ColumnFiltersState so the mobile filter modal and the header funnels edit one state); new DataTable/WithRowReorderAnimation story.

Verification

  • npm run lint, npm run type-check, Prettier, type-aware ESLint over the touched source files, npm run test:run (100 files, 5175 tests), npm run build: green.
  • Storybook by hand: ListPageLayout Basic / EmptyState / WithMobileFilter (funnel on Type -> Laptop -> Apply filters to one row) / ScriptsPageExample / LogsPageExample, PageLayout TitleOnly, QueryReportTable Empty, DataTable WithRowReorderAnimation (rows render through MotionDOMComponent inside LayoutGroup).
  • src/stories is excluded from tsconfig.json; an ad-hoc tsc over it shows no errors in the touched stories (the 8 pre-existing filterFn errors in DataTable.stories are untouched).

Follow-ups (separate subtasks)

  • MPH migration: CU-86akejay0 (people-hub), CU-86akejb0t (admin + api-keys).
  • Delete ui/table, its two re-export blocks, Table.stories, TableColumnFilterDropdown.stories and the legacy test: CU-86akejb15.

🤖 Generated with Claude Code

Step 1 of CU-86ak94xr2 (delete `ui/table` once multi-platform-hub is on
DataTable). Additive only: no consumer sees a change.

- `TableFilters` moves to `data-table/types.ts` and is exported from
  `data-table` (so from `components/ui`); the legacy `table/types.ts`
  re-exports it, `filter-modal`, `list-page-layout` and the FilterModal
  story import the new location.
- `QueryReportTable` renders `DataTableEmpty` instead of `TableEmptyState`,
  the last runtime import of the legacy module. Same two-vocabulary rule as
  `DataTable.Body`: a caller-supplied `emptyMessage` is the title alone.
- The opt-in `animateRowReorder` FLIP moves from the legacy table into
  DataTable: `use-table-motion` lives in `data-table/`, `DataTable.Body`
  takes the prop and wraps the real rows (not the pad rows) in
  `LayoutGroup`, `DataTable.Row` renders its card as the lazily-loaded
  `motion.div` with `layout="position"`. Off by default, framer-motion is
  fetched only when set, whole-card link rows stay plain. The hub's
  performance dashboard needs it to leave the legacy table.
- `ListPageLayout` and `PageLayout` stories show a `DataTable` as their
  page body; a `WithRowReorderAnimation` story exercises the new prop.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
@romanivan-flamingo romanivan-flamingo self-assigned this Sep 8, 2026
@romanivan-flamingo
romanivan-flamingo enabled auto-merge (squash) September 8, 2026 13:13
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.

2 participants