Skip to content
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.

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

fix: replace the header with openedx header #327

Merged
merged 1 commit into from
Aug 12, 2024
Merged

Conversation

ahtesham-quraish
Copy link

@ahtesham-quraish ahtesham-quraish commented Apr 26, 2024

Description:
Replace the custom header with the Openedx header using the configurable header and plugin slots

  • edX-specific code (Dashboards user menu group and Career user menu item) is inserted via plugins
    • edX Header PR
    • edX-internal PR
    • Dashboard plugin PR

Jira Ticket
VAN-1951

How this has been tested?

  • It has been tested locally
  • New unit test is added to cover the menu feature

Screenshots

Menu Screenshot
Career Screenshot 2024-05-29 at 12 47 32 PM
Dasbboard Screenshot 2024-05-29 at 12 47 16 PM
Enterprose Dasbboard Screenshot 2024-07-29 at 3 06 19 PM

@ahtesham-quraish ahtesham-quraish requested a review from a team as a code owner April 26, 2024 06:34
@ahtesham-quraish ahtesham-quraish force-pushed the ahtesham/van-1914 branch 3 times, most recently from 22d3398 to 977a0a8 Compare April 29, 2024 05:22
@arbrandes arbrandes linked an issue May 2, 2024 that may be closed by this pull request
@ahtesham-quraish ahtesham-quraish force-pushed the ahtesham/van-1914 branch 2 times, most recently from e9e5ac9 to b65f44f Compare May 14, 2024 06:47
content: formatMessage(messages.dashboardPersonal),
isActive: true,
},
...(!_.isEmpty(dashboard) ? [{
Copy link
Contributor

Choose a reason for hiding this comment

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

i think we should keep the condition same as it is in learner-dashboard !!dashboard.

Copy link
Author

@ahtesham-quraish ahtesham-quraish May 14, 2024

Choose a reason for hiding this comment

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

Actually there was a bug on this line before, this condition "!!dashboard" was not working as per expectations we have changed it. Let us know in case any query.

image

Copy link
Contributor

Choose a reason for hiding this comment

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

I will let the relevant team comment on this.

@ahtesham-quraish ahtesham-quraish force-pushed the ahtesham/van-1914 branch 2 times, most recently from 5fafc13 to 7931d32 Compare May 14, 2024 09:03
@jsnwesson
Copy link
Contributor

Hey @ahtesham-quraish , I'll be looking over this PR tomorrow! A question that I do have is whether it's possible to move the edX logic of LearnerDashboardMenu.jsx to the forked Header repo (frontend-component-header-edx), which I think would help with really bringing Learner Dashboard closer to how the Header component is implemented across the MFEs.

Copy link
Contributor

@arbrandes arbrandes left a comment

Choose a reason for hiding this comment

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

This is great in general - thanks! I'd like to see some of the business-specific code moved elsewhere, though, if we can manage it.

},
],
userMenu: [
...(getConfig().ENABLE_EDX_PERSONAL_DASHBOARD ? [
Copy link
Contributor

Choose a reason for hiding this comment

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

Ideally, this should be moved somewhere else. We can either put the header behind a <PluginSlot /> so this 2U-specific can go in a plugin, or, as @jsnwesson comments, this could move to frontend-component-header-edx.

{
heading: '',
items: [
...(_.isEmpty(dashboard) && getConfig().CAREER_LINK_URL ? [{
Copy link
Contributor

Choose a reason for hiding this comment

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

This also looks like org-specific code that we could take this opportunity to move to a plugin or a header fork.

@ahtesham-quraish
Copy link
Author

We were going with feature parity but after looking at the @arbrandes comment we are going to see the strategy to remove the 2u specific code from Dashboard MFE and move it in header-edx fork so that is why we are holding this PR back.

@syedsajjadkazmii syedsajjadkazmii force-pushed the ahtesham/van-1914 branch 6 times, most recently from c73f946 to fb35614 Compare May 29, 2024 08:57
@syedsajjadkazmii
Copy link
Contributor

Hey @ahtesham-quraish , I'll be looking over this PR tomorrow! A question that I do have is whether it's possible to move the edX logic of LearnerDashboardMenu.jsx to the forked Header repo (frontend-component-header-edx), which I think would help with really bringing Learner Dashboard closer to how the Header component is implemented across the MFEs.

Hi @jsnwesson, we have extracted the edX-specific code out of the learner-dashboard and now using plugin slots to insert that menu.

Could you please look at this PR and the following related PRs as well?
edx/frontend-component-header-edx#577
https://github.com/edx/edx-internal/pull/10973/files

@syedsajjadkazmii
Copy link
Contributor

syedsajjadkazmii commented May 29, 2024

This is great in general - thanks! I'd like to see some of the business-specific code moved elsewhere, though, if we can manage it.

Hi @arbrandes, Thanks. We have removed the business-specific code from the PR. that code will be added through plugin slots in frontend-component-header-edx. Updated the PR description as well.

courseSearchUrl, authenticatedUser, dashboard, exploreCoursesClick,
}) => {
const { formatMessage } = useIntl();
return getLearnerHeaderMenu(formatMessage, courseSearchUrl, authenticatedUser, dashboard, exploreCoursesClick);
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm noticing that dashboard never gets used by getLearnerHeaderMenu, and it's supposed to be data from reduxHooks.useEnterpriseDashboardData() in LearnerDashboardHeader/index.jsx. Should some of this logic live in the 2U-forked header-component?

Copy link
Contributor

Choose a reason for hiding this comment

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

yes, you are right. The dashboard is removed from here and edx specific login has been moved out.

@deborahgu deborahgu added the waiting on author PR author needs to resolve review requests, answer questions, fix tests, etc. label Jul 12, 2024
Copy link

codecov bot commented Jul 25, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.72%. Comparing base (68a46ac) to head (dc2ae40).

Additional details and impacted files
@@            Coverage Diff             @@
##           master     #327      +/-   ##
==========================================
+ Coverage   95.70%   95.72%   +0.01%     
==========================================
  Files         166      163       -3     
  Lines        1491     1451      -40     
  Branches      268      244      -24     
==========================================
- Hits         1427     1389      -38     
+ Misses         60       58       -2     
  Partials        4        4              

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

@syedsajjadkazmii
Copy link
Contributor

Hi @jsnwesson @arbrandes,

this PR is ready for re-review. Please have a look.

@jsnwesson jsnwesson added waiting for eng review PR is ready for review. Review and merge it, or suggest changes. needs maintainer attention Issue or PR specifically needs the attention of the maintainer. and removed waiting on author PR author needs to resolve review requests, answer questions, fix tests, etc. labels Aug 6, 2024
@jsnwesson
Copy link
Contributor

Thanks @syedsajjadkazmii ! I tested out the Learner Dashboard locally with the other PRs you linked above, and this checks out for me.

Copy link
Contributor

@arbrandes arbrandes left a comment

Choose a reason for hiding this comment

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

I've (finally) tested this, and it works fine! Code looks good, too. Thanks a lot for doing this!

@arbrandes
Copy link
Contributor

@brian-smith-tcril, FYI: learner dashboard will now have a standard header, which should make the slot work a little easier.

Description:
Replace the header with openedx header
van-1914
@mubbsharanwar mubbsharanwar merged commit 7ef5d5b into master Aug 12, 2024
7 checks passed
@mubbsharanwar mubbsharanwar deleted the ahtesham/van-1914 branch August 12, 2024 06:55
@jsnwesson jsnwesson removed the waiting for eng review PR is ready for review. Review and merge it, or suggest changes. label Aug 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs maintainer attention Issue or PR specifically needs the attention of the maintainer.
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

Change request: switch to the frontend-component-header
6 participants