fixed closing last file not opening the next available file

fixed right sidebar not being collapsible

app/assets/stylesheets/pages/repo.scss

@@ -68,7 +68,6 @@
 
     .ide-new-btn {
       display: none;
-      margin-top: -4px;
       margin-bottom: -4px;
       margin-right: -8px;
     }
@@ -84,7 +83,6 @@
         fill: $gl-text-color-secondary;
       }
     }
-
   }
 
   a {
@@ -290,7 +288,7 @@
 
     .margin-view-overlays .insert-sign,
     .margin-view-overlays .delete-sign {
-      opacity: .4;
+      opacity: 0.4;
     }
   }
 }
@@ -548,7 +546,6 @@
     height: 10px;
     margin-left: 3px;
   }
-
 }
 
 .multi-file-commit-list-path {
@@ -626,7 +623,7 @@
       top: 0;
       width: 100px;
       height: 1px;
-      background-color: rgba($red-500, .5);
+      background-color: rgba($red-500, 0.5);
     }
   }
 }
@@ -697,8 +694,12 @@
       }
 
       .multi-file-commit-panel .multi-file-commit-panel-inner-scroll {
-        max-height: calc(100vh - #{$header-height + $flash-height + $context-header-height});
-        min-height: calc(100vh - #{$header-height + $flash-height + $context-header-height});
+        max-height: calc(
+          100vh - #{$header-height + $flash-height + $context-header-height}
+        );
+        min-height: calc(
+          100vh - #{$header-height + $flash-height + $context-header-height}
+        );
       }
     }
   }
@@ -729,17 +730,24 @@
     }
 
     .ide-view {
-      height: calc(100vh - #{$header-height + $performance-bar-height + $flash-height});
+      height: calc(
+        100vh - #{$header-height + $performance-bar-height + $flash-height}
+      );
     }
 
     .multi-file-commit-panel .multi-file-commit-panel-inner-scroll {
-      max-height: calc(100vh - #{$header-height + $performance-bar-height + $flash-height + $context-header-height});
-      min-height: calc(100vh - #{$header-height + $performance-bar-height + $flash-height + $context-header-height});
+      max-height: calc(
+        100vh - #{$header-height + $performance-bar-height + $flash-height +
+          $context-header-height}
+      );
+      min-height: calc(
+        100vh - #{$header-height + $performance-bar-height + $flash-height +
+          $context-header-height}
+      );
     }
   }
 }
 
