fix closing & reopening pending tabs

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

@@ -25,7 +25,7 @@ export default {
   },
   watch: {
     file(oldVal, newVal) {
-      if (newVal.path !== this.file.path) {
+      if (newVal.key !== this.file.key) {
         this.initMonaco();
       }
     },
@@ -36,7 +36,7 @@ export default {
       this.editor.updateDimensions();
     },
     viewer() {
-      this.createEditorInstance();
+      // this.createEditorInstance();
     },
   },
   beforeDestroy() {
@@ -70,7 +70,9 @@ export default {
 
       this.getRawFileData(this.file)
         .then(() => {
-          const viewerPromise = this.delayViewerUpdated ? this.updateViewer('editor') : Promise.resolve();
+          const viewerPromise = this.delayViewerUpdated
+            ? this.updateViewer('editor')
+            : Promise.resolve();
 
           return viewerPromise;
         })
@@ -78,8 +80,15 @@ export default {
           this.updateDelayViewerUpdated(false);
           this.createEditorInstance();
         })
-        .catch((err) => {
-          flash('Error setting up monaco. Please try again.', 'alert', document, null, false, true);
+        .catch(err => {
+          flash(
+            'Error setting up monaco. Please try again.',
+            'alert',
+            document,
+            null,
+            false,
+            true,
+          );
           throw err;
         });
     },
@@ -103,7 +112,7 @@ export default {
 
       this.editor.attachModel(this.model);
 
-      this.model.onChange((model) => {
+      this.model.onChange(model => {
         const { file } = model;
 
         if (file.active) {

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

@@ -63,11 +63,7 @@ export default {
         this.toggleTreeOpen(this.file.path);
       }
 
-      const delayPromise = this.file.changed
-        ? Promise.resolve()
-        : this.updateDelayViewerUpdated(true);
-
-      return delayPromise.then(() => {
+      return this.updateDelayViewerUpdated(true).then(() => {
         router.push(`/project${this.file.url}`);
       });
     },

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

@@ -35,7 +35,8 @@ export default {
   updated() {
     if (!this.$refs.tabsScroller) return;
 
-    this.showShadow = this.$refs.tabsScroller.scrollWidth > this.$refs.tabsScroller.offsetWidth;
+    this.showShadow =
+      this.$refs.tabsScroller.scrollWidth > this.$refs.tabsScroller.offsetWidth;
   },
   methods: {
     ...mapActions(['updateViewer', 'removePendingTab']),
@@ -60,7 +61,7 @@ export default {
     >
       <repo-tab
         v-for="tab in files"
-        :key="`${tab.key}${tab.pending ? '-pending' : ''}`"
+        :key="tab.key"
         :tab="tab"
       />
     </ul>

app/assets/javascripts/ide/lib/common/model.js

@@ -13,12 +13,12 @@ export default class Model {
       (this.originalModel = this.monaco.editor.createModel(
         this.file.raw,
         undefined,
-        new this.monaco.Uri(null, null, `original/${this.file.path}`),
+        new this.monaco.Uri(null, null, `original/${this.file.key}`),
       )),
       (this.model = this.monaco.editor.createModel(
         this.content,
         undefined,
-        new this.monaco.Uri(null, null, this.file.path),
+        new this.monaco.Uri(null, null, this.file.key),
       )),
     );
 
@@ -27,7 +27,7 @@ export default class Model {
     this.updateContent = this.updateContent.bind(this);
     this.dispose = this.dispose.bind(this);
 
-    eventHub.$on(`editor.update.model.dispose.${this.file.path}`, this.dispose);
+    eventHub.$on(`editor.update.model.dispose.${this.file.key}`, this.dispose);
     eventHub.$on(
       `editor.update.model.content.${this.file.path}`,
       this.updateContent,
@@ -47,7 +47,7 @@ export default class Model {
   }
 
   get path() {
-    return this.file.path;
+    return this.file.key;
   }
 
   getModel() {
@@ -64,7 +64,7 @@ export default class Model {
 
   onChange(cb) {
     this.events.set(
-      this.path,
+      this.key,
       this.disposable.add(this.model.onDidChangeContent(e => cb(this, e))),
     );
   }
@@ -78,12 +78,9 @@ export default class Model {
     this.disposable.dispose();
     this.events.clear();
 
+    eventHub.$off(`editor.update.model.dispose.${this.file.key}`, this.dispose);
     eventHub.$off(
-      `editor.update.model.dispose.${this.file.path}`,
-      this.dispose,
-    );
-    eventHub.$off(
-      `editor.update.model.content.${this.file.path}`,
+      `editor.update.model.content.${this.file.key}`,
       this.updateContent,
     );
   }

app/assets/javascripts/ide/lib/common/model_manager.js

@@ -9,25 +9,25 @@ export default class ModelManager {
     this.models = new Map();
   }
 
-  hasCachedModel(path) {
-    return this.models.has(path);
+  hasCachedModel(key) {
+    return this.models.has(key);
   }
 
-  getModel(path) {
-    return this.models.get(path);
+  getModel(key) {
+    return this.models.get(key);
   }
 
   addModel(file) {
-    if (this.hasCachedModel(file.path)) {
-      return this.getModel(file.path);
+    if (this.hasCachedModel(file.key)) {
+      return this.getModel(file.key);
     }
 
     const model = new Model(this.monaco, file);
-    this.models.set(model.path, model);
+    this.models.set(model.key, model);
     this.disposable.add(model);
 
     eventHub.$on(
-      `editor.update.model.dispose.${file.path}`,
+      `editor.update.model.dispose.${file.key}`,
       this.removeCachedModel.bind(this, file),
     );
 
@@ -35,10 +35,10 @@ export default class ModelManager {
   }
 
   removeCachedModel(file) {
-    this.models.delete(file.path);
+    this.models.delete(file.key);
 
     eventHub.$off(
-      `editor.update.model.dispose.${file.path}`,
+      `editor.update.model.dispose.${file.key}`,
       this.removeCachedModel,
     );
   }

app/assets/javascripts/ide/lib/diff/controller.js

@@ -3,7 +3,7 @@ import { throttle } from 'underscore';
 import DirtyDiffWorker from './diff_worker';
 import Disposable from '../common/disposable';
 
-export const getDiffChangeType = (change) => {
+export const getDiffChangeType = change => {
   if (change.modified) {
     return 'modified';
   } else if (change.added) {
@@ -16,15 +16,12 @@ export const getDiffChangeType = (change) => {
 };
 
 export const getDecorator = change => ({
-  range: new monaco.Range(
-    change.lineNumber,
-    1,
-    change.endLineNumber,
-    1,
-  ),
+  range: new monaco.Range(change.lineNumber, 1, change.endLineNumber, 1),
   options: {
     isWholeLine: true,
-    linesDecorationsClassName: `dirty-diff dirty-diff-${getDiffChangeType(change)}`,
+    linesDecorationsClassName: `dirty-diff dirty-diff-${getDiffChangeType(
+      change,
+    )}`,
   },
 });
 
@@ -47,7 +44,7 @@ export default class DirtyDiffController {
 
   computeDiff(model) {
     this.dirtyDiffWorker.postMessage({
-      path: model.path,
+      key: model.key,
       originalContent: model.getOriginalModel().getValue(),
       newContent: model.getModel().getValue(),
     });
@@ -59,7 +56,7 @@ export default class DirtyDiffController {
 
   decorate({ data }) {
     const decorations = data.changes.map(change => getDecorator(change));
-    const model = this.modelManager.getModel(data.path);
+    const model = this.modelManager.getModel(data.key);
     this.decorationsController.addDecorations(model, 'dirtyDiff', decorations);
   }
 

app/assets/javascripts/ide/lib/diff/diff_worker.js

 import { computeDiff } from './diff';
 
-self.addEventListener('message', (e) => {
+self.addEventListener('message', e => {
   const data = e.data;
 
   self.postMessage({
-    path: data.path,
+    key: data.key,
     changes: computeDiff(data.originalContent, data.newContent),
   });
 });

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

@@ -19,7 +19,8 @@ export const closeFile = ({ commit, state, getters, dispatch }, file) => {
     commit(types.SET_FILE_ACTIVE, { path, active: false });
 
     if (getters.tabs.length > 0 && fileWasActive) {
-      const nextIndexToOpen = indexOfClosedFile === 0 ? 0 : indexOfClosedFile - 1;
+      const nextIndexToOpen =
+        indexOfClosedFile === 0 ? 0 : indexOfClosedFile - 1;
       const nextFileToOpen = state.openFiles[nextIndexToOpen];
 
       router.push(`/project${nextFileToOpen.url}`);
@@ -28,7 +29,7 @@ export const closeFile = ({ commit, state, getters, dispatch }, file) => {
     }
   }
 
-  eventHub.$emit(`editor.update.model.dispose.${file.path}`);
+  eventHub.$emit(`editor.update.model.dispose.${file.key}`);
 };
 
 export const setFileActive = ({ commit, state, getters, dispatch }, path) => {
@@ -71,7 +72,14 @@ export const getFileData = ({ state, commit, dispatch }, file) => {
     })
     .catch(() => {
       commit(types.TOGGLE_LOADING, { entry: file });
-      flash('Error loading file data. Please try again.', 'alert', document, null, false, true);
+      flash(
+        'Error loading file data. Please try again.',
+        'alert',
+        document,
+        null,
+        false,
+        true,
+      );
     });
 };
 
@@ -82,7 +90,14 @@ export const getRawFileData = ({ commit, dispatch }, file) =>
       commit(types.SET_FILE_RAW_DATA, { file, raw });
     })
     .catch(() =>
-      flash('Error loading file content. Please try again.', 'alert', document, null, false, true),
+      flash(
+        'Error loading file content. Please try again.',
+        'alert',
+        document,
+        null,
+        false,
+        true,
+      ),
     );
 
 export const changeFileContent = ({ state, commit }, { path, content }) => {
@@ -110,7 +125,10 @@ export const setFileEOL = ({ getters, commit }, { eol }) => {
   }
 };
 
-export const setEditorPosition = ({ getters, commit }, { editorRow, editorColumn }) => {
+export const setEditorPosition = (
+  { getters, commit },
+  { editorRow, editorColumn },
+) => {
   if (getters.activeFile) {
     commit(types.SET_FILE_POSITION, {
       file: getters.activeFile,
@@ -141,4 +159,6 @@ export const openPendingTab = ({ commit, state }, file) => {
 
 export const removePendingTab = ({ commit }, file) => {
   commit(types.REMOVE_PENDING_TAB, file);
+
+  eventHub.$emit(`editor.update.model.dispose.${file.key}`);
 };

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

@@ -93,6 +93,7 @@ export default {
         ...file,
         active: true,
         pending: true,
+        key: `pending-${file.key}`,
       }),
     });
   },