[ML] Migrates ml-form-label to EUI/React. (#21059)

- Migrates the ml-form-label directive to use EUI/React.
- Exposes both FormLabel and JsonTooltip as React components from individual files so they can be used in a React context when the wrapping element also has been already ported to React.
- Adds jests based tests for the FormLabel and JsonTooltip components. They try where possible to make the same assertions like the mocha based tests. The mocha based tests are kept in the code for now so the code gets still tested in a angular based context and as a reference to have the same mocha/jest based tests side by side as a reference for migration.
- The FormLabel component is done in a way so it supports transclusion in both cases when used with React alone (using the children prop) and angularjs (using a ref callback and angular's transclude()).

x-pack/plugins/ml/public/components/form_label/__snapshots__/form_label.test.js.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FormLabel Basic initialization 1`] = `
+<React.Fragment>
+  <label
+    className="euiFormLabel"
+    id="ml_aria_label_undefined"
+  />
+  <Component
+    position="top"
+  />
+</React.Fragment>
+`;
+
+exports[`FormLabel Full initialization 1`] = `
+<React.Fragment>
+  <label
+    className="euiFormLabel"
+    id="ml_aria_label_uid"
+  >
+    Label Text
+  </label>
+  <Component
+    id="uid"
+    position="top"
+  />
+</React.Fragment>
+`;

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

@@ -4,34 +4,46 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import './styles/main.less';
 
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 
-import { uiModules } from 'ui/modules';
-const module = uiModules.get('apps/ml');
+import { JsonTooltip } from '../json_tooltip/json_tooltip';
 
-// directive for creating a form label including a hoverable icon
-// to provide additional information in a tooltip. label and tooltip
+// Component for creating a form label including a hoverable icon
+// to provide additional information in a tooltip. Label and tooltip
 // text elements get unique ids based on label-id so they can be
 // referenced by attributes, for example:
 //
-// <ml-form-label label-id="uid">Label Text</ml-form-label>
+// <FormLabel labelId="uid">Label Text</FormLabel>
 // <input
 //   type="text"
 //   aria-labelledby="ml_aria_label_uid"
 //   aria-describedby="ml_aria_description_uid"
 // />
-module.directive('mlFormLabel', function () {
-  return {
-    scope: {
-      labelId: '@',
-      tooltipAppendToBody: '@'
-    },
-    restrict: 'E',
-    replace: false,
-    transclude: true,
-    template: `
-      <label class="kuiFormLabel" id="ml_aria_label_{{labelId}}" ng-transclude></label>
-      <i ml-info-icon="{{labelId}}" position="top" />
-    `
-  };
-});
+//
+// Writing this as a class based component because stateless components
+// cannot use ref(). Once angular is completely gone this can be rewritten
+// as a function stateless component.
+export class FormLabel extends Component {
+  constructor(props) {
+    super(props);
+    this.labelRef = React.createRef();
+  }
+  render() {
+    // labelClassName is used so we can override the class with 'kuiFormLabel'
+    // when used in an angular context. Once the component is no longer used from
+    // within angular, this prop can be removed and the className can be hardcoded.
+    const { labelId, labelClassName = 'euiFormLabel', children } = this.props;
+    return (
+      <React.Fragment>
+        <label className={labelClassName} id={`ml_aria_label_${labelId}`} ref={this.labelRef}>{children}</label>
+        <JsonTooltip id={labelId} position="top" />
+      </React.Fragment>
+    );
+  }
+}
+FormLabel.propTypes = {
+  labelId: PropTypes.string
+};

x-pack/plugins/ml/public/components/form_label/form_label.test.js

@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import { FormLabel } from './form_label';
+
+describe('FormLabel', () => {
+
+  test('Basic initialization', () => {
+    const wrapper = shallow(<FormLabel />);
+    const props = wrapper.props();
+    expect(props.labelId).toBeUndefined();
+    expect(wrapper.find('label').text()).toBe('');
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('Full initialization', () => {
+    const labelId = 'uid';
+    const labelText = 'Label Text';
+    const wrapper = shallow(<FormLabel labelId={labelId}>{labelText}</FormLabel>);
+
+    const labelElement = wrapper.find('label');
+    expect(labelElement.props().id).toBe(`ml_aria_label_${labelId}`);
+    expect(labelElement.text()).toBe(labelText);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

x-pack/plugins/ml/public/components/form_label/form_label_directive.js

@@ -0,0 +1,52 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import angular from 'angular';
+import { uiModules } from 'ui/modules';
+const module = uiModules.get('apps/ml', ['react']);
+
+import { FormLabel } from './form_label';
+
+// directive for creating a form label including a hoverable icon
+// to provide additional information in a tooltip. label and tooltip
+// text elements get unique ids based on label-id so they can be
+// referenced by attributes, for example:
+//
+// <ml-form-label label-id="uid">Label Text</ml-form-label>
+// <input
+//   type="text"
+//   aria-labelledby="ml_aria_label_uid"
+//   aria-describedby="ml_aria_description_uid"
+// />
+module.directive('mlFormLabel', function () {
+  return {
+    scope: {
+      labelId: '@'
+    },
+    restrict: 'E',
+    replace: false,
+    transclude: true,
+    link: (scope, element, attrs, ctrl, transclude) => {
+      const props = {
+        labelId: scope.labelId,
+        labelClassName: 'kuiFormLabel',
+        // transclude the label text/elements from the angular template
+        // to the labelRef from the react component.
+        ref: c => angular.element(c.labelRef.current).append(transclude())
+      };
+
+      ReactDOM.render(
+        React.createElement(FormLabel, props),
+        element[0]
+      );
+    }
+  };
+});

x-pack/plugins/ml/public/components/form_label/index.js

@@ -6,5 +6,5 @@
 
 
 
-import './form_label';
+import './form_label_directive';
 import './styles/main.less';

x-pack/plugins/ml/public/components/json_tooltip/__snapshots__/json_tooltip.test.js.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`JsonTooltip Initialization with a non-existing tooltip attribute doesn't throw an error 1`] = `
+<span
+  aria-hidden="true"
+  className="ml-info-icon"
+>
+  <EuiIconTip
+    aria-label="Info"
+    content=""
+    type="questionInCircle"
+  />
+  <span
+    className="ml-info-tooltip-text"
+    id="ml_aria_description_non_existing_attribute"
+  />
+</span>
+`;
+
+exports[`JsonTooltip Initialize with existing tooltip attribute 1`] = `
+<span
+  aria-hidden="true"
+  className="ml-info-icon"
+>
+  <EuiIconTip
+    aria-label="Info"
+    content="Unique identifier for job, can use lowercase alphanumeric and underscores."
+    type="questionInCircle"
+  />
+  <span
+    className="ml-info-tooltip-text"
+    id="ml_aria_description_new_job_id"
+  >
+    Unique identifier for job, can use lowercase alphanumeric and underscores.
+  </span>
+</span>
+`;
+
+exports[`JsonTooltip Plain initialization doesn't throw an error 1`] = `
+<span
+  aria-hidden="true"
+  className="ml-info-icon"
+>
+  <EuiIconTip
+    aria-label="Info"
+    content=""
+    type="questionInCircle"
+  />
+  <span
+    className="ml-info-tooltip-text"
+    id="ml_aria_description_undefined"
+  />
+</span>
+`;

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

@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import './json_tooltip';
+import './json_tooltip_directive';

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

@@ -6,58 +6,29 @@
 
 
 
-// the tooltip descriptions are located in tooltips.json
-
+// component for placing an icon with a popover tooltip anywhere on a page
+// the id will match an entry in tooltips.json
 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', ['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>
-);
+export const JsonTooltip = ({ id, position }) => {
+  const text = (tooltips[id]) ? tooltips[id].text : '';
+  return (
+    <span aria-hidden="true" className="ml-info-icon">
+      <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
+  position: 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
-module.directive('mlInfoIcon', function () {
-  return {
-    scope: {
-      id: '@mlInfoIcon',
-      position: '@'
-    },
-    restrict: 'AE',
-    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/json_tooltip.test.js

@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import { JsonTooltip } from './json_tooltip';
+import tooltips from './tooltips.json';
+
+describe('JsonTooltip', () => {
+
+  test(`Plain initialization doesn't throw an error`, () => {
+    const wrapper = shallow(<JsonTooltip />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test(`Initialization with a non-existing tooltip attribute doesn't throw an error`, () => {
+    const id = 'non_existing_attribute';
+    const wrapper = shallow(<JsonTooltip id={id} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  test('Initialize with existing tooltip attribute', () => {
+    const id = 'new_job_id';
+    const wrapper = shallow(<JsonTooltip id={id} />);
+
+    // test the rendered span element which should be referenced by aria-describedby
+    const span = wrapper.find('span.ml-info-tooltip-text');
+    expect(span.props().id).toBe(`ml_aria_description_${id}`);
+    expect(span.text()).toBe(tooltips[id].text);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,40 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { uiModules } from 'ui/modules';
+const module = uiModules.get('apps/ml', ['react']);
+
+import { JsonTooltip } from './json_tooltip';
+
+// 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
+module.directive('mlInfoIcon', function () {
+  return {
+    scope: {
+      id: '@mlInfoIcon',
+      position: '@'
+    },
+    restrict: 'AE',
+    replace: false,
+    link: (scope, element) => {
+      const props = {
+        id: scope.id,
+        position: scope.position
+      };
+
+      ReactDOM.render(
+        React.createElement(JsonTooltip, props),
+        element[0]
+      );
+    }
+  };
+});

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

@@ -1,4 +1,4 @@
-i[ml-info-icon] {
+.ml-info-icon {
   color: #888;
   margin: 0 4px;
   transition: color 0.15s;
@@ -14,7 +14,7 @@ i[ml-info-icon] {
   }
 }
 
-i[ml-info-icon]:hover {
+.ml-info-icon:hover {
   color: #444;
   transition: color 0.15s 0.15s;
 }