Merge branch 'ide-warn-staged-files' into 'master'

Warn in IDE when user navigates away with staged changes

See merge request gitlab-org/gitlab-ce!20857

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: 20857
+author:
+type: added

locale/gitlab.pot

@@ -555,6 +555,9 @@ msgstr ""
 msgid "Are you sure you want to delete this pipeline schedule?"
 msgstr ""
+msgid "Are you sure you want to lose unsaved changes?"
+msgstr ""
+
 msgid "Are you sure you want to remove %{group_name}?"
 msgstr ""

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');