refactor(wells, contacts): move list pages onto shadcn DataTable - #347
Draft
jirhiker wants to merge 2 commits into
Draft
refactor(wells, contacts): move list pages onto shadcn DataTable#347jirhiker wants to merge 2 commits into
jirhiker wants to merge 2 commits into
Conversation
Preview DeploymentPreview URL: https://preview-refactor-wells-contacts-shadcn-table-auejgdbofq-uc.a.run.app Note: This preview uses the staging API endpoints. |
jirhiker
changed the title
jirhiker
changed the title
jirhiker
marked this pull request as draft
August 17, 2026 20:54
Preview DeploymentPreview URL: https://preview-refactor-wells-contacts-shadcn-table-auejgdbofq-uc.a.run.app Note: This preview uses the staging API endpoints. |
Replaces the MUI DataGrid on the Wells and Contacts lists with a shared shadcn table built on TanStack Table, following the denser table style introduced by the Projects work in #344. - Adds src/components/DataTable: table renderer, sortable/filterable column headers, column visibility menu, filter chips, pager, and a useRefineDataTable hook bridging Refine's useTable server state (paging, sorting, filtering) to TanStack's manual mode. - Column filters cover text, single-select, and numeric/date comparison operators; PostHog events keep the names the DataGrid pages emitted (<prefix>_sorted, _filter_applied, _column_visibility_changed). - Wells: same columns, tooltips, project filter chip, server search, batch field sheets and CSV export; now defaults to newest first (created_at desc, the closest field the API exposes to "last updated"). - Contacts: rows now select instead of navigating, so the email, phone and address cards open below the table; the name cell links to the contact page. - Adds ListPageShell for the page chrome the DataTable pages share, and moves the row navigation helpers next to the DataTable (re-exported from ListPage). Density toggle is not carried over; the shadcn table is already compact. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The wells and contacts assertions still looked for the DataGrid's explicit role attributes; the shadcn table renders th/tr, same as the projects list already asserted. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
jirhiker
force-pushed
the
refactor/wells-contacts-shadcn-table
branch
from
August 17, 2026 21:04
26070fc to
7877e0b
Compare
Preview DeploymentPreview URL: https://preview-refactor-wells-contacts-shadcn-table-auejgdbofq-uc.a.run.app Note: This preview uses the staging API endpoints. |
jirhiker
added a commit
that referenced
this pull request
Aug 30, 2026
A pass over the access console driven by using it rather than building it. The grants table moves onto the shadcn table primitive with TanStack for the row model and pagination. `ui/table.tsx` is copied verbatim from refactor/wells-contacts-shadcn-table and `@tanstack/react-table` is pinned to the version that branch already chose, so the two agree when PR #347 lands and this page can move onto the shared DataTable then. Cells are shadcn Badge, Tooltip and Button; the rest of the page is still MUI. The table now reads as an operator would ask about it: * Rows are one line tall. A long reason used to set the height of its row; address and reason truncate, and the tooltip carries the full text. * A screen grant and a data grant no longer look alike — each says which it is, and a Covers filter narrows to one kind. That filter is applied to the fetched rows rather than the query, because the API filters on an exact ui_surface and not on whether a grant names one at all. * A group scope reads as its name, falling back to the id when the name has not loaded, and the grant dialog picks a group by name instead of asking for an id nobody knows. * Scoped grants are tinted, since a grant over one group or one thing is a different animal from a portal-wide one. * The table pages, and the console runs the full window width. On the consent tab, a thing is chosen by PointID through a server-side search. An id still works — pasting one from a ticket has to keep working — but typed text that is not digits and was not chosen from the list no longer submits as though it were an id. The destinations tab loses its published-data expansion. Two fixes found on the way: the revoke confirmation interpolated `data_type` directly and read "on null" for a screen grant, and the tooltip triggers were mouse-only, so their content was unreachable by keyboard. Radix positions its popper with a ResizeObserver that jsdom does not implement, so the test setup stubs one, guarded like the createObjectURL stub beside it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Stacked on #344 — targets
BDMS-1133, so the diff here is only the Wells/Contacts refactor.Replaces the MUI DataGrid on the Wells and Contacts lists with a shared shadcn table built on TanStack Table, following the denser table style #344 introduced for Projects.
What's here
New
src/components/DataTable(TanStack Table v8 over shadcnui/table)DataTable— rows, loading skeletons, empty state, row href with modifier-click new-window, selected-row stateDataTableColumnHeader— tri-state sort plus a filter popover: text, single-select, and numeric/date comparisons (=≥≤><)DataTableViewOptions— column visibility menu (replaces the DataGrid "Columns" button)DataTableToolbar— search input, dismissible filter chips, record countDataTablePagination— page size select and pageruseRefineDataTable— bridges Refine'suseTableserver state (paging, sorting, filtering) to TanStack's manual mode, hides permanent filters from the chips, and keeps the PostHog event names the DataGrid pages emitted (<prefix>_sorted,_filter_applied,_column_visibility_changed)Pages
Supporting
ui/popover.tsxadded from the shadcn registryListPageShellholds the breadcrumb/title/header-button chrome the DataTable pages shareListPage@tanstack/react-table@^8.21.3Notes for review
created_at desc. The ask was "last updated first", butThingResponseexposes no update timestamp —created_atis the closest field. Easy to switch if the API acceptssort=updated_at.useListPageDataGridAnalyticsis now unused. Left in place rather than editingsrc/hooks/index.ts, which has unrelated in-flight work; worth deleting in a follow-up.Verification
Against the dev API: wells list loads newest-first (
GET /thing/water-well?...&sort=created_at&order=desc), a name filter narrows to 2 records and shows a dismissible chip, contacts paginate server-side through 2,273 records, header clicks issue sorted requests, and the contact detail cards populate on row select. No console errors.tscandbiome checkare clean. 14 new tests cover the DataTable renderer and the Refine/TanStack bridge; the pre-existing contract-test failures need the prism mock server on :4010.🤖 Generated with Claude Code