Label description in tooltip

Clicking label adds that label to the filtered by

2 files changed, 29 insertions, 20 deletions

diff --git a/app/views/projects/boards/components/_board.html.haml b/app/views/projects/boards/components/_board.html.haml
index f7f1fb832c8..baf367af676 100644
--- a/app/views/projects/boards/components/_board.html.haml
+++ b/app/views/projects/boards/components/_board.html.haml
@@ -6,12 +6,14 @@
   .board{ ":class" => "{ 'is-draggable': !isPreset }" }
     .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 }" }
+        %h3.board-title.js-board-handle{ ":class" => "{ 'user-can-drag': (!disabled && !isPreset) }" }
           {{ list.title }}
           %span.pull-right{ "v-if" => "list.type !== 'blank'" }
             {{ list.issues.length }}
           - if current_user
-            %board-delete{ "inline-template" => true, "v-if" => "!isPreset", ":board-id" => "list.id" }
+            %board-delete{ "inline-template" => true,
+              "v-if" => "!isPreset",
+              ":list" => "list" }
               %button.board-delete.has-tooltip.pull-right{ type: "button", title: "Delete list", "aria-label" => "Delete list", data: { placement: "bottom" }, "@click" => "deleteBoard" }
                 = icon("trash")
       .board-inner-container.board-search-container{ "v-if" => "list.canSearch()" }
diff --git a/app/views/projects/boards/components/_card.html.haml b/app/views/projects/boards/components/_card.html.haml
index 447b8af3991..a7000607f1c 100644
--- a/app/views/projects/boards/components/_card.html.haml
+++ b/app/views/projects/boards/components/_card.html.haml
@@ -1,19 +1,26 @@
-%li.card{ ":data-issue" => "issue.id",
+%board-card{ "inline-template" => true,
   "v-for" => "issue in issues | orderBy 'id' -1",
-  "track-by" => "id",
-  ":class" => "{ 'user-can-drag': !disabled }" }
-  %h4.card-title
-    %a{ ":href" => "issueLinkBase + '/' + issue.id",
-      ":title" => "issue.title" }
-      {{ issue.title }}
-  .card-footer
-    %span.card-number
-      = precede '#' do
-        {{ issue.id }}
-    %span.label.color-label{ "v-for" => "label in issue.labels",
-      ":style" => "{ backgroundColor: label.color, color: label.textColor }" }
-      {{ label.title }}
-    %a.has-tooltip{ ":href" => "'/u/' + issue.assignee.username",
-      ":title" => "'Assigned to ' + issue.assignee.name",
-      "v-if" => "issue.assignee" }
-      %img.avatar.avatar-inline.s20{ ":src" => "issue.assignee.avatar", width: 20, height: 20 }
+  ":issue" => "issue",
+  ":issue-link-base" => "issueLinkBase",
+  ":disabled" => "disabled",
+  "track-by" => "id" }
+  %li.card{ ":data-issue" => "issue.id",
+    ":class" => "{ 'user-can-drag': !disabled }" }
+    %h4.card-title
+      %a{ ":href" => "issueLinkBase + '/' + issue.id",
+        ":title" => "issue.title" }
+        {{ issue.title }}
+    .card-footer
+      %span.card-number
+        = precede '#' do
+          {{ issue.id }}
+      %button.label.color-label.has-tooltip{ "v-for" => "label in issue.labels",
+        type: "button",
+        "@click" => "filterByLabel(label, $event)",
+        ":style" => "{ backgroundColor: label.color, color: label.textColor }",
+        ":title" => "label.description" }
+        {{ label.title }}
+      %a.has-tooltip{ ":href" => "'/u/' + issue.assignee.username",
+        ":title" => "'Assigned to ' + issue.assignee.name",
+        "v-if" => "issue.assignee" }
+        %img.avatar.avatar-inline.s20{ ":src" => "issue.assignee.avatar", width: 20, height: 20 }