@gitlab/ui 61.2.0 → 61.3.0

package/src/components/base/filtered_search/filtered_search_token.vue

@@ -3,12 +3,11 @@ import cloneDeep from 'lodash/cloneDeep';
 import { COMMA } from '../../../utils/constants';
 import GlToken from '../token/token.vue';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';
-import { createTerm, tokenToOption } from './filtered_search_utils';
+import { createTerm, tokenToOption, TOKEN_CLOSE_SELECTOR } from './filtered_search_utils';
 
 const SEGMENT_TITLE = 'TYPE';
 const SEGMENT_OPERATOR = 'OPERATOR';
 const SEGMENT_DATA = 'DATA';
-const TOKEN_CLOSE_SELECTOR = '.gl-token-close';
 
 const DEFAULT_OPERATORS = [
   { value: '=', description: 'is', default: true },
@@ -392,6 +391,7 @@ export default {
 
     <!--
       Emitted when Space is pressed in-between term text.
+      Not emitted when termsAsTokens is true.
       @event split
       @property {array} newTokens Token configurations
     -->

package/src/components/base/filtered_search/filtered_search_token_segment.spec.js

@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';
+import { TERM_TOKEN_TYPE } from './filtered_search_utils';
 
 const OPTIONS = [
   { value: '=', title: 'is' },
@@ -26,7 +27,7 @@ describe('Filtered search token segment', () => {
   let alignSuggestionsMock;
   let suggestionsMock;
 
-  const createComponent = (props) => {
+  const createComponent = ({ termsAsTokens = false, ...props } = {}) => {
     alignSuggestionsMock = jest.fn();
     suggestionsMock = {
       methods: {
@@ -42,6 +43,7 @@ describe('Filtered search token segment', () => {
       provide: {
         portalName: 'fakePortal',
         alignSuggestions: alignSuggestionsMock,
+        termsAsTokens: () => termsAsTokens,
       },
       stubs: {
         Portal: { template: '<div><slot></slot></div>' },
@@ -50,7 +52,7 @@ describe('Filtered search token segment', () => {
     });
   };
 
-  const createWrappedComponent = ({ value, ...otherProps } = {}) => {
+  const createWrappedComponent = ({ value, termsAsTokens = false, ...otherProps } = {}) => {
     // We need to create fake parent due to https://github.com/vuejs/vue-test-utils/issues/1140
     const fakeParent = {
       inheritAttrs: false,
@@ -68,6 +70,9 @@ describe('Filtered search token segment', () => {
 
     wrapper = shallowMount(fakeParent, {
       propsData: { ...otherProps, cursorPosition: 'end' },
+      provide: {
+        termsAsTokens: () => termsAsTokens,
+      },
       stubs: { GlFilteredSearchTokenSegment },
     });
   };
@@ -184,6 +189,22 @@ describe('Filtered search token segment', () => {
     );
   });
 
+  it('leaves value as-is if options are provided and isTerm=true', async () => {
+    const originalValue = '!=';
+    createWrappedComponent({
+      value: originalValue,
+      title: 'Test',
+      options: OPTIONS,
+      isTerm: true,
+      active: true,
+    });
+
+    await wrapper.setData({ value: 'invalid' });
+    await wrapper.setProps({ active: false });
+
+    expect(wrapper.findComponent(GlFilteredSearchTokenSegment).emitted().input).toBe(undefined);
+  });
+
   describe('applySuggestion', () => {
     it('emits original token when no spaces are present', () => {
       createComponent({ value: '' });
@@ -209,6 +230,29 @@ describe('Filtered search token segment', () => {
       expect(wrapper.emitted('complete')[0][0]).toBe(formattedToken);
     });
 
+    it('emits token as-is when spaces are present and termsAsTokens=true', () => {
+      createComponent({ value: '', termsAsTokens: true });
+
+      const token = 'token with spaces';
+
+      wrapper.vm.applySuggestion(token);
+
+      expect(wrapper.emitted('input')[0][0]).toBe(token);
+      expect(wrapper.emitted('select')[0][0]).toBe(token);
+      expect(wrapper.emitted('complete')[0][0]).toBe(token);
+    });
+
+    it('emits input value when term token suggestion is chosen and termsAsTokens=true', () => {
+      const value = `some text with 'spaces and' "quotes"`;
+      createComponent({ value, termsAsTokens: true });
+
+      wrapper.vm.applySuggestion(TERM_TOKEN_TYPE);
+
+      expect(wrapper.emitted('input')[0][0]).toBe(value);
+      expect(wrapper.emitted('select')[0][0]).toBe(TERM_TOKEN_TYPE);
+      expect(wrapper.emitted('complete')[0][0]).toBe(TERM_TOKEN_TYPE);
+    });
+
     it('selects suggestion on press Enter', () => {
       createComponent({ active: true, options: OPTIONS, value: false });
       wrapper.find('input').trigger('keydown', { key: 'ArrowDown' });

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -4,7 +4,7 @@ import { Portal } from 'portal-vue';
 import { COMMA, LEFT_MOUSE_BUTTON } from '../../../utils/constants';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list.vue';
-import { splitOnQuotes, wrapTokenInQuotes, match } from './filtered_search_utils';
+import { splitOnQuotes, wrapTokenInQuotes, match, TERM_TOKEN_TYPE } from './filtered_search_utils';
 
 // We need some helpers to ensure @vue/compat compatibility
 // @vue/compat will render comment nodes for v-if and comments in HTML
@@ -51,7 +51,7 @@ export default {
     GlFilteredSearchSuggestionList,
     GlFilteredSearchSuggestion,
   },
-  inject: ['portalName', 'alignSuggestions'],
+  inject: ['portalName', 'alignSuggestions', 'termsAsTokens'],
   inheritAttrs: false,
   props: {
     /**
@@ -140,6 +140,13 @@ export default {
   },
 
   computed: {
+    hasTermSuggestion() {
+      if (!this.termsAsTokens()) return false;
+      if (!this.options) return false;
+
+      return this.options.some(({ value }) => value === TERM_TOKEN_TYPE);
+    },
+
     matchingOption() {
       return this.options?.find((o) => o.value === this.value);
     },
@@ -182,7 +189,10 @@ export default {
         const option =
           this.getMatchingOptionForInputValue(this.inputValue) ||
           this.getMatchingOptionForInputValue(this.inputValue, { loose: true });
-        return option?.value;
+
+        if (option) return option.value;
+        if (this.hasTermSuggestion) return TERM_TOKEN_TYPE;
+        return null;
       }
 
       const defaultOption = this.options.find((op) => op.default);
@@ -216,6 +226,8 @@ export default {
     },
 
     inputValue(newValue) {
+      if (this.termsAsTokens()) return;
+
       const hasUnclosedQuote = newValue.split('"').length % 2 === 0;
       if (newValue.indexOf(' ') === -1 || hasUnclosedQuote) {
         return;
@@ -282,7 +294,9 @@ export default {
     },
 
     applySuggestion(suggestedValue) {
-      const formattedSuggestedValue = wrapTokenInQuotes(suggestedValue);
+      const formattedSuggestedValue = this.termsAsTokens()
+        ? suggestedValue
+        : wrapTokenInQuotes(suggestedValue);
 
       /**
        * Emitted when autocomplete entry is selected.
@@ -292,7 +306,10 @@ export default {
       this.$emit('select', formattedSuggestedValue);
 
       if (!this.multiSelect) {
-        this.$emit('input', formattedSuggestedValue);
+        this.$emit(
+          'input',
+          formattedSuggestedValue === TERM_TOKEN_TYPE ? this.inputValue : formattedSuggestedValue
+        );
         this.$emit('complete', formattedSuggestedValue);
       }
     },

package/src/components/base/filtered_search/filtered_search_utils.js

@@ -7,6 +7,8 @@ export const TERM_TOKEN_TYPE = 'filtered-search-term';
 
 export const INTENT_ACTIVATE_PREVIOUS = 'intent-activate-previous';
 
+export const TOKEN_CLOSE_SELECTOR = '.gl-token-close';
+
 export function isEmptyTerm(token) {
   return token.type === TERM_TOKEN_TYPE && token.value.data.trim() === '';
 }
@@ -135,21 +137,26 @@ export function createTerm(data = '') {
   };
 }
 
-export function denormalizeTokens(inputTokens) {
+export function denormalizeTokens(inputTokens, termsAsTokens = false) {
   assertValidTokens(inputTokens);
 
   const tokens = Array.isArray(inputTokens) ? inputTokens : [inputTokens];
 
-  const result = [];
-  tokens.forEach((t) => {
+  return tokens.reduce((result, t) => {
     if (typeof t === 'string') {
-      const stringTokens = t.split(' ').filter(Boolean);
-      stringTokens.forEach((strToken) => result.push(createTerm(strToken)));
+      if (termsAsTokens) {
+        const trimmedText = t.trim();
+        if (trimmedText) result.push(createTerm(trimmedText));
+      } else {
+        const stringTokens = t.split(' ').filter(Boolean);
+        stringTokens.forEach((strToken) => result.push(createTerm(strToken)));
+      }
     } else {
       result.push(ensureTokenId(t));
     }
-  });
-  return result;
+
+    return result;
+  }, []);
 }
 
 /**
@@ -165,6 +172,12 @@ export function match(text, query) {
   return text.toLowerCase().includes(query.toLowerCase());
 }
 
+export const termTokenDefinition = {
+  type: TERM_TOKEN_TYPE,
+  icon: 'title',
+  title: 'Search for this text',
+};
+
 export function splitOnQuotes(str) {
   if (first(str) === "'" && last(str) === "'") {
     return [str];