Display up to 2 values in the placeholder

Instead of displaying +x after the second option, we now display
up to two options, and then rely on +X in the Enhanced Filtering.

ee/app/assets/javascripts/security_dashboard/components/shared/filtered_search/tokens/activity_token.vue

@@ -101,6 +101,7 @@ export default {
         options: Object.values(ITEMS),
         selected: this.selectedActivities,
         placeholder: this.$options.i18n.allItemsText,
+        maxOptionsShown: 2,
       });
     },
   },

ee/app/assets/javascripts/security_dashboard/components/shared/filtered_search/tokens/severity_token.vue

@@ -52,6 +52,7 @@ export default {
       return getSelectedOptionsText({
         options: this.$options.items,
         selected: this.selectedSeverities,
+        maxOptionsShown: 2,
       });
     },
   },

ee/app/assets/javascripts/security_dashboard/components/shared/filtered_search/tokens/status_token.vue

@@ -80,6 +80,7 @@ export default {
       return getSelectedOptionsText({
         options: [...GROUPS[0].options, ...GROUPS[1].options],
         selected: this.selectedStatuses,
+        maxOptionsShown: 2,
       });
     },
   },

ee/app/assets/javascripts/security_dashboard/components/shared/filtered_search/tokens/tool_token.vue

@@ -113,6 +113,7 @@ export default {
         options: this.flatItems,
         selected: this.selectedTools,
         placeholder: this.$options.i18n.allItemsText,
+        maxOptionsShown: 2,
       });
     },
   },

ee/spec/frontend/security_dashboard/components/shared/filtered_search/tokens/activity_token_spec.js

@@ -241,9 +241,14 @@ describe('ActivityToken', () => {
       expect(findViewSlot().text()).toBe('Has issue');
     });
 
-    it('shows "Has issue +1 more" when "Has issue" and another option is selected', async () => {
+    it('shows "Has issue, Has merge request" when "Has issue" and another option is selected', async () => {
       await clickDropdownItem('HAS_ISSUE', 'HAS_MERGE_REQUEST');
-      expect(findViewSlot().text()).toBe('Has issue +1 more');
+      expect(findViewSlot().text()).toBe('Has issue, Has merge request');
+    });
+
+    it('shows "Still detected, Has issue +1 more" when more than 2 options are selected', async () => {
+      await clickDropdownItem('STILL_DETECTED', 'HAS_ISSUE', 'HAS_MERGE_REQUEST');
+      expect(findViewSlot().text()).toBe('Still detected, Has issue +1 more');
     });
 
     it('shows "All activity" when "All activity" is selected', async () => {

ee/spec/frontend/security_dashboard/components/shared/filtered_search/tokens/severity_token_spec.js

@@ -172,9 +172,14 @@ describe('Severity Token component', () => {
       expect(findSlotView().text()).toBe('All severities');
     });
 
-    it('shows "Critical +1 more" when critical and high severities are selected', async () => {
+    it('shows "Critical, High" when critical and high severities are selected', async () => {
       await clickDropdownItem('CRITICAL', 'HIGH');
-      expect(findSlotView().text()).toBe('Critical +1 more');
+      expect(findSlotView().text()).toBe('Critical, High');
+    });
+
+    it('shows "Critical, High +1 more" when more than 2 options are selected', async () => {
+      await clickDropdownItem('CRITICAL', 'HIGH', 'LOW');
+      expect(findSlotView().text()).toBe('Critical, High +1 more');
     });
 
     it('shows "Low" when only low severity is selected', async () => {

ee/spec/frontend/security_dashboard/components/shared/filtered_search/tokens/status_token_spec.js

@@ -95,7 +95,7 @@ describe('Status Token component', () => {
     });
 
     it('shows the label', () => {
-      expect(findSlotView().text()).toBe('Needs triage +1 more');
+      expect(findSlotView().text()).toBe('Needs triage, Confirmed');
     });
 
     it('shows the dropdown with correct options', () => {
@@ -220,14 +220,14 @@ describe('Status Token component', () => {
       expect(findSlotView().text()).toBe('Dismissed (2 reasons)');
     });
 
-    it('shows "Confirmed +1 more" when confirmed and a dismissal reason are selected', async () => {
+    it('shows "Confirmed, False positive" when confirmed and a dismissal reason are selected', async () => {
       await clickDropdownItem('CONFIRMED', 'FALSE_POSITIVE');
-      expect(findSlotView().text()).toBe('Confirmed +1 more');
+      expect(findSlotView().text()).toBe('Confirmed, False positive');
     });
 
-    it('shows "Confirmed +1 more" when confirmed and all dismissal reasons are selected', async () => {
-      await clickDropdownItem('CONFIRMED', 'DISMISSED');
-      expect(findSlotView().text()).toBe('Confirmed +1 more');
+    it('shows "Needs triage, Confirmed +1 more" when more than 2 options are selected', async () => {
+      await clickDropdownItem('CONFIRMED', 'DETECTED', 'DISMISSED');
+      expect(findSlotView().text()).toBe('Needs triage, Confirmed +1 more');
     });
   });
 

ee/spec/frontend/security_dashboard/components/shared/filtered_search/tokens/tool_token_spec.js

@@ -230,7 +230,7 @@ describe('ToolToken', () => {
 
     it('shows "OWASP Zed Attack Proxy (ZAP) +1 more" when "zaproxy" and another option is selected', async () => {
       await clickDropdownItem('zaproxy', 'gitleaks');
-      expect(findViewSlot().text()).toBe('OWASP Zed Attack Proxy (ZAP) +1 more');
+      expect(findViewSlot().text()).toBe('OWASP Zed Attack Proxy (ZAP), GitLeaks');
     });
 
     it('shows "All tools" when "All tool" is selected', async () => {