diff --git a/src/library-authoring/create-library/CreateLibrary.test.tsx b/src/library-authoring/create-library/CreateLibrary.test.tsx index 0cc10b0a14..cf323b1aca 100644 --- a/src/library-authoring/create-library/CreateLibrary.test.tsx +++ b/src/library-authoring/create-library/CreateLibrary.test.tsx @@ -128,4 +128,13 @@ describe('', () => { expect(getByRole('alert')).toHaveTextContent('{"field":"Error message"}'); }); }); + + test('cancel creating library navigates to libraries page', async () => { + const { getByRole } = render(); + + fireEvent.click(getByRole('button', { name: /cancel/i })); + await waitFor(() => { + expect(mockNavigate).toHaveBeenCalledWith('/libraries'); + }); + }); }); diff --git a/src/library-authoring/create-library/CreateLibrary.tsx b/src/library-authoring/create-library/CreateLibrary.tsx index f705c73a4d..1731984ec5 100644 --- a/src/library-authoring/create-library/CreateLibrary.tsx +++ b/src/library-authoring/create-library/CreateLibrary.tsx @@ -4,7 +4,9 @@ import { useIntl } from '@edx/frontend-platform/i18n'; import { Container, Form, + Button, StatefulButton, + ActionRow, } from '@openedx/paragon'; import { Formik } from 'formik'; import { useNavigate } from 'react-router-dom'; @@ -40,6 +42,10 @@ const CreateLibrary = () => { isLoading: isOrganizationListLoading, } = useOrganizationListData(); + const handleOnClickCancel = () => { + navigate('/libraries'); + }; + if (data) { navigate(`/library/${data.id}`); } @@ -114,17 +120,25 @@ const CreateLibrary = () => { className="" controlClasses="pb-2" /> - + + + + )} diff --git a/src/library-authoring/create-library/messages.ts b/src/library-authoring/create-library/messages.ts index 295808b56a..cf1cff19bc 100644 --- a/src/library-authoring/create-library/messages.ts +++ b/src/library-authoring/create-library/messages.ts @@ -83,6 +83,11 @@ const messages = defineMessages({ defaultMessage: 'Creating..', description: 'Button text while the library is being created.', }, + cancelCreateLibraryButton: { + id: 'course-authoring.library-authoring.create-library.form.create-library.cancel.button', + defaultMessage: 'Cancel', + description: 'Button text to cancel creating a new library.', + }, }); export default messages;