[ML] Migrate ml-info-icon to React/EUI. Fixes related IE11 error. (#20610)

- Migrates the ml-info-icon directive to use React/EUI. This fixes a related error in IE11.
- For now a hard-coded override is used to size the icon because EuiIconTip doesn't pass on the size attribute to the wrapped EuiIcon directive.
- The (simple) React component is kept within the directive's, because previously the directive template also wasn't in a separate file.
- Removes the unused mlJsonTooltipService angular service.

x-pack/plugins/ml/public/components/json_tooltip/__tests__/json_tooltip.js

@@ -32,7 +32,6 @@ describe('ML - <ml-info-icon>', () => {
     const scope = $element.isolateScope();
 
     expect(scope.id).to.be.an('undefined');
-    expect(scope.text).to.be('');
   });
 
   it('Initialization with a non-existing tooltip attribute doesn\'t throw an error', () => {
@@ -42,7 +41,6 @@ describe('ML - <ml-info-icon>', () => {
     scope.$digest();
 
     expect(scope.id).to.be(id);
-    expect(scope.text).to.be('');
   });
 
   it('Initialize with existing tooltip attribute', () => {
@@ -53,7 +51,6 @@ describe('ML - <ml-info-icon>', () => {
 
     // test scope values
     expect(scope.id).to.be(id);
-    expect(scope.text).to.be(tooltips[id].text);
 
     // test the rendered span element which should be referenced by aria-describedby
     const span = $element.find('span.ml-info-tooltip-text');

x-pack/plugins/ml/public/components/json_tooltip/json_tooltip.js

@@ -11,28 +11,33 @@
 import tooltips from './tooltips.json';
 import './styles/main.less';
 
+import PropTypes from 'prop-types';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { EuiIconTip } from '@elastic/eui';
+
 import { uiModules } from 'ui/modules';
-const module = uiModules.get('apps/ml');
-// service for retrieving text from the tooltip.json file
-// to add a tooltip to any element:
-// <... tooltip="{{mlJsonTooltipService.text('my_id')}}" ...>
-module.service('mlJsonTooltipService', function () {
-  this.text = function (id) {
-    if (tooltips[id]) {
-      return tooltips[id].text;
-    } else {
-      return '';
-    }
-  };
-});
+const module = uiModules.get('apps/ml', ['react']);
+
+const JsonTooltip = ({ id, position, text }) => (
+  <span aria-hidden="true">
+    <EuiIconTip
+      content={text}
+      position={position}
+    />
+    <span id={`ml_aria_description_${id}`} className="ml-info-tooltip-text">{text}</span>
+  </span>
+);
+JsonTooltip.propTypes = {
+  id: PropTypes.string,
+  position: PropTypes.string,
+  text: PropTypes.string
+};
 
 // directive for placing an i icon with a popover tooltip anywhere on a page
 // tooltip format: <i ml-info-icon="<the_id>" />
 // the_id will match an entry in tooltips.json
-// the original <i ml-info-icon="<the_id>" /> will be replaced with
-// <span ml-tooltip="<tooltip_text>">...</span> to transform the DOM structure
-// into one which is suitable for use with EuiTooltip. Because of this replacement
-// span[ml-info-icon] has to be used instead of i[ml-info-icon] when using CSS.
 module.directive('mlInfoIcon', function () {
   return {
     scope: {
@@ -40,16 +45,18 @@ module.directive('mlInfoIcon', function () {
       position: '@'
     },
     restrict: 'AE',
-    replace: true,
-    template: `
-      <span ml-tooltip="{{text}}">
-        <i aria-hidden="true" class="fa fa-info-circle">
-          <span id="ml_aria_description_{{id}}" class="ml-info-tooltip-text">{{text}}</span>
-        </i>
-      </span>
-    `,
-    controller: function ($scope) {
-      $scope.text = (tooltips[$scope.id]) ? tooltips[$scope.id].text : '';
+    replace: false,
+    link: (scope, element) => {
+      const props = {
+        id: scope.id,
+        position: scope.position,
+        text: (tooltips[scope.id]) ? tooltips[scope.id].text : ''
+      };
+
+      ReactDOM.render(
+        React.createElement(JsonTooltip, props),
+        element[0]
+      );
     }
   };
 

x-pack/plugins/ml/public/components/json_tooltip/styles/main.less

@@ -1,14 +1,20 @@
-span[ml-info-icon] {
+i[ml-info-icon] {
   color: #888;
-  margin: 3px 4px;
+  margin: 0 4px;
   transition: color 0.15s;
 
+  /* hard-coded euiIcon size because EuiIconTip doesn't pass on the size attribute to EuiIcon */
+  .euiIcon {
+    width: 12px;
+    height: 12px;
+  }
+
   .ml-info-tooltip-text {
     display: none;
   }
 }
 
-span[ml-info-icon]:hover {
+i[ml-info-icon]:hover {
   color: #444;
   transition: color 0.15s 0.15s;
 }