feat: library unit page skeleton [FC-0083] (#1779)

* View a unit page, which has its own URL
* Components appear within a unit as full previews. Their top bar shows type icon and title on the left, and draft status (if any), tag count, overflow menu, and drag handle on the right.
* Components have an overflow menu within a unit
* Components can be selected within a unit
* When components are selected, the standard component sidebar appears. The preview tab is hidden, since component previews are visible in the main content area.
* Components within a unit full-page view have hover and selected states
* Unit sidebar preview.
* Frontend implementation Drag-n-drop components to reorder them in unit.

Author: navinkarkera

src/CourseAuthoringRoutes.jsx

@@ -17,7 +17,7 @@ import ScheduleAndDetails from './schedule-and-details';
 import { GradingSettings } from './grading-settings';
 import CourseTeam from './course-team/CourseTeam';
 import { CourseUpdates } from './course-updates';
-import { CourseUnit, IframeProvider } from './course-unit';
+import { CourseUnit } from './course-unit';
 import { Certificates } from './certificates';
 import CourseExportPage from './export-page/CourseExportPage';
 import CourseOptimizerPage from './optimizer-page/CourseOptimizerPage';
@@ -26,6 +26,7 @@ import { DECODED_ROUTES } from './constants';
 import CourseChecklist from './course-checklist';
 import GroupConfigurations from './group-configurations';
 import { CourseLibraries } from './course-libraries';
+import { IframeProvider } from './generic/hooks/context/iFrameContext';
 
 /**
  * As of this writing, these routes are mounted at a path prefixed with the following:

src/constants.js

@@ -92,3 +92,17 @@ export const REGEX_RULES = {
 export const IFRAME_FEATURE_POLICY = (
   'microphone *; camera *; midi *; geolocation *; encrypted-media *; clipboard-write *'
 );
+
+export const iframeStateKeys = {
+  iframeHeight: 'iframeHeight',
+  hasLoaded: 'hasLoaded',
+  showError: 'showError',
+  windowTopOffset: 'windowTopOffset',
+};
+
+export const iframeMessageTypes = {
+  modal: 'plugin.modal',
+  resize: 'plugin.resize',
+  videoFullScreen: 'plugin.videoFullScreen',
+  xblockEvent: 'xblock-event',
+};

src/course-unit/CourseUnit.test.jsx

@@ -59,7 +59,7 @@ import configureModalMessages from '../generic/configure-modal/messages';
 import { getContentTaxonomyTagsApiUrl, getContentTaxonomyTagsCountApiUrl } from '../content-tags-drawer/data/api';
 import addComponentMessages from './add-component/messages';
 import { messageTypes, PUBLISH_TYPES, UNIT_VISIBILITY_STATES } from './constants';
-import { IframeProvider } from './context/iFrameContext';
+import { IframeProvider } from '../generic/hooks/context/iFrameContext';
 import moveModalMessages from './move-modal/messages';
 import xblockContainerIframeMessages from './xblock-container-iframe/messages';
 import headerNavigationsMessages from './header-navigations/messages';

src/course-unit/add-component/AddComponent.jsx

@@ -14,7 +14,7 @@ import AddComponentButton from './add-component-btn';
 import messages from './messages';
 import { ComponentPicker } from '../../library-authoring/component-picker';
 import { messageTypes } from '../constants';
-import { useIframe } from '../context/hooks';
+import { useIframe } from '../../generic/hooks/context/hooks';
 import { useEventListener } from '../../generic/hooks';
 
 const AddComponent = ({

src/course-unit/add-component/AddComponent.test.jsx

@@ -18,7 +18,7 @@ import { courseSectionVerticalMock } from '../__mocks__';
 import { COMPONENT_TYPES } from '../../generic/block-type-utils/constants';
 import AddComponent from './AddComponent';
 import messages from './messages';
-import { IframeProvider } from '../context/iFrameContext';
+import { IframeProvider } from '../../generic/hooks/context/iFrameContext';
 import { messageTypes } from '../constants';
 
 let store;
@@ -52,7 +52,7 @@ jest.mock('../../library-authoring/component-picker', () => ({
 }));
 
 const mockSendMessageToIframe = jest.fn();
-jest.mock('../context/hooks', () => ({
+jest.mock('../../generic/hooks/context/hooks', () => ({
   useIframe: () => ({
     sendMessageToIframe: mockSendMessageToIframe,
   }),

src/course-unit/constants.js

@@ -39,17 +39,7 @@ export const getXBlockSupportMessages = (intl) => ({
   },
 });
 
-export const stateKeys = {
-  iframeHeight: 'iframeHeight',
-  hasLoaded: 'hasLoaded',
-  showError: 'showError',
-  windowTopOffset: 'windowTopOffset',
-};
-
 export const messageTypes = {
-  modal: 'plugin.modal',
-  resize: 'plugin.resize',
-  videoFullScreen: 'plugin.videoFullScreen',
   refreshXBlock: 'refreshXBlock',
   showMoveXBlockModal: 'showMoveXBlockModal',
   completeXBlockMoving: 'completeXBlockMoving',

src/course-unit/hooks.jsx

@@ -9,7 +9,7 @@ import { camelCaseObject } from '@edx/frontend-platform/utils';
 import { RequestStatus } from '../data/constants';
 import { useClipboard } from '../generic/clipboard';
 import { useEventListener } from '../generic/hooks';
-import { COURSE_BLOCK_NAMES } from '../constants';
+import { COURSE_BLOCK_NAMES, iframeMessageTypes } from '../constants';
 import { messageTypes, PUBLISH_TYPES } from './constants';
 import {
   createNewCourseXBlock,
@@ -41,7 +41,7 @@ import {
   updateMovedXBlockParams,
   updateQueryPendingStatus,
 } from './data/slice';
-import { useIframe } from './context/hooks';
+import { useIframe } from '../generic/hooks/context/hooks';
 
 export const useCourseUnit = ({ courseId, blockId }) => {
   const dispatch = useDispatch();
@@ -313,7 +313,7 @@ export const useScrollToLastPosition = (storageKey = 'createXBlockLastYPosition'
   }, [storageKey]);
 
   const handleMessage = useCallback((event) => {
-    if (event.data?.type === messageTypes.resize) {
+    if (event.data?.type === iframeMessageTypes.resize) {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }

src/course-unit/hooks.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { act, renderHook } from '@testing-library/react';
 import { useScrollToLastPosition, useLayoutGrid } from './hooks';
-import { messageTypes } from './constants';
+import { iframeMessageTypes } from '../constants';
 
 jest.useFakeTimers();
 
@@ -108,7 +108,7 @@ describe('useScrollToLastPosition', () => {
     const { unmount } = renderHook(() => useScrollToLastPosition(storageKey));
 
     act(() => {
-      window.dispatchEvent(new MessageEvent('message', { data: { type: messageTypes.resize } }));
+      window.dispatchEvent(new MessageEvent('message', { data: { type: iframeMessageTypes.resize } }));
       jest.advanceTimersByTime(1000);
     });
 
@@ -136,8 +136,8 @@ describe('useScrollToLastPosition', () => {
     renderHook(() => useScrollToLastPosition(storageKey));
 
     act(() => {
-      window.dispatchEvent(new MessageEvent('message', { data: { type: messageTypes.resize } }));
-      window.dispatchEvent(new MessageEvent('message', { data: { type: messageTypes.resize } }));
+      window.dispatchEvent(new MessageEvent('message', { data: { type: iframeMessageTypes.resize } }));
+      window.dispatchEvent(new MessageEvent('message', { data: { type: iframeMessageTypes.resize } }));
     });
 
     expect(clearTimeoutSpy).toHaveBeenCalled();
@@ -150,9 +150,9 @@ describe('useScrollToLastPosition', () => {
     renderHook(() => useScrollToLastPosition(storageKey));
 
     act(() => {
-      window.dispatchEvent(new MessageEvent('message', { data: { type: messageTypes.resize } }));
+      window.dispatchEvent(new MessageEvent('message', { data: { type: iframeMessageTypes.resize } }));
       jest.advanceTimersByTime(500);
-      window.dispatchEvent(new MessageEvent('message', { data: { type: messageTypes.resize } }));
+      window.dispatchEvent(new MessageEvent('message', { data: { type: iframeMessageTypes.resize } }));
     });
 
     expect(window.scrollTo).not.toHaveBeenCalled();
@@ -164,7 +164,7 @@ describe('useScrollToLastPosition', () => {
     renderHook(() => useScrollToLastPosition(storageKey));
 
     act(() => {
-      window.dispatchEvent(new MessageEvent('message', { data: { type: messageTypes.resize } }));
+      window.dispatchEvent(new MessageEvent('message', { data: { type: iframeMessageTypes.resize } }));
       jest.advanceTimersByTime(1000);
     });
 

src/course-unit/index.js

@@ -1,2 +1 @@
 export { default as CourseUnit } from './CourseUnit';
-export { IframeProvider } from './context/iFrameContext';

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

@@ -11,7 +11,7 @@ import { RequestStatus } from '../../data/constants';
 import { useEventListener } from '../../generic/hooks';
 import { getCourseOutlineInfo, getCourseOutlineInfoLoadingStatus } from '../data/selectors';
 import { getCourseOutlineInfoQuery, patchUnitItemQuery } from '../data/thunk';
-import { useIframe } from '../context/hooks';
+import { useIframe } from '../../generic/hooks/context/hooks';
 import { messageTypes } from '../constants';
 import { CATEGORIES, MOVE_DIRECTIONS } from './constants';
 import {

src/course-unit/move-modal/moveModal.test.tsx

@@ -11,7 +11,7 @@ import { getCourseOutlineInfoUrl } from '../data/api';
 import { courseOutlineInfoMock } from '../__mocks__';
 import { executeThunk } from '../../utils';
 import { getCourseOutlineInfoQuery } from '../data/thunk';
-import { IframeProvider } from '../context/iFrameContext';
+import { IframeProvider } from '../../generic/hooks/context/iFrameContext';
 import { IXBlock } from './interfaces';
 import MoveModal from './index';
 import messages from './messages';

src/course-unit/preview-changes/index.test.tsx

@@ -10,7 +10,6 @@ import {
 
 import IframePreviewLibraryXBlockChanges, { LibraryChangesMessageData } from '.';
 import { messageTypes } from '../constants';
-import { IframeProvider } from '../context/iFrameContext';
 import { libraryBlockChangesUrl } from '../data/api';
 import { ToastActionData } from '../../generic/toast-context';
 import { getLibraryBlockMetadataUrl } from '../../library-authoring/data/api';
@@ -25,15 +24,15 @@ const defaultEventData: LibraryChangesMessageData = {
 };
 
 const mockSendMessageToIframe = jest.fn();
-jest.mock('../context/hooks', () => ({
+jest.mock('../../generic/hooks/context/hooks', () => ({
   useIframe: () => ({
+    iframeRef: { current: { contentWindow: {} as HTMLIFrameElement } },
+    setIframeRef: () => {},
     sendMessageToIframe: mockSendMessageToIframe,
   }),
 }));
 const render = (eventData?: LibraryChangesMessageData) => {
-  baseRender(<IframePreviewLibraryXBlockChanges />, {
-    extraWrapper: ({ children }) => <IframeProvider>{ children }</IframeProvider>,
-  });
+  baseRender(<IframePreviewLibraryXBlockChanges />);
   const message = {
     data: {
       type: messageTypes.showXBlockLibraryChangesPreview,

src/course-unit/preview-changes/index.tsx

@@ -8,7 +8,7 @@ import { useEventListener } from '../../generic/hooks';
 import { messageTypes } from '../constants';
 import CompareChangesWidget from '../../library-authoring/component-comparison/CompareChangesWidget';
 import { useAcceptLibraryBlockChanges, useIgnoreLibraryBlockChanges } from '../data/apiHooks';
-import { useIframe } from '../context/hooks';
+import { useIframe } from '../../generic/hooks/context/hooks';
 import DeleteModal from '../../generic/delete-modal/DeleteModal';
 import messages from './messages';
 import { ToastContext } from '../../generic/toast-context';

src/course-unit/sidebar/PublishControls.jsx

@@ -4,7 +4,7 @@ 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 { useIframe } from '../../generic/hooks/context/hooks';
 import { editCourseUnitVisibilityAndData } from '../data/thunk';
 import { SidebarBody, SidebarFooter, SidebarHeader } from './components';
 import { PUBLISH_TYPES, messageTypes } from '../constants';

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

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