-
 .dragHandle {
   position: absolute;
   top: 0;

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

 <script>
-  import { mapGetters, mapState } from 'vuex';
-  import icon from '~/vue_shared/components/icon.vue';
-  import panelResizer from '~/vue_shared/components/panel_resizer.vue';
-  import repoCommitSection from './repo_commit_section.vue';
-  import ResizablePanel from './resizable_panel.vue';
+import { mapActions, mapGetters, mapState } from 'vuex';
+import icon from '~/vue_shared/components/icon.vue';
+import panelResizer from '~/vue_shared/components/panel_resizer.vue';
+import repoCommitSection from './repo_commit_section.vue';
+import ResizablePanel from './resizable_panel.vue';
 
-  export default {
-    components: {
-      repoCommitSection,
-      icon,
-      panelResizer,
-      ResizablePanel,
+export default {
+  components: {
+    repoCommitSection,
+    icon,
+    panelResizer,
+    ResizablePanel,
+  },
+  props: {
+    noChangesStateSvgPath: {
+      type: String,
+      required: true,
     },
-    props: {
-      noChangesStateSvgPath: {
-        type: String,
-        required: true,
-      },
-      committedStateSvgPath: {
-        type: String,
-        required: true,
-      },
+    committedStateSvgPath: {
+      type: String,
+      required: true,
     },
-    computed: {
-      ...mapState([
-        'changedFiles',
-        'rightPanelCollapsed',
-      ]),
-      ...mapGetters([
-        'currentIcon',
-      ]),
-    },
-  };
+  },
+  computed: {
+    ...mapState(['changedFiles', 'rightPanelCollapsed']),
+    ...mapGetters(['currentIcon']),
+  },
+  methods: {
+    ...mapActions(['setPanelCollapsedStatus']),
+  },
+};
 </script>
 
 <template>
@@ -66,7 +64,10 @@
         <button
           type="button"
           class="btn btn-transparent multi-file-commit-panel-collapse-btn"
-          @click.stop="toggleCollapsed"
+          @click.stop="setPanelCollapsedStatus({
+            side: 'right',
+            collapsed: !rightPanelCollapsed,
+          })"
         >
           <icon
             :name="currentIcon"

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

 <script>
-  import { mapActions } from 'vuex';
-  import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
-  import fileIcon from '~/vue_shared/components/file_icon.vue';
-  import router from '../ide_router';
-  import newDropdown from './new_dropdown/index.vue';
-  import fileStatusIcon from './repo_file_status_icon.vue';
-  import changedFileIcon from './changed_file_icon.vue';
+import { mapActions } from 'vuex';
+import skeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
+import fileIcon from '~/vue_shared/components/file_icon.vue';
+import router from '../ide_router';
+import newDropdown from './new_dropdown/index.vue';
+import fileStatusIcon from './repo_file_status_icon.vue';
+import changedFileIcon from './changed_file_icon.vue';
 
-  export default {
-    name: 'RepoFile',
-    components: {
-      skeletonLoadingContainer,
-      newDropdown,
-      fileStatusIcon,
-      fileIcon,
-      changedFileIcon,
+export default {
+  name: 'RepoFile',
+  components: {
+    skeletonLoadingContainer,
+    newDropdown,
+    fileStatusIcon,
+    fileIcon,
+    changedFileIcon,
+  },
+  props: {
+    file: {
+      type: Object,
+      required: true,
     },
-    props: {
-      file: {
-        type: Object,
-        required: true,
-      },
-      level: {
-        type: Number,
-        required: true,
-      },
+    level: {
+      type: Number,
+      required: true,
     },
-    computed: {
-      isTree() {
-        return this.file.type === 'tree';
-      },
-      isBlob() {
-        return this.file.type === 'blob';
-      },
-      levelIndentation() {
-        return {
-          marginLeft: `${this.level * 16}px`,
-        };
-      },
-      fileClass() {
-        return {
-          'file-open': this.isBlob && this.file.opened,
-          'file-active': this.isBlob && this.file.active,
-          folder: this.isTree,
-        };
-      },
+  },
+  computed: {
+    isTree() {
+      return this.file.type === 'tree';
     },
-    updated() {
-      if (this.file.type === 'blob' && this.file.active) {
-        this.$el.scrollIntoView();
-      }
+    isBlob() {
+      return this.file.type === 'blob';
+    },
+    levelIndentation() {
+      return {
+        marginLeft: `${this.level * 16}px`,
+      };
+    },
+    fileClass() {
+      return {
+        'file-open': this.isBlob && this.file.opened,
+        'file-active': this.isBlob && this.file.active,
+        folder: this.isTree,
+      };
     },
-    methods: {
-      ...mapActions(['toggleTreeOpen', 'updateDelayViewerUpdated']),
-      clickFile() {
-        // Manual Action if a tree is selected/opened
-        if (
-          this.isTree &&
-          this.$router.currentRoute.path === `/project${this.file.url}`
-        ) {
-          this.toggleTreeOpen(this.file.path);
-        }
+  },
+  updated() {
+    if (this.file.type === 'blob' && this.file.active) {
+      this.$el.scrollIntoView();
+    }
+  },
+  methods: {
+    ...mapActions(['toggleTreeOpen', 'updateDelayViewerUpdated']),
+    clickFile() {
+      // Manual Action if a tree is selected/opened
+      if (
+        this.isTree &&
+        this.$router.currentRoute.path === `/project${this.file.url}`
+      ) {
+        this.toggleTreeOpen(this.file.path);
+      }
 
-        const delayPromise = this.file.changed
-          ? Promise.resolve()
-          : this.updateDelayViewerUpdated(true);
+      const delayPromise = this.file.changed
+        ? Promise.resolve()
+        : this.updateDelayViewerUpdated(true);
 
-        return delayPromise.then(() => {
-          router.push(`/project${this.file.url}`);
-        });
-      },
+      return delayPromise.then(() => {
+        router.push(`/project${this.file.url}`);
+      });
     },
-  };
+  },
+};
 </script>
 
 <template>
@@ -101,16 +101,17 @@
             :file="file"
           />
         </span>
+        <changed-file-icon
+          :file="file"
+          v-if="file.changed || file.tempFile"
+          class="prepend-top-5 pull-right"
+        />
         <new-dropdown
           v-if="isTree"
           :project-id="file.projectId"
           :branch="file.branchId"
           :path="file.path"
-        />
-        <changed-file-icon
-          :file="file"
-          v-if="file.changed || file.tempFile"
-          class="prepend-top-5"
+          class="pull-right prepend-left-8"
         />
       </div>
     </div>

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

@@ -7,7 +7,7 @@ import router from '../../ide_router';
 import { setPageTitle } from '../utils';
 
 export const closeFile = ({ commit, state, getters, dispatch }, path) => {
-  const indexOfClosedFile = state.openFiles.indexOf(path);
+  const indexOfClosedFile = state.openFiles.findIndex(f => f.path === path);
   const file = state.entries[path];
   const fileWasActive = file.active;
 
@@ -16,7 +16,7 @@ export const closeFile = ({ commit, state, getters, dispatch }, path) => {
 
   if (state.openFiles.length > 0 && fileWasActive) {
     const nextIndexToOpen = indexOfClosedFile === 0 ? 0 : indexOfClosedFile - 1;
-    const nextFileToOpen = state.entries[state.openFiles[nextIndexToOpen]];
+    const nextFileToOpen = state.entries[state.openFiles[nextIndexToOpen].path];
 
     router.push(`/project${nextFileToOpen.url}`);
   } else if (!state.openFiles.length) {

ee/app/assets/javascripts/ide/stores/modules/commit/actions.js

@@ -137,6 +137,7 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState }) =
     }
 
     dispatch('setLastCommitMessage', data);
+    dispatch('updateCommitMessage', '');
 
     if (state.commitAction === consts.COMMIT_TO_NEW_BRANCH_MR) {
       dispatch(