Disable updating appearance of filter tokens for special values

app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js

@@ -135,10 +135,6 @@ export default class FilteredSearchVisualTokens {
   }
 
   static updateUserTokenAppearance(tokenValueContainer, tokenValueElement, tokenValue) {
-    if (tokenValue === 'none') {
-      return Promise.resolve();
-    }
-
     const username = tokenValue.replace(/^@/, '');
     return (
       UsersCache.retrieve(username)
@@ -184,7 +180,12 @@ export default class FilteredSearchVisualTokens {
     const tokenValueElement = tokenValueContainer.querySelector('.value');
     tokenValueElement.innerText = tokenValue;
 
+    if (tokenValue === 'none' || tokenValue === 'any') {
+      return;
+    }
+
     const tokenType = tokenName.toLowerCase();
+
     if (tokenType === 'label') {
       FilteredSearchVisualTokens.updateLabelTokenColor(tokenValueContainer, tokenValue);
     } else if (tokenType === 'author' || tokenType === 'assignee') {

changelogs/unreleased/53636-fix-rendering-of-any-user-filter.yml

+---
+title: Fix rendering of filter bar tokens for special values
+merge_request: 22865
+author: Heinrich Lee Yu
+type: fixed

spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js

@@ -754,6 +754,50 @@ describe('Filtered Search Visual Tokens', () => {
       expect(updateLabelTokenColorSpy.calls.count()).toBe(0);
       expect(updateUserTokenAppearanceSpy.calls.count()).toBe(0);
     });
+
+    it('does not update user token appearance for `none` filter', () => {
+      const { tokenNameElement } = findElements(authorToken);
+
+      const tokenName = tokenNameElement.innerText;
+      const tokenValue = 'none';
+
+      subject.renderVisualTokenValue(authorToken, tokenName, tokenValue);
+
+      expect(updateUserTokenAppearanceSpy.calls.count()).toBe(0);
+    });
+
+    it('does not update user token appearance for `any` filter', () => {
+      const { tokenNameElement } = findElements(authorToken);
+
+      const tokenName = tokenNameElement.innerText;
+      const tokenValue = 'any';
+
+      subject.renderVisualTokenValue(authorToken, tokenName, tokenValue);
+
+      expect(updateUserTokenAppearanceSpy.calls.count()).toBe(0);
+    });
+
+    it('does not update label token color for `none` filter', () => {
+      const { tokenNameElement } = findElements(bugLabelToken);
+
+      const tokenName = tokenNameElement.innerText;
+      const tokenValue = 'none';
+
+      subject.renderVisualTokenValue(bugLabelToken, tokenName, tokenValue);
+
+      expect(updateLabelTokenColorSpy.calls.count()).toBe(0);
+    });
+
+    it('does not update label token color for `any` filter', () => {
+      const { tokenNameElement } = findElements(bugLabelToken);
+
+      const tokenName = tokenNameElement.innerText;
+      const tokenValue = 'any';
+
+      subject.renderVisualTokenValue(bugLabelToken, tokenName, tokenValue);
+
+      expect(updateLabelTokenColorSpy.calls.count()).toBe(0);
+    });
   });
 
   describe('updateUserTokenAppearance', () => {
@@ -763,19 +807,6 @@ describe('Filtered Search Visual Tokens', () => {
       spyOn(UsersCache, 'retrieve').and.callFake(username => usersCacheSpy(username));
     });
 
-    it('ignores special value "none"', done => {
-      usersCacheSpy = username => {
-        expect(username).toBe('none');
-        done.fail('Should not resolve "none"!');
-      };
-      const { tokenValueContainer, tokenValueElement } = findElements(authorToken);
-
-      subject
-        .updateUserTokenAppearance(tokenValueContainer, tokenValueElement, 'none')
-        .then(done)
-        .catch(done.fail);
-    });
-
     it('ignores error if UsersCache throws', done => {
       spyOn(window, 'Flash');
       const dummyError = new Error('Earth rotated backwards');