Merge branch '53728-warn-in-web-editor-when-user-navigates-away' into 'master'

Resolve "Warn in Web Editor when user navigates away"

Closes #53728

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

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) {

changelogs/unreleased/53728-warn-in-web-editor-when-user-navigates-away.yml

+---
+title: Prevent user from navigating away from file edit without commit
+merge_request:
+author:
+type: fixed

spec/javascripts/blob_edit/blob_bundle_spec.js

+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();
+  });
+});