From d6453fa3ba4e6358a002a1ffcd10f789c530cd84 Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Mon, 23 Jul 2018 11:42:36 +0200 Subject: [PATCH] [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()). --- .../__snapshots__/form_label.test.js.snap | 28 +++++++++ .../components/form_label/form_label.js | 52 +++++++++------- .../components/form_label/form_label.test.js | 32 ++++++++++ .../form_label/form_label_directive.js | 52 ++++++++++++++++ .../ml/public/components/form_label/index.js | 2 +- .../__snapshots__/json_tooltip.test.js.snap | 54 +++++++++++++++++ .../public/components/json_tooltip/index.js | 2 +- .../components/json_tooltip/json_tooltip.js | 59 +++++-------------- .../json_tooltip/json_tooltip.test.js | 36 +++++++++++ .../json_tooltip/json_tooltip_directive.js | 40 +++++++++++++ .../components/json_tooltip/styles/main.less | 4 +- 11 files changed, 293 insertions(+), 68 deletions(-) create mode 100644 x-pack/plugins/ml/public/components/form_label/__snapshots__/form_label.test.js.snap create mode 100644 x-pack/plugins/ml/public/components/form_label/form_label.test.js create mode 100644 x-pack/plugins/ml/public/components/form_label/form_label_directive.js create mode 100644 x-pack/plugins/ml/public/components/json_tooltip/__snapshots__/json_tooltip.test.js.snap create mode 100644 x-pack/plugins/ml/public/components/json_tooltip/json_tooltip.test.js create mode 100644 x-pack/plugins/ml/public/components/json_tooltip/json_tooltip_directive.js diff --git a/x-pack/plugins/ml/public/components/form_label/__snapshots__/form_label.test.js.snap b/x-pack/plugins/ml/public/components/form_label/__snapshots__/form_label.test.js.snap new file mode 100644 index 0000000000000..057ed54b10a09 --- /dev/null +++ b/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`] = ` + + +`; + +exports[`FormLabel Full initialization 1`] = ` + + + + +`; diff --git a/x-pack/plugins/ml/public/components/form_label/form_label.js b/x-pack/plugins/ml/public/components/form_label/form_label.js index f549259b4e68a..efdbf6b392651 100644 --- a/x-pack/plugins/ml/public/components/form_label/form_label.js +++ b/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: // -// Label Text +// Label Text // -module.directive('mlFormLabel', function () { - return { - scope: { - labelId: '@', - tooltipAppendToBody: '@' - }, - restrict: 'E', - replace: false, - transclude: true, - template: ` - - - ` - }; -}); +// +// 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 ( + + + + + ); + } +} +FormLabel.propTypes = { + labelId: PropTypes.string +}; diff --git a/x-pack/plugins/ml/public/components/form_label/form_label.test.js b/x-pack/plugins/ml/public/components/form_label/form_label.test.js new file mode 100644 index 0000000000000..70b6983209c96 --- /dev/null +++ b/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(); + 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({labelText}); + + const labelElement = wrapper.find('label'); + expect(labelElement.props().id).toBe(`ml_aria_label_${labelId}`); + expect(labelElement.text()).toBe(labelText); + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/x-pack/plugins/ml/public/components/form_label/form_label_directive.js b/x-pack/plugins/ml/public/components/form_label/form_label_directive.js new file mode 100644 index 0000000000000..85e004d4759a7 --- /dev/null +++ b/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: +// +// Label Text +// +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] + ); + } + }; +}); diff --git a/x-pack/plugins/ml/public/components/form_label/index.js b/x-pack/plugins/ml/public/components/form_label/index.js index 38f165d16c172..f850e7b7a2fd2 100644 --- a/x-pack/plugins/ml/public/components/form_label/index.js +++ b/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'; diff --git a/x-pack/plugins/ml/public/components/json_tooltip/__snapshots__/json_tooltip.test.js.snap b/x-pack/plugins/ml/public/components/json_tooltip/__snapshots__/json_tooltip.test.js.snap new file mode 100644 index 0000000000000..03270b82e9275 --- /dev/null +++ b/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`] = ` +