From 002cc923898335cbd3a1068d914fb09696e7f8e5 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 22 Mar 2018 16:45:31 +0000
Subject: Added pending tabs to IDE

Pending tabs are normal tabs that are opened from the right sidebar.
They are opened in diff mode and when changed to edit mode they get
closed
& the actual file gets opened.
---
 .../ide/components/commit_sidebar/list_item.vue    |  56 ++++++-----
 app/assets/javascripts/ide/components/ide.vue      |  86 ++++++++---------
 app/assets/javascripts/ide/components/repo_tab.vue | 103 +++++++++++----------
 .../javascripts/ide/components/repo_tabs.vue       |  67 +++++++-------
 app/assets/javascripts/ide/stores/actions.js       |  10 +-
 app/assets/javascripts/ide/stores/actions/file.js  |  56 +++++------
 app/assets/javascripts/ide/stores/getters.js       |   8 +-
 .../javascripts/ide/stores/mutation_types.js       |   3 +
 .../javascripts/ide/stores/mutations/file.js       |  14 +++
 app/assets/javascripts/ide/stores/state.js         |   1 +
 app/assets/stylesheets/pages/repo.scss             |   8 +-
 11 files changed, 209 insertions(+), 203 deletions(-)

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index 18934af004a..e443bd4e3fa 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -1,38 +1,36 @@
 <script>
-  import { mapActions } from 'vuex';
-  import icon from '~/vue_shared/components/icon.vue';
-  import router from '../../ide_router';
+import { mapActions } from 'vuex';
+import icon from '~/vue_shared/components/icon.vue';
+import router from '../../ide_router';
 
