feat: unit list

refactor: hide tooltip based on arg

refactor: card header to include title link

feat: delete unit option

feat: duplicate unit option

refactor: title click handler name and remove unwanted scss properties

test: new unit and edit unit option

test: add delete unit and combine it with section and subsection test

test: add duplicate unit test and combine it with section & subsection test

refactor: replace act call by oneline

test: add publish unit & subsection test and combine it with section test

refactor: add jest-expect-message to add custom msg to tests

fix: lint issues

test: fix unit card tests

refactor: remove unnecessary css and message

refactor: pass title as component to card header

refactor: extract status badge to a component

fix: lint issues

refactor: rename status badge component

test: fix card header tests

refactor: new item button styling

feat: show loading spinner while sections are loading

refactor: new button style

jest.config.js

@@ -2,6 +2,7 @@ const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('jest', {
   setupFilesAfterEnv: [
+    'jest-expect-message',
     '<rootDir>/src/setupTest.js',
   ],
   coveragePathIgnorePatterns: [

package.json

@@ -93,6 +93,7 @@
     "glob": "7.2.3",
     "husky": "7.0.4",
     "jest-canvas-mock": "^2.5.2",
+    "jest-expect-message": "^1.1.3",
     "react-test-renderer": "17.0.2",
     "reactifex": "1.1.1",
     "ts-loader": "^9.5.0"

src/course-outline/CourseOutline.jsx

@@ -7,6 +7,7 @@ import {
   Button,
   Container,
   Layout,
+  Row,
   TransitionReplace,
 } from '@edx/paragon';
 import { Helmet } from 'react-helmet';
@@ -22,6 +23,7 @@ import {
   ErrorAlert,
 } from '@edx/frontend-lib-content-components';
 
+import { LoadingSpinner } from '../generic/Loading';
 import { getProcessingNotification } from '../generic/processing-notification/data/selectors';
 import { RequestStatus } from '../data/constants';
 import SubHeader from '../generic/sub-header/SubHeader';
@@ -35,6 +37,7 @@ import StatusBar from './status-bar/StatusBar';
 import EnableHighlightsModal from './enable-highlights-modal/EnableHighlightsModal';
 import SectionCard from './section-card/SectionCard';
 import SubsectionCard from './subsection-card/SubsectionCard';
+import UnitCard from './unit-card/UnitCard';
 import HighlightsModal from './highlights-modal/HighlightsModal';
 import EmptyPlaceholder from './empty-placeholder/EmptyPlaceholder';
 import PublishModal from './publish-modal/PublishModal';
@@ -83,8 +86,11 @@ const CourseOutline = ({ courseId }) => {
     handleDeleteItemSubmit,
     handleDuplicateSectionSubmit,
     handleDuplicateSubsectionSubmit,
+    handleDuplicateUnitSubmit,
     handleNewSectionSubmit,
     handleNewSubsectionSubmit,
+    handleNewUnitSubmit,
+    getUnitUrl,
     handleDragNDrop,
   } = useCourseOutline({ courseId });
 
@@ -109,7 +115,11 @@ const CourseOutline = ({ courseId }) => {
 
   if (isLoading) {
     // eslint-disable-next-line react/jsx-no-useless-fragment
-    return <></>;
+    return (
+      <Row className="m-0 mt-4 justify-content-center">
+        <LoadingSpinner />
+      </Row>
+    );
   }
 
   return (
@@ -207,7 +217,23 @@ const CourseOutline = ({ courseId }) => {
                                       onOpenDeleteModal={openDeleteModal}
                                       onEditSubmit={handleEditSubmit}
                                       onDuplicateSubmit={handleDuplicateSubsectionSubmit}
-                                    />
+                                      onNewUnitSubmit={handleNewUnitSubmit}
+                                    >
+                                      {subsection.childInfo.children.map((unit) => (
+                                        <UnitCard
+                                          key={unit.id}
+                                          unit={unit}
+                                          subsection={subsection}
+                                          section={section}
+                                          savingStatus={savingStatus}
+                                          onOpenPublishModal={openPublishModal}
+                                          onOpenDeleteModal={openDeleteModal}
+                                          onEditSubmit={handleEditSubmit}
+                                          onDuplicateSubmit={handleDuplicateUnitSubmit}
+                                          getTitleLink={getUnitUrl}
+                                        />
+                                      ))}
+                                    </SubsectionCard>
                                   ))}
                                 </SectionCard>
                               </SortableItem>

src/course-outline/CourseOutline.scss

@@ -2,6 +2,7 @@
 @import "./status-bar/StatusBar";
 @import "./section-card/SectionCard";
 @import "./subsection-card/SubsectionCard";
+@import "./unit-card/UnitCard";
 @import "./card-header/CardHeader";
 @import "./empty-placeholder/EmptyPlaceholder";
 @import "./highlights-modal/HighlightsModal";