fix: when course search url is relative, use LMS as origin

when platformSettings.courseSearchUrl is relative which is returned from a call to api/learner_home/init, use LMS_BASE_URL as origin. This fixes uses the same pattern which already used for different url, this probably wasn't an issue for edx.org given platformSettings.courseSearchUrl value is abosulte at edx.org
openedx · Apr 24, 2023 · 010b2c8 · 010b2c8
1 parent 6c920c0
commit 010b2c8
Show file tree

Hide file tree

Showing 21 changed files with 53 additions and 38 deletions.
diff --git a/src/containers/CourseList/NoCoursesView/__snapshots__/index.test.jsx.snap b/src/containers/CourseList/NoCoursesView/__snapshots__/index.test.jsx.snap
@@ -17,7 +17,7 @@ exports[`NoCoursesView snapshot 1`] = `
   </p>
   <Button
     as="a"
-    href="course-search-url"
+    href="http://localhost:18000/course-search-url"
     iconBefore={[MockFunction icons.Search]}
     variant="brand"
   >

diff --git a/src/containers/CourseList/NoCoursesView/index.jsx b/src/containers/CourseList/NoCoursesView/index.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, Image } from '@edx/paragon';
 import { Search } from '@edx/paragon/icons';
+import { baseAppUrl } from 'data/services/lms/urls';
 
 import emptyCourseSVG from 'assets/empty-course.svg';
 import { reduxHooks } from 'hooks';
@@ -27,7 +28,7 @@ export const NoCoursesView = () => {
       <Button
         variant="brand"
         as="a"
-        href={courseSearchUrl}
+        href={baseAppUrl(courseSearchUrl)}
         iconBefore={Search}
       >
         {formatMessage(messages.exploreCoursesButton)}

diff --git a/src/containers/CourseList/NoCoursesView/index.test.jsx b/src/containers/CourseList/NoCoursesView/index.test.jsx
@@ -6,7 +6,7 @@ import EmptyCourse from '.';
 jest.mock('hooks', () => ({
   reduxHooks: {
     usePlatformSettingsData: jest.fn(() => ({
-      courseSearchUrl: 'course-search-url',
+      courseSearchUrl: '/course-search-url',
     })),
   },
 }));

diff --git a/src/containers/LearnerDashboardHeader/AuthenticatedUserDropdown.jsx b/src/containers/LearnerDashboardHeader/AuthenticatedUserDropdown.jsx
@@ -53,7 +53,10 @@ export const AuthenticatedUserDropdown = ({ username }) => {
             <Dropdown.Item href={urls.programsUrl}>
               {formatMessage(messages.viewPrograms)}
             </Dropdown.Item>
-            <Dropdown.Item href={courseSearchUrl} onClick={findCoursesNavDropdownClicked(courseSearchUrl)}>
+            <Dropdown.Item
+              href={urls.baseAppUrl(courseSearchUrl)}
+              onClick={findCoursesNavDropdownClicked(courseSearchUrl)}
+            >
               {formatMessage(messages.exploreCourses)}
             </Dropdown.Item>
           </>

diff --git a/src/containers/LearnerDashboardHeader/AuthenticatedUserDropdown.test.jsx b/src/containers/LearnerDashboardHeader/AuthenticatedUserDropdown.test.jsx
@@ -8,18 +8,21 @@ import { useIsCollapsed } from './hooks';
 jest.mock('@edx/frontend-platform', () => ({
   getConfig: jest.fn(),
 }));
+
 jest.mock('@edx/frontend-platform/react', () => ({
   AppContext: {
     authenticatedUser: {
       profileImage: 'profileImage',
     },
   },
 }));
+const COURSE_SEARCH_URL = 'test-course-search-url';
+
 jest.mock('hooks', () => ({
   reduxHooks: {
     useEnterpriseDashboardData: jest.fn(),
     usePlatformSettingsData: jest.fn(() => ({
-      courseSearchUrl: 'test-course-search-url',
+      courseSearchUrl: COURSE_SEARCH_URL,
     })),
   },
 }));
@@ -29,6 +32,7 @@ jest.mock('containers/LearnerDashboardHeader/hooks', () => ({
 }));
 
 jest.mock('data/services/lms/urls', () => ({
+  baseAppUrl: (url) => (url),
   programsUrl: 'http://localhost:18000/dashboard/programs',
 }));
 
@@ -38,6 +42,7 @@ const config = {
   LOGOUT_URL: 'http://logout-url.test',
   ORDER_HISTORY_URL: 'http://order-history-url.test',
   SUPPORT_URL: 'http://localhost:18000/support',
+  LMS_BASE_URL: 'http:/localhost:18000',
 };
 getConfig.mockReturnValue(config);
 

diff --git a/src/containers/LearnerDashboardHeader/__snapshots__/index.test.jsx.snap b/src/containers/LearnerDashboardHeader/__snapshots__/index.test.jsx.snap
@@ -33,10 +33,10 @@ exports[`LearnerDashboardHeader snapshots with collapsed 1`] = `
           <IconButton
             alt="Course search"
             as="a"
