adding markdown vis renderer (#75532) (#75628)

src/plugins/vis_type_markdown/kibana.json

@@ -4,5 +4,5 @@
     "ui": true,
     "server": true,
     "requiredPlugins": ["expressions", "visualizations"],
-    "requiredBundles": ["kibanaUtils", "kibanaReact", "data", "charts"]
+    "requiredBundles": ["kibanaUtils", "kibanaReact", "data", "charts", "visualizations", "expressions"]
 }

src/plugins/vis_type_markdown/public/markdown_fn.ts

@@ -26,12 +26,14 @@ interface RenderValue {
   visConfig: MarkdownVisParams;
 }
 
-export const createMarkdownVisFn = (): ExpressionFunctionDefinition<
+export type MarkdownVisExpressionFunctionDefinition = ExpressionFunctionDefinition<
   'markdownVis',
   unknown,
   Arguments,
   Render<RenderValue>
-> => ({
+>;
+
+export const createMarkdownVisFn = (): MarkdownVisExpressionFunctionDefinition => ({
   name: 'markdownVis',
   type: 'render',
   inputTypes: [],
@@ -65,7 +67,7 @@ export const createMarkdownVisFn = (): ExpressionFunctionDefinition<
   fn(input, args) {
     return {
       type: 'render',
-      as: 'visualization',
+      as: 'markdown_vis',
       value: {
         visType: 'markdown',
         visConfig: {

src/plugins/vis_type_markdown/public/markdown_renderer.tsx

@@ -0,0 +1,57 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { VisualizationContainer } from '../../visualizations/public';
+import { ExpressionRenderDefinition } from '../../expressions/common/expression_renderers';
+import { MarkdownVisWrapper } from './markdown_vis_controller';
+import { StartServicesGetter } from '../../kibana_utils/public';
+
+export const getMarkdownRenderer = (start: StartServicesGetter) => {
+  const markdownVisRenderer: () => ExpressionRenderDefinition = () => ({
+    name: 'markdown_vis',
+    displayName: 'markdown visualization',
+    reuseDomNode: true,
+    render: async (domNode: HTMLElement, config: any, handlers: any) => {
+      const { visConfig } = config;
+
+      const I18nContext = await start().core.i18n.Context;
+
+      handlers.onDestroy(() => {
+        unmountComponentAtNode(domNode);
+      });
+
+      render(
+        <I18nContext>
+          <VisualizationContainer className="markdownVis">
+            <MarkdownVisWrapper
+              visParams={visConfig}
+              renderComplete={handlers.done}
+              fireEvent={handlers.event}
+            />
+          </VisualizationContainer>
+        </I18nContext>,
+        domNode
+      );
+    },
+  });
+
+  return markdownVisRenderer;
+};

src/plugins/vis_type_markdown/public/markdown_vis.ts

@@ -19,10 +19,10 @@
 
 import { i18n } from '@kbn/i18n';
 
-import { MarkdownVisWrapper } from './markdown_vis_controller';
 import { MarkdownOptions } from './markdown_options';
 import { SettingsOptions } from './settings_options_lazy';
 import { DefaultEditorSize } from '../../vis_default_editor/public';
+import { toExpressionAst } from './to_ast';
 
 export const markdownVisDefinition = {
   name: 'markdown',
@@ -32,8 +32,8 @@ export const markdownVisDefinition = {
   description: i18n.translate('visTypeMarkdown.markdownDescription', {
     defaultMessage: 'Create a document using markdown syntax',
   }),
+  toExpressionAst,
   visConfig: {
-    component: MarkdownVisWrapper,
     defaults: {
       fontSize: 12,
       openLinksInNewTab: false,

src/plugins/vis_type_markdown/public/markdown_vis_controller.test.tsx

@@ -25,39 +25,45 @@ describe('markdown vis controller', () => {
   it('should set html from markdown params', () => {
     const vis = {
       params: {
+        openLinksInNewTab: false,
+        fontSize: 16,
         markdown:
           'This is a test of the [markdown](http://daringfireball.net/projects/markdown) vis.',
       },
     };
 
     const wrapper = render(
-      <MarkdownVisWrapper vis={vis} visParams={vis.params} renderComplete={jest.fn()} />
+      <MarkdownVisWrapper visParams={vis.params} renderComplete={jest.fn()} fireEvent={jest.fn()} />
     );
     expect(wrapper.find('a').text()).toBe('markdown');
   });
 
   it('should not render the html', () => {
     const vis = {
       params: {
+        openLinksInNewTab: false,
+        fontSize: 16,
         markdown: 'Testing <a>html</a>',
       },
     };
 
     const wrapper = render(
-      <MarkdownVisWrapper vis={vis} visParams={vis.params} renderComplete={jest.fn()} />
+      <MarkdownVisWrapper visParams={vis.params} renderComplete={jest.fn()} fireEvent={jest.fn()} />
     );
     expect(wrapper.text()).toBe('Testing <a>html</a>\n');
   });
 
   it('should update the HTML when render again with changed params', () => {
     const vis = {
       params: {
+        openLinksInNewTab: false,
+        fontSize: 16,
         markdown: 'Initial',
       },
     };
 
     const wrapper = mount(
-      <MarkdownVisWrapper vis={vis} visParams={vis.params} renderComplete={jest.fn()} />
+      <MarkdownVisWrapper visParams={vis.params} renderComplete={jest.fn()} fireEvent={jest.fn()} />
     );
     expect(wrapper.text().trim()).toBe('Initial');
     vis.params.markdown = 'Updated';
@@ -66,52 +72,68 @@ describe('markdown vis controller', () => {
   });
 
   describe('renderComplete', () => {
+    const vis = {
+      params: {
+        openLinksInNewTab: false,
+        fontSize: 16,
+        markdown: 'test',
+      },
+    };
+
+    const renderComplete = jest.fn();
+
+    beforeEach(() => {
+      renderComplete.mockClear();
+    });
+
     it('should be called on initial rendering', () => {
-      const vis = {
-        params: {
-          markdown: 'test',
-        },
-      };
-      const renderComplete = jest.fn();
       mount(
-        <MarkdownVisWrapper vis={vis} visParams={vis.params} renderComplete={renderComplete} />
+        <MarkdownVisWrapper
+          visParams={vis.params}
+          renderComplete={renderComplete}
+          fireEvent={jest.fn()}
+        />
       );
       expect(renderComplete.mock.calls.length).toBe(1);
     });
 
     it('should be called on successive render when params change', () => {
-      const vis = {
-        params: {
-          markdown: 'test',
-        },
-      };
-      const renderComplete = jest.fn();
       mount(
-        <MarkdownVisWrapper vis={vis} visParams={vis.params} renderComplete={renderComplete} />
+        <MarkdownVisWrapper
+          visParams={vis.params}
+          renderComplete={renderComplete}
+          fireEvent={jest.fn()}
+        />
       );
       expect(renderComplete.mock.calls.length).toBe(1);
       renderComplete.mockClear();
       vis.params.markdown = 'changed';
       mount(
-        <MarkdownVisWrapper vis={vis} visParams={vis.params} renderComplete={renderComplete} />
+        <MarkdownVisWrapper
+          visParams={vis.params}
+          renderComplete={renderComplete}
+          fireEvent={jest.fn()}
+        />
       );
       expect(renderComplete.mock.calls.length).toBe(1);
     });
 
     it('should be called on successive render even without data change', () => {
-      const vis = {
-        params: {
-          markdown: 'test',
-        },
-      };
-      const renderComplete = jest.fn();
       mount(
-        <MarkdownVisWrapper vis={vis} visParams={vis.params} renderComplete={renderComplete} />
+        <MarkdownVisWrapper
+          visParams={vis.params}
+          renderComplete={renderComplete}
+          fireEvent={jest.fn()}
+        />
       );
       expect(renderComplete.mock.calls.length).toBe(1);
       renderComplete.mockClear();
       mount(
-        <MarkdownVisWrapper vis={vis} visParams={vis.params} renderComplete={renderComplete} />
+        <MarkdownVisWrapper
+          visParams={vis.params}
+          renderComplete={renderComplete}
+          fireEvent={jest.fn()}
+        />
       );
       expect(renderComplete.mock.calls.length).toBe(1);
     });

src/plugins/vis_type_markdown/public/markdown_vis_controller.tsx

@@ -22,7 +22,7 @@ import { Markdown } from '../../kibana_react/public';
 import { MarkdownVisParams } from './types';
 
 interface MarkdownVisComponentProps extends MarkdownVisParams {
-  renderComplete: () => {};
+  renderComplete: () => void;
 }
 
 /**
@@ -80,7 +80,14 @@ class MarkdownVisComponent extends React.Component<MarkdownVisComponentProps> {
  * The way React works, this wrapper nearly brings no overhead, but allows us
  * to use proper lifecycle methods in the actual component.
  */
-export function MarkdownVisWrapper(props: any) {
+
+export interface MarkdownVisWrapperProps {
+  visParams: MarkdownVisParams;
+  fireEvent: (event: any) => void;
+  renderComplete: () => void;
+}
+
+export function MarkdownVisWrapper(props: MarkdownVisWrapperProps) {
   return (
     <MarkdownVisComponent
       fontSize={props.visParams.fontSize}

src/plugins/vis_type_markdown/public/plugin.ts

@@ -26,6 +26,8 @@ import { createMarkdownVisFn } from './markdown_fn';
 import { ConfigSchema } from '../config';
 
 import './index.scss';
+import { getMarkdownRenderer } from './markdown_renderer';
+import { createStartServicesGetter } from '../../kibana_utils/public';
 
 /** @internal */
 export interface MarkdownPluginSetupDependencies {
@@ -42,7 +44,9 @@ export class MarkdownPlugin implements Plugin<void, void> {
   }
 
   public setup(core: CoreSetup, { expressions, visualizations }: MarkdownPluginSetupDependencies) {
-    visualizations.createReactVisualization(markdownVisDefinition);
+    const start = createStartServicesGetter(core.getStartServices);
+    visualizations.createBaseVisualization(markdownVisDefinition);
+    expressions.registerRenderer(getMarkdownRenderer(start));
     expressions.registerFunction(createMarkdownVisFn);
   }