Merge branch 'master' into chris/update-cancel-confirmation-button-msg

Author: ChrisChV

package-lock.json

@@ -49,10 +49,10 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
     "@edx/browserslist-config": "1.2.0",
-    "@edx/frontend-component-footer": "^14.1.0",
-    "@edx/frontend-component-header": "^5.8.3",
+    "@edx/frontend-component-footer": "^14.3.0",
+    "@edx/frontend-component-header": "^6.2.0",
     "@edx/frontend-enterprise-hotjar": "^2.0.0",
-    "@edx/frontend-platform": "^8.0.3",
+    "@edx/frontend-platform": "^8.3.1",
     "@edx/openedx-atlas": "^0.6.0",
     "@openedx-plugins/course-app-calculator": "file:plugins/course-apps/calculator",
     "@openedx-plugins/course-app-edxnotes": "file:plugins/course-apps/edxnotes",
@@ -64,9 +64,9 @@
     "@openedx-plugins/course-app-teams": "file:plugins/course-apps/teams",
     "@openedx-plugins/course-app-wiki": "file:plugins/course-apps/wiki",
     "@openedx-plugins/course-app-xpert_unit_summary": "file:plugins/course-apps/xpert_unit_summary",
-    "@openedx/frontend-build": "^14.2.0",
-    "@openedx/frontend-plugin-framework": "^1.2.1",
-    "@openedx/paragon": "^22.8.1",
+    "@openedx/frontend-build": "^14.3.3",
+    "@openedx/frontend-plugin-framework": "^1.6.0",
+    "@openedx/paragon": "^22.16.0",
     "@redux-devtools/extension": "^3.3.0",
     "@reduxjs/toolkit": "1.9.7",
     "@tanstack/react-query": "4.36.1",

package.json

@@ -142,7 +142,7 @@ describe('ORASettings', () => {
     renderComponent();
     await mockStore({ apiStatus: 200, enabled: false });
 
-    const label = screen.getByText(messages.enableFlexPeerGradeLabel.defaultMessage);
+    const label = await screen.findByText(messages.enableFlexPeerGradeLabel.defaultMessage);
     const enableBadge = screen.queryByTestId('enable-badge');
 
     expect(label).toBeVisible();

plugins/course-apps/ora_settings/Settings.test.jsx

@@ -547,7 +547,7 @@ describe('ProctoredExamSettings', () => {
       await act(async () => {
         render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />));
         // This expectation is _inside_ the `act` intentionally, so that it executes immediately.
-        const spinner = screen.getByRole('status');
+        const spinner = await screen.findByRole('status');
         expect(spinner.textContent).toEqual('Loading...');
       });
     });

plugins/course-apps/proctoring/Settings.test.jsx

@@ -11,7 +11,7 @@ import { fetchCourseDetail, fetchWaffleFlags } from './data/thunks';
 import { useModel } from './generic/model-store';
 import NotFoundAlert from './generic/NotFoundAlert';
 import PermissionDeniedAlert from './generic/PermissionDeniedAlert';
-import { fetchStudioHomeData } from './studio-home/data/thunks';
+import { fetchOnlyStudioHomeData } from './studio-home/data/thunks';
 import { getCourseAppsApiStatus } from './pages-and-resources/data/selectors';
 import { RequestStatus } from './data/constants';
 import Loading from './generic/Loading';
@@ -25,7 +25,7 @@ const CourseAuthoringPage = ({ courseId, children }) => {
   }, [courseId]);
 
   useEffect(() => {
-    dispatch(fetchStudioHomeData());
+    dispatch(fetchOnlyStudioHomeData());
   }, []);
 
   const courseDetail = useModel('courseDetails', courseId);

src/CourseAuthoringPage.jsx

@@ -59,6 +59,7 @@ export const COURSE_BLOCK_NAMES = ({
   sequential: { id: 'sequential', name: 'Subsection' },
   vertical: { id: 'vertical', name: 'Unit' },
   libraryContent: { id: 'library_content', name: 'Library content' },
+  splitTest: { id: 'split_test', name: 'Split Test' },
   component: { id: 'component', name: 'Component' },
 });
 

src/constants.js

