@gitlab/ui 61.2.0 → 61.3.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [61.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v61.2.0...v61.3.0) (2023-04-19)
+
+
+### Features
+
+* **GlFilteredSearch:** Terms as tokens ([7149a54](https://gitlab.com/gitlab-org/gitlab-ui/commit/7149a541f4dc29d7f364ee1ab02a1c88be3824ed))
+
 # [61.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v61.1.3...v61.2.0) (2023-04-18)
 
 

package/dist/components/base/filtered_search/common_story_options.js

@@ -7,7 +7,8 @@ const noop = () => {};
 const provide = () => ({
   portalName: 'portal',
   alignSuggestions: noop,
-  suggestionsListClass: noop
+  suggestionsListClass: noop,
+  termsAsTokens: () => false
 });
 
 export { provide };

package/dist/components/base/filtered_search/filtered_search.js

@@ -6,7 +6,7 @@ import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlIcon from '../icon/icon';
 import GlSearchBoxByClick from '../search_box_by_click/search_box_by_click';
 import GlFilteredSearchTerm from './filtered_search_term';
-import { createTerm, needDenormalization, denormalizeTokens, isEmptyTerm, INTENT_ACTIVATE_PREVIOUS, ensureTokenId, normalizeTokens } from './filtered_search_utils';
+import { termTokenDefinition, createTerm, needDenormalization, denormalizeTokens, isEmptyTerm, INTENT_ACTIVATE_PREVIOUS, ensureTokenId, normalizeTokens } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 Vue.use(PortalVue);
@@ -32,7 +32,8 @@ var script = {
       // Return a function reference instead of a prop to work around vue-apollo@3 bug.
       // TODO: This can be reverted once https://github.com/vuejs/vue-apollo/pull/1153
       // has been merged and we consume it, or we upgrade to vue-apollo@4.
-      suggestionsListClass: () => this.suggestionsListClass
+      suggestionsListClass: () => this.suggestionsListClass,
+      termsAsTokens: () => this.termsAsTokens
     };
   },
   inheritAttrs: false,
@@ -128,6 +129,28 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    /**
+     * Render search terms as GlTokens. Ideally, this prop will be as
+     * short-lived as possible, and this behavior will become the default and
+     * only behavior.
+     *
+     * This prop is *not* reactive.
+     *
+     * See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2159.
+     */
+    termsAsTokens: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * The title of the text search option. Ignored unless termsAsTokens is enabled.
+     */
+    searchTextOptionLabel: {
+      type: String,
+      required: false,
+      default: termTokenDefinition.title
     }
   },
   data() {
@@ -200,7 +223,7 @@ var script = {
   },
   methods: {
     applyNewValue(newValue) {
-      this.tokens = needDenormalization(newValue) ? denormalizeTokens(newValue) : newValue;
+      this.tokens = needDenormalization(newValue) ? denormalizeTokens(newValue, this.termsAsTokens) : newValue;
     },
     isActiveToken(idx) {
       return this.activeTokenIdx === idx;
@@ -300,6 +323,7 @@ var script = {
       }));
       this.activeTokenIdx = idx;
     },
