feat: [AXIMST-221] Course unit - use view live and preview links from…

… backend

.env

@@ -9,7 +9,6 @@ EXAMS_BASE_URL=''
 FAVICON_URL=''
 LANGUAGE_PREFERENCE_COOKIE_NAME=''
 LMS_BASE_URL=''
-PREVIEW_BASE_URL=''
 LEARNING_BASE_URL=''
 LOGIN_URL=''
 LOGO_TRADEMARK_URL=''

.env.development

@@ -43,4 +43,3 @@ HOTJAR_VERSION=6
 HOTJAR_DEBUG=true
 INVITE_STUDENTS_EMAIL_TO="someone@domain.com"
 AI_TRANSLATIONS_BASE_URL='http://localhost:18760'
-PREVIEW_BASE_URL='http://preview.localhost:18000'

.env.test

@@ -8,7 +8,6 @@ EXAMS_BASE_URL=
 FAVICON_URL='https://edx-cdn.org/v3/default/favicon.ico'
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 LMS_BASE_URL='http://localhost:18000'
-PREVIEW_BASE_URL='http://preview.localhost:18000'
 LEARNING_BASE_URL='http://localhost:2000'
 LOGIN_URL='http://localhost:18000/login'
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg

src/course-unit/CourseUnit.test.jsx

@@ -5,7 +5,7 @@ import {
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
-import { getConfig, initializeMockApp } from '@edx/frontend-platform';
+import { initializeMockApp } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
 import {
@@ -26,12 +26,10 @@ import { executeThunk } from '../utils';
 import CourseUnit from './CourseUnit';
 import headerNavigationsMessages from './header-navigations/messages';
 import headerTitleMessages from './header-title/messages';
-import { getUnitPreviewPath, getUnitViewLivePath } from './utils';
 
 let axiosMock;
 let store;
 const courseId = '123';
-const sectionId = '19a30717eff543078a5d94ae9d6c18a5';
 const blockId = '567890';
 const unitDisplayName = courseUnitIndexMock.metadata.display_name;
 
@@ -91,19 +89,21 @@ describe('<CourseUnit />', () => {
     const { open } = window;
     window.open = jest.fn();
     const { getByRole } = render(<RootWrapper />);
+    const {
+      draft_preview_link: draftPreviewLink,
+      published_preview_link: publishedPreviewLink,
+    } = courseSectionVerticalMock;
 
     await waitFor(() => {
       const viewLiveButton = getByRole('button', { name: headerNavigationsMessages.viewLiveButton.defaultMessage });
       userEvent.click(viewLiveButton);
       expect(window.open).toHaveBeenCalled();
-      const VIEW_LIVE_LINK = getConfig().LMS_BASE_URL + getUnitViewLivePath(courseId, blockId);
-      expect(window.open).toHaveBeenCalledWith(VIEW_LIVE_LINK, '_blank');
+      expect(window.open).toHaveBeenCalledWith(publishedPreviewLink, '_blank');
 
       const previewButton = getByRole('button', { name: headerNavigationsMessages.previewButton.defaultMessage });
       userEvent.click(previewButton);
       expect(window.open).toHaveBeenCalled();
-      const PREVIEW_LINK = getConfig().PREVIEW_BASE_URL + getUnitPreviewPath(courseId, sectionId, blockId);
-      expect(window.open).toHaveBeenCalledWith(PREVIEW_LINK, '_blank');
+      expect(window.open).toHaveBeenCalledWith(draftPreviewLink, '_blank');
     });
 
     window.open = open;

src/course-unit/hooks.jsx

@@ -1,6 +1,5 @@
-import { useContext, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { AppContext } from '@edx/frontend-platform/react';
 import { useNavigate } from 'react-router-dom';
 
 import { RequestStatus } from '../data/constants';
@@ -12,21 +11,21 @@ import {
   fetchCourseSectionVerticalData,
 } from './data/thunk';
 import {
+  getCourseSectionVertical,
   getCourseUnitData,
   getLoadingStatus,
   getSavingStatus,
 } from './data/selectors';
 import { updateSavingStatus } from './data/slice';
-import { getUnitViewLivePath, getUnitPreviewPath } from './utils';
 
 // eslint-disable-next-line import/prefer-default-export
 export const useCourseUnit = ({ courseId, blockId }) => {
   const dispatch = useDispatch();
 
-  const { config } = useContext(AppContext);
   const courseUnit = useSelector(getCourseUnitData);
   const savingStatus = useSelector(getSavingStatus);
   const loadingStatus = useSelector(getLoadingStatus);
+  const { draftPreviewLink, publishedPreviewLink } = useSelector(getCourseSectionVertical);
   const navigate = useNavigate();
   const [isTitleEditFormOpen, toggleTitleEditForm] = useState(false);
 
@@ -35,11 +34,10 @@ export const useCourseUnit = ({ courseId, blockId }) => {
 
   const headerNavigationsActions = {
     handleViewLive: () => {
-      window.open(config.LMS_BASE_URL + getUnitViewLivePath(courseId, blockId), '_blank');
+      window.open(publishedPreviewLink, '_blank');
     },
     handlePreview: () => {
-      const sectionId = courseUnit.ancestorInfo?.ancestors[0]?.id.split('@').pop();
-      window.open(config.PREVIEW_BASE_URL + getUnitPreviewPath(courseId, sectionId, blockId), '_blank');
+      window.open(draftPreviewLink, '_blank');
     },
   };
 

src/index.jsx

@@ -101,7 +101,6 @@ initialize({
         SUPPORT_URL: process.env.SUPPORT_URL || null,
         SUPPORT_EMAIL: process.env.SUPPORT_EMAIL || null,
         LEARNING_BASE_URL: process.env.LEARNING_BASE_URL,
-        PREVIEW_BASE_URL: process.env.PREVIEW_BASE_URL,
         EXAMS_BASE_URL: process.env.EXAMS_BASE_URL || null,
         CALCULATOR_HELP_URL: process.env.CALCULATOR_HELP_URL || null,
         ENABLE_PROGRESS_GRAPH_SETTINGS: process.env.ENABLE_PROGRESS_GRAPH_SETTINGS || 'false',

src/setupTest.js

@@ -50,7 +50,6 @@ mergeConfig({
   CALCULATOR_HELP_URL: process.env.CALCULATOR_HELP_URL || null,
   ENABLE_PROGRESS_GRAPH_SETTINGS: process.env.ENABLE_PROGRESS_GRAPH_SETTINGS || 'false',
   ENABLE_TEAM_TYPE_SETTING: process.env.ENABLE_TEAM_TYPE_SETTING === 'true',
-  PREVIEW_BASE_URL: process.env.PREVIEW_BASE_URL || '',
 }, 'CourseAuthoringConfig');
 
 // Mock the plugins repo so jest will stop complaining about ES6 syntax