Add latest changes from gitlab-org/gitlab@master

2 files changed, 41 insertions, 3 deletions

diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js
index df643675357..10e9f6a9488 100644
--- a/app/assets/javascripts/ide/index.js
+++ b/app/assets/javascripts/ide/index.js
@@ -8,6 +8,7 @@ import { parseBoolean } from '../lib/utils/common_utils';
 import { resetServiceWorkersPublicPath } from '../lib/utils/webpack';
 import ide from './components/ide.vue';
 import { createRouter } from './ide_router';
+import { initGitlabWebIDE } from './init_gitlab_web_ide';
 import { DEFAULT_THEME } from './lib/themes';
 import { createStore } from './stores';
 
@@ -34,7 +35,7 @@ Vue.use(PerformancePlugin, {
  * @param {extendStoreCallback} options.extendStore -
  *   Function that receives the default store and returns an extended one.
  */
-export const initIde = (el, options = {}) => {
+export const initLegacyWebIDE = (el, options = {}) => {
   if (!el) return null;
 
   const { rootComponent = ide, extendStore = identity } = options;
@@ -93,8 +94,15 @@ export const initIde = (el, options = {}) => {
  */
 export function startIde(options) {
   const ideElement = document.getElementById('ide');
-  if (ideElement) {
+
+  if (!ideElement) {
+    return;
+  }
+
+  if (gon.features?.vscodeWebIde) {
+    initGitlabWebIDE(ideElement);
+  } else {
     resetServiceWorkersPublicPath();
-    initIde(ideElement, options);
+    initLegacyWebIDE(ideElement, options);
   }
 }
diff --git a/app/assets/javascripts/ide/init_gitlab_web_ide.js b/app/assets/javascripts/ide/init_gitlab_web_ide.js
new file mode 100644
index 00000000000..a061da38d4f
--- /dev/null
+++ b/app/assets/javascripts/ide/init_gitlab_web_ide.js
@@ -0,0 +1,30 @@
+import { cleanTrailingSlash } from './stores/utils';
+
+export const initGitlabWebIDE = async (el) => {
+  const { start } = await import('@gitlab/web-ide');
+
+  const { gitlab_url: gitlabUrl } = window.gon;
+  const baseUrl = new URL(process.env.GITLAB_WEB_IDE_PUBLIC_PATH, window.location.origin);
+
+  // what: Pull what we need from the element. We will replace it soon.
+  const { path_with_namespace: projectPath } = JSON.parse(el.dataset.project);
+  const { cspNonce: nonce, branchName: ref } = el.dataset;
+
+  // what: Clean up the element, but preserve id.
+  // why:  This way we don't inherit any `ide-loading` side-effects. This
+  //       mirrors the behavior of Vue when it mounts to an element.
+  const newEl = document.createElement(el.tagName);
+  newEl.id = el.id;
+  newEl.classList.add('gl--flex-center', 'gl-relative', 'gl-h-full');
+
+  el.replaceWith(newEl);
+
+  // what: Trigger start on our new mounting element
+  await start(newEl, {
+    baseUrl: cleanTrailingSlash(baseUrl.href),
+    projectPath,
+    gitlabUrl,
+    ref,
+    nonce,
+  });
+};