Add latest changes from gitlab-org/gitlab@master

5 files changed, 37 insertions, 21 deletions

diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js
index dec282239d9..cacc6708895 100644
--- a/app/assets/javascripts/ide/index.js
+++ b/app/assets/javascripts/ide/index.js
@@ -8,7 +8,6 @@ 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';
 
@@ -96,7 +95,7 @@ export const initLegacyWebIDE = (el, options = {}) => {
  *
  * @param {Objects} options - Extra options for the IDE (Used by EE).
  */
-export function startIde(options) {
+export async function startIde(options) {
   const ideElement = document.getElementById('ide');
 
   if (!ideElement) {
@@ -106,6 +105,7 @@ export function startIde(options) {
   const useNewWebIde = parseBoolean(ideElement.dataset.useNewWebIde);
 
   if (useNewWebIde) {
+    const { initGitlabWebIDE } = await import('./init_gitlab_web_ide');
     initGitlabWebIDE(ideElement);
   } else {
     resetServiceWorkersPublicPath();
diff --git a/app/assets/javascripts/ide/init_gitlab_web_ide.js b/app/assets/javascripts/ide/init_gitlab_web_ide.js
index 140f2895a29..edc93fdd184 100644
--- a/app/assets/javascripts/ide/init_gitlab_web_ide.js
+++ b/app/assets/javascripts/ide/init_gitlab_web_ide.js
@@ -1,29 +1,17 @@
-import { cleanTrailingSlash } from './stores/utils';
+import { start } from '@gitlab/web-ide';
+import { getBaseConfig } from './lib/gitlab_web_ide/get_base_config';
+import { setupRootElement } from './lib/gitlab_web_ide/setup_root_element';
 
 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 { cspNonce: nonce, branchName: ref, projectPath } = 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);
+  const rootEl = setupRootElement(el);
 
-  // what: Trigger start on our new mounting element
-  await start(newEl, {
-    baseUrl: cleanTrailingSlash(baseUrl.href),
+  start(rootEl, {
+    ...getBaseConfig(),
+    nonce,
     projectPath,
-    gitlabUrl,
     ref,
-    nonce,
   });
 };
diff --git a/app/assets/javascripts/ide/lib/gitlab_web_ide/get_base_config.js b/app/assets/javascripts/ide/lib/gitlab_web_ide/get_base_config.js
new file mode 100644
index 00000000000..fbd2ce4ce69
--- /dev/null
+++ b/app/assets/javascripts/ide/lib/gitlab_web_ide/get_base_config.js
@@ -0,0 +1,12 @@
+import { cleanEndingSeparator } from '~/lib/utils/url_utility';
+
+const getBaseUrl = () => {
+  const baseUrlObj = new URL(process.env.GITLAB_WEB_IDE_PUBLIC_PATH, window.location.origin);
+
+  return cleanEndingSeparator(baseUrlObj.href);
+};
+
+export const getBaseConfig = () => ({
+  baseUrl: getBaseUrl(),
+  gitlabUrl: window.gon.gitlab_url,
+});
diff --git a/app/assets/javascripts/ide/lib/gitlab_web_ide/index.js b/app/assets/javascripts/ide/lib/gitlab_web_ide/index.js
new file mode 100644
index 00000000000..8311e11672e
--- /dev/null
+++ b/app/assets/javascripts/ide/lib/gitlab_web_ide/index.js
@@ -0,0 +1,2 @@
+export * from './get_base_config';
+export * from './setup_root_element';
diff --git a/app/assets/javascripts/ide/lib/gitlab_web_ide/setup_root_element.js b/app/assets/javascripts/ide/lib/gitlab_web_ide/setup_root_element.js
new file mode 100644
index 00000000000..b0e06c88d26
--- /dev/null
+++ b/app/assets/javascripts/ide/lib/gitlab_web_ide/setup_root_element.js
@@ -0,0 +1,14 @@
+/**
+ * Cleans up the given element and prepares it for mounting to `@gitlab/web-ide`
+ *
+ * @param {Element} root The original root element
+ * @returns {Element} A new element ready to be used by `@gitlab/web-ide`
+ */
+export const setupRootElement = (el) => {
+  const newEl = document.createElement(el.tagName);
+  newEl.id = el.id;
+  newEl.classList.add('gl--flex-center', 'gl-relative', 'gl-h-full');
+  el.replaceWith(newEl);
+
+  return newEl;
+};