fix: display programs only if the url is configured

Author: dcoa

src/containers/LearnerDashboardHeader/LearnerDashboardMenu.jsx

@@ -9,6 +9,7 @@ const getLearnerHeaderMenu = (
   courseSearchUrl,
   authenticatedUser,
   exploreCoursesClick,
+  programsEnabled = false,
 ) => ({
   mainMenu: [
     {
@@ -17,11 +18,11 @@ const getLearnerHeaderMenu = (
       content: formatMessage(messages.course),
       isActive: true,
     },
-    {
+    ...(programsEnabled ? [{
       type: 'item',
       href: `${urls.programsUrl()}`,
       content: formatMessage(messages.program),
-    },
+    }] : []),
     {
       type: 'item',
       href: `${urls.baseAppUrl(courseSearchUrl)}`,
@@ -70,6 +71,7 @@ const getLearnerHeaderMenu = (
       ],
     },
   ],
-});
+}
+);
 
 export default getLearnerHeaderMenu;

src/containers/LearnerDashboardHeader/__snapshots__/index.test.jsx.snap

@@ -12,11 +12,6 @@ exports[`LearnerDashboardHeader render 1`] = `
           "isActive": true,
           "type": "item",
         },
-        {
-          "content": "Programs",
-          "href": "http://localhost:18000/dashboard/programs",
-          "type": "item",
-        },
         {
           "content": "Discover New",
           "href": "http://localhost:18000/course-search-url",

src/containers/LearnerDashboardHeader/hooks.js

@@ -5,6 +5,7 @@ import track from 'tracking';
 import { StrictDict } from 'utils';
 import { linkNames } from 'tracking/constants';
 
+import { apiHooks } from 'hooks';
 import getLearnerHeaderMenu from './LearnerDashboardMenu';
 
 import * as module from './hooks';
@@ -30,8 +31,9 @@ export const findCoursesNavDropdownClicked = (href) => track.findCourses.findCou
 export const useLearnerDashboardHeaderMenu = ({
   courseSearchUrl, authenticatedUser, exploreCoursesClick,
 }) => {
+  const { enabled: programsEnabled } = apiHooks.useProgramsConfig();
   const { formatMessage } = useIntl();
-  return getLearnerHeaderMenu(formatMessage, courseSearchUrl, authenticatedUser, exploreCoursesClick);
+  return getLearnerHeaderMenu(formatMessage, courseSearchUrl, authenticatedUser, exploreCoursesClick, programsEnabled);
 };
 
 export const useLearnerDashboardHeaderData = () => {

src/containers/LearnerDashboardHeader/hooks.test.js

@@ -21,6 +21,11 @@ jest.mock('tracking', () => ({
     findCoursesClicked: jest.fn(),
   },
 }));
+jest.mock('hooks', () => ({
+  apiHooks: {
+    useProgramsConfig: jest.fn(() => ({})),
+  },
+}));
 
 const url = 'http://example.com';
 
@@ -56,7 +61,7 @@ describe('LearnerDashboardHeader hooks', () => {
         username: 'test',
       };
       const learnerHomeHeaderMenu = useLearnerDashboardHeaderMenu({ courseSearchUrl, authenticatedUser });
-      expect(learnerHomeHeaderMenu.mainMenu.length).toBe(3);
+      expect(learnerHomeHeaderMenu.mainMenu.length).toBe(2);
     });
   });
 

src/containers/LearnerDashboardHeader/index.test.jsx

@@ -3,6 +3,7 @@ import { shallow } from '@edx/react-unit-test-utils';
 import Header from '@edx/frontend-component-header';
 
 import urls from 'data/services/lms/urls';
+import { apiHooks } from 'hooks';
 import LearnerDashboardHeader from '.';
 import { findCoursesNavClicked } from './hooks';
 
@@ -12,6 +13,9 @@ jest.mock('hooks', () => ({
       courseSearchUrl: '/course-search-url',
     })),
   },
+  apiHooks: {
+    useProgramsConfig: jest.fn(() => ({})),
+  },
 }));
 jest.mock('./hooks', () => ({
   ...jest.requireActual('./hooks'),
@@ -29,7 +33,13 @@ describe('LearnerDashboardHeader', () => {
     expect(wrapper.instance.findByType('ConfirmEmailBanner')).toHaveLength(1);
     expect(wrapper.instance.findByType('MasqueradeBar')).toHaveLength(1);
     expect(wrapper.instance.findByType(Header)).toHaveLength(1);
-    wrapper.instance.findByType(Header)[0].props.mainMenuItems[2].onClick();
+    wrapper.instance.findByType(Header)[0].props.mainMenuItems[1].onClick();
     expect(findCoursesNavClicked).toHaveBeenCalledWith(urls.baseAppUrl('/course-search-url'));
+    expect(wrapper.instance.findByType(Header)[0].props.mainMenuItems.length).toBe(2);
+  });
+  test('should display Programs link if the service is configured in the backend', () => {
+    apiHooks.useProgramsConfig.mockReturnValue({ enabled: true });
+    const wrapper = shallow(<LearnerDashboardHeader />);
+    expect(wrapper.instance.findByType(Header)[0].props.mainMenuItems.length).toBe(3);
   });
 });

src/data/services/lms/api.js

@@ -20,6 +20,8 @@ export const initializeList = ({ user } = {}) => get(
   stringifyUrl(urls.getInitApiUrl(), { [apiKeys.user]: user }),
 );
 
+export const getProgramsConfig = () => get(urls.programsConfigUrl());
+
 export const updateEntitlementEnrollment = ({ uuid, courseId }) => post(
   urls.entitlementEnrollment(uuid),
   { [apiKeys.courseRunId]: courseId },
@@ -73,6 +75,7 @@ export const createCreditRequest = ({ providerId, courseId, username }) => post(
 
 export default {
   initializeList,
+  getProgramsConfig,
   unenrollFromCourse,
   updateEmailSettings,
   updateEntitlementEnrollment,

src/data/services/lms/urls.js

@@ -22,6 +22,7 @@ export const baseAppUrl = (url) => updateUrl(getBaseUrl(), url);
 export const learningMfeUrl = (url) => updateUrl(getConfig().LEARNING_BASE_URL, url);
 
 // static view url
+const programsConfigUrl = () => baseAppUrl('/config/programs');
 const programsUrl = () => baseAppUrl('/dashboard/programs');
 
 export const creditPurchaseUrl = (courseId) => `${getEcommerceUrl()}/credit/checkout/${courseId}/`;
@@ -37,6 +38,7 @@ export default StrictDict({
   event,
   getInitApiUrl,
   learningMfeUrl,
+  programsConfigUrl,
   programsUrl,
   updateEmailSettings,
 });

src/hooks/api.js

@@ -31,6 +31,25 @@ export const useInitializeApp = () => {
   });
 };
 
+export const useProgramsConfig = () => {
+  const [config, setConfig] = React.useState({});
+
+  React.useEffect(() => {
+    const fetchProgramsConfig = async () => {
+      try {
+        const { data } = await api.getProgramsConfig();
+        setConfig(data);
+      } catch (error) {
+        console.error('Error accessing programs configuration', error);
+      }
+    };
+
+    fetchProgramsConfig();
+  }, []);
+
+  return config;
+};
+
 export const useNewEntitlementEnrollment = (cardId) => {
   const { uuid } = reduxHooks.useCardEntitlementData(cardId);
   const onSuccess = module.useInitializeApp();