feat: [FC-0044] Course unit - Copy/paste functionality

package.json

@@ -67,7 +67,6 @@
     "@openedx/paragon": "^22.2.1",
     "@reduxjs/toolkit": "1.9.7",
     "@tanstack/react-query": "4.36.1",
-    "broadcast-channel": "^7.0.0",
     "classnames": "2.2.6",
     "core-js": "3.8.1",
     "email-validator": "2.0.4",

src/__mocks__/clipboardUnit.js

@@ -0,0 +1,16 @@
+export default {
+  content: {
+    id: 67,
+    userId: 3,
+    created: '2024-01-16T13:09:11.540615Z',
+    purpose: 'clipboard',
+    status: 'ready',
+    blockType: 'vertical',
+    blockTypeDisplay: 'Unit',
+    olxUrl: 'http://localhost:18010/api/content-staging/v1/staged-content/67/olx',
+    displayName: 'Introduction: Video and Sequences',
+  },
+  sourceUsageKey: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc',
+  sourceContextTitle: 'Demonstration Course',
+  sourceEditUrl: 'http://localhost:18010/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc',
+};

src/__mocks__/clipboardXBlock.js

@@ -0,0 +1,16 @@
+export default {
+  content: {
+    id: 69,
+    userId: 3,
+    created: '2024-01-16T13:33:21.314439Z',
+    purpose: 'clipboard',
+    status: 'ready',
+    blockType: 'html',
+    blockTypeDisplay: 'Text',
+    olxUrl: 'http://localhost:18010/api/content-staging/v1/staged-content/69/olx',
+    displayName: 'Blank HTML Page',
+  },
+  sourceUsageKey: 'block-v1:edX+DemoX+Demo_Course+type@html+block@html1',
+  sourceContextTitle: 'Demonstration Course',
+  sourceEditUrl: 'http://localhost:18010/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical1',
+};

src/__mocks__/index.js

@@ -0,0 +1,2 @@
+export { default as clipboardUnit } from './clipboardUnit';
+export { default as clipboardXBlock } from './clipboardXBlock';

src/constants.js

@@ -56,3 +56,14 @@ export const COURSE_BLOCK_NAMES = ({
   vertical: { id: 'vertical', name: 'Unit' },
   component: { id: 'component', name: 'Component' },
 });
+
+export const STUDIO_CLIPBOARD_CHANNEL = 'studio_clipboard_channel';
+
+export const CLIPBOARD_STATUS = {
+  loading: 'loading',
+  ready: 'ready',
+  expired: 'expired',
+  error: 'error',
+};
+
+export const STRUCTURAL_XBLOCK_TYPES = ['vertical', 'sequential', 'chapter', 'course'];

src/course-outline/CourseOutline.scss

@@ -9,7 +9,6 @@
 @import "./publish-modal/PublishModal";
 @import "./drag-helper/SortableItem";
 @import "./xblock-status/XBlockStatus";
