[ML] Migrates ml-form-label to EUI/React.

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();
+  });
+});