removed horrible getter & instead prefer the state

the state now gets updated whenever a file is changed/discard

8 files changed, 38 insertions, 19 deletions

diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index 4199fcd7a95..36ffc1b1b78 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, mapGetters } from 'vuex';
+import { mapActions } from 'vuex';
 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';
@@ -31,10 +31,6 @@ export default {
     },
   },
   computed: {
-    ...mapGetters(['getChangesInFolder']),
-    folderChangedCount() {
-      return this.getChangesInFolder(this.file.path);
-    },
     isTree() {
       return this.file.type === 'tree';
     },
@@ -108,10 +104,10 @@ export default {
             v-if="file.mrChange"
           />
           <span
-            v-if="isTree && folderChangedCount > 0"
+            v-if="isTree && file.changesCount > 0"
             class="ide-tree-changes"
           >
-            {{ folderChangedCount }}
+            {{ file.changesCount }}
             <icon
               name="file-modified"
               :size="12"
diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js
index d782e0a84d2..1ec5b8036b3 100644
--- a/app/assets/javascripts/ide/stores/actions/file.js
+++ b/app/assets/javascripts/ide/stores/actions/file.js
@@ -117,16 +117,24 @@ export const getRawFileData = ({ state, commit, dispatch }, { path, baseSha }) =
   });
 };
 
-export const changeFileContent = ({ state, commit }, { path, content }) => {
+export const changeFileContent = ({ state, commit, dispatch, getters }, { path, content }) => {
   const file = state.entries[path];
+  const stagedFile = getters.getStagedFile(path);
   commit(types.UPDATE_FILE_CONTENT, { path, content });
 
   const indexOfChangedFile = state.changedFiles.findIndex(f => f.path === 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 });
+    }
   }
 };
 
@@ -162,6 +170,10 @@ 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) {
diff --git a/app/assets/javascripts/ide/stores/actions/tree.js b/app/assets/javascripts/ide/stores/actions/tree.js
index 6536be04f0a..240f4d46c5a 100644
--- a/app/assets/javascripts/ide/stores/actions/tree.js
+++ b/app/assets/javascripts/ide/stores/actions/tree.js
@@ -93,3 +93,13 @@ 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 });
+  }
+};
diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js
index 2e4129bcd48..8518d2f6f06 100644
--- a/app/assets/javascripts/ide/stores/getters.js
+++ b/app/assets/javascripts/ide/stores/getters.js
@@ -42,15 +42,4 @@ export const collapseButtonTooltip = state =>
 
 export const hasMergeRequest = state => !!state.currentMergeRequestId;
 
-export const getChangesInFolder = (state, getters) => 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) && !getters.getChangedFile(f.path),
-  ).length;
-
-  return changedFilesCount + stagedFilesCount;
-};
-
-export const getChangedFile = state => path => state.stagedFiles.find(f => f.path === path);
 export const getStagedFile = state => path => state.stagedFiles.find(f => f.path === path);
diff --git a/app/assets/javascripts/ide/stores/mutation_types.js b/app/assets/javascripts/ide/stores/mutation_types.js
index f5f95b755c8..bf4fbca4031 100644
--- a/app/assets/javascripts/ide/stores/mutation_types.js
+++ b/app/assets/javascripts/ide/stores/mutation_types.js
@@ -28,6 +28,7 @@ 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';
diff --git a/app/assets/javascripts/ide/stores/mutations/tree.js b/app/assets/javascripts/ide/stores/mutations/tree.js
index 1176c040fb9..d8cf950a783 100644
--- a/app/assets/javascripts/ide/stores/mutations/tree.js
+++ b/app/assets/javascripts/ide/stores/mutations/tree.js
@@ -31,4 +31,9 @@ export default {
       changedFiles: [],
     });
   },
+  [types.UPDATE_FOLDER_CHANGE_COUNT](state, { path, count }) {
+    Object.assign(state.entries[path], {
+      changesCount: state.entries[path].changesCount + count,
+    });
+  },
 };
diff --git a/app/assets/javascripts/ide/stores/utils.js b/app/assets/javascripts/ide/stores/utils.js
index 8a222da14c0..8eae94b7668 100644
--- a/app/assets/javascripts/ide/stores/utils.js
+++ b/app/assets/javascripts/ide/stores/utils.js
@@ -42,6 +42,8 @@ export const dataStructure = () => ({
   viewMode: 'edit',
   previewMode: null,
   size: 0,
+  parentPath: null,
+  changesCount: 0,
 });
 
 export const decorateData = entity => {
@@ -64,6 +66,7 @@ export const decorateData = entity => {
     previewMode,
     file_lock,
     html,
+    parentPath = '',
   } = entity;
 
   return {
@@ -87,6 +90,7 @@ export const decorateData = entity => {
     previewMode,
     file_lock,
     html,
+    parentPath,
   };
 };
 
diff --git a/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js b/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js
index a1673276900..44067f53928 100644
--- a/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js
+++ b/app/assets/javascripts/ide/stores/workers/files_decorator_worker.js
@@ -26,6 +26,7 @@ self.addEventListener('message', e => {
             url: `/${projectId}/tree/${branchId}/${folderPath}/`,
             type: 'tree',
             parentTreeUrl: parentFolder ? parentFolder.url : `/${projectId}/tree/${branchId}/`,
+            parentPath: parentFolder ? parentFolder.path : null,
             tempFile,
             changed: tempFile,
             opened: tempFile,
@@ -61,6 +62,7 @@ self.addEventListener('message', e => {
         url: `/${projectId}/blob/${branchId}/${path}`,
         type: 'blob',
         parentTreeUrl: fileFolder ? fileFolder.url : `/${projectId}/blob/${branchId}`,
+        parentPath: fileFolder ? fileFolder.path : null,
         tempFile,
         changed: tempFile,
         content,