feat: New modal to sync changes for standalone text components [FC-0097] (#2449)

Adds a new sync modal when a Text component has local changes.

Author: ChrisChV

src/course-libraries/CourseLibraries.test.tsx

@@ -327,4 +327,19 @@ describe('<CourseLibraries ReviewTab />', () => {
     expect(mockShowToast).toHaveBeenCalledWith(expectedToastMsg);
     expect(mockInvalidateQueries).toHaveBeenCalledWith({ queryKey: ['courseLibraries', 'course-v1:OpenEdx+DemoX+CourseX'] });
   });
+
+  it('should show sync modal with local changes', async () => {
+    const itemIndex = 3;
+    const user = userEvent.setup();
+    await renderCourseLibrariesReviewPage(mockGetEntityLinksSummaryByDownstreamContext.courseKey);
+    const previewBtns = await screen.findAllByRole('button', { name: 'Review Updates' });
+    expect(previewBtns.length).toEqual(7);
+    await user.click(previewBtns[itemIndex]);
+
+    expect(screen.getByText('This library content has local edits.')).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /course content/i })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: /published library content/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /update to published library content/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /keep course content/i })).toBeInTheDocument();
+  });
 });

src/course-libraries/ReviewTabContent.tsx

@@ -173,6 +173,8 @@ const ItemReviewList = ({
       upstreamBlockId: outOfSyncItemsByKey[info.usageKey].upstreamKey,
       upstreamBlockVersionSynced: outOfSyncItemsByKey[info.usageKey].versionSynced,
       isContainer: info.blockType === 'vertical' || info.blockType === 'sequential' || info.blockType === 'chapter',
+      blockType: info.blockType,
+      isLocallyModified: outOfSyncItemsByKey[info.usageKey].downstreamIsModified,
     });
   }, [outOfSyncItemsByKey]);
 
