MR Diffs Refactor Part 15: Diff refactor components._mr-refactor-part-15

3 files changed, 197 insertions, 0 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_discussions.vue b/app/assets/javascripts/diffs/components/diff_discussions.vue
new file mode 100644
index 00000000000..18377978593
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/diff_discussions.vue
@@ -0,0 +1,34 @@
+<script>
+import noteableDiscussion from '../../notes/components/noteable_discussion.vue';
+
+export default {
+  components: {
+    noteableDiscussion,
+  },
+  props: {
+    notes: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div
+      v-for="notesArr in notes"
+      :key="notesArr.id"
+      class="discussion-notes diff-discussions"
+    >
+      <ul class="notes">
+        <noteable-discussion
+          :note="notesArr"
+          :render-header="false"
+          :render-diff-file="false"
+          :always-expanded="true"
+        />
+      </ul>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue b/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue
new file mode 100644
index 00000000000..d8c57b8a629
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue
@@ -0,0 +1,78 @@
+<script>
+import { MATCH_LINE_TYPE } from '../constants';
+
+export default {
+  props: {
+    lineType: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    lineNumber: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    lineCode: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    linePosition: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    showCommentButton: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    isMatchLine() {
+      return this.lineType === MATCH_LINE_TYPE;
+    },
+    getLineHref() {
+      return `#${this.lineCode}`;
+    },
+  },
+  methods: {
+    handleCommentButton() {
+      this.$emit('showCommentForm', {
+        lineCode: this.lineCode,
+        linePosition: this.linePosition,
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <span v-if="isMatchLine">...</span>
+    <template
+      v-else
+    >
+      <button
+        v-if="showCommentButton"
+        @click="handleCommentButton"
+        type="button"
+        class="add-diff-note js-add-diff-note-button"
+        title="Add a comment to this line"
+      >
+        <i
+          aria-hidden="true"
+          class="fa fa-comment-o"
+        >
+        </i>
+      </button>
+      <a
+        v-if="lineNumber"
+        :data-linenumber="lineNumber"
+        :href="getLineHref"
+      >
+      </a>
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/diffs/components/diff_line_note_form.vue b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
new file mode 100644
index 00000000000..fe6beeb184a
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
@@ -0,0 +1,85 @@
+<script>
+import { mapState, mapGetters, mapActions } from 'vuex';
+import noteForm from '../../notes/components/note_form.vue';
+import * as utils from '../store/utils';
+
+export default {
+  components: {
+    noteForm,
+  },
+  props: {
+    diffFile: {
+      type: Object,
+      required: true,
+    },
+    diffLines: {
+      type: Array,
+      required: true,
+    },
+    line: {
+      type: Object,
+      required: true,
+    },
+    position: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    noteTargetLine: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState({
+      noteableData: state => state.notes.noteableData,
+      diffViewType: state => state.diffs.diffViewType,
+    }),
+    ...mapGetters(['noteableType', 'getNotesDataByProp']),
+  },
+  methods: {
+    ...mapActions(['cancelCommentForm', 'saveNote', 'fetchNotes']),
+    handleCancelCommentForm() {
+      const { diffLines, line, position } = this;
+
+      this.cancelCommentForm({
+        linePosition: position,
+        diffLines,
+        formId: line.id,
+      });
+    },
+    handleSaveNote(note) {
+      const postData = utils.getNoteFormData({
+        note,
+        noteableData: this.noteableData,
+        noteableType: this.noteableType,
+        noteTargetLine: this.noteTargetLine,
+        diffViewType: this.diffViewType,
+        diffFile: this.diffFile,
+        linePosition: this.position,
+      });
+
+      // FIXME: @fatihacet -- This should be fixed, no need to fetchNotes again
+      this.saveNote(postData).then(() => {
+        const endpoint = this.getNotesDataByProp('discussionsPath');
+
+        this.fetchNotes(endpoint).then(() => {
+          this.handleCancelCommentForm();
+        });
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="content discussion-form js-discussion-note-form discussion-form-container">
+    <note-form
+      :is-editing="true"
+      save-button-title="Comment"
+      class="diff-comment-form"
+      @cancelForm="handleCancelCommentForm"
+      @handleFormUpdate="handleSaveNote"
+    />
+  </div>
+</template>