Restore changed file status in IDE

app/assets/javascripts/ide/components/new_dropdown/index.vue

@@ -27,6 +27,7 @@
       return {
         openModal: false,
         modalType: '',
+        dropdownOpen: false,
       };
     },
     methods: {
@@ -37,18 +38,26 @@
       hideModal() {
         this.openModal = false;
       },
+      openDropdown() {
+        this.dropdownOpen = !this.dropdownOpen;
+      },
     },
   };
 </script>
 
 <template>
   <div class="repo-new-btn pull-right">
-    <div class="dropdown">
+    <div
+      class="dropdown"
+      :class="{
+        open: dropdownOpen,
+      }"
+    >
       <button
         type="button"
         class="btn btn-sm btn-default dropdown-toggle add-to-tree"
-        data-toggle="dropdown"
         aria-label="Create new file or directory"
+        @click.stop="openDropdown()"
       >
         <icon
           name="plus"

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

@@ -93,10 +93,12 @@ export default {
       this.editor.attachModel(this.model);
 
       this.model.onChange((m) => {
-        this.changeFileContent({
-          file: this.activeFile,
-          content: m.getValue(),
-        });
+        if (this.model.file.active) {
+          this.changeFileContent({
+            file: this.model.file,
+            content: m.getValue(),
+          });
+        }
       });
 
       // Handle Cursor Position

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

@@ -84,7 +84,11 @@ export const handleTreeEntryAction = ({ commit, dispatch }, row) => {
   } else if (row.type === 'submodule') {
     commit(types.TOGGLE_LOADING, row);
     visitUrl(row.url);
-  } else if (row.type === 'blob' && row.opened) {
+  } else if (row.type === 'blob' && (row.opened || row.changed)) {
+    if (row.changed) {
+      commit(types.TOGGLE_FILE_OPEN, row);
+    }
+
     dispatch('setFileActive', row);
   } else {
     dispatch('getFileData', row);
@@ -176,6 +180,7 @@ export const updateDirectoryData = (
     level,
     type,
     parentTreeUrl,
+    state,
   });
 
   const formattedData = [

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

@@ -161,7 +161,24 @@ export const createOrMergeEntry = ({ tree,
                                      entry,
                                      type,
                                      parentTreeUrl,
-                                     level }) => {
+                                     level,
+                                     state }) => {
+  if (state.changedFiles.length) {
+    const foundChangedFileFile = findEntry(state.changedFiles, type, entry.name);
+
+    if (foundChangedFileFile) {
+      return foundChangedFileFile;
+    }
+  }
+
+  if (state.openFiles.length) {
+    const foundOpenFile = findEntry(state.openFiles, type, entry.path);
+
+    if (foundOpenFile) {
+      return foundOpenFile;
+    }
+  }
+
   const found = findEntry(tree.tree || tree, type, entry.name);
 
   if (found) {