feat: MIT OL header and footer overrides for frontend-base MFEs#73
feat: MIT OL header and footer overrides for frontend-base MFEs#73Anas12091101 wants to merge 6 commits into
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a custom desktop footer layout and an always-desktop header layout for the MIT OL deployment to match the legacy learning MFE design. Key changes include replacing the default footer layout with a horizontal row of links, adding a custom footer logo, keeping the desktop-style header layout at all viewport widths, and implementing a custom authenticated user menu. Feedback on these changes suggests adding an alt attribute to the footer logo image for accessibility, using a TypeScript type guard instead of a type assertion in the footer links, and correcting the Container prop in the header layout from size="xl" to fluid="xl" to prevent React console warnings.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| function FooterLogo() { | ||
| const { footerLogoUrl, footerLogoDestination } = useMITOLFooterConfig(); | ||
| const { headerLogoImageUrl } = useSiteConfig(); | ||
| const src = footerLogoUrl || headerLogoImageUrl; | ||
| if (!src) return null; | ||
| const img = <Image src={src} style={{ maxHeight: '2rem', height: '33px' }} />; | ||
| if (footerLogoDestination) { | ||
| return <Hyperlink destination={footerLogoDestination} className="p-0">{img}</Hyperlink>; | ||
| } | ||
| return img; | ||
| } |
There was a problem hiding this comment.
The Image component for the footer logo is missing an alt attribute. Providing descriptive alternative text is important for accessibility (a11y) so screen readers can describe the image. You can use the siteName from useSiteConfig() to dynamically generate a suitable alt text.
function FooterLogo() {
const { footerLogoUrl, footerLogoDestination } = useMITOLFooterConfig();
const { headerLogoImageUrl, siteName } = useSiteConfig();
const src = footerLogoUrl || headerLogoImageUrl;
if (!src) return null;
const img = (
<Image
src={src}
alt={siteName ? siteName + " logo" : "Logo"}
style={{ maxHeight: '2rem', height: '33px' }}
/>
);
if (footerLogoDestination) {
return <Hyperlink destination={footerLogoDestination} className="p-0">{img}</Hyperlink>;
}
return img;
}
There was a problem hiding this comment.
Pull request overview
This PR customizes the shared @openedx/frontend-base header and footer for MIT OL MFEs so they match the legacy learning MFE. It was split out of PR #58 so the header/footer styling can be reviewed independently. The changes live in the shared/ slot-config module that is bundled into each deployment's MFE build, plus the mitxonline theme SCSS.
Changes:
- Footer: Replaces the shell's desktop footer layout with a custom one (logo left, centered link row + copyright/trademark, "Powered by Open edX" top-right), adds a config-driven
FooterLogo, and reads links/logo fromcommonAppConfig.mitolFooter. Note this is shared across all deployments. - Header: Adds an
AlwaysDesktopLayout/NoMobileLayoutpair to keep the desktop layout at all widths, introduces a customMITxOnlineAuthenticatedMenuuser-menu toggle, and removes the default Help link (mitxonline only). - SCSS: Adds
header.border-bottomhandling (zeroing--pgn-size-border-width), spacing tweaks, and mobile adjustments.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
shared/src/footer/index.tsx |
New custom desktop footer layout, footer logo, single link row, and reworked slot operations |
shared/src/header/index.tsx |
Always-desktop layout, custom authenticated user menu, Help-link removal; removed unused UserMenuToggle re-export |
shared/src/styles/mitxonline.scss |
Header/footer styling to match legacy theme (border, box-shadow, spacing, mobile) |
A couple of notes for context: the removed export { UserMenuToggle } is safe since it's only used internally; the mobile-slot replacements (mobileRight authenticated menu, mobileCenter logo) become inert once NoMobileLayout renders null, but are harmless. The footer is shared across all three deployments, so this footer rework applies to mitx and xpro as well, not just mitxonline.
The only issue I flagged is a minor accessibility nit on the new footer logo image (missing alt). The rest of the changes rely heavily on the external frontend-base shell's slot/widget IDs and produce visual output that I cannot verify here, and there are no automated tests in this repository.
Anas12091101
added
the
Needs Review
Anas12091101
removed
the
Needs Review
…onto main) Rebase the header/footer overrides onto current main. main already carries the shared header/footer wiring in the site configs (via the instructor-dashboard work), so this brings only the branch's own deliverables on top of it: - shared/header/index.tsx (MITx / MITxOnline / xPRO header apps) - shared/footer/index.tsx (flat single-row footer matching the legacy learning MFE) - shared/styles/mitxonline.scss - public/index.html viewport meta tags (mitx / mitxonline / xpro) Configs are taken from main unchanged (they already wire these apps + the instructor dashboard). History squashed from 7 commits because the site-config rewrites conflicted irreconcilably with main's merged versions. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1a25c5f to
a07bd29
Compare
|
@pdpinch Just an FYI, I created this PR to align the header and footer styling in the Instructor Dashboard MFE with the other legacy MFEs. |
| }) => ( | ||
| <Dropdown className={className}> | ||
| <UserMenuToggle /> | ||
| <Dropdown.Menu className="dropdown-menu-right"> |
| style={{ | ||
| display: "grid", | ||
| gridTemplateColumns: "minmax(0, 1fr) auto minmax(0, 1fr)", | ||
| columnGap: "1.5rem", | ||
| alignItems: "center", |
| className, | ||
| }) => ( | ||
| <Dropdown className={className}> | ||
| <UserMenuToggle /> |
asadali145
left a comment
asadali145
left a comment
There was a problem hiding this comment.
Looks like we have changed the shared footer/header and it will change the header and footer for MITx, and MIT xPro.
Maybe we should go that way? But we will have to change for all MFEs and legacy as well. We should discuss it with Peter if it will make things consistent?
asadali145
added
waiting on author
and removed
Needs Review
|
In general, I like consistency, but there are probably some necessary differences between the courses.learn, Residential MITx, and xPRO headers and footers. Logos and links come to mind. |
Yeah, that's fine, I just want the styling and format to be the same. Links and Logos will remain configurable. Header:
Footer:
|
Bring the stale header/footer branch up to date with main so it includes .github/workflows/ (added on main after this branch diverged). The CodeQL 'Analyze (actions)' job was failing with 'no source code seen' because the branch tree had no GitHub Actions files to scan. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Anas12091101
added
Needs Review
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 9 out of 9 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (1)
deployments/mit-ol/mfe_slot_config/frontend/shared/src/footer/index.tsx:116
- The fixed three-column grid never stacks on mobile, despite the PR’s stated responsive-stacking behavior. At narrow widths the two fixed-size logo images can overflow their shrinking
1frtracks and overlap the center links; add a mobile breakpoint that changes this layout to a vertical stack (or otherwise gives each section its own row).
gridTemplateColumns: "minmax(0, 1fr) auto minmax(0, 1fr)",
|
asadali145
left a comment
asadali145
left a comment
There was a problem hiding this comment.
I have left a comment after testing.
asadali145
added
waiting on author
and removed
Needs Review
Anas12091101
added
Needs Review
What are the relevant tickets?
Follow-up of PR #58
Description (What does it do?)
Customize the shared frontend-base header and footer to match the legacy MIT OL learning MFE:
commonAppConfig.mitolFooter). Link set is per-deployment: mitx/mitxonline use the default (About Us · Terms of Service · Accessibility · Help), xPRO passes a custom order (About Us · Privacy Policy · Honor Code · Terms of Service · Accessibility, no Help).SUPPORT_URL(see the note under "How can this be tested?").mitx.scss(mitx + xPRO, light theme) andmitxonline.scss(dark theme) to match the legacy look (colors, spacing, borders, header height, mobile adjustments).Split out of the instructor-dashboard MFE work (PR #58) at reviewer request so the header/footer changes can be reviewed independently.
Screenshots (if appropriate):
Screen.Recording.2026-06-19.at.8.41.00.PM.mov
MITx Residential
MITxOnline
xPRO
How can this be tested?
private.py):_ACTIVE_DEPLOYMENTabove as needed, then restart the LMS. The config API is cached, so also clear it after changes:./manage.py lms shell -c "from django.core.cache import cache; cache.clear()".SUPPORT_URLis present in theappsarray:curl -s -w "HTTP %{http_code}
" http://local.openedx.io:8000/api/frontend_site_config/v1/
/appsprefix):http://apps.local.openedx.io:8080/apps/instructor-dashboard/<course-key>(you must be course staff / superuser to view it)
mitxandxproby switching_ACTIVE_DEPLOYMENT(restart LMS + clear cache + restart the matching dev server).Additional Context