correctly stages and unstages files

after a commit the files are correctly reset
correctly enables the ability to have different staged & unstaged changes in the same file

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

 <script>
+import { mapActions } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
 import StageButton from './stage_button.vue';
 import UnstageButton from './unstage_button.vue';
@@ -57,7 +58,7 @@ export default {
     </button>
     <component
       :is="actionComponent"
-      :file="file"
+      :path="file.path"
     />
   </div>
 </template>

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

@@ -7,8 +7,8 @@ export default {
     Icon,
   },
   props: {
-    file: {
-      type: Object,
+    path: {
+      type: String,
       required: true,
     },
   },
@@ -27,7 +27,7 @@ export default {
       type="button"
       class="btn btn-blank append-right-5"
       :aria-label="__('Stage change')"
-      @click.stop="stageChange(file)"
+      @click.stop="stageChange(path)"
     >
       <icon
         name="mobile-issue-close"
@@ -38,7 +38,7 @@ export default {
       type="button"
       class="btn btn-blank"
       :aria-label="__('Discard change')"
-      @click.stop="discardFileChanges(file)"
+      @click.stop="discardFileChanges(path)"
     >
       <icon
         name="remove"

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

@@ -7,8 +7,8 @@ export default {
     Icon,
   },
   props: {
-    file: {
-      type: Object,
+    path: {
+      type: String,
       required: true,
     },
   },
@@ -27,7 +27,7 @@ export default {
       type="button"
       class="btn btn-blank"
       :aria-label="__('Unstage change')"
-      @click="unstageChange(file)"
+      @click="unstageChange(path)"
     >
       <icon
         name="history"

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

@@ -32,9 +32,8 @@ export default {
     },
   },
   computed: {
-    ...mapState(['stagedFiles', 'rightPanelCollapsed']),
+    ...mapState(['changedFiles', 'stagedFiles', 'rightPanelCollapsed']),
     ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
-    ...mapGetters(['unstagedFiles']),
     ...mapGetters('commit', [
       'commitButtonDisabled',
       'discardDraftButtonDisabled',
@@ -74,12 +73,12 @@ export default {
       </template>
     </modal>
     <template
-      v-if="unstagedFiles.length || stagedFiles.length"
+      v-if="changedFiles.length || stagedFiles.length"
     >
       <commit-files-list
         icon="unstaged"
         :title="__('Unstaged')"
-        :file-list="unstagedFiles"
+        :file-list="changedFiles"
         action="stageAllChanges"
         :action-btn-text="__('Stage all')"
         item-action-component="stage-button"

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

@@ -69,10 +69,13 @@ export default class Model {
     );
   }
 
-  updateContent(content) {
+  updateContent({ content, changed }) {
     this.getOriginalModel().setValue(content);
+
+    if (!changed) {
       this.getModel().setValue(content);
     }
+  }
 
   dispose() {
     this.disposable.dispose();

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

@@ -116,11 +116,11 @@ export const scrollToTab = () => {
 };
 
 export const stageAllChanges = ({ state, commit }) => {
-  [...state.changedFiles].forEach(file => commit(types.STAGE_CHANGE, file));
+  state.changedFiles.forEach(file => commit(types.STAGE_CHANGE, file.path));
 };
 
 export const unstageAllChanges = ({ state, commit }) => {
-  [...state.stagedFiles].forEach(file => commit(types.UNSTAGE_CHANGE, file));
+  state.stagedFiles.forEach(file => commit(types.UNSTAGE_CHANGE, file.path));
 };
 
 export const updateViewer = ({ commit }, viewer) => {

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

@@ -145,10 +145,10 @@ export const discardFileChanges = ({ state, commit }, path) => {
   eventHub.$emit(`editor.update.model.content.${file.path}`, file.raw);
 };
 
-export const stageChange = ({ commit }, file) => {
-  commit(types.STAGE_CHANGE, file);
+export const stageChange = ({ commit }, path) => {
+  commit(types.STAGE_CHANGE, path);
 };
 
-export const unstageChange = ({ commit }, file) => {
-  commit(types.UNSTAGE_CHANGE, file);
+export const unstageChange = ({ commit }, path) => {
+  commit(types.UNSTAGE_CHANGE, path);
 };

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

@@ -24,9 +24,8 @@ export const projectsWithTrees = state =>
   });
 
 // eslint-disable-next-line no-confusing-arrow
-export const currentIcon = state =>
+export const collapseButtonIcon = state =>
   state.rightPanelCollapsed ? 'angle-double-left' : 'angle-double-right';
 
-export const hasChanges = state => !!state.changedFiles.length;
-
-export const unstagedFiles = state => state.changedFiles.filter(f => !f.staged);
+export const hasChanges = state =>
+  !!state.changedFiles.length || !!state.stagedFiles.length;

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

@@ -100,35 +100,22 @@ export const updateFilesAfterCommit = (
     { root: true },
   );
 
-  rootState.changedFiles.forEach(entry => {
-    commit(
-      rootTypes.SET_LAST_COMMIT_DATA,
-      {
-        entry,
-        lastCommit,
-      },
-      { root: true },
-    );
-
-    eventHub.$emit(`editor.update.model.content.${entry.path}`, entry.content);
+  rootState.stagedFiles.forEach(file => {
+    const changedFile = rootState.changedFiles.find(f => f.path === file.path);
 
     commit(
-      rootTypes.SET_FILE_RAW_DATA,
+      rootTypes.UPDATE_FILE_AFTER_COMMIT,
       {
-        file: entry,
-        raw: entry.content,
+        file,
+        lastCommit,
       },
       { root: true },
     );
 
-    commit(
-      rootTypes.TOGGLE_FILE_CHANGED,
-      {
-        file: entry,
-        changed: false,
-      },
-      { root: true },
-    );
+    eventHub.$emit(`editor.update.model.content.${file.path}`, {
+      content: file.content,
+      changed: !!changedFile,
+    });
   });
 
   if (

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

 import * as consts from './constants';
 
-export const discardDraftButtonDisabled = state => state.commitMessage === '' || state.submitCommitLoading;
+export const discardDraftButtonDisabled = state =>
+  state.commitMessage === '' || state.submitCommitLoading;
 
 export const commitButtonDisabled = (state, getters, rootState) =>
-  getters.discardDraftButtonDisabled || !rootState.changedFiles.length;
+  getters.discardDraftButtonDisabled || !rootState.stagedFiles.length;
 
 export const newBranchName = (state, _, rootState) =>
-  `${gon.current_username}-${rootState.currentBranchId}-patch-${`${new Date().getTime()}`.substr(-5)}`;
+  `${gon.current_username}-${
+    rootState.currentBranchId
+  }-patch-${`${new Date().getTime()}`.substr(-5)}`;
 
 export const branchName = (state, getters, rootState) => {
   if (

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

@@ -45,3 +45,5 @@ export const UPDATE_DELAY_VIEWER_CHANGE = 'UPDATE_DELAY_VIEWER_CHANGE';
 export const CLEAR_STAGED_CHANGES = 'CLEAR_STAGED_CHANGES';
 export const STAGE_CHANGE = 'STAGE_CHANGE';
 export const UNSTAGE_CHANGE = 'UNSTAGE_CHANGE';
+
+export const UPDATE_FILE_AFTER_COMMIT = 'UPDATE_FILE_AFTER_COMMIT';

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

@@ -104,6 +104,21 @@ export default {
       delayViewerUpdated,
     });
   },
+  [types.UPDATE_FILE_AFTER_COMMIT](state, { file, lastCommit }) {
+    const changedFile = state.changedFiles.find(f => f.path === file.path);
+
+    Object.assign(state.entries[file.path], {
+      raw: file.content,
+      changed: !!changedFile,
+      lastCommit: Object.assign(state.entries[file.path].lastCommit, {
+        id: lastCommit.commit.id,
+        url: lastCommit.commit_path,
+        message: lastCommit.commit.message,
+        author: lastCommit.commit.author_name,
+        updatedAt: lastCommit.commit.authored_date,
+      }),
+    });
+  },
   ...projectMutations,
   ...fileMutations,
   ...treeMutations,

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

 import * as types from '../mutation_types';
-import { findIndexOfFile, findEntry } from '../utils';
 
 export default {
   [types.SET_FILE_ACTIVE](state, { path, active }) {
@@ -76,31 +75,42 @@ export default {
       changedFiles: state.changedFiles.filter(f => f.path !== path),
     });
   },
-  [types.STAGE_CHANGE](state, file) {
-    const stagedFile = findEntry(state.stagedFiles, 'blob', file.name);
+  [types.STAGE_CHANGE](state, path) {
+    const stagedFile = state.stagedFiles.find(f => f.path === path);
 
-    Object.assign(file, {
-      staged: true,
+    Object.assign(state, {
+      changedFiles: state.changedFiles.filter(f => f.path !== path),
     });
 
     if (stagedFile) {
       Object.assign(stagedFile, {
-        ...file,
+        ...state.entries[path],
       });
     } else {
-      state.stagedFiles.push({
-        ...file,
+      Object.assign(state, {
+        stagedFiles: state.stagedFiles.concat({
+          ...state.entries[path],
+        }),
       });
     }
   },
-  [types.UNSTAGE_CHANGE](state, file) {
-    const indexOfStagedFile = findIndexOfFile(state.stagedFiles, file);
-    const changedFile = findEntry(state.changedFiles, 'blob', file.name);
+  [types.UNSTAGE_CHANGE](state, path) {
+    const changedFile = state.changedFiles.find(f => f.path === path);
+    const stagedFile = state.stagedFiles.find(f => f.path === path);
 
-    state.stagedFiles.splice(indexOfStagedFile, 1);
+    if (!changedFile && stagedFile) {
+      Object.assign(state.entries[path], {
+        ...stagedFile,
+        changed: true,
+      });
 
-    Object.assign(changedFile, {
-      staged: false,
+      Object.assign(state, {
+        changedFiles: state.changedFiles.concat(state.entries[path]),
+      });
+    }
+
+    Object.assign(state, {
+      stagedFiles: state.stagedFiles.filter(f => f.path !== path),
     });
   },
   [types.TOGGLE_FILE_CHANGED](state, { file, changed }) {

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

@@ -13,7 +13,6 @@ export const dataStructure = () => ({
   opened: false,
   active: false,
   changed: false,
-  staged: false,
   lastCommitPath: '',
   lastCommit: {
     id: '',