chore: iframe rendering optimization

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 .eslintcache
 .idea
+.run
 node_modules
 npm-debug.log
 coverage

src/constants.js

@@ -76,3 +76,7 @@ export const REGEX_RULES = {
   specialCharsRule: /^[a-zA-Z0-9_\-.'*~\s]+$/,
   noSpaceRule: /^\S*$/,
 };
+
+export const IFRAME_FEATURE_POLICY = (
+  'microphone *; camera *; midi *; geolocation *; encrypted-media *; clipboard-write *'
+);

src/course-unit/CourseUnit.jsx

@@ -180,9 +180,11 @@ const CourseUnit = ({ courseId }) => {
                 />
               )}
               <XBlockContainerIframe
+                courseId={courseId}
                 blockId={blockId}
                 unitXBlockActions={unitXBlockActions}
                 courseVerticalChildren={courseVerticalChildren.children}
+                handleConfigureSubmit={handleConfigureSubmit}
               />
               <AddComponent
                 blockId={blockId}

src/course-unit/constants.js

@@ -52,11 +52,37 @@ export const messageTypes = {
   videoFullScreen: 'plugin.videoFullScreen',
   refreshXBlock: 'refreshXBlock',
   showMoveXBlockModal: 'showMoveXBlockModal',
+  completeXBlockMoving: 'completeXBlockMoving',
+  rollbackMovedXBlock: 'rollbackMovedXBlock',
   showMultipleComponentPicker: 'showMultipleComponentPicker',
   addSelectedComponentsToBank: 'addSelectedComponentsToBank',
   showXBlockLibraryChangesPreview: 'showXBlockLibraryChangesPreview',
+  copyXBlock: 'copyXBlock',
+  manageXBlockAccess: 'manageXBlockAccess',
+  completeManageXBlockAccess: 'completeManageXBlockAccess',
+  deleteXBlock: 'deleteXBlock',
+  completeXBlockDeleting: 'completeXBlockDeleting',
+  duplicateXBlock: 'duplicateXBlock',
+  completeXBlockDuplicating: 'completeXBlockDuplicating',
+  newXBlockEditor: 'newXBlockEditor',
+  toggleCourseXBlockDropdown: 'toggleCourseXBlockDropdown',
+  addXBlock: 'addXBlock',
+  scrollToXBlock: 'scrollToXBlock',
 };
 
-export const IFRAME_FEATURE_POLICY = (
-  'microphone *; camera *; midi *; geolocation *; encrypted-media *, clipboard-write *'
-);
+export const COMPONENT_TYPES = {
+  advanced: 'advanced',
+  discussion: 'discussion',
+  library: 'library',
+  html: 'html',
+  openassessment: 'openassessment',
+  problem: 'problem',
+  video: 'video',
+  dragAndDrop: 'drag-and-drop-v2',
+};
+
+export const COMPONENT_TYPES_WITH_NEW_EDITOR = {
+  html: 'html',
+  problem: 'problem',
+  video: 'video',
+};

src/course-unit/data/slice.js

