shows user avatar in mention autocomplete in editor22790-mention-autocomplete-avatar

adds entry in CHANGELOG

no uninitialized variable and unnecessary if statement

formatting issue in CHANGELOG

resolves scss lint warings

cleanup: unnecessary css classes

adds css class that cleaned up by mistake

replaces snake_case variables name with camelCase

removes unnecessary css class and adds white color border for avatar

moves changelog entry from 8.13 to 8.14

remove bottom margin from avatar-inline

resolves lint warnings

rebased and moves changelog entry to 8.14

fixes avatar shifting on hover

adds entry at top of 8.14 section in CHANGELOG.md

calls sanitization for gl.utils

syncing changelog with master and created changelog files using cli

changes changelog title

5 files changed, 40 insertions, 10 deletions

diff --git a/app/assets/javascripts/gfm_auto_complete.js.es6 b/app/assets/javascripts/gfm_auto_complete.js.es6
index e72e2194be8..58c1179d250 100644
--- a/app/assets/javascripts/gfm_auto_complete.js.es6
+++ b/app/assets/javascripts/gfm_auto_complete.js.es6
@@ -16,7 +16,7 @@
     },
     // Team Members
     Members: {
-      template: '<li>${username} <small>${title}</small></li>'
+      template: '<li>${avatarTag} ${username} <small>${title}</small></li>'
     },
     Labels: {
       template: '<li><span class="dropdown-label-box" style="background: ${color}"></span> ${title}</li>'
@@ -118,7 +118,7 @@
           beforeInsert: this.DefaultOptions.beforeInsert,
           beforeSave: function(members) {
             return $.map(members, function(m) {
-              var title;
+              let title = '';
               if (m.username == null) {
                 return m;
               }
@@ -126,8 +126,14 @@
               if (m.count) {
                 title += " (" + m.count + ")";
               }
+
+              const autoCompleteAvatar = m.avatar_url || m.username.charAt(0).toUpperCase();
+              const imgAvatar = `<img src="${m.avatar_url}" alt="${m.username}" class="avatar avatar-inline center s26"/>`;
+              const txtAvatar = `<div class="avatar center avatar-inline s26">${autoCompleteAvatar}</div>`;
+
               return {
                 username: m.username,
+                avatarTag: autoCompleteAvatar.length === 1 ?  txtAvatar : imgAvatar,
                 title: gl.utils.sanitize(title),
                 search: gl.utils.sanitize(m.username + " " + m.name)
               };
diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index 202ed5ae8fe..ad0d387067f 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/framework/avatar.scss
@@ -34,6 +34,7 @@
 
   &.avatar-inline {
     float: none;
+    display: inline-block;
     margin-left: 4px;
     margin-bottom: 2px;
 
@@ -41,6 +42,12 @@
     &.s24 { margin-right: 4px; }
   }
 
+  &.center {
+    font-size: 14px;
+    line-height: 1.8em;
+    text-align: center;
+  }
+
   &.avatar-tile {
     border-radius: 0;
     border: none;
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 6d28d98b283..8a93eac1b6d 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -148,7 +148,19 @@
   }
 }
 
-.atwho-view small.description {
-  float: right;
-  padding: 3px 5px;
-}
+.atwho-view {
+  small.description {
+    float: right;
+    padding: 3px 5px;
+  }
+
+  .avatar-inline {
+    margin-bottom: 0;
+  }
+
+  .cur {
+    .avatar {
+      border: 1px solid $white-light;
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/services/projects/participants_service.rb b/app/services/projects/participants_service.rb
index d38328403c1..6040391fd94 100644
--- a/app/services/projects/participants_service.rb
+++ b/app/services/projects/participants_service.rb
@@ -1,7 +1,7 @@
 module Projects
   class ParticipantsService < BaseService
     attr_reader :noteable
-    
+
     def execute(noteable)
       @noteable = noteable
 
@@ -15,7 +15,8 @@ module Projects
 
       [{
         name: noteable.author.name,
-        username: noteable.author.username
+        username: noteable.author.username,
+        avatar_url: noteable.author.avatar_url
       }]
     end
 
@@ -28,14 +29,14 @@ module Projects
 
     def sorted(users)
       users.uniq.to_a.compact.sort_by(&:username).map do |user|
-        { username: user.username, name: user.name }
+        { username: user.username, name: user.name, avatar_url: user.avatar_url }
       end
     end
 
     def groups
       current_user.authorized_groups.sort_by(&:path).map do |group|
         count = group.users.count
-        { username: group.path, name: group.name, count: count }
+        { username: group.path, name: group.name, count: count, avatar_url: group.avatar.url }
       end
     end
 
diff --git a/changelogs/unreleased/22790-mention-autocomplete-avatar.yml b/changelogs/unreleased/22790-mention-autocomplete-avatar.yml
new file mode 100644
index 00000000000..53068ca5607
--- /dev/null
+++ b/changelogs/unreleased/22790-mention-autocomplete-avatar.yml
@@ -0,0 +1,4 @@
+---
+title: Show avatars in mention dropdown
+merge_request: 6865
+author: