Simplify dynamic count text

- create computed property for it
- update tests

ee/app/assets/javascripts/threat_monitoring/components/alerts/alert_filters.vue

@@ -6,10 +6,9 @@ import {
   GlFormGroup,
   GlIcon,
   GlSearchBoxByType,
-  GlSprintf,
   GlTruncate,
 } from '@gitlab/ui';
-import { s__ } from '~/locale';
+import { sprintf, s__, __ } from '~/locale';
 import { ALL, DEBOUNCE, STATUSES } from './constants';
 
 export default {
@@ -23,7 +22,6 @@ export default {
     GlFormGroup,
     GlIcon,
     GlSearchBoxByType,
-    GlSprintf,
     GlTruncate,
   },
   props: {
@@ -54,6 +52,9 @@ export default {
       const firstOption = this.filters.statuses?.length ? this.filters.statuses[0] : undefined;
       return this.$options.i18n.STATUSES[firstOption] || this.$options.ALL.value;
     },
+    extraOptionText() {
+      return sprintf(__('+%{extra} more'), { extra: this.extraOptionCount });
+    },
   },
   methods: {
     handleFilterChange(newFilters) {
@@ -109,14 +110,9 @@ export default {
       <gl-dropdown toggle-class="gl-inset-border-1-gray-400!" class="gl-w-full">
         <template #button-content>
           <gl-truncate :text="firstSelectedOption" class="gl-min-w-0 gl-mr-2" />
-          <gl-sprintf
-            v-if="extraOptionCount > 0"
-            class="gl-mr-2"
-            :message="__('+%{extra} more')"
-            data-testid="dropdown-message"
-          >
-            <template #extra>{{ extraOptionCount }}</template>
-          </gl-sprintf>
+          <span v-if="extraOptionCount > 0" class="gl-mr-2">
+            {{ extraOptionText }}
+          </span>
           <gl-icon name="chevron-down" class="gl-flex-shrink-0 gl-ml-auto" />
         </template>
 

ee/spec/frontend/threat_monitoring/components/alerts/alert_filters_spec.js

@@ -2,6 +2,7 @@ import { GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
 import { mount, shallowMount } from '@vue/test-utils';
 import AlertFilters from 'ee/threat_monitoring/components/alerts/alert_filters.vue';
 import { ALL, DEFAULT_FILTERS, STATUSES } from 'ee/threat_monitoring/components/alerts/constants';
+import { trimText } from 'helpers/text_helper';
 
 describe('AlertFilters component', () => {
   let wrapper;
@@ -62,7 +63,7 @@ describe('AlertFilters component', () => {
       const status = 'TRIGGERED';
       const translated = STATUSES[status];
       createWrapper({ method: mount });
-      expect(findDropdownMessage()).toBe(`${translated} +1 more`);
+      expect(trimText(findDropdownMessage())).toBe(`${translated} +1 more`);
     });
 
     it('Emits an event with the new filters on deselect', async () => {