Add latest changes from gitlab-org/gitlab@master

3 files changed, 35 insertions, 7 deletions

diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js b/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js
index c698b94749d..b09e8323ba2 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js
@@ -31,6 +31,8 @@ export const OPERATORS_IS_NOT = [...OPERATORS_IS, ...OPERATORS_NOT];
 export const OPERATORS_IS_NOT_OR = [...OPERATORS_IS, ...OPERATORS_NOT, ...OPERATORS_OR];
 export const OPERATORS_AFTER_BEFORE = [...OPERATORS_AFTER, ...OPERATORS_BEFORE];
 
+export const OPERATORS_TO_GROUP = [OPERATOR_OR, OPERATOR_NOT];
+
 export const OPTION_NONE = { value: FILTER_NONE, text: __('None'), title: __('None') };
 export const OPTION_ANY = { value: FILTER_ANY, text: __('Any'), title: __('Any') };
 export const OPTION_CURRENT = { value: FILTER_CURRENT, text: __('Current') };
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue
index 3857dd9c55d..5d72ac34e73 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue
@@ -11,7 +11,13 @@ import { debounce, last } from 'lodash';
 
 import { stripQuotes } from '~/lib/utils/text_utility';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { DEBOUNCE_DELAY, FILTERS_NONE_ANY, OPERATOR_NOT, OPERATOR_OR } from '../constants';
+import {
+  DEBOUNCE_DELAY,
+  FILTERS_NONE_ANY,
+  OPERATOR_NOT,
+  OPERATOR_OR,
+  OPERATORS_TO_GROUP,
+} from '../constants';
 import { getRecentlyUsedSuggestions, setTokenValueToRecentlyUsed } from '../filtered_search_utils';
 
 export default {
@@ -102,7 +108,7 @@ export default {
     },
     activeTokenValue() {
       const data =
-        this.glFeatures.groupMultiSelectTokens && Array.isArray(this.value.data)
+        this.multiSelectEnabled && Array.isArray(this.value.data)
           ? last(this.value.data)
           : this.value.data;
       return this.getActiveTokenValue(this.suggestions, data);
@@ -153,6 +159,22 @@ export default {
         ? this.activeTokenValue[this.searchBy]
         : undefined;
     },
+    multiSelectEnabled() {
+      return (
+        this.config.multiSelect &&
+        this.glFeatures.groupMultiSelectTokens &&
+        OPERATORS_TO_GROUP.includes(this.value.operator)
+      );
+    },
+    validatedConfig() {
+      if (this.config.multiSelect && !this.multiSelectEnabled) {
+        return {
+          ...this.config,
+          multiSelect: false,
+        };
+      }
+      return this.config;
+    },
   },
   watch: {
     active: {
@@ -199,7 +221,7 @@ export default {
       }
     }, DEBOUNCE_DELAY),
     handleTokenValueSelected(selectedValue) {
-      if (this.glFeatures.groupMultiSelectTokens) {
+      if (this.multiSelectEnabled) {
         this.$emit('token-selected', selectedValue);
       }
 
@@ -228,7 +250,7 @@ export default {
 
 <template>
   <gl-filtered-search-token
-    :config="config"
+    :config="validatedConfig"
     :value="value"
     :active="active"
     :multi-select-values="multiSelectValues"
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/user_token.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/user_token.vue
index c5326ead60d..87e295d00dd 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/user_token.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/user_token.vue
@@ -7,7 +7,7 @@ import { __ } from '~/locale';
 import { WORKSPACE_GROUP, WORKSPACE_PROJECT } from '~/issues/constants';
 import usersAutocompleteQuery from '~/graphql_shared/queries/users_autocomplete.query.graphql';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { OPTIONS_NONE_ANY } from '../constants';
+import { OPERATORS_TO_GROUP, OPTIONS_NONE_ANY } from '../constants';
 
 import BaseToken from './base_token.vue';
 
@@ -57,7 +57,11 @@ export default {
       return this.config.fetchUsers ? this.config.fetchUsers : this.fetchUsersBySearchTerm;
     },
     multiSelectEnabled() {
-      return this.config.multiSelect && this.glFeatures.groupMultiSelectTokens;
+      return (
+        this.config.multiSelect &&
+        this.glFeatures.groupMultiSelectTokens &&
+        OPERATORS_TO_GROUP.includes(this.value.operator)
+      );
     },
   },
   watch: {
@@ -94,7 +98,7 @@ export default {
       return user?.avatarUrl || user?.avatar_url;
     },
     displayNameFor(username) {
-      return this.getActiveUser(this.allUsers, username)?.name || `@${username}`;
+      return this.getActiveUser(this.allUsers, username)?.name || username;
     },
     avatarFor(username) {
       const user = this.getActiveUser(this.allUsers, username);