Add 'Add Component' button to library page.

It looks like the 'New Course'/'New Library' buttons on the studio home page.

Clicking the 'Add Component' button scrolls down to the 'Add New Component' buttons.

cms/static/js/spec/views/pages/container_spec.js

@@ -494,6 +494,15 @@ define(["jquery", "underscore", "underscore.string", "js/common_helpers/ajax_hel
                             containerPage.$(".new-component .new-component-type a.single-template")[index].click();
                         };
 
+                        it('Attaches a handler to new component button', function() {
+                            containerPage = getContainerPage();
+                            containerPage.render();
+                            // Stub jQuery.scrollTo module.
+                            $.scrollTo = jasmine.createSpy('jQuery.scrollTo');
+                            containerPage.$('.new-component-button').click();
+                            expect($.scrollTo).toHaveBeenCalled();
+                        });
+
                         it('sends the correct JSON to the server', function () {
                             renderContainerPage(this, mockContainerXBlockHtml);
                             clickNewComponent(0);

cms/static/js/spec/views/pages/index_spec.js

@@ -66,6 +66,7 @@ define(["jquery", "js/common_helpers/ajax_helpers", "js/spec_helpers/view_helper
                 expect($('.create-course .wrap-error')).toHaveClass('is-shown');
                 expect($('#course_creation_error')).toContainText('error message');
                 expect($('.new-course-save')).toHaveClass('is-disabled');
+                expect($('.new-course-save')).toHaveAttr('aria-disabled', 'true');
             });
 
             it("saves new libraries", function () {
@@ -97,6 +98,7 @@ define(["jquery", "js/common_helpers/ajax_helpers", "js/spec_helpers/view_helper
                     fillInLibraryFields.apply(this, values_with_blank);
                     expect($('.create-library li.field.text input[value=]').parent()).toHaveClass('error');
                     expect($('.new-library-save')).toHaveClass('is-disabled');
+                    expect($('.new-library-save')).toHaveAttr('aria-disabled', 'true');
                     $('.new-library-save').click();
                     expect(requests.length).toEqual(requests_count); // Expect no new requests
                 }
@@ -123,6 +125,7 @@ define(["jquery", "js/common_helpers/ajax_helpers", "js/spec_helpers/view_helper
                 expect($('.create-library .wrap-error')).toHaveClass('is-shown');
                 expect($('#library_creation_error')).toContainText('error message');
                 expect($('.new-library-save')).toHaveClass('is-disabled');
+                expect($('.new-library-save')).toHaveAttr('aria-disabled', 'true');
             });
 
             it("can switch tabs", function() {

cms/static/js/views/pages/container.js

@@ -16,7 +16,8 @@ define(["jquery", "underscore", "gettext", "js/views/pages/base_page", "js/views
             events: {
                 "click .edit-button": "editXBlock",
                 "click .duplicate-button": "duplicateXBlock",
-                "click .delete-button": "deleteXBlock"
+                "click .delete-button": "deleteXBlock",
+                "click .new-component-button": "scrollToNewComponentButtons"
             },
 
             options: {
@@ -321,6 +322,11 @@ define(["jquery", "underscore", "gettext", "js/views/pages/base_page", "js/views
                         temporaryView.unbind();  // Remove the temporary view
                     }
                 });
+            },
+
+            scrollToNewComponentButtons: function(event) {
+                event.preventDefault();
+                $.scrollTo(this.$('.add-xblock-component'));
             }
         });
 

cms/templates/js/mock/mock-container-page.underscore

@@ -33,6 +33,12 @@
                             </a>
                         </li>
                 % endif
+                    <li class="nav-item">
+                        <a href="#" class="button new-button new-component-button">
+                            <i class="icon-plus icon-inline"></i>
+                            <span class="action-button-text">${_("Add Component")}</span>
+                        </a>
+                   </li>
                 </ul>
             </nav>
         </header>

cms/templates/library.html

@@ -43,7 +43,19 @@ from django.utils.translation import ugettext as _
             <div class="wrapper-xblock-field incontext-editor is-editable"
                  data-field="display_name" data-field-display-name="${_("Display Name")}">
                 <h1 class="page-header-title xblock-field-value incontext-editor-value"><span class="title-value">${context_library.display_name_with_default | h}</span></h1>
+            </div>
         </div>
+
+        <nav class="nav-actions">
+            <h3 class="sr">${_("Page Actions")}</h3>
+            <ul>
+                <li class="nav-item">
+                    <a href="#" class="button new-button new-component-button">
+                        <i class="icon-plus icon-inline"></i> <span class="action-button-text">${_("Add Component")}</span>
+                    </a>
+              </li>
+            </ul>
+        </nav>
     </header>
 </div>