ARTEMIS-5569 Include Monaco editor scripts locally

artemis-console-extension/artemis-extension/.yarnrc.yml

@@ -21,4 +21,10 @@ plugins:
     path: .yarn/plugins/@yarnpkg/plugin-licenses.cjs
     spec: "https://raw.githubusercontent.com/mhassan1/yarn-plugin-licenses/v0.15.0/bundles/@yarnpkg/plugin-licenses.js"
 
+packageExtensions:
+  # see: https://github.com/patternfly/patternfly-react/issues/11923
+  '@patternfly/react-code-editor@*':
+    peerDependencies:
+      'monaco-editor': '^0.52.2'
+
 yarnPath: .yarn/releases/yarn-4.9.1.cjs

artemis-console-extension/artemis-extension/app/package.json

@@ -10,17 +10,8 @@
     "replace-version": "replace __PACKAGE_VERSION_PLACEHOLDER__ $npm_package_version ./build/static/js -r --include=\"*.js\""
   },
   "dependencies": {
-    "@hawtio/react": "1.9.4",
-    "@patternfly/react-charts": "~7.4.9",
-    "@patternfly/react-code-editor": "~5.4.18",
-    "@patternfly/react-core": "~5.4.14",
-    "@patternfly/react-icons": "~5.4.2",
-    "@patternfly/react-styles": "~5.4.1",
-    "@patternfly/react-table": "~5.4.16",
-    "@patternfly/react-tokens": "~5.4.1",
-    "@patternfly/react-topology": "~5.4.1",
+    "@hawtio/react": "1.9.6",
     "artemis-console-plugin": "1.2.1",
-    "d3": "^7.9.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.30.0"
@@ -33,6 +24,7 @@
     "css-minimizer-webpack-plugin": "^7.0.0",
     "html-webpack-plugin": "^5.6.0",
     "mini-css-extract-plugin": "^2.9.1",
+    "monaco-editor": "^0.52.2",
     "monaco-editor-webpack-plugin": "^7.1.0",
     "os-browserify": "^0.3.0",
     "path-browserify": "^1.0.1",

artemis-console-extension/artemis-extension/app/webpack.config.cjs

@@ -24,6 +24,7 @@ const TerserPlugin = require("terser-webpack-plugin")
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
 const { WebpackManifestPlugin } = require("webpack-manifest-plugin")
 const CopyWebpackPlugin = require('copy-webpack-plugin')
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
 
 const outputPath = path.resolve(__dirname, 'build')
 
@@ -134,6 +135,13 @@ module.exports = (webpackEnv, args) => {
           },
         }
       }),
+      new MonacoWebpackPlugin({
+        // 'html' is required as workaround for 'xml'
+        // https://github.com/microsoft/monaco-editor/issues/1509
+        languages: ['xml', 'json', 'html'],
+        publicPath: '',
+        globalAPI: true
+      }),
       new InvestigationPlugin({})
     ],
     entry: "./src/index.ts",
@@ -214,7 +222,10 @@ module.exports = (webpackEnv, args) => {
     ],
     resolve: {
       extensions: ['.ts', '.tsx', '.js', '.cjs', '.jsx'],
-       // To resolve errors for @module-federation/utilities 2.x
+      alias: {
+        '@thumbmarkjs/thumbmarkjs': path.join(__dirname, '../node_modules/@thumbmarkjs/thumbmarkjs/dist/thumbmark.esm.js'),
+      },
+      // To resolve errors for @module-federation/utilities 2.x
       // https://github.com/module-federation/universe/issues/827
       // fallback: {
       //   path: require.resolve('path-browserify'),

artemis-console-extension/artemis-extension/package.json

@@ -12,84 +12,16 @@
     "build": "yarn workspaces foreach -Aipt run build",
     "license": "yarn licenses generate-disclaimer -R > ../../artemis-console-distribution/src/main/resources/licenses/licenses/NPMLicenses.txt"
   },
