From 74f33c3c42632fd49fda527c1662d10697e84560 Mon Sep 17 00:00:00 2001 From: Christian Vogt Date: Wed, 26 Jun 2024 14:25:35 -0400 Subject: [PATCH] fix monaco editor loading external files from cdn --- frontend/jest.config.js | 3 ++- frontend/package-lock.json | 25 +++++-------------- frontend/package.json | 9 +++---- .../__tests__/cypress/cypress/support/e2e.ts | 13 ---------- .../__tests__/unit/__mocks__/monaco-editor.ts | 1 + .../src/components/MaxHeightCodeEditor.tsx | 4 +++ .../codeEditor/DashboardCodeEditor.tsx | 4 +++ 7 files changed, 20 insertions(+), 39 deletions(-) create mode 100644 frontend/src/__tests__/unit/__mocks__/monaco-editor.ts diff --git a/frontend/jest.config.js b/frontend/jest.config.js index 5ae220357b..9474a1af40 100644 --- a/frontend/jest.config.js +++ b/frontend/jest.config.js @@ -20,6 +20,7 @@ module.exports = { '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '/config/transform.file.js', '~/(.*)': '/src/$1', + '^monaco-editor$': '/src/__tests__/unit/__mocks__/monaco-editor.ts', }, // The test environment that will be used for testing. @@ -27,7 +28,7 @@ module.exports = { // include projects from node_modules as required transformIgnorePatterns: [ - 'node_modules/(?!yaml|@openshift|lodash-es|uuid|@patternfly|d3|delaunator|robust-predicates|internmap)', + 'node_modules/(?!yaml|@openshift|lodash-es|uuid|@patternfly|d3|delaunator|robust-predicates|internmap|monaco-editor)', ], // A list of paths to snapshot serializer modules Jest should use for snapshot testing diff --git a/frontend/package-lock.json b/frontend/package-lock.json index f8d6875b5c..1f5af8a8f9 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "license": "ISC", "dependencies": { + "@monaco-editor/react": "^4.6.0", "@openshift/dynamic-plugin-sdk": "^4.0.0", "@openshift/dynamic-plugin-sdk-utils": "^4.0.1", "@patternfly/patternfly": "^5.3.1", @@ -34,12 +35,11 @@ "grpc-web": "^1.2.1", "lodash-es": "^4.17.15", "long": "^5.2.3", - "monaco-editor": "^0.31.1", - "monaco-editor-webpack-plugin": "^7.0.1", + "monaco-editor": "^0.50.0", + "monaco-editor-webpack-plugin": "^7.1.0", "react": "^18.2.0", "react-cool-dimensions": "^2.0.5", "react-dom": "^18.2.0", - "react-monaco-editor": "^0.51.0", "react-redux": "^8.0.4", "react-router": "^6.4.1", "react-router-dom": "^6.4.1", @@ -17938,9 +17938,9 @@ } }, "node_modules/monaco-editor": { - "version": "0.31.1", - "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.31.1.tgz", - "integrity": "sha512-FYPwxGZAeP6mRRyrr5XTGHD9gRXVjy7GUzF4IPChnyt3fS5WrNxIkS8DNujWf6EQy0Zlzpxw8oTVE+mWI2/D1Q==" + "version": "0.50.0", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.50.0.tgz", + "integrity": "sha512-8CclLCmrRRh+sul7C08BmPBP3P8wVWfBHomsTcndxg5NRCEPfu/mc2AGU8k37ajjDVXcXFc12ORAMUkmk+lkFA==" }, "node_modules/monaco-editor-webpack-plugin": { "version": "7.1.0", @@ -19996,19 +19996,6 @@ "react-dom": ">0.13.0" } }, - "node_modules/react-monaco-editor": { - "version": "0.51.0", - "resolved": "https://registry.npmjs.org/react-monaco-editor/-/react-monaco-editor-0.51.0.tgz", - "integrity": "sha512-6jx1V8p6gHVKJHFaTvicOtmlhFjOJhekobeNd92ZAo7F5UvAin1cF7bxWLCKgtxClYZ7CB3Ar284Kpbhj22FpQ==", - "dependencies": { - "prop-types": "^15.8.1" - }, - "peerDependencies": { - "@types/react": ">=17 <= 18", - "monaco-editor": "^0.34.1", - "react": ">=17 <= 18" - } - }, "node_modules/react-redux": { "version": "8.1.3", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.3.tgz", diff --git a/frontend/package.json b/frontend/package.json index 29a6a2a00c..9a2c84805b 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -52,6 +52,7 @@ "cypress:format": "prettier --write src/__tests__/**/*.snap.json" }, "dependencies": { + "@monaco-editor/react": "^4.6.0", "@openshift/dynamic-plugin-sdk": "^4.0.0", "@openshift/dynamic-plugin-sdk-utils": "^4.0.1", "@patternfly/patternfly": "^5.3.1", @@ -77,12 +78,11 @@ "grpc-web": "^1.2.1", "lodash-es": "^4.17.15", "long": "^5.2.3", - "monaco-editor": "^0.31.1", - "monaco-editor-webpack-plugin": "^7.0.1", + "monaco-editor": "^0.50.0", + "monaco-editor-webpack-plugin": "^7.1.0", "react": "^18.2.0", "react-cool-dimensions": "^2.0.5", "react-dom": "^18.2.0", - "react-monaco-editor": "^0.51.0", "react-redux": "^8.0.4", "react-router": "^6.4.1", "react-router-dom": "^6.4.1", @@ -198,9 +198,6 @@ }, "@patternfly/react-topology": { "react": "^18.2.0" - }, - "react-monaco-editor": { - "monaco-editor": "^0.31.1" } } } diff --git a/frontend/src/__tests__/cypress/cypress/support/e2e.ts b/frontend/src/__tests__/cypress/cypress/support/e2e.ts index 2c2058294b..0a7a892fbb 100644 --- a/frontend/src/__tests__/cypress/cypress/support/e2e.ts +++ b/frontend/src/__tests__/cypress/cypress/support/e2e.ts @@ -28,19 +28,6 @@ Cypress.Keyboard.defaults({ keystrokeDelay: 0, }); -if (Cypress.env('MOCK')) { - Cypress.on('uncaught:exception', (error) => { - // Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'https://cdn.jsdelivr.net/npm/monaco-editor@0.43.0/min/vs/base/worker/workerMain.js' failed to load. - if ( - error.message.includes("Failed to execute 'importScripts' on 'WorkerGlobalScope'") && - error.message.includes('monaco-editor') - ) { - return false; - } - return undefined; - }); -} - beforeEach(() => { if (Cypress.env('MOCK')) { // fallback: return 404 for all api requests diff --git a/frontend/src/__tests__/unit/__mocks__/monaco-editor.ts b/frontend/src/__tests__/unit/__mocks__/monaco-editor.ts new file mode 100644 index 0000000000..f053ebf797 --- /dev/null +++ b/frontend/src/__tests__/unit/__mocks__/monaco-editor.ts @@ -0,0 +1 @@ +module.exports = {}; diff --git a/frontend/src/components/MaxHeightCodeEditor.tsx b/frontend/src/components/MaxHeightCodeEditor.tsx index b246a77302..194d629d2c 100644 --- a/frontend/src/components/MaxHeightCodeEditor.tsx +++ b/frontend/src/components/MaxHeightCodeEditor.tsx @@ -1,5 +1,9 @@ import React from 'react'; import { CodeEditor } from '@patternfly/react-code-editor'; +import * as monaco from 'monaco-editor'; +import { loader } from '@monaco-editor/react'; + +loader.config({ monaco }); export const MaxHeightCodeEditor: React.FC< Partial, 'ref'>> & { maxHeight: number } diff --git a/frontend/src/concepts/dashboard/codeEditor/DashboardCodeEditor.tsx b/frontend/src/concepts/dashboard/codeEditor/DashboardCodeEditor.tsx index df9bd5783e..359b3d33f0 100644 --- a/frontend/src/concepts/dashboard/codeEditor/DashboardCodeEditor.tsx +++ b/frontend/src/concepts/dashboard/codeEditor/DashboardCodeEditor.tsx @@ -1,8 +1,12 @@ import * as React from 'react'; import { CodeEditor, CodeEditorProps } from '@patternfly/react-code-editor'; +import * as monaco from 'monaco-editor'; +import { loader } from '@monaco-editor/react'; import './DashboardCodeEditor.scss'; +loader.config({ monaco }); + type DashboardCodeEditorProps = Omit & { testId?: string; };