@gitlab/ui 61.1.3 → 61.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "61.1.3",
+  "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)"

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

@@ -7,13 +7,14 @@ describe('Filtered search suggestion list component', () => {
   let wrapper;
 
   describe('suggestions API', () => {
-    beforeEach(() => {
+    const createComponent = ({ termsAsTokens = false } = {}) => {
       wrapper = shallowMount(FilteredSearchSuggestionList, {
-        provide: { suggestionsListClass: () => 'custom-class' },
+        provide: { suggestionsListClass: () => 'custom-class', termsAsTokens: () => termsAsTokens },
       });
-    });
+    };
 
     it('has expected public methods', () => {
+      createComponent();
       expect(wrapper.vm.register).toBeInstanceOf(Function);
       expect(wrapper.vm.unregister).toBeInstanceOf(Function);
       expect(wrapper.vm.getValue).toBeInstanceOf(Function);
@@ -24,6 +25,7 @@ describe('Filtered search suggestion list component', () => {
     describe('navigation', () => {
       const stubs = [{ value: 'stub1' }, { value: 'stub2' }, { value: 'stub3' }];
       beforeEach(() => {
+        createComponent();
         stubs.forEach((s) => {
           wrapper.vm.register(s);
         });
@@ -71,6 +73,58 @@ describe('Filtered search suggestion list component', () => {
         expect(wrapper.vm.getValue()).toBe('stub2');
       });
     });
+
+    describe('navigation with termsAsTokens', () => {
+      const stubs = [{ value: 'stub1' }, { value: 'stub2' }, { value: 'stub3' }];
+      beforeEach(() => {
+        createComponent({ termsAsTokens: true });
+        stubs.forEach((s) => {
+          wrapper.vm.register(s);
+        });
+      });
+
+      it('does not select item by default', () => {
+        expect(wrapper.vm.getValue()).toBe(null);
+      });
+
+      it('selects first item on nextItem call', async () => {
+        wrapper.vm.nextItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe(stubs[0].value);
+      });
+
+      it('wraps to last item on prevItem call', async () => {
+        wrapper.vm.nextItem();
+        wrapper.vm.prevItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe(stubs[2].value);
+      });
+
+      it('wraps to first item on nextItem call', async () => {
+        stubs.forEach(() => wrapper.vm.nextItem());
+        wrapper.vm.nextItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe(stubs[0].value);
+      });
+
+      it('remove selection if suggestion is unregistered', async () => {
+        wrapper.vm.nextItem();
+        await nextTick();
+        wrapper.vm.unregister(stubs[0]);
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe(null);
+      });
+
+      it('selects correct suggestion when item (un)registration is late', async () => {
+        // Initially stub2 is at index 1.
+        await wrapper.setProps({ initialValue: 'stub2' });
+        // Remove item at index 0, so stub2 moves to index 0
+        wrapper.vm.unregister(stubs[0]);
+        await nextTick();
+        // stub2 should still be selected
+        expect(wrapper.vm.getValue()).toBe('stub2');
+      });
+    });
   });
 
   describe('integration tests', () => {
@@ -87,6 +141,17 @@ describe('Filtered search suggestion list component', () => {
       `,
     };
 
+    const createComponent = ({ termsAsTokens = false } = {}) => {
+      wrapper = mount(FilteredSearchSuggestionList, {
+        provide: { suggestionsListClass: () => 'custom-class', termsAsTokens: () => termsAsTokens },
+        slots: {
+          default: list,
+        },
+      });
+    };
+
+    const findActiveSuggestion = () => wrapper.find('.gl-filtered-search-suggestion-active');
+
     beforeAll(() => {
       if (!HTMLElement.prototype.scrollIntoView) {
         HTMLElement.prototype.scrollIntoView = jest.fn();
@@ -99,92 +164,174 @@ describe('Filtered search suggestion list component', () => {
       }
     });
 
-    beforeEach(() => {
-      wrapper = mount(FilteredSearchSuggestionList, {
-        provide: { suggestionsListClass: () => 'custom-class' },
-        slots: {
-          default: list,
-        },
+    describe('with termsAsTokens = false', () => {
+      beforeEach(() => {
+        createComponent();
       });
-    });
 
-    it('selects first suggestion', async () => {
-      wrapper.vm.nextItem();
-      await nextTick();
-      expect(wrapper.vm.getValue()).toBe('One');
-    });
+      it('selects first suggestion', async () => {
+        wrapper.vm.nextItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe('One');
+      });
 
-    it('selects second suggestion', async () => {
-      wrapper.vm.nextItem();
-      wrapper.vm.nextItem();
-      await nextTick();
-      expect(wrapper.vm.getValue()).toBe('Two');
-    });
+      it('selects second suggestion', async () => {
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe('Two');
+      });
 
-    it('deselects first suggestion after list end', async () => {
-      wrapper.vm.nextItem();
-      wrapper.vm.nextItem();
-      wrapper.vm.nextItem();
-      wrapper.vm.nextItem();
-      await nextTick();
-      expect(wrapper.vm.getValue()).toBe(null);
-    });
+      it('deselects first suggestion after list end', async () => {
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe(null);
+      });
 
-    it('deselects first suggestion after list start', async () => {
-      wrapper.vm.nextItem();
-      wrapper.vm.prevItem();
-      await nextTick();
-      expect(wrapper.vm.getValue()).toBe(null);
-    });
+      it('deselects first suggestion after list start', async () => {
+        wrapper.vm.nextItem();
+        wrapper.vm.prevItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe(null);
+      });
 
-    it('selects last suggestion in circle when selecting previous item', async () => {
-      wrapper.vm.nextItem();
-      wrapper.vm.prevItem();
-      wrapper.vm.prevItem();
-      await nextTick();
-      expect(wrapper.vm.getValue()).toBe(false);
-    });
+      it('selects last suggestion in circle when selecting previous item', async () => {
+        wrapper.vm.nextItem();
+        wrapper.vm.prevItem();
+        wrapper.vm.prevItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe(false);
+      });
 
-    it('selects first suggestion in circle when selecting next item', async () => {
-      wrapper.vm.nextItem();
-      wrapper.vm.nextItem();
-      wrapper.vm.nextItem();
-      wrapper.vm.nextItem();
-      wrapper.vm.nextItem();
-      await nextTick();
-      expect(wrapper.vm.getValue()).toBe('One');
-    });
+      it('selects first suggestion in circle when selecting next item', async () => {
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe('One');
+      });
 
-    it('highlights suggestion if initial-value is provided', async () => {
-      await wrapper.setProps({ initialValue: 'Two' });
-      expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('Two');
-    });
+      it('highlights suggestion if initial-value is provided', async () => {
+        await wrapper.setProps({ initialValue: 'Two' });
+        expect(findActiveSuggestion().text()).toBe('Two');
+      });
 
-    it('highlights suggestion if initial-value is provided, regardless of case sensitivity', async () => {
-      await wrapper.setProps({ initialValue: 'two' });
-      expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('Two');
-    });
+      it('highlights suggestion if initial-value is provided, regardless of case sensitivity', async () => {
+        await wrapper.setProps({ initialValue: 'two' });
+        expect(findActiveSuggestion().text()).toBe('Two');
+      });
 
-    it('highlights suggestion if initial-value is provided, regardless of falsiness', async () => {
-      await wrapper.setProps({ initialValue: false });
-      expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('Three');
-    });
+      it('highlights suggestion if initial-value is provided, regardless of falsiness', async () => {
+        await wrapper.setProps({ initialValue: false });
+        expect(findActiveSuggestion().text()).toBe('Three');
+      });
 
-    it('highlights first suggestion if initial-value is provided, deselected then selected', async () => {
-      await wrapper.setProps({ initialValue: 'One' });
-      wrapper.vm.prevItem();
-      wrapper.vm.nextItem();
-      await nextTick();
-      expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('One');
-    });
+      it('highlights first suggestion if initial-value is provided, deselected then selected', async () => {
+        await wrapper.setProps({ initialValue: 'One' });
+        wrapper.vm.prevItem();
+        wrapper.vm.nextItem();
+        await nextTick();
+        expect(findActiveSuggestion().text()).toBe('One');
+      });
+
+      it('does not highlight anything if initial-value matches nothing', async () => {
+        await wrapper.setProps({ initialValue: 'missing' });
+        expect(findActiveSuggestion().exists()).toBe(false);
+      });
 
-    it('does not highlight anything if initial-value matches nothing', async () => {
-      await wrapper.setProps({ initialValue: 'missing' });
-      expect(wrapper.find('.gl-filtered-search-suggestion-active').exists()).toBe(false);
+      it('applies the injected suggestion-list-class to the dropdown', () => {
+        expect(wrapper.classes()).toContain('custom-class');
+      });
     });
 
-    it('applies the injected suggestion-list-class to the dropdown', () => {
-      expect(wrapper.classes()).toContain('custom-class');
+    describe('with termsAsTokens = true', () => {
+      beforeEach(() => {
+        createComponent({ termsAsTokens: true });
+      });
+
+      it('selects first suggestion', async () => {
+        wrapper.vm.nextItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe('One');
+      });
+
+      it('selects second suggestion', async () => {
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe('Two');
+      });
+
+      it('wraps to first suggestion after list end', async () => {
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe('One');
+      });
+
+      it('wraps to last suggestion before list start', async () => {
+        wrapper.vm.nextItem();
+        wrapper.vm.prevItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe(false);
+      });
+
+      it('selects second-to-last suggestion in circle when selecting previous item', async () => {
+        wrapper.vm.nextItem();
+        wrapper.vm.prevItem();
+        wrapper.vm.prevItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe('Two');
+      });
+
+      it('selects second suggestion in circle when selecting next item', async () => {
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        wrapper.vm.nextItem();
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe('Two');
+      });
+
+      it('highlights suggestion if initial-value is provided', async () => {
+        await wrapper.setProps({ initialValue: 'Two' });
+        expect(findActiveSuggestion().text()).toBe('Two');
+      });
+
+      it('highlights suggestion if initial-value is provided, regardless of case sensitivity', async () => {
+        await wrapper.setProps({ initialValue: 'two' });
+        expect(findActiveSuggestion().text()).toBe('Two');
+      });
+
+      it('highlights suggestion if initial-value is provided, regardless of falsiness', async () => {
+        await wrapper.setProps({ initialValue: false });
+        expect(findActiveSuggestion().text()).toBe('Three');
+      });
+
+      it('highlights first suggestion if initial-value is provided, deselected then selected', async () => {
+        await wrapper.setProps({ initialValue: 'One' });
+        wrapper.vm.prevItem();
+        wrapper.vm.nextItem();
+        await nextTick();
+        expect(findActiveSuggestion().text()).toBe('One');
+      });
+
+      it('does not highlight anything if initial-value matches nothing', async () => {
+        await wrapper.setProps({ initialValue: 'missing' });
+        expect(findActiveSuggestion().exists()).toBe(false);
+      });
+
+      it('applies the injected suggestion-list-class to the dropdown', () => {
+        expect(wrapper.classes()).toContain('custom-class');
+      });
     });
   });
 });

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

@@ -6,7 +6,7 @@ const NO_ACTIVE_ITEM = -2;
 
 export default {
   name: 'GlFilteredSearchSuggestionList',
-  inject: ['suggestionsListClass'],
+  inject: ['suggestionsListClass', 'termsAsTokens'],
   provide() {
     return {
       filteredSearchSuggestionListInstance: this,
@@ -40,7 +40,7 @@ export default {
       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];
     },
@@ -76,15 +76,24 @@ export default {
       }
     },
     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)
+        !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;