@@ -93,22 +93,6 @@ const slice = createSlice({
     updateCourseVerticalChildrenLoadingStatus: (state, { payload }) => {
       state.loadingStatus.courseVerticalChildrenLoadingStatus = payload.status;
     },
-    deleteXBlock: (state, { payload }) => {
-      state.courseVerticalChildren.children = state.courseVerticalChildren.children.filter(
-        (component) => component.id !== payload,
-      );
-    },
-    duplicateXBlock: (state, { payload }) => {
-      state.courseVerticalChildren = {
-        ...payload.newCourseVerticalChildren,
-        children: payload.newCourseVerticalChildren.children.map((component) => {
-          if (component.blockId === payload.newId) {
-            component.shouldScroll = true;
-          }
-          return component;
-        }),
-      };
-    },
     fetchStaticFileNoticesSuccess: (state, { payload }) => {
       state.staticFileNotices = payload;
     },
@@ -139,8 +123,6 @@ export const {
   updateLoadingCourseXblockStatus,
   updateCourseVerticalChildren,
   updateCourseVerticalChildrenLoadingStatus,
-  deleteXBlock,
-  duplicateXBlock,
   fetchStaticFileNoticesSuccess,
   updateCourseOutlineInfo,
   updateCourseOutlineInfoLoadingStatus,

src/course-unit/data/thunk.js

@@ -34,8 +34,6 @@ import {
   updateCourseVerticalChildren,
   updateCourseVerticalChildrenLoadingStatus,
   updateQueryPendingStatus,
-  deleteXBlock,
-  duplicateXBlock,
   fetchStaticFileNoticesSuccess,
   updateCourseOutlineInfo,
   updateCourseOutlineInfoLoadingStatus,
@@ -128,6 +126,7 @@ export function editCourseUnitVisibilityAndData(
   isVisible,
   groupAccess,
   isDiscussionEnabled,
+  callback,
   blockId = itemId,
 ) {
   return async (dispatch) => {
@@ -145,6 +144,9 @@ export function editCourseUnitVisibilityAndData(
         isDiscussionEnabled,
       ).then(async (result) => {
         if (result) {
+          if (callback) {
+            callback();
+          }
           const courseUnit = await getCourseUnitData(blockId);
           dispatch(fetchCourseItemSuccess(courseUnit));
           const courseVerticalChildrenData = await getCourseVerticalChildren(blockId);
@@ -162,8 +164,8 @@ export function editCourseUnitVisibilityAndData(
 
 export function createNewCourseXBlock(body, callback, blockId) {
   return async (dispatch) => {
-    dispatch(updateLoadingCourseXblockStatus({ status: RequestStatus.IN_PROGRESS }));
-    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    // dispatch(updateLoadingCourseXblockStatus({ status: RequestStatus.IN_PROGRESS }));
+    // dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
 
     if (body.stagedContent) {
       dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.pasting));
@@ -190,8 +192,8 @@ export function createNewCourseXBlock(body, callback, blockId) {
           const courseVerticalChildrenData = await getCourseVerticalChildren(blockId);
           dispatch(updateCourseVerticalChildren(courseVerticalChildrenData));
           dispatch(hideProcessingNotification());
-          dispatch(updateLoadingCourseXblockStatus({ status: RequestStatus.SUCCESSFUL }));
-          dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+          // dispatch(updateLoadingCourseXblockStatus({ status: RequestStatus.SUCCESSFUL }));
+          // dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
           if (callback) {
             callback(result);
           }
@@ -222,14 +224,14 @@ export function fetchCourseVerticalChildrenData(itemId) {
   };
 }
 
-export function deleteUnitItemQuery(itemId, xblockId) {
+export function deleteUnitItemQuery(itemId, xblockId, callback) {
   return async (dispatch) => {
     dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
     dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.deleting));
 
     try {
       await deleteUnitItem(xblockId);
-      dispatch(deleteXBlock(xblockId));
+      callback();
       const { userClipboard } = await getCourseSectionVerticalData(itemId);
       dispatch(updateClipboardData(userClipboard));
       const courseUnit = await getCourseUnitData(itemId);
@@ -243,18 +245,14 @@ export function deleteUnitItemQuery(itemId, xblockId) {
   };
 }
 
-export function duplicateUnitItemQuery(itemId, xblockId) {
+export function duplicateUnitItemQuery(itemId, xblockId, callback) {
   return async (dispatch) => {
     dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
     dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.duplicating));
 
     try {
-      const { locator } = await duplicateUnitItem(itemId, xblockId);
-      const newCourseVerticalChildren = await getCourseVerticalChildren(itemId);
-      dispatch(duplicateXBlock({
-        newId: locator,
-        newCourseVerticalChildren,
-      }));
+      const { courseKey, locator } = await duplicateUnitItem(itemId, xblockId);
+      callback(courseKey, locator);
       const courseUnit = await getCourseUnitData(itemId);
       dispatch(fetchCourseItemSuccess(courseUnit));
       dispatch(hideProcessingNotification());
@@ -310,7 +308,7 @@ export function patchUnitItemQuery({
       dispatch(updateCourseOutlineInfoLoadingStatus({ status: RequestStatus.IN_PROGRESS }));
       const courseUnit = await getCourseUnitData(currentParentLocator);
       dispatch(fetchCourseItemSuccess(courseUnit));
-      callbackFn();
+      callbackFn(sourceLocator);
     } catch (error) {
       handleResponseErrors(error, dispatch, updateSavingStatus);
     } finally {

src/course-unit/header-title/HeaderTitle.test.jsx

@@ -1,6 +1,6 @@
 import MockAdapter from 'axios-mock-adapter';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
@@ -60,45 +60,53 @@ describe('<HeaderTitle />', () => {
   it('render HeaderTitle component correctly', () => {
     const { getByText, getByRole } = renderComponent();
 
-    expect(getByText(unitTitle)).toBeInTheDocument();
-    expect(getByRole('button', { name: messages.altButtonEdit.defaultMessage })).toBeInTheDocument();
-    expect(getByRole('button', { name: messages.altButtonSettings.defaultMessage })).toBeInTheDocument();
+    waitFor(() => {
+      expect(getByText(unitTitle)).toBeInTheDocument();
+      expect(getByRole('button', { name: messages.altButtonEdit.defaultMessage })).toBeInTheDocument();
+      expect(getByRole('button', { name: messages.altButtonSettings.defaultMessage })).toBeInTheDocument();
+    });
   });
 
   it('render HeaderTitle with open edit form', () => {
     const { getByRole } = renderComponent({
       isTitleEditFormOpen: true,
     });
 
-    expect(getByRole('textbox', { name: messages.ariaLabelButtonEdit.defaultMessage })).toBeInTheDocument();
-    expect(getByRole('textbox', { name: messages.ariaLabelButtonEdit.defaultMessage })).toHaveValue(unitTitle);
-    expect(getByRole('button', { name: messages.altButtonEdit.defaultMessage })).toBeInTheDocument();
-    expect(getByRole('button', { name: messages.altButtonSettings.defaultMessage })).toBeInTheDocument();
+    waitFor(() => {
+      expect(getByRole('textbox', { name: messages.ariaLabelButtonEdit.defaultMessage })).toBeInTheDocument();
+      expect(getByRole('textbox', { name: messages.ariaLabelButtonEdit.defaultMessage })).toHaveValue(unitTitle);
+      expect(getByRole('button', { name: messages.altButtonEdit.defaultMessage })).toBeInTheDocument();
+      expect(getByRole('button', { name: messages.altButtonSettings.defaultMessage })).toBeInTheDocument();
+    });
   });
 
   it('calls toggle edit title form by clicking on Edit button', () => {
     const { getByRole } = renderComponent();
 
-    const editTitleButton = getByRole('button', { name: messages.altButtonEdit.defaultMessage });
-    userEvent.click(editTitleButton);
-    expect(handleTitleEdit).toHaveBeenCalledTimes(1);
+    waitFor(() => {
+      const editTitleButton = getByRole('button', { name: messages.altButtonEdit.defaultMessage });
+      userEvent.click(editTitleButton);
+      expect(handleTitleEdit).toHaveBeenCalledTimes(1);
+    });
   });
 
   it('calls saving title by clicking outside or press Enter key', async () => {
     const { getByRole } = renderComponent({
       isTitleEditFormOpen: true,
     });
 
-    const titleField = getByRole('textbox', { name: messages.ariaLabelButtonEdit.defaultMessage });
-    userEvent.type(titleField, ' 1');
-    expect(titleField).toHaveValue(`${unitTitle} 1`);
-    userEvent.click(document.body);
-    expect(handleTitleEditSubmit).toHaveBeenCalledTimes(1);
-
-    userEvent.click(titleField);
-    userEvent.type(titleField, ' 2[Enter]');
-    expect(titleField).toHaveValue(`${unitTitle} 1 2`);
-    expect(handleTitleEditSubmit).toHaveBeenCalledTimes(2);
+    waitFor(() => {
+      const titleField = getByRole('textbox', { name: messages.ariaLabelButtonEdit.defaultMessage });
+      userEvent.type(titleField, ' 1');
+      expect(titleField).toHaveValue(`${unitTitle} 1`);
+      userEvent.click(document.body);
+      expect(handleTitleEditSubmit).toHaveBeenCalledTimes(1);
+
+      userEvent.click(titleField);
+      userEvent.type(titleField, ' 2[Enter]');
+      expect(titleField).toHaveValue(`${unitTitle} 1 2`);
+      expect(handleTitleEditSubmit).toHaveBeenCalledTimes(2);
+    });
   });
 
   it('displays a visibility message with the selected groups for the unit', async () => {
@@ -117,7 +125,9 @@ describe('<HeaderTitle />', () => {
     const visibilityMessage = messages.definedVisibilityMessage.defaultMessage
       .replace('{selectedGroupsLabel}', 'Visibility group 1');
 
-    expect(getByText(visibilityMessage)).toBeInTheDocument();
+    waitFor(() => {
+      expect(getByText(visibilityMessage)).toBeInTheDocument();
+    });
   });
 
   it('displays a visibility message with the selected groups for some of xblock', async () => {
@@ -130,6 +140,8 @@ describe('<HeaderTitle />', () => {
     await executeThunk(fetchCourseUnitQuery(blockId), store.dispatch);
     const { getByText } = renderComponent();
 
-    expect(getByText(messages.commonVisibilityMessage.defaultMessage)).toBeInTheDocument();
+    waitFor(() => {
+      expect(getByText(messages.someVisibilityMessage.defaultMessage)).toBeInTheDocument();
+    });
   });
 });

src/course-unit/hooks.jsx

@@ -84,6 +84,7 @@ export const useCourseUnit = ({ courseId, blockId }) => {
       isVisible,
       groupAccess,
       isDiscussionEnabled,
+      () => sendMessageToIframe(messageTypes.completeManageXBlockAccess, null),
       blockId,
     ));
     closeModalFn();
@@ -112,16 +113,29 @@ export const useCourseUnit = ({ courseId, blockId }) => {
     }
   };
 
-  const handleCreateNewCourseXBlock = (body, callback) => (
+  const handleCreateNewCourseXBlock = (
+    body,
+    callback = (result) => {
+      sendMessageToIframe(messageTypes.addXBlock, { data: result });
+    },
+  ) => (
     dispatch(createNewCourseXBlock(body, callback, blockId))
   );
 
   const unitXBlockActions = {
     handleDelete: (XBlockId) => {
-      dispatch(deleteUnitItemQuery(blockId, XBlockId));
+      dispatch(deleteUnitItemQuery(
+        blockId,
+        XBlockId,
+        () => sendMessageToIframe(messageTypes.completeXBlockDeleting, null),
+      ));
     },
     handleDuplicate: (XBlockId) => {
-      dispatch(duplicateUnitItemQuery(blockId, XBlockId));
+      dispatch(duplicateUnitItemQuery(
+        blockId,
+        XBlockId,
+        (courseKey, locator) => sendMessageToIframe(messageTypes.completeXBlockDuplicating, { courseKey, locator }),
+      ));
     },
   };
 
@@ -136,7 +150,7 @@ export const useCourseUnit = ({ courseId, blockId }) => {
       currentParentLocator,
       isMoving: false,
       callbackFn: () => {
-        sendMessageToIframe(messageTypes.refreshXBlock, null);
+        sendMessageToIframe(messageTypes.rollbackMovedXBlock, { locator: sourceLocator });
         window.scrollTo({ top: 0, behavior: 'smooth' });
       },
     }));

src/course-unit/move-modal/hooks.tsx

@@ -184,8 +184,8 @@ export const useMoveModal = ({
       title: state.sourceXBlockInfo.current.displayName,
       currentParentLocator: blockId,
       isMoving: true,
-      callbackFn: () => {
-        sendMessageToIframe(messageTypes.refreshXBlock, null);
+      callbackFn: (sourceLocator: string) => {
+        sendMessageToIframe(messageTypes.completeXBlockMoving, { locator: sourceLocator });
         closeModal();
         window.scrollTo({ top: 0, behavior: 'smooth' });
       },

src/course-unit/sidebar/PublishControls.jsx

@@ -4,9 +4,10 @@ import { useToggle } from '@openedx/paragon';
 import { InfoOutline as InfoOutlineIcon } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import useCourseUnitData from './hooks';
+import { useIframe } from '../context/hooks';
 import { editCourseUnitVisibilityAndData } from '../data/thunk';
 import { SidebarBody, SidebarFooter, SidebarHeader } from './components';
-import { PUBLISH_TYPES } from '../constants';
+import { PUBLISH_TYPES, messageTypes } from '../constants';
 import { getCourseUnitData } from '../data/selectors';
 import messages from './messages';
 import ModalNotification from '../../generic/modal-notification';
@@ -20,6 +21,7 @@ const PublishControls = ({ blockId }) => {
     visibleToStaffOnly,
   } = useCourseUnitData(useSelector(getCourseUnitData));
   const intl = useIntl();
+  const { sendMessageToIframe } = useIframe();
 
   const [isDiscardModalOpen, openDiscardModal, closeDiscardModal] = useToggle(false);
   const [isVisibleModalOpen, openVisibleModal, closeVisibleModal] = useToggle(false);
@@ -33,7 +35,14 @@ const PublishControls = ({ blockId }) => {
 
   const handleCourseUnitDiscardChanges = () => {
     closeDiscardModal();
-    dispatch(editCourseUnitVisibilityAndData(blockId, PUBLISH_TYPES.discardChanges));
+    dispatch(editCourseUnitVisibilityAndData(
+      blockId,
+      PUBLISH_TYPES.discardChanges,
+      null,
+      null,
+      null,
+      () => sendMessageToIframe(messageTypes.refreshXBlock, null),
+    ));
   };
 
   const handleCourseUnitPublish = () => {