@gitlab/ui 61.1.3 → 61.3.0

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

@@ -1,7 +1,8 @@
 import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
+import GlToken from '../token/token.vue';
 import FilteredSearchTerm from './filtered_search_term.vue';
-import { INTENT_ACTIVATE_PREVIOUS } from './filtered_search_utils';
+import { INTENT_ACTIVATE_PREVIOUS, TERM_TOKEN_TYPE } from './filtered_search_utils';
 
 const availableTokens = [
   { type: 'foo', title: 'test1-foo', token: 'stub', icon: 'eye' },
@@ -9,6 +10,8 @@ const availableTokens = [
   { type: 'baz', title: 'test1-baz', token: 'stub', icon: 'eye' },
 ];
 
+const pointerClass = 'gl-cursor-pointer';
+
 describe('Filtered search term', () => {
   let wrapper;
 
@@ -21,13 +24,23 @@ describe('Filtered search term', () => {
 
   const segmentStub = {
     name: 'gl-filtered-search-token-segment-stub',
-    template: '<div><slot name="view"></slot><slot name="suggestions"></slot></div>',
-    props: ['searchInputAttributes', 'isLastToken', 'currentValue', 'viewOnly', 'options'],
+    template: '<div><slot v-if="!active" name="view"></slot><slot name="suggestions"></slot></div>',
+    props: [
+      'searchInputAttributes',
+      'isLastToken',
+      'currentValue',
+      'viewOnly',
+      'options',
+      'active',
+    ],
   };
 
-  const createComponent = (props) => {
+  const createComponent = ({ termsAsTokens = false, ...props } = {}) => {
     wrapper = shallowMount(FilteredSearchTerm, {
       propsData: { ...defaultProps, ...props },
+      provide: {
+        termsAsTokens: () => termsAsTokens,
+      },
       stubs: {
         'gl-filtered-search-token-segment': segmentStub,
       },
@@ -36,14 +49,24 @@ describe('Filtered search term', () => {
 
   const findSearchInput = () => wrapper.find('input');
   const findTokenSegmentComponent = () => wrapper.findComponent(segmentStub);
+  const findToken = () => wrapper.findComponent(GlToken);
 
   it('renders value in inactive mode', () => {
     createComponent({ value: { data: 'test-value' } });
     expect(wrapper.html()).toMatchSnapshot();
   });
 
-  it('renders input with value in active mode', () => {
+  it('renders token in inactive mode with termsAsTokens', () => {
+    createComponent({ value: { data: 'test value' }, termsAsTokens: true });
+    expect(findToken().exists()).toBe(true);
+    expect(findToken().props().viewOnly).toBe(false);
+    expect(findToken().classes()).toContain(pointerClass);
+    expect(findToken().text()).toBe('test value');
+  });
+
+  it('renders nothing with value in active mode (delegates to segment)', () => {
     createComponent({ value: { data: 'test-value' }, active: true });
+    expect(wrapper.text()).not.toContain('test-value');
     expect(wrapper.html()).toMatchSnapshot();
   });
 
@@ -60,20 +83,45 @@ describe('Filtered search term', () => {
     expect(findTokenSegmentComponent().props('options')).toHaveLength(2);
   });
 
+  it('suggests text search when termsAsTokens=true', async () => {
+    createComponent({
+      availableTokens,
+      active: true,
+      value: { data: 'foo' },
+      termsAsTokens: true,
+    });
+
+    await nextTick();
+
+    expect(findTokenSegmentComponent().props('options')).toEqual([
+      expect.objectContaining({
+        value: 'foo',
+        title: 'test1-foo',
+      }),
+      expect.objectContaining({
+        value: TERM_TOKEN_TYPE,
+        title: 'Search for this text',
+      }),
+    ]);
+  });
+
   it.each`
-    originalEvent   | emittedEvent    | payload
-    ${'activate'}   | ${'activate'}   | ${undefined}
-    ${'deactivate'} | ${'deactivate'} | ${undefined}
-    ${'split'}      | ${'split'}      | ${undefined}
-    ${'submit'}     | ${'submit'}     | ${undefined}
-    ${'complete'}   | ${'replace'}    | ${{ type: undefined }}
-    ${'backspace'}  | ${'destroy'}    | ${{ intent: INTENT_ACTIVATE_PREVIOUS }}
+    originalEvent   | originalPayload    | emittedEvent    | payload
+    ${'activate'}   | ${undefined}       | ${'activate'}   | ${undefined}
+    ${'deactivate'} | ${undefined}       | ${'deactivate'} | ${undefined}
+    ${'split'}      | ${'foo'}           | ${'split'}      | ${'foo'}
+    ${'submit'}     | ${undefined}       | ${'submit'}     | ${undefined}
+    ${'previous'}   | ${undefined}       | ${'previous'}   | ${undefined}
+    ${'next'}       | ${undefined}       | ${'next'}       | ${undefined}
+    ${'complete'}   | ${'foo'}           | ${'replace'}    | ${{ type: 'foo' }}
+    ${'complete'}   | ${TERM_TOKEN_TYPE} | ${'complete'}   | ${undefined}
+    ${'backspace'}  | ${undefined}       | ${'destroy'}    | ${{ intent: INTENT_ACTIVATE_PREVIOUS }}
   `(
     'emits $emittedEvent when token segment emits $originalEvent',
-    async ({ originalEvent, emittedEvent, payload }) => {
+    async ({ originalEvent, originalPayload, emittedEvent, payload }) => {
       createComponent({ active: true, value: { data: 'something' } });
 
-      findTokenSegmentComponent().vm.$emit(originalEvent);
+      findTokenSegmentComponent().vm.$emit(originalEvent, originalPayload);
 
       await nextTick();
 
@@ -117,6 +165,17 @@ describe('Filtered search term', () => {
     expect(findTokenSegmentComponent().props('viewOnly')).toBe(false);
   });
 
+  it('sets viewOnly prop and removes pointer class on token when termsAsTokens=true', () => {
+    createComponent({
+      value: { data: 'foo' },
+      viewOnly: true,
+      termsAsTokens: true,
+    });
+
+    expect(findToken().props().viewOnly).toBe(true);
+    expect(findToken().classes()).not.toContain(pointerClass);
+  });
+
   it('adds `searchInputAttributes` prop to search term input', () => {
     createComponent({
       placeholder: 'placeholder-stub',

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

@@ -1,12 +1,23 @@
 <script>
+import GlToken from '../token/token.vue';
+import { stopEvent } from '../../../utils/utils';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';
-import { INTENT_ACTIVATE_PREVIOUS, match, tokenToOption } from './filtered_search_utils';
+import {
+  INTENT_ACTIVATE_PREVIOUS,
+  TERM_TOKEN_TYPE,
+  TOKEN_CLOSE_SELECTOR,
+  match,
+  tokenToOption,
+  termTokenDefinition,
+} from './filtered_search_utils';
 
 export default {
   name: 'GlFilteredSearchTerm',
   components: {
     GlFilteredSearchTokenSegment,
+    GlToken,
   },
+  inject: ['termsAsTokens'],
   inheritAttrs: false,
   props: {
     /**
@@ -67,6 +78,14 @@ export default {
       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,
@@ -74,10 +93,22 @@ export default {
     },
   },
   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() {
@@ -93,6 +124,9 @@ export default {
         this.$emit('input', { data });
       },
     },
+    eventListeners() {
+      return this.viewOnly ? {} : { mousedown: this.destroyByClose };
+    },
   },
   methods: {
     onBackspace() {
@@ -105,6 +139,21 @@ export default {
        */
       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 });
+      }
+    },
   },
 };
 </script>
@@ -134,6 +183,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
     -->
@@ -152,7 +202,7 @@ export default {
       :options="suggestedTokens"
       @activate="$emit('activate')"
       @deactivate="$emit('deactivate')"
-      @complete="$emit('replace', { type: $event })"
+      @complete="onComplete"
       @backspace="onBackspace"
       @submit="$emit('submit')"
       @split="$emit('split', $event)"
@@ -160,8 +210,16 @@ export default {
       @next="$emit('next')"
     >
       <template #view>
+        <gl-token
+          v-if="showToken"
+          :class="{ 'gl-cursor-pointer': !viewOnly }"
+          :view-only="viewOnly"
+          v-on="eventListeners"
+          >{{ value.data }}</gl-token
+        >
+
         <input
-          v-if="placeholder"
+          v-else-if="showInput"
           v-bind="searchInputAttributes"
           class="gl-filtered-search-term-input"
           :class="{ 'gl-bg-gray-10': viewOnly }"

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

@@ -44,6 +44,7 @@ describe('Filtered search token', () => {
       provide: {
         portalName: 'fake target',
         alignSuggestions: function fakeAlignSuggestions() {},
+        termsAsTokens: () => false,
       },
       stubs: {
         Portal: {

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];

package/src/scss/utilities.scss

@@ -1735,6 +1735,14 @@
   border-top-right-radius: $gl-border-radius-base !important;
 }
 
+.gl-rounded-bottom-left-small {
+  border-bottom-left-radius: $gl-border-radius-small;
+}
+
+.gl-rounded-bottom-left-small\! {
+  border-bottom-left-radius: $gl-border-radius-small !important;
+}
+
 .gl-rounded-bottom-left-base {
   border-bottom-left-radius: $gl-border-radius-base;
 }
@@ -1743,6 +1751,14 @@
   border-bottom-left-radius: $gl-border-radius-base !important;
 }
 
+.gl-rounded-bottom-left-large {
+  border-bottom-left-radius: $gl-border-radius-large;
+}
+
+.gl-rounded-bottom-left-large\! {
+  border-bottom-left-radius: $gl-border-radius-large !important;
+}
+
 .gl-rounded-bottom-left-none {
   border-bottom-left-radius: 0;
 }
@@ -1751,6 +1767,14 @@
   border-bottom-left-radius: 0 !important;
 }
 
+.gl-rounded-bottom-right-small {
+  border-bottom-right-radius: $gl-border-radius-small;
+}
+
+.gl-rounded-bottom-right-small\! {
+  border-bottom-right-radius: $gl-border-radius-small !important;
+}
+
 .gl-rounded-bottom-right-base {
   border-bottom-right-radius: $gl-border-radius-base;
 }
@@ -1759,6 +1783,14 @@
   border-bottom-right-radius: $gl-border-radius-base !important;
 }
 
+.gl-rounded-bottom-right-large {
+  border-bottom-right-radius: $gl-border-radius-large;
+}
+
+.gl-rounded-bottom-right-large\! {
+  border-bottom-right-radius: $gl-border-radius-large !important;
+}
+
 .gl-rounded-bottom-right-none {
   border-bottom-right-radius: 0;
 }
@@ -1793,22 +1825,6 @@
   border-top-right-radius: $gl-border-radius-small !important;
 }
 
-.gl-rounded-bottom-left-small {
-  border-bottom-left-radius: $gl-border-radius-small;
-}
-
-.gl-rounded-bottom-left-small\! {
-  border-bottom-left-radius: $gl-border-radius-small !important;
-}
-
-.gl-rounded-bottom-right-small {
-  border-bottom-right-radius: $gl-border-radius-small;
-}
-
-.gl-rounded-bottom-right-small\! {
-  border-bottom-right-radius: $gl-border-radius-small !important;
-}
-
 .gl-rounded-bottom-left-6 {
   border-bottom-left-radius: $gl-border-radius-6;
 }

package/src/scss/utility-mixins/border.scss

@@ -405,18 +405,34 @@
   border-top-right-radius: $gl-border-radius-base;
 }
 
+@mixin gl-rounded-bottom-left-small {
+  border-bottom-left-radius: $gl-border-radius-small;
+}
+
 @mixin gl-rounded-bottom-left-base {
   border-bottom-left-radius: $gl-border-radius-base;
 }
 
+@mixin gl-rounded-bottom-left-large {
+  border-bottom-left-radius: $gl-border-radius-large;
+}
+
 @mixin gl-rounded-bottom-left-none {
   border-bottom-left-radius: 0;
 }
 
+@mixin gl-rounded-bottom-right-small {
+  border-bottom-right-radius: $gl-border-radius-small;
+}
+
 @mixin gl-rounded-bottom-right-base {
   border-bottom-right-radius: $gl-border-radius-base;
 }
 
+@mixin gl-rounded-bottom-right-large {
+  border-bottom-right-radius: $gl-border-radius-large;
+}
+
 @mixin gl-rounded-bottom-right-none {
   border-bottom-right-radius: 0;
 }
@@ -434,14 +450,6 @@
   border-top-right-radius: $gl-border-radius-small;
 }
 
-@mixin gl-rounded-bottom-left-small {
-  border-bottom-left-radius: $gl-border-radius-small;
-}
-
-@mixin gl-rounded-bottom-right-small {
-  border-bottom-right-radius: $gl-border-radius-small;
-}
-
 @mixin gl-rounded-bottom-left-6 {
   border-bottom-left-radius: $gl-border-radius-6;
 }