From 1b011af7e2eddba700aca4e629660613cd956ea6 Mon Sep 17 00:00:00 2001
From: muhammad-ammar <mammar@gmail.com>
Date: Wed, 4 Jan 2017 11:02:18 +0500
Subject: [PATCH] move dialog

TNL-6047
---
 .../component_settings_editor_helpers.py      |  4 +-
 cms/djangoapps/contentstore/features/pages.py |  2 +-
 .../contentstore/views/tests/utils.py         |  7 +-
 cms/static/cms/js/spec/main.js                |  1 +
 cms/static/js/spec/views/container_spec.js    |  4 +-
 .../js/spec/views/modals/move_xblock_spec.js  | 36 ++++++++++
 .../js/spec/views/pages/container_spec.js     | 22 ++++++-
 cms/static/js/views/modals/base_modal.js      | 28 +++++---
 .../js/views/modals/course_outline_modals.js  |  2 +-
 cms/static/js/views/modals/edit_xblock.js     | 34 ++--------
 .../js/views/modals/move_xblock_modal.js      | 53 +++++++++++++++
 cms/static/js/views/pages/container.js        | 20 ++++--
 cms/static/js/views/utils/xblock_utils.js     | 47 +++++++++----
 cms/static/sass/elements/_controls.scss       | 12 +++-
 cms/templates/component.html                  | 18 +++--
 .../js/mock/mock-container-xblock.underscore  | 66 ++++++++++++-------
 cms/templates/js/move-xblock-modal.underscore |  4 ++
 cms/templates/studio_xblock_wrapper.html      | 25 ++++---
 .../common/js/components/views/feedback.js    |  9 +--
 .../test/acceptance/pages/studio/container.py |  8 +--
 20 files changed, 290 insertions(+), 112 deletions(-)
 create mode 100644 cms/static/js/spec/views/modals/move_xblock_spec.js
 create mode 100644 cms/static/js/views/modals/move_xblock_modal.js
 create mode 100644 cms/templates/js/move-xblock-modal.underscore

diff --git a/cms/djangoapps/contentstore/features/component_settings_editor_helpers.py b/cms/djangoapps/contentstore/features/component_settings_editor_helpers.py
index 6f572e9ae6..0a342f08e8 100644
--- a/cms/djangoapps/contentstore/features/component_settings_editor_helpers.py
+++ b/cms/djangoapps/contentstore/features/component_settings_editor_helpers.py
@@ -129,8 +129,8 @@ def edit_component(index=0):
     # Verify that the "loading" indication has been hidden.
     world.wait_for_loading()
     # Verify that the "edit" button is present.
-    world.wait_for(lambda _driver: world.css_visible('a.edit-button'))
-    world.css_click('a.edit-button', index)
+    world.wait_for(lambda _driver: world.css_visible('.edit-button'))
+    world.css_click('.edit-button', index)
     world.wait_for_ajax_complete()
 
 
diff --git a/cms/djangoapps/contentstore/features/pages.py b/cms/djangoapps/contentstore/features/pages.py
index bb3e113b64..f16aec9d60 100644
--- a/cms/djangoapps/contentstore/features/pages.py
+++ b/cms/djangoapps/contentstore/features/pages.py
@@ -38,7 +38,7 @@ def not_see_any_static_pages(step):
 
 @step(u'I "(edit|delete)" the static page$')
 def click_edit_or_delete(step, edit_or_delete):
-    button_css = 'ul.component-actions a.%s-button' % edit_or_delete
+    button_css = 'ul.component-actions .%s-button' % edit_or_delete
     world.css_click(button_css)
 
 
diff --git a/cms/djangoapps/contentstore/views/tests/utils.py b/cms/djangoapps/contentstore/views/tests/utils.py
index 094a789214..00358d005f 100644
--- a/cms/djangoapps/contentstore/views/tests/utils.py
+++ b/cms/djangoapps/contentstore/views/tests/utils.py
@@ -54,9 +54,10 @@ class StudioPageTestCase(CourseTestCase):
 
         # Verify that there are no action buttons for public blocks
         expected_button_html = [
-            '<a href="#" class="edit-button action-button">',
-            '<a href="#" data-tooltip="Delete" class="delete-button action-button">',
-            '<a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">'
+            '<button class="btn-default edit-button action-button">',
+            '<button data-tooltip="Delete" class="btn-default delete-button action-button">',
+            '<button data-tooltip="Duplicate" class="btn-default duplicate-button action-button">',
+            '<button data-tooltip="Move" class="btn-default move-button action-button">'
         ]
         for button_html in expected_button_html:
             self.assertIn(button_html, html)
diff --git a/cms/static/cms/js/spec/main.js b/cms/static/cms/js/spec/main.js
index 45efca4dc2..a08508349c 100644
--- a/cms/static/cms/js/spec/main.js
+++ b/cms/static/cms/js/spec/main.js
@@ -282,6 +282,7 @@
         'js/spec/views/pages/library_users_spec',
         'js/spec/views/modals/base_modal_spec',
         'js/spec/views/modals/edit_xblock_spec',
+        'js/spec/views/modals/move_xblock_spec',
         'js/spec/views/modals/validation_error_modal_spec',
         'js/spec/views/settings/main_spec',
         'js/spec/factories/xblock_validation_spec',
