feat: add programs dashboard

package.json

@@ -29,7 +29,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
     "@edx/frontend-component-footer": "^14.6.0",
     "@edx/frontend-component-header": "^8.0.0",
     "@edx/frontend-enterprise-hotjar": "7.2.0",

src/App.jsx

@@ -6,7 +6,6 @@ import { logError } from '@edx/frontend-platform/logging';
 import { initializeHotjar } from '@edx/frontend-enterprise-hotjar';
 
 import { ErrorPage, AppContext } from '@edx/frontend-platform/react';
-import { FooterSlot } from '@edx/frontend-component-footer';
 import { Alert } from '@openedx/paragon';
 
 import { RequestKeys } from 'data/constants/requests';
@@ -22,9 +21,6 @@ import track from 'tracking';
 
 import fakeData from 'data/services/lms/fakeData/courses';
 
-import AppWrapper from 'containers/AppWrapper';
-import LearnerDashboardHeader from 'containers/LearnerDashboardHeader';
-
 import { getConfig } from '@edx/frontend-platform';
 import messages from './messages';
 import './App.scss';
@@ -77,22 +73,16 @@ export const App = () => {
         <title>{formatMessage(messages.pageTitle)}</title>
         <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
       </Helmet>
-      <div>
-        <AppWrapper>
-          <LearnerDashboardHeader />
-          <main id="main">
-            {hasNetworkFailure
-              ? (
-                <Alert variant="danger">
-                  <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
-                </Alert>
-              ) : (
-                <Dashboard />
-              )}
-          </main>
-        </AppWrapper>
-        <FooterSlot />
-      </div>
+      <main id="main">
+        {hasNetworkFailure
+          ? (
+            <Alert variant="danger">
+              <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
+            </Alert>
+          ) : (
+            <Dashboard />
+          )}
+      </main>
     </>
   );
 };

src/App.test.jsx

@@ -8,12 +8,7 @@ import { reduxHooks } from 'hooks';
 import { App } from './App';
 import messages from './messages';
 
-jest.mock('@edx/frontend-component-footer', () => ({
-  FooterSlot: jest.fn(() => <div>FooterSlot</div>),
-}));
 jest.mock('containers/Dashboard', () => jest.fn(() => <div>Dashboard</div>));
