Merge branch '43786-on-the-issuable-list-add-tooltips-to-icons' into 'master'

Issuable list: add tooltips to icons

Closes #43786

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

app/helpers/issuables_helper.rb

@@ -377,4 +377,11 @@ module IssuablesHelper
   def parent
     @project || @group
   end
+
+  def issuable_milestone_tooltip_title(issuable)
+    if issuable.milestone
+      milestone_tooltip = milestone_tooltip_title(issuable.milestone)
+      _('Milestone') + (milestone_tooltip ? ': ' + milestone_tooltip : '')
+    end
+  end
 end

app/views/projects/issues/_issue.html.haml

@@ -7,7 +7,9 @@
       .issue-main-info
         .issue-title.title
           %span.issue-title-text
-            = confidential_icon(issue)
+            - if issue.confidential?
+              %span.has-tooltip{ title: _('Confidential') }
+                = confidential_icon(issue)
             = link_to issue.title, issue_path(issue)
           - if issue.tasks?
             %span.task-status.hidden-xs
@@ -24,11 +26,11 @@
           - if issue.milestone
             %span.issuable-milestone.hidden-xs
                
-              = link_to project_issues_path(issue.project, milestone_title: issue.milestone.title), data: { html: 1, toggle: 'tooltip', title: milestone_tooltip_title(issue.milestone) } do
+              = link_to project_issues_path(issue.project, milestone_title: issue.milestone.title), data: { html: 1, toggle: 'tooltip', title: issuable_milestone_tooltip_title(issue) } do
                 = icon('clock-o')
                 = issue.milestone.title
           - if issue.due_date
-            %span.issuable-due-date.hidden-xs{ class: "#{'cred' if issue.overdue?}" }
+            %span.issuable-due-date.hidden-xs.has-tooltip{ class: "#{'cred' if issue.overdue?}", title: _('Due date') }
                
               = icon('calendar')
               = issue.due_date.to_s(:medium)

app/views/projects/merge_requests/_merge_request.html.haml

@@ -23,11 +23,11 @@
         - if merge_request.milestone
           %span.issuable-milestone.hidden-xs
              
-            = link_to project_merge_requests_path(merge_request.project, milestone_title: merge_request.milestone.title), data: { html: 1, toggle: 'tooltip', title: milestone_tooltip_title(merge_request.milestone) } do
+            = link_to project_merge_requests_path(merge_request.project, milestone_title: merge_request.milestone.title), data: { html: 1, toggle: 'tooltip', title: issuable_milestone_tooltip_title(merge_request) } do
               = icon('clock-o')
               = merge_request.milestone.title
         - if merge_request.target_project.default_branch != merge_request.target_branch
-          %span.project-ref-path
+          %span.project-ref-path.has-tooltip{ title: _('Target branch') }
              
             = link_to project_ref_path(merge_request.project, merge_request.target_branch), class: 'ref-name' do
               = sprite_icon('fork', size: 12, css_class: 'fork-sprite')
@@ -51,11 +51,11 @@
             = render_pipeline_status(merge_request.head_pipeline)
         - if merge_request.open? && merge_request.broken?
           %li.issuable-pipeline-broken.hidden-xs
-            = link_to merge_request_path(merge_request), class: "has-tooltip", title: "Cannot be merged automatically", data: { container: 'body' } do
+            = link_to merge_request_path(merge_request), class: "has-tooltip", title: _('Cannot be merged automatically') do
               = icon('exclamation-triangle')
         - if merge_request.assignee
           %li
-            = link_to_member(merge_request.source_project, merge_request.assignee, name: false, title: "Assigned to :name")
+            = link_to_member(merge_request.source_project, merge_request.assignee, name: false, title: _('Assigned to :name'))
 
         = render 'shared/issuable_meta_data', issuable: merge_request
 

app/views/shared/_issuable_meta_data.html.haml

@@ -5,21 +5,21 @@
 - issuable_mr        = @issuable_meta_data[issuable.id].merge_requests_count
 
 - if issuable_mr > 0
-  %li.issuable-mr.hidden-xs
+  %li.issuable-mr.hidden-xs.has-tooltip{ title: _('Related merge requests') }
     = image_tag('icon-merge-request-unmerged.svg', class: 'icon-merge-request-unmerged')
     = issuable_mr
 
 - if upvotes > 0
-  %li.issuable-upvotes.hidden-xs
+  %li.issuable-upvotes.hidden-xs.has-tooltip{ title: _('Upvotes') }
     = icon('thumbs-up')
     = upvotes
 
 - if downvotes > 0
-  %li.issuable-downvotes.hidden-xs
+  %li.issuable-downvotes.hidden-xs.has-tooltip{ title: _('Downvotes') }
     = icon('thumbs-down')
     = downvotes
 
 %li.issuable-comments.hidden-xs
-  = link_to issuable_url, class: ('no-comments' if note_count.zero?) do
+  = link_to issuable_url, class: ['has-tooltip', ('no-comments' if note_count.zero?)], title: _('Comments') do
     = icon('comments')
     = note_count

changelogs/unreleased/43786-on-the-issuable-list-add-tooltips-to-icons.yml

+---
+title: Add tooltips to icons in lists of issues and merge requests
+merge_request: 17700
+author:
+type: changed