-@import "./paste-button/PasteButton";
 
 div.row:has(> div > div.highlight) {
   animation: 5s glow;

src/course-outline/CourseOutline.test.jsx

@@ -3,7 +3,7 @@ import {
 } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
-import { initializeMockApp } from '@edx/frontend-platform';
+import { getConfig, initializeMockApp } from '@edx/frontend-platform';
 import MockAdapter from 'axios-mock-adapter';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -19,7 +19,6 @@ import {
   getCourseBlockApiUrl,
   getCourseItemApiUrl,
   getXBlockBaseApiUrl,
-  getClipboardUrl,
 } from './data/api';
 import { RequestStatus } from '../data/constants';
 import {
@@ -37,16 +36,19 @@ import {
   courseSectionMock,
   courseSubsectionMock,
 } from './__mocks__';
+import { clipboardUnit } from '../__mocks__';
 import { executeThunk } from '../utils';
 import { COURSE_BLOCK_NAMES, VIDEO_SHARING_OPTIONS } from './constants';
 import CourseOutline from './CourseOutline';
 
 import configureModalMessages from '../generic/configure-modal/messages';
+import pasteButtonMessages from '../generic/clipboard/paste-component/messages';
+import messages from './messages';
+import { getClipboardUrl } from '../generic/data/api';
 import headerMessages from './header-navigations/messages';
 import cardHeaderMessages from './card-header/messages';
 import enableHighlightsModalMessages from './enable-highlights-modal/messages';
 import statusBarMessages from './status-bar/messages';
-import pasteButtonMessages from './paste-button/messages';
 import subsectionMessages from './subsection-card/messages';
 import pageAlertMessages from './page-alerts/messages';
 import {
@@ -55,7 +57,6 @@ import {
   moveSubsection,
   moveUnit,
 } from './drag-helper/utils';
-import messages from './messages';
 
 let axiosMock;
 let store;
@@ -64,6 +65,13 @@ const courseId = '123';
 
 window.HTMLElement.prototype.scrollIntoView = jest.fn();
 
+const clipboardBroadcastChannelMock = {
+  postMessage: jest.fn(),
+  close: jest.fn(),
+};
+
+global.BroadcastChannel = jest.fn(() => clipboardBroadcastChannelMock);
+
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useLocation: () => ({
@@ -2080,7 +2088,7 @@ describe('<CourseOutline />', () => {
   });
 
   it('check whether unit copy & paste option works correctly', async () => {
-    const { findAllByTestId, findAllByRole } = render(<RootWrapper />);
+    const { findAllByTestId, queryByTestId, findAllByRole } = render(<RootWrapper />);
     // get first section -> first subsection -> first unit element
     const [section] = courseOutlineIndexMock.courseStructure.childInfo.children;
     const [sectionElement] = await findAllByTestId('section-card');
@@ -2091,27 +2099,11 @@ describe('<CourseOutline />', () => {
     const [unit] = subsection.childInfo.children;
     const [unitElement] = await within(subsectionElement).findAllByTestId('unit-card');
 
-    const expectedClipboardContent = {
-      content: {
-        blockType: 'vertical',
-        blockTypeDisplay: 'Unit',
-        created: '2024-01-29T07:58:36.844249Z',
-        displayName: unit.displayName,
-        id: 15,
-        olxUrl: 'http://localhost:18010/api/content-staging/v1/staged-content/15/olx',
-        purpose: 'clipboard',
-        status: 'ready',
-        userId: 3,
-      },
-      sourceUsageKey: unit.id,
-      sourceContexttitle: courseOutlineIndexMock.courseStructure.displayName,
-      sourceEditUrl: unit.studioUrl,
-    };
     // mock api call
     axiosMock
       .onPost(getClipboardUrl(), {
         usage_key: unit.id,
-      }).reply(200, expectedClipboardContent);
+      }).reply(200, clipboardUnit);
     // check that initialUserClipboard state is empty
     const { initialUserClipboard } = store.getState().courseOutline;
     expect(initialUserClipboard).toBeUndefined();
@@ -2125,19 +2117,19 @@ describe('<CourseOutline />', () => {
     await act(async () => fireEvent.click(copyButton));
 
     // check that initialUserClipboard state is updated
-    expect(store.getState().courseOutline.initialUserClipboard).toEqual(expectedClipboardContent);
+    expect(store.getState().generic.clipboardData).toEqual(clipboardUnit);
 
     [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
     // find clipboard content label
     const clipboardLabel = await within(subsectionElement).findByText(
-      pasteButtonMessages.clipboardContentLabel.defaultMessage,
+      pasteButtonMessages.pasteButtonWhatsInClipboardText.defaultMessage,
     );
     await act(async () => fireEvent.mouseOver(clipboardLabel));
 
-    // find clipboard content popup link
-    expect(
-      subsectionElement.querySelector('#vertical-paste-button-overlay'),
-    ).toHaveAttribute('href', unit.studioUrl);
+    // find clipboard content popover link
+    const popoverContent = queryByTestId('popover-content');
+    expect(popoverContent.tagName).toBe('A');
+    expect(popoverContent).toHaveAttribute('href', `${getConfig().STUDIO_BASE_URL}${unit.studioUrl}`);
 
     // check paste button functionality
     // mock api call

src/course-outline/data/api.js

@@ -434,20 +434,6 @@ export async function setVideoSharingOption(courseId, videoSharingOption) {
   return data;
 }
 
-/**
- * Copy block to clipboard
- * @param {string} usageKey
- * @returns {Promise<Object>}
-*/
-export async function copyBlockToClipboard(usageKey) {
-  const { data } = await getAuthenticatedHttpClient()
-    .post(getClipboardUrl(), {
-      usage_key: usageKey,
-    });
-
-  return camelCaseObject(data);
-}
-
 /**
  * Paste block to clipboard
  * @param {string} parentLocator

src/course-outline/data/selectors.js

@@ -8,6 +8,5 @@ export const getCurrentSection = (state) => state.courseOutline.currentSection;
 export const getCurrentSubsection = (state) => state.courseOutline.currentSubsection;
 export const getCourseActions = (state) => state.courseOutline.actions;
 export const getCustomRelativeDatesActiveFlag = (state) => state.courseOutline.isCustomRelativeDatesActive;
-export const getInitialUserClipboard = (state) => state.courseOutline.initialUserClipboard;
 export const getProctoredExamsFlag = (state) => state.courseOutline.enableProctoredExams;
 export const getPasteFileNotices = (state) => state.courseOutline.pasteFileNotices;

src/course-outline/data/slice.js

@@ -38,12 +38,6 @@ const slice = createSlice({
       childAddable: true,
       duplicable: true,
     },
-    initialUserClipboard: {
-      content: {},
-      sourceUsageKey: null,
-      sourceContexttitle: null,
-      sourceEditUrl: null,
-    },
     enableProctoredExams: false,
     pasteFileNotices: {},
   },
@@ -52,7 +46,6 @@ const slice = createSlice({
       state.outlineIndexData = payload;
       state.sectionsList = payload.courseStructure?.childInfo?.children || [];
       state.isCustomRelativeDatesActive = payload.isCustomRelativeDatesActive;
-      state.initialUserClipboard = payload.initialUserClipboard;
       state.enableProctoredExams = payload.courseStructure?.enableProctoredExams;
     },
     updateOutlineIndexLoadingStatus: (state, { payload }) => {
@@ -79,9 +72,6 @@ const slice = createSlice({
         ...payload,
       };
     },
-    updateClipboardContent: (state, { payload }) => {
-      state.initialUserClipboard = payload;
-    },
     updateCourseActions: (state, { payload }) => {
       state.actions = {
         ...state.actions,
@@ -210,7 +200,6 @@ export const {
   reorderSectionList,
   reorderSubsectionList,
   reorderUnitList,
-  updateClipboardContent,
   setPasteFileNotices,
   removePasteFileNotices,
 } = slice.actions;