BDMS-879: Well detail edit panel and project assignment by jeremyzilar · Pull Request #300 · DataIntegrationGroup/OcotilloUI

jeremyzilar · 2026-06-17T16:01:07Z

Relies on this API change to be out first: DataIntegrationGroup/OcotilloAPI#729

What is changing

Add an admin-gated Edit side panel on well detail for assigning and removing project memberships (save-on-change via dropdown)
Extract shared editing panel primitives from the Data Grid example and reuse them on well show
Add useWellDetails for centralized well detail fetching and cache invalidation after project changes
Collapse the nav sidebar when the edit panel opens and restore it on close (useSidebarPanelSync)
Sticky edit panel on desktop: main page scrolls while the panel stays pinned on the right; drag the left edge to resize (width persisted in localStorage)
Full-width edit panel on mobile (below the app header); main content hidden while editing
Combine Preview PDF and Download into a split header button; migrate PDF actions to shadcn
Unify list/show page headers via OcotilloPageHeader (Projects, Contacts, Wells)
Tweak well header status chips (0.75rem font, tighter padding, vertical alignment with the well ID)
Hide Example nav behind SHOW_EXAMPLE_NAV in config/navigation.ts (Data Grid routes remain; set flag to true to restore sidebar link)
Fix useIsMobile for CI/tests when window.matchMedia is unavailable

This branch also includes merged work from the projects list/navigation branch (BDMS-876), the Data Grid example page scaffold, and a merge from staging (Tyler’s attachment upload on well detail).

API dependency: Project add/remove calls POST/DELETE /group/{group_id}/things/{thing_id}. Requires OcotilloAPI #729 deployed to staging before those mutations work in preview/staging.

Test plan

…n live in one place.

…ails hook.

…ch chip.

github-actions · 2026-06-17T16:06:43Z

Preview Deployment

Preview URL: https://preview-bdms-879-project-editing-panel-auejgdbofq-uc.a.run.app

Note: This preview uses the staging API endpoints.

…ews. Shared header layout for Projects, Contacts, and Wells; edit panel scrolls independently with sticky chrome; project dropdown is shorter and alphabetical; status chips sit tighter when they wrap.

…ile the panel stays fixed.

…simple flex column.

github-actions · 2026-06-22T18:47:59Z

Preview Deployment

Preview URL: https://preview-bdms-879-project-editing-panel-auejgdbofq-uc.a.run.app

Note: This preview uses the staging API endpoints.

Show optimistic chip changes on add/remove and wait for the details query to refetch before clearing spinners, so the UI does not go idle while the list is still stale.

github-actions · 2026-06-22T19:30:11Z

Preview Deployment

Preview URL: https://preview-bdms-879-project-editing-panel-auejgdbofq-uc.a.run.app

Note: This preview uses the staging API endpoints.

…appens visibly when refetch finishes

github-actions · 2026-06-22T19:39:34Z

Preview Deployment

Preview URL: https://preview-bdms-879-project-editing-panel-auejgdbofq-uc.a.run.app

Note: This preview uses the staging API endpoints.

Project add/remove updates local draft state only; Save applies the diff, refetches well details, and closes the panel. Unsaved close prompts to discard.

lizalino · 2026-06-22T19:47:53Z

Like the change you implemented, this looks great to me!

Works well, but there seems to be a short delay between when I select a project and when it displays. I think some kind of feedback that the request is in progress might be helpful.

github-actions · 2026-06-22T19:55:30Z

Preview Deployment

Preview URL: https://preview-bdms-879-project-editing-panel-auejgdbofq-uc.a.run.app

Note: This preview uses the staging API endpoints.

Add the alert-dialog UI component and swap the discard prompt in the well edit panel from Dialog to AlertDialog with a compact max width.

github-actions · 2026-06-22T20:05:07Z

Preview Deployment

Preview URL: https://preview-bdms-879-project-editing-panel-auejgdbofq-uc.a.run.app

Note: This preview uses the staging API endpoints.

github-actions · 2026-06-22T20:09:44Z

Preview Deployment

Preview URL: https://preview-bdms-879-project-editing-panel-auejgdbofq-uc.a.run.app

Note: This preview uses the staging API endpoints.

jeremyzilar · 2026-06-22T21:48:37Z

@lizalino There are a few updates:

There is now a Save button in the edit panel. This fixes the lag issue when waiting for a save to happen immediately.
There is also an alert that pops up in an AlertDialog when you try to close the edit panel before changes have been saved.

chasetmartin

Looks great! The behavior was as expected in my testing - great confirmation dialog when the user edits but hasn't saved. I just have one minor code comment that should not block merging.

chasetmartin · 2026-06-23T13:59:55Z

