fix: wip

src/course-outline/CourseOutline.jsx

@@ -105,7 +105,6 @@ const CourseOutline = ({ courseId }) => {
     handleNewUnitSubmit,
     getUnitUrl,
     handleVideoSharingOptionChange,
-    handleCopyToClipboardClick,
     handlePasteClipboardClick,
     notificationDismissUrl,
     discussionsSettings,
@@ -419,7 +418,6 @@ const CourseOutline = ({ courseId }) => {
                                                 onDuplicateSubmit={handleDuplicateUnitSubmit}
                                                 getTitleLink={getUnitUrl}
                                                 onOrderChange={updateUnitOrderByIndex}
-                                                onCopyToClipboardClick={handleCopyToClipboardClick}
                                                 discussionsSettings={discussionsSettings}
                                               />
                                             ))}

src/course-outline/CourseOutline.test.jsx

@@ -2194,9 +2194,6 @@ describe('<CourseOutline />', () => {
     const copyButton = await within(unitElement).findByText(cardHeaderMessages.menuCopy.defaultMessage);
     await act(async () => fireEvent.click(copyButton));
 
-    // check that initialUserClipboard state is updated
-    expect(store.getState().generic.clipboardData).toEqual(clipboardUnit);
-
     [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
     // find clipboard content label
     const clipboardLabel = await within(subsectionElement).findByText(

src/course-outline/data/thunk.js

@@ -1,5 +1,4 @@
 import { RequestStatus } from '../../data/constants';
-import { updateClipboardData } from '../../generic/data/slice';
 import { NOTIFICATION_MESSAGES } from '../../constants';
 import { COURSE_BLOCK_NAMES } from '../constants';
 import {
@@ -71,7 +70,6 @@ export function fetchCourseOutlineIndexQuery(courseId) {
         },
       } = outlineIndex;
       dispatch(fetchOutlineIndexSuccess(outlineIndex));
-      dispatch(updateClipboardData(outlineIndex.initialUserClipboard));
       dispatch(updateStatusBar({
         courseReleaseDate,
         highlightsEnabledForMessaging,

src/course-outline/hooks.jsx

@@ -4,7 +4,6 @@ import { useNavigate } from 'react-router-dom';
 import { useToggle } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 
-import { copyToClipboard } from '../generic/data/thunks';
 import { getSavingStatus as getGenericSavingStatus } from '../generic/data/selectors';
 import { getWaffleFlags } from '../data/selectors';
 import { RequestStatus } from '../data/constants';
@@ -74,6 +73,7 @@ const useCourseOutline = ({ courseId }) => {
     mfeProctoredExamSettingsUrl,
     advanceSettingsUrl,
   } = useSelector(getOutlineIndexData);
+
   const { outlineIndexLoadingStatus, reIndexLoadingStatus } = useSelector(getLoadingStatus);
   const statusBarData = useSelector(getStatusBarData);
   const savingStatus = useSelector(getSavingStatus);
@@ -97,10 +97,6 @@ const useCourseOutline = ({ courseId }) => {
 
   const isSavingStatusFailed = savingStatus === RequestStatus.FAILED || genericSavingStatus === RequestStatus.FAILED;
 
-  const handleCopyToClipboardClick = (usageKey) => {
-    dispatch(copyToClipboard(usageKey));
-  };
-
   const handlePasteClipboardClick = (parentLocator, sectionId) => {
     dispatch(pasteClipboardContent(parentLocator, sectionId));
   };
@@ -342,7 +338,6 @@ const useCourseOutline = ({ courseId }) => {
     openUnitPage,
     handleNewUnitSubmit,
     handleVideoSharingOptionChange,
-    handleCopyToClipboardClick,
     handlePasteClipboardClick,
     notificationDismissUrl,
     discussionsSettings,

src/course-outline/subsection-card/SubsectionCard.jsx

@@ -16,7 +16,7 @@ import { RequestStatus } from '../../data/constants';
 import CardHeader from '../card-header/CardHeader';
 import SortableItem from '../../generic/drag-helper/SortableItem';
 import { DragContext } from '../../generic/drag-helper/DragContextProvider';
-import { useCopyToClipboard, PasteComponent } from '../../generic/clipboard';
+import { useClipboard, PasteComponent } from '../../generic/clipboard';
 import TitleButton from '../card-header/TitleButton';
 import XBlockStatus from '../xblock-status/XBlockStatus';
 import { getItemStatus, getItemStatusBorder, scrollToElement } from '../utils';
@@ -49,7 +49,7 @@ const SubsectionCard = ({
   const isScrolledToElement = locatorId === subsection.id;
   const [isFormOpen, openForm, closeForm] = useToggle(false);
   const namePrefix = 'subsection';
-  const { sharedClipboardData, showPasteUnit } = useCopyToClipboard();
+  const { sharedClipboardData, showPasteUnit } = useClipboard();
 
   const {
     id,
@@ -237,6 +237,8 @@ const SubsectionCard = ({
                   <PasteComponent
                     className="mt-4"
                     text={intl.formatMessage(messages.pasteButton)}
+                    // FIXME:
+                    // @ts-ignore
                     clipboardData={sharedClipboardData}
                     onClick={handlePasteButtonClick}
                   />

src/course-outline/unit-card/UnitCard.jsx

@@ -13,6 +13,7 @@ import SortableItem from '../../generic/drag-helper/SortableItem';
 import TitleLink from '../card-header/TitleLink';
 import XBlockStatus from '../xblock-status/XBlockStatus';
 import { getItemStatus, getItemStatusBorder, scrollToElement } from '../utils';
+import { useClipboard } from '../../generic/clipboard';
 
 const UnitCard = ({
   unit,
@@ -30,7 +31,6 @@ const UnitCard = ({
   onDuplicateSubmit,
   getTitleLink,
   onOrderChange,
-  onCopyToClipboardClick,
   discussionsSettings,
 }) => {
   const currentRef = useRef(null);
@@ -41,6 +41,8 @@ const UnitCard = ({
   const [isFormOpen, openForm, closeForm] = useToggle(false);
   const namePrefix = 'unit';
 
+  const { copyToClipboard } = useClipboard();
+
   const {
     id,
     category,
@@ -98,7 +100,7 @@ const UnitCard = ({
   };
 
   const handleCopyClick = () => {
-    onCopyToClipboardClick(unit.id);
+    copyToClipboard(id);
   };
 
   const titleComponent = (
@@ -241,7 +243,6 @@ UnitCard.propTypes = {
   onOrderChange: PropTypes.func.isRequired,
   isSelfPaced: PropTypes.bool.isRequired,
   isCustomRelativeDatesActive: PropTypes.bool.isRequired,
-  onCopyToClipboardClick: PropTypes.func.isRequired,
   discussionsSettings: PropTypes.shape({
     providerType: PropTypes.string,
     enableGradedUnits: PropTypes.bool,

src/course-outline/unit-card/UnitCard.test.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   act, render, fireEvent, within,
 } from '@testing-library/react';
@@ -48,6 +47,13 @@ const unit = {
 
 const queryClient = new QueryClient();
 
+const clipboardBroadcastChannelMock = {
+  postMessage: jest.fn(),
+  close: jest.fn(),
+};
+
+global.BroadcastChannel = jest.fn(() => clipboardBroadcastChannelMock);
+
 const renderComponent = (props) => render(
   <AppProvider store={store}>
     <QueryClientProvider client={queryClient}>
@@ -62,7 +68,6 @@ const renderComponent = (props) => render(
           onOpenPublishModal={jest.fn()}
           onOpenDeleteModal={jest.fn()}
           onOpenConfigureModal={jest.fn()}
-          onCopyToClipboardClick={jest.fn()}
           savingStatus=""
           onEditSubmit={jest.fn()}
           onDuplicateSubmit={jest.fn()}

src/course-unit/CourseUnit.test.jsx

@@ -1,4 +1,5 @@
 import MockAdapter from 'axios-mock-adapter';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import {
   act, render, waitFor, within, screen,
 } from '@testing-library/react';
@@ -66,6 +67,7 @@ import messages from './messages';
 
 let axiosMock;
 let store;
+let queryClient;
 const courseId = '123';
 const blockId = '567890';
 const unitDisplayName = courseUnitIndexMock.metadata.display_name;
@@ -90,34 +92,6 @@ jest.mock('react-router-dom', () => ({
   useNavigate: () => mockedUsedNavigate,
 }));
 
-jest.mock('@tanstack/react-query', () => ({
-  useQuery: jest.fn(({ queryKey }) => {
-    if (queryKey[0] === 'contentTaxonomyTags') {
-      return {
-        data: {
-          taxonomies: [],
-        },
-        isSuccess: true,
-      };
-    } if (queryKey[0] === 'contentTagsCount') {
-      return {
-        data: 17,
-        isSuccess: true,
-      };
-    }
-    return {
-      data: {},
-      isSuccess: true,
-    };
-  }),
-  useQueryClient: jest.fn(() => ({
-    setQueryData: jest.fn(),
-  })),
-  useMutation: jest.fn(() => ({
-    mutateAsync: jest.fn(),
-  })),
-}));
-
 const clipboardBroadcastChannelMock = {
   postMessage: jest.fn(),
   close: jest.fn(),
@@ -145,7 +119,9 @@ const RootWrapper = () => (
   <AppProvider store={store}>
     <IntlProvider locale="en">
       <IframeProvider>
-        <CourseUnit courseId={courseId} />
+        <QueryClientProvider client={queryClient}>
+          <CourseUnit courseId={courseId} />
+        </QueryClientProvider>
       </IframeProvider>
     </IntlProvider>
   </AppProvider>
@@ -164,6 +140,13 @@ describe('<CourseUnit />', () => {
     window.scrollTo = jest.fn();
     global.localStorage.clear();
     store = initializeStore();
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false,
+        },
+      },
+    });
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
     axiosMock
       .onGet(getClipboardUrl())
@@ -182,7 +165,7 @@ describe('<CourseUnit />', () => {
     await executeThunk(fetchCourseVerticalChildrenData(blockId), store.dispatch);
     axiosMock
       .onGet(getContentTaxonomyTagsApiUrl(blockId))
-      .reply(200, {});
+      .reply(200, { taxonomies: [] });
     axiosMock
       .onGet(getContentTaxonomyTagsCountApiUrl(blockId))
       .reply(200, 17);
@@ -1249,13 +1232,6 @@ describe('<CourseUnit />', () => {
           enable_copy_paste_units: true,
         });
 
-      axiosMock
-        .onGet(getCourseSectionVerticalApiUrl(blockId))
-        .reply(200, {
-          ...courseSectionVerticalMock,
-          user_clipboard: clipboardUnit,
-        });
-
       await executeThunk(fetchCourseUnitQuery(courseId), store.dispatch);
       await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
 
@@ -1305,11 +1281,9 @@ describe('<CourseUnit />', () => {
       });
 
       axiosMock
-        .onGet(getCourseSectionVerticalApiUrl(blockId))
-        .reply(200, {
-          ...courseSectionVerticalMock,
-          user_clipboard: clipboardXBlock,
-        });
+        .onGet(getClipboardUrl())
+        .reply(200, clipboardXBlock);
+
       axiosMock
         .onGet(getCourseUnitApiUrl(courseId))
         .reply(200, {
@@ -1380,13 +1354,6 @@ describe('<CourseUnit />', () => {
           enable_copy_paste_units: true,
         });
 
-      axiosMock
-        .onGet(getCourseSectionVerticalApiUrl(blockId))
-        .reply(200, {
-          ...courseSectionVerticalMock,
-          user_clipboard: clipboardUnit,
-        });
-
       await executeThunk(fetchCourseUnitQuery(courseId), store.dispatch);
       await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
 
@@ -1439,13 +1406,6 @@ describe('<CourseUnit />', () => {
           enable_copy_paste_units: true,
         });
 
-      axiosMock
-        .onGet(getCourseSectionVerticalApiUrl(blockId))
-        .reply(200, {
-          ...courseSectionVerticalMock,
-          user_clipboard: clipboardUnit,
-        });
-
       await executeThunk(fetchCourseUnitQuery(courseId), store.dispatch);
       await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
 
@@ -1500,13 +1460,6 @@ describe('<CourseUnit />', () => {
           enable_copy_paste_units: true,
         });
 
-      axiosMock
-        .onGet(getCourseSectionVerticalApiUrl(blockId))
-        .reply(200, {
-          ...courseSectionVerticalMock,
-          user_clipboard: clipboardUnit,
-        });
-
       await executeThunk(fetchCourseUnitQuery(courseId), store.dispatch);
       await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
 

src/course-unit/data/thunk.js

@@ -8,7 +8,6 @@ import { handleResponseErrors } from '../../generic/saving-error-alert';
 import { RequestStatus } from '../../data/constants';
 import { NOTIFICATION_MESSAGES } from '../../constants';
 import { updateModel, updateModels } from '../../generic/model-store';
-import { updateClipboardData } from '../../generic/data/slice';
 import { messageTypes } from '../constants';
 import {
   getCourseUnitData,
@@ -77,7 +76,8 @@ export function fetchCourseSectionVerticalData(courseId, sequenceId) {
       }));
       dispatch(fetchStaticFileNoticesSuccess(JSON.parse(localStorage.getItem('staticFileNotices'))));
       localStorage.removeItem('staticFileNotices');
-      dispatch(updateClipboardData(courseSectionVerticalData.userClipboard));
+      // TODO: Check if this is necessary
+      // dispatch(updateClipboardData(courseSectionVerticalData.userClipboard));
       dispatch(fetchSequenceSuccess({ sequenceId }));
       return true;
     } catch (error) {
@@ -230,8 +230,9 @@ export function deleteUnitItemQuery(itemId, xblockId, sendMessageToIframe) {
     try {
       await deleteUnitItem(xblockId);
       sendMessageToIframe(messageTypes.completeXBlockDeleting, { locator: xblockId });
-      const { userClipboard } = await getCourseSectionVerticalData(itemId);
-      dispatch(updateClipboardData(userClipboard));
+      // TODO: Check if this is necessary
+      // const { userClipboard } = await getCourseSectionVerticalData(itemId);
+      // dispatch(updateClipboardData(userClipboard));
       const courseUnit = await getCourseUnitData(itemId);
       dispatch(fetchCourseItemSuccess(courseUnit));
       dispatch(hideProcessingNotification());

src/course-unit/hooks.jsx

@@ -4,7 +4,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useToggle } from '@openedx/paragon';
 
 import { RequestStatus } from '../data/constants';
-import { useCopyToClipboard } from '../generic/clipboard';
+import { useClipboard } from '../generic/clipboard';
 import { useEventListener } from '../generic/hooks';
 import { COURSE_BLOCK_NAMES } from '../constants';
 import { messageTypes, PUBLISH_TYPES } from './constants';
@@ -60,7 +60,7 @@ export const useCourseUnit = ({ courseId, blockId }) => {
   const courseOutlineInfo = useSelector(getCourseOutlineInfo);
   const movedXBlockParams = useSelector(getMovedXBlockParams);
   const { currentlyVisibleToStudents } = courseUnit;
-  const { sharedClipboardData, showPasteXBlock, showPasteUnit } = useCopyToClipboard(canEdit);
+  const { sharedClipboardData, showPasteXBlock, showPasteUnit } = useClipboard(canEdit);
   const { canPasteComponent } = courseVerticalChildren;
   const { displayName: unitTitle, category: unitCategory } = xblockInfo;
   const sequenceId = courseUnit.ancestorInfo?.ancestors[0].id;