From 41894d1c07e16f803bc6c7d6f8f9b5b8c64b7d66 Mon Sep 17 00:00:00 2001 From: Denys Mishunov Date: Mon, 7 Jun 2021 12:36:41 +0200 Subject: [PATCH 1/3] Upgrade Monaco and its webpack plugin --- config/webpack.config.js | 4 +++- package.json | 6 +++--- spec/frontend/environment.js | 18 ++++++++++++++++++ yarn.lock | 18 +++++++++--------- 4 files changed, 33 insertions(+), 13 deletions(-) diff --git a/config/webpack.config.js b/config/webpack.config.js index 422f60736e76f5..f4324ffafc719c 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -398,7 +398,9 @@ module.exports = { new VueLoaderPlugin(), // automatically configure monaco editor web workers - new MonacoWebpackPlugin(), + new MonacoWebpackPlugin({ + globalAPI: true, + }), // fix legacy jQuery plugins which depend on globals new webpack.ProvidePlugin({ diff --git a/package.json b/package.json index a3b26bbe02720e..042e2c7d337068 100644 --- a/package.json +++ b/package.json @@ -144,8 +144,8 @@ "mathjax": "3", "mermaid": "^8.10.2", "minimatch": "^3.0.4", - "monaco-editor": "^0.20.0", - "monaco-editor-webpack-plugin": "^1.9.1", + "monaco-editor": "^0.24.0", + "monaco-editor-webpack-plugin": "^3.1.0", "monaco-yaml": "^2.5.1", "mousetrap": "1.6.5", "pdfjs-dist": "^2.0.943", @@ -263,7 +263,7 @@ }, "resolutions": { "chokidar": "^3.4.0", - "monaco-editor": "0.20.0" + "monaco-editor": "0.24.0" }, "engines": { "node": ">=10.13.0", diff --git a/spec/frontend/environment.js b/spec/frontend/environment.js index d1bc11538a3bc7..9cebe2d1e014ba 100644 --- a/spec/frontend/environment.js +++ b/spec/frontend/environment.js @@ -67,6 +67,24 @@ class CustomEnvironment extends JSDOMEnvironment { getEntriesByName: () => [], }); + // + // Monaco-related environment variables + // + this.global.MonacoEnvironment = { globalAPI: true }; + Object.defineProperty(this.global, 'matchMedia', { + writable: true, + value: (query) => ({ + matches: false, + media: query, + onchange: null, + addListener: () => null, // deprecated + removeListener: () => null, // deprecated + addEventListener: () => null, + removeEventListener: () => null, + dispatchEvent: () => null, + }), + }); + this.global.PerformanceObserver = class { /* eslint-disable no-useless-constructor, no-unused-vars, no-empty-function, class-methods-use-this */ constructor(callback) {} diff --git a/yarn.lock b/yarn.lock index b747fac356651c..bcae5b93bbce7c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8550,17 +8550,17 @@ moment-mini@^2.22.1: resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.22.1.tgz#bc32d73e43a4505070be6b53494b17623183420d" integrity sha512-OUCkHOz7ehtNMYuZjNciXUfwTuz8vmF1MTbAy59ebf+ZBYZO5/tZKuChVWCX+uDo+4idJBpGltNfV8st+HwsGw== -monaco-editor-webpack-plugin@^1.9.1: - version "1.9.1" - resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-1.9.1.tgz#eb4bbb1c5e5bfb554541c1ae1542e74c2a9f43fd" - integrity sha512-x7fx1w3i/uwZERIgztHAAK3VQMsL8+ku0lFXXbO81hKDg8IieACqjGEa2mqEueg0c/fX+wd0oI+75wB19KJAsA== +monaco-editor-webpack-plugin@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-3.1.0.tgz#972efc47a91b3bf3bd977885684a3180eb8f341b" + integrity sha512-TP5NkCAV0OeFTry5k/d60KR7CkhTXL4kgJKtE3BzjgbDb5TGEPEhoKmHBrSa6r7Oc0sNbPLZhKD/TP2ig7A+/A== dependencies: - loader-utils "^1.2.3" + loader-utils "^2.0.0" -monaco-editor@0.20.0, monaco-editor@^0.20.0: - version "0.20.0" - resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.20.0.tgz#5d5009343a550124426cb4d965a4d27a348b4dea" - integrity sha512-hkvf4EtPJRMQlPC3UbMoRs0vTAFAYdzFQ+gpMb8A+9znae1c43q8Mab9iVsgTcg/4PNiLGGn3SlDIa8uvK1FIQ== +monaco-editor@0.24.0, monaco-editor@^0.24.0: + version "0.24.0" + resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.24.0.tgz#990b55096bcc95d08d8d28e55264c6eb17707269" + integrity sha512-o1f0Lz6ABFNTtnEqqqvlY9qzNx24rQZx1RgYNQ8SkWkE+Ka63keHH/RqxQ4QhN4fs/UYOnvAtEUZsPrzccH++A== monaco-yaml@^2.5.1: version "2.5.1" -- GitLab From 948a1408ab82a48d1e8e4637aec1d73c06c64cba Mon Sep 17 00:00:00 2001 From: Denys Mishunov Date: Fri, 11 Jun 2021 14:38:47 +0200 Subject: [PATCH 2/3] Fixed editor_lite spec --- spec/frontend/editor/source_editor_spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/frontend/editor/source_editor_spec.js b/spec/frontend/editor/source_editor_spec.js index cf3e2c025e4cb1..5b3d3bdaf3562b 100644 --- a/spec/frontend/editor/source_editor_spec.js +++ b/spec/frontend/editor/source_editor_spec.js @@ -246,7 +246,7 @@ describe('Base editor', () => { let editorEl2; let inst1; let inst2; - const readOnlyIndex = '68'; // readOnly option has the internal index of 68 in the editor's options + const readOnlyIndex = '77'; // readOnly option has the internal index of 77 in the editor's options beforeEach(() => { setFixtures('
'); -- GitLab From 281b581885f23e7e311c7ca19f7bc140acbedb7a Mon Sep 17 00:00:00 2001 From: Denys Mishunov Date: Fri, 2 Jul 2021 11:03:51 +0200 Subject: [PATCH 3/3] Upgraded Monaco to 0.25.2 Changelog: changed MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/63400 EE: true --- package.json | 4 ++-- spec/frontend/editor/source_editor_spec.js | 2 +- .../ide/helpers/ide_helper.js | 10 +++++++--- yarn.lock | 15 ++++++++++----- 4 files changed, 20 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 042e2c7d337068..1a721d0f019f11 100644 --- a/package.json +++ b/package.json @@ -144,8 +144,8 @@ "mathjax": "3", "mermaid": "^8.10.2", "minimatch": "^3.0.4", - "monaco-editor": "^0.24.0", - "monaco-editor-webpack-plugin": "^3.1.0", + "monaco-editor": "^0.25.2", + "monaco-editor-webpack-plugin": "^4.0.0", "monaco-yaml": "^2.5.1", "mousetrap": "1.6.5", "pdfjs-dist": "^2.0.943", diff --git a/spec/frontend/editor/source_editor_spec.js b/spec/frontend/editor/source_editor_spec.js index 5b3d3bdaf3562b..d87d373c952884 100644 --- a/spec/frontend/editor/source_editor_spec.js +++ b/spec/frontend/editor/source_editor_spec.js @@ -246,7 +246,7 @@ describe('Base editor', () => { let editorEl2; let inst1; let inst2; - const readOnlyIndex = '77'; // readOnly option has the internal index of 77 in the editor's options + const readOnlyIndex = '78'; // readOnly option has the internal index of 78 in the editor's options beforeEach(() => { setFixtures('
'); diff --git a/spec/frontend_integration/ide/helpers/ide_helper.js b/spec/frontend_integration/ide/helpers/ide_helper.js index 6c09b44d891b22..56b2e298aa3079 100644 --- a/spec/frontend_integration/ide/helpers/ide_helper.js +++ b/spec/frontend_integration/ide/helpers/ide_helper.js @@ -7,6 +7,7 @@ import { screen, findByText, } from '@testing-library/dom'; +import { editor as monacoEditor } from 'monaco-editor'; const isFolderRowOpen = (row) => row.matches('.folder.is-open'); @@ -23,7 +24,10 @@ export const switchLeftSidebarTab = (name) => { export const getStatusBar = () => document.querySelector('.ide-status-bar'); export const waitForMonacoEditor = () => - new Promise((resolve) => window.monaco.editor.onDidCreateEditor(resolve)); + new Promise((resolve) => monacoEditor.onDidCreateEditor(resolve)); + +export const waitForEditorDispose = (instance) => + new Promise((resolve) => instance.onDidDispose(resolve)); export const waitForEditorModelChange = (instance) => new Promise((resolve) => instance.onDidChangeModel(resolve)); @@ -38,14 +42,14 @@ export const findAndSetEditorValue = async (value) => { const editor = await findMonacoEditor(); const uri = editor.getAttribute('data-uri'); - window.monaco.editor.getModel(uri).setValue(value); + monacoEditor.getModel(uri).setValue(value); }; export const getEditorValue = async () => { const editor = await findMonacoEditor(); const uri = editor.getAttribute('data-uri'); - return window.monaco.editor.getModel(uri).getValue(); + return monacoEditor.getModel(uri).getValue(); }; const findTreeBody = () => screen.findByTestId('ide-tree-body'); diff --git a/yarn.lock b/yarn.lock index bcae5b93bbce7c..66641d33503916 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8550,18 +8550,23 @@ moment-mini@^2.22.1: resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.22.1.tgz#bc32d73e43a4505070be6b53494b17623183420d" integrity sha512-OUCkHOz7ehtNMYuZjNciXUfwTuz8vmF1MTbAy59ebf+ZBYZO5/tZKuChVWCX+uDo+4idJBpGltNfV8st+HwsGw== -monaco-editor-webpack-plugin@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-3.1.0.tgz#972efc47a91b3bf3bd977885684a3180eb8f341b" - integrity sha512-TP5NkCAV0OeFTry5k/d60KR7CkhTXL4kgJKtE3BzjgbDb5TGEPEhoKmHBrSa6r7Oc0sNbPLZhKD/TP2ig7A+/A== +monaco-editor-webpack-plugin@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-4.0.0.tgz#95be3f48f4220999b909266a9997727f0deab947" + integrity sha512-4BT9XDRQXraMQjxEUjR+uuubRe3RIPkvVoGw8zwWG++s7wq6TAiXaSOMdkdS9TrjCREgSnygCOlVzY6MS8RPuA== dependencies: loader-utils "^2.0.0" -monaco-editor@0.24.0, monaco-editor@^0.24.0: +monaco-editor@0.24.0: version "0.24.0" resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.24.0.tgz#990b55096bcc95d08d8d28e55264c6eb17707269" integrity sha512-o1f0Lz6ABFNTtnEqqqvlY9qzNx24rQZx1RgYNQ8SkWkE+Ka63keHH/RqxQ4QhN4fs/UYOnvAtEUZsPrzccH++A== +monaco-editor@^0.25.2: + version "0.25.2" + resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.25.2.tgz#119e2b15bbd968a1a99c03cac9c329316d7c37e9" + integrity sha512-5iylzSJevCnzJn9UVsW8yOZ3yHjmAs4TfvH3zsbftKiFKmHG0xirGN6DK9Kk04VSWxYCZZAIafYJoNJJMAU1KA== + monaco-yaml@^2.5.1: version "2.5.1" resolved "https://registry.yarnpkg.com/monaco-yaml/-/monaco-yaml-2.5.1.tgz#af9303a4aa6e3b94db62b8a8659362f31944590d" -- GitLab