Skip to content

Move the staff dashboard onto Refine 4's router and auth provider (staff UI 3/4) - #3996

Open
blarghmatey wants to merge 1 commit into
mainfrom
staff-dashboard-refine4-routes
Open

blarghmatey wants to merge 1 commit into
mainfrom
staff-dashboard-refine4-routes

Conversation

@blarghmatey

@blarghmatey blarghmatey commented Sep 19, 2026 •

Copy link
Copy Markdown
Member

What are the relevant tickets?

Phase 2 of the B2B onboarding RFC, https://github.com/mitodl/hq/discussions/12784.

Stack (3 of 4). Based on 2/4 (the Refine 4 upgrade). 4/4 adds the B2B organizations section on top of this.

Description (What does it do?)

2/4 left the app on legacyRouterProvider and legacyAuthProvider, which Refine 4 keeps for compatibility and Refine 5's props no longer include. This moves the app onto the v4 equivalents, so the next section isn't built on them.

  • Routes are declared with react-router-dom under BrowserRouter basename="/staff-dashboard", and resources carry their paths. The URLs are unchanged.
  • Resource pages sit behind a CanAccess that infers the resource from the route, which is what the legacy router did implicitly.
  • One access change: the legacy router did not check custom routes, so staff (not only superusers) could open discounts/create_batch. It is now behind the same check as the rest of discounts, so it's superuser-only.
  • The auth provider returns v4's result objects. check() treats a failed users/me call as signed out instead of throwing.
  • Logout stays a full-page navigation to MITx Online's /logout/. The provider and the sider share one helper. useLogout would re-run the auth check, and its redirect to /login would race that navigation.
  • The layout renders its Sider, Header and Title itself; <Refine> used to pass them in as props.
  • Pages move off the names Refine 4.58 marks deprecated (tableQuery, query, mutation, useGo).

How can this be tested?

tsc --noEmit is clean and the production build passes. I drove the mock-API scenarios from 2/4 against both builds, with the same outcomes. I also added two checks for this branch: staff on discounts/create_batch get the error page, and clicking Logout lands on /logout/.

Locally, as a staff user and as a superuser:

🤖 Generated with Claude Code

https://claude.ai/code/session_01VcbiSRu3CsE4uyfr6Lqjdr

@blarghmatey
blarghmatey added this pull request to stack #3998 September 19, 2026 01:28
@github-actions

github-actions Bot commented Sep 19, 2026 •

Copy link
Copy Markdown

OpenAPI Changes

Show/hide changes
## Changes for v0.yaml:
No changes detected

## Changes for v1.yaml:
No changes detected

## Changes for v2.yaml:
No changes detected

Unexpected changes? Ensure your branch is up-to-date with main (consider rebasing).

@blarghmatey blarghmatey changed the title Move the staff dashboard onto Refine 4's router and auth provider Move the staff dashboard onto Refine 4's router and auth provider (staff UI 3/4) Sep 19, 2026
@blarghmatey
blarghmatey marked this pull request as ready for review September 19, 2026 01:30
@blarghmatey
blarghmatey requested a balanced review from Copilot September 19, 2026 01:32

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Copilot review overview

🟢 Approval recommended

The routing, authentication, authorization, and deprecated API migrations are internally consistent with no unresolved defects found.

Review effort: Balanced
Findings: None

What changed in this PR

Migrates the staff dashboard from Refine’s legacy routing and authentication APIs to the supported Refine 4 providers while preserving existing URLs and tightening discount access.

Changes:

  • Adds explicit React Router routes and resource paths.
  • Converts authentication, authorization, logout, and layout integration to Refine 4 APIs.
  • Replaces deprecated query, mutation, and navigation aliases.
File Description
frontend/​staff-dashboard/​src/​App.tsx Configures modern routing, resources, authentication, and access control.
frontend/​staff-dashboard/​src/​hooks/​useAuthProvider.ts Implements the Refine 4 auth-provider contract and shared logout behavior.
frontend/​staff-dashboard/​src/​components/​layout/​layout/​index.tsx Directly composes dashboard layout components.
frontend/​staff-dashboard/​src/​components/​layout/​sider/​index.tsx Updates menu navigation, access checks, and logout handling.
frontend/​staff-dashboard/​src/​components/​layout/​header/​index.tsx Uses the modern identity API.
frontend/​staff-dashboard/​src/​components/​layout/​title/​index.tsx Uses React Router links directly.
frontend/​staff-dashboard/​src/​pages/​discounts/​list.tsx Updates table and navigation APIs.
frontend/​staff-dashboard/​src/​pages/​discounts/​show.tsx Uses the current show-query alias.
frontend/​staff-dashboard/​src/​pages/​discounts/​edit.tsx Uses the current form-query alias.
frontend/​staff-dashboard/​src/​pages/​discounts/​bulk_create.tsx Uses the current form-mutation alias.
frontend/​staff-dashboard/​src/​pages/​flexible_pricing/​list.tsx Uses the current table-query alias.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

@blarghmatey
blarghmatey force-pushed the staff-dashboard-refine4-routes branch from e493533 to 3e694b7 Compare September 22, 2026 14:19
@blarghmatey
blarghmatey force-pushed the staff-dashboard-refine4-routes branch from 3e694b7 to 8035807 Compare September 25, 2026 18:16
Base automatically changed from staff-dashboard-refine4 to main September 25, 2026 19:39
The Refine 4 upgrade kept the v3 router and auth provider under their
legacy names (legacyRouterProvider, legacyAuthProvider), which Refine 5's
props no longer include. This moves the app onto the v4 equivalents before
new sections are built on it.

Routes are now declared with react-router-dom, and resources carry their
paths. The URLs are unchanged, including discounts/create_batch. Resource
pages sit behind a CanAccess wrapper that infers the resource from the
route, which is what the legacy router did implicitly, so staff users
still get the error page on /discounts. One access change: the legacy
router did not check custom routes, so staff could open
discounts/create_batch. It is now behind the same check and is
superuser-only like the rest of discounts.

The auth provider returns v4's result objects. Its check() treats a failed
users/me call as signed out instead of throwing. Logout stays a full-page
navigation to MITx Online's logout view, shared by the provider and the
sider, rather than useLogout, which would re-run the auth check and race
that navigation with the redirect to /login.

The layout renders its Sider, Header and Title itself. Before, <Refine>
passed them in as props. The sider keys menu items by the v4 menu key.

Pages also move off the names Refine 4.58 marks deprecated: tableQuery,
query, mutation and useGo replace tableQueryResult, queryResult,
mutationResult and useNavigation().push.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VcbiSRu3CsE4uyfr6Lqjdr
@blarghmatey
blarghmatey force-pushed the staff-dashboard-refine4-routes branch from 8035807 to f0b75a2 Compare September 25, 2026 19:39

This branch has not been deployed

No deployments
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