fix: excessive calls to the clipboard API endpoint [sumac]

src/course-outline/CourseOutline.jsx

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

src/course-outline/CourseOutline.test.jsx

@@ -2182,9 +2182,6 @@ describe('<CourseOutline />', () => {
       .onPost(getClipboardUrl(), {
         usage_key: unit.id,
       }).reply(200, clipboardUnit);
-    // check that initialUserClipboard state is empty
-    const { initialUserClipboard } = store.getState().courseOutline;
-    expect(initialUserClipboard).toBeUndefined();
 
     // find menu button and click on it to open menu
     const menu = await within(unitElement).findByTestId('unit-card-header__menu-button');
@@ -2194,9 +2191,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/api.js

@@ -28,7 +28,6 @@ export const getCourseReindexApiUrl = (reindexLink) => `${getApiBaseUrl()}${rein
 export const getXBlockBaseApiUrl = () => `${getApiBaseUrl()}/xblock/`;
 export const getCourseItemApiUrl = (itemId) => `${getXBlockBaseApiUrl()}${itemId}`;
 export const getXBlockApiUrl = (blockId) => `${getXBlockBaseApiUrl()}outline/${blockId}`;
-export const getClipboardUrl = () => `${getApiBaseUrl()}/api/content-staging/v1/clipboard/`;
 export const exportTags = (courseId) => `${getApiBaseUrl()}/api/content_tagging/v1/object_tags/${courseId}/export/`;
 
 /**

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 { API_ERROR_TYPES, COURSE_BLOCK_NAMES } from '../constants';
 import {
@@ -88,7 +87,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 { RequestStatus } from '../data/constants';
 import { COURSE_BLOCK_NAMES } from './constants';
@@ -72,6 +71,7 @@ const useCourseOutline = ({ courseId }) => {
     mfeProctoredExamSettingsUrl,
     advanceSettingsUrl,
   } = useSelector(getOutlineIndexData);
+
   const { outlineIndexLoadingStatus, reIndexLoadingStatus } = useSelector(getLoadingStatus);
   const statusBarData = useSelector(getStatusBarData);
   const savingStatus = useSelector(getSavingStatus);
@@ -95,10 +95,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));
   };
@@ -339,7 +335,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,
@@ -233,7 +233,7 @@ const SubsectionCard = ({
                 >
                   {intl.formatMessage(messages.newUnitButton)}
                 </Button>
-                {enableCopyPasteUnits && showPasteUnit && (
+                {enableCopyPasteUnits && showPasteUnit && sharedClipboardData && (
                   <PasteComponent
                     className="mt-4"
                     text={intl.formatMessage(messages.pasteButton)}

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()}