fixed opening/changing/closing files

[ci skip]

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

@@ -31,13 +31,13 @@
       },
     },
     computed: {
+      ...mapState([
+        'changedFiles',
+        'openFiles',
+      ]),
       ...mapGetters([
         'activeFile',
       ]),
-      ...mapGetters({
-        openFiles: 'openFilesMap',
-        changedFiles: 'changedFilesMap',
-      }),
     },
     mounted() {
       const returnValue = 'Are you sure you want to lose unsaved changes?';

ee/app/assets/javascripts/ide/components/ide_context_bar.vue

 <script>
-  import { mapState, mapGetters, mapActions } from 'vuex';
+  import { mapState } from 'vuex';
   import icon from '~/vue_shared/components/icon.vue';
   import panelResizer from '~/vue_shared/components/panel_resizer.vue';
   import repoCommitSection from './repo_commit_section.vue';
@@ -24,11 +24,9 @@
     },
     computed: {
       ...mapState([
+        'changedFiles',
         'rightPanelCollapsed',
       ]),
-      ...mapGetters({
-        changedFiles: 'changedFilesMap',
-      }),
       currentIcon() {
         return this.rightPanelCollapsed ? 'angle-double-left' : 'angle-double-right';
       },

ee/app/assets/javascripts/ide/components/ide_side_bar.vue

 <script>
-  import { mapState, mapActions } from 'vuex';
+  import { mapState } from 'vuex';
   import icon from '~/vue_shared/components/icon.vue';
   import panelResizer from '~/vue_shared/components/panel_resizer.vue';
   import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';

ee/app/assets/javascripts/ide/components/repo_commit_section.vue

@@ -36,10 +36,8 @@ export default {
       'currentBranchId',
       'rightPanelCollapsed',
       'lastCommitMsg',
+      'changedFiles',
     ]),