-            href="test-course-search-url"
+            href="http://localhost:18000/test-course-search-url"
             iconAs="Icon"
             invertColors={true}
-            onClick={[MockFunction findCoursesNavClicked('test-course-search-url')]}
+            onClick={[MockFunction findCoursesNavClicked('/test-course-search-url')]}
             src={[MockFunction icons.Search]}
             variant="primary"
           />
@@ -78,9 +78,9 @@ exports[`LearnerDashboardHeader snapshots without collapsed 1`] = `
         />
         <Button
           as="a"
-          href="test-course-search-url"
+          href="http://localhost:18000/test-course-search-url"
           iconBefore={[MockFunction icons.Search]}
-          onClick={[MockFunction findCoursesNavClicked('test-course-search-url')]}
+          onClick={[MockFunction findCoursesNavClicked('/test-course-search-url')]}
           variant="inverse-tertiary"
         >
           Explore courses

diff --git a/src/containers/LearnerDashboardHeader/index.jsx b/src/containers/LearnerDashboardHeader/index.jsx
@@ -54,7 +54,7 @@ export const LearnerDashboardHeader = () => {
                 <IconButton
                   alt={formatMessage(messages.courseSearchAlt)}
                   as="a"
-                  href={courseSearchUrl}
+                  href={urls.baseAppUrl(courseSearchUrl)}
                   variant="primary"
                   invertColors
                   src={Search}
@@ -67,7 +67,7 @@ export const LearnerDashboardHeader = () => {
               <>
                 <Button
                   as="a"
-                  href={courseSearchUrl}
+                  href={urls.baseAppUrl(courseSearchUrl)}
                   variant="inverse-tertiary"
                   iconBefore={Search}
                   onClick={exploreCoursesClick}

diff --git a/src/containers/LearnerDashboardHeader/index.test.jsx b/src/containers/LearnerDashboardHeader/index.test.jsx
@@ -19,7 +19,7 @@ jest.mock('./hooks', () => ({
 jest.mock('hooks', () => ({
   reduxHooks: {
     usePlatformSettingsData: jest.fn(() => ({
-      courseSearchUrl: 'test-course-search-url',
+      courseSearchUrl: '/test-course-search-url',
     })),
   },
 }));

diff --git a/src/containers/LearnerDashboardHeaderVariant/CollapsedHeader/CollapseMenuBody.jsx b/src/containers/LearnerDashboardHeaderVariant/CollapsedHeader/CollapseMenuBody.jsx
@@ -21,7 +21,7 @@ export const CollapseMenuBody = ({ isOpen }) => {
   const dashboard = reduxHooks.useEnterpriseDashboardData();
   const { courseSearchUrl } = reduxHooks.usePlatformSettingsData();
 
-  const exploreCoursesClick = findCoursesNavDropdownClicked(courseSearchUrl);
+  const exploreCoursesClick = findCoursesNavDropdownClicked(urls.baseAppUrl(courseSearchUrl));
 
   return (
     isOpen && (
@@ -34,7 +34,7 @@ export const CollapseMenuBody = ({ isOpen }) => {
         </Button>
         <Button
           as="a"
-          href={courseSearchUrl}
+          href={urls.baseAppUrl(courseSearchUrl)}
           variant="inverse-primary"
           onClick={exploreCoursesClick}
         >

diff --git a/src/containers/LearnerDashboardHeaderVariant/CollapsedHeader/CollapseMenuBody.test.jsx b/src/containers/LearnerDashboardHeaderVariant/CollapsedHeader/CollapseMenuBody.test.jsx
@@ -17,7 +17,7 @@ jest.mock('hooks', () => ({
       url: 'url',
     }),
     usePlatformSettingsData: () => ({
-      courseSearchUrl: 'courseSearchUrl',
+      courseSearchUrl: '/courseSearchUrl',
     }),
   },
 }));

diff --git a/...earnerDashboardHeaderVariant/CollapsedHeader/__snapshots__/CollapseMenuBody.test.jsx.snap b/...earnerDashboardHeaderVariant/CollapsedHeader/__snapshots__/CollapseMenuBody.test.jsx.snap
@@ -20,8 +20,8 @@ exports[`CollapseMenuBody render 1`] = `
   </Button>
   <Button
     as="a"
