From 10001346272464aeadd5b1942f9b5a216127ac21 Mon Sep 17 00:00:00 2001 From: Corey Robertson Date: Fri, 25 Sep 2020 12:56:44 -0400 Subject: [PATCH 1/2] Move Handlebars and Flot dependencies out of main bundle --- .../canvas_plugin_src/functions/browser/markdown.ts | 8 ++++---- .../canvas/canvas_plugin_src/renderers/pie/index.tsx | 6 ++++-- .../canvas/canvas_plugin_src/renderers/plot/index.ts | 6 ++++-- x-pack/plugins/canvas/common/lib/index.ts | 2 -- 4 files changed, 12 insertions(+), 10 deletions(-) diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.ts index 947106fd9397a..aa73eba456481 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.ts @@ -10,8 +10,6 @@ import { Style, ExpressionFunctionDefinition, } from 'src/plugins/expressions/common'; -// @ts-expect-error untyped local -import { Handlebars } from '../../../common/lib/handlebars'; import { getFunctionHelp } from '../../../i18n'; type Context = Datatable | null; @@ -32,7 +30,7 @@ export function markdown(): ExpressionFunctionDefinition< 'markdown', Context, Arguments, - Render + Promise> > { const { help, args: argHelp } = getFunctionHelp().markdown; @@ -61,7 +59,9 @@ export function markdown(): ExpressionFunctionDefinition< default: false, }, }, - fn: (input, args) => { + fn: async (input, args) => { + // @ts-expect-error untyped local + const { Handlebars } = await import('../../../common/lib/handlebars'); const compileFunctions = args.content.map((str) => Handlebars.compile(String(str), { knownHelpersOnly: true }) ); diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/pie/index.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/pie/index.tsx index 622e73ccf2223..29e823e0a373b 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/pie/index.tsx +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/pie/index.tsx @@ -6,7 +6,6 @@ // This bit of hackiness is required because this isn't part of the main kibana bundle import 'jquery'; -import '../../lib/flot-charts'; import { debounce, includes } from 'lodash'; import { RendererStrings } from '../../../i18n'; @@ -22,7 +21,10 @@ export const pie: RendererFactory = () => ({ displayName: strings.getDisplayName(), help: strings.getHelpDescription(), reuseDomNode: false, - render(domNode, config, handlers) { + render: async (domNode, config, handlers) => { + // @ts-expect-error + await import('../../lib/flot-charts'); + if (!includes($.plot.plugins, piePlugin)) { $.plot.plugins.push(piePlugin); } diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/plot/index.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/plot/index.ts index 8c84f54f8746b..9d70ca418f491 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/plot/index.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/plot/index.ts @@ -6,7 +6,6 @@ // This bit of hackiness is required because this isn't part of the main kibana bundle import 'jquery'; -import '../../lib/flot-charts'; import { debounce, includes } from 'lodash'; import { RendererStrings } from '../../../i18n'; @@ -18,7 +17,10 @@ import { text } from './plugins/text'; const { plot: strings } = RendererStrings; -const render: RendererSpec['render'] = (domNode, config, handlers) => { +const render: RendererSpec['render'] = async (domNode, config, handlers) => { + // @ts-expect-error + await import('../../lib/flot-charts'); + // TODO: OH NOES if (!includes($.plot.plugins, size)) { $.plot.plugins.push(size); diff --git a/x-pack/plugins/canvas/common/lib/index.ts b/x-pack/plugins/canvas/common/lib/index.ts index 055f6ce7739b7..c8ae53917c9e4 100644 --- a/x-pack/plugins/canvas/common/lib/index.ts +++ b/x-pack/plugins/canvas/common/lib/index.ts @@ -20,8 +20,6 @@ export * from './get_colors_from_palette'; export * from './get_field_type'; // @ts-expect-error missing local definition export * from './get_legend_config'; -// @ts-expect-error missing local definition -export * from './handlebars'; export * from './hex_to_rgb'; export * from './httpurl'; export * from './missing_asset'; From c28c2b0061eaf7edb572c2ac84f9c9e3d5b88320 Mon Sep 17 00:00:00 2001 From: Corey Robertson Date: Mon, 28 Sep 2020 09:36:19 -0400 Subject: [PATCH 2/2] Fix unit test --- .../functions/browser/markdown.test.js | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.test.js index 71b6af6739408..1c75f5b7e0fbc 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.test.js +++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.test.js @@ -12,16 +12,16 @@ import { markdown } from './markdown'; describe('markdown', () => { const fn = functionWrapper(markdown); - it('returns a render as markdown', () => { - const result = fn(null, { content: [''], font: fontStyle }); + it('returns a render as markdown', async () => { + const result = await fn(null, { content: [''], font: fontStyle }); expect(result).toHaveProperty('type', 'render'); expect(result).toHaveProperty('as', 'markdown'); }); describe('args', () => { describe('content', () => { - it('sets the content to all strings in expression concatenated', () => { - const result = fn(null, { + it('sets the content to all strings in expression concatenated', async () => { + const result = await fn(null, { content: ['# this ', 'is ', 'some ', 'markdown'], font: fontStyle, }); @@ -29,11 +29,11 @@ describe('markdown', () => { expect(result.value).toHaveProperty('content', '# this is some markdown'); }); - it('compiles and concatenates handlebars expressions using context', () => { + it('compiles and concatenates handlebars expressions using context', async () => { let expectedContent = 'Columns:'; testTable.columns.map((col) => (expectedContent += ` ${col.name}`)); - const result = fn(testTable, { + const result = await fn(testTable, { content: ['Columns:', '{{#each columns}} {{name}}{{/each}}'], }); @@ -42,8 +42,8 @@ describe('markdown', () => { }); describe('font', () => { - it('sets the font style for the markdown', () => { - const result = fn(null, { + it('sets the font style for the markdown', async () => { + const result = await fn(null, { content: ['some ', 'markdown'], font: fontStyle, }); @@ -55,8 +55,8 @@ describe('markdown', () => { // it("defaults to the expression '{font}'", () => {}); }); describe('openLinksInNewTab', () => { - it('sets the value of openLinksInNewTab to true ', () => { - const result = fn(null, { + it('sets the value of openLinksInNewTab to true ', async () => { + const result = await fn(null, { content: ['some ', 'markdown'], openLinksInNewTab: true, }); @@ -64,8 +64,8 @@ describe('markdown', () => { expect(result.value).toHaveProperty('openLinksInNewTab', true); }); - it('sets the value of openLinksInNewTab to false ', () => { - const result = fn(null, { + it('sets the value of openLinksInNewTab to false ', async () => { + const result = await fn(null, { content: ['some ', 'markdown'], openLinksInNewTab: false, }); @@ -73,8 +73,8 @@ describe('markdown', () => { expect(result.value).toHaveProperty('openLinksInNewTab', false); }); - it('defaults the value of openLinksInNewTab to false ', () => { - const result = fn(null, { + it('defaults the value of openLinksInNewTab to false ', async () => { + const result = await fn(null, { content: ['some ', 'markdown'], });