diff --git a/src/course-libraries/CourseLibraries.test.tsx b/src/course-libraries/CourseLibraries.test.tsx
index 4c44144246..486c995bd7 100644
--- a/src/course-libraries/CourseLibraries.test.tsx
+++ b/src/course-libraries/CourseLibraries.test.tsx
@@ -82,7 +82,7 @@ describe('', () => {
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('', () => {
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('', () => {
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('', () => {
screen.logTestingPlaygroundURL();
- expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+ expect(screen.queryAllByRole('alert').length).toEqual(1);
});
});
diff --git a/src/course-libraries/CourseLibraries.tsx b/src/course-libraries/CourseLibraries.tsx
index 2d0cfadf0f..9298c5d2cb 100644
--- a/src/course-libraries/CourseLibraries.tsx
+++ b/src/course-libraries/CourseLibraries.tsx
@@ -17,7 +17,7 @@ import {
Tabs,
} from '@openedx/paragon';
import {
- Cached, CheckCircle, Launch, Loop,
+ Cached, CheckCircle, Launch, Loop, Info,
} from '@openedx/paragon/icons';
import sumBy from 'lodash/sumBy';
@@ -33,6 +33,7 @@ import { useStudioHome } from '../studio-home/hooks';
import NewsstandIcon from '../generic/NewsstandIcon';
import ReviewTabContent from './ReviewTabContent';
import { OutOfSyncAlert } from './OutOfSyncAlert';
+import AlertMessage from '../generic/alert-message';
interface Props {
courseId: string;
@@ -199,6 +200,12 @@ export const CourseLibraries: React.FC = ({ courseId }) => {
showAlert={showReviewAlert && tabKey === CourseLibraryTabs.all}
setShowAlert={setShowReviewAlert}
/>
+ { /* TODO: Remove this alert after implement container in this page */}
+
{titleComponent}
- {readyToSync && (
-
- )}
-
+ {intl.formatMessage(
+ isDisabledEditField ? messages.cannotEditTooltip : messages.altButtonEdit,
+ )}
+
+ )}
iconAs={EditIcon}
onClick={onClickEdit}
// @ts-ignore
@@ -161,6 +168,15 @@ const CardHeader = ({
)}
{extraActionsComponent}
+ {readyToSync && (
+ {intl.formatMessage(messages.readyToSyncButtonAlt)}}
+ onClick={onClickSync}
+ />
+ )}
', () => {
// 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('', () => {
// 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 });
diff --git a/src/library-authoring/component-comparison/messages.ts b/src/library-authoring/component-comparison/messages.ts
index 322eaee3a4..5a86fdaad5 100644
--- a/src/library-authoring/component-comparison/messages.ts
+++ b/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.',
},
});