feat: add missing items button

src/library-authoring/author-library/LibraryAuthoringPage.jsx

@@ -23,7 +23,6 @@ import {
   DeleteOutline,
   EditOutline,
   HelpOutline,
-  Sync,
   TextFields,
   VideoCamera,
 } from '@edx/paragon/icons';
@@ -301,21 +300,29 @@ BlockPreviewContainerBase.propTypes = {
 
 const ButtonTogglesBase = ({ setShowPreviews, showPreviews, intl }) => (
   <>
-    {/* todo: either reimplement the scroll to the add components button functionality,
-              figure out a better UX for the add component button at the top, or just
-              remove it entirely */}
-    {/* <Button variant="primary" className="mr-1" disabled={sending} onClick={quickAddBehavior} iconBefore={Add}>
-      {intl.formatMessage(messages[`library.detail.add_${library.type}`])}
-    </Button> */}
     <Button
-      variant="primary"
+      variant="outline-primary"
       className="ml-1"
       onClick={() => setShowPreviews(!showPreviews)}
-      iconBefore={Sync}
       size="sm"
     >
       { intl.formatMessage(showPreviews ? messages['library.detail.hide_previews'] : messages['library.detail.show_previews']) }
     </Button>
+    {/* todo: either replace the scroll to the add components button functionality
+              with a better UX for the add component button at the top, or just
+              remove it entirely */}
+    <Button
+      variant="primary"
+      className="mr-1"
+      size="sm"
+      onClick={() => {
+        const addComponentSection = document.getElementById('add-component-section');
+        addComponentSection.scrollIntoView({ behavior: 'smooth' });
+      }}
+      iconBefore={Add}
+    >
+      {intl.formatMessage(messages['library.detail.add.new.component.item'])}
+    </Button>
   </>
 );
 
@@ -540,7 +547,7 @@ export const LibraryAuthoringPageBase = ({
               </Button>
               )}
               {library.type === LIBRARY_TYPES.COMPLEX && (
-                <Row>
+                <Row id="add-component-section">
                   <Col xs={12}>
                     <h3>{intl.formatMessage(messages['library.detail.add_component_heading'])}</h3>
                   </Col>

src/library-authoring/author-library/messages.js

@@ -22,6 +22,11 @@ const messages = defineMessages({
     defaultMessage: 'New component',
     description: 'Text on the new component button.',
   },
+  'library.detail.add.new.component.item': {
+    id: 'library.detail.add.new.component.item',
+    defaultMessage: 'Add library item',
+    description: 'Title on the add library item button',
+  },
   'library.detail.add.new.component': {
     id: 'library.detail.add.new.component',
     defaultMessage: 'Add a new component',

src/library-authoring/author-library/specs/LibraryAuthoringPage.spec.jsx

@@ -136,6 +136,16 @@ testSuite('<LibraryAuthoringPageContainer />', () => {
     expect(localStorage.getItem('showPreviews')).toBe('false');
   });
 
+  it('Add library button scrolls page', async () => {
+    const scrollIntoViewMock = jest.fn();
+    window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+    const library = libraryFactory();
+    const blocks = [blockFactory(undefined, { library })];
+    await render(library, genState(library, blocks));
+    screen.getAllByText('Add library item')[0].click();
+    expect(scrollIntoViewMock).toHaveBeenCalled();
+  });
+
   it('Fetches block information', async () => {
     const library = libraryFactory();
     const blocks = [blockFactory({ id: 'testBlock' }, { library })];