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.', }, });