Replace angular-bootstrap-colorpicker with EuiColorPicker (#17222)

* remove angular-bootstrap-colorpicker

* add form-control class to make things like better

package.json

@@ -89,7 +89,6 @@
     "accept-language-parser": "1.2.0",
     "angular": "1.6.5",
     "angular-aria": "1.6.6",
-    "angular-bootstrap-colorpicker": "3.0.19",
     "angular-elastic": "2.5.0",
     "angular-route": "1.4.7",
     "angular-sanitize": "1.5.7",

src/ui/public/field_editor/field_editor.js

@@ -1,7 +1,5 @@
 
 import 'ui/field_format_editor';
-import 'angular-bootstrap-colorpicker';
-import 'angular-bootstrap-colorpicker/css/colorpicker.css';
 import _ from 'lodash';
 import { RegistryFieldFormatsProvider } from 'ui/registry/field_formats';
 import { IndexPatternsFieldProvider } from 'ui/index_patterns/_field';
@@ -18,7 +16,7 @@ import {
 import { getKbnTypeNames } from '../../../utils';
 
 uiModules
-  .get('kibana', ['colorpicker.module'])
+  .get('kibana')
   .directive('fieldEditor', function (Private, $sce, confirmModal, config) {
     const getConfig = (...args) => config.get(...args);
     const fieldFormats = Private(RegistryFieldFormatsProvider);

src/ui/public/field_format_editor/editors/color/color.html

@@ -30,23 +30,21 @@
       </div>
       <div class="form-group">
         <label for="scriptFieldColorFont">Font Color</label>
-        <input
+        <color-picker
           id="scriptFieldColorFont"
-          ng-model="color.text"
-          colorpicker
-          type="text"
+          on-change="getSetTextColor($index)"
+          color="color.text"
           class="form-control"
-        >
+        />
       </div>
       <div class="form-group">
         <label for="scriptFieldColorBackground">Background Color</label>
-        <input
+        <color-picker
           id="scriptFieldColorBackground"
-          ng-model="color.background"
-          colorpicker
-          type="text"
+          on-change="getSetBackgroundColor($index)"
+          color="color.background"
           class="form-control"
-        >
+        />
       </div>
       <div class="form-group">
         <label for="scriptFieldColorExample">Example</label>

src/ui/public/field_format_editor/editors/color/color.js

@@ -18,6 +18,31 @@ export function colorEditor() {
       $scope.removeColor = function (index) {
         $scope.editor.formatParams.colors.splice(index, 1);
       };
+
+      $scope.setColor = function (index, propName, value) {
+        $scope.editor.formatParams.colors[index][propName] = value;
+      };
+
+      // EuiColorPicker onChange prop expects a function taking a single parameter: 'value'
+      // Updating color in $scope requires other parameters (like colors index).
+      // Use bind to create a function to pass to react.
+      // Must use a single bind and then store the function so react does not infinitely re-render.
+      $scope.getSetBackgroundColor = function (index) {
+        if ($scope.editor.formatParams.colors[index].setBackgroundColor) {
+          return $scope.editor.formatParams.colors[index].setBackgroundColor;
+        }
+
+        $scope.editor.formatParams.colors[index].setBackgroundColor = $scope.setColor.bind(null, index, 'background');
+        return $scope.editor.formatParams.colors[index].setBackgroundColor;
+      };
+      $scope.getSetTextColor = function (index) {
+        if ($scope.editor.formatParams.colors[index].setTextColor) {
+          return $scope.editor.formatParams.colors[index].setTextColor;
+        }
+
+        $scope.editor.formatParams.colors[index].setTextColor = $scope.setColor.bind(null, index, 'text');
+        return $scope.editor.formatParams.colors[index].setTextColor;
+      };
     }
   };
 }

src/ui/public/react_components.js

@@ -7,6 +7,7 @@ import {
 import {
   EuiConfirmModal,
   EuiIcon,
+  EuiColorPicker,
 } from '@elastic/eui';
 
 import { uiModules } from 'ui/modules';
@@ -18,3 +19,5 @@ app.directive('toolBarSearchBox', reactDirective => reactDirective(KuiToolBarSea
 app.directive('confirmModal', reactDirective => reactDirective(EuiConfirmModal));
 
 app.directive('icon', reactDirective => reactDirective(EuiIcon));
+
+app.directive('colorPicker', reactDirective => reactDirective(EuiColorPicker));

yarn.lock

@@ -324,10 +324,6 @@ angular-aria@1.6.6:
   version "1.6.6"
   resolved "https://registry.yarnpkg.com/angular-aria/-/angular-aria-1.6.6.tgz#58dd748e09564bc8409f739bde57b35fbee5b6a5"
 
-angular-bootstrap-colorpicker@3.0.19:
-  version "3.0.19"
-  resolved "https://registry.yarnpkg.com/angular-bootstrap-colorpicker/-/angular-bootstrap-colorpicker-3.0.19.tgz#557609636b33e1b5c83e2742cbfd0e4ea14c042c"
-
 angular-elastic@2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/angular-elastic/-/angular-elastic-2.5.0.tgz#07736ac290ea955b9fe511aac84020df623c87ec"