Merge branch '213652-don-t-lose-user-content-in-wiki' into 'master'

Resolve "Don't lose user content in wiki"

See merge request gitlab-org/gitlab!30037

app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue

@@ -46,6 +46,7 @@ export default {
   },
   methods: {
     onSubmit() {
+      window.onbeforeunload = null;
       this.$refs.form.submit();
     },
   },

app/assets/javascripts/pages/projects/wikis/wikis.js

@@ -44,6 +44,19 @@ export default class Wikis {
         linkExample.innerHTML = MARKDOWN_LINK_TEXT[e.target.value];
       });
     }
+
+    const wikiTextarea = document.querySelector('form.wiki-form #wiki_content');
+    const wikiForm = document.querySelector('form.wiki-form');
+
+    if (wikiTextarea) {
+      wikiTextarea.addEventListener('input', () => {
+        window.onbeforeunload = () => '';
+      });
+
+      wikiForm.addEventListener('submit', () => {
+        window.onbeforeunload = null;
+      });
+    }
   }
 
   handleWikiTitleChange(e) {

changelogs/unreleased/213652-don-t-lose-user-content-in-wiki.yml

+---
+title: Warn user before losing wiki content
+merge_request: 30037
+author:
+type: fixed

spec/frontend/wikis_spec.js

@@ -14,6 +14,7 @@ describe('Wikis', () => {
           <option value="asciidoc">AsciiDoc</option>
           <option value="org">Org</option>
         </select>
+        <textarea id="wiki_content"></textarea>
         <code class="js-markup-link-example">{Link title}[link:page-slug]</code>
       </form>
       `;
@@ -24,6 +25,10 @@ describe('Wikis', () => {
     let changeFormatSelect;
     let linkExample;
 
+    const findBeforeUnloadWarning = () => window.onbeforeunload?.();
+    const findContent = () => document.getElementById('wiki_content');
+    const findForm = () => document.querySelector('.wiki-form');
+
     describe('when the wiki page is being created', () => {
       const formHtmlFixture = editFormHtmlFixture({ newPage: true });
 
@@ -94,6 +99,27 @@ describe('Wikis', () => {
 
         expect(linkExample.innerHTML).toBe(text);
       });
+
+      it('starts with no unload warning', () => {
+        expect(findBeforeUnloadWarning()).toBeUndefined();
+      });
+
+      describe('when wiki content is updated', () => {
+        beforeEach(() => {
+          const content = findContent();
+          content.value = 'Lorem ipsum dolar sit!';
+          content.dispatchEvent(new Event('input'));
+        });
+
+        it('sets before unload warning', () => {
+          expect(findBeforeUnloadWarning()).toBe('');
+        });
+
+        it('when form submitted, unsets before unload warning', () => {
+          findForm().dispatchEvent(new Event('submit'));
+          expect(findBeforeUnloadWarning()).toBeUndefined();
+        });
+      });
     });
   });
 });