Fix duplicate save and cancel buttons in Studio

STUD-1531

Also add support for refreshing the modal on custom save

cms/static/coffee/spec/views/module_edit_spec.coffee

@@ -25,7 +25,6 @@ define ["jquery", "js/spec_helpers/edit_helpers", "coffee/src/views/module_edit"
           </section>
         </li>
         </ul>
-        <div class="edit-xblock-modal"/>
         """
         edit_helpers.installEditTemplates(true);
         spyOn($, 'ajax').andReturn(@moduleData)

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

@@ -47,7 +47,6 @@ define ["jquery", "underscore", "gettext", "xblock/runtime.v1",
     clickEditButton: (event) ->
       event.preventDefault()
       modal = new EditXBlockModal({
-        el: $('.edit-xblock-modal'),
         view: 'student_view'
       });
       modal.edit(this.$el, self.model, { refresh: _.bind(@render, this) })

cms/static/coffee/src/xblock/cms.runtime.v1.coffee

@@ -5,74 +5,76 @@ define [
     @PreviewRuntime = {}
 
     class PreviewRuntime.v1 extends XBlock.Runtime.v1
-      handlerUrl: (element, handlerName, suffix, query, thirdparty) ->
-        uri = URI("/preview/xblock").segment($(element).data('usage-id'))
-                                    .segment('handler')
-                                    .segment(handlerName)
-        if suffix? then uri.segment(suffix)
-        if query? then uri.search(query)
-        uri.toString()
+        handlerUrl: (element, handlerName, suffix, query, thirdparty) ->
+            uri = URI("/preview/xblock").segment($(element).data('usage-id'))
+            .segment('handler')
+            .segment(handlerName)
+            if suffix? then uri.segment(suffix)
+            if query? then uri.search(query)
+            uri.toString()
 
     @StudioRuntime = {}
 
     class StudioRuntime.v1 extends XBlock.Runtime.v1
-      constructor: () ->
-        super()
-        @savingNotification = new NotificationView.Mini
-            title: gettext('Saving…')
-        @alert = new NotificationView.Error
-            title: "OpenAssessment Save Error",
-            closeIcon: false,
-            shown: false
+        constructor: () ->
+            super()
+            @savingNotification = new NotificationView.Mini
+                title: gettext('Saving…')
+            @alert = new NotificationView.Error
+                title: "OpenAssessment Save Error",
+                closeIcon: false,
+                shown: false
 
-      handlerUrl: (element, handlerName, suffix, query, thirdparty) ->
-        uri = URI("/xblock").segment($(element).data('usage-id'))
-                                    .segment('handler')
-                                    .segment(handlerName)
-        if suffix? then uri.segment(suffix)
-        if query? then uri.search(query)
-        uri.toString()
+        handlerUrl: (element, handlerName, suffix, query, thirdparty) ->
+            uri = URI("/xblock").segment($(element).data('usage-id'))
+            .segment('handler')
+            .segment(handlerName)
+            if suffix? then uri.segment(suffix)
+            if query? then uri.search(query)
+            uri.toString()
 
-      # Notify the Studio client-side runtime so it can update
-      # the UI in a consistent way.  Currently, this is used
-      # for save / cancel when editing an XBlock.
-      # Although native XBlocks should handle their own persistence,
-      # Studio still needs to update the UI in a consistent way
-      # (showing the "Saving..." notification, closing the modal editing dialog, etc.)
-      notify: (name, data) ->
-        if name == 'save'
-          if 'state' of data
+        # Notify the Studio client-side runtime so it can update
+        # the UI in a consistent way.  Currently, this is used
+        # for save / cancel when editing an XBlock.
+        # Although native XBlocks should handle their own persistence,
+        # Studio still needs to update the UI in a consistent way
+        # (showing the "Saving..." notification, closing the modal editing dialog, etc.)
+        notify: (name, data) ->
+            if name == 'save'
+                if 'state' of data
 
-            # Starting to save, so show the "Saving..." notification
-            if data.state == 'start'
-                @savingNotification.show()
+                    # Starting to save, so show the "Saving..." notification
+                    if data.state == 'start'
+                        @savingNotification.show()
 
-            # Finished saving, so hide the "Saving..." notification
-            else if data.state == 'end'
+                        # Finished saving, so hide the "Saving..." notification
+                    else if data.state == 'end'
+                        @_hideAlerts()
 
-                # Hide the editor *after* we finish saving in case there are validation
-                # errors that the user needs to correct.
-                @_hideEditor()
+                        # Notify the modal that the save has completed so that it can hide itself
+                        # and then refresh the xblock.
+                        if @modal
+                            @modal.onSave()
 
-                $('.component.editing').removeClass('editing')
-                @savingNotification.hide()
+                        @savingNotification.hide()
 
-        else if name == 'cancel'
-            @_hideEditor()
+            else if name == 'edit-modal-shown'
+                @modal = data
 
-        else if name == 'error'
-            if 'msg' of data
-                @alert.options.message = data.msg
-                @alert.show()
+            else if name == 'edit-modal-hidden'
+                @modal = null
 
-      _hideEditor: () ->
-          # This will close all open component editors, which works
-          # if we assume that <= 1 are open at a time.
-          el = $('.component.editing')
-          el.removeClass('editing')
-          el.find('.component-editor').slideUp(150)
-          ModalUtils.hideModalCover()
+            else if name == 'cancel'
+                @_hideAlerts()
+                if @modal
+                    @modal.cancel()
 
-          # Hide any alerts that are being shown
-          if @alert.options.shown
-              @alert.hide()
+            else if name == 'error'
+                if 'msg' of data
+                    @alert.options.message = data.msg
+                    @alert.show()
+
+        _hideAlerts: () ->
+            # Hide any alerts that are being shown
+            if @alert.options.shown
+                @alert.hide()