2 files changed, 16 insertions, 15 deletions
diff --git a/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js b/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js
index 2b0aaa74e83..feac6f10b1e 100644
--- a/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js
+++ b/app/assets/javascripts/batch_comments/stores/modules/batch_comments/actions.js
@@ -1,5 +1,5 @@
 import { isEmpty } from 'lodash';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { scrollToElement } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
 import { CHANGES_TAB, DISCUSSION_TAB, SHOW_TAB } from '../../../constants';
@@ -18,7 +18,7 @@ export const addDraftToDiscussion = ({ commit }, { endpoint, data }) =>
       return res;
     })
     .catch(() => {
-      createFlash({
+      createAlert({
         message: __('An error occurred adding a draft to the thread.'),
       });
     });
@@ -32,7 +32,7 @@ export const createNewDraft = ({ commit }, { endpoint, data }) =>
       return res;
     })
     .catch(() => {
-      createFlash({
+      createAlert({
         message: __('An error occurred adding a new draft.'),
       });
     });
@@ -44,7 +44,7 @@ export const deleteDraft = ({ commit, getters }, draft) =>
       commit(types.DELETE_DRAFT, draft.id);
     })
     .catch(() =>
-      createFlash({
+      createAlert({
         message: __('An error occurred while deleting the comment'),
       }),
     );
@@ -62,7 +62,7 @@ export const fetchDrafts = ({ commit, getters, state, dispatch }) =>
       });
     })
     .catch(() =>
-      createFlash({
+      createAlert({
         message: __('An error occurred while fetching pending comments'),
       }),
     );
@@ -122,7 +122,7 @@ export const updateDraft = (
     .then((data) => commit(types.RECEIVE_DRAFT_UPDATE_SUCCESS, data))
     .then(callback)
     .catch(() =>
-      createFlash({
+      createAlert({
         message: __('An error occurred while updating the comment'),
       }),
     );
diff --git a/app/assets/javascripts/batch_comments/stores/modules/batch_comments/getters.js b/app/assets/javascripts/batch_comments/stores/modules/batch_comments/getters.js
index df5214ea7ab..75e4ae63c18 100644
--- a/app/assets/javascripts/batch_comments/stores/modules/batch_comments/getters.js
+++ b/app/assets/javascripts/batch_comments/stores/modules/batch_comments/getters.js
@@ -22,7 +22,11 @@ export const draftsPerFileHashAndLine = (state) =>
         acc[draft.file_hash] = {};
       }
 
-      acc[draft.file_hash][draft.line_code] = draft;
+      if (!acc[draft.file_hash][draft.line_code]) {
+        acc[draft.file_hash][draft.line_code] = [];
+      }
+
+      acc[draft.file_hash][draft.line_code].push(draft);
     }
 
     return acc;
@@ -61,18 +65,15 @@ export const shouldRenderDraftRowInDiscussion = (state, getters) => (discussionI
 export const draftForDiscussion = (state, getters) => (discussionId) =>
   getters.draftsPerDiscussionId[discussionId] || {};
 
-export const draftForLine = (state, getters) => (diffFileSha, line, side = null) => {
+export const draftsForLine = (state, getters) => (diffFileSha, line, side = null) => {
   const draftsForFile = getters.draftsPerFileHashAndLine[diffFileSha];
-
   const key = side !== null ? parallelLineKey(line, side) : line.line_code;
+  const showDraftsForThisSide = showDraftOnSide(line, side);
 
-  if (draftsForFile) {
-    const draft = draftsForFile[key];
-    if (draft && showDraftOnSide(line, side)) {
-      return draft;
-    }
+  if (showDraftsForThisSide && draftsForFile?.[key]) {
+    return draftsForFile[key];
   }
-  return {};
+  return [];
 };
 
 export const draftsForFile = (state) => (diffFileSha) =>