Notify users when Web IDE OAuth app is configured for diff domain

Issue: gitlab-web-ide#287 (closed)+

What does this MR do and why?

When Web IDE OAuth is enabled for the GitLab instance and a user loads the Web IDE within a domain that does not match the callback URL (which is based on base_url that comes from the GitLab config), they will get an error upon redirecting.

In this MR, the following changes are introduced:

• Update ide_helper to pass callback URL from the oAuth application instead of the helper that relies on the GitLab config URL. Note that this can include multiple URLs.
• Present an error page with more details as to what is happening and the option to retry with the domain used in the callback URL if this mismatch occurs. A dropdown is shown if multiple callback URLs are present.
• Since the Web IDE expects one callback URL only, update getOAuthConfig to return callback URL based on window.location.origin. The check we introduced in the previous point ensures that window.location.origin is one of the callback URLs' domain.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before

After

before.mov Web IDE is loaded with domain that is different from the callback URLs configured for the OAuth application and fails on redirect.

Mismatch - single callback URL: after.movNew error page displayed with button to reload the page with the callback URL domain. Mismatch - multiple callback URLs: after_multiple_domains.movNew error page displayed with dropdown. Selecting one of the option will reload the page with the chosen callback URL domain. No mismatch (domain matches configuration): after_no_mismatch.movError page not shown. Successful authorization and redirect. Multiple callback URLs, with one matching: after_matching_domain.movError page not shown. Successful authorization and redirect.

How to set up and validate locally

Setup

OAuth application setup for Web IDE:

• Ensure that the web_ide_oauth flag is enabled
• Reset the OAuth instance application:
  • In local storage, remove the items prefixed with gitlab/web-ide/oauth
  • Remove the autogenerated GitLab Web IDE instance OAuth application (called "Web IDE") in Admin Area > Applications

Reconfigure GDK with new host name:

• Follow steps outlined here

Steps

1. Pull this branch
2. Access the GitLab application with http://127.0.0.1:3000. In console, check that gon.gitlab_url is http://gdk.test:3000.
3. Open a repo in Web IDE.
4. Should see new error page with single button
5. Clicking button should reload page with http://gdk.test:3000 . OAuth redirect works 🎉 .