feat: Link-on-Paste for V2 Library Components

src/course-unit/CourseUnit.jsx

@@ -159,7 +159,7 @@ const CourseUnit = ({ courseId }) => {
                     strategy={verticalListSortingStrategy}
                   >
                     {unitXBlocks.map(({
-                      name, id, blockType: type, shouldScroll, userPartitionInfo, validationMessages,
+                      name, id, blockType: type, shouldScroll, userPartitionInfo, upstreamInfo, validationMessages,
                     }) => (
                       <CourseXBlock
                         id={id}
@@ -173,6 +173,7 @@ const CourseUnit = ({ courseId }) => {
                         unitXBlockActions={unitXBlockActions}
                         data-testid="course-xblock"
                         userPartitionInfo={userPartitionInfo}
+                        upstreamInfo={upstreamInfo}
                       />
                     ))}
                   </SortableContext>

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

@@ -21,7 +21,7 @@
 import messages from './messages';
 
 const CourseXBlock = ({
-  id, title, type, unitXBlockActions, shouldScroll, userPartitionInfo,
+  id, title, type, unitXBlockActions, shouldScroll, userPartitionInfo, upstreamInfo,
   handleConfigureSubmit, validationMessages, ...props
 }) => {
   const courseXBlockElementRef = useRef(null);
@@ -126,6 +126,14 @@
                   <Dropdown.Item onClick={openDeleteModal}>
                     {intl.formatMessage(messages.blockLabelButtonDelete)}
                   </Dropdown.Item>
+                  {upstreamInfo &&
+                    <>
+                      <Dropdown.Divider />
+                      <Dropdown.Item disabled={!upstreamInfo.syncUrl} onClick={() => unitXBlockActions.handleSync(id, upstreamInfo.syncUrl)}>
+                        Update from library
+                      </Dropdown.Item>
+                    </>
+                  }
                 </Dropdown.Menu>
               </Dropdown>
               <DeleteModal
@@ -170,6 +178,7 @@
   unitXBlockActions: PropTypes.shape({
     handleDelete: PropTypes.func,
     handleDuplicate: PropTypes.func,
+    handleSync: PropTypes.func,
   }).isRequired,
   userPartitionInfo: PropTypes.shape({
     selectablePartitions: PropTypes.arrayOf(PropTypes.shape({

src/course-unit/data/api.js

@@ -74,6 +74,7 @@
     parent_locator: parentLocator,
     display_name: displayName,
     staged_content: stagedContent,
+	link_to_upstream: true,
   };
 
   const { data } = await getAuthenticatedHttpClient()
@@ -149,6 +150,16 @@
   return data;
 }
 
+/**
+ * Sync a unit item to its upstream library item.
+ * @param {string} itemId
+ * @returns {Promise<Object>}
+ */
+export async function syncUnitItem(itemId, XBlockId, syncUrl) {
+  const { data } = await getAuthenticatedHttpClient().post(`${getStudioBaseUrl()}${syncUrl}`);
+  return data;
+}
+
 /**
  * Sets the order list of XBlocks.
  * @param {string} blockId - The identifier of the course unit.

src/course-unit/data/slice.js

@@ -100,6 +100,7 @@
         }),
       };
     },
+    syncXBlock: (state, { payload }) => {},
     fetchStaticFileNoticesSuccess: (state, { payload }) => {
       state.staticFileNotices = payload;
     },

src/course-unit/data/thunk.js

@@ -18,6 +18,7 @@ import {
   handleCourseUnitVisibilityAndData,
   deleteUnitItem,
   duplicateUnitItem,
+  syncUnitItem,
   setXBlockOrderList,
 } from './api';
 import {
@@ -250,6 +251,24 @@ export function duplicateUnitItemQuery(itemId, xblockId) {
   };
 }
 
+export function syncUnitItemQuery(itemId, xblockId, syncUrl) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+
+    try {
+      await syncUnitItem(itemId, xblockId, syncUrl);
+      const newCourseVerticalChildren = await getCourseVerticalChildren(itemId);
+      dispatch(syncXBlock({}));
+      dispatch(fetchCourseItemSuccess(courseUnit));
+      dispatch(hideProcessingNotification());
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      dispatch(hideProcessingNotification());
+      handleResponseErrors(error, dispatch, updateSavingStatus);
+    }
+  };
+}
+
 export function setXBlockOrderListQuery(blockId, xblockListIds, restoreCallback) {
   return async (dispatch) => {
     dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));

src/course-unit/hooks.jsx

@@ -11,6 +11,7 @@ import {
   fetchCourseVerticalChildrenData,
   deleteUnitItemQuery,
   duplicateUnitItemQuery,
+  syncUnitItemQuery,
   setXBlockOrderListQuery,
   editCourseUnitVisibilityAndData,
 } from './data/thunk';
@@ -105,6 +106,9 @@ export const useCourseUnit = ({ courseId, blockId }) => {
     handleDuplicate: (XBlockId) => {
       dispatch(duplicateUnitItemQuery(blockId, XBlockId));
     },
+    handleSync: (XBlockId, syncUrl) => {
+      dispatch(syncUnitItemQuery(blockId, XBlockId, syncUrl));
+    },
   };
 
   const handleXBlockDragAndDrop = (xblockListIds, restoreCallback) => {

src/generic/clipboard/paste-component/index.jsx

@@ -30,10 +30,10 @@ const PasteComponent = ({
       </Popover>
     </div>
   );
-
+  const textt = (clipboardData.sourceContextTitle || "").startsWith("lib:") ? "Link library component from clipboard" : text;
   return (
     <>
-      <PasteButton className={className} onClick={onClick} text={text} />
+      <PasteButton className={className} onClick={onClick} text={textt} />
       <OverlayTrigger
         show={showPopover}
         overlay={renderPopover}