fix(monaco): Do not use CDN version of monaco-editor (fixes #1186) (#…

…1187)

(cherry picked from commit f0805fa)

app/package.json

@@ -20,6 +20,7 @@
     "css-loader": "^7.1.2",
     "html-webpack-plugin": "^5.6.0",
     "jest": "^29.7.0",
+    "monaco-editor": "^0.52.0",
     "monaco-editor-webpack-plugin": "^7.1.0",
     "style-loader": "^4.0.0",
     "swc-loader": "^0.2.6",

packages/hawtio/jest.config.ts

@@ -15,6 +15,8 @@ const config: Config = {
     '\\.(css|less)$': '<rootDir>/src/__mocks__/styleMock.js',
     '@hawtiosrc/(.*)': '<rootDir>/src/$1',
     'react-markdown': '<rootDir>/../../node_modules/react-markdown/react-markdown.min.js',
+    'monaco-editor': path.resolve(__dirname, './src/__mocks__/monacoEditor.js'),
+    '@monaco-editor/react': path.resolve(__dirname, './src/__mocks__/monacoEditor.js'),
     '@patternfly/react-code-editor': path.resolve(__dirname, './src/__mocks__/codeEditorMock.js'),
     oauth4webapi: path.resolve(__dirname, './src/__mocks__/oauth4webapi.js'),
   },

packages/hawtio/package.json

@@ -37,6 +37,7 @@
     "@hawtio/camel-model-v4_8": "npm:@hawtio/camel-model@~4.8.0",
     "@jolokia.js/simple": "^2.1.7",
     "@module-federation/utilities": "^3.1.16",
+    "@monaco-editor/react": "^4.6.0",
     "@patternfly/react-charts": "~7.3.0",
     "@patternfly/react-code-editor": "~5.3.3",
     "@patternfly/react-core": "~5.3.3",

packages/hawtio/src/__mocks__/monacoEditor.js

@@ -0,0 +1,5 @@
+module.exports = {
+  loader: {
+    config: _config => {},
+  },
+}

packages/hawtio/src/plugins/camel/endpoints/SendMessage.tsx

@@ -30,6 +30,10 @@ import { doSendMessage } from './endpoints-service'
 // TODO: Parameterise the version of Camel mode for the exchange headers
 import { headers as exchangeHeaders } from './exchange-headers-camel-model.json'
 
+import { loader } from '@monaco-editor/react'
+
+loader.config({ monaco: monacoEditor })
+
 export const SendMessage: React.FunctionComponent = () => {
   const { selectedNode } = useContext(CamelContext)
   const messageHeaders = useRef<{ name: string; value: string }[]>([])

packages/hawtio/src/plugins/camel/routes/Source.tsx

@@ -8,6 +8,11 @@ import { routesService } from './routes-service'
 import { eventService } from '@hawtiosrc/core'
 import { Alert, AlertActionCloseButton, AlertVariant } from '@patternfly/react-core'
 
+import * as monaco from 'monaco-editor'
+import { loader } from '@monaco-editor/react'
+
+loader.config({ monaco })
+
 export const Source: React.FunctionComponent = () => {
   const { selectedNode } = useContext(CamelContext)
   const [xmlSource, setXmlSource] = useState('')

yarn.lock

@@ -2021,6 +2021,7 @@ __metadata:
     "@hawtio/camel-model-v4_8": "npm:@hawtio/camel-model@~4.8.0"
     "@jolokia.js/simple": "npm:^2.1.7"
     "@module-federation/utilities": "npm:^3.1.16"
+    "@monaco-editor/react": "npm:^4.6.0"
     "@patternfly/react-charts": "npm:~7.3.0"
     "@patternfly/react-code-editor": "npm:~5.3.3"
     "@patternfly/react-core": "npm:~5.3.3"
@@ -4726,6 +4727,7 @@ __metadata:
     css-loader: "npm:^7.1.2"
     html-webpack-plugin: "npm:^5.6.0"
     jest: "npm:^29.7.0"
+    monaco-editor: "npm:^0.52.0"
     monaco-editor-webpack-plugin: "npm:^7.1.0"
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"