feat: add programs dashboard

[MaxFrank13]

Related Github Issue in platform roadmap

[Proposal] Legacy Program Dashboard conversion

This PR adds the programs dashboard in accordance with the above proposal. This is a conversion of the legacy programs dashboard that lives in edx-platform. This PR converts the legacy frontend into a React based frontend that lives under its own route. The route is conditionally rendered based on a new ENABLE_PROGRAM_DASHBOARD environment variable, not to be confused with the ENABLE_PROGRAMS variable, which only handles the rendering of the "Programs" tab. This is done so that operators can choose to either use the legacy frontend or the new React-based frontend.

In order to create a new route in this MFE, the App.jsx file had to be refactored. The LearnerDashboardHeader and FooterSlot were moved out of App.jsx and into index.jsx. This aligns with the way other MFEs are setup. The h1 tag for the app was also moved to the LearnerDashboardHeader so that it would appear on all routes. The Header logic has also been refactored so that the correct tab is highlighted based on the pathname of the page.

All other changes are related to the Program Dashboard itself. The dashboard uses the /api/dashboard/v0/programs/ endpoint to retrieve enrollment data.

Directory structure

src/
└── containers/
    └── ProgramDashboard/
        ├── data/
        │   ├── api.ts
        │   └── types.d.ts
        └── ProgramsList/
            ├── ExploreProgramsCTA.test.tsx
            ├── ExploreProgramsCTA.tsx
            ├── index.scss
            ├── index.test.tsx
            ├── index.tsx
            ├── messages.ts
            ├── ProgramListCard.test.tsx
            ├── ProgramListCard.tsx
            ├── ProgressCategoryBubbles.test.tsx
            └── ProgressCategoryBubbles.tsx

Programs Dashboard

Has enrollments

Does not have enrollments

Error retrieving enrollment data

[codecov]

Codecov Report

❌ Patch coverage is 97.54098% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 97.18%. Comparing base (2a0ed57) to head (fd3ff70).
⚠️ Report is 13 commits behind head on master.

Files with missing lines	Patch %	Lines
src/containers/ProgramDashboard/index.tsx	0.00%	2 Missing ⚠️
.../ProgramDashboard/ProgramsList/ProgramListCard.tsx	97.29%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #751      +/-   ##
==========================================
- Coverage   97.54%   97.18%   -0.37%     
==========================================
  Files         148      155       +7     
  Lines        1302     1419     +117     
  Branches      225      247      +22     
==========================================
+ Hits         1270     1379     +109     
- Misses         31       39       +8     
  Partials        1        1              

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

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[MaxFrank13]

@openedx/openedx-product-managers this is ready for review

[deborahgu]

@MaxFrank13, can you make codecov any happier?

[deborahgu]

I'm approving based on our prior reviews of this feature branch, but obviously wait for product manager review before merging.

[deborahgu]

Note for @openedx/openedx-product-managers -- this is list page only. The details page is still legacy.

[sarina]

GTG from a product perspective.

From a frontend perspective I'd like to make sure we're not making liberal uses of overrides to Paragon styles (I haven't reviewed for this) - the more default the Paragon styling is, the more consistent the platform looks.

[MaxFrank13]

@sarina with regards to overrides to Paragon styles, this is the only CSS file in the changes. Everything else is styled using default Paragon components. Any modifications to them are done with utility classes from Paragon so there is no custom spacing or anything like that (e.g. padding: 10px; or whatever).

I had to add these two classes because Paragon's <Truncate/> component has been deprecated. Perhaps these classes are worthy additions to the base Paragon utilities, or perhaps someone has come up with another preferred solution. I can bring this up in this week's working group meeting.

[sarina]

It'd be great if you could bring it up! Thank you 🙂

[MaxFrank13]

@arbrandes Do you have any thoughts on this? If merged, it will only change the out-of-the-box experience by changing the way the index.jsx and App.jsx files are structured. The new structure aligns more with what we have in other MFEs.

The Program Dashboard code is all behind the new flag ENABLE_PROGRAM_DASHBOARD.

[jsnwesson]

@arbrandes Max will be out for a few weeks starting next Monday, so I'll be taking any comments or feedback whenever you get a chance to look at this!

[arbrandes]

I'm generally in favor of the approach. I do have some inline questions before approving, though.

My biggest concern is tangential (i.e., it doesn't block this PR): I would prefer not introducing a new toggle if we can use plugin slots, but for new routes we can only do that cleanly with frontend-base. Would you consider submitting a parallel PR that implements the same feature but targetting the frontend-base branch?

It would not be a straightforward port because of the way the header and routing work in frontend-base-land. The only question is whether you submit the initial PR porting it, or if I do it. Either way we'd probably both be looking at it, at some point. :)

[arbrandes]

A11y concern: this PR introduces an <h1> to the header for both the Learner Dashboard and the Programs pages, but here we're using Helmet to change it for Programs. Shouldn't the h1 be modified according to the page?

[MaxFrank13]

Ah good call out!

here we're using Helmet to change it for Programs

We actually aren't changing the h1 here. We are changing the title for the page, which is different but it should match the theme of whatever the h1 is for the page. The h1 is set to "Learner Home" for both routes as you mentioned. The title for the CoursesPanel view is "Learner Home". But as you called out for the ProgramDashboard route, there it is being set to "Program Dashboard". So there is inconsistency here: we are modifying the title only for Program Dashboard route to be specific to Programs Dashboard but not doing the same for the default CoursesPanel view (App.jsx).

So I think it's a question of: do we want to modify the page title at all? And if so, should we also modify the h1 based on the route?

Or in other words: does "Learner Home" make sense as an h1 for both the CoursesPanel (App.jsx) view and the Programs Dashboard view? If so, then we shouldn't be modifying the page title in Helmet and keep it consistent across both routes. FWIW, we have been using h2 for the CoursesPanel tab (i.e. "My Courses") which would imply that we shouldn't change the h1 based on which tab we are in.

That's a lot of words. Totally down to discuss in a call if that's easier!

[MaxFrank13]

@arbrandes I've addressed all of the comments and made updates accordingly. The only one I haven't made is the one regarding the h1 and page title. Curious to get your thoughts there!

Would you consider submitting a parallel PR that implements the same feature but targetting the frontend-base branch?

Admittedly, I need to brush up on my frontend-base knowledge and understanding of how routes are configured. But as you say, it doesn't really matter who submits the PR as both parties will be heavily involved with the review. Is there a certain timeline you'd like the PR to frontend-base to be merged by? Does it need to be done before the official move to frontend-base in June?