Merge branch 'master' into romaniuk/fix/load-sequences

Author: ihor-romaniuk

package-lock.json

@@ -79,7 +79,6 @@
     "meilisearch": "^0.41.0",
     "moment": "2.30.1",
     "moment-shortformat": "^2.1.0",
-    "npm": "^10.8.1",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-datepicker": "^4.13.0",
@@ -98,7 +97,6 @@
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.4.1",
     "reselect": "^4.1.5",
-    "start": "^5.1.0",
     "tinymce": "^5.10.4",
     "universal-cookie": "^4.0.4",
     "uuid": "^3.4.0",

package.json

@@ -9,30 +9,30 @@ import messages from './messages';
 import AccessibilityBody from './AccessibilityBody';
 import AccessibilityForm from './AccessibilityForm';
 
+import { COMMUNITY_ACCESSIBILITY_LINK, ACCESSIBILITY_EMAIL } from './constants';
+
 const AccessibilityPage = ({
   // injected
   intl,
-}) => {
-  const communityAccessibilityLink = 'https://www.edx.org/accessibility';
-  const email = '[email protected]';
-  return (
-    <>
-      <Helmet>
-        <title>
-          {intl.formatMessage(messages.pageTitle, {
-            siteName: process.env.SITE_NAME,
-          })}
-        </title>
-      </Helmet>
-      <Header isHiddenMainMenu />
-      <Container size="xl" classNamae="px-4">
-        <AccessibilityBody {...{ email, communityAccessibilityLink }} />
-        <AccessibilityForm accessibilityEmail={email} />
-      </Container>
-      <StudioFooterSlot />
-    </>
-  );
-};
+}) => (
+  <>
+    <Helmet>
+      <title>
+        {intl.formatMessage(messages.pageTitle, {
+          siteName: process.env.SITE_NAME,
+        })}
+      </title>
+    </Helmet>
+    <Header isHiddenMainMenu />
+    <Container size="xl" classNamae="px-4">
+      <AccessibilityBody
+        {...{ email: ACCESSIBILITY_EMAIL, communityAccessibilityLink: COMMUNITY_ACCESSIBILITY_LINK }}
+      />
+      <AccessibilityForm accessibilityEmail={ACCESSIBILITY_EMAIL} />
+    </Container>
+    <StudioFooterSlot />
+  </>
+);
 
 AccessibilityPage.propTypes = {
   // injected

src/accessibility-page/AccessibilityPage.jsx

@@ -0,0 +1,2 @@
+export const COMMUNITY_ACCESSIBILITY_LINK = 'https://www.edx.org/accessibility';
+export const ACCESSIBILITY_EMAIL = '[email protected]';

src/accessibility-page/constants.ts

@@ -118,6 +118,46 @@ describe('<CourseLibraries />', () => {
     userEvent.click(reviewActionBtn);
     expect(await screen.findByRole('tab', { name: 'Review Content Updates 5' })).toHaveAttribute('aria-selected', 'true');
   });
+
+  it('show alert if max lastPublishedDate is greated than the local storage value', async () => {
+    const lastPublishedDate = new Date('2025-05-01T22:20:44.989042Z');
+    localStorage.setItem(
+      `outOfSyncCountAlert-${mockGetEntityLinks.courseKey}`,
+      String(lastPublishedDate.getTime() - 1000),
+    );
+
+    await renderCourseLibrariesPage(mockGetEntityLinks.courseKey);
+    const allTab = await screen.findByRole('tab', { name: 'Libraries' });
+    const reviewTab = await screen.findByRole('tab', { name: 'Review Content Updates 5' });
+    // review tab should be open by default as outOfSyncCount is greater than 0
+    expect(reviewTab).toHaveAttribute('aria-selected', 'true');
+
+    userEvent.click(allTab);
+    const alert = await screen.findByRole('alert');
+    expect(await within(alert).findByText(
+      '5 library components are out of sync. Review updates to accept or ignore changes',
+    )).toBeInTheDocument();
+  });
+
+  it('doesnt show alert if max lastPublishedDate is less than the local storage value', async () => {
+    const lastPublishedDate = new Date('2025-05-01T22:20:44.989042Z');
+    localStorage.setItem(
+      `outOfSyncCountAlert-${mockGetEntityLinks.courseKey}`,
+      String(lastPublishedDate.getTime() + 1000),
+    );
+
+    await renderCourseLibrariesPage(mockGetEntityLinks.courseKey);
+    const allTab = await screen.findByRole('tab', { name: 'Libraries' });
+    const reviewTab = await screen.findByRole('tab', { name: 'Review Content Updates 5' });
+    // review tab should be open by default as outOfSyncCount is greater than 0
+    expect(reviewTab).toHaveAttribute('aria-selected', 'true');
+    userEvent.click(allTab);
+    expect(allTab).toHaveAttribute('aria-selected', 'true');
+
+    screen.logTestingPlaygroundURL();
+
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+  });
 });
 
 describe('<CourseLibraries ReviewTab />', () => {
@@ -160,7 +200,7 @@ describe('<CourseLibraries ReviewTab />', () => {
 
   it('update changes works', async () => {
     const mockInvalidateQueries = jest.spyOn(queryClient, 'invalidateQueries');
-    const usageKey = mockGetEntityLinks.response.results[0].downstreamUsageKey;
+    const usageKey = mockGetEntityLinks.response[0].downstreamUsageKey;
     axiosMock.onPost(libraryBlockChangesUrl(usageKey)).reply(200, {});
     await renderCourseLibrariesReviewPage(mockGetEntityLinksSummaryByDownstreamContext.courseKey);
     const updateBtns = await screen.findAllByRole('button', { name: 'Update' });
@@ -176,7 +216,7 @@ describe('<CourseLibraries ReviewTab />', () => {
 
   it('update changes works in preview modal', async () => {
     const mockInvalidateQueries = jest.spyOn(queryClient, 'invalidateQueries');
-    const usageKey = mockGetEntityLinks.response.results[0].downstreamUsageKey;
+    const usageKey = mockGetEntityLinks.response[0].downstreamUsageKey;
     axiosMock.onPost(libraryBlockChangesUrl(usageKey)).reply(200, {});
     await renderCourseLibrariesReviewPage(mockGetEntityLinksSummaryByDownstreamContext.courseKey);
     const previewBtns = await screen.findAllByRole('button', { name: 'Review Updates' });
@@ -195,7 +235,7 @@ describe('<CourseLibraries ReviewTab />', () => {
 
   it('ignore change works', async () => {
     const mockInvalidateQueries = jest.spyOn(queryClient, 'invalidateQueries');
-    const usageKey = mockGetEntityLinks.response.results[0].downstreamUsageKey;
+    const usageKey = mockGetEntityLinks.response[0].downstreamUsageKey;
     axiosMock.onDelete(libraryBlockChangesUrl(usageKey)).reply(204, {});
     await renderCourseLibrariesReviewPage(mockGetEntityLinksSummaryByDownstreamContext.courseKey);
     const ignoreBtns = await screen.findAllByRole('button', { name: 'Ignore' });
@@ -218,7 +258,7 @@ describe('<CourseLibraries ReviewTab />', () => {
 
   it('ignore change works in preview', async () => {
     const mockInvalidateQueries = jest.spyOn(queryClient, 'invalidateQueries');
-    const usageKey = mockGetEntityLinks.response.results[0].downstreamUsageKey;
+    const usageKey = mockGetEntityLinks.response[0].downstreamUsageKey;
     axiosMock.onDelete(libraryBlockChangesUrl(usageKey)).reply(204, {});
     await renderCourseLibrariesReviewPage(mockGetEntityLinksSummaryByDownstreamContext.courseKey);
     const previewBtns = await screen.findAllByRole('button', { name: 'Review Updates' });

src/course-libraries/CourseLibraries.test.tsx

@@ -164,7 +164,7 @@ export const CourseLibraries: React.FC<Props> = ({ courseId }) => {
     if (tabKey !== CourseLibraryTabs.review) {
       return null;
     }
-    if (!outOfSyncCount || outOfSyncCount === 0) {
+    if (!outOfSyncCount) {
       return (
         <Stack direction="horizontal" gap={2}>
           <Icon src={CheckCircle} size="xs" />

src/course-libraries/CourseLibraries.tsx

@@ -18,12 +18,11 @@ interface OutOfSyncAlertProps {
 * in course can be updated. Following are the conditions for displaying the alert.
 *
 * * The alert is displayed if components are out of sync.
-* * If the user clicks on dismiss button, the state is stored in localstorage of user
-*   in this format: outOfSyncCountAlert-${courseId} = <number of out of sync components>.
-* * If the number of sync components don't change for the course and the user opens outline
+* * If the user clicks on dismiss button, the state of dismiss is stored in localstorage of user
+*   in this format: outOfSyncCountAlert-${courseId} = <datetime value in milliseconds>.
+* * If there are not new published components for the course and the user opens outline
 *   in the same browser, they don't see the alert again.
-* * If the number changes, i.e., if a new component is out of sync or the user updates or ignores
-*   a component, the alert is displayed again.
+* * If there is a new published component upstream, the alert is displayed again.
 */
 export const OutOfSyncAlert: React.FC<OutOfSyncAlertProps> = ({
   showAlert,
@@ -35,6 +34,8 @@ export const OutOfSyncAlert: React.FC<OutOfSyncAlertProps> = ({
   const intl = useIntl();
   const { data, isLoading } = useEntityLinksSummaryByDownstreamContext(courseId);
   const outOfSyncCount = data?.reduce((count, lib) => count + (lib.readyToSyncCount || 0), 0);
+  const lastPublishedDate = data?.map(lib => new Date(lib.lastPublishedAt || 0).getTime())
+    .reduce((acc, lastPublished) => Math.max(lastPublished, acc), 0);
   const alertKey = `outOfSyncCountAlert-${courseId}`;
 
   useEffect(() => {
@@ -46,13 +47,14 @@ export const OutOfSyncAlert: React.FC<OutOfSyncAlertProps> = ({
       setShowAlert(false);
       return;
     }
-    const dismissedAlert = localStorage.getItem(alertKey);
-    setShowAlert(parseInt(dismissedAlert || '', 10) !== outOfSyncCount);
-  }, [outOfSyncCount, isLoading, data]);
+    const dismissedAlertDate = parseInt(localStorage.getItem(alertKey) ?? '0', 10);
+
+    setShowAlert((lastPublishedDate ?? 0) > dismissedAlertDate);
+  }, [outOfSyncCount, lastPublishedDate, isLoading, data]);
 
   const dismissAlert = () => {
     setShowAlert(false);
-    localStorage.setItem(alertKey, String(outOfSyncCount));
+    localStorage.setItem(alertKey, Date.now().toString());
     onDismiss?.();
   };
 

src/course-libraries/OutOfSyncAlert.tsx

@@ -1,5 +1,5 @@
 import React, {
-  useCallback, useContext, useEffect, useMemo, useState,
+  useCallback, useContext, useMemo, useState,
 } from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -16,7 +16,7 @@ import {
 
 import { tail, keyBy } from 'lodash';
 import { useQueryClient } from '@tanstack/react-query';
-import { Loop, Warning } from '@openedx/paragon/icons';
+import { Loop } from '@openedx/paragon/icons';
 import messages from './messages';
 import previewChangesMessages from '../course-unit/preview-changes/messages';
 import { courseLibrariesQueryKeys, useEntityLinks } from './data/apiHooks';
@@ -35,7 +35,6 @@ import { useLoadOnScroll } from '../hooks';
 import DeleteModal from '../generic/delete-modal/DeleteModal';
 import { PublishableEntityLink } from './data/api';
 import AlertError from '../generic/alert-error';
-import AlertMessage from '../generic/alert-message';
 
 interface Props {
   courseId: string;
@@ -100,34 +99,24 @@ const BlockCard: React.FC<BlockCardProps> = ({ info, actions }) => {
 
 const ComponentReviewList = ({
   outOfSyncComponents,
-  onSearchUpdate,
 }: {
   outOfSyncComponents: PublishableEntityLink[];
-  onSearchUpdate: () => void;
 }) => {
   const intl = useIntl();
   const { showToast } = useContext(ToastContext);
   const [blockData, setBlockData] = useState<LibraryChangesMessageData | undefined>(undefined);
   // ignore changes confirmation modal toggle.
   const [isConfirmModalOpen, openConfirmModal, closeConfirmModal] = useToggle(false);
   const {
-    hits: downstreamInfo,
+    hits,
     isLoading: isIndexDataLoading,
-    searchKeywords,
     hasError,
     hasNextPage,
     isFetchingNextPage,
     fetchNextPage,
-  } = useSearchContext() as {
-    hits: ContentHit[];
-    isLoading: boolean;
-    searchKeywords: string;
-    searchSortOrder: SearchSortOption;
-    hasError: boolean;
-    hasNextPage: boolean | undefined,
-    isFetchingNextPage: boolean;
-    fetchNextPage: () => void;
-  };
+  } = useSearchContext();
+
+  const downstreamInfo = hits as ContentHit[];
 
   useLoadOnScroll(
     hasNextPage,
@@ -142,36 +131,31 @@ const ComponentReviewList = ({
   );
   const queryClient = useQueryClient();
 
-  useEffect(() => {
-    if (searchKeywords) {
-      onSearchUpdate();
-    }
-  }, [searchKeywords]);
-
   // Toggle preview changes modal
   const [isModalOpen, openModal, closeModal] = useToggle(false);
   const acceptChangesMutation = useAcceptLibraryBlockChanges();
   const ignoreChangesMutation = useIgnoreLibraryBlockChanges();
 
-  const setSeletecdBlockData = (info: ContentHit) => {
+  const setSelectedBlockData = useCallback((info: ContentHit) => {
     setBlockData({
       displayName: info.displayName,
       downstreamBlockId: info.usageKey,
       upstreamBlockId: outOfSyncComponentsByKey[info.usageKey].upstreamUsageKey,
       upstreamBlockVersionSynced: outOfSyncComponentsByKey[info.usageKey].versionSynced,
       isVertical: info.blockType === 'vertical',
     });
-  };
+  }, [outOfSyncComponentsByKey]);
+
   // Show preview changes on review
   const onReview = useCallback((info: ContentHit) => {
-    setSeletecdBlockData(info);
+    setSelectedBlockData(info);
     openModal();
-  }, [setSeletecdBlockData, openModal]);
+  }, [setSelectedBlockData, openModal]);
 
   const onIgnoreClick = useCallback((info: ContentHit) => {
-    setSeletecdBlockData(info);
+    setSelectedBlockData(info);
     openConfirmModal();
-  }, [setSeletecdBlockData, openConfirmModal]);
+  }, [setSelectedBlockData, openConfirmModal]);
 
   const reloadLinks = useCallback((usageKey: string) => {
     const courseKey = outOfSyncComponentsByKey[usageKey].downstreamContextKey;
@@ -273,20 +257,14 @@ const ComponentReviewList = ({
           )}
         />
       ))}
-      <PreviewLibraryXBlockChanges
-        blockData={blockData}
-        isModalOpen={isModalOpen}
-        closeModal={closeModal}
-        postChange={postChange}
-        alertNode={(
-          <AlertMessage
-            show
-            variant="warning"
-            icon={Warning}
-            title={intl.formatMessage(messages.olderVersionPreviewAlert)}
-          />
-        )}
-      />
+      {blockData && (
+        <PreviewLibraryXBlockChanges
+          blockData={blockData}
+          isModalOpen={isModalOpen}
+          closeModal={closeModal}
+          postChange={postChange}
+        />
+      )}
       <DeleteModal
         isOpen={isConfirmModalOpen}
         close={closeConfirmModal}
@@ -303,37 +281,17 @@ const ComponentReviewList = ({
 const ReviewTabContent = ({ courseId }: Props) => {
   const intl = useIntl();
   const {
-    data: linkPages,
+    data: outOfSyncComponents,
     isLoading: isSyncComponentsLoading,
-    hasNextPage,
-    isFetchingNextPage,
-    fetchNextPage,
     isError,
     error,
   } = useEntityLinks({ courseId, readyToSync: true });
 
-  const outOfSyncComponents = useMemo(
-    () => linkPages?.pages?.reduce((links, page) => [...links, ...page.results], []) ?? [],
-    [linkPages],
-  );
   const downstreamKeys = useMemo(
     () => outOfSyncComponents?.map(link => link.downstreamUsageKey),
     [outOfSyncComponents],
   );
 
-  useLoadOnScroll(
-    hasNextPage,
-    isFetchingNextPage,
-    fetchNextPage,
-    true,
-  );
-
-  const onSearchUpdate = () => {
-    if (hasNextPage && !isFetchingNextPage) {
-      fetchNextPage();
-    }
-  };
-
   const disableSortOptions = [
     SearchSortOption.RELEVANCE,
     SearchSortOption.OLDEST,
@@ -364,7 +322,6 @@ const ReviewTabContent = ({ courseId }: Props) => {
       </ActionRow>
       <ComponentReviewList
         outOfSyncComponents={outOfSyncComponents}
-        onSearchUpdate={onSearchUpdate}
       />
     </SearchContextProvider>
   );