feat: [FC-0044] Course unit page - Unit creation button logic and refactoring

src/CourseAuthoringRoutes.jsx

@@ -73,6 +73,7 @@ const CourseAuthoringRoutes = () => {
         />
         {DECODED_ROUTES.COURSE_UNIT.map((path) => (
           <Route
+            key={path}
             path={path}
             element={<PageWrap><CourseUnit courseId={courseId} /></PageWrap>}
           />

src/course-unit/CourseUnit.jsx

@@ -27,14 +27,16 @@ const CourseUnit = ({ courseId }) => {
     isLoading,
     sequenceId,
     unitTitle,
+    isQueryPending,
     savingStatus,
     isTitleEditFormOpen,
+    isErrorAlert,
     isInternetConnectionAlertFailed,
     handleTitleEditSubmit,
     headerNavigationsActions,
     handleTitleEdit,
     handleInternetConnectionFailed,
-    handleCreateNewCourseXblock,
+    handleCreateNewCourseXBlock,
   } = useCourseUnit({ courseId, blockId });
 
   document.title = getPageHeadTitle('', unitTitle);
@@ -52,7 +54,7 @@ const CourseUnit = ({ courseId }) => {
     <>
       <Container size="xl" className="course-unit px-4">
         <section className="course-unit-container mb-4 mt-5">
-          <ErrorAlert hideHeading isError={savingStatus === RequestStatus.FAILED}>
+          <ErrorAlert hideHeading isError={savingStatus === RequestStatus.FAILED && isErrorAlert}>
             {intl.formatMessage(messages.alertFailedGeneric, { actionName: 'save', type: 'changes' })}
           </ErrorAlert>
           <SubHeader
@@ -78,6 +80,7 @@ const CourseUnit = ({ courseId }) => {
             courseId={courseId}
             sequenceId={sequenceId}
             unitId={blockId}
+            handleCreateNewCourseXBlock={handleCreateNewCourseXBlock}
           />
           <Layout
             lg={[{ span: 9 }, { span: 3 }]}
@@ -89,7 +92,7 @@ const CourseUnit = ({ courseId }) => {
             <Layout.Element>
               <AddComponent
                 blockId={blockId}
-                handleCreateNewCourseXblock={handleCreateNewCourseXblock}
+                handleCreateNewCourseXBlock={handleCreateNewCourseXBlock}
               />
             </Layout.Element>
             <Layout.Element />
@@ -101,11 +104,13 @@ const CourseUnit = ({ courseId }) => {
           isShow={isShowProcessingNotification}
           title={processingNotificationTitle}
         />
-        <InternetConnectionAlert
-          isFailed={isInternetConnectionAlertFailed}
-          isQueryPending={savingStatus === RequestStatus.PENDING}
-          onInternetConnectionFailed={handleInternetConnectionFailed}
-        />
+        {isQueryPending && (
+          <InternetConnectionAlert
+            isFailed={isInternetConnectionAlertFailed}
+            isQueryPending={savingStatus === RequestStatus.PENDING}
+            onInternetConnectionFailed={handleInternetConnectionFailed}
+          />
+        )}
       </div>
     </>
   );

src/course-unit/CourseUnit.test.jsx

@@ -7,6 +7,7 @@ import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { cloneDeep, set } from 'lodash';
 
 import {
   getCourseSectionVerticalApiUrl,
@@ -23,11 +24,13 @@ import {
   courseCreateXblockMock,
   courseSectionVerticalMock,
   courseUnitIndexMock,
+  courseUnitMock,
 } from './__mocks__';
 import { executeThunk } from '../utils';
 import CourseUnit from './CourseUnit';
 import headerNavigationsMessages from './header-navigations/messages';
 import headerTitleMessages from './header-title/messages';
+import courseSequenceMessages from './course-sequence/messages';
 import messages from './add-component/messages';
 
 let axiosMock;
@@ -192,6 +195,93 @@ describe('<CourseUnit />', () => {
     });
   });
 
+  it('correct addition of a new course unit after click on the "Add new unit" button', async () => {
+    const { getByRole, getAllByTestId } = render(<RootWrapper />);
+    let units = null;
+    const updatedCourseSectionVerticalData = cloneDeep(courseSectionVerticalMock);
+    const updatedAncestorsChild = updatedCourseSectionVerticalData.xblock_info.ancestor_info.ancestors[0];
+    set(updatedCourseSectionVerticalData, 'xblock_info.ancestor_info.ancestors[0].child_info.children', [
+      ...updatedAncestorsChild.child_info.children,
+      courseUnitMock,
+    ]);
+
+    await waitFor(async () => {
+      units = getAllByTestId('course-unit-btn');
+      const courseUnits = courseSectionVerticalMock.xblock_info.ancestor_info.ancestors[0].child_info.children;
+      expect(units.length).toEqual(courseUnits.length);
+    });
+
+    axiosMock
+      .onPost(postXBlockBaseApiUrl(), { parent_locator: blockId, category: 'vertical', display_name: 'Unit' })
+      .reply(200, { dummy: 'value' });
+    axiosMock.reset();
+    axiosMock
+      .onGet(getCourseSectionVerticalApiUrl(blockId))
+      .reply(200, {
+        ...updatedCourseSectionVerticalData,
+      });
+
+    await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+
+    const addNewUnitBtn = getByRole('button', { name: courseSequenceMessages.newUnitBtnText.defaultMessage });
+    units = getAllByTestId('course-unit-btn');
+    const updatedCourseUnits = updatedCourseSectionVerticalData
+      .xblock_info.ancestor_info.ancestors[0].child_info.children;
+
+    userEvent.click(addNewUnitBtn);
+    expect(units.length).toEqual(updatedCourseUnits.length);
+    expect(mockedUsedNavigate).toHaveBeenCalled();
+    expect(mockedUsedNavigate)
+      .toHaveBeenCalledWith(`/course/${courseId}/container/${blockId}/${updatedAncestorsChild.id}`, { replace: true });
+  });
+
+  it('the sequence unit is updated after changing the unit header', async () => {
+    const { getAllByTestId, getByRole } = render(<RootWrapper />);
+    const updatedCourseSectionVerticalData = cloneDeep(courseSectionVerticalMock);
+    const updatedAncestorsChild = updatedCourseSectionVerticalData.xblock_info.ancestor_info.ancestors[0];
+    set(updatedCourseSectionVerticalData, 'xblock_info.ancestor_info.ancestors[0].child_info.children', [
+      ...updatedAncestorsChild.child_info.children,
+      courseUnitMock,
+    ]);
+
+    const newDisplayName = `${unitDisplayName} new`;
+
+    axiosMock
+      .onPost(getXBlockBaseApiUrl(blockId, {
+        metadata: {
+          display_name: newDisplayName,
+        },
+      }))
+      .reply(200, { dummy: 'value' })
+      .onGet(getCourseUnitApiUrl(blockId))
+      .reply(200, {
+        ...courseUnitIndexMock,
+        metadata: {
+          ...courseUnitIndexMock.metadata,
+          display_name: newDisplayName,
+        },
+      })
+      .onGet(getCourseSectionVerticalApiUrl(blockId))
+      .reply(200, {
+        ...updatedCourseSectionVerticalData,
+      });
+
+    await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+
+    const editTitleButton = getByRole('button', { name: headerTitleMessages.altButtonEdit.defaultMessage });
+    fireEvent.click(editTitleButton);
+
+    const titleEditField = getByRole('textbox', { name: headerTitleMessages.ariaLabelButtonEdit.defaultMessage });
+    fireEvent.change(titleEditField, { target: { value: newDisplayName } });
+
+    await act(async () => fireEvent.blur(titleEditField));
+
+    await waitFor(async () => {
+      const units = getAllByTestId('course-unit-btn');
+      expect(units.some(unit => unit.title === newDisplayName)).toBe(true);
+    });
+  });
+
   it('handles creating Video xblock and navigates to editor page', async () => {
     const { courseKey, locator } = courseCreateXblockMock;
     axiosMock

src/course-unit/__mocks__/courseSectionVertical.js

@@ -498,6 +498,7 @@ module.exports = {
                   selected_groups_label: '',
                 },
                 enable_copy_paste_units: false,
+                xblock_type: 'other',
               },
               {
                 id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@4f6c1b4e316a419ab5b6bf30e6c708e9',
@@ -581,6 +582,7 @@ module.exports = {
                   selected_groups_label: '',
                 },
                 enable_copy_paste_units: false,
+                xblock_type: 'video',
               },
               {
                 id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@3dc16db8d14842e38324e95d4030b8a0',
@@ -664,6 +666,7 @@ module.exports = {
                   selected_groups_label: '',
                 },
                 enable_copy_paste_units: false,
+                xblock_type: 'other',
               },
               {
                 id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@4a1bba2a403f40bca5ec245e945b0d76',
@@ -747,6 +750,7 @@ module.exports = {
                   selected_groups_label: '',
                 },
                 enable_copy_paste_units: false,
+                xblock_type: 'video',
               },
               {
                 id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@256f17a44983429fb1a60802203ee4e0',
@@ -830,6 +834,7 @@ module.exports = {
                   selected_groups_label: '',
                 },
                 enable_copy_paste_units: false,
+                xblock_type: 'other',
               },
               {
                 id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@e3601c0abee6427d8c17e6d6f8fdddd1',
@@ -913,6 +918,7 @@ module.exports = {
                   selected_groups_label: '',
                 },
                 enable_copy_paste_units: false,
+                xblock_type: 'video',
               },
               {
                 id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@a79d59cd72034188a71d388f4954a606',
@@ -996,6 +1002,7 @@ module.exports = {
                   selected_groups_label: '',
                 },
                 enable_copy_paste_units: false,
+                xblock_type: 'other',
               },
               {
                 id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@134df56c516a4a0dbb24dd5facef746e',
@@ -1079,6 +1086,7 @@ module.exports = {
                   selected_groups_label: '',
                 },
                 enable_copy_paste_units: false,
+                xblock_type: 'other',
               },
               {
                 id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@d91b9e5d8bc64d57a1332d06bf2f2193',
@@ -1162,6 +1170,7 @@ module.exports = {
                   selected_groups_label: '',
                 },
                 enable_copy_paste_units: false,
+                xblock_type: 'video',
               },
             ],
           },

src/course-unit/__mocks__/courseUnit.js

@@ -0,0 +1,84 @@
+module.exports = {
+  id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@d91b9e5d8bc64d57a1332d06bf2f2144',
+  display_name: 'Getting Started new',
+  category: 'vertical',
+  has_children: true,
+  edited_on: 'Dec 28, 2023 at 10:00 UTC',
+  published: true,
+  published_on: 'Dec 28, 2023 at 10:00 UTC',
+  studio_url: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@d91b9e5d8bc64d57a1332d06bf2f2193',
+  released_to_students: true,
+  release_date: 'Feb 05, 2013 at 05:00 UTC',
+  visibility_state: 'live',
+  has_explicit_staff_lock: false,
+  start: '2013-02-05T05:00:00Z',
+  graded: false,
+  due_date: '',
+  due: null,
+  relative_weeks_due: null,
+  format: null,
+  course_graders: [
+    'Homework',
+    'Exam',
+  ],
+  has_changes: false,
+  actions: {
+    deletable: true,
+    draggable: true,
+    childAddable: true,
+    duplicable: true,
+  },
+  explanatory_message: null,
+  group_access: {},
+  user_partitions: [
+    {
+      id: 50,
+      name: 'Enrollment Track Groups',
+      scheme: 'enrollment_track',
+      groups: [
+        {
+          id: 2,
+          name: 'Verified Certificate',
+          selected: false,
+          deleted: false,
+        },
+        {
+          id: 1,
+          name: 'Audit',
+          selected: false,
+          deleted: false,
+        },
+      ],
+    },
+  ],
+  show_correctness: 'always',
+  discussion_enabled: true,
+  ancestor_has_staff_lock: false,
+  user_partition_info: {
+    selectable_partitions: [
+      {
+        id: 50,
+        name: 'Enrollment Track Groups',
+        scheme: 'enrollment_track',
+        groups: [
+          {
+            id: 2,
+            name: 'Verified Certificate',
+            selected: false,
+            deleted: false,
+          },
+          {
+            id: 1,
+            name: 'Audit',
+            selected: false,
+            deleted: false,
+          },
+        ],
+      },
+    ],
+    selected_partition_index: -1,
+    selected_groups_label: '',
+  },
+  enable_copy_paste_units: false,
+  xblock_type: 'other',
+};

src/course-unit/__mocks__/index.js

@@ -1,3 +1,4 @@
 export { default as courseUnitIndexMock } from './courseUnitIndex';
 export { default as courseSectionVerticalMock } from './courseSectionVertical';
+export { default as courseUnitMock } from './courseUnit';
 export { default as courseCreateXblockMock } from './courseCreateXblock';