From a3e26e682436fbcc37fd751f8c3b078d8da66a79 Mon Sep 17 00:00:00 2001
From: Andy Armstrong <andya@edx.org>
Date: Wed, 9 Apr 2014 12:15:38 -0400
Subject: [PATCH] Implement next round of code reviews

---
 .../contentstore/views/component.py           |   1 -
 .../views/tests/test_container.py             |  31 +-
 .../js/spec/views/pages/container_spec.js     |  29 +-
 .../js/spec/views/xblock_editor_spec.js       |  12 +-
 cms/static/js/spec/views/xblock_spec.js       |   2 +-
 cms/static/js/spec_helpers/edit_helpers.js    |  16 -
 cms/static/js/views/course_info_handout.js    |   4 +-
 cms/static/js/views/course_info_update.js     |   4 +-
 cms/static/js/views/list_textbooks.js         |   4 +-
 cms/static/js/views/modals/edit_xblock.js     |  12 +-
 cms/static/js/views/paging_footer.js          |   2 +-
 cms/static/js/views/paging_header.js          |   2 +-
 cms/static/sass/elements/_modal-window.scss   |   2 +-
 .../js/mock/mock-container-xblock.underscore  | 383 +++++-------------
 cms/templates/unit.html                       |   4 +-
 15 files changed, 168 insertions(+), 340 deletions(-)

