use getters to correctly get the counts for both unstaged & staged changes

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

 <script>
-import { mapActions } from 'vuex';
+import { mapActions, mapGetters } from 'vuex';
+import { n__, __, sprintf } from '~/locale';
+import tooltip from '~/vue_shared/directives/tooltip';
 import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
 import Icon from '~/vue_shared/components/icon.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
@@ -11,6 +13,9 @@ import MrFileIcon from './mr_file_icon.vue';
 
 export default {
   name: 'RepoFile',
+  directives: {
+    tooltip,
+  },
   components: {
     SkeletonLoadingContainer,
     NewDropdown,
@@ -31,6 +36,34 @@ export default {
     },
   },
   computed: {
+    ...mapGetters([
+      'getChangesInFolder',
+      'getUnstagedFilesCountForPath',
+      'getStagedFilesCountForPath',
+    ]),
+    folderUnstagedCount() {
+      return this.getUnstagedFilesCountForPath(this.file.path);
+    },
+    folderStagedCount() {
+      return this.getStagedFilesCountForPath(this.file.path);
+    },
+    changesCount() {
+      return this.getChangesInFolder(this.file.path);
+    },
+    folderChangesTooltip() {
+      if (this.changesCount === 0) return undefined;
+
+      if (this.folderUnstagedCount > 0 && this.folderStagedCount === 0) {
+        return n__('%d unstaged change', '%d unstaged changes', this.folderUnstagedCount);
+      } else if (this.folderUnstagedCount === 0 && this.folderStagedCount > 0) {
+        return n__('%d staged change', '%d staged changes', this.folderStagedCount);
+      }
+
+      return sprintf(__('%{unstaged} unstaged and %{staged} staged changes'), {
+        unstaged: this.folderUnstagedCount,
+        staged: this.folderStagedCount,
+      });
+    },
     isTree() {
       return this.file.type === 'tree';
     },
@@ -104,11 +137,15 @@ export default {
             v-if="file.mrChange"
           />
           <span
-            v-if="isTree && file.changesCount > 0"
+            v-if="isTree && changesCount > 0 && !file.opened"
             class="ide-tree-changes"
           >
-            {{ file.changesCount }}
+            {{ changesCount }}
             <icon
+              v-tooltip
+              :title="folderChangesTooltip"
+              data-container="body"
+              data-placement="right"
               name="file-modified"
               :size="12"
               css-classes="prepend-left-5 multi-file-modified"

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

@@ -126,15 +126,8 @@ export const changeFileContent = ({ state, commit, dispatch, getters }, { path,
 
   if (file.changed && indexOfChangedFile === -1) {
     commit(types.ADD_FILE_TO_CHANGED, path);
-
-    if (!stagedFile) {
-      dispatch('updateChangesCount', { path, count: +1 });
-    }
   } else if (!file.changed && indexOfChangedFile !== -1) {
     commit(types.REMOVE_FILE_FROM_CHANGED, path);
-    if (!stagedFile) {
-      dispatch('updateChangesCount', { path, count: -1 });
-    }
   }
 };
 
@@ -170,10 +163,6 @@ export const discardFileChanges = ({ dispatch, state, commit, getters }, path) =
   commit(types.DISCARD_FILE_CHANGES, path);
   commit(types.REMOVE_FILE_FROM_CHANGED, path);
 
-  if (!getters.getStagedFile(path)) {
-    dispatch('updateChangesCount', { path, count: -1 });
-  }
-
   if (file.tempFile && file.opened) {
     commit(types.TOGGLE_FILE_OPEN, path);
   } else if (getters.activeFile && file.path === getters.activeFile.path) {

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

@@ -93,13 +93,3 @@ export const getFiles = ({ state, commit, dispatch }, { projectId, branchId } =
       resolve();
     }
   });
-
-export const updateChangesCount = ({ commit, dispatch, state }, { path, count }) => {
-  commit(types.UPDATE_FOLDER_CHANGE_COUNT, { path, count });
-
-  const parentPath = state.entries[path].parentPath;
-
-  if (parentPath) {
-    dispatch('updateChangesCount', { path: parentPath, count });
-  }
-};

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

@@ -55,7 +55,32 @@ export const allBlobs = state =>
     }, [])
     .sort((a, b) => b.lastOpenedAt - a.lastOpenedAt);
 
+export const getChangedFile = state => path => state.changedFiles.find(f => f.path === path);
 export const getStagedFile = state => path => state.stagedFiles.find(f => f.path === path);
 
+export const getChangesInFolder = state => path => {
+  const filePathMatches = f => f.path.replace(new RegExp(`/${f.name}$`), '').indexOf(path) === 0;
+  const changedFilesCount = state.changedFiles.filter(f => filePathMatches(f)).length;
+  const stagedFilesCount = state.stagedFiles.filter(
+    f => filePathMatches(f) && !getChangedFile(state, f.path),
+  ).length;
+
+  return changedFilesCount + stagedFilesCount;
+};
+
+export const getUnstagedFilesCountForPath = state => path => {
+  const filePathMatches = f => f.path.replace(new RegExp(`/${f.name}$`), '').indexOf(path) === 0;
+  const changedFilesCount = state.changedFiles.filter(f => filePathMatches(f)).length;
+
+  return changedFilesCount;
+};
+
+export const getStagedFilesCountForPath = state => path => {
+  const filePathMatches = f => f.path.replace(new RegExp(`/${f.name}$`), '').indexOf(path) === 0;
+  const stagedFilesCount = state.stagedFiles.filter(f => filePathMatches(f)).length;
+
+  return stagedFilesCount;
+};
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};

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

