Merge branch 'issue-boards-list-desciption-tooltip' into 'master'

Adds label description to issue board title

## What does this MR do?

Adds the label description as a tooltip the issue board title. Tooltip is not visible on the backlog or done list.

## Screenshots (if relevant)

![tooltip-title](/uploads/e807a7ff6c48ac2181c4d4e86adf0f77/tooltip-title.gif)

## What are the relevant issue numbers?

Closes #22710

See merge request !6743

4 files changed, 12 insertions, 3 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ed739972524..24b9219d9cf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@ Please view this file on the master branch, on stable branches it's out of date.
 - Hides project activity tabs when features are disabled
 - Only show one error message for an invalid email !5905 (lycoperdon)
 - Fix sidekiq stats in admin area (blackst0ne)
+- Added label description as tooltip to issue board list title
 - Created cycle analytics bundle JavaScript file
 - API: Fix booleans not recognized as such when using the `to_boolean` helper
 - Removed delete branch tooltip !6954
diff --git a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6 b/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
index e520170ef74..db9a5a8e40a 100644
--- a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
+++ b/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
@@ -22,7 +22,7 @@
       fallbackClass: 'is-dragging',
       fallbackOnBody: true,
       ghostClass: 'is-ghost',
-      filter: '.has-tooltip, .btn',
+      filter: '.board-delete, .btn',
       delay: gl.issueBoards.touchEnabled ? 100 : 50,
       scrollSensitivity: gl.issueBoards.touchEnabled ? 60 : 100,
       scrollSpeed: 20,
diff --git a/app/views/projects/boards/components/_board.html.haml b/app/views/projects/boards/components/_board.html.haml
index ba1502c97b6..f7071051efc 100644
--- a/app/views/projects/boards/components/_board.html.haml
+++ b/app/views/projects/boards/components/_board.html.haml
@@ -11,7 +11,9 @@
     .board-inner
       %header.board-header{ ":class" => "{ 'has-border': list.label }", ":style" => "{ borderTopColor: (list.label ? list.label.color : null) }" }
         %h3.board-title.js-board-handle{ ":class" => "{ 'user-can-drag': (!disabled && !list.preset) }" }
-          {{ list.title }}
+          %span.has-tooltip{ ":title" => "(list.label ? list.label.description : '')",
+            data: { container: "body", placement: "bottom" } }
+            {{ list.title }}
           .board-issue-count-holder.pull-right.clearfix{ "v-if" => "list.type !== 'blank'" }
             %span.board-issue-count.pull-left{ ":class" => "{ 'has-btn': list.type !== 'done' }" }
               {{ list.issuesSize }}
diff --git a/spec/features/boards/boards_spec.rb b/spec/features/boards/boards_spec.rb
index 3234fabe288..a92075fec8f 100644
--- a/spec/features/boards/boards_spec.rb
+++ b/spec/features/boards/boards_spec.rb
@@ -53,7 +53,7 @@ describe 'Issue Boards', feature: true, js: true do
   context 'with lists' do
     let(:milestone) { create(:milestone, project: project) }
 
-    let(:planning)    { create(:label, project: project, name: 'Planning') }
+    let(:planning)    { create(:label, project: project, name: 'Planning', description: 'Test') }
     let(:development) { create(:label, project: project, name: 'Development') }
     let(:testing)     { create(:label, project: project, name: 'Testing') }
     let(:bug)         { create(:label, project: project, name: 'Bug') }
@@ -91,6 +91,12 @@ describe 'Issue Boards', feature: true, js: true do
       expect(page).to have_selector('.board', count: 4)
     end
 
+    it 'shows description tooltip on list title' do
+      page.within('.board:nth-child(2)') do
+        expect(find('.board-title span.has-tooltip')[:title]).to eq('Test')
+      end
+    end
+
     it 'shows issues in lists' do
       wait_for_board_cards(2, 2)
       wait_for_board_cards(3, 2)