Use Backbone notifications for component delete.

cms/djangoapps/contentstore/features/component.feature

@@ -67,3 +67,21 @@ Feature: Component Adding
         When I will confirm all alerts
         And I delete all components
         Then I see no components
+
+    Scenario: I see a prompt on delete
+        Given I have opened a new course in studio
+        And I am editing a new unit
+        And I add the following components:
+            | Component    |
+            | Discussion   |
+       And I delete a component
+       Then I see a prompt
+
+   Scenario: I see a notification on save
+        Given I have opened a new course in studio
+        And I am editing a new unit
+        And I add the following components:
+            | Component    |
+            | Discussion   |
+        And I edit and save a component
+        Then I see a notification

cms/djangoapps/contentstore/features/component.py

@@ -41,6 +41,22 @@ def see_no_components(steps):
     assert world.is_css_not_present('li.component')
 
 
+@step(u'I delete a component')
+def delete_one_component(step):
+    world.css_click('a.delete-button')
+
+
+@step(u'I edit and save a component')
+def edit_and_save_component(step):
+    world.css_click('.edit-button')
+    world.css_click('.save-button')
+
+
+@step(u'I see a (.*)$')
+def i_see_a_notification(step, notification_type):
+    assert world.is_css_present('.wrapper-%s' % notification_type)
+
+
 def step_selector_list(data_type, path, index=1):
     selector_list = ['a[data-type="{}"]'.format(data_type)]
     if index != 1:

cms/static/coffee/src/views/module_edit.coffee

@@ -84,11 +84,15 @@ class CMS.Views.ModuleEdit extends Backbone.View
 
     data.metadata = _.extend(data.metadata || {}, @changedMetadata())
     @hideModal()
+    saving = new CMS.Views.Notification.Mini
+      title: gettext('Saving') + '…'
+    saving.show()
     @model.save(data).done( =>
     #   # showToastMessage("Your changes have been saved.", null, 3)
       @module = null
       @render()
       @$el.removeClass('editing')
+      saving.hide()
     ).fail( ->
       showToastMessage(gettext("There was an error saving your changes. Please try again."), null, 3)
     )

cms/static/coffee/src/views/unit.coffee

@@ -115,27 +115,43 @@ class CMS.Views.UnitEdit extends Backbone.View
     @model.save()
 
   deleteComponent: (event) =>
-    if not confirm 'Are you sure you want to delete this component? This action cannot be undone.'
-      return
-    $component = $(event.currentTarget).parents('.component')
-    $.post('/delete_item', {
-      id: $component.data('id')
-    }, =>
-      analytics.track "Deleted a Component",
-        course: course_location_analytics
-        unit_id: unit_location_analytics
-        id: $component.data('id')
+    msg = new CMS.Views.Prompt.Confirmation(
+      title: gettext('Are you sure you want to delete this component?'),
+      message: gettext('This action cannot be undone.'),
+      actions:
+        primary:
+          text: gettext('OK'),
+          click: (view) =>
+            view.hide()
+            deleting = new CMS.Views.Notification.Mini
+              title: gettext('Deleting') + '…',
+            deleting.show()
+            $component = $(event.currentTarget).parents('.component')
+            $.post('/delete_item', {
+              id: $component.data('id')
+            }, =>
+              deleting.hide()
+              analytics.track "Deleted a Component",
+                course: course_location_analytics
+                unit_id: unit_location_analytics
+                id: $component.data('id')
 
-      $component.remove()
-      # b/c we don't vigilantly keep children up to date
-      # get rid of it before it hurts someone
-      # sorry for the js, i couldn't figure out the coffee equivalent
-      `_this.model.save({children: _this.components()},
-          {success: function(model) {
-              model.unset('children');
-          }}
-      );`
+              $component.remove()
+              # b/c we don't vigilantly keep children up to date
+              # get rid of it before it hurts someone
+              # sorry for the js, i couldn't figure out the coffee equivalent
+              `_this.model.save({children: _this.components()},
+                {success: function(model) {
+                model.unset('children');
+                }}
+              );`
+            )
+        secondary:
+          text: gettext('Cancel'),
+          click: (view) ->
+            view.hide()
     )
+    msg.show()
 
   deleteDraft: (event) ->
     @wait(true)