feat: [FC-0070] rendering library content in unit page

Author: ihor-romaniuk

src/constants.js

@@ -58,6 +58,7 @@ export const COURSE_BLOCK_NAMES = ({
   chapter: { id: 'chapter', name: 'Section' },
   sequential: { id: 'sequential', name: 'Subsection' },
   vertical: { id: 'vertical', name: 'Unit' },
+  libraryContent: { id: 'library_content', name: 'Library content' },
   component: { id: 'component', name: 'Component' },
 });
 

src/course-team/CourseTeam.test.jsx

@@ -189,7 +189,7 @@ describe('<CourseTeam />', () => {
   });
 
   it('should delete user', async () => {
-    `cleanup();`
+    cleanup();
     axiosMock
       .onGet(getCourseTeamApiUrl(courseId))
       .reply(200, courseTeamMock);

src/course-unit/CourseUnit.jsx

@@ -22,6 +22,7 @@ import ProcessingNotification from '../generic/processing-notification';
 import { SavingErrorAlert } from '../generic/saving-error-alert';
 import ConnectionErrorAlert from '../generic/ConnectionErrorAlert';
 import Loading from '../generic/Loading';
+import { COURSE_BLOCK_NAMES } from '../constants';
 import AddComponent from './add-component/AddComponent';
 import HeaderTitle from './header-title/HeaderTitle';
 import Breadcrumbs from './breadcrumbs/Breadcrumbs';
@@ -44,6 +45,7 @@ const CourseUnit = ({ courseId }) => {
     isLoading,
     sequenceId,
     unitTitle,
+    unitCategory,
     errorMessage,
     sequenceStatus,
     savingStatus,
@@ -68,6 +70,19 @@ const CourseUnit = ({ courseId }) => {
     handleNavigateToTargetUnit,
   } = useCourseUnit({ courseId, blockId });
 
+  const isUnitVerticalType = unitCategory === COURSE_BLOCK_NAMES.vertical.id;
+  const isUnitLibraryType = unitCategory === COURSE_BLOCK_NAMES.libraryContent.id;
+
+  const unitLayout = [{ span: 12 }, { span: 0 }];
+  const defaultLayout = {
+    lg: [{ span: 8 }, { span: 4 }],
+    md: [{ span: 8 }, { span: 4 }],
+    sm: [{ span: 8 }, { span: 3 }],
+    xs: [{ span: 9 }, { span: 3 }],
+    xl: [{ span: 9 }, { span: 3 }],
+  };
+  const layoutGrid = isUnitLibraryType ? { lg: unitLayout } : defaultLayout;
+
   useEffect(() => {
     document.title = getPageHeadTitle('', unitTitle);
   }, [unitTitle]);
@@ -139,30 +154,30 @@ const CourseUnit = ({ courseId }) => {
               />
             )}
             breadcrumbs={(
-              <Breadcrumbs />
+              <Breadcrumbs
+                courseId={courseId}
+                sequenceId={sequenceId}
+              />
             )}
             headerActions={(
               <HeaderNavigations
+                unitCategory={unitCategory}
                 headerNavigationsActions={headerNavigationsActions}
               />
             )}
           />
-          <Sequence
-            courseId={courseId}
-            sequenceId={sequenceId}
-            unitId={blockId}
-            handleCreateNewCourseXBlock={handleCreateNewCourseXBlock}
-            showPasteUnit={showPasteUnit}
-          />
-          <Layout
-            lg={[{ span: 8 }, { span: 4 }]}
-            md={[{ span: 8 }, { span: 4 }]}
-            sm={[{ span: 8 }, { span: 3 }]}
-            xs={[{ span: 9 }, { span: 3 }]}
-            xl={[{ span: 9 }, { span: 3 }]}
-          >
+          {isUnitVerticalType && (
+            <Sequence
+              courseId={courseId}
+              sequenceId={sequenceId}
+              unitId={blockId}
+              handleCreateNewCourseXBlock={handleCreateNewCourseXBlock}
+              showPasteUnit={showPasteUnit}
+            />
+          )}
+          <Layout {...layoutGrid}>
             <Layout.Element>
-              {currentlyVisibleToStudents && (
+              {!currentlyVisibleToStudents && (
                 <AlertMessage
                   className="course-unit__alert"
                   title={intl.formatMessage(messages.alertUnpublishedVersion)}
@@ -177,11 +192,13 @@ const CourseUnit = ({ courseId }) => {
                 />
               )}
               <XBlockContainerIframe blockId={blockId} />
-              <AddComponent
-                blockId={blockId}
-                handleCreateNewCourseXBlock={handleCreateNewCourseXBlock}
-              />
-              {showPasteXBlock && canPasteComponent && (
+              {isUnitVerticalType && (
+                <AddComponent
+                  blockId={blockId}
+                  handleCreateNewCourseXBlock={handleCreateNewCourseXBlock}
+                />
+              )}
+              {showPasteXBlock && canPasteComponent && isUnitVerticalType && (
                 <PasteComponent
                   clipboardData={sharedClipboardData}
                   onClick={handleCreateNewCourseXBlock}
@@ -197,18 +214,21 @@ const CourseUnit = ({ courseId }) => {
             </Layout.Element>
             <Layout.Element>
               <Stack gap={3}>
-                <Sidebar data-testid="course-unit-sidebar">
-                  <PublishControls blockId={blockId} />
-                </Sidebar>
-                {getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true'
-                && (
-                  <Sidebar className="tags-sidebar">
-                    <TagsSidebarControls />
-                  </Sidebar>
+                {isUnitVerticalType && (
+                  <>
+                    <Sidebar data-testid="course-unit-sidebar">
+                      <PublishControls blockId={blockId} />
+                    </Sidebar>
+                    {getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && (
+                      <Sidebar className="tags-sidebar">
+                        <TagsSidebarControls />
+                      </Sidebar>
+                    )}
+                    <Sidebar data-testid="course-unit-location-sidebar">
+                      <LocationInfo />
+                    </Sidebar>
+                  </>
                 )}
-                <Sidebar data-testid="course-unit-location-sidebar">
-                  <LocationInfo />
-                </Sidebar>
               </Stack>
             </Layout.Element>
           </Layout>

src/course-unit/CourseUnit.scss

@@ -5,6 +5,10 @@
 @import "./header-title/HeaderTitle";
 @import "./move-modal";
 
+.course-unit {
+  min-width: 900px;
+}
+
 .course-unit__alert {
   margin-bottom: 1.75rem;
 }

src/course-unit/CourseUnit.test.jsx

@@ -1,6 +1,6 @@
 import MockAdapter from 'axios-mock-adapter';
 import {
-  act, render, waitFor, fireEvent, within, screen,
+  act, render, waitFor, fireEvent, within,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
@@ -803,7 +803,7 @@ describe('<CourseUnit />', () => {
     axiosMock
       .onPost(getXBlockBaseApiUrl(courseUnitIndexMock.id), {
         publish: null,
-        metadata: { visible_to_staff_only: true, group_access: { 50: [2] } },
+        metadata: { visible_to_staff_only: true, group_access: { 50: [2] }, discussion_enabled: true },
       })
       .reply(200, { dummy: 'value' });
     axiosMock
@@ -1145,8 +1145,8 @@ describe('<CourseUnit />', () => {
             id: requestData.currentParentLocator,
             category: 'vertical',
             hasChildren: true,
-          }
-        }
+          },
+        },
       },
       origin: '*',
     });
@@ -1169,7 +1169,7 @@ describe('<CourseUnit />', () => {
       window.dispatchEvent(messageEvent);
 
       expect(getByText(
-        moveModalMessages.moveModalTitle.defaultMessage.replace('{displayName}', requestData.title)
+        moveModalMessages.moveModalTitle.defaultMessage.replace('{displayName}', requestData.title),
       )).toBeInTheDocument();
       expect(getByRole('button', { name: moveModalMessages.moveModalSubmitButton.defaultMessage })).toBeInTheDocument();
       expect(getByRole('button', { name: moveModalMessages.moveModalCancelButton.defaultMessage })).toBeInTheDocument();
@@ -1193,7 +1193,7 @@ describe('<CourseUnit />', () => {
       window.dispatchEvent(messageEvent);
 
       expect(getByText(
-        moveModalMessages.moveModalTitle.defaultMessage.replace('{displayName}', requestData.title)
+        moveModalMessages.moveModalTitle.defaultMessage.replace('{displayName}', requestData.title),
       )).toBeInTheDocument();
 
       const currentSection = courseOutlineInfoMock.child_info.children[1];
@@ -1211,7 +1211,7 @@ describe('<CourseUnit />', () => {
       fireEvent.click(currentSubsectionText);
 
       const currentComponentLocationText = getByText(
-        moveModalMessages.moveModalOutlineItemCurrentComponentLocationText.defaultMessage
+        moveModalMessages.moveModalOutlineItemCurrentComponentLocationText.defaultMessage,
       );
       expect(currentComponentLocationText).toBeInTheDocument();
     });