Legacy Program Dashboard conversion
Overview
The code for the Program Dashboard currently lives in edx-platform as a collection of Django templates. This project would convert that frontend into a React-based frontend that would reside in frontend-app-learner-dashboard.
The Program Dashboard consists mostly of two parts:
Problem
The legacy pages are difficult to work with and not particularly customizable. They have been gradually deprecated for React-based frontends. The legacy Program Dashboard in particular relies on slow, inefficient, and difficult-to-maintain backend logic. frontend-app-learner-dashboard was originally intended to be a home for the Program Dashboard.
Use Cases
The use case for this boils down to ease of development. Simply put, developing and maintaining the legacy frontend code in edx-platform is tedious and problematic. Any new frontends introduced Open edX are written in React which also makes the Program Dashboard code outdated. Legacy frontend code doesn’t utilize the latest Paragon library of components; this not only causes a disconnect in design theming but also could lead to a11y vulnerabilities.
Proposed Solution
This would be a 1:1 conversion of the Program Dashboard as it exists now. The components would vary slightly in appearance as they would now be using the latest Paragon library. The new frontend would have a different route as it would exist as a React Route in frontend-app-learner-dashboard.
We would want to replicate all of the functionality of the Program Details page, including:
Courses listed by status (in progress, remaining/unenrolled, completed)
Enroll buttons for unenrolled courses
Upgrade buttons where applicable (top of page and for any upgradeable courses)
Progress meter that shows how many certificates have been earned
A section to display all relevant certificates (this includes the program certificate as well as any course certificates)
A link to the program record page for this program
Implementation Plan
Aperture team at 2U would handle the project as part of normal day-to-day sprint work. There is already an API in edx-platform that we can call to retrieve program enrollment data, including what we would need for both pages (source). The Program Dashboard feature, including its route, would be conditionally rendered based on the ENABLE_PROGRAMS feature flag that already exists.
Create new directory for Program Dashboard in
frontend-app-learner-dashboardCreate ProgramList view that renders the list of Program cards
Create ProgramProgress view that renders the details for each program
Create a new Route in
frontend-app-learner-dashboardfor the Program Dashboard
Comments
@Max Frank this is great! Thank you for sharing! It’s a big step in the right direction. My question is, we eventually want the Dashboard to possibly combine “Courses” and “Programs” on one Dashboard. In light of this, do you think it’s worthwhile converting this 1:1 now, or do you think our resources should be focused on this newer Dashboard? See mockups below.
@Jenna Makowski At this stage we have an overall vision but nothing set in stone. Our aim is just to try and get our initial proposal accepted and funded.
Learner Dashboard – combining Courses and Learning Paths/Programs:
Discover Dashboard – combining Courses and Learning Paths/Programs:
@Jenna Makowski Appreciate the quick response!
Has your team done designs for this? If so, is it possible to share those?
We have not. The plan would be to use the legacy page in conjunction with the Enterprise Programs Dashboard which is virtually identical, but uses Paragon components and lives in an MFE. FWIW, that MFE is very enterprise-specific and can’t easily be extended for the 1:1 conversion.
Also, are any parts of the page being built as plugin slots?
I agree that a plugin interface would be great. But since the idea is that this is just a 1:1 conversion, that would include not adding anything like a PluginSlot interface. As that would require weigh-in from the community, it felt appropriate to leave that for future development. But if this is an incorrect assumption and we need PluginSlots, we can try to scope that out.
It will be possible to have this page either on or off by default, right?
Yes absolutely. The way it works now is that the Learner Dashboard will render the “Programs” tab based on an environment variable. We would use the same technique but instead of just rendering a tab that link off the MFE, it would instead link to an internal component in the MFE. The Dashboard wouldn’t be accessible without the feature being toggled on via environment variable. The variable would be off by default.
@Jenna Makowski We definitely want the page to have plugin slots – that’s a primary motivator for converting it. We’d like input from the community about where they should be though.
@Cassie Zamparini given that the Learning Paths work is not complete and there’s no plan for 2U to adopt them, I imagine that the legacy program dash will be around for at least a year or more, so to my mind that means that it’s worth shedding the legacy frontend, and a 1:1 is the simplest way to do that. Once we have the pages in an MFE, the community can start contributing to the pages or decide on plugin slot placement that might facilitate migrating to Learning Paths in the future. I think our goal is to keep the scope small and get it done quickly.
Learning paths / combined learner dash could also just be another new route in the MFE, making each tab configurable.
Thanks for submitting, @Max Frank . There are folks in the open source community who also currently use the Program Dash, so there is value in this conversion.
In the short-term, if the initial focus is simply a 1:1 conversion of the legacy page to an MFE with new paragon components, this is good to move ahead, with a few questions:
Has your team done designs for this? If so, is it possible to share those?
Also, are any parts of the page being built as plugin slots? Eg, the upgrade button slot. If there are parts of the page that are specific to the 2U use case, we should have a conversation about possible slots. That’s why seeing designs would be helpful.
It will be possible to have this page either on or off by default, right?
In the longer term, the main reason I wanted to have this written as a proposal is because there are various initiatives/proposals in the community tackling the broader question of stackable pathways/learning sequences. Most immediate is this proposal for creating stackable pathways out of courses, which are effectively programs. The question to 2U is, what about this proposal does or doesn’t work for your use case? And the question for @Cassie Zamparini and @Mahnoor Sarwat is, how are we thinking about the MVP vis-a-vis the current and/or future state Program Dash that already exists?