+
+    setIsSaving(true)
+
+    try {


To be consistent with our other new data mutation requests (the asset upload dialog), should we use Refine's useCustomMutation hook to hit the custom data provider endpoint? I believe the main advantage would be the ability to use the isPending state from the hook to manage some of the saving states that are hand-rolled here (they work just fine in my testing, nicely done)

Fix that! Thank you for catching that.

Matches the attachment upload pattern and drives saving state from mutation.isPending instead of hand-rolled isSaving.

github-actions · 2026-06-23T16:05:34Z

Preview Deployment

Preview URL: https://preview-bdms-879-project-editing-panel-auejgdbofq-uc.a.run.app

Note: This preview uses the staging API endpoints.

jeremyzilar added 24 commits June 9, 2026 11:56

Add DataGrid example page, Glide Data Grid, and supporting packages

6dbc8b5

Merge base-app-frame into editing-tools

beedd0c

unhide

ccadeb9

Merge branch 'staging' into editing-tools

f611c8d

Merge branch 'BDMS-876-projects-view' into editing-tools

0902242

Add shared EditPanel shell for side editing drawers.

7c543bc

Add labeled field layout primitive for edit panels.

a106e6e

Add collapsible section primitive for edit panels.

9d1b0b3

Add layout wrapper that slides a 400px edit panel beside page content.

0293376

Export shared editing panel components.

a2dfaf5

Add useWellDetails hook so well detail fetching and cache invalidatio…

8753bab

…n live in one place.

Collapse the sidebar when a side panel opens and restore it on close.

c78cdb0

Export useWellDetails and useSidebarPanelSync from hooks.

458a84d

Add canEditWell capability for admin-gated well editing.

ff7fab5

Add well edit panel with project assignment via dropdown.

75e18b8

Switch Preview PDF button to shadcn Button.

2c6846f

Switch Download PDF button to shadcn Button.

d234c1f

Combine preview and download into a split PDF actions button.

1a8d00a

Export WellPDFActionsButton from Button barrel.

55c0815

Refactor Data Grid create panel to use shared editing primitives.

53e62a2

Wire well detail page to edit panel, PDF actions, and shared well det…

b4e7af8

…ails hook.

Update well show tests for new hooks and PDF actions button.

1c56216

Make well header status chips smaller and center label text inside ea…

5fe1fc8

…ch chip.

Tighten well title line height so chips align vertically with the ID.

4c08f88

jeremyzilar temporarily deployed to staging June 17, 2026 16:01 — with GitHub Actions Inactive

jeremyzilar self-assigned this Jun 17, 2026

jeremyzilar added 3 commits June 17, 2026 16:35

Polish well edit panel and unify page headers across list and show vi…

f26b7aa

…ews. Shared header layout for Projects, Contacts, and Wells; edit panel scrolls independently with sticky chrome; project dropdown is shorter and alphabetical; status chips sit tighter when they wrap.

Add sticky pin mode to EditPanelLayout so the main page can scroll wh…

c7d38a9

…ile the panel stays fixed.

Stop scrolling inside the edit panel; let header and footer sit in a …

fd95a82

…simple flex column.

Added loading feedback for both add and remove

ef553a0

jeremyzilar temporarily deployed to staging June 22, 2026 18:42 — with GitHub Actions Inactive

Keep project edit loading state until well details refetch finishes.

44d8faa

Show optimistic chip changes on add/remove and wait for the details query to refetch before clearing spinners, so the UI does not go idle while the list is still stale.

jeremyzilar temporarily deployed to staging June 22, 2026 19:24 — with GitHub Actions Inactive

flow now: brief spinner → UI updates → spinner stops → nothing else h…

1daf8ef

…appens visibly when refetch finishes

jeremyzilar temporarily deployed to staging June 22, 2026 19:34 — with GitHub Actions Inactive

Switch well project editing to draft-and-save in the edit panel.

1450c6d

Project add/remove updates local draft state only; Save applies the diff, refetches well details, and closes the panel. Unsaved close prompts to discard.

jeremyzilar temporarily deployed to staging June 22, 2026 19:50 — with GitHub Actions Inactive

reduce size of modal

1568252

jeremyzilar temporarily deployed to staging June 22, 2026 20:00 — with GitHub Actions Inactive

Use Shadcn AlertDialog for unsaved project changes confirmation.

2a39e0f

Add the alert-dialog UI component and swap the discard prompt in the well edit panel from Dialog to AlertDialog with a compact max width.

jeremyzilar temporarily deployed to staging June 22, 2026 20:04 — with GitHub Actions Inactive

jeremyzilar requested a review from chasetmartin June 22, 2026 21:50

jeremyzilar mentioned this pull request Jun 22, 2026

BDMS-924: Well detail responsive layout and breakpoints #302

Merged

6 tasks

chasetmartin approved these changes Jun 23, 2026

View reviewed changes

jeremyzilar added 2 commits June 23, 2026 09:49

Merge branch 'staging' into BDMS-879-project-editing-panel

d9ea1d5

Use Refine useCustomMutation for well project save requests.

0a2482c

Matches the attachment upload pattern and drives saving state from mutation.isPending instead of hand-rolled isSaving.

jeremyzilar temporarily deployed to staging June 23, 2026 16:00 — with GitHub Actions Inactive

jeremyzilar merged commit 3a4a20a into staging Jun 23, 2026
4 of 5 checks passed

jeremyzilar temporarily deployed to staging June 23, 2026 16:18 — with GitHub Actions Inactive

jeremyzilar deleted the BDMS-879-project-editing-panel branch June 23, 2026 16:18

Uh oh!

Conversation

jeremyzilar commented Jun 17, 2026 • edited by lizalino Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is changing

Test plan

Uh oh!

github-actions Bot commented Jun 17, 2026

Preview Deployment

Uh oh!

github-actions Bot commented Jun 22, 2026

Preview Deployment

Uh oh!

github-actions Bot commented Jun 22, 2026

Preview Deployment

Uh oh!

github-actions Bot commented Jun 22, 2026

Preview Deployment

Uh oh!

lizalino commented Jun 22, 2026

Uh oh!

github-actions Bot commented Jun 22, 2026

Preview Deployment

Uh oh!

github-actions Bot commented Jun 22, 2026

Preview Deployment

Uh oh!

github-actions Bot commented Jun 22, 2026

Preview Deployment

Uh oh!

jeremyzilar commented Jun 22, 2026

Uh oh!

chasetmartin left a comment

Choose a reason for hiding this comment

Uh oh!

chasetmartin Jun 23, 2026

Choose a reason for hiding this comment

Uh oh!

jeremyzilar Jun 23, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 23, 2026

Preview Deployment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jeremyzilar commented Jun 17, 2026 •

edited by lizalino

Loading