Prevent redirecting to snippet view on error

When getting seemingly successful response from the create/update
snippet mutation, we still should not redirect to the snippet view in
case 'errors' array is not empty

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

@@ -11,7 +11,11 @@ import FormFooterActions from '~/vue_shared/components/form/form_footer_actions.
 import UpdateSnippetMutation from '../mutations/updateSnippet.mutation.graphql';
 import CreateSnippetMutation from '../mutations/createSnippet.mutation.graphql';
 import { getSnippetMixin } from '../mixins/snippets';
-import { SNIPPET_VISIBILITY_PRIVATE } from '../constants';
+import {
+  SNIPPET_VISIBILITY_PRIVATE,
+  SNIPPET_CREATE_MUTATION_ERROR,
+  SNIPPET_UPDATE_MUTATION_ERROR,
+} from '../constants';
 import SnippetBlobEdit from './snippet_blob_edit.vue';
 import SnippetVisibilityEdit from './snippet_visibility_edit.vue';
 import SnippetDescriptionEdit from './snippet_description_edit.vue';
@@ -98,7 +102,11 @@ export default {
       this.fileName = newName;
     },
     flashAPIFailure(err) {
-      Flash(sprintf(__("Can't update snippet: %{err}"), { err }));
+      const defaultErrorMsg = this.newSnippet
+        ? SNIPPET_CREATE_MUTATION_ERROR
+        : SNIPPET_UPDATE_MUTATION_ERROR;
+      Flash(sprintf(defaultErrorMsg, { err }));
+      this.isUpdating = false;
     },
     onNewSnippetFetched() {
       this.newSnippet = true;
@@ -151,7 +159,6 @@ export default {
           redirectTo(baseObj.snippet.webUrl);
         })
         .catch(e => {
-          this.isUpdating = false;
           this.flashAPIFailure(e);
         });
     },

app/assets/javascripts/snippets/constants.js

@@ -22,3 +22,6 @@ export const SNIPPET_VISIBILITY = {
     description: __('The snippet can be accessed without any authentication.'),
   },
 };
+
+export const SNIPPET_CREATE_MUTATION_ERROR = __("Can't create snippet: %{err}");
+export const SNIPPET_UPDATE_MUTATION_ERROR = __("Can't update snippet: %{err}");

locale/gitlab.pot

@@ -3695,6 +3695,9 @@ msgstr ""
 msgid "Can override approvers and approvals required per merge request"
 msgstr ""
 
+msgid "Can't create snippet: %{err}"
+msgstr ""
+
 msgid "Can't edit as source branch was deleted"
 msgstr ""
 

spec/frontend/snippets/components/edit_spec.js

 import { shallowMount } from '@vue/test-utils';
 import axios from '~/lib/utils/axios_utils';
+import Flash from '~/flash';
 
 import { GlLoadingIcon } from '@gitlab/ui';
 import { joinPaths, redirectTo } from '~/lib/utils/url_utility';
@@ -10,6 +11,7 @@ import SnippetVisibilityEdit from '~/snippets/components/snippet_visibility_edit
 import SnippetBlobEdit from '~/snippets/components/snippet_blob_edit.vue';
 import TitleField from '~/vue_shared/components/form/title.vue';
 import FormFooterActions from '~/vue_shared/components/form/form_footer_actions.vue';
+import { SNIPPET_CREATE_MUTATION_ERROR, SNIPPET_UPDATE_MUTATION_ERROR } from '~/snippets/constants';
 
 import UpdateSnippetMutation from '~/snippets/mutations/updateSnippet.mutation.graphql';
 import CreateSnippetMutation from '~/snippets/mutations/createSnippet.mutation.graphql';
@@ -27,6 +29,8 @@ jest.mock('~/lib/utils/url_utility', () => ({
     .mockReturnValue('contentApiURL'),
 }));
 
+jest.mock('~/flash');
+
 let flashSpy;
 
 const contentMock = 'Foo Bar';
@@ -290,6 +294,26 @@ describe('Snippet Edit app', () => {
           expect(flashSpy).toHaveBeenCalledWith(apiError);
         });
       });
+
+      it.each`
+        isNew    | status        | expectation
+        ${true}  | ${`new`}      | ${SNIPPET_CREATE_MUTATION_ERROR.replace('%{err}', '')}
+        ${false} | ${`existing`} | ${SNIPPET_UPDATE_MUTATION_ERROR.replace('%{err}', '')}
+      `(
+        `renders the correct error message if mutation fails for $status snippet`,
+        ({ isNew, expectation }) => {
+          createComponent({
+            data: {
+              newSnippet: isNew,
+            },
+            mutationRes: mutationTypes.REJECT,
+          });
+          wrapper.vm.handleFormSubmit();
+          return waitForPromises().then(() => {
+            expect(Flash).toHaveBeenCalledWith(expect.stringContaining(expectation));
+          });
+        },
+      );
     });
   });
 });