Use Backbone notifications for course section delete.

cms/djangoapps/contentstore/features/common.py

@@ -239,6 +239,12 @@ def save_button_disabled(step):
     assert world.css_has_class(button_css, disabled)
 
 
+@step('I confirm the prompt')
+def confirm_the_prompt(step):
+    prompt_css = 'a.button.action-primary'
+    world.css_click(prompt_css)
+
+
 def type_in_codemirror(index, text):
     world.css_click(".CodeMirror", index=index)
     g = world.css_find("div.CodeMirror.CodeMirror-focused > div > textarea")

cms/djangoapps/contentstore/features/section.feature

@@ -33,4 +33,5 @@ Feature: Create Section
     And I have added a new section
     When I will confirm all alerts
     And I press the "section" delete icon
+    And I confirm the prompt
     Then the section does not exist

cms/djangoapps/contentstore/features/subsection.feature

@@ -38,4 +38,5 @@ Feature: Create Subsection
     And I see my subsection on the Courseware page
     When I will confirm all alerts
     And I press the "subsection" delete icon
+    And I confirm the prompt
     Then the subsection does not exist

cms/static/coffee/spec/views/overview_spec.coffee

@@ -40,17 +40,31 @@ describe "Course Overview", ->
         </div>
         """#"
 
+        appendSetFixtures """
+          <section class="courseware-section branch" data-id="a-location-goes-here">
+            <li class="branch collapsed id-holder" data-id="an-id-goes-here">
+              <a href="#" class="delete-section-button"></a>
+            </li>
+          </section>
+        """#"
+
         spyOn(window, 'saveSetSectionScheduleDate').andCallThrough()
         # Have to do this here, as it normally gets bound in document.ready()
         $('a.save-button').click(saveSetSectionScheduleDate)
+        $('a.delete-section-button').click(deleteSection)
+
         @notificationSpy = spyOn(CMS.Views.Notification.Mini.prototype, 'show').andCallThrough()
         window.analytics = jasmine.createSpyObj('analytics', ['track'])
         window.course_location_analytics = jasmine.createSpy()
-        sinon.useFakeXMLHttpRequest()
+        @xhr = sinon.useFakeXMLHttpRequest()
+        requests = @requests = []
+        @xhr.onCreate = (req) -> requests.push(req)
 
     afterEach ->
         delete window.analytics
         delete window.course_location_analytics
+        @xhr.restore()
+        @notificationSpy.reset()
 
     it "should save model when save is clicked", ->
         $('a.edit-button').click()
@@ -61,3 +75,15 @@ describe "Course Overview", ->
         $('a.edit-button').click()
         $('a.save-button').click()
         expect(@notificationSpy).toHaveBeenCalled()
+
+    it "should delete model when delete is clicked", ->
+      deleteSpy = spyOn(window, '_deleteItem').andCallThrough()
+      $('a.delete-section-button').click()
+      $('a.action-primary').click()
+      expect(deleteSpy).toHaveBeenCalled()
+      expect(@requests[0].url).toEqual('/delete_item')
+
+    it "should show a confirmation on delete", ->
+      $('a.delete-section-button').click()
+      $('a.action-primary').click()
+      expect(@notificationSpy).toHaveBeenCalled()

cms/static/js/base.js

@@ -356,39 +356,61 @@ function createNewUnit(e) {
 
 function deleteUnit(e) {
     e.preventDefault();
-    _deleteItem($(this).parents('li.leaf'));
+    _deleteItem($(this).parents('li.leaf'), 'Unit');
 }
 
 function deleteSubsection(e) {
     e.preventDefault();
-    _deleteItem($(this).parents('li.branch'));
+    _deleteItem($(this).parents('li.branch'), 'Subsection');
 }
 
 function deleteSection(e) {
     e.preventDefault();
-    _deleteItem($(this).parents('section.branch'));
+    _deleteItem($(this).parents('section.branch'), 'Section');
 }
 
-function _deleteItem($el) {
-    if (!confirm(gettext('Are you sure you wish to delete this item. It cannot be reversed!'))) return;
+function _deleteItem($el, type) {
+    var confirm = new CMS.Views.Prompt.Confirmation({
+        title: gettext('Are you sure you wish to delete this ' + type + '?'),
+        message: gettext('It cannot be reversed!'),
+        actions: {
+            primary: {
+                text: gettext('OK'),
+                click: function(view) {
+                    view.hide();
 
-    var id = $el.data('id');
+                    var id = $el.data('id');
 
-    analytics.track('Deleted an Item', {
-        'course': course_location_analytics,
-        'id': id
-    });
-
-
-    $.post('/delete_item', {
-        'id': id,
-        'delete_children': true,
-        'delete_all_versions': true
-    },
-
-    function(data) {
-        $el.remove();
+                    analytics.track('Deleted an Item', {
+                        'course': course_location_analytics,
+                        'id': id
+                    });
+
+                    var deleting = new CMS.Views.Notification.Mini({
+                        title: gettext('Deleting') + '…'
+                    });
+                    deleting.show();
+
+                    $.post('/delete_item',
+                           {'id': id,
+                            'delete_children': true,
+                            'delete_all_versions': true},
+                           function(data) {
+                               $el.remove();
+                               deleting.hide();
+                           }
+                          );
+                }
+            },
+            secondary: {
+                text: gettext('Cancel'),
+                click: function(view) {
+                    view.hide();
+                }
+            }
+        }
     });
+    confirm.show();
 }
 
 function markAsLoaded() {