From 319b3df904e12c61bc9ee4a7894a5d4180cc5881 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Wed, 31 Jul 2024 09:41:15 -0500
Subject: [PATCH 1/8] Fix relative_url_root Web IDE OAuth issues

- Have gitlabUrl end with slash so that OAuth paths include
  relative_url_root
- Update oauth_domain_mismatch_error to concatenate based
  on the real baseUrl of the callback URL's.
- Update getOAuthConfig to take into account relative_url_root
  when building callbackUrl
---
 .../oauth_domain_mismatch_error.vue           | 47 +++++---------
 app/assets/javascripts/ide/constants.js       |  3 +
 app/assets/javascripts/ide/index.js           | 24 +++----
 .../ide/lib/gitlab_web_ide/get_base_config.js |  8 +--
 .../lib/gitlab_web_ide/get_oauth_config.js    | 54 +++++++++++++++-
 .../ide/lib/parse_callback_urls.js            | 62 +++++++++++++++++++
 .../oauth_callback_domain_mismatch_error.js   | 26 +++-----
 .../javascripts/lib/utils/url_utility.js      | 11 ++++
 config/routes.rb                              |  1 +
 locale/gitlab.pot                             |  3 -
 .../gitlab_web_ide/get_base_config_spec.js    |  4 +-
 .../ide/lib/parse_callback_urls_spec.js       | 55 ++++++++++++++++
 spec/frontend/lib/utils/url_utility_spec.js   | 17 +++++
 13 files changed, 240 insertions(+), 75 deletions(-)
 create mode 100644 app/assets/javascripts/ide/lib/parse_callback_urls.js
 create mode 100644 spec/frontend/ide/lib/parse_callback_urls_spec.js

diff --git a/app/assets/javascripts/ide/components/oauth_domain_mismatch_error.vue b/app/assets/javascripts/ide/components/oauth_domain_mismatch_error.vue
index 9899e941fbfe9b..bc2d365df5d3d3 100644
--- a/app/assets/javascripts/ide/components/oauth_domain_mismatch_error.vue
+++ b/app/assets/javascripts/ide/components/oauth_domain_mismatch_error.vue
@@ -1,43 +1,32 @@
 <script>
-import { GlButton, GlSprintf, GlCollapsibleListbox, GlIcon } from '@gitlab/ui';
+import { GlButton, GlSprintf, GlDisclosureDropdown } from '@gitlab/ui';
 import GITLAB_LOGO_SVG_URL from '@gitlab/svgs/dist/illustrations/gitlab_logo.svg?url';
 import { s__ } from '~/locale';
