Skip to content

UX Rescue Phase 1A.1: replace observation popup with in-page workspace - #150

Merged
henter36 merged 3 commits into
mainfrom
ux-rescue-phase1a1-observation-in-page-workspace
Jul 28, 2026
Merged

UX Rescue Phase 1A.1: replace observation popup with in-page workspace#150
henter36 merged 3 commits into
mainfrom
ux-rescue-phase1a1-observation-in-page-workspace

Conversation

@henter36

@henter36 henter36 commented Jul 28, 2026

Copy link
Copy Markdown
Owner

Summary

Continues #143
Corrective follow-up to #149
Continues #11

This PR replaces the remaining Observation detail popup path with a true in-page master-detail workspace. The root cause was the Facility Workspace still opening note details through CommandContextPanel, which renders a native dialog with fixed context-panel styling. Observation details now open in /notes/workspace with facilityId, noteId, and source=facility:* preserved in the URL.

What changed

  • Redirect Facility Workspace note priority items to /notes/workspace?facilityId=...&noteId=...&source=facility:....
  • Preserve legacy panel=note&entityId=... links by redirecting them to the Observation Workspace.
  • Extract local Observation Workspace layout components for the header and master-detail panes.
  • Add explicit regression coverage that observation detail is not a modal, drawer overlay, or popup.
  • Keep non-note Facility context panels intact for advanced previews.
  • Document the Phase 1A.1 root cause, layout, responsive behavior, accessibility, test matrix, compliance ledger, and completion report.

Validation

  • npm ci --ignore-scripts
  • npm run typecheck
  • npm run lint
  • npm run test -- ObservationWorkspacePage.test.tsx FacilityWorkspacePage.test.tsx
  • npm run test
  • npm run check:ux-routes
  • VITE_AUTH_MODE=entra ... npm run build
  • npm audit --audit-level=high
  • dotnet restore src/backend/Baseera.slnx
  • dotnet build src/backend/Baseera.slnx -c Release --no-restore
  • dotnet test src/backend/tests/Baseera.UnitTests/Baseera.UnitTests.csproj -c Release --no-build --no-restore --logger "console;verbosity=minimal"
  • dotnet test src/backend/tests/Baseera.IntegrationTests/Baseera.IntegrationTests.csproj -c Release --no-build --no-restore --logger "console;verbosity=minimal" --blame-hang --blame-hang-timeout 10m
  • git diff --check
  • bash scripts/check-nuget-vulnerabilities.sh src/backend/Baseera.slnx
  • gitleaks detect --source . --config .gitleaks.toml --no-banner

Notes

This PR does not start Phase 1B. It does not remove the Observation Workspace feature flag, delete legacy fallback routes, or merge automatically.

Summary by Sourcery

Route facility workspace note interactions to the in-page Observation Workspace instead of a context dialog, and document and test the updated master-detail layout and behavior.

Bug Fixes:

  • Prevent facility workspace note details from opening in a dialog-based context panel, ensuring they render within the Observation Workspace master-detail page instead.

Enhancements:

  • Introduce reusable Observation Workspace header and master-detail layout components with improved focus management and accessibility.
  • Refine responsive layout and scrolling behavior for observation list and detail panes across desktop, tablet, and mobile viewports.
  • Ensure legacy facility note panel URLs redirect to the Observation Workspace while keeping non-note context panels functional.

Documentation:

  • Add Phase 1A.1 documentation covering observation layout, accessibility, responsive behavior, root cause analysis, compliance ledger, test matrix, and completion report, and update the README and roadmap to describe this corrective phase.

Tests:

  • Add regression tests to verify observation detail is rendered as in-page content (not as a modal, dialog, or overlay) and that mobile back behavior preserves filter context.
  • Update facility workspace tests to cover note redirection to the Observation Workspace, legacy panel link handling, and continued support for non-note context panels.

