Merge branch '328742-upgrade-monaco' into 'master'

Upgrade Monaco and its webpack plugin [RUN AS-IF-FOSS]

See merge request gitlab-org/gitlab!63400

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({

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.25.2",
+    "monaco-editor-webpack-plugin": "^4.0.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",

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 = '78'; // readOnly option has the internal index of 78 in the editor's options
 
     beforeEach(() => {
       setFixtures('<div id="editor1"></div><div id="editor2"></div>');

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) {}

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');

yarn.lock

@@ -8560,17 +8560,22 @@ 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@^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 "^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:
+  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"