diff --git a/cms/static/js/spec/views/container_spec.js b/cms/static/js/spec/views/container_spec.js
index 55161dd04f..cff5be452f 100644
--- a/cms/static/js/spec/views/container_spec.js
+++ b/cms/static/js/spec/views/container_spec.js
@@ -69,7 +69,7 @@ define(['jquery', 'edx-ui-toolkit/js/utils/spec-helpers/ajax-helpers', 'js/spec_
 
                     // Give the leaf elements some height to mimic actual components. Otherwise
                     // drag and drop fails as the elements on bunched on top of each other.
-                    $('.level-element').css('height', 200);
+                    $('.level-element').css('height', 230);
 
                     return requests;
                 };
@@ -92,7 +92,7 @@ define(['jquery', 'edx-ui-toolkit/js/utils/spec-helpers/ajax-helpers', 'js/spec_
                     var targetElement = getComponent(targetLocator),
                         targetTop = targetElement.offset().top + 1,
                         handle = getDragHandle(sourceLocator),
-                        handleY = handle.offset().top + (handle.height() / 2),
+                        handleY = handle.offset().top,
                         dy = targetTop - handleY;
                     handle.simulate('drag', {dy: dy});
                 };
diff --git a/cms/static/js/spec/views/modals/move_xblock_spec.js b/cms/static/js/spec/views/modals/move_xblock_spec.js
new file mode 100644
index 0000000000..61cb9505bb
--- /dev/null
+++ b/cms/static/js/spec/views/modals/move_xblock_spec.js
@@ -0,0 +1,36 @@
+define(['jquery', 'underscore', 'edx-ui-toolkit/js/utils/spec-helpers/ajax-helpers',
+        'common/js/spec_helpers/template_helpers', 'js/views/modals/move_xblock_modal', 'js/models/xblock_info'],
+    function($, _, AjaxHelpers, TemplateHelpers, MoveXBlockModal, XBlockInfo) {
+        'use strict';
+        describe('MoveXBlockModal', function() {
+            var modal,
+                showModal,
+                DISPLAY_NAME = 'HTML 101';
+
+            showModal = function() {
+                modal = new MoveXBlockModal({
+                    sourceXBlockInfo: new XBlockInfo({
+                        id: 'testCourse/branch/draft/block/verticalFFF',
+                        display_name: DISPLAY_NAME,
+                        category: 'html'
+                    }),
+                    XBlockUrlRoot: '/xblock'
+                });
+                modal.show();
+            };
+
+            beforeEach(function() {
+                TemplateHelpers.installTemplates([
+                    'basic-modal',
+                    'modal-button',
+                    'move-xblock-modal'
+                ]);
+                showModal();
+            });
+
+            it('rendered as expected', function() {
+                expect(modal.$el.find('.modal-header .title').text()).toEqual('Move: ' + DISPLAY_NAME);
+                expect(modal.$el.find('.modal-actions .action-primary.action-move').text()).toEqual('Move');
+            });
+        });
+    });
diff --git a/cms/static/js/spec/views/pages/container_spec.js b/cms/static/js/spec/views/pages/container_spec.js
index 1e378ab7c6..717e5318f7 100644
--- a/cms/static/js/spec/views/pages/container_spec.js
+++ b/cms/static/js/spec/views/pages/container_spec.js
@@ -20,7 +20,8 @@ define(['jquery', 'underscore', 'underscore.string', 'edx-ui-toolkit/js/utils/sp
                     mockXBlockVisibilityEditorHtml = readFixtures('mock/mock-xblock-visibility-editor.underscore'),
                     PageClass = globalPageOptions.page,
                     pagedSpecificTests = globalPageOptions.pagedSpecificTests,
-                    hasVisibilityEditor = globalPageOptions.hasVisibilityEditor;
+                    hasVisibilityEditor = globalPageOptions.hasVisibilityEditor,
+                    hasMoveModal = globalPageOptions.hasMoveModal;
 
                 beforeEach(function() {
                     var newDisplayName = 'New Display Name';
@@ -250,6 +251,19 @@ define(['jquery', 'underscore', 'underscore.string', 'edx-ui-toolkit/js/utils/sp
                             expect(visibilityButtons.length).toBe(0);
                         }
                     });
+
+                    it('can show a move modal for a child xblock', function() {
+                        var moveButtons;
+                        renderContainerPage(this, mockContainerXBlockHtml);
+                        moveButtons = containerPage.$('.wrapper-xblock .move-button');
+                        if (hasMoveModal) {
+                            expect(moveButtons.length).toBe(6);
+                            moveButtons[0].click();
+                            expect(EditHelpers.isShowingModal()).toBeTruthy();
+                        } else {
+                            expect(moveButtons.length).toBe(0);
+                        }
+                    });
                 });
 
                 describe('Editing an xmodule', function() {
@@ -798,7 +812,8 @@ define(['jquery', 'underscore', 'underscore.string', 'edx-ui-toolkit/js/utils/sp
                 initial: 'mock/mock-container-xblock.underscore',
                 addResponse: 'mock/mock-xblock.underscore',
                 hasVisibilityEditor: true,
-                pagedSpecificTests: false
+                pagedSpecificTests: false,
+                hasMoveModal: true
             }
         );
 
@@ -811,7 +826,8 @@ define(['jquery', 'underscore', 'underscore.string', 'edx-ui-toolkit/js/utils/sp
                 initial: 'mock/mock-container-paged-xblock.underscore',
                 addResponse: 'mock/mock-xblock-paged.underscore',
                 hasVisibilityEditor: false,
-                pagedSpecificTests: true
+                pagedSpecificTests: true,
+                hasMoveModal: false
             }
         );
     });
diff --git a/cms/static/js/views/modals/base_modal.js b/cms/static/js/views/modals/base_modal.js
index 33dd66fd50..bd6f2981ff 100644
--- a/cms/static/js/views/modals/base_modal.js
+++ b/cms/static/js/views/modals/base_modal.js
@@ -16,8 +16,10 @@
  *     size of the modal.
  *   viewSpecificClasses: A string of CSS classes to be attached to
  *     the modal window.
- *   addSaveButton: A boolean indicating whether to include a save
+ *   addPrimaryActionButton: A boolean indicating whether to include a primary action
  *     button on the modal.
+ *   primaryActionButtonType: A string to be used as type for primary action button.
+ *   primaryActionButtonTitle: A string to be used as title for primary action button.
  */
 define(['jquery', 'underscore', 'gettext', 'js/views/baseview'],
     function($, _, gettext, BaseView) {
@@ -36,7 +38,10 @@ define(['jquery', 'underscore', 'gettext', 'js/views/baseview'],
                 title: '',
                 modalWindowClass: '.modal-window',
                 // A list of class names, separated by space.
-                viewSpecificClasses: ''
+                viewSpecificClasses: '',
+                addPrimaryActionButton: false,
+                primaryActionButtonType: 'save',
+                primaryActionButtonTitle: gettext('Save')
             }),
 
             initialize: function() {
@@ -84,14 +89,17 @@ define(['jquery', 'underscore', 'gettext', 'js/views/baseview'],
                 return '';
             },
 
-            show: function() {
+            show: function(focusModal) {
+                var focusModalWindow = focusModal === undefined;
                 this.render();
                 this.resize();
                 $(window).resize(_.bind(this.resize, this));
 
-                // after showing and resizing, send focus
-                var modal = this.$el.find(this.options.modalWindowClass);
-                modal.focus();
+                // child may want to have its own focus management
+                if (focusModalWindow) {
+                    // after showing and resizing, send focus
+                    this.$el.find(this.options.modalWindowClass).focus();
+                }
             },
 
             hide: function() {
@@ -112,8 +120,12 @@ define(['jquery', 'underscore', 'gettext', 'js/views/baseview'],
              * Adds the action buttons to the modal.
              */
             addActionButtons: function() {
-                if (this.options.addSaveButton) {
-                    this.addActionButton('save', gettext('Save'), true);
+                if (this.options.addPrimaryActionButton) {
+                    this.addActionButton(
+                        this.options.primaryActionButtonType,
+                        this.options.primaryActionButtonTitle,
+                        true
+                    );
                 }
                 this.addActionButton('cancel', gettext('Cancel'));
             },
diff --git a/cms/static/js/views/modals/course_outline_modals.js b/cms/static/js/views/modals/course_outline_modals.js
index 8bfe529220..2c48c7e469 100644
--- a/cms/static/js/views/modals/course_outline_modals.js
+++ b/cms/static/js/views/modals/course_outline_modals.js
@@ -25,7 +25,7 @@ define(['jquery', 'backbone', 'underscore', 'gettext', 'js/views/baseview',
         options: $.extend({}, BaseModal.prototype.options, {
             modalName: 'course-outline',
             modalType: 'edit-settings',
-            addSaveButton: true,
+            addPrimaryActionButton: true,
             modalSize: 'med',
             viewSpecificClasses: 'confirm',
             editors: []
diff --git a/cms/static/js/views/modals/edit_xblock.js b/cms/static/js/views/modals/edit_xblock.js
index 5ffd036504..2576b8dbbd 100644
--- a/cms/static/js/views/modals/edit_xblock.js
+++ b/cms/static/js/views/modals/edit_xblock.js
@@ -4,9 +4,9 @@
  * and upon save an optional refresh function can be invoked to update the display.
  */
 define(['jquery', 'underscore', 'gettext', 'js/views/modals/base_modal', 'common/js/components/utils/view_utils',
-    'js/models/xblock_info', 'js/views/xblock_editor'],
-    function($, _, gettext, BaseModal, ViewUtils, XBlockInfo, XBlockEditorView) {
-        'strict mode';
+    'js/views/utils/xblock_utils', 'js/views/xblock_editor'],
+    function($, _, gettext, BaseModal, ViewUtils, XBlockViewUtils, XBlockEditorView) {
+        'use strict';
 
         var EditXBlockModal = BaseModal.extend({
             events: _.extend({}, BaseModal.prototype.events, {
@@ -16,11 +16,11 @@ define(['jquery', 'underscore', 'gettext', 'js/views/modals/base_modal', 'common
 
             options: $.extend({}, BaseModal.prototype.options, {
                 modalName: 'edit-xblock',
-                addSaveButton: true,
                 view: 'studio_view',
                 viewSpecificClasses: 'modal-editor confirm',
                 // Translators: "title" is the name of the current component being edited.
-                titleFormat: gettext('Editing: %(title)s')
+                titleFormat: gettext('Editing: %(title)s'),
+                addPrimaryActionButton: true
             }),
 
             initialize: function() {
@@ -37,7 +37,7 @@ define(['jquery', 'underscore', 'gettext', 'js/views/modals/base_modal', 'common
              */
             edit: function(xblockElement, rootXBlockInfo, options) {
                 this.xblockElement = xblockElement;
-                this.xblockInfo = this.findXBlockInfo(xblockElement, rootXBlockInfo);
+                this.xblockInfo = XBlockViewUtils.findXBlockInfo(xblockElement, rootXBlockInfo);
                 this.options.modalType = this.xblockInfo.get('category');
                 this.editOptions = options;
                 this.render();
@@ -183,28 +183,6 @@ define(['jquery', 'underscore', 'gettext', 'js/views/modals/base_modal', 'common
                 this.editorView.notifyRuntime('modal-hidden');
             },
 
-            findXBlockInfo: function(xblockWrapperElement, defaultXBlockInfo) {
-                var xblockInfo = defaultXBlockInfo,
-                    xblockElement,
-                    displayName;
-                if (xblockWrapperElement.length > 0) {
-                    xblockElement = xblockWrapperElement.find('.xblock');
-                    displayName = xblockWrapperElement.find('.xblock-header .header-details .xblock-display-name').text().trim();
-                    // If not found, try looking for the old unit page style rendering.
-                    // Only used now by static pages.
-                    if (!displayName) {
-                        displayName = this.xblockElement.find('.component-header').text().trim();
-                    }
-                    xblockInfo = new XBlockInfo({
-                        id: xblockWrapperElement.data('locator'),
-                        courseKey: xblockWrapperElement.data('course-key'),
-                        category: xblockElement.data('block-type'),
-                        display_name: displayName
-                    });
-                }
-                return xblockInfo;
-            },
-
             addModeButton: function(mode, displayName) {
                 var buttonPanel = this.$('.editor-modes');
                 buttonPanel.append(this.editorModeButtonTemplate({
diff --git a/cms/static/js/views/modals/move_xblock_modal.js b/cms/static/js/views/modals/move_xblock_modal.js
new file mode 100644
index 0000000000..92f1363a36
--- /dev/null
+++ b/cms/static/js/views/modals/move_xblock_modal.js
@@ -0,0 +1,53 @@
+/**
+ * The MoveXblockModal to move XBlocks in course.
+ */
+define([
+    'jquery', 'backbone', 'underscore', 'gettext',
+    'js/views/baseview', 'js/views/modals/base_modal',
+    'common/js/components/views/feedback',
+    'edx-ui-toolkit/js/utils/string-utils',
+    'text!templates/move-xblock-modal.underscore'
+],
+function($, Backbone, _, gettext, BaseView, BaseModal, Feedback, StringUtils, MoveXblockModalTemplate) {
+    'use strict';
+
+    var MoveXblockModal = BaseModal.extend({
+        options: $.extend({}, BaseModal.prototype.options, {
+            modalName: 'move-xblock',
+            modalSize: 'med',
+            addPrimaryActionButton: true,
+            primaryActionButtonType: 'move',
+            primaryActionButtonTitle: gettext('Move')
+        }),
+
+        initialize: function() {
+            BaseModal.prototype.initialize.call(this);
+            this.sourceXBlockInfo = this.options.sourceXBlockInfo;
+            this.XBlockUrlRoot = this.options.sourceXBlockInfo;
+            this.options.title = this.getTitle();
+        },
+
+        getTitle: function() {
+            return StringUtils.interpolate(
+                gettext('Move: {display_name}'),
+                {display_name: this.sourceXBlockInfo.get('display_name')}
+            );
+        },
+
+        getContentHtml: function() {
+            return _.template(MoveXblockModalTemplate)({});
+        },
+
+        show: function() {
+            BaseModal.prototype.show.apply(this, [false]);
+            Feedback.prototype.inFocus.apply(this, [this.options.modalWindowClass]);
+        },
+
+        hide: function() {
+            BaseModal.prototype.hide.apply(this);
+            Feedback.prototype.outFocus.apply(this);
+        }
+    });
+
+    return MoveXblockModal;
+});
diff --git a/cms/static/js/views/pages/container.js b/cms/static/js/views/pages/container.js
index 73ee99d834..1a476bcde4 100644
--- a/cms/static/js/views/pages/container.js
+++ b/cms/static/js/views/pages/container.js
@@ -4,11 +4,11 @@
  */
 define(['jquery', 'underscore', 'gettext', 'js/views/pages/base_page', 'common/js/components/utils/view_utils',
         'js/views/container', 'js/views/xblock', 'js/views/components/add_xblock', 'js/views/modals/edit_xblock',
-        'js/models/xblock_info', 'js/views/xblock_string_field_editor', 'js/views/pages/container_subviews',
-        'js/views/unit_outline', 'js/views/utils/xblock_utils'],
+        'js/views/modals/move_xblock_modal', 'js/models/xblock_info', 'js/views/xblock_string_field_editor',
+        'js/views/pages/container_subviews', 'js/views/unit_outline', 'js/views/utils/xblock_utils'],
     function($, _, gettext, BasePage, ViewUtils, ContainerView, XBlockView, AddXBlockComponent,
-              EditXBlockModal, XBlockInfo, XBlockStringFieldEditor, ContainerSubviews, UnitOutlineView,
-              XBlockUtils) {
+              EditXBlockModal, MoveXBlockModal, XBlockInfo, XBlockStringFieldEditor, ContainerSubviews,
+              UnitOutlineView, XBlockUtils) {
         'use strict';
         var XBlockContainerPage = BasePage.extend({
             // takes XBlockInfo as a model
@@ -17,6 +17,7 @@ define(['jquery', 'underscore', 'gettext', 'js/views/pages/base_page', 'common/j
                 'click .edit-button': 'editXBlock',
                 'click .visibility-button': 'editVisibilitySettings',
                 'click .duplicate-button': 'duplicateXBlock',
+                'click .move-button': 'showMoveXBlockModal',
                 'click .delete-button': 'deleteXBlock',
                 'click .new-component-button': 'scrollToNewComponentButtons'
             },
@@ -191,6 +192,17 @@ define(['jquery', 'underscore', 'gettext', 'js/views/pages/base_page', 'common/j
                 this.duplicateComponent(this.findXBlockElement(event.target));
             },
 
+            showMoveXBlockModal: function(event) {
+                var xblockElement = this.findXBlockElement(event.target),
+                    modal = new MoveXBlockModal({
+                        sourceXBlockInfo: XBlockUtils.findXBlockInfo(xblockElement, this.model),
+                        XBlockUrlRoot: this.getURLRoot()
+                    });
+
+                event.preventDefault();
+                modal.show();
+            },
+
             deleteXBlock: function(event) {
                 event.preventDefault();
                 this.deleteComponent(this.findXBlockElement(event.target));
diff --git a/cms/static/js/views/utils/xblock_utils.js b/cms/static/js/views/utils/xblock_utils.js
index 38233f8cef..be1f1faadd 100644
--- a/cms/static/js/views/utils/xblock_utils.js
+++ b/cms/static/js/views/utils/xblock_utils.js
@@ -2,11 +2,11 @@
  * Provides utilities for views to work with xblocks.
  */
 define(['jquery', 'underscore', 'gettext', 'common/js/components/utils/view_utils', 'js/utils/module',
-        'edx-ui-toolkit/js/utils/string-utils'],
-    function($, _, gettext, ViewUtils, ModuleUtils, StringUtils) {
+        'js/models/xblock_info', 'edx-ui-toolkit/js/utils/string-utils'],
+    function($, _, gettext, ViewUtils, ModuleUtils, XBlockInfo, StringUtils) {
         'use strict';
         var addXBlock, duplicateXBlock, deleteXBlock, createUpdateRequestData, updateXBlockField, VisibilityState,
-            getXBlockVisibilityClass, getXBlockListTypeClass, updateXBlockFields, getXBlockType;
+            getXBlockVisibilityClass, getXBlockListTypeClass, updateXBlockFields, getXBlockType, findXBlockInfo;
 
         /**
          * Represents the possible visibility states for an xblock:
@@ -240,15 +240,40 @@ define(['jquery', 'underscore', 'gettext', 'common/js/components/utils/view_util
             return xblockType;
         };
 
+        findXBlockInfo = function(xblockWrapperElement, defaultXBlockInfo) {
+            var xblockInfo = defaultXBlockInfo,
+                xblockElement,
+                displayName;
+            if (xblockWrapperElement.length > 0) {
+                xblockElement = xblockWrapperElement.find('.xblock');
+                displayName = xblockWrapperElement.find(
+                    '.xblock-header .header-details .xblock-display-name'
+                ).text().trim();
+                // If not found, try looking for the old unit page style rendering.
+                // Only used now by static pages.
+                if (!displayName) {
+                    displayName = xblockElement.find('.component-header').text().trim();
+                }
+                xblockInfo = new XBlockInfo({
+                    id: xblockWrapperElement.data('locator'),
+                    courseKey: xblockWrapperElement.data('course-key'),
+                    category: xblockElement.data('block-type'),
+                    display_name: displayName
+                });
+            }
+            return xblockInfo;
+        };
+
         return {
-            'VisibilityState': VisibilityState,
-            'addXBlock': addXBlock,
+            VisibilityState: VisibilityState,
+            addXBlock: addXBlock,
             duplicateXBlock: duplicateXBlock,
-            'deleteXBlock': deleteXBlock,
-            'updateXBlockField': updateXBlockField,
-            'getXBlockVisibilityClass': getXBlockVisibilityClass,
-            'getXBlockListTypeClass': getXBlockListTypeClass,
-            'updateXBlockFields': updateXBlockFields,
-            'getXBlockType': getXBlockType
+            deleteXBlock: deleteXBlock,
+            updateXBlockField: updateXBlockField,
+            getXBlockVisibilityClass: getXBlockVisibilityClass,
+            getXBlockListTypeClass: getXBlockListTypeClass,
+            updateXBlockFields: updateXBlockFields,
+            getXBlockType: getXBlockType,
+            findXBlockInfo: findXBlockInfo
         };
     });
diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss
index 4b18144b8a..e3afc0e16d 100644
--- a/cms/static/sass/elements/_controls.scss
+++ b/cms/static/sass/elements/_controls.scss
@@ -205,7 +205,7 @@
     text-shadow: 0 1px 0 $btn-lms-shadow;
     background-clip: padding-box;
     font-size: 0.8125em;
-    
+
     &:focus,
     &:hover {
         box-shadow: inset 0 1px 0 0 $btn-lms-shadow-hover;
@@ -214,7 +214,7 @@
         background-image: -webkit-linear-gradient($btn-lms-background-hover,$btn-lms-gradient-hover);
         background-image: linear-gradient($btn-lms-background-hover,$btn-lms-gradient-hover);
     }
-    
+
     &:active {
         border: 1px solid $btn-lms-border;
         box-shadow: inset 0 0 8px 4px $btn-lms-shadow-active,inset 0 0 8px 4px $btn-lms-shadow-active;
@@ -336,6 +336,14 @@
     &.toggle-action {
       // TODO: generalize and move checkbox styling in from static-pages and assets sass
     }
+
+    .btn-default.delete-button {
+      border: none;
+    }
+
+    .btn-default.edit-button {
+      font-weight: 300;
+    }
   }
 }
 
diff --git a/cms/templates/component.html b/cms/templates/component.html
index b03418af11..900b9d5fae 100644
--- a/cms/templates/component.html
+++ b/cms/templates/component.html
@@ -8,22 +8,28 @@
     </div>
     <ul class="component-actions">
       <li class="action-item action-edit">
-        <a href="#" class="edit-button action-button">
+        <button class="btn-default edit-button action-button">
             <span class="icon fa fa-pencil" aria-hidden="true"></span>
             <span class="action-button-text">${_("Edit")}</span>
-        </a>
+        </button>
       </li>
       <li class="action-item action-duplicate">
-        <a href="#" data-tooltip="${_("Duplicate")}" class="duplicate-button action-button">
+        <button data-tooltip="${_("Duplicate")}" class="btn-default duplicate-button action-button">
             <span class="icon fa fa-copy" aria-hidden="true"></span>
             <span class="sr">${_("Duplicate this component")}</span>
-        </a>
+        </button>
+      </li>
+      <li class="action-item action-move">
+          <button data-tooltip="${_("Move")}" class="btn-default move-button action-button">
+            <span class="icon fa fa-folder-o" aria-hidden="true"></span>
+            <span class="sr">${_("Move")}</span>
+          </button>
       </li>
       <li class="action-item action-delete">
-        <a href="#" data-tooltip="${_("Delete")}" class="delete-button action-button">
+        <button data-tooltip="${_("Delete")}" class="btn-default delete-button action-button">
             <span class="icon fa fa-trash-o" aria-hidden="true"></span>
             <span class="sr">${_("Delete this component")}</span>
-        </a>
+        </button>
       </li>
     </ul>
 </div>
diff --git a/cms/templates/js/mock/mock-container-xblock.underscore b/cms/templates/js/mock/mock-container-xblock.underscore
index 606f1ff037..e66ca58701 100644
--- a/cms/templates/js/mock/mock-container-xblock.underscore
+++ b/cms/templates/js/mock/mock-container-xblock.underscore
@@ -44,16 +44,19 @@
                                                 <div class="header-actions">
                                                     <ul class="actions-list">
                                                         <li class="action-item action-edit">
-                                                            <a href="#" class="edit-button action-button"></a>
+                                                            <button class="edit-button action-button"></button>
                                                         </li>
                                                         <li class="action-item action-visibility">
-                                                            <a href="#" class="visibility-button action-button"></a>
+                                                            <button class="visibility-button action-button"></button>
                                                         </li>
                                                         <li class="action-item action-duplicate">
-                                                            <a href="#" class="duplicate-button action-button"></a>
+                                                            <button class="duplicate-button action-button"></button>
+                                                        </li>
+                                                        <li class="action-item action-move">
+                                                            <button data-tooltip="Move" class="move-button action-button"></button>
                                                         </li>
                                                         <li class="action-item action-delete">
-                                                            <a href="#" class="delete-button action-button"></a>
+                                                            <button class="delete-button action-button"></button>
                                                         </li>
                                                         <li class="action-item action-drag">
                                                             <span data-tooltip="Drag to reorder" class="drag-handle action"></span>
@@ -72,16 +75,19 @@
                                                 <div class="xblock-header-primary">
                                                     <ul class="actions-list">
                                                         <li class="action-item action-edit">
-                                                            <a href="#" class="edit-button action-button"></a>
+                                                            <button class="edit-button action-button"></button>
                                                         </li>
                                                         <li class="action-item action-visibility">
-                                                            <a href="#" class="visibility-button action-button"></a>
+                                                            <button class="visibility-button action-button"></button>
                                                         </li>
                                                         <li class="action-item action-duplicate">
-                                                            <a href="#" class="duplicate-button action-button"></a>
+                                                            <button class="duplicate-button action-button"></button>
+                                                        </li>
+                                                        <li class="action-item action-move">
+                                                            <button data-tooltip="Move" class="move-button action-button"></button>
                                                         </li>
                                                         <li class="action-item action-delete">
-                                                            <a href="#" class="delete-button action-button"></a>
+                                                            <button class="delete-button action-button"></button>
                                                         </li>
                                                         <li class="action-item action-drag">
                                                             <span data-tooltip="Drag to reorder" class="drag-handle action"></span>
@@ -100,16 +106,19 @@
                                                 <div class="header-actions">
                                                     <ul class="actions-list">
                                                         <li class="action-item action-edit">
-                                                            <a href="#" class="edit-button action-button"></a>
+                                                            <button class="edit-button action-button"></button>
                                                         </li>
                                                         <li class="action-item action-visibility">
-                                                            <a href="#" class="visibility-button action-button"></a>
+                                                            <button class="visibility-button action-button"></button>
                                                         </li>
                                                         <li class="action-item action-duplicate">
-                                                            <a href="#" class="duplicate-button action-button"></a>
+                                                            <button class="duplicate-button action-button"></button>
+                                                        </li>
+                                                        <li class="action-item action-move">
+                                                            <button data-tooltip="Move" class="move-button action-button"></button>
                                                         </li>
                                                         <li class="action-item action-delete">
-                                                            <a href="#" class="delete-button action-button"></a>
+                                                            <button class="delete-button action-button"></button>
                                                         </li>
                                                         <li class="action-item action-drag">
                                                             <span data-tooltip="Drag to reorder" class="drag-handle action"></span>
@@ -158,16 +167,19 @@
                                                 <div class="header-actions">
                                                     <ul class="actions-list">
                                                         <li class="action-item action-edit">
-                                                            <a href="#" class="edit-button action-button"></a>
+                                                            <button class="edit-button action-button"></button>
                                                         </li>
                                                         <li class="action-item action-visibility">
-                                                            <a href="#" class="visibility-button action-button"></a>
+                                                            <button class="visibility-button action-button"></button>
                                                         </li>
                                                         <li class="action-item action-duplicate">
-                                                            <a href="#" class="duplicate-button action-button"></a>
+                                                            <button class="duplicate-button action-button"></button>
+                                                        </li>
+                                                        <li class="action-item action-move">
+                                                            <button data-tooltip="Move" class="move-button action-button"></button>
                                                         </li>
                                                         <li class="action-item action-delete">
-                                                            <a href="#" class="delete-button action-button"></a>
+                                                            <button class="delete-button action-button"></button>
                                                         </li>
                                                         <li class="action-item action-drag">
                                                             <span data-tooltip="Drag to reorder" class="drag-handle action"></span>
@@ -186,16 +198,19 @@
                                                 <div class="header-actions">
                                                     <ul class="actions-list">
                                                         <li class="action-item action-edit">
-                                                            <a href="#" class="edit-button action-button"></a>
+                                                            <button class="edit-button action-button"></button>
                                                         </li>
                                                         <li class="action-item action-visibility">
-                                                            <a href="#" class="visibility-button action-button"></a>
+                                                            <button class="visibility-button action-button"></button>
                                                         </li>
                                                         <li class="action-item action-duplicate">
-                                                            <a href="#" class="duplicate-button action-button"></a>
+                                                            <button class="duplicate-button action-button"></button>
+                                                        </li>
+                                                        <li class="action-item action-move">
+                                                            <button data-tooltip="Move" class="move-button action-button"></button>
                                                         </li>
                                                         <li class="action-item action-delete">
-                                                            <a href="#" class="delete-button action-button"></a>
+                                                            <button class="delete-button action-button"></button>
                                                         </li>
                                                         <li class="action-item action-drag">
                                                             <span data-tooltip="Drag to reorder" class="drag-handle action"></span>
@@ -214,16 +229,19 @@
                                                 <div class="header-actions">
                                                     <ul class="actions-list">
                                                         <li class="action-item action-edit">
-                                                            <a href="#" class="edit-button action-button"></a>
+                                                            <button class="edit-button action-button"></button>
                                                         </li>
                                                         <li class="action-item action-visibility">
-                                                            <a href="#" class="visibility-button action-button"></a>
+                                                            <button class="visibility-button action-button"></button>
                                                         </li>
                                                         <li class="action-item action-duplicate">
-                                                            <a href="#" class="duplicate-button action-button"></a>
+                                                            <button class="duplicate-button action-button"></button>
+                                                        </li>
+                                                        <li class="action-item action-move">
+                                                            <button data-tooltip="Move" class="move-button action-button"></button>
                                                         </li>
                                                         <li class="action-item action-delete">
-                                                            <a href="#" class="delete-button action-button"></a>
+                                                            <button class="delete-button action-button"></button>
                                                         </li>
                                                         <li class="action-item action-drag">
                                                             <span data-tooltip="Drag to reorder" class="drag-handle action"></span>
diff --git a/cms/templates/js/move-xblock-modal.underscore b/cms/templates/js/move-xblock-modal.underscore
new file mode 100644
index 0000000000..468c1893ba
--- /dev/null
+++ b/cms/templates/js/move-xblock-modal.underscore
@@ -0,0 +1,4 @@
+<div class='breadcrumb-container'>
+</div>
+<div class='treeview-container'>
+</div>
diff --git a/cms/templates/studio_xblock_wrapper.html b/cms/templates/studio_xblock_wrapper.html
index 5a0cdf47da..25842d1d07 100644
--- a/cms/templates/studio_xblock_wrapper.html
+++ b/cms/templates/studio_xblock_wrapper.html
@@ -69,35 +69,42 @@ messages = xblock.validate().to_json()
                     % if can_edit:
                         % if not show_inline:
                             <li class="action-item action-edit">
-                                <a href="#" class="edit-button action-button">
+                                <button class="btn-default edit-button action-button">
                                     <span class="icon fa fa-pencil" aria-hidden="true"></span>
                                     <span class="action-button-text">${_("Edit")}</span>
-                                </a>
+                                </button>
                             </li>
                             % if can_edit_visibility:
                                 <li class="action-item action-visibility">
-                                    <a href="#" data-tooltip="${_("Visibility Settings")}" class="visibility-button action-button">
+                                    <button data-tooltip="${_("Visibility Settings")}" class="btn-default visibility-button action-button">
                                         <span class="icon fa fa-eye" aria-hidden="true"></span>
                                         <span class="sr">${_("Visibility")}</span>
-                                    </a>
+                                    </button>
                                 </li>
                             % endif
                             % if can_add:
                                 <li class="action-item action-duplicate">
-                                    <a href="#" data-tooltip="${_("Duplicate")}" class="duplicate-button action-button">
+                                    <button data-tooltip="${_("Duplicate")}" class="btn-default duplicate-button action-button">
                                     <span class="icon fa fa-copy" aria-hidden="true"></span>
                                     <span class="sr">${_("Duplicate")}</span>
-                                    </a>
+                                    </button>
+                                </li>
+
+                                <li class="action-item action-move">
+                                    <button data-tooltip="${_("Move")}" class="btn-default move-button action-button">
+                                    <span class="icon fa fa-folder-o" aria-hidden="true"></span>
+                                    <span class="sr">${_("Move")}</span>
+                                    </button>
                                 </li>
                             % endif
                         % endif
                         % if can_add:
                             <!-- If we can add, we can delete. -->
                             <li class="action-item action-delete">
-                                <a href="#" data-tooltip="${_("Delete")}" class="delete-button action-button">
+                                <button data-tooltip="${_("Delete")}" class="btn-default delete-button action-button">
                                 <span class="icon fa fa-trash-o" aria-hidden="true"></span>
                                 <span class="sr">${_("Delete")}</span>
-                                </a>
+                                </button>
                             </li>
                         % endif
                         % if is_reorderable:
@@ -149,7 +156,7 @@ messages = xblock.validate().to_json()
         ${content}
         </div>
     % endif
- % endif   
+ % endif
 
 % if not is_root:
     <!-- footer for xblock_aside -->
diff --git a/common/static/common/js/components/views/feedback.js b/common/static/common/js/components/views/feedback.js
index 0e8b59ac2f..901aaa61fa 100644
--- a/common/static/common/js/components/views/feedback.js
+++ b/common/static/common/js/components/views/feedback.js
@@ -78,16 +78,17 @@
                     return this;
                 },
 
-                inFocus: function() {
+                inFocus: function(wrapperElementSelector) {
+                    var wrapper = wrapperElementSelector || '.wrapper',
+                        tabbables;
                     this.options.outFocusElement = this.options.outFocusElement || document.activeElement;
 
                     // Set focus to the container.
-                    this.$('.wrapper').first().focus();
-
+                    this.$(wrapper).first().focus();
 
                     // Make tabs within the prompt loop rather than setting focus
                     // back to the main content of the page.
-                    var tabbables = this.$(tabbable_elements.join());
+                    tabbables = this.$(tabbable_elements.join());
                     tabbables.on('keydown', function(event) {
                         // On tab backward from the first tabbable item in the prompt
                         if (event.which === 9 && event.shiftKey && event.target === tabbables.first()[0]) {
diff --git a/common/test/acceptance/pages/studio/container.py b/common/test/acceptance/pages/studio/container.py
index fc71890d55..644f926ef8 100644
--- a/common/test/acceptance/pages/studio/container.py
+++ b/common/test/acceptance/pages/studio/container.py
@@ -243,7 +243,7 @@ class ContainerPage(PageObject, HelpMixin):
         """
         Duplicate the item with index source_index (based on vertical placement in page).
         """
-        click_css(self, 'a.duplicate-button', source_index)
+        click_css(self, '.duplicate-button', source_index)
 
     def delete(self, source_index):
         """
@@ -252,7 +252,7 @@ class ContainerPage(PageObject, HelpMixin):
         The index of the first item is 0.
         """
         # Click the delete button
-        click_css(self, 'a.delete-button', source_index, require_notification=False)
+        click_css(self, '.delete-button', source_index, require_notification=False)
         # Click the confirmation dialog button
         confirm_prompt(self)
 
@@ -451,14 +451,14 @@ class XBlockWrapper(PageObject):
         """
         Returns true if this xblock has a 'duplicate' button
         """
-        return self.q(css=self._bounded_selector('a.duplicate-button'))
+        return self.q(css=self._bounded_selector('.duplicate-button'))
 
     @property
     def has_delete_button(self):
         """
         Returns true if this xblock has a 'delete' button
         """
-        return self.q(css=self._bounded_selector('a.delete-button'))
+        return self.q(css=self._bounded_selector('.delete-button'))
 
     @property
     def has_edit_visibility_button(self):