1 files changed, 113 insertions, 0 deletions
diff --git a/app/assets/javascripts/batch_comments/components/draft_note.vue b/app/assets/javascripts/batch_comments/components/draft_note.vue
new file mode 100644
index 00000000000..963d104b6b3
--- /dev/null
+++ b/app/assets/javascripts/batch_comments/components/draft_note.vue
@@ -0,0 +1,113 @@
+<script>
+import { mapActions, mapGetters, mapState } from 'vuex';
+import NoteableNote from '~/notes/components/noteable_note.vue';
+import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import PublishButton from './publish_button.vue';
+
+export default {
+  components: {
+    NoteableNote,
+    PublishButton,
+    LoadingButton,
+  },
+  props: {
+    draft: {
+      type: Object,
+      required: true,
+    },
+    diffFile: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    line: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      isEditingDraft: false,
+    };
+  },
+  computed: {
+    ...mapState('batchComments', ['isPublishing']),
+    ...mapGetters('batchComments', ['isPublishingDraft']),
+    draftCommands() {
+      return this.draft.references.commands;
+    },
+  },
+  mounted() {
+    if (window.location.hash && window.location.hash === `#note_${this.draft.id}`) {
+      this.scrollToDraft(this.draft);
+    }
+  },
+  methods: {
+    ...mapActions('batchComments', [
+      'deleteDraft',
+      'updateDraft',
+      'publishSingleDraft',
+      'scrollToDraft',
+      'toggleResolveDiscussion',
+    ]),
+    update(data) {
+      this.updateDraft(data);
+    },
+    publishNow() {
+      this.publishSingleDraft(this.draft.id);
+    },
+    handleEditing() {
+      this.isEditingDraft = true;
+    },
+    handleNotEditing() {
+      this.isEditingDraft = false;
+    },
+  },
+};
+</script>
+<template>
+  <article class="draft-note-component note-wrapper">
+    <ul class="notes draft-notes">
+      <noteable-note
+        :note="draft"
+        :diff-lines="diffFile.highlighted_diff_lines"
+        :line="line"
+        class="draft-note"
+        @handleEdit="handleEditing"
+        @cancelForm="handleNotEditing"
+        @updateSuccess="handleNotEditing"
+        @handleDeleteNote="deleteDraft"
+        @handleUpdateNote="update"
+        @toggleResolveStatus="toggleResolveDiscussion(draft.id)"
+      >
+        <strong slot="note-header-info" class="badge draft-pending-label append-right-4">
+          {{ __('Pending') }}
+        </strong>
+      </noteable-note>
+    </ul>
+
+    <template v-if="!isEditingDraft">
+      <div
+        v-if="draftCommands"
+        class="referenced-commands draft-note-commands"
+        v-html="draftCommands"
+      ></div>
+
+      <p class="draft-note-actions d-flex">
+        <publish-button
+          :show-count="true"
+          :should-publish="false"
+          class="btn btn-success btn-inverted gl-mr-3"
+        />
+        <loading-button
+          ref="publishNowButton"
+          :loading="isPublishingDraft(draft.id) || isPublishing"
+          :label="__('Add comment now')"
+          container-class="btn btn-inverted"
+          @click="publishNow"
+        />
+      </p>
+    </template>
+  </article>
+</template>