Resolve "Frontend for clarifying the usefulness of the search bar"

app/assets/stylesheets/framework/gitlab_theme.scss

@@ -3,7 +3,6 @@
  */
 
 @mixin gitlab-theme(
-  $location-badge-color,
   $search-and-nav-links,
   $active-tab-border,
   $border-and-box-shadow,
@@ -119,12 +118,6 @@
       }
     }
 
-    .location-badge {
-      color: $location-badge-color;
-      background-color: rgba($search-and-nav-links, 0.1);
-      border-right: 1px solid $sidebar-text;
-    }
-
     .search-input::placeholder {
       color: rgba($search-and-nav-links, 0.8);
     }
@@ -141,10 +134,6 @@
         background-color: $white-light;
       }
 
-      .location-badge {
-        color: $gl-text-color;
-      }
-
       .search-input-wrap {
         .search-icon {
           fill: rgba($search-and-nav-links, 0.8);
@@ -200,7 +189,6 @@
 body {
   &.ui-indigo {
     @include gitlab-theme(
-      $indigo-100,
       $indigo-200,
       $indigo-500,
       $indigo-700,
@@ -212,7 +200,6 @@ body {
 
   &.ui-light-indigo {
     @include gitlab-theme(
-      $indigo-100,
       $indigo-200,
       $indigo-500,
       $indigo-500,
@@ -224,7 +211,6 @@ body {
 
   &.ui-blue {
     @include gitlab-theme(
-      $theme-blue-100,
       $theme-blue-200,
       $theme-blue-500,
       $theme-blue-700,
@@ -236,7 +222,6 @@ body {
 
   &.ui-light-blue {
     @include gitlab-theme(
-      $theme-light-blue-100,
       $theme-light-blue-200,
       $theme-light-blue-500,
       $theme-light-blue-500,
@@ -248,7 +233,6 @@ body {
 
   &.ui-green {
     @include gitlab-theme(
-      $theme-green-100,
       $theme-green-200,
       $theme-green-500,
       $theme-green-700,
@@ -260,7 +244,6 @@ body {
 
   &.ui-light-green {
     @include gitlab-theme(
-      $theme-green-100,
       $theme-green-200,
       $theme-green-500,
       $theme-green-500,
@@ -272,7 +255,6 @@ body {
 
   &.ui-red {
     @include gitlab-theme(
-      $theme-red-100,
       $theme-red-200,
       $theme-red-500,
       $theme-red-700,
@@ -284,7 +266,6 @@ body {
 
   &.ui-light-red {
     @include gitlab-theme(
-      $theme-light-red-100,
       $theme-light-red-200,
       $theme-light-red-500,
       $theme-light-red-500,
@@ -296,7 +277,6 @@ body {
 
   &.ui-dark {
     @include gitlab-theme(
-      $theme-gray-100,
       $theme-gray-200,
       $theme-gray-500,
       $theme-gray-700,
@@ -308,7 +288,6 @@ body {
 
   &.ui-light {
     @include gitlab-theme(
-      $theme-gray-900,
       $theme-gray-700,
       $theme-gray-800,
       $theme-gray-700,
@@ -357,10 +336,6 @@ body {
         &:hover {
           background-color: $white-light;
           box-shadow: inset 0 0 0 1px $blue-200;
-
-          .location-badge {
-            box-shadow: inset 0 0 0 1px $blue-200;
-          }
         }
       }
 
@@ -373,13 +348,6 @@ body {
           color: $gl-text-color;
         }
       }
-
-      .location-badge {
-        color: $theme-gray-700;
-        box-shadow: inset 0 0 0 1px $border-color;
-        background-color: $nav-badge-bg;
-        border-right: 0;
-      }
     }
 
     .nav-sidebar li.active {

app/assets/stylesheets/framework/variables.scss

@@ -467,7 +467,8 @@ $award-emoji-positive-add-lines: #bb9c13;
  */
 $search-input-border-color: rgba($blue-400, 0.8);
 $search-input-focus-shadow-color: $dropdown-input-focus-shadow;
-$search-input-width: 220px;
+$search-input-width: 240px;
+$search-input-active-width: 320px;
 $location-badge-active-bg: $blue-500;
 $location-icon-color: #e7e9ed;
 

app/assets/stylesheets/pages/search.scss

+$search-dropdown-max-height: 400px;
+$search-avatar-size: 16px;
+
 .search-results {
   .search-result-row {
     border-bottom: 1px solid $border-color;
@@ -24,8 +27,9 @@
   box-shadow: 0 0 4px lighten($search-input-focus-shadow-color, 20%);
 }
 
-input[type="checkbox"]:hover {
-  box-shadow: 0 0 2px 2px lighten($search-input-focus-shadow-color, 20%), 0 0 0 1px lighten($search-input-focus-shadow-color, 20%);
+input[type='checkbox']:hover {
+  box-shadow: 0 0 2px 2px lighten($search-input-focus-shadow-color, 20%),
+    0 0 0 1px lighten($search-input-focus-shadow-color, 20%);
 }
 
 .search {
@@ -40,24 +44,15 @@ input[type="checkbox"]:hover {
     height: 32px;
     border: 0;
     border-radius: $border-radius-default;
-    transition: border-color ease-in-out $default-transition-duration, background-color ease-in-out $default-transition-duration;
+    transition: border-color ease-in-out $default-transition-duration,
+      background-color ease-in-out $default-transition-duration,
+      width ease-in-out $default-transition-duration;
 
     &:hover {
       box-shadow: none;
     }
   }
 
-  .location-badge {
-    white-space: nowrap;
-    height: 32px;
-    font-size: 12px;
-    margin: -4px 4px -4px -4px;
-    line-height: 25px;
-    padding: 4px 8px;
-    border-radius: $border-radius-default 0 0 $border-radius-default;
-    transition: border-color ease-in-out $default-transition-duration;
-  }
-
   .search-input {
     border: 0;
     font-size: 14px;
@@ -104,17 +99,28 @@ input[type="checkbox"]:hover {
     }
 
     .dropdown-header {
-      text-transform: uppercase;
-      font-size: 11px;
+      // Necessary because glDropdown doesn't support a second style of headers
+      font-weight: $gl-font-weight-bold;
+      // .dropdown-menu li has 1px side padding
+      padding: $gl-padding-8 17px;
+      color: $gl-text-color;
+      font-size: $gl-font-size;
+      line-height: 16px;
     }
 
     // Custom dropdown positioning
     .dropdown-menu {
       left: -5px;
+      max-height: $search-dropdown-max-height;
+      overflow: auto;
+
+      @include media-breakpoint-up(xl) {
+        width: $search-input-active-width;
+      }
     }
 
     .dropdown-content {
-      max-height: none;
+      max-height: $search-dropdown-max-height - 18px;
     }
   }
 
@@ -124,6 +130,10 @@ input[type="checkbox"]:hover {
       border-color: $dropdown-input-focus-border;
       box-shadow: none;
 
+      @include media-breakpoint-up(xl) {
+        width: $search-input-active-width;
+      }
+
       .search-input-wrap {
         .search-icon,
         .clear-icon {
@@ -141,12 +151,6 @@ input[type="checkbox"]:hover {
         color: $gl-text-color-tertiary;
       }
     }
-
-    .location-badge {
-      transition: all $default-transition-duration;
-      background-color: $nav-badge-bg;
-      border-color: $border-color;
-    }
   }
 
   &.has-value {
@@ -160,10 +164,24 @@ input[type="checkbox"]:hover {
     }
   }
 
-  &.has-location-badge {
-    .search-input-wrap {
-      width: 68%;
-    }
+  .inline-search-icon {
+    position: relative;
+    margin-right: 4px;
+    color: $gl-text-color-secondary;
+  }
+
+  .identicon,
+  .search-item-avatar {
+    flex-basis: $search-avatar-size;
+    flex-shrink: 0;
+    margin-right: 4px;
+  }
+
+  .search-item-avatar {
+    width: $search-avatar-size;
+    height: $search-avatar-size;
+    border-radius: 50%;
+    border: 1px solid $avatar-border;
   }
 }
 

app/helpers/search_helper.rb

@@ -82,16 +82,16 @@ module SearchHelper
       ref = @ref || @project.repository.root_ref
 
       [
-        { category: "Current Project", label: "Files",          url: project_tree_path(@project, ref) },
-        { category: "Current Project", label: "Commits",        url: project_commits_path(@project, ref) },
-        { category: "Current Project", label: "Network",        url: project_network_path(@project, ref) },
-        { category: "Current Project", label: "Graph",          url: project_graph_path(@project, ref) },
-        { category: "Current Project", label: "Issues",         url: project_issues_path(@project) },
-        { category: "Current Project", label: "Merge Requests", url: project_merge_requests_path(@project) },
-        { category: "Current Project", label: "Milestones",     url: project_milestones_path(@project) },
-        { category: "Current Project", label: "Snippets",       url: project_snippets_path(@project) },
-        { category: "Current Project", label: "Members",        url: project_project_members_path(@project) },
-        { category: "Current Project", label: "Wiki",           url: project_wikis_path(@project) }
+        { category: "In this project", label: "Files",          url: project_tree_path(@project, ref) },
+        { category: "In this project", label: "Commits",        url: project_commits_path(@project, ref) },
+        { category: "In this project", label: "Network",        url: project_network_path(@project, ref) },
+        { category: "In this project", label: "Graph",          url: project_graph_path(@project, ref) },
+        { category: "In this project", label: "Issues",         url: project_issues_path(@project) },
+        { category: "In this project", label: "Merge Requests", url: project_merge_requests_path(@project) },
+        { category: "In this project", label: "Milestones",     url: project_milestones_path(@project) },
+        { category: "In this project", label: "Snippets",       url: project_snippets_path(@project) },
+        { category: "In this project", label: "Members",        url: project_project_members_path(@project) },
+        { category: "In this project", label: "Wiki",           url: project_wikis_path(@project) }
       ]
     else
       []

app/views/layouts/_search.html.haml

@@ -6,21 +6,19 @@
   - group_data_attrs = { group_path: j(@group.path), name: @group.name, issues_path: issues_group_path(j(@group.path)), mr_path: merge_requests_group_path(j(@group.path)) }
 - if @project && @project.persisted?
   - project_data_attrs = { project_path: j(@project.path), name: j(@project.name), issues_path: project_issues_path(@project), mr_path: project_merge_requests_path(@project), issues_disabled: !@project.issues_enabled? }
-.search.search-form{ class: "#{'has-location-badge' if label.present?}" }
+.search.search-form
   = form_tag search_path, method: :get, class: 'form-inline' do |f|
     .search-input-container
-      - if label.present?
-        .location-badge= label
       .search-input-wrap
         .dropdown{ data: { url: search_autocomplete_path } }
-          = search_field_tag 'search', nil, placeholder: _('Search'),
+          = search_field_tag 'search', nil, placeholder: _('Search or jump to…'),
                                             class: 'search-input dropdown-menu-toggle no-outline js-search-dashboard-options',
                                             spellcheck: false,
                                             tabindex: '1',
                                             autocomplete: 'off',
                                             data: { issues_path: issues_dashboard_path,
                                               mr_path: merge_requests_dashboard_path },
-                                            aria: { label: _('Search') }
+                                            aria: { label: _('Search or jump to…') }
           %button.hidden.js-dropdown-search-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           .dropdown-menu.dropdown-select
             = dropdown_content do

changelogs/unreleased/36409-frontend-for-clarifying-the-usefulness-of-the-search-bar.yml

+---
+title: UX improvements to top nav search bar
+merge_request: 20537
+author:
+type: changed

locale/gitlab.pot

@@ -4606,12 +4606,39 @@ msgstr ""
 msgid "Search milestones"
 msgstr ""
 
+msgid "Search or jump to…"
+msgstr ""
+
 msgid "Search project"
 msgstr ""
 
 msgid "Search users"
 msgstr ""
 
+msgid "SearchAutocomplete|All GitLab"
+msgstr ""
+
+msgid "SearchAutocomplete|Issues I've created"
+msgstr ""
+
+msgid "SearchAutocomplete|Issues assigned to me"
+msgstr ""
+
+msgid "SearchAutocomplete|Merge requests I've created"
+msgstr ""
+
+msgid "SearchAutocomplete|Merge requests assigned to me"
+msgstr ""
+
+msgid "SearchAutocomplete|in all GitLab"
+msgstr ""
+
+msgid "SearchAutocomplete|in this group"
+msgstr ""
+
+msgid "SearchAutocomplete|in this project"
+msgstr ""
+
 msgid "Seconds before reseting failure information"
 msgstr ""
 

spec/features/search/user_uses_header_search_field_spec.rb

@@ -62,10 +62,6 @@ describe 'User uses header search field' do
       end
     end
 
-    it 'contains location badge' do
-      expect(page).to have_selector('.has-location-badge')
-    end
-
     context 'when clicking the search field', :js do
       before do
         page.find('#search').click

spec/javascripts/fixtures/search_autocomplete.html.haml

-.search.search-form.has-location-badge
-  %form.navbar-form
+.search.search-form
+  %form.form-inline
     .search-input-container
-      %div.location-badge
-        This project
       .search-input-wrap
         .dropdown
           %input#search.search-input.dropdown-menu-toggle