From c4201f103662f5ff9eb064890a10352ec03bc495 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 18 Apr 2018 12:55:24 +0100
Subject: [PATCH] Added changes count to web IDE folder

#44846
---
 app/assets/javascripts/ide/components/repo_file.vue | 13 +++++++++++--
 app/assets/javascripts/ide/stores/getters.js        |  3 +++
 app/assets/stylesheets/pages/repo.scss              |  4 ++--
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index 3b5068d4910..965a49d98cf 100644
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/app/assets/javascripts/ide/components/repo_file.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapActions } from 'vuex';
+import { mapActions, mapGetters } from 'vuex';
 import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
 import fileIcon from '~/vue_shared/components/file_icon.vue';
 import router from '../ide_router';
@@ -29,6 +29,10 @@ export default {
     },
   },
   computed: {
+    ...mapGetters(['getChangesInFolder']),
+    folderChangedCount() {
+      return this.getChangesInFolder(this.file.path);
+    },
     isTree() {
       return this.file.type === 'tree';
     },
@@ -101,9 +105,14 @@ export default {
           <mr-file-icon
             v-if="file.mrChange"
           />
+          <span
+            v-if="isTree && folderChangedCount > 0"
+          >
+            {{ folderChangedCount }}
+          </span>
           <changed-file-icon
+            v-else-if="file.changed || file.tempFile"
             :file="file"
-            v-if="file.changed || file.tempFile"
           />
         </span>
         <new-dropdown
diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js
index a77cdbc13c8..775ab17e0c8 100644
--- a/app/assets/javascripts/ide/stores/getters.js
+++ b/app/assets/javascripts/ide/stores/getters.js
@@ -35,3 +35,6 @@ export const currentIcon = state =>
 export const hasChanges = state => !!state.changedFiles.length;
 
 export const hasMergeRequest = state => !!state.currentMergeRequestId;
+
+export const getChangesInFolder = state => path =>
+  state.changedFiles.filter(f => f.path.indexOf(path) === 0 && !f.tempFile).length;
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 3a05a1cf2a9..d9dc2bfbefc 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -601,11 +601,11 @@
 }
 
 .multi-file-addition {
-  fill: $green-500;
+  color: $green-500;
 }
 
 .multi-file-modified {
-  fill: $orange-500;
+  color: $orange-500;
 }
 
 .multi-file-commit-list-collapsed {