Port latest master to frontend-base (incl. Redux-to-React-Query migration)

[arbrandes]

Description

This does what it says on the tin: the main intent is to port the latest master into frontend-base land. However, since these are ports, fixes and improvements related to the changes were added beyond what's in master, as seen below. These show as separate commits so we can decide whether to backport them later.

Headliners

• Ports 7 pending master commits to the frontend-base branch: dependency cleanups, translation support, unenrollment improvements, credit purchase URL logic, documentation fixes, and new unenrollment survey toggle variable
• Ports the Redux to React Query migration from master, adapting it to frontend-base conventions (@src/ imports, @openedx/frontend-base APIs, slots/widgets structure)
• Fixes a circular dependency in site.config.test.tsx that broke the entire test suite (corresponding PR to docs)
• Runs tsc-alias only after copying assets to /dist/, otherwise SVG imports are not converted to relative paths
• Other bug fixes:
  • Add staleTime (5 min) to prevent excessive refetching across 15+ consuming components
  • Remove redundant manual refetch on unenroll (React Query's invalidateQueries handles it)
  • Compute Date.now() per call instead of at module load (was producing stale timestamps)
  • Close modals only after mutation succeeds, not optimistically on submit
• Improvements to the React Query implementation:
  • Performance: transform course data once in the queryFn instead of per card render
  • Simplification: replace BackedDataProvider with direct React Query cache lookups
  • Disambiguation/clarity: use explicit query key for initializeBase invalidation
  • Better UX: add smart retry that skips 4xx errors but retries server/network errors
  • Right tool for the job: separate mutation keys from query keys
  • Simplification: replace useReducer with useState in context providers
  • Better testing: add normal user happy path test for useInitializeLearnerHome

LLM usage notice

Built with assistance from Claude models (mostly Opus 4.6).

Work Log

Porting master commits

Six pre-existing master commits were cherry-picked onto frontend-base in a prior session, forming the base of the frontend-base-master-ports branch:

• d62b5d3 feat: added a generic creditPurchase URL logic (feat: added a generic creditPurchase Url logic #675)
• 51f93a0 mubbsharanwar/unenrollment process improvement (mubbsharanwar/unenrollment process improvement #704)
• 96c1c44 feat: added the ability for instances to use local translations from extra repositories (feat: added the ability for instances to use local translations from extra repositories #752)
• ae52f75 fix(deps): remove filesize dependency (fix(deps): remove filesize dependency #767)
• b03407d fix: update react-share to v5 (fix: update react-share to v5 #795)
• 1d97ed6 fix(docs): use correct image for custom course banner (fix(docs): use correct image for custom course banner #796)

Circular dependency fix (site.config.test.tsx)

Running npm run test revealed that every test suite failed with EnvironmentTypes being undefined. Root cause: site.config.test.tsx imported { EnvironmentTypes } from @openedx/frontend-base, creating a circular dependency chain (initialize.js → site.config → @openedx/frontend-base → still loading). Fixed by using import type { SiteConfig } (erased at compile time) and the string literal 'test' instead of EnvironmentTypes.TEST.

Redux to React Query migration port

The large migration commit from master was ported and adapted to frontend-base conventions:

• Replaced @edx/frontend-platform references with @openedx/frontend-base equivalents
• Fixed bare 'utils' imports to use @src/utils
• Used useAuthenticatedUser() hook instead of the removed AppContext pattern
• Moved test files to match widget directory structure (containers/ → widgets/)
• Removed orphaned test files for deleted source modules

Fixing 13 failing test suites

After porting the migration, 13 test suites (43 tests) failed. Issues were categorized and fixed:

1. Orphaned tests (2 suites): Deleted AppWrapper/index.test.tsx (no source file); moved ConfirmEmailBanner/hooks.test.jsx to correct widgets/ path
2. Dead plugin-framework mock (2 suites): Removed jest.mock('@openedx/frontend-plugin-framework') from CoursesPanel and DashboardLayout tests
3. @src/ asset resolution (2 suites): Post-processed jest.config.js to prepend @src/-prefixed .svg/.png patterns before the @src path resolver (webpack-merge ordering issue)
4. Missing <MemoryRouter> (2 suites): Added MemoryRouter wrapper for Slot component's useLocation() dependency in 4 test files
5. AppContext not in frontend-base (1 suite): Changed CreditBanner/views/hooks.js from AppContext + useContext() to useAuthenticatedUser() hook
6. Duplicate jest.mock (1 suite): Merged two jest.mock('@openedx/frontend-base') calls in SelectSessionModal/hooks.test.jsx
7. Bare 'utils' import (1 suite): Fixed 4 files to use '@src/utils'
8. Read-only const reassignment (1 suite): Rewrote api.test.tsx to provide mock values in jest.mock() factories
9. Wrong provider in context test (1 suite): Removed useMasquerade/useBackedData checks from context/index.test.tsx (those providers aren't in ContextProviders)

Also fixed DashboardLayout.test.jsx Slot assertion — Slot renders children directly without a wrapper div.

Bug fixes from code review

A holistic code review of the migration identified 14 issues, including by not limited to:

• staleTime (4ec911e): Added 5-minute staleTime to the main query to prevent redundant refetches when 15+ components mount with the same query
• Redundant refetch (498f182): Removed manual queryClient.invalidateQueries() + refetch() on unenroll — React Query's mutation onSuccess with invalidateQueries already handles this
• Stale Date.now() (1126c07): Date.now() was computed once at module load and reused for all API calls, producing stale timestamps. Changed to compute per call
• Optimistic modal close (2126010): Modals were closed on form submit before knowing if the mutation succeeded. Moved close logic to the mutation's onSuccess callback

Commit-by-commit test verification

Each commit was tested individually by stepping through the history with git checkout. One test failure was found and fixed: the masquerade fallback test used gcTime: 0 in its test QueryClient, which caused pre-seeded cache data to be garbage collected before queryClient.getQueryData() could read it. Fixed by removing gcTime: 0 from that specific test's QueryClient.

[codecov]

Codecov Report

❌ Patch coverage is 95.36680% with 24 lines in your changes missing coverage. Please review.
⚠️ Please upload report for BASE (frontend-base@0632525). Learn more about missing BASE report.

Files with missing lines	Patch %	Lines
...gets/LearnerDashboardHeader/MasqueradeBar/hooks.js	0.00%	9 Missing and 5 partials ⚠️
...components/CourseCardBanners/CertificateBanner.jsx	82.35%	3 Missing ⚠️
...Card/components/CourseCardBanners/CourseBanner.jsx	71.42%	2 Missing ⚠️
...ners/CourseFilterControls/CourseFilterControls.jsx	88.23%	2 Missing ⚠️
...components/CourseCardBanners/CreditBanner/hooks.js	90.00%	1 Missing ⚠️
...ners/CourseCard/components/CourseCardMenu/hooks.js	94.11%	1 Missing ⚠️
src/containers/CoursesPanel/index.jsx	91.66%	1 Missing ⚠️

Additional details and impacted files

@@               Coverage Diff                @@
##             frontend-base     #801   +/-   ##
================================================
  Coverage                 ?   90.38%           
================================================
  Files                    ?      152           
  Lines                    ?     1290           
  Branches                 ?      267           
================================================
  Hits                     ?     1166           
  Misses                   ?      119           
  Partials                 ?        5           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.