Add CodeMirror XML editor to Studio view & XML validation

mentoring/mentoring.py

@@ -26,6 +26,9 @@
 import logging
 import uuid
 
+from lxml import etree
+from StringIO import StringIO
+
 from xblock.core import XBlock
 from xblock.fields import Boolean, Scope, String
 from xblock.fragment import Fragment
@@ -166,6 +169,7 @@ class MentoringBlock(XBlockWithLightChildren):
             'xml_content': self.xml_content or self.default_xml_content,
         }))
         fragment.add_javascript(load_resource('public/js/mentoring_edit.js'))
+        fragment.add_css(load_resource('public/css/mentoring_edit.css'))
 
         fragment.initialize_js('MentoringEditBlock')
 
@@ -175,11 +179,22 @@ class MentoringBlock(XBlockWithLightChildren):
     def studio_submit(self, submissions, suffix=''):
         log.info(u'Received studio submissions: {}'.format(submissions))
 
-        # TODO-MRQ: Add XML validation
-        self.xml_content = submissions['xml_content']
-        return {
-            'result': 'success',
-        }
+        xml_content = submissions['xml_content']
+        try:
+            etree.parse(StringIO(xml_content))
+        except etree.XMLSyntaxError as e:
+            response = {
+                'result': 'error',
+                'message': e.message
+            }
+        else:
+            response = {
+                'result': 'success',
+            }
+            self.xml_content = xml_content
+
+        log.debug(u'Response from Studio: {}'.format(response))
+        return response
 
     @property
     def default_xml_content(self):

mentoring/public/css/mentoring_edit.css

+.mentoring-edit .module-actions .error-message {
+    color: red;
+}

mentoring/public/js/mentoring_edit.js

 function MentoringEditBlock(runtime, element) {
-    var xml_editor_textarea = $('.block-xml-editor', element),
-        xml_editor = CodeMirror.fromTextArea(xml_editor_textarea[0], { mode: 'xml' });
+    var xmlEditorTextarea = $('.block-xml-editor', element),
+        xmlEditor = CodeMirror.fromTextArea(xmlEditorTextarea[0], { mode: 'xml' });
 
     $('.save-button').bind('click', function() {
-        var data = {
-            'xml_content': xml_editor.getValue(),
-        };
+        var handlerUrl = runtime.handlerUrl(element, 'studio_submit'),
+            data = {
+                'xml_content': xmlEditor.getValue(),
+            };
 
-        var handlerUrl = runtime.handlerUrl(element, 'studio_submit');
-        $.post(handlerUrl, JSON.stringify(data)).complete(function() {
-            // TODO-MRQ: Error handling
-            window.location.reload(false);
+        $('.error-message', element).html();
+        $.post(handlerUrl, JSON.stringify(data)).done(function(response) {
+            if (response.result === 'success') {
+                window.location.reload(false);
+            } else {
+                $('.error-message', element).html('Error: '+response.message);
+            }
         });
     });
 }

mentoring/templates/html/mentoring_edit.html

 <!-- TODO: Replace by default edit view once available in Studio -->
-<div class="wrapper-comp-settings is-active" id="settings-tab">
-  <script id="metadata-editor-tpl" type="text/template">// JS crashes when empty //</script>
-  <textarea class="block-xml-editor">{{ xml_content }}</textarea>
-</div>
-<div class="row module-actions">
+<div class="mentoring-edit">
+  <div class="wrapper-comp-settings is-active" id="settings-tab">
+    <script id="metadata-editor-tpl" type="text/template">// JS crashes when empty //</script>
+    <textarea class="block-xml-editor">{{ xml_content }}</textarea>
+  </div>
+  <div class="row module-actions">
     <a href="#" class="save-button action-primary action">Save</a>
     <a href="#" class="cancel-button action-secondary action">Cancel</a>
+    <span class="error-message"></span>
+  </div>
 </div>