-import { logError } from '~/lib/logger';
+import { joinPaths, stripRelativeUrlRootFromPath } from '~/lib/utils/url_utility';
 
 export default {
   name: 'OAuthDomainMismatchError',
   components: {
     GlButton,
     GlSprintf,
-    GlCollapsibleListbox,
-    GlIcon,
+    GlDisclosureDropdown,
   },
   props: {
-    callbackUrlOrigins: {
+    callbackUrls: {
       type: Array,
       required: true,
     },
   },
   computed: {
     dropdownItems() {
-      return this.callbackUrlOrigins.map((domain) => {
+      return this.callbackUrls.map(({ base }) => {
         return {
-          value: domain,
-          text: domain,
+          href: joinPaths(base, stripRelativeUrlRootFromPath(window.location.pathname)),
+          text: base,
         };
       });
     },
   },
-  methods: {
-    reloadPage(urlDomain) {
-      try {
-        const current = new URL(urlDomain + window.location.pathname);
-        window.location.replace(current.toString());
-      } catch (e) {
-        logError(s__('IDE|Error reloading page'), e);
-      }
-    },
-  },
   gitlabLogo: GITLAB_LOGO_SVG_URL,
   i18n: {
     imgAlt: s__('IDE|GitLab logo'),
@@ -68,23 +57,19 @@ export default {
         {{ $options.i18n.contact }}
       </p>
       <div class="gl-mt-6">
-        <gl-collapsible-listbox
-          v-if="callbackUrlOrigins.length > 1"
+        <gl-disclosure-dropdown
+          v-if="dropdownItems.length > 1"
           :items="dropdownItems"
-          :header-text="$options.i18n.dropdownHeader"
-          @select="reloadPage"
+          :toggle-text="$options.i18n.buttonText.domains"
+        />
+        <gl-button
+          v-else-if="dropdownItems.length === 1"
+          variant="confirm"
+          :href="dropdownItems[0].href"
         >
-          <template #toggle>
-            <gl-button variant="confirm" class="self-center">
-              {{ $options.i18n.buttonText.domains }}
-              <gl-icon class="dropdown-chevron gl-ml-2" name="chevron-down" />
-            </gl-button>
-          </template>
-        </gl-collapsible-listbox>
-        <gl-button v-else variant="confirm" @click="reloadPage(callbackUrlOrigins[0])">
           <gl-sprintf :message="$options.i18n.buttonText.singleDomain">
             <template #domain>
-              {{ callbackUrlOrigins[0] }}
+              {{ dropdownItems[0].text }}
             </template>
           </gl-sprintf>
         </gl-button>
diff --git a/app/assets/javascripts/ide/constants.js b/app/assets/javascripts/ide/constants.js
index f754de6727c13f..3ab4de11a221c9 100644
--- a/app/assets/javascripts/ide/constants.js
+++ b/app/assets/javascripts/ide/constants.js
@@ -112,3 +112,6 @@ export const DEFAULT_BRANCH = 'main';
 export const GITLAB_WEB_IDE_FEEDBACK_ISSUE = 'https://gitlab.com/gitlab-org/gitlab/-/issues/377367';
 
 export const IDE_ELEMENT_ID = 'ide';
+
+// note: This path comes from `config/routes.rb`
+export const WEB_IDE_OAUTH_CALLBACK_URL_PATH = '/-/ide/oauth_redirect';
diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js
index 020f8e98da19da..29225eda13a8d2 100644
--- a/app/assets/javascripts/ide/index.js
+++ b/app/assets/javascripts/ide/index.js
@@ -24,24 +24,20 @@ export async function startIde(options) {
     return;
   }
 
-  const oAuthCallbackDomainMismatchApp = new OAuthCallbackDomainMismatchErrorApp(
-    ideElement,
-    ideElement.dataset.callbackUrls,
-  );
-
-  if (oAuthCallbackDomainMismatchApp.isVisitingFromNonRegisteredOrigin()) {
-    oAuthCallbackDomainMismatchApp.renderError();
-    return;
-  }
-
   const useNewWebIde = parseBoolean(ideElement.dataset.useNewWebIde);
 
-  if (useNewWebIde) {
-    const { initGitlabWebIDE } = await import('./init_gitlab_web_ide');
-    initGitlabWebIDE(ideElement);
-  } else {
+  if (!useNewWebIde) {
     resetServiceWorkersPublicPath();
     const { initLegacyWebIDE } = await import('./init_legacy_web_ide');
     initLegacyWebIDE(ideElement, options);
   }
+
+  const oAuthCallbackDomainMismatchApp = new OAuthCallbackDomainMismatchErrorApp(ideElement);
+
+  if (oAuthCallbackDomainMismatchApp.isVisitingFromNonRegisteredOrigin()) {
+    oAuthCallbackDomainMismatchApp.renderError();
+    return;
+  }
+  const { initGitlabWebIDE } = await import('./init_gitlab_web_ide');
+  initGitlabWebIDE(ideElement);
 }
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
index e131fb669ead71..d08f755ed5cc8a 100644
--- 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
@@ -4,12 +4,12 @@ const getGitLabUrl = (gitlabPath = '') => {
   const path = joinPaths('/', window.gon.relative_url_root || '', gitlabPath);
   const baseUrlObj = new URL(path, window.location.origin);
 
-  return cleanEndingSeparator(baseUrlObj.href);
+  return baseUrlObj.href;
 };
 
 export const getBaseConfig = () => ({
   // baseUrl - The URL which hosts the Web IDE static web assets
-  baseUrl: getGitLabUrl(process.env.GITLAB_WEB_IDE_PUBLIC_PATH),
-  // baseUrl - The URL for the GitLab instance
-  gitlabUrl: getGitLabUrl(''),
+  baseUrl: cleanEndingSeparator(getGitLabUrl(process.env.GITLAB_WEB_IDE_PUBLIC_PATH)),
+  // gitlabUrl - The URL for the GitLab instance. End with trailing slash so URL's are built properly in relative_url_root.
+  gitlabUrl: getGitLabUrl('/'),
 });
diff --git a/app/assets/javascripts/ide/lib/gitlab_web_ide/get_oauth_config.js b/app/assets/javascripts/ide/lib/gitlab_web_ide/get_oauth_config.js
index bcd3d240c8cb1c..c55e5abd53ef0d 100644
--- a/app/assets/javascripts/ide/lib/gitlab_web_ide/get_oauth_config.js
+++ b/app/assets/javascripts/ide/lib/gitlab_web_ide/get_oauth_config.js
@@ -1,14 +1,62 @@
-export const WEB_IDE_OAUTH_CALLBACK_URL_PATH = '/-/ide/oauth_redirect';
+import { logError } from '~/lib/logger';
+import { joinPaths } from '~/lib/utils/url_utility';
+import { WEB_IDE_OAUTH_CALLBACK_URL_PATH } from '../../constants';
+import { parseCallbackUrls } from '../parse_callback_urls';
 
-export const getOAuthConfig = ({ clientId }) => {
+// note: This should never happen, but just in case
+/**
+ * @param {string} origin
+ * @returns
+ */
+const getDefaultCallbackUrl = (origin) => {
+  // If we have `gitlab_url` setup correctly (i.e. customer not through proxy), let's build using that
+  if (new URL(window.gon.gitlab_url).origin === origin) {
+    return joinPaths(window.gon.gitlab_url, WEB_IDE_OAUTH_CALLBACK_URL_PATH);
+  }
+
+  // Otherwise, let's take our best guess
+  return new URL(WEB_IDE_OAUTH_CALLBACK_URL_PATH, origin).toString();
+};
+
+/**
+ *
+ * @param {{ origin: string, url: string }[]} callbackUrls
+ */
+const getCallbackUrl = (callbackUrls) => {
+  const { origin } = window.location;
+  const defaultCallbackUrl = getDefaultCallbackUrl(origin);
+
+  // If there's a callback url for what we'd expect, let's just use that
+  if (callbackUrls.find((x) => x.url === defaultCallbackUrl)) {
+    return defaultCallbackUrl;
+  }
+
+  // Otherwise, let's get the **longest** callback url that matches our origin
+  const callbackUrl = callbackUrls
+    .filter((x) => x.origin === origin)
+    .reduce((acc, { url }) => (acc.length >= url.length ? acc : url), '');
+
+  if (callbackUrl) {
+    return callbackUrl;
+  }
+
+  logError(
+    `Could not find callback url in Web IDE OAuth app for "${origin}". Trying to use default...`,
+  );
+  return defaultCallbackUrl;
+};
+
+export const getOAuthConfig = ({ clientId, callbackUrls: callbackUrlsData }) => {
   if (!clientId) {
     return undefined;
   }
 
+  const callbackUrls = parseCallbackUrls(callbackUrlsData);
+
   return {
     type: 'oauth',
     clientId,
-    callbackUrl: new URL(WEB_IDE_OAUTH_CALLBACK_URL_PATH, window.location.origin).toString(),
+    callbackUrl: getCallbackUrl(callbackUrls),
     protectRefreshToken: true,
   };
 };
diff --git a/app/assets/javascripts/ide/lib/parse_callback_urls.js b/app/assets/javascripts/ide/lib/parse_callback_urls.js
new file mode 100644
index 00000000000000..c22bc944822302
--- /dev/null
+++ b/app/assets/javascripts/ide/lib/parse_callback_urls.js
@@ -0,0 +1,62 @@
+import { joinPaths } from '~/lib/utils/url_utility';
+import { logError } from '~/lib/logger';
+import { WEB_IDE_OAUTH_CALLBACK_URL_PATH } from '../constants';
+
+const parseCallbackUrl = (urlStr) => {
+  let callbackUrl;
+
+  try {
+    callbackUrl = new URL(urlStr);
+  } catch {
+    // Not a valid URL. Nothing to do here.
+    return undefined;
+  }
+
+  // If we're an unexpected callback URL
+  if (!callbackUrl.pathname.endsWith(WEB_IDE_OAUTH_CALLBACK_URL_PATH)) {
+    return {
+      origin: callbackUrl.origin,
+      base: joinPaths(callbackUrl.origin, '/'),
+      url: urlStr,
+    };
+  }
+
+  // Else, trim the expected bit to get the origin + relative_url_root
+  const callbackRelativePath = callbackUrl.pathname.substring(
+    0,
+    callbackUrl.pathname.length - WEB_IDE_OAUTH_CALLBACK_URL_PATH.length,
+  );
+  const baseUrl = new URL(callbackUrl);
+  baseUrl.pathname = callbackRelativePath;
+  baseUrl.hash = '';
+  baseUrl.search = '';
+
+  return {
+    origin: baseUrl.origin,
+    base: joinPaths(baseUrl.toString(), '/'),
+    url: urlStr,
+  };
+};
+
+export const parseCallbackUrls = (callbackUrlsJson) => {
+  if (!callbackUrlsJson) {
+    return [];
+  }
+
+  let urls;
+
+  try {
+    urls = JSON.parse(callbackUrlsJson);
+  } catch {
+    // why: We dont want to translate console errors
+    // eslint-disable-next-line @gitlab/require-i18n-strings
+    logError('Failed to parse callback URLs JSON');
+    return [];
+  }
+
+  if (!urls || !Array.isArray(urls)) {
+    return [];
+  }
+
+  return urls.map(parseCallbackUrl).filter(Boolean);
+};
diff --git a/app/assets/javascripts/ide/oauth_callback_domain_mismatch_error.js b/app/assets/javascripts/ide/oauth_callback_domain_mismatch_error.js
index 6598fe62d4979e..f800dfa05ae229 100644
--- a/app/assets/javascripts/ide/oauth_callback_domain_mismatch_error.js
+++ b/app/assets/javascripts/ide/oauth_callback_domain_mismatch_error.js
@@ -1,48 +1,38 @@
 import Vue from 'vue';
 import OAuthDomainMismatchError from './components/oauth_domain_mismatch_error.vue';
+import { parseCallbackUrls } from './lib/parse_callback_urls';
 
 export class OAuthCallbackDomainMismatchErrorApp {
   #el;
-  #callbackUrlOrigins;
+  #callbackUrls;
 
-  constructor(el, callbackUrls) {
+  constructor(el) {
     this.#el = el;
-    this.#callbackUrlOrigins =
-      OAuthCallbackDomainMismatchErrorApp.#getCallbackUrlOrigins(callbackUrls);
+    this.#callbackUrls = parseCallbackUrls(el.dataset.callbackUrls);
   }
 
   isVisitingFromNonRegisteredOrigin() {
     return (
-      this.#callbackUrlOrigins.length && !this.#callbackUrlOrigins.includes(window.location.origin)
+      this.#callbackUrls.length &&
+      !this.#callbackUrls.some((x) => x.origin === window.location.origin)
     );
   }
 
   renderError() {
-    const callbackUrlOrigins = this.#callbackUrlOrigins;
+    const callbackUrls = this.#callbackUrls;
     const el = this.#el;
 
     if (!el) return null;
 
     return new Vue({
       el,
-      data() {
-        return {
-          callbackUrlOrigins,
-        };
-      },
       render(createElement) {
         return createElement(OAuthDomainMismatchError, {
           props: {
-            callbackUrlOrigins,
+            callbackUrls,
           },
         });
       },
     });
   }
-
-  static #getCallbackUrlOrigins(callbackUrls) {
-    if (!callbackUrls) return [];
-
-    return JSON.parse(callbackUrls).map((url) => new URL(url).origin);
-  }
 }
diff --git a/app/assets/javascripts/lib/utils/url_utility.js b/app/assets/javascripts/lib/utils/url_utility.js
index 92db00be36def5..52e39828584a73 100644
--- a/app/assets/javascripts/lib/utils/url_utility.js
+++ b/app/assets/javascripts/lib/utils/url_utility.js
@@ -790,3 +790,14 @@ export function buildURLwithRefType({ base = window.location.origin, path, refTy
   }
   return url.pathname + url.search;
 }
+
+export function stripRelativeUrlRootFromPath(path) {
+  const relativeUrlRoot = joinPaths(window.gon.relative_url_root, '/');
+
+  // If we have no relative url root or path doesn't start with it, just return the path
+  if (relativeUrlRoot === '/' || !path.startsWith(relativeUrlRoot)) {
+    return path;
+  }
+
+  return joinPaths('/', path.substring(relativeUrlRoot.length));
+}
diff --git a/config/routes.rb b/config/routes.rb
index fb3427696f4e56..4e7e971075be76 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -145,6 +145,7 @@
       scope :ide, as: :ide, format: false do
         get '/', to: 'ide#index'
         get '/project', to: 'ide#index'
+        # note: This path has a hardcoded reference in the FE `app/assets/javascripts/ide/lib/parse_callback_urls.js`
         get '/oauth_redirect', to: 'ide#oauth_redirect'
 
         scope path: 'project/:project_id', as: :project, constraints: { project_id: Gitlab::PathRegex.full_namespace_route_regex } do
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index ed800468b78c9d..f8656d68c442cb 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -26672,9 +26672,6 @@ msgstr ""
 msgid "IDE|Editing this application might affect the functionality of the Web IDE. Ensure the configuration meets the following conditions:"
 msgstr ""
 
-msgid "IDE|Error reloading page"
-msgstr ""
-
 msgid "IDE|GitLab logo"
 msgstr ""
 
diff --git a/spec/frontend/ide/lib/gitlab_web_ide/get_base_config_spec.js b/spec/frontend/ide/lib/gitlab_web_ide/get_base_config_spec.js
index 3c42f54a1f7979..e50868d69add59 100644
--- a/spec/frontend/ide/lib/gitlab_web_ide/get_base_config_spec.js
+++ b/spec/frontend/ide/lib/gitlab_web_ide/get_base_config_spec.js
@@ -16,7 +16,7 @@ describe('~/ide/lib/gitlab_web_ide/get_base_config', () => {
 
     expect(actual).toEqual({
       baseUrl: `${TEST_HOST}/${TEST_GITLAB_WEB_IDE_PUBLIC_PATH}`,
-      gitlabUrl: TEST_HOST,
+      gitlabUrl: `${TEST_HOST}/`,
     });
   });
 
@@ -27,7 +27,7 @@ describe('~/ide/lib/gitlab_web_ide/get_base_config', () => {
 
     expect(actual).toEqual({
       baseUrl: `${TEST_HOST}${TEST_RELATIVE_URL_ROOT}/${TEST_GITLAB_WEB_IDE_PUBLIC_PATH}`,
-      gitlabUrl: `${TEST_HOST}${TEST_RELATIVE_URL_ROOT}`,
+      gitlabUrl: `${TEST_HOST}${TEST_RELATIVE_URL_ROOT}/`,
     });
   });
 });
diff --git a/spec/frontend/ide/lib/parse_callback_urls_spec.js b/spec/frontend/ide/lib/parse_callback_urls_spec.js
new file mode 100644
index 00000000000000..082efd37ea8c5a
--- /dev/null
+++ b/spec/frontend/ide/lib/parse_callback_urls_spec.js
@@ -0,0 +1,55 @@
+import { parseCallbackUrls } from '~/ide/lib/parse_callback_urls';
+import { logError } from '~/lib/logger';
+
+jest.mock('~/lib/logger');
+
+describe('ide/lib/parse_callback_urls', () => {
+  it('parses the given JSON URL array and returns some metadata for them', () => {
+    const actual = parseCallbackUrls(
+      JSON.stringify([
+        'https://gitlab.com/-/ide/oauth_redirect',
+        'not a url',
+        'https://gdk.test:3443/-/ide/oauth_redirect/',
+        'https://gdk.test:3443/gitlab/-/ide/oauth_redirect#1234?query=foo',
+        'https://example.com/not-a-real-one-/ide/oauth_redirectz',
+      ]),
+    );
+
+    expect(actual).toEqual([
+      {
+        origin: 'https://gitlab.com',
+        base: 'https://gitlab.com/',
+        url: 'https://gitlab.com/-/ide/oauth_redirect',
+      },
+      {
+        origin: 'https://gdk.test:3443',
+        base: 'https://gdk.test:3443/',
+        url: 'https://gdk.test:3443/-/ide/oauth_redirect/',
+      },
+      {
+        origin: 'https://gdk.test:3443',
+        base: 'https://gdk.test:3443/gitlab/',
+        url: 'https://gdk.test:3443/gitlab/-/ide/oauth_redirect#1234?query=foo',
+      },
+      {
+        origin: 'https://example.com',
+        base: 'https://example.com/',
+        url: 'https://example.com/not-a-real-one-/ide/oauth_redirectz',
+      },
+    ]);
+  });
+
+  it('returns empty when given empty', () => {
+    expect(parseCallbackUrls('')).toEqual([]);
+    expect(logError).not.toHaveBeenCalled();
+  });
+
+  it('returns empty when not valid JSON', () => {
+    expect(parseCallbackUrls('babar')).toEqual([]);
+    expect(logError).toHaveBeenCalledWith('Failed to parse callback URLs JSON');
+  });
+
+  it('returns empty when not array JSON', () => {
+    expect(parseCallbackUrls('{}')).toEqual([]);
+  });
+});
diff --git a/spec/frontend/lib/utils/url_utility_spec.js b/spec/frontend/lib/utils/url_utility_spec.js
index 75f8a1f342d40f..f29fa1f76cf1ea 100644
--- a/spec/frontend/lib/utils/url_utility_spec.js
+++ b/spec/frontend/lib/utils/url_utility_spec.js
@@ -1304,4 +1304,21 @@ describe('URL utility', () => {
       expect(urlUtils.buildURLwithRefType({ base, path, refType })).toBe(output);
     });
   });
+
+  describe('stripRelativeUrlRootFromPath', () => {
+    it.each`
+      relativeUrlRoot | path                   | expectation
+      ${''}           | ${'/foo/bar'}          | ${'/foo/bar'}
+      ${'/'}          | ${'/foo/bar'}          | ${'/foo/bar'}
+      ${'/foo'}       | ${'/foo/bar'}          | ${'/bar'}
+      ${'/gitlab/'}   | ${'/gitlab/-/ide/foo'} | ${'/-/ide/foo'}
+    `(
+      'with relative_url_root="$relativeUrlRoot", "$path" should return "$expectation"',
+      ({ relativeUrlRoot, path, expectation }) => {
+        window.gon.relative_url_root = relativeUrlRoot;
+
+        expect(urlUtils.stripRelativeUrlRootFromPath(path)).toBe(expectation);
+      },
+    );
+  });
 });
-- 
GitLab


From a8f6514d39794551d9a1391930b4a68346bd6e4f Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Wed, 31 Jul 2024 18:40:58 -0400
Subject: [PATCH 2/8] Simplfiy getCallbackUrl and hasExpectedCallbackUrl logic

Simplify getCallbackUrl and hasExpectedCallbackUrl logic.
Update specs.
---
 .../oauth_domain_mismatch_error.vue           | 16 ++++
 app/assets/javascripts/ide/constants.js       |  1 +
 app/assets/javascripts/ide/index.js           |  2 +-
 .../lib/gitlab_web_ide/get_oauth_config.js    | 54 +----------
 .../oauth_callback_urls.js}                   | 16 +++-
 .../oauth_callback_domain_mismatch_error.js   | 12 +--
 locale/gitlab.pot                             |  3 +
 .../oauth_domain_mismatch_error_spec.js       | 74 +++++++--------
 spec/frontend/ide/index_spec.js               | 28 ++++--
 .../oauth_callback_urls_spec.js               | 89 +++++++++++++++++++
 .../ide/lib/parse_callback_urls_spec.js       | 55 ------------
 11 files changed, 189 insertions(+), 161 deletions(-)
 rename app/assets/javascripts/ide/lib/{parse_callback_urls.js => gitlab_web_ide/oauth_callback_urls.js} (79%)
 create mode 100644 spec/frontend/ide/lib/gitlab_web_ide/oauth_callback_urls_spec.js
 delete mode 100644 spec/frontend/ide/lib/parse_callback_urls_spec.js

