Add latest changes from gitlab-org/gitlab@master

5 files changed, 238 insertions, 4 deletions

diff --git a/spec/frontend/__helpers__/mock_window_location_helper.js b/spec/frontend/__helpers__/mock_window_location_helper.js
index 14082857053..a923ca661c5 100644
--- a/spec/frontend/__helpers__/mock_window_location_helper.js
+++ b/spec/frontend/__helpers__/mock_window_location_helper.js
@@ -27,12 +27,19 @@ const useMockLocation = (fn) => {
  * Create an object with the location interface but `jest.fn()` implementations.
  */
 export const createWindowLocationSpy = () => {
-  return {
+  const { origin, href } = window.location;
+
+  const mockLocation = {
     assign: jest.fn(),
     reload: jest.fn(),
     replace: jest.fn(),
     toString: jest.fn(),
+    origin,
+    // TODO: Do we need to update `origin` if `href` is changed?
+    href,
   };
+
+  return mockLocation;
 };
 
 /**
diff --git a/spec/frontend/ide/init_gitlab_web_ide_spec.js b/spec/frontend/ide/init_gitlab_web_ide_spec.js
index ae4d8d6d947..3b5b1ede28c 100644
--- a/spec/frontend/ide/init_gitlab_web_ide_spec.js
+++ b/spec/frontend/ide/init_gitlab_web_ide_spec.js
@@ -1,8 +1,13 @@
 import { start } from '@gitlab/web-ide';
 import { initGitlabWebIDE } from '~/ide/init_gitlab_web_ide';
+import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_action';
+import { createAndSubmitForm } from '~/lib/utils/create_and_submit_form';
 import { TEST_HOST } from 'helpers/test_constants';
+import waitForPromises from 'helpers/wait_for_promises';
 
 jest.mock('@gitlab/web-ide');
+jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_action');
+jest.mock('~/lib/utils/create_and_submit_form');
 
 const ROOT_ELEMENT_ID = 'ide';
 const TEST_NONCE = 'test123nonce';
@@ -10,8 +15,16 @@ const TEST_PROJECT_PATH = 'group1/project1';
 const TEST_BRANCH_NAME = '12345-foo-patch';
 const TEST_GITLAB_URL = 'https://test-gitlab/';
 const TEST_GITLAB_WEB_IDE_PUBLIC_PATH = 'test/webpack/assets/gitlab-web-ide/public/path';
+const TEST_IDE_REMOTE_PATH = '/-/ide/remote/:remote_host/:remote_path';
+const TEST_START_REMOTE_PARAMS = {
+  remoteHost: 'dev.example.gitlab.com/test',
+  remotePath: '/test/projects/f oo',
+  connectionToken: '123abc',
+};
 
 describe('ide/init_gitlab_web_ide', () => {
+  let resolveConfirm;
+
   const createRootElement = () => {
     const el = document.createElement('div');
 
@@ -21,19 +34,32 @@ describe('ide/init_gitlab_web_ide', () => {
     el.dataset.projectPath = TEST_PROJECT_PATH;
     el.dataset.cspNonce = TEST_NONCE;
     el.dataset.branchName = TEST_BRANCH_NAME;
+    el.dataset.ideRemotePath = TEST_IDE_REMOTE_PATH;
 
     document.body.append(el);
   };
   const findRootElement = () => document.getElementById(ROOT_ELEMENT_ID);
-  const act = () => initGitlabWebIDE(findRootElement());
+  const createSubject = () => initGitlabWebIDE(findRootElement());
+  const triggerHandleStartRemote = (startRemoteParams) => {
+    const [, config] = start.mock.calls[0];
+
+    config.handleStartRemote(startRemoteParams);
+  };
 
   beforeEach(() => {
     process.env.GITLAB_WEB_IDE_PUBLIC_PATH = TEST_GITLAB_WEB_IDE_PUBLIC_PATH;
     window.gon.gitlab_url = TEST_GITLAB_URL;
 
+    confirmAction.mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          resolveConfirm = resolve;
+        }),
+    );
+
     createRootElement();
 
-    act();
+    createSubject();
   });
 
   afterEach(() => {
@@ -48,6 +74,7 @@ describe('ide/init_gitlab_web_ide', () => {
       ref: TEST_BRANCH_NAME,
       gitlabUrl: TEST_GITLAB_URL,
       nonce: TEST_NONCE,
+      handleStartRemote: expect.any(Function),
     });
   });
 
@@ -59,4 +86,39 @@ describe('ide/init_gitlab_web_ide', () => {
       '<div id="ide" class="gl--flex-center gl-relative gl-h-full"></div>',
     );
   });
+
+  describe('when handleStartRemote is triggered', () => {
+    beforeEach(() => {
+      triggerHandleStartRemote(TEST_START_REMOTE_PARAMS);
+    });
+
+    it('promts for confirm', () => {
+      expect(confirmAction).toHaveBeenCalledWith(expect.any(String), {
+        primaryBtnText: expect.any(String),
+        cancelBtnText: expect.any(String),
+      });
+    });
+
+    it('does not submit, when not confirmed', async () => {
+      resolveConfirm(false);
+
+      await waitForPromises();
+
+      expect(createAndSubmitForm).not.toHaveBeenCalled();
+    });
+
+    it('submits, when confirmed', async () => {
+      resolveConfirm(true);
+
+      await waitForPromises();
+
+      expect(createAndSubmitForm).toHaveBeenCalledWith({
+        url: '/-/ide/remote/dev.example.gitlab.com%2Ftest/test/projects/f%20oo',
+        data: {
+          connection_token: TEST_START_REMOTE_PARAMS.connectionToken,
+          return_url: window.location.href,
+        },
+      });
+    });
+  });
 });
diff --git a/spec/frontend/ide/remote/index_spec.js b/spec/frontend/ide/remote/index_spec.js
new file mode 100644
index 00000000000..0f23b0a4e45
--- /dev/null
+++ b/spec/frontend/ide/remote/index_spec.js
@@ -0,0 +1,91 @@
+import { startRemote } from '@gitlab/web-ide';
+import { getBaseConfig, setupRootElement } from '~/ide/lib/gitlab_web_ide';
+import { mountRemoteIDE } from '~/ide/remote';
+import { TEST_HOST } from 'helpers/test_constants';
+import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
+
+jest.mock('@gitlab/web-ide');
+jest.mock('~/ide/lib/gitlab_web_ide');
+
+const TEST_DATA = {
+  remoteHost: 'example.com:3443',
+  remotePath: 'test/path/gitlab',
+  cspNonce: 'just7some8noncense',
+  connectionToken: 'connectAtoken',
+  returnUrl: 'https://example.com/return',
+};
+
+const TEST_BASE_CONFIG = {
+  gitlabUrl: '/test/gitlab',
+};
+
+const TEST_RETURN_URL_SAME_ORIGIN = `${TEST_HOST}/foo/example`;
+
+describe('~/ide/remote/index', () => {
+  useMockLocationHelper();
+  const originalHref = window.location.href;
+
+  let el;
+  let rootEl;
+
+  beforeEach(() => {
+    el = document.createElement('div');
+    Object.entries(TEST_DATA).forEach(([key, value]) => {
+      el.dataset[key] = value;
+    });
+
+    // Stub setupRootElement so we can assert on return element
+    rootEl = document.createElement('div');
+    setupRootElement.mockReturnValue(rootEl);
+
+    // Stub getBaseConfig so we can assert
+    getBaseConfig.mockReturnValue(TEST_BASE_CONFIG);
+  });
+
+  describe('default', () => {
+    beforeEach(() => {
+      mountRemoteIDE(el);
+    });
+
+    it('calls startRemote', () => {
+      expect(startRemote).toHaveBeenCalledWith(rootEl, {
+        ...TEST_BASE_CONFIG,
+        nonce: TEST_DATA.cspNonce,
+        connectionToken: TEST_DATA.connectionToken,
+        remoteAuthority: `/${TEST_DATA.remoteHost}`,
+        hostPath: `/${TEST_DATA.remotePath}`,
+        handleError: expect.any(Function),
+        handleClose: expect.any(Function),
+      });
+    });
+  });
+
+  describe.each`
+    returnUrl                      | fnName           | reloadExpectation | hrefExpectation
+    ${TEST_DATA.returnUrl}         | ${'handleError'} | ${1}              | ${originalHref}
+    ${TEST_DATA.returnUrl}         | ${'handleClose'} | ${1}              | ${originalHref}
+    ${TEST_RETURN_URL_SAME_ORIGIN} | ${'handleClose'} | ${0}              | ${TEST_RETURN_URL_SAME_ORIGIN}
+    ${TEST_RETURN_URL_SAME_ORIGIN} | ${'handleError'} | ${0}              | ${TEST_RETURN_URL_SAME_ORIGIN}
+    ${''}                          | ${'handleClose'} | ${1}              | ${originalHref}
+  `(
+    'with returnUrl=$returnUrl and fn=$fnName',
+    ({ returnUrl, fnName, reloadExpectation, hrefExpectation }) => {
+      beforeEach(() => {
+        el.dataset.returnUrl = returnUrl;
+
+        mountRemoteIDE(el);
+      });
+
+      it('changes location', () => {
+        expect(window.location.reload).not.toHaveBeenCalled();
+
+        const [, config] = startRemote.mock.calls[0];
+
+        config[fnName]();
+
+        expect(window.location.reload).toHaveBeenCalledTimes(reloadExpectation);
+        expect(window.location.href).toBe(hrefExpectation);
+      });
+    },
+  );
+});
diff --git a/spec/frontend/lib/utils/create_and_submit_form_spec.js b/spec/frontend/lib/utils/create_and_submit_form_spec.js
new file mode 100644
index 00000000000..9f2472c60f7
--- /dev/null
+++ b/spec/frontend/lib/utils/create_and_submit_form_spec.js
@@ -0,0 +1,73 @@
+import csrf from '~/lib/utils/csrf';
+import { TEST_HOST } from 'helpers/test_constants';
+import { createAndSubmitForm } from '~/lib/utils/create_and_submit_form';
+import { joinPaths } from '~/lib/utils/url_utility';
+
+const TEST_URL = '/foo/bar/lorem';
+const TEST_DATA = {
+  'test_thing[0]': 'Lorem Ipsum',
+  'test_thing[1]': 'Dolar Sit',
+  x: 123,
+};
+const TEST_CSRF = 'testcsrf00==';
+
+describe('~/lib/utils/create_and_submit_form', () => {
+  let submitSpy;
+
+  const findForm = () => document.querySelector('form');
+  const findInputsModel = () =>
+    Array.from(findForm().querySelectorAll('input')).map((inputEl) => ({
+      type: inputEl.type,
+      name: inputEl.name,
+      value: inputEl.value,
+    }));
+
+  beforeEach(() => {
+    submitSpy = jest.spyOn(HTMLFormElement.prototype, 'submit');
+    document.head.innerHTML = `<meta name="csrf-token" content="${TEST_CSRF}">`;
+    csrf.init();
+  });
+
+  afterEach(() => {
+    document.head.innerHTML = '';
+    document.body.innerHTML = '';
+  });
+
+  describe('default', () => {
+    beforeEach(() => {
+      createAndSubmitForm({
+        url: TEST_URL,
+        data: TEST_DATA,
+      });
+    });
+
+    it('creates form', () => {
+      const form = findForm();
+
+      expect(form.action).toBe(joinPaths(TEST_HOST, TEST_URL));
+      expect(form.method).toBe('post');
+      expect(form.style).toMatchObject({
+        display: 'none',
+      });
+    });
+
+    it('creates inputs', () => {
+      expect(findInputsModel()).toEqual([
+        ...Object.keys(TEST_DATA).map((key) => ({
+          type: 'hidden',
+          name: key,
+          value: String(TEST_DATA[key]),
+        })),
+        {
+          type: 'hidden',
+          name: 'authenticity_token',
+          value: TEST_CSRF,
+        },
+      ]);
+    });
+
+    it('submits form', () => {
+      expect(submitSpy).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/spec/frontend/packages_and_registries/settings/project/settings/components/container_expiration_policy_form_spec.js b/spec/frontend/packages_and_registries/settings/project/settings/components/container_expiration_policy_form_spec.js
index 8e08864bdb8..cbb5aa52694 100644
--- a/spec/frontend/packages_and_registries/settings/project/settings/components/container_expiration_policy_form_spec.js
+++ b/spec/frontend/packages_and_registries/settings/project/settings/components/container_expiration_policy_form_spec.js
@@ -232,6 +232,7 @@ describe('Container Expiration Policy Settings Form', () => {
   describe('form', () => {
     describe('form submit event', () => {
       useMockLocationHelper();
+      const originalHref = window.location.href;
 
       it('save has type submit', () => {
         mountComponent();
@@ -319,7 +320,7 @@ describe('Container Expiration Policy Settings Form', () => {
             await submitForm();
 
             expect(wrapper.vm.$toast.show).toHaveBeenCalledWith(UPDATE_SETTINGS_ERROR_MESSAGE);
-            expect(window.location.href).toBeUndefined();
+            expect(window.location.href).toBe(originalHref);
           });
 
           it('parses the error messages', async () => {