added support for staged files

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

@@ -36,7 +36,7 @@ export default {
       return `${this.changedIcon}-solid`;
     },
     changedIconClass() {
-      return `multi-${this.changedIcon} prepend-left-5 pull-left`;
+      return `multi-${this.changedIcon} pull-left`;
     },
     tooltipTitle() {
       if (!this.showTooltip) return undefined;
@@ -72,13 +72,7 @@ export default {
     class="ide-file-changed-icon"
   >
     <icon
-      v-if="file.staged && showStagedIcon"
-      :name="stagedIcon"
-      :size="12"
-      :css-classes="changedIconClass"
-    />
-    <icon
-      v-if="file.changed || file.tempFile || (file.staged && !showStagedIcon)"
+      v-if="file.changed || file.tempFile || file.staged"
       :name="changedIcon"
       :size="12"
       :css-classes="changedIconClass"

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

@@ -36,7 +36,7 @@ export default {
       return this.file.tempFile ? `file-addition${prefix}` : `file-modified${prefix}`;
     },
     iconClass() {
-      return `multi-file-${this.file.tempFile ? 'additions' : 'modified'} append-right-8`;
+      return `multi-file-${this.file.tempFile ? 'addition' : 'modified'} append-right-8`;
     },
   },
   methods: {

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

@@ -42,7 +42,17 @@ export const collapseButtonTooltip = state =>
 
 export const hasMergeRequest = state => !!state.currentMergeRequestId;
 
-export const getChangesInFolder = state => path =>
-  state.changedFiles.filter(f => f.path.replace(new RegExp(`/${f.name}$`), '') === path).length;
+export const getChangesInFolder = state => path => {
+  const changedFilesCount = state.changedFiles.filter(
+    f => f.path.replace(new RegExp(`/${f.name}$`), '') === path,
+  ).length;
+  const stagedFilesCount = state.stagedFiles.filter(
+    f =>
+      f.path.replace(new RegExp(`/${f.name}$`), '') === path &&
+      !state.changedFiles.find(changedF => changedF.path === f.path),
+  ).length;
+
+  return changedFilesCount + stagedFilesCount;
+};
 
 export const getStagedFile = state => path => state.stagedFiles.find(f => f.path === path);

app/assets/stylesheets/pages/repo.scss

@@ -589,8 +589,8 @@
   }
 }
 
-.multi-file-additions,
-.multi-file-additions-solid {
+.multi-file-addition,
+.multi-file-addition-solid {
   color: $green-500;
 }
 

spec/javascripts/ide/stores/getters_spec.js

@@ -81,6 +81,36 @@ describe('IDE store getters', () => {
       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(
         {