diff --git a/frontend/config/webpack.common.js b/frontend/config/webpack.common.js index 57acabc474..1cf0fbbd25 100644 --- a/frontend/config/webpack.common.js +++ b/frontend/config/webpack.common.js @@ -226,6 +226,16 @@ module.exports = (env) => { }), new MonacoWebpackPlugin({ languages: ['yaml'], + customLanguages: [ + { + label: 'yaml', + entry: 'monaco-yaml', + worker: { + id: 'monaco-yaml/yamlWorker', + entry: 'monaco-yaml/yaml.worker', + }, + }, + ], }), ], resolve: { diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 3ffb5a7ef9..14492b2eb7 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", @@ -33,12 +34,12 @@ "google-protobuf": "^3.11.2", "grpc-web": "^1.2.1", "lodash-es": "^4.17.15", - "monaco-editor": "^0.31.1", - "monaco-editor-webpack-plugin": "^7.0.1", + "monaco-editor": "^0.36.0", + "monaco-editor-webpack-plugin": "^7.1.0", + "monaco-yaml": "^5.2.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", @@ -5068,8 +5069,7 @@ "node_modules/@types/json-schema": { "version": "7.0.13", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.13.tgz", - "integrity": "sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==", - "dev": true + "integrity": "sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==" }, "node_modules/@types/json5": { "version": "0.0.29", @@ -16198,6 +16198,11 @@ "node": ">=6" } }, + "node_modules/jsonc-parser": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.3.0.tgz", + "integrity": "sha512-RK1Xb5alM78sdXpB2hqqK7jxAE5jTRH05GvUiLWqh7Vbp6OPHuJYlsAMRUDYNYJTAQgkmhHgkdwOEknxwP4ojQ==" + }, "node_modules/jsonfile": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", @@ -17867,9 +17872,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.36.1", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.36.1.tgz", + "integrity": "sha512-/CaclMHKQ3A6rnzBzOADfwdSJ25BFoFT0Emxsc4zYVyav5SkK9iA6lEtIeuN/oRYbwPgviJT+t3l+sjFa28jYg==" }, "node_modules/monaco-editor-webpack-plugin": { "version": "7.1.0", @@ -17884,6 +17889,71 @@ "webpack": "^4.5.0 || 5.x" } }, + "node_modules/monaco-languageserver-types": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/monaco-languageserver-types/-/monaco-languageserver-types-0.3.4.tgz", + "integrity": "sha512-d58sP5yNhjs8uG1ESXs0hFnuX2YfdMhiGeWhdgTUZyG9aaWgyI4dDwrK1khf1mPF2u9Sljv42sfYqPFZnqYMYg==", + "dependencies": { + "monaco-types": "^0.1.0", + "vscode-languageserver-protocol": "^3.0.0", + "vscode-uri": "^3.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/remcohaszing" + } + }, + "node_modules/monaco-marker-data-provider": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/monaco-marker-data-provider/-/monaco-marker-data-provider-1.2.2.tgz", + "integrity": "sha512-vLsgwsIm4fcqQAi54SsfLYuvWuIOgPV3kmkvtXVh7SGCO2cWvkXhLm4PAHpDyaK3w8AwWAxM/sP/vKXvZJi7Pw==", + "dependencies": { + "monaco-types": "^0.1.0" + }, + "funding": { + "url": "https://github.com/sponsors/remcohaszing" + } + }, + "node_modules/monaco-types": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/monaco-types/-/monaco-types-0.1.0.tgz", + "integrity": "sha512-aWK7SN9hAqNYi0WosPoMjenMeXJjwCxDibOqWffyQ/qXdzB/86xshGQobRferfmNz7BSNQ8GB0MD0oby9/5fTQ==", + "funding": { + "url": "https://github.com/sponsors/remcohaszing" + } + }, + "node_modules/monaco-worker-manager": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/monaco-worker-manager/-/monaco-worker-manager-2.0.1.tgz", + "integrity": "sha512-kdPL0yvg5qjhKPNVjJoym331PY/5JC11aPJXtCZNwWRvBr6jhkIamvYAyiY5P1AWFmNOy0aRDRoMdZfa71h8kg==", + "peerDependencies": { + "monaco-editor": ">=0.30.0" + } + }, + "node_modules/monaco-yaml": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/monaco-yaml/-/monaco-yaml-5.2.0.tgz", + "integrity": "sha512-BK9qeabDtxNlKppGrbU4yd8WTcKbk9ODqQwWy8Pb27FHtHwCQ1lTssRuB9XM2+Z4HQf6uhj3P5vFi3nsRrerGw==", + "dependencies": { + "@types/json-schema": "^7.0.0", + "jsonc-parser": "^3.0.0", + "monaco-languageserver-types": "^0.3.0", + "monaco-marker-data-provider": "^1.0.0", + "monaco-types": "^0.1.0", + "monaco-worker-manager": "^2.0.0", + "path-browserify": "^1.0.0", + "prettier": "^2.0.0", + "vscode-languageserver-textdocument": "^1.0.0", + "vscode-languageserver-types": "^3.0.0", + "vscode-uri": "^3.0.0", + "yaml": "^2.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/remcohaszing" + }, + "peerDependencies": { + "monaco-editor": ">=0.36" + } + }, "node_modules/mrmime": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz", @@ -18812,6 +18882,11 @@ "tslib": "^2.0.3" } }, + "node_modules/path-browserify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz", + "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==" + }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -19507,7 +19582,6 @@ "version": "2.8.8", "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", - "devOptional": true, "bin": { "prettier": "bin-prettier.js" }, @@ -19901,19 +19975,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", @@ -23145,6 +23206,38 @@ "react": ">=16.6.0" } }, + "node_modules/vscode-jsonrpc": { + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz", + "integrity": "sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==", + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/vscode-languageserver-protocol": { + "version": "3.17.5", + "resolved": "https://registry.npmjs.org/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.17.5.tgz", + "integrity": "sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==", + "dependencies": { + "vscode-jsonrpc": "8.2.0", + "vscode-languageserver-types": "3.17.5" + } + }, + "node_modules/vscode-languageserver-textdocument": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.11.tgz", + "integrity": "sha512-X+8T3GoiwTVlJbicx/sIAF+yuJAqz8VvwJyoMVhwEMoEKE/fkDmrqUgDMyBECcM2A2frVZIUj5HI/ErRXCfOeA==" + }, + "node_modules/vscode-languageserver-types": { + "version": "3.17.5", + "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.5.tgz", + "integrity": "sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==" + }, + "node_modules/vscode-uri": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz", + "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==" + }, "node_modules/w3c-xmlserializer": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index ea20c525ec..4fd8a74c1b 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", @@ -76,12 +77,12 @@ "google-protobuf": "^3.11.2", "grpc-web": "^1.2.1", "lodash-es": "^4.17.15", - "monaco-editor": "^0.31.1", - "monaco-editor-webpack-plugin": "^7.0.1", + "monaco-editor": "^0.36.0", + "monaco-editor-webpack-plugin": "^7.1.0", + "monaco-yaml": "^5.2.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", @@ -117,8 +118,8 @@ "babel-loader": "^8.3.0", "babel-plugin-transform-imports": "^2.0.0", "chai-subset": "^1.6.0", - "copy-webpack-plugin": "^12.0.2", "concurrently": "^8.2.2", + "copy-webpack-plugin": "^12.0.2", "core-js": "^3.37.1", "css-loader": "^5.2.7", "css-minimizer-webpack-plugin": "^4.2.2", @@ -196,9 +197,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/concepts/dashboard/codeEditor/DashboardCodeEditor.tsx b/frontend/src/concepts/dashboard/codeEditor/DashboardCodeEditor.tsx index df9bd5783e..ac1c3bca10 100644 --- a/frontend/src/concepts/dashboard/codeEditor/DashboardCodeEditor.tsx +++ b/frontend/src/concepts/dashboard/codeEditor/DashboardCodeEditor.tsx @@ -1,8 +1,15 @@ 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 { configureMonacoYaml } from 'monaco-yaml'; import './DashboardCodeEditor.scss'; +// enable yaml syntax validation +loader.config({ monaco }); +configureMonacoYaml(monaco, {}); + type DashboardCodeEditorProps = Omit & { testId?: string; };