Show current user immediately in issuable filters

6 files changed, 51 insertions, 22 deletions

diff --git a/app/assets/javascripts/droplab/keyboard.js b/app/assets/javascripts/droplab/keyboard.js
index 36740a430e1..02f1b805ce4 100644
--- a/app/assets/javascripts/droplab/keyboard.js
+++ b/app/assets/javascripts/droplab/keyboard.js
@@ -8,7 +8,7 @@ const Keyboard = function () {
   var isUpArrow = false;
   var isDownArrow = false;
   var removeHighlight = function removeHighlight(list) {
-    var itemElements = Array.prototype.slice.call(list.list.querySelectorAll('li:not(.divider)'), 0);
+    var itemElements = Array.prototype.slice.call(list.list.querySelectorAll('li:not(.divider):not(.hidden)'), 0);
     var listItems = [];
     for(var i = 0; i < itemElements.length; i++) {
       var listItem = itemElements[i];
diff --git a/app/assets/javascripts/droplab/plugins/ajax_filter.js b/app/assets/javascripts/droplab/plugins/ajax_filter.js
index a5427417031..1db20227a16 100644
--- a/app/assets/javascripts/droplab/plugins/ajax_filter.js
+++ b/app/assets/javascripts/droplab/plugins/ajax_filter.js
@@ -63,6 +63,9 @@ const AjaxFilter = {
     return AjaxCache.retrieve(url)
       .then((data) => {
         this._loadData(data, config);
+        if (config.onLoadingFinished) {
+          config.onLoadingFinished(data);
+        }
       })
       .catch(config.onError);
   },
diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js b/app/assets/javascripts/filtered_search/dropdown_user.js
index 6b4338ca1d6..65c1b2050ac 100644
--- a/app/assets/javascripts/filtered_search/dropdown_user.js
+++ b/app/assets/javascripts/filtered_search/dropdown_user.js
@@ -18,6 +18,9 @@ class DropdownUser extends gl.FilteredSearchDropdown {
         },
         searchValueFunction: this.getSearchInput.bind(this),
         loadingTemplate: this.loadingTemplate,
+        onLoadingFinished: () => {
+          this.hideCurrentUser();
+        },
         onError() {
           /* eslint-disable no-new */
           new Flash('An error occured fetching the dropdown data.');
@@ -28,6 +31,11 @@ class DropdownUser extends gl.FilteredSearchDropdown {
     this.tokenKeys = tokenKeys;
   }
 
+  hideCurrentUser() {
+    const currenUserItem = this.dropdown.querySelector('.js-current-user');
+    currenUserItem.classList.add('hidden');
+  }
+
   itemClicked(e) {
     super.itemClicked(e,
       selected => selected.querySelector('.dropdown-light-content').innerText.trim());
diff --git a/app/helpers/avatars_helper.rb b/app/helpers/avatars_helper.rb
index b7e0ff8ecd0..bbe7f3c8fb4 100644
--- a/app/helpers/avatars_helper.rb
+++ b/app/helpers/avatars_helper.rb
@@ -8,18 +8,28 @@ module AvatarsHelper
     }))
   end
 
-  def user_avatar(options = {})
+  def user_avatar_without_link(options = {})
     avatar_size = options[:size] || 16
     user_name = options[:user].try(:name) || options[:user_name]
     css_class = options[:css_class] || ''
-    
-    avatar = image_tag(
-      avatar_icon(options[:user] || options[:user_email], avatar_size),
+    avatar_url = options[:url] || avatar_icon(options[:user] || options[:user_email], avatar_size)
+    data_attributes = { container: 'body' }
+
+    if options[:lazy]
+      data_attributes[:src] = avatar_url
+    end
+
+    image_tag(
+      options[:lazy] ? '' : avatar_url,
       class: "avatar has-tooltip s#{avatar_size} #{css_class}",
       alt: "#{user_name}'s avatar",
       title: user_name,
-      data: { container: 'body' }
+      data: data_attributes
     )
+  end
+
+  def user_avatar(options = {})
+    avatar = user_avatar_without_link(options)
 
     if options[:user]
       link_to(avatar, user_path(options[:user]))
diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml
index f8d755b6961..a9a4792faae 100644
--- a/app/views/shared/issuable/_search_bar.html.haml
+++ b/app/views/shared/issuable/_search_bar.html.haml
@@ -46,30 +46,27 @@
                     %span.js-filter-tag.dropdown-light-content
                       {{tag}}
             #js-dropdown-author.filtered-search-input-dropdown-menu.dropdown-menu
+              - if current_user
+                %ul{ data: { dropdown: true } }
+                  = render 'shared/issuable/user_dropdown_item',
+                    user: current_user
               %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
-                %li.filter-dropdown-item
-                  %button.btn.btn-link.dropdown-user
-                    %img.avatar{ alt: '{{name}}\'s avatar', width: '30', data: { src: '{{avatar_url}}' } }
-                    .dropdown-user-details
-                      %span
-                        {{name}}
-                      %span.dropdown-light-content
-                        @{{username}}
+                = render 'shared/issuable/user_dropdown_item',
+                  user: User.new(username: '{{username}}', name: '{{name}}'),
+                  avatar: { lazy: true, url: '{{avatar_url}}' }
             #js-dropdown-assignee.filtered-search-input-dropdown-menu.dropdown-menu
               %ul{ data: { dropdown: true } }
                 %li.filter-dropdown-item{ data: { value: 'none' } }
                   %button.btn.btn-link
                     No Assignee
                 %li.divider
+                - if current_user
+                  = render 'shared/issuable/user_dropdown_item',
+                    user: current_user
               %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
-                %li.filter-dropdown-item
-                  %button.btn.btn-link.dropdown-user
-                    %img.avatar{ alt: '{{name}}\'s avatar', width: '30', data: { src: '{{avatar_url}}' } }
-                    .dropdown-user-details
-                      %span
-                        {{name}}
-                      %span.dropdown-light-content
-                        @{{username}}
+                = render 'shared/issuable/user_dropdown_item',
+                  user: User.new(username: '{{username}}', name: '{{name}}'),
+                  avatar: { lazy: true, url: '{{avatar_url}}' }
             #js-dropdown-milestone.filtered-search-input-dropdown-menu.dropdown-menu
               %ul{ data: { dropdown: true } }
                 %li.filter-dropdown-item{ data: { value: 'none' } }
diff --git a/app/views/shared/issuable/_user_dropdown_item.html.haml b/app/views/shared/issuable/_user_dropdown_item.html.haml
new file mode 100644
index 00000000000..a82c01c6dc2
--- /dev/null
+++ b/app/views/shared/issuable/_user_dropdown_item.html.haml
@@ -0,0 +1,11 @@
+- user = local_assigns.fetch(:user)
+- avatar = local_assigns.fetch(:avatar, { })
+
+%li.filter-dropdown-item{ class: ('js-current-user' if user == current_user) }
+  %button.btn.btn-link.dropdown-user{ type: :button }
+    = user_avatar_without_link(user: user, lazy: avatar[:lazy], url: avatar[:url], size: 30)
+    .dropdown-user-details
+      %span
+        = user.name
+      %span.dropdown-light-content
+        = user.to_reference