From 14d97e3db176c0ff4cb55c44dc4822e12c6431ee Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Tue, 21 Oct 2025 12:39:12 +0200
Subject: [PATCH 1/3] Show zero count in user counts

---
 .../super_sidebar/components/counter.vue         | 16 ++++++++++++++--
 .../super_sidebar/components/user_counts.vue     |  3 +++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/super_sidebar/components/counter.vue b/app/assets/javascripts/super_sidebar/components/counter.vue
index 01ea970ddd6b70..33f937b346c723 100644
--- a/app/assets/javascripts/super_sidebar/components/counter.vue
+++ b/app/assets/javascripts/super_sidebar/components/counter.vue
@@ -12,6 +12,11 @@ export default {
       type: [Number, String],
       required: true,
     },
+    countAllowZero: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     href: {
       type: String,
       required: false,
@@ -27,8 +32,15 @@ export default {
     },
   },
   computed: {
+    computedCount() {
+      if (this.countAllowZero) {
+        return this.count >= 0;
+      }
+
+      return this.count;
+    },
     ariaLabel() {
-      return `${this.label} ${this.count}`;
+      return `${this.count} ${this.label}`;
     },
     component() {
       return this.href ? 'a' : 'button';
@@ -51,7 +63,7 @@ export default {
     class="dashboard-shortcuts-button gl-relative gl-flex gl-items-center gl-justify-center"
   >
     <gl-icon aria-hidden="true" :name="icon" class="gl-shrink-0" />
-    <span v-if="count" aria-hidden="true" class="gl-text-sm gl-font-semibold">{{
+    <span v-if="computedCount" aria-hidden="true" class="gl-text-sm gl-font-semibold">{{
       formattedCount
     }}</span>
   </component>
diff --git a/app/assets/javascripts/super_sidebar/components/user_counts.vue b/app/assets/javascripts/super_sidebar/components/user_counts.vue
index 6d9bceedc15881..898ef34db013e9 100644
--- a/app/assets/javascripts/super_sidebar/components/user_counts.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_counts.vue
@@ -65,6 +65,7 @@ export default {
       icon="issues"
       :class="counterClass"
       :count="userCounts.assigned_issues"
+      count-allow-zero
       :href="sidebarData.issues_dashboard_path"
       :label="$options.i18n.issues"
       data-testid="issues-shortcut-button"
@@ -80,6 +81,7 @@ export default {
         icon="merge-request"
         :href="sidebarData.merge_request_dashboard_path"
         :count="userCounts.total_merge_requests"
+        count-allow-zero
         :label="$options.i18n.mergeRequests"
         data-testid="merge-requests-shortcut-button"
         data-track-action="click_dropdown"
@@ -93,6 +95,7 @@ export default {
       icon="todo-done"
       :class="counterClass"
       :count="userCounts.todos"
+      count-allow-zero
       :href="sidebarData.todos_dashboard_path"
       :label="$options.i18n.todoList"
       data-testid="todos-shortcut-button"
-- 
GitLab


From 38f1bd30251a2d6c7657e09d4bbd6aa39716baba Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Wed, 22 Oct 2025 12:20:07 +0200
Subject: [PATCH 2/3] Simplify approach used

---
 .../super_sidebar/components/counter.vue           | 14 +-------------
 .../super_sidebar/components/user_counts.vue       |  3 ---
 2 files changed, 1 insertion(+), 16 deletions(-)

diff --git a/app/assets/javascripts/super_sidebar/components/counter.vue b/app/assets/javascripts/super_sidebar/components/counter.vue
index 33f937b346c723..70cdb74b439c14 100644
--- a/app/assets/javascripts/super_sidebar/components/counter.vue
+++ b/app/assets/javascripts/super_sidebar/components/counter.vue
@@ -12,11 +12,6 @@ export default {
       type: [Number, String],
       required: true,
     },
-    countAllowZero: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     href: {
       type: String,
       required: false,
@@ -32,13 +27,6 @@ export default {
     },
   },
   computed: {
-    computedCount() {
-      if (this.countAllowZero) {
-        return this.count >= 0;
-      }
-
-      return this.count;
-    },
     ariaLabel() {
       return `${this.count} ${this.label}`;
     },
@@ -63,7 +51,7 @@ export default {
     class="dashboard-shortcuts-button gl-relative gl-flex gl-items-center gl-justify-center"
   >
     <gl-icon aria-hidden="true" :name="icon" class="gl-shrink-0" />
-    <span v-if="computedCount" aria-hidden="true" class="gl-text-sm gl-font-semibold">{{
+    <span v-if="count >= 0" aria-hidden="true" class="gl-text-sm gl-font-semibold">{{
       formattedCount
     }}</span>
   </component>
diff --git a/app/assets/javascripts/super_sidebar/components/user_counts.vue b/app/assets/javascripts/super_sidebar/components/user_counts.vue
index 898ef34db013e9..6d9bceedc15881 100644
--- a/app/assets/javascripts/super_sidebar/components/user_counts.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_counts.vue
@@ -65,7 +65,6 @@ export default {
       icon="issues"
       :class="counterClass"
       :count="userCounts.assigned_issues"
-      count-allow-zero
       :href="sidebarData.issues_dashboard_path"
       :label="$options.i18n.issues"
       data-testid="issues-shortcut-button"
@@ -81,7 +80,6 @@ export default {
         icon="merge-request"
         :href="sidebarData.merge_request_dashboard_path"
         :count="userCounts.total_merge_requests"
-        count-allow-zero
         :label="$options.i18n.mergeRequests"
         data-testid="merge-requests-shortcut-button"
         data-track-action="click_dropdown"
@@ -95,7 +93,6 @@ export default {
       icon="todo-done"
       :class="counterClass"
       :count="userCounts.todos"
-      count-allow-zero
       :href="sidebarData.todos_dashboard_path"
       :label="$options.i18n.todoList"
       data-testid="todos-shortcut-button"
-- 
GitLab


From 9ca744ab414d331cf2096c2d995a1c8e707bf337 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Thu, 23 Oct 2025 08:35:15 +0200
Subject: [PATCH 3/3] Fix spec

---
 app/assets/javascripts/super_sidebar/components/counter.vue | 5 ++++-
 spec/frontend/super_sidebar/components/counter_spec.js      | 6 +++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/super_sidebar/components/counter.vue b/app/assets/javascripts/super_sidebar/components/counter.vue
index 70cdb74b439c14..a386d63cf90abe 100644
--- a/app/assets/javascripts/super_sidebar/components/counter.vue
+++ b/app/assets/javascripts/super_sidebar/components/counter.vue
@@ -39,6 +39,9 @@ export default {
       }
       return this.count;
     },
+    countExists() {
+      return this.count.toString();
+    },
   },
 };
 </script>
@@ -51,7 +54,7 @@ export default {
     class="dashboard-shortcuts-button gl-relative gl-flex gl-items-center gl-justify-center"
   >
     <gl-icon aria-hidden="true" :name="icon" class="gl-shrink-0" />
-    <span v-if="count >= 0" aria-hidden="true" class="gl-text-sm gl-font-semibold">{{
+    <span v-if="countExists" aria-hidden="true" class="gl-text-sm gl-font-semibold">{{
       formattedCount
     }}</span>
   </component>
diff --git a/spec/frontend/super_sidebar/components/counter_spec.js b/spec/frontend/super_sidebar/components/counter_spec.js
index 37cebb35e6b32f..48d57e0d0483ee 100644
--- a/spec/frontend/super_sidebar/components/counter_spec.js
+++ b/spec/frontend/super_sidebar/components/counter_spec.js
@@ -38,7 +38,7 @@ describe('Counter component', () => {
     });
 
     it('renders button', () => {
-      expect(findButton().attributes('aria-label')).toBe('Issues 3');
+      expect(findButton().attributes('aria-label')).toBe('3 Issues');
       expect(findLink().exists()).toBe(false);
     });
   });
@@ -46,7 +46,7 @@ describe('Counter component', () => {
   describe('link', () => {
     it('renders link', () => {
       createWrapper({ href: '/dashboard/todos' });
-      expect(findLink().attributes('aria-label')).toBe('Issues 3');
+      expect(findLink().attributes('aria-label')).toBe('3 Issues');
       expect(findLink().attributes('href')).toBe('/dashboard/todos');
       expect(findButton().exists()).toBe(false);
     });
@@ -57,7 +57,7 @@ describe('Counter component', () => {
     ['110%', '110%'],
     [100, '99+'],
     [10, '10'],
-    [0, ''],
+    [0, '0'],
   ])('formats count %p as %p', (count, result) => {
     createWrapper({ count });
     expect(findButton().text()).toBe(result);
-- 
GitLab