diff --git a/cms/djangoapps/contentstore/views/component.py b/cms/djangoapps/contentstore/views/component.py
index 8203952009..425b330353 100644
--- a/cms/djangoapps/contentstore/views/component.py
+++ b/cms/djangoapps/contentstore/views/component.py
@@ -273,7 +273,6 @@ def unit_handler(request, tag=None, package_id=None, branch=None, version_guid=N
             'context_course': course,
             'unit': item,
             'unit_locator': locator,
-            'xblocks': xblocks,
             'locators': locators,
             'component_templates': component_templates,
             'draft_preview_link': preview_lms_link,
diff --git a/cms/djangoapps/contentstore/views/tests/test_container.py b/cms/djangoapps/contentstore/views/tests/test_container.py
index fefc19ea21..3c19efc896 100644
--- a/cms/djangoapps/contentstore/views/tests/test_container.py
+++ b/cms/djangoapps/contentstore/views/tests/test_container.py
@@ -5,6 +5,7 @@ Unit tests for the container view.
 from contentstore.tests.utils import CourseTestCase
 from contentstore.utils import compute_publish_state, PublishState
 from contentstore.views.helpers import xblock_studio_url
+from xmodule.modulestore.django import modulestore
 from xmodule.modulestore.tests.factories import ItemFactory
 
 
@@ -47,13 +48,33 @@ class ContainerViewTestCase(CourseTestCase):
         Create the scenario of an xblock with children (non-vertical) on the container page.
         This should create a container page that is a child of another container page.
         """
-        xblock_with_child = ItemFactory.create(parent_location=self.child_vertical.location,
-                                               category="wrapper", display_name="Wrapper")
-        ItemFactory.create(parent_location=xblock_with_child.location,
-                           category="html", display_name="Child HTML")
+        published_xblock_with_child = ItemFactory.create(
+            parent_location=self.child_vertical.location,
+            category="wrapper", display_name="Wrapper"
+        )
+        ItemFactory.create(
+            parent_location=published_xblock_with_child.location,
+            category="html", display_name="Child HTML"
+        )
+        draft_xblock_with_child = modulestore('draft').convert_to_draft(published_xblock_with_child.location)
         branch_name = "MITx.999.Robot_Super_Course/branch/draft/block"
         self._test_html_content(
-            xblock_with_child,
+            published_xblock_with_child,
+            branch_name=branch_name,
+            expected_section_tag=(
+                '<section class="wrapper-xblock level-page is-hidden" '
+                'data-locator="{branch_name}/Wrapper">'.format(branch_name=branch_name)
+            ),
+            expected_breadcrumbs=(
+                r'<a href="/unit/{branch_name}/Unit"\s*'
+                r'class="navigation-link navigation-parent">Unit</a>\s*'
+                r'<a href="/container/{branch_name}/Child_Vertical"\s*'
+                r'class="navigation-link navigation-parent">Child Vertical</a>\s*'
+                r'<a href="#" class="navigation-link navigation-current">Wrapper</a>'
+            ).format(branch_name=branch_name)
+        )
+        self._test_html_content(
+            draft_xblock_with_child,
             branch_name=branch_name,
             expected_section_tag=(
                 '<section class="wrapper-xblock level-page is-hidden" '
diff --git a/cms/static/js/spec/views/pages/container_spec.js b/cms/static/js/spec/views/pages/container_spec.js
index a969d71997..6c28dac98f 100644
--- a/cms/static/js/spec/views/pages/container_spec.js
+++ b/cms/static/js/spec/views/pages/container_spec.js
@@ -35,7 +35,7 @@ define(["jquery", "js/spec_helpers/create_sinon", "js/spec_helpers/edit_helpers"
                     containerPage.render();
                     respondWithMockXBlockEditorFragment(requests, {
                         html: mockContainerXBlockHtml,
-                        "resources": []
+                        resources: []
                     });
 
                     expect(containerPage.$el.select('.xblock-header')).toBeTruthy();
@@ -49,7 +49,7 @@ define(["jquery", "js/spec_helpers/create_sinon", "js/spec_helpers/edit_helpers"
                     expect(containerPage.$('.ui-loading')).not.toHaveClass('is-hidden');
                     respondWithMockXBlockEditorFragment(requests, {
                         html: mockContainerXBlockHtml,
-                        "resources": []
+                        resources: []
                     });
                     expect(containerPage.$('.ui-loading')).toHaveClass('is-hidden');
                 });
@@ -84,19 +84,17 @@ define(["jquery", "js/spec_helpers/create_sinon", "js/spec_helpers/edit_helpers"
                     containerPage.render();
                     respondWithMockXBlockEditorFragment(requests, {
                         html: mockContainerXBlockHtml,
-                        "resources": []
+                        resources: []
                     });
                     editButtons = containerPage.$('.edit-button');
-                    // The container renders four mock xblocks, so there should be four edit buttons
-                    expect(editButtons.length).toBe(4);
+                    // The container renders six mock xblocks, so there should be an equal number of edit buttons
+                    expect(editButtons.length).toBe(6);
                     editButtons.first().click();
                     // Make sure that the correct xblock is requested to be edited
-                    expect(requests[requests.length - 1].url).toBe(
-                        '/xblock/testCourse/branch/draft/block/html447/studio_view'
-                    );
+                    expect(requests[requests.length - 1].url).toBe('/xblock/locator-component-A1/studio_view');
                     create_sinon.respondWithJson(requests, {
                         html: mockXBlockEditorHtml,
-                        "resources": []
+                        resources: []
                     });
                     expect(edit_helpers.isShowingModal()).toBeTruthy();
                 });
@@ -108,15 +106,15 @@ define(["jquery", "js/spec_helpers/create_sinon", "js/spec_helpers/edit_helpers"
                     containerPage.render();
                     respondWithMockXBlockEditorFragment(requests, {
                         html: mockContainerXBlockHtml,
-                        "resources": []
+                        resources: []
                     });
                     editButtons = containerPage.$('.edit-button');
-                    // The container renders four mock xblocks, so there should be four edit buttons
-                    expect(editButtons.length).toBe(4);
+                    // The container renders six mock xblocks, so there should be an equal number of edit buttons
+                    expect(editButtons.length).toBe(6);
                     editButtons.first().click();
                     create_sinon.respondWithJson(requests, {
                         html: mockXBlockEditorHtml,
-                        "resources": []
+                        resources: []
                     });
 
                     modal = $('.edit-xblock-modal');
@@ -133,11 +131,10 @@ define(["jquery", "js/spec_helpers/create_sinon", "js/spec_helpers/edit_helpers"
                     // Respond to the request to refresh
                     respondWithMockXBlockEditorFragment(requests, {
                         html: mockUpdatedXBlockHtml,
-                        "resources": []
+                        resources: []
                     });
                     // Verify that the xblock was updated
                     expect(containerPage.$('.mock-updated-content').text()).toBe('Mock Update');
-                    expect(edit_helpers.hasSavedMockXBlock()).toBe(true);
                 });
             });
 
@@ -149,7 +146,7 @@ define(["jquery", "js/spec_helpers/create_sinon", "js/spec_helpers/edit_helpers"
                     containerPage.render();
                     respondWithMockXBlockEditorFragment(requests, {
                         html: mockContainerXBlockHtml,
-                        "resources": []
+                        resources: []
                     });
 
                     expect(containerPage.$('.no-container-content')).not.toHaveClass('is-hidden');
diff --git a/cms/static/js/spec/views/xblock_editor_spec.js b/cms/static/js/spec/views/xblock_editor_spec.js
index ac313342c3..e53fa0f167 100644
--- a/cms/static/js/spec/views/xblock_editor_spec.js
+++ b/cms/static/js/spec/views/xblock_editor_spec.js
@@ -43,7 +43,7 @@ define([ "jquery", "underscore", "js/spec_helpers/create_sinon", "js/spec_helper
                     editor.render();
                     create_sinon.respondWithJson(requests, {
                         html: mockXBlockEditorHtml,
-                        "resources": []
+                        resources: []
                     });
 
                     expect(editor.$el.select('.xblock-header')).toBeTruthy();
@@ -55,12 +55,11 @@ define([ "jquery", "underscore", "js/spec_helpers/create_sinon", "js/spec_helper
                     editor.render();
                     create_sinon.respondWithJson(requests, {
                         html: mockXBlockEditorHtml,
-                        "resources": []
+                        resources: []
                     });
                     editor.save();
                     request = requests[requests.length - 1];
                     response = JSON.parse(request.requestBody);
-                    expect(edit_helpers.hasSavedMockXBlock()).toBeTruthy();
                     expect(response.metadata.display_name).toBe(testDisplayName);
                     expect(response.metadata.custom_field).toBe('Custom Value');
                 });
@@ -84,7 +83,7 @@ define([ "jquery", "underscore", "js/spec_helpers/create_sinon", "js/spec_helper
                     editor.render();
                     create_sinon.respondWithJson(requests, {
                         html: mockXModuleEditorHtml,
-                        "resources": []
+                        resources: []
                     });
 
                     expect(editor.$el.select('.xblock-header')).toBeTruthy();
@@ -96,14 +95,13 @@ define([ "jquery", "underscore", "js/spec_helpers/create_sinon", "js/spec_helper
                     editor.render();
                     create_sinon.respondWithJson(requests, {
                         html: mockXModuleEditorHtml,
-                        "resources": []
+                        resources: []
                     });
                     // Give the mock xblock a save method...
                     editor.xblock.save = window.MockDescriptor.save;
                     editor.save();
                     request = requests[requests.length - 1];
                     response = JSON.parse(request.requestBody);
-                    expect(edit_helpers.hasSavedMockXModule()).toBeTruthy();
                     expect(response.metadata.display_name).toBe(testDisplayName);
                     expect(response.metadata.custom_field).toBe('Custom Value');
                 });
@@ -115,7 +113,7 @@ define([ "jquery", "underscore", "js/spec_helpers/create_sinon", "js/spec_helper
                     editor.render();
                     create_sinon.respondWithJson(requests, {
                         html: mockXModuleEditorHtml,
-                        "resources": []
+                        resources: []
                     });
 
                     expect(editor.$el.select('.xblock-header')).toBeTruthy();
diff --git a/cms/static/js/spec/views/xblock_spec.js b/cms/static/js/spec/views/xblock_spec.js
index dbbf82b8da..2da1e7866a 100644
--- a/cms/static/js/spec/views/xblock_spec.js
+++ b/cms/static/js/spec/views/xblock_spec.js
@@ -28,7 +28,7 @@ define([ "jquery", "js/spec_helpers/create_sinon", "URI", "js/views/xblock", "js
                 xblockView.render();
                 respondWithMockXBlockFragment(requests, {
                     html: mockXBlockHtml,
-                    "resources": []
+                    resources: []
                 });
 
                 expect(xblockView.$el.select('.xblock-header')).toBeTruthy();
diff --git a/cms/static/js/spec_helpers/edit_helpers.js b/cms/static/js/spec_helpers/edit_helpers.js
index ba81532f19..c33b5aac87 100644
--- a/cms/static/js/spec_helpers/edit_helpers.js
+++ b/cms/static/js/spec_helpers/edit_helpers.js
@@ -10,11 +10,9 @@ define(["jquery", "js/spec_helpers/create_sinon", "js/spec_helpers/modal_helpers
             stringEntryTemplate = readFixtures('metadata-string-entry.underscore'),
             editXBlockModalTemplate = readFixtures('edit-xblock-modal.underscore'),
             editorModeButtonTemplate = readFixtures('editor-mode-button.underscore'),
-            xblockSaved,
             installMockXBlock,
             uninstallMockXBlock,
             hasSavedMockXBlock,
-            xmoduleSaved,
             installMockXModule,
             uninstallMockXModule,
             hasSavedMockXModule,
@@ -22,11 +20,9 @@ define(["jquery", "js/spec_helpers/create_sinon", "js/spec_helpers/modal_helpers
             showEditModal;
 
         installMockXBlock = function(mockResult) {
-            xblockSaved = false;
             window.MockXBlock = function(runtime, element) {
                 return {
                     save: function() {
-                        xblockSaved = true;
                         return mockResult;
                     }
                 };
@@ -37,15 +33,9 @@ define(["jquery", "js/spec_helpers/create_sinon", "js/spec_helpers/modal_helpers
             window.MockXBlock = null;
         };
 
-        hasSavedMockXBlock = function() {
-            return xblockSaved;
-        };
-
         installMockXModule = function(mockResult) {
-            xmoduleSaved = false;
             window.MockDescriptor = _.extend(XModule.Descriptor, {
                 save: function() {
-                    xmoduleSaved = true;
                     return mockResult;
                 }
             });
@@ -55,10 +45,6 @@ define(["jquery", "js/spec_helpers/create_sinon", "js/spec_helpers/modal_helpers
             window.MockDescriptor = null;
         };
 
-        hasSavedMockXModule = function() {
-            return xmoduleSaved;
-        };
-
         installEditTemplates = function(append) {
             modal_helpers.installModalTemplates(append);
 
@@ -84,10 +70,8 @@ define(["jquery", "js/spec_helpers/create_sinon", "js/spec_helpers/modal_helpers
 
         return $.extend(modal_helpers, {
             'installMockXBlock': installMockXBlock,
-            'hasSavedMockXBlock': hasSavedMockXBlock,
             'uninstallMockXBlock': uninstallMockXBlock,
             'installMockXModule': installMockXModule,
-            'hasSavedMockXModule': hasSavedMockXModule,
             'uninstallMockXModule': uninstallMockXModule,
             'installEditTemplates': installEditTemplates,
             'showEditModal': showEditModal
diff --git a/cms/static/js/views/course_info_handout.js b/cms/static/js/views/course_info_handout.js
index 7f6b199d29..e6b02374e3 100644
--- a/cms/static/js/views/course_info_handout.js
+++ b/cms/static/js/views/course_info_handout.js
@@ -1,5 +1,5 @@
-define(["js/views/baseview", "underscore", "codemirror", "js/views/feedback_notification", "js/views/course_info_helper", "js/utils/modal"],
-    function(BaseView, _, CodeMirror, NotificationView, CourseInfoHelper, ModalUtils) {
+define(["js/views/baseview", "codemirror", "js/views/feedback_notification", "js/views/course_info_helper", "js/utils/modal"],
+    function(BaseView, CodeMirror, NotificationView, CourseInfoHelper, ModalUtils) {
 
     // the handouts view is dumb right now; it needs tied to a model and all that jazz
     var CourseInfoHandoutsView = BaseView.extend({
diff --git a/cms/static/js/views/course_info_update.js b/cms/static/js/views/course_info_update.js
index 79859ed19c..255f8b69f4 100644
--- a/cms/static/js/views/course_info_update.js
+++ b/cms/static/js/views/course_info_update.js
@@ -1,6 +1,6 @@
-define(["js/views/baseview", "underscore", "codemirror", "js/models/course_update",
+define(["js/views/baseview", "codemirror", "js/models/course_update",
     "js/views/feedback_prompt", "js/views/feedback_notification", "js/views/course_info_helper", "js/utils/modal"],
-    function(BaseView, _, CodeMirror, CourseUpdateModel, PromptView, NotificationView, CourseInfoHelper, ModalUtils) {
+    function(BaseView, CodeMirror, CourseUpdateModel, PromptView, NotificationView, CourseInfoHelper, ModalUtils) {
 
     var CourseInfoUpdateView = BaseView.extend({
         // collection is CourseUpdateCollection
diff --git a/cms/static/js/views/list_textbooks.js b/cms/static/js/views/list_textbooks.js
index 6c020beff5..40f3cc4322 100644
--- a/cms/static/js/views/list_textbooks.js
+++ b/cms/static/js/views/list_textbooks.js
@@ -1,5 +1,5 @@
-define(["js/views/baseview", "underscore", "jquery", "js/views/edit_textbook", "js/views/show_textbook"],
-        function(BaseView, _, $, EditTextbookView, ShowTextbookView) {
+define(["js/views/baseview", "jquery", "js/views/edit_textbook", "js/views/show_textbook"],
+        function(BaseView, $, EditTextbookView, ShowTextbookView) {
     var ListTextbooks = BaseView.extend({
         initialize: function() {
             this.emptyTemplate = this.loadTemplate('no-textbooks');
diff --git a/cms/static/js/views/modals/edit_xblock.js b/cms/static/js/views/modals/edit_xblock.js
index 331d65a2ab..3b60a9c664 100644
--- a/cms/static/js/views/modals/edit_xblock.js
+++ b/cms/static/js/views/modals/edit_xblock.js
@@ -139,12 +139,14 @@ define(["jquery", "underscore", "gettext", "js/views/modals/base_modal",
                 this.$el.html("");
             },
 
-            findXBlockInfo: function(xblockElement, defaultXBlockInfo) {
-                var xblockInfo = defaultXBlockInfo;
-                if (xblockElement.length > 0) {
+            findXBlockInfo: function(xblockWrapperElement, defaultXBlockInfo) {
+                var xblockInfo = defaultXBlockInfo,
+                    xblockElement;
+                if (xblockWrapperElement.length > 0) {
+                    xblockElement = xblockWrapperElement.find('.xblock');
                     xblockInfo = new XBlockInfo({
-                        id: xblockElement.data('locator'),
-                        category: xblockElement.data('category')
+                        id: xblockWrapperElement.data('locator'),
+                        category: xblockElement.data('block-type')
                     });
                 }
                 return xblockInfo;
diff --git a/cms/static/js/views/paging_footer.js b/cms/static/js/views/paging_footer.js
index 09ce4705a2..7a81929e7a 100644
--- a/cms/static/js/views/paging_footer.js
+++ b/cms/static/js/views/paging_footer.js
@@ -11,7 +11,7 @@ define(["underscore", "js/views/baseview"], function(_, BaseView) {
             var view = options.view,
                 collection = view.collection;
             this.view = view;
-            this.template = this.loadTemplate("paging-footer");
+            this.template = this.loadTemplate('paging-footer');
             collection.bind('add', _.bind(this.render, this));
             collection.bind('remove', _.bind(this.render, this));
             collection.bind('reset', _.bind(this.render, this));
diff --git a/cms/static/js/views/paging_header.js b/cms/static/js/views/paging_header.js
index b3bc9c5074..c8a4f23352 100644
--- a/cms/static/js/views/paging_header.js
+++ b/cms/static/js/views/paging_header.js
@@ -10,7 +10,7 @@ define(["underscore", "gettext", "js/views/baseview"], function(_, gettext, Base
             var view = options.view,
                 collection = view.collection;
             this.view = view;
-            this.template = this.loadTemplate("paging-header");
+            this.template = this.loadTemplate('paging-header');
             collection.bind('add', _.bind(this.render, this));
             collection.bind('remove', _.bind(this.render, this));
             collection.bind('reset', _.bind(this.render, this));
diff --git a/cms/static/sass/elements/_modal-window.scss b/cms/static/sass/elements/_modal-window.scss
index f070422709..7efff97f7a 100644
--- a/cms/static/sass/elements/_modal-window.scss
+++ b/cms/static/sass/elements/_modal-window.scss
@@ -173,7 +173,7 @@
   .modal-window {
 
     .CodeMirror {
-      height: 390px;
+      height: 100%;
     }
 
     .wrapper-comp-settings {
diff --git a/cms/templates/js/mock/mock-container-xblock.underscore b/cms/templates/js/mock/mock-container-xblock.underscore
index 558175c799..16f3b9456b 100644
--- a/cms/templates/js/mock/mock-container-xblock.underscore
+++ b/cms/templates/js/mock/mock-container-xblock.underscore
@@ -1,300 +1,127 @@
-<section class="wrapper-xblock level-page" data-locator="testCourse/branch/draft/block/vertical131">
-<header class="xblock-header">
-    <div class="header-details">
-        <a href="#" data-tooltip="Expand or Collapse" class="action expand-collapse collapse">
-            <i class="icon-caret-down ui-toggle-expansion"></i>
-            <span class="sr">Expand or Collapse</span>
-        </a>
-        <span>Nested Vertical Test</span>
-    </div>
-    <div class="header-actions">
-        <ul class="actions-list">
-            <li class="sr action-item">No Actions</li>
-        </ul>
-    </div>
-</header>
+<header class="xblock-header"></header>
+
 <article class="xblock-render">
-<div class="xblock xblock-student_view xmodule_display xmodule_VerticalModule xblock-initialized" data-runtime-class="PreviewRuntime" data-init="XBlockToXModuleShim" data-runtime-version="1" data-usage-id="i4x:;_;_AndyA;_ABT101;_vertical;_131a499ddaa3474194c1aa2eced34455" data-type="None" data-block-type="vertical">
-<div class="vert-mod">
-<div class="vert vert-0" data-id="i4x://AndyA/ABT101/vertical/2758bbc495dd40d59050da15b40bd9a5">
+    <div class="xblock" data-block-type="vertical">
+        <div class="vert-mod">
+            <div class="vert vert-0">
 
-    <section class="wrapper-xblock level-nesting is-collapsible" data-locator="testCourse/branch/draft/block/vertical275">
-        <header class="xblock-header">
-            <div class="header-details">
-                <a href="#" data-tooltip="Expand or Collapse" class="action expand-collapse collapse">
-                    <i class="icon-caret-down ui-toggle-expansion"></i>
-                    <span class="sr">Expand or Collapse</span>
-                </a>
-                <span>Group A</span>
-            </div>
-            <div class="header-actions">
-                <ul class="actions-list">
-                    <li class="sr action-item">No Actions</li>
-                </ul>
-            </div>
-        </header>
-        <article class="xblock-render">
-            <div class="xblock xblock-student_view xmodule_display xmodule_VerticalModule xblock-initialized" data-runtime-class="PreviewRuntime" data-init="XBlockToXModuleShim" data-runtime-version="1" data-usage-id="i4x:;_;_AndyA;_ABT101;_vertical;_2758bbc495dd40d59050da15b40bd9a5" data-type="None" data-block-type="vertical">
-                <div class="vert-mod">
-                    <div class="vert vert-0" data-id="i4x://AndyA/ABT101/html/4471618afafb45bfb86cbe511973e225">
+                <div class="xblock" data-block-type="vertical">
+                    <div class="vert-mod">
+                        <div class="vert vert-0">
 
-                        <section class="wrapper-xblock level-element" data-locator="testCourse/branch/draft/block/html447" data-display-name="" data-category="html">
-                            <header class="xblock-header">
-                                <div class="header-details">
+                            <section class="wrapper-xblock level-nesting" data-locator="locator-group-A">
+                                <header class="xblock-header"></header>
 
-                                </div>
-                                <div class="header-actions">
-                                    <ul class="actions-list">
-                                        <li class="action-item action-edit">
-                                            <a href="#" class="edit-button action-button">
-                                                <i class="icon-edit"></i>
-                                                <span class="action-button-text">Edit</span>
-                                            </a>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </header>
-                            <article class="xblock-render">
-                                <div class="xblock xblock-student_view xmodule_display xmodule_HtmlModule xblock-initialized" data-runtime-class="PreviewRuntime" data-init="XBlockToXModuleShim" data-runtime-version="1" data-usage-id="i4x:;_;_AndyA;_ABT101;_html;_4471618afafb45bfb86cbe511973e225" data-type="HTMLModule" data-block-type="html">
-                                    <p>This is group A.</p>
-                                </div>
+                                <article class="xblock-render">
+                                    <div class="xblock" data-block-type="vertical">
+                                        <div class="vert-mod">
+                                            <div class="vert vert-0">
 
-                            </article>
-                        </section>
+                                                <section class="wrapper-xblock level-element" data-locator="locator-component-A1">
 
-                    </div>
-                    <div class="vert vert-1" data-id="i4x://AndyA/ABT101/video/fbd800d0bdbd4cb69ac70c47c9f699e1">
-
-                        <section class="wrapper-xblock level-element" data-locator="testCourse/branch/draft/block/videofbd" data-display-name="Video" data-category="video">
-                            <header class="xblock-header">
-                                <div class="header-details">
-                                    Video
-                                </div>
-                                <div class="header-actions">
-                                    <ul class="actions-list">
-                                        <li class="action-item action-edit">
-                                            <a href="#" class="edit-button action-button">
-                                                <i class="icon-edit"></i>
-                                                <span class="action-button-text">Edit</span>
-                                            </a>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </header>
-                            <article class="xblock-render">
-                                <div class="xblock xblock-student_view xmodule_display xmodule_VideoModule xblock-initialized" data-runtime-class="PreviewRuntime" data-init="XBlockToXModuleShim" data-runtime-version="1" data-usage-id="i4x:;_;_AndyA;_ABT101;_video;_fbd800d0bdbd4cb69ac70c47c9f699e1" data-type="Video" data-block-type="video">
-
-
-                                    <h2>Video</h2>
-
-                                    <div id="video_i4x-AndyA-ABT101-video-fbd800d0bdbd4cb69ac70c47c9f699e1" class="video closed is-initialized" data-streams="1.00:OEoXaMPEzfM" data-save-state-url="/preview/xblock/i4x:;_;_AndyA;_ABT101;_video;_fbd800d0bdbd4cb69ac70c47c9f699e1/handler/xmodule_handler/save_user_state" data-caption-data-dir="None" data-show-captions="true" data-general-speed="1.0" data-speed="null" data-saved-video-position="0.0" data-start="0.0" data-end="0.0" data-transcript-language="en" data-transcript-languages="{&quot;en&quot;: &quot;English&quot;}" data-autoplay="False" data-yt-test-timeout="1500" data-yt-api-url="www.youtube.com/iframe_api" data-yt-test-url="gdata.youtube.com/feeds/api/videos/" data-transcript-translation-url="/preview/xblock/i4x:;_;_AndyA;_ABT101;_video;_fbd800d0bdbd4cb69ac70c47c9f699e1/handler/transcript/translation" data-transcript-available-translations-url="/preview/xblock/i4x:;_;_AndyA;_ABT101;_video;_fbd800d0bdbd4cb69ac70c47c9f699e1/handler/transcript/available_translations" data-autohide-html5="False" tabindex="-1">
-                                        <div class="focus_grabber first" tabindex="-1"></div>
-
-                                        <div class="tc-wrapper">
-                                            <a href="#before-transcript_i4x-AndyA-ABT101-video-fbd800d0bdbd4cb69ac70c47c9f699e1" class="nav-skip sr">Skip to a navigable version of this video's transcript.</a>
-
-                                            <article class="video-wrapper">
-                                                <span tabindex="-1" class="spinner" aria-hidden="true" aria-label="Loading video player"></span>
-                                                <span tabindex="-1" class="btn-play is-hidden" aria-hidden="true" aria-label="Play video"></span>
-                                                <div class="video-player-pre"></div>
-                                                <section class="video-player">
-                                                    <iframe id="i4x-AndyA-ABT101-video-fbd800d0bdbd4cb69ac70c47c9f699e1" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/OEoXaMPEzfM?controls=0&amp;wmode=transparent&amp;rel=0&amp;showinfo=0&amp;enablejsapi=1&amp;modestbranding=1&amp;html5=1&amp;origin=http%3A%2F%2Flocalhost%3A8001" style="height: 476.4375px; width: 847px; top: -31.71875px; left: 0px;"></iframe>
-                                                    <h3 class="hidden">ERROR: No playable video sources found!</h3>
-                                                </section>
-                                                <div class="video-player-post"></div>
-                                                <section class="video-controls" style="">
-                                                    <div class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" title="Video position" aria-disabled="false" tabindex="-1" style=""><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 0%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" role="slider" title="Video position" aria-disabled="false" aria-valuetext="0 seconds" style="left: 0%;"></a></div>
-                                                    <div>
-                                                        <ul class="vcr">
-                                                            <li><a class="video_control play" href="#" title="Play" role="button" aria-disabled="false"></a></li>
-                                                            <li><div class="vidtime">0:00 / 1:56</div></li>
-                                                        </ul>
-                                                        <div class="secondary-controls"><div class="speeds menu-container">
-                                                            <a href="#" title="Speeds" role="button" aria-disabled="false">
-                                                                <h3>Speed</h3>
-                                                                <p class="active">1.0x</p>
-                                                            </a>
-                                                            <ol class="video_speeds menu" role="menu"><li data-speed="2.0" role="presentation"><a class="speed_link" href="#" role="menuitem">2.0x</a></li><li data-speed="1.50" role="presentation"><a class="speed_link" href="#" role="menuitem">1.50x</a></li><li data-speed="1.0" role="presentation" class="active"><a class="speed_link" href="#" role="menuitem">1.0x</a></li><li data-speed="0.50" role="presentation"><a class="speed_link" href="#" role="menuitem">0.50x</a></li></ol>
-                                                        </div><div class="volume">
-                                                            <a href="#" title="Volume" role="button" aria-disabled="false" aria-label="Volume"></a>
-                                                            <div class="volume-slider-container">
-                                                                <div class="volume-slider ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="height: 100%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" role="slider" title="Volume" aria-disabled="false" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" aria-valuetext="Maximum" style="bottom: 100%;"></a></div>
-                                                            </div>
+                                                    <header class="xblock-header">
+                                                        <div class="header-actions">
+                                                            <ul class="actions-list">
+                                                                <li class="action-item action-edit"><a href="#" class="edit-button action-button"></a></li>
+                                                                <li class="action-item action-duplicate"><a href="#" class="duplicate-button action-button"></a></li>
+                                                                <li class="action-item action-delete"><a href="#" class="delete-button action-button"></a></li>
+                                                            </ul>
                                                         </div>
-
-
-                                                            <a href="#" class="add-fullscreen" title="Fill browser" role="button" aria-disabled="false">Fill browser</a>
-                                                            <a href="#" class="quality_control" title="HD off" role="button" aria-disabled="false" style="display: inline;">HD off</a>
-
-                                                            <div class="lang menu-container">
-                                                                <a href="#" class="hide-subtitles" title="Turn on captions" role="button" aria-="" disabled="false" style="display: none;">Turn on captions</a>
-                                                            </div>
-                                                        </div>
-                                                    </div>
+                                                    </header>
+                                                    <article class="xblock-render"></article>
                                                 </section>
-                                                <a class="nav-skip sr" id="before-transcript_i4x-AndyA-ABT101-video-fbd800d0bdbd4cb69ac70c47c9f699e1" href="#after-transcript_i4x-AndyA-ABT101-video-fbd800d0bdbd4cb69ac70c47c9f699e1">Skip to end of transcript.</a>
-                                            </article>
 
-                                            <ol id="transcript-captions" class="subtitles" tabindex="0" role="group" aria-label="Activating an item in this group will spool the video to the corresponding time point. To skip transcript, go to previous item." style="max-height: 476px;">
-                                                <li style=""></li>
-                                            </ol>
-                                        </div>
+                                                <section class="wrapper-xblock level-element" data-locator="locator-component-A2">
 
-                                        <a class="nav-skip sr" id="after-transcript_i4x-AndyA-ABT101-video-fbd800d0bdbd4cb69ac70c47c9f699e1" href="#before-transcript_i4x-AndyA-ABT101-video-fbd800d0bdbd4cb69ac70c47c9f699e1">Go back to start of transcript.</a>
+                                                    <header class="xblock-header">
+                                                        <div class="header-actions">
+                                                            <ul class="actions-list">
+                                                                <li class="action-item action-edit"><a href="#" class="edit-button action-button"></a></li>
+                                                                <li class="action-item action-duplicate"><a href="#" class="duplicate-button action-button"></a></li>
+                                                                <li class="action-item action-delete"><a href="#" class="delete-button action-button"></a></li>
+                                                            </ul>
+                                                        </div>
+                                                    </header>
+                                                    <article class="xblock-render"></article>
+                                                </section>
 
-                                        <div class="focus_grabber last" tabindex="-1"></div>
-                                        <ul class="wrapper-downloads">
-                                        </ul>
-                                    </div>
+                                                <section class="wrapper-xblock level-element" data-locator="locator-component-A3">
 
-                                </div>
-
-                            </article>
-                        </section>
-
-                    </div>
-                </div>
-
-            </div>
-
-        </article>
-    </section>
-
-</div>
-<div class="vert vert-1" data-id="i4x://AndyA/ABT101/vertical/c5c8b27c2c5546e784432f3b2b6cf2ea">
-
-    <section class="wrapper-xblock level-nesting is-collapsible" data-locator="testCourse/branch/draft/block/verticalc5c">
-        <header class="xblock-header">
-            <div class="header-details">
-                <a href="#" data-tooltip="Expand or Collapse" class="action expand-collapse collapse">
-                    <i class="icon-caret-down ui-toggle-expansion"></i>
-                    <span class="sr">Expand or Collapse</span>
-                </a>
-                <span>Group B</span>
-            </div>
-            <div class="header-actions">
-                <ul class="actions-list">
-                    <li class="sr action-item">No Actions</li>
-                </ul>
-            </div>
-        </header>
-        <article class="xblock-render">
-            <div class="xblock xblock-student_view xmodule_display xmodule_VerticalModule xblock-initialized" data-runtime-class="PreviewRuntime" data-init="XBlockToXModuleShim" data-runtime-version="1" data-usage-id="i4x:;_;_AndyA;_ABT101;_vertical;_c5c8b27c2c5546e784432f3b2b6cf2ea" data-type="None" data-block-type="vertical">
-                <div class="vert-mod">
-                    <div class="vert vert-0" data-id="i4x://AndyA/ABT101/html/dd6ef295fda74a639842e1a49c66b2c7">
-
-                        <section class="wrapper-xblock level-element" data-locator="testCourse/branch/draft/block/htmldd6" data-display-name="Text" data-category="html">
-                            <header class="xblock-header">
-                                <div class="header-details">
-                                    Text
-                                </div>
-                                <div class="header-actions">
-                                    <ul class="actions-list">
-                                        <li class="action-item action-edit">
-                                            <a href="#" class="edit-button action-button">
-                                                <i class="icon-edit"></i>
-                                                <span class="action-button-text">Edit</span>
-                                            </a>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </header>
-                            <article class="xblock-render">
-                                <div class="xblock xblock-student_view xmodule_display xmodule_HtmlModule xblock-initialized" data-runtime-class="PreviewRuntime" data-init="XBlockToXModuleShim" data-runtime-version="1" data-usage-id="i4x:;_;_AndyA;_ABT101;_html;_dd6ef295fda74a639842e1a49c66b2c7" data-type="HTMLModule" data-block-type="html">
-                                    <p>This is group B.</p>
-                                </div>
-
-                            </article>
-                        </section>
-
-                    </div>
-                    <div class="vert vert-1" data-id="i4x://AndyA/ABT101/problem/b40ecbe4ed1b4280ae93e2a158edae6f">
-
-                        <section class="wrapper-xblock level-element" data-locator="testCourse/branch/draft/block/problemb40" data-display-name="Checkboxes" data-category="problem">
-                            <header class="xblock-header">
-                                <div class="header-details">
-                                    Checkboxes
-                                </div>
-                                <div class="header-actions">
-                                    <ul class="actions-list">
-                                        <li class="action-item action-edit">
-                                            <a href="#" class="edit-button action-button">
-                                                <i class="icon-edit"></i>
-                                                <span class="action-button-text">Edit</span>
-                                            </a>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </header>
-                            <article class="xblock-render">
-                                <div class="xblock xblock-student_view xmodule_display xmodule_CapaModule xblock-initialized" data-runtime-class="PreviewRuntime" data-init="XBlockToXModuleShim" data-runtime-version="1" data-usage-id="i4x:;_;_AndyA;_ABT101;_problem;_b40ecbe4ed1b4280ae93e2a158edae6f" data-type="Problem" data-block-type="problem">
-                                    <div id="problem_i4x-AndyA-ABT101-problem-b40ecbe4ed1b4280ae93e2a158edae6f" class="problems-wrapper" data-problem-id="i4x://AndyA/ABT101/problem/b40ecbe4ed1b4280ae93e2a158edae6f" data-url="/preview/xblock/i4x:;_;_AndyA;_ABT101;_problem;_b40ecbe4ed1b4280ae93e2a158edae6f/handler/xmodule_handler" data-progress_status="none" data-progress_detail="0/1">
-
-
-                                        <h2 class="problem-header">
-                                            Checkboxes
-                                        </h2>
-
-                                        <div class="problem-progress">(1 point possible)</div>
-
-                                        <div class="problem" role="application">
-                                            <div>
-                                                <p>A checkboxes problem presents checkbox buttons for student input. Students can select more than one option presented.</p>
-  <span><form class="choicegroup capa_inputtype" id="inputtype_i4x-AndyA-ABT101-problem-b40ecbe4ed1b4280ae93e2a158edae6f_2_1">
-      <div class="indicator_container">
-        <span class="status unanswered" id="status_i4x-AndyA-ABT101-problem-b40ecbe4ed1b4280ae93e2a158edae6f_2_1" aria-describedby="inputtype_i4x-AndyA-ABT101-problem-b40ecbe4ed1b4280ae93e2a158edae6f_2_1">
-            <span class="sr">
-                -
-                unanswered
-            </span>
-        </span>
-      </div>
-
-      <fieldset role="checkboxgroup" aria-label="Select the answer that matches">
-
-          <label for="input_i4x-AndyA-ABT101-problem-b40ecbe4ed1b4280ae93e2a158edae6f_2_1_choice_0">
-              <input type="checkbox" name="input_i4x-AndyA-ABT101-problem-b40ecbe4ed1b4280ae93e2a158edae6f_2_1[]" id="input_i4x-AndyA-ABT101-problem-b40ecbe4ed1b4280ae93e2a158edae6f_2_1_choice_0" aria-role="radio" aria-describedby="answer_i4x-AndyA-ABT101-problem-b40ecbe4ed1b4280ae93e2a158edae6f_2_1" value="choice_0" aria-multiselectable="true"> correct
-
-          </label>
-          <label for="input_i4x-AndyA-ABT101-problem-b40ecbe4ed1b4280ae93e2a158edae6f_2_1_choice_1">
-              <input type="checkbox" name="input_i4x-AndyA-ABT101-problem-b40ecbe4ed1b4280ae93e2a158edae6f_2_1[]" id="input_i4x-AndyA-ABT101-problem-b40ecbe4ed1b4280ae93e2a158edae6f_2_1_choice_1" aria-role="radio" aria-describedby="answer_i4x-AndyA-ABT101-problem-b40ecbe4ed1b4280ae93e2a158edae6f_2_1" value="choice_1" aria-multiselectable="true"> incorrect
-
-          </label>
-          <label for="input_i4x-AndyA-ABT101-problem-b40ecbe4ed1b4280ae93e2a158edae6f_2_1_choice_2">
-              <input type="checkbox" name="input_i4x-AndyA-ABT101-problem-b40ecbe4ed1b4280ae93e2a158edae6f_2_1[]" id="input_i4x-AndyA-ABT101-problem-b40ecbe4ed1b4280ae93e2a158edae6f_2_1_choice_2" aria-role="radio" aria-describedby="answer_i4x-AndyA-ABT101-problem-b40ecbe4ed1b4280ae93e2a158edae6f_2_1" value="choice_2" aria-multiselectable="true"> correct
-
-          </label>
-          <span id="answer_i4x-AndyA-ABT101-problem-b40ecbe4ed1b4280ae93e2a158edae6f_2_1"></span>
-      </fieldset>
-
-  </form></span>
-                                            </div>
-
-                                            <div class="action">
-                                                <input type="hidden" name="problem_id" value="Checkboxes">
-
-                                                <input class="check Check" type="button" value="Check">
+                                                    <header class="xblock-header">
+                                                        <div class="header-actions">
+                                                            <ul class="actions-list">
+                                                                <li class="action-item action-edit"><a href="#" class="edit-button action-button"></a></li>
+                                                                <li class="action-item action-duplicate"><a href="#" class="duplicate-button action-button"></a></li>
+                                                                <li class="action-item action-delete"><a href="#" class="delete-button action-button"></a></li>
+                                                            </ul>
+                                                        </div>
+                                                    </header>
+                                                    <article class="xblock-render"></article>
+                                                </section>
                                             </div>
                                         </div>
                                     </div>
+                                </article>
+                            </section>
 
-                                </div>
+                            <section class="wrapper-xblock level-nesting" data-locator="locator-group-B">
+                                <header class="xblock-header"></header>
 
-                            </article>
-                        </section>
+                                <article class="xblock-render">
+                                    <div class="xblock" data-block-type="vertical">
+                                        <div class="vert-mod">
+                                            <div class="vert vert-0">
 
+                                                <section class="wrapper-xblock level-element" data-locator="locator-component-B1">
+
+                                                    <header class="xblock-header">
+                                                        <div class="header-actions">
+                                                            <ul class="actions-list">
+                                                                <li class="action-item action-edit"><a href="#" class="edit-button action-button"></a></li>
+                                                                <li class="action-item action-duplicate"><a href="#" class="duplicate-button action-button"></a></li>
+                                                                <li class="action-item action-delete"><a href="#" class="delete-button action-button"></a></li>
+                                                            </ul>
+                                                        </div>
+                                                    </header>
+                                                    <article class="xblock-render"></article>
+                                                </section>
+
+                                                <section class="wrapper-xblock level-element" data-locator="locator-component-B2">
+
+                                                    <header class="xblock-header">
+                                                        <div class="header-actions">
+                                                            <ul class="actions-list">
+                                                                <li class="action-item action-edit"><a href="#" class="edit-button action-button"></a></li>
+                                                                <li class="action-item action-duplicate"><a href="#" class="duplicate-button action-button"></a></li>
+                                                                <li class="action-item action-delete"><a href="#" class="delete-button action-button"></a></li>
+                                                            </ul>
+                                                        </div>
+                                                    </header>
+                                                    <article class="xblock-render"></article>
+                                                </section>
+
+                                                <section class="wrapper-xblock level-element" data-locator="locator-component-B3">
+
+                                                    <header class="xblock-header">
+                                                        <div class="header-actions">
+                                                            <ul class="actions-list">
+                                                                <li class="action-item action-edit"><a href="#" class="edit-button action-button"></a></li>
+                                                                <li class="action-item action-duplicate"><a href="#" class="duplicate-button action-button"></a></li>
+                                                                <li class="action-item action-delete"><a href="#" class="delete-button action-button"></a></li>
+                                                            </ul>
+                                                        </div>
+                                                    </header>
+                                                    <article class="xblock-render"></article>
+                                                </section>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </article>
+                            </section>
+                        </div>
                     </div>
                 </div>
-
             </div>
-
-        </article>
-    </section>
-
-</div>
-</div>
-
-</div>
-
+        </div>
+    </div>
 </article>
-</section>
\ No newline at end of file
diff --git a/cms/templates/unit.html b/cms/templates/unit.html
index 4602b28e73..bc92ffced4 100644
--- a/cms/templates/unit.html
+++ b/cms/templates/unit.html
@@ -60,8 +60,8 @@ require(["domReady!", "jquery", "js/models/module_info", "coffee/src/views/unit"
         <article class="unit-body window">
         <p class="unit-name-input"><label for="unit-display-name-input">${_("Display Name:")}</label><input type="text" value="${unit.display_name_with_default | h}" id="unit-display-name-input" class="unit-display-name-input" /></p>
           <ol class="components">
-            % for (locator, xblock) in zip(locators, xblocks):
-            <li class="component" data-locator="${locator}" data-display-name="${xblock.display_name_with_default |h}" data-category="${xblock.category}"/>
+            % for locator in locators:
+            <li class="component" data-locator="${locator}"/>
             % endfor
             <li class="new-component-item adding">
               <div class="new-component">