-  export default {
-    components: {
-      icon,
+export default {
+  components: {
+    icon,
+  },
+  props: {
+    file: {
+      type: Object,
+      required: true,
     },
-    props: {
-      file: {
-        type: Object,
-        required: true,
-      },
+  },
+  computed: {
+    iconName() {
+      return this.file.tempFile ? 'file-addition' : 'file-modified';
     },
-    computed: {
-      iconName() {
-        return this.file.tempFile ? 'file-addition' : 'file-modified';
-      },
-      iconClass() {
-        return `multi-file-${this.file.tempFile ? 'addition' : 'modified'} append-right-8`;
-      },
+    iconClass() {
+      return `multi-file-${this.file.tempFile ? 'addition' : 'modified'} append-right-8`;
     },
-    methods: {
-      ...mapActions([
-        'discardFileChanges',
-        'updateViewer',
-      ]),
-      openFileInEditor(file) {
-        this.updateViewer('diff');
-
-        router.push(`/project${file.url}`);
-      },
+  },
+  methods: {
+    ...mapActions(['discardFileChanges', 'updateViewer', 'openPendingTab']),
+    openFileInEditor(file) {
+      return this.updateViewer('diff').then(() => {
+        this.openPendingTab(file);
+        router.push(`/project/${file.projectId}/tree/master/`);
+      });
     },
-  };
+  },
+};
 </script>
 
 <template>
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index 015e750525a..7048f5fab43 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -1,51 +1,51 @@
 <script>
-  import { mapState, mapGetters } from 'vuex';
-  import ideSidebar from './ide_side_bar.vue';
-  import ideContextbar from './ide_context_bar.vue';
-  import repoTabs from './repo_tabs.vue';
-  import repoFileButtons from './repo_file_buttons.vue';
-  import ideStatusBar from './ide_status_bar.vue';
-  import repoEditor from './repo_editor.vue';
+import { mapState, mapGetters } from 'vuex';
+import ideSidebar from './ide_side_bar.vue';
+import ideContextbar from './ide_context_bar.vue';
+import repoTabs from './repo_tabs.vue';
+import repoFileButtons from './repo_file_buttons.vue';
+import ideStatusBar from './ide_status_bar.vue';
+import repoEditor from './repo_editor.vue';
 
-  export default {
-    components: {
-      ideSidebar,
-      ideContextbar,
-      repoTabs,
-      repoFileButtons,
-      ideStatusBar,
-      repoEditor,
+export default {
+  components: {
+    ideSidebar,
+    ideContextbar,
+    repoTabs,
+    repoFileButtons,
+    ideStatusBar,
+    repoEditor,
+  },
+  props: {
+    emptyStateSvgPath: {
+      type: String,
+      required: true,
     },
-    props: {
-      emptyStateSvgPath: {
-        type: String,
-        required: true,
-      },
-      noChangesStateSvgPath: {
-        type: String,
-        required: true,
-      },
-      committedStateSvgPath: {
-        type: String,
-        required: true,
-      },
+    noChangesStateSvgPath: {
+      type: String,
+      required: true,
     },
-    computed: {
-      ...mapState(['changedFiles', 'openFiles', 'viewer']),
-      ...mapGetters(['activeFile', 'hasChanges']),
+    committedStateSvgPath: {
+      type: String,
+      required: true,
     },
-    mounted() {
-      const returnValue = 'Are you sure you want to lose unsaved changes?';
-      window.onbeforeunload = e => {
-        if (!this.changedFiles.length) return undefined;
+  },
+  computed: {
+    ...mapState(['changedFiles', 'openFiles', 'viewer']),
+    ...mapGetters(['activeFile', 'hasChanges', 'tabs']),
+  },
+  mounted() {
+    const returnValue = 'Are you sure you want to lose unsaved changes?';
+    window.onbeforeunload = e => {
+      if (!this.changedFiles.length) return undefined;
 
-        Object.assign(e, {
-          returnValue,
-        });
-        return returnValue;
-      };
-    },
-  };
+      Object.assign(e, {
+        returnValue,
+      });
+      return returnValue;
+    };
+  },
+};
 </script>
 
 <template>
@@ -60,7 +60,7 @@
         v-if="activeFile"
       >
         <repo-tabs
-          :files="openFiles"
+          :files="tabs"
           :viewer="viewer"
           :has-changes="hasChanges"
         />
diff --git a/app/assets/javascripts/ide/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue
index c337bc813e6..b36fb6b4830 100644
--- a/app/assets/javascripts/ide/components/repo_tab.vue
+++ b/app/assets/javascripts/ide/components/repo_tab.vue
@@ -1,60 +1,58 @@
 <script>
-  import { mapActions } from 'vuex';
+import { mapActions } from 'vuex';
 
-  import fileIcon from '~/vue_shared/components/file_icon.vue';
-  import icon from '~/vue_shared/components/icon.vue';
-  import fileStatusIcon from './repo_file_status_icon.vue';
-  import changedFileIcon from './changed_file_icon.vue';
+import fileIcon from '~/vue_shared/components/file_icon.vue';
+import icon from '~/vue_shared/components/icon.vue';
+import fileStatusIcon from './repo_file_status_icon.vue';
+import changedFileIcon from './changed_file_icon.vue';
 
-  export default {
-    components: {
-      fileStatusIcon,
-      fileIcon,
-      icon,
-      changedFileIcon,
+export default {
+  components: {
+    fileStatusIcon,
+    fileIcon,
+    icon,
+    changedFileIcon,
+  },
+  props: {
+    tab: {
+      type: Object,
+      required: true,
     },
-    props: {
-      tab: {
-        type: Object,
-        required: true,
-      },
+  },
+  data() {
+    return {
+      tabMouseOver: false,
+    };
+  },
+  computed: {
+    closeLabel() {
+      if (this.tab.changed || this.tab.tempFile) {
+        return `${this.tab.name} changed`;
+      }
+      return `Close ${this.tab.name}`;
     },
-    data() {
-      return {
-        tabMouseOver: false,
-      };
-    },
-    computed: {
-      closeLabel() {
-        if (this.tab.changed || this.tab.tempFile) {
-          return `${this.tab.name} changed`;
-        }
-        return `Close ${this.tab.name}`;
-      },
-      showChangedIcon() {
-        return this.tab.changed ? !this.tabMouseOver : false;
-      },
+    showChangedIcon() {
+      return this.tab.changed ? !this.tabMouseOver : false;
     },
+  },
 
-    methods: {
-      ...mapActions([
-        'closeFile',
-      ]),
-      clickFile(tab) {
-        this.$router.push(`/project${tab.url}`);
-      },
-      mouseOverTab() {
-        if (this.tab.changed) {
-          this.tabMouseOver = true;
-        }
-      },
-      mouseOutTab() {
-        if (this.tab.changed) {
-          this.tabMouseOver = false;
-        }
-      },
+  methods: {
+    ...mapActions(['closeFile']),
+    clickFile(tab) {
+      this.$router.push(`/project${tab.url}`);
+    },
+    mouseOverTab() {
+      if (this.tab.changed) {
+        this.tabMouseOver = true;
+      }
+    },
+    mouseOutTab() {
+      if (this.tab.changed) {
+        this.tabMouseOver = false;
+      }
     },
-  };
+  },
+};
 </script>
 
 <template>
@@ -66,7 +64,7 @@
     <button
       type="button"
       class="multi-file-tab-close"
-      @click.stop.prevent="closeFile(tab.path)"
+      @click.stop.prevent="closeFile(tab)"
       :aria-label="closeLabel"
     >
       <icon
@@ -82,7 +80,10 @@
 
     <div
       class="multi-file-tab"
-      :class="{active : tab.active }"
+      :class="{
+        active: tab.active,
+        pending: tab.pending
+      }"
       :title="tab.url"
     >
       <file-icon
diff --git a/app/assets/javascripts/ide/components/repo_tabs.vue b/app/assets/javascripts/ide/components/repo_tabs.vue
index 8ea64ddf84a..dcb2ff80ce1 100644
--- a/app/assets/javascripts/ide/components/repo_tabs.vue
+++ b/app/assets/javascripts/ide/components/repo_tabs.vue
@@ -1,42 +1,41 @@
 <script>
-  import { mapActions } from 'vuex';
-  import RepoTab from './repo_tab.vue';
-  import EditorMode from './editor_mode_dropdown.vue';
+import { mapActions } from 'vuex';
+import RepoTab from './repo_tab.vue';
+import EditorMode from './editor_mode_dropdown.vue';
 
-  export default {
-    components: {
-      RepoTab,
-      EditorMode,
+export default {
+  components: {
+    RepoTab,
+    EditorMode,
+  },
+  props: {
+    files: {
+      type: Array,
+      required: true,
     },
-    props: {
-      files: {
-        type: Array,
-        required: true,
-      },
-      viewer: {
-        type: String,
-        required: true,
-      },
-      hasChanges: {
-        type: Boolean,
-        required: true,
-      },
+    viewer: {
+      type: String,
+      required: true,
     },
-    data() {
-      return {
-        showShadow: false,
-      };
+    hasChanges: {
+      type: Boolean,
+      required: true,
     },
-    updated() {
-      if (!this.$refs.tabsScroller) return;
+  },
+  data() {
+    return {
+      showShadow: false,
+    };
+  },
+  updated() {
+    if (!this.$refs.tabsScroller) return;
 
-      this.showShadow =
-        this.$refs.tabsScroller.scrollWidth > this.$refs.tabsScroller.offsetWidth;
-    },
-    methods: {
-      ...mapActions(['updateViewer']),
-    },
-  };
+    this.showShadow = this.$refs.tabsScroller.scrollWidth > this.$refs.tabsScroller.offsetWidth;
+  },
+  methods: {
+    ...mapActions(['updateViewer']),
+  },
+};
 </script>
 
 <template>
@@ -47,7 +46,7 @@
     >
       <repo-tab
         v-for="tab in files"
-        :key="tab.key"
+        :key="`${tab.key}${tab.pending ? '-pending' : ''}`"
         :tab="tab"
       />
     </ul>
diff --git a/app/assets/javascripts/ide/stores/actions.js b/app/assets/javascripts/ide/stores/actions.js
index 7e920aa9f30..1300ea8e520 100644
--- a/app/assets/javascripts/ide/stores/actions.js
+++ b/app/assets/javascripts/ide/stores/actions.js
@@ -6,8 +6,7 @@ import FilesDecoratorWorker from './workers/files_decorator_worker';
 
 export const redirectToUrl = (_, url) => visitUrl(url);
 
-export const setInitialData = ({ commit }, data) =>
-  commit(types.SET_INITIAL_DATA, data);
+export const setInitialData = ({ commit }, data) => commit(types.SET_INITIAL_DATA, data);
 
 export const discardAllChanges = ({ state, commit, dispatch }) => {
   state.changedFiles.forEach(file => {
@@ -43,14 +42,11 @@ export const createTempEntry = (
 ) =>
   new Promise(resolve => {
     const worker = new FilesDecoratorWorker();
-    const fullName =
-      name.slice(-1) !== '/' && type === 'tree' ? `${name}/` : name;
+    const fullName = name.slice(-1) !== '/' && type === 'tree' ? `${name}/` : name;
 
     if (state.entries[name]) {
       flash(
-        `The name "${name
-          .split('/')
-          .pop()}" is already taken in this directory.`,
+        `The name "${name.split('/').pop()}" is already taken in this directory.`,
         'alert',
         document,
         null,
diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js
index ddc4b757bf9..5a39bfb02c4 100644
--- a/app/assets/javascripts/ide/stores/actions/file.js
+++ b/app/assets/javascripts/ide/stores/actions/file.js
@@ -6,21 +6,26 @@ import * as types from '../mutation_types';
 import router from '../../ide_router';
 import { setPageTitle } from '../utils';
 
-export const closeFile = ({ commit, state, getters, dispatch }, path) => {
-  const indexOfClosedFile = state.openFiles.findIndex(f => f.path === path);
-  const file = state.entries[path];
-  const fileWasActive = file.active;
+export const closeFile = ({ commit, state, getters, dispatch }, file) => {
+  const path = file.path;
+
+  if (file.pending) {
+    commit(types.REMOVE_PENDING_TAB, file);
+  } else {
+    const indexOfClosedFile = state.openFiles.findIndex(f => f.path === path);
+    const fileWasActive = file.active;
 
-  commit(types.TOGGLE_FILE_OPEN, path);
-  commit(types.SET_FILE_ACTIVE, { path, active: false });
+    commit(types.TOGGLE_FILE_OPEN, path);
+    commit(types.SET_FILE_ACTIVE, { path, active: false });
 
-  if (state.openFiles.length > 0 && fileWasActive) {
-    const nextIndexToOpen = indexOfClosedFile === 0 ? 0 : indexOfClosedFile - 1;
-    const nextFileToOpen = state.entries[state.openFiles[nextIndexToOpen].path];
+    if (state.openFiles.length > 0 && fileWasActive) {
+      const nextIndexToOpen = indexOfClosedFile === 0 ? 0 : indexOfClosedFile - 1;
+      const nextFileToOpen = state.entries[state.openFiles[nextIndexToOpen].path];
 
-    router.push(`/project${nextFileToOpen.url}`);
-  } else if (!state.openFiles.length) {
-    router.push(`/project/${file.projectId}/tree/${file.branchId}/`);
+      router.push(`/project${nextFileToOpen.url}`);
+    } else if (!state.openFiles.length) {
+      router.push(`/project/${file.projectId}/tree/${file.branchId}/`);
+    }
   }
 
   eventHub.$emit(`editor.update.model.dispose.${file.path}`);
@@ -66,14 +71,7 @@ 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);
     });
 };
 
@@ -84,14 +82,7 @@ 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 }) => {
@@ -119,10 +110,7 @@ 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,
@@ -144,3 +132,7 @@ export const discardFileChanges = ({ state, commit }, path) => {
 
   eventHub.$emit(`editor.update.model.content.${file.path}`, file.raw);
 };
+
+export const openPendingTab = ({ commit }, file) => {
+  commit(types.ADD_PENDING_TAB, file);
+};
diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js
index eba325a31df..28006d3ddf8 100644
--- a/app/assets/javascripts/ide/stores/getters.js
+++ b/app/assets/javascripts/ide/stores/getters.js
@@ -1,10 +1,10 @@
-export const activeFile = state =>
-  state.openFiles.find(file => file.active) || null;
+export const tabs = state => state.openFiles.concat(state.pendingTabs);
+
+export const activeFile = state => tabs(state).find(file => file.active) || null;
 
 export const addedFiles = state => state.changedFiles.filter(f => f.tempFile);
 
-export const modifiedFiles = state =>
-  state.changedFiles.filter(f => !f.tempFile);
+export const modifiedFiles = state => state.changedFiles.filter(f => !f.tempFile);
 
 export const projectsWithTrees = state =>
   Object.keys(state.projects).map(projectId => {
diff --git a/app/assets/javascripts/ide/stores/mutation_types.js b/app/assets/javascripts/ide/stores/mutation_types.js
index e28f190897c..fa2fbaf8683 100644
--- a/app/assets/javascripts/ide/stores/mutation_types.js
+++ b/app/assets/javascripts/ide/stores/mutation_types.js
@@ -41,3 +41,6 @@ export const SET_ENTRIES = 'SET_ENTRIES';
 export const CREATE_TMP_ENTRY = 'CREATE_TMP_ENTRY';
 export const UPDATE_VIEWER = 'UPDATE_VIEWER';
 export const UPDATE_DELAY_VIEWER_CHANGE = 'UPDATE_DELAY_VIEWER_CHANGE';
+
+export const ADD_PENDING_TAB = 'ADD_PENDING_TAB';
+export const REMOVE_PENDING_TAB = 'REMOVE_PENDING_TAB';
diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index 2500f13db7c..915126f10eb 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -80,4 +80,18 @@ export default {
       changed,
     });
   },
+  [types.ADD_PENDING_TAB](state, file) {
+    Object.assign(state, {
+      pendingTabs: state.pendingTabs.concat({
+        ...file,
+        active: true,
+        pending: true,
+      }),
+    });
+  },
+  [types.REMOVE_PENDING_TAB](state, file) {
+    Object.assign(state, {
+      pendingTabs: state.pendingTabs.filter(f => f.path !== file.path),
+    });
+  },
 };
diff --git a/app/assets/javascripts/ide/stores/state.js b/app/assets/javascripts/ide/stores/state.js
index 6110f54951c..52a2400ec42 100644
--- a/app/assets/javascripts/ide/stores/state.js
+++ b/app/assets/javascripts/ide/stores/state.js
@@ -16,4 +16,5 @@ export default () => ({
   entries: {},
   viewer: 'editor',
   delayViewerUpdated: false,
+  pendingTabs: [],
 });
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 65046f6665e..94aa5130f28 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -177,6 +177,10 @@
     background-color: $white-light;
     border-bottom-color: $white-light;
   }
+
+  &.pending {
+    font-style: italic;
+  }
 }
 
 .multi-file-tab-close {
@@ -720,9 +724,7 @@
     }
 
     .ide-view {
-      height: calc(
-        100vh - #{$header-height + $performance-bar-height + $flash-height}
-      );
+      height: calc(100vh - #{$header-height + $performance-bar-height + $flash-height});
     }
   }
 }
-- 
cgit v1.2.1


From e2f273935e33329684ea88f02975f8a37548cfe5 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 22 Mar 2018 17:19:44 +0000
Subject: toggling viewer mode closes the pending tab

then opens the file in edit mode
---
 .../ide/components/commit_sidebar/list_item.vue        |  2 --
 app/assets/javascripts/ide/components/ide.vue          |  1 +
 app/assets/javascripts/ide/components/repo_tabs.vue    | 18 ++++++++++++++++--
 app/assets/javascripts/ide/stores/actions/file.js      | 12 +++++++++---
 app/assets/javascripts/ide/stores/mutations/file.js    |  7 +++++++
 5 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index e443bd4e3fa..421be7fb3cb 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -1,7 +1,6 @@
 <script>
 import { mapActions } from 'vuex';
 import icon from '~/vue_shared/components/icon.vue';
-import router from '../../ide_router';
 
 export default {
   components: {
@@ -26,7 +25,6 @@ export default {
     openFileInEditor(file) {
       return this.updateViewer('diff').then(() => {
         this.openPendingTab(file);
-        router.push(`/project/${file.projectId}/tree/master/`);
       });
     },
   },
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index 7048f5fab43..8502bbf4157 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -60,6 +60,7 @@ export default {
         v-if="activeFile"
       >
         <repo-tabs
+          :active-file="activeFile"
           :files="tabs"
           :viewer="viewer"
           :has-changes="hasChanges"
diff --git a/app/assets/javascripts/ide/components/repo_tabs.vue b/app/assets/javascripts/ide/components/repo_tabs.vue
index dcb2ff80ce1..200670e1565 100644
--- a/app/assets/javascripts/ide/components/repo_tabs.vue
+++ b/app/assets/javascripts/ide/components/repo_tabs.vue
@@ -2,6 +2,7 @@
 import { mapActions } from 'vuex';
 import RepoTab from './repo_tab.vue';
 import EditorMode from './editor_mode_dropdown.vue';
+import router from '../ide_router';
 
 export default {
   components: {
@@ -9,6 +10,10 @@ export default {
     EditorMode,
   },
   props: {
+    activeFile: {
+      type: Object,
+      required: true,
+    },
     files: {
       type: Array,
       required: true,
@@ -33,7 +38,16 @@ export default {
     this.showShadow = this.$refs.tabsScroller.scrollWidth > this.$refs.tabsScroller.offsetWidth;
   },
   methods: {
-    ...mapActions(['updateViewer']),
+    ...mapActions(['updateViewer', 'removePendingTab']),
+    openFileViewer(viewer) {
+      this.updateViewer(viewer);
+
+      if (this.activeFile.pending) {
+        this.removePendingTab(this.activeFile).then(() => {
+          router.push(`/project${this.activeFile.url}`);
+        });
+      }
+    },
   },
 };
 </script>
@@ -54,7 +68,7 @@ export default {
       :viewer="viewer"
       :show-shadow="showShadow"
       :has-changes="hasChanges"
-      @click="updateViewer"
+      @click="openFileViewer"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js
index 5a39bfb02c4..755e8e14989 100644
--- a/app/assets/javascripts/ide/stores/actions/file.js
+++ b/app/assets/javascripts/ide/stores/actions/file.js
@@ -18,9 +18,9 @@ export const closeFile = ({ commit, state, getters, dispatch }, file) => {
     commit(types.TOGGLE_FILE_OPEN, path);
     commit(types.SET_FILE_ACTIVE, { path, active: false });
 
-    if (state.openFiles.length > 0 && fileWasActive) {
+    if (getters.tabs.length > 0 && fileWasActive) {
       const nextIndexToOpen = indexOfClosedFile === 0 ? 0 : indexOfClosedFile - 1;
-      const nextFileToOpen = state.entries[state.openFiles[nextIndexToOpen].path];
+      const nextFileToOpen = state.openFiles[nextIndexToOpen];
 
       router.push(`/project${nextFileToOpen.url}`);
     } else if (!state.openFiles.length) {
@@ -133,6 +133,12 @@ export const discardFileChanges = ({ state, commit }, path) => {
   eventHub.$emit(`editor.update.model.content.${file.path}`, file.raw);
 };
 
-export const openPendingTab = ({ commit }, file) => {
+export const openPendingTab = ({ commit, state }, file) => {
   commit(types.ADD_PENDING_TAB, file);
+
+  router.push(`/project/${file.projectId}/tree/${state.currentBranchId}/`);
+};
+
+export const removePendingTab = ({ commit }, file) => {
+  commit(types.REMOVE_PENDING_TAB, file);
 };
diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index 915126f10eb..e9945055e6f 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -5,6 +5,13 @@ export default {
     Object.assign(state.entries[path], {
       active,
     });
+
+    Object.assign(state, {
+      pendingTabs: state.pendingTabs.map(f => ({
+        ...f,
+        active: false,
+      })),
+    });
   },
   [types.TOGGLE_FILE_OPEN](state, path) {
     Object.assign(state.entries[path], {
-- 
cgit v1.2.1


From c439548830c523e961797820c3ad1221485ebc61 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 23 Mar 2018 08:41:43 +0000
Subject: fix closing & reopening pending tabs

---
 .../javascripts/ide/components/repo_editor.vue     | 21 ++++++++++-----
 .../javascripts/ide/components/repo_file.vue       |  6 +----
 .../javascripts/ide/components/repo_tabs.vue       |  5 ++--
 app/assets/javascripts/ide/lib/common/model.js     | 17 +++++-------
 .../javascripts/ide/lib/common/model_manager.js    | 20 +++++++--------
 app/assets/javascripts/ide/lib/diff/controller.js  | 17 +++++-------
 app/assets/javascripts/ide/lib/diff/diff_worker.js |  4 +--
 app/assets/javascripts/ide/stores/actions/file.js  | 30 ++++++++++++++++++----
 .../javascripts/ide/stores/mutations/file.js       |  1 +
 9 files changed, 71 insertions(+), 50 deletions(-)

diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index e73d1ce839f..7a2e92f6246 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/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) {
diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index 297b9c2628f..fedb13339b8 100644
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/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}`);
       });
     },
diff --git a/app/assets/javascripts/ide/components/repo_tabs.vue b/app/assets/javascripts/ide/components/repo_tabs.vue
index 200670e1565..b7a3e13d86f 100644
--- a/app/assets/javascripts/ide/components/repo_tabs.vue
+++ b/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>
diff --git a/app/assets/javascripts/ide/lib/common/model.js b/app/assets/javascripts/ide/lib/common/model.js
index 73cd684351c..ff720fc0174 100644
--- a/app/assets/javascripts/ide/lib/common/model.js
+++ b/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,
     );
   }
diff --git a/app/assets/javascripts/ide/lib/common/model_manager.js b/app/assets/javascripts/ide/lib/common/model_manager.js
index 57d5e59a88b..12f1389f559 100644
--- a/app/assets/javascripts/ide/lib/common/model_manager.js
+++ b/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,
     );
   }
diff --git a/app/assets/javascripts/ide/lib/diff/controller.js b/app/assets/javascripts/ide/lib/diff/controller.js
index b136545ad11..0447a1d13f8 100644
--- a/app/assets/javascripts/ide/lib/diff/controller.js
+++ b/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);
   }
 
diff --git a/app/assets/javascripts/ide/lib/diff/diff_worker.js b/app/assets/javascripts/ide/lib/diff/diff_worker.js
index e74c4046330..9476d35f9e1 100644
--- a/app/assets/javascripts/ide/lib/diff/diff_worker.js
+++ b/app/assets/javascripts/ide/lib/diff/diff_worker.js
@@ -1,10 +1,10 @@
 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),
   });
 });
diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js
index 755e8e14989..dbb42154ec5 100644
--- a/app/assets/javascripts/ide/stores/actions/file.js
+++ b/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}`);
 };
diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index e9945055e6f..06fd55bfa83 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -93,6 +93,7 @@ export default {
         ...file,
         active: true,
         pending: true,
+        key: `pending-${file.key}`,
       }),
     });
   },
-- 
cgit v1.2.1


From 5dbb7a2519d6eaed634aeee6c78502941ff527fb Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 23 Mar 2018 09:03:45 +0000
Subject: fixed opening next tab being a pending tab clears any active files
 when opening pending tab

---
 app/assets/javascripts/ide/stores/actions/file.js  | 14 +++++++---
 .../javascripts/ide/stores/mutations/file.js       | 31 ++++++++++++++++------
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js
index dbb42154ec5..8c41782cfb2 100644
--- a/app/assets/javascripts/ide/stores/actions/file.js
+++ b/app/assets/javascripts/ide/stores/actions/file.js
@@ -12,7 +12,7 @@ export const closeFile = ({ commit, state, getters, dispatch }, file) => {
   if (file.pending) {
     commit(types.REMOVE_PENDING_TAB, file);
   } else {
-    const indexOfClosedFile = state.openFiles.findIndex(f => f.path === path);
+    const indexOfClosedFile = getters.tabs.findIndex(f => f.path === path);
     const fileWasActive = file.active;
 
     commit(types.TOGGLE_FILE_OPEN, path);
@@ -21,9 +21,13 @@ export const closeFile = ({ commit, state, getters, dispatch }, file) => {
     if (getters.tabs.length > 0 && fileWasActive) {
       const nextIndexToOpen =
         indexOfClosedFile === 0 ? 0 : indexOfClosedFile - 1;
-      const nextFileToOpen = state.openFiles[nextIndexToOpen];
+      const nextFileToOpen = getters.tabs[nextIndexToOpen];
 
-      router.push(`/project${nextFileToOpen.url}`);
+      if (nextFileToOpen.pending) {
+        dispatch('openPendingTab', nextFileToOpen);
+      } else {
+        router.push(`/project${nextFileToOpen.url}`);
+      }
     } else if (!state.openFiles.length) {
       router.push(`/project/${file.projectId}/tree/${file.branchId}/`);
     }
@@ -151,9 +155,11 @@ export const discardFileChanges = ({ state, commit }, path) => {
   eventHub.$emit(`editor.update.model.content.${file.path}`, file.raw);
 };
 
-export const openPendingTab = ({ commit, state }, file) => {
+export const openPendingTab = ({ commit, dispatch, state }, file) => {
   commit(types.ADD_PENDING_TAB, file);
 
+  dispatch('scrollToTab');
+
   router.push(`/project/${file.projectId}/tree/${state.currentBranchId}/`);
 };
 
diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index 06fd55bfa83..65ea1e46b58 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -88,14 +88,29 @@ export default {
     });
   },
   [types.ADD_PENDING_TAB](state, file) {
-    Object.assign(state, {
-      pendingTabs: state.pendingTabs.concat({
-        ...file,
-        active: true,
-        pending: true,
-        key: `pending-${file.key}`,
-      }),
-    });
+    const pendingTab = state.pendingTabs.find(f => f.path === file.path);
+
+    if (pendingTab) {
+      Object.assign(state, {
+        pendingTabs: state.pendingTabs.map(tab => ({
+          ...tab,
+          active: !!pendingTab,
+        })),
+      });
+    } else {
+      Object.assign(state, {
+        pendingTabs: state.pendingTabs.concat({
+          ...file,
+          active: true,
+          pending: true,
+          key: `pending-${file.key}`,
+        }),
+        openFiles: state.openFiles.map(f => ({
+          ...f,
+          active: false,
+        })),
+      });
+    }
   },
   [types.REMOVE_PENDING_TAB](state, file) {
     Object.assign(state, {
-- 
cgit v1.2.1


From c5c7baec60184b89dad63a8123c4c0661256f83e Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 23 Mar 2018 11:16:42 +0000
Subject: opens the next open tab correctly fixes model being cached as
 undefined fixed open files not being correctly mutated

---
 .../javascripts/ide/components/repo_editor.vue     |   2 +-
 .../javascripts/ide/lib/common/model_manager.js    |   2 +-
 app/assets/javascripts/ide/lib/diff/controller.js  |   2 +-
 app/assets/javascripts/ide/stores/actions/file.js  |  30 +++---
 app/assets/javascripts/ide/stores/actions/tree.js  | 118 ++++++++++++---------
 .../javascripts/ide/stores/mutations/file.js       |  23 ++--
 6 files changed, 101 insertions(+), 76 deletions(-)

diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 7a2e92f6246..b75f8ab5fb1 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -36,7 +36,7 @@ export default {
       this.editor.updateDimensions();
     },
     viewer() {
-      // this.createEditorInstance();
+      this.createEditorInstance();
     },
   },
   beforeDestroy() {
diff --git a/app/assets/javascripts/ide/lib/common/model_manager.js b/app/assets/javascripts/ide/lib/common/model_manager.js
index 12f1389f559..9a0baffceee 100644
--- a/app/assets/javascripts/ide/lib/common/model_manager.js
+++ b/app/assets/javascripts/ide/lib/common/model_manager.js
@@ -23,7 +23,7 @@ export default class ModelManager {
     }
 
     const model = new Model(this.monaco, file);
-    this.models.set(model.key, model);
+    this.models.set(model.path, model);
     this.disposable.add(model);
 
     eventHub.$on(
diff --git a/app/assets/javascripts/ide/lib/diff/controller.js b/app/assets/javascripts/ide/lib/diff/controller.js
index 0447a1d13f8..5408cb97199 100644
--- a/app/assets/javascripts/ide/lib/diff/controller.js
+++ b/app/assets/javascripts/ide/lib/diff/controller.js
@@ -44,7 +44,7 @@ export default class DirtyDiffController {
 
   computeDiff(model) {
     this.dirtyDiffWorker.postMessage({
-      key: model.key,
+      key: model.path,
       originalContent: model.getOriginalModel().getValue(),
       newContent: model.getModel().getValue(),
     });
diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js
index 8c41782cfb2..9293c945efa 100644
--- a/app/assets/javascripts/ide/stores/actions/file.js
+++ b/app/assets/javascripts/ide/stores/actions/file.js
@@ -8,29 +8,29 @@ import { setPageTitle } from '../utils';
 
 export const closeFile = ({ commit, state, getters, dispatch }, file) => {
   const path = file.path;
+  const indexOfClosedFile = getters.tabs.findIndex(f => f.key === file.key);
+  const fileWasActive = file.active;
 
   if (file.pending) {
     commit(types.REMOVE_PENDING_TAB, file);
   } else {
-    const indexOfClosedFile = getters.tabs.findIndex(f => f.path === path);
-    const fileWasActive = file.active;
-
     commit(types.TOGGLE_FILE_OPEN, path);
     commit(types.SET_FILE_ACTIVE, { path, active: false });
+  }
+
+  if (getters.tabs.length > 0 && fileWasActive) {
+    const nextIndexToOpen = indexOfClosedFile === 0 ? 0 : indexOfClosedFile - 1;
+    const nextFileToOpen = getters.tabs[nextIndexToOpen];
 
-    if (getters.tabs.length > 0 && fileWasActive) {
-      const nextIndexToOpen =
-        indexOfClosedFile === 0 ? 0 : indexOfClosedFile - 1;
-      const nextFileToOpen = getters.tabs[nextIndexToOpen];
-
-      if (nextFileToOpen.pending) {
-        dispatch('openPendingTab', nextFileToOpen);
-      } else {
-        router.push(`/project${nextFileToOpen.url}`);
-      }
-    } else if (!state.openFiles.length) {
-      router.push(`/project/${file.projectId}/tree/${file.branchId}/`);
+    if (nextFileToOpen.pending) {
+      dispatch('updateViewer', 'diff');
+      dispatch('openPendingTab', nextFileToOpen);
+    } else {
+      dispatch('updateDelayViewerUpdated', true);
+      router.push(`/project${nextFileToOpen.url}`);
     }
+  } else if (!getters.tabs.length) {
+    router.push(`/project/${file.projectId}/tree/${file.branchId}/`);
   }
 
   eventHub.$emit(`editor.update.model.dispose.${file.key}`);
diff --git a/app/assets/javascripts/ide/stores/actions/tree.js b/app/assets/javascripts/ide/stores/actions/tree.js
index 70a969a0325..b3edce08c34 100644
--- a/app/assets/javascripts/ide/stores/actions/tree.js
+++ b/app/assets/javascripts/ide/stores/actions/tree.js
@@ -2,9 +2,7 @@ import { normalizeHeaders } from '~/lib/utils/common_utils';
 import flash from '~/flash';
 import service from '../../services';
 import * as types from '../mutation_types';
-import {
-  findEntry,
-} from '../utils';
+import { findEntry } from '../utils';
 import FilesDecoratorWorker from '../workers/files_decorator_worker';
 
 export const toggleTreeOpen = ({ commit, dispatch }, path) => {
@@ -25,20 +23,29 @@ export const handleTreeEntryAction = ({ commit, dispatch }, row) => {
   }
 };
 
-export const getLastCommitData = ({ state, commit, dispatch, getters }, tree = state) => {
+export const getLastCommitData = (
+  { state, commit, dispatch, getters },
+  tree = state,
+) => {
   if (!tree || tree.lastCommitPath === null || !tree.lastCommitPath) return;
 
-  service.getTreeLastCommit(tree.lastCommitPath)
-    .then((res) => {
-      const lastCommitPath = normalizeHeaders(res.headers)['MORE-LOGS-URL'] || null;
+  service
+    .getTreeLastCommit(tree.lastCommitPath)
+    .then(res => {
+      const lastCommitPath =
+        normalizeHeaders(res.headers)['MORE-LOGS-URL'] || null;
 
       commit(types.SET_LAST_COMMIT_URL, { tree, url: lastCommitPath });
 
       return res.json();
     })
-    .then((data) => {
-      data.forEach((lastCommit) => {
-        const entry = findEntry(tree.tree, lastCommit.type, lastCommit.file_name);
+    .then(data => {
+      data.forEach(lastCommit => {
+        const entry = findEntry(
+          tree.tree,
+          lastCommit.type,
+          lastCommit.file_name,
+        );
 
         if (entry) {
           commit(types.SET_LAST_COMMIT_DATA, { entry, lastCommit });
@@ -47,47 +54,62 @@ export const getLastCommitData = ({ state, commit, dispatch, getters }, tree = s
 
       dispatch('getLastCommitData', tree);
     })
-    .catch(() => flash('Error fetching log data.', 'alert', document, null, false, true));
+    .catch(() =>
+      flash('Error fetching log data.', 'alert', document, null, false, true),
+    );
 };
 
 export const getFiles = (
   { state, commit, dispatch },
   { projectId, branchId } = {},
-) => new Promise((resolve, reject) => {
-  if (!state.trees[`${projectId}/${branchId}`]) {
-    const selectedProject = state.projects[projectId];
-    commit(types.CREATE_TREE, { treePath: `${projectId}/${branchId}` });
-
-    service
-      .getFiles(selectedProject.web_url, branchId)
-      .then(res => res.json())
-      .then((data) => {
-        const worker = new FilesDecoratorWorker();
-        worker.addEventListener('message', (e) => {
-          const { entries, treeList } = e.data;
-          const selectedTree = state.trees[`${projectId}/${branchId}`];
-
-          commit(types.SET_ENTRIES, entries);
-          commit(types.SET_DIRECTORY_DATA, { treePath: `${projectId}/${branchId}`, data: treeList });
-          commit(types.TOGGLE_LOADING, { entry: selectedTree, forceValue: false });
-
-          worker.terminate();
-
-          resolve();
-        });
-
-        worker.postMessage({
-          data,
-          projectId,
-          branchId,
+) =>
+  new Promise((resolve, reject) => {
+    if (!state.trees[`${projectId}/${branchId}`]) {
+      const selectedProject = state.projects[projectId];
+      commit(types.CREATE_TREE, { treePath: `${projectId}/${branchId}` });
+
+      service
+        .getFiles(selectedProject.web_url, branchId)
+        .then(res => res.json())
+        .then(data => {
+          const worker = new FilesDecoratorWorker();
+          worker.addEventListener('message', e => {
+            const { entries, treeList } = e.data;
+            const selectedTree = state.trees[`${projectId}/${branchId}`];
+
+            commit(types.SET_ENTRIES, entries);
+            commit(types.SET_DIRECTORY_DATA, {
+              treePath: `${projectId}/${branchId}`,
+              data: treeList,
+            });
+            commit(types.TOGGLE_LOADING, {
+              entry: selectedTree,
+              forceValue: false,
+            });
+
+            worker.terminate();
+
+            resolve();
+          });
+
+          worker.postMessage({
+            data,
+            projectId,
+            branchId,
+          });
+        })
+        .catch(e => {
+          flash(
+            'Error loading tree data. Please try again.',
+            'alert',
+            document,
+            null,
+            false,
+            true,
+          );
+          reject(e);
         });
-      })
-      .catch((e) => {
-        flash('Error loading tree data. Please try again.', 'alert', document, null, false, true);
-        reject(e);
-      });
-  } else {
-    resolve();
-  }
-});
-
+    } else {
+      resolve();
+    }
+  });
diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index 65ea1e46b58..5dcbf9aa294 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -6,12 +6,14 @@ export default {
       active,
     });
 
-    Object.assign(state, {
-      pendingTabs: state.pendingTabs.map(f => ({
-        ...f,
-        active: false,
-      })),
-    });
+    if (active) {
+      Object.assign(state, {
+        pendingTabs: state.pendingTabs.map(f => ({
+          ...f,
+          active: false,
+        })),
+      });
+    }
   },
   [types.TOGGLE_FILE_OPEN](state, path) {
     Object.assign(state.entries[path], {
@@ -105,10 +107,11 @@ export default {
           pending: true,
           key: `pending-${file.key}`,
         }),
-        openFiles: state.openFiles.map(f => ({
-          ...f,
-          active: false,
-        })),
+        openFiles: state.openFiles.map(f =>
+          Object.assign(f, {
+            active: false,
+          }),
+        ),
       });
     }
   },
-- 
cgit v1.2.1


From bfdeee1de9a152bfda2ae5658f0f3de834a21571 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 23 Mar 2018 11:37:34 +0000
Subject: correctly toggle between tabs

---
 app/assets/javascripts/ide/components/repo_editor.vue |  2 +-
 app/assets/javascripts/ide/components/repo_tab.vue    | 10 ++++++++--
 app/assets/javascripts/ide/lib/common/model.js        |  2 +-
 app/assets/javascripts/ide/stores/mutations/file.js   | 13 ++++++++-----
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index b75f8ab5fb1..5cf1d9f09c6 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -71,7 +71,7 @@ export default {
       this.getRawFileData(this.file)
         .then(() => {
           const viewerPromise = this.delayViewerUpdated
-            ? this.updateViewer('editor')
+            ? this.updateViewer(this.file.pending ? 'diff' : 'editor')
             : Promise.resolve();
 
           return viewerPromise;
diff --git a/app/assets/javascripts/ide/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue
index b36fb6b4830..f82588219cc 100644
--- a/app/assets/javascripts/ide/components/repo_tab.vue
+++ b/app/assets/javascripts/ide/components/repo_tab.vue
@@ -37,9 +37,15 @@ export default {
   },
 
   methods: {
-    ...mapActions(['closeFile']),
+    ...mapActions(['closeFile', 'updateDelayViewerUpdated', 'openPendingTab']),
     clickFile(tab) {
-      this.$router.push(`/project${tab.url}`);
+      this.updateDelayViewerUpdated(true);
+
+      if (tab.pending) {
+        this.openPendingTab(tab);
+      } else {
+        this.$router.push(`/project${tab.url}`);
+      }
     },
     mouseOverTab() {
       if (this.tab.changed) {
diff --git a/app/assets/javascripts/ide/lib/common/model.js b/app/assets/javascripts/ide/lib/common/model.js
index ff720fc0174..83847bf457d 100644
--- a/app/assets/javascripts/ide/lib/common/model.js
+++ b/app/assets/javascripts/ide/lib/common/model.js
@@ -80,7 +80,7 @@ export default class Model {
 
     eventHub.$off(`editor.update.model.dispose.${this.file.key}`, this.dispose);
     eventHub.$off(
-      `editor.update.model.content.${this.file.key}`,
+      `editor.update.model.content.${this.file.path}`,
       this.updateContent,
     );
   }
diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index 5dcbf9aa294..e49a74ac3ed 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -92,6 +92,14 @@ export default {
   [types.ADD_PENDING_TAB](state, file) {
     const pendingTab = state.pendingTabs.find(f => f.path === file.path);
 
+    Object.assign(state, {
+      openFiles: state.openFiles.map(f =>
+        Object.assign(f, {
+          active: false,
+        }),
+      ),
+    });
+
     if (pendingTab) {
       Object.assign(state, {
         pendingTabs: state.pendingTabs.map(tab => ({
@@ -107,11 +115,6 @@ export default {
           pending: true,
           key: `pending-${file.key}`,
         }),
-        openFiles: state.openFiles.map(f =>
-          Object.assign(f, {
-            active: false,
-          }),
-        ),
       });
     }
   },
-- 
cgit v1.2.1


From bead083c58b2523563b015624948a79e27a23961 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 23 Mar 2018 15:59:09 +0000
Subject: updated specs

---
 app/assets/javascripts/ide/components/repo_tabs.vue |  2 +-
 app/assets/javascripts/ide/lib/common/model.js      |  2 +-
 app/assets/javascripts/ide/lib/diff/controller.js   |  4 ++--
 app/assets/javascripts/ide/lib/diff/diff_worker.js  |  2 +-
 app/assets/javascripts/ide/stores/actions.js        |  2 +-
 .../ide/components/commit_sidebar/list_item_spec.js | 21 +++++++++++++--------
 spec/javascripts/ide/components/repo_tab_spec.js    |  2 +-
 spec/javascripts/ide/components/repo_tabs_spec.js   |  2 ++
 .../ide/lib/common/model_manager_spec.js            | 15 +++++++++------
 spec/javascripts/ide/lib/common/model_spec.js       |  8 ++++----
 spec/javascripts/ide/lib/diff/controller_spec.js    |  4 ++--
 spec/javascripts/ide/stores/actions/file_spec.js    |  6 +++---
 12 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/app/assets/javascripts/ide/components/repo_tabs.vue b/app/assets/javascripts/ide/components/repo_tabs.vue
index b7a3e13d86f..e3c9ee71bf2 100644
--- a/app/assets/javascripts/ide/components/repo_tabs.vue
+++ b/app/assets/javascripts/ide/components/repo_tabs.vue
@@ -44,7 +44,7 @@ export default {
       this.updateViewer(viewer);
 
       if (this.activeFile.pending) {
-        this.removePendingTab(this.activeFile).then(() => {
+        return this.removePendingTab(this.activeFile).then(() => {
           router.push(`/project${this.activeFile.url}`);
         });
       }
diff --git a/app/assets/javascripts/ide/lib/common/model.js b/app/assets/javascripts/ide/lib/common/model.js
index 83847bf457d..009446cd4b6 100644
--- a/app/assets/javascripts/ide/lib/common/model.js
+++ b/app/assets/javascripts/ide/lib/common/model.js
@@ -64,7 +64,7 @@ export default class Model {
 
   onChange(cb) {
     this.events.set(
-      this.key,
+      this.path,
       this.disposable.add(this.model.onDidChangeContent(e => cb(this, e))),
     );
   }
diff --git a/app/assets/javascripts/ide/lib/diff/controller.js b/app/assets/javascripts/ide/lib/diff/controller.js
index 5408cb97199..1af358a6467 100644
--- a/app/assets/javascripts/ide/lib/diff/controller.js
+++ b/app/assets/javascripts/ide/lib/diff/controller.js
@@ -44,7 +44,7 @@ export default class DirtyDiffController {
 
   computeDiff(model) {
     this.dirtyDiffWorker.postMessage({
-      key: model.path,
+      path: model.path,
       originalContent: model.getOriginalModel().getValue(),
       newContent: model.getModel().getValue(),
     });
@@ -56,7 +56,7 @@ export default class DirtyDiffController {
 
   decorate({ data }) {
     const decorations = data.changes.map(change => getDecorator(change));
-    const model = this.modelManager.getModel(data.key);
+    const model = this.modelManager.getModel(data.path);
     this.decorationsController.addDecorations(model, 'dirtyDiff', decorations);
   }
 
diff --git a/app/assets/javascripts/ide/lib/diff/diff_worker.js b/app/assets/javascripts/ide/lib/diff/diff_worker.js
index 9476d35f9e1..ba9e270d5f0 100644
--- a/app/assets/javascripts/ide/lib/diff/diff_worker.js
+++ b/app/assets/javascripts/ide/lib/diff/diff_worker.js
@@ -4,7 +4,7 @@ self.addEventListener('message', e => {
   const data = e.data;
 
   self.postMessage({
-    key: data.key,
+    path: data.path,
     changes: computeDiff(data.originalContent, data.newContent),
   });
 });
diff --git a/app/assets/javascripts/ide/stores/actions.js b/app/assets/javascripts/ide/stores/actions.js
index 1300ea8e520..373ea3f5c08 100644
--- a/app/assets/javascripts/ide/stores/actions.js
+++ b/app/assets/javascripts/ide/stores/actions.js
@@ -21,7 +21,7 @@ export const discardAllChanges = ({ state, commit, dispatch }) => {
 };
 
 export const closeAllFiles = ({ state, dispatch }) => {
-  state.openFiles.forEach(file => dispatch('closeFile', file.path));
+  state.openFiles.forEach(file => dispatch('closeFile', file));
 };
 
 export const setPanelCollapsedStatus = ({ commit }, { side, collapsed }) => {
diff --git a/spec/javascripts/ide/components/commit_sidebar/list_item_spec.js b/spec/javascripts/ide/components/commit_sidebar/list_item_spec.js
index 15b66952d99..3ab461511b3 100644
--- a/spec/javascripts/ide/components/commit_sidebar/list_item_spec.js
+++ b/spec/javascripts/ide/components/commit_sidebar/list_item_spec.js
@@ -1,7 +1,8 @@
 import Vue from 'vue';
 import listItem from '~/ide/components/commit_sidebar/list_item.vue';
 import router from '~/ide/ide_router';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import store from '~/ide/stores';
+import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import { file } from '../../helpers';
 
 describe('Multi-file editor commit sidebar list item', () => {
@@ -13,9 +14,9 @@ describe('Multi-file editor commit sidebar list item', () => {
 
     f = file('test-file');
 
-    vm = mountComponent(Component, {
+    vm = createComponentWithStore(Component, store, {
       file: f,
-    });
+    }).$mount();
   });
 
   afterEach(() => {
@@ -36,20 +37,24 @@ describe('Multi-file editor commit sidebar list item', () => {
     expect(vm.discardFileChanges).toHaveBeenCalled();
   });
 
-  it('opens a closed file in the editor when clicking the file path', () => {
+  it('opens a closed file in the editor when clicking the file path', done => {
     spyOn(vm, 'openFileInEditor').and.callThrough();
-    spyOn(vm, 'updateViewer');
+    spyOn(vm, 'updateViewer').and.callThrough();
     spyOn(router, 'push');
 
     vm.$el.querySelector('.multi-file-commit-list-path').click();
 
-    expect(vm.openFileInEditor).toHaveBeenCalled();
-    expect(router.push).toHaveBeenCalled();
+    setTimeout(() => {
+      expect(vm.openFileInEditor).toHaveBeenCalled();
+      expect(router.push).toHaveBeenCalled();
+
+      done();
+    });
   });
 
   it('calls updateViewer with diff when clicking file', () => {
     spyOn(vm, 'openFileInEditor').and.callThrough();
-    spyOn(vm, 'updateViewer');
+    spyOn(vm, 'updateViewer').and.callThrough();
     spyOn(router, 'push');
 
     vm.$el.querySelector('.multi-file-commit-list-path').click();
diff --git a/spec/javascripts/ide/components/repo_tab_spec.js b/spec/javascripts/ide/components/repo_tab_spec.js
index ddb5204e3a7..8cabc6e8935 100644
--- a/spec/javascripts/ide/components/repo_tab_spec.js
+++ b/spec/javascripts/ide/components/repo_tab_spec.js
@@ -59,7 +59,7 @@ describe('RepoTab', () => {
 
     vm.$el.querySelector('.multi-file-tab-close').click();
 
-    expect(vm.closeFile).toHaveBeenCalledWith(vm.tab.path);
+    expect(vm.closeFile).toHaveBeenCalledWith(vm.tab);
   });
 
   it('changes icon on hover', done => {
diff --git a/spec/javascripts/ide/components/repo_tabs_spec.js b/spec/javascripts/ide/components/repo_tabs_spec.js
index ceb0416aff8..1cd2e362f50 100644
--- a/spec/javascripts/ide/components/repo_tabs_spec.js
+++ b/spec/javascripts/ide/components/repo_tabs_spec.js
@@ -17,6 +17,7 @@ describe('RepoTabs', () => {
       files: openedFiles,
       viewer: 'editor',
       hasChanges: false,
+      activeFile: file('activeFile'),
     });
     openedFiles[0].active = true;
 
@@ -56,6 +57,7 @@ describe('RepoTabs', () => {
           files: [],
           viewer: 'editor',
           hasChanges: false,
+          activeFile: file('activeFile'),
         },
         '#test-app',
       );
diff --git a/spec/javascripts/ide/lib/common/model_manager_spec.js b/spec/javascripts/ide/lib/common/model_manager_spec.js
index 4381f6fcfd0..c00d590c580 100644
--- a/spec/javascripts/ide/lib/common/model_manager_spec.js
+++ b/spec/javascripts/ide/lib/common/model_manager_spec.js
@@ -27,9 +27,10 @@ describe('Multi-file editor library model manager', () => {
     });
 
     it('caches model by file path', () => {
-      instance.addModel(file('path-name'));
+      const f = file('path-name');
+      instance.addModel(f);
 
-      expect(instance.models.keys().next().value).toBe('path-name');
+      expect(instance.models.keys().next().value).toBe(f.key);
     });
 
     it('adds model into disposable', () => {
@@ -56,7 +57,7 @@ describe('Multi-file editor library model manager', () => {
       instance.addModel(f);
 
       expect(eventHub.$on).toHaveBeenCalledWith(
-        `editor.update.model.dispose.${f.path}`,
+        `editor.update.model.dispose.${f.key}`,
         jasmine.anything(),
       );
     });
@@ -68,9 +69,11 @@ describe('Multi-file editor library model manager', () => {
     });
 
     it('returns true when model exists', () => {
-      instance.addModel(file('path-name'));
+      const f = file('path-name');
+
+      instance.addModel(f);
 
-      expect(instance.hasCachedModel('path-name')).toBeTruthy();
+      expect(instance.hasCachedModel(f.key)).toBeTruthy();
     });
   });
 
@@ -103,7 +106,7 @@ describe('Multi-file editor library model manager', () => {
       instance.removeCachedModel(f);
 
       expect(eventHub.$off).toHaveBeenCalledWith(
-        `editor.update.model.dispose.${f.path}`,
+        `editor.update.model.dispose.${f.key}`,
         jasmine.anything(),
       );
     });
diff --git a/spec/javascripts/ide/lib/common/model_spec.js b/spec/javascripts/ide/lib/common/model_spec.js
index adc6a93c06b..f6979e32cb3 100644
--- a/spec/javascripts/ide/lib/common/model_spec.js
+++ b/spec/javascripts/ide/lib/common/model_spec.js
@@ -28,14 +28,14 @@ describe('Multi-file editor library model', () => {
 
   it('adds eventHub listener', () => {
     expect(eventHub.$on).toHaveBeenCalledWith(
-      `editor.update.model.dispose.${model.file.path}`,
+      `editor.update.model.dispose.${model.file.key}`,
       jasmine.anything(),
     );
   });
 
   describe('path', () => {
     it('returns file path', () => {
-      expect(model.path).toBe('path');
+      expect(model.path).toBe(model.file.key);
     });
   });
 
@@ -64,7 +64,7 @@ describe('Multi-file editor library model', () => {
       model.onChange(() => {});
 
       expect(model.events.size).toBe(1);
-      expect(model.events.keys().next().value).toBe('path');
+      expect(model.events.keys().next().value).toBe(model.file.key);
     });
 
     it('calls callback on change', done => {
@@ -105,7 +105,7 @@ describe('Multi-file editor library model', () => {
       model.dispose();
 
       expect(eventHub.$off).toHaveBeenCalledWith(
-        `editor.update.model.dispose.${model.file.path}`,
+        `editor.update.model.dispose.${model.file.key}`,
         jasmine.anything(),
       );
     });
diff --git a/spec/javascripts/ide/lib/diff/controller_spec.js b/spec/javascripts/ide/lib/diff/controller_spec.js
index c8f3e9f4830..ff73240734e 100644
--- a/spec/javascripts/ide/lib/diff/controller_spec.js
+++ b/spec/javascripts/ide/lib/diff/controller_spec.js
@@ -131,7 +131,7 @@ describe('Multi-file editor library dirty diff controller', () => {
     it('adds decorations into decorations controller', () => {
       spyOn(controller.decorationsController, 'addDecorations');
 
-      controller.decorate({ data: { changes: [], path: 'path' } });
+      controller.decorate({ data: { changes: [], path: model.path } });
 
       expect(
         controller.decorationsController.addDecorations,
@@ -145,7 +145,7 @@ describe('Multi-file editor library dirty diff controller', () => {
       );
 
       controller.decorate({
-        data: { changes: computeDiff('123', '1234'), path: 'path' },
+        data: { changes: computeDiff('123', '1234'), path: model.path },
       });
 
       expect(spy).toHaveBeenCalledWith(
diff --git a/spec/javascripts/ide/stores/actions/file_spec.js b/spec/javascripts/ide/stores/actions/file_spec.js
index 5b7c8365641..be1a17e6830 100644
--- a/spec/javascripts/ide/stores/actions/file_spec.js
+++ b/spec/javascripts/ide/stores/actions/file_spec.js
@@ -29,7 +29,7 @@ describe('Multi-file store file actions', () => {
 
     it('closes open files', done => {
       store
-        .dispatch('closeFile', localFile.path)
+        .dispatch('closeFile', localFile)
         .then(() => {
           expect(localFile.opened).toBeFalsy();
           expect(localFile.active).toBeFalsy();
@@ -44,7 +44,7 @@ describe('Multi-file store file actions', () => {
       store.state.changedFiles.push(localFile);
 
       store
-        .dispatch('closeFile', localFile.path)
+        .dispatch('closeFile', localFile)
         .then(Vue.nextTick)
         .then(() => {
           expect(store.state.openFiles.length).toBe(0);
@@ -65,7 +65,7 @@ describe('Multi-file store file actions', () => {
       store.state.entries[f.path] = f;
 
       store
-        .dispatch('closeFile', localFile.path)
+        .dispatch('closeFile', localFile)
         .then(Vue.nextTick)
         .then(() => {
           expect(router.push).toHaveBeenCalledWith(`/project${f.url}`);
-- 
cgit v1.2.1


From 89bb7b85ec1479cd46f758512891714d81eeb807 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 23 Mar 2018 16:15:09 +0000
Subject: fixed eslint inconsistent return

---
 app/assets/javascripts/ide/components/repo_tabs.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/ide/components/repo_tabs.vue b/app/assets/javascripts/ide/components/repo_tabs.vue
index e3c9ee71bf2..acbb43e867d 100644
--- a/app/assets/javascripts/ide/components/repo_tabs.vue
+++ b/app/assets/javascripts/ide/components/repo_tabs.vue
@@ -35,8 +35,7 @@ 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']),
@@ -48,6 +47,8 @@ export default {
           router.push(`/project${this.activeFile.url}`);
         });
       }
+
+      return null;
     },
   },
 };
-- 
cgit v1.2.1


From a515b459299e547b867408c9095af6e1ce427fff Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 27 Mar 2018 11:57:58 +0100
Subject: remove extra state property

pending tabs now get added into openfiles & just filtered correctly
---
 app/assets/javascripts/ide/components/ide.vue      |  4 +-
 app/assets/javascripts/ide/ide_router.js           | 16 +++++---
 app/assets/javascripts/ide/stores/actions/file.js  | 33 ++++------------
 app/assets/javascripts/ide/stores/getters.js       |  4 +-
 .../javascripts/ide/stores/mutations/file.js       | 46 +++++++++++++---------
 app/assets/javascripts/ide/stores/state.js         |  1 -
 6 files changed, 50 insertions(+), 54 deletions(-)

diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index 8502bbf4157..1581e015c39 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -32,7 +32,7 @@ export default {
   },
   computed: {
     ...mapState(['changedFiles', 'openFiles', 'viewer']),
-    ...mapGetters(['activeFile', 'hasChanges', 'tabs']),
+    ...mapGetters(['activeFile', 'hasChanges']),
   },
   mounted() {
     const returnValue = 'Are you sure you want to lose unsaved changes?';
@@ -61,7 +61,7 @@ export default {
       >
         <repo-tabs
           :active-file="activeFile"
-          :files="tabs"
+          :files="openFiles"
           :viewer="viewer"
           :has-changes="hasChanges"
         />
diff --git a/app/assets/javascripts/ide/ide_router.js b/app/assets/javascripts/ide/ide_router.js
index db89c1d44db..25f55ac2f8a 100644
--- a/app/assets/javascripts/ide/ide_router.js
+++ b/app/assets/javascripts/ide/ide_router.js
@@ -76,11 +76,17 @@ router.beforeEach((to, from, next) => {
             .then(() => {
               if (to.params[0]) {
                 const path =
-                  to.params[0].slice(-1) === '/'
-                    ? to.params[0].slice(0, -1)
-                    : to.params[0];
-                const treeEntry = store.state.entries[path];
-                if (treeEntry) {
+                  to.params[0].slice(-1) === '/' ? to.params[0].slice(0, -1) : to.params[0];
+                const treeEntry = Object.keys(store.state.entries).reduce((acc, key) => {
+                  const file = store.state.entries[key];
+                  if (key === path && !file.pending) {
+                    return file;
+                  }
+
+                  return acc;
+                }, {});
+
+                if (Object.keys(treeEntry).length) {
                   store.dispatch('handleTreeEntryAction', treeEntry);
                 }
               }
diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js
index 9293c945efa..53d80538228 100644
--- a/app/assets/javascripts/ide/stores/actions/file.js
+++ b/app/assets/javascripts/ide/stores/actions/file.js
@@ -6,9 +6,9 @@ import * as types from '../mutation_types';
 import router from '../../ide_router';
 import { setPageTitle } from '../utils';
 
-export const closeFile = ({ commit, state, getters, dispatch }, file) => {
+export const closeFile = ({ commit, state, dispatch }, file) => {
   const path = file.path;
-  const indexOfClosedFile = getters.tabs.findIndex(f => f.key === file.key);
+  const indexOfClosedFile = state.openFiles.findIndex(f => f.key === file.key);
   const fileWasActive = file.active;
 
   if (file.pending) {
@@ -18,9 +18,9 @@ export const closeFile = ({ commit, state, getters, dispatch }, file) => {
     commit(types.SET_FILE_ACTIVE, { path, active: false });
   }
 
-  if (getters.tabs.length > 0 && fileWasActive) {
+  if (state.openFiles.length > 0 && fileWasActive) {
     const nextIndexToOpen = indexOfClosedFile === 0 ? 0 : indexOfClosedFile - 1;
-    const nextFileToOpen = getters.tabs[nextIndexToOpen];
+    const nextFileToOpen = state.openFiles[nextIndexToOpen];
 
     if (nextFileToOpen.pending) {
       dispatch('updateViewer', 'diff');
@@ -29,7 +29,7 @@ export const closeFile = ({ commit, state, getters, dispatch }, file) => {
       dispatch('updateDelayViewerUpdated', true);
       router.push(`/project${nextFileToOpen.url}`);
     }
-  } else if (!getters.tabs.length) {
+  } else if (!state.openFiles.length) {
     router.push(`/project/${file.projectId}/tree/${file.branchId}/`);
   }
 
@@ -76,14 +76,7 @@ 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);
     });
 };
 
@@ -94,14 +87,7 @@ 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 }) => {
@@ -129,10 +115,7 @@ 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,
diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js
index 28006d3ddf8..a7e43a6dd2f 100644
--- a/app/assets/javascripts/ide/stores/getters.js
+++ b/app/assets/javascripts/ide/stores/getters.js
@@ -1,6 +1,4 @@
-export const tabs = state => state.openFiles.concat(state.pendingTabs);
-
-export const activeFile = state => tabs(state).find(file => file.active) || null;
+export const activeFile = state => state.openFiles.find(file => file.active) || null;
 
 export const addedFiles = state => state.changedFiles.filter(f => f.tempFile);
 
diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index e49a74ac3ed..87a3bfbcf05 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -6,12 +6,15 @@ export default {
       active,
     });
 
-    if (active) {
+    if (active && !state.entries[path].pending) {
       Object.assign(state, {
-        pendingTabs: state.pendingTabs.map(f => ({
-          ...f,
-          active: false,
-        })),
+        openFiles: state.openFiles.map(f => {
+          if (f.pending) {
+            return Object.assign(f, { active: false });
+          }
+
+          return f;
+        }),
       });
     }
   },
@@ -23,8 +26,10 @@ export default {
     if (state.entries[path].opened) {
       state.openFiles.push(state.entries[path]);
     } else {
+      const file = state.entries[path];
+
       Object.assign(state, {
-        openFiles: state.openFiles.filter(f => f.path !== path),
+        openFiles: state.openFiles.filter(f => f.key !== file.key),
       });
     }
   },
@@ -90,26 +95,31 @@ export default {
     });
   },
   [types.ADD_PENDING_TAB](state, file) {
-    const pendingTab = state.pendingTabs.find(f => f.path === file.path);
+    const pendingTab = state.openFiles.find(f => f.path === file.path && f.pending);
 
     Object.assign(state, {
-      openFiles: state.openFiles.map(f =>
-        Object.assign(f, {
-          active: false,
-        }),
-      ),
+      openFiles: state.openFiles.map(f => {
+        if (!f.pending) {
+          return Object.assign(f, { active: false });
+        }
+
+        return f;
+      }),
     });
 
     if (pendingTab) {
       Object.assign(state, {
-        pendingTabs: state.pendingTabs.map(tab => ({
-          ...tab,
-          active: !!pendingTab,
-        })),
+        openFiles: state.openFiles.map(f => {
+          if (f.pending && f.path === file.path) {
+            return Object.assign(f, { active: true });
+          }
+
+          return f;
+        }),
       });
     } else {
       Object.assign(state, {
-        pendingTabs: state.pendingTabs.concat({
+        openFiles: state.openFiles.concat({
           ...file,
           active: true,
           pending: true,
@@ -120,7 +130,7 @@ export default {
   },
   [types.REMOVE_PENDING_TAB](state, file) {
     Object.assign(state, {
-      pendingTabs: state.pendingTabs.filter(f => f.path !== file.path),
+      openFiles: state.openFiles.filter(f => f.key !== file.key),
     });
   },
 };
diff --git a/app/assets/javascripts/ide/stores/state.js b/app/assets/javascripts/ide/stores/state.js
index 52a2400ec42..6110f54951c 100644
--- a/app/assets/javascripts/ide/stores/state.js
+++ b/app/assets/javascripts/ide/stores/state.js
@@ -16,5 +16,4 @@ export default () => ({
   entries: {},
   viewer: 'editor',
   delayViewerUpdated: false,
-  pendingTabs: [],
 });
-- 
cgit v1.2.1


From 53707c83a587793b41bcf52c6b998549eeed8857 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 27 Mar 2018 14:18:20 +0100
Subject: remove pending tab when opening a file from the left sidebar

---
 app/assets/javascripts/ide/lib/common/model.js     | 10 ++----
 .../javascripts/ide/lib/common/model_manager.js    |  5 +--
 .../javascripts/ide/stores/mutations/file.js       |  4 ++-
 .../ide/lib/decorations/controller_spec.js         | 41 ++++++----------------
 4 files changed, 17 insertions(+), 43 deletions(-)

diff --git a/app/assets/javascripts/ide/lib/common/model.js b/app/assets/javascripts/ide/lib/common/model.js
index 009446cd4b6..e659a6868ba 100644
--- a/app/assets/javascripts/ide/lib/common/model.js
+++ b/app/assets/javascripts/ide/lib/common/model.js
@@ -28,10 +28,7 @@ export default class Model {
     this.dispose = this.dispose.bind(this);
 
     eventHub.$on(`editor.update.model.dispose.${this.file.key}`, this.dispose);
-    eventHub.$on(
-      `editor.update.model.content.${this.file.path}`,
-      this.updateContent,
-    );
+    eventHub.$on(`editor.update.model.content.${this.file.path}`, this.updateContent);
   }
 
   get url() {
@@ -79,9 +76,6 @@ export default class Model {
     this.events.clear();
 
     eventHub.$off(`editor.update.model.dispose.${this.file.key}`, this.dispose);
-    eventHub.$off(
-      `editor.update.model.content.${this.file.path}`,
-      this.updateContent,
-    );
+    eventHub.$off(`editor.update.model.content.${this.file.path}`, this.updateContent);
   }
 }
diff --git a/app/assets/javascripts/ide/lib/common/model_manager.js b/app/assets/javascripts/ide/lib/common/model_manager.js
index 9a0baffceee..0e7b563b5d6 100644
--- a/app/assets/javascripts/ide/lib/common/model_manager.js
+++ b/app/assets/javascripts/ide/lib/common/model_manager.js
@@ -37,10 +37,7 @@ export default class ModelManager {
   removeCachedModel(file) {
     this.models.delete(file.key);
 
-    eventHub.$off(
-      `editor.update.model.dispose.${file.key}`,
-      this.removeCachedModel,
-    );
+    eventHub.$off(`editor.update.model.dispose.${file.key}`, this.removeCachedModel);
   }
 
   dispose() {
diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index 87a3bfbcf05..83db5664912 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -24,7 +24,9 @@ export default {
     });
 
     if (state.entries[path].opened) {
-      state.openFiles.push(state.entries[path]);
+      Object.assign(state, {
+        openFiles: state.openFiles.filter(f => f.path !== path).concat(state.entries[path]),
+      });
     } else {
       const file = state.entries[path];
 
diff --git a/spec/javascripts/ide/lib/decorations/controller_spec.js b/spec/javascripts/ide/lib/decorations/controller_spec.js
index 092170d086a..aec325e26a9 100644
--- a/spec/javascripts/ide/lib/decorations/controller_spec.js
+++ b/spec/javascripts/ide/lib/decorations/controller_spec.js
@@ -36,9 +36,7 @@ describe('Multi-file editor library decorations controller', () => {
     });
 
     it('returns decorations by model URL', () => {
-      controller.addDecorations(model, 'key', [
-        { decoration: 'decorationValue' },
-      ]);
+      controller.addDecorations(model, 'key', [{ decoration: 'decorationValue' }]);
 
       const decorations = controller.getAllDecorationsForModel(model);
 
@@ -48,39 +46,29 @@ describe('Multi-file editor library decorations controller', () => {
 
   describe('addDecorations', () => {
     it('caches decorations in a new map', () => {
-      controller.addDecorations(model, 'key', [
-        { decoration: 'decorationValue' },
-      ]);
+      controller.addDecorations(model, 'key', [{ decoration: 'decorationValue' }]);
 
       expect(controller.decorations.size).toBe(1);
     });
 
     it('does not create new cache model', () => {
-      controller.addDecorations(model, 'key', [
-        { decoration: 'decorationValue' },
-      ]);
-      controller.addDecorations(model, 'key', [
-        { decoration: 'decorationValue2' },
-      ]);
+      controller.addDecorations(model, 'key', [{ decoration: 'decorationValue' }]);
+      controller.addDecorations(model, 'key', [{ decoration: 'decorationValue2' }]);
 
       expect(controller.decorations.size).toBe(1);
     });
 
     it('caches decorations by model URL', () => {
-      controller.addDecorations(model, 'key', [
-        { decoration: 'decorationValue' },
-      ]);
+      controller.addDecorations(model, 'key', [{ decoration: 'decorationValue' }]);
 
       expect(controller.decorations.size).toBe(1);
-      expect(controller.decorations.keys().next().value).toBe('path');
+      expect(controller.decorations.keys().next().value).toBe('path--path');
     });
 
     it('calls decorate method', () => {
       spyOn(controller, 'decorate');
 
-      controller.addDecorations(model, 'key', [
-        { decoration: 'decorationValue' },
-      ]);
+      controller.addDecorations(model, 'key', [{ decoration: 'decorationValue' }]);
 
       expect(controller.decorate).toHaveBeenCalled();
     });
@@ -92,10 +80,7 @@ describe('Multi-file editor library decorations controller', () => {
 
       controller.decorate(model);
 
-      expect(controller.editor.instance.deltaDecorations).toHaveBeenCalledWith(
-        [],
-        [],
-      );
+      expect(controller.editor.instance.deltaDecorations).toHaveBeenCalledWith([], []);
     });
 
     it('caches decorations', () => {
@@ -111,15 +96,13 @@ describe('Multi-file editor library decorations controller', () => {
 
       controller.decorate(model);
 
-      expect(controller.editorDecorations.keys().next().value).toBe('path');
+      expect(controller.editorDecorations.keys().next().value).toBe('path--path');
     });
   });
 
   describe('dispose', () => {
     it('clears cached decorations', () => {
-      controller.addDecorations(model, 'key', [
-        { decoration: 'decorationValue' },
-      ]);
+      controller.addDecorations(model, 'key', [{ decoration: 'decorationValue' }]);
 
       controller.dispose();
 
@@ -127,9 +110,7 @@ describe('Multi-file editor library decorations controller', () => {
     });
 
     it('clears cached editorDecorations', () => {
-      controller.addDecorations(model, 'key', [
-        { decoration: 'decorationValue' },
-      ]);
+      controller.addDecorations(model, 'key', [{ decoration: 'decorationValue' }]);
 
       controller.dispose();
 
-- 
cgit v1.2.1


From 8c4ad7385dab6dd3b50fbcb51605bc8abe81126a Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 27 Mar 2018 14:28:07 +0100
Subject: stops opening a pending tab if current tab is in review mode already

---
 .../javascripts/ide/components/commit_sidebar/list_item.vue       | 6 ++++--
 app/assets/javascripts/ide/stores/actions/file.js                 | 8 +++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index 421be7fb3cb..9affc14a57c 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -23,8 +23,10 @@ export default {
   methods: {
     ...mapActions(['discardFileChanges', 'updateViewer', 'openPendingTab']),
     openFileInEditor(file) {
-      return this.updateViewer('diff').then(() => {
-        this.openPendingTab(file);
+      return this.openPendingTab(file).then(changeViewer => {
+        if (changeViewer) {
+          this.updateViewer('diff');
+        }
       });
     },
   },
diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js
index 53d80538228..2847fceaf4e 100644
--- a/app/assets/javascripts/ide/stores/actions/file.js
+++ b/app/assets/javascripts/ide/stores/actions/file.js
@@ -138,12 +138,18 @@ export const discardFileChanges = ({ state, commit }, path) => {
   eventHub.$emit(`editor.update.model.content.${file.path}`, file.raw);
 };
 
-export const openPendingTab = ({ commit, dispatch, state }, file) => {
+export const openPendingTab = ({ commit, getters, dispatch, state }, file) => {
+  if (getters.activeFile && getters.activeFile.path === file.path && state.viewer === 'diff') {
+    return false;
+  }
+
   commit(types.ADD_PENDING_TAB, file);
 
   dispatch('scrollToTab');
 
   router.push(`/project/${file.projectId}/tree/${state.currentBranchId}/`);
+
+  return true;
 };
 
 export const removePendingTab = ({ commit }, file) => {
-- 
cgit v1.2.1


From babb90a7af6f691739f6d600d00f30b88f697dc4 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 27 Mar 2018 14:48:51 +0100
Subject: replace the tab with the review pending tab

---
 .../javascripts/ide/stores/mutations/file.js       | 29 +++++++++++++---------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index 83db5664912..0d878d6c6e5 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -100,13 +100,7 @@ export default {
     const pendingTab = state.openFiles.find(f => f.path === file.path && f.pending);
 
     Object.assign(state, {
-      openFiles: state.openFiles.map(f => {
-        if (!f.pending) {
-          return Object.assign(f, { active: false });
-        }
-
-        return f;
-      }),
+      openFiles: state.openFiles.map(f => Object.assign(f, { active: false })),
     });
 
     if (pendingTab) {
@@ -121,11 +115,22 @@ export default {
       });
     } else {
       Object.assign(state, {
-        openFiles: state.openFiles.concat({
-          ...file,
-          active: true,
-          pending: true,
-          key: `pending-${file.key}`,
+        entries: Object.assign(state.entries, {
+          [file.path]: Object.assign(state.entries[file.path], {
+            opened: false,
+          }),
+        }),
+        openFiles: state.openFiles.map(f => {
+          if (f.path === file.path) {
+            return {
+              ...f,
+              active: true,
+              pending: true,
+              key: `pending-${f.key}`,
+            };
+          }
+
+          return f;
         }),
       });
     }
-- 
cgit v1.2.1


From 608a648417267aed11bccc1153481efe245a09e9 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 27 Mar 2018 16:39:24 +0100
Subject: added specs

---
 .../javascripts/ide/stores/mutations/file.js       |  26 +++--
 .../components/commit_sidebar/list_item_spec.js    |  15 ++-
 spec/javascripts/ide/stores/actions/file_spec.js   | 125 +++++++++++++++++++++
 spec/javascripts/ide/stores/mutations/file_spec.js |  79 +++++++++++++
 4 files changed, 229 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index 0d878d6c6e5..25faac7c828 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -114,24 +114,30 @@ export default {
         }),
       });
     } else {
-      Object.assign(state, {
-        entries: Object.assign(state.entries, {
-          [file.path]: Object.assign(state.entries[file.path], {
-            opened: false,
-          }),
-        }),
-        openFiles: state.openFiles.map(f => {
+      const openFile = state.openFiles.find(f => f.path === file.path);
+      const openFiles = state.openFiles
+        .concat(openFile ? null : file)
+        .filter(f => f)
+        .reduce((acc, f) => {
           if (f.path === file.path) {
-            return {
+            return acc.concat({
               ...f,
               active: true,
               pending: true,
               key: `pending-${f.key}`,
-            };
+            });
           }
 
-          return f;
+          return acc.concat(f);
+        }, []);
+
+      Object.assign(state, {
+        entries: Object.assign(state.entries, {
+          [file.path]: Object.assign(state.entries[file.path], {
+            opened: false,
+          }),
         }),
+        openFiles,
       });
     }
   },
diff --git a/spec/javascripts/ide/components/commit_sidebar/list_item_spec.js b/spec/javascripts/ide/components/commit_sidebar/list_item_spec.js
index 3ab461511b3..f007d89f437 100644
--- a/spec/javascripts/ide/components/commit_sidebar/list_item_spec.js
+++ b/spec/javascripts/ide/components/commit_sidebar/list_item_spec.js
@@ -14,6 +14,8 @@ describe('Multi-file editor commit sidebar list item', () => {
 
     f = file('test-file');
 
+    store.state.entries[f.path] = f;
+
     vm = createComponentWithStore(Component, store, {
       file: f,
     }).$mount();
@@ -24,9 +26,7 @@ describe('Multi-file editor commit sidebar list item', () => {
   });
 
   it('renders file path', () => {
-    expect(
-      vm.$el.querySelector('.multi-file-commit-list-path').textContent.trim(),
-    ).toBe(f.path);
+    expect(vm.$el.querySelector('.multi-file-commit-list-path').textContent.trim()).toBe(f.path);
   });
 
   it('calls discardFileChanges when clicking discard button', () => {
@@ -39,7 +39,6 @@ describe('Multi-file editor commit sidebar list item', () => {
 
   it('opens a closed file in the editor when clicking the file path', done => {
     spyOn(vm, 'openFileInEditor').and.callThrough();
-    spyOn(vm, 'updateViewer').and.callThrough();
     spyOn(router, 'push');
 
     vm.$el.querySelector('.multi-file-commit-list-path').click();
@@ -52,14 +51,18 @@ describe('Multi-file editor commit sidebar list item', () => {
     });
   });
 
-  it('calls updateViewer with diff when clicking file', () => {
+  it('calls updateViewer with diff when clicking file', done => {
     spyOn(vm, 'openFileInEditor').and.callThrough();
     spyOn(vm, 'updateViewer').and.callThrough();
     spyOn(router, 'push');
 
     vm.$el.querySelector('.multi-file-commit-list-path').click();
 
-    expect(vm.updateViewer).toHaveBeenCalledWith('diff');
+    setTimeout(() => {
+      expect(vm.updateViewer).toHaveBeenCalledWith('diff');
+
+      done();
+    });
   });
 
   describe('computed', () => {
diff --git a/spec/javascripts/ide/stores/actions/file_spec.js b/spec/javascripts/ide/stores/actions/file_spec.js
index be1a17e6830..eb8933b2b3f 100644
--- a/spec/javascripts/ide/stores/actions/file_spec.js
+++ b/spec/javascripts/ide/stores/actions/file_spec.js
@@ -74,6 +74,22 @@ describe('Multi-file store file actions', () => {
         })
         .catch(done.fail);
     });
+
+    it('removes file if it pending', done => {
+      store.state.openFiles.push({
+        ...localFile,
+        pending: true,
+      });
+
+      store
+        .dispatch('closeFile', localFile)
+        .then(() => {
+          expect(store.state.openFiles.length).toBe(0);
+
+          done();
+        })
+        .catch(done.fail);
+    });
   });
 
   describe('setFileActive', () => {
@@ -418,4 +434,113 @@ describe('Multi-file store file actions', () => {
         .catch(done.fail);
     });
   });
+
+  describe('openPendingTab', () => {
+    let f;
+
+    beforeEach(() => {
+      f = {
+        ...file(),
+        projectId: '123',
+      };
+
+      store.state.entries[f.path] = f;
+    });
+
+    it('makes file pending in openFiles', done => {
+      store
+        .dispatch('openPendingTab', f)
+        .then(() => {
+          expect(store.state.openFiles[0].pending).toBe(true);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('returns true when opened', done => {
+      store
+        .dispatch('openPendingTab', f)
+        .then(added => {
+          expect(added).toBe(true);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('pushes router URL when added', done => {
+      store.state.currentBranchId = 'master';
+
+      store
+        .dispatch('openPendingTab', f)
+        .then(() => {
+          expect(router.push).toHaveBeenCalledWith('/project/123/tree/master/');
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('calls scrollToTab', done => {
+      const scrollToTabSpy = jasmine.createSpy('scrollToTab');
+      const oldScrollToTab = store._actions.scrollToTab; // eslint-disable-line
+      store._actions.scrollToTab = [scrollToTabSpy]; // eslint-disable-line
+
+      store
+        .dispatch('openPendingTab', f)
+        .then(() => {
+          expect(scrollToTabSpy).toHaveBeenCalled();
+          store._actions.scrollToTab = oldScrollToTab; // eslint-disable-line
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('returns false when passed in file is active & viewer is diff', done => {
+      f.active = true;
+      store.state.openFiles.push(f);
+      store.state.viewer = 'diff';
+
+      store
+        .dispatch('openPendingTab', f)
+        .then(added => {
+          expect(added).toBe(false);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+
+  describe('removePendingTab', () => {
+    let f;
+
+    beforeEach(() => {
+      spyOn(eventHub, '$emit');
+
+      f = {
+        ...file('pendingFile'),
+        pending: true,
+      };
+    });
+
+    it('removes pending file from open files', done => {
+      store.state.openFiles.push(f);
+
+      store
+        .dispatch('removePendingTab', f)
+        .then(() => {
+          expect(store.state.openFiles.length).toBe(0);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('emits event to dispose model', done => {
+      store
+        .dispatch('removePendingTab', f)
+        .then(() => {
+          expect(eventHub.$emit).toHaveBeenCalledWith(`editor.update.model.dispose.${f.key}`);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
 });
diff --git a/spec/javascripts/ide/stores/mutations/file_spec.js b/spec/javascripts/ide/stores/mutations/file_spec.js
index 131380248e8..9978f22f44a 100644
--- a/spec/javascripts/ide/stores/mutations/file_spec.js
+++ b/spec/javascripts/ide/stores/mutations/file_spec.js
@@ -22,6 +22,20 @@ describe('Multi-file store file mutations', () => {
 
       expect(localFile.active).toBeTruthy();
     });
+
+    it('sets pending tab as not active', () => {
+      localState.openFiles.push({
+        ...localFile,
+        pending: true,
+      });
+
+      mutations.SET_FILE_ACTIVE(localState, {
+        path: localFile.path,
+        active: true,
+      });
+
+      expect(localState.openFiles[0].active).toBe(false);
+    });
   });
 
   describe('TOGGLE_FILE_OPEN', () => {
@@ -154,4 +168,69 @@ describe('Multi-file store file mutations', () => {
       expect(localFile.changed).toBeTruthy();
     });
   });
+
+  describe('ADD_PENDING_TAB', () => {
+    beforeEach(() => {
+      const f = {
+        ...file('openFile'),
+        path: 'openFile',
+        active: true,
+        opened: true,
+      };
+
+      localState.entries[f.path] = f;
+      localState.openFiles.push(f);
+    });
+
+    it('adds file into openFiles as pending', () => {
+      mutations.ADD_PENDING_TAB(localState, localFile);
+
+      expect(localState.openFiles.length).toBe(2);
+      expect(localState.openFiles[1].pending).toBe(true);
+      expect(localState.openFiles[1].key).toBe(`pending-${localFile.key}`);
+    });
+
+    it('updates open file to pending', () => {
+      mutations.ADD_PENDING_TAB(localState, localState.openFiles[0]);
+
+      expect(localState.openFiles.length).toBe(1);
+    });
+
+    it('updates pending open file to active', () => {
+      localState.openFiles.push({
+        ...localFile,
+        pending: true,
+      });
+
+      mutations.ADD_PENDING_TAB(localState, localFile);
+
+      expect(localState.openFiles[1].pending).toBe(true);
+      expect(localState.openFiles[1].active).toBe(true);
+    });
+
+    it('sets all openFiles to not active', () => {
+      mutations.ADD_PENDING_TAB(localState, localFile);
+
+      expect(localState.openFiles.length).toBe(2);
+
+      localState.openFiles.forEach(f => {
+        if (f.pending) {
+          expect(f.active).toBe(true);
+        } else {
+          expect(f.active).toBe(false);
+        }
+      });
+    });
+  });
+
+  describe('REMOVE_PENDING_TAB', () => {
+    it('removes pending tab from openFiles', () => {
+      localFile.key = 'testing';
+      localState.openFiles.push(localFile);
+
+      mutations.REMOVE_PENDING_TAB(localState, localFile);
+
+      expect(localState.openFiles.length).toBe(0);
+    });
+  });
 });
-- 
cgit v1.2.1


From 0e7658dfb5c677322aef9cc396639f6bfc96ec81 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 27 Mar 2018 17:34:07 +0100
Subject: fixed issue with spec because store wasn't getting reset

---
 spec/javascripts/ide/components/commit_sidebar/list_item_spec.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/spec/javascripts/ide/components/commit_sidebar/list_item_spec.js b/spec/javascripts/ide/components/commit_sidebar/list_item_spec.js
index f007d89f437..509434e4300 100644
--- a/spec/javascripts/ide/components/commit_sidebar/list_item_spec.js
+++ b/spec/javascripts/ide/components/commit_sidebar/list_item_spec.js
@@ -3,7 +3,7 @@ import listItem from '~/ide/components/commit_sidebar/list_item.vue';
 import router from '~/ide/ide_router';
 import store from '~/ide/stores';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { file } from '../../helpers';
+import { file, resetStore } from '../../helpers';
 
 describe('Multi-file editor commit sidebar list item', () => {
   let vm;
@@ -23,6 +23,8 @@ describe('Multi-file editor commit sidebar list item', () => {
 
   afterEach(() => {
     vm.$destroy();
+
+    resetStore(store);
   });
 
   it('renders file path', () => {
-- 
cgit v1.2.1


From c5a591e61d3476531b67eac4315af6c60efc8228 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 28 Mar 2018 08:56:00 +0100
Subject: remove italics from tab

---
 app/assets/stylesheets/pages/repo.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 94aa5130f28..fcb35e2e67f 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -177,10 +177,6 @@
     background-color: $white-light;
     border-bottom-color: $white-light;
   }
-
-  &.pending {
-    font-style: italic;
-  }
 }
 
 .multi-file-tab-close {
-- 
cgit v1.2.1


From af20c4423c85c263f34a09c276a7bb917e3554a5 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 28 Mar 2018 11:19:14 +0100
Subject: refactor ADD_PENDING_TAB to stop multiple state changes

---
 app/assets/javascripts/ide/stores/actions/file.js  |  2 +-
 .../javascripts/ide/stores/mutations/file.js       | 59 ++++++++--------------
 spec/javascripts/ide/stores/mutations/file_spec.js |  8 +--
 3 files changed, 26 insertions(+), 43 deletions(-)

diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js
index 2847fceaf4e..7aacec89116 100644
--- a/app/assets/javascripts/ide/stores/actions/file.js
+++ b/app/assets/javascripts/ide/stores/actions/file.js
@@ -143,7 +143,7 @@ export const openPendingTab = ({ commit, getters, dispatch, state }, file) => {
     return false;
   }
 
-  commit(types.ADD_PENDING_TAB, file);
+  commit(types.ADD_PENDING_TAB, { file });
 
   dispatch('scrollToTab');
 
diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index 25faac7c828..f8d0262e120 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -96,50 +96,33 @@ export default {
       changed,
     });
   },
-  [types.ADD_PENDING_TAB](state, file) {
+  [types.ADD_PENDING_TAB](state, { file, keyPrefix = 'pending' }) {
     const pendingTab = state.openFiles.find(f => f.path === file.path && f.pending);
+    let openFiles = state.openFiles.map(f =>
+      Object.assign(f, { active: f.path === file.path, opened: false }),
+    );
 
-    Object.assign(state, {
-      openFiles: state.openFiles.map(f => Object.assign(f, { active: false })),
-    });
+    if (!pendingTab) {
+      const openFile = openFiles.find(f => f.path === file.path);
 
-    if (pendingTab) {
-      Object.assign(state, {
-        openFiles: state.openFiles.map(f => {
-          if (f.pending && f.path === file.path) {
-            return Object.assign(f, { active: true });
-          }
+      openFiles = openFiles.concat(openFile ? null : file).reduce((acc, f) => {
+        if (!f) return acc;
 
-          return f;
-        }),
-      });
-    } else {
-      const openFile = state.openFiles.find(f => f.path === file.path);
-      const openFiles = state.openFiles
-        .concat(openFile ? null : file)
-        .filter(f => f)
-        .reduce((acc, f) => {
-          if (f.path === file.path) {
-            return acc.concat({
-              ...f,
-              active: true,
-              pending: true,
-              key: `pending-${f.key}`,
-            });
-          }
+        if (f.path === file.path) {
+          return acc.concat({
+            ...f,
+            active: true,
+            pending: true,
+            opened: true,
+            key: `${keyPrefix}-${f.key}`,
+          });
+        }
 
-          return acc.concat(f);
-        }, []);
-
-      Object.assign(state, {
-        entries: Object.assign(state.entries, {
-          [file.path]: Object.assign(state.entries[file.path], {
-            opened: false,
-          }),
-        }),
-        openFiles,
-      });
+        return acc.concat(f);
+      }, []);
     }
+
+    Object.assign(state, { openFiles });
   },
   [types.REMOVE_PENDING_TAB](state, file) {
     Object.assign(state, {
diff --git a/spec/javascripts/ide/stores/mutations/file_spec.js b/spec/javascripts/ide/stores/mutations/file_spec.js
index 9978f22f44a..3f379ff219b 100644
--- a/spec/javascripts/ide/stores/mutations/file_spec.js
+++ b/spec/javascripts/ide/stores/mutations/file_spec.js
@@ -183,7 +183,7 @@ describe('Multi-file store file mutations', () => {
     });
 
     it('adds file into openFiles as pending', () => {
-      mutations.ADD_PENDING_TAB(localState, localFile);
+      mutations.ADD_PENDING_TAB(localState, { file: localFile });
 
       expect(localState.openFiles.length).toBe(2);
       expect(localState.openFiles[1].pending).toBe(true);
@@ -191,7 +191,7 @@ describe('Multi-file store file mutations', () => {
     });
 
     it('updates open file to pending', () => {
-      mutations.ADD_PENDING_TAB(localState, localState.openFiles[0]);
+      mutations.ADD_PENDING_TAB(localState, { file: localState.openFiles[0] });
 
       expect(localState.openFiles.length).toBe(1);
     });
@@ -202,14 +202,14 @@ describe('Multi-file store file mutations', () => {
         pending: true,
       });
 
-      mutations.ADD_PENDING_TAB(localState, localFile);
+      mutations.ADD_PENDING_TAB(localState, { file: localFile });
 
       expect(localState.openFiles[1].pending).toBe(true);
       expect(localState.openFiles[1].active).toBe(true);
     });
 
     it('sets all openFiles to not active', () => {
-      mutations.ADD_PENDING_TAB(localState, localFile);
+      mutations.ADD_PENDING_TAB(localState, { file: localFile });
 
       expect(localState.openFiles.length).toBe(2);
 
-- 
cgit v1.2.1


From 029f7e6cd87ec0d59b85f12b57ee3c3a889dac1f Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 28 Mar 2018 13:05:26 +0100
Subject: removed file changes that have no changes to make diff easier
 simplified SET_FILE_ACTIVE openFiles map use .find in router so that it
 returns early instead of looping all the values

---
 app/assets/javascripts/ide/components/repo_tab.vue |   3 +-
 app/assets/javascripts/ide/ide_router.js           |  14 +--
 app/assets/javascripts/ide/lib/diff/controller.js  |  13 ++-
 app/assets/javascripts/ide/lib/diff/diff_worker.js |   2 +-
 app/assets/javascripts/ide/stores/actions/tree.js  | 118 +++++++++------------
 app/assets/javascripts/ide/stores/getters.js       |   6 +-
 .../javascripts/ide/stores/mutations/file.js       |   8 +-
 app/assets/stylesheets/pages/repo.scss             |   4 +-
 8 files changed, 71 insertions(+), 97 deletions(-)

diff --git a/app/assets/javascripts/ide/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue
index f82588219cc..6e65e55e1f6 100644
--- a/app/assets/javascripts/ide/components/repo_tab.vue
+++ b/app/assets/javascripts/ide/components/repo_tab.vue
@@ -87,8 +87,7 @@ export default {
     <div
       class="multi-file-tab"
       :class="{
-        active: tab.active,
-        pending: tab.pending
+        active: tab.active
       }"
       :title="tab.url"
     >
diff --git a/app/assets/javascripts/ide/ide_router.js b/app/assets/javascripts/ide/ide_router.js
index 25f55ac2f8a..a6013784677 100644
--- a/app/assets/javascripts/ide/ide_router.js
+++ b/app/assets/javascripts/ide/ide_router.js
@@ -77,16 +77,12 @@ router.beforeEach((to, from, next) => {
               if (to.params[0]) {
                 const path =
                   to.params[0].slice(-1) === '/' ? to.params[0].slice(0, -1) : to.params[0];
-                const treeEntry = Object.keys(store.state.entries).reduce((acc, key) => {
-                  const file = store.state.entries[key];
-                  if (key === path && !file.pending) {
-                    return file;
-                  }
+                const treeEntryKey = Object.keys(store.state.entries).find(
+                  key => key === path && !store.state.entries[key].pending,
+                );
+                const treeEntry = store.state.entries[treeEntryKey];
 
-                  return acc;
-                }, {});
-
-                if (Object.keys(treeEntry).length) {
+                if (treeEntry) {
                   store.dispatch('handleTreeEntryAction', treeEntry);
                 }
               }
diff --git a/app/assets/javascripts/ide/lib/diff/controller.js b/app/assets/javascripts/ide/lib/diff/controller.js
index 1af358a6467..b136545ad11 100644
--- a/app/assets/javascripts/ide/lib/diff/controller.js
+++ b/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,12 +16,15 @@ 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)}`,
   },
 });
 
diff --git a/app/assets/javascripts/ide/lib/diff/diff_worker.js b/app/assets/javascripts/ide/lib/diff/diff_worker.js
index ba9e270d5f0..e74c4046330 100644
--- a/app/assets/javascripts/ide/lib/diff/diff_worker.js
+++ b/app/assets/javascripts/ide/lib/diff/diff_worker.js
@@ -1,6 +1,6 @@
 import { computeDiff } from './diff';
 
-self.addEventListener('message', e => {
+self.addEventListener('message', (e) => {
   const data = e.data;
 
   self.postMessage({
diff --git a/app/assets/javascripts/ide/stores/actions/tree.js b/app/assets/javascripts/ide/stores/actions/tree.js
index b3edce08c34..70a969a0325 100644
--- a/app/assets/javascripts/ide/stores/actions/tree.js
+++ b/app/assets/javascripts/ide/stores/actions/tree.js
@@ -2,7 +2,9 @@ import { normalizeHeaders } from '~/lib/utils/common_utils';
 import flash from '~/flash';
 import service from '../../services';
 import * as types from '../mutation_types';
-import { findEntry } from '../utils';
+import {
+  findEntry,
+} from '../utils';
 import FilesDecoratorWorker from '../workers/files_decorator_worker';
 
 export const toggleTreeOpen = ({ commit, dispatch }, path) => {
@@ -23,29 +25,20 @@ export const handleTreeEntryAction = ({ commit, dispatch }, row) => {
   }
 };
 
-export const getLastCommitData = (
-  { state, commit, dispatch, getters },
-  tree = state,
-) => {
+export const getLastCommitData = ({ state, commit, dispatch, getters }, tree = state) => {
   if (!tree || tree.lastCommitPath === null || !tree.lastCommitPath) return;
 
-  service
-    .getTreeLastCommit(tree.lastCommitPath)
-    .then(res => {
-      const lastCommitPath =
-        normalizeHeaders(res.headers)['MORE-LOGS-URL'] || null;
+  service.getTreeLastCommit(tree.lastCommitPath)
+    .then((res) => {
+      const lastCommitPath = normalizeHeaders(res.headers)['MORE-LOGS-URL'] || null;
 
       commit(types.SET_LAST_COMMIT_URL, { tree, url: lastCommitPath });
 
       return res.json();
     })
-    .then(data => {
-      data.forEach(lastCommit => {
-        const entry = findEntry(
-          tree.tree,
-          lastCommit.type,
-          lastCommit.file_name,
-        );
+    .then((data) => {
+      data.forEach((lastCommit) => {
+        const entry = findEntry(tree.tree, lastCommit.type, lastCommit.file_name);
 
         if (entry) {
           commit(types.SET_LAST_COMMIT_DATA, { entry, lastCommit });
@@ -54,62 +47,47 @@ export const getLastCommitData = (
 
       dispatch('getLastCommitData', tree);
     })
-    .catch(() =>
-      flash('Error fetching log data.', 'alert', document, null, false, true),
-    );
+    .catch(() => flash('Error fetching log data.', 'alert', document, null, false, true));
 };
 
 export const getFiles = (
   { state, commit, dispatch },
   { projectId, branchId } = {},
-) =>
-  new Promise((resolve, reject) => {
-    if (!state.trees[`${projectId}/${branchId}`]) {
-      const selectedProject = state.projects[projectId];
-      commit(types.CREATE_TREE, { treePath: `${projectId}/${branchId}` });
-
-      service
-        .getFiles(selectedProject.web_url, branchId)
-        .then(res => res.json())
-        .then(data => {
-          const worker = new FilesDecoratorWorker();
-          worker.addEventListener('message', e => {
-            const { entries, treeList } = e.data;
-            const selectedTree = state.trees[`${projectId}/${branchId}`];
-
-            commit(types.SET_ENTRIES, entries);
-            commit(types.SET_DIRECTORY_DATA, {
-              treePath: `${projectId}/${branchId}`,
-              data: treeList,
-            });
-            commit(types.TOGGLE_LOADING, {
-              entry: selectedTree,
-              forceValue: false,
-            });
-
-            worker.terminate();
-
-            resolve();
-          });
-
-          worker.postMessage({
-            data,
-            projectId,
-            branchId,
-          });
-        })
-        .catch(e => {
-          flash(
-            'Error loading tree data. Please try again.',
-            'alert',
-            document,
-            null,
-            false,
-            true,
-          );
-          reject(e);
+) => new Promise((resolve, reject) => {
+  if (!state.trees[`${projectId}/${branchId}`]) {
+    const selectedProject = state.projects[projectId];
+    commit(types.CREATE_TREE, { treePath: `${projectId}/${branchId}` });
+
+    service
+      .getFiles(selectedProject.web_url, branchId)
+      .then(res => res.json())
+      .then((data) => {
+        const worker = new FilesDecoratorWorker();
+        worker.addEventListener('message', (e) => {
+          const { entries, treeList } = e.data;
+          const selectedTree = state.trees[`${projectId}/${branchId}`];
+
+          commit(types.SET_ENTRIES, entries);
+          commit(types.SET_DIRECTORY_DATA, { treePath: `${projectId}/${branchId}`, data: treeList });
+          commit(types.TOGGLE_LOADING, { entry: selectedTree, forceValue: false });
+
+          worker.terminate();
+
+          resolve();
         });
-    } else {
-      resolve();
-    }
-  });
+
+        worker.postMessage({
+          data,
+          projectId,
+          branchId,
+        });
+      })
+      .catch((e) => {
+        flash('Error loading tree data. Please try again.', 'alert', document, null, false, true);
+        reject(e);
+      });
+  } else {
+    resolve();
+  }
+});
+
diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js
index a7e43a6dd2f..eba325a31df 100644
--- a/app/assets/javascripts/ide/stores/getters.js
+++ b/app/assets/javascripts/ide/stores/getters.js
@@ -1,8 +1,10 @@
-export const activeFile = state => state.openFiles.find(file => file.active) || null;
+export const activeFile = state =>
+  state.openFiles.find(file => file.active) || null;
 
 export const addedFiles = state => state.changedFiles.filter(f => f.tempFile);
 
-export const modifiedFiles = state => state.changedFiles.filter(f => !f.tempFile);
+export const modifiedFiles = state =>
+  state.changedFiles.filter(f => !f.tempFile);
 
 export const projectsWithTrees = state =>
   Object.keys(state.projects).map(projectId => {
diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index f8d0262e120..db3893b97d4 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -8,13 +8,7 @@ export default {
 
     if (active && !state.entries[path].pending) {
       Object.assign(state, {
-        openFiles: state.openFiles.map(f => {
-          if (f.pending) {
-            return Object.assign(f, { active: false });
-          }
-
-          return f;
-        }),
+        openFiles: state.openFiles.map(f => Object.assign(f, { active: !(f.pending && f.active) })),
       });
     }
   },
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index fcb35e2e67f..65046f6665e 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -720,7 +720,9 @@
     }
 
     .ide-view {
-      height: calc(100vh - #{$header-height + $performance-bar-height + $flash-height});
+      height: calc(
+        100vh - #{$header-height + $performance-bar-height + $flash-height}
+      );
     }
   }
 }
-- 
cgit v1.2.1


From 6bec91bfc9ec15556e833f4d8f441328d135638e Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 28 Mar 2018 14:08:15 +0100
Subject: fixed karma

---
 app/assets/javascripts/ide/stores/mutations/file.js | 4 +++-
 spec/javascripts/ide/stores/mutations/file_spec.js  | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index db3893b97d4..4fafcfd0ea1 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -8,7 +8,9 @@ export default {
 
     if (active && !state.entries[path].pending) {
       Object.assign(state, {
-        openFiles: state.openFiles.map(f => Object.assign(f, { active: !(f.pending && f.active) })),
+        openFiles: state.openFiles.map(f =>
+          Object.assign(f, { active: f.pending ? false : f.active }),
+        ),
       });
     }
   },
diff --git a/spec/javascripts/ide/stores/mutations/file_spec.js b/spec/javascripts/ide/stores/mutations/file_spec.js
index 3f379ff219b..4f9e00b8543 100644
--- a/spec/javascripts/ide/stores/mutations/file_spec.js
+++ b/spec/javascripts/ide/stores/mutations/file_spec.js
@@ -27,6 +27,7 @@ describe('Multi-file store file mutations', () => {
       localState.openFiles.push({
         ...localFile,
         pending: true,
+        active: true,
       });
 
       mutations.SET_FILE_ACTIVE(localState, {
-- 
cgit v1.2.1


From 259adc34155c2a23dfa482cc1d2664e80200dcc8 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 3 Apr 2018 11:10:01 +0100
Subject: Updated components to PascalCase

Added comment for `key` usage
---
 .../ide/components/commit_sidebar/list_item.vue          |  4 ++--
 app/assets/javascripts/ide/components/repo_editor.vue    |  1 +
 app/assets/javascripts/ide/components/repo_tab.vue       | 16 ++++++++--------
 app/assets/javascripts/ide/stores/utils.js               |  2 ++
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index 9affc14a57c..560cdd941cd 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -1,10 +1,10 @@
 <script>
 import { mapActions } from 'vuex';
-import icon from '~/vue_shared/components/icon.vue';
+import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    icon,
+    Icon,
   },
   props: {
     file: {
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 0a61b49c950..b1a16350c19 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -21,6 +21,7 @@ export default {
   },
   watch: {
     file(oldVal, newVal) {
+      // Compare key to allow for files opened in review mode to be cached differently
       if (newVal.key !== this.file.key) {
         this.initMonaco();
       }
diff --git a/app/assets/javascripts/ide/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue
index 6e65e55e1f6..304a73ed1ad 100644
--- a/app/assets/javascripts/ide/components/repo_tab.vue
+++ b/app/assets/javascripts/ide/components/repo_tab.vue
@@ -1,17 +1,17 @@
 <script>
 import { mapActions } from 'vuex';
 
-import fileIcon from '~/vue_shared/components/file_icon.vue';
-import icon from '~/vue_shared/components/icon.vue';
-import fileStatusIcon from './repo_file_status_icon.vue';
-import changedFileIcon from './changed_file_icon.vue';
+import FileIcon from '~/vue_shared/components/file_icon.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import FileStatusIcon from './repo_file_status_icon.vue';
+import ChangedFileIcon from './changed_file_icon.vue';
 
 export default {
   components: {
-    fileStatusIcon,
-    fileIcon,
-    icon,
-    changedFileIcon,
+    FileStatusIcon,
+    FileIcon,
+    Icon,
+    ChangedFileIcon,
   },
   props: {
     tab: {
diff --git a/app/assets/javascripts/ide/stores/utils.js b/app/assets/javascripts/ide/stores/utils.js
index 3389eeeaa2e..63e4de3b17d 100644
--- a/app/assets/javascripts/ide/stores/utils.js
+++ b/app/assets/javascripts/ide/stores/utils.js
@@ -1,5 +1,7 @@
 export const dataStructure = () => ({
   id: '',
+  // Key will contain a mixture of ID and path
+  // it can also contain a prefix `pending-` for files opened in review mode
   key: '',
   type: '',
   projectId: '',
-- 
cgit v1.2.1