feat: [AXIMST-338] Course unit - Added canEdit and canPasteComponent variables

src/course-unit/CourseUnit.jsx

@@ -54,6 +54,7 @@ const CourseUnit = ({ courseId }) => {
     handleConfigureSubmit,
     courseVerticalChildren,
     handleXBlockDragAndDrop,
+    canPasteComponent,
   } = useCourseUnit({ courseId, blockId });
 
   const initialXBlocksData = useMemo(() => courseVerticalChildren.children ?? [], [courseVerticalChildren.children]);
@@ -170,7 +171,7 @@ const CourseUnit = ({ courseId }) => {
                 blockId={blockId}
                 handleCreateNewCourseXBlock={handleCreateNewCourseXBlock}
               />
-              {showPasteXBlock && (
+              {showPasteXBlock && canPasteComponent && (
                 <PasteComponent
                   clipboardData={sharedClipboardData}
                   handleCreateNewCourseXBlock={handleCreateNewCourseXBlock}

src/course-unit/CourseUnit.test.jsx

@@ -1288,6 +1288,26 @@ describe('<CourseUnit />', () => {
 
       expect(queryByTestId('has-error-files')).toBeNull();
     });
+
+    it('should hide the "Paste component" block if canPasteComponent is false', async () => {
+      const { queryByText, queryByRole } = render(<RootWrapper />);
+
+      axiosMock
+        .onGet(getCourseVerticalChildrenApiUrl(blockId))
+        .reply(200, {
+          ...courseVerticalChildrenMock,
+          canPasteComponent: false,
+        });
+
+      await executeThunk(fetchCourseVerticalChildrenData(blockId), store.dispatch);
+
+      expect(queryByRole('button', {
+        name: pasteComponentMessages.pasteComponentButtonText.defaultMessage,
+      })).not.toBeInTheDocument();
+      expect(queryByText(
+        pasteComponentMessages.pasteComponentWhatsInClipboardText.defaultMessage,
+      )).not.toBeInTheDocument();
+    });
   });
 
   describe('Drag and drop', () => {

src/course-unit/__mocks__/courseVerticalChildren.js

@@ -144,4 +144,5 @@ module.exports = {
     },
   ],
   isPublished: false,
+  canPasteComponent: true,
 };

src/course-unit/clipboard/hooks/useClipboard.jsx

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import { getClipboardData } from '../../data/selectors';
 import { CLIPBOARD_STATUS, NOT_XBLOCK_TYPES, STUDIO_CLIPBOARD_CHANNEL } from '../../constants';
 
-const useCopyToClipboard = (canEdit = true) => {
+const useCopyToClipboard = (canEdit) => {
   const [clipboardBroadcastChannel] = useState(() => new BroadcastChannel(STUDIO_CLIPBOARD_CHANNEL));
   const [showPasteUnit, setShowPasteUnit] = useState(false);
   const [showPasteXBlock, setShowPasteXBlock] = useState(false);

src/course-unit/course-xblock/CourseXBlock.jsx

@@ -13,7 +13,7 @@ import ConfigureModal from '../../generic/configure-modal/ConfigureModal';
 import ConditionalSortableElement from '../../generic/drag-helper/ConditionalSortableElement';
 import { scrollToElement } from '../../course-outline/utils';
 import { COURSE_BLOCK_NAMES } from '../../constants';
-import { getCourseId } from '../data/selectors';
+import { getCanEdit, getCourseId } from '../data/selectors';
 import { copyToClipboard } from '../data/thunk';
 import { COMPONENT_ICON_TYPES } from '../constants';
 import ContentIFrame from './ContentIFrame';
@@ -29,6 +29,7 @@ const CourseXBlock = ({
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const courseId = useSelector(getCourseId);
+  const canEdit = useSelector(getCanEdit);
   const intl = useIntl();
   const iframeUrl = getIFrameUrl({ blockId: id });
 
@@ -92,9 +93,11 @@ const CourseXBlock = ({
                   <Dropdown.Item>
                     {intl.formatMessage(messages.blockLabelButtonMove)}
                   </Dropdown.Item>
-                  <Dropdown.Item onClick={() => dispatch(copyToClipboard(id))}>
-                    {intl.formatMessage(messages.blockLabelButtonCopyToClipboard)}
-                  </Dropdown.Item>
+                  {canEdit && (
+                    <Dropdown.Item onClick={() => dispatch(copyToClipboard(id))}>
+                      {intl.formatMessage(messages.blockLabelButtonCopyToClipboard)}
+                    </Dropdown.Item>
+                  )}
                   <Dropdown.Item onClick={openConfigureModal}>
                     {intl.formatMessage(messages.blockLabelButtonManageAccess)}
                   </Dropdown.Item>

src/course-unit/data/selectors.js

@@ -1,4 +1,5 @@
 export const getCourseUnitData = (state) => state.courseUnit.unit;
+export const getCanEdit = (state) => state.courseUnit.canEdit;
 export const getStaticFileNotices = (state) => state.courseUnit.staticFileNotices;
 export const getSavingStatus = (state) => state.courseUnit.savingStatus;
 export const getLoadingStatus = (state) => state.courseUnit.loadingStatus;

src/course-unit/data/slice.js

@@ -9,6 +9,7 @@ const slice = createSlice({
     savingStatus: '',
     isQueryPending: false,
     isEditTitleFormOpen: false,
+    canEdit: true,
     loadingStatus: {
       fetchUnitLoadingStatus: RequestStatus.IN_PROGRESS,
       courseSectionVerticalLoadingStatus: RequestStatus.IN_PROGRESS,

src/course-unit/hooks.jsx

@@ -21,8 +21,8 @@ import {
   getLoadingStatus,
   getSavingStatus,
   getSequenceStatus,
-  getCourseUnitEnableCopyPaste,
   getStaticFileNotices,
+  getCanEdit,
 } from './data/selectors';
 import { changeEditTitleFormOpen, updateQueryPendingStatus } from './data/slice';
 
@@ -41,13 +41,14 @@ export const useCourseUnit = ({ courseId, blockId }) => {
   const sequenceStatus = useSelector(getSequenceStatus);
   const { draftPreviewLink, publishedPreviewLink } = useSelector(getCourseSectionVertical);
   const courseVerticalChildren = useSelector(getCourseVerticalChildren);
-  const enableCopyPasteUnits = useSelector(getCourseUnitEnableCopyPaste);
   const staticFileNotices = useSelector(getStaticFileNotices);
   const navigate = useNavigate();
   const isEditTitleFormOpen = useSelector(state => state.courseUnit.isEditTitleFormOpen);
   const isQueryPending = useSelector(state => state.courseUnit.isQueryPending);
+  const canEdit = useSelector(getCanEdit);
   const { currentlyVisibleToStudents } = courseUnit;
-  const { sharedClipboardData, showPasteXBlock, showPasteUnit } = useCopyToClipboard();
+  const { sharedClipboardData, showPasteXBlock, showPasteUnit } = useCopyToClipboard(canEdit);
+  const { canPasteComponent } = courseVerticalChildren;
 
   const unitTitle = courseUnit.metadata?.displayName || '';
   const sequenceId = courseUnit.ancestorInfo?.ancestors[0].id;
@@ -135,7 +136,6 @@ export const useCourseUnit = ({ courseId, blockId }) => {
       || loadingStatus.courseSectionVerticalLoadingStatus === RequestStatus.IN_PROGRESS,
     isEditTitleFormOpen,
     isInternetConnectionAlertFailed: savingStatus === RequestStatus.FAILED,
-    enableCopyPasteUnits,
     sharedClipboardData,
     showPasteXBlock,
     showPasteUnit,
@@ -148,5 +148,6 @@ export const useCourseUnit = ({ courseId, blockId }) => {
     handleConfigureSubmit,
     courseVerticalChildren,
     handleXBlockDragAndDrop,
+    canPasteComponent,
   };
 };

src/course-unit/sidebar/components/sidebar-footer/ActionButtons.jsx

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Button } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { getCourseUnitData } from '../../../data/selectors';
+import { getCanEdit, getCourseUnitData } from '../../../data/selectors';
 import { copyToClipboard } from '../../../data/thunk';
 import messages from '../../messages';
 
@@ -16,6 +16,7 @@ const ActionButtons = ({ openDiscardModal, handlePublishing }) => {
     hasChanges,
     enableCopyPasteUnits,
   } = useSelector(getCourseUnitData);
+  const canEdit = useSelector(getCanEdit);
 
   return (
     <>
@@ -29,7 +30,7 @@ const ActionButtons = ({ openDiscardModal, handlePublishing }) => {
           {intl.formatMessage(messages.actionButtonDiscardChangesTitle)}
         </Button>
       )}
-      {enableCopyPasteUnits && (
+      {enableCopyPasteUnits && canEdit && (
         <Button
           onClick={() => dispatch(copyToClipboard(id))}
           className="mt-2"