Merge branch '222510-projectid-branchid' into 'master'

Web IDE: Remove properties `branchId`, `projectId` and `url` from the file object

See merge request gitlab-org/gitlab!42151

app/assets/javascripts/ide/components/ide.vue

@@ -47,6 +47,7 @@ export default {
       'emptyRepo',
       'currentTree',
       'editorTheme',
+      'getUrlForPath',
     ]),
     themeName() {
       return window.gon?.user_color_scheme;
@@ -71,7 +72,7 @@ export default {
       return returnValue;
     },
     openFile(file) {
-      this.$router.push(`/project${file.url}`);
+      this.$router.push(this.getUrlForPath(file.path));
     },
     createNewFile() {
       this.$refs.newModal.open(modalTypes.blob);

app/assets/javascripts/ide/components/ide_file_row.vue

@@ -3,6 +3,7 @@
  * This component is an iterative step towards refactoring and simplifying `vue_shared/components/file_row.vue`
  * https://gitlab.com/gitlab-org/gitlab/-/merge_requests/23720
  */
+import { mapGetters } from 'vuex';
 import FileRow from '~/vue_shared/components/file_row.vue';
 import FileRowExtra from './file_row_extra.vue';
 
@@ -23,6 +24,9 @@ export default {
       dropdownOpen: false,
     };
   },
+  computed: {
+    ...mapGetters(['getUrlForPath']),
+  },
   methods: {
     toggleDropdown(val) {
       this.dropdownOpen = val;
@@ -32,7 +36,13 @@ export default {
 </script>
 
 <template>
-  <file-row :file="file" v-bind="$attrs" @mouseleave="toggleDropdown(false)" v-on="$listeners">
+  <file-row
+    :file="file"
+    :file-url="getUrlForPath(file.path)"
+    v-bind="$attrs"
+    @mouseleave="toggleDropdown(false)"
+    v-on="$listeners"
+  >
     <file-row-extra :file="file" :dropdown-open="dropdownOpen" @toggle="toggleDropdown($event)" />
   </file-row>
 </template>

app/assets/javascripts/ide/components/ide_review.vue

@@ -10,7 +10,7 @@ export default {
     EditorModeDropdown,
   },
   computed: {
-    ...mapGetters(['currentMergeRequest', 'activeFile']),
+    ...mapGetters(['currentMergeRequest', 'activeFile', 'getUrlForPath']),
     ...mapState(['viewer', 'currentMergeRequestId']),
     showLatestChangesText() {
       return !this.currentMergeRequestId || this.viewer === viewerTypes.diff;
@@ -24,7 +24,7 @@ export default {
   },
   mounted() {
     if (this.activeFile && this.activeFile.pending && !this.activeFile.deleted) {
-      this.$router.push(`/project${this.activeFile.url}`, () => {
+      this.$router.push(this.getUrlForPath(this.activeFile.path), () => {
         this.updateViewer('editor');
       });
     } else if (this.activeFile && this.activeFile.deleted) {

app/assets/javascripts/ide/components/ide_tree.vue

@@ -15,13 +15,13 @@ export default {
   },
   computed: {
     ...mapState(['currentBranchId']),
-    ...mapGetters(['currentProject', 'currentTree', 'activeFile']),
+    ...mapGetters(['currentProject', 'currentTree', 'activeFile', 'getUrlForPath']),
   },
   mounted() {
     if (!this.activeFile) return;
 
     if (this.activeFile.pending && !this.activeFile.deleted) {
-      this.$router.push(`/project${this.activeFile.url}`, () => {
+      this.$router.push(this.getUrlForPath(this.activeFile.path), () => {
         this.updateViewer('editor');
       });
     } else if (this.activeFile.deleted) {

app/assets/javascripts/ide/components/repo_editor.vue

@@ -48,6 +48,7 @@ export default {
       'renderWhitespaceInCode',
       'editorTheme',
       'entries',
+      'currentProjectId',
     ]),
     ...mapGetters([
       'currentMergeRequest',
@@ -379,7 +380,7 @@ export default {
       :path="file.rawPath || file.path"
       :file-path="file.path"
       :file-size="file.size"
-      :project-path="file.projectId"
+      :project-path="currentProjectId"
       :commit-sha="currentBranchCommit"
       :type="fileType"
     />
@@ -390,7 +391,7 @@ export default {
       :new-sha="currentMergeRequest.sha"
       :old-path="file.mrChange.old_path"
       :old-sha="currentMergeRequest.baseCommitSha"
-      :project-path="file.projectId"
+      :project-path="currentProjectId"
     />
   </div>
 </template>

app/assets/javascripts/ide/components/repo_tab.vue

 <script>
-import { mapActions } from 'vuex';
+import { mapActions, mapGetters } from 'vuex';
 import { GlIcon } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 
@@ -26,6 +26,7 @@ export default {
     };
   },
   computed: {
+    ...mapGetters(['getUrlForPath']),
     closeLabel() {
       if (this.fileHasChanged) {
         return sprintf(__(`%{tabname} changed`), { tabname: this.tab.name });
@@ -52,7 +53,7 @@ export default {
       if (tab.pending) {
         this.openPendingTab({ file: tab, keyPrefix: tab.staged ? 'staged' : 'unstaged' });
       } else {
-        this.$router.push(`/project${tab.url}`);
+        this.$router.push(this.getUrlForPath(tab.path));
       }
     },
     mouseOverTab() {
@@ -79,7 +80,7 @@ export default {
     @mouseover="mouseOverTab"
     @mouseout="mouseOutTab"
   >
-    <div :title="tab.url" class="multi-file-tab">
+    <div :title="getUrlForPath(tab.path)" class="multi-file-tab">
       <file-icon :file-name="tab.name" :size="16" />
       {{ tab.name }}
       <file-status-icon :file="tab" />

app/assets/javascripts/ide/components/repo_tabs.vue

 <script>
-import { mapActions } from 'vuex';
+import { mapActions, mapGetters } from 'vuex';
 import RepoTab from './repo_tab.vue';
 
 export default {
@@ -20,6 +20,9 @@ export default {
       required: true,
     },
   },
+  computed: {
+    ...mapGetters(['getUrlForPath']),
+  },
   methods: {
     ...mapActions(['updateViewer', 'removePendingTab']),
     openFileViewer(viewer) {
@@ -27,7 +30,7 @@ export default {
 
       if (this.activeFile.pending) {
         return this.removePendingTab(this.activeFile).then(() => {
-          this.$router.push(`/project${this.activeFile.url}`);
+          this.$router.push(this.getUrlForPath(this.activeFile.path));
         });
       }
 

app/assets/javascripts/ide/lib/files.js

@@ -15,8 +15,6 @@ export const splitParent = path => {
  */
 export const decorateFiles = ({
   data,
-  projectId,
-  branchId,
   tempFile = false,
   content = '',
   binary = false,
@@ -41,12 +39,9 @@ export const decorateFiles = ({
     parentPath = parentFolder && parentFolder.path;
 
     const tree = decorateData({
-      projectId,
-      branchId,
       id: path,
       name,
       path,
-      url: `/${projectId}/tree/${branchId}/-/${path}/`,
       type: 'tree',
       tempFile,
       changed: tempFile,
@@ -77,12 +72,9 @@ export const decorateFiles = ({
       parentPath = fileFolder && fileFolder.path;
 
       file = decorateData({
-        projectId,
-        branchId,
         id: path,
         name,
         path,
-        url: `/${projectId}/blob/${branchId}/-/${path}`,
         type: 'blob',
         tempFile,
         changed: tempFile,

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

@@ -33,7 +33,7 @@ export default {
       })
       .then(({ data }) => data);
   },
-  getBaseRawFileData(file, sha) {
+  getBaseRawFileData(file, projectId, ref) {
     if (file.tempFile || file.baseRaw) return Promise.resolve(file.baseRaw);
 
     // if files are renamed, their base path has changed
@@ -44,10 +44,10 @@ export default {
       .get(
         joinPaths(
           gon.relative_url_root || '/',
-          file.projectId,
+          projectId,
           '-',
           'raw',
-          sha,
+          ref,
           escapeFileUrl(filePath),
         ),
         {

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

@@ -54,8 +54,6 @@ export const createTempEntry = (
 
   const data = decorateFiles({
     data: [fullName],
-    projectId: state.currentProjectId,
-    branchId: state.currentBranchId,
     type,
     tempFile: true,
     content,
@@ -64,11 +62,7 @@ export const createTempEntry = (
   });
   const { file, parentPath } = data;
 
-  commit(types.CREATE_TMP_ENTRY, {
-    data,
-    projectId: state.currentProjectId,
-    branchId: state.currentBranchId,
-  });
+  commit(types.CREATE_TMP_ENTRY, { data });
 
   if (type === 'blob') {
     if (openFile) commit(types.TOGGLE_FILE_OPEN, file.path);
@@ -254,7 +248,7 @@ export const renameEntry = ({ dispatch, commit, state, getters }, { path, name,
     }
 
     if (newEntry.opened) {
-      dispatch('router/push', `/project${newEntry.url}`, { root: true });
+      dispatch('router/push', getters.getUrlForPath(newEntry.path), { root: true });
     }
   }
 

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

@@ -6,7 +6,7 @@ import * as types from '../mutation_types';
 import { setPageTitleForFile } from '../utils';
 import { viewerTypes, stageKeys } from '../../constants';
 
-export const closeFile = ({ commit, state, dispatch }, file) => {
+export const closeFile = ({ commit, state, dispatch, getters }, file) => {
   const { path } = file;
   const indexOfClosedFile = state.openFiles.findIndex(f => f.key === file.key);
   const fileWasActive = file.active;
@@ -29,10 +29,12 @@ export const closeFile = ({ commit, state, dispatch }, file) => {
         keyPrefix: nextFileToOpen.staged ? 'staged' : 'unstaged',
       });
     } else {
-      dispatch('router/push', `/project${nextFileToOpen.url}`, { root: true });
+      dispatch('router/push', getters.getUrlForPath(nextFileToOpen.path), { root: true });
     }
   } else if (!state.openFiles.length) {
-    dispatch('router/push', `/project/${file.projectId}/tree/${file.branchId}/`, { root: true });
+    dispatch('router/push', `/project/${state.currentProjectId}/tree/${state.currentBranchId}/`, {
+      root: true,
+    });
   }
 
   eventHub.$emit(`editor.update.model.dispose.${file.key}`);
@@ -121,7 +123,7 @@ export const getRawFileData = ({ state, commit, dispatch, getters }, { path }) =
         const baseSha =
           (getters.currentMergeRequest && getters.currentMergeRequest.baseCommitSha) || '';
 
-        return service.getBaseRawFileData(file, baseSha).then(baseRaw => {
+        return service.getBaseRawFileData(file, state.currentProjectId, baseSha).then(baseRaw => {
           commit(types.SET_FILE_BASE_RAW_DATA, {
             file,
             baseRaw,
@@ -218,7 +220,7 @@ export const discardFileChanges = ({ dispatch, state, commit, getters }, path) =
   if (!isDestructiveDiscard && file.path === getters.activeFile?.path) {
     dispatch('updateDelayViewerUpdated', true)
       .then(() => {
-        dispatch('router/push', `/project${file.url}`, { root: true });
+        dispatch('router/push', getters.getUrlForPath(file.path), { root: true });
       })
       .catch(e => {
         throw e;
@@ -274,7 +276,7 @@ export const openPendingTab = ({ commit, dispatch, getters, state }, { file, key
 
   commit(types.ADD_PENDING_TAB, { file, keyPrefix });
 
-  dispatch('router/push', `/project/${file.projectId}/tree/${state.currentBranchId}/`, {
+  dispatch('router/push', `/project/${state.currentProjectId}/tree/${state.currentBranchId}/`, {
     root: true,
   });
 

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

@@ -61,11 +61,7 @@ export const getFiles = ({ state, commit, dispatch }, payload = {}) =>
       service
         .getFiles(selectedProject.path_with_namespace, ref)
         .then(({ data }) => {
-          const { entries, treeList } = decorateFiles({
-            data,
-            projectId,
-            branchId,
-          });
+          const { entries, treeList } = decorateFiles({ data });
 
           commit(types.SET_ENTRIES, entries);
 

app/assets/javascripts/ide/stores/getters.js

@@ -174,3 +174,6 @@ export const getAvailableFileName = (state, getters) => path => {
 
   return newPath;
 };
+
+export const getUrlForPath = state => path =>
+  `/project/${state.currentProjectId}/tree/${state.currentBranchId}/-/${path}/`;

app/assets/javascripts/ide/stores/mutations.js

@@ -7,7 +7,6 @@ import treeMutations from './mutations/tree';
 import branchMutations from './mutations/branch';
 import {
   sortTree,
-  replaceFileUrl,
   swapInParentTreeWithSorting,
   updateFileCollections,
   removeFromParentTree,
@@ -49,7 +48,7 @@ export default {
       entries,
     });
   },
-  [types.CREATE_TMP_ENTRY](state, { data, projectId, branchId }) {
+  [types.CREATE_TMP_ENTRY](state, { data }) {
     Object.keys(data.entries).reduce((acc, key) => {
       const entry = data.entries[key];
       const foundEntry = state.entries[key];
@@ -72,13 +71,12 @@ export default {
       return acc.concat(key);
     }, []);
 
-    const foundEntry = state.trees[`${projectId}/${branchId}`].tree.find(
-      e => e.path === data.treeList[0].path,
-    );
+    const currentTree = state.trees[`${state.currentProjectId}/${state.currentBranchId}`];
+    const foundEntry = currentTree.tree.find(e => e.path === data.treeList[0].path);
 
     if (!foundEntry) {
-      Object.assign(state.trees[`${projectId}/${branchId}`], {
-        tree: sortTree(state.trees[`${projectId}/${branchId}`].tree.concat(data.treeList)),
+      Object.assign(currentTree, {
+        tree: sortTree(currentTree.tree.concat(data.treeList)),
       });
     }
   },
@@ -139,7 +137,6 @@ export default {
       prevId: undefined,
       prevPath: undefined,
       prevName: undefined,
-      prevUrl: undefined,
       prevKey: undefined,
       prevParentPath: undefined,
     });
@@ -195,9 +192,6 @@ export default {
     const oldEntry = state.entries[path];
     const newPath = parentPath ? `${parentPath}/${name}` : name;
     const isRevert = newPath === oldEntry.prevPath;
-
-    const newUrl = replaceFileUrl(oldEntry.url, oldEntry.path, newPath);
-
     const newKey = oldEntry.key.replace(new RegExp(oldEntry.path, 'g'), newPath);
 
     const baseProps = {
@@ -205,7 +199,6 @@ export default {
       name,
       id: newPath,
       path: newPath,
-      url: newUrl,
       key: newKey,
       parentPath: parentPath || '',
     };
@@ -216,7 +209,6 @@ export default {
             prevId: undefined,
             prevPath: undefined,
             prevName: undefined,
-            prevUrl: undefined,
             prevKey: undefined,
             prevParentPath: undefined,
           }
@@ -224,7 +216,6 @@ export default {
             prevId: oldEntry.prevId || oldEntry.id,
             prevPath: oldEntry.prevPath || oldEntry.path,
             prevName: oldEntry.prevName || oldEntry.name,
-            prevUrl: oldEntry.prevUrl || oldEntry.url,
             prevKey: oldEntry.prevKey || oldEntry.key,
             prevParentPath: oldEntry.prevParentPath || oldEntry.parentPath,
           };

app/assets/javascripts/ide/stores/utils.js

@@ -12,10 +12,7 @@ export const dataStructure = () => ({
   // it can also contain a prefix `pending-` for files opened in review mode
   key: '',
   type: '',
-  projectId: '',
-  branchId: '',
   name: '',
-  url: '',
   path: '',
   tempFile: false,
   tree: [],
@@ -44,10 +41,7 @@ export const dataStructure = () => ({
 export const decorateData = entity => {
   const {
     id,
-    projectId,
-    branchId,
     type,
-    url,
     name,
     path,
     content = '',
@@ -63,12 +57,9 @@ export const decorateData = entity => {
 
   return Object.assign(dataStructure(), {
     id,
-    projectId,
-    branchId,
     key: `${name}-${type}-${id}`,
     type,
     name,
-    url,
     path,
     tempFile,
     opened,
@@ -189,11 +180,6 @@ export const mergeTrees = (fromTree, toTree) => {
   return toTree;
 };
 
-export const replaceFileUrl = (url, oldPath, newPath) => {
-  // Add `/-/` so that we don't accidentally replace project path
-  return url.replace(`/-/${oldPath}`, `/-/${newPath}`);
-};
-
 export const swapInStateArray = (state, arr, key, entryPath) =>
   Object.assign(state, {
     [arr]: state[arr].map(f => (f.key === key ? state.entries[entryPath] : f)),

app/assets/javascripts/vue_shared/components/file_row.vue

@@ -14,6 +14,11 @@ export default {
       type: Object,
       required: true,
     },
+    fileUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
     level: {
       type: Number,
       required: true,
@@ -48,6 +53,9 @@ export default {
       // don't output a title if we don't have the expanded path
       return this.file?.tree?.length ? this.file.tree[0].parentPath : false;
     },
+    fileRouterUrl() {
+      return this.fileUrl || `/project${this.file.url}`;
+    },
   },
   watch: {
     'file.active': function fileActiveWatch(active) {
@@ -74,7 +82,7 @@ export default {
         this.toggleTreeOpen(this.file.path);
       }
 
-      if (this.$router) this.$router.push(`/project${this.file.url}`);
+      if (this.$router && !this.hasUrlAtCurrentRoute()) this.$router.push(this.fileRouterUrl);
 
       if (this.isBlob) this.clickedFile(this.file.path);
     },
@@ -104,7 +112,7 @@ export default {
     hasUrlAtCurrentRoute() {
       if (!this.$router || !this.$router.currentRoute) return true;
 
-      return this.$router.currentRoute.path === `/project${escapeFileUrl(this.file.url)}`;
+      return this.$router.currentRoute.path === escapeFileUrl(this.fileRouterUrl);
     },
   },
 };

spec/frontend/ide/commit_icon_spec.js

@@ -7,7 +7,6 @@ const createFile = (name = 'name', id = name, type = '', parent = null) =>
     id,
     type,
     icon: 'icon',
-    url: 'url',
     name,
     path: parent ? `${parent.path}/${name}` : name,
     parentPath: parent ? parent.path : '',

spec/frontend/ide/components/repo_tab_spec.js

@@ -34,7 +34,7 @@ describe('RepoTab', () => {
     });
     vm.$store.state.openFiles.push(vm.tab);
     const close = vm.$el.querySelector('.multi-file-tab-close');
-    const name = vm.$el.querySelector(`[title="${vm.tab.url}"]`);
+    const name = vm.$el.querySelector(`[title]`);
 
     expect(close.innerHTML).toContain('#close');
     expect(name.textContent.trim()).toEqual(vm.tab.name);

spec/frontend/ide/components/repo_tabs_spec.js

-import Vue from 'vue';
-import repoTabs from '~/ide/components/repo_tabs.vue';
-import createComponent from '../../helpers/vue_mount_component_helper';
+import Vuex from 'vuex';
+import { mount, createLocalVue } from '@vue/test-utils';
+import { createStore } from '~/ide/stores';
+import RepoTabs from '~/ide/components/repo_tabs.vue';
 import { file } from '../helpers';
 
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
 describe('RepoTabs', () => {
-  const openedFiles = [file('open1'), file('open2')];
-  const RepoTabs = Vue.extend(repoTabs);
-  let vm;
+  let wrapper;
+  let store;
 
-  afterEach(() => {
-    vm.$destroy();
-  });
+  beforeEach(() => {
+    store = createStore();
+    store.state.openFiles = [file('open1'), file('open2')];
 
-  it('renders a list of tabs', done => {
-    vm = createComponent(RepoTabs, {
-      files: openedFiles,
+    wrapper = mount(RepoTabs, {
+      propsData: {
+        files: store.state.openFiles,
         viewer: 'editor',
         activeFile: file('activeFile'),
+      },
+      store,
+      localVue,
+    });
   });
-    openedFiles[0].active = true;
 
-    vm.$nextTick(() => {
-      const tabs = [...vm.$el.querySelectorAll('.multi-file-tab')];
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders a list of tabs', done => {
+    store.state.openFiles[0].active = true;
+
+    wrapper.vm.$nextTick(() => {
+      const tabs = [...wrapper.vm.$el.querySelectorAll('.multi-file-tab')];
 
       expect(tabs.length).toEqual(2);
       expect(tabs[0].parentNode.classList.contains('active')).toEqual(true);

spec/frontend/ide/helpers.js

@@ -6,7 +6,6 @@ export const file = (name = 'name', id = name, type = '', parent = null) =>
     id,
     type,
     icon: 'icon',
-    url: 'url',
     name,
     path: parent ? `${parent.path}/${name}` : name,
     parentPath: parent ? parent.path : '',

spec/frontend/ide/lib/files_spec.js

@@ -2,25 +2,16 @@ import { viewerInformationForPath } from '~/vue_shared/components/content_viewer
 import { decorateFiles, splitParent } from '~/ide/lib/files';
 import { decorateData } from '~/ide/stores/utils';
 
-const TEST_BRANCH_ID = 'lorem-ipsum';
-const TEST_PROJECT_ID = 10;
-
 const createEntries = paths => {
   const createEntry = (acc, { path, type, children }) => {
-    // Sometimes we need to end the url with a '/'
-    const createUrl = base => (type === 'tree' ? `${base}/` : base);
-
     const { name, parent } = splitParent(path);
     const previewMode = viewerInformationForPath(name);
 
     acc[path] = {
       ...decorateData({
-        projectId: TEST_PROJECT_ID,
-        branchId: TEST_BRANCH_ID,
         id: path,
         name,
         path,
-        url: createUrl(`/${TEST_PROJECT_ID}/${type}/${TEST_BRANCH_ID}/-/${path}`),
         type,
         previewMode,
         binary: (previewMode && previewMode.binary) || false,
@@ -56,11 +47,7 @@ describe('IDE lib decorate files', () => {
       { path: 'README.md', type: 'blob', children: [] },
     ]);
 
-    const { entries, treeList } = decorateFiles({
-      data,
-      branchId: TEST_BRANCH_ID,
-      projectId: TEST_PROJECT_ID,
-    });
+    const { entries, treeList } = decorateFiles({ data });
 
     // Here we test the keys and then each key/value individually because `expect(entries).toEqual(expectedEntries)`
     // was taking a very long time for some reason. Probably due to large objects and nested `expect.objectContaining`.

spec/frontend/ide/services/index_spec.js

@@ -146,7 +146,7 @@ describe('IDE services', () => {
     it('gives back file.baseRaw for files with that property present', () => {
       file.baseRaw = TEST_FILE_CONTENTS;
 
-      return services.getBaseRawFileData(file, TEST_COMMIT_SHA).then(content => {
+      return services.getBaseRawFileData(file, TEST_PROJECT_ID, TEST_COMMIT_SHA).then(content => {
         expect(content).toEqual(TEST_FILE_CONTENTS);
       });
     });
@@ -155,7 +155,7 @@ describe('IDE services', () => {
       file.tempFile = true;
       file.baseRaw = TEST_FILE_CONTENTS;
 
-      return services.getBaseRawFileData(file, TEST_COMMIT_SHA).then(content => {
+      return services.getBaseRawFileData(file, TEST_PROJECT_ID, TEST_COMMIT_SHA).then(content => {
         expect(content).toEqual(TEST_FILE_CONTENTS);
       });
     });
@@ -192,7 +192,7 @@ describe('IDE services', () => {
         });
 
         it('fetches file content', () =>
-          services.getBaseRawFileData(file, TEST_COMMIT_SHA).then(content => {
+          services.getBaseRawFileData(file, TEST_PROJECT_ID, TEST_COMMIT_SHA).then(content => {
             expect(content).toEqual(TEST_FILE_CONTENTS);
           }));
       },

spec/frontend/ide/stores/actions/file_spec.js

@@ -27,6 +27,10 @@ describe('IDE store file actions', () => {
     };
 
     store = createStore();
+
+    store.state.currentProjectId = 'test/test';
+    store.state.currentBranchId = 'master';
+
     router = createRouter(store);
 
     jest.spyOn(store, 'commit');
@@ -72,10 +76,7 @@ describe('IDE store file actions', () => {
     });
 
     it('closes file & opens next available file', () => {
-      const f = {
-        ...file('newOpenFile'),
-        url: '/newOpenFile',
-      };
+      const f = file('newOpenFile');
 
       store.state.openFiles.push(f);
       store.state.entries[f.path] = f;
@@ -84,7 +85,7 @@ describe('IDE store file actions', () => {
         .dispatch('closeFile', localFile)
         .then(Vue.nextTick)
         .then(() => {
-          expect(router.push).toHaveBeenCalledWith(`/project${f.url}`);
+          expect(router.push).toHaveBeenCalledWith('/project/test/test/tree/master/-/newOpenFile/');
         });
     });
 
@@ -296,7 +297,6 @@ describe('IDE store file actions', () => {
     describe('Re-named success', () => {
       beforeEach(() => {
         localFile = file(`newCreate-${Math.random()}`);
-        localFile.url = `project/getFileDataURL`;
         localFile.prevPath = 'old-dull-file';
         localFile.path = 'new-shiny-file';
         store.state.entries[localFile.path] = localFile;
@@ -393,7 +393,11 @@ describe('IDE store file actions', () => {
         tmpFile.mrChange = { new_file: false };
 
         return store.dispatch('getRawFileData', { path: tmpFile.path }).then(() => {
-          expect(service.getBaseRawFileData).toHaveBeenCalledWith(tmpFile, 'SHA');
+          expect(service.getBaseRawFileData).toHaveBeenCalledWith(
+            tmpFile,
+            'gitlab-org/gitlab-ce',
+            'SHA',
+          );
           expect(tmpFile.baseRaw).toBe('baseraw');
         });
       });
@@ -660,7 +664,7 @@ describe('IDE store file actions', () => {
         });
 
         it('pushes route for active file', () => {
-          expect(router.push).toHaveBeenCalledWith(`/project${tmpFile.url}`);
+          expect(router.push).toHaveBeenCalledWith('/project/test/test/tree/master/-/tempFile/');
         });
       });
     });
@@ -735,10 +739,8 @@ describe('IDE store file actions', () => {
     });
 
     it('pushes router URL when added', () => {
-      store.state.currentBranchId = 'master';
-
       return store.dispatch('openPendingTab', { file: f, keyPrefix: 'pending' }).then(() => {
-        expect(router.push).toHaveBeenCalledWith('/project/123/tree/master/');
+        expect(router.push).toHaveBeenCalledWith('/project/test/test/tree/master/');
       });
     });
   });

spec/frontend/ide/stores/actions/merge_request_spec.js

@@ -453,11 +453,9 @@ describe('IDE store merge request actions', () => {
 
     it('updates activity bar view and gets file data, if changes are found', done => {
       store.state.entries.foo = {
-        url: 'test',
         type: 'blob',
       };
       store.state.entries.bar = {
-        url: 'test',
         type: 'blob',
       };
 

spec/frontend/ide/stores/actions_spec.js

@@ -123,7 +123,6 @@ describe('Multi-file store actions', () => {
       it('creates temp tree', done => {
         store
           .dispatch('createTempEntry', {
-            branchId: store.state.currentBranchId,
             name: 'test',
             type: 'tree',
           })
@@ -150,7 +149,6 @@ describe('Multi-file store actions', () => {
 
         store
           .dispatch('createTempEntry', {
-            branchId: store.state.currentBranchId,
             name: 'testing/test',
             type: 'tree',
           })
@@ -176,7 +174,6 @@ describe('Multi-file store actions', () => {
 
         store
           .dispatch('createTempEntry', {
-            branchId: store.state.currentBranchId,
             name: 'testing',
             type: 'tree',
           })
@@ -197,7 +194,6 @@ describe('Multi-file store actions', () => {
         store
           .dispatch('createTempEntry', {
             name,
-            branchId: 'mybranch',
             type: 'blob',
           })
           .then(() => {
@@ -217,7 +213,6 @@ describe('Multi-file store actions', () => {
         store
           .dispatch('createTempEntry', {
             name,
-            branchId: 'mybranch',
             type: 'blob',
           })
           .then(() => {
@@ -237,7 +232,6 @@ describe('Multi-file store actions', () => {
         store
           .dispatch('createTempEntry', {
             name,
-            branchId: 'mybranch',
             type: 'blob',
           })
           .then(() => {
@@ -249,7 +243,7 @@ describe('Multi-file store actions', () => {
       });
 
       it('sets tmp file as active', () => {
-        createTempEntry(store, { name: 'test', branchId: 'mybranch', type: 'blob' });
+        createTempEntry(store, { name: 'test', type: 'blob' });
 
         expect(store.dispatch).toHaveBeenCalledWith('setFileActive', 'test');
       });
@@ -262,7 +256,6 @@ describe('Multi-file store actions', () => {
         store
           .dispatch('createTempEntry', {
             name: 'test',
-            branchId: 'mybranch',
             type: 'blob',
           })
           .then(() => {
@@ -780,9 +773,11 @@ describe('Multi-file store actions', () => {
       });
 
       it('routes to the renamed file if the original file has been opened', done => {
+        store.state.currentProjectId = 'test/test';
+        store.state.currentBranchId = 'master';
+
         Object.assign(store.state.entries.orig, {
           opened: true,
-          url: '/foo-bar.md',
         });
 
         store
@@ -792,7 +787,7 @@ describe('Multi-file store actions', () => {
           })
           .then(() => {
             expect(router.push.mock.calls).toHaveLength(1);
-            expect(router.push).toHaveBeenCalledWith(`/project/foo-bar.md`);
+            expect(router.push).toHaveBeenCalledWith(`/project/test/test/tree/master/-/renamed/`);
           })
           .then(done)
           .catch(done.fail);

spec/frontend/ide/stores/getters_spec.js

@@ -482,4 +482,15 @@ describe('IDE store getters', () => {
       expect(localStore.getters.getAvailableFileName('foo-bar1.jpg')).toBe('foo-bar1.jpg');
     });
   });
+
+  describe('getUrlForPath', () => {
+    it('returns a route url for the given path', () => {
+      localState.currentProjectId = 'test/test';
+      localState.currentBranchId = 'master';
+
+      expect(localStore.getters.getUrlForPath('path/to/foo/bar-1.jpg')).toBe(
+        `/project/test/test/tree/master/-/path/to/foo/bar-1.jpg/`,
+      );
+    });
+  });
 });

spec/frontend/ide/stores/integration_spec.js

@@ -36,8 +36,6 @@ describe('IDE store integration', () => {
     beforeEach(() => {
       const { entries, treeList } = decorateFiles({
         data: [`${TEST_PATH_DIR}/`, TEST_PATH, 'README.md'],
-        projectId: TEST_PROJECT_ID,
-        branchId: TEST_BRANCH,
       });
 
       Object.assign(entries[TEST_PATH], {

spec/frontend/ide/stores/mutations_spec.js

@@ -113,8 +113,6 @@ describe('Multi-file store mutations', () => {
           },
           treeList: [tmpFile],
         },
-        projectId: 'gitlab-ce',
-        branchId: 'master',
       });
 
       expect(localState.trees['gitlab-ce/master'].tree.length).toEqual(1);
@@ -272,7 +270,6 @@ describe('Multi-file store mutations', () => {
           prevId: undefined,
           prevPath: undefined,
           prevName: undefined,
-          prevUrl: undefined,
           prevKey: undefined,
         }),
       );
@@ -337,7 +334,6 @@ describe('Multi-file store mutations', () => {
       };
       Object.assign(localState.entries['root-folder/oldPath'], {
         parentPath: 'root-folder',
-        url: 'root-folder/oldPath-blob-root-folder/oldPath',
       });
 
       mutations.RENAME_ENTRY(localState, {
@@ -366,9 +362,6 @@ describe('Multi-file store mutations', () => {
     });
 
     it('renames entry, preserving old parameters', () => {
-      Object.assign(localState.entries.oldPath, {
-        url: `project/-/oldPath`,
-      });
       const oldPathData = localState.entries.oldPath;
 
       mutations.RENAME_ENTRY(localState, {
@@ -382,12 +375,10 @@ describe('Multi-file store mutations', () => {
         id: 'newPath',
         path: 'newPath',
         name: 'newPath',
-        url: `project/-/newPath`,
         key: expect.stringMatching('newPath'),
         prevId: 'oldPath',
         prevName: 'oldPath',
         prevPath: 'oldPath',
-        prevUrl: `project/-/oldPath`,
         prevKey: oldPathData.key,
         prevParentPath: oldPathData.parentPath,
       });
@@ -409,7 +400,6 @@ describe('Multi-file store mutations', () => {
           prevId: expect.anything(),
           prevName: expect.anything(),
           prevPath: expect.anything(),
-          prevUrl: expect.anything(),
           prevKey: expect.anything(),
           prevParentPath: expect.anything(),
         }),
@@ -419,7 +409,7 @@ describe('Multi-file store mutations', () => {
     it('properly handles files with spaces in name', () => {
       const path = 'my fancy path';
       const newPath = 'new path';
-      const oldEntry = { ...file(path, path, 'blob'), url: `project/-/${path}` };
+      const oldEntry = file(path, path, 'blob');
 
       localState.entries[path] = oldEntry;
 
@@ -435,12 +425,10 @@ describe('Multi-file store mutations', () => {
         id: newPath,
         path: newPath,
         name: newPath,
-        url: `project/-/new path`,
         key: expect.stringMatching(newPath),
         prevId: path,
         prevName: path,
         prevPath: path,
-        prevUrl: `project/-/my fancy path`,
         prevKey: oldEntry.key,
         prevParentPath: oldEntry.parentPath,
       });
@@ -549,7 +537,7 @@ describe('Multi-file store mutations', () => {
 
     it('correctly saves original values if an entry is renamed multiple times', () => {
       const original = { ...localState.entries.oldPath };
-      const paramsToCheck = ['prevId', 'prevPath', 'prevName', 'prevUrl'];
+      const paramsToCheck = ['prevId', 'prevPath', 'prevName'];
       const expectedObj = paramsToCheck.reduce(
         (o, param) => ({ ...o, [param]: original[param.replace('prev', '').toLowerCase()] }),
         {},
@@ -577,7 +565,6 @@ describe('Multi-file store mutations', () => {
           prevId: 'lorem/orig',
           prevPath: 'lorem/orig',
           prevName: 'orig',
-          prevUrl: 'project/-/loren/orig',
           prevKey: 'lorem/orig',
           prevParentPath: 'lorem',
         };
@@ -602,7 +589,6 @@ describe('Multi-file store mutations', () => {
             prevId: undefined,
             prevPath: undefined,
             prevName: undefined,
-            prevUrl: undefined,
             prevKey: undefined,
             prevParentPath: undefined,
           }),