feat: [FC-0070] listen to xblock interaction events

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

@@ -55,8 +55,11 @@ export const messageTypes = {
   showMultipleComponentPicker: 'showMultipleComponentPicker',
   addSelectedComponentsToBank: 'addSelectedComponentsToBank',
   showXBlockLibraryChangesPreview: 'showXBlockLibraryChangesPreview',
+  copyXBlock: 'copyXBlock',
+  manageXBlockAccess: 'manageXBlockAccess',
+  deleteXBlock: 'deleteXBlock',
+  duplicateXBlock: 'duplicateXBlock',
+  refreshXBlockPositions: 'refreshPositions',
+  newXBlockEditor: 'newXBlockEditor',
+  toggleCourseXBlockDropdown: 'toggleCourseXBlockDropdown',
 };
-
-export const IFRAME_FEATURE_POLICY = (
-  'microphone *; camera *; midi *; geolocation *; encrypted-media *, clipboard-write *'
-);

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,
@@ -229,7 +227,6 @@ export function deleteUnitItemQuery(itemId, xblockId) {
 
     try {
       await deleteUnitItem(xblockId);
-      dispatch(deleteXBlock(xblockId));
       const { userClipboard } = await getCourseSectionVerticalData(itemId);
       dispatch(updateClipboardData(userClipboard));
       const courseUnit = await getCourseUnitData(itemId);
@@ -249,12 +246,7 @@ export function duplicateUnitItemQuery(itemId, xblockId) {
     dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.duplicating));
 
     try {
-      const { locator } = await duplicateUnitItem(itemId, xblockId);
-      const newCourseVerticalChildren = await getCourseVerticalChildren(itemId);
-      dispatch(duplicateXBlock({
-        newId: locator,
-        newCourseVerticalChildren,
-      }));
+      await duplicateUnitItem(itemId, xblockId);
       const courseUnit = await getCourseUnitData(itemId);
       dispatch(fetchCourseItemSuccess(courseUnit));
       dispatch(hideProcessingNotification());

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

@@ -11,6 +11,8 @@ import {
 import ConfigureModal from '../../generic/configure-modal/ConfigureModal';
 import { getCourseUnitData } from '../data/selectors';
 import { updateQueryPendingStatus } from '../data/slice';
+import { messageTypes } from '../constants';
+import { useIframe } from '../context/hooks';
 import messages from './messages';
 
 const HeaderTitle = ({
@@ -26,9 +28,15 @@ const HeaderTitle = ({
   const currentItemData = useSelector(getCourseUnitData);
   const [isConfigureModalOpen, openConfigureModal, closeConfigureModal] = useToggle(false);
   const { selectedPartitionIndex, selectedGroupsLabel } = currentItemData.userPartitionInfo;
+  const { sendMessageToIframe } = useIframe();
 
   const onConfigureSubmit = (...arg) => {
     handleConfigureSubmit(currentItemData.id, ...arg, closeConfigureModal);
+    // TODO: this artificial delay is a temporary solution
+    // to ensure the iframe content is properly refreshed.
+    setTimeout(() => {
+      sendMessageToIframe(messageTypes.refreshXBlock, null);
+    }, 1000);
   };
 
   const getVisibilityMessage = () => {

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/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);
@@ -34,6 +36,11 @@ const PublishControls = ({ blockId }) => {
   const handleCourseUnitDiscardChanges = () => {
     closeDiscardModal();
     dispatch(editCourseUnitVisibilityAndData(blockId, PUBLISH_TYPES.discardChanges));
+    // TODO: this artificial delay is a temporary solution
+    // to ensure the iframe content is properly refreshed.
+    setTimeout(() => {
+      sendMessageToIframe(messageTypes.refreshXBlock, null);
+    }, 1000);
   };
 
   const handleCourseUnitPublish = () => {

src/course-unit/xblock-container-iframe/hooks/index.ts

@@ -0,0 +1,5 @@
+export { useIframeMessages } from './useIframeMessages';
+export { useIframeContent } from './useIframeContent';
+export { useMessageHandlers } from './useMessageHandlers';
+export { useIFrameBehavior } from './useIFrameBehavior';
+export { useLoadBearingHook } from './useLoadBearingHook';

src/course-unit/xblock-container-iframe/tests/hooks.test.tsx → src/course-unit/xblock-container-iframe/hooks/tests/hooks.test.tsx

@@ -3,8 +3,8 @@ import { renderHook, act } from '@testing-library/react-hooks';
 import { useKeyedState } from '@edx/react-unit-test-utils';
 import { logError } from '@edx/frontend-platform/logging';
 
-import { stateKeys, messageTypes } from '../../constants';
-import { useIFrameBehavior, useLoadBearingHook } from '../hooks';
+import { stateKeys, messageTypes } from '../../../constants';
+import { useLoadBearingHook, useIFrameBehavior } from '..';
 
 jest.mock('@edx/react-unit-test-utils', () => ({
   useKeyedState: jest.fn(),

src/course-unit/xblock-container-iframe/hooks/types.ts

@@ -0,0 +1,25 @@
+export type UseMessageHandlersTypes = {
+  courseId: string;
+  navigate: (path: string) => void;
+  dispatch: (action: any) => void;
+  setIframeOffset: (height: number) => void;
+  handleDeleteXBlock: (usageId: string) => void;
+  handleRefetchXBlocks: () => void;
+  handleDuplicateXBlock: (blockType: string, usageId: string) => void;
+  handleManageXBlockAccess: (usageId: string) => void;
+};
+
+export type MessageHandlersTypes = Record<string, (payload: any) => void>;
+
+export interface UseIFrameBehaviorTypes {
+  id: string;
+  iframeUrl: string;
+  onLoaded?: boolean;
+}
+
+export interface UseIFrameBehaviorReturnTypes {
+  iframeHeight: number;
+  handleIFrameLoad: () => void;
+  showError: boolean;
+  hasLoaded: boolean;
+}

src/course-unit/xblock-container-iframe/hooks.tsx → src/course-unit/xblock-container-iframe/hooks/useIFrameBehavior.tsx

@@ -1,57 +1,12 @@
-import {
-  useState, useLayoutEffect, useCallback, useEffect,
-} from 'react';
+import { useCallback, useEffect } from 'react';
 import { logError } from '@edx/frontend-platform/logging';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { useKeyedState } from '@edx/react-unit-test-utils';
 
-import { useEventListener } from '../../generic/hooks';
-import { stateKeys, messageTypes } from '../constants';
-
-interface UseIFrameBehaviorParams {
-  id: string;
-  iframeUrl: string;
-  onLoaded?: boolean;
-}
-
-interface UseIFrameBehaviorReturn {
-  iframeHeight: number;
-  handleIFrameLoad: () => void;
-  showError: boolean;
-  hasLoaded: boolean;
-}
-
-/**
- * We discovered an error in Firefox where - upon iframe load - React would cease to call any
- * useEffect hooks until the user interacts with the page again.  This is particularly confusing
- * when navigating between sequences, as the UI partially updates leaving the user in a nebulous
- * state.
- *
- * We were able to solve this error by using a layout effect to update some component state, which
- * executes synchronously on render.  Somehow this forces React to continue it's lifecycle
- * immediately, rather than waiting for user interaction.  This layout effect could be anywhere in
- * the parent tree, as far as we can tell - we chose to add a conspicuously 'load bearing' (that's
- * a joke) one here so it wouldn't be accidentally removed elsewhere.
- *
- * If we remove this hook when one of these happens:
- * 1. React figures out that there's an issue here and fixes a bug.
- * 2. We cease to use an iframe for unit rendering.
- * 3. Firefox figures out that there's an issue in their iframe loading and fixes a bug.
- * 4. We stop supporting Firefox.
- * 5. An enterprising engineer decides to create a repo that reproduces the problem, submits it to
- *    Firefox/React for review, and they kindly help us figure out what in the world is happening
- *    so  we can fix it.
- *
- * This hook depends on the unit id just to make sure it re-evaluates whenever the ID changes.  If
- * we change whether or not the Unit component is re-mounted when the unit ID changes, this may
- * become important, as this hook will otherwise only evaluate the useLayoutEffect once.
- */
-export const useLoadBearingHook = (id: string): void => {
-  const setValue = useState(0)[1];
-  useLayoutEffect(() => {
-    setValue(currentValue => currentValue + 1);
-  }, [id]);
-};
+import { useEventListener } from '../../../generic/hooks';
+import { stateKeys, messageTypes } from '../../constants';
+import { useLoadBearingHook } from './useLoadBearingHook';
+import { UseIFrameBehaviorTypes, UseIFrameBehaviorReturnTypes } from './types';
 
 /**
  * Custom hook to manage iframe behavior.
@@ -70,7 +25,7 @@ export const useIFrameBehavior = ({
   id,
   iframeUrl,
   onLoaded = true,
-}: UseIFrameBehaviorParams): UseIFrameBehaviorReturn => {
+}: UseIFrameBehaviorTypes): UseIFrameBehaviorReturnTypes => {
   // Do not remove this hook.  See function description.
   useLoadBearingHook(id);