@@ -61,19 +61,15 @@ describe('<ContentTagsDrawer />', () => {
   });
 
   it('shows spinner before the content data query is complete', async () => {
-    await act(async () => {
-      renderDrawer(stagedTagsId);
-      const spinner = screen.getAllByRole('status')[0];
-      expect(spinner.textContent).toEqual('Loading'); // Uses <Spinner />
-    });
+    renderDrawer(stagedTagsId);
+    const spinner = (await screen.findAllByRole('status'))[0];
+    expect(spinner.textContent).toEqual('Loading'); // Uses <Spinner />
   });
 
   it('shows spinner before the taxonomy tags query is complete', async () => {
-    await act(async () => {
-      renderDrawer(stagedTagsId);
-      const spinner = screen.getAllByRole('status')[1];
-      expect(spinner.textContent).toEqual('Loading...'); // Uses <Loading />
-    });
+    renderDrawer(stagedTagsId);
+    const spinner = (await screen.findAllByRole('status'))[1];
+    expect(spinner.textContent).toEqual('Loading...'); // Uses <Loading />
   });
 
   it('shows the content display name after the query is complete in drawer variant', async () => {

src/content-tags-drawer/ContentTagsDrawer.test.jsx

@@ -76,11 +76,16 @@ describe('<CourseLibraries />', () => {
 
   it('shows alert when out of sync components are present', async () => {
     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();
-    const allTab = await screen.findByRole('tab', { name: 'Libraries' });
     expect(allTab).toHaveAttribute('aria-selected', 'true');
 
     const reviewBtn = await screen.findByRole('button', { name: 'Review' });
@@ -89,31 +94,29 @@ describe('<CourseLibraries />', () => {
     expect(allTab).toHaveAttribute('aria-selected', 'false');
     expect(await screen.findByRole('tab', { name: 'Review Content Updates 5' })).toHaveAttribute('aria-selected', 'true');
     expect(alert).not.toBeInTheDocument();
-
-    // go back to all tab
-    userEvent.click(allTab);
-    // alert should not be back
-    expect(alert).not.toBeInTheDocument();
-    expect(allTab).toHaveAttribute('aria-selected', 'true');
-
-    // review updates button
-    const reviewActionBtn = await screen.findByRole('button', { name: 'Review Updates' });
-    userEvent.click(reviewActionBtn);
-    expect(await screen.findByRole('tab', { name: 'Review Content Updates 5' })).toHaveAttribute('aria-selected', 'true');
   });
 
   it('hide alert on dismiss', async () => {
     await renderCourseLibrariesPage(mockGetEntityLinks.courseKey);
+    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');
+    const allTab = await screen.findByRole('tab', { name: 'Libraries' });
+    userEvent.click(allTab);
+    expect(allTab).toHaveAttribute('aria-selected', 'true');
+
     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();
     const dismissBtn = await screen.findByRole('button', { name: 'Dismiss' });
     userEvent.click(dismissBtn);
-    const allTab = await screen.findByRole('tab', { name: 'Libraries' });
     expect(allTab).toHaveAttribute('aria-selected', 'true');
-
-    expect(alert).not.toBeInTheDocument();
+    waitFor(() => expect(alert).not.toBeInTheDocument());
+    // review updates button
+    const reviewActionBtn = await screen.findByRole('button', { name: 'Review Updates' });
+    userEvent.click(reviewActionBtn);
+    expect(await screen.findByRole('tab', { name: 'Review Content Updates 5' })).toHaveAttribute('aria-selected', 'true');
   });
 });
 

src/course-libraries/CourseLibraries.test.tsx

@@ -1,5 +1,5 @@
 import React, {
-  useCallback, useMemo, useState,
+  useCallback, useEffect, useMemo, useState,
 } from 'react';
 import { Helmet } from 'react-helmet';
 import { getConfig } from '@edx/frontend-platform';
@@ -105,7 +105,7 @@ export const CourseLibraries: React.FC<Props> = ({ courseId }) => {
   const courseDetails = useModel('courseDetails', courseId);
   const [searchParams] = useSearchParams();
   const [tabKey, setTabKey] = useState<CourseLibraryTabs>(
-    () => searchParams.get('tab') as CourseLibraryTabs || CourseLibraryTabs.all,
+    () => searchParams.get('tab') as CourseLibraryTabs,
   );
   const [showReviewAlert, setShowReviewAlert] = useState(false);
   const { data: libraries, isLoading } = useEntityLinksSummaryByDownstreamContext(courseId);
@@ -124,6 +124,19 @@ export const CourseLibraries: React.FC<Props> = ({ courseId }) => {
     setTabKey(selectedTab);
   }, []);
 
+  useEffect(() => {
+    setTabKey((prev) => {
+      if (outOfSyncCount > 0) {
+        return CourseLibraryTabs.review;
+      }
+      if (prev) {
+        return prev;
+      }
+      /* istanbul ignore next */
+      return CourseLibraryTabs.all;
+    });
+  }, [outOfSyncCount]);
+
   const renderLibrariesTabContent = useCallback(() => {
     if (isLoading) {
       return <Loading />;

src/course-libraries/CourseLibraries.tsx

@@ -13,9 +13,17 @@ interface OutOfSyncAlertProps {
   onDismiss?: () => void;
   onReview: () => void;
 }
-/*
-Shows an alert when library components used in the current course were updated and the blocks in course can be updated.
-Dismiss or review action is persisted using localStorage to avoid displaying the alert on every refresh.
+/**
+* Shows an alert when library components used in the current course were updated and the blocks
+* 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
+*   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.
 */
 export const OutOfSyncAlert: React.FC<OutOfSyncAlertProps> = ({
   showAlert,
@@ -48,11 +56,6 @@ export const OutOfSyncAlert: React.FC<OutOfSyncAlertProps> = ({
     onDismiss?.();
   };
 
-  const reviewAlert = () => {
-    dismissAlert();
-    onReview();
-  };
-
   return (
     <AlertMessage
       title={intl.formatMessage(messages.outOfSyncCountAlertTitle, { outOfSyncCount })}
@@ -63,7 +66,7 @@ export const OutOfSyncAlert: React.FC<OutOfSyncAlertProps> = ({
       onClose={dismissAlert}
       actions={[
         <Button
-          onClick={reviewAlert}
+          onClick={onReview}
         >
           {intl.formatMessage(messages.outOfSyncCountAlertReviewBtn)}
         </Button>,