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

1 files changed, 40 insertions, 3 deletions

diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index 0b54d621fe9..51534ca321a 100644
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/app/assets/javascripts/ide/components/repo_file.vue
@@ -1,5 +1,7 @@
 <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"