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>

arbrandes · 2026-04-24T17:46:04Z

Alright, will do, thanks!

Looks like there's some commit titles that might need fixing up in the meantime.

arbrandes

Looks great! I do have some minor suggestions inline, though.

arbrandes · 2026-04-27T12:52:36Z

+            <LearnerDashboardHeader />
            <Routes>
              <Route path="/" element={<PageWrap><App /></PageWrap>} />
+              {getConfig().ENABLE_PROGRAM_DASHBOARD && (


Can you please add the new variable to src/config/index.js? It's also common practice to add it to the .env files, in the way of documentation.

And while we're at it, mind adding some documentation about this new feature to the README?

Variable added.

arbrandes · 2026-04-27T13:08:21Z

+    isLoading,
+    isError: errorState,
+    error,
+  } = useProgramsListData() as {


If you cast the return value of the hook, you're second-guessing Typescript. If we want a strong type for the data (which we do!) the typing should happen in the hook itself.

Parameterize useQuery in src/data/hooks/queryHooks.ts:37-42 with useQuery<ProgramData[]>({...}) (and give fetchProgramsListData a return type in api.ts). Then the consumer can destructure without an as cast and the runtime guards still make sense

@arbrandes Implementing this change as suggested would move us away from the current pattern. I couldn’t find any similar implementations in the referenced files—please let me know if I missed something.

There was no pattern in Learner Dashboard. It didn't use Typescript. We're setting the pattern with this, which makes it doubly important that we do it right. Please try doing it as I suggested.

@asharma12-sonata I'm happy to assist with this 👍

@arbrandes i have made these required changes, please have a look and let me know if there is anything else needed.
CC: @MaxFrank13

arbrandes · 2026-04-27T13:11:20Z

+import { logError } from '@edx/frontend-platform/logging';
+
+import appMessages from 'messages';
+import { useProgramsListData } from '../../../data/hooks/queryHooks';


Probably best to follow the useInitializeLearnerHome pattern: expose useProgramsListData from the index barrel, and import instead from ../../../data/hooks.

MaxFrank13 · 2026-05-07T17:19:58Z

+              {/* {getConfig().ENABLE_PROGRAM_DASHBOARD && ( */}
                <Route path="programs" element={<PageWrap><ProgramsList /></PageWrap>} />
-              )}
+              {/* )} */}


We want to keep the check here. These lines should not be commented out anymore.

It was pushed by mistake, corrected now.

MaxFrank13 · 2026-05-07T17:22:05Z

 import urls from 'data/services/lms/urls';
 import { stringifyUrl } from 'data/services/lms/utils';
 import eventNames from 'tracking/constants';
+import { ProgramData } from '../../types';


nit: Should be ProgramsData to match what is in the types file

Naming corrected to match.

arbrandes

I have a few change requests inline, but the major one that I just noticed now is the following:

The masquerade bar renders on /programs too. But masquerade is parameter-based: useInitializeLearnerHome passes the masqueraded user into initializeList(masqueradeUser) and re-keys its query on it. The new programs path does neither. So, basically, masquerading doesn't work for programs.

If it's not supposed to work, the question is: should the masquerade bar show?

If it is supposed to work, then this needs to be addressed.

arbrandes · 2026-05-08T13:07:13Z

+  programDashboardPageTitle: {
+    defaultMessage: 'Program Dashboard',
+    id: 'program.dashboard.page.title',
+    description: 'Page title for Program Dashboard',
+  },


This is unused. Please remove.

arbrandes · 2026-05-08T13:11:51Z

+  isLoading: boolean;
+  isError: boolean;
+  error: Error | null;
+}


It seems nothing is using this export (or anything from ProgramDashboard/data/types). Either consume this from useProgramsListData, or remove the file.

updated this file to have types from containers and utilized same from here.

arbrandes · 2026-05-08T13:13:32Z

+const mockGet = jest.fn(() => ({
+  data: {},
+}));
+const mockLMSBaseUrl = 'http://test-lms-base-url';
+
+jest.mock('@edx/frontend-platform/auth', () => ({
+  getAuthenticatedHttpClient: jest.fn(() => ({
+    get: mockGet,
+  })),
+}));
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(() => ({
+    LMS_BASE_URL: mockLMSBaseUrl,
+  })),
+}));


I suspect none of this scaffolding is necessary in this file.

arbrandes · 2026-05-08T13:14:45Z

