Added changes count to web IDE folder

#44846

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

 <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

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;

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 {