11 files changed, 84 insertions, 87 deletions

diff --git a/app/views/search/_filter.html.haml b/app/views/search/_filter.html.haml
index e7febd4638b..964a2a2772a 100644
--- a/app/views/search/_filter.html.haml
+++ b/app/views/search/_filter.html.haml
@@ -2,25 +2,14 @@
   = hidden_field_tag :group_id, params[:group_id]
 - if params[:project_id].present?
   = hidden_field_tag :project_id, params[:project_id]
-.dropdown.form-group.mb-lg-0.mx-lg-1{ data: { testid: "group-filter" } }
+.dropdown.form-group.mb-lg-0.mx-lg-1.gl-p-0{ data: { testid: "group-filter" } }
   %label.d-block{ for: "dashboard_search_group" }
     = _("Group")
-  %button.dropdown-menu-toggle.gl-display-inline-flex.js-search-group-dropdown.gl-mt-0{ type: "button", id: "dashboard_search_group", data: { toggle: "dropdown", group_id: params[:group_id] } }
-    %span.dropdown-toggle-text.gl-flex-grow-1.str-truncated-100
-      = @group&.name || _("Any")
-    - if @group.present?
-      = link_to sprite_icon("clear"), url_for(safe_params.except(:project_id, :group_id)), class: 'search-clear js-search-clear has-tooltip', title: _('Clear')
-    = icon("chevron-down")
-  .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-right
-    = dropdown_title(_("Filter results by group"))
-    = dropdown_filter(_("Search groups"))
-    = dropdown_content
-    = dropdown_loading
-
-.dropdown.project-filter.form-group.mb-lg-0.mx-lg-1
+  %input#js-search-group-dropdown.dropdown-menu-toggle{ value: "Loading...", data: { "initial-group-data": @group.to_json } }
+.dropdown.form-group.mb-lg-0.mx-lg-1{ data: { testid: "project-filter" } }
   %label.d-block{ for: "dashboard_search_project" }
     = _("Project")
-  %button.dropdown-menu-toggle.gl-display-inline-flex.js-search-project-dropdown.gl-mt-0{ type: "button", id: "dashboard_search_project", data: { toggle: "dropdown", target: '.project-filter' } }
+  %button.dropdown-menu-toggle.gl-display-inline-flex.js-search-project-dropdown.gl-mt-0{ type: "button", id: "dashboard_search_project", data: { toggle: "dropdown" } }
     %span.dropdown-toggle-text.gl-flex-grow-1.str-truncated-100
       = @project&.full_name || _("Any")
     - if @project.present?
diff --git a/app/views/search/_form.html.haml b/app/views/search/_form.html.haml
index c8fa016662f..80973c2b273 100644
--- a/app/views/search/_form.html.haml
+++ b/app/views/search/_form.html.haml
@@ -17,4 +17,4 @@
     - unless params[:snippets].eql? 'true'
       = render 'filter'
     .d-flex-center.flex-column.flex-lg-row
-      = button_tag _("Search"), class: "btn btn-success btn-search form-control mt-lg-0 ml-lg-1 align-self-end"
+      = button_tag _("Search"), class: "gl-button btn btn-success btn-search form-control mt-lg-0 ml-lg-1 align-self-end"
diff --git a/app/views/search/_results.html.haml b/app/views/search/_results.html.haml
index 95c378bff7c..855112bdba2 100644
--- a/app/views/search/_results.html.haml
+++ b/app/views/search/_results.html.haml
@@ -1,38 +1,47 @@
 - if @search_objects.to_a.empty?
-  = render partial: "search/results/filters"
-  = render partial: "search/results/empty"
-  = render_if_exists 'shared/promotions/promote_advanced_search'
+  .gl-display-md-flex
+    - if %w(issues merge_requests).include?(@scope)
+      #js-search-sidebar.gl-display-flex.gl-flex-direction-column.col-md-3.gl-mr-4{ }
+    .gl-w-full
+      = render partial: "search/results/empty"
+      = render_if_exists 'shared/promotions/promote_advanced_search'
 - else
