Add latest changes from gitlab-org/gitlab@16-0-stable-eev16.0.0-rc42

1 files changed, 98 insertions, 48 deletions

diff --git a/config/webpack.config.js b/config/webpack.config.js
index 8ae803ca738..e3505ae47b8 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -1,6 +1,19 @@
 // eslint-disable-next-line import/order
 const crypto = require('./helpers/patched_crypto');
 
+const { VUE_VERSION: EXPLICIT_VUE_VERSION } = process.env;
+if (![undefined, '2', '3'].includes(EXPLICIT_VUE_VERSION)) {
+  throw new Error(
+    `Invalid VUE_VERSION value: ${EXPLICIT_VUE_VERSION}. Only '2' and '3' are supported`,
+  );
+}
+const USE_VUE3 = EXPLICIT_VUE_VERSION === '3';
+
+if (USE_VUE3) {
+  console.log('[V] Using Vue.js 3');
+}
+const VUE_LOADER_MODULE = USE_VUE3 ? 'vue-loader-vue3' : 'vue-loader';
+
 const fs = require('fs');
 const path = require('path');
 
@@ -12,18 +25,17 @@ const BABEL_LOADER_VERSION = require('babel-loader/package.json').version;
 const CompressionPlugin = require('compression-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const glob = require('glob');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
-const VUE_LOADER_VERSION = require('vue-loader/package.json').version;
+// eslint-disable-next-line import/no-dynamic-require
+const { VueLoaderPlugin } = require(VUE_LOADER_MODULE);
+// eslint-disable-next-line import/no-dynamic-require
+const VUE_LOADER_VERSION = require(`${VUE_LOADER_MODULE}/package.json`).version;
 const VUE_VERSION = require('vue/package.json').version;
 
-const { ESBuildMinifyPlugin } = require('esbuild-loader');
-
 const webpack = require('webpack');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const { StatsWriterPlugin } = require('webpack-stats-plugin');
 const WEBPACK_VERSION = require('webpack/package.json').version;
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
-const esbuildConfiguration = require('./esbuild.config');
 
 const createIncrementalWebpackCompiler = require('./helpers/incremental_webpack_compiler');
 const IS_EE = require('./helpers/is_ee_env');
@@ -43,8 +55,6 @@ const VENDOR_DLL = process.env.WEBPACK_VENDOR_DLL && process.env.WEBPACK_VENDOR_
 const CACHE_PATH = process.env.WEBPACK_CACHE_PATH || path.join(ROOT_PATH, 'tmp/cache');
 const IS_PRODUCTION = process.env.NODE_ENV === 'production';
 const IS_DEV_SERVER = process.env.WEBPACK_SERVE === 'true';
-const WEBPACK_USE_ESBUILD_LOADER =
-  process.env.WEBPACK_USE_ESBUILD_LOADER && process.env.WEBPACK_USE_ESBUILD_LOADER !== 'false';
 
 const { DEV_SERVER_HOST, DEV_SERVER_PUBLIC_ADDR } = process.env;
 const DEV_SERVER_PORT = parseInt(process.env.DEV_SERVER_PORT, 10);
@@ -54,11 +64,9 @@ const DEV_SERVER_LIVERELOAD = IS_DEV_SERVER && process.env.DEV_SERVER_LIVERELOAD
 const INCREMENTAL_COMPILER_ENABLED =
   IS_DEV_SERVER &&
   process.env.DEV_SERVER_INCREMENTAL &&
-  process.env.DEV_SERVER_INCREMENTAL !== 'false' &&
-  !WEBPACK_USE_ESBUILD_LOADER;
+  process.env.DEV_SERVER_INCREMENTAL !== 'false';
 const INCREMENTAL_COMPILER_TTL = Number(process.env.DEV_SERVER_INCREMENTAL_TTL) || Infinity;
-const INCREMENTAL_COMPILER_RECORD_HISTORY =
-  IS_DEV_SERVER && !process.env.CI && !WEBPACK_USE_ESBUILD_LOADER;
+const INCREMENTAL_COMPILER_RECORD_HISTORY = IS_DEV_SERVER && !process.env.CI;
 const WEBPACK_REPORT = process.env.WEBPACK_REPORT && process.env.WEBPACK_REPORT !== 'false';
 const WEBPACK_MEMORY_TEST =
   process.env.WEBPACK_MEMORY_TEST && process.env.WEBPACK_MEMORY_TEST !== 'false';
@@ -158,6 +166,7 @@ function generateEntries() {
   Note 2: If you are using web-workers, you might need to reset the public path, see:
   https://gitlab.com/gitlab-org/gitlab/-/issues/321656
    */
+
   const manualEntries = {
     default: defaultEntries,
     legacy_sentry: './sentry/legacy_index.js',
@@ -167,6 +176,8 @@ function generateEntries() {
     sandboxed_mermaid: './lib/mermaid.js',
     redirect_listbox: './entrypoints/behaviors/redirect_listbox.js',
     sandboxed_swagger: './lib/swagger.js',
+    super_sidebar: './entrypoints/super_sidebar.js',
+    tracker: './entrypoints/tracker.js',
   };
 
   return Object.assign(manualEntries, incrementalCompiler.filterEntryPoints(autoEntries));
@@ -278,8 +289,49 @@ const defaultJsOptions = {
   cacheCompression: false,
 };
 
-if (WEBPACK_USE_ESBUILD_LOADER) {
-  console.log('esbuild-loader is active');
+const vueLoaderOptions = {
+  ident: 'vue-loader-options',
+
+  cacheDirectory: path.join(CACHE_PATH, 'vue-loader'),
+  cacheIdentifier: [
+    process.env.NODE_ENV || 'development',
+    webpack.version,
+    VUE_VERSION,
+    VUE_LOADER_VERSION,
+    EXPLICIT_VUE_VERSION,
+  ].join('|'),
+};
+
+let shouldExcludeFromCompliling = (modulePath) =>
+  /node_modules|vendor[\\/]assets/.test(modulePath) && !/\.vue\.js/.test(modulePath);
+// We explicitly set VUE_VERSION
+// Use @gitlab-ui from source to allow us to dig differences
+// between Vue.js 2 and Vue.js 3 while using built gitlab-ui by default
+if (EXPLICIT_VUE_VERSION) {
+  Object.assign(alias, {
+    '@gitlab/ui/scss_to_js': path.join(ROOT_PATH, 'node_modules/@gitlab/ui/scss_to_js'),
+    '@gitlab/ui/dist': '@gitlab/ui/src',
+    '@gitlab/ui': '@gitlab/ui/src',
+  });
+
+  const originalShouldExcludeFromCompliling = shouldExcludeFromCompliling;
+
+  shouldExcludeFromCompliling = (modulePath) =>
+    originalShouldExcludeFromCompliling(modulePath) &&
+    !/node_modules[\\/]@gitlab[\\/]ui/.test(modulePath) &&
+    !/node_modules[\\/]bootstrap-vue[\\/]src[\\/]vue\.js/.test(modulePath);
+}
+
+if (USE_VUE3) {
+  Object.assign(alias, {
+    // ensure we always use the same type of module for Vue
+    vue: '@vue/compat/dist/vue.runtime.esm-bundler.js',
+    vuex: path.join(ROOT_PATH, 'app/assets/javascripts/lib/utils/vue3compat/vuex.js'),
+    'vue-apollo': path.join(ROOT_PATH, 'app/assets/javascripts/lib/utils/vue3compat/vue_apollo.js'),
+    'vue-router': path.join(ROOT_PATH, 'app/assets/javascripts/lib/utils/vue3compat/vue_router.js'),
+  });
+
+  vueLoaderOptions.compiler = require.resolve('./vue3migration/compiler');
 }
 
 module.exports = {
@@ -317,30 +369,31 @@ module.exports = {
         include: /node_modules/,
         loader: 'babel-loader',
       },
-      WEBPACK_USE_ESBUILD_LOADER && {
-        test: /\.(js|cjs)$/,
-        exclude: (modulePath) =>
-          /node_modules|vendor[\\/]assets/.test(modulePath) && !/\.vue\.js/.test(modulePath),
-        loader: 'esbuild-loader',
-        options: esbuildConfiguration,
-      },
-      !WEBPACK_USE_ESBUILD_LOADER && {
-        test: /\.(js|cjs)$/,
-        exclude: (modulePath) =>
-          /node_modules|vendor[\\/]assets/.test(modulePath) && !/\.vue\.js/.test(modulePath),
+      {
+        test: /mermaid\/.*\.js?$/,
+        include: /node_modules/,
         loader: 'babel-loader',
-        options: defaultJsOptions,
       },
-      WEBPACK_USE_ESBUILD_LOADER && {
+      {
         test: /\.(js|cjs)$/,
-        include: (modulePath) =>
-          /node_modules\/(monaco-worker-manager|monaco-marker-data-provider)\/index\.js/.test(
-            modulePath,
-          ) || /node_modules\/yaml/.test(modulePath),
-        loader: 'esbuild-loader',
-        options: esbuildConfiguration,
+        exclude: shouldExcludeFromCompliling,
+        use: [
+          {
+            loader: 'thread-loader',
+            options: {
+              workerParallelJobs: 20,
+              poolRespawn: false,
+              poolParallelJobs: 200,
+              poolTimeout: DEV_SERVER_LIVERELOAD ? Infinity : 5000,
+            },
+          },
+          {
+            loader: 'babel-loader',
+            options: defaultJsOptions,
+          },
+        ],
       },
-      !WEBPACK_USE_ESBUILD_LOADER && {
+      {
         test: /\.(js|cjs)$/,
         include: (modulePath) =>
           /node_modules\/(monaco-worker-manager|monaco-marker-data-provider)\/index\.js/.test(
@@ -354,16 +407,8 @@ module.exports = {
       },
       {
         test: /\.vue$/,
-        loader: 'vue-loader',
-        options: {
-          cacheDirectory: path.join(CACHE_PATH, 'vue-loader'),
-          cacheIdentifier: [
-            process.env.NODE_ENV || 'development',
-            webpack.version,
-            VUE_VERSION,
-            VUE_LOADER_VERSION,
-          ].join('|'),
-        },
+        loader: VUE_LOADER_MODULE,
+        options: vueLoaderOptions,
       },
       {
         test: /\.(graphql|gql)$/,
@@ -424,7 +469,7 @@ module.exports = {
       {
         test: /.css$/,
         use: [
-          'vue-style-loader',
+          'style-loader',
           {
             loader: 'css-loader',
             options: {
@@ -452,7 +497,6 @@ module.exports = {
         },
       },
       {
-        test: /\.(yml|yaml)$/,
         resourceQuery: /raw/,
         loader: 'raw-loader',
       },
@@ -527,9 +571,6 @@ module.exports = {
         },
       },
     },
-    ...(WEBPACK_USE_ESBUILD_LOADER
-      ? { minimizer: [new ESBuildMinifyPlugin(esbuildConfiguration)] }
-      : {}),
   },
 
   plugins: [
@@ -850,6 +891,15 @@ module.exports = {
     ...(DEV_SERVER_ALLOWED_HOSTS ? { allowedHosts: DEV_SERVER_ALLOWED_HOSTS } : {}),
     client: {
       ...(DEV_SERVER_PUBLIC_ADDR ? { webSocketURL: DEV_SERVER_PUBLIC_ADDR } : {}),
+      overlay: {
+        runtimeErrors: (error) => {
+          if (error instanceof DOMException && error.message === 'The user aborted a request.') {
+            return false;
+          }
+
+          return true;
+        },
+      },
     },
   },