feat: show sync button on section/subsections [FC-0097]

src/course-libraries/ReviewTabContent.tsx

@@ -19,7 +19,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { Loop } from '@openedx/paragon/icons';
 import messages from './messages';
 import previewChangesMessages from '../course-unit/preview-changes/messages';
-import { courseLibrariesQueryKeys, useEntityLinks } from './data/apiHooks';
+import { useEntityLinks } from './data/apiHooks';
 import {
   SearchContextProvider, SearchKeywordsField, useSearchContext, BlockTypeLabel, Highlight, SearchSortWidget,
 } from '../search-manager';
@@ -36,6 +36,7 @@ import DeleteModal from '../generic/delete-modal/DeleteModal';
 import { PublishableEntityLink } from './data/api';
 import AlertError from '../generic/alert-error';
 import NewsstandIcon from '../generic/NewsstandIcon';
+import { invalidateLinksQuery } from './utils';
 
 interface Props {
   courseId: string;
@@ -189,7 +190,7 @@ const ItemReviewList = ({
 
   const reloadLinks = useCallback((usageKey: string) => {
     const courseKey = outOfSyncItemsByKey[usageKey].downstreamContextKey;
-    queryClient.invalidateQueries({ queryKey: courseLibrariesQueryKeys.courseLibraries(courseKey) });
+    invalidateLinksQuery(queryClient, courseKey);
   }, [outOfSyncItemsByKey]);
 
   const postChange = (accept: boolean) => {

src/course-libraries/data/api.ts

@@ -3,7 +3,7 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
 const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
 
-export const getEntityLinksByDownstreamContextUrl = () => `${getApiBaseUrl()}/api/contentstore/v2/downstreams-all/`;
+export const getEntityLinksByDownstreamContextUrl = () => `${getApiBaseUrl()}/api/contentstore/v2/downstreams/`;
 export const getEntityLinksSummaryByDownstreamContextUrl = (downstreamContextKey: string) => `${getApiBaseUrl()}/api/contentstore/v2/downstreams/${downstreamContextKey}/summary`;
 
 export interface PaginatedData<T> {

src/course-libraries/utils.tsx

@@ -0,0 +1,11 @@
+import { type QueryClient } from '@tanstack/react-query';
+import { courseLibrariesQueryKeys } from './data/apiHooks';
+
+/**
+ * Ivalidates the downstream links query for a course
+ */
+export const invalidateLinksQuery = (queryClient: QueryClient, courseId: string) => {
+  queryClient.invalidateQueries({
+    queryKey: courseLibrariesQueryKeys.courseLibraries(courseId),
+  });
+};

src/course-outline/CourseOutline.tsx

@@ -363,6 +363,7 @@ const CourseOutline = ({ courseId }: CourseOutlineProps) => {
                                   <SectionCard
                                     key={section.id}
                                     section={section}
+                                    courseId={courseId}
                                     index={sectionIndex}
                                     canMoveItem={canMoveSection(sections)}
                                     isSelfPaced={statusBarData.isSelfPaced}
@@ -388,6 +389,7 @@ const CourseOutline = ({ courseId }: CourseOutlineProps) => {
                                       {section.childInfo.children.map((subsection, subsectionIndex) => (
                                         <SubsectionCard
                                           key={subsection.id}
+                                          courseId={courseId}
                                           section={section}
                                           subsection={subsection}
                                           index={subsectionIndex}
@@ -423,6 +425,7 @@ const CourseOutline = ({ courseId }: CourseOutlineProps) => {
                                                 unit={unit}
                                                 subsection={subsection}
                                                 section={section}
+                                                courseId={courseId}
                                                 isSelfPaced={statusBarData.isSelfPaced}
                                                 isCustomRelativeDatesActive={isCustomRelativeDatesActive}
                                                 index={unitIndex}

src/course-outline/section-card/SectionCard.test.tsx

@@ -1,10 +1,21 @@
 import {
-  act, fireEvent, initializeMocks, render, screen, within,
+  act, fireEvent, initializeMocks, render, screen, waitFor, within,
 } from '@src/testUtils';
 import { XBlock } from '@src/data/types';
 import SectionCard from './SectionCard';
 
 const mockPathname = '/foo-bar';
+const mockUseAcceptLibraryBlockChanges = jest.fn();
+const mockUseIgnoreLibraryBlockChanges = jest.fn();
+
+jest.mock('@src/course-unit/data/apiHooks', () => ({
+  useAcceptLibraryBlockChanges: () => ({
+    mutateAsync: mockUseAcceptLibraryBlockChanges,
+  }),
+  useIgnoreLibraryBlockChanges: () => ({
+    mutateAsync: mockUseIgnoreLibraryBlockChanges,
+  }),
+}));
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -76,6 +87,7 @@ const onEditSectionSubmit = jest.fn();
 const renderComponent = (props?: object, entry = '/') => render(
   <SectionCard
     section={section}
+    courseId="5"
     index={1}
     canMoveItem={jest.fn()}
     onOrderChange={jest.fn()}
@@ -213,4 +225,51 @@ describe('<SectionCard />', () => {
     expect(cardSubsections).toBeNull();
     expect(newSubsectionButton).toBeNull();
   });
+
+  it('should sync section changes from upstream', async () => {
+    renderComponent();
+
+    expect(await screen.findByTestId('section-card-header')).toBeInTheDocument();
+
+    // Click on sync button
+    const syncButton = screen.getByRole('button', { name: /update available - click to sync/i });
+    fireEvent.click(syncButton);
+
+    // Should open compare preview modal
+    expect(screen.getByRole('heading', { name: /preview changes: section name/i })).toBeInTheDocument();
+    expect(screen.getByText('Preview not available')).toBeInTheDocument();
+
+    // Click on accept changes
+    const acceptChangesButton = screen.getByText(/accept changes/i);
+    fireEvent.click(acceptChangesButton);
+
+    await waitFor(() => expect(mockUseAcceptLibraryBlockChanges).toHaveBeenCalled());
+  });
+
+  it('should decline sync section changes from upstream', async () => {
+    renderComponent();
+
+    expect(await screen.findByTestId('section-card-header')).toBeInTheDocument();
+
+    // Click on sync button
+    const syncButton = screen.getByRole('button', { name: /update available - click to sync/i });
+    fireEvent.click(syncButton);
+
+    // Should open compare preview modal
+    expect(screen.getByRole('heading', { name: /preview changes: section name/i })).toBeInTheDocument();
+    expect(screen.getByText('Preview not available')).toBeInTheDocument();
+
+    // Click on ignore changes
+    const ignoreChangesButton = screen.getByRole('button', { name: /ignore changes/i });
+    fireEvent.click(ignoreChangesButton);
+
+    // Should open the confirmation modal
+    expect(screen.getByRole('heading', { name: /ignore these changes\?/i })).toBeInTheDocument();
+
+    // Click on ignore button
+    const ignoreButton = screen.getByRole('button', { name: /ignore/i });
+    fireEvent.click(ignoreButton);
+
+    await waitFor(() => expect(mockUseIgnoreLibraryBlockChanges).toHaveBeenCalled());
+  });
 });

src/course-outline/section-card/SectionCard.tsx

@@ -1,5 +1,5 @@
 import {
-  useContext, useEffect, useState, useRef, useCallback, ReactNode,
+  useContext, useEffect, useState, useRef, useCallback, ReactNode, useMemo,
 } from 'react';
 import { useDispatch } from 'react-redux';
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -8,6 +8,7 @@ import {
 } from '@openedx/paragon';
 import { useSearchParams } from 'react-router-dom';
 import classNames from 'classnames';
+import { useQueryClient } from '@tanstack/react-query';
 
 import { setCurrentItem, setCurrentSection } from '@src/course-outline/data/slice';
 import { RequestStatus } from '@src/data/constants';
@@ -16,18 +17,22 @@ import SortableItem from '@src/course-outline/drag-helper/SortableItem';
 import { DragContext } from '@src/course-outline/drag-helper/DragContextProvider';
 import TitleButton from '@src/course-outline/card-header/TitleButton';
 import XBlockStatus from '@src/course-outline/xblock-status/XBlockStatus';
+import { fetchCourseSectionQuery } from '@src/course-outline/data/thunk';
 import { getItemStatus, getItemStatusBorder, scrollToElement } from '@src/course-outline/utils';
 import OutlineAddChildButtons from '@src/course-outline/OutlineAddChildButtons';
 import { ContainerType } from '@src/generic/key-utils';
 import { ComponentPicker, SelectedComponent } from '@src/library-authoring';
 import { ContentType } from '@src/library-authoring/routes';
 import { COMPONENT_TYPES } from '@src/generic/block-type-utils/constants';
+import { PreviewLibraryXBlockChanges } from '@src/course-unit/preview-changes';
 import { UpstreamInfoIcon } from '@src/generic/upstream-info-icon';
 import type { XBlock } from '@src/data/types';
+import { invalidateLinksQuery } from '@src/course-libraries/utils';
 import messages from './messages';
 
 interface SectionCardProps {
   section: XBlock,
+  courseId: string,
   isSelfPaced: boolean,
   isCustomRelativeDatesActive: boolean,
   children: ReactNode,
@@ -49,6 +54,7 @@ interface SectionCardProps {
 
 const SectionCard = ({
   section,
+  courseId,
   isSelfPaced,
   isCustomRelativeDatesActive,
   children,
@@ -79,6 +85,7 @@ const SectionCard = ({
     openAddLibrarySubsectionModal,
     closeAddLibrarySubsectionModal,
   ] = useToggle(false);
+  const queryClient = useQueryClient();
 
   // Expand the section if a search result should be shown/scrolled to
   const containsSearchResult = () => {
@@ -107,6 +114,7 @@ const SectionCard = ({
   };
   const [isExpanded, setIsExpanded] = useState(containsSearchResult() || isSectionsExpanded);
   const [isFormOpen, openForm, closeForm] = useToggle(false);
+  const [isSyncModalOpen, openSyncModal, closeSyncModal] = useToggle(false);
   const namePrefix = 'section';
 
   useEffect(() => {
@@ -126,6 +134,19 @@ const SectionCard = ({
     upstreamInfo,
   } = section;
 
+  const blockSyncData = useMemo(() => {
+    if (!upstreamInfo?.readyToSync) {
+      return undefined;
+    }
+    return {
+      displayName,
+      downstreamBlockId: id,
+      upstreamBlockId: upstreamInfo.upstreamRef,
+      upstreamBlockVersionSynced: upstreamInfo.versionSynced,
+      isContainer: true,
+    };
+  }, [upstreamInfo]);
+
   useEffect(() => {
     if (activeId === id && isExpanded) {
       setIsExpanded(false);
@@ -149,6 +170,11 @@ const SectionCard = ({
     setIsExpanded((prevState) => containsSearchResult() || prevState);
   }, [locatorId, setIsExpanded]);
 
+  const handleOnPostChangeSync = useCallback(() => {
+    dispatch(fetchCourseSectionQuery([section.id]));
+    invalidateLinksQuery(queryClient, courseId);
+  }, [dispatch, section]);
+
   // re-create actions object for customizations
   const actions = { ...sectionActions };
   // add actions to control display of move up & down menu buton.
@@ -267,6 +293,7 @@ const SectionCard = ({
                 onClickDelete={onOpenDeleteModal}
                 onClickMoveUp={handleSectionMoveUp}
                 onClickMoveDown={handleSectionMoveDown}
+                onClickSync={openSyncModal}
                 isFormOpen={isFormOpen}
                 closeForm={closeForm}
                 onEditSubmit={handleEditSubmit}
@@ -275,6 +302,7 @@ const SectionCard = ({
                 titleComponent={titleComponent}
                 namePrefix={namePrefix}
                 actions={actions}
+                readyToSync={upstreamInfo?.readyToSync}
               />
             )}
             <div className="section-card__content" data-testid="section-card__content">
@@ -330,6 +358,14 @@ const SectionCard = ({
           visibleTabs={[ContentType.subsections]}
         />
       </StandardModal>
+      {blockSyncData && (
+        <PreviewLibraryXBlockChanges
+          blockData={blockSyncData}
+          isModalOpen={isSyncModalOpen}
+          closeModal={closeSyncModal}
+          postChange={handleOnPostChangeSync}
+        />
+      )}
     </>
   );
 };

src/course-outline/subsection-card/SubsectionCard.test.tsx

@@ -1,6 +1,6 @@
 import { COMPONENT_TYPES } from '@src/generic/block-type-utils/constants';
 import {
-  act, fireEvent, initializeMocks, render, screen, within,
+  act, fireEvent, initializeMocks, render, screen, waitFor, within,
 } from '@src/testUtils';
 import { XBlock } from '@src/data/types';
 import cardHeaderMessages from '../card-header/messages';
@@ -11,6 +11,18 @@ const mockPathname = '/foo-bar';
 const containerKey = 'lct:org:lib:unit:1';
 const handleOnAddUnitFromLibrary = jest.fn();
 
+const mockUseAcceptLibraryBlockChanges = jest.fn();
+const mockUseIgnoreLibraryBlockChanges = jest.fn();
+
+jest.mock('@src/course-unit/data/apiHooks', () => ({
+  useAcceptLibraryBlockChanges: () => ({
+    mutateAsync: mockUseAcceptLibraryBlockChanges,
+  }),
+  useIgnoreLibraryBlockChanges: () => ({
+    mutateAsync: mockUseIgnoreLibraryBlockChanges,
+  }),
+}));
+
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useLocation: () => ({
@@ -101,6 +113,7 @@ const renderComponent = (props?: object, entry = '/') => render(
     section={section}
     subsection={subsection}
     index={1}
+    courseId="5"
     isSelfPaced={false}
     getPossibleMoves={jest.fn()}
     onOrderChange={jest.fn()}
@@ -320,4 +333,51 @@ describe('<SubsectionCard />', () => {
       libraryContentKey: containerKey,
     });
   });
+
+  it('should sync subsection changes from upstream', async () => {
+    renderComponent();
+
+    expect(await screen.findByTestId('subsection-card-header')).toBeInTheDocument();
+
+    // Click on sync button
+    const syncButton = screen.getByRole('button', { name: /update available - click to sync/i });
+    fireEvent.click(syncButton);
+
+    // Should open compare preview modal
+    expect(screen.getByRole('heading', { name: /preview changes: subsection name/i })).toBeInTheDocument();
+    expect(screen.getByText('Preview not available')).toBeInTheDocument();
+
+    // Click on accept changes
+    const acceptChangesButton = screen.getByText(/accept changes/i);
+    fireEvent.click(acceptChangesButton);
+
+    await waitFor(() => expect(mockUseAcceptLibraryBlockChanges).toHaveBeenCalled());
+  });
+
+  it('should decline sync subsection changes from upstream', async () => {
+    renderComponent();
+
+    expect(await screen.findByTestId('subsection-card-header')).toBeInTheDocument();
+
+    // Click on sync button
+    const syncButton = screen.getByRole('button', { name: /update available - click to sync/i });
+    fireEvent.click(syncButton);
+
+    // Should open compare preview modal
+    expect(screen.getByRole('heading', { name: /preview changes: subsection name/i })).toBeInTheDocument();
+    expect(screen.getByText('Preview not available')).toBeInTheDocument();
+
+    // Click on ignore changes
+    const ignoreChangesButton = screen.getByRole('button', { name: /ignore changes/i });
+    fireEvent.click(ignoreChangesButton);
+
+    // Should open the confirmation modal
+    expect(screen.getByRole('heading', { name: /ignore these changes\?/i })).toBeInTheDocument();
+
+    // Click on ignore button
+    const ignoreButton = screen.getByRole('button', { name: /ignore/i });
+    fireEvent.click(ignoreButton);
+
+    await waitFor(() => expect(mockUseIgnoreLibraryBlockChanges).toHaveBeenCalled());
+  });
 });