fix: [AXIMST-558] Course unit - Fixed loading errors and PropTypes (#199

) * fix: [AXIMST-558] fixed Course unit loading * refactor: changed selector name
openedx · Mar 18, 2024 · a68fc60 · a68fc60
1 parent 07819b8
commit a68fc60
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 14 deletions.
diff --git a/src/course-unit/CourseUnit.test.jsx b/src/course-unit/CourseUnit.test.jsx
@@ -1020,7 +1020,9 @@ describe('<CourseUnit />', () => {
 
       userEvent.click(getByRole('button', { name: pasteComponentMessages.pasteComponentButtonText.defaultMessage }));
 
-      expect(getAllByTestId('course-xblock')).toHaveLength(2);
+      await waitFor(() => {
+        expect(getAllByTestId('course-xblock')).toHaveLength(2);
+      });
 
       axiosMock
         .onGet(getCourseVerticalChildrenApiUrl(blockId))
@@ -1097,9 +1099,11 @@ describe('<CourseUnit />', () => {
         courseUnitMock,
       ]);
 
-      units = getAllByTestId('course-unit-btn');
-      const courseUnits = courseSectionVerticalMock.xblock_info.ancestor_info.ancestors[0].child_info.children;
-      expect(units).toHaveLength(courseUnits.length);
+      await waitFor(() => {
+        units = getAllByTestId('course-unit-btn');
+        const courseUnits = courseSectionVerticalMock.xblock_info.ancestor_info.ancestors[0].child_info.children;
+        expect(units).toHaveLength(courseUnits.length);
+      });
 
       axiosMock
         .onPost(postXBlockBaseApiUrl(), postXBlockBody)

diff --git a/src/course-unit/clipboard/paste-notification/index.jsx b/src/course-unit/clipboard/paste-notification/index.jsx
@@ -97,14 +97,12 @@ const PastNotificationAlert = ({ staticFileNotices, courseId }) => {
 
 PastNotificationAlert.propTypes = {
   courseId: PropTypes.string.isRequired,
-  staticFileNotices: PropTypes.oneOfType([
+  staticFileNotices:
     PropTypes.objectOf({
       conflictingFiles: PropTypes.arrayOf(PropTypes.string),
       errorFiles: PropTypes.arrayOf(PropTypes.string),
       newFiles: PropTypes.arrayOf(PropTypes.string),
     }),
-    PropTypes.arrayOf(PropTypes.string),
-  ]),
 };
 
 PastNotificationAlert.defaultProps = {

diff --git a/src/course-unit/course-xblock/CourseXBlock.scss b/src/course-unit/course-xblock/CourseXBlock.scss
@@ -3,9 +3,17 @@
     .pgn__card-header {
       display: flex;
       justify-content: space-between;
-      align-items: center;
       border-bottom: 1px solid $light-400;
       padding-bottom: map-get($spacers, 2);
+
+      &:not(:has(.pgn__card-header-subtitle-md)) {
+        align-items: center;
+      }
+    }
+
+    .pgn__card-header-subtitle-md {
+      margin-top: 0;
+      font-size: $font-size-sm;
     }
 
     .pgn__card-header-title-md {

diff --git a/src/course-unit/data/selectors.js b/src/course-unit/data/selectors.js
@@ -1,13 +1,21 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { RequestStatus } from 'CourseAuthoring/data/constants';
+
 export const getCourseUnitData = (state) => state.courseUnit.unit;
 export const getCanEdit = (state) => state.courseUnit.canEdit;
 export const getStaticFileNotices = (state) => state.courseUnit.staticFileNotices;
 export const getCourseUnit = (state) => state.courseUnit;
 export const getSavingStatus = (state) => state.courseUnit.savingStatus;
-export const getLoadingStatus = (state) => state.courseUnit.loadingStatus;
 export const getSequenceStatus = (state) => state.courseUnit.sequenceStatus;
 export const getSequenceIds = (state) => state.courseUnit.courseSectionVertical.courseSequenceIds;
 export const getCourseSectionVertical = (state) => state.courseUnit.courseSectionVertical;
 export const getCourseId = (state) => state.courseDetail.courseId;
 export const getSequenceId = (state) => state.courseUnit.sequenceId;
 export const getCourseVerticalChildren = (state) => state.courseUnit.courseVerticalChildren;
-export const getClipboardData = state => state.courseUnit.clipboardData;
+export const getClipboardData = (state) => state.courseUnit.clipboardData;
+const getLoadingStatuses = (state) => state.courseUnit.loadingStatus;
+export const getIsLoading = createSelector(
+  [getLoadingStatuses],
+  loadingStatus => Object.values(loadingStatus)
+    .some((status) => status === RequestStatus.IN_PROGRESS),
+);
diff --git a/src/course-unit/hooks.jsx b/src/course-unit/hooks.jsx
@@ -17,7 +17,7 @@ import {
   getCourseSectionVertical,
   getCourseVerticalChildren,
   getCourseUnitData,
-  getLoadingStatus,
+  getIsLoading,
   getSavingStatus,
   getSequenceStatus,
   getStaticFileNotices,
@@ -35,7 +35,7 @@ export const useCourseUnit = ({ courseId, blockId }) => {
   const [hasInternetConnectionError, setInternetConnectionError] = useState(false);
   const courseUnit = useSelector(getCourseUnitData);
   const savingStatus = useSelector(getSavingStatus);
-  const loadingStatus = useSelector(getLoadingStatus);
+  const isLoading = useSelector(getIsLoading);
   const sequenceStatus = useSelector(getSequenceStatus);
   const { draftPreviewLink, publishedPreviewLink } = useSelector(getCourseSectionVertical);
   const courseVerticalChildren = useSelector(getCourseVerticalChildren);
@@ -125,8 +125,7 @@ export const useCourseUnit = ({ courseId, blockId }) => {
     isErrorAlert,
     staticFileNotices,
     currentlyVisibleToStudents,
-    isLoading: loadingStatus.fetchUnitLoadingStatus === RequestStatus.IN_PROGRESS
-      || loadingStatus.courseSectionVerticalLoadingStatus === RequestStatus.IN_PROGRESS,
+    isLoading,
     isTitleEditFormOpen,
     isInternetConnectionAlertFailed: savingStatus === RequestStatus.FAILED,
     sharedClipboardData,