feat: create unit workflow (#1741)

Implements the basic workflow to create a Unit in a Library.

Author: rpenido

src/generic/block-type-utils/constants.ts

@@ -3,9 +3,10 @@ import {
   BackHand as BackHandIcon,
   BookOpen as BookOpenIcon,
   Casino as ProblemBankIcon,
+  ContentPaste as ContentPasteIcon,
   Edit as EditIcon,
   EditNote as EditNoteIcon,
-  FormatListBulleted as FormatListBulletedIcon,
+  CalendarViewDay,
   HelpOutline as HelpOutlineIcon,
   LibraryAdd as LibraryIcon,
   Lock as LockIcon,
@@ -35,7 +36,7 @@ export const COMPONENT_TYPES = {
 export const UNIT_TYPE_ICONS_MAP: Record<string, React.ComponentType> = {
   video: VideoCameraIcon,
   other: BookOpenIcon,
-  vertical: FormatListBulletedIcon,
+  vertical: CalendarViewDay,
   problem: EditIcon,
   lock: LockIcon,
 };
@@ -58,6 +59,8 @@ export const STRUCTURAL_TYPE_ICONS: Record<string, React.ComponentType> = {
   sequential: Folder,
   chapter: Folder,
   collection: Folder,
+  libraryContent: Folder,
+  paste: ContentPasteIcon,
 };
 
 export const COMPONENT_TYPE_STYLE_COLOR_MAP = {

src/generic/key-utils.test.ts

@@ -32,6 +32,8 @@ describe('component utils', () => {
       ['lb:Axim:beta:problem:571fe018-f3ce-45c9-8f53-5dafcb422fdd', 'lib:Axim:beta'],
       ['lib-collection:org:lib:coll', 'lib:org:lib'],
       ['lib-collection:OpenCraftX:ALPHA:coll', 'lib:OpenCraftX:ALPHA'],
+      ['lct:org:lib:unit:my-unit-9284e2', 'lib:org:lib'],
+      ['lct:OpenCraftX:ALPHA:my-unit-a3223f', 'lib:OpenCraftX:ALPHA'],
     ]) {
       it(`returns '${expected}' for usage key '${input}'`, () => {
         expect(getLibraryId(input)).toStrictEqual(expected);

src/generic/key-utils.ts

@@ -19,12 +19,10 @@ export function getBlockType(usageKey: string): string {
  * @returns The library key, e.g. `lib:org:lib`
  */
 export function getLibraryId(usageKey: string): string {
-  if (usageKey && (usageKey.startsWith('lb:') || usageKey.startsWith('lib-collection:'))) {
-    const org = usageKey.split(':')[1];
-    const lib = usageKey.split(':')[2];
-    if (org && lib) {
-      return `lib:${org}:${lib}`;
-    }
+  const [blockType, org, lib] = usageKey?.split(':') || [];
+
+  if (['lb', 'lib-collection', 'lct'].includes(blockType) && org && lib) {
+    return `lib:${org}:${lib}`;
   }
   throw new Error(`Invalid usageKey: ${usageKey}`);
 }

…ic/loading-button/LoadingButton.test.jsx …ic/loading-button/LoadingButton.test.tsxsrc/generic/loading-button/LoadingButton.test.jsx renamed to src/generic/loading-button/LoadingButton.test.tsx src/generic/loading-button/LoadingButton.test.jsx renamed to src/generic/loading-button/LoadingButton.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   act,
   fireEvent,
@@ -9,7 +8,7 @@ import LoadingButton from '.';
 
 const buttonTitle = 'Button Title';
 
-const RootWrapper = (onClick) => (
+const RootWrapper = (onClick?: () => (Promise<void> | void)) => (
   <LoadingButton label={buttonTitle} onClick={onClick} />
 );
 
@@ -31,8 +30,8 @@ describe('<LoadingButton />', () => {
   });
 
   it('renders the spinner correctly', async () => {
-    let resolver;
-    const longFunction = () => new Promise((resolve) => {
+    let resolver: () => void;
+    const longFunction = () => new Promise<void>((resolve) => {
       resolver = resolve;
     });
     const { container, getByRole, getByText } = render(RootWrapper(longFunction));
@@ -51,8 +50,8 @@ describe('<LoadingButton />', () => {
   });
 
   it('renders the spinner correctly even with error', async () => {
-    let rejecter;
-    const longFunction = () => new Promise((_resolve, reject) => {
+    let rejecter: (err: Error) => void;
+    const longFunction = () => new Promise<void>((_resolve, reject) => {
       rejecter = reject;
     });
     const { container, getByRole, getByText } = render(RootWrapper(longFunction));

src/generic/loading-button/index.jsx src/generic/loading-button/index.tsxsrc/generic/loading-button/index.jsx renamed to src/generic/loading-button/index.tsx

@@ -1,4 +1,3 @@
-// @ts-check
 import React, {
   useCallback,
   useEffect,
@@ -8,20 +7,20 @@ import React, {
 import {
   StatefulButton,
 } from '@openedx/paragon';
-import PropTypes from 'prop-types';
+
+interface LoadingButtonProps {
+  label: string;
+  onClick?: (e: any) => (Promise<void> | void);
+  disabled?: boolean;
+  size?: string;
+  variant?: string;
+  className?: string;
+}
 
 /**
-  * A button that shows a loading spinner when clicked.
-  * @param {object} props
-  * @param {string} props.label
-  * @param {function=} props.onClick
-  * @param {boolean=} props.disabled
-  * @param {string=} props.size
-  * @param {string=} props.variant
-  * @param {string=} props.className
-  * @returns {JSX.Element}
+  * A button that shows a loading spinner when clicked, if the onClick function returns a Promise.
   */
-const LoadingButton = ({
+const LoadingButton: React.FC<LoadingButtonProps> = ({
   label,
   onClick,
   disabled,
@@ -37,7 +36,7 @@ const LoadingButton = ({
     componentMounted.current = false;
   }, []);
 
-  const loadingOnClick = useCallback(async (e) => {
+  const loadingOnClick = useCallback(async (e: any) => {
     if (!onClick) {
       return;
     }
@@ -67,21 +66,4 @@ const LoadingButton = ({
   );
 };
 
-LoadingButton.propTypes = {
-  label: PropTypes.string.isRequired,
-  onClick: PropTypes.func,
-  disabled: PropTypes.bool,
-  size: PropTypes.string,
-  variant: PropTypes.string,
-  className: PropTypes.string,
-};
-
-LoadingButton.defaultProps = {
-  onClick: undefined,
-  disabled: undefined,
-  size: undefined,
-  variant: '',
-  className: '',
-};
-
 export default LoadingButton;