diff --git a/jest.config.js b/jest.config.js index 79fd52a1..7c8a68af 100644 --- a/jest.config.js +++ b/jest.config.js @@ -2,7 +2,7 @@ // generally used by snapshots, but can affect specific tests process.env.TZ = 'UTC'; +// Jest configuration provided by Grafana scaffolding module.exports = { - // Jest configuration provided by Grafana scaffolding ...require('./.config/jest.config'), }; diff --git a/src/components/QueryEditor/OpenAIEditor.tsx b/src/components/QueryEditor/OpenAIEditor.tsx index f097bf50..51c5db9e 100644 --- a/src/components/QueryEditor/OpenAIEditor.tsx +++ b/src/components/QueryEditor/OpenAIEditor.tsx @@ -129,15 +129,38 @@ export const OpenAIEditor: React.FC = (props) => { signatureHelpTriggerCharacters: ['(', ')'], provideSignatureHelp: getSignatureHelp, }); - monaco.languages['kusto'] - .getKustoWorker() - .then((kusto) => { - const model = editor.getModel(); - return model && kusto(model.uri); - }) - .then((worker) => { - setWorker(worker); - }); + + const model = editor.getModel(); + + // Handle cases where kusto is already loaded or will be loaded via AMD + if (monaco.languages['kusto'] && monaco.languages['kusto'].getKustoWorker) { + monaco.languages['kusto'] + .getKustoWorker() + .then((kusto) => { + return model && kusto(model.uri); + }) + .then((worker) => { + setWorker(worker); + }); + } else { + // Handle cases where kusto should be loaded via ESM web worker (Grafana 10.3.x) + if ('System' in window) { + window.System.import('@kusto/monaco-kusto').then((kustoModule) => { + if (kustoModule && kustoModule.getKustoWorker) { + kustoModule + .getKustoWorker() + .then((workerAccessor) => { + return model && workerAccessor(model.uri); + }) + .then((worker) => { + setWorker(worker); + }); + } else { + console.log('kusto monaco language failed to load.'); + } + }); + } + } }; useEffect(() => { diff --git a/src/components/QueryEditor/RawQueryEditor.tsx b/src/components/QueryEditor/RawQueryEditor.tsx index e9399c57..045f5c75 100644 --- a/src/components/QueryEditor/RawQueryEditor.tsx +++ b/src/components/QueryEditor/RawQueryEditor.tsx @@ -50,15 +50,38 @@ export const RawQueryEditor: React.FC = (props) => { signatureHelpTriggerCharacters: ['(', ')'], provideSignatureHelp: getSignatureHelp, }); - monaco.languages['kusto'] - .getKustoWorker() - .then((kusto) => { - const model = editor.getModel(); - return model && kusto(model.uri); - }) - .then((worker) => { - setWorker(worker); - }); + + const model = editor.getModel(); + + // Handle cases where kusto is already loaded or will be loaded via AMD + if (monaco.languages['kusto'] && monaco.languages['kusto'].getKustoWorker) { + monaco.languages['kusto'] + .getKustoWorker() + .then((kusto) => { + return model && kusto(model.uri); + }) + .then((worker) => { + setWorker(worker); + }); + } else { + // Handle cases where kusto should be loaded via ESM web worker (Grafana 10.3.x) + if ('System' in window) { + window.System.import('@kusto/monaco-kusto').then((kustoModule) => { + if (kustoModule && kustoModule.getKustoWorker) { + kustoModule + .getKustoWorker() + .then((workerAccessor) => { + return model && workerAccessor(model.uri); + }) + .then((worker) => { + setWorker(worker); + }); + } else { + console.log('kusto monaco language failed to load.'); + } + }); + } + } }; useEffect(() => { diff --git a/src/global.d.ts b/src/global.d.ts new file mode 100644 index 00000000..cf81ffaa --- /dev/null +++ b/src/global.d.ts @@ -0,0 +1,12 @@ +export declare global { + interface Window { + System: { + import: (identifier: string) => Promise; + }; + } + + interface Module { + default?: any; + [exportName: string]: any; + } +} diff --git a/src/monaco/KustoMonacoEditor.tsx b/src/monaco/KustoMonacoEditor.tsx index 88af4016..526253d9 100644 --- a/src/monaco/KustoMonacoEditor.tsx +++ b/src/monaco/KustoMonacoEditor.tsx @@ -37,7 +37,7 @@ export class KustoMonacoEditor extends React.Component { if (!window.hasOwnProperty('monaco')) { // using the standard import() here causes issues with webpack/babel/typescript because monaco is just so large - (window as any).System.import(`${props.pluginBaseUrl}/libs/monaco.min.js`).then(() => { + window.System.import(`${props.pluginBaseUrl}/libs/monaco.min.js`).then(() => { setTimeout(() => { this.initMonaco(); }, 1); diff --git a/src/test/setupTests.ts b/src/test/setupTests.ts deleted file mode 100644 index 7b0828bf..00000000 --- a/src/test/setupTests.ts +++ /dev/null @@ -1 +0,0 @@ -import '@testing-library/jest-dom';