Resolve "Warn in Web Editor when user navigates away"

3 files changed, 43 insertions, 0 deletions

diff --git a/app/assets/javascripts/blob_edit/blob_bundle.js b/app/assets/javascripts/blob_edit/blob_bundle.js
index ec27ae8c291..9f547471170 100644
--- a/app/assets/javascripts/blob_edit/blob_bundle.js
+++ b/app/assets/javascripts/blob_edit/blob_bundle.js
@@ -16,9 +16,17 @@ export default () => {
     const filePath = editBlobForm.data('blobFilename');
     const currentAction = $('.js-file-title').data('currentAction');
     const projectId = editBlobForm.data('project-id');
+    const commitButton = $('.js-commit-button');
+
+    commitButton.on('click', () => {
+      window.onbeforeunload = null;
+    });
 
     new EditBlob(`${urlRoot}${assetsPath}`, filePath, currentAction, projectId);
     new NewCommitForm(editBlobForm);
+
+    // returning here blocks page navigation
+    window.onbeforeunload = () => '';
   }
 
   if (uploadBlobForm.length) {
diff --git a/changelogs/unreleased/53728-warn-in-web-editor-when-user-navigates-away.yml b/changelogs/unreleased/53728-warn-in-web-editor-when-user-navigates-away.yml
new file mode 100644
index 00000000000..8377fdc6133
--- /dev/null
+++ b/changelogs/unreleased/53728-warn-in-web-editor-when-user-navigates-away.yml
@@ -0,0 +1,5 @@
+---
+title: Prevent user from navigating away from file edit without commit
+merge_request:
+author:
+type: fixed
diff --git a/spec/javascripts/blob_edit/blob_bundle_spec.js b/spec/javascripts/blob_edit/blob_bundle_spec.js
new file mode 100644
index 00000000000..759d170af77
--- /dev/null
+++ b/spec/javascripts/blob_edit/blob_bundle_spec.js
@@ -0,0 +1,30 @@
+import blobBundle from '~/blob_edit/blob_bundle';
+import $ from 'jquery';
+
+window.ace = {
+  config: {
+    set: () => {},
+    loadModule: () => {},
+  },
+  edit: () => ({ focus: () => {} }),
+};
+
+describe('EditBlob', () => {
+  beforeEach(() => {
+    setFixtures(`
+      <div class="js-edit-blob-form">
+        <button class="js-commit-button"></button>
+      </div>`);
+    blobBundle();
+  });
+
+  it('sets the window beforeunload listener to a function returning a string', () => {
+    expect(window.onbeforeunload()).toBe('');
+  });
+
+  it('removes beforeunload listener if commit button is clicked', () => {
+    $('.js-commit-button').click();
+
+    expect(window.onbeforeunload).toBeNull();
+  });
+});