update staged files to correctly use pending tab

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

@@ -31,7 +31,10 @@ export default {
   methods: {
     ...mapActions(['discardFileChanges', 'updateViewer', 'openPendingTab']),
     openFileInEditor() {
-      return this.openPendingTab(this.file).then(changeViewer => {
+      return this.openPendingTab({
+        file: this.file,
+        keyPrefix: this.file.staged ? 'staged' : 'unstaged',
+      }).then(changeViewer => {
         if (changeViewer) {
           this.updateViewer('diff');
         }

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

@@ -70,11 +70,7 @@ export default {
         baseSha: this.currentMergeRequest ? this.currentMergeRequest.baseCommitSha : '',
       })
         .then(() => {
-          const viewerPromise = this.delayViewerUpdated
-            ? this.updateViewer(this.file.pending ? 'diff' : 'editor')
-            : Promise.resolve();
-
-          return viewerPromise;
+          return this.updateViewer(this.file.pending ? 'diff' : 'editor');
         })
         .then(() => {
           this.updateDelayViewerUpdated(false);

app/assets/javascripts/ide/lib/common/model.js

@@ -37,7 +37,7 @@ export default class Model {
     this.dispose = this.dispose.bind(this);
 
     eventHub.$on(`editor.update.model.dispose.${this.file.key}`, this.dispose);
-    eventHub.$on(`editor.update.model.content.${this.file.path}`, this.updateContent);
+    eventHub.$on(`editor.update.model.content.${this.file.key}`, this.updateContent);
   }
 
   get url() {
@@ -92,6 +92,6 @@ export default class Model {
     this.events.clear();
 
     eventHub.$off(`editor.update.model.dispose.${this.file.key}`, this.dispose);
-    eventHub.$off(`editor.update.model.content.${this.file.path}`, this.updateContent);
+    eventHub.$off(`editor.update.model.content.${this.file.key}`, this.updateContent);
   }
 }

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

@@ -24,7 +24,10 @@ export const closeFile = ({ commit, state, dispatch }, file) => {
 
     if (nextFileToOpen.pending) {
       dispatch('updateViewer', 'diff');
-      dispatch('openPendingTab', nextFileToOpen);
+      dispatch('openPendingTab', {
+        file: nextFileToOpen,
+        keyPrefix: nextFileToOpen.staged ? 'staged' : 'unstaged',
+      });
     } else {
       dispatch('updateDelayViewerUpdated', true);
       router.push(`/project${nextFileToOpen.url}`);
@@ -159,26 +162,35 @@ export const discardFileChanges = ({ state, commit }, path) => {
     commit(types.TOGGLE_FILE_OPEN, path);
   }
 
-  eventHub.$emit(`editor.update.model.content.${path}`, {
+  eventHub.$emit(`editor.update.model.content.${file.key}`, {
     content: file.raw,
     changed: false,
   });
 };
 
-export const stageChange = ({ commit }, path) => {
+export const stageChange = ({ commit, state }, path) => {
+  const stagedFile = state.stagedFiles.find(f => f.path === path);
+
   commit(types.STAGE_CHANGE, path);
+
+  if (stagedFile) {
+    eventHub.$emit(`editor.update.model.content.staged-${stagedFile.key}`, {
+      content: stagedFile.content,
+      changed: false,
+    });
+  }
 };
 
 export const unstageChange = ({ commit }, path) => {
   commit(types.UNSTAGE_CHANGE, path);
 };
 
-export const openPendingTab = ({ commit, getters, dispatch, state }, file) => {
+export const openPendingTab = ({ commit, getters, dispatch, state }, { file, keyPrefix }) => {
   if (getters.activeFile && getters.activeFile.path === file.path && state.viewer === 'diff') {
     return false;
   }
 
-  commit(types.ADD_PENDING_TAB, { file });
+  commit(types.ADD_PENDING_TAB, { file, keyPrefix });
 
   dispatch('scrollToTab');
 

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

@@ -37,9 +37,9 @@ export const setLastCommitMessage = ({ rootState, commit }, data) => {
   const commitMsg = sprintf(
     __('Your changes have been committed. Commit %{commitId} %{commitStats}'),
     {
-      commitId: `<a href="${currentProject.web_url}/commit/${
+      commitId: `<a href="${currentProject.web_url}/commit/${data.short_id}" class="commit-sha">${
         data.short_id
-      }" class="commit-sha">${data.short_id}</a>`,
+      }</a>`,
       commitStats,
     },
     false,
@@ -54,9 +54,7 @@ export const checkCommitStatus = ({ rootState }) =>
     .then(({ data }) => {
       const { id } = data.commit;
       const selectedBranch =
-        rootState.projects[rootState.currentProjectId].branches[
-          rootState.currentBranchId
-        ];
+        rootState.projects[rootState.currentProjectId].branches[rootState.currentBranchId];
 
       if (selectedBranch.workingReference !== id) {
         return true;
@@ -112,43 +110,25 @@ export const updateFilesAfterCommit = (
       { root: true },
     );
 
-    eventHub.$emit(`editor.update.model.content.${file.path}`, {
+    eventHub.$emit(`editor.update.model.content.${file.key}`, {
       content: file.content,
       changed: !!changedFile,
     });
   });
 
-  if (
-    state.commitAction === consts.COMMIT_TO_NEW_BRANCH &&
-    rootGetters.activeFile
-  ) {
+  if (state.commitAction === consts.COMMIT_TO_NEW_BRANCH && rootGetters.activeFile) {
     router.push(
-      `/project/${rootState.currentProjectId}/blob/${branch}/${
-        rootGetters.activeFile.path
-      }`,
+      `/project/${rootState.currentProjectId}/blob/${branch}/${rootGetters.activeFile.path}`,
     );
   }
 
   dispatch('updateCommitAction', consts.COMMIT_TO_CURRENT_BRANCH);
 };
 
-export const commitChanges = ({
-  commit,
-  state,
-  getters,
-  dispatch,
-  rootState,
-}) => {
+export const commitChanges = ({ commit, state, getters, dispatch, rootState }) => {
   const newBranch = state.commitAction !== consts.COMMIT_TO_CURRENT_BRANCH;
-  const payload = createCommitPayload(
-    getters.branchName,
-    newBranch,
-    state,
-    rootState,
-  );
-  const getCommitStatus = newBranch
-    ? Promise.resolve(false)
-    : dispatch('checkCommitStatus');
+  const payload = createCommitPayload(getters.branchName, newBranch, state, rootState);
+  const getCommitStatus = newBranch ? Promise.resolve(false) : dispatch('checkCommitStatus');
 
   commit(types.UPDATE_LOADING, true);
 

spec/javascripts/ide/stores/modules/commit/actions_spec.js

@@ -133,10 +133,7 @@ describe('IDE commit module actions', () => {
       store
         .dispatch('commit/checkCommitStatus')
         .then(() => {
-          expect(service.getBranchData).toHaveBeenCalledWith(
-            'abcproject',
-            'master',
-          );
+          expect(service.getBranchData).toHaveBeenCalledWith('abcproject', 'master');
 
           done();
         })
@@ -230,9 +227,7 @@ describe('IDE commit module actions', () => {
           branch,
         })
         .then(() => {
-          expect(
-            store.state.projects.abcproject.branches.master.workingReference,
-          ).toBe(data.id);
+          expect(store.state.projects.abcproject.branches.master.workingReference).toBe(data.id);
         })
         .then(done)
         .catch(done.fail);
@@ -286,10 +281,10 @@ describe('IDE commit module actions', () => {
           branch,
         })
         .then(() => {
-          expect(eventHub.$emit).toHaveBeenCalledWith(
-            `editor.update.model.content.${f.path}`,
-            { content: f.content, changed: false },
-          );
+          expect(eventHub.$emit).toHaveBeenCalledWith(`editor.update.model.content.${f.key}`, {
+            content: f.content,
+            changed: false,
+          });
         })
         .then(done)
         .catch(done.fail);
@@ -304,9 +299,7 @@ describe('IDE commit module actions', () => {
           branch,
         })
         .then(() => {
-          expect(router.push).toHaveBeenCalledWith(
-            `/project/abcproject/blob/master/${f.path}`,
-          );
+          expect(router.push).toHaveBeenCalledWith(`/project/abcproject/blob/master/${f.path}`);
         })
         .then(done)
         .catch(done.fail);
@@ -321,9 +314,7 @@ describe('IDE commit module actions', () => {
           branch,
         })
         .then(() => {
-          expect(store.state.commit.commitAction).not.toBe(
-            consts.COMMIT_TO_NEW_BRANCH,
-          );
+          expect(store.state.commit.commitAction).not.toBe(consts.COMMIT_TO_NEW_BRANCH);
         })
         .then(done)
         .catch(done.fail);
@@ -445,9 +436,7 @@ describe('IDE commit module actions', () => {
         store
           .dispatch('commit/commitChanges')
           .then(() => {
-            expect(store.state.openFiles[0].lastCommit.message).toBe(
-              'test message',
-            );
+            expect(store.state.openFiles[0].lastCommit.message).toBe('test message');
 
             done();
           })