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;