Fix "Stay on Page" alert showing in empty snippet

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/50400

app/assets/javascripts/snippets/components/edit.vue

@@ -72,6 +72,15 @@ export default {
     hasBlobChanges() {
       return this.actions.length > 0;
     },
+    hasNoChanges() {
+      return (
+        this.actions.every(
+          (action) => !action.content && !action.filePath && !action.previousPath,
+        ) &&
+        !this.snippet.title &&
+        !this.snippet.description
+      );
+    },
     hasValidBlobs() {
       return this.actions.every((x) => x.content);
     },
@@ -116,7 +125,7 @@ export default {
     onBeforeUnload(e = {}) {
       const returnValue = __('Are you sure you want to lose unsaved changes?');
 
-      if (!this.hasBlobChanges || this.isUpdating) return undefined;
+      if (!this.hasBlobChanges || this.hasNoChanges || this.isUpdating) return undefined;
 
       Object.assign(e, { returnValue });
       return returnValue;

changelogs/unreleased/262102-fix-stay-on-page-alert-showing-in-empty-snippet.yml

+---
+title: Fix "Stay on Page" alert showing in empty snippet
+merge_request: 50400
+author: Kev @KevSlashNull
+type: fixed

spec/frontend/snippets/components/edit_spec.js

@@ -167,6 +167,8 @@ describe('Snippet Edit app', () => {
     visibilityLevel,
     blobActions: [],
   });
+  const setTitle = (val) => wrapper.find(TitleField).vm.$emit('input', val);
+  const setDescription = (val) => wrapper.find(SnippetDescriptionEdit).vm.$emit('input', val);
 
   // Ideally we wouldn't call this method directly, but we don't have a way to trigger
   // apollo responses yet.
@@ -341,11 +343,30 @@ describe('Snippet Edit app', () => {
     });
 
     describe('on before unload', () => {
+      const caseNoActions = () => triggerBlobActions([]);
+      const caseEmptyAction = () => triggerBlobActions([testEntries.empty.diff]);
+      const caseSomeActions = () => triggerBlobActions([testEntries.updated.diff]);
+      const caseTitleIsSet = () => {
+        caseEmptyAction();
+        setTitle('test');
+      };
+      const caseDescriptionIsSet = () => {
+        caseEmptyAction();
+        setDescription('test');
+      };
+      const caseClickSubmitBtn = () => {
+        caseSomeActions();
+        clickSubmitBtn();
+      };
+
       it.each`
         condition                       | expectPrevented | action
-        ${'there are no actions'}       | ${false}        | ${() => triggerBlobActions([])}
-        ${'there are actions'}          | ${true}         | ${() => triggerBlobActions([testEntries.updated.diff])}
-        ${'the snippet is being saved'} | ${false}        | ${() => clickSubmitBtn()}
+        ${'there are no actions'}       | ${false}        | ${caseNoActions}
+        ${'there is an empty action'}   | ${false}        | ${caseEmptyAction}
+        ${'there are actions'}          | ${true}         | ${caseSomeActions}
+        ${'the title is set'}           | ${true}         | ${caseTitleIsSet}
+        ${'the description is set'}     | ${true}         | ${caseDescriptionIsSet}
+        ${'the snippet is being saved'} | ${false}        | ${caseClickSubmitBtn}
       `(
         'handles before unload prevent when $condition (expectPrevented=$expectPrevented)',
         ({ expectPrevented, action }) => {

spec/frontend/snippets/test_utils.js

@@ -56,6 +56,15 @@ export const testEntries = {
       content: CONTENT_2,
     },
   },
+  empty: {
+    id: 'empty',
+    diff: {
+      action: SNIPPET_BLOB_ACTION_CREATE,
+      filePath: '',
+      previousPath: '',
+      content: '',
+    },
+  },
 };
 
 export const createBlobFromTestEntry = ({ diff, origContent }, isOrig = false) => ({