style: Fixing nits about sync units

* Stay visible the sync icon in the course outline
* Update the message in the sync unit modal
* Add warning banner about units in the libraries sync page

Author: ChrisChV

src/course-libraries/CourseLibraries.test.tsx

@@ -82,7 +82,7 @@ describe('<CourseLibraries />', () => {
     expect(reviewTab).toHaveAttribute('aria-selected', 'true');
 
     userEvent.click(allTab);
-    const alert = await screen.findByRole('alert');
+    const alert = (await screen.findAllByRole('alert'))[0];
     expect(await within(alert).findByText(
       '5 library components are out of sync. Review updates to accept or ignore changes',
     )).toBeInTheDocument();
@@ -105,7 +105,7 @@ describe('<CourseLibraries />', () => {
     userEvent.click(allTab);
     expect(allTab).toHaveAttribute('aria-selected', 'true');
 
-    const alert = await screen.findByRole('alert');
+    const alert = (await screen.findAllByRole('alert'))[0];
     expect(await within(alert).findByText(
       '5 library components are out of sync. Review updates to accept or ignore changes',
     )).toBeInTheDocument();
@@ -133,7 +133,7 @@ describe('<CourseLibraries />', () => {
     expect(reviewTab).toHaveAttribute('aria-selected', 'true');
 
     userEvent.click(allTab);
-    const alert = await screen.findByRole('alert');
+    const alert = (await screen.findAllByRole('alert'))[0];
     expect(await within(alert).findByText(
       '5 library components are out of sync. Review updates to accept or ignore changes',
     )).toBeInTheDocument();
@@ -156,7 +156,7 @@ describe('<CourseLibraries />', () => {
 
     screen.logTestingPlaygroundURL();
 
-    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+    expect(screen.queryAllByRole('alert').length).toEqual(1);
   });
 });
 

src/course-libraries/CourseLibraries.tsx

@@ -17,9 +17,10 @@ import {
   Tabs,
 } from '@openedx/paragon';
 import {
-  Cached, CheckCircle, Launch, Loop,
+  Cached, CheckCircle, Launch, Loop, Info,
 } from '@openedx/paragon/icons';
 
+import AlertMessage from '../generic/alert-message';
 import sumBy from 'lodash/sumBy';
 import { useSearchParams } from 'react-router-dom';
 import getPageHeadTitle from '../generic/utils';
@@ -199,6 +200,12 @@ export const CourseLibraries: React.FC<Props> = ({ courseId }) => {
           showAlert={showReviewAlert && tabKey === CourseLibraryTabs.all}
           setShowAlert={setShowReviewAlert}
         />
+        { /* TODO: Remove this alert after implement container in this page */}
+        <AlertMessage
+          title={intl.formatMessage(messages.unitsUpdatesWarning)}
+          icon={Info}
+          variant="info"
+        />
         <SubHeader
           title={intl.formatMessage(messages.headingTitle)}
           subtitle={intl.formatMessage(messages.headingSubtitle)}

src/course-libraries/messages.ts

@@ -116,6 +116,11 @@ const messages = defineMessages({
     defaultMessage: 'Something went wrong! Could not fetch results.',
     description: 'Generic error message displayed when fetching link data fails.',
   },
+  unitsUpdatesWarning: {
+    id: 'course-authoring.course-libraries.home-tab.warning.units',
+    defaultMessage: 'Currently this page only tracks component updates. To check for unit updates, go to your Course Outline.',
+    description: 'Warning message shown in library sync page about units updates.',
+  },
 });
 
 export default messages;

src/course-outline/card-header/CardHeader.jsx

@@ -133,15 +133,6 @@ const CardHeader = ({
         ) : (
           <>
             {titleComponent}
-            {readyToSync && (
-              <IconButton
-                className="item-card-button-icon"
-                data-testid={`${namePrefix}-sync-button`}
-                alt={intl.formatMessage(messages.readyToSyncButtonAlt)}
-                iconAs={SyncIcon}
-                onClick={onClickSync}
-              />
-            )}
             <IconButton
               className="item-card-button-icon"
               data-testid={`${namePrefix}-edit-button`}
@@ -161,6 +152,14 @@ const CardHeader = ({
             <TagCount count={contentTagCount} onClick={openManageTagsDrawer} />
           )}
           {extraActionsComponent}
+          {readyToSync && (
+            <IconButton
+              data-testid={`${namePrefix}-sync-button`}
+              alt={intl.formatMessage(messages.readyToSyncButtonAlt)}
+              iconAs={SyncIcon}
+              onClick={onClickSync}
+            />
+          )}
           <Dropdown data-testid={`${namePrefix}-card-header__menu`} onClick={onClickMenuButton}>
             <Dropdown.Toggle
               className="item-card-header__menu"

src/course-outline/unit-card/UnitCard.test.jsx

@@ -176,7 +176,7 @@ describe('<UnitCard />', () => {
 
     // Should open compare preview modal
     expect(screen.getByRole('heading', { name: /preview changes: unit name/i })).toBeInTheDocument();
-    expect(screen.getByText('Preview not available')).toBeInTheDocument();
+    expect(screen.getByText('Preview not available for unit changes at this time')).toBeInTheDocument();
 
     // Click on accept changes
     const acceptChangesButton = screen.getByText(/accept changes/i);
@@ -196,7 +196,7 @@ describe('<UnitCard />', () => {
 
     // Should open compare preview modal
     expect(screen.getByRole('heading', { name: /preview changes: unit name/i })).toBeInTheDocument();
-    expect(screen.getByText('Preview not available')).toBeInTheDocument();
+    expect(screen.getByText('Preview not available for unit changes at this time')).toBeInTheDocument();
 
     // Click on ignore changes
     const ignoreChangesButton = screen.getByRole('button', { name: /ignore changes/i });

src/library-authoring/component-comparison/messages.ts

@@ -19,7 +19,7 @@ const messages = defineMessages({
   },
   previewNotAvailable: {
     id: 'course-authoring.library-authoring.component-comparison.preview-not-available',
-    defaultMessage: 'Preview not available',
+    defaultMessage: 'Preview not available for unit changes at this time',
     description: 'Message shown when preview is not available.',
   },
 });