fix monaco editor loading external files from cdn

frontend/jest.config.js

@@ -20,14 +20,15 @@ module.exports = {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/config/transform.file.js',
     '~/(.*)': '<rootDir>/src/$1',
+    '^monaco-editor$': '<rootDir>/src/__tests__/unit/__mocks__/monaco-editor.ts',
   },
 
   // The test environment that will be used for testing.
   testEnvironment: 'jest-environment-jsdom',
 
   // 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

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"
     }
   }
 }

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/[email protected]/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

frontend/src/__tests__/unit/__mocks__/monaco-editor.ts

@@ -0,0 +1 @@
+module.exports = {};

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<Omit<React.ComponentProps<typeof CodeEditor>, 'ref'>> & { maxHeight: number }

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<CodeEditorProps, 'ref'> & {
   testId?: string;
 };