Add latest changes from gitlab-org/gitlab@16-5-stable-eev16.5.0-rc42

1 files changed, 19 insertions, 7 deletions

diff --git a/app/assets/javascripts/super_sidebar/components/nav_item.vue b/app/assets/javascripts/super_sidebar/components/nav_item.vue
index 5e0f8fffb0e..5416f86abeb 100644
--- a/app/assets/javascripts/super_sidebar/components/nav_item.vue
+++ b/app/assets/javascripts/super_sidebar/components/nav_item.vue
@@ -7,6 +7,7 @@ import {
   TRACKING_UNKNOWN_ID,
   TRACKING_UNKNOWN_PANEL,
 } from '~/super_sidebar/constants';
+import eventHub from '../event_hub';
 import NavItemLink from './nav_item_link.vue';
 import NavItemRouterLink from './nav_item_router_link.vue';
 
@@ -69,16 +70,14 @@ export default {
     return {
       isMouseIn: false,
       canClickPinButton: false,
+      pillCount: this.item.pill_count,
     };
   },
   computed: {
-    pillData() {
-      return this.item.pill_count;
-    },
     hasPill() {
       return (
-        Number.isFinite(this.pillData) ||
-        (typeof this.pillData === 'string' && this.pillData !== '')
+        Number.isFinite(this.pillCount) ||
+        (typeof this.pillCount === 'string' && this.pillCount !== '')
       );
     },
     isPinnable() {
@@ -145,6 +144,9 @@ export default {
     hasAvatar() {
       return Boolean(this.item.entity_id);
     },
+    hasEndSpace() {
+      return this.hasPill || this.isPinnable || this.isFlyout;
+    },
     avatarShape() {
       return this.item.avatar_shape || 'rect';
     },
@@ -179,11 +181,21 @@ export default {
     if (this.item.is_active) {
       this.$el.scrollIntoView(false);
     }
+
+    eventHub.$on('updatePillValue', this.updatePillValue);
+  },
+  destroyed() {
+    eventHub.$off('updatePillValue', this.updatePillValue);
   },
   methods: {
     togglePointerEvents() {
       this.canClickPinButton = this.isMouseIn;
     },
+    updatePillValue({ value, itemId }) {
+      if (this.item.id === itemId) {
+        this.pillCount = value;
+      }
+    },
   },
 };
 </script>
@@ -236,7 +248,7 @@ export default {
         </div>
       </div>
       <slot name="actions"></slot>
-      <span v-if="hasPill || isPinnable" class="gl-text-right gl-relative gl-min-w-8">
+      <span v-if="hasEndSpace" class="gl-text-right gl-relative gl-min-w-6">
         <gl-badge
           v-if="hasPill"
           size="sm"
@@ -246,7 +258,7 @@ export default {
             'hide-on-focus-or-hover--target transition-opacity-on-hover--target': isPinnable,
           }"
         >
-          {{ pillData }}
+          {{ pillCount }}
         </gl-badge>
       </span>
     </component>