Allow Header Customization via Frontend Plugin Framework #521
Comments
I'd like to clarify here that we still need to support the current forking/ This will likely impact how we need to think about
|
There might still be an opportunity for |
I think noting how headers are being used in the default enabled MFEs in tutor are using will be helpful for figuring this out: Overview (Table)DetailsAuthnNo header AccountImportimport Header from '@edx/frontend-component-header';Use<Header />CommunicationsImportimport { LearningHeader as Header } from '@edx/frontend-component-header';Use<Header
className="learning-header"
courseOrg={courseMetadata.org}
courseNumber={courseMetadata.number}
courseTitle={courseMetadata.title}
/>Course AuthoringImportimport { StudioHeader } from '@edx/frontend-component-header';Use<StudioHeader
org={org}
number={number}
title={title}
isHiddenMainMenu={isHiddenMainMenu}
mainMenuDropdowns={mainMenuDropdowns}
outlineLink={outlineLink}
searchButtonAction={meiliSearchEnabled ? openSearchModal : undefined}
/>DiscussionsImportimport { LearningHeader as Header } from '@edx/frontend-component-header';Use{!enableInContextSidebar && (<Header courseOrg={org} courseNumber={courseNumber} courseTitle={courseTitle} />)}GradebookImportimport Header from '@edx/frontend-component-header';Use<Header />Learner DashboardImportant Assuming openedx/frontend-app-learner-dashboard#327 lands Importimport Header from '@edx/frontend-component-header';Use<Header
mainMenuItems={learnerHomeHeaderMenu.mainMenu}
secondaryMenuItems={learnerHomeHeaderMenu.secondaryMenu}
userMenuItems={learnerHomeHeaderMenu.userMenu}
/>LearningImport (CourseAccessErrorPage)import { LearningHeader as Header } from '@edx/frontend-component-header';Use (CourseAccessErrorPage)<Header />Import (TabPage)import { LearningHeader as Header } from '@edx/frontend-component-header';Use (TabPage)<Header courseOrg={org} courseNumber={number} courseTitle={title} />Import (GoalUnsubscribe)import { LearningHeader as Header } from '@edx/frontend-component-header';Use (GoalUnsubscribe)<Header showUserDropdown={false} />ORA GradingImportimport { LearningHeader as Header } from '@edx/frontend-component-header';Use<Header
courseTitle={courseMetadata.title}
courseNumber={courseMetadata.number}
courseOrg={courseMetadata.org}
data-testid="header"
/>ProfileImportimport Header from '@edx/frontend-component-header';Use<Header /> |
Adding screenshots to aid in visual discussionsAuthnNo header Account
Communications
Course Authoring
Discussions
Gradebook
Learner DashboardImportant These screenshots are from before openedx/frontend-app-learner-dashboard#327 landed
LearningCourseAccessErrorPage
TabPage
GoalUnsubscribe
ORA Grading
Profile
|
It would be really great to simply be able to add/remove/modify links in the main navigation and user menus without having to maintain an entire header component. |
|
@asadali145 I'd love to hear your thoughts on this! In openedx/platform-roadmap#349 you noted wanting to be able to customize the URLs for the links in the user dropdown menu - are there any other header customizations you were hoping to be able to do without forking? |
|
Product Requirements defined here - please provide input in the wiki! https://openedx.atlassian.net/wiki/spaces/OEPM/pages/4412243977/Proposal+Customizable+Header+for+LMS |
|
Hi @brian-smith-tcril, We are using a few customization options already provided by the header and have forked the header to add a few more customizations. Here is the complete list:
This issue sums up things nicely and identifies all our pain points. @jmakowski1123 has added all of the customizations that we look for in the proposal. I have left a comment with a couple more suggestions. CC: @pdpinch |
It is important for site operators to be able to customize the Header. This is currently supported by having site operators fork this repository and
npm installfrom their fork, however, that is a lot to ask of a site operator that just wants to make a few small changes.Now that
frontend-plugin-frameworkexists, we have an opportunity to make the header customization story a better one!In this issue I would like to discuss:
npm installstrategy move to using the frontend plugin framework plugin slot strategy?LearningHeadervsStudioHeadervsDesktopHeadervsMobileHeadersituation? Is there a clear path forward for consolidating those? Is consolidating those required to provide a good site operator experience for using plugin slots?PRs
LogoSlot#528frontend-plugin-frameworkslots #545frontend-plugin-frameworkheader slot frontend-app-learning#1504package-lock.jsonfrontend-app-payment#888The text was updated successfully, but these errors were encountered: