Issue 7552. Sidebar Navigation in Admin Section#8391
Open
RomanGolchuk wants to merge 8 commits into
Open
Conversation
Replace the scrollable tab bar in the admin section with a persistent, collapsible sidebar (AdminSidebar/AdminLayout) that stays mounted across all /admin/* routes, including detail/add pages. - Add adminNav.tsx as the single source of truth for admin nav groups, items, icons, titles, and per-page render functions; AdminPage now resolves the active item from the URL and renders a shared title row. - Add AdminPageHeader: a context/portal slot (AdminHeaderActionSlot) so each page lifts its primary CTA into the common header while keeping its handler and state local. - Route bare /admin and unknown tabs to the default page, and redirect bare /admin/billing to its first sub-page so existing breadcrumbs and command-palette links keep working. - Drop the now-redundant per-page Paper/PageContainer/title wrappers and the old BillingConfiguration tab container and OutreachTab; move the Automated Outreach "Beta" chip into the shared header. - Export ArrowIcon from the visit Sidebar for reuse by AdminSidebar. - Update the EmployersPage e2e selector and BillingConfiguration component test for the new structure. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Implements a new collapsible, grouped Admin sidebar navigation (replacing the horizontal tab strip) and standardizes Admin pages around a shared header row (title + right-aligned primary action rendered via a portal slot).
Changes:
- Replaced Admin top-tab navigation with a collapsible
AdminSidebardriven by a centralizedadminNavGroupsconfig. - Added
AdminPageHeader“action slot” (portal) so each admin page can place its primary CTA in the shared header row. - Updated many admin pages to remove local headers/duplicate CTAs and instead render actions via
AdminHeaderActionSlot; adjusted routing to keep the sidebar mounted across/admin/*.
Reviewed changes
Copilot reviewed 34 out of 34 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/ehr/tests/e2e/page/EmployersPage.ts | Updates E2E selection assertion to match sidebar-selected state. |
| apps/ehr/tests/component/BillingConfiguration.test.tsx | Refactors component test to target PaymentLocationsList directly (tabs removed). |
| apps/ehr/src/rcm/features/scheduled-patient-outreach/ScheduledPatientOutreach.tsx | Moves header actions into shared admin header slot; keeps descriptive text in-page. |
| apps/ehr/src/rcm/features/invoicing/Invoicing.tsx | Removes local Paper/title wrapper to fit new admin page layout. |
| apps/ehr/src/pages/ServiceCategoriesAdminPage.tsx | Moves “New Service” CTA into shared admin header slot. |
| apps/ehr/src/pages/OutreachTab.tsx | Removes legacy outreach sub-tab container (superseded by sidebar). |
| apps/ehr/src/pages/Employees.tsx | Moves “Add user” CTA into shared admin header slot; removes redundant wrapper. |
| apps/ehr/src/pages/configuration/MedicationsConfiguration.tsx | Moves “Add medication” CTA into shared admin header slot; removes redundant wrapper. |
| apps/ehr/src/pages/AdminPage.tsx | Replaces tab-based AdminPage with header + adminNav-driven content rendering and title updates. |
| apps/ehr/src/pages/AdminCustomFoldersPage.tsx | Moves “Add Folder” CTA into shared admin header slot; tweaks spacing. |
| apps/ehr/src/features/visits/telemed/components/admin/VirtualLocationsPage.tsx | Removes redundant Paper wrapper to align with new layout. |
| apps/ehr/src/features/visits/telemed/components/admin/support-dialog/SupportDialogAdminPage.tsx | Removes PageContainer wrapper; aligns with shared admin page layout. |
| apps/ehr/src/features/visits/telemed/components/admin/label-printing-config/AdminLabelPrintingConfigPage.tsx | Removes PageContainer wrapper; aligns with shared admin page layout. |
| apps/ehr/src/features/visits/telemed/components/admin/label-printing-config/AdminLabelPrintingConfigForm.tsx | Removes local form title label (header now handled centrally). |
| apps/ehr/src/features/visits/telemed/components/admin/lab-sets/LabSetsAdminPage.tsx | Moves “Add Lab Set” CTA into shared admin header slot; simplifies filter layout. |
| apps/ehr/src/features/visits/telemed/components/admin/in-house-labs/InHouseLabAdminPage.tsx | Moves “Add In House Lab” CTA into shared admin header slot; simplifies filter layout. |
| apps/ehr/src/features/visits/telemed/components/admin/GlobalTemplatesAdminPage.tsx | Removes redundant Paper wrapper to align with new layout. |
| apps/ehr/src/features/visits/telemed/components/admin/employers/EmployersTab.tsx | Moves “Add new” CTA into shared admin header slot; adjusts filter grid widths. |
| apps/ehr/src/features/visits/telemed/components/admin/EMCodesAdminPage.tsx | Moves “Add E&M Code” CTA into shared admin header slot; removes local header. |
| apps/ehr/src/features/visits/telemed/components/admin/ChargeItemList.tsx | Moves “Add new” CTA into shared admin header slot; removes inline add button in filters. |
| apps/ehr/src/features/visits/shared/components/Sidebar.tsx | Exports ArrowIcon and makes color theme-driven for reuse in admin sidebar. |
| apps/ehr/src/features/admin/ProgressNoteAdminPage.tsx | Removes PageContainer wrapper; aligns with shared admin page layout and centered mode. |
| apps/ehr/src/features/admin/patient-education/PatientEducationAdminPage.tsx | Moves “Add” CTA into shared admin header slot; removes Paper-backed container usage. |
| apps/ehr/src/features/admin/icons/StethoscopeIcon.tsx | Adds custom icon used by admin sidebar. |
| apps/ehr/src/features/admin/icons/ProgressNoteIcon.tsx | Adds custom icon used by admin sidebar. |
| apps/ehr/src/features/admin/icons/InsuranceIcon.tsx | Adds custom icon used by admin sidebar. |
| apps/ehr/src/features/admin/icons/InHouseLabsIcon.tsx | Adds custom icon used by admin sidebar. |
| apps/ehr/src/features/admin/icons/index.ts | Exports new admin icons via a barrel. |
| apps/ehr/src/features/admin/icons/FeeSchedulesIcon.tsx | Adds custom icon used by admin sidebar. |
| apps/ehr/src/features/admin/BillingConfiguration.tsx | Removes tabbed billing container; keeps PaymentLocationsList as a standalone export. |
| apps/ehr/src/features/admin/AdminSidebar.tsx | Introduces collapsible admin sidebar + AdminLayout route wrapper. |
| apps/ehr/src/features/admin/AdminPageHeader.tsx | Adds shared admin header action-slot provider + portal component. |
| apps/ehr/src/features/admin/adminNav.tsx | Introduces grouped admin navigation config + active-item resolution and defaults. |
| apps/ehr/src/App.tsx | Wraps admin routes in AdminLayout and adds /admin/billing redirect to default billing item. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Detail/edit pages at non-prefix-sharing URLs (fee-schedule, charge-master, insurance, payment-location editors, etc.) left no sidebar item highlighted. Add a route-alias table mapping those URL prefixes to their owning item. Extract the admin route URL constants + active-item logic into a light adminRoutes module (consumers import directly instead of via App.tsx) and add a unit test asserting every /admin/* route in App.tsx resolves to a sidebar item, so new detail routes can't silently break selection. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace the removed "Billing configuration tabs" tablist selectors with the sidebar link/`.Mui-selected` pattern in the invoicing and payment locations specs. Intra-page tabs (SMS Write/Preview) are left as-is. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Fix invalid DOM nesting (h3/h4 inside DialogTitle's h2) by adding component="span" to Typography in ServiceCategoryDialog, QuickPickEditor, and ScheduledPatientOutreach; fix div-in-p nesting in RadiologyQuickPickDetailPage by replacing Typography with Box; wrap disabled Refresh button in a span for Tooltip compatibility; make Quick Picks TabList scrollable; center AddMedicationPage content in a Paper card matching the Add Lab Set layout. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace "Default Invoicing Settings" heading selectors with stable role-based alternatives now that the page title comes from the shared admin header; update quick-picks spec to detect the category tablist instead of the removed top-level "Quick Picks" tab. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
RomanGolchuk
requested review from
OmarZubaidi,
VladMstv,
bxr1nG,
colin-welch and
rzinger
…omments in e2e specs Provide AdminHeaderSlotProvider in the component test wrapper so the "Add Folder" CTA portal renders correctly; remove now-redundant inline comments from invoicing and quick-picks e2e specs. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
OmarZubaidi
reviewed
Jul 3, 2026
| ); | ||
| await test.step('Invoicing sidebar item is selected', async () => { | ||
| // Active sidebar item carries MUI's selected class. | ||
| await expect(page.locator('a[href="/admin/billing/invoicing"] .Mui-selected')).toBeVisible(DEFAULT_TIMEOUT); |
Contributor
There was a problem hiding this comment.
can you make a helper for this that we can use for all tests? i feel it'll be a lot easier to manage.
e.g.
const adminTab(path: string, selected = false) => page.locator(`${a[href=path]}${selected? ' .Mui-selected' : ''}`;
OmarZubaidi
approved these changes
Jul 3, 2026
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
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.
#7552