feat: Create collection Modal [FC-0062]

src/library-authoring/LibraryLayout.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 import LibraryAuthoringPage from './LibraryAuthoringPage';
 import { LibraryProvider } from './common/context';
+import { CreateCollectionModal } from './create-collection';
 
 const LibraryLayout = () => (
   <LibraryProvider>
     <LibraryAuthoringPage />
+    <CreateCollectionModal />
   </LibraryProvider>
 );
 

src/library-authoring/add-content/AddContentContainer.tsx

@@ -23,6 +23,40 @@ import { getCanEdit } from '../../course-unit/data/selectors';
 import { useCreateLibraryBlock, useLibraryPasteClipboard } from '../data/apiHooks';
 
 import messages from './messages';
+import { LibraryContext } from '../common/context';
+
+type ContentType = {
+  name: string,
+  disabled: boolean,
+  icon: React.ComponentType,
+  blockType: string,
+};
+
+type AddContentButtonProps = {
+  contentType: ContentType,
+  onCreateContent: (blockType: string) => void,
+};
+
+const AddContentButton = ({ contentType, onCreateContent } : AddContentButtonProps) => {
+  const {
+    name,
+    disabled,
+    icon,
+    blockType,
+  } = contentType;
+  return (
+    <Button
+      key={`add-content-${blockType}`}
+      variant="outline-primary"
+      disabled={disabled}
+      className="m-2 rounded-0"
+      iconBefore={icon}
+      onClick={() => onCreateContent(blockType)}
+    >
+      {name}
+    </Button>
+  );
+};
 
 const AddContentContainer = () => {
   const intl = useIntl();
@@ -32,7 +66,16 @@ const AddContentContainer = () => {
   const { showToast } = useContext(ToastContext);
   const canEdit = useSelector(getCanEdit);
   const { showPasteXBlock } = useCopyToClipboard(canEdit);
+  const {
+    openCreateCollectionModal,
+  } = React.useContext(LibraryContext);
 
+  const collectionButtonData = {
+    name: intl.formatMessage(messages.collectionButton),
+    disabled: false,
+    icon: BookOpen,
+    blockType: 'collection',
+  };
   const contentTypes = [
     {
       name: intl.formatMessage(messages.textTypeButton),
@@ -95,6 +138,8 @@ const AddContentContainer = () => {
         }).catch(() => {
           showToast(intl.formatMessage(messages.errorPasteClipboardMessage));
         });
+      } else if (blockType === 'collection') {
+        openCreateCollectionModal();
       } else {
         createBlockMutation.mutateAsync({
           libraryId,
@@ -115,26 +160,10 @@ const AddContentContainer = () => {
 
   return (
     <Stack direction="vertical">
-      <Button
-        variant="outline-primary"
-        disabled
-        className="m-2 rounded-0"
-        iconBefore={BookOpen}
-      >
-        {intl.formatMessage(messages.collectionButton)}
-      </Button>
+      <AddContentButton contentType={collectionButtonData} onCreateContent={onCreateContent} />
       <hr className="w-100 bg-gray-500" />
       {contentTypes.map((contentType) => (
-        <Button
-          key={`add-content-${contentType.blockType}`}
-          variant="outline-primary"
-          disabled={contentType.disabled}
-          className="m-2 rounded-0"
-          iconBefore={contentType.icon}
-          onClick={() => onCreateContent(contentType.blockType)}
-        >
-          {contentType.name}
-        </Button>
+        <AddContentButton contentType={contentType} onCreateContent={onCreateContent} />
       ))}
     </Stack>
   );

src/library-authoring/common/context.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react/require-default-props */
+import { useToggle } from '@openedx/paragon';
 import React from 'react';
 
 export enum SidebarBodyComponentId {
@@ -14,6 +15,9 @@ export interface LibraryContextData {
   openInfoSidebar: () => void;
   openComponentInfoSidebar: (usageKey: string) => void;
   currentComponentUsageKey?: string;
+  isCreateCollectionModalOpen: boolean;
+  openCreateCollectionModal: () => void;
+  closeCreateCollectionModal: () => void;
 }
 
 export const LibraryContext = React.createContext({
@@ -22,6 +26,9 @@ export const LibraryContext = React.createContext({
   openAddContentSidebar: () => {},
   openInfoSidebar: () => {},
   openComponentInfoSidebar: (_usageKey: string) => {}, // eslint-disable-line @typescript-eslint/no-unused-vars
+  isCreateCollectionModalOpen: false,
+  openCreateCollectionModal: () => {},
+  closeCreateCollectionModal: () => {},
 } as LibraryContextData);
 
 /**
@@ -30,6 +37,7 @@ export const LibraryContext = React.createContext({
 export const LibraryProvider = (props: { children?: React.ReactNode }) => {
   const [sidebarBodyComponent, setSidebarBodyComponent] = React.useState<SidebarBodyComponentId | null>(null);
   const [currentComponentUsageKey, setCurrentComponentUsageKey] = React.useState<string>();
+  const [isCreateCollectionModalOpen, openCreateCollectionModal, closeCreateCollectionModal] = useToggle(false);
 
   const closeLibrarySidebar = React.useCallback(() => {
     setSidebarBodyComponent(null);
@@ -58,13 +66,19 @@ export const LibraryProvider = (props: { children?: React.ReactNode }) => {
     openInfoSidebar,
     openComponentInfoSidebar,
     currentComponentUsageKey,
+    isCreateCollectionModalOpen,
+    openCreateCollectionModal,
+    closeCreateCollectionModal,
   }), [
     sidebarBodyComponent,
     closeLibrarySidebar,
     openAddContentSidebar,
     openInfoSidebar,
     openComponentInfoSidebar,
     currentComponentUsageKey,
+    isCreateCollectionModalOpen,
+    openCreateCollectionModal,
+    closeCreateCollectionModal,
   ]);
 
   return (

src/library-authoring/create-collection/CreateCollectionModal.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import {
+  ActionRow,
+  Button,
+  Form,
+  ModalDialog,
+} from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useParams } from 'react-router-dom';
+import { LibraryContext } from '../common/context';
+import messages from './messages';
+import { useCreateLibraryCollection } from '../data/apiHooks';
+import { ToastContext } from '../../generic/toast-context';
+
+const CreateCollectionModal = () => {
+  const intl = useIntl();
+  const { libraryId } = useParams();
+  const create = useCreateLibraryCollection(libraryId);
+  const {
+    isCreateCollectionModalOpen,
+    closeCreateCollectionModal,
+  } = React.useContext(LibraryContext);
+  const { showToast } = React.useContext(ToastContext);
+
+  const [collectionName, setCollectionName] = React.useState<string | null>(null);
+  const [collectionNameInvalidMsg, setCollectionNameInvalidMsg] = React.useState<string | null>(null);
+  const [collectionDescription, setCollectionDescription] = React.useState<string | null>(null);
+  const [isCreatingCollection, setIsCreatingCollection] = React.useState<boolean>(false);
+
+  const handleNameOnChange = React.useCallback((value : string) => {
+    setCollectionName(value);
+    setCollectionNameInvalidMsg(null);
+  }, []);
+
+  const handleOnClose = React.useCallback(() => {
+    closeCreateCollectionModal();
+    setCollectionNameInvalidMsg(null);
+    setCollectionName(null);
+    setCollectionDescription(null);
+    setIsCreatingCollection(false);
+  }, []);
+
+  const handleCreate = React.useCallback(() => {
+    if (collectionName === null || collectionName === '') {
+      setCollectionNameInvalidMsg(
+        intl.formatMessage(messages.createCollectionModalNameInvalid),
+      );
+      return;
+    }
+
+    setIsCreatingCollection(true);
+
+    create.mutateAsync({
+      title: collectionName,
+      description: collectionDescription || '',
+    }).then(() => {
+      handleOnClose();
+      showToast(intl.formatMessage(messages.createCollectionSuccess));
+    }).catch((err) => {
+      setIsCreatingCollection(false);
+      if (err.customAttributes.httpErrorStatus === 409) {
+        setCollectionNameInvalidMsg(
+          intl.formatMessage(messages.createCollectionModalNameConflict),
+        );
+      } else {
+        showToast(intl.formatMessage(messages.createCollectionError));
+      }
+    });
+  }, [collectionName, collectionDescription]);
+
+  return (
+    <ModalDialog
+      title={intl.formatMessage(messages.createCollectionModalTitle)}
+      isOpen={isCreateCollectionModalOpen}
+      onClose={handleOnClose}
+      size="xl"
+      hasCloseButton
+      isFullscreenOnMobile
+    >
+      <ModalDialog.Header>
+        <ModalDialog.Title>
+          {intl.formatMessage(messages.createCollectionModalTitle)}
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+
+      <ModalDialog.Body className="mw-sm">
+        <Form>
+          <Form.Group>
+            <Form.Label className="font-weight-bold h3">
+              {intl.formatMessage(messages.createCollectionModalNameLabel)}
+            </Form.Label>
+            <Form.Control
+              placeholder={intl.formatMessage(messages.createCollectionModalNamePlaceholder)}
+              value={collectionName}
+              onChange={(e) => handleNameOnChange(e.target.value)}
+            />
+            { collectionNameInvalidMsg && (
+              <Form.Control.Feedback type="invalid">
+                {collectionNameInvalidMsg}
+              </Form.Control.Feedback>
+            )}
+          </Form.Group>
+          <Form.Group>
+            <Form.Label className="font-weight-bold h3">
+              {intl.formatMessage(messages.createCollectionModalDescriptionLabel)}
+            </Form.Label>
+            <Form.Control
+              as="textarea"
+              placeholder={intl.formatMessage(messages.createCollectionModalDescriptionPlaceholder)}
+              value={collectionDescription}
+              onChange={(e) => setCollectionDescription(e.target.value)}
+              rows="5"
+            />
+            <Form.Text muted>
+              {intl.formatMessage(messages.createCollectionModalDescriptionDetails)}
+            </Form.Text>
+          </Form.Group>
+        </Form>
+      </ModalDialog.Body>
+      <ModalDialog.Footer>
+        <ActionRow>
+          <ModalDialog.CloseButton variant="tertiary">
+            {intl.formatMessage(messages.createCollectionModalCancel)}
+          </ModalDialog.CloseButton>
+          <Button variant="primary" onClick={handleCreate} disabled={isCreatingCollection}>
+            {intl.formatMessage(messages.createCollectionModalCreate)}
+          </Button>
+        </ActionRow>
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
+
+export default CreateCollectionModal;

src/library-authoring/create-collection/index.tsx

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as CreateCollectionModal } from './CreateCollectionModal';

src/library-authoring/create-collection/messages.ts

@@ -0,0 +1,70 @@
+import { defineMessages as _defineMessages } from '@edx/frontend-platform/i18n';
+import type { defineMessages as defineMessagesType } from 'react-intl';
+
+// frontend-platform currently doesn't provide types... do it ourselves.
+const defineMessages = _defineMessages as typeof defineMessagesType;
+
+const messages = defineMessages({
+  createCollectionModalTitle: {
+    id: 'course-authoring.library-authoring.modals.create-collection.title',
+    defaultMessage: 'New Collection',
+    description: 'Title of the Create Collection modal',
+  },
+  createCollectionModalCancel: {
+    id: 'course-authoring.library-authoring.modals.create-collection.cancel',
+    defaultMessage: 'Cancel',
+    description: 'Label of the Cancel button of the Create Collection modal',
+  },
+  createCollectionModalCreate: {
+    id: 'course-authoring.library-authoring.modals.create-collection.create',
+    defaultMessage: 'Create',
+    description: 'Label of the Create button of the Create Collection modal',
+  },
+  createCollectionModalNameLabel: {
+    id: 'course-authoring.library-authoring.modals.create-collection.form.name',
+    defaultMessage: 'Name your collection',
+    description: 'Label of the Name field of the Create Collection modal form',
+  },
+  createCollectionModalNamePlaceholder: {
+    id: 'course-authoring.library-authoring.modals.create-collection.form.name.placeholder',
+    defaultMessage: 'Give a descriptive title',
+    description: 'Placeholder of the Name field of the Create Collection modal form',
+  },
+  createCollectionModalNameInvalid: {
+    id: 'course-authoring.library-authoring.modals.create-collection.form.name.invalid',
+    defaultMessage: 'Collection name is required',
+    description: 'Mesasge when the Name field of the Create Collection modal form is invalid',
+  },
+  createCollectionModalNameConflict: {
+    id: 'course-authoring.library-authoring.modals.create-collection.form.name.conflict',
+    defaultMessage: 'There is another collection with the same name',
+    description: 'Mesasge when the Name field of the Create Collection modal form is not unique',
+  },
+  createCollectionModalDescriptionLabel: {
+    id: 'course-authoring.library-authoring.modals.create-collection.form.description',
+    defaultMessage: 'Add a description (optional)',
+    description: 'Label of the Description field of the Create Collection modal form',
+  },
+  createCollectionModalDescriptionPlaceholder: {
+    id: 'course-authoring.library-authoring.modals.create-collection.form.description.placeholder',
+    defaultMessage: 'Add description',
+    description: 'Placeholder of the Description field of the Create Collection modal form',
+  },
+  createCollectionModalDescriptionDetails: {
+    id: 'course-authoring.library-authoring.modals.create-collection.form.description.details',
+    defaultMessage: 'Descriptions can help you and your team better organize and find what you are looking for',
+    description: 'Details of the Description field of the Create Collection modal form',
+  },
+  createCollectionSuccess: {
+    id: 'course-authoring.library-authoring.modals.create-collection.success',
+    defaultMessage: 'Collection created successfully',
+    description: 'Success message when creating a library collection',
+  },
+  createCollectionError: {
+    id: 'course-authoring.library-authoring.modals.create-collection.error',
+    defaultMessage: 'There is an error when creating the library collection',
+    description: 'Error message when creating a library collection',
+  },
+});
+
+export default messages;