ui: Add XML syntax highlighting to key/value editor (#11785)

* ui: Add XML syntax highlighting to key/value editor

* ui: Make explicit options that are specific to XML for clarity

ui/packages/consul-ui/app/components/code-editor/index.js

@@ -31,11 +31,18 @@ export default Component.extend({
     }
   },
   setMode: function(mode) {
-    set(this, 'options', {
+    let options = {
       ...DEFAULTS,
       mode: mode.mime,
       readOnly: this.readonly,
-    });
+    };
+    if (mode.name === 'XML') {
+      options.htmlMode = mode.htmlMode;
+      options.matchClosing = mode.matchClosing;
+      options.alignCDATA = mode.alignCDATA;
+    }
+    set(this, 'options', options);
+
     const editor = this.editor;
     editor.setOption('mode', mode.mime);
     this.helper.lint(editor, mode.mode);

ui/packages/consul-ui/app/components/code-editor/skin.scss

@@ -128,6 +128,10 @@ $syntax-dark-gray: #535f73;
     color: var(--syntax-packer);
   }
 
+  span.cm-error {
+    color: var(--syntax-red);
+  }
+
   span.cm-attribute {
     color: #9fca56;
   }

ui/packages/consul-ui/app/instance-initializers/ivy-codemirror.js

@@ -16,6 +16,8 @@ export function initialize(application) {
           return fs.get(['codemirror', 'mode', 'ruby', 'ruby.js'].join('/'));
         case 'yaml':
           return fs.get(['codemirror', 'mode', 'yaml', 'yaml.js'].join('/'));
+        case 'xml':
+          return fs.get(['codemirror', 'mode', 'xml', 'xml.js'].join('/'));
       }
     },
   };

ui/packages/consul-ui/app/services/code-mirror/linter.js

@@ -16,6 +16,16 @@ const MODES = [
     alias: ['jruby', 'macruby', 'rake', 'rb', 'rbx'],
   },
   { name: 'YAML', mime: 'text/x-yaml', mode: 'yaml', ext: ['yaml', 'yml'], alias: ['yml'] },
+  {
+    name: 'XML',
+    mime: 'application/xml',
+    mode: 'xml',
+    htmlMode: false,
+    matchClosing: true,
+    alignCDATA: false,
+    ext: ['xml'],
+    alias: ['xml'],
+  },
 ];
 
 export default class LinterService extends Service {

ui/packages/consul-ui/ember-cli-build.js

@@ -206,6 +206,10 @@ module.exports = function(defaults, $ = process.env) {
   app.import('node_modules/codemirror/mode/yaml/yaml.js', {
     outputFile: 'assets/codemirror/mode/yaml/yaml.js',
   });
+  // XML linting support. Possibly dynamically loaded via CodeMirror linting. See services/code-mirror/linter.js
+  app.import('node_modules/codemirror/mode/xml/xml.js', {
+    outputFile: 'assets/codemirror/mode/xml/xml.js',
+  });
   // metrics-providers
   app.import('vendor/metrics-providers/consul.js', {
     outputFile: 'assets/metrics-providers/consul.js',

ui/packages/consul-ui/lib/startup/templates/body.html.js

@@ -38,7 +38,8 @@ ${environment === 'production' ? `{{jsonEncode .}}` : JSON.stringify(config.oper
     "css.escape/css.escape.js": "${rootURL}assets/css.escape.js",
     "codemirror/mode/javascript/javascript.js": "${rootURL}assets/codemirror/mode/javascript/javascript.js",
     "codemirror/mode/ruby/ruby.js": "${rootURL}assets/codemirror/mode/ruby/ruby.js",
-    "codemirror/mode/yaml/yaml.js": "${rootURL}assets/codemirror/mode/yaml/yaml.js"
+    "codemirror/mode/yaml/yaml.js": "${rootURL}assets/codemirror/mode/yaml/yaml.js",
+    "codemirror/mode/xml/xml.js": "${rootURL}assets/codemirror/mode/xml/xml.js"
   }
   </script>
   <script data-app-name="${appName}" data-${appName}-services src="${rootURL}assets/consul-ui/services.js"></script>