Summary by CodeRabbit

  • New Features

    • Note details now open in the Observation Workspace’s in-page master-detail view instead of popups.
    • Added URL-based deep links, browser navigation, filter preservation, and legacy note-link redirection.
    • Improved responsive layouts across desktop, tablet, and mobile.
    • Added focus management and accessibility support for note selection and detail navigation.
  • Bug Fixes

    • Facility note selections now route correctly to the Observation Workspace.
    • Preserved existing dialog behavior for non-note panels.
  • Documentation

    • Added Phase 1A.1 accessibility, layout, responsive behavior, testing, compliance, and completion documentation.

@gemini-code-assist

Copy link
Copy Markdown

Caution

The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased.

@qodo-code-review

Copy link
Copy Markdown

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

@henter36

Copy link
Copy Markdown
Owner Author

@coderabbitai review

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry @henter36, you have reached your weekly rate limit of 500000 diff characters.

Please try again later or upgrade to continue using Sourcery

@coderabbitai

coderabbitai Bot commented Jul 28, 2026

Copy link
Copy Markdown
✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@coderabbitai

coderabbitai Bot commented Jul 28, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@henter36, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 48 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 0725a317-9cc8-427f-ac40-558b4fd7801b

📥 Commits

Reviewing files that changed from the base of the PR and between ac27e8a and 1fd0d9a.

📒 Files selected for processing (4)
  • docs/ux-rescue/phase1a1-observation-completion-report.md
  • src/frontend/src/index.css
  • src/frontend/src/pages/notes/ObservationWorkspacePage.tsx
  • src/frontend/src/pages/notes/workspace/ObservationWorkspaceHeader.tsx
📝 Walkthrough

Walkthrough

Phase 1A.1 redirects facility note details into /notes/workspace, renders them in an in-page master-detail layout, adds responsive sizing and focus management, updates regression tests, and documents the corrective behavior and validation status.

Changes

Observation Workspace rescue

