feat: show sync button on section/subsections [FC-0097] (#2324)

- Adds the sync button on section/subsection cards

Author: ChrisChV

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 { invalidateLinksQuery, useEntityLinks } from './data/apiHooks';
 import {
   SearchContextProvider, SearchKeywordsField, useSearchContext, BlockTypeLabel, Highlight, SearchSortWidget,
 } from '../search-manager';
@@ -189,7 +189,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/data/apiHooks.ts

@@ -1,4 +1,5 @@
 import {
+  type QueryClient,
   useQuery,
 } from '@tanstack/react-query';
 import { getEntityLinksSummaryByDownstreamContext, getEntityLinks } from './api';
@@ -70,3 +71,12 @@ export const useEntityLinksSummaryByDownstreamContext = (courseId?: string) => (
     enabled: courseId !== undefined,
   })
 );
+
+/**
+ * Ivalidates the downstream links query for a course
+ */
+export const invalidateLinksQuery = (queryClient: QueryClient, courseId: string) => {
+  queryClient.invalidateQueries({
+    queryKey: courseLibrariesQueryKeys.courseLibraries(courseId),
+  });
+};

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

@@ -1,15 +1,18 @@
 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('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useLocation: () => ({
-    pathname: mockPathname,
+jest.mock('@src/course-unit/data/apiHooks', () => ({
+  useAcceptLibraryBlockChanges: () => ({
+    mutateAsync: mockUseAcceptLibraryBlockChanges,
+  }),
+  useIgnoreLibraryBlockChanges: () => ({
+    mutateAsync: mockUseIgnoreLibraryBlockChanges,
   }),
 }));
 
@@ -74,7 +77,7 @@ const section = {
 
 const onEditSectionSubmit = jest.fn();
 
-const renderComponent = (props?: object, entry = '/') => render(
+const renderComponent = (props?: object, entry = '/course/:courseId') => render(
   <SectionCard
     section={section}
     index={1}
@@ -98,7 +101,8 @@ const renderComponent = (props?: object, entry = '/') => render(
     <span>children</span>
   </SectionCard>,
   {
-    path: '/',
+    path: '/course/:courseId',
+    params: { courseId: '5' },
     routerProps: {
       initialEntries: [entry],
     },
@@ -182,7 +186,7 @@ describe('<SectionCard />', () => {
     const collapsedSections = { ...section };
     // @ts-ignore-next-line
     collapsedSections.isSectionsExpanded = false;
-    renderComponent(collapsedSections, `?show=${subsection.id}`);
+    renderComponent(collapsedSections, `/course/:courseId?show=${subsection.id}`);
 
     const cardSubsections = await screen.findByTestId('section-card__subsections');
     const newSubsectionButton = await screen.findByRole('button', { name: 'New subsection' });
@@ -194,7 +198,7 @@ describe('<SectionCard />', () => {
     const collapsedSections = { ...section };
     // @ts-ignore-next-line
     collapsedSections.isSectionsExpanded = false;
-    renderComponent(collapsedSections, `?show=${unit.id}`);
+    renderComponent(collapsedSections, `/course/:courseId?show=${unit.id}`);
 
     const cardSubsections = await screen.findByTestId('section-card__subsections');
     const newSubsectionButton = await screen.findByRole('button', { name: 'New subsection' });
@@ -207,11 +211,58 @@ describe('<SectionCard />', () => {
     const collapsedSections = { ...section };
     // @ts-ignore-next-line
     collapsedSections.isSectionsExpanded = false;
-    renderComponent(collapsedSections, `?show=${randomId}`);
+    renderComponent(collapsedSections, `/course/:courseId?show=${randomId}`);
 
     const cardSubsections = screen.queryByTestId('section-card__subsections');
     const newSubsectionButton = screen.queryByRole('button', { name: 'New subsection' });
     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,13 +1,14 @@
 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';
 import {
   Bubble, Button, StandardModal, useToggle,
 } from '@openedx/paragon';
-import { useSearchParams } from 'react-router-dom';
+import { useParams, 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,14 +17,17 @@ 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/data/apiHooks';
 import messages from './messages';
 
 interface SectionCardProps {
@@ -79,6 +83,8 @@ const SectionCard = ({
     openAddLibrarySubsectionModal,
     closeAddLibrarySubsectionModal,
   ] = useToggle(false);
+  const { courseId } = useParams();
+  const queryClient = useQueryClient();
 
   // Expand the section if a search result should be shown/scrolled to
   const containsSearchResult = () => {
@@ -107,6 +113,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 +133,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 +169,13 @@ const SectionCard = ({
     setIsExpanded((prevState) => containsSearchResult() || prevState);
   }, [locatorId, setIsExpanded]);
 
+  const handleOnPostChangeSync = useCallback(() => {
+    dispatch(fetchCourseSectionQuery([section.id]));
+    if (courseId) {
+      invalidateLinksQuery(queryClient, courseId);
+    }
+  }, [dispatch, section, courseId, queryClient]);
+
   // re-create actions object for customizations
   const actions = { ...sectionActions };
   // add actions to control display of move up & down menu buton.
@@ -267,6 +294,7 @@ const SectionCard = ({
                 onClickDelete={onOpenDeleteModal}
                 onClickMoveUp={handleSectionMoveUp}
                 onClickMoveDown={handleSectionMoveDown}
+                onClickSync={openSyncModal}
                 isFormOpen={isFormOpen}
                 closeForm={closeForm}
                 onEditSubmit={handleEditSubmit}
@@ -275,6 +303,7 @@ const SectionCard = ({
                 titleComponent={titleComponent}
                 namePrefix={namePrefix}
                 actions={actions}
+                readyToSync={upstreamInfo?.readyToSync}
               />
             )}
             <div className="section-card__content" data-testid="section-card__content">
@@ -330,6 +359,14 @@ const SectionCard = ({
           visibleTabs={[ContentType.subsections]}
         />
       </StandardModal>
+      {blockSyncData && (
+        <PreviewLibraryXBlockChanges
+          blockData={blockSyncData}
+          isModalOpen={isSyncModalOpen}
+          closeModal={closeSyncModal}
+          postChange={handleOnPostChangeSync}
+        />
+      )}
     </>
   );
 };