[ML] Migrate mlDocumentationHelpLink to React. (#19124)

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

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DocumentationHelpLink renders the link 1`] = `
+<a
+  className="documentation-help-link"
+  href="http://fullUrl"
+  rel="noopener noreferrer"
+  target="_blank"
+>
+  Label Text
+   
+  <EuiIcon
+    size="m"
+    type="popout"
+  />
+</a>
+`;

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

@@ -6,7 +6,8 @@
 
 
 
-// the tooltip descriptions are located in tooltips.json
+import React from 'react';
+import ReactDOM from 'react-dom';
 
 import './styles/main.less';
 
@@ -15,6 +16,8 @@ import { metadata } from 'ui/metadata';
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml');
 
+import { DocumentationHelpLink } from './documentation_help_link_view';
+
 module.directive('mlDocumentationHelpLink', function () {
   return {
     scope: {
@@ -23,17 +26,20 @@ module.directive('mlDocumentationHelpLink', function () {
     },
     restrict: 'AE',
     replace: true,
-    template: '<a href="{{fullUrl()}}" rel="noopener noreferrer" target="_blank"' +
-                'class="documentation-help-link" tooltip="{{label}}">' +
-                '{{label}}<i class="fa fa-external-link"></i></a>',
-    controller: function ($scope) {
+    link: function (scope, element) {
       const baseUrl = 'https://www.elastic.co';
       // metadata.branch corresponds to the version used in documentation links.
       const version = metadata.branch;
 
-      $scope.fullUrl = function () {
-        return `${baseUrl}/guide/en/x-pack/${version}/${$scope.uri}`;
+      const props = {
+        fullUrl: `${baseUrl}/guide/en/x-pack/${version}/${scope.uri}`,
+        label: scope.label
       };
+
+      ReactDOM.render(
+        React.createElement(DocumentationHelpLink, props),
+        element[0]
+      );
     }
   };
 

x-pack/plugins/ml/public/components/documentation_help_link/documentation_help_link_view.js

@@ -0,0 +1,26 @@
+/*
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+import { EuiIcon } from '@elastic/eui';
+
+export function DocumentationHelpLink({ fullUrl, label }) {
+  return (
+    <a
+      href={fullUrl}
+      rel="noopener noreferrer"
+      target="_blank"
+      className="documentation-help-link"
+    >
+      {label} <EuiIcon type="popout" />
+    </a>
+  );
+}
+DocumentationHelpLink.propTypes = {
+  fullUrl: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired
+};

x-pack/plugins/ml/public/components/documentation_help_link/documentation_help_link_view.test.js

@@ -0,0 +1,27 @@
+/*
+ * 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 { DocumentationHelpLink } from './documentation_help_link_view';
+
+describe('DocumentationHelpLink', () => {
+  const props = {
+    fullUrl: 'http://fullUrl',
+    label: 'Label Text'
+  };
+
+  const component = (
+    <DocumentationHelpLink {...props} />
+  );
+
+  const wrapper = shallow(component);
+
+  test('renders the link', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});