feat: Add new content button on the end of block list

Author: ChrisChV

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

@@ -65,7 +65,7 @@ export const PickLibraryContentModal: React.FC<PickLibraryContentModalProps> = (
         showToast(intl.formatMessage(messages.successAssociateComponentMessage));
       })
       .catch(() => {
-        showToast(intl.formatMessage(messages.errorAssociateComponentMessage));
+        showToast(intl.formatMessage(messages.errorAssociateComponentToCollectionMessage));
       });
   }, [selectedComponents]);
 

src/library-authoring/units/LibraryUnitBlocks.tsx

@@ -1,8 +1,8 @@
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import {
-  ActionRow, Badge, Icon, Stack, useToggle,
+  ActionRow, Badge, Button, Icon, Stack, useToggle,
 } from '@openedx/paragon';
-import { Description } from '@openedx/paragon/icons';
+import { Add, Description } from '@openedx/paragon/icons';
 import { useQueryClient } from '@tanstack/react-query';
 import classNames from 'classnames';
 import { useEffect, useState } from 'react';
@@ -22,8 +22,10 @@ import { libraryAuthoringQueryKeys, useContainerChildren } from '../data/apiHook
 import { LibraryBlock } from '../LibraryBlock';
 import { useLibraryRoutes } from '../routes';
 import messages from './messages';
+import { useSidebarContext } from '../common/context/SidebarContext';
 
 export const LibraryUnitBlocks = () => {
+  const intl = useIntl();
   const [orderedBlocks, setOrderedBlocks] = useState<LibraryBlockMetadata[]>([]);
   const [isManageTagsDrawerOpen, openManageTagsDrawer, closeManageTagsDrawer] = useToggle(false);
   const { navigateTo } = useLibraryRoutes();
@@ -33,9 +35,14 @@ export const LibraryUnitBlocks = () => {
     unitId,
     showOnlyPublished,
     componentId,
+    readOnly,
     setComponentId,
   } = useLibraryContext();
 
+  const {
+    openAddContentSidebar,
+  } = useSidebarContext();
+
   const queryClient = useQueryClient();
   const {
     data: blocks,
@@ -128,6 +135,31 @@ export const LibraryUnitBlocks = () => {
       <DraggableList itemList={orderedBlocks} setState={setOrderedBlocks} updateOrder={handleReorder}>
         {renderedBlocks}
       </DraggableList>
+      <div className="d-flex">
+        <div className="w-100 mr-2">
+          <Button
+            className="ml-2"
+            iconBefore={Add}
+            variant="outline-primary rounded-0"
+            disabled={readOnly}
+            onClick={openAddContentSidebar}
+            block
+          >
+            {intl.formatMessage(messages.newContentButton)}
+          </Button>
+        </div>
+        <div className="w-100 ml-2">
+          <Button
+            className="ml-2"
+            iconBefore={Add}
+            variant="outline-primary rounded-0"
+            disabled
+            block
+          >
+            {intl.formatMessage(messages.addExistingContentButton)}
+          </Button>
+        </div>
+      </div>
       <ContentTagsDrawerSheet
         id={componentId}
         onClose={onTagSidebarClose}

src/library-authoring/units/LibraryUnitPage.tsx

@@ -67,7 +67,7 @@ const HeaderActions = () => {
         disabled={readOnly}
         onClick={openAddContentSidebar}
       >
-        {intl.formatMessage(messages.newContentButton)}
+        {intl.formatMessage(messages.addContentButton)}
       </Button>
     </div>
   );

src/library-authoring/units/messages.ts

@@ -6,9 +6,19 @@ const messages = defineMessages({
     defaultMessage: 'Unit Info',
     description: 'Button text to unit sidebar from unit page',
   },
-  newContentButton: {
-    id: 'course-authoring.library-authoring.unit-header.buttons.new-content',
+  addContentButton: {
+    id: 'course-authoring.library-authoring.unit-header.buttons.add-content',
     defaultMessage: 'Add Content',
+    description: 'Text of button to add content to unit',
+  },
+  addExistingContentButton: {
+    id: 'course-authoring.library-authoring.unit-header.buttons.add-existing-content',
+    defaultMessage: 'Add Existing Content',
+    description: 'Text of button to add existing content to unit',
+  },
+  newContentButton: {
+    id: 'course-authoring.library-authoring.unit-header.buttons.add-new-content',
+    defaultMessage: 'Add New Content',
     description: 'Text of button to add new content to unit',
   },
   breadcrumbsAriaLabel: {