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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

ChrisChV merged 34 commits into openedx:master from open-craft:navin/fal-4049/library-unit-page

Apr 11, 2025

src/CourseAuthoringRoutes.jsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -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';
@@ Expand All / @@ -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:
@@ Expand Down @@

src/constants.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -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

-Original file line number
+Diff line change
@@ Expand Up @@
     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';
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -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 = ({
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -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;
@@ Expand Down Expand Up @@
     }));
     const mockSendMessageToIframe = jest.fn();
-    jest.mock('../context/hooks', () => ({
+    jest.mock('../../generic/hooks/context/hooks', () => ({
       useIframe: () => ({
         sendMessageToIframe: mockSendMessageToIframe,
       }),
@@ Expand Down @@

src/course-unit/constants.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -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',
@@ Expand Down @@

src/course-unit/hooks.jsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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

Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export { default as CourseUnit } from './CourseUnit';
		export { IframeProvider } from './context/iFrameContext';

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -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 {
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -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';
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -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';
@@ Expand All / @@ -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,
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -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';
@@ Expand Down @@

src/course-unit/sidebar/PublishControls.jsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -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';
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ -1,5 +1 @@
-    export { useIframeMessages } from './useIframeMessages';
-    export { useIframeContent } from './useIframeContent';
     export { useMessageHandlers } from './useMessageHandlers';
-    export { useIFrameBehavior } from './useIFrameBehavior';
-    export { useLoadBearingHook } from './useLoadBearingHook';

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!