/
[Proposal] Legacy Program Dashboard conversion

[Proposal] 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:

Programs Overview page
Program Details Page

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

 

List of courses sorted by status for each course in the program
Right side panel for displaying program progress, earned certificates (course as well as program certificates), and a link to the view the record (directs to Learner Record MFE)

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.

  1. Create new directory for Program Dashboard in frontend-app-learner-dashboard

  2. Create ProgramList view that renders the list of Program cards

  3. Create ProgramProgress view that renders the details for each program

  4. Create a new Route in frontend-app-learner-dashboard for the Program Dashboard