+  uuid: string,
+  title: string,
+  type: string,
+  banner_image: {


Please use camel case:

Suggested change

banner_image: {

bannerImage: {

arbrandes · 2026-05-08T13:18:49Z

 import { stringifyUrl } from 'data/services/lms/utils';
 import eventNames from 'tracking/constants';

+import { ProgramData } from '../../../containers/ProgramDashboard/data/types';


A service file should not be importing from a container/UX file. Please move that type to src/data/types.

arbrandes · 2026-05-08T13:19:39Z

 } from 'data/services/lms/api';
 import { learnerDashboardQueryKeys } from './queryKeys';
+import { fetchProgramsListData } from '../services/lms/api';
+import { ProgramData } from '../../containers/ProgramDashboard/data/types';


Same here: a data file should not be importing from a container.

arbrandes · 2026-05-08T13:20:44Z

 };

+const fetchProgramsListData = async (): Promise<ProgramData[]> => {
+  const url = `${getConfig().LMS_BASE_URL}/api/dashboard/v0/programs/`;


Please route the URL through data/services/lms/urls.js, like all the others.

arbrandes · 2026-05-08T13:21:37Z

+  };
+
+  const getOrgImageUrl = (): string => {
+    // Otherwise use the logoImageUrl and key for the organization


Stale comment. Please remove.

arbrandes · 2026-05-08T13:23:16Z

+        {hasEnrollments ? (
+          formatMessage(messages.exploreProgramsCTAText)
+        ) : (
+          <h2 className="text-center">


I don't think an <h2> is the right semantic choice here. Probably just a <p>.

Updated to p

arbrandes · 2026-05-08T13:24:44Z

            <Routes>
              <Route path="/" element={<PageWrap><App /></PageWrap>} />
+              {getConfig().ENABLE_PROGRAM_DASHBOARD && (
+                <Route path="programs" element={<PageWrap><ProgramsList /></PageWrap>} />


What you have here works, but this is more explicitly correct:

Suggested change

<Route path="programs" element={<PageWrap><ProgramsList /></PageWrap>} />

<Route path="/programs" element={<PageWrap><ProgramsList /></PageWrap>} />

arbrandes · 2026-05-13T17:20:46Z

@MaxFrank13 and @asharma12-sonata, what's the intended behavior of the masquerade bar, for programs?

MaxFrank13 · 2026-05-14T16:32:08Z

masquerade

Hey @arbrandes! Apologies for not addressing this when you originally made the request. We discussed this the other day and were thinking that we would move the MasqueradeBar so that it only appears for the Courses view. Most likely moving it to a file in the Dashboard directory — index or perhaps DashboardLayout. Since the masquerade feature doesn't exist in the legacy Program Dashboard, it seemed to make sense that this PR wouldn't bring that feature in.

Any thoughts on this? Happy to reconsider if needed 👍

arbrandes · 2026-05-15T14:46:57Z

the masquerade feature doesn't exist in the legacy Program Dashboard

Ok, that answers the fundamental question. As for what to do:

move the MasqueradeBar so that it only appears for the Courses view

This makes sense to me.

asharma12-sonata · 2026-05-18T13:02:28Z

the masquerade feature doesn't exist in the legacy Program Dashboard

Ok, that answers the fundamental question. As for what to do:

move the MasqueradeBar so that it only appears for the Courses view

This makes sense to me.

Updated masquerade bar to appear for programs only.
@arbrandes @MaxFrank13

Co-Authored-By: Claude <noreply@anthropic.com>

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): bump actions/checkout from 5 to 6 (openedx#750)

9f542d0

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>

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>

arbrandes self-requested a review April 24, 2026 17:45

arbrandes requested changes Apr 27, 2026

View reviewed changes

MaxFrank13 reviewed May 7, 2026

View reviewed changes

arbrandes self-requested a review May 7, 2026 21:37

arbrandes requested changes May 8, 2026

View reviewed changes

arbrandes self-requested a review May 11, 2026 12:16

asharma12-sonata closed this May 18, 2026

github-project-automation Bot moved this to Done in Aperture-Maintained May 18, 2026

asharma12-sonata reopened this May 18, 2026

asharma12-sonata and others added 13 commits May 21, 2026 09:18

feat: updates made as per the PR review comments

c0ff501

fix: satisfy new UserData type in hooks test

baadaaf

Co-Authored-By: Claude <noreply@anthropic.com>

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

707ea42

fix: fixed test cases failure issue

e8b2b64

fix: updates as per the review comments

13aadc0

fix: updates made in type case as per the pr review comment

9ea9a1b

feat: remove hotjar (openedx#717)

4bb869b

fix: fixed test cases and uncommented the check

33f5595

fix: fixed Ci issue

a5117ca

fix: fixes done as per the review comments

5ee856d

fix: moved masquerade bar to dashboard

4fe9a62

fix: updated test cases after moving masquerade bar

14fe168

chore: Update Github action package versions with SHA commit

a674cc2

asharma12-sonata force-pushed the abhishek/refactor-program-dashboard branch from 5e18827 to a674cc2 Compare May 21, 2026 09:27

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

5932257

	<Route path="programs" element={<PageWrap><ProgramsList /></PageWrap>} />
	<Route path="/programs" element={<PageWrap><ProgramsList /></PageWrap>} />

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!

arbrandes commented Apr 24, 2026

Uh oh!

arbrandes 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!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

asharma12-sonata Apr 29, 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!

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!

arbrandes left a comment • 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!

asharma12-sonata May 11, 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!

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!

asharma12-sonata commented Apr 10, 2026 •

edited

Loading

asharma12-sonata Apr 29, 2026 •

edited

Loading

arbrandes left a comment •

edited

Loading

asharma12-sonata May 11, 2026 •

edited

Loading

asharma12-sonata commented May 18, 2026 •

edited

Loading