From b67ac57661fc94df6ee476d0af6b3734211df61c Mon Sep 17 00:00:00 2001
From: Brandon Kobel <brandon.kobel@gmail.com>
Date: Thu, 4 Jan 2018 12:12:21 -0500
Subject: [PATCH] Update color field formatter (#15837) (#15849)

* Updating color field formatter

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

* Revising the tests
---
 src/ui/public/stringify/__tests__/_color.js | 19 +++++++++++++++++++
 src/ui/public/stringify/types/color.js      |  2 +-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/ui/public/stringify/__tests__/_color.js b/src/ui/public/stringify/__tests__/_color.js
index 5ee7db61815e9..883cbb56178f1 100644
--- a/src/ui/public/stringify/__tests__/_color.js
+++ b/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>');
+    });
   });
 });
diff --git a/src/ui/public/stringify/types/color.js b/src/ui/public/stringify/types/color.js
index b756e2ecd11bb..dc8a9b11a4376 100644
--- a/src/ui/public/stringify/types/color.js
+++ b/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};`;