feat: refactor program dashboard to use react query

[asharma12-sonata]

This PR includes changes from

#751

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

[codecov]

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.

[MaxFrank13]

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

[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

[MaxFrank13]

@arbrandes This is ready for your eyes whenever you get time! It's a big one, but most of it is derived from the previous PR: #751

[arbrandes]

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]

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?

[asharma12-sonata]

Variable added.

[arbrandes]

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

[asharma12-sonata]

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

[arbrandes]

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.

[MaxFrank13]

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

[asharma12-sonata]

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

[arbrandes]

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

[asharma12-sonata]

Updated