-    href="courseSearchUrl"
-    onClick={[MockFunction findCoursesNavDropdownClicked("courseSearchUrl")]}
+    href="http://localhost:18000/courseSearchUrl"
+    onClick={[MockFunction findCoursesNavDropdownClicked("http://localhost:18000/courseSearchUrl")]}
     variant="inverse-primary"
   >
     Discover New
@@ -86,8 +86,8 @@ exports[`CollapseMenuBody render unauthenticated 1`] = `
   </Button>
   <Button
     as="a"
-    href="courseSearchUrl"
-    onClick={[MockFunction findCoursesNavDropdownClicked("courseSearchUrl")]}
+    href="http://localhost:18000/courseSearchUrl"
+    onClick={[MockFunction findCoursesNavDropdownClicked("http://localhost:18000/courseSearchUrl")]}
     variant="inverse-primary"
   >
     Discover New

diff --git a/...containers/LearnerDashboardHeaderVariant/ExpandedHeader/__snapshots__/index.test.jsx.snap b/...containers/LearnerDashboardHeaderVariant/ExpandedHeader/__snapshots__/index.test.jsx.snap
@@ -27,8 +27,8 @@ exports[`ExpandedHeader render 1`] = `
     <Button
       as="a"
       className="p-4"
-      href="courseSearchUrl"
-      onClick={[MockFunction findCoursesNavClicked("courseSearchUrl")]}
+      href="http://localhost:18000/courseSearchUrl"
+      onClick={[MockFunction findCoursesNavClicked("http://localhost:18000/courseSearchUrl")]}
       variant="inverse-primary"
     >
       Discover New

