Get files in WebIDE using relative_path

Instead of relying on web_url, we should aim for fetching data using the
paths as per Frontend FAQ

app/assets/javascripts/ide/services/index.js

@@ -88,8 +88,8 @@ export default {
   commit(projectId, payload) {
     return Api.commitMultiple(projectId, payload);
   },
-  getFiles(projectUrl, ref) {
-    const url = `${projectUrl}/-/files/${ref}`;
+  getFiles(projectPath, ref) {
+    const url = `${gon.relative_url_root}/${projectPath}/-/files/${ref}`;
     return axios.get(url, { params: { format: 'json' } });
   },
   lastCommitPipelines({ getters }) {

app/assets/javascripts/ide/stores/actions/tree.js

@@ -59,7 +59,7 @@ export const getFiles = ({ state, commit, dispatch }, payload = {}) =>
 
       commit(types.CREATE_TREE, { treePath: `${projectId}/${branchId}` });
       service
-        .getFiles(selectedProject.web_url, ref)
+        .getFiles(selectedProject.path_with_namespace, ref)
         .then(({ data }) => {
           const { entries, treeList } = decorateFiles({
             data,

changelogs/unreleased/36810-webide-branch-with-path.yml

+---
+title: In WebIDE get files with relative path instead of web_url
+merge_request: 31478
+author:
+type: fixed

spec/frontend/ide/services/index_spec.js

@@ -221,4 +221,37 @@ describe('IDE services', () => {
       });
     });
   });
+
+  describe('getFiles', () => {
+    let mock;
+    let relativeUrlRoot;
+    const TEST_RELATIVE_URL_ROOT = 'blah-blah';
+
+    beforeEach(() => {
+      jest.spyOn(axios, 'get');
+      relativeUrlRoot = gon.relative_url_root;
+      gon.relative_url_root = TEST_RELATIVE_URL_ROOT;
+
+      mock = new MockAdapter(axios);
+
+      mock
+        .onGet(`${TEST_RELATIVE_URL_ROOT}/${TEST_PROJECT_ID}/-/files/${TEST_COMMIT_SHA}`)
+        .reply(200, [TEST_FILE_PATH]);
+    });
+
+    afterEach(() => {
+      mock.restore();
+      gon.relative_url_root = relativeUrlRoot;
+    });
+
+    it('initates the api call based on the passed path and commit hash', () => {
+      return services.getFiles(TEST_PROJECT_ID, TEST_COMMIT_SHA).then(({ data }) => {
+        expect(axios.get).toHaveBeenCalledWith(
+          `${gon.relative_url_root}/${TEST_PROJECT_ID}/-/files/${TEST_COMMIT_SHA}`,
+          expect.any(Object),
+        );
+        expect(data).toEqual([TEST_FILE_PATH]);
+      });
+    });
+  });
 });

spec/javascripts/ide/stores/actions/tree_spec.js

@@ -30,6 +30,7 @@ describe('Multi-file store tree actions', () => {
     store.state.currentBranchId = 'master';
     store.state.projects.abcproject = {
       web_url: '',
+      path_with_namespace: 'foo/abcproject',
     };
   });
 
@@ -57,7 +58,7 @@ describe('Multi-file store tree actions', () => {
         store
           .dispatch('getFiles', basicCallParameters)
           .then(() => {
-            expect(service.getFiles).toHaveBeenCalledWith('', '12345678');
+            expect(service.getFiles).toHaveBeenCalledWith('foo/abcproject', '12345678');
 
             done();
           })