diff --git a/src/plugins/vis_type_script/public/expression/fn.ts b/src/plugins/vis_type_script/public/expression/fn.ts index 5d41e9f1a68b3..3448555b17560 100644 --- a/src/plugins/vis_type_script/public/expression/fn.ts +++ b/src/plugins/vis_type_script/public/expression/fn.ts @@ -34,7 +34,15 @@ export const createScriptVisFn = (): ScriptVisExpressionFunctionDefinition => ({ defaultMessage: 'Visualization script', }), }, - dependencyUrls: { + scriptDependencyUrls: { + types: ['string'], + multi: true, + required: true, + help: i18n.translate('visTypeScript.function.markdown.help', { + defaultMessage: 'List of script dependencies', + }), + }, + styleDependencyUrls: { types: ['string'], multi: true, required: true, @@ -51,7 +59,8 @@ export const createScriptVisFn = (): ScriptVisExpressionFunctionDefinition => ({ visType: 'script', visParams: { script: args.script, - dependencyUrls: args.dependencyUrls, + scriptDependencyUrls: args.scriptDependencyUrls, + styleDependencyUrls: args.styleDependencyUrls, }, visSearchContext: { timeRange: input?.timeRange, diff --git a/src/plugins/vis_type_script/public/expression/renderer.tsx b/src/plugins/vis_type_script/public/expression/renderer.tsx index 2e3f743813b67..c2094185de32e 100644 --- a/src/plugins/vis_type_script/public/expression/renderer.tsx +++ b/src/plugins/vis_type_script/public/expression/renderer.tsx @@ -45,7 +45,8 @@ export const scriptVisRenderer: ( = (vis) => { const scriptVis = buildExpressionFunction('scriptVis', { script: vis.params.script, - dependencyUrls: vis.params.dependencyUrls, + scriptDependencyUrls: vis.params.scriptDependencyUrls, + styleDependencyUrls: vis.params.styleDependencyUrls, }); const ast = buildExpression([scriptVis]); diff --git a/src/plugins/vis_type_script/public/renderer/index.tsx b/src/plugins/vis_type_script/public/renderer/index.tsx index d8dadbf87875d..5051374fc063e 100644 --- a/src/plugins/vis_type_script/public/renderer/index.tsx +++ b/src/plugins/vis_type_script/public/renderer/index.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import React, { useEffect, useState, useMemo } from 'react'; +import React, { useEffect, useState, useMemo, useCallback } from 'react'; import { createEndpoint, fromIframe } from '@remote-ui/rpc'; import './index.scss'; @@ -23,13 +23,19 @@ import { export const KIBANA_API_CONSTANT_NAME = 'KIBANA'; -const getSandboxDocument = (script: string, dependencies: string[], nonce: string) => { +const getSandboxDocument = ( + script: string, + scriptDependencies: string[], + styleDependencies: string[], + nonce: string +) => { return ` - - ${dependencies + + ${styleDependencies.map((dep) => ``).join('')} + ${scriptDependencies .map((dependency) => ``) .join('')}