Display unload warning if MR edit changed

Display an unload warning if MR has been edited

app/assets/javascripts/pages/projects/merge_requests/edit/check_form_state.js

+import { serializeForm } from '~/lib/utils/forms';
+
+const findForm = () => document.querySelector('.merge-request-form');
+const serializeFormData = () => JSON.stringify(serializeForm(findForm()));
+
+export default () => {
+  const oldFormData = serializeFormData();
+
+  const compareFormData = (e) => {
+    const newFormData = serializeFormData();
+
+    if (oldFormData !== newFormData) {
+      e.preventDefault();
+      // eslint-disable-next-line no-param-reassign
+      e.returnValue = ''; // Chrome requires returnValue to be set
+    }
+  };
+
+  window.addEventListener('beforeunload', compareFormData);
+
+  findForm().addEventListener('submit', () =>
+    window.removeEventListener('beforeunload', compareFormData),
+  );
+};

app/assets/javascripts/pages/projects/merge_requests/edit/index.js

 import initMergeRequest from '~/pages/projects/merge_requests/init_merge_request';
+import initCheckFormState from './check_form_state';
 
-document.addEventListener('DOMContentLoaded', initMergeRequest);
+document.addEventListener('DOMContentLoaded', () => {
+  initMergeRequest();
+  initCheckFormState();
+});

changelogs/unreleased/290622-display-warning-mr-edit.yml

+---
+title: Display unload warning if MR edit changed
+merge_request: 53438
+author:
+type: added

ee/app/assets/javascripts/approvals/components/mr_edit/mr_rules_hidden_inputs.vue

@@ -23,6 +23,9 @@ export default {
       fallbackApprovalsRequired: (state) => state.approvals.fallbackApprovalsRequired,
     }),
   },
+  mounted() {
+    this.$root.$emit('hidden-inputs-mounted');
+  },
   INPUT_ID,
   INPUT_SOURCE_ID,
   INPUT_NAME,

ee/app/assets/javascripts/pages/projects/merge_requests/shared/init_form.js

 import mountApprovals from 'ee/approvals/mount_mr_edit';
 import mountBlockingMergeRequestsInput from 'ee/projects/merge_requests/blocking_mr_input';
+import initCheckFormState from '~/pages/projects/merge_requests/edit/check_form_state';
 
 export default () => {
-  mountApprovals(document.getElementById('js-mr-approvals-input'));
+  const editMrApp = mountApprovals(document.getElementById('js-mr-approvals-input'));
   mountBlockingMergeRequestsInput(document.getElementById('js-blocking-merge-requests-input'));
+
+  editMrApp.$on('hidden-inputs-mounted', initCheckFormState);
 };

spec/frontend/pages/projects/merge_requests/edit/check_form_state_spec.js

+import initCheckFormState from '~/pages/projects/merge_requests/edit/check_form_state';
+
+describe('Check form state', () => {
+  const findInput = () => document.querySelector('#form-input');
+
+  let beforeUnloadEvent;
+  let setDialogContent;
+
+  beforeEach(() => {
+    setFixtures(`
+      <form class="merge-request-form">
+        <input type="text" name="test" id="form-input"/>
+      </form>`);
+
+    beforeUnloadEvent = new Event('beforeunload');
+    jest.spyOn(beforeUnloadEvent, 'preventDefault');
+    setDialogContent = jest.spyOn(beforeUnloadEvent, 'returnValue', 'set');
+
+    initCheckFormState();
+  });
+
+  afterEach(() => {
+    beforeUnloadEvent.preventDefault.mockRestore();
+    setDialogContent.mockRestore();
+  });
+
+  it('shows confirmation dialog when there are unsaved changes', () => {
+    findInput().value = 'value changed';
+    window.dispatchEvent(beforeUnloadEvent);
+
+    expect(beforeUnloadEvent.preventDefault).toHaveBeenCalled();
+    expect(setDialogContent).toHaveBeenCalledWith('');
+  });
+
+  it('does not show confirmation dialog when there are no unsaved changes', () => {
+    window.dispatchEvent(beforeUnloadEvent);
+
+    expect(beforeUnloadEvent.preventDefault).not.toHaveBeenCalled();
+    expect(setDialogContent).not.toHaveBeenCalled();
+  });
+});