+    // This method can be deleted once termsAsTokens behavior is the default.
     createTokens(idx) {
       let newStrings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [''];
       if (!this.isLastTokenActive && newStrings.length === 1 && newStrings[0] === '') {
@@ -331,7 +355,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-search-box-by-click',_vm._b({attrs:{"value":_vm.tokens,"history-items":_vm.historyItems,"clearable":_vm.hasValue,"search-button-attributes":_vm.searchButtonAttributes,"disabled":_vm.viewOnly,"data-testid":"filtered-search-input"},on:{"submit":_vm.submit,"input":_vm.applyNewValue,"history-item-selected":function($event){return _vm.$emit('history-item-selected', $event)},"clear":function($event){return _vm.$emit('clear')},"clear-history":function($event){return _vm.$emit('clear-history')}},scopedSlots:_vm._u([{key:"history-item",fn:function(slotScope){return [_vm._t("history-item",null,null,slotScope)]}},{key:"input",fn:function(){return [_c('div',{staticClass:"gl-filtered-search-scrollable",class:{ 'gl-bg-gray-10! gl-inset-border-1-gray-100!': _vm.viewOnly }},_vm._l((_vm.tokens),function(token,idx){return _c(_vm.getTokenComponent(token.type),{key:token.id,ref:"tokens",refInFor:true,tag:"component",class:_vm.getTokenClassList(idx),attrs:{"config":_vm.getTokenEntry(token.type),"active":_vm.activeTokenIdx === idx,"cursor-position":_vm.intendedCursorPosition,"available-tokens":_vm.currentAvailableTokens,"current-value":_vm.tokens,"index":idx,"placeholder":_vm.termPlaceholder,"show-friendly-text":_vm.showFriendlyText,"search-input-attributes":_vm.searchInputAttributes,"view-only":_vm.viewOnly,"is-last-token":_vm.isLastToken(idx)},on:{"activate":function($event){return _vm.activate(idx)},"deactivate":function($event){return _vm.deactivate(token)},"destroy":function($event){return _vm.destroyToken(idx, $event)},"replace":function($event){return _vm.replaceToken(idx, $event)},"complete":_vm.completeToken,"submit":_vm.submit,"split":function($event){return _vm.createTokens(idx, $event)},"previous":_vm.activatePreviousToken,"next":_vm.activateNextToken},model:{value:(token.value),callback:function ($$v) {_vm.$set(token, "value", $$v);},expression:"token.value"}})}),1),_vm._v(" "),_c('portal-target',{key:_vm.activeTokenIdx,ref:"menu",style:(_vm.suggestionsStyle),attrs:{"name":_vm.portalName,"slim":""}})]},proxy:true}],null,true)},'gl-search-box-by-click',_vm.$attrs,false))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-search-box-by-click',_vm._b({attrs:{"value":_vm.tokens,"history-items":_vm.historyItems,"clearable":_vm.hasValue,"search-button-attributes":_vm.searchButtonAttributes,"disabled":_vm.viewOnly,"data-testid":"filtered-search-input"},on:{"submit":_vm.submit,"input":_vm.applyNewValue,"history-item-selected":function($event){return _vm.$emit('history-item-selected', $event)},"clear":function($event){return _vm.$emit('clear')},"clear-history":function($event){return _vm.$emit('clear-history')}},scopedSlots:_vm._u([{key:"history-item",fn:function(slotScope){return [_vm._t("history-item",null,null,slotScope)]}},{key:"input",fn:function(){return [_c('div',{staticClass:"gl-filtered-search-scrollable",class:{ 'gl-bg-gray-10! gl-inset-border-1-gray-100!': _vm.viewOnly }},_vm._l((_vm.tokens),function(token,idx){return _c(_vm.getTokenComponent(token.type),{key:token.id,ref:"tokens",refInFor:true,tag:"component",class:_vm.getTokenClassList(idx),attrs:{"config":_vm.getTokenEntry(token.type),"active":_vm.activeTokenIdx === idx,"cursor-position":_vm.intendedCursorPosition,"available-tokens":_vm.currentAvailableTokens,"current-value":_vm.tokens,"index":idx,"placeholder":_vm.termPlaceholder,"show-friendly-text":_vm.showFriendlyText,"search-input-attributes":_vm.searchInputAttributes,"view-only":_vm.viewOnly,"is-last-token":_vm.isLastToken(idx),"search-text-option-label":_vm.searchTextOptionLabel},on:{"activate":function($event){return _vm.activate(idx)},"deactivate":function($event){return _vm.deactivate(token)},"destroy":function($event){return _vm.destroyToken(idx, $event)},"replace":function($event){return _vm.replaceToken(idx, $event)},"complete":_vm.completeToken,"submit":_vm.submit,"split":function($event){return _vm.createTokens(idx, $event)},"previous":_vm.activatePreviousToken,"next":_vm.activateNextToken},model:{value:(token.value),callback:function ($$v) {_vm.$set(token, "value", $$v);},expression:"token.value"}})}),1),_vm._v(" "),_c('portal-target',{key:_vm.activeTokenIdx,ref:"menu",style:(_vm.suggestionsStyle),attrs:{"name":_vm.portalName,"slim":""}})]},proxy:true}],null,true)},'gl-search-box-by-click',_vm.$attrs,false))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/filtered_search/filtered_search_suggestion_list.js

@@ -5,7 +5,7 @@ const DEFER_TO_INITIAL_VALUE = -1;
 const NO_ACTIVE_ITEM = -2;
 var script = {
   name: 'GlFilteredSearchSuggestionList',
-  inject: ['suggestionsListClass'],
+  inject: ['suggestionsListClass', 'termsAsTokens'],
   provide() {
     return {
       filteredSearchSuggestionListInstance: this
@@ -35,7 +35,7 @@ var script = {
       return this.registeredItems[this.initialActiveIdx];
     },
     activeItem() {
-      if (this.activeIdx === NO_ACTIVE_ITEM) return null;
+      if (!this.termsAsTokens() && this.activeIdx === NO_ACTIVE_ITEM) return null;
       if (this.activeIdx === DEFER_TO_INITIAL_VALUE) return this.initialActiveItem;
       return this.registeredItems[this.activeIdx];
     },
@@ -66,13 +66,21 @@ var script = {
       }
     },
     nextItem() {
-      this.stepItem(1, this.registeredItems.length - 1);
+      if (this.termsAsTokens()) {
+        this.stepItem(1);
+      } else {
+        this.stepItem(1, this.registeredItems.length - 1);
+      }
     },
     prevItem() {
-      this.stepItem(-1, 0);
+      if (this.termsAsTokens()) {
+        this.stepItem(-1);
+      } else {
+        this.stepItem(-1, 0);
+      }
     },
     stepItem(direction, endIdx) {
-      if (this.activeIdx === endIdx || this.activeIdx === DEFER_TO_INITIAL_VALUE && this.initialActiveIdx === endIdx) {
+      if (!this.termsAsTokens() && (this.activeIdx === endIdx || this.activeIdx === DEFER_TO_INITIAL_VALUE && this.initialActiveIdx === endIdx)) {
         // The user wants to move past the end of the list, so ensure nothing is selected.
         this.activeIdx = NO_ACTIVE_ITEM;
       } else {

package/dist/components/base/filtered_search/filtered_search_term.js

@@ -1,12 +1,16 @@
+import GlToken from '../token/token';
+import { stopEvent } from '../../../utils/utils';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment';
-import { match, tokenToOption, INTENT_ACTIVATE_PREVIOUS } from './filtered_search_utils';
+import { termTokenDefinition, match, tokenToOption, INTENT_ACTIVATE_PREVIOUS, TOKEN_CLOSE_SELECTOR, TERM_TOKEN_TYPE } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   name: 'GlFilteredSearchTerm',
   components: {
-    GlFilteredSearchTokenSegment
+    GlFilteredSearchTokenSegment,
+    GlToken
   },
+  inject: ['termsAsTokens'],
   inheritAttrs: false,
   props: {
     /**
@@ -69,6 +73,14 @@ var script = {
       default: 'end',
       validator: value => ['start', 'end'].includes(value)
     },
+    /**
+     * The title of the text search option. Ignored unless termsAsTokens is enabled.
+     */
+    searchTextOptionLabel: {
+      type: String,
+      required: false,
+      default: termTokenDefinition.title
+    },
     viewOnly: {
       type: Boolean,
       required: false,
@@ -76,8 +88,21 @@ var script = {
     }
   },
   computed: {
+    showInput() {
+      return this.termsAsTokens() || Boolean(this.placeholder);
+    },
+    showToken() {
+      return this.termsAsTokens() && Boolean(this.value.data);
+    },
     suggestedTokens() {
-      return this.availableTokens.filter(token => match(token.title, this.value.data)).map(tokenToOption);
+      const tokens = this.availableTokens.filter(token => match(token.title, this.value.data));
+      if (this.termsAsTokens() && this.value.data) {
+        tokens.push({
+          ...termTokenDefinition,
+          title: this.searchTextOptionLabel
+        });
+      }
+      return tokens.map(tokenToOption);
     },
     internalValue: {
       get() {
@@ -94,6 +119,11 @@ var script = {
           data
         });
       }
+    },
+    eventListeners() {
+      return this.viewOnly ? {} : {
+        mousedown: this.destroyByClose
+      };
     }
   },
   methods: {
@@ -108,6 +138,23 @@ var script = {
       this.$emit('destroy', {
         intent: INTENT_ACTIVATE_PREVIOUS
       });
+    },
+    destroyByClose(event) {
+      if (event.target.closest(TOKEN_CLOSE_SELECTOR)) {
+        stopEvent(event);
+        this.$emit('destroy');
+      }
+    },
+    onComplete(type) {
+      if (type === TERM_TOKEN_TYPE) {
+        // We've completed this term token
+        this.$emit('complete');
+      } else {
+        // We're changing the current token type
+        this.$emit('replace', {
+          type
+        });
+      }
     }
   }
 };
@@ -116,7 +163,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-h-auto gl-filtered-search-term",attrs:{"data-testid":"filtered-search-term"}},[_c('gl-filtered-search-token-segment',{ref:"segment",staticClass:"gl-filtered-search-term-token",attrs:{"is-term":"","active":_vm.active,"cursor-position":_vm.cursorPosition,"search-input-attributes":_vm.searchInputAttributes,"is-last-token":_vm.isLastToken,"current-value":_vm.currentValue,"view-only":_vm.viewOnly,"options":_vm.suggestedTokens},on:{"activate":function($event){return _vm.$emit('activate')},"deactivate":function($event){return _vm.$emit('deactivate')},"complete":function($event){return _vm.$emit('replace', { type: $event })},"backspace":_vm.onBackspace,"submit":function($event){return _vm.$emit('submit')},"split":function($event){return _vm.$emit('split', $event)},"previous":function($event){return _vm.$emit('previous')},"next":function($event){return _vm.$emit('next')}},scopedSlots:_vm._u([{key:"view",fn:function(){return [(_vm.placeholder)?_c('input',_vm._b({staticClass:"gl-filtered-search-term-input",class:{ 'gl-bg-gray-10': _vm.viewOnly },attrs:{"placeholder":_vm.placeholder,"aria-label":_vm.placeholder,"readonly":_vm.viewOnly,"data-testid":"filtered-search-term-input"},on:{"focusin":function($event){return _vm.$emit('activate')},"focusout":function($event){return _vm.$emit('deactivate')}}},'input',_vm.searchInputAttributes,false)):[_vm._v(_vm._s(_vm.value.data))]]},proxy:true}]),model:{value:(_vm.internalValue),callback:function ($$v) {_vm.internalValue=$$v;},expression:"internalValue"}})],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-h-auto gl-filtered-search-term",attrs:{"data-testid":"filtered-search-term"}},[_c('gl-filtered-search-token-segment',{ref:"segment",staticClass:"gl-filtered-search-term-token",attrs:{"is-term":"","active":_vm.active,"cursor-position":_vm.cursorPosition,"search-input-attributes":_vm.searchInputAttributes,"is-last-token":_vm.isLastToken,"current-value":_vm.currentValue,"view-only":_vm.viewOnly,"options":_vm.suggestedTokens},on:{"activate":function($event){return _vm.$emit('activate')},"deactivate":function($event){return _vm.$emit('deactivate')},"complete":_vm.onComplete,"backspace":_vm.onBackspace,"submit":function($event){return _vm.$emit('submit')},"split":function($event){return _vm.$emit('split', $event)},"previous":function($event){return _vm.$emit('previous')},"next":function($event){return _vm.$emit('next')}},scopedSlots:_vm._u([{key:"view",fn:function(){return [(_vm.showToken)?_c('gl-token',_vm._g({class:{ 'gl-cursor-pointer': !_vm.viewOnly },attrs:{"view-only":_vm.viewOnly}},_vm.eventListeners),[_vm._v(_vm._s(_vm.value.data))]):(_vm.showInput)?_c('input',_vm._b({staticClass:"gl-filtered-search-term-input",class:{ 'gl-bg-gray-10': _vm.viewOnly },attrs:{"placeholder":_vm.placeholder,"aria-label":_vm.placeholder,"readonly":_vm.viewOnly,"data-testid":"filtered-search-term-input"},on:{"focusin":function($event){return _vm.$emit('activate')},"focusout":function($event){return _vm.$emit('deactivate')}}},'input',_vm.searchInputAttributes,false)):[_vm._v(_vm._s(_vm.value.data))]]},proxy:true}]),model:{value:(_vm.internalValue),callback:function ($$v) {_vm.internalValue=$$v;},expression:"internalValue"}})],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/filtered_search/filtered_search_token.js

@@ -2,13 +2,12 @@ import cloneDeep from 'lodash/cloneDeep';
 import { COMMA } from '../../../utils/constants';
 import GlToken from '../token/token';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment';
-import { tokenToOption, createTerm } from './filtered_search_utils';
+import { tokenToOption, createTerm, TOKEN_CLOSE_SELECTOR } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 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',

package/dist/components/base/filtered_search/filtered_search_token_segment.js

@@ -3,7 +3,7 @@ import { Portal } from 'portal-vue';
 import { COMMA, LEFT_MOUSE_BUTTON } from '../../../utils/constants';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion';
 import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list';
-import { splitOnQuotes, match, wrapTokenInQuotes } from './filtered_search_utils';
+import { TERM_TOKEN_TYPE, splitOnQuotes, match, wrapTokenInQuotes } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 // We need some helpers to ensure @vue/compat compatibility
@@ -49,7 +49,7 @@ var script = {
     GlFilteredSearchSuggestionList,
     GlFilteredSearchSuggestion
   },
-  inject: ['portalName', 'alignSuggestions'],
+  inject: ['portalName', 'alignSuggestions', 'termsAsTokens'],
   inheritAttrs: false,
   props: {
     /**
@@ -136,6 +136,16 @@ var script = {
     };
   },
   computed: {
+    hasTermSuggestion() {
+      if (!this.termsAsTokens()) return false;
+      if (!this.options) return false;
+      return this.options.some(_ref => {
+        let {
+          value
+        } = _ref;
+        return value === TERM_TOKEN_TYPE;
+      });
+    },
     matchingOption() {
       var _this$options;
       return (_this$options = this.options) === null || _this$options === void 0 ? void 0 : _this$options.find(o => o.value === this.value);
@@ -173,7 +183,9 @@ var script = {
         const option = this.getMatchingOptionForInputValue(this.inputValue) || this.getMatchingOptionForInputValue(this.inputValue, {
           loose: true
         });
-        return option === null || option === void 0 ? void 0 : option.value;
+        if (option) return option.value;
+        if (this.hasTermSuggestion) return TERM_TOKEN_TYPE;
+        return null;
       }
       const defaultOption = this.options.find(op => op.default);
       if (defaultOption) {
@@ -197,6 +209,7 @@ var script = {
       }
     },
     inputValue(newValue) {
+      if (this.termsAsTokens()) return;
       const hasUnclosedQuote = newValue.split('"').length % 2 === 0;
       if (newValue.indexOf(' ') === -1 || hasUnclosedQuote) {
         return;
@@ -260,7 +273,7 @@ var script = {
       }
     },
     applySuggestion(suggestedValue) {
-      const formattedSuggestedValue = wrapTokenInQuotes(suggestedValue);
+      const formattedSuggestedValue = this.termsAsTokens() ? suggestedValue : wrapTokenInQuotes(suggestedValue);
 
       /**
        * Emitted when autocomplete entry is selected.
@@ -269,7 +282,7 @@ var script = {
        */
       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/dist/components/base/filtered_search/filtered_search_utils.js

@@ -5,6 +5,7 @@ import { modulo } from '../../../utils/number_utils';
 
 const TERM_TOKEN_TYPE = 'filtered-search-term';
 const INTENT_ACTIVATE_PREVIOUS = 'intent-activate-previous';
+const TOKEN_CLOSE_SELECTOR = '.gl-token-close';
 function isEmptyTerm(token) {
   return token.type === TERM_TOKEN_TYPE && token.value.data.trim() === '';
 }
@@ -137,18 +138,23 @@ function createTerm() {
   };
 }
 function denormalizeTokens(inputTokens) {
+  let termsAsTokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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;
+  }, []);
 }
 
 /**
@@ -163,6 +169,11 @@ function denormalizeTokens(inputTokens) {
 function match(text, query) {
   return text.toLowerCase().includes(query.toLowerCase());
 }
+const termTokenDefinition = {
+  type: TERM_TOKEN_TYPE,
+  icon: 'title',
+  title: 'Search for this text'
+};
 function splitOnQuotes(str) {
   if (first(str) === "'" && last(str) === "'") {
     return [str];
@@ -228,4 +239,4 @@ function wrapTokenInQuotes(token) {
   return `"${token}"`;
 }
 
-export { INTENT_ACTIVATE_PREVIOUS, TERM_TOKEN_TYPE, createTerm, denormalizeTokens, ensureTokenId, isEmptyTerm, match, needDenormalization, normalizeTokens, splitOnQuotes, stepIndexAndWrap, tokenToOption, wrapTokenInQuotes };
+export { INTENT_ACTIVATE_PREVIOUS, TERM_TOKEN_TYPE, TOKEN_CLOSE_SELECTOR, createTerm, denormalizeTokens, ensureTokenId, isEmptyTerm, match, needDenormalization, normalizeTokens, splitOnQuotes, stepIndexAndWrap, termTokenDefinition, tokenToOption, wrapTokenInQuotes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "61.2.0",
+  "version": "61.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/filtered_search/__snapshots__/filtered_search_term.spec.js.snap

@@ -1,19 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Filtered search term renders input with value in active mode 1`] = `
+exports[`Filtered search term renders nothing with value in active mode (delegates to segment) 1`] = `
 <div
   class="gl-h-auto gl-filtered-search-term"
   data-testid="filtered-search-term"
 >
   <div
-    active="true"
     class="gl-filtered-search-term-token"
     cursor-position="end"
     is-term=""
     value="test-value"
-  >
-    test-value
-  </div>
+  />
 </div>
 `;
 

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

@@ -8,4 +8,5 @@ export const provide = () => ({
   portalName: 'portal',
   alignSuggestions: noop,
   suggestionsListClass: noop,
+  termsAsTokens: () => false,
 });

package/src/components/base/filtered_search/filtered_search.md

@@ -48,6 +48,15 @@ The token should emit the following events:
 - `split`: token requests adding string values after the current token.
 - `complete`: token indicates its editing is completed.
 
+### Improve space handling
+
+Set the `terms-as-tokens` prop to `true` to enable new term rendering and
+interaction behavior. This makes it easier to input/edit free text tokens, and
+removes the need for quoting values with spaces and other workarounds.
+
+In future, this prop will be enabled by default and eventually removed. Opt in
+to this earlier rather than later to ease migration.
+
 ## Examples
 
 Define a list of available tokens:
@@ -65,5 +74,5 @@ realtime updates:
 <!-- Empty initial line is a workaround for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2102 -->
 ```html
 
-<gl-filtered-search :available-tokens="tokens" v-model="value" />
+<gl-filtered-search :available-tokens="tokens" v-model="value" terms-as-tokens />
 ```

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

@@ -95,7 +95,7 @@ describe('Filtered search', () => {
       });
       await nextTick();
 
-      const inputEventArgs = wrapper.emitted().input[1][0];
+      const [inputEventArgs] = wrapper.emitted().input.at(-1);
       expect(inputEventArgs.every((t) => t.type === TERM_TOKEN_TYPE)).toBe(true);
       expect(inputEventArgs.map((t) => t.value.data)).toStrictEqual(['one', 'two', '']);
     });
@@ -106,10 +106,22 @@ describe('Filtered search', () => {
       });
       await nextTick();
 
-      const inputEventArgs = wrapper.emitted().input[1][0];
+      const [inputEventArgs] = wrapper.emitted().input.at(-1);
       expect(inputEventArgs.every((t) => t.type === TERM_TOKEN_TYPE)).toBe(true);
       expect(inputEventArgs.map((t) => t.value.data)).toStrictEqual(['one', 'two', '']);
     });
+
+    it('does not split strings with termsAsTokens', async () => {
+      createComponent({
+        termsAsTokens: true,
+        value: ['one two'],
+      });
+      await nextTick();
+
+      const [inputEventArgs] = wrapper.emitted().input.at(-1);
+      expect(inputEventArgs.every((t) => t.type === TERM_TOKEN_TYPE)).toBe(true);
+      expect(inputEventArgs.map((t) => t.value.data)).toStrictEqual(['one two', '']);
+    });
   });
 
   describe('event handling', () => {

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

@@ -329,6 +329,23 @@ export const Default = () => ({
   template: `<gl-filtered-search :available-tokens="tokens" :value="value" />`,
 });
 
+export const WithTermsAsTokens = () => ({
+  data() {
+    return {
+      tokens,
+      value: [
+        { type: 'author', value: { data: 'beta', operator: '=' } },
+        { type: 'label', value: { data: 'Bug', operator: '=' } },
+        'raw text',
+      ],
+    };
+  },
+  components,
+  template: `
+    <gl-filtered-search :available-tokens="tokens" v-model="value" terms-as-tokens />
+  `,
+});
+
 export const ViewOnly = () => ({
   data() {
     return {

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

@@ -15,6 +15,7 @@ import {
   normalizeTokens,
   denormalizeTokens,
   needDenormalization,
+  termTokenDefinition,
 } from './filtered_search_utils';
 
 Vue.use(PortalVue);
@@ -43,6 +44,7 @@ export default {
       // TODO: This can be reverted once https://github.com/vuejs/vue-apollo/pull/1153
       // has been merged and we consume it, or we upgrade to vue-apollo@4.
       suggestionsListClass: () => this.suggestionsListClass,
+      termsAsTokens: () => this.termsAsTokens,
     };
   },
   inheritAttrs: false,
@@ -137,6 +139,28 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Render search terms as GlTokens. Ideally, this prop will be as
+     * short-lived as possible, and this behavior will become the default and
+     * only behavior.
+     *
+     * This prop is *not* reactive.
+     *
+     * See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2159.
+     */
+    termsAsTokens: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * The title of the text search option. Ignored unless termsAsTokens is enabled.
+     */
+    searchTextOptionLabel: {
+      type: String,
+      required: false,
+      default: termTokenDefinition.title,
+    },
   },
   data() {
     return {
@@ -212,7 +236,9 @@ export default {
 
   methods: {
     applyNewValue(newValue) {
-      this.tokens = needDenormalization(newValue) ? denormalizeTokens(newValue) : newValue;
+      this.tokens = needDenormalization(newValue)
+        ? denormalizeTokens(newValue, this.termsAsTokens)
+        : newValue;
     },
 
     isActiveToken(idx) {
@@ -317,6 +343,7 @@ export default {
       this.activeTokenIdx = idx;
     },
 
+    // This method can be deleted once termsAsTokens behavior is the default.
     createTokens(idx, newStrings = ['']) {
       if (!this.isLastTokenActive && newStrings.length === 1 && newStrings[0] === '') {
         this.activeTokenIdx = this.lastTokenIdx;
@@ -391,6 +418,7 @@ export default {
           :view-only="viewOnly"
           :is-last-token="isLastToken(idx)"
           :class="getTokenClassList(idx)"
+          :search-text-option-label="searchTextOptionLabel"
           @activate="activate(idx)"
           @deactivate="deactivate(token)"
           @destroy="destroyToken(idx, $event)"