-jest.mock('containers/LearnerDashboardHeader', () => jest.fn(() => <div>LearnerDashboardHeader</div>));
-jest.mock('containers/AppWrapper', () => jest.fn(({ children }) => <div className="AppWrapper">{children}</div>));
 jest.mock('data/redux', () => ({
   selectors: 'redux.selectors',
   actions: 'redux.actions',
@@ -49,19 +44,6 @@ describe('App router component', () => {
       it('displays title in helmet component', async () => {
         await waitFor(() => expect(document.title).toEqual(messages.pageTitle.defaultMessage));
       });
-      it('displays learner dashboard header', () => {
-        const learnerDashboardHeader = screen.getByText('LearnerDashboardHeader');
-        expect(learnerDashboardHeader).toBeInTheDocument();
-      });
-      it('wraps the header and main components in an AppWrapper widget container', () => {
-        const appWrapper = screen.getByText('LearnerDashboardHeader').parentElement;
-        expect(appWrapper).toHaveClass('AppWrapper');
-        expect(appWrapper.children[1].id).toEqual('main');
-      });
-      it('displays footer slot', () => {
-        const footerSlot = screen.getByText('FooterSlot');
-        expect(footerSlot).toBeInTheDocument();
-      });
     };
     describe('no network failure', () => {
       beforeEach(() => {

src/containers/Dashboard/index.jsx

@@ -13,14 +13,12 @@ import './index.scss';
 
 export const Dashboard = () => {
   hooks.useInitializeDashboard();
-  const { pageTitle } = hooks.useDashboardMessages();
   const hasCourses = reduxHooks.useHasCourses();
   const initIsPending = reduxHooks.useRequestIsPending(RequestKeys.initialize);
   const showSelectSessionModal = reduxHooks.useShowSelectSessionModal();
 
   return (
     <div id="dashboard-container" className="d-flex flex-column p-2 pt-0">
-      <h1 className="sr-only">{pageTitle}</h1>
       {!initIsPending && (
         <>
           <DashboardModalSlot />

src/containers/Dashboard/index.test.jsx

@@ -2,7 +2,6 @@ import { render, screen } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { reduxHooks } from 'hooks';
-import hooks from './hooks';
 import Dashboard from '.';
 
 jest.mock('hooks', () => ({
@@ -24,28 +23,20 @@ jest.mock('./LoadingView', () => jest.fn(() => <div>LoadingView</div>));
 jest.mock('containers/SelectSessionModal', () => jest.fn(() => <div>SelectSessionModal</div>));
 jest.mock('./DashboardLayout', () => jest.fn(() => <div>DashboardLayout</div>));
 
-const pageTitle = 'test-page-title';
-
 describe('Dashboard', () => {
   const createWrapper = (props = {}) => {
     const {
       hasCourses = true,
       initIsPending = true,
       showSelectSessionModal = true,
     } = props;
-    hooks.useDashboardMessages.mockReturnValue({ pageTitle });
     reduxHooks.useHasCourses.mockReturnValue(hasCourses);
     reduxHooks.useRequestIsPending.mockReturnValue(initIsPending);
     reduxHooks.useShowSelectSessionModal.mockReturnValue(showSelectSessionModal);
     return render(<IntlProvider locale="en"><Dashboard /></IntlProvider>);
   };
 
   describe('render', () => {
-    it('page title is displayed in sr-only h1 tag', () => {
-      createWrapper();
-      const heading = screen.getByText(pageTitle);
-      expect(heading).toHaveClass('sr-only');
-    });
     describe('initIsPending false', () => {
       it('should render DashboardModalSlot', () => {
         createWrapper({ initIsPending: false });

src/containers/LearnerDashboardHeader/LearnerDashboardMenu.jsx

@@ -9,18 +9,20 @@ const getLearnerHeaderMenu = (
   courseSearchUrl,
   authenticatedUser,
   exploreCoursesClick,
+  pathname,
 ) => ({
   mainMenu: [
     {
       type: 'item',
       href: '/',
       content: formatMessage(messages.course),
-      isActive: true,
+      isActive: pathname === '/',
     },
     ...(getConfig().ENABLE_PROGRAMS ? [{
       type: 'item',
-      href: `${urls.programsUrl()}`,
+      href: getConfig().ENABLE_PROGRAM_DASHBOARD ? '/programs' : `${urls.programsUrl()}`,
       content: formatMessage(messages.program),
+      isActive: pathname === '/programs',
     }] : []),
     ...(!getConfig().NON_BROWSABLE_COURSES ? [{
       type: 'item',

src/containers/LearnerDashboardHeader/hooks.js

@@ -15,10 +15,10 @@ export const findCoursesNavClicked = (href) => track.findCourses.findCoursesClic
 });
 
 export const useLearnerDashboardHeaderMenu = ({
-  courseSearchUrl, authenticatedUser, exploreCoursesClick,
+  courseSearchUrl, authenticatedUser, exploreCoursesClick, pathname,
 }) => {
   const { formatMessage } = useIntl();
-  return getLearnerHeaderMenu(formatMessage, courseSearchUrl, authenticatedUser, exploreCoursesClick);
+  return getLearnerHeaderMenu(formatMessage, courseSearchUrl, authenticatedUser, exploreCoursesClick, pathname);
 };
 
 export default {

src/containers/LearnerDashboardHeader/index.jsx

@@ -6,15 +6,19 @@ import Header from '@edx/frontend-component-header';
 import { reduxHooks } from 'hooks';
 import urls from 'data/services/lms/urls';
 
+import { useLocation } from 'react-router-dom';
+import { useDashboardMessages } from 'containers/Dashboard/hooks';
 import ConfirmEmailBanner from './ConfirmEmailBanner';
 
 import { useLearnerDashboardHeaderMenu, findCoursesNavClicked } from './hooks';
-
 import './index.scss';
 
 export const LearnerDashboardHeader = () => {
   const { authenticatedUser } = React.useContext(AppContext);
   const { courseSearchUrl } = reduxHooks.usePlatformSettingsData();
+  const { pageTitle } = useDashboardMessages();
+  const location = useLocation();
+  const { pathname } = location;
 
   const exploreCoursesClick = () => {
     findCoursesNavClicked(urls.baseAppUrl(courseSearchUrl));
@@ -24,6 +28,7 @@ export const LearnerDashboardHeader = () => {
     courseSearchUrl,
     authenticatedUser,
     exploreCoursesClick,
+    pathname,
   });
 
   return (
@@ -34,6 +39,7 @@ export const LearnerDashboardHeader = () => {
         secondaryMenuItems={learnerHomeHeaderMenu.secondaryMenu}
         userMenuItems={learnerHomeHeaderMenu.userMenu}
       />
+      <h1 className="sr-only">{pageTitle}</h1>
       <MasqueradeBar />
     </>
   );

src/containers/LearnerDashboardHeader/index.test.jsx

@@ -1,8 +1,10 @@
 import { mergeConfig } from '@edx/frontend-platform';
 import { render, screen } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { useLocation } from 'react-router-dom';
 
 import urls from 'data/services/lms/urls';
+import { useDashboardMessages } from 'containers/Dashboard/hooks';
 import LearnerDashboardHeader from '.';
 import { findCoursesNavClicked } from './hooks';
 
@@ -20,16 +22,34 @@ jest.mock('./hooks', () => ({
   findCoursesNavClicked: jest.fn(),
 }));
 
+jest.mock('react-router-dom', () => ({
+  useLocation: jest.fn(() => ({
+    pathname: '/',
+  })),
+}));
+
 const mockedHeaderProps = jest.fn();
 jest.mock('containers/MasqueradeBar', () => jest.fn(() => <div>MasqueradeBar</div>));
 jest.mock('./ConfirmEmailBanner', () => jest.fn(() => <div>ConfirmEmailBanner</div>));
 jest.mock('@edx/frontend-component-header', () => jest.fn((props) => {
   mockedHeaderProps(props);
   return <div>Header</div>;
 }));
+jest.mock('containers/Dashboard/hooks', () => ({
+  useDashboardMessages: jest.fn(),
+}));
+
+const pageTitle = 'test-page-title';
 
 describe('LearnerDashboardHeader', () => {
   beforeEach(() => jest.clearAllMocks());
+
+  it('page title is displayed in sr-only h1 tag', () => {
+    useDashboardMessages.mockReturnValue({ pageTitle });
+    render(<IntlProvider locale="en"><LearnerDashboardHeader /></IntlProvider>);
+    const heading = screen.getByText(pageTitle);
+    expect(heading).toHaveClass('sr-only');
+  });
   it('renders and discover url is correct', () => {
     mergeConfig({ ORDER_HISTORY_URL: 'test-url' });
     render(<IntlProvider locale="en"><LearnerDashboardHeader /></IntlProvider>);
@@ -58,6 +78,26 @@ describe('LearnerDashboardHeader', () => {
     const { mainMenuItems } = props;
     expect(mainMenuItems.length).toBe(3);
   });
+
+  it('should highlight the active tab depending on the pathname', () => {
+    render(<IntlProvider locale="en"><LearnerDashboardHeader /></IntlProvider>);
+    const props = mockedHeaderProps.mock.calls[0][0];
+    const { mainMenuItems } = props;
+    expect(mainMenuItems[0].isActive).toBe(true);
+  });
+
+  it('should highlight the active tab depending on the pathname', () => {
+    mergeConfig({ ENABLE_PROGRAMS: true, ENABLE_PROGRAM_DASHBOARD: true });
+    useLocation.mockReturnValueOnce({
+      pathname: '/programs',
+    });
+    render(<IntlProvider locale="en"><LearnerDashboardHeader /></IntlProvider>);
+    const props = mockedHeaderProps.mock.calls[0][0];
+    const { mainMenuItems } = props;
+    expect(mainMenuItems[0].isActive).toBe(false);
+    expect(mainMenuItems[1].isActive).toBe(true);
+  });
+
   it('should not display Discover New tab if it is disabled by configuration', () => {
     mergeConfig({ NON_BROWSABLE_COURSES: true });
     render(<IntlProvider locale="en"><LearnerDashboardHeader /></IntlProvider>);

src/containers/ProgramDashboard/ProgramsList/ExploreProgramsCTA.test.tsx

@@ -0,0 +1,64 @@
+import { render, screen } from '@testing-library/react';
+import { getConfig } from '@edx/frontend-platform';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import ExploreProgramsCTA from './ExploreProgramsCTA';
+import messages from './messages';
+
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(() => ({
+    LMS_BASE_URL: 'https://courses.example.com',
+    EXPLORE_PROGRAMS_URL: null,
+  })),
+}));
+
+describe('ExploreProgramsCTA', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const renderComponent = (props = {}) => render(
+    <IntlProvider locale="en">
+      <ExploreProgramsCTA {...props} />
+    </IntlProvider>,
+  );
+
+  it('renders the expected CTA text when there are enrollments', () => {
+    renderComponent();
+
+    expect(screen.getByText(messages.exploreProgramsCTAText.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('renders the expected CTA when there are no enrollments', () => {
+    renderComponent({ hasEnrollments: false });
+
+    expect(screen.getByText(messages.hasNoEnrollmentsText.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('renders the button with the expected text', () => {
+    renderComponent();
+
+    expect(screen.getByRole('link', { name: messages.exploreProgramsCTAButtonText.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('uses EXPLORE_PROGRAMS_URL when it is defined', () => {
+    const customUrl = 'https://custom.explore.url/programs';
+    getConfig.mockReturnValueOnce({
+      LMS_BASE_URL: 'https://courses.example.com',
+      EXPLORE_PROGRAMS_URL: customUrl,
+    });
+
+    renderComponent();
+
+    const button = screen.getByRole('link', { name: messages.exploreProgramsCTAButtonText.defaultMessage });
+    expect(button).toHaveAttribute('href', customUrl);
+  });
+
+  it('falls back to LMS_BASE_URL/courses when EXPLORE_PROGRAMS_URL is not defined', () => {
+    renderComponent();
+
+    const button = screen.getByRole('link', { name: messages.exploreProgramsCTAButtonText.defaultMessage });
+    const expectedFallbackUrl = `${getConfig().LMS_BASE_URL}/courses`;
+    expect(button).toHaveAttribute('href', expectedFallbackUrl);
+  });
+});

src/containers/ProgramDashboard/ProgramsList/ExploreProgramsCTA.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Card, Button } from '@openedx/paragon';
+import { Search } from '@openedx/paragon/icons';
+import { ExploreProgramsCTAProps } from '../data/types';
+import messages from './messages';
+
+const ExploreProgramsCTA: React.FC<ExploreProgramsCTAProps> = ({
+  hasEnrollments = true,
+}) => {
+  const { formatMessage } = useIntl();
+
+  const href = getConfig().EXPLORE_PROGRAMS_URL || `${getConfig().LMS_BASE_URL}/courses`;
+  return (
+    <Card data-testid="explore-programs-cta">
+      <Card.Section>
+        {hasEnrollments ? (
+          formatMessage(messages.exploreProgramsCTAText)
+        ) : (
+          <h2 className="text-center">
+            {formatMessage(messages.hasNoEnrollmentsText)}
+          </h2>
+        )}
+      </Card.Section>
+      <Card.Footer className="justify-content-center">
+        <Button
+          as="a"
+          href={href}
+          iconBefore={Search}
+        >
+          {formatMessage(messages.exploreProgramsCTAButtonText)}
+        </Button>
+      </Card.Footer>
+    </Card>
+  );
+};
+
+export default ExploreProgramsCTA;