feat: create library form (TEMP)

src/constants.js

@@ -69,3 +69,8 @@ export const CLIPBOARD_STATUS = {
 };
 
 export const STRUCTURAL_XBLOCK_TYPES = ['vertical', 'sequential', 'chapter', 'course'];
+
+export const REGEX_RULES = {
+  specialCharsRule: /^[a-zA-Z0-9_\-.'*~\s]+$/,
+  noSpaceRule: /^\S*$/,
+};

src/generic/FormikControl.jsx

@@ -9,8 +9,8 @@ const FormikControl = ({
   name,
   label,
   help,
-  className,
-  controlClasses,
+  className = FormikControl.defaultProps.className,
+  controlClasses = FormikControl.defaultProps.controlClasses,
   ...params
 }) => {
   const {

src/generic/create-or-rerun-course/hooks.jsx

@@ -5,6 +5,7 @@ import { useFormik } from 'formik';
 import * as Yup from 'yup';
 import { useNavigate } from 'react-router-dom';
 
+import { REGEX_RULES } from '../../constants';
 import { RequestStatus } from '../../data/constants';
 import { getStudioHomeData } from '../../studio-home/data/selectors';
 import {
@@ -32,8 +33,8 @@ const useCreateOrRerunCourse = (initialValues) => {
   const [isFormFilled, setFormFilled] = useState(false);
   const [showErrorBanner, setShowErrorBanner] = useState(false);
   const organizations = allowToCreateNewOrg ? allOrganizations : allowedOrganizations;
-  const specialCharsRule = /^[a-zA-Z0-9_\-.'*~\s]+$/;
-  const noSpaceRule = /^\S*$/;
+
+  const { specialCharsRule, noSpaceRule } = REGEX_RULES;
   const validationSchema = Yup.object().shape({
     displayName: Yup.string().required(
       intl.formatMessage(messages.requiredFieldError),

src/generic/data/apiHooks.js

@@ -8,7 +8,7 @@ import { getOrganizations, getTagsCount } from './api';
 export const useOrganizationListData = () => (
   useQuery({
     queryKey: ['organizationList'],
-    queryFn: () => getOrganizations(),
+    queryFn: getOrganizations,
   })
 );
 

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

@@ -0,0 +1,131 @@
+import React from 'react';
+import MockAdapter from 'axios-mock-adapter';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import initializeStore from '../../store';
+import CreateLibrary from './CreateLibrary';
+import { getContentLibraryV2CreateApiUrl } from './data/api';
+
+let store;
+const mockNavigate = jest.fn();
+let axiosMock: MockAdapter;
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+}));
+
+jest.mock('../../generic/data/apiHooks', () => ({
+  ...jest.requireActual('../../generic/data/apiHooks'),
+  useOrganizationListData: () => ({
+    data: ['org1', 'org2', 'org3', 'org4', 'org5'],
+    isLoading: false,
+  }),
+}));
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <QueryClientProvider client={queryClient}>
+        <CreateLibrary />
+      </QueryClientProvider>
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('<CreateLibrary />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    axiosMock.restore();
+    queryClient.clear();
+  });
+
+  test('call api data with correct data', async () => {
+    axiosMock.onPost(getContentLibraryV2CreateApiUrl()).reply(200, {
+      id: 'library-id',
+    });
+
+    const { getByRole, getByTestId } = render(<RootWrapper />);
+
+    const titleInput = getByRole('textbox', { name: /library name/i });
+    userEvent.click(titleInput);
+    userEvent.type(titleInput, 'Test Library Name');
+
+    const orgInput = getByTestId('autosuggest-textbox-input');
+    userEvent.click(orgInput);
+    userEvent.type(orgInput, 'org1');
+    userEvent.tab();
+
+    const slugInput = getByRole('textbox', { name: /library id/i });
+    userEvent.click(slugInput);
+    userEvent.type(slugInput, 'test_library_slug');
+
+    fireEvent.click(getByRole('button', { name: /create/i }));
+    await waitFor(() => {
+      expect(axiosMock.history.post.length).toBe(1);
+      expect(axiosMock.history.post[0].data).toBe(
+        '{"description":"","title":"Test Library Name","org":"org1","slug":"test_library_slug"}',
+      );
+      expect(mockNavigate).toHaveBeenCalledWith('/library/library-id');
+    });
+  });
+
+  test('show api error', async () => {
+    axiosMock.onPost(getContentLibraryV2CreateApiUrl()).reply(400, {
+      field: 'Error message',
+    });
+    const { getByRole, getByTestId } = render(<RootWrapper />);
+
+    const titleInput = getByRole('textbox', { name: /library name/i });
+    userEvent.click(titleInput);
+    userEvent.type(titleInput, 'Test Library Name');
+
+    const orgInput = getByTestId('autosuggest-textbox-input');
+    userEvent.click(orgInput);
+    userEvent.type(orgInput, 'org1');
+    userEvent.tab();
+
+    const slugInput = getByRole('textbox', { name: /library id/i });
+    userEvent.click(slugInput);
+    userEvent.type(slugInput, 'test_library_slug');
+
+    fireEvent.click(getByRole('button', { name: /create/i }));
+    await waitFor(() => {
+      expect(axiosMock.history.post.length).toBe(1);
+      expect(axiosMock.history.post[0].data).toBe(
+        '{"description":"","title":"Test Library Name","org":"org1","slug":"test_library_slug"}',
+      );
+      expect(mockNavigate).not.toHaveBeenCalled();
+      expect(getByRole('alert')).toHaveTextContent('Request failed with status code 400');
+      expect(getByRole('alert')).toHaveTextContent('{"field":"Error message"}');
+    });
+  });
+});

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

@@ -0,0 +1,147 @@
+import React, { useState } from 'react';
+import { StudioFooter } from '@edx/frontend-component-footer';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Alert,
+  Container,
+  Form,
+  StatefulButton,
+} from '@openedx/paragon';
+import { Formik } from 'formik';
+import { useNavigate } from 'react-router-dom';
+import * as Yup from 'yup';
+
+import { REGEX_RULES } from '../../constants';
+import Header from '../../header';
+import FormikControl from '../../generic/FormikControl';
+import FormikErrorFeedback from '../../generic/FormikErrorFeedback';
+import { useOrganizationListData } from '../../generic/data/apiHooks';
+import SubHeader from '../../generic/sub-header/SubHeader';
+import type { CreateContentLibraryArgs } from './data/api';
+import { useCreateLibraryV2 } from './data/apiHooks';
+import messages from './messages';
+
+const CreateLibrary = () => {
+  const intl = useIntl();
+  const navigate = useNavigate();
+
+  const [apiError, setApiError] = useState<React.ReactNode>();
+
+  const { noSpaceRule, specialCharsRule } = REGEX_RULES;
+  const validSlugIdRegex = /^[a-zA-Z\d]+(?:[\w-]*[a-zA-Z\d]+)*$/;
+
+  const {
+    mutateAsync,
+  } = useCreateLibraryV2();
+
+  const {
+    data: organizationListData,
+    isLoading: isOrganizationListLoading,
+  } = useOrganizationListData();
+
+  return (
+    <>
+      <Header isHiddenMainMenu />
+      <Container size="xl" className="p-4 mt-3">
+        <SubHeader
+          title={<FormattedMessage {...messages.createLibrary} />}
+        />
+        <Formik
+          initialValues={{
+            title: '',
+            org: '',
+            slug: '',
+          }}
+          validationSchema={
+            Yup.object().shape({
+              title: Yup.string()
+                .required(intl.formatMessage(messages.requiredFieldError)),
+              org: Yup.string()
+                .required(intl.formatMessage(messages.requiredFieldError))
+                .matches(
+                  specialCharsRule,
+                  intl.formatMessage(messages.disallowedCharsError),
+                )
+                .matches(noSpaceRule, intl.formatMessage(messages.noSpaceError)),
+              slug: Yup.string()
+                .required(intl.formatMessage(messages.requiredFieldError))
+                .matches(
+                  validSlugIdRegex,
+                  intl.formatMessage(messages.invalidSlugError),
+                ),
+            })
+          }
+          onSubmit={async (values: CreateContentLibraryArgs) => {
+            setApiError(undefined);
+            try {
+              const data = await mutateAsync(values);
+              navigate(`/library/${data.id}`);
+            } catch (error: any) {
+              setApiError((
+                <>
+                  {error.message}
+                  <br />
+                  {error.response?.data && JSON.stringify(error.response.data)}
+                </>
+              ));
+            }
+          }}
+        >
+          {(formikProps) => (
+            <Form onSubmit={formikProps.handleSubmit}>
+              <FormikControl
+                name="title"
+                label={<Form.Label>{intl.formatMessage(messages.titleLabel)}</Form.Label>}
+                value={formikProps.values.title}
+                placeholder={intl.formatMessage(messages.titlePlaceholder)}
+                help={intl.formatMessage(messages.titleHelp)}
+              />
+              <Form.Group>
+                <Form.Label>{intl.formatMessage(messages.orgLabel)}</Form.Label>
+                <Form.Autosuggest
+                  name="org"
+                  isLoading={isOrganizationListLoading}
+                  onChange={(event) => formikProps.setFieldValue('org', event.selectionId)}
+                  placeholder={intl.formatMessage(messages.orgPlaceholder)}
+                >
+                  {organizationListData ? organizationListData.map((org) => (
+                    <Form.AutosuggestOption key={org} id={org}>{org}</Form.AutosuggestOption>
+                  )) : []}
+                </Form.Autosuggest>
+                <FormikErrorFeedback name="org">
+                  <Form.Text>{intl.formatMessage(messages.orgHelp)}</Form.Text>
+                </FormikErrorFeedback>
+              </Form.Group>
+              <FormikControl
+                name="slug"
+                label={<Form.Label>{intl.formatMessage(messages.slugLabel)}</Form.Label>}
+                value={formikProps.values.slug}
+                placeholder={intl.formatMessage(messages.slugPlaceholder)}
+                help={intl.formatMessage(messages.slugHelp)}
+              />
+              <StatefulButton
+                type="submit"
+                variant="primary"
+                className="action btn-primary"
+                state={formikProps.isSubmitting ? 'disabled' : 'enabled'}
+                disabledStates={['disabled']}
+                labels={{
+                  enabled: intl.formatMessage(messages.createLibraryButton),
+                  disabled: intl.formatMessage(messages.createLibraryButtonPending),
+                }}
+              />
+            </Form>
+          )}
+        </Formik>
+        {apiError && (
+          <Alert variant="danger" className="mt-3">
+            {apiError}
+          </Alert>
+        )}
+      </Container>
+      <StudioFooter />
+    </>
+  );
+};
+
+export default CreateLibrary;

src/library-authoring/create-library/data/api.ts

@@ -0,0 +1,28 @@
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+
+/**
+ * Get the URL for creating a new library.
+ */
+export const getContentLibraryV2CreateApiUrl = () => `${getApiBaseUrl()}/api/libraries/v2/`;
+
+export interface CreateContentLibraryArgs {
+  title: string,
+  org: string,
+  slug: string,
+}
+
+/**
+ * Create a new library
+ */
+export async function createLibraryV2(data: CreateContentLibraryArgs) {
+  const client = getAuthenticatedHttpClient();
+  const url = getContentLibraryV2CreateApiUrl();
+
+  // Description field cannot be null, but we don't have a input in the form for it
+  const { data: newLibrary } = await client.post(url, { description: '', ...data });
+
+  return camelCaseObject(newLibrary);
+}