feat: refactor program dashboard to use react query by asharma12-sonata · Pull Request #827 · openedx/frontend-app-learner-dashboard

asharma12-sonata · 2026-04-10T08:16:56Z

This PR includes changes from

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/
        │   └── 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

Other changes are related to using react query for program dashboard.

Programs Dashboard

our github actions should point to our release branch

chore: updating the workflows

…-page

…extra repositories (openedx#752)

) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Maxwell Frank <92897870+MaxFrank13@users.noreply.github.com>

) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

…#783) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

…edx#784) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

… npm ci triggered by CI

codecov · 2026-04-14T13:06:15Z

Codecov Report

❌ Patch coverage is 98.21429% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 98.19%. Comparing base (8f0c78e) to head (65251b0).

Files with missing lines	Patch %	Lines
...containers/ProgramDashboard/ProgramsList/index.tsx	93.75%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #827      +/-   ##
==========================================
- Coverage   98.19%   98.19%   -0.01%     
==========================================
  Files         145      150       +5     
  Lines        1388     1493     +105     
  Branches      298      322      +24     
==========================================
+ Hits         1363     1466     +103     
- Misses         25       27       +2

☔ 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.

jsnwesson · 2026-04-14T21:49:21Z

  });

-  it('calls logError if the API request fails', async () => {
+  it('renders fallback UI when the API request fails', async() => {


@asharma12-sonata @MaxFrank13 I might be missing something in this change, but if this unit tests handles the scenario of when the API request fails, shouldn't we expect an error message on the screen, not the ExploreProgramsCTA?

Agreed! If we look at the PR I created, there is error handling as well as a test that checks for the Alert on failure. We should try to match this using React Query.

With React Query we are expected to add error handling to the queryFn. See the docs here. It looks like the Alert is still set up in the component.

This test is only passing because we are setting a new Error('Nettwork failed') to the error field of the returned data from useProgramsListData. On it's own this is valid because the useQuery hook does return the error (source), however, our component is only using isError which is a boolean and not the actual error object (source).

So we should modify the test to return a boolean in the mock for the isError field rather than an Error object as the error field. Then the test should be modified to test the error behavior (i.e. check that the Alert is rendered)

We already have that test in place.

Yes, but as Jason called out, that test is verifying that the CTA shows up on error. This contradicts what the component actually does which is render the failure alert when the API request fails.

So the test needs to be modified to reflect what the component actually does. Part of the issue is with the mocking (as I called out in the previous comment)

Added test which renders alert and no program card when api fails.

MaxFrank13 · 2026-04-15T13:28:16Z

+    (useProgramsListData as jest.Mock).mockReturnValue({
+      data: [],
+      loading: false,
+      error: mockError,


Suggested change

error: mockError,

isError: true,

Is the update only in your local environment? I don't see the change reflected in this PR

changes pushed.

MaxFrank13 · 2026-04-15T15:09:42Z

There is a queryHooks.ts file in data/hooks (here). Should this code live alongside the other React Query hooks?

Clarifying context:

We have a queryHooks.ts file that lives in the data directory that is at the root of the application. This data directory can be used by any component in the app. Since it has a queryHooks file, this would imply that it is the home for React Query hooks (such as the useInitializeLearnerHome hook) that are used throughout the app.

The question I posed in the PR comment was: should we move the hook you made into this file, rather then keeping it in the api file as we did with the previous pre-React Query app? This would mean moving both the hook and it's test

I’m not entirely sure about this, but if hooks are required to live in the root hooks folder, I can move it there. Please confirm.

Unless you had an idea when putting them in ProgramDashboard/data/api.ts then it's probably best they live in the data/queryHooks file. There isn't a "right" or "wrong" here. It's more about making a decision of whether or not to uphold a pattern

Changes done.

MaxFrank13 · 2026-04-15T15:17:58Z

+  beforeEach(() => {
+    jest.clearAllMocks();
+    // Set up a successful mock API response by default
+    (useProgramsListData as jest.Mock).mockResolvedValue(mockApiData);


This mock should match the others

Suggested change

(useProgramsListData as jest.Mock).mockResolvedValue(mockApiData);

(useProgramsListData as jest.Mock).mockResolvedValue({

data: mockApiData,

loading: false,

isError: false,

});

MaxFrank13 · 2026-04-15T15:18:30Z

+    (useProgramsListData as jest.Mock).mockReturnValue({
+      data: mockApiData,
+      loading: false,
+      error: null,


Do we need this mock if we have the beforeEach() mocking it out before every test?

Removed and changes pushed.

MaxFrank13

Looks good. I had a few questions and suggestions. Also, can we add more screenshots and description similar to the original PR?

MaxFrank13 · 2026-04-20T16:39:34Z

+  it('calls logError if the API request fails', () => {
+    const mockError = new Error('Network failed');
+
+    (useProgramsListData as jest.Mock).mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      isError: true,
+      error: mockError,
+    });
+
+    const mockContactUrl = 'mock-contact-url';
+    getConfig.mockReturnValue({
+      CONTACT_URL: mockContactUrl,
+    });
+
+    renderComponent();
+
+    expect(screen.getByRole('link', { name: mockContactUrl })).toBeInTheDocument();
+    expect(screen.queryAllByTestId('program-list-card')).toHaveLength(0);
+    expect(logError).toHaveBeenCalledWith(mockError);


I realize that you have added this new test rather then modifying the one before it. This is fine but we should either edit/remove the test before this.

Changes pushed.

MaxFrank13 · 2026-04-21T13:07:54Z

+    (useProgramsListData as jest.Mock).mockReturnValue({
+      data: [],
+      isLoading: false,
+      isError: false,


If the API request fails, that would mean this would return isError: true, right?

correct, I think once isError: true is added, then the test should fail because the expect is incorrectly assuming the ExploreProgramsCta will render. I think this test is really just adding more confusion and should be deleted.

Updates pushed

MaxFrank13 · 2026-04-21T13:45:00Z

Tests in this file are verifying the useProgramsListData query hook rather then verifying the API helper function. Any tests for the hook should go in queryHooks.test.ts alongside the other query code.

Additionally, there is an api.ts file that lives in data/services/lms/api. This holds all of the API calls to the LMS. There is an api.test.ts that lives alongside this file. It has mocks set up to test API calls. Since we need a test for the ProgramDashboard's api.ts file, it may be easier to move the code to data/services/lms/api. Alternatively, you could just write the test here for the API call and use the LMS API test code as a reference.

Either way, we should make sure the test for fetchProgramsListData is isolated.

updated and changes pushed

MaxFrank13

Had some additional comments. Also, please include screenshots of Programs being rendered to the dashboard. Also, we should enhance the description to match what we had in the old PR

jsnwesson · 2026-04-21T16:08:59Z

+
+  describe('fetchProgramsListData', () => {
+    it('uses the expected URL to call the endpoint', async () => {
+      await fetchProgramsListData();
+
+      expect(getAuthenticatedHttpClient).toHaveBeenCalled();
+      expect(mockGet).toHaveBeenCalledWith(
+        `${mockLMSBaseUrl}/api/dashboard/v0/programs/`,
+      );
+    });
+  });


@MaxFrank13 I'm guessing that since this is an api call and not a hook, this should be moved to the containers/ProgramDashboard/data/api.test.ts file, right?

Yes my understanding is that this test should live in api.test.ts and the test that is in that file should live in queryHooks.test.ts

updated and pushed

… for banner image which is updated in api endpoint

deborahgu and others added 30 commits October 15, 2025 18:56

chore: updating the workflows

741c9ce

our github actions should point to our release branch

feat: add program dashboard directory (#1)

745210b

feat: add program dashboard directory (#1)

91b6925

Merge pull request #2 from edx/dkaplan1/modify-workflow-branches

2dc71dc

chore: updating the workflows

feat: add program list page

17ae415

feat: add program list view

51c4db5

fix: deps

5f0999f

fix: tests

6b99660

Merge branch 'program-dashboard-feature' into mfrank/add-program-list…

0d9be86

…-page

fix: removed comment

2b77225

feat: add program list page

1a901f5

feat: program dashboard

de68d2d

Merge branch 'master' into mfrank/add-program-list-page

6f6d16b

fix: test coverage

3b83401

fix: code cov

fd3ff70

fix: requested changes

0bb1231

feat: sync master branch to openedx master (#10)

63568ee

feat: added the ability for instances to use local translations from …

ce0942d

…extra repositories (openedx#752)

chore(deps): update dependency @openedx/paragon to v23.18.1 (openedx#755

af9924e

) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

fix(deps): update dependency core-js to v3.47.0 (openedx#757)

cd37458

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

chore(deps): update dependency @reduxjs/toolkit to v2.11.1 (openedx#756)

68dcf1a

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

chore(deps): update dependency @reduxjs/toolkit to v2.11.2 (openedx#761)

3829dd7

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

fix: env variables fetching issue for translations (openedx#766)

1bd4485

fix(deps): remove filesize dependency (openedx#767)

5e4e347

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

chore(deps): update dependency @openedx/paragon to v23.18.2 (openedx#771

fd7d4e4

) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

fix(deps): update dependency react-router-dom to v6.30.3 (openedx#780)

c3a7c6d

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

chore(deps): update dependency @openedx/paragon to v23.19.1 (openedx#781

b4adf16

) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

chore(deps): update dependency lodash to v4.17.23 [security] (openedx…

9982ac4

…#783) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

chore(deps): update dependency @edx/frontend-platform to v8.5.4 (open…

23f23a4

…edx#784) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

jsnwesson reviewed Apr 10, 2026

View reviewed changes

Comment thread src/index.jsx

asharma12-sonata added 6 commits April 13, 2026 09:29

feat: removed unused code and uncommented the required piece of code

ca10f5d

feat: reinstalled npm packages to update package.lock.json to resolve…

0795e45

… npm ci triggered by CI

feat: reverted github workflow changes

dfc751f

feat: fixed eslint reported issues

bb2cad6

feat: fixed workflow for openedx

104f90d

feat: added footer as per jason comment in PR review

2164115

asharma12-sonata force-pushed the abhishek/refactor-program-dashboard branch from f11b964 to 2164115 Compare April 13, 2026 09:54

asharma12-sonata added 2 commits April 13, 2026 13:49

feat: fixed lint issue

9f04f71

feat: handled test case failures

f3ae632

asharma12-sonata marked this pull request as ready for review April 14, 2026 09:47

jsnwesson reviewed Apr 14, 2026

View reviewed changes

MaxFrank13 reviewed Apr 15, 2026

View reviewed changes

feat: updated test cases as per Max's comment

de32fe2

MaxFrank13 reviewed Apr 20, 2026

View reviewed changes

feat: changes done as per the review comment

310835c

MaxFrank13 reviewed Apr 21, 2026

View reviewed changes

jsnwesson reviewed Apr 21, 2026

View reviewed changes

asharma12-sonata added 5 commits April 22, 2026 14:19

feat: updates made as per the PR review comments also updated the key…

be8cd42

… for banner image which is updated in api endpoint

Merge branch 'master' into abhishek/refactor-program-dashboard

593e7ce

Merge branch 'master' into abhishek/refactor-program-dashboard

f48e233

feat: updated package.lock.json as it was causing issue in ci

a79674c

fix: fixed test cases failure issue

65251b0

Conversation

asharma12-sonata commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Directory structure

Programs Dashboard

Uh oh!

Uh oh!

codecov Bot commented Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MaxFrank13 Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MaxFrank13 Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MaxFrank13 Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MaxFrank13 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MaxFrank13 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

asharma12-sonata commented Apr 10, 2026 •

edited

Loading

codecov Bot commented Apr 14, 2026 •

edited

Loading

MaxFrank13 Apr 15, 2026 •

edited

Loading

MaxFrank13 Apr 20, 2026 •

edited

Loading

MaxFrank13 Apr 15, 2026 •

edited

Loading