Global Search - Redesign Issue Results Title

Rearranges text, compacts text, adds
status badge, adds links to author.

app/views/search/results/_issue.html.haml

-.search-result-row
-  %h4
-    = confidential_icon(issue)
-    = link_to project_issue_path(issue.project, issue), data: {track_event: 'click_text', track_label: 'issue_title', track_property: 'search_result'} do
-      %span.term.str-truncated= issue.title
+%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-danger.gl-ml-2= _("Closed")
-    .float-right ##{issue.iid}
+      %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
   - if issue.description.present?
-    .description.term
-      = search_md_sanitize(issue.description)
-  %span.light
-    #{issue.project.full_name}
+    .description.term.col-sm-10.gl-px-0
+      = truncate(issue.description, length: 200)

changelogs/unreleased/233240-search-result-title-update.yml

+---
+title: Global Search - Redesign Issue Results Title
+merge_request: 41016
+author:
+type: changed

locale/gitlab.pot

@@ -16,6 +16,9 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=INTEGER; plural=EXPRESSION;\n"
 
+msgid " %{project_name}#%{issue_iid} · opened %{issue_created} by %{author}"
+msgstr ""
+
 msgid " %{start} to %{end}"
 msgstr ""
 

spec/features/search/user_searches_for_issues_spec.rb

@@ -6,7 +6,13 @@ RSpec.describe 'User searches for issues', :js do
   let(:user) { create(:user) }
   let(:project) { create(:project, namespace: user.namespace) }
   let!(:issue1) { create(:issue, title: 'Foo', project: project) }
-  let!(:issue2) { create(:issue, title: 'Bar', project: project) }
+  let!(:issue2) { create(:issue, :closed, :confidential, title: 'Bar', project: project) }
+
+  def search_for_issue(search)
+    fill_in('dashboard_search', with: search)
+    find('.btn-search').click
+    select_search_scope('Issues')
+  end
 
   context 'when signed in' do
     before do
@@ -19,9 +25,7 @@ RSpec.describe 'User searches for issues', :js do
     include_examples 'top right search form'
 
     it 'finds an issue' do
-      fill_in('dashboard_search', with: issue1.title)
-      find('.btn-search').click
-      select_search_scope('Issues')
+      search_for_issue(issue1.title)
 
       page.within('.results') do
         expect(page).to have_link(issue1.title)
@@ -29,6 +33,40 @@ RSpec.describe 'User searches for issues', :js do
       end
     end
 
+    it 'hides confidential icon for non-confidential issues' do
+      search_for_issue(issue1.title)
+
+      page.within('.results') do
+        expect(page).not_to have_css('[data-testid="eye-slash-icon"]')
+      end
+    end
+
+    it 'shows confidential icon for confidential issues' do
+      search_for_issue(issue2.title)
+
+      page.within('.results') do
+        expect(page).to have_css('[data-testid="eye-slash-icon"]')
+      end
+    end
+
+    it 'shows correct badge for open issues' do
+      search_for_issue(issue1.title)
+
+      page.within('.results') do
+        expect(page).to have_css('.badge-success')
+        expect(page).not_to have_css('.badge-info')
+      end
+    end
+
+    it 'shows correct badge for closed issues' do
+      search_for_issue(issue2.title)
+
+      page.within('.results') do
+        expect(page).not_to have_css('.badge-success')
+        expect(page).to have_css('.badge-info')
+      end
+    end
+
     context 'when on a project page' do
       it 'finds an issue' do
         find('.js-search-project-dropdown').click
@@ -37,9 +75,7 @@ RSpec.describe 'User searches for issues', :js do
           click_link(project.full_name)
         end
 
-        fill_in('dashboard_search', with: issue1.title)
-        find('.btn-search').click
-        select_search_scope('Issues')
+        search_for_issue(issue1.title)
 
         page.within('.results') do
           expect(page).to have_link(issue1.title)
@@ -59,9 +95,7 @@ RSpec.describe 'User searches for issues', :js do
     include_examples 'top right search form'
 
     it 'finds an issue' do
-      fill_in('dashboard_search', with: issue1.title)
-      find('.btn-search').click
-      select_search_scope('Issues')
+      search_for_issue(issue1.title)
 
       page.within('.results') do
         expect(page).to have_link(issue1.title)