System notes update

app/assets/stylesheets/pages/notes.scss

@@ -330,3 +330,36 @@ ul.notes {
     color: $gl-link-color;
   }
 }
+
+.note-author {
+  color: inherit;
+  font-weight: 600;
+
+  &:hover,
+  &:focus {
+    color: $gl-link-color;
+    text-decoration: none;
+  }
+}
+
+.note-system {
+  line-height: 40px;
+
+  .author_link,
+  p,
+  .note-created-ago {
+    display: inline-block;
+    margin: 0;
+  }
+
+  p {
+    > strong {
+      color: $gl-gray;
+    }
+  }
+}
+
+.note-system-text {
+  display: inline-block;
+  line-height: 20px;
+}

app/helpers/notes_helper.rb

@@ -72,4 +72,32 @@ module NotesHelper
     button_tag 'Reply...', class: 'btn btn-text-field js-discussion-reply-button',
                            data: data, title: 'Add a reply'
   end
+
+  CHANGED_REGEX = /^(title|status|milestone) changed/i.freeze
+  def system_note_text(note_text)
+    if note_text =~ CHANGED_REGEX
+      note_text.gsub!(CHANGED_REGEX) { "changed #{Regexp.last_match[1].downcase}" }
+    end
+
+    note_text
+  end
+
+  LABEL_REGEX = /^(added|removed) (.*) label/i.freeze
+  TITLE_REGEX = /^title changed/i.freeze
+  MILESTONE_REGEX = /^milestone changed/i.freeze
+  STATUS_CLOSED = /^status changed to closed/i.freeze
+  STATUS_OPEN = /^status changed to (open|reopened)/i.freeze
+  def system_note_icon(note_text)
+    if note_text =~ LABEL_REGEX
+      'tags'
+    elsif note_text =~ TITLE_REGEX
+      'pencil'
+    elsif note_text =~ MILESTONE_REGEX
+      'clock-o'
+    elsif note_text =~ STATUS_CLOSED
+      'check'
+    elsif note_text =~ STATUS_OPEN
+      'circle-o'
+    end
+  end
 end

app/helpers/projects_helper.rb

@@ -49,7 +49,7 @@ module ProjectsHelper
     author_html = author_html.html_safe
     if opts[:name]
-      link_to(author_html, user_path(author), class: "author_link #{"#{opts[:mobile_classes]}" if opts[:mobile_classes]}").html_safe
+      link_to(author_html, user_path(author), class: "author_link #{opts[:link_class] if opts[:link_class]} #{"#{opts[:mobile_classes]}" if opts[:mobile_classes]}").html_safe
     else
       title = opts[:title].sub(":name", sanitize(author.name))
       link_to(author_html, user_path(author), class: "author_link has-tooltip", data: { 'original-title'.to_sym => title, container: 'body' } ).html_safe

app/views/projects/notes/_note.html.haml

-%li.timeline-entry{ id: dom_id(note), class: [dom_class(note), "note-row-#{note.id}", ('system-note' if note.system)] }
+%li.timeline-entry{ id: dom_id(note), class: [dom_class(note), "note-row-#{note.id}"] }
   .timeline-entry-inner
     .timeline-icon
       %a{href: user_path(note.author)}
         = image_tag avatar_icon(note.author), alt: '', class: 'avatar s40'
     .timeline-content
-      .note-header
-        = link_to_member(note.project, note.author, avatar: false)
-        .inline.note-headline-light
-          = "#{note.author.to_reference} commented"
-          %a{ href: "##{dom_id(note)}" }
-            = time_ago_with_tooltip(note.created_at, placement: 'bottom', html_class: 'note-created-ago')
-        .note-actions
-          - access = note.project.team.human_max_access(note.author.id)
-          - if access
-            %span.note-role
-              = access
+      - if note.system
+        .note-system
+          .note-system-text
+            = icon(system_note_icon(note.note))
+            = link_to_member(note.project, note.author, { avatar: false, link_class: 'note-author' })
+            .inline.note-headline-light
+              = note.author.to_reference
+              = markdown(system_note_text(note.note), pipeline: :note)
+              = time_ago_with_tooltip(note.created_at, placement: 'bottom', html_class: 'note-created-ago')
+      - else
+        .note-header
+          = link_to_member(note.project, note.author, { avatar: false, link_class: 'note-author' })
+          .inline.note-headline-light
+            = "#{note.author.to_reference} commented"
+            %a{ href: "##{dom_id(note)}" }
+              = time_ago_with_tooltip(note.created_at, placement: 'bottom', html_class: 'note-created-ago')
+          .note-actions
+            - access = note.project.team.human_max_access(note.author.id)
+            - if access
+              %span.note-role
+                = access
+            - if note_editable?(note)
+              = link_to '#', title: 'Edit comment', class: 'note-action-button js-note-edit' do
+                = icon('pencil')
+              = link_to namespace_project_note_path(note.project.namespace, note.project, note), title: 'Remove comment', method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: 'note-action-button js-note-delete danger' do
+                = icon('trash-o')
+        .note-body{class: note_editable?(note) ? 'js-task-list-container' : ''}
+          .note-text
+            = preserve do
+              = markdown(note.note, pipeline: :note, cache_key: [note, "note"])
           - if note_editable?(note)
-            = link_to '#', title: 'Edit comment', class: 'note-action-button js-note-edit' do
-              = icon('pencil')
-            = link_to namespace_project_note_path(note.project.namespace, note.project, note), title: 'Remove comment', method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: 'note-action-button js-note-delete danger' do
-              = icon('trash-o')
-      .note-body{class: note_editable?(note) ? 'js-task-list-container' : ''}
-        .note-text
-          = preserve do
-            = markdown(note.note, pipeline: :note, cache_key: [note, "note"])
-        - if note_editable?(note)
-          = render 'projects/notes/edit_form', note: note
-      = edited_time_ago_with_tooltip(note, placement: 'bottom', html_class: 'note_edited_ago', include_author: true)
-      - if note.attachment.url
-        .note-attachment
-          - if note.attachment.image?
-            = link_to note.attachment.url, target: '_blank' do
-              = image_tag note.attachment.url, class: 'note-image-attach'
-          .attachment
-            = link_to note.attachment.url, target: '_blank' do
-              = icon('paperclip')
-              = note.attachment_identifier
-              = link_to delete_attachment_namespace_project_note_path(note.project.namespace, note.project, note),
-                title: 'Delete this attachment', method: :delete, remote: true, data: { confirm: 'Are you sure you want to remove the attachment?' }, class: 'danger js-note-attachment-delete' do
-                = icon('trash-o', class: 'cred')
+            = render 'projects/notes/edit_form', note: note
+        = edited_time_ago_with_tooltip(note, placement: 'bottom', html_class: 'note_edited_ago', include_author: true)
+        - if note.attachment.url
+          .note-attachment
+            - if note.attachment.image?
+              = link_to note.attachment.url, target: '_blank' do
+                = image_tag note.attachment.url, class: 'note-image-attach'
+            .attachment
+              = link_to note.attachment.url, target: '_blank' do
+                = icon('paperclip')
+                = note.attachment_identifier
+                = link_to delete_attachment_namespace_project_note_path(note.project.namespace, note.project, note),
+                  title: 'Delete this attachment', method: :delete, remote: true, data: { confirm: 'Are you sure you want to remove the attachment?' }, class: 'danger js-note-attachment-delete' do
+                  = icon('trash-o', class: 'cred')