IssueNotesRefactor: Complete system notes.

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

@@ -13,7 +13,13 @@ export default {
     },
     actionText: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
+    },
+    actionTextHtml: {
+      type: String,
+      required: false,
+      default: '',
     },
     notePath: {
       type: String,
@@ -54,7 +60,13 @@ export default {
     </a>
     <span class="note-headline-light">
       <span class="note-headline-meta">
-        {{actionText}}
+        <template v-if="actionText">
+          {{actionText}}
+        </template>
+        <span
+          v-if="actionTextHtml"
+          v-html="actionTextHtml"
+          class="system-note-message"></span>
         <a :href="notePath">
           <time-ago-tooltip
             :time="createdAt"

app/assets/javascripts/notes/components/issue_note_icons.js

+import iconArrowCircle from 'icons/_icon_arrow_circle_o_right.svg';
+import iconCheck from 'icons/_icon_check_square_o.svg';
+import iconClock from 'icons/_icon_clock_o.svg';
+import iconCodeFork from 'icons/_icon_code_fork.svg';
+import iconComment from 'icons/_icon_comment_o.svg';
+import iconCommit from 'icons/_icon_commit.svg';
+import iconEdit from 'icons/_icon_edit.svg';
+import iconEye from 'icons/_icon_eye.svg';
+import iconEyeSlash from 'icons/_icon_eye_slash.svg';
+import iconMerge from 'icons/_icon_merge.svg';
+import iconMerged from 'icons/_icon_merged.svg';
+import iconRandom from 'icons/_icon_random.svg';
+import iconClosed from 'icons/_icon_status_closed.svg';
+import iconStatusOpen from 'icons/_icon_status_open.svg';
+import iconStopwatch from 'icons/_icon_stopwatch.svg';
+import iconTags from 'icons/_icon_tags.svg';
+import iconUser from 'icons/_icon_user.svg';
+
+export default {
+  icon_arrow_circle_o_right: iconArrowCircle,
+  icon_check_square_o: iconCheck,
+  icon_clock_o: iconClock,
+  icon_code_fork: iconCodeFork,
+  icon_comment_o: iconComment,
+  icon_commit: iconCommit,
+  icon_edit: iconEdit,
+  icon_eye: iconEye,
+  icon_eye_slash: iconEyeSlash,
+  icon_merge: iconMerge,
+  icon_merged: iconMerged,
+  icon_random: iconRandom,
+  icon_status_closed: iconClosed,
+  icon_status_open: iconStatusOpen,
+  icon_stopwatch: iconStopwatch,
+  icon_tags: iconTags,
+  icon_user: iconUser,
+};

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

+<script>
+import iconsMap from './issue_note_icons';
+import IssueNoteHeader from './issue_note_header.vue';
+
+export default {
+  props: {
+    note: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      svg: iconsMap[this.note.system_note_icon_name],
+    }
+  },
+  components: {
+    IssueNoteHeader,
+  },
+}
+</script>
+
 <template>
-  <p>System note</p>
+  <li class="note system-note timeline-entry">
+    <div class="timeline-entry-inner">
+      <div class="timeline-icon">
+        <span v-html="svg"></span>
+      </div>
+      <div class="timeline-content">
+        <div class="note-header">
+          <issue-note-header
+            :author="note.author"
+            :createdAt="note.created_at"
+            :notePath="note.path"
+            :actionTextHtml="note.note_html" />
+        </div>
+      </div>
+    </div>
+  </li>
 </template>