Merge branch 'ps-refactor-snippets-edit-spec-no-vm' into 'master'

Refactor snippets edit spec and small fixes

See merge request gitlab-org/gitlab!53576

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

@@ -18,6 +18,7 @@ import CreateSnippetMutation from '../mutations/createSnippet.mutation.graphql';
 import { getSnippetMixin } from '../mixins/snippets';
 import { SNIPPET_CREATE_MUTATION_ERROR, SNIPPET_UPDATE_MUTATION_ERROR } from '../constants';
 import { markBlobPerformance } from '../utils/blob';
+import { getErrorMessage } from '../utils/error';
 
 import SnippetBlobActionsEdit from './snippet_blob_actions_edit.vue';
 import SnippetVisibilityEdit from './snippet_visibility_edit.vue';
@@ -190,7 +191,10 @@ export default {
           }
         })
         .catch((e) => {
-          this.flashAPIFailure(e);
+          // eslint-disable-next-line no-console
+          console.error('[gitlab] unexpected error while updating snippet', e);
+
+          this.flashAPIFailure(getErrorMessage(e));
         });
     },
     updateActions(actions) {

app/assets/javascripts/snippets/mixins/snippets.js

@@ -11,10 +11,14 @@ export const getSnippetMixin = {
           ids: [this.snippetGid],
         };
       },
-      update: (data) => {
+      update(data) {
         const res = data.snippets.nodes[0];
+
+        // Set `snippet.blobs` since some child components are coupled to this.
         if (res) {
-          res.blobs = res.blobs.nodes;
+          // It's possible for us to not get any blobs in a response.
+          // In this case, we should default to current blobs.
+          res.blobs = res.blobs ? res.blobs.nodes : this.blobs;
         }
 
         return res;

app/assets/javascripts/snippets/utils/error.js

+import { isString } from 'lodash';
+import { __ } from '~/locale';
+
+export const UNEXPECTED_ERROR = __('Unexpected error');
+
+export const getErrorMessage = (e) => {
+  if (!e) {
+    return UNEXPECTED_ERROR;
+  }
+  if (isString(e)) {
+    return e;
+  }
+
+  return e.message || e.networkError || UNEXPECTED_ERROR;
+};

changelogs/unreleased/ps-refactor-snippets-edit-spec-no-vm.yml

+---
+title: Improve error message reporting in snippet create or update
+merge_request: 53576
+author:
+type: other

spec/frontend/snippets/test_utils.js

+import { TEST_HOST } from 'helpers/test_constants';
 import {
   SNIPPET_BLOB_ACTION_CREATE,
   SNIPPET_BLOB_ACTION_UPDATE,
@@ -8,6 +9,51 @@ import {
 const CONTENT_1 = 'Lorem ipsum dolar\nSit amit\n\nGoodbye!\n';
 const CONTENT_2 = 'Lorem ipsum dolar sit amit.\n\nGoodbye!\n';
 
+export const createGQLSnippet = () => ({
+  __typename: 'Snippet',
+  id: 7,
+  title: 'Snippet Title',
+  description: 'Lorem ipsum snippet desc',
+  descriptionHtml: '<p>Lorem ipsum snippet desc</p>',
+  createdAt: new Date(Date.now() - 1e6),
+  updatedAt: new Date(Date.now() - 1e3),
+  httpUrlToRepo: `${TEST_HOST}/repo`,
+  sshUrlToRepo: 'ssh://ssh.test/repo',
+  blobs: [],
+  userPermissions: {
+    __typename: 'SnippetPermissions',
+    adminSnippet: true,
+    updateSnippet: true,
+  },
+  project: {
+    __typename: 'Project',
+    fullPath: 'group/project',
+    webUrl: `${TEST_HOST}/group/project`,
+  },
+  author: {
+    __typename: 'User',
+    id: 1,
+    avatarUrl: `${TEST_HOST}/avatar.png`,
+    name: 'root',
+    username: 'root',
+    webUrl: `${TEST_HOST}/root`,
+    status: {
+      __typename: 'UserStatus',
+      emoji: '',
+      message: '',
+    },
+  },
+});
+
+export const createGQLSnippetsQueryResponse = (snippets) => ({
+  data: {
+    snippets: {
+      __typename: 'SnippetConnection',
+      nodes: snippets,
+    },
+  },
+});
+
 export const testEntries = {
   created: {
     id: 'blob_1',

spec/frontend/snippets/utils/error_spec.js

+import { getErrorMessage, UNEXPECTED_ERROR } from '~/snippets/utils/error';
+
+describe('~/snippets/utils/error', () => {
+  describe('getErrorMessage', () => {
+    it.each`
+      input                                              | output
+      ${null}                                            | ${UNEXPECTED_ERROR}
+      ${'message'}                                       | ${'message'}
+      ${new Error('test message')}                       | ${'test message'}
+      ${{ networkError: 'Network error: test message' }} | ${'Network error: test message'}
+      ${{}}                                              | ${UNEXPECTED_ERROR}
+    `('with $input, should return "$output"', ({ input, output }) => {
+      expect(getErrorMessage(input)).toBe(output);
+    });
+  });
+});