fix: removed program tab in the header

Author: PKulkoRaccoonGang

src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.jsx

@@ -7,7 +7,7 @@ import { AppContext } from '@edx/frontend-platform/react';
 import { Button, Badge } from '@openedx/paragon';
 
 import urls from 'data/services/lms/urls';
-import { reduxHooks } from 'hooks';
+import { reduxHooks, apiHooks } from 'hooks';
 
 import { findCoursesNavDropdownClicked } from '../hooks';
 import messages from '../messages';
@@ -16,6 +16,8 @@ export const CollapseMenuBody = ({ isOpen }) => {
   const { formatMessage } = useIntl();
   const { authenticatedUser } = React.useContext(AppContext);
 
+  const { enabled: programsEnabled } = apiHooks.useProgramsConfig();
+
   const dashboard = reduxHooks.useEnterpriseDashboardData();
   const { courseSearchUrl } = reduxHooks.usePlatformSettingsData();
 
@@ -32,9 +34,11 @@ export const CollapseMenuBody = ({ isOpen }) => {
       <Button as="a" href="/" variant="inverse-primary">
         {formatMessage(messages.course)}
       </Button>
-      <Button as="a" href={urls.programsUrl()} variant="inverse-primary">
-        {formatMessage(messages.program)}
-      </Button>
+      {programsEnabled && (
+        <Button as="a" href={urls.programsUrl()} variant="inverse-primary">
+          {formatMessage(messages.program)}
+        </Button>
+      )}
       <Button
         as="a"
         href={urls.baseAppUrl(courseSearchUrl)}

src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.test.jsx

@@ -20,6 +20,11 @@ jest.mock('hooks', () => ({
       courseSearchUrl: '/courseSearchUrl',
     }),
   },
+  apiHooks: {
+    useProgramsConfig: () => ({
+      enabled: true,
+    }),
+  },
 }));
 
 jest.mock('../hooks', () => ({

src/containers/LearnerDashboardHeader/ExpandedHeader/index.jsx

@@ -5,7 +5,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button } from '@openedx/paragon';
 
 import urls from 'data/services/lms/urls';
-import { reduxHooks } from 'hooks';
+import { reduxHooks, apiHooks } from 'hooks';
 
 import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
 import { useIsCollapsed, findCoursesNavClicked } from '../hooks';
@@ -17,6 +17,8 @@ export const ExpandedHeader = () => {
   const { courseSearchUrl } = reduxHooks.usePlatformSettingsData();
   const isCollapsed = useIsCollapsed();
 
+  const { enabled: programsEnabled } = apiHooks.useProgramsConfig();
+
   const exploreCoursesClick = findCoursesNavClicked(
     urls.baseAppUrl(courseSearchUrl),
   );
@@ -38,14 +40,16 @@ export const ExpandedHeader = () => {
         >
           {formatMessage(messages.course)}
         </Button>
-        <Button
-          as="a"
-          href={urls.programsUrl()}
-          variant="inverse-primary"
-          className="p-4"
-        >
-          {formatMessage(messages.program)}
-        </Button>
+        {programsEnabled && (
+          <Button
+            as="a"
+            href={urls.programsUrl()}
+            variant="inverse-primary"
+            className="p-4"
+          >
+            {formatMessage(messages.program)}
+          </Button>
+        )}
         <Button
           as="a"
           href={urls.baseAppUrl(courseSearchUrl)}

src/containers/LearnerDashboardHeader/ExpandedHeader/index.test.jsx

@@ -15,6 +15,11 @@ jest.mock('hooks', () => ({
       courseSearchUrl: '/courseSearchUrl',
     }),
   },
+  apiHooks: {
+    useProgramsConfig: () => ({
+      enabled: true,
+    }),
+  },
 }));
 
 jest.mock('../hooks', () => ({

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 },
@@ -75,6 +77,7 @@ export default {
   initializeList,
   unenrollFromCourse,
   updateEmailSettings,
+  getProgramsConfig,
   updateEntitlementEnrollment,
   deleteEntitlementEnrollment,
   logEvent,

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}/`;
@@ -38,5 +39,6 @@ export default StrictDict({
   getInitApiUrl,
   learningMfeUrl,
   programsUrl,
+  programsConfigUrl,
   updateEmailSettings,
 });

src/hooks/api.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { AppContext } from '@edx/frontend-platform/react';
+import { logError } from '@edx/frontend-platform/logging';
 
 import { RequestKeys } from 'data/constants/requests';
 import { post } from 'data/services/lms/utils';
@@ -31,6 +32,25 @@ export const useInitializeApp = () => {
   });
 };
 
+export const useProgramsConfig = () => {
+  const [config, setConfig] = React.useState({});
+
+  const fetchProgramsConfig = React.useCallback(async () => {
+    try {
+      const { data } = await api.getProgramsConfig();
+      setConfig(data);
+    } catch (error) {
+      logError(`Error accessing programs configuration: ${error.message}`);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    fetchProgramsConfig();
+  }, [fetchProgramsConfig]);
+
+  return config;
+};
+
 export const useNewEntitlementEnrollment = (cardId) => {
   const { uuid } = reduxHooks.useCardEntitlementData(cardId);
   const onSuccess = module.useInitializeApp();