-  .row-content-block.d-md-flex.text-left.align-items-center
-    - unless @search_objects.is_a?(Kaminari::PaginatableWithoutCount)
-      = search_entries_info(@search_objects, @scope, @search_term)
-    - unless @show_snippets
-      - if @project
-        - link_to_project = link_to(@project.full_name, @project, class: 'ml-md-1')
-        - if @scope == 'blobs'
-          = s_("SearchCodeResults|in")
-          .mx-md-1
-            = render partial: "shared/ref_switcher", locals: { ref: repository_ref(@project), form_path: request.fullpath, field_name: 'repository_ref' }
-          = s_('SearchCodeResults|of %{link_to_project}').html_safe % { link_to_project: link_to_project }
-        - else
-          = _("in project %{link_to_project}").html_safe % { link_to_project: link_to_project }
-      - elsif @group
-        - link_to_group = link_to(@group.name, @group, class: 'ml-md-1')
-        = _("in group %{link_to_group}").html_safe % { link_to_group: link_to_group }
+  .search-results-status
+    .row-content-block.gl-display-flex
+      .gl-display-md-flex.gl-text-left.gl-align-items-center.gl-flex-grow-1
+        - unless @search_objects.is_a?(Kaminari::PaginatableWithoutCount)
+          = search_entries_info(@search_objects, @scope, @search_term)
+        - unless @show_snippets
+          - if @project
+            - link_to_project = link_to(@project.full_name, @project, class: 'ml-md-1')
+            - if @scope == 'blobs'
+              = s_("SearchCodeResults|in")
+              .mx-md-1
+                = render partial: "shared/ref_switcher", locals: { ref: repository_ref(@project), form_path: request.fullpath, field_name: 'repository_ref' }
+              = s_('SearchCodeResults|of %{link_to_project}').html_safe % { link_to_project: link_to_project }
+            - else
+              = _("in project %{link_to_project}").html_safe % { link_to_project: link_to_project }
+          - elsif @group
+            - link_to_group = link_to(@group.name, @group, class: 'ml-md-1')
+            = _("in group %{link_to_group}").html_safe % { link_to_group: link_to_group }
+      .gl-display-md-flex.gl-flex-direction-column
+        = render partial: 'search/sort_dropdown'
   = render_if_exists 'shared/promotions/promote_advanced_search'
-  = render partial: "search/results/filters"
 
-  .results.gl-mt-3
-    - if @scope == 'commits'
-      %ul.content-list.commit-list
-        = render partial: "search/results/commit", collection: @search_objects
-    - else
-      .search-results
-        - if @scope == 'projects'
-          .term
-            = render 'shared/projects/list', projects: @search_objects, pipeline_status: false
-        - else
-          = render_if_exists partial: "search/results/#{@scope.singularize}", collection: @search_objects
+  .results.gl-display-md-flex.gl-mt-3
+    - if %w(issues merge_requests).include?(@scope)
+      #js-search-sidebar.gl-display-flex.gl-flex-direction-column.col-md-3.gl-mr-4{ }
+    .gl-w-full
+      - if @scope == 'commits'
+        %ul.content-list.commit-list
+          = render partial: "search/results/commit", collection: @search_objects
+      - else
+        .search-results
+          - if @scope == 'projects'
+            .term
+              = render 'shared/projects/list', projects: @search_objects, pipeline_status: false
+          - else
+            = render_if_exists partial: "search/results/#{@scope.singularize}", collection: @search_objects
 
-    - if @scope != 'projects'
-      = paginate_collection(@search_objects)
+      - if @scope != 'projects'
+        = paginate_collection(@search_objects)
diff --git a/app/views/search/_sort_dropdown.html.haml b/app/views/search/_sort_dropdown.html.haml
new file mode 100644
index 00000000000..085e2f348f7
--- /dev/null
+++ b/app/views/search/_sort_dropdown.html.haml
@@ -0,0 +1,16 @@
+- return unless ['issues', 'merge_requests'].include?(@scope)
+
+- sort_value = @sort
+- sort_title = search_sort_option_title(sort_value)
+
+.dropdown.gl-display-inline-block.gl-ml-3.filter-dropdown-container
+  .btn-group{ role: 'group' }
+    .btn-group{ role: 'group' }
+    %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' }, class: 'btn btn-default' }
+      = sort_title
+      = icon('chevron-down')
+    %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
+      %li
+        = render_if_exists('search/sort_by_relevancy', sort_title: sort_title)
+        = sortable_item(sort_title_recently_created, page_filter_path(sort: sort_value_recently_created), sort_title)
+    = search_sort_direction_button(sort_value)
diff --git a/app/views/search/results/_blob_data.html.haml b/app/views/search/results/_blob_data.html.haml
index d873a15d051..16d640273b0 100644
--- a/app/views/search/results/_blob_data.html.haml
+++ b/app/views/search/results/_blob_data.html.haml
@@ -7,4 +7,4 @@
           = search_blob_title(project, path)
     - if blob.data
       .file-content.code.term{ data: { qa_selector: 'file_text_content' } }
-        = render 'shared/file_highlight', blob: blob, first_line_number: blob.startline, blob_link: blob_link
+        = render 'shared/file_highlight', blob: blob, first_line_number: blob.startline, blob_link: blob_link, highlight_line: blob.highlight_line
diff --git a/app/views/search/results/_empty.html.haml b/app/views/search/results/_empty.html.haml
index 3cd1c901f8e..0462c29f5c1 100644
--- a/app/views/search/results/_empty.html.haml
+++ b/app/views/search/results/_empty.html.haml
@@ -1,5 +1,5 @@
-.search_box
+.search_box.gl-my-8
   .search_glyph
   %h4
     = sprite_icon('search', size: 24, css_class: 'gl-vertical-align-text-bottom')
-    = search_entries_empty_message(@scope, @search_term)
+    = search_entries_empty_message(@scope, @search_term, @group, @project)
diff --git a/app/views/search/results/_filters.html.haml b/app/views/search/results/_filters.html.haml
deleted file mode 100644
index 632d3dfd58c..00000000000
--- a/app/views/search/results/_filters.html.haml
+++ /dev/null
@@ -1,7 +0,0 @@
-.d-lg-flex.align-items-end
-  #js-search-filter-by-state{ 'v-cloak': true }
-  - if Feature.enabled?(:search_filter_by_confidential, @group)
-    #js-search-filter-by-confidential{ 'v-cloak': true }
-
-  - if %w(issues merge_requests).include?(@scope)
-    %hr.gl-mt-4.gl-mb-4
diff --git a/app/views/search/results/_issuable.html.haml b/app/views/search/results/_issuable.html.haml
new file mode 100644
index 00000000000..288ac53a954
--- /dev/null
+++ b/app/views/search/results/_issuable.html.haml
@@ -0,0 +1,10 @@
+%div{ class: 'search-result-row gl-pb-3! gl-mt-5 gl-mb-0!' }
+  %span.gl-display-flex.gl-align-items-center
+    %span.badge.badge-pill.gl-badge.sm{ class: "badge-#{issuable_state_to_badge_class(issuable)}" }= issuable_state_text(issuable)
+    = sprite_icon('eye-slash', css_class: 'gl-text-gray-500 gl-ml-2') if issuable.respond_to?(:confidential?) && issuable.confidential?
+    = link_to issuable_path(issuable), data: { track_event: 'click_text', track_label: "#{issuable.class.name.downcase}_title", track_property: 'search_result' }, class: 'gl-w-full' do
+      %span.term.str-truncated.gl-font-weight-bold.gl-ml-2= issuable.title
+  .gl-text-gray-500.gl-my-3
+    = sprintf(s_(' %{project_name}#%{issuable_iid} · opened %{issuable_created} by %{author}'), { project_name: issuable.project.full_name, issuable_iid: issuable.iid, issuable_created: time_ago_with_tooltip(issuable.created_at, placement: 'bottom'), author: link_to_member(@project, issuable.author, avatar: false) }).html_safe
+  .description.term.col-sm-10.gl-px-0
+    = highlight_and_truncate_issuable(issuable, @search_term, @search_highlight)
diff --git a/app/views/search/results/_issue.html.haml b/app/views/search/results/_issue.html.haml
index a101e60f297..6fb463b75fc 100644
--- a/app/views/search/results/_issue.html.haml
+++ b/app/views/search/results/_issue.html.haml
@@ -1,13 +1 @@
-%div{ class: 'search-result-row gl-pb-3! gl-mt-5 gl-mb-0!' }
-  %span.gl-display-flex.gl-align-items-center
-    - if issue.closed?
-      %span.badge.badge-info.badge-pill.gl-badge.sm= _("Closed")
-    - else
-      %span.badge.badge-success.badge-pill.gl-badge.sm= _("Open")
-    = sprite_icon('eye-slash', css_class: 'gl-text-gray-500 gl-ml-2') if issue.confidential?
-    = link_to project_issue_path(issue.project, issue), data: { track_event: 'click_text', track_label: 'issue_title', track_property: 'search_result' }, class: 'gl-w-full' do
-      %span.term.str-truncated.gl-font-weight-bold.gl-ml-2= issue.title
-  .gl-text-gray-500.gl-my-3
-    = sprintf(s_(' %{project_name}#%{issue_iid} · opened %{issue_created} by %{author}'), { project_name: issue.project.full_name, issue_iid: issue.iid, issue_created: time_ago_with_tooltip(issue.created_at, placement: 'bottom'), author: link_to_member(@project, issue.author, avatar: false) }).html_safe
-  .description.term.col-sm-10.gl-px-0
-    = highlight_and_truncate_issue(issue, @search_term, @search_highlight)
+= render partial: 'search/results/issuable', object: issue
diff --git a/app/views/search/results/_merge_request.html.haml b/app/views/search/results/_merge_request.html.haml
index 3135ab9a17e..b2b067bcf68 100644
--- a/app/views/search/results/_merge_request.html.haml
+++ b/app/views/search/results/_merge_request.html.haml
@@ -1,14 +1 @@
-.search-result-row
-  %h4
-    = link_to project_merge_request_path(merge_request.target_project, merge_request), data: {track_event: 'click_text', track_label: 'merge_request_title', track_property: 'search_result'} do
-      %span.term.str-truncated= merge_request.title
-    - if merge_request.merged?
-      %span.badge.badge-primary.gl-ml-2= _("Merged")
-    - elsif merge_request.closed?
-      %span.badge.badge-danger.gl-ml-2= _("Closed")
-    .float-right= merge_request.to_reference
-  - if merge_request.description.present?
-    .description.term
-      = search_md_sanitize(merge_request.description)
-  %span.light
-    #{merge_request.project.full_name}
+= render partial: 'search/results/issuable', object: merge_request
diff --git a/app/views/search/results/_wiki_blob.html.haml b/app/views/search/results/_wiki_blob.html.haml
index 3040917dd6e..55161ce333b 100644
--- a/app/views/search/results/_wiki_blob.html.haml
+++ b/app/views/search/results/_wiki_blob.html.haml
@@ -1,4 +1,9 @@
 - project = wiki_blob.project
 - wiki_blob_link = project_wiki_path(project, wiki_blob.basename)
 
-= render partial: 'search/results/blob_data', locals: { blob: wiki_blob, project: project, path: wiki_blob.path, blob_link: wiki_blob_link }
+%div{ class: 'search-result-row gl-pb-3! gl-mt-5 gl-mb-0!' }
+  %span.gl-display-flex.gl-align-items-center
+    = link_to wiki_blob_link, data: { track_event: 'click_text', track_label: "wiki_title", track_property: 'search_result' }, class: 'gl-w-full' do
+      %span.term.str-truncated.gl-font-weight-bold= ::Gitlab::Git::Wiki::GollumSlug.canonicalize_filename(wiki_blob.path)
+  .description.term.col-sm-10.gl-px-0
+    = simple_search_highlight_and_truncate(wiki_blob.data, @search_term)