Allow Header Customization via Frontend Plugin Framework

[brian-smith-tcril]

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 install from 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-framework exists, we have an opportunity to make the header customization story a better one!

In this issue I would like to discuss:

• What are the ways in which site operators want to customize the header?
  • What Plugin Slots can we create to support those use cases?
• How can we help site operators that currently rely on the forking/npm install strategy move to using the frontend plugin framework plugin slot strategy?
  • One way to support this is to have a top-level plugin slot that wraps the entire header. What would the requirements for that top-level plugin slot be?
• What aspects of the current technical architecture of this repository will make this difficult?
  • How do we handle the current LearningHeader vs StudioHeader vs DesktopHeader vs MobileHeader situation? Is there a clear path forward for consolidating those? Is consolidating those required to provide a good site operator experience for using plugin slots?
• Anything and everything else people can think of that will impact how the header plugin slots are created!

PRs

Preview Give feedback

1. feat: add frontend-plugin-framework LogoSlot #528
   +0
2. feat: add frontend-plugin-framework slots #545
   +0
3. feat(deps): update header to 5.6.0 frontend-template-application#832
   +0
4. feat(deps): update header to 5.6.0 frontend-app-account#1144
   create-sandbox +1
5. feat(deps): update header to 5.6.0 frontend-app-authoring#1424
   create-sandbox +1
6. feat(deps): update header to 5.6.0 frontend-app-communications#214
   create-sandbox +1
7. feat(deps): update header to 5.6.0 frontend-app-discussions#741
   create-sandbox +1
8. feat(deps): update header to 5.6.0 frontend-app-gradebook#409
   create-sandbox +1
9. feat(deps): update header to 5.6.0 frontend-app-learner-dashboard#485
   create-sandbox +1
10. feat(deps): update header to 5.6.0 frontend-app-learner-record#431
    create-sandbox +1
11. feat(deps): update header to 5.6.0 frontend-app-learning#1502
    create-sandbox +1
12. feat: add frontend-plugin-framework header slot frontend-app-learning#1504
    +0
13. feat(deps): update header to 5.6.0 frontend-app-ora-grading#363
    create-sandbox +1
14. feat(deps): update header to 5.6.0 frontend-app-payment#887
    create-sandbox +1
15. fix(deps): regenerate package-lock.json frontend-app-payment#888
    +0
16. feat(deps): update header to 5.6.0 frontend-app-profile#1112
    create-sandbox +1

[brian-smith-tcril]

How can we help site operators that currently rely on the forking/npm install strategy move to using the frontend plugin framework plugin slot strategy?

I'd like to clarify here that we still need to support the current forking/npm install customization strategy - but it is not a strategy we want to recommend.

This will likely impact how we need to think about

How do we handle the current LearningHeader vs StudioHeader vs DesktopHeader vs MobileHeader situation?

[adamstankiewicz]

Anything and everything else people can think of that will impact how the header plugin slots are created!

There might still be an opportunity for frontend-component-header to rely on Navbar from Paragon (docs). There's has been early discussion/design work in the past within Paragon Working Group (#wg-paragon) about how to make the Paragon Navbar component more generic, with defined slots / permutations, such that it can be used within the platform (e.g., via frontend-component-header). The interaction with Navbar from Paragon might be out-of-scope for this particular bit, but I still feel this is still a direction possibly worth pursuing.

[brian-smith-tcril]

How do we handle the current LearningHeader vs StudioHeader vs DesktopHeader vs MobileHeader situation?

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)

MFE	Header
Authn	None
Account	Header
Communications	LearningHeader
Course Authoring	StudioHeader
Discussions	LearningHeader
Gradebook	Header
Learner Dashboard	Header
Learning	LearningHeader
ORA Grading	LearningHeader
Profile	Header

Details

Authn

No header

Account

Import

import Header from '@edx/frontend-component-header';

Use

<Header />

Communications

Import

import { LearningHeader as Header } from '@edx/frontend-component-header';

Use

<Header
  className="learning-header"
  courseOrg={courseMetadata.org}
  courseNumber={courseMetadata.number}
  courseTitle={courseMetadata.title}
/>

Course Authoring

Import

import { StudioHeader } from '@edx/frontend-component-header';

Use

<StudioHeader
  org={org}
  number={number}
  title={title}
  isHiddenMainMenu={isHiddenMainMenu}
  mainMenuDropdowns={mainMenuDropdowns}
  outlineLink={outlineLink}
  searchButtonAction={meiliSearchEnabled ? openSearchModal : undefined}
/>

Discussions

Import

import { LearningHeader as Header } from '@edx/frontend-component-header';

Use

{!enableInContextSidebar && (<Header courseOrg={org} courseNumber={courseNumber} courseTitle={courseTitle} />)}

Gradebook

Import

import Header from '@edx/frontend-component-header';

Use

<Header />

Learner Dashboard

Important

Assuming openedx/frontend-app-learner-dashboard#327 lands

Import

import Header from '@edx/frontend-component-header';

Use

<Header
  mainMenuItems={learnerHomeHeaderMenu.mainMenu}
  secondaryMenuItems={learnerHomeHeaderMenu.secondaryMenu}
  userMenuItems={learnerHomeHeaderMenu.userMenu}
/>

Learning

Import (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 Grading

Import

import { LearningHeader as Header } from '@edx/frontend-component-header';

Use

<Header
  courseTitle={courseMetadata.title}
  courseNumber={courseMetadata.number}
  courseOrg={courseMetadata.org}
  data-testid="header"
/>

Profile

Import

import Header from '@edx/frontend-component-header';

Use

<Header />

[brian-smith-tcril]

Adding screenshots to aid in visual discussions

Authn

No header

Account

Communications

Course Authoring

Discussions

Gradebook

Learner Dashboard

Important

These screenshots are from before openedx/frontend-app-learner-dashboard#327 landed

Learning

CourseAccessErrorPage

// todo

TabPage

GoalUnsubscribe

// todo

ORA Grading

Profile

[michaelwheeler]

What are the ways in which site operators want to customize the header?

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.

[brian-smith-tcril]

@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?

[jmakowski1123]

Product Requirements defined here - please provide input in the wiki! https://openedx.atlassian.net/wiki/spaces/OEPM/pages/4412243977/Proposal+Customizable+Header+for+LMS

[asadali145]

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:

• Full name in place of username
• Customized labels and URLs in the user dropdown.
• Custom Help button link.
• Extra links in the left header menu.
• Custom logo

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

[asadali145]

@brian-smith-tcril Thank you so much for all the work around the header improvements and for allowing the customizations through the configurations.

I tried out header PluginSlots in Sumac, and it works great overall. It covers most cases, but we missed a case, allowing customization to display the full name instead of the username.

It was mentioned in the initial proposal and I mentioned it in the last comment on this issue.

Please let me know if there is a way to do that OR if it is still in progress.

Thank you!

CC: @pdpinch

[brian-smith-tcril]

Thanks for reminding me about username replacement @asadali145!

As to the "is there a way to do this or is it still in progress" question, my answer is "both."

It is currently possible only via fully replacing the header (using a header_slot https://github.com/openedx/frontend-app-learning/tree/master/src/plugin-slots/HeaderSlot). I agree there should be a simpler way to do this, so I plan to add new slots wrapping the content within the button itself in each of the places it appears (mobile/desktop/learning headers).

I should be able to get PRs adding those new slots out to frontend-component-header sometime next week, at which point PRs will need to be made updating the version of frontend-component-header used in each MFE.