feat: Add cancel create library button (#1182)

src/library-authoring/create-library/CreateLibrary.test.tsx

@@ -128,4 +128,13 @@ describe('<CreateLibrary />', () => {
       expect(getByRole('alert')).toHaveTextContent('{"field":"Error message"}');
     });
   });
+
+  test('cancel creating library navigates to libraries page', async () => {
+    const { getByRole } = render(<RootWrapper />);
+
+    fireEvent.click(getByRole('button', { name: /cancel/i }));
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/libraries');
+    });
+  });
 });

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"
               />
-              <StatefulButton
-                type="submit"
-                variant="primary"
-                className="action btn-primary"
-                state={isLoading ? 'disabled' : 'enabled'}
-                disabledStates={['disabled']}
-                labels={{
-                  enabled: intl.formatMessage(messages.createLibraryButton),
-                  disabled: intl.formatMessage(messages.createLibraryButtonPending),
-                }}
-              />
+              <ActionRow className="justify-content-start">
+                <Button
+                  variant="outline-primary"
+                  onClick={handleOnClickCancel}
+                >
+                  {intl.formatMessage(messages.cancelCreateLibraryButton)}
+                </Button>
+                <StatefulButton
+                  type="submit"
+                  variant="primary"
+                  className="action btn-primary"
+                  state={isLoading ? 'disabled' : 'enabled'}
+                  disabledStates={['disabled']}
+                  labels={{
+                    enabled: intl.formatMessage(messages.createLibraryButton),
+                    disabled: intl.formatMessage(messages.createLibraryButtonPending),
+                  }}
+                />
+              </ActionRow>
             </Form>
           )}
         </Formik>

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;