Recent search history for issues

Fixes https://gitlab.com/gitlab-org/gitlab-ce/issues/27262

2 files changed, 89 insertions, 81 deletions

diff --git a/app/views/shared/issuable/_filter.html.haml b/app/views/shared/issuable/_filter.html.haml
index 847a86e2e68..c72268473ca 100644
--- a/app/views/shared/issuable/_filter.html.haml
+++ b/app/views/shared/issuable/_filter.html.haml
@@ -40,21 +40,21 @@
       .issues_bulk_update.hide
         = form_tag [:bulk_update, @project.namespace.becomes(Namespace), @project, type], method: :post, class: 'bulk-update'  do
           .filter-item.inline
-            = dropdown_tag("Status", options: { toggle_class: "js-issue-status", title: "Change status", dropdown_class: "dropdown-menu-status dropdown-menu-selectable", data: { field_name: "update[state_event]", default_label: "Status" } } ) do
+            = dropdown_tag("Status", options: { toggle_class: "issue-bulk-update-dropdown-toggle js-issue-status", title: "Change status", dropdown_class: "dropdown-menu-status dropdown-menu-selectable", data: { field_name: "update[state_event]", default_label: "Status" } } ) do
               %ul
                 %li
                   %a{ href: "#", data: { id: "reopen" } } Open
                 %li
                   %a{ href: "#", data: {id: "close" } } Closed
           .filter-item.inline