@@ -28,7 +28,6 @@ export const TOGGLE_TREE_OPEN = 'TOGGLE_TREE_OPEN';
 export const SET_LAST_COMMIT_URL = 'SET_LAST_COMMIT_URL';
 export const CREATE_TREE = 'CREATE_TREE';
 export const REMOVE_ALL_CHANGES_FILES = 'REMOVE_ALL_CHANGES_FILES';
-export const UPDATE_FOLDER_CHANGE_COUNT = 'UPDATE_FOLDER_CHANGE_COUNT';
 
 // File mutation types
 export const SET_FILE_DATA = 'SET_FILE_DATA';

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

@@ -31,9 +31,4 @@ export default {
       changedFiles: [],
     });
   },
-  [types.UPDATE_FOLDER_CHANGE_COUNT](state, { path, count }) {
-    Object.assign(state.entries[path], {
-      changesCount: state.entries[path].changesCount + count,
-    });
-  },
 };

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

@@ -33,7 +33,6 @@ export const dataStructure = () => ({
   raw: '',
   content: '',
   parentTreeUrl: '',
-  parentPath: '',
   renderError: false,
   base64: false,
   editorRow: 1,
@@ -44,7 +43,6 @@ export const dataStructure = () => ({
   previewMode: null,
   size: 0,
   parentPath: null,
-  changesCount: 0,
   lastOpenedAt: 0,
 });
 

spec/javascripts/ide/components/repo_file_spec.js

@@ -56,7 +56,6 @@ describe('RepoFile', () => {
         type: 'tree',
         branchId: 'master',
         projectId: 'project',
-        changesCount: '1',
       };
 
       createComponent({

spec/javascripts/ide/stores/getters_spec.js

@@ -84,4 +84,67 @@ describe('IDE store getters', () => {
       expect(getters.allBlobs(localState)[0].name).toBe('blob');
     });
   });
+
+  describe('getChangesInFolder', () => {
+    it('returns length of changed files for a path', () => {
+      localState.changedFiles.push(
+        {
+          path: 'test/index',
+          name: 'index',
+        },
+        {
+          path: 'app/123',
+          name: '123',
+        },
+      );
+
+      expect(getters.getChangesInFolder(localState)('test')).toBe(1);
+    });
+
+    it('returns length of changed & staged files for a path', () => {
+      localState.changedFiles.push(
+        {
+          path: 'test/index',
+          name: 'index',
+        },
+        {
+          path: 'testing/123',
+          name: '123',
+        },
+      );
+
+      localState.stagedFiles.push(
+        {
+          path: 'test/123',
+          name: '123',
+        },
+        {
+          path: 'test/index',
+          name: 'index',
+        },
+        {
+          path: 'testing/12345',
+          name: '12345',
+        },
+      );
+
+      expect(getters.getChangesInFolder(localState)('test')).toBe(2);
+    });
+
+    it('returns length of changed & tempFiles files for a path', () => {
+      localState.changedFiles.push(
+        {
+          path: 'test/index',
+          name: 'index',
+        },
+        {
+          path: 'test/newfile',
+          name: 'newfile',
+          tempFile: true,
+        },
+      );
+
+      expect(getters.getChangesInFolder(localState)('test')).toBe(2);
+    });
+  });
 });