Merge branch '217727-snippet-update-error' into 'master'

Prevent redirecting to snippet view on error

See merge request gitlab-org/gitlab!33107

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

@@ -155,8 +155,9 @@ export default {
           const errors = baseObj?.errors;
           if (errors.length) {
             this.flashAPIFailure(errors[0]);
+          } else {
+            redirectTo(baseObj.snippet.webUrl);
           }
-          redirectTo(baseObj.snippet.webUrl);
         })
         .catch(e => {
           this.flashAPIFailure(e);
@@ -215,7 +216,7 @@ export default {
             variant="success"
             :disabled="updatePrevented"
             data-qa-selector="submit_button"
-            @click="handleFormSubmit"
+            @click.prevent="handleFormSubmit"
             >{{ saveButtonLabel }}</gl-button
           >
         </template>

spec/frontend/snippets/components/edit_spec.js

@@ -38,6 +38,7 @@ const rawPathMock = '/foo/bar';
 const rawProjectPathMock = '/project/path';
 const newlyEditedSnippetUrl = 'http://foo.bar';
 const apiError = { message: 'Ufff' };
+const mutationError = 'Bummer';
 
 const defaultProps = {
   snippetGid: 'gid://gitlab/PersonalSnippet/42',
@@ -60,10 +61,26 @@ describe('Snippet Edit app', () => {
     },
   });
 
+  const resolveMutateWithErrors = jest.fn().mockResolvedValue({
+    data: {
+      updateSnippet: {
+        errors: [mutationError],
+        snippet: {
+          webUrl: newlyEditedSnippetUrl,
+        },
+      },
+      createSnippet: {
+        errors: [mutationError],
+        snippet: null,
+      },
+    },
+  });
+
   const rejectMutation = jest.fn().mockRejectedValue(apiError);
 
   const mutationTypes = {
     RESOLVE: resolveMutate,
+    RESOLVE_WITH_ERRORS: resolveMutateWithErrors,
     REJECT: rejectMutation,
   };
 
@@ -284,6 +301,35 @@ describe('Snippet Edit app', () => {
         });
       });
 
+      it.each`
+        newSnippet | projectPath           | mutationName
+        ${true}    | ${rawProjectPathMock} | ${'CreateSnippetMutation with projectPath'}
+        ${true}    | ${''}                 | ${'CreateSnippetMutation without projectPath'}
+        ${false}   | ${rawProjectPathMock} | ${'UpdateSnippetMutation with projectPath'}
+        ${false}   | ${''}                 | ${'UpdateSnippetMutation without projectPath'}
+      `(
+        'does not redirect to snippet view if the seemingly successful' +
+          ' $mutationName response contains errors',
+        ({ newSnippet, projectPath }) => {
+          createComponent({
+            data: {
+              newSnippet,
+            },
+            props: {
+              ...defaultProps,
+              projectPath,
+            },
+            mutationRes: mutationTypes.RESOLVE_WITH_ERRORS,
+          });
+
+          wrapper.vm.handleFormSubmit();
+          return waitForPromises().then(() => {
+            expect(redirectTo).not.toHaveBeenCalled();
+            expect(flashSpy).toHaveBeenCalledWith(mutationError);
+          });
+        },
+      );
+
       it('flashes an error if mutation failed', () => {
         createComponent({
           mutationRes: mutationTypes.REJECT,