Move editor info from IDE file obj to fileEditor

- This way we can only use these attributes when
  we need them.

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

@@ -14,6 +14,7 @@ export default {
   },
   computed: {
     ...mapGetters(['activeFile']),
+    ...mapGetters('editor', ['activeFileEditor']),
     activeFileEOL() {
       return getFileEOL(this.activeFile.content);
     },
@@ -33,8 +34,10 @@ export default {
         </gl-link>
       </div>
       <div>{{ activeFileEOL }}</div>
-      <div v-if="activeFileIsText">{{ activeFile.editorRow }}:{{ activeFile.editorColumn }}</div>
-      <div>{{ activeFile.fileLanguage }}</div>
+      <div v-if="activeFileIsText">
+        {{ activeFileEditor.editorRow }}:{{ activeFileEditor.editorColumn }}
+      </div>
+      <div>{{ activeFileEditor.fileLanguage }}</div>
     </template>
     <terminal-sync-status-safe />
   </div>

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

@@ -22,6 +22,7 @@ import Editor from '../lib/editor';
 import FileTemplatesBar from './file_templates/bar.vue';
 import { __ } from '~/locale';
 import { extractMarkdownImagesFromEntries } from '../stores/utils';
+import { getFileEditorOrDefault } from '../stores/modules/editor/utils';
 import { getPathParent, readFileAsDataURL, registerSchema, isTextFile } from '../utils';
 import { getRulesWithTraversal } from '../lib/editorconfig/parser';
 import mapRulesToMonaco from '../lib/editorconfig/rules_mapper';
@@ -49,6 +50,7 @@ export default {
     ...mapState('rightPane', {
       rightPaneIsOpen: 'isOpen',
     }),
+    ...mapState('editor', ['fileEditors']),
     ...mapState([
       'viewer',
       'panelResizing',
@@ -67,6 +69,9 @@ export default {
       'getJsonSchemaForPath',
     ]),
     ...mapGetters('fileTemplates', ['showFileTemplatesBar']),
+    fileEditor() {
+      return getFileEditorOrDefault(this.fileEditors, this.file.path);
+    },
     shouldHideEditor() {
       return this.file && !this.file.loading && !isTextFile(this.file);
     },
@@ -80,10 +85,10 @@ export default {
       return this.shouldHideEditor && this.file.mrChange && this.viewer === viewerTypes.mr;
     },
     isEditorViewMode() {
-      return this.file.viewMode === FILE_VIEW_MODE_EDITOR;
+      return this.fileEditor.viewMode === FILE_VIEW_MODE_EDITOR;
     },
     isPreviewViewMode() {
-      return this.file.viewMode === FILE_VIEW_MODE_PREVIEW;
+      return this.fileEditor.viewMode === FILE_VIEW_MODE_PREVIEW;
     },
     editTabCSS() {
       return {
@@ -125,8 +130,7 @@ export default {
         this.initEditor();
 
         if (this.currentActivityView !== leftSidebarViews.edit.name) {
-          this.setFileViewMode({
-            file: this.file,
+          this.updateEditor({
             viewMode: FILE_VIEW_MODE_EDITOR,
           });
         }
@@ -134,8 +138,7 @@ export default {
     },
     currentActivityView() {
       if (this.currentActivityView !== leftSidebarViews.edit.name) {
-        this.setFileViewMode({
-          file: this.file,
+        this.updateEditor({
           viewMode: FILE_VIEW_MODE_EDITOR,
         });
       }
@@ -195,13 +198,11 @@ export default {
       'getFileData',
       'getRawFileData',
       'changeFileContent',
-      'setFileLanguage',
-      'setEditorPosition',
-      'setFileViewMode',
       'removePendingTab',
       'triggerFilesChange',
       'addTempImage',
     ]),
+    ...mapActions('editor', ['updateFileEditor']),
     initEditor() {
       if (this.shouldHideEditor && (this.file.content || this.file.raw)) {
         return;
@@ -284,19 +285,19 @@ export default {
 
       // Handle Cursor Position
       this.editor.onPositionChange((instance, e) => {
-        this.setEditorPosition({
+        this.updateEditor({
           editorRow: e.position.lineNumber,
           editorColumn: e.position.column,
         });
       });
 
       this.editor.setPosition({
-        lineNumber: this.file.editorRow,
-        column: this.file.editorColumn,
+        lineNumber: this.fileEditor.editorRow,
+        column: this.fileEditor.editorColumn,
       });
 
       // Handle File Language
-      this.setFileLanguage({
+      this.updateEditor({
         fileLanguage: this.model.language,
       });
 
@@ -354,6 +355,16 @@ export default {
       const schema = this.getJsonSchemaForPath(this.file.path);
       registerSchema(schema);
     },
+    updateEditor(data) {
+      // Looks like our model wrapper `.dispose` causes the monaco editor to emit some position changes after
+      // when disposing. We want to ignore these by only capturing editor changes that happen to the currently active
+      // file.
+      if (!this.file.active) {
+        return;
+      }
+
+      this.updateFileEditor({ path: this.file.path, data });
+    },
   },
   viewerTypes,
   FILE_VIEW_MODE_EDITOR,
@@ -369,7 +380,7 @@ export default {
           <a
             href="javascript:void(0);"
             role="button"
-            @click.prevent="setFileViewMode({ file, viewMode: $options.FILE_VIEW_MODE_EDITOR })"
+            @click.prevent="updateEditor({ viewMode: $options.FILE_VIEW_MODE_EDITOR })"
           >
             {{ __('Edit') }}
           </a>
@@ -378,7 +389,7 @@ export default {
           <a
             href="javascript:void(0);"
             role="button"
-            @click.prevent="setFileViewMode({ file, viewMode: $options.FILE_VIEW_MODE_PREVIEW })"
+            @click.prevent="updateEditor({ viewMode: $options.FILE_VIEW_MODE_PREVIEW })"
             >{{ previewMode.previewTitle }}</a
           >
         </li>

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

@@ -164,26 +164,6 @@ export const changeFileContent = ({ commit, state, getters }, { path, content })
   }
 };
 
-export const setFileLanguage = ({ getters, commit }, { fileLanguage }) => {
-  if (getters.activeFile) {
-    commit(types.SET_FILE_LANGUAGE, { file: getters.activeFile, fileLanguage });
-  }
-};
-
-export const setEditorPosition = ({ getters, commit }, { editorRow, editorColumn }) => {
-  if (getters.activeFile) {
-    commit(types.SET_FILE_POSITION, {
-      file: getters.activeFile,
-      editorRow,
-      editorColumn,
-    });
-  }
-};
-
-export const setFileViewMode = ({ commit }, { file, viewMode }) => {
-  commit(types.SET_FILE_VIEWMODE, { file, viewMode });
-};
-
 export const restoreOriginalFile = ({ dispatch, state, commit }, path) => {
   const file = state.entries[path];
   const isDestructiveDiscard = file.tempFile || file.prevPath;

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

@@ -12,6 +12,8 @@ import fileTemplates from './modules/file_templates';
 import paneModule from './modules/pane';
 import clientsideModule from './modules/clientside';
 import routerModule from './modules/router';
+import editorModule from './modules/editor';
+import { setupFileEditorsSync } from './modules/editor/setup';
 
 Vue.use(Vuex);
 
@@ -29,7 +31,14 @@ export const createStoreOptions = () => ({
     rightPane: paneModule(),
     clientside: clientsideModule(),
     router: routerModule,
+    editor: editorModule,
   },
 });
 
-export const createStore = () => new Vuex.Store(createStoreOptions());
+export const createStore = () => {
+  const store = new Vuex.Store(createStoreOptions());
+
+  setupFileEditorsSync(store);
+
+  return store;
+};

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

@@ -36,9 +36,6 @@ export const SET_FILE_ACTIVE = 'SET_FILE_ACTIVE';
 export const SET_FILE_RAW_DATA = 'SET_FILE_RAW_DATA';
 export const SET_FILE_BASE_RAW_DATA = 'SET_FILE_BASE_RAW_DATA';
 export const UPDATE_FILE_CONTENT = 'UPDATE_FILE_CONTENT';
-export const SET_FILE_LANGUAGE = 'SET_FILE_LANGUAGE';
-export const SET_FILE_POSITION = 'SET_FILE_POSITION';
-export const SET_FILE_VIEWMODE = 'SET_FILE_VIEWMODE';
 export const DISCARD_FILE_CHANGES = 'DISCARD_FILE_CHANGES';
 export const ADD_FILE_TO_CHANGED = 'ADD_FILE_TO_CHANGED';
 export const REMOVE_FILE_FROM_CHANGED = 'REMOVE_FILE_FROM_CHANGED';

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

@@ -95,17 +95,6 @@ export default {
       changed,
     });
   },
-  [types.SET_FILE_LANGUAGE](state, { file, fileLanguage }) {
-    Object.assign(state.entries[file.path], {
-      fileLanguage,
-    });
-  },
-  [types.SET_FILE_POSITION](state, { file, editorRow, editorColumn }) {
-    Object.assign(state.entries[file.path], {
-      editorRow,
-      editorColumn,
-    });
-  },
   [types.SET_FILE_MERGE_REQUEST_CHANGE](state, { file, mrChange }) {
     let diffMode = diffModes.replaced;
     if (mrChange.new_file) {
@@ -122,11 +111,6 @@ export default {
       },
     });
   },
-  [types.SET_FILE_VIEWMODE](state, { file, viewMode }) {
-    Object.assign(state.entries[file.path], {
-      viewMode,
-    });
-  },
   [types.DISCARD_FILE_CHANGES](state, path) {
     const stagedFile = state.stagedFiles.find(f => f.path === path);
     const entry = state.entries[path];

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

-import { commitActionTypes, FILE_VIEW_MODE_EDITOR } from '../constants';
+import { commitActionTypes } from '../constants';
 import {
   relativePathToAbsolute,
   isAbsolute,
@@ -25,10 +25,6 @@ export const dataStructure = () => ({
   rawPath: '',
   raw: '',
   content: '',
-  editorRow: 1,
-  editorColumn: 1,
-  fileLanguage: '',
-  viewMode: FILE_VIEW_MODE_EDITOR,
   size: 0,
   parentPath: null,
   lastOpenedAt: 0,

spec/frontend/ide/components/ide_status_list_spec.js

@@ -6,17 +6,21 @@ import TerminalSyncStatusSafe from '~/ide/components/terminal_sync/terminal_sync
 
 const TEST_FILE = {
   name: 'lorem.md',
-  editorRow: 3,
-  editorColumn: 23,
-  fileLanguage: 'markdown',
   content: 'abc\nndef',
   permalink: '/lorem.md',
 };
+const TEST_FILE_EDITOR = {
+  fileLanguage: 'markdown',
+  editorRow: 3,
+  editorColumn: 23,
+};
+const TEST_EDITOR_POSITION = `${TEST_FILE_EDITOR.editorRow}:${TEST_FILE_EDITOR.editorColumn}`;
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
 describe('ide/components/ide_status_list', () => {
+  let activeFileEditor;
   let activeFile;
   let store;
   let wrapper;
@@ -27,6 +31,14 @@ describe('ide/components/ide_status_list', () => {
       getters: {
         activeFile: () => activeFile,
       },
+      modules: {
+        editor: {
+          namespaced: true,
+          getters: {
+            activeFileEditor: () => activeFileEditor,
+          },
+        },
+      },
     });
 
     wrapper = shallowMount(IdeStatusList, {
@@ -38,6 +50,7 @@ describe('ide/components/ide_status_list', () => {
 
   beforeEach(() => {
     activeFile = TEST_FILE;
+    activeFileEditor = TEST_FILE_EDITOR;
   });
 
   afterEach(() => {
@@ -47,8 +60,6 @@ describe('ide/components/ide_status_list', () => {
     wrapper = null;
   });
 
-  const getEditorPosition = file => `${file.editorRow}:${file.editorColumn}`;
-
   describe('with regular file', () => {
     beforeEach(() => {
       createComponent();
@@ -65,11 +76,11 @@ describe('ide/components/ide_status_list', () => {
     });
 
     it('shows file editor position', () => {
-      expect(wrapper.text()).toContain(getEditorPosition(TEST_FILE));
+      expect(wrapper.text()).toContain(TEST_EDITOR_POSITION);
     });
 
     it('shows file language', () => {
-      expect(wrapper.text()).toContain(TEST_FILE.fileLanguage);
+      expect(wrapper.text()).toContain(TEST_FILE_EDITOR.fileLanguage);
     });
   });
 
@@ -81,7 +92,7 @@ describe('ide/components/ide_status_list', () => {
     });
 
     it('does not show file editor position', () => {
-      expect(wrapper.text()).not.toContain(getEditorPosition(TEST_FILE));
+      expect(wrapper.text()).not.toContain(TEST_EDITOR_POSITION);
     });
   });
 

spec/frontend/ide/components/repo_editor_spec.js

@@ -55,7 +55,6 @@ describe('RepoEditor', () => {
   beforeEach(() => {
     const f = {
       ...file('file.txt'),
-      viewMode: FILE_VIEW_MODE_EDITOR,
       content: 'hello world',
     };
 
@@ -92,6 +91,8 @@ describe('RepoEditor', () => {
   });
 
   const findEditor = () => vm.$el.querySelector('.multi-file-editor-holder');
+  const changeViewMode = viewMode =>
+    store.dispatch('editor/updateFileEditor', { path: vm.file.path, data: { viewMode } });
 
   describe('default', () => {
     beforeEach(() => {
@@ -409,7 +410,7 @@ describe('RepoEditor', () => {
     describe('when files view mode is preview', () => {
       beforeEach(done => {
         jest.spyOn(vm.editor, 'updateDimensions').mockImplementation();
-        vm.file.viewMode = FILE_VIEW_MODE_PREVIEW;
+        changeViewMode(FILE_VIEW_MODE_PREVIEW);
         vm.file.name = 'myfile.md';
         vm.file.content = 'hello world';
 
@@ -423,7 +424,7 @@ describe('RepoEditor', () => {
 
       describe('when file view mode changes to editor', () => {
         it('should update dimensions', () => {
-          vm.file.viewMode = FILE_VIEW_MODE_EDITOR;
+          changeViewMode(FILE_VIEW_MODE_EDITOR);
 
           return vm.$nextTick().then(() => {
             expect(vm.editor.updateDimensions).toHaveBeenCalled();

spec/frontend/ide/stores/mutations/file_spec.js

 import mutations from '~/ide/stores/mutations/file';
 import { createStore } from '~/ide/stores';
-import { FILE_VIEW_MODE_PREVIEW } from '~/ide/constants';
 import { file } from '../../helpers';
 
 describe('IDE store file mutations', () => {
@@ -532,17 +531,6 @@ describe('IDE store file mutations', () => {
     });
   });
 
-  describe('SET_FILE_VIEWMODE', () => {
-    it('updates file view mode', () => {
-      mutations.SET_FILE_VIEWMODE(localState, {
-        file: localFile,
-        viewMode: FILE_VIEW_MODE_PREVIEW,
-      });
-
-      expect(localFile.viewMode).toBe(FILE_VIEW_MODE_PREVIEW);
-    });
-  });
-
   describe('ADD_PENDING_TAB', () => {
     beforeEach(() => {
       const f = { ...file('openFile'), path: 'openFile', active: true, opened: true };