Add tooltips for wrk in progress limtis

Add tooltips for issues with and without
wrk in progress limits

app/assets/javascripts/boards/components/board.js

@@ -3,7 +3,7 @@ import Sortable from 'sortablejs';
 import Vue from 'vue';
 import { GlButtonGroup, GlButton, GlTooltip } from '@gitlab/ui';
 import isWipLimitsOn from 'ee_else_ce/boards/mixins/is_wip_limits';
-import { n__, s__ } from '~/locale';
+import { s__, __, sprintf } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import Tooltip from '~/vue_shared/directives/tooltip';
 import AccessorUtilities from '../../lib/utils/accessor';
@@ -67,10 +67,13 @@ export default Vue.extend({
         !this.disabled && this.list.type !== ListType.closed && this.list.type !== ListType.blank
       );
     },
-    counterTooltip() {
+    issuesTooltip() {
       const { issuesSize } = this.list;
-      return `${n__('%d issue', '%d issues', issuesSize)}`;
+
+      return sprintf(__('%{issuesSize} issues'), { issuesSize });
     },
+    // Only needed to make karma pass.
+    weightCountToolTip() {}, // eslint-disable-line vue/return-in-computed-property
     caretTooltip() {
       return this.list.isExpanded ? s__('Boards|Collapse') : s__('Boards|Expand');
     },

app/views/shared/boards/components/_board.html.haml

@@ -42,9 +42,10 @@
             %button.board-delete.no-drag.p-0.border-0.has-tooltip.float-right{ type: "button", title: _("Delete list"), ":class": "{ 'd-none': !list.isExpanded }", "aria-label" => _("Delete list"), data: { placement: "bottom" }, "@click.stop" => "deleteBoard" }
               = icon("trash")
 
-        .issue-count-badge.pr-0.no-drag.text-secondary{ "v-if" => "showBoardListAndBoardInfo", ":title": "counterTooltip", "v-tooltip": true, data: { placement: "top" } }
+        .issue-count-badge.pr-0.no-drag.text-secondary{ "v-if" => "showBoardListAndBoardInfo" }
           %span.d-inline-flex
-            %span.issue-count-badge-count
+            %gl-tooltip{ ":target" => "() => $refs.issueCount", ":title" => "issuesTooltip" }
+            %span.issue-count-badge-count{ "ref" => "issueCount" }
               %icon.mr-1{ name: "issues" }
               %issue-count{ ":maxIssueCount" => "list.maxIssueCount",
                 ":issuesSize" => "list.issuesSize" }

ee/app/assets/javascripts/boards/components/board.js

 import { mapActions } from 'vuex';
 import boardPromotionState from 'ee/boards/components/board_promotion_state';
+import { GlTooltip } from '@gitlab/ui';
 import Board from '~/boards/components/board';
-import { __, n__, sprintf } from '~/locale';
+import { __, sprintf, s__ } from '~/locale';
 import boardsStore from '~/boards/stores/boards_store';
 
 export default Board.extend({
@@ -11,22 +12,31 @@ export default Board.extend({
     };
   },
   components: {
+    GlTooltip,
     boardPromotionState,
   },
   computed: {
-    counterTooltip() {
-      if (!this.weightFeatureAvailable) {
-        // call computed property from base component (CE board.js)
-        return Board.options.computed.counterTooltip.call(this);
+    issuesTooltip() {
+      const { issuesSize, maxIssueCount } = this.list;
+
+      if (maxIssueCount > 0) {
+        return sprintf(__('%{issuesSize} issues with a limit of %{maxIssueCount}'), {
+          issuesSize,
+          maxIssueCount,
+        });
+      }
+
+      // TODO: Remove this pattern.
+      return Board.options.computed.issuesTooltip.call(this);
+    },
+    weightCountToolTip() {
+      const { totalWeight } = this.list;
+
+      if (this.weightFeatureAvailable) {
+        return sprintf(s__('%{totalWeight} total weight'), { totalWeight });
       }
 
-      const { issuesSize, totalWeight } = this.list;
-      return sprintf(
-        __(`${n__('%d issue', '%d issues', issuesSize)} with %{totalWeight} total weight`),
-        {
-          totalWeight,
-        },
-      );
+      return null;
     },
   },
   methods: {

ee/app/views/shared/boards/components/_list_weight.html.haml

 - if (@group || @project)&.feature_available?(:issue_weights)
-  %span.d-inline-flex.ml-2
+  %gl-tooltip{ ":target" => "() => $refs.weightTooltip", ":title" => "weightCountToolTip" }
+  %span.d-inline-flex.ml-2{ "ref" => "weightTooltip" }
     %icon.mr-1{ name: "weight" }
     {{ list.totalWeight }}

ee/spec/features/boards/boards_spec.rb

@@ -136,11 +136,12 @@ describe 'issue boards', :js do
       end
 
       it 'hides weight' do
+        expect(page).not_to have_text('2 issues')
+
         backlog = board.lists.first
         badge(backlog).hover
 
-        tooltip = find("##{badge(backlog)['aria-describedby']}")
-        expect(tooltip.text).to eq('2 issues')
+        expect(page).to have_text('2 issues')
       end
     end
   end

locale/gitlab.pot

@@ -284,6 +284,12 @@ msgstr ""
 msgid "%{issuableType} will be removed! Are you sure?"
 msgstr ""
 
+msgid "%{issuesSize} issues"
+msgstr ""
+
+msgid "%{issuesSize} issues with a limit of %{maxIssueCount}"
+msgstr ""
+
 msgid "%{label_for_message} unavailable"
 msgstr ""
 
@@ -440,6 +446,9 @@ msgstr ""
 msgid "%{title} changes"
 msgstr ""
 
+msgid "%{totalWeight} total weight"
+msgstr ""
+
 msgid "%{total} open issue weight"
 msgstr ""