Add latest changes from gitlab-org/gitlab@master

2 files changed, 80 insertions, 1 deletions

diff --git a/app/assets/javascripts/ide/init_gitlab_web_ide.js b/app/assets/javascripts/ide/init_gitlab_web_ide.js
index edc93fdd184..5d50d2eec17 100644
--- a/app/assets/javascripts/ide/init_gitlab_web_ide.js
+++ b/app/assets/javascripts/ide/init_gitlab_web_ide.js
@@ -1,10 +1,28 @@
 import { start } from '@gitlab/web-ide';
+import { __ } from '~/locale';
+import { cleanLeadingSeparator } from '~/lib/utils/url_utility';
+import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_action';
+import { createAndSubmitForm } from '~/lib/utils/create_and_submit_form';
 import { getBaseConfig } from './lib/gitlab_web_ide/get_base_config';
 import { setupRootElement } from './lib/gitlab_web_ide/setup_root_element';
 
+const buildRemoteIdeURL = (ideRemotePath, remoteHost, remotePathArg) => {
+  const remotePath = cleanLeadingSeparator(remotePathArg);
+
+  const replacers = {
+    ':remote_host': encodeURIComponent(remoteHost),
+    ':remote_path': encodeURIComponent(remotePath).replaceAll('%2F', '/'),
+  };
+
+  // why: Use the function callback of "replace" so we replace both keys at once
+  return ideRemotePath.replace(/(:remote_host|:remote_path)/g, (key) => {
+    return replacers[key];
+  });
+};
+
 export const initGitlabWebIDE = async (el) => {
   // what: Pull what we need from the element. We will replace it soon.
-  const { cspNonce: nonce, branchName: ref, projectPath } = el.dataset;
+  const { cspNonce: nonce, branchName: ref, projectPath, ideRemotePath } = el.dataset;
 
   const rootEl = setupRootElement(el);
 
@@ -13,5 +31,26 @@ export const initGitlabWebIDE = async (el) => {
     nonce,
     projectPath,
     ref,
+    async handleStartRemote({ remoteHost, remotePath, connectionToken }) {
+      const confirmed = await confirmAction(
+        __('Are you sure you want to leave the Web IDE? All unsaved changes will be lost.'),
+        {
+          primaryBtnText: __('Start remote connection'),
+          cancelBtnText: __('Continue editing'),
+        },
+      );
+
+      if (!confirmed) {
+        return;
+      }
+
+      createAndSubmitForm({
+        url: buildRemoteIdeURL(ideRemotePath, remoteHost, remotePath),
+        data: {
+          connection_token: connectionToken,
+          return_url: window.location.href,
+        },
+      });
+    },
   });
 };
diff --git a/app/assets/javascripts/ide/remote/index.js b/app/assets/javascripts/ide/remote/index.js
new file mode 100644
index 00000000000..fb8db20c0c1
--- /dev/null
+++ b/app/assets/javascripts/ide/remote/index.js
@@ -0,0 +1,40 @@
+import { startRemote } from '@gitlab/web-ide';
+import { getBaseConfig, setupRootElement } from '~/ide/lib/gitlab_web_ide';
+import { isSameOriginUrl, joinPaths } from '~/lib/utils/url_utility';
+
+/**
+ * @param {Element} rootEl
+ */
+export const mountRemoteIDE = async (el) => {
+  const {
+    remoteHost: remoteAuthority,
+    remotePath: hostPath,
+    cspNonce,
+    connectionToken,
+    returnUrl,
+  } = el.dataset;
+
+  const rootEl = setupRootElement(el);
+
+  const visitReturnUrl = () => {
+    // security: Only change `href` if of the same origin as current page
+    if (returnUrl && isSameOriginUrl(returnUrl)) {
+      window.location.href = returnUrl;
+    } else {
+      window.location.reload();
+    }
+  };
+
+  startRemote(rootEl, {
+    ...getBaseConfig(),
+    nonce: cspNonce,
+    connectionToken,
+    // remoteAuthority must start with "/"
+    remoteAuthority: joinPaths('/', remoteAuthority),
+    // hostPath must start with "/"
+    hostPath: joinPaths('/', hostPath),
+    // TODO Handle error better
+    handleError: visitReturnUrl,
+    handleClose: visitReturnUrl,
+  });
+};