Skip to content

feat: display multiple dashboards and some style fixes #667

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
wants to merge 4 commits into
base: master
Choose a base branch
from
Draft

feat: display multiple dashboards and some style fixes #667

wants to merge 4 commits into from

Conversation

@jsnwesson
Copy link
Member

@jsnwesson jsnwesson commented Jun 4, 2025 •
edited
Loading

APER-3690

This PR adds a component to display the personal edX dashboard and a the most recent Enterprise dashboard in the header menu. It also fixes a conditional rendering of the Career button when the user has an Enterprise account.

Testing locally

To test Learner Dashboard or Profile MFE, you'll need to:

  1. Pull down this repo and checkout this branch
  2. In the MFE you're testing with, add the following:
// module.config.js
module.exports = {
  localModules: [
    { moduleName: '@edx/frontend-component-header', dir: '../frontend-component-header-edx', dist: 'src' },
  ],
};

// .env.development
ENTERPRISE_LEARNER_PORTAL_HOSTNAME='http://localhost:8080'
ENABLE_EDX_PERSONAL_DASHBOARD=true
ORDER_HISTORY_URL='http://localhost:1990'
SUPPORT_URL='http://localhost:18000/help'

// index.scss
// COMMENT OUT THE IMPORT FOR COMPONENT HEADER
// @import "~@edx/frontend-component-header/dist/index";
  1. In the MFE, run npm install and then npm run start
  2. Test with enterprise and non-enterprise accounts

Enterprise User

Old Learner Dashboard with plugins

Screenshot 2025-06-04 at 10 41 07 AM

New Learner Dashboard with default Header

Screenshot 2025-06-04 at 9 34 54 AM

Old Profile page with default Header

Screenshot 2025-06-04 at 9 12 27 AM

New Profile page with default Header

Screenshot 2025-06-04 at 9 16 12 AM

Non-enterprise user

Old Learner Dashboard with plugins

Screenshot 2025-06-04 at 10 42 05 AM

New Learner Dashboard with default Header

Screenshot 2025-06-04 at 9 33 53 AM

Old Profile page with default Header

Screenshot 2025-06-04 at 9 19 46 AM

New Profile page with default Header

Screenshot 2025-06-04 at 9 17 45 AM

@jsnwesson jsnwesson force-pushed the jwesson/add-enterprise-to-menu branch 4 times, most recently from 100cef3 to dc7080b Compare June 5, 2025 20:32
jsnwesson
jsnwesson commented Jun 5, 2025
View reviewed changes
src/Header.jsx
const secondaryMenu = secondaryMenuItems || defaultSecondaryMenu;
let userMenu = authenticatedUser === null ? [] : userMenuItems || defaultUserMenu;

const minimalDashboardMenuItem = {
Copy link
Member Author

Choose a reason for hiding this comment

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

The Minimal header (used in Payment MFE) should only display one dashboard, which has historically pointed to the personal dashboard, so I'm choosing to leave this unchanged.

jsnwesson
jsnwesson commented Jun 9, 2025
View reviewed changes
src/Header.jsx
);
},
},
}] : []),
Copy link
Member Author

Choose a reason for hiding this comment

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

Only render the Career button when the user doesn't have an Enterprise account, similarly with the Order History button.

jsnwesson
jsnwesson commented Jun 9, 2025
View reviewed changes
src/Header.jsx
} else {
baseUserMenuDashboardLinks = [dashboardMenuItem];
}
const defaultSecondaryMenu = [
Copy link
Member Author

Choose a reason for hiding this comment

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

This "Help" button is new to the default Header experience, but it has already existed for a while in the Learning and Learner Dashboard pages.

jsnwesson
jsnwesson commented Jun 9, 2025
View reviewed changes
src/Header.jsx Outdated
type: 'item',
href: `${config.LMS_BASE_URL}/dashboard`,
content: intl.formatMessage(messages['header.links.courses']),
isActive: document.title.includes('Learner Home'),
Copy link
Member Author

Choose a reason for hiding this comment

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

Only make this tab active when the user is on the Learner Dashboard page, otherwise leave it inactive on any other page.

jsnwesson
jsnwesson commented Jun 9, 2025
View reviewed changes
src/DesktopHeader.jsx Outdated
</Dropdown.Item>
)}
<UserMenuGroupSlot />
<UserDashboardMenu
Copy link
Member Author

Choose a reason for hiding this comment

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

Consider: move the UserDashboardMenu to be the default content of the UserMenuGroupSlot

jsnwesson
jsnwesson commented Jun 9, 2025
View reviewed changes
src/MobileHeader.jsx Outdated

const userMenuGroupSlot = <UserMenuGroupSlot />;
const userMenuGroupItemSlot = <UserMenuGroupItemSlot />;
const userDashboardMenu = (
Copy link
Member Author

Choose a reason for hiding this comment

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

It might make the most sense, that similar to the DesktopHeader to move the UserDashboardMenu to be default content for UserMenuGroupSlot

@jsnwesson jsnwesson force-pushed the jwesson/add-enterprise-to-menu branch 3 times, most recently from 5baeb14 to d24d29f Compare June 9, 2025 20:20
@jsnwesson jsnwesson force-pushed the jwesson/add-enterprise-to-menu branch from d24d29f to b7a021a Compare June 9, 2025 20:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Awaiting requested review from Copilot Copilot will automatically review once the pull request is marked ready for review

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@jsnwesson