Hide None and Any when filtered token is !=

Hides the None and Any filtered search suggestions
when the chosen operator is !=, to match the existing
Haml logic.
(see filtered_search_dropdown.js hideDropdownItemsforNotOperator)

app/assets/javascripts/vue_shared/components/filtered_search_bar/constants.js

@@ -9,6 +9,7 @@ export const FILTER_ANY = 'Any';
 export const FILTER_CURRENT = 'Current';
 export const FILTER_UPCOMING = 'Upcoming';
 export const FILTER_STARTED = 'Started';
+export const FILTER_NONE_ANY = [FILTER_NONE, FILTER_ANY];
 
 export const OPERATOR_IS = '=';
 export const OPERATOR_IS_TEXT = __('is');
@@ -27,8 +28,6 @@ export const DEFAULT_ITERATIONS = DEFAULT_NONE_ANY.concat([
   { value: FILTER_CURRENT, text: __(FILTER_CURRENT) },
 ]);
 
-export const DEFAULT_LABELS = [DEFAULT_LABEL_NONE, DEFAULT_LABEL_ANY];
-
 export const DEFAULT_MILESTONES = DEFAULT_NONE_ANY.concat([
   { value: FILTER_UPCOMING, text: __(FILTER_UPCOMING) },
   { value: FILTER_STARTED, text: __(FILTER_STARTED) },

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/base_token.vue

@@ -8,7 +8,7 @@ import {
 } from '@gitlab/ui';
 import { debounce } from 'lodash';
 
-import { DEBOUNCE_DELAY } from '../constants';
+import { DEBOUNCE_DELAY, FILTER_NONE_ANY, OPERATOR_IS_NOT } from '../constants';
 import { getRecentlyUsedSuggestions, setTokenValueToRecentlyUsed } from '../filtered_search_utils';
 
 export default {
@@ -89,6 +89,14 @@ export default {
     activeTokenValue() {
       return this.getActiveTokenValue(this.suggestions, this.value.data);
     },
+    availableDefaultSuggestions() {
+      if (this.value.operator === OPERATOR_IS_NOT) {
+        return this.defaultSuggestions.filter(
+          (suggestion) => !FILTER_NONE_ANY.includes(suggestion.value),
+        );
+      }
+      return this.defaultSuggestions;
+    },
     /**
      * Return all the suggestions when searchKey is present
      * otherwise return only the suggestions which aren't
@@ -104,7 +112,7 @@ export default {
           );
     },
     showDefaultSuggestions() {
-      return this.defaultSuggestions.length;
+      return this.availableDefaultSuggestions.length;
     },
     showRecentSuggestions() {
       return this.isRecentSuggestionsEnabled && this.recentSuggestions.length && !this.searchKey;
@@ -180,7 +188,7 @@ export default {
     <template v-if="showSuggestions" #suggestions>
       <template v-if="showDefaultSuggestions">
         <gl-filtered-search-suggestion
-          v-for="token in defaultSuggestions"
+          v-for="token in availableDefaultSuggestions"
           :key="token.value"
           :value="token.value"
         >

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue

@@ -8,7 +8,7 @@ import {
 import { debounce } from 'lodash';
 import createFlash from '~/flash';
 import { __ } from '~/locale';
-import { DEBOUNCE_DELAY, DEFAULT_NONE_ANY } from '../constants';
+import { DEBOUNCE_DELAY, DEFAULT_NONE_ANY, FILTER_NONE_ANY, OPERATOR_IS_NOT } from '../constants';
 
 export default {
   separator: '::&',
@@ -48,6 +48,14 @@ export default {
     defaultEpics() {
       return this.config.defaultEpics || DEFAULT_NONE_ANY;
     },
+    availableDefaultEpics() {
+      if (this.value.operator === OPERATOR_IS_NOT) {
+        return this.defaultEpics.filter(
+          (suggestion) => !FILTER_NONE_ANY.includes(suggestion.value),
+        );
+      }
+      return this.defaultEpics;
+    },
     activeEpic() {
       if (this.currentValue && this.epics.length) {
         // Check if current value is an epic ID.
@@ -127,13 +135,13 @@ export default {
     </template>
     <template #suggestions>
       <gl-filtered-search-suggestion
-        v-for="epic in defaultEpics"
+        v-for="epic in availableDefaultEpics"
         :key="epic.value"
         :value="epic.value"
       >
         {{ epic.text }}
       </gl-filtered-search-suggestion>
-      <gl-dropdown-divider v-if="defaultEpics.length" />
+      <gl-dropdown-divider v-if="availableDefaultEpics.length" />
       <gl-loading-icon v-if="loading" size="sm" />
       <template v-else>
         <gl-filtered-search-suggestion v-for="epic in epics" :key="epic.id" :value="getValue(epic)">

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/label_token.vue

@@ -5,7 +5,7 @@ import createFlash from '~/flash';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
 
-import { DEFAULT_LABELS } from '../constants';
+import { DEFAULT_NONE_ANY } from '../constants';
 import { stripQuotes } from '../filtered_search_utils';
 
 import BaseToken from './base_token.vue';
@@ -38,7 +38,7 @@ export default {
   },
   computed: {
     defaultLabels() {
-      return this.config.defaultLabels || DEFAULT_LABELS;
+      return this.config.defaultLabels || DEFAULT_NONE_ANY;
     },
   },
   methods: {

spec/frontend/vue_shared/components/filtered_search_bar/tokens/base_token_spec.js

@@ -5,7 +5,7 @@ import {
   mockLabels,
 } from 'jest/vue_shared/components/sidebar/labels_select_vue/mock_data';
 
-import { DEFAULT_LABELS } from '~/vue_shared/components/filtered_search_bar/constants';
+import { DEFAULT_NONE_ANY } from '~/vue_shared/components/filtered_search_bar/constants';
 import {
   getRecentlyUsedSuggestions,
   setTokenValueToRecentlyUsed,
@@ -51,7 +51,7 @@ const mockProps = {
   active: false,
   suggestions: [],
   suggestionsLoading: false,
-  defaultSuggestions: DEFAULT_LABELS,
+  defaultSuggestions: DEFAULT_NONE_ANY,
   recentSuggestionsStorageKey: mockStorageKey,
 };
 

spec/frontend/vue_shared/components/filtered_search_bar/tokens/label_token_spec.js

@@ -13,10 +13,7 @@ import {
 import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 
-import {
-  DEFAULT_LABELS,
-  DEFAULT_NONE_ANY,
-} from '~/vue_shared/components/filtered_search_bar/constants';
+import { DEFAULT_NONE_ANY } from '~/vue_shared/components/filtered_search_bar/constants';
 import BaseToken from '~/vue_shared/components/filtered_search_bar/tokens/base_token.vue';
 import LabelToken from '~/vue_shared/components/filtered_search_bar/tokens/label_token.vue';
 
@@ -208,7 +205,7 @@ describe('LabelToken', () => {
       expect(wrapper.find(GlDropdownDivider).exists()).toBe(false);
     });
 
-    it('renders `DEFAULT_LABELS` as default suggestions', () => {
+    it('renders `DEFAULT_NONE_ANY` as default suggestions', () => {
       wrapper = createComponent({
         active: true,
         config: { ...mockLabelToken },
@@ -220,8 +217,8 @@ describe('LabelToken', () => {
 
       const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
 
-      expect(suggestions).toHaveLength(DEFAULT_LABELS.length);
-      DEFAULT_LABELS.forEach((label, index) => {
+      expect(suggestions).toHaveLength(DEFAULT_NONE_ANY.length);
+      DEFAULT_NONE_ANY.forEach((label, index) => {
         expect(suggestions.at(index).text()).toBe(label.text);
       });
     });