diff --git a/src/generic/delete-modal/DeleteModal.jsx b/src/generic/delete-modal/DeleteModal.jsx index 82dfd0b139..52bbedcc1b 100644 --- a/src/generic/delete-modal/DeleteModal.jsx +++ b/src/generic/delete-modal/DeleteModal.jsx @@ -18,11 +18,15 @@ const DeleteModal = ({ description, variant, btnState, + btnDefaultLabel, + btnPendingLabel, }) => { const intl = useIntl(); const modalTitle = title || intl.formatMessage(messages.title, { category }); const modalDescription = description || intl.formatMessage(messages.description, { category }); + const defaultBtnLabel = btnDefaultLabel || intl.formatMessage(messages.deleteButton); + const pendingBtnLabel = btnPendingLabel || intl.formatMessage(messages.pendingDeleteButton); return ( @@ -69,6 +73,8 @@ DeleteModal.defaultProps = { description: '', variant: 'default', btnState: 'default', + btnDefaultLabel: '', + btnPendingLabel: '', }; DeleteModal.propTypes = { @@ -80,6 +86,8 @@ DeleteModal.propTypes = { description: PropTypes.string, variant: PropTypes.string, btnState: PropTypes.string, + btnDefaultLabel: PropTypes.string, + btnPendingLabel: PropTypes.string, }; export default DeleteModal; diff --git a/src/library-authoring/LibraryAuthoringPage.test.tsx b/src/library-authoring/LibraryAuthoringPage.test.tsx index 70853f18b6..6e89237e8d 100644 --- a/src/library-authoring/LibraryAuthoringPage.test.tsx +++ b/src/library-authoring/LibraryAuthoringPage.test.tsx @@ -486,7 +486,7 @@ describe('', () => { await renderLibraryPage(); // Open menu - fireEvent.click(screen.getAllByTestId('component-card-menu-toggle')[0]); + fireEvent.click((await screen.findAllByTestId('component-card-menu-toggle'))[0]); // Click add to collection fireEvent.click(screen.getByRole('button', { name: 'Add to collection' })); diff --git a/src/library-authoring/library-info/LibraryInfo.test.tsx b/src/library-authoring/library-info/LibraryInfo.test.tsx index 9714bc0df4..bbd1aa5bc8 100644 --- a/src/library-authoring/library-info/LibraryInfo.test.tsx +++ b/src/library-authoring/library-info/LibraryInfo.test.tsx @@ -161,6 +161,8 @@ describe('', () => { const discardButton = screen.getByRole('button', { name: /discard changes/i }); fireEvent.click(discardButton); + const confirmBtn = screen.getByRole('button', { name: /discard/i }); + fireEvent.click(confirmBtn); await waitFor(() => { expect(axiosMock.history.delete[0].url).toEqual(url); @@ -177,6 +179,8 @@ describe('', () => { const discardButton = screen.getByRole('button', { name: /discard changes/i }); fireEvent.click(discardButton); + const confirmBtn = screen.getByRole('button', { name: /discard/i }); + fireEvent.click(confirmBtn); await waitFor(() => { expect(axiosMock.history.delete[0].url).toEqual(url); diff --git a/src/library-authoring/library-info/LibraryPublishStatus.tsx b/src/library-authoring/library-info/LibraryPublishStatus.tsx index 6637c51796..2498a10241 100644 --- a/src/library-authoring/library-info/LibraryPublishStatus.tsx +++ b/src/library-authoring/library-info/LibraryPublishStatus.tsx @@ -1,15 +1,19 @@ -import { useCallback, useContext } from 'react'; +import { useCallback, useContext, useState } from 'react'; import { useIntl } from '@edx/frontend-platform/i18n'; +import { useToggle } from '@openedx/paragon'; import { ToastContext } from '../../generic/toast-context'; import { useLibraryContext } from '../common/context'; import { useCommitLibraryChanges, useRevertLibraryChanges } from '../data/apiHooks'; import StatusWidget from '../generic/status-widget'; import messages from './messages'; +import DeleteModal from '../../generic/delete-modal/DeleteModal'; const LibraryPublishStatus = () => { const intl = useIntl(); const { libraryData, readOnly } = useLibraryContext(); + const [isConfirmModalOpen, openConfirmModal, closeConfirmModal] = useToggle(false); + const [confirmBtnState, setConfirmBtnState] = useState('default'); const commitLibraryChanges = useCommitLibraryChanges(); const revertLibraryChanges = useRevertLibraryChanges(); @@ -28,11 +32,15 @@ const LibraryPublishStatus = () => { const revert = useCallback(() => { if (libraryData) { + setConfirmBtnState('pending'); revertLibraryChanges.mutateAsync(libraryData.id) .then(() => { showToast(intl.formatMessage(messages.revertSuccessMsg)); }).catch(() => { showToast(intl.formatMessage(messages.revertErrorMsg)); + }).finally(() => { + setConfirmBtnState('default'); + closeConfirmModal(); }); } }, [libraryData]); @@ -42,11 +50,24 @@ const LibraryPublishStatus = () => { } return ( - + <> + + + ); }; diff --git a/src/library-authoring/library-info/messages.ts b/src/library-authoring/library-info/messages.ts index 59e5eaa673..05ec10a504 100644 --- a/src/library-authoring/library-info/messages.ts +++ b/src/library-authoring/library-info/messages.ts @@ -61,6 +61,21 @@ const messages = defineMessages({ defaultMessage: 'There was an error updating the library', description: 'Message when there is an error when updating the library', }, + discardChangesTitle: { + id: 'course-authoring.library-authoring.library.discardChangesTitle', + defaultMessage: 'Discard changes', + description: 'Title text for confirmation modal shown before discard library changes', + }, + discardChangesDescription: { + id: 'course-authoring.library-authoring.library.discardChangesDescription', + defaultMessage: 'Are you sure you want to discard all unpublished changes in this library? This will include changes made by other users', + description: 'Description text for confirmation modal shown before discard library changes', + }, + discardChangesDefaultBtnLabel: { + id: 'course-authoring.library-authoring.library.discardChangesDefaultBtnLabel', + defaultMessage: 'Discard', + description: 'Button text for confirmation modal shown before discard library changes', + }, }); export default messages;