Fix API and IDE path with `/` relative_url_root

**Why?**
Previously we simply concatenated our paths, which led
to requesting `//api/v4/...` and obviously failed. The BE
supports a relative_url_root of `/`. It's a bug that the FE
does not.

app/assets/javascripts/api.js

 import $ from 'jquery';
 import _ from 'underscore';
 import axios from './lib/utils/axios_utils';
+import { joinPaths } from './lib/utils/url_utility';
 
 const Api = {
   groupsPath: '/api/:version/groups.json',
@@ -339,11 +340,7 @@ const Api = {
   },
 
   buildUrl(url) {
-    let urlRoot = '';
-    if (gon.relative_url_root != null) {
-      urlRoot = gon.relative_url_root;
-    }
-    return urlRoot + url.replace(':version', gon.api_version);
+    return joinPaths(gon.relative_url_root || '', url.replace(':version', gon.api_version));
   },
 };
 

app/assets/javascripts/ide/ide_router.js

 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import { join as joinPath } from 'path';
+import { joinPaths } from '~/lib/utils/url_utility';
 import flash from '~/flash';
 import store from './stores';
 
@@ -34,7 +34,7 @@ const EmptyRouterComponent = {
 
 const router = new VueRouter({
   mode: 'history',
-  base: `${gon.relative_url_root}/-/ide/`,
+  base: joinPaths(gon.relative_url_root || '', '/-/ide/'),
   routes: [
     {
       path: '/project/:namespace+/:project',
@@ -46,11 +46,11 @@ const router = new VueRouter({
         },
         {
           path: ':targetmode(edit|tree|blob)/:branchid+/',
-          redirect: to => joinPath(to.path, '/-/'),
+          redirect: to => joinPaths(to.path, '/-/'),
         },
         {
           path: ':targetmode(edit|tree|blob)',
-          redirect: to => joinPath(to.path, '/master/-/'),
+          redirect: to => joinPaths(to.path, '/master/-/'),
         },
         {
           path: 'merge_requests/:mrid',
@@ -58,7 +58,7 @@ const router = new VueRouter({
         },
         {
           path: '',
-          redirect: to => joinPath(to.path, '/edit/master/-/'),
+          redirect: to => joinPaths(to.path, '/edit/master/-/'),
         },
       ],
     },

app/assets/javascripts/lib/utils/url_utility.js

@@ -120,3 +120,5 @@ export function webIDEUrl(route = undefined) {
   }
   return returnUrl;
 }
+
+export { join as joinPaths } from 'path';

changelogs/unreleased/fix-api-ide-relative-url-root.yml

+---
+title: Fix FE API and IDE handling of '/' relative_url_root
+merge_request: 27635
+author:
+type: fixed

spec/javascripts/api_spec.js

@@ -4,7 +4,7 @@ import Api from '~/api';
 
 describe('Api', () => {
   const dummyApiVersion = 'v3000';
-  const dummyUrlRoot = 'http://host.invalid';
+  const dummyUrlRoot = '/gitlab';
   const dummyGon = {
     api_version: dummyApiVersion,
     relative_url_root: dummyUrlRoot,
@@ -32,6 +32,18 @@ describe('Api', () => {
 
       expect(builtUrl).toEqual(expectedOutput);
     });
+
+    [null, '', '/'].forEach(root => {
+      it(`works when relative_url_root is ${root}`, () => {
+        window.gon.relative_url_root = root;
+        const input = '/api/:version/foo/bar';
+        const expectedOutput = `/api/${dummyApiVersion}/foo/bar`;
+
+        const builtUrl = Api.buildUrl(input);
+
+        expect(builtUrl).toEqual(expectedOutput);
+      });
+    });
   });
 
   describe('group', () => {