1 files changed, 20 insertions, 30 deletions
diff --git a/app/assets/javascripts/notes/components/discussion_counter.vue b/app/assets/javascripts/notes/components/discussion_counter.vue
index a4d76a70696..c7cfc0f0f3b 100644
--- a/app/assets/javascripts/notes/components/discussion_counter.vue
+++ b/app/assets/javascripts/notes/components/discussion_counter.vue
@@ -1,13 +1,12 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
+import { GlTooltipDirective } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
-import { pluralize } from '../../lib/utils/text_utility';
 import discussionNavigation from '../mixins/discussion_navigation';
-import tooltip from '../../vue_shared/directives/tooltip';
 
 export default {
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   components: {
     Icon,
@@ -17,9 +16,9 @@ export default {
     ...mapGetters([
       'getUserData',
       'getNoteableData',
-      'discussionCount',
+      'resolvableDiscussionsCount',
       'firstUnresolvedDiscussionId',
-      'resolvedDiscussionCount',
+      'unresolvedDiscussionsCount',
     ]),
     isLoggedIn() {
       return this.getUserData.id;
@@ -27,15 +26,15 @@ export default {
     hasNextButton() {
       return this.isLoggedIn && !this.allResolved;
     },
-    countText() {
-      return pluralize('discussion', this.discussionCount);
-    },
     allResolved() {
-      return this.resolvedDiscussionCount === this.discussionCount;
+      return this.unresolvedDiscussionsCount === 0;
     },
     resolveAllDiscussionsIssuePath() {
       return this.getNoteableData.create_issue_to_resolve_discussions_path;
     },
+    resolvedDiscussionsCount() {
+      return this.resolvableDiscussionsCount - this.unresolvedDiscussionsCount;
+    },
   },
   methods: {
     ...mapActions(['expandDiscussion']),
@@ -50,13 +49,9 @@ export default {
 </script>
 
 <template>
-  <div
-    v-if="discussionCount > 0"
-    class="line-resolve-all-container prepend-top-8">
+  <div v-if="resolvableDiscussionsCount > 0" class="line-resolve-all-container prepend-top-8">
     <div>
-      <div
-        :class="{ 'has-next-btn': hasNextButton }"
-        class="line-resolve-all">
+      <div :class="{ 'has-next-btn': hasNextButton }" class="line-resolve-all">
         <span
           :class="{ 'is-active': allResolved }"
           class="line-resolve-btn is-disabled"
@@ -65,32 +60,27 @@ export default {
           <icon name="check-circle" />
         </span>
         <span class="line-resolve-text">
-          {{ resolvedDiscussionCount }}/{{ discussionCount }} {{ countText }} resolved
+          {{ resolvedDiscussionsCount }}/{{ resolvableDiscussionsCount }}
+          {{ n__('discussion resolved', 'discussions resolved', resolvableDiscussionsCount) }}
         </span>
       </div>
-      <div
-        v-if="resolveAllDiscussionsIssuePath && !allResolved"
-        class="btn-group"
-        role="group">
+      <div v-if="resolveAllDiscussionsIssuePath && !allResolved" class="btn-group" role="group">
         <a
-          v-tooltip
+          v-gl-tooltip
           :href="resolveAllDiscussionsIssuePath"
           :title="s__('Resolve all discussions in new issue')"
-          data-container="body"
-          class="new-issue-for-discussion btn btn-default discussion-create-issue-btn">
+          class="new-issue-for-discussion btn btn-default discussion-create-issue-btn"
+        >
           <icon name="issue-new" />
         </a>
       </div>
-      <div
-        v-if="isLoggedIn && !allResolved"
-        class="btn-group"
-        role="group">
+      <div v-if="isLoggedIn && !allResolved" class="btn-group" role="group">
         <button
-          v-tooltip
+          v-gl-tooltip
           title="Jump to first unresolved discussion"
-          data-container="body"
           class="btn btn-default discussion-next-btn"
-          @click="jumpToFirstUnresolvedDiscussion">
+          @click="jumpToFirstUnresolvedDiscussion"
+        >
           <icon name="comment-next" />
         </button>
       </div>