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

… backend (#101)

* feat: [AXIMST-15] Course unit - add new component section

* 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

@@ -42,4 +42,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.jsx

@@ -12,6 +12,7 @@ import getPageHeadTitle from '../generic/utils';
 import ProcessingNotification from '../generic/processing-notification';
 import InternetConnectionAlert from '../generic/internet-connection-alert';
 import Loading from '../generic/Loading';
+import AddComponent from './add-component/AddComponent';
 import HeaderTitle from './header-title/HeaderTitle';
 import Breadcrumbs from './breadcrumbs/Breadcrumbs';
 import HeaderNavigations from './header-navigations/HeaderNavigations';
@@ -87,9 +88,9 @@ const CourseUnit = ({ courseId }) => {
             xl={[{ span: 9 }, { span: 3 }]}
           >
             <Layout.Element>
-              {/* TODO: Unit content will be added in the following tasks. */}
-              Unit content
+              <AddComponent />
             </Layout.Element>
+            <Layout.Element />
           </Layout>
         </section>
       </Container>

src/course-unit/CourseUnit.scss

@@ -1,2 +1,3 @@
 @import "./breadcrumbs/Breadcrumbs";
 @import "./course-sequence/CourseSequence";
+@import "./add-component/AddComponent";

src/course-unit/CourseUnit.test.jsx

@@ -5,31 +5,31 @@ 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 {
+  getCourseSectionVerticalApiUrl,
   getCourseUnitApiUrl,
   getXBlockBaseApiUrl,
 } from './data/api';
 import {
+  fetchCourseSectionVerticalData,
   fetchCourseUnitQuery,
 } from './data/thunk';
 import initializeStore from '../store';
 import {
+  courseSectionVerticalMock,
   courseUnitIndexMock,
 } from './__mocks__';
 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 = 'graded_interactions';
-const subsectionId = '19a30717eff543078a5d94ae9d6c18a5';
 const blockId = '567890';
 const unitDisplayName = courseUnitIndexMock.metadata.display_name;
 
@@ -63,6 +63,10 @@ describe('<CourseUnit />', () => {
       .onGet(getCourseUnitApiUrl(courseId))
       .reply(200, courseUnitIndexMock);
     await executeThunk(fetchCourseUnitQuery(courseId), store.dispatch);
+    axiosMock
+      .onGet(getCourseSectionVerticalApiUrl(blockId))
+      .reply(200, courseSectionVerticalMock);
+    await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
   });
 
   it('render CourseUnit component correctly', async () => {
@@ -85,20 +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();
-      // eslint-disable-next-line max-len
-      const PREVIEW_LINK = getConfig().PREVIEW_BASE_URL + getUnitPreviewPath(courseId, sectionId, subsectionId, blockId);
-      expect(window.open).toHaveBeenCalledWith(PREVIEW_LINK, '_blank');
+      expect(window.open).toHaveBeenCalledWith(draftPreviewLink, '_blank');
     });
 
     window.open = open;