diff --git a/src/containers/LearnerDashboardHeaderVariant/ExpandedHeader/index.jsx b/src/containers/LearnerDashboardHeaderVariant/ExpandedHeader/index.jsx
@@ -18,7 +18,7 @@ export const ExpandedHeader = () => {
   const { courseSearchUrl } = reduxHooks.usePlatformSettingsData();
   const isCollapsed = useIsCollapsed();
 
-  const exploreCoursesClick = findCoursesNavClicked(courseSearchUrl);
+  const exploreCoursesClick = findCoursesNavClicked(urls.baseAppUrl(courseSearchUrl));
 
   return (
     !isCollapsed && (
@@ -44,7 +44,7 @@ export const ExpandedHeader = () => {
         </Button>
         <Button
           as="a"
-          href={courseSearchUrl}
+          href={urls.baseAppUrl(courseSearchUrl)}
           variant="inverse-primary"
           className="p-4"
           onClick={exploreCoursesClick}

diff --git a/src/containers/LearnerDashboardHeaderVariant/ExpandedHeader/index.test.jsx b/src/containers/LearnerDashboardHeaderVariant/ExpandedHeader/index.test.jsx
@@ -6,12 +6,13 @@ import { useIsCollapsed } from '../hooks';
 
 jest.mock('data/services/lms/urls', () => ({
   programsUrl: 'programsUrl',
+  baseAppUrl: url => (`http://localhost:18000${url}`),
 }));
 
 jest.mock('hooks', () => ({
   reduxHooks: {
     usePlatformSettingsData: () => ({
-      courseSearchUrl: 'courseSearchUrl',
+      courseSearchUrl: '/courseSearchUrl',
     }),
   },
 }));

diff --git a/src/data/services/lms/urls.js b/src/data/services/lms/urls.js
@@ -15,7 +15,7 @@ const updateEmailSettings = `${getApi()}/change_email_settings`;
 const entitlementEnrollment = (uuid) => `${getApi()}/entitlements/v1/entitlements/${uuid}/enrollments`;
 
 // if url is null or absolute, return it as is
-const updateUrl = (base, url) => ((url == null || url.startsWith('http://') || url.startsWith('https://')) ? url : `${base}${url}`);
+export const updateUrl = (base, url) => ((url == null || url.startsWith('http://') || url.startsWith('https://')) ? url : `${base}${url}`);
 
 export const baseAppUrl = (url) => updateUrl(getBaseUrl(), url);
 export const learningMfeUrl = (url) => updateUrl(getConfig().LEARNING_BASE_URL, url);

diff --git a/src/widgets/LookingForChallengeWidget/__snapshots__/index.test.jsx.snap b/src/widgets/LookingForChallengeWidget/__snapshots__/index.test.jsx.snap
@@ -18,8 +18,8 @@ exports[`LookingForChallengeWidget snapshots default 1`] = `
     <h5>
       <Hyperlink
         className="d-flex align-items-center"
-        destination="course-search-url"
-        onClick={[MockFunction track.findCoursesWidgetClicked('course-search-url')]}
+        destination="http://localhost:18000/course-search-url"
+        onClick={[MockFunction track.findCoursesWidgetClicked('http://localhost:18000/course-search-url')]}
         variant="brand"
       >
         <format-message-function

diff --git a/src/widgets/LookingForChallengeWidget/index.jsx b/src/widgets/LookingForChallengeWidget/index.jsx
@@ -6,6 +6,7 @@ import { ArrowForward } from '@edx/paragon/icons';
 
 import { reduxHooks } from 'hooks';
 import moreCoursesSVG from 'assets/more-courses-sidewidget.svg';
+import { baseAppUrl } from 'data/services/lms/urls';
 
 import track from '../RecommendationsPanel/track';
 import messages from './messages';
@@ -29,8 +30,8 @@ export const LookingForChallengeWidget = () => {
         <h5>
           <Hyperlink
             variant="brand"
-            destination={courseSearchUrl}
-            onClick={track.findCoursesWidgetClicked(courseSearchUrl)}
+            destination={baseAppUrl(courseSearchUrl)}
+            onClick={track.findCoursesWidgetClicked(baseAppUrl(courseSearchUrl))}
             className="d-flex align-items-center"
           >
             {formatMessage(messages.findCoursesButton, { arrow: arrowIcon })}

diff --git a/src/widgets/LookingForChallengeWidget/index.test.jsx b/src/widgets/LookingForChallengeWidget/index.test.jsx
@@ -5,7 +5,7 @@ import LookingForChallengeWidget from '.';
 jest.mock('hooks', () => ({
   reduxHooks: {
     usePlatformSettingsData: () => ({
-      courseSearchUrl: 'course-search-url',
+      courseSearchUrl: 'http://localhost:18000/course-search-url',
     }),
   },
 }));

diff --git a/src/widgets/RecommendationsPanel/LoadedView.jsx b/src/widgets/RecommendationsPanel/LoadedView.jsx
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button } from '@edx/paragon';
 import { Search } from '@edx/paragon/icons';
+import { baseAppUrl } from 'data/services/lms/urls';
 
 import { reduxHooks } from 'hooks';
 import track from './track';
@@ -38,8 +39,8 @@ export const LoadedView = ({
           variant="tertiary"
           iconBefore={Search}
           as="a"
-          href={courseSearchUrl}
-          onClick={track.findCoursesWidgetClicked(courseSearchUrl)}
+          href={baseAppUrl(courseSearchUrl)}
+          onClick={track.findCoursesWidgetClicked(baseAppUrl(courseSearchUrl))}
         >
           {formatMessage(messages.exploreCoursesButton)}
         </Button>

diff --git a/src/widgets/RecommendationsPanel/LoadedView.test.jsx b/src/widgets/RecommendationsPanel/LoadedView.test.jsx
@@ -5,17 +5,20 @@ import LoadedView from './LoadedView';
 import mockData from './mockData';
 import messages from './messages';
 
-jest.mock('./components/CourseCard', () => 'CourseCard');
 jest.mock('hooks', () => ({
   reduxHooks: {
     usePlatformSettingsData: () => ({
-      courseSearchUrl: 'course-search-url',
+      courseSearchUrl: '/course-search-url',
     }),
   },
 }));
+jest.mock('data/services/lms/urls', () => ({
+  baseAppUrl: (url) => (`http://localhost:18000${url}`),
+}));
 jest.mock('./track', () => ({
   findCoursesWidgetClicked: (href) => jest.fn().mockName(`track.findCoursesWidgetClicked('${href}')`),
 }));
+jest.mock('./components/CourseCard', () => 'CourseCard');
 
 describe('RecommendationsPanel LoadedView', () => {
   const props = {

diff --git a/src/widgets/RecommendationsPanel/__snapshots__/LoadedView.test.jsx.snap b/src/widgets/RecommendationsPanel/__snapshots__/LoadedView.test.jsx.snap
@@ -64,9 +64,9 @@ exports[`RecommendationsPanel LoadedView snapshot with personalize recommendatio
   >
     <Button
       as="a"
-      href="course-search-url"
+      href="http://localhost:18000/course-search-url"
       iconBefore={[MockFunction icons.Search]}
-      onClick={[MockFunction track.findCoursesWidgetClicked('course-search-url')]}
+      onClick={[MockFunction track.findCoursesWidgetClicked('http://localhost:18000/course-search-url')]}
       variant="tertiary"
     >
       Explore courses
@@ -139,9 +139,9 @@ exports[`RecommendationsPanel LoadedView snapshot without personalize recommenda
   >
     <Button
       as="a"
-      href="course-search-url"
+      href="http://localhost:18000/course-search-url"
       iconBefore={[MockFunction icons.Search]}
-      onClick={[MockFunction track.findCoursesWidgetClicked('course-search-url')]}
+      onClick={[MockFunction track.findCoursesWidgetClicked('http://localhost:18000/course-search-url')]}
       variant="tertiary"
     >
       Explore courses