-    ...mapGetters({
-      changedFiles: 'changedFilesMap',
-    }),
     ...mapState('commit', [
       'commitMessage',
       'submitCommitLoading',

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

 <script>
-  import { mapState } from 'vuex';
-
   import timeAgoMixin from '~/vue_shared/mixins/timeago';
   import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
   import fileIcon from '~/vue_shared/components/file_icon.vue';
@@ -130,11 +128,12 @@
         </template>
       </div>
     </div>
-    <repo-file
-      v-if="file.opened"
-      v-for="childFile in file.tree"
-      :key="childFile.key"
-      :file="childFile"
-    />
+    <template v-if="file.opened">
+      <repo-file
+        v-for="childFile in file.tree"
+        :key="childFile.key"
+        :file="childFile"
+      />
+    </template>
   </div>
 </template>

ee/app/assets/javascripts/ide/components/repo_file_buttons.vue

 <script>
-import { mapGetters } from 'vuex';
-
 export default {
   props: {
     file: {

ee/app/assets/javascripts/ide/components/repo_tabs.vue

 <script>
-  import { mapGetters } from 'vuex';
   import RepoTab from './repo_tab.vue';
 
   export default {
     components: {
-      'repo-tab': RepoTab,
+      RepoTab,
     },
     props: {
       files: {
@@ -12,11 +11,6 @@
         required: true,
       },
     },
-    computed: {
-      ...mapGetters([
-        'openFilesMap',
-      ]),
-    },
   };
 </script>
 

ee/app/assets/javascripts/ide/stores/actions/file.js

@@ -82,11 +82,11 @@ export const changeFileContent = ({ state, commit }, { path, content }) => {
   const file = state.entries[path];
   commit(types.UPDATE_FILE_CONTENT, { path, content });
 
-  const indexOfChangedFile = state.changedFiles.indexOf(path);
+  const indexOfChangedFile = state.changedFiles.findIndex(f => f.path === path);
 
-  if (!file.changed && indexOfChangedFile === -1) {
+  if (file.changed && indexOfChangedFile === -1) {
     commit(types.ADD_FILE_TO_CHANGED, path);
-  } else if (file.changed && indexOfChangedFile !== -1) {
+  } else if (!file.changed && indexOfChangedFile !== -1) {
     commit(types.REMOVE_FILE_FROM_CHANGED, path);
   }
 };

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

-export const openFilesMap = state => state.openFiles.map(path => state.entries[path]);
-export const changedFilesMap = state => state.changedFiles.map(path => state.entries[path]);
-
-export const activeFile = state => openFilesMap(state).find(file => file.active) || null;
+export const activeFile = state => state.openFiles.find(file => file.active) || null;
 
 export const canEditFile = (state) => {
   const currentActiveFile = activeFile(state);
@@ -10,9 +7,9 @@ export const canEditFile = (state) => {
          (currentActiveFile && !currentActiveFile.renderError && !currentActiveFile.binary);
 };
 
-export const addedFiles = state => changedFilesMap(state).filter(f => f.tempFile);
+export const addedFiles = state => state.changedFiles.filter(f => f.tempFile);
 
-export const modifiedFiles = state => changedFilesMap(state).filter(f => !f.tempFile);
+export const modifiedFiles = state => state.changedFiles.filter(f => !f.tempFile);
 
 export const treeList = (state) => {
   const tree = state.trees[`${state.currentProjectId}/master`];

ee/app/assets/javascripts/ide/stores/mutation_types.js

 export const SET_INITIAL_DATA = 'SET_INITIAL_DATA';
 export const TOGGLE_LOADING = 'TOGGLE_LOADING';
-export const SET_PARENT_TREE_URL = 'SET_PARENT_TREE_URL';
 export const SET_LAST_COMMIT_DATA = 'SET_LAST_COMMIT_DATA';
 export const SET_LAST_COMMIT_MSG = 'SET_LAST_COMMIT_MSG';
 export const SET_LEFT_PANEL_COLLAPSED = 'SET_LEFT_PANEL_COLLAPSED';

ee/app/assets/javascripts/ide/stores/mutations.js

@@ -10,14 +10,8 @@ export default {
   },
   [types.TOGGLE_LOADING](state, { entry, forceValue = undefined }) {
     if (entry.path) {
-      Object.assign(state, {
-        entries: {
-          ...state.entries,
-          [entry.path]: {
-            ...state.entries[entry.path],
-            loading: forceValue !== undefined ? forceValue : !state.entries[entry.path].loading,
-          },
-        },
+      Object.assign(state.entries[entry.path], {
+        loading: forceValue !== undefined ? forceValue : !state.entries[entry.path].loading,
       });
     } else {
       Object.assign(entry, {
@@ -41,7 +35,6 @@ export default {
     });
   },
   [types.SET_LAST_COMMIT_DATA](state, { entry, lastCommit }) {
-    console.log(entry);
     Object.assign(entry.lastCommit, {
       id: lastCommit.commit.id,
       url: lastCommit.commit_path,

ee/app/assets/javascripts/ide/stores/mutations/file.js

@@ -12,9 +12,11 @@ export default {
     });
 
     if (state.entries[path].opened) {
-      state.openFiles.push(path);
+      state.openFiles.push(state.entries[path]);
     } else {
-      state.openFiles.splice(state.openFiles.indexOf(path), 1);
+      Object.assign(state, {
+        openFiles: state.openFiles.filter(f => f.path !== path),
+      });
     }
   },
   [types.SET_FILE_DATA](state, { data, file }) {
@@ -67,10 +69,14 @@ export default {
     parent.tree.push(file);
   },
   [types.ADD_FILE_TO_CHANGED](state, path) {
-    state.changedFiles.push(path);
+    Object.assign(state, {
+      changedFiles: state.changedFiles.concat(state.entries[path]),
+    });
   },
   [types.REMOVE_FILE_FROM_CHANGED](state, path) {
-    state.changedFiles.splice(state.changedFiles.indexOf(path), 1);
+    Object.assign(state, {
+      changedFiles: state.changedFiles.filter(f => f.path !== path),
+    });
   },
   [types.TOGGLE_FILE_CHANGED](state, { file, changed }) {
     Object.assign(state.entries[file.path], {

ee/app/assets/javascripts/ide/stores/mutations/tree.js

@@ -21,11 +21,6 @@ export default {
       tree: data,
     });
   },
-  [types.SET_PARENT_TREE_URL](state, url) {
-    Object.assign(state, {
-      parentTreeUrl: url,
-    });
-  },
   [types.SET_LAST_COMMIT_URL](state, { tree = state, url }) {
     Object.assign(tree, {
       lastCommitPath: url,

spec/javascripts/ide/stores/mutations/tree_spec.js

@@ -47,14 +47,6 @@ describe('Multi-file store tree mutations', () => {
     });
   });
 
-  describe('SET_PARENT_TREE_URL', () => {
-    it('sets the parent tree url', () => {
-      mutations.SET_PARENT_TREE_URL(localState, 'test');
-
-      expect(localState.parentTreeUrl).toBe('test');
-    });
-  });
-
   describe('CREATE_TMP_TREE', () => {
     it('adds tree into parent tree', () => {
       const tmpEntry = file('tmpTree');