1 files changed, 94 insertions, 4 deletions
diff --git a/app/assets/javascripts/notes/mixins/diff_line_note_form.js b/app/assets/javascripts/notes/mixins/diff_line_note_form.js
index 188556e8921..5930b5f3321 100644
--- a/app/assets/javascripts/notes/mixins/diff_line_note_form.js
+++ b/app/assets/javascripts/notes/mixins/diff_line_note_form.js
@@ -1,10 +1,100 @@
+import { mapActions, mapGetters, mapState } from 'vuex';
+import { getDraftReplyFormData, getDraftFormData } from '~/batch_comments/utils';
+import { TEXT_DIFF_POSITION_TYPE, IMAGE_DIFF_POSITION_TYPE } from '~/diffs/constants';
+import createFlash from '~/flash';
+import { s__ } from '~/locale';
+import { clearDraft } from '~/lib/utils/autosave';
+
 export default {
   computed: {
-    draftForDiscussion: () => () => ({}),
+    ...mapState({
+      noteableData: state => state.notes.noteableData,
+      notesData: state => state.notes.notesData,
+      withBatchComments: state => state.batchComments?.withBatchComments,
+    }),
+    ...mapGetters('diffs', ['getDiffFileByHash']),
+    ...mapGetters('batchComments', ['shouldRenderDraftRowInDiscussion', 'draftForDiscussion']),
+    ...mapState('diffs', ['commit']),
   },
   methods: {
-    showDraft: () => false,
-    addReplyToReview: () => {},
-    addToReview: () => {},
+    ...mapActions('diffs', ['cancelCommentForm']),
+    ...mapActions('batchComments', ['addDraftToReview', 'saveDraft', 'insertDraftIntoDrafts']),
+    addReplyToReview(noteText, isResolving) {
+      const postData = getDraftReplyFormData({
+        in_reply_to_discussion_id: this.discussion.reply_id,
+        target_type: this.getNoteableData.targetType,
+        notesData: this.notesData,
+        draft_note: {
+          note: noteText,
+          resolve_discussion: isResolving,
+        },
+      });
+
+      if (this.discussion.for_commit) {
+        postData.note_project_id = this.discussion.project_id;
+      }
+
+      this.isReplying = false;
+
+      this.saveDraft(postData)
+        .then(() => {
+          this.handleClearForm(this.discussion.line_code);
+        })
+        .catch(() => {
+          createFlash(s__('MergeRequests|An error occurred while saving the draft comment.'));
+        });
+    },
+    addToReview(note) {
+      const positionType = this.diffFileCommentForm
+        ? IMAGE_DIFF_POSITION_TYPE
+        : TEXT_DIFF_POSITION_TYPE;
+      const selectedDiffFile = this.getDiffFileByHash(this.diffFileHash);
+      const postData = getDraftFormData({
+        note,
+        notesData: this.notesData,
+        noteableData: this.noteableData,
+        noteableType: this.noteableType,
+        noteTargetLine: this.noteTargetLine,
+        diffViewType: this.diffViewType,
+        diffFile: selectedDiffFile,
+        linePosition: this.position,
+        positionType,
+        ...this.diffFileCommentForm,
+      });
+
+      const diffFileHeadSha = this.commit && this?.diffFile?.diff_refs?.head_sha;
+
+      postData.data.note.commit_id = diffFileHeadSha || null;
+
+      return this.saveDraft(postData)
+        .then(() => {
+          if (positionType === IMAGE_DIFF_POSITION_TYPE) {
+            this.closeDiffFileCommentForm(this.diffFileHash);
+          } else {
+            this.handleClearForm(this.line.line_code);
+          }
+        })
+        .catch(() => {
+          createFlash(s__('MergeRequests|An error occurred while saving the draft comment.'));
+        });
+    },
+    handleClearForm(lineCode) {
+      this.cancelCommentForm({
+        lineCode,
+        fileHash: this.diffFileHash,
+      });
+      this.$nextTick(() => {
+        if (this.autosaveKey) {
+          clearDraft(this.autosaveKey);
+        } else {
+          // TODO: remove the following after replacing the autosave mixin
+          // https://gitlab.com/gitlab-org/gitlab-foss/issues/60587
+          this.resetAutoSave();
+        }
+      });
+    },
+    showDraft(replyId) {
+      return this.withBatchComments && this.shouldRenderDraftRowInDiscussion(replyId);
+    },
   },
 };