Update color field formatter (elastic#15837) (elastic#15849)

* Updating color field formatter

* Just using single quotes, back-ticks no longer necessary

* Revising the tests

src/ui/public/stringify/__tests__/_color.js

@@ -72,7 +72,26 @@ describe('Color Format', function () {
       expect(converter('AB', 'html')).to.eql(
         '<span ng-non-bindable><span style="color: blue;background-color: yellow;">AB</span></span>'
       );
+
+      expect(converter('AB <', 'html')).to.eql(
+        '<span ng-non-bindable><span style="color: blue;background-color: yellow;">AB &lt;</span></span>'
+      );
+
       expect(converter('a', 'html')).to.eql('<span ng-non-bindable>a</span>');
     });
+
+    it('returns original value (escaped) when regex is invalid', function () {
+      const colorer = new ColorFormat({
+        fieldType: 'string',
+        colors: [{
+          regex: 'A.*',
+          text: 'blue',
+          background: 'yellow'
+        }]
+      });
+
+      const converter = colorer.getConverterFor('html');
+      expect(converter('<', 'html')).to.eql('<span ng-non-bindable>&lt;</span>');
+    });
   });
 });

src/ui/public/stringify/types/color.js

@@ -71,7 +71,7 @@ export function stringifyColor(Private) {
   _Color.prototype._convert = {
     html(val) {
       const color = this.findColorRuleForVal(val);
-      if (!color) return _.asPrettyString(val);
+      if (!color) return _.escape(_.asPrettyString(val));
 
       let style = '';
       if (color.text) style += `color: ${color.text};`;