Warn in IDE when user navigates away with staged changes

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

 <script>
 import Mousetrap from 'mousetrap';
 import { mapActions, mapState, mapGetters } from 'vuex';
+import { __ } from '~/locale';
 import NewModal from './new_dropdown/modal.vue';
 import IdeSidebar from './ide_side_bar.vue';
 import RepoTabs from './repo_tabs.vue';
@@ -25,7 +26,6 @@ export default {
   },
   computed: {
     ...mapState([
-      'changedFiles',
       'openFiles',
       'viewer',
       'currentMergeRequestId',
@@ -34,18 +34,10 @@ export default {
       'currentProjectId',
       'errorMessage',
     ]),
-    ...mapGetters(['activeFile', 'hasChanges']),
+    ...mapGetters(['activeFile', 'hasChanges', 'someUncommitedChanges']),
   },
   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;
-    };
+    window.onbeforeunload = e => this.onBeforeUnload(e);
 
     Mousetrap.bind(['t', 'command+p', 'ctrl+p'], e => {
       if (e.preventDefault) {
@@ -59,6 +51,16 @@ export default {
   },
   methods: {
     ...mapActions(['toggleFileFinder']),
+    onBeforeUnload(e = {}) {
+      const returnValue = __('Are you sure you want to lose unsaved changes?');
+
+      if (!this.someUncommitedChanges) return undefined;
+
+      Object.assign(e, {
+        returnValue,
+      });
+      return returnValue;
+    },
     mousetrapStopCallback(e, el, combo) {
       if (
         (combo === 't' && el.classList.contains('dropdown-input-field')) ||

changelogs/unreleased/ide-warn-staged-files.yml

+---
+title: Warn user when reload IDE with staged changes
+merge_request:
+author:
+type: added

spec/javascripts/ide/components/ide_spec.js

@@ -45,6 +45,33 @@ describe('ide component', () => {
     });
   });
 
+  describe('onBeforeUnload', () => {
+    it('returns undefined when no staged files or changed files', () => {
+      expect(vm.onBeforeUnload()).toBe(undefined);
+    });
+
+    it('returns warning text when their are changed files', () => {
+      vm.$store.state.changedFiles.push(file());
+
+      expect(vm.onBeforeUnload()).toBe('Are you sure you want to lose unsaved changes?');
+    });
+
+    it('returns warning text when their are staged files', () => {
+      vm.$store.state.stagedFiles.push(file());
+
+      expect(vm.onBeforeUnload()).toBe('Are you sure you want to lose unsaved changes?');
+    });
+
+    it('updates event object', () => {
+      const event = {};
+      vm.$store.state.stagedFiles.push(file());
+
+      vm.onBeforeUnload(event);
+
+      expect(event.returnValue).toBe('Are you sure you want to lose unsaved changes?');
+    });
+  });
+
   describe('file finder', () => {
     beforeEach(done => {
       spyOn(vm, 'toggleFileFinder');