Add latest changes from gitlab-org/gitlab@master

4 files changed, 37 insertions, 26 deletions

diff --git a/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue b/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue
index 2646d819fa7..680a101b118 100644
--- a/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue
+++ b/app/assets/javascripts/design_management/components/design_notes/design_discussion.vue
@@ -177,9 +177,6 @@ export default {
         this.toggleResolvedStatus();
       }
     },
-    onCreateNoteError(err) {
-      this.$emit('create-note-error', err);
-    },
     hideForm() {
       this.isFormRendered = false;
     },
@@ -300,10 +297,10 @@ export default {
         :note="firstNote"
         :markdown-preview-path="markdownPreviewPath"
         :is-resolving="isResolving"
+        :is-discussion="true"
         :noteable-id="noteableId"
         :class="{ 'gl-bg-blue-50': isDiscussionActive }"
         @delete-note="showDeleteNoteConfirmationModal($event)"
-        @error="$emit('update-note-error', $event)"
       >
         <template v-if="isLoggedIn && discussion.resolvable" #resolve-discussion>
           <gl-button
@@ -345,9 +342,9 @@ export default {
         :markdown-preview-path="markdownPreviewPath"
         :is-resolving="isResolving"
         :noteable-id="noteableId"
+        :is-discussion="false"
         :class="{ 'gl-bg-blue-50': isDiscussionActive }"
         @delete-note="showDeleteNoteConfirmationModal($event)"
-        @error="$emit('update-note-error', $event)"
       />
       <li
         v-show="isReplyPlaceholderVisible"
@@ -370,8 +367,8 @@ export default {
             :markdown-preview-path="markdownPreviewPath"
             :noteable-id="noteableId"
             :discussion-id="discussion.id"
+            :is-discussion="false"
             @note-submit-complete="onDone"
-            @note-submit-failure="onCreateNoteError"
             @cancel-form="hideForm"
           >
             <template v-if="discussion.resolvable" #resolve-checkbox>
diff --git a/app/assets/javascripts/design_management/components/design_notes/design_note.vue b/app/assets/javascripts/design_management/components/design_notes/design_note.vue
index 3e6c49777ca..b92a2392948 100644
--- a/app/assets/javascripts/design_management/components/design_notes/design_note.vue
+++ b/app/assets/javascripts/design_management/components/design_notes/design_note.vue
@@ -49,6 +49,11 @@ export default {
       required: false,
       default: '',
     },
+    isDiscussion: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     noteableId: {
       type: String,
       required: true,
@@ -188,9 +193,9 @@ export default {
       :mutation-variables="mutationVariables"
       :value="note.body"
       :is-new-comment="false"
+      :is-discussion="isDiscussion"
       :noteable-id="noteableId"
       class="gl-mt-5"
-      @note-submit-failure="$emit('error', $event)"
       @note-submit-complete="onDone"
       @cancel-form="hideForm"
     />
diff --git a/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue b/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue
index bf88e037813..4fd90130284 100644
--- a/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue
+++ b/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlAlert } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { s__ } from '~/locale';
 import Autosave from '~/autosave';
@@ -7,6 +7,12 @@ import { isLoggedIn } from '~/lib/utils/common_utils';
 import { getIdFromGraphQLId, isGid } from '~/graphql_shared/utils';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
+import {
+  ADD_DISCUSSION_COMMENT_ERROR,
+  ADD_IMAGE_DIFF_NOTE_ERROR,
+  UPDATE_IMAGE_DIFF_NOTE_ERROR,
+  UPDATE_NOTE_ERROR,
+} from '../../utils/error_messages';
 
 export default {
   name: 'DesignReplyForm',
@@ -23,6 +29,7 @@ export default {
   components: {
     MarkdownField,
     GlButton,
+    GlAlert,
   },
   props: {
     designNoteMutation: {
@@ -44,6 +51,11 @@ export default {
       required: false,
       default: true,
     },
+    isDiscussion: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     noteableId: {
       type: String,
       required: true,
@@ -65,6 +77,7 @@ export default {
       saving: false,
       noteUpdateDirty: false,
       isLoggedIn: isLoggedIn(),
+      errorMessage: '',
     };
   },
   computed: {
@@ -126,14 +139,20 @@ export default {
           .then((response) => {
             this.$emit('note-submit-complete', response);
           })
-          .catch((errors) => {
-            this.$emit('note-submit-failure', errors);
+          .catch(() => {
+            this.errorMessage = this.getErrorMessage();
           })
           .finally(() => {
             this.saving = false;
           });
       }
     },
+    getErrorMessage() {
+      if (this.isNewComment) {
+        return this.isDiscussion ? ADD_IMAGE_DIFF_NOTE_ERROR : ADD_DISCUSSION_COMMENT_ERROR;
+      }
+      return this.isDiscussion ? UPDATE_IMAGE_DIFF_NOTE_ERROR : UPDATE_NOTE_ERROR;
+    },
     cancelComment() {
       if (this.hasValue && this.noteUpdateDirty) {
         this.confirmCancelCommentModal();
@@ -183,6 +202,11 @@ export default {
 
 <template>
   <form class="new-note common-note-form" @submit.prevent>
+    <div v-if="errorMessage" class="gl-pb-3">
+      <gl-alert variant="danger" @dismiss="errorMessage = null">
+        {{ errorMessage }}
+      </gl-alert>
+    </div>
     <markdown-field
       :markdown-preview-path="markdownPreviewPath"
       :enable-autocomplete="true"
diff --git a/app/assets/javascripts/design_management/pages/design/index.vue b/app/assets/javascripts/design_management/pages/design/index.vue
index c099c06df47..0251ffe28f9 100644
--- a/app/assets/javascripts/design_management/pages/design/index.vue
+++ b/app/assets/javascripts/design_management/pages/design/index.vue
@@ -33,12 +33,9 @@ import {
   getPageLayoutElement,
 } from '../../utils/design_management_utils';
 import {
-  ADD_DISCUSSION_COMMENT_ERROR,
-  ADD_IMAGE_DIFF_NOTE_ERROR,
   UPDATE_IMAGE_DIFF_NOTE_ERROR,
   DESIGN_NOT_FOUND_ERROR,
   DESIGN_VERSION_NOT_EXIST_ERROR,
-  UPDATE_NOTE_ERROR,
   TOGGLE_TODO_ERROR,
   DELETE_NOTE_ERROR,
   designDeletionError,
@@ -261,18 +258,9 @@ export default {
       this.errorMessage = message;
       if (e) throw e;
     },
-    onCreateImageDiffNoteError(e) {
-      this.onError(ADD_IMAGE_DIFF_NOTE_ERROR, e);
-    },
-    onUpdateNoteError(e) {
-      this.onError(UPDATE_NOTE_ERROR, e);
-    },
     onDeleteNoteError(e) {
       this.onError(DELETE_NOTE_ERROR, e);
     },
-    onDesignDiscussionError(e) {
-      this.onError(ADD_DISCUSSION_COMMENT_ERROR, e);
-    },
     onUpdateImageDiffNoteError(e) {
       this.onError(UPDATE_IMAGE_DIFF_NOTE_ERROR, e);
     },
@@ -400,9 +388,6 @@ export default {
       :resolved-discussions-expanded="resolvedDiscussionsExpanded"
       :markdown-preview-path="markdownPreviewPath"
       :is-loading="isLoading"
-      @onDesignDiscussionError="onDesignDiscussionError"
-      @onCreateImageDiffNoteError="onCreateImageDiffNoteError"
-      @updateNoteError="onUpdateNoteError"
       @deleteNoteError="onDeleteNoteError"
       @resolveDiscussionError="onResolveDiscussionError"
       @toggleResolvedComments="toggleResolvedComments"
@@ -416,8 +401,8 @@ export default {
           :mutation-variables="mutationVariables"
           :markdown-preview-path="markdownPreviewPath"
           :noteable-id="design.id"
+          :is-discussion="true"
           @note-submit-complete="addImageDiffNoteToStore"
-          @note-submit-failure="onCreateImageDiffNoteError"
           @cancel-form="closeCommentForm"
         />
       </template>