update staged files to correctly use pending tab

5 files changed, 33 insertions, 42 deletions

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index ab88055fc36..6d4e79f2d7a 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/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');
         }
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index b1a16350c19..008b2a01b56 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/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);
diff --git a/app/assets/javascripts/ide/lib/common/model.js b/app/assets/javascripts/ide/lib/common/model.js
index da467cbd476..1475d6b9ce0 100644
--- a/app/assets/javascripts/ide/lib/common/model.js
+++ b/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);
   }
 }
diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js
index ef018935c7a..de98ebc8ebb 100644
--- a/app/assets/javascripts/ide/stores/actions/file.js
+++ b/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');
 
diff --git a/app/assets/javascripts/ide/stores/modules/commit/actions.js b/app/assets/javascripts/ide/stores/modules/commit/actions.js
index e577ea3c26c..2565ede7193 100644
--- a/app/assets/javascripts/ide/stores/modules/commit/actions.js
+++ b/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);