feat: Add unit from library into course (openedx#1829)

* feat: Initial worflow to add unit to course
* test: Add initial tests
* feat: Show only published units
* test: Update Subsection card test and ComponentPicker tests
* feat: Connect add unit from library API
* test: Test for Add unit from library in CourseOutline
* fix: create a new Vertical from a Library Unit
* docs: add a little note about avoiding 'vertical' where possible
* refactor: Use visibleTabs instead of showOnlyHomeTab

---------

Co-authored-by: Jillian Vogel <[email protected]>
Co-authored-by: Braden MacDonald <[email protected]>

Author: 3 people

src/course-outline/CourseOutline.jsx

@@ -103,6 +103,7 @@ const CourseOutline = ({ courseId }) => {
     handleNewSectionSubmit,
     handleNewSubsectionSubmit,
     handleNewUnitSubmit,
+    handleAddUnitFromLibrary,
     getUnitUrl,
     handleVideoSharingOptionChange,
     handlePasteClipboardClick,
@@ -383,6 +384,7 @@ const CourseOutline = ({ courseId }) => {
                                           onDuplicateSubmit={handleDuplicateSubsectionSubmit}
                                           onOpenConfigureModal={openConfigureModal}
                                           onNewUnitSubmit={handleNewUnitSubmit}
+                                          onAddUnitFromLibrary={handleAddUnitFromLibrary}
                                           onOrderChange={updateSubsectionOrderByIndex}
                                           onPasteClick={handlePasteClipboardClick}
                                         >

src/course-outline/CourseOutline.test.jsx

@@ -60,11 +60,14 @@ import {
   moveSubsection,
   moveUnit,
 } from './drag-helper/utils';
+import { postXBlockBaseApiUrl } from '../course-unit/data/api';
+import { COMPONENT_TYPES } from '../generic/block-type-utils/constants';
 
 let axiosMock;
 let store;
 const mockPathname = '/foo-bar';
 const courseId = '123';
+const containerKey = 'lct:org:lib:unit:1';
 
 window.HTMLElement.prototype.scrollIntoView = jest.fn();
 
@@ -94,6 +97,30 @@ jest.mock('./data/api', () => ({
   getTagsCount: () => jest.fn().mockResolvedValue({}),
 }));
 
+jest.mock('../studio-home/hooks', () => ({
+  useStudioHome: () => ({
+    librariesV2Enabled: true,
+  }),
+}));
+
+// Mock ComponentPicker to call onComponentSelected on click
+jest.mock('../library-authoring/component-picker', () => ({
+  ComponentPicker: (props) => {
+    const onClick = () => {
+      // eslint-disable-next-line react/prop-types
+      props.onComponentSelected({
+        usageKey: containerKey,
+        blockType: 'unti',
+      });
+    };
+    return (
+      <button type="submit" onClick={onClick}>
+        Dummy button
+      </button>
+    );
+  },
+}));
+
 const queryClient = new QueryClient();
 
 jest.mock('@dnd-kit/core', () => ({
@@ -390,6 +417,42 @@ describe('<CourseOutline />', () => {
     }));
   });
 
+  it('adds a unit from library correctly', async () => {
+    render(<RootWrapper />);
+    const [sectionElement] = await screen.findAllByTestId('section-card');
+    const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    fireEvent.click(expandBtn);
+    const units = await within(subsectionElement).findAllByTestId('unit-card');
+    expect(units.length).toBe(1);
+
+    axiosMock
+      .onPost(postXBlockBaseApiUrl())
+      .reply(200, {
+        locator: 'some',
+      });
+
+    const addUnitFromLibraryButton = within(subsectionElement).getByRole('button', {
+      name: /use unit from library/i,
+    });
+    fireEvent.click(addUnitFromLibraryButton);
+
+    // click dummy button to execute onComponentSelected prop.
+    const dummyBtn = await screen.findByRole('button', { name: 'Dummy button' });
+    fireEvent.click(dummyBtn);
+
+    waitFor(() => expect(axiosMock.history.post.length).toBe(1));
+
+    const [section] = courseOutlineIndexMock.courseStructure.childInfo.children;
+    const [subsection] = section.childInfo.children;
+    expect(axiosMock.history.post[0].data).toBe(JSON.stringify({
+      type: COMPONENT_TYPES.libraryV2,
+      category: 'vertical',
+      parent_locator: subsection.id,
+      library_content_key: containerKey,
+    }));
+  });
+
   it('render checklist value correctly', async () => {
     const { getByText } = render(<RootWrapper />);
 

src/course-outline/data/thunk.js

@@ -53,6 +53,7 @@ import {
   setPasteFileNotices,
   updateCourseLaunchQueryStatus,
 } from './slice';
+import { createCourseXblock } from '../../course-unit/data/api';
 
 export function fetchCourseOutlineIndexQuery(courseId) {
   return async (dispatch) => {
@@ -540,6 +541,26 @@ export function addNewUnitQuery(parentLocator, callback) {
   };
 }
 
+export function addUnitFromLibrary(body, callback) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+
+    try {
+      await createCourseXblock(body).then(async (result) => {
+        if (result) {
+          dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+          dispatch(hideProcessingNotification());
+          callback(result.locator);
+        }
+      });
+    } catch (error) /* istanbul ignore next */ {
+      dispatch(hideProcessingNotification());
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+}
+
 function setBlockOrderListQuery(
   parentId,
   blockIds,

src/course-outline/hooks.jsx

@@ -53,6 +53,7 @@ import {
   setUnitOrderListQuery,
   pasteClipboardContent,
   dismissNotificationQuery,
+  addUnitFromLibrary,
 } from './data/thunk';
 
 const useCourseOutline = ({ courseId }) => {
@@ -128,6 +129,10 @@ const useCourseOutline = ({ courseId }) => {
     dispatch(addNewUnitQuery(subsectionId, openUnitPage));
   };
 
+  const handleAddUnitFromLibrary = (body) => {
+    dispatch(addUnitFromLibrary(body, openUnitPage));
+  };
+
   const headerNavigationsActions = {
     handleNewSection: handleNewSectionSubmit,
     handleReIndex: () => {
@@ -336,6 +341,7 @@ const useCourseOutline = ({ courseId }) => {
     getUnitUrl,
     openUnitPage,
     handleNewUnitSubmit,
+    handleAddUnitFromLibrary,
     handleVideoSharingOptionChange,
     handlePasteClipboardClick,
     notificationDismissUrl,