-  "dependencies": {
-    "@hawtio/react": "1.9.4",
-    "@patternfly/react-charts": "~7.4.9",
-    "@patternfly/react-code-editor": "~5.4.18",
-    "@patternfly/react-core": "~5.4.14",
-    "@patternfly/react-icons": "~5.4.2",
-    "@patternfly/react-styles": "~5.4.1",
-    "@patternfly/react-table": "~5.4.16",
-    "@patternfly/react-tokens": "~5.4.1",
-    "@patternfly/react-topology": "~5.4.1",
-    "d3": "^7.9.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^6.30.0",
-    "react-split": "~2.0.14",
-    "xml-formatter": "3.6.5"
-  },
   "devDependencies": {
-    "@hawtio/backend-middleware": "^1.0.6",
-    "@jest/globals": "^29.7.0",
-    "@swc/core": "^1.7.26",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@types/react-test-renderer": "^19",
-    "copy-webpack-plugin": "^12.0.2",
-    "css-loader": "^7.1.2",
-    "css-minimizer-webpack-plugin": "^7.0.0",
-    "html-webpack-plugin": "^5.6.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "mini-css-extract-plugin": "^2.9.1",
-    "monaco-editor": "^0.52.2",
-    "monaco-editor-webpack-plugin": "^7.1.0",
-    "os-browserify": "^0.3.0",
-    "path-browserify": "^1.0.1",
-    "react-dev-utils": "^12.0.1",
-    "react-test-renderer": "^19.1.0",
+    "@types/node": "^22.7.7",
     "replace": "^1.2.2",
-    "style-loader": "^4.0.0",
-    "swc-loader": "^0.2.6",
-    "terser-webpack-plugin": "^5.3.10",
-    "ts-jest": "^29.3.2",
-    "ts-node": "^10.9.2",
-    "tslib": "^2.8.1",
-    "tsup": "^8.4.0",
-    "typescript": "^5.8.3",
-    "undici": "^7.8.0",
-    "webpack": "^5.99.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.2.1",
-    "webpack-manifest-plugin": "^5.0.0"
+    "typescript": "^5.8.3"
   },
   "resolutions": {
-    "axios": "1.8.4",
-    "@typescript-eslint/eslint-plugin": "6.9.0",
-    "@typescript-eslint/parser": "6.9.0",
-    "d3-color": "3.1.0",
-    "nth-check": "2.0.1",
-    "tough-cookie": "4.1.3",
-    "semver": "7.5.2",
-    "word-wrap": "1.2.4",
-    "postcss": "8.4.31",
-    "ws": "8.18.0",
-    "braces": "3.0.3",
-    "express": "4.21.0",
-    "webpack": "5.99.0",
-    "cookie": "0.7.0",
-    "micromatch": "4.0.8",
-    "rollup": "2.79.2",
-    "http-proxy-middleware": "2.0.9",
-    "cross-spawn": "7.0.5",
-    "nanoid": "3.3.8",
-    "path-to-regexp": "0.1.12",
-    "jolokia.js": "2.2.4",
-    "@jolokia.js/simple": "2.2.4",
-    "serialize-javascript": "6.0.2",
-    "caniuse-lite": "1.0.30001715",
-    "@babel/runtime": "7.26.10"
+    "@thumbmarkjs/thumbmarkjs": "0.20.5",
+    "monaco-editor": "0.52.2"
   },
   "eslintConfig": {
     "extends": [

artemis-console-extension/artemis-extension/packages/artemis-console-plugin/package.json

@@ -6,7 +6,6 @@
   "files": [
     "dist"
   ],
-  "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -22,54 +21,44 @@
     "replace-version": "replace __PACKAGE_VERSION_PLACEHOLDER__ $npm_package_version ./dist/index.js"
   },
   "dependencies": {
-    "@hawtio/react": "1.9.2",
-    "@patternfly/react-charts": "~7.4.9",
-    "@patternfly/react-code-editor": "~5.4.18",
-    "@patternfly/react-core": "~5.4.14",
-    "@patternfly/react-icons": "~5.4.2",
-    "@patternfly/react-styles": "~5.4.1",
-    "@patternfly/react-table": "~5.4.16",
-    "@patternfly/react-tokens": "~5.4.1",
-    "@patternfly/react-topology": "~5.4.1",
-    "d3": "^7.9.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^6.30.0",
     "react-split": "~2.0.14",
     "xml-formatter": "3.6.5"
   },
   "devDependencies": {
-    "@hawtio/backend-middleware": "^1.0.6",
     "@jest/globals": "^29.7.0",
+    "@patternfly/react-topology": "^5.4.1",
     "@swc/core": "^1.7.26",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
+    "@types/node": "^22.7.7",
     "@types/react-test-renderer": "^19",
-    "copy-webpack-plugin": "^12.0.2",
-    "css-loader": "^7.1.2",
-    "css-minimizer-webpack-plugin": "^7.0.0",
-    "html-webpack-plugin": "^5.6.0",
+    "d3": "^7.9.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "mini-css-extract-plugin": "^2.9.1",
-    "monaco-editor-webpack-plugin": "^7.1.0",
-    "os-browserify": "^0.3.0",
-    "path-browserify": "^1.0.1",
-    "react-dev-utils": "^12.0.1",
-    "react-test-renderer": "^19.1.0",
-    "replace": "^1.2.2",
-    "style-loader": "^4.0.0",
-    "swc-loader": "^0.2.6",
-    "terser-webpack-plugin": "^5.3.10",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.30.1",
     "ts-jest": "^29.3.2",
     "ts-node": "^10.9.2",
     "tslib": "^2.8.1",
     "tsup": "^8.4.0",
     "typescript": "^5.8.3",
-    "undici": "^7.8.0",
-    "webpack": "^5.99.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-manifest-plugin": "^5.0.0"
+    "undici": "^7.8.0"
+  },
+  "peerDependencies": {
+    "@hawtio/react": "1.9.6",
+    "@patternfly/react-charts": "^7",
+    "@patternfly/react-code-editor": "^5",
+    "@patternfly/react-core": "^5",
+    "@patternfly/react-icons": "^5",
+    "@patternfly/react-styles": "^5",
+    "@patternfly/react-table": "^5",
+    "@patternfly/react-tokens": "^5",
+    "@patternfly/react-topology": "^5",
+    "monaco-editor": "^0.52",
+    "react": "^17 || ^18",
+    "react-dom": "^17 || ^18",
+    "react-router-dom": "^6.30"
   },
   "eslintConfig": {
     "extends": [

artemis-console-extension/artemis-extension/packages/artemis-console-plugin/src/messages/SendMessage.tsx

@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 import React, { FormEvent, useRef, useState } from 'react'
-import * as monacoEditor from 'monaco-editor'
 import xmlFormat from 'xml-formatter'
 
 import {
@@ -45,6 +44,11 @@ import { eventService } from '@hawtio/react'
 import { artemisService } from '../artemis-service'
 import { Message } from './MessageView'
 
+import * as monacoEditor from 'monaco-editor'
+import { loader } from '@monaco-editor/react'
+
+loader.config({ monaco: monacoEditor })
+
 type SendBodyMessageProps = {
   onBodyChange: (body: string) => void
   body?: string