IssueNotesRefactor: Implement missing attachment image.

app/assets/javascripts/notes/components/issue_note_attachment.vue

+<script>
+  export default {
+    name: 'issueNoteAttachment',
+    props: {
+      attachment: {
+        type: Object,
+        required: true,
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="note-attachment">
+    <a
+      v-if="attachment.image"
+      :href="attachment.url"
+      target="_blank"
+      rel="noopener noreferrer">
+      <img
+        :src="attachment.url"
+        class="note-image-attach" />
+    </a>
+    <div class="attachment">
+      <a
+        v-if="attachment.url"
+        :href="attachment.url"
+        target="_blank"
+        rel="noopener noreferrer">
+        <i
+          class="fa fa-paperclip"
+          aria-hidden="true"></i>
+        {{attachment.filename}}
+      </a>
+    </div>
+  </div>
+</template>

app/assets/javascripts/notes/components/issue_note_body.vue

 <script>
   import issueNoteEditedText from './issue_note_edited_text.vue';
   import issueNoteAwardsList from './issue_note_awards_list.vue';
+  import issueNoteAttachment from './issue_note_attachment.vue';
   import issueNoteForm from './issue_note_form.vue';
   import TaskList from '../../task_list';
   import autosave from '../mixins/autosave';
@@ -27,6 +28,7 @@
     components: {
       issueNoteEditedText,
       issueNoteAwardsList,
+      issueNoteAttachment,
       issueNoteForm,
     },
     computed: {
@@ -109,5 +111,9 @@
       :awards="note.award_emoji"
       :toggle-award-path="note.toggle_award_path"
       />
+    <issue-note-attachment
+      v-if="note.attachment.url"
+      :attachment="note.attachment"
+      />
   </div>
 </template>

spec/javascripts/notes/components/issue_note_attachment_spec.js

+import Vue from 'vue';
+import issueNoteAttachment from '~/notes/components/issue_note_attachment.vue';
+
+describe('issue note attachment', () => {
+  it('should render properly', () => {
+    const props = {
+      attachment: {
+        filename: 'dk.png',
+        image: true,
+        url: '/dk.png',
+      },
+    };
+
+    const Component = Vue.extend(issueNoteAttachment);
+    const vm = new Component({
+      propsData: props,
+    }).$mount();
+
+    expect(vm.$el.classList.contains('note-attachment')).toBeTruthy();
+    expect(vm.$el.querySelector('img').src).toContain(props.attachment.url);
+    expect(vm.$el.querySelector('a').href).toContain(props.attachment.url);
+  });
+});