@@ -213,7 +215,10 @@ const ItemReviewList = ({
 
   const updateBlock = useCallback(async (info: ContentHit) => {
     try {
-      await acceptChangesMutation.mutateAsync(info.usageKey);
+      await acceptChangesMutation.mutateAsync({
+        blockId: info.usageKey,
+        overrideCustomizations: info.blockType === 'html' && outOfSyncItemsByKey[info.usageKey].downstreamIsModified,
+      });
       reloadLinks(info.usageKey);
       showToast(intl.formatMessage(
         messages.updateSingleBlockSuccess,
@@ -230,7 +235,9 @@ const ItemReviewList = ({
       return;
     }
     try {
-      await ignoreChangesMutation.mutateAsync(blockData.downstreamBlockId);
+      await ignoreChangesMutation.mutateAsync({
+        blockId: blockData.downstreamBlockId,
+      });
       reloadLinks(blockData.downstreamBlockId);
       showToast(intl.formatMessage(
         messages.ignoreSingleBlockSuccess,

src/course-libraries/__mocks__/publishableEntityLinks.json

@@ -11,6 +11,7 @@
     "downstreamContextKey": "course-v1:OpenEdx+DemoX+CourseX",
     "versionSynced": 2,
     "versionDeclined": null,
+    "downstreamIsModified": false,
     "created": "2025-02-08T14:07:05.588484Z",
     "updated": "2025-02-08T14:07:05.588484Z"
   },
@@ -26,6 +27,7 @@
     "downstreamContextKey": "course-v1:OpenEdx+DemoX+CourseX",
     "versionSynced": 2,
     "versionDeclined": null,
+    "downstreamIsModified": false,
     "created": "2025-02-08T14:07:05.588484Z",
     "updated": "2025-02-08T14:07:05.588484Z"
   },
@@ -41,6 +43,7 @@
     "downstreamContextKey": "course-v1:OpenEdx+DemoX+CourseX",
     "versionSynced": 16,
     "versionDeclined": null,
+    "downstreamIsModified": true,
     "created": "2025-02-08T14:07:05.588484Z",
     "updated": "2025-02-08T14:07:05.588484Z"
   },
@@ -56,6 +59,7 @@
     "downstreamContextKey": "course-v1:OpenEdx+DemoX+CourseX",
     "versionSynced": 2,
     "versionDeclined": null,
+    "downstreamIsModified": false,
     "created": "2025-02-08T14:07:05.588484Z",
     "updated": "2025-02-08T14:07:05.588484Z"
   },
@@ -71,6 +75,7 @@
     "downstreamContextKey": "course-v1:OpenEdx+DemoX+CourseX",
     "versionSynced": 2,
     "versionDeclined": null,
+    "downstreamIsModified": false,
     "created": "2025-02-08T14:07:05.588484Z",
     "updated": "2025-02-08T14:07:05.588484Z"
   },
@@ -86,6 +91,7 @@
     "downstreamContextKey": "course-v1:OpenEdx+DemoX+CourseX",
     "versionSynced": 2,
     "versionDeclined": null,
+    "downstreamIsModified": false,
     "created": "2025-02-08T14:07:05.588484Z",
     "updated": "2025-02-08T14:07:05.588484Z"
   },

src/course-libraries/data/api.ts

@@ -29,6 +29,7 @@ export interface BasePublishableEntityLink {
   created: string;
   updated: string;
   readyToSync: boolean;
+  downstreamIsModified: boolean;
 }
 
 export interface ComponentPublishableEntityLink extends BasePublishableEntityLink {

src/course-unit/data/api.ts

@@ -1,4 +1,3 @@
-// @ts-check
 import { camelCaseObject, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
@@ -44,14 +43,6 @@ export async function getVerticalData(unitId: string): Promise<object> {
 
 /**
  * Creates a new course XBlock.
- * @param {Object} options - The options for creating the XBlock.
- * @param {string} options.type - The type of the XBlock.
- * @param {string} [options.category] - The category of the XBlock. Defaults to the type if not provided.
- * @param {string} options.parentLocator - The parent locator.
- * @param {string} [options.displayName] - The display name.
- * @param {string} [options.boilerplate] - The boilerplate.
- * @param {string} [options.stagedContent] - The staged content.
- * @param {string} [options.libraryContentKey] - component key from library if being imported.
  */
 export async function createCourseXblock({
   type,
@@ -63,13 +54,13 @@ export async function createCourseXblock({
   libraryContentKey,
 }: {
   type: string,
-  category?: string,
+  category?: string, // The category of the XBlock. Defaults to the type if not provided.
   parentLocator: string,
   displayName?: string,
   boilerplate?: string,
   stagedContent?: string,
-  libraryContentKey?: string,
-}): Promise<any> {
+  libraryContentKey?: string, // component key from library if being imported.
+}) {
   const body = {
     type,
     boilerplate,
@@ -92,8 +83,8 @@ export async function createCourseXblock({
  */
 export async function handleCourseUnitVisibilityAndData(
   unitId: string,
-  type: string,
-  isVisible: boolean,
+  type: string, // The action type (e.g., PUBLISH_TYPES.discardChanges).
+  isVisible: boolean, // The visibility status for students.
   groupAccess: boolean,
   isDiscussionEnabled: boolean,
 ): Promise<object> {
@@ -160,9 +151,6 @@ export async function getCourseOutlineInfo(courseId: string): Promise<CourseOutl
 
 /**
  * Move a unit item to new unit.
- * @param {string} sourceLocator - The ID of the item to be moved.
- * @param {string} targetParentLocator - The ID of the XBlock associated with the item.
- * @returns {Promise<moveInfo>} - The move information.
  */
 export async function patchUnitItem(sourceLocator: string, targetParentLocator: string): Promise<MoveInfoData> {
   const { data } = await getAuthenticatedHttpClient()
@@ -176,18 +164,22 @@ export async function patchUnitItem(sourceLocator: string, targetParentLocator:
 
 /**
  * Accept the changes from upstream library block in course
- * @param {string} blockId - The ID of the item to be updated from library.
  */
-export async function acceptLibraryBlockChanges(blockId: string) {
+export async function acceptLibraryBlockChanges({
+  blockId,
+  overrideCustomizations = false,
+}: {
+  blockId: string,
+  overrideCustomizations?: boolean,
+}) {
   await getAuthenticatedHttpClient()
-    .post(libraryBlockChangesUrl(blockId));
+    .post(libraryBlockChangesUrl(blockId), { override_customizations: overrideCustomizations });
 }
 
 /**
  * Ignore the changes from upstream library block in course
- * @param {string} blockId - The ID of the item to be updated from library.
  */
-export async function ignoreLibraryBlockChanges(blockId: string) {
+export async function ignoreLibraryBlockChanges({ blockId } : { blockId: string }) {
   await getAuthenticatedHttpClient()
     .delete(libraryBlockChangesUrl(blockId));
 }

src/course-unit/preview-changes/index.scss

@@ -1,4 +1,10 @@
 .lib-preview-xblock-changes-modal {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
+
+  .preview-title {
+    span {
+      margin: 0 10px;
+    }
+  }
 }

src/course-unit/preview-changes/index.test.tsx

@@ -1,17 +1,18 @@
 import userEvent from '@testing-library/user-event';
 import MockAdapter from 'axios-mock-adapter/types';
+
 import {
   act,
   render as baseRender,
   screen,
   initializeMocks,
   waitFor,
-} from '../../testUtils';
+} from '@src/testUtils';
+import { ToastActionData } from '@src/generic/toast-context';
 
 import IframePreviewLibraryXBlockChanges, { LibraryChangesMessageData } from '.';
 import { messageTypes } from '../constants';
 import { libraryBlockChangesUrl } from '../data/api';
-import { ToastActionData } from '../../generic/toast-context';
 
 const usageKey = 'block-v1:UNIX+UX1+2025_T3+type@unit+block@1';
 const defaultEventData: LibraryChangesMessageData = {
@@ -20,10 +21,12 @@ const defaultEventData: LibraryChangesMessageData = {
   upstreamBlockId: 'lct:org:lib1:unit:1',
   upstreamBlockVersionSynced: 1,
   isContainer: false,
+  isLocallyModified: false,
+  blockType: 'html',
 };
 
 const mockSendMessageToIframe = jest.fn();
-jest.mock('../../generic/hooks/context/hooks', () => ({
+jest.mock('@src/generic/hooks/context/hooks', () => ({
   useIframe: () => ({
     iframeRef: { current: { contentWindow: {} as HTMLIFrameElement } },
     setIframeRef: () => {},
@@ -60,7 +63,6 @@ describe('<IframePreviewLibraryXBlockChanges />', () => {
     expect(await screen.findByText('Preview changes: Test block')).toBeInTheDocument();
     expect(await screen.findByRole('button', { name: 'Accept changes' })).toBeInTheDocument();
     expect(await screen.findByRole('button', { name: 'Ignore changes' })).toBeInTheDocument();
-    expect(await screen.findByRole('button', { name: 'Cancel' })).toBeInTheDocument();
     expect(await screen.findByRole('tab', { name: 'New version' })).toBeInTheDocument();
     expect(await screen.findByRole('tab', { name: 'Old version' })).toBeInTheDocument();
   });
@@ -132,4 +134,59 @@ describe('<IframePreviewLibraryXBlockChanges />', () => {
     });
     expect(screen.queryByText('Preview changes: Test block')).not.toBeInTheDocument();
   });
+
+  it('should render modal of text with local changes', async () => {
+    render({ ...defaultEventData, isLocallyModified: true });
+
+    expect(await screen.findByText('Preview changes: Test block')).toBeInTheDocument();
+
+    expect(screen.getByText('This library content has local edits.')).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: 'Update to published library content' })).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: 'Keep course content' })).toBeInTheDocument();
+    expect(await screen.findByRole('tab', { name: 'Course content' })).toBeInTheDocument();
+    expect(await screen.findByRole('tab', { name: 'Published library content' })).toBeInTheDocument();
+  });
+
+  it('update changes works', async () => {
+    const user = userEvent.setup();
+    axiosMock.onPost(libraryBlockChangesUrl(usageKey)).reply(200, {});
+    render({ ...defaultEventData, isLocallyModified: true });
+
+    expect(await screen.findByText('Preview changes: Test block')).toBeInTheDocument();
+    const acceptBtn = await screen.findByRole('button', { name: 'Update to published library content' });
+    await user.click(acceptBtn);
+    const confirmBtn = await screen.findByRole('button', { name: 'Discard local edits and update' });
+    await user.click(confirmBtn);
+
+    await waitFor(() => {
+      expect(mockSendMessageToIframe).toHaveBeenCalledWith(
+        messageTypes.completeXBlockEditing,
+        { locator: usageKey },
+      );
+      expect(axiosMock.history.post.length).toEqual(1);
+      expect(axiosMock.history.post[0].url).toEqual(libraryBlockChangesUrl(usageKey));
+    });
+    expect(screen.queryByText('Preview changes: Test block')).not.toBeInTheDocument();
+  });
+
+  it('keep changes work', async () => {
+    const user = userEvent.setup();
+    axiosMock.onDelete(libraryBlockChangesUrl(usageKey)).reply(200, {});
+    render({ ...defaultEventData, isLocallyModified: true });
+
+    expect(await screen.findByText('Preview changes: Test block')).toBeInTheDocument();
+    const ignoreBtn = await screen.findByRole('button', { name: 'Keep course content' });
+    await user.click(ignoreBtn);
+    const ignoreConfirmBtn = (await screen.findAllByRole('button', { name: 'Keep course content' }))[0];
+    await user.click(ignoreConfirmBtn);
+    await waitFor(() => {
+      expect(mockSendMessageToIframe).toHaveBeenCalledWith(
+        messageTypes.completeXBlockEditing,
+        { locator: usageKey },
+      );
+      expect(axiosMock.history.delete.length).toEqual(1);
+      expect(axiosMock.history.delete[0].url).toEqual(libraryBlockChangesUrl(usageKey));
+    });
+    expect(screen.queryByText('Preview changes: Test block')).not.toBeInTheDocument();
+  });
 });