diff --git a/app/assets/javascripts/ide/components/oauth_domain_mismatch_error.vue b/app/assets/javascripts/ide/components/oauth_domain_mismatch_error.vue
index bc2d365df5d3d3..e94b4e45a2dd94 100644
--- a/app/assets/javascripts/ide/components/oauth_domain_mismatch_error.vue
+++ b/app/assets/javascripts/ide/components/oauth_domain_mismatch_error.vue
@@ -12,6 +12,10 @@ export default {
     GlDisclosureDropdown,
   },
   props: {
+    expectedCallbackUrl: {
+      type: String,
+      required: true,
+    },
     callbackUrls: {
       type: Array,
       required: true,
@@ -39,6 +43,9 @@ export default {
     description: s__(
       "IDE|The URL you're using to access the Web IDE and the configured OAuth callback URL do not match. This issue often occurs when you're using a proxy.",
     ),
+    expected: s__(
+      'IDE|Expected to to find callback URL entry for: %{codeBlockStart}%{expectedCallbackUrl}%{codeBlockEnd}.',
+    ),
     contact: s__(
       'IDE|Contact your administrator or try to open the Web IDE again with another domain.',
     ),
@@ -53,6 +60,15 @@ export default {
       <p>
         {{ $options.i18n.description }}
       </p>
+      <gl-sprintf :message="$options.i18n.expected">
+        <template #codeBlock="{ content }">
+          <code>{{
+            sprintf(content, {
+              expectedCallbackUrl,
+            })
+          }}</code>
+        </template>
+      </gl-sprintf>
       <p>
         {{ $options.i18n.contact }}
       </p>
diff --git a/app/assets/javascripts/ide/constants.js b/app/assets/javascripts/ide/constants.js
index 3ab4de11a221c9..c92fe21068d50c 100644
--- a/app/assets/javascripts/ide/constants.js
+++ b/app/assets/javascripts/ide/constants.js
@@ -114,4 +114,5 @@ export const GITLAB_WEB_IDE_FEEDBACK_ISSUE = 'https://gitlab.com/gitlab-org/gitl
 export const IDE_ELEMENT_ID = 'ide';
 
 // note: This path comes from `config/routes.rb`
+export const IDE_PATH = '/-/ide';
 export const WEB_IDE_OAUTH_CALLBACK_URL_PATH = '/-/ide/oauth_redirect';
diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js
index 29225eda13a8d2..aa977872a2a734 100644
--- a/app/assets/javascripts/ide/index.js
+++ b/app/assets/javascripts/ide/index.js
@@ -34,7 +34,7 @@ export async function startIde(options) {
 
   const oAuthCallbackDomainMismatchApp = new OAuthCallbackDomainMismatchErrorApp(ideElement);
 
-  if (oAuthCallbackDomainMismatchApp.isVisitingFromNonRegisteredOrigin()) {
+  if (!oAuthCallbackDomainMismatchApp.hasExpectedCallbackUrl()) {
     oAuthCallbackDomainMismatchApp.renderError();
     return;
   }
diff --git a/app/assets/javascripts/ide/lib/gitlab_web_ide/get_oauth_config.js b/app/assets/javascripts/ide/lib/gitlab_web_ide/get_oauth_config.js
index c55e5abd53ef0d..66a36896a31628 100644
--- a/app/assets/javascripts/ide/lib/gitlab_web_ide/get_oauth_config.js
+++ b/app/assets/javascripts/ide/lib/gitlab_web_ide/get_oauth_config.js
@@ -1,62 +1,14 @@
-import { logError } from '~/lib/logger';
-import { joinPaths } from '~/lib/utils/url_utility';
-import { WEB_IDE_OAUTH_CALLBACK_URL_PATH } from '../../constants';
-import { parseCallbackUrls } from '../parse_callback_urls';
+import { getOAuthCallbackUrl } from './oauth_callback_urls';
 
-// note: This should never happen, but just in case
-/**
- * @param {string} origin
- * @returns
- */
-const getDefaultCallbackUrl = (origin) => {
-  // If we have `gitlab_url` setup correctly (i.e. customer not through proxy), let's build using that
-  if (new URL(window.gon.gitlab_url).origin === origin) {
-    return joinPaths(window.gon.gitlab_url, WEB_IDE_OAUTH_CALLBACK_URL_PATH);
-  }
-
-  // Otherwise, let's take our best guess
-  return new URL(WEB_IDE_OAUTH_CALLBACK_URL_PATH, origin).toString();
-};
-
-/**
- *
- * @param {{ origin: string, url: string }[]} callbackUrls
- */
-const getCallbackUrl = (callbackUrls) => {
-  const { origin } = window.location;
-  const defaultCallbackUrl = getDefaultCallbackUrl(origin);
-
-  // If there's a callback url for what we'd expect, let's just use that
-  if (callbackUrls.find((x) => x.url === defaultCallbackUrl)) {
-    return defaultCallbackUrl;
-  }
-
-  // Otherwise, let's get the **longest** callback url that matches our origin
-  const callbackUrl = callbackUrls
-    .filter((x) => x.origin === origin)
-    .reduce((acc, { url }) => (acc.length >= url.length ? acc : url), '');
-
-  if (callbackUrl) {
-    return callbackUrl;
-  }
-
-  logError(
-    `Could not find callback url in Web IDE OAuth app for "${origin}". Trying to use default...`,
-  );
-  return defaultCallbackUrl;
-};
-
-export const getOAuthConfig = ({ clientId, callbackUrls: callbackUrlsData }) => {
+export const getOAuthConfig = ({ clientId }) => {
   if (!clientId) {
     return undefined;
   }
 
-  const callbackUrls = parseCallbackUrls(callbackUrlsData);
-
   return {
     type: 'oauth',
     clientId,
-    callbackUrl: getCallbackUrl(callbackUrls),
+    callbackUrl: getOAuthCallbackUrl(),
     protectRefreshToken: true,
   };
 };
diff --git a/app/assets/javascripts/ide/lib/parse_callback_urls.js b/app/assets/javascripts/ide/lib/gitlab_web_ide/oauth_callback_urls.js
similarity index 79%
rename from app/assets/javascripts/ide/lib/parse_callback_urls.js
rename to app/assets/javascripts/ide/lib/gitlab_web_ide/oauth_callback_urls.js
index c22bc944822302..f643363070baa0 100644
--- a/app/assets/javascripts/ide/lib/parse_callback_urls.js
+++ b/app/assets/javascripts/ide/lib/gitlab_web_ide/oauth_callback_urls.js
@@ -1,6 +1,18 @@
 import { joinPaths } from '~/lib/utils/url_utility';
 import { logError } from '~/lib/logger';
-import { WEB_IDE_OAUTH_CALLBACK_URL_PATH } from '../constants';
+import { WEB_IDE_OAUTH_CALLBACK_URL_PATH, IDE_PATH } from '../../constants';
+
+/**
+ * @returns callback URL constructed from current window url
+ */
+export function getOAuthCallbackUrl() {
+  const url = window.location.href;
+
+  const baseUrl = url.split(IDE_PATH)[0];
+  const callbackUrl = joinPaths(baseUrl, WEB_IDE_OAUTH_CALLBACK_URL_PATH);
+
+  return callbackUrl;
+}
 
 const parseCallbackUrl = (urlStr) => {
   let callbackUrl;
@@ -15,7 +27,6 @@ const parseCallbackUrl = (urlStr) => {
   // If we're an unexpected callback URL
   if (!callbackUrl.pathname.endsWith(WEB_IDE_OAUTH_CALLBACK_URL_PATH)) {
     return {
-      origin: callbackUrl.origin,
       base: joinPaths(callbackUrl.origin, '/'),
       url: urlStr,
     };
@@ -32,7 +43,6 @@ const parseCallbackUrl = (urlStr) => {
   baseUrl.search = '';
 
   return {
-    origin: baseUrl.origin,
     base: joinPaths(baseUrl.toString(), '/'),
     url: urlStr,
   };
diff --git a/app/assets/javascripts/ide/oauth_callback_domain_mismatch_error.js b/app/assets/javascripts/ide/oauth_callback_domain_mismatch_error.js
index f800dfa05ae229..339c99be05d20e 100644
--- a/app/assets/javascripts/ide/oauth_callback_domain_mismatch_error.js
+++ b/app/assets/javascripts/ide/oauth_callback_domain_mismatch_error.js
@@ -1,25 +1,24 @@
 import Vue from 'vue';
 import OAuthDomainMismatchError from './components/oauth_domain_mismatch_error.vue';
-import { parseCallbackUrls } from './lib/parse_callback_urls';
+import { parseCallbackUrls, getOAuthCallbackUrl } from './lib/gitlab_web_ide/oauth_callback_urls';
 
 export class OAuthCallbackDomainMismatchErrorApp {
   #el;
   #callbackUrls;
+  #expectedCallbackUrl = getOAuthCallbackUrl();
 
   constructor(el) {
     this.#el = el;
     this.#callbackUrls = parseCallbackUrls(el.dataset.callbackUrls);
   }
 
-  isVisitingFromNonRegisteredOrigin() {
-    return (
-      this.#callbackUrls.length &&
-      !this.#callbackUrls.some((x) => x.origin === window.location.origin)
-    );
+  hasExpectedCallbackUrl() {
+    return this.#callbackUrls.find(({ url }) => url === this.#expectedCallbackUrl);
   }
 
   renderError() {
     const callbackUrls = this.#callbackUrls;
+    const expectedCallbackUrl = this.#expectedCallbackUrl;
     const el = this.#el;
 
     if (!el) return null;
@@ -29,6 +28,7 @@ export class OAuthCallbackDomainMismatchErrorApp {
       render(createElement) {
         return createElement(OAuthDomainMismatchError, {
           props: {
+            expectedCallbackUrl,
             callbackUrls,
           },
         });
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index f8656d68c442cb..fe251a15abf83a 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -26672,6 +26672,9 @@ msgstr ""
 msgid "IDE|Editing this application might affect the functionality of the Web IDE. Ensure the configuration meets the following conditions:"
 msgstr ""
 
+msgid "IDE|Expected to to find callback URL entry for: %{codeBlockStart}%{expectedCallbackUrl}%{codeBlockEnd}."
+msgstr ""
+
 msgid "IDE|GitLab logo"
 msgstr ""
 
diff --git a/spec/frontend/ide/components/oauth_domain_mismatch_error_spec.js b/spec/frontend/ide/components/oauth_domain_mismatch_error_spec.js
index 1ce0201f5e9e00..eb7542e09e760d 100644
--- a/spec/frontend/ide/components/oauth_domain_mismatch_error_spec.js
+++ b/spec/frontend/ide/components/oauth_domain_mismatch_error_spec.js
@@ -1,11 +1,15 @@
-import { GlButton, GlCollapsibleListbox, GlListboxItem } from '@gitlab/ui';
+import { GlButton, GlDisclosureDropdown } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import { nextTick } from 'vue';
 import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
 import OAuthDomainMismatchError from '~/ide/components/oauth_domain_mismatch_error.vue';
 
-const MOCK_CALLBACK_URL_ORIGIN = 'https://example1.com';
-const MOCK_PATH_NAME = '/path/to/ide';
+const MOCK_CALLBACK_URLS = [
+  {
+    base: 'https://example1.com/',
+  },
+];
+const MOCK_CALLBACK_URL = 'https://example.com';
+const MOCK_PATH_NAME = 'path/to/ide';
 
 describe('OAuthDomainMismatchError', () => {
   useMockLocationHelper();
@@ -14,13 +18,13 @@ describe('OAuthDomainMismatchError', () => {
   let originalLocation;
 
   const findButton = () => wrapper.findComponent(GlButton);
-  const findDropdown = () => wrapper.findComponent(GlCollapsibleListbox);
-  const findDropdownItems = () => wrapper.findAllComponents(GlListboxItem);
+  const findDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
 
   const createWrapper = (props = {}) => {
     wrapper = mount(OAuthDomainMismatchError, {
       propsData: {
-        callbackUrlOrigins: [MOCK_CALLBACK_URL_ORIGIN],
+        expectedCallbackUrl: MOCK_CALLBACK_URL,
+        callbackUrls: MOCK_CALLBACK_URLS,
         ...props,
       },
     });
@@ -44,44 +48,40 @@ describe('OAuthDomainMismatchError', () => {
       expect(findDropdown().exists()).toBe(false);
     });
 
-    it('reloads page with correct url on button click', async () => {
-      findButton().vm.$emit('click');
-      await nextTick();
-
-      expect(window.location.replace).toHaveBeenCalledTimes(1);
-      expect(window.location.replace).toHaveBeenCalledWith(
-        new URL(MOCK_CALLBACK_URL_ORIGIN + MOCK_PATH_NAME).toString(),
-      );
+    it('renders button with correct attributes', () => {
+      const button = findButton();
+      expect(button.exists()).toBe(true);
+      const baseUrl = MOCK_CALLBACK_URLS[0].base;
+      expect(button.text()).toContain(baseUrl);
+      expect(button.attributes('href')).toBe(`${baseUrl}${MOCK_PATH_NAME}`);
     });
   });
 
   describe('multiple callback URL domains passed', () => {
-    const MOCK_CALLBACK_URL_ORIGINS = [MOCK_CALLBACK_URL_ORIGIN, 'https://example2.com'];
-
+    const callbackUrls = [
+      ...MOCK_CALLBACK_URLS,
+      {
+        base: 'https://example2.com/',
+      },
+      {
+        base: 'https://example3.com/relative-path/',
+      },
+    ];
     beforeEach(() => {
-      createWrapper({ callbackUrlOrigins: MOCK_CALLBACK_URL_ORIGINS });
-    });
-
-    it('renders dropdown', () => {
-      expect(findDropdown().exists()).toBe(true);
-    });
-
-    it('renders dropdown items', () => {
-      const dropdownItems = findDropdownItems();
-      expect(dropdownItems.length).toBe(MOCK_CALLBACK_URL_ORIGINS.length);
-      expect(dropdownItems.at(0).text()).toBe(MOCK_CALLBACK_URL_ORIGINS[0]);
-      expect(dropdownItems.at(1).text()).toBe(MOCK_CALLBACK_URL_ORIGINS[1]);
+      createWrapper({
+        callbackUrls,
+      });
     });
 
-    it('reloads page with correct url on dropdown item click', async () => {
-      const dropdownItem = findDropdownItems().at(0);
-      dropdownItem.vm.$emit('select', MOCK_CALLBACK_URL_ORIGIN);
-      await nextTick();
+    it('renders dropdown with correct items', () => {
+      const dropdown = findDropdown();
 
-      expect(window.location.replace).toHaveBeenCalledTimes(1);
-      expect(window.location.replace).toHaveBeenCalledWith(
-        new URL(MOCK_CALLBACK_URL_ORIGIN + MOCK_PATH_NAME).toString(),
-      );
+      const expectedDropdownItems = callbackUrls.map(({ base }) => ({
+        text: base,
+        href: `${base}${MOCK_PATH_NAME}`,
+      }));
+      expect(dropdown.exists()).toBe(true);
+      expect(dropdown.props('items')).toStrictEqual(expectedDropdownItems);
     });
   });
 });
diff --git a/spec/frontend/ide/index_spec.js b/spec/frontend/ide/index_spec.js
index 414c963aeb763a..f4ce1d5f0f3a64 100644
--- a/spec/frontend/ide/index_spec.js
+++ b/spec/frontend/ide/index_spec.js
@@ -2,10 +2,12 @@ import { startIde } from '~/ide/index';
 import { IDE_ELEMENT_ID } from '~/ide/constants';
 import { OAuthCallbackDomainMismatchErrorApp } from '~/ide/oauth_callback_domain_mismatch_error';
 import { initGitlabWebIDE } from '~/ide/init_gitlab_web_ide';
+import { getOAuthCallbackUrl } from '~/ide/lib/gitlab_web_ide/oauth_callback_urls';
+import setWindowLocation from 'helpers/set_window_location_helper';
 
 jest.mock('~/ide/init_gitlab_web_ide');
 
-const MOCK_CALLBACK_URL = `${window.location.origin}/ide/redirect`;
+const MOCK_CALLBACK_URL = getOAuthCallbackUrl();
 const MOCK_DATA_SET = {
   callbackUrls: JSON.stringify([MOCK_CALLBACK_URL]),
   useNewWebIde: true,
@@ -27,7 +29,10 @@ const setupMockIdeElement = (customData = MOCK_DATA_SET) => {
 };
 
 describe('startIde', () => {
+  const originalHref = window.location.href;
+
   afterEach(() => {
+    setWindowLocation(originalHref);
     document.getElementById(IDE_ELEMENT_ID).remove();
   });
 
@@ -52,23 +57,30 @@ describe('startIde', () => {
       renderErrorSpy = jest.spyOn(OAuthCallbackDomainMismatchErrorApp.prototype, 'renderError');
     });
 
-    it('does not render error page if no callbackUrl provided', async () => {
-      setupMockIdeElement({ useNewWebIde: true });
+    it('does not call renderOAuthDomainMismatchError if no mismatch detected', async () => {
+      setupMockIdeElement();
       await startIde();
 
       expect(renderErrorSpy).not.toHaveBeenCalled();
       expect(initGitlabWebIDE).toHaveBeenCalledTimes(1);
     });
 
-    it('does not call renderOAuthDomainMismatchError if no mismatch detected', async () => {
-      setupMockIdeElement();
+    it('renders error page if OAuth callback URL does not match window URL', async () => {
+      const MOCK_MISMATCH_CALLBACK_URL = 'https://example.com/ide/redirect';
+      renderErrorSpy.mockImplementation(() => {});
+      setupMockIdeElement({
+        callbackUrls: JSON.stringify([MOCK_MISMATCH_CALLBACK_URL]),
+        useNewWebIde: true,
+      });
+
       await startIde();
 
-      expect(renderErrorSpy).not.toHaveBeenCalled();
-      expect(initGitlabWebIDE).toHaveBeenCalledTimes(1);
+      expect(renderErrorSpy).toHaveBeenCalledTimes(1);
+      expect(initGitlabWebIDE).not.toHaveBeenCalled();
     });
 
-    it('renders error page if OAuth callback origin does not match window.location.origin', async () => {
+    it('renders error page if OAuth callback URL does not match window URL with relative path', async () => {
+      setWindowLocation('https://example.com/relative-path');
       const MOCK_MISMATCH_CALLBACK_URL = 'https://example.com/ide/redirect';
       renderErrorSpy.mockImplementation(() => {});
       setupMockIdeElement({
diff --git a/spec/frontend/ide/lib/gitlab_web_ide/oauth_callback_urls_spec.js b/spec/frontend/ide/lib/gitlab_web_ide/oauth_callback_urls_spec.js
new file mode 100644
index 00000000000000..61a8e3288d8bc9
--- /dev/null
+++ b/spec/frontend/ide/lib/gitlab_web_ide/oauth_callback_urls_spec.js
@@ -0,0 +1,89 @@
+import {
+  parseCallbackUrls,
+  getOAuthCallbackUrl,
+} from '~/ide/lib/gitlab_web_ide/oauth_callback_urls';
+import { logError } from '~/lib/logger';
+import { joinPaths } from '~/lib/utils/url_utility';
+import { IDE_PATH, WEB_IDE_OAUTH_CALLBACK_URL_PATH } from '~/ide/constants';
+import setWindowLocation from 'helpers/set_window_location_helper';
+
+jest.mock('~/lib/logger');
+
+const MOCK_IDE_PATH = joinPaths(IDE_PATH, 'some/path');
+
+describe('ide/lib/oauth_callback_urls', () => {
+  describe('getOAuthCallbackUrl', () => {
+    const mockPath = MOCK_IDE_PATH;
+    const MOCK_RELATIVE_PATH = 'relative-path';
+    const mockPathWithRelative = joinPaths(MOCK_RELATIVE_PATH, MOCK_IDE_PATH);
+
+    const originalHref = window.location.href;
+
+    afterEach(() => {
+      setWindowLocation(originalHref);
+    });
+
+    const expectedBaseUrlWithRelative = joinPaths(window.location.origin, MOCK_RELATIVE_PATH);
+
+    it.each`
+      path                    | expectedCallbackBaseUrl
+      ${mockPath}             | ${window.location.origin}
+      ${mockPathWithRelative} | ${expectedBaseUrlWithRelative}
+    `(
+      'retrieves expected callback URL based on window url',
+      ({ path, expectedCallbackBaseUrl }) => {
+        setWindowLocation(path);
+
+        const actual = getOAuthCallbackUrl();
+        const expected = joinPaths(expectedCallbackBaseUrl, WEB_IDE_OAUTH_CALLBACK_URL_PATH);
+        expect(actual).toEqual(expected);
+      },
+    );
+  });
+  describe('parseCallbackUrls', () => {
+    it('parses the given JSON URL array and returns some metadata for them', () => {
+      const actual = parseCallbackUrls(
+        JSON.stringify([
+          'https://gitlab.com/-/ide/oauth_redirect',
+          'not a url',
+          'https://gdk.test:3443/-/ide/oauth_redirect/',
+          'https://gdk.test:3443/gitlab/-/ide/oauth_redirect#1234?query=foo',
+          'https://example.com/not-a-real-one-/ide/oauth_redirectz',
+        ]),
+      );
+
+      expect(actual).toEqual([
+        {
+          base: 'https://gitlab.com/',
+          url: 'https://gitlab.com/-/ide/oauth_redirect',
+        },
+        {
+          base: 'https://gdk.test:3443/',
+          url: 'https://gdk.test:3443/-/ide/oauth_redirect/',
+        },
+        {
+          base: 'https://gdk.test:3443/gitlab/',
+          url: 'https://gdk.test:3443/gitlab/-/ide/oauth_redirect#1234?query=foo',
+        },
+        {
+          base: 'https://example.com/',
+          url: 'https://example.com/not-a-real-one-/ide/oauth_redirectz',
+        },
+      ]);
+    });
+
+    it('returns empty when given empty', () => {
+      expect(parseCallbackUrls('')).toEqual([]);
+      expect(logError).not.toHaveBeenCalled();
+    });
+
+    it('returns empty when not valid JSON', () => {
+      expect(parseCallbackUrls('babar')).toEqual([]);
+      expect(logError).toHaveBeenCalledWith('Failed to parse callback URLs JSON');
+    });
+
+    it('returns empty when not array JSON', () => {
+      expect(parseCallbackUrls('{}')).toEqual([]);
+    });
+  });
+});
diff --git a/spec/frontend/ide/lib/parse_callback_urls_spec.js b/spec/frontend/ide/lib/parse_callback_urls_spec.js
deleted file mode 100644
index 082efd37ea8c5a..00000000000000
--- a/spec/frontend/ide/lib/parse_callback_urls_spec.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { parseCallbackUrls } from '~/ide/lib/parse_callback_urls';
-import { logError } from '~/lib/logger';
-
-jest.mock('~/lib/logger');
-
-describe('ide/lib/parse_callback_urls', () => {
-  it('parses the given JSON URL array and returns some metadata for them', () => {
-    const actual = parseCallbackUrls(
-      JSON.stringify([
-        'https://gitlab.com/-/ide/oauth_redirect',
-        'not a url',
-        'https://gdk.test:3443/-/ide/oauth_redirect/',
-        'https://gdk.test:3443/gitlab/-/ide/oauth_redirect#1234?query=foo',
-        'https://example.com/not-a-real-one-/ide/oauth_redirectz',
-      ]),
-    );
-
-    expect(actual).toEqual([
-      {
-        origin: 'https://gitlab.com',
-        base: 'https://gitlab.com/',
-        url: 'https://gitlab.com/-/ide/oauth_redirect',
-      },
-      {
-        origin: 'https://gdk.test:3443',
-        base: 'https://gdk.test:3443/',
-        url: 'https://gdk.test:3443/-/ide/oauth_redirect/',
-      },
-      {
-        origin: 'https://gdk.test:3443',
-        base: 'https://gdk.test:3443/gitlab/',
-        url: 'https://gdk.test:3443/gitlab/-/ide/oauth_redirect#1234?query=foo',
-      },
-      {
-        origin: 'https://example.com',
-        base: 'https://example.com/',
-        url: 'https://example.com/not-a-real-one-/ide/oauth_redirectz',
-      },
-    ]);
-  });
-
-  it('returns empty when given empty', () => {
-    expect(parseCallbackUrls('')).toEqual([]);
-    expect(logError).not.toHaveBeenCalled();
-  });
-
-  it('returns empty when not valid JSON', () => {
-    expect(parseCallbackUrls('babar')).toEqual([]);
-    expect(logError).toHaveBeenCalledWith('Failed to parse callback URLs JSON');
-  });
-
-  it('returns empty when not array JSON', () => {
-    expect(parseCallbackUrls('{}')).toEqual([]);
-  });
-});
-- 
GitLab


From e53da5248e6efdb7ac18ee08319e53bebcb234c4 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Wed, 31 Jul 2024 19:12:58 -0400
Subject: [PATCH 3/8] Update import

---
 spec/frontend/ide/helpers.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/spec/frontend/ide/helpers.js b/spec/frontend/ide/helpers.js
index 3c390bdcf41889..08c49bb4f3cae0 100644
--- a/spec/frontend/ide/helpers.js
+++ b/spec/frontend/ide/helpers.js
@@ -1,7 +1,6 @@
 import * as pathUtils from 'path';
-import { commitActionTypes } from '~/ide/constants';
+import { WEB_IDE_OAUTH_CALLBACK_URL_PATH, commitActionTypes } from '~/ide/constants';
 import { decorateData } from '~/ide/stores/utils';
-import { WEB_IDE_OAUTH_CALLBACK_URL_PATH } from '~/ide/lib/gitlab_web_ide/get_oauth_config';
 
 export const file = (name = 'name', id = name, type = '', parent = null) =>
   decorateData({
-- 
GitLab


From 9193915722ef9843710992b68af3be29cbede364 Mon Sep 17 00:00:00 2001
From: Cindy Halim <chalim@gitlab.com>
Date: Thu, 1 Aug 2024 09:39:50 -0400
Subject: [PATCH 4/8] Fix specs

---
 spec/frontend/ide/helpers.js                   | 3 +++
 spec/frontend/ide/init_gitlab_web_ide_spec.js  | 4 ++--
 spec/frontend/ide/mount_oauth_callback_spec.js | 4 ++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/spec/frontend/ide/helpers.js b/spec/frontend/ide/helpers.js
index 08c49bb4f3cae0..257dc85ca8bb9e 100644
--- a/spec/frontend/ide/helpers.js
+++ b/spec/frontend/ide/helpers.js
@@ -1,6 +1,7 @@
 import * as pathUtils from 'path';
 import { WEB_IDE_OAUTH_CALLBACK_URL_PATH, commitActionTypes } from '~/ide/constants';
 import { decorateData } from '~/ide/stores/utils';
+import { TEST_HOST } from '../__helpers__/test_constants';
 
 export const file = (name = 'name', id = name, type = '', parent = null) =>
   decorateData({
@@ -51,3 +52,5 @@ export const createTriggerRenameAction = (path, newPath) =>
 
 export const getMockCallbackUrl = () =>
   new URL(WEB_IDE_OAUTH_CALLBACK_URL_PATH, window.location.origin).toString();
+
+export const MOCK_GITLAB_URL = `${TEST_HOST}/`;
diff --git a/spec/frontend/ide/init_gitlab_web_ide_spec.js b/spec/frontend/ide/init_gitlab_web_ide_spec.js
index 5f7e4caed1992b..7b3d7ea05e2cca 100644
--- a/spec/frontend/ide/init_gitlab_web_ide_spec.js
+++ b/spec/frontend/ide/init_gitlab_web_ide_spec.js
@@ -9,7 +9,7 @@ import { TEST_HOST } from 'helpers/test_constants';
 import setWindowLocation from 'helpers/set_window_location_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { renderWebIdeError } from '~/ide/render_web_ide_error';
-import { getMockCallbackUrl } from './helpers';
+import { getMockCallbackUrl, MOCK_GITLAB_URL } from './helpers';
 
 jest.mock('@gitlab/web-ide');
 jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_action');
@@ -135,7 +135,7 @@ describe('ide/init_gitlab_web_ide', () => {
         mrTargetProject: '',
         forkInfo: null,
         username: gon.current_username,
-        gitlabUrl: TEST_HOST,
+        gitlabUrl: MOCK_GITLAB_URL,
         nonce: TEST_NONCE,
         httpHeaders: {
           'mock-csrf-header': 'mock-csrf-token',
diff --git a/spec/frontend/ide/mount_oauth_callback_spec.js b/spec/frontend/ide/mount_oauth_callback_spec.js
index 9187fffca81149..670949944dfca7 100644
--- a/spec/frontend/ide/mount_oauth_callback_spec.js
+++ b/spec/frontend/ide/mount_oauth_callback_spec.js
@@ -1,7 +1,7 @@
 import { oauthCallback } from '@gitlab/web-ide';
 import { TEST_HOST } from 'helpers/test_constants';
 import { mountOAuthCallback } from '~/ide/mount_oauth_callback';
-import { getMockCallbackUrl } from './helpers';
+import { getMockCallbackUrl, MOCK_GITLAB_URL } from './helpers';
 
 jest.mock('@gitlab/web-ide');
 
@@ -46,7 +46,7 @@ describe('~/ide/mount_oauth_callback', () => {
         clientId: TEST_OAUTH_CLIENT_ID,
         protectRefreshToken: true,
       },
-      gitlabUrl: TEST_HOST,
+      gitlabUrl: MOCK_GITLAB_URL,
       baseUrl: `${TEST_HOST}/${TEST_GITLAB_WEB_IDE_PUBLIC_PATH}`,
       username: TEST_USERNAME,
     });
-- 
GitLab


From 0704a9b5d9d373c3d272a33ac27db6e5b102ac9b Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Sun, 4 Aug 2024 18:50:14 -0500
Subject: [PATCH 5/8] Polish changes and specs

---
 .../oauth_domain_mismatch_error.vue           | 12 +---
 .../lib/gitlab_web_ide/oauth_callback_urls.js |  5 +-
 .../oauth_callback_domain_mismatch_error.js   |  3 +-
 config/routes.rb                              |  2 +-
 locale/gitlab.pot                             |  2 +-
 .../oauth_domain_mismatch_error_spec.js       | 56 +++++++++++--------
 spec/frontend/ide/helpers.js                  |  3 -
 spec/frontend/ide/index_spec.js               | 51 +++++++----------
 spec/frontend/ide/init_gitlab_web_ide_spec.js |  4 +-
 .../frontend/ide/mount_oauth_callback_spec.js |  4 +-
 10 files changed, 68 insertions(+), 74 deletions(-)

diff --git a/app/assets/javascripts/ide/components/oauth_domain_mismatch_error.vue b/app/assets/javascripts/ide/components/oauth_domain_mismatch_error.vue
index e94b4e45a2dd94..a89a3e82b1f36d 100644
--- a/app/assets/javascripts/ide/components/oauth_domain_mismatch_error.vue
+++ b/app/assets/javascripts/ide/components/oauth_domain_mismatch_error.vue
@@ -43,9 +43,7 @@ export default {
     description: s__(
       "IDE|The URL you're using to access the Web IDE and the configured OAuth callback URL do not match. This issue often occurs when you're using a proxy.",
     ),
-    expected: s__(
-      'IDE|Expected to to find callback URL entry for: %{codeBlockStart}%{expectedCallbackUrl}%{codeBlockEnd}.',
-    ),
+    expected: s__('IDE|Expected to to find callback URL entry for: %{expectedCallbackUrl}.'),
     contact: s__(
       'IDE|Contact your administrator or try to open the Web IDE again with another domain.',
     ),
@@ -61,12 +59,8 @@ export default {
         {{ $options.i18n.description }}
       </p>
       <gl-sprintf :message="$options.i18n.expected">
-        <template #codeBlock="{ content }">
-          <code>{{
-            sprintf(content, {
-              expectedCallbackUrl,
-            })
-          }}</code>
+        <template #expectedCallbackUrl>
+          <code>{{ expectedCallbackUrl }}</code>
         </template>
       </gl-sprintf>
       <p>
diff --git a/app/assets/javascripts/ide/lib/gitlab_web_ide/oauth_callback_urls.js b/app/assets/javascripts/ide/lib/gitlab_web_ide/oauth_callback_urls.js
index f643363070baa0..0ea0b83564f0a9 100644
--- a/app/assets/javascripts/ide/lib/gitlab_web_ide/oauth_callback_urls.js
+++ b/app/assets/javascripts/ide/lib/gitlab_web_ide/oauth_callback_urls.js
@@ -8,7 +8,10 @@ import { WEB_IDE_OAUTH_CALLBACK_URL_PATH, IDE_PATH } from '../../constants';
 export function getOAuthCallbackUrl() {
   const url = window.location.href;
 
-  const baseUrl = url.split(IDE_PATH)[0];
+  // We don't rely on `gon.gitlab_url` and `gon.relative_url_root` here because these may not be configured correctly
+  // or we're visiting the instance through a proxy.
+  // Instead, we split on the `/-/ide` in the `href` and use the first part as the base URL.
+  const baseUrl = url.split(IDE_PATH, 2)[0];
   const callbackUrl = joinPaths(baseUrl, WEB_IDE_OAUTH_CALLBACK_URL_PATH);
 
   return callbackUrl;
diff --git a/app/assets/javascripts/ide/oauth_callback_domain_mismatch_error.js b/app/assets/javascripts/ide/oauth_callback_domain_mismatch_error.js
index 339c99be05d20e..47ef07b5209fb1 100644
--- a/app/assets/javascripts/ide/oauth_callback_domain_mismatch_error.js
+++ b/app/assets/javascripts/ide/oauth_callback_domain_mismatch_error.js
@@ -5,11 +5,12 @@ import { parseCallbackUrls, getOAuthCallbackUrl } from './lib/gitlab_web_ide/oau
 export class OAuthCallbackDomainMismatchErrorApp {
   #el;
   #callbackUrls;
-  #expectedCallbackUrl = getOAuthCallbackUrl();
+  #expectedCallbackUrl;
 
   constructor(el) {
     this.#el = el;
     this.#callbackUrls = parseCallbackUrls(el.dataset.callbackUrls);
+    this.#expectedCallbackUrl = getOAuthCallbackUrl();
   }
 
   hasExpectedCallbackUrl() {
diff --git a/config/routes.rb b/config/routes.rb
index 4e7e971075be76..ab750a7fcb36ac 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -145,7 +145,7 @@
       scope :ide, as: :ide, format: false do
         get '/', to: 'ide#index'
         get '/project', to: 'ide#index'
-        # note: This path has a hardcoded reference in the FE `app/assets/javascripts/ide/lib/parse_callback_urls.js`
+        # note: This path has a hardcoded reference in the FE `app/assets/javascripts/ide/constants.js`
         get '/oauth_redirect', to: 'ide#oauth_redirect'
 
         scope path: 'project/:project_id', as: :project, constraints: { project_id: Gitlab::PathRegex.full_namespace_route_regex } do
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index fe251a15abf83a..a4e8f7c8ba4b53 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -26672,7 +26672,7 @@ msgstr ""
 msgid "IDE|Editing this application might affect the functionality of the Web IDE. Ensure the configuration meets the following conditions:"
 msgstr ""
 
-msgid "IDE|Expected to to find callback URL entry for: %{codeBlockStart}%{expectedCallbackUrl}%{codeBlockEnd}."
+msgid "IDE|Expected to to find callback URL entry for: %{expectedCallbackUrl}."
 msgstr ""
 
 msgid "IDE|GitLab logo"
diff --git a/spec/frontend/ide/components/oauth_domain_mismatch_error_spec.js b/spec/frontend/ide/components/oauth_domain_mismatch_error_spec.js
index eb7542e09e760d..de5a2cae69b95b 100644
--- a/spec/frontend/ide/components/oauth_domain_mismatch_error_spec.js
+++ b/spec/frontend/ide/components/oauth_domain_mismatch_error_spec.js
@@ -1,21 +1,24 @@
 import { GlButton, GlDisclosureDropdown } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
+import setWindowLocation from 'helpers/set_window_location_helper';
 import OAuthDomainMismatchError from '~/ide/components/oauth_domain_mismatch_error.vue';
 
 const MOCK_CALLBACK_URLS = [
   {
     base: 'https://example1.com/',
   },
+  {
+    base: 'https://example2.com/',
+  },
+  {
+    base: 'https://example3.com/relative-path/',
+  },
 ];
 const MOCK_CALLBACK_URL = 'https://example.com';
 const MOCK_PATH_NAME = 'path/to/ide';
 
 describe('OAuthDomainMismatchError', () => {
-  useMockLocationHelper();
-
   let wrapper;
-  let originalLocation;
 
   const findButton = () => wrapper.findComponent(GlButton);
   const findDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
@@ -31,17 +34,20 @@ describe('OAuthDomainMismatchError', () => {
   };
 
   beforeEach(() => {
-    originalLocation = window.location;
-    window.location.pathname = MOCK_PATH_NAME;
-  });
-
-  afterEach(() => {
-    window.location = originalLocation;
+    setWindowLocation(`/${MOCK_PATH_NAME}`);
   });
 
   describe('single callback URL domain passed', () => {
     beforeEach(() => {
-      createWrapper();
+      createWrapper({
+        callbackUrls: MOCK_CALLBACK_URLS.slice(0, 1),
+      });
+    });
+
+    it('renders expected callback URL message', () => {
+      expect(wrapper.text()).toContain(
+        `Expected to to find callback URL entry for: ${MOCK_CALLBACK_URL}.`,
+      );
     });
 
     it('does not render dropdown', () => {
@@ -58,25 +64,14 @@ describe('OAuthDomainMismatchError', () => {
   });
 
   describe('multiple callback URL domains passed', () => {
-    const callbackUrls = [
-      ...MOCK_CALLBACK_URLS,
-      {
-        base: 'https://example2.com/',
-      },
-      {
-        base: 'https://example3.com/relative-path/',
-      },
-    ];
     beforeEach(() => {
-      createWrapper({
-        callbackUrls,
-      });
+      createWrapper();
     });
 
     it('renders dropdown with correct items', () => {
       const dropdown = findDropdown();
 
-      const expectedDropdownItems = callbackUrls.map(({ base }) => ({
+      const expectedDropdownItems = MOCK_CALLBACK_URLS.map(({ base }) => ({
         text: base,
         href: `${base}${MOCK_PATH_NAME}`,
       }));
@@ -84,4 +79,17 @@ describe('OAuthDomainMismatchError', () => {
       expect(dropdown.props('items')).toStrictEqual(expectedDropdownItems);
     });
   });
+
+  describe('when no callback URL passed', () => {
+    beforeEach(() => {
+      createWrapper({
+        callbackUrls: [],
+      });
+    });
+
+    it('does not render dropdown or button', () => {
+      expect(findDropdown().exists()).toBe(false);
+      expect(findButton().exists()).toBe(false);
+    });
+  });
 });
diff --git a/spec/frontend/ide/helpers.js b/spec/frontend/ide/helpers.js
index 257dc85ca8bb9e..08c49bb4f3cae0 100644
--- a/spec/frontend/ide/helpers.js
+++ b/spec/frontend/ide/helpers.js
@@ -1,7 +1,6 @@
 import * as pathUtils from 'path';
 import { WEB_IDE_OAUTH_CALLBACK_URL_PATH, commitActionTypes } from '~/ide/constants';
 import { decorateData } from '~/ide/stores/utils';
-import { TEST_HOST } from '../__helpers__/test_constants';
 
 export const file = (name = 'name', id = name, type = '', parent = null) =>
   decorateData({
@@ -52,5 +51,3 @@ export const createTriggerRenameAction = (path, newPath) =>
 
 export const getMockCallbackUrl = () =>
   new URL(WEB_IDE_OAUTH_CALLBACK_URL_PATH, window.location.origin).toString();
-
-export const MOCK_GITLAB_URL = `${TEST_HOST}/`;
diff --git a/spec/frontend/ide/index_spec.js b/spec/frontend/ide/index_spec.js
index f4ce1d5f0f3a64..8f79af84a633e5 100644
--- a/spec/frontend/ide/index_spec.js
+++ b/spec/frontend/ide/index_spec.js
@@ -2,14 +2,14 @@ import { startIde } from '~/ide/index';
 import { IDE_ELEMENT_ID } from '~/ide/constants';
 import { OAuthCallbackDomainMismatchErrorApp } from '~/ide/oauth_callback_domain_mismatch_error';
 import { initGitlabWebIDE } from '~/ide/init_gitlab_web_ide';
-import { getOAuthCallbackUrl } from '~/ide/lib/gitlab_web_ide/oauth_callback_urls';
 import setWindowLocation from 'helpers/set_window_location_helper';
+import { TEST_HOST } from 'helpers/test_constants';
 
 jest.mock('~/ide/init_gitlab_web_ide');
 
-const MOCK_CALLBACK_URL = getOAuthCallbackUrl();
+const MOCK_MISMATCH_CALLBACK_URL = 'https://example.com/ide/redirect';
 const MOCK_DATA_SET = {
-  callbackUrls: JSON.stringify([MOCK_CALLBACK_URL]),
+  callbackUrls: JSON.stringify([`${TEST_HOST}/-/ide/oauth_redirect`]),
   useNewWebIde: true,
 };
 /**
@@ -29,15 +29,20 @@ const setupMockIdeElement = (customData = MOCK_DATA_SET) => {
 };
 
 describe('startIde', () => {
-  const originalHref = window.location.href;
+  let renderErrorSpy;
+
+  beforeEach(() => {
+    setWindowLocation(`${TEST_HOST}/-/ide/edit/gitlab-org/gitlab`);
+    renderErrorSpy = jest.spyOn(OAuthCallbackDomainMismatchErrorApp.prototype, 'renderError');
+  });
 
   afterEach(() => {
-    setWindowLocation(originalHref);
-    document.getElementById(IDE_ELEMENT_ID).remove();
+    document.getElementById(IDE_ELEMENT_ID)?.remove();
   });
 
   describe('when useNewWebIde feature flag is true', () => {
     let ideElement;
+
     beforeEach(async () => {
       ideElement = setupMockIdeElement();
 
@@ -48,26 +53,14 @@ describe('startIde', () => {
       expect(initGitlabWebIDE).toHaveBeenCalledTimes(1);
       expect(initGitlabWebIDE).toHaveBeenCalledWith(ideElement);
     });
-  });
-
-  describe('OAuth callback origin mismatch check', () => {
-    let renderErrorSpy;
-
-    beforeEach(() => {
-      renderErrorSpy = jest.spyOn(OAuthCallbackDomainMismatchErrorApp.prototype, 'renderError');
-    });
-
-    it('does not call renderOAuthDomainMismatchError if no mismatch detected', async () => {
-      setupMockIdeElement();
-      await startIde();
 
+    it('does not render error page', () => {
       expect(renderErrorSpy).not.toHaveBeenCalled();
-      expect(initGitlabWebIDE).toHaveBeenCalledTimes(1);
     });
+  });
 
-    it('renders error page if OAuth callback URL does not match window URL', async () => {
-      const MOCK_MISMATCH_CALLBACK_URL = 'https://example.com/ide/redirect';
-      renderErrorSpy.mockImplementation(() => {});
+  describe('with mismatch callback url', () => {
+    it('renders error page', async () => {
       setupMockIdeElement({
         callbackUrls: JSON.stringify([MOCK_MISMATCH_CALLBACK_URL]),
         useNewWebIde: true,
@@ -78,15 +71,13 @@ describe('startIde', () => {
       expect(renderErrorSpy).toHaveBeenCalledTimes(1);
       expect(initGitlabWebIDE).not.toHaveBeenCalled();
     });
+  });
 
-    it('renders error page if OAuth callback URL does not match window URL with relative path', async () => {
-      setWindowLocation('https://example.com/relative-path');
-      const MOCK_MISMATCH_CALLBACK_URL = 'https://example.com/ide/redirect';
-      renderErrorSpy.mockImplementation(() => {});
-      setupMockIdeElement({
-        callbackUrls: JSON.stringify([MOCK_MISMATCH_CALLBACK_URL]),
-        useNewWebIde: true,
-      });
+  describe('with relative URL location and mismatch callback url', () => {
+    it('renders error page', async () => {
+      setWindowLocation(`${TEST_HOST}/relative-path/-/ide/edit/project`);
+
+      setupMockIdeElement();
 
       await startIde();
 
diff --git a/spec/frontend/ide/init_gitlab_web_ide_spec.js b/spec/frontend/ide/init_gitlab_web_ide_spec.js
index 7b3d7ea05e2cca..3f905574d2d394 100644
--- a/spec/frontend/ide/init_gitlab_web_ide_spec.js
+++ b/spec/frontend/ide/init_gitlab_web_ide_spec.js
@@ -9,7 +9,7 @@ import { TEST_HOST } from 'helpers/test_constants';
 import setWindowLocation from 'helpers/set_window_location_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { renderWebIdeError } from '~/ide/render_web_ide_error';
-import { getMockCallbackUrl, MOCK_GITLAB_URL } from './helpers';
+import { getMockCallbackUrl } from './helpers';
 
 jest.mock('@gitlab/web-ide');
 jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_action');
@@ -135,7 +135,7 @@ describe('ide/init_gitlab_web_ide', () => {
         mrTargetProject: '',
         forkInfo: null,
         username: gon.current_username,
-        gitlabUrl: MOCK_GITLAB_URL,
+        gitlabUrl: `${TEST_HOST}/`,
         nonce: TEST_NONCE,
         httpHeaders: {
           'mock-csrf-header': 'mock-csrf-token',
diff --git a/spec/frontend/ide/mount_oauth_callback_spec.js b/spec/frontend/ide/mount_oauth_callback_spec.js
index 670949944dfca7..e63ef9c0496d68 100644
--- a/spec/frontend/ide/mount_oauth_callback_spec.js
+++ b/spec/frontend/ide/mount_oauth_callback_spec.js
@@ -1,7 +1,7 @@
 import { oauthCallback } from '@gitlab/web-ide';
 import { TEST_HOST } from 'helpers/test_constants';
 import { mountOAuthCallback } from '~/ide/mount_oauth_callback';
-import { getMockCallbackUrl, MOCK_GITLAB_URL } from './helpers';
+import { getMockCallbackUrl } from './helpers';
 
 jest.mock('@gitlab/web-ide');
 
@@ -46,7 +46,7 @@ describe('~/ide/mount_oauth_callback', () => {
         clientId: TEST_OAUTH_CLIENT_ID,
         protectRefreshToken: true,
       },
-      gitlabUrl: MOCK_GITLAB_URL,
+      gitlabUrl: `${TEST_HOST}/`,
       baseUrl: `${TEST_HOST}/${TEST_GITLAB_WEB_IDE_PUBLIC_PATH}`,
       username: TEST_USERNAME,
     });
-- 
GitLab


From 72758475910121f2eca1f30735a90f17dacc13b4 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Sun, 4 Aug 2024 19:25:12 -0500
Subject: [PATCH 6/8] Fix issue with web_ide_oauth flag false rendering error

---
 app/assets/javascripts/ide/index.js                       | 2 +-
 .../ide/oauth_callback_domain_mismatch_error.js           | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js
index aa977872a2a734..7f535d59b99113 100644
--- a/app/assets/javascripts/ide/index.js
+++ b/app/assets/javascripts/ide/index.js
@@ -34,7 +34,7 @@ export async function startIde(options) {
 
   const oAuthCallbackDomainMismatchApp = new OAuthCallbackDomainMismatchErrorApp(ideElement);
 
-  if (!oAuthCallbackDomainMismatchApp.hasExpectedCallbackUrl()) {
+  if (oAuthCallbackDomainMismatchApp.shouldRenderError()) {
     oAuthCallbackDomainMismatchApp.renderError();
     return;
   }
diff --git a/app/assets/javascripts/ide/oauth_callback_domain_mismatch_error.js b/app/assets/javascripts/ide/oauth_callback_domain_mismatch_error.js
index 47ef07b5209fb1..bf9678bc498133 100644
--- a/app/assets/javascripts/ide/oauth_callback_domain_mismatch_error.js
+++ b/app/assets/javascripts/ide/oauth_callback_domain_mismatch_error.js
@@ -13,8 +13,12 @@ export class OAuthCallbackDomainMismatchErrorApp {
     this.#expectedCallbackUrl = getOAuthCallbackUrl();
   }
 
-  hasExpectedCallbackUrl() {
-    return this.#callbackUrls.find(({ url }) => url === this.#expectedCallbackUrl);
+  shouldRenderError() {
+    if (!this.#callbackUrls.length) {
+      return false;
+    }
+
+    return this.#callbackUrls.every(({ url }) => url !== this.#expectedCallbackUrl);
   }
 
   renderError() {
-- 
GitLab


From dd1b1306b383a316198e611a0dc32f7261c8ce99 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Sun, 4 Aug 2024 19:25:58 -0500
Subject: [PATCH 7/8] Filter out currentOrigin URL's in oauth mismatch error

- Otherwise this shows options to the user that
  are very unlikely to work
---
 .../oauth_domain_mismatch_error.vue           | 16 +++++++-----
 .../oauth_domain_mismatch_error_spec.js       | 26 +++++++++++++++----
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/ide/components/oauth_domain_mismatch_error.vue b/app/assets/javascripts/ide/components/oauth_domain_mismatch_error.vue
index a89a3e82b1f36d..e322c1007b3094 100644
--- a/app/assets/javascripts/ide/components/oauth_domain_mismatch_error.vue
+++ b/app/assets/javascripts/ide/components/oauth_domain_mismatch_error.vue
@@ -23,12 +23,16 @@ export default {
   },
   computed: {
     dropdownItems() {
-      return this.callbackUrls.map(({ base }) => {
-        return {
-          href: joinPaths(base, stripRelativeUrlRootFromPath(window.location.pathname)),
-          text: base,
-        };
-      });
+      const currentOrigin = window.location.origin;
+
+      return this.callbackUrls
+        .filter(({ base }) => new URL(base).origin !== currentOrigin)
+        .map(({ base }) => {
+          return {
+            href: joinPaths(base, stripRelativeUrlRootFromPath(window.location.pathname)),
+            text: base,
+          };
+        });
     },
   },
   gitlabLogo: GITLAB_LOGO_SVG_URL,
diff --git a/spec/frontend/ide/components/oauth_domain_mismatch_error_spec.js b/spec/frontend/ide/components/oauth_domain_mismatch_error_spec.js
index de5a2cae69b95b..b72ebc47b12e71 100644
--- a/spec/frontend/ide/components/oauth_domain_mismatch_error_spec.js
+++ b/spec/frontend/ide/components/oauth_domain_mismatch_error_spec.js
@@ -1,6 +1,7 @@
 import { GlButton, GlDisclosureDropdown } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import setWindowLocation from 'helpers/set_window_location_helper';
+import { TEST_HOST } from 'helpers/test_constants';
 import OAuthDomainMismatchError from '~/ide/components/oauth_domain_mismatch_error.vue';
 
 const MOCK_CALLBACK_URLS = [
@@ -17,6 +18,11 @@ const MOCK_CALLBACK_URLS = [
 const MOCK_CALLBACK_URL = 'https://example.com';
 const MOCK_PATH_NAME = 'path/to/ide';
 
+const EXPECTED_DROPDOWN_ITEMS = MOCK_CALLBACK_URLS.map(({ base }) => ({
+  text: base,
+  href: `${base}${MOCK_PATH_NAME}`,
+}));
+
 describe('OAuthDomainMismatchError', () => {
   let wrapper;
 
@@ -71,12 +77,22 @@ describe('OAuthDomainMismatchError', () => {
     it('renders dropdown with correct items', () => {
       const dropdown = findDropdown();
 
-      const expectedDropdownItems = MOCK_CALLBACK_URLS.map(({ base }) => ({
-        text: base,
-        href: `${base}${MOCK_PATH_NAME}`,
-      }));
       expect(dropdown.exists()).toBe(true);
-      expect(dropdown.props('items')).toStrictEqual(expectedDropdownItems);
+      expect(dropdown.props('items')).toStrictEqual(EXPECTED_DROPDOWN_ITEMS);
+    });
+  });
+
+  describe('with erroneous callback from current origin', () => {
+    beforeEach(() => {
+      createWrapper({
+        callbackUrls: MOCK_CALLBACK_URLS.concat({
+          base: `${TEST_HOST}/foo`,
+        }),
+      });
+    });
+
+    it('filters out item with current origin', () => {
+      expect(findDropdown().props('items')).toStrictEqual(EXPECTED_DROPDOWN_ITEMS);
     });
   });
 
-- 
GitLab


From 8d803e3fcc1975252fa13ca495bdc014744ef7a1 Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Mon, 5 Aug 2024 18:26:54 +0000
Subject: [PATCH 8/8] Update UI text from TW review

---
 .../ide/components/oauth_domain_mismatch_error.vue          | 2 +-
 locale/gitlab.pot                                           | 6 +++---
 .../ide/components/oauth_domain_mismatch_error_spec.js      | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/ide/components/oauth_domain_mismatch_error.vue b/app/assets/javascripts/ide/components/oauth_domain_mismatch_error.vue
index e322c1007b3094..24dfba58578207 100644
--- a/app/assets/javascripts/ide/components/oauth_domain_mismatch_error.vue
+++ b/app/assets/javascripts/ide/components/oauth_domain_mismatch_error.vue
@@ -47,7 +47,7 @@ export default {
     description: s__(
       "IDE|The URL you're using to access the Web IDE and the configured OAuth callback URL do not match. This issue often occurs when you're using a proxy.",
     ),
-    expected: s__('IDE|Expected to to find callback URL entry for: %{expectedCallbackUrl}.'),
+    expected: s__('IDE|Could not find a callback URL entry for %{expectedCallbackUrl}.'),
     contact: s__(
       'IDE|Contact your administrator or try to open the Web IDE again with another domain.',
     ),
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index a4e8f7c8ba4b53..b3262778380da9 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -26666,13 +26666,13 @@ msgstr ""
 msgid "IDE|Contact your administrator or try to open the Web IDE again with another domain."
 msgstr ""
 
-msgid "IDE|Edit"
+msgid "IDE|Could not find a callback URL entry for %{expectedCallbackUrl}."
 msgstr ""
 
-msgid "IDE|Editing this application might affect the functionality of the Web IDE. Ensure the configuration meets the following conditions:"
+msgid "IDE|Edit"
 msgstr ""
 
-msgid "IDE|Expected to to find callback URL entry for: %{expectedCallbackUrl}."
+msgid "IDE|Editing this application might affect the functionality of the Web IDE. Ensure the configuration meets the following conditions:"
 msgstr ""
 
 msgid "IDE|GitLab logo"
diff --git a/spec/frontend/ide/components/oauth_domain_mismatch_error_spec.js b/spec/frontend/ide/components/oauth_domain_mismatch_error_spec.js
index b72ebc47b12e71..2de27b26aaea4c 100644
--- a/spec/frontend/ide/components/oauth_domain_mismatch_error_spec.js
+++ b/spec/frontend/ide/components/oauth_domain_mismatch_error_spec.js
@@ -52,7 +52,7 @@ describe('OAuthDomainMismatchError', () => {
 
     it('renders expected callback URL message', () => {
       expect(wrapper.text()).toContain(
-        `Expected to to find callback URL entry for: ${MOCK_CALLBACK_URL}.`,
+        `Could not find a callback URL entry for ${MOCK_CALLBACK_URL}.`,
       );
     });
 
-- 
GitLab