-            = dropdown_tag("Assignee", options: { toggle_class: "js-user-search js-update-assignee js-filter-submit js-filter-bulk-update", title: "Assign to", filter: true, dropdown_class: "dropdown-menu-user dropdown-menu-selectable",
+            = dropdown_tag("Assignee", options: { toggle_class: "issue-bulk-update-dropdown-toggle js-user-search js-update-assignee js-filter-submit js-filter-bulk-update", title: "Assign to", filter: true, dropdown_class: "dropdown-menu-user dropdown-menu-selectable",
               placeholder: "Search authors", data: { first_user: (current_user.username if current_user), null_user: true, current_user: true, project_id: @project.id, field_name: "update[assignee_id]", default_label: "Assignee" } })
           .filter-item.inline
-            = dropdown_tag("Milestone", options: { title: "Assign milestone", toggle_class: 'js-milestone-select js-extra-options js-filter-submit js-filter-bulk-update', filter: true, dropdown_class: "dropdown-menu-selectable dropdown-menu-milestone", placeholder: "Search milestones", data: { show_no: true, field_name: "update[milestone_id]", default_label: "Milestone", project_id: @project.id, milestones: namespace_project_milestones_path(@project.namespace, @project, :json), use_id: true } })
+            = dropdown_tag("Milestone", options: { title: "Assign milestone", toggle_class: 'issue-bulk-update-dropdown-toggle js-milestone-select js-extra-options js-filter-submit js-filter-bulk-update', filter: true, dropdown_class: "dropdown-menu-selectable dropdown-menu-milestone", placeholder: "Search milestones", data: { show_no: true, field_name: "update[milestone_id]", default_label: "Milestone", project_id: @project.id, milestones: namespace_project_milestones_path(@project.namespace, @project, :json), use_id: true } })
           .filter-item.inline.labels-filter
             = render "shared/issuable/label_dropdown", classes: ['js-filter-bulk-update', 'js-multiselect'], dropdown_title: 'Apply a label', show_create: false, show_footer: false, extra_options: false, filter_submit: false, data_options: { persist_when_hide: "true", field_name: "update[label_ids][]", show_no: false, show_any: false, use_id: true }
           .filter-item.inline
-            = dropdown_tag("Subscription", options: { toggle_class: "js-subscription-event", title: "Change subscription", dropdown_class: "dropdown-menu-selectable", data: { field_name: "update[subscription_event]", default_label: "Subscription" } } ) do
+            = dropdown_tag("Subscription", options: { toggle_class: "issue-bulk-update-dropdown-toggle js-subscription-event", title: "Change subscription", dropdown_class: "dropdown-menu-selectable", data: { field_name: "update[subscription_event]", default_label: "Subscription" } } ) do
               %ul
                 %li
                   %a{ href: "#", data: { id: "subscribe" } } Subscribe
diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml
index 330fa8a5b10..9e241c3ea12 100644
--- a/app/views/shared/issuable/_search_bar.html.haml
+++ b/app/views/shared/issuable/_search_bar.html.haml
@@ -10,85 +10,93 @@
         .check-all-holder
           = check_box_tag "check_all_issues", nil, false,
             class: "check_all_issues left"
-      .issues-other-filters.filtered-search-container
-        .filtered-search-input-container
-          .scroll-container
-            %ul.tokens-container.list-unstyled
-              %li.input-token
-                %input.form-control.filtered-search{ placeholder: 'Search or filter results...', data: { id: "filtered-search-#{type.to_s}", 'project-id' => @project.id, 'username-params' => @users.to_json(only: [:id, :username]), 'base-endpoint' => namespace_project_path(@project.namespace, @project) } }
-            = icon('filter')
-            %button.clear-search.hidden{ type: 'button' }
-              = icon('times')
-          #js-dropdown-hint.dropdown-menu.hint-dropdown
-            %ul{ data: { dropdown: true } }
-              %li.filter-dropdown-item{ data: { action: 'submit' } }
-                %button.btn.btn-link
-                  = icon('search')
-                  %span
-                    Press Enter or click to search
-            %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
-              %li.filter-dropdown-item
-                %button.btn.btn-link
-                  -# Encapsulate static class name `{{icon}}` inside #{} to bypass
-                  -# haml lint's ClassAttributeWithStaticValue
-                  %i.fa{ class: "#{'{{icon}}'}" }
-                  %span.js-filter-hint
-                    {{hint}}
-                  %span.js-filter-tag.dropdown-light-content
-                    {{tag}}
-          #js-dropdown-author.dropdown-menu{ data: { icon: 'pencil', hint: 'author', tag: '@author' } }
-            %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
+      .issues-other-filters.filtered-search-wrapper
+        .filtered-search-box
+          = dropdown_tag(content_tag(:i, '', class: 'fa fa-history'),
+            options: { wrapper_class: "filtered-search-history-dropdown-wrapper",
+            toggle_class: "filtered-search-history-dropdown-toggle-button",
+            dropdown_class: "filtered-search-history-dropdown",
+            content_class: "filtered-search-history-dropdown-content",
+            title: "Recent searches" }) do
+            .js-filtered-search-history-dropdown
+          .filtered-search-box-input-container
+            .scroll-container
+              %ul.tokens-container.list-unstyled
+                %li.input-token
+                  %input.form-control.filtered-search{ placeholder: 'Search or filter results...', data: { id: "filtered-search-#{type.to_s}", 'project-id' => @project.id, 'username-params' => @users.to_json(only: [:id, :username]), 'base-endpoint' => namespace_project_path(@project.namespace, @project) } }
+              = icon('filter')
+              %button.clear-search.hidden{ type: 'button' }
+                = icon('times')
+            #js-dropdown-hint.filtered-search-input-dropdown-menu.dropdown-menu.hint-dropdown
+              %ul{ data: { dropdown: true } }
+                %li.filter-dropdown-item{ data: { action: 'submit' } }
+                  %button.btn.btn-link
+                    = icon('search')
                     %span
-                      {{name}}
-                    %span.dropdown-light-content
-                      @{{username}}
-          #js-dropdown-assignee.dropdown-menu{ data: { icon: 'user', hint: 'assignee', tag: '@assignee' } }
-            %ul{ data: { dropdown: true } }
-              %li.filter-dropdown-item{ data: { value: 'none' } }
-                %button.btn.btn-link
-                  No Assignee
-              %li.divider
-            %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}}
-          #js-dropdown-milestone.dropdown-menu{ data: { icon: 'clock-o', hint: 'milestone', tag: '%milestone' } }
-            %ul{ data: { dropdown: true } }
-              %li.filter-dropdown-item{ data: { value: 'none' } }
-                %button.btn.btn-link
-                  No Milestone
-              %li.filter-dropdown-item{ data: { value: 'upcoming' } }
-                %button.btn.btn-link
-                  Upcoming
-              %li.filter-dropdown-item{ 'data-value' => 'started' }
-                %button.btn.btn-link
-                  Started
-              %li.divider
-            %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
-              %li.filter-dropdown-item
-                %button.btn.btn-link.js-data-value
-                  {{title}}
-          #js-dropdown-label.dropdown-menu{ data: { icon: 'tag', hint: 'label', tag: '~label', type: 'array' } }
-            %ul{ data: { dropdown: true } }
-              %li.filter-dropdown-item{ data: { value: 'none' } }
-                %button.btn.btn-link
-                  No Label
-              %li.divider
-            %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
-              %li.filter-dropdown-item
-                %button.btn.btn-link
-                  %span.dropdown-label-box{ style: 'background: {{color}}' }
-                  %span.label-title.js-data-value
+                      Press Enter or click to search
+              %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
+                %li.filter-dropdown-item
+                  %button.btn.btn-link
+                    -# Encapsulate static class name `{{icon}}` inside #{} to bypass
+                    -# haml lint's ClassAttributeWithStaticValue
+                    %i.fa{ class: "#{'{{icon}}'}" }
+                    %span.js-filter-hint
+                      {{hint}}
+                    %span.js-filter-tag.dropdown-light-content
+                      {{tag}}
+            #js-dropdown-author.filtered-search-input-dropdown-menu.dropdown-menu{ data: { icon: 'pencil', hint: 'author', tag: '@author' } }
+              %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}}
+            #js-dropdown-assignee.filtered-search-input-dropdown-menu.dropdown-menu{ data: { icon: 'user', hint: 'assignee', tag: '@assignee' } }
+              %ul{ data: { dropdown: true } }
+                %li.filter-dropdown-item{ data: { value: 'none' } }
+                  %button.btn.btn-link
+                    No Assignee
+                %li.divider
+              %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}}
+            #js-dropdown-milestone.filtered-search-input-dropdown-menu.dropdown-menu{ data: { icon: 'clock-o', hint: 'milestone', tag: '%milestone' } }
+              %ul{ data: { dropdown: true } }
+                %li.filter-dropdown-item{ data: { value: 'none' } }
+                  %button.btn.btn-link
+                    No Milestone
+                %li.filter-dropdown-item{ data: { value: 'upcoming' } }
+                  %button.btn.btn-link
+                    Upcoming
+                %li.filter-dropdown-item{ 'data-value' => 'started' }
+                  %button.btn.btn-link
+                    Started
+                %li.divider
+              %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
+                %li.filter-dropdown-item
+                  %button.btn.btn-link.js-data-value
                     {{title}}
+            #js-dropdown-label.filtered-search-input-dropdown-menu.dropdown-menu{ data: { icon: 'tag', hint: 'label', tag: '~label', type: 'array' } }
+              %ul{ data: { dropdown: true } }
+                %li.filter-dropdown-item{ data: { value: 'none' } }
+                  %button.btn.btn-link
+                    No Label
+                %li.divider
+              %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
+                %li.filter-dropdown-item
+                  %button.btn.btn-link
+                    %span.dropdown-label-box{ style: 'background: {{color}}' }
+                    %span.label-title.js-data-value
+                      {{title}}
         .filter-dropdown-container
           - if type == :boards
             - if can?(current_user, :admin_list, @project)