refactoring markdown_vis to not use angular (#16153) (#16266)

src/core_plugins/markdown_vis/public/__tests__/markdown_vis_controller.js

@@ -1,33 +0,0 @@
-import ngMock from 'ng_mock';
-import expect from 'expect.js';
-import $ from 'jquery';
-
-describe('markdown vis controller', function () {
-  let $scope;
-
-  const applyChanges = () => {
-    $scope.updateStatus.params = true;
-    $scope.renderComplete = () => {};
-    $scope.$digest();
-  };
-
-  beforeEach(ngMock.module('kibana/markdown_vis'));
-  beforeEach(ngMock.inject(function ($rootScope, $controller) {
-    $scope = $rootScope.$new();
-    $scope.updateStatus = {};
-    $scope.vis = { params: {} };
-    $scope.renderComplete = () => {};
-    const $element = $('<div>');
-    $controller('KbnMarkdownVisController', { $scope, $element });
-    $scope.$digest();
-  }));
-
-  it('should set html from markdown params', function () {
-    expect($scope).to.not.have.property('html');
-    $scope.vis.params.markdown = 'This is a test of the [markdown](http://daringfireball.net/projects/markdown) vis.';
-    applyChanges();
-
-    expect($scope).to.have.property('html');
-    expect($scope.html.toString().indexOf('<a href')).to.be.greaterThan(-1);
-  });
-});

src/core_plugins/markdown_vis/public/markdown_vis.html

@@ -1,8 +0,0 @@
-<div ng-controller="KbnMarkdownVisController" class="markdown-vis">
-    <div
-      ng-bind-html="html"
-      class="markdown-body"
-      ng-style="{'font-size': vis.params.fontSize + 'pt'}"
-      data-test-subj="markdownBody"
-    ></div>
-</div>

src/core_plugins/markdown_vis/public/markdown_vis.js

@@ -1,8 +1,7 @@
 import 'plugins/markdown_vis/markdown_vis.less';
-import 'plugins/markdown_vis/markdown_vis_controller';
+import { MarkdownVisComponent } from './markdown_vis_controller';
 import { VisFactoryProvider } from 'ui/vis/vis_factory';
 import { CATEGORY } from 'ui/vis/vis_category';
-import markdownVisTemplate from 'plugins/markdown_vis/markdown_vis.html';
 import markdownVisParamsTemplate from 'plugins/markdown_vis/markdown_vis_params.html';
 import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
 import image from './images/icon-markdown.svg';
@@ -19,7 +18,7 @@ function MarkdownVisProvider(Private) {
 
   // return the visType object, which kibana will use to display and configure new
   // Vis object of this type.
-  return VisFactory.createAngularVisualization({
+  return VisFactory.createReactVisualization({
     name: 'markdown',
     title: 'Markdown',
     isAccessible: true,
@@ -27,7 +26,7 @@ function MarkdownVisProvider(Private) {
     description: 'Create a document using markdown syntax',
     category: CATEGORY.OTHER,
     visConfig: {
-      template: markdownVisTemplate,
+      component: MarkdownVisComponent,
       defaults: {
         fontSize: 12
       }

src/core_plugins/markdown_vis/public/markdown_vis_controller.js

@@ -1,19 +1,21 @@
-import _ from 'lodash';
 import MarkdownIt from 'markdown-it';
-import { uiModules } from 'ui/modules';
-import 'angular-sanitize';
+import React from 'react';
 
 const markdownIt = new MarkdownIt({
   html: false,
   linkify: true
 });
 
-const module = uiModules.get('kibana/markdown_vis', ['kibana', 'ngSanitize']);
-module.controller('KbnMarkdownVisController', function ($scope) {
-  $scope.$watch('renderComplete', function () {
-    if ($scope.updateStatus.params && _.get($scope, 'vis.params.markdown', null)) {
-      $scope.html = markdownIt.render($scope.vis.params.markdown);
-    }
-    $scope.renderComplete();
-  });
-});
+export function MarkdownVisComponent(props) {
+  const visParams = props.vis.params;
+  return (
+    <div className="markdown-vis">
+      <div
+        className="markdown-body"
+        data-test-subj="markdownBody"
+        style={{ fontSize: `${visParams.fontSize}pt` }}
+        dangerouslySetInnerHTML={{ __html: markdownIt.render(visParams.markdown || '') }}
+      />
+    </div>
+  );
+}

src/core_plugins/markdown_vis/public/markdown_vis_controller.test.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { MarkdownVisComponent } from './markdown_vis_controller';
+
+describe('markdown vis controller', () => {
+  it('should set html from markdown params', () => {
+    const vis = {
+      params: {
+        markdown: 'This is a test of the [markdown](http://daringfireball.net/projects/markdown) vis.'
+      }
+    };
+
+    const wrapper = render(<MarkdownVisComponent vis={vis} />);
+    expect(wrapper.find('a').text()).toBe('markdown');
+  });
+
+  it('should not render the html', () => {
+    const vis = {
+      params: {
+        markdown: 'Testing <a>html</a>'
+      }
+    };
+
+    const wrapper = render(<MarkdownVisComponent vis={vis} />);
+    expect(wrapper.text()).toBe('Testing <a>html</a>\n');
+  });
+});

src/ui/public/vis/vis_types/react_vis_type.js

@@ -14,8 +14,7 @@ export function ReactVisTypeProvider(Private, getAppState, config) {
     render(visData) {
       this.visData = visData;
 
-      return new Promise((resolve, reject) => {
-        if (!this.visData) return reject();
+      return new Promise((resolve) => {
         const Component = this.vis.type.visConfig.component;
         render(<Component config={config} vis={this.vis} appState={getAppState()} visData={visData} renderComplete={resolve} />, this.el);
       });