style: Fixing nits about sync units [FC-0097] (#2319)

* Stay visible the sync icon in the course outline
* Update the message in the sync unit/subsection/section modal
* Add a tooltip to the edit and sync button.

Author: ChrisChV

src/course-libraries/ReviewTabContent.tsx

@@ -172,7 +172,7 @@ const ItemReviewList = ({
       downstreamBlockId: info.usageKey,
       upstreamBlockId: outOfSyncItemsByKey[info.usageKey].upstreamKey,
       upstreamBlockVersionSynced: outOfSyncItemsByKey[info.usageKey].versionSynced,
-      isContainer: info.blockType === 'vertical' || info.blockType === 'sequencial' || info.blockType === 'chapter',
+      isContainer: info.blockType === 'vertical' || info.blockType === 'sequential' || info.blockType === 'chapter',
     });
   }, [outOfSyncItemsByKey]);
 

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

@@ -10,6 +10,7 @@ import {
   Hyperlink,
   Icon,
   IconButton,
+  IconButtonWithTooltip,
   useToggle,
 } from '@openedx/paragon';
 import {
@@ -175,19 +176,11 @@ 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
+            <IconButtonWithTooltip
               className="item-card-button-icon"
               data-testid={`${namePrefix}-edit-button`}
-              alt={intl.formatMessage(messages.altButtonEdit)}
+              alt={intl.formatMessage(messages.altButtonRename)}
+              tooltipContent={<div>{intl.formatMessage(messages.altButtonRename)}</div>}
               iconAs={EditIcon}
               onClick={onClickEdit}
               // @ts-ignore
@@ -203,6 +196,15 @@ const CardHeader = ({
             <TagCount count={contentTagCount} onClick={openManageTagsDrawer} />
           )}
           {extraActionsComponent}
+          {readyToSync && (
+            <IconButtonWithTooltip
+              data-testid={`${namePrefix}-sync-button`}
+              alt={intl.formatMessage(messages.readyToSyncButtonAlt)}
+              iconAs={SyncIcon}
+              tooltipContent={<div>{intl.formatMessage(messages.readyToSyncButtonAlt)}</div>}
+              onClick={onClickSync}
+            />
+          )}
           <Dropdown data-testid={`${namePrefix}-card-header__menu`} onClick={onClickMenuButton}>
             <Dropdown.Toggle
               className="item-card-header__menu"

src/course-outline/card-header/messages.js

@@ -33,9 +33,9 @@ const messages = defineMessages({
     id: 'course-authoring.course-outline.card.status-badge.draft-unpublished-changes',
     defaultMessage: 'Draft (Unpublished changes)',
   },
-  altButtonEdit: {
+  altButtonRename: {
     id: 'course-authoring.course-outline.card.button.edit.alt',
-    defaultMessage: 'Edit',
+    defaultMessage: 'Rename',
   },
   menuPublish: {
     id: 'course-authoring.course-outline.card.menu.publish',

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

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

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

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

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

@@ -198,7 +198,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 container changes at this time')).toBeInTheDocument();
 
     // Click on accept changes
     const acceptChangesButton = screen.getByText(/accept changes/i);
@@ -218,7 +218,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 container 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 container changes at this time',
     description: 'Message shown when preview is not available.',
   },
 });