From 8022fdf0da684e5ec98419f0c26e418afaebe76d Mon Sep 17 00:00:00 2001
From: Grzegorz Grzybek <gr.grzybek@gmail.com>
Date: Thu, 24 Oct 2024 17:26:54 +0200
Subject: [PATCH] fix(monaco): Do not use CDN version of monaco-editor (fixes
 #1186) (#1187)

(cherry picked from commit f0805fac3bbd82f147afe5c736a4998e0ac0b183)
---
 app/package.json                                            | 1 +
 packages/hawtio/jest.config.ts                              | 2 ++
 packages/hawtio/package.json                                | 1 +
 packages/hawtio/src/__mocks__/monacoEditor.js               | 5 +++++
 packages/hawtio/src/plugins/camel/endpoints/SendMessage.tsx | 4 ++++
 packages/hawtio/src/plugins/camel/routes/Source.tsx         | 5 +++++
 yarn.lock                                                   | 2 ++
 7 files changed, 20 insertions(+)
 create mode 100644 packages/hawtio/src/__mocks__/monacoEditor.js

diff --git a/app/package.json b/app/package.json
index 2b55d204..b57ac930 100644
--- a/app/package.json
+++ b/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",
diff --git a/packages/hawtio/jest.config.ts b/packages/hawtio/jest.config.ts
index a150612c..d9d79a75 100644
--- a/packages/hawtio/jest.config.ts
+++ b/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'),
   },
diff --git a/packages/hawtio/package.json b/packages/hawtio/package.json
index 4dea1371..8a76674e 100644
--- a/packages/hawtio/package.json
+++ b/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",
diff --git a/packages/hawtio/src/__mocks__/monacoEditor.js b/packages/hawtio/src/__mocks__/monacoEditor.js
new file mode 100644
index 00000000..be534f85
--- /dev/null
+++ b/packages/hawtio/src/__mocks__/monacoEditor.js
@@ -0,0 +1,5 @@
+module.exports = {
+  loader: {
+    config: _config => {},
+  },
+}
diff --git a/packages/hawtio/src/plugins/camel/endpoints/SendMessage.tsx b/packages/hawtio/src/plugins/camel/endpoints/SendMessage.tsx
index fac5a896..b5a18ef3 100644
--- a/packages/hawtio/src/plugins/camel/endpoints/SendMessage.tsx
+++ b/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 }[]>([])
diff --git a/packages/hawtio/src/plugins/camel/routes/Source.tsx b/packages/hawtio/src/plugins/camel/routes/Source.tsx
index 6a0b21c4..8e7a80e8 100644
--- a/packages/hawtio/src/plugins/camel/routes/Source.tsx
+++ b/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('')
diff --git a/yarn.lock b/yarn.lock
index b7383a80..3ee208a6 100644
--- a/yarn.lock
+++ b/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"