From 01564c0fb48556284c3e40003ce7f4f902aef47a Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Tue, 31 Oct 2023 11:09:48 -0400
Subject: [PATCH] feat: add missing items button (#354)

---
 .../author-library/LibraryAuthoringPage.jsx   | 27 ++++++++++++-------
 .../author-library/messages.js                |  5 ++++
 .../specs/LibraryAuthoringPage.spec.jsx       | 10 +++++++
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/library-authoring/author-library/LibraryAuthoringPage.jsx b/src/library-authoring/author-library/LibraryAuthoringPage.jsx
index d7a9e3a7..a7f26348 100644
--- a/src/library-authoring/author-library/LibraryAuthoringPage.jsx
+++ b/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>
diff --git a/src/library-authoring/author-library/messages.js b/src/library-authoring/author-library/messages.js
index 8916fa3a..55d4471c 100644
--- a/src/library-authoring/author-library/messages.js
+++ b/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',
diff --git a/src/library-authoring/author-library/specs/LibraryAuthoringPage.spec.jsx b/src/library-authoring/author-library/specs/LibraryAuthoringPage.spec.jsx
index a4818ffd..e157fcd6 100644
--- a/src/library-authoring/author-library/specs/LibraryAuthoringPage.spec.jsx
+++ b/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 })];