Layer / File(s) Summary
Facility note routing
src/frontend/src/pages/workspaces/FacilityWorkspacePage.tsx, src/frontend/src/pages/workspaces/FacilityWorkspacePage.test.tsx
Note panels and legacy note links navigate to /notes/workspace with facility and note query parameters; non-note panels retain their existing close and focus behavior.
Master-detail workspace layout
src/frontend/src/pages/notes/ObservationWorkspacePage.tsx, src/frontend/src/pages/notes/workspace/*, src/frontend/src/index.css
The page uses extracted header, list-pane, detail-pane, and master-detail components with responsive sizing, scrolling, card focus restoration, and detail-title focus management.
Accessibility and behavior validation
src/frontend/src/pages/notes/ObservationWorkspacePage.test.tsx, docs/ux-rescue/phase1a1-observation-{accessibility,layout,responsive-behavior,test-matrix,compliance-ledger}.md
Tests and specifications cover in-page rendering, URL/filter preservation, responsive states, focus behavior, and absence of modal, backdrop, and body-scroll-lock behavior.
Phase documentation
README.md, docs/ux-rescue/*
Architecture, root cause, roadmap, metrics, completion evidence, and Phase 1A.1 status documentation are updated.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Facility Workspace
  participant Browser URL
  participant Observation Workspace
  participant Master Detail Layout
  Facility Workspace->>Browser URL: Navigate with facilityId, noteId, and source
  Browser URL->>Observation Workspace: Load query-driven selection
  Observation Workspace->>Master Detail Layout: Render list and detail panes
Loading

Possibly related PRs

  • henter36/Baseera#149: Introduced the Phase 1A workspace foundation that this PR corrects for facility note routing.
  • henter36/Baseera#91: Introduced the Observation Workspace route and rendering flow refined here.
  • henter36/Baseera#123: Updated the Facility Workspace context-panel behavior that this PR changes for note panels.
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main change: replacing the observation popup flow with an in-page workspace for Phase 1A.1.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch ux-rescue-phase1a1-observation-in-page-workspace

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@sourcery-ai

sourcery-ai Bot commented Jul 28, 2026

Copy link
Copy Markdown

Reviewer's Guide

Re-routes facility workspace note interactions to the Observation Workspace in-page master-detail layout, adds dedicated layout/header components with responsive and accessibility refinements, and documents the Phase 1A.1 corrective behavior and test coverage.

Sequence diagram for Facility note redirect to Observation Workspace in-page layout

sequenceDiagram
  actor User
  participant FacilityWorkspacePage
  participant Router
  participant ObservationWorkspacePage
  participant ObservationMasterDetailLayout

  User->>FacilityWorkspacePage: click priority note
  FacilityWorkspacePage->>FacilityWorkspacePage: openPanel(next)
  FacilityWorkspacePage->>Router: navigate(observationWorkspaceUrl(facilityId, noteId))
  Router-->>ObservationWorkspacePage: render /notes/workspace
  ObservationWorkspacePage->>ObservationWorkspacePage: selectNote(noteId)
  ObservationWorkspacePage->>ObservationMasterDetailLayout: render(listCollapsed, hasSelection, list, detail)
  ObservationMasterDetailLayout-->>User: list and detail shown in-page (no dialog)

  User->>ObservationWorkspacePage: click "رجوع إلى القائمة"
  ObservationWorkspacePage->>ObservationWorkspacePage: closeSelection()
  ObservationWorkspacePage->>Router: update URL (remove noteId, keep facilityId/source)
  Router-->>User: list-only view preserved with filters
Loading

File-Level Changes

Change Details Files
Route facility workspace note interactions to the Observation Workspace and preserve legacy note panel URLs via redirects.
  • Change facility workspace note priority click handler to navigate to /notes/workspace with facilityId, noteId, and source=facility:*.
  • Normalize panelFromSearch output so note panels are suppressed locally and instead redirected.
  • Update legacyRouteForPanel to map note panels to Observation Workspace URLs including facility context when available.
  • Add a /notes/workspace route stub in FacilityWorkspacePage tests to assert navigation behavior.
  • Add tests ensuring legacy panel=note&entityId=... links redirect to the Observation Workspace and that non-note panels (e.g., corrective actions) still use CommandContextPanel and close correctly.
src/frontend/src/pages/workspaces/FacilityWorkspacePage.tsx
src/frontend/src/pages/workspaces/FacilityWorkspacePage.test.tsx
Refactor the Observation Workspace into an explicit in-page master-detail layout with improved focus management and responsive behavior.
  • Extract ObservationMasterDetailLayout, ObservationListPane, and ObservationDetailPane components to encapsulate the master-detail grid, list, and detail areas with test IDs.
  • Extract ObservationWorkspaceHeader to own file and wire it into ObservationWorkspacePage for header, back-to-facility link, list toggle, and create-note actions.
  • Update ObservationWorkspacePage to use the new layout components, track the currently selected card via a ref, and restore focus to the card when closing selection.
  • Enhance ObservationCard to accept a refCallback, set aria-current for the selected note, and integrate with the new focus behavior.
  • Update WorkspaceDetail to focus the detail title on note change and add a test-specific marker indicating the detail remains in document flow.
  • Add new tests verifying observation detail is rendered as in-page master-detail content (no dialog, aria-modal, backdrop, or body scroll lock) and that mobile back preserves filter context when returning to the list.
src/frontend/src/pages/notes/ObservationWorkspacePage.tsx
src/frontend/src/pages/notes/ObservationWorkspacePage.test.tsx
src/frontend/src/pages/notes/workspace/ObservationMasterDetailLayout.tsx
src/frontend/src/pages/notes/workspace/ObservationWorkspaceHeader.tsx
Adjust workspace layout CSS to support the new observation master-detail list/detail panes across desktop, tablet, and mobile.
  • Define workspace-list-pane and workspace-detail-pane containers with bounded heights, independent scrolling, and smooth scroll behavior.
  • Make the observation list content flex to fill the list pane instead of using a fixed max-height.
  • Add tablet-specific media query rules to adjust grid column ratios, minimum heights, collapse behavior, and observation-card density/metadata visibility.
  • Adjust mobile media query rules so list and detail panes lose fixed heights and overflow constraints, relying on in-page flow for Focus Mode scenarios.
src/frontend/src/index.css
Document Phase 1A.1 scope, layout, responsive behavior, accessibility, test matrix, and compliance ledger for the Observation Workspace.
  • Update the Phase 1A observation architecture doc with a Phase 1A.1 corrective update description and list of extracted components.
  • Extend the task-metrics baseline doc with Phase 1A.1 metrics comparing pre/post behavior for facility note popup removal.
  • Update the README and UX rescue roadmap to describe Phase 1A.1, its scope relative to Phase 1A and Phase 1B, and link to the new completion report.
  • Add Phase 1A.1 completion, layout, accessibility, popup root cause, responsive behavior, compliance ledger, and test matrix docs capturing behavior and evidence.
  • Clarify that Phase 1A.1 does not change backend contracts, remove feature flags, or delete legacy fallback routes.
docs/ux-rescue/phase1a-observation-architecture.md
docs/ux-rescue/task-metrics-baseline.md
docs/ux-rescue/rescue-roadmap.md
docs/ux-rescue/phase1a1-observation-completion-report.md
docs/ux-rescue/phase1a1-observation-layout.md
docs/ux-rescue/phase1a1-observation-accessibility.md
docs/ux-rescue/phase1a1-observation-popup-root-cause.md
docs/ux-rescue/phase1a1-observation-responsive-behavior.md
docs/ux-rescue/phase1a1-observation-compliance-ledger.md
docs/ux-rescue/phase1a1-observation-test-matrix.md
README.md

Possibly linked issues


Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/frontend/src/pages/notes/ObservationWorkspacePage.tsx`:
- Around line 239-242: Update closeSelection to capture the current
selectedCardRef.current before calling setSelectedId(''), then use that saved
card reference inside the deferred focus callback so the selected element
remains focusable after selection is cleared.

In `@src/frontend/src/pages/notes/workspace/ObservationWorkspaceHeader.tsx`:
- Around line 29-32: Update the canCreate control in ObservationWorkspaceHeader
so the Link to "/notes/new" is styled and behaves as the primary control
directly, removing the nested button while preserving the “ملاحظة جديدة” label
and navigation.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: e9952d81-2f37-426a-bbf3-265df60eea5f

📥 Commits

Reviewing files that changed from the base of the PR and between 5971fab and ac27e8a.

📒 Files selected for processing (18)
  • README.md
  • docs/ux-rescue/phase1a-observation-architecture.md
  • docs/ux-rescue/phase1a1-observation-accessibility.md
  • docs/ux-rescue/phase1a1-observation-completion-report.md
  • docs/ux-rescue/phase1a1-observation-compliance-ledger.md
  • docs/ux-rescue/phase1a1-observation-layout.md
  • docs/ux-rescue/phase1a1-observation-popup-root-cause.md
  • docs/ux-rescue/phase1a1-observation-responsive-behavior.md
  • docs/ux-rescue/phase1a1-observation-test-matrix.md
  • docs/ux-rescue/rescue-roadmap.md
  • docs/ux-rescue/task-metrics-baseline.md
  • src/frontend/src/index.css
  • src/frontend/src/pages/notes/ObservationWorkspacePage.test.tsx
  • src/frontend/src/pages/notes/ObservationWorkspacePage.tsx
  • src/frontend/src/pages/notes/workspace/ObservationMasterDetailLayout.tsx
  • src/frontend/src/pages/notes/workspace/ObservationWorkspaceHeader.tsx
  • src/frontend/src/pages/workspaces/FacilityWorkspacePage.test.tsx
  • src/frontend/src/pages/workspaces/FacilityWorkspacePage.tsx

Comment thread src/frontend/src/pages/notes/ObservationWorkspacePage.tsx Outdated
@henter36

Copy link
Copy Markdown
Owner Author

CodeRabbit follow-up fixed in 1fd0d9a.\n\n- Captured the selected card before clearing note selection, then restore focus through the saved element reference.\n- Replaced the nested button inside the create-note Link with a styled Link control.

@sonarqubecloud

Copy link
Copy Markdown

@henter36
henter36 merged commit 472ee2c into main Jul 28, 2026
11 checks passed
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