Merge branch '47814-search-view-labels' into 'master'

Resolve "Selected project in the search view is not fully readable"

Closes #47814

See merge request gitlab-org/gitlab-ce!31137

12 files changed, 139 insertions, 44 deletions

diff --git a/app/assets/javascripts/pages/search/show/search.js b/app/assets/javascripts/pages/search/show/search.js
index d5a8e712d6b..7743e05e748 100644
--- a/app/assets/javascripts/pages/search/show/search.js
+++ b/app/assets/javascripts/pages/search/show/search.js
@@ -37,9 +37,6 @@ export default class Search {
       text(obj) {
         return obj.full_name;
       },
-      toggleLabel(obj) {
-        return `${$groupDropdown.data('defaultLabel')} ${obj.full_name}`;
-      },
       clicked: () => Search.submitSearch(),
     });
 
@@ -70,9 +67,6 @@ export default class Search {
       text(obj) {
         return obj.name_with_namespace;
       },
-      toggleLabel(obj) {
-        return `${$projectDropdown.data('defaultLabel')} ${obj.name_with_namespace}`;
-      },
       clicked: () => Search.submitSearch(),
     });
   }
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index dbf600df9d6..58e46cfb70f 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -186,15 +186,12 @@ input[type='checkbox']:hover {
   }
 }
 
-.search-holder {
-  @include media-breakpoint-up(sm) {
-    display: flex;
-  }
+.search-field-holder,
+.project-filter-form {
+  flex: 1 0 auto;
+  position: relative;
 
-  .search-field-holder,
-  .project-filter-form {
-    flex: 1 0 auto;
-    position: relative;
+  .search-holder & {
     margin-right: 0;
 
     @include media-breakpoint-up(sm) {
@@ -202,6 +199,7 @@ input[type='checkbox']:hover {
     }
   }
 
+
   .search-icon {
     position: absolute;
     left: 10px;
@@ -215,9 +213,16 @@ input[type='checkbox']:hover {
     padding-left: $gl-padding + 15px;
     padding-right: $gl-padding + 15px;
   }
+}
+
+.search-holder {
+  @include media-breakpoint-up(sm) {
+    display: flex;
+  }
 
   .btn-search,
-  .btn-success {
+  .btn-success,
+  .dropdown-menu-toggle {
     width: 100%;
     margin-top: 5px;
 
@@ -236,9 +241,6 @@ input[type='checkbox']:hover {
   }
 
   .dropdown-menu-toggle {
-    width: 100%;
-    margin-top: 5px;
-
     @include media-breakpoint-up(sm) {
       width: 180px;
       margin-top: 0;
@@ -262,6 +264,25 @@ input[type='checkbox']:hover {
   }
 }
 
+.search-page-form {
+  .dropdown-menu-toggle,
+  .btn-search {
+    width: 100%;
+  }
+
+  .dropdown-menu-toggle {
+    @include media-breakpoint-up(lg) {
+      width: 240px;
+    }
+  }
+
+  .btn-search {
+    @include media-breakpoint-up(lg) {
+      width: auto;
+    }
+  }
+}
+
 // Disable webkit input icons, link to solution: https://stackoverflow.com/questions/9421551/how-do-i-remove-all-default-webkit-search-field-styling
 /* stylelint-disable property-no-vendor-prefix */
 input[type='search']::-webkit-search-decoration,
diff --git a/app/views/search/_filter.html.haml b/app/views/search/_filter.html.haml
index c8b6a3258ab..bee4aff605f 100644
--- a/app/views/search/_filter.html.haml
+++ b/app/views/search/_filter.html.haml
@@ -2,10 +2,11 @@
   = hidden_field_tag :group_id, params[:group_id]
 - if params[:project_id].present?
   = hidden_field_tag :project_id, params[:project_id]
-.dropdown
-  %button.dropdown-menu-toggle.js-search-group-dropdown{ type: "button", data: { toggle: "dropdown", default_label: _('Group:'), group_id: params[:group_id] } }
+.dropdown.form-group.mb-lg-0.mx-lg-1
+  %label.d-block{ for: "dashboard_search_group" }
+    = _("Group")
+  %button.dropdown-menu-toggle.js-search-group-dropdown.mt-0{ type: "button", id: "dashboard_search_group", data: { toggle: "dropdown", group_id: params[:group_id] } }
     %span.dropdown-toggle-text
-      = _("Group:")
       - if @group.present?
         = @group.name
       - else
@@ -17,10 +18,11 @@
     = dropdown_content
     = dropdown_loading
 
-.dropdown.project-filter
-  %button.dropdown-menu-toggle.js-search-project-dropdown{ type: "button", data: { toggle: "dropdown", default_label: _('Project:') } }
+.dropdown.project-filter.form-group.mb-lg-0.mx-lg-1
+  %label.d-block{ for: "dashboard_search_project" }
+    = _("Project")
+  %button.dropdown-menu-toggle.js-search-project-dropdown.mt-0{ type: "button", id: "dashboard_search_project", data: { toggle: "dropdown"} }
     %span.dropdown-toggle-text
-      = _("Project:")
       - if @project.present?
         = @project.full_name
       - else
diff --git a/app/views/search/_form.html.haml b/app/views/search/_form.html.haml
index db0dcc8adfb..4c4f3e0298b 100644
--- a/app/views/search/_form.html.haml
+++ b/app/views/search/_form.html.haml
@@ -1,16 +1,20 @@
-= form_tag search_path, method: :get, class: 'js-search-form' do |f|
+= form_tag search_path, method: :get, class: 'search-page-form js-search-form' do |f|
   = hidden_field_tag :snippets, params[:snippets]
   = hidden_field_tag :scope, params[:scope]
 
-  .search-holder
-    .search-field-holder
-      = search_field_tag :search, params[:search], placeholder: _("Search for projects, issues, etc."), class: "form-control search-text-input js-search-input", id: "dashboard_search", autofocus: true, spellcheck: false
-      = icon("search", class: "search-icon")
-      %button.search-clear.js-search-clear{ class: ("hidden" if !params[:search].present?), type: "button", tabindex: "-1" }
-        = icon("times-circle")
-        %span.sr-only
-          = _("Clear search")
+  .d-lg-flex.align-items-end
+    .search-field-holder.form-group.mr-lg-1.mb-lg-0
+      %label{ for: "dashboard_search" }
+        = _("What are you searching for?")
+      .position-relative
+        = search_field_tag :search, params[:search], placeholder: _("Search for projects, issues, etc."), class: "form-control search-text-input js-search-input", id: "dashboard_search", autofocus: true, spellcheck: false
+        = icon("search", class: "search-icon")
+        %button.search-clear.js-search-clear{ class: ("hidden" if !params[:search].present?), type: "button", tabindex: "-1" }
+          = icon("times-circle")
+          %span.sr-only
+            = _("Clear search")
     - unless params[:snippets].eql? 'true'
       = render 'filter'
-    = button_tag _("Search"), class: "btn btn-success btn-search"
-    = render_if_exists 'search/form_elasticsearch'
+    .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"
+      = render_if_exists 'search/form_elasticsearch'
diff --git a/app/views/search/show.html.haml b/app/views/search/show.html.haml
index 3260d05f509..9235678bc1d 100644
--- a/app/views/search/show.html.haml
+++ b/app/views/search/show.html.haml
@@ -1,6 +1,10 @@
 - @hide_top_links = true
-- breadcrumb_title _("Search")
 - page_title @search_term
+- @hide_breadcrumbs = true
+
+.page-title-holder.d-flex.align-items-center
+  %h1.page-title<
+    = _('Search')
 
 .prepend-top-default
   = render 'search/form'
diff --git a/changelogs/unreleased/47814-search-view-labels.yml b/changelogs/unreleased/47814-search-view-labels.yml
new file mode 100644
index 00000000000..b4f10150d13
--- /dev/null
+++ b/changelogs/unreleased/47814-search-view-labels.yml
@@ -0,0 +1,5 @@
+---
+title: Moved labels out of fields on Search page
+merge_request: 31137
+author:
+type: fixed
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 86317dd887f..022d1745a1b 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -5260,9 +5260,6 @@ msgstr ""
 msgid "Group was successfully updated."
 msgstr ""
 
-msgid "Group:"
-msgstr ""
-
 msgid "Group: %{group_name}"
 msgstr ""
 
@@ -8486,9 +8483,6 @@ msgstr ""
 msgid "Project visibility level will be changed to match namespace rules when transferring to a group."
 msgstr ""
 
-msgid "Project:"
-msgstr ""
-
 msgid "ProjectActivityRSS|Subscribe"
 msgstr ""
 
@@ -12437,6 +12431,9 @@ msgstr ""
 msgid "Welcome to your Issue Board!"
 msgstr ""
 
+msgid "What are you searching for?"
+msgstr ""
+
 msgid "When a runner is locked, it cannot be assigned to other projects"
 msgstr ""
 
diff --git a/spec/features/search/user_uses_header_search_field_spec.rb b/spec/features/search/user_uses_header_search_field_spec.rb
index 29ce5425323..c781048d06d 100644
--- a/spec/features/search/user_uses_header_search_field_spec.rb
+++ b/spec/features/search/user_uses_header_search_field_spec.rb
@@ -22,7 +22,7 @@ describe 'User uses header search field', :js do
       fill_in('search', with: 'gitlab')
       find('#search').native.send_keys(:enter)
 
-      page.within('.breadcrumbs-sub-title') do
+      page.within('.page-title') do
         expect(page).to have_content('Search')
       end
     end
diff --git a/spec/features/search/user_uses_search_filters_spec.rb b/spec/features/search/user_uses_search_filters_spec.rb
index f5cda15b38a..fbd7da3c643 100644
--- a/spec/features/search/user_uses_search_filters_spec.rb
+++ b/spec/features/search/user_uses_search_filters_spec.rb
@@ -22,7 +22,7 @@ describe 'User uses search filters', :js do
 
       wait_for_requests
 
-      page.within('.search-holder') do
+      page.within('.search-page-form') do
         click_link(group.name)
       end
 
diff --git a/spec/views/search/_filter.html.haml_spec.rb b/spec/views/search/_filter.html.haml_spec.rb
new file mode 100644
index 00000000000..d2cd636f8c6
--- /dev/null
+++ b/spec/views/search/_filter.html.haml_spec.rb
@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe 'search/_filter' do
+  context 'when the search page is opened' do
+    it 'displays the correct elements' do
+      render
+
+      expect(rendered).to have_selector('label[for="dashboard_search_group"]')
+      expect(rendered).to have_selector('button#dashboard_search_group')
+
+      expect(rendered).to have_selector('label[for="dashboard_search_project"]')
+      expect(rendered).to have_selector('button#dashboard_search_project')
+    end
+  end
+end
diff --git a/spec/views/search/_form.html.haml_spec.rb b/spec/views/search/_form.html.haml_spec.rb
new file mode 100644
index 00000000000..69f40895d86
--- /dev/null
+++ b/spec/views/search/_form.html.haml_spec.rb
@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe 'search/_form' do
+  context 'when the search page is opened' do
+    it 'displays the correct elements' do
+      render
+
+      expect(rendered).to have_selector('.search-field-holder.form-group')
+      expect(rendered).to have_selector('label[for="dashboard_search"]')
+    end
+  end
+end
diff --git a/spec/views/search/show.html.haml_spec.rb b/spec/views/search/show.html.haml_spec.rb
new file mode 100644
index 00000000000..483b913f2cc
--- /dev/null
+++ b/spec/views/search/show.html.haml_spec.rb
@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe 'search/show' do
+  let(:search_term) { nil }
+
+  before do
+    stub_template "search/_category.html.haml" => 'Category Partial'
+    stub_template "search/_results.html.haml" => 'Results Partial'
+
+    @search_term = search_term
+
+    render
+  end
+
+  context 'when the search page is opened' do
+    it 'displays the title' do
+      expect(rendered).to have_selector('h1.page-title', text: 'Search')
+      expect(rendered).not_to have_selector('h1.page-title code')
+    end
+
+    it 'does not render partials' do
+      expect(rendered).not_to render_template('search/_category')
+      expect(rendered).not_to render_template('search/_results')
+    end
+  end
+
+  context 'when search term is supplied' do
+    let(:search_term) { 'Search Foo' }
+
+    it 'renders partials' do
+      expect(rendered).to render_template('search/_category')
+      expect(rendered).to render_template('search/_results')
+    end
+  end
+end