@gitlab/ui 37.4.1 → 37.4.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [37.4.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.4.1...v37.4.2) (2022-03-09)
+
+
+### Bug Fixes
+
+* **GlFilteredSearch:** fix duplicate input attributes ([ea498b9](https://gitlab.com/gitlab-org/gitlab-ui/commit/ea498b9d114c86804d2885b645770ce53d178f4d))
+
 ## [37.4.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.4.0...v37.4.1) (2022-03-07)
 
 

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

@@ -39,6 +39,11 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    currentValue: {
+      type: Array,
+      required: false,
+      default: () => []
     }
   },
   computed: {
@@ -65,7 +70,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"},[_c('gl-filtered-search-token-segment',{staticClass:"gl-filtered-search-term-token",class:{ 'gl-w-full': _vm.placeholder },attrs:{"active":_vm.active,"search-input-attributes":_vm.searchInputAttributes,"is-last-token":_vm.isLastToken},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":function($event){return _vm.$emit('destroy')},"submit":function($event){return _vm.$emit('submit')},"split":function($event){return _vm.$emit('split', $event)}},scopedSlots:_vm._u([{key:"suggestions",fn:function(){return _vm._l((_vm.suggestedTokens),function(item,idx){return _c('gl-filtered-search-suggestion',{key:idx,attrs:{"value":item.type,"icon-name":item.icon}},[_vm._v("\n        "+_vm._s(item.title)+"\n      ")])})},proxy:true},{key:"view",fn:function(){return [(_vm.placeholder)?_c('input',_vm._b({staticClass:"gl-filtered-search-term-input",attrs:{"placeholder":_vm.placeholder,"aria-label":_vm.placeholder}},'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"},[_c('gl-filtered-search-token-segment',{staticClass:"gl-filtered-search-term-token",class:{ 'gl-w-full': _vm.placeholder },attrs:{"active":_vm.active,"search-input-attributes":_vm.searchInputAttributes,"is-last-token":_vm.isLastToken,"current-value":_vm.currentValue},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":function($event){return _vm.$emit('destroy')},"submit":function($event){return _vm.$emit('submit')},"split":function($event){return _vm.$emit('split', $event)}},scopedSlots:_vm._u([{key:"suggestions",fn:function(){return _vm._l((_vm.suggestedTokens),function(item,idx){return _c('gl-filtered-search-suggestion',{key:idx,attrs:{"value":item.type,"icon-name":item.icon}},[_vm._v("\n        "+_vm._s(item.title)+"\n      ")])})},proxy:true},{key:"view",fn:function(){return [(_vm.placeholder)?_c('input',_vm._b({staticClass:"gl-filtered-search-term-input",attrs:{"placeholder":_vm.placeholder,"aria-label":_vm.placeholder}},'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_segment.js

@@ -58,6 +58,11 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    currentValue: {
+      type: Array,
+      required: false,
+      default: () => []
     }
   },
 
@@ -113,6 +118,10 @@ var script = {
 
       const defaultSuggestion = this.options.find(op => op.default);
       return (_ref = defaultSuggestion !== null && defaultSuggestion !== void 0 ? defaultSuggestion : this.options[0]) === null || _ref === void 0 ? void 0 : _ref.value;
+    },
+
+    containerAttributes() {
+      return this.isLastToken && !this.active && this.currentValue.length > 1 && this.searchInputAttributes;
     }
 
   },
@@ -284,7 +293,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',_vm._b({staticClass:"gl-filtered-search-token-segment",class:{ 'gl-filtered-search-token-segment-active': _vm.active },attrs:{"data-testid":"filtered-search-token-segment"},on:{"mousedown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }return _vm.emitIfInactive($event)}}},'div',_vm.isLastToken && !_vm.active && _vm.searchInputAttributes,false),[(_vm.active)?[(((_vm.searchInputAttributes).type)==='checkbox')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label,"type":"checkbox"},domProps:{"checked":Array.isArray(_vm.inputValue)?_vm._i(_vm.inputValue,null)>-1:(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){var $$a=_vm.inputValue,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.inputValue=$$a.concat([$$v]));}else {$$i>-1&&(_vm.inputValue=$$a.slice(0,$$i).concat($$a.slice($$i+1)));}}else {_vm.inputValue=$$c;}}}},'input',_vm.searchInputAttributes,false)):(((_vm.searchInputAttributes).type)==='radio')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label,"type":"radio"},domProps:{"checked":_vm._q(_vm.inputValue,null)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){_vm.inputValue=null;}}},'input',_vm.searchInputAttributes,false)):_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label,"type":(_vm.searchInputAttributes).type},domProps:{"value":(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"input":function($event){if($event.target.composing){ return; }_vm.inputValue=$event.target.value;}}},'input',_vm.searchInputAttributes,false)),_vm._v(" "),_c('portal',{key:("operator-" + _vm._uid),attrs:{"to":_vm.portalName}},[(_vm.hasOptionsOrSuggestions)?_c('gl-filtered-search-suggestion-list',{key:("operator-" + _vm._uid),ref:"suggestions",attrs:{"initial-value":_vm.defaultSuggestedValue},on:{"suggestion":_vm.applySuggestion}},[(_vm.options)?_vm._l((_vm.options),function(option,idx){return _c('gl-filtered-search-suggestion',{key:((option.value) + "-" + idx),attrs:{"value":option.value,"icon-name":option.icon}},[_vm._t("option",[_vm._v("\n              "+_vm._s(option[_vm.optionTextField])+"\n            ")],null,{ option: option })],2)}):_vm._t("suggestions")],2):_vm._e()],1)]:_vm._t("view",[_vm._v(_vm._s(_vm.inputValue))],null,{ inputValue: _vm.inputValue })],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._b({staticClass:"gl-filtered-search-token-segment",class:{ 'gl-filtered-search-token-segment-active': _vm.active },attrs:{"data-testid":"filtered-search-token-segment"},on:{"mousedown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }return _vm.emitIfInactive($event)}}},'div',_vm.containerAttributes,false),[(_vm.active)?[(((_vm.searchInputAttributes).type)==='checkbox')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label,"type":"checkbox"},domProps:{"checked":Array.isArray(_vm.inputValue)?_vm._i(_vm.inputValue,null)>-1:(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){var $$a=_vm.inputValue,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.inputValue=$$a.concat([$$v]));}else {$$i>-1&&(_vm.inputValue=$$a.slice(0,$$i).concat($$a.slice($$i+1)));}}else {_vm.inputValue=$$c;}}}},'input',_vm.searchInputAttributes,false)):(((_vm.searchInputAttributes).type)==='radio')?_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label,"type":"radio"},domProps:{"checked":_vm._q(_vm.inputValue,null)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"change":function($event){_vm.inputValue=null;}}},'input',_vm.searchInputAttributes,false)):_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.inputValue),expression:"inputValue"}],ref:"input",staticClass:"gl-filtered-search-token-segment-input",attrs:{"aria-label":_vm.label,"type":(_vm.searchInputAttributes).type},domProps:{"value":(_vm.inputValue)},on:{"keydown":_vm.handleInputKeydown,"blur":_vm.handleBlur,"input":function($event){if($event.target.composing){ return; }_vm.inputValue=$event.target.value;}}},'input',_vm.searchInputAttributes,false)),_vm._v(" "),_c('portal',{key:("operator-" + _vm._uid),attrs:{"to":_vm.portalName}},[(_vm.hasOptionsOrSuggestions)?_c('gl-filtered-search-suggestion-list',{key:("operator-" + _vm._uid),ref:"suggestions",attrs:{"initial-value":_vm.defaultSuggestedValue},on:{"suggestion":_vm.applySuggestion}},[(_vm.options)?_vm._l((_vm.options),function(option,idx){return _c('gl-filtered-search-suggestion',{key:((option.value) + "-" + idx),attrs:{"value":option.value,"icon-name":option.icon}},[_vm._t("option",[_vm._v("\n              "+_vm._s(option[_vm.optionTextField])+"\n            ")],null,{ option: option })],2)}):_vm._t("suggestions")],2):_vm._e()],1)]:_vm._t("view",[_vm._v(_vm._s(_vm.inputValue))],null,{ inputValue: _vm.inputValue })],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

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

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

@@ -378,6 +378,18 @@ describe('Filtered search', () => {
     expect(filteredSearchTerms.at(0).props('isLastToken')).toBe(false);
     expect(filteredSearchTerms.at(1).props('isLastToken')).toBe(true);
   });
+
+  it('passes `currentValue` prop to search terms', async () => {
+    createComponent({
+      value: ['one'],
+    });
+    await nextTick();
+
+    expect(wrapper.findComponent(GlFilteredSearchTerm).props('currentValue')).toEqual([
+      { type: 'filtered-search-term', value: { data: 'one' } },
+      { type: 'filtered-search-term', value: { data: '' } },
+    ]);
+  });
 });
 
 describe('Filtered search integration tests', () => {

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

@@ -21,7 +21,7 @@ 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'],
+    props: ['searchInputAttributes', 'isLastToken', 'currentValue'],
   };
 
   const createComponent = (props) => {
@@ -79,18 +79,24 @@ describe('Filtered search term', () => {
     }
   );
 
-  it('passes `searchInputAttributes` and `isLastToken` prop to `GlFilteredSearchTokenSegment`', () => {
+  it('passes `searchInputAttributes`, `isLastToken`, and `currentValue` props to `GlFilteredSearchTokenSegment`', () => {
     const isLastToken = true;
+    const currentValue = [
+      { type: 'filtered-search-term', value: { data: 'something' } },
+      { type: 'filtered-search-term', value: { data: '' } },
+    ];
 
     createComponent({
       value: { data: 'something' },
       searchInputAttributes,
       isLastToken,
+      currentValue,
     });
 
     expect(findTokenSegmentComponent().props()).toEqual({
       searchInputAttributes,
       isLastToken,
+      currentValue,
     });
   });
 

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

@@ -38,6 +38,11 @@ export default {
       required: false,
       default: false,
     },
+    currentValue: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   computed: {
     suggestedTokens() {
@@ -66,6 +71,7 @@ export default {
       :class="{ 'gl-w-full': placeholder }"
       :search-input-attributes="searchInputAttributes"
       :is-last-token="isLastToken"
+      :current-value="currentValue"
       @activate="$emit('activate')"
       @deactivate="$emit('deactivate')"
       @complete="$emit('replace', { type: $event })"

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

@@ -254,54 +254,63 @@ describe('Filtered search token segment', () => {
     });
   });
 
-  describe('when input is active', () => {
-    it('adds `searchInputAttributes` prop to search token segment input', () => {
-      createComponent({ active: true, value: 'something', searchInputAttributes });
+  const currentValueNoTokens = [{ type: 'filtered-search-term', value: { data: '' } }];
+  const currentValueOneToken = [
+    { type: 'filtered-search-term', value: { data: 'one' } },
+    { type: 'filtered-search-term', value: { data: '' } },
+  ];
+
+  describe.each`
+    active   | isLastToken | currentValue
+    ${true}  | ${true}     | ${currentValueNoTokens}
+    ${true}  | ${false}    | ${currentValueNoTokens}
+    ${false} | ${true}     | ${currentValueNoTokens}
+    ${true}  | ${true}     | ${currentValueOneToken}
+    ${true}  | ${false}    | ${currentValueOneToken}
+  `(
+    'when `active` is `$active`, `isLastToken` is `$isLastToken` and `currentValue` is `$currentValue`',
+    ({ active, isLastToken, currentValue }) => {
+      beforeEach(() => {
+        createComponent({
+          value: 'something',
+          active,
+          isLastToken,
+          currentValue,
+          searchInputAttributes,
+        });
+      });
 
-      expect(wrapper.find('input').attributes('data-qa-selector')).toBe(
-        searchInputAttributes['data-qa-selector']
-      );
-    });
+      it('does not add `searchInputAttributes` prop to search token segment', () => {
+        expect(wrapper.attributes('data-qa-selector')).toBe(undefined);
+      });
+    }
+  );
 
-    it('does not add `searchInputAttributes` prop to search token segment', () => {
+  describe('when `active` is `false`, `isLastToken` is `true` and there is one or more tokens', () => {
+    beforeEach(() => {
       createComponent({
-        active: true,
         value: 'something',
-        searchInputAttributes,
+        active: false,
         isLastToken: true,
+        currentValue: currentValueOneToken,
+        searchInputAttributes,
       });
-
-      expect(wrapper.attributes('data-qa-selector')).toBe(undefined);
     });
-  });
 
-  describe('when input is not active', () => {
-    describe('when `isLastToken` prop is `true`', () => {
-      it('adds `searchInputAttributes` prop to search token segment', () => {
-        createComponent({
-          active: false,
-          value: 'something',
-          searchInputAttributes,
-          isLastToken: true,
-        });
-
-        expect(wrapper.attributes('data-qa-selector')).toBe(
-          searchInputAttributes['data-qa-selector']
-        );
-      });
+    it('adds `searchInputAttributes` prop to search token segment', () => {
+      expect(wrapper.attributes('data-qa-selector')).toBe(
+        searchInputAttributes['data-qa-selector']
+      );
     });
+  });
 
-    describe('when `isLastToken` prop is `false`', () => {
-      it('does not add `searchInputAttributes` prop to search token segment', () => {
-        createComponent({
-          active: false,
-          value: 'something',
-          searchInputAttributes,
-          isLastToken: false,
-        });
+  describe('when input is active', () => {
+    it('adds `searchInputAttributes` prop to search token segment input', () => {
+      createComponent({ active: true, value: 'something', searchInputAttributes });
 
-        expect(wrapper.attributes('data-qa-selector')).toBe(undefined);
-      });
+      expect(wrapper.find('input').attributes('data-qa-selector')).toBe(
+        searchInputAttributes['data-qa-selector']
+      );
     });
   });
 });

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

@@ -59,6 +59,11 @@ export default {
       required: false,
       default: false,
     },
+    currentValue: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
 
   data() {
@@ -106,6 +111,14 @@ export default {
       const defaultSuggestion = this.options.find((op) => op.default);
       return (defaultSuggestion ?? this.options[0])?.value;
     },
+    containerAttributes() {
+      return (
+        this.isLastToken &&
+        !this.active &&
+        this.currentValue.length > 1 &&
+        this.searchInputAttributes
+      );
+    },
   },
 
   watch: {
@@ -254,7 +267,7 @@ export default {
 
 <template>
   <div
-    v-bind="isLastToken && !active && searchInputAttributes"
+    v-bind="containerAttributes"
     class="gl-filtered-search-token-segment"
     :class="{ 'gl-filtered-search-token-segment-active': active }"
     data-testid="filtered-search-token-segment"

package/src/components/base/form/form_select/form_select.spec.js

@@ -25,7 +25,9 @@ describe('GlFormSelect', () => {
     `('adds $expectedClass class for state $state', ({ state, expectedClasses }) => {
       createComponent({ state });
 
-      expect(wrapper.classes()).toEqual([...DEFAULT_SELECT_CLASSES, ...expectedClasses]);
+      expect(wrapper.classes().sort()).toEqual(
+        [...DEFAULT_SELECT_CLASSES, ...expectedClasses].sort()
+      );
     });
   });
 
@@ -36,19 +38,21 @@ describe('GlFormSelect', () => {
     it.each(nonNullSizes)('adds correct class for size %s', (size) => {
       createComponent({ size });
 
-      expect(wrapper.classes()).toEqual([...DEFAULT_SELECT_CLASSES, `custom-select-${size}`]);
+      expect(wrapper.classes().sort()).toEqual(
+        [...DEFAULT_SELECT_CLASSES, `custom-select-${size}`].sort()
+      );
     });
 
     it('does not add a size class if not given the size prop', () => {
       createComponent();
 
-      expect(wrapper.classes()).toEqual([...DEFAULT_SELECT_CLASSES]);
+      expect(wrapper.classes().sort()).toEqual([...DEFAULT_SELECT_CLASSES].sort());
     });
 
     it('does not add a size class if passed null', () => {
       createComponent({ size: null });
 
-      expect(wrapper.classes()).toEqual([...DEFAULT_SELECT_CLASSES]);
+      expect(wrapper.classes().sort()).toEqual([...DEFAULT_SELECT_CLASSES].sort());
     });
   });