feat: [FC-0044] Course unit page - Display sidebar component

src/constants.js

@@ -26,6 +26,10 @@ export const NOTIFICATION_MESSAGES = {
   deleting: 'Deleting',
   copying: 'Copying',
   pasting: 'Pasting',
+  discardChanges: 'Discarding changes',
+  publishing: 'Publishing',
+  hidingFromStudents: 'Hiding from students',
+  makingVisibleToStudents: 'Making visible to students',
   empty: '',
 };
 

src/course-outline/CourseOutline.jsx

@@ -24,8 +24,11 @@ import { RequestStatus } from '../data/constants';
 import SubHeader from '../generic/sub-header/SubHeader';
 import ProcessingNotification from '../generic/processing-notification';
 import InternetConnectionAlert from '../generic/internet-connection-alert';
+import DeleteModal from '../generic/delete-modal/DeleteModal';
 import AlertMessage from '../generic/alert-message';
 import getPageHeadTitle from '../generic/utils';
+import { getCurrentItem } from './data/selectors';
+import { COURSE_BLOCK_NAMES } from './constants';
 import HeaderNavigations from './header-navigations/HeaderNavigations';
 import OutlineSideBar from './outline-sidebar/OutlineSidebar';
 import StatusBar from './status-bar/StatusBar';
@@ -37,7 +40,6 @@ import HighlightsModal from './highlights-modal/HighlightsModal';
 import EmptyPlaceholder from './empty-placeholder/EmptyPlaceholder';
 import PublishModal from './publish-modal/PublishModal';
 import ConfigureModal from './configure-modal/ConfigureModal';
-import DeleteModal from './delete-modal/DeleteModal';
 import PageAlerts from './page-alerts/PageAlerts';
 import { useCourseOutline } from './hooks';
 import messages from './messages';
@@ -115,6 +117,9 @@ const CourseOutline = ({ courseId }) => {
     title: processingNotificationTitle,
   } = useSelector(getProcessingNotification);
 
+  const { category } = useSelector(getCurrentItem);
+  const deleteCategory = COURSE_BLOCK_NAMES[category]?.name.toLowerCase();
+
   const finalizeSectionOrder = () => (newSections) => {
     initialSections = [...sectionsList];
     handleSectionDragAndDrop(newSections.map(section => section.id), () => {
@@ -459,6 +464,7 @@ const CourseOutline = ({ courseId }) => {
           onConfigureSubmit={handleConfigureItemSubmit}
         />
         <DeleteModal
+          category={deleteCategory}
           isOpen={isDeleteModalOpen}
           close={closeDeleteModal}
           onDeleteSubmit={handleDeleteItemSubmit}

src/course-unit/CourseUnit.jsx

@@ -1,22 +1,26 @@
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
-import { Container, Layout } from '@openedx/paragon';
+import { Container, Layout, Stack } from '@openedx/paragon';
 import { useIntl, injectIntl } from '@edx/frontend-platform/i18n';
 import { ErrorAlert } from '@edx/frontend-lib-content-components';
+import { Warning as WarningIcon } from '@openedx/paragon/icons';
 
 import { getProcessingNotification } from '../generic/processing-notification/data/selectors';
 import SubHeader from '../generic/sub-header/SubHeader';
 import { RequestStatus } from '../data/constants';
 import getPageHeadTitle from '../generic/utils';
+import AlertMessage from '../generic/alert-message';
 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 CourseXBlock from './course-xblock/CourseXBlock';
 import HeaderTitle from './header-title/HeaderTitle';
 import Breadcrumbs from './breadcrumbs/Breadcrumbs';
 import HeaderNavigations from './header-navigations/HeaderNavigations';
 import Sequence from './course-sequence';
+import Sidebar from './sidebar';
 import { useCourseUnit } from './hooks';
 import messages from './messages';
 
@@ -31,12 +35,15 @@ const CourseUnit = ({ courseId }) => {
     savingStatus,
     isTitleEditFormOpen,
     isErrorAlert,
+    currentlyVisibleToStudents,
     isInternetConnectionAlertFailed,
+    unitXBlockActions,
     handleTitleEditSubmit,
     headerNavigationsActions,
     handleTitleEdit,
     handleInternetConnectionFailed,
     handleCreateNewCourseXBlock,
+    courseVerticalChildren,
   } = useCourseUnit({ courseId, blockId });
 
   document.title = getPageHeadTitle('', unitTitle);
@@ -83,19 +90,43 @@ const CourseUnit = ({ courseId }) => {
             handleCreateNewCourseXBlock={handleCreateNewCourseXBlock}
           />
           <Layout
-            lg={[{ span: 9 }, { span: 3 }]}
-            md={[{ span: 9 }, { span: 3 }]}
-            sm={[{ span: 9 }, { span: 3 }]}
+            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 }]}
           >
             <Layout.Element>
+              {currentlyVisibleToStudents && (
+                <AlertMessage
+                  title={intl.formatMessage(messages.alertUnpublishedVersion)}
+                  variant="warning"
+                  icon={WarningIcon}
+                />
+              )}
+              <Stack gap={4} className="mb-4">
+                {courseVerticalChildren.children.map(({ name, blockId: id, shouldScroll }) => (
+                  <CourseXBlock
+                    id={id}
+                    key={id}
+                    title={name}
+                    shouldScroll={shouldScroll}
+                    unitXBlockActions={unitXBlockActions}
+                    data-testid="course-xblock"
+                  />
+                ))}
+              </Stack>
               <AddComponent
                 blockId={blockId}
                 handleCreateNewCourseXBlock={handleCreateNewCourseXBlock}
               />
             </Layout.Element>
-            <Layout.Element />
+            <Layout.Element>
+              <Stack gap={3}>
+                <Sidebar blockId={blockId} data-testid="course-unit-sidebar" />
+                <Sidebar isDisplayUnitLocation data-testid="course-unit-location-sidebar" />
+              </Stack>
+            </Layout.Element>
           </Layout>
         </section>
       </Container>

src/course-unit/CourseUnit.scss

@@ -1,3 +1,5 @@
 @import "./breadcrumbs/Breadcrumbs";
 @import "./course-sequence/CourseSequence";
 @import "./add-component/AddComponent";
+@import "./course-xblock/CourseXblock";
+@import "./sidebar/Sidebar";