@gitlab/ui 49.10.0 → 49.10.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [49.10.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v49.10.0...v49.10.1) (2022-11-15)
+
+
+### Bug Fixes
+
+* **GlFilteredSearch:** Show operator friendly text first ([9cbe638](https://gitlab.com/gitlab-org/gitlab-ui/commit/9cbe63855c9958a4ebc685e01c1414eca9921739))
+
 # [49.10.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v49.9.1...v49.10.0) (2022-11-15)
 
 

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

@@ -321,7 +321,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
   var inputValue = ref.inputValue;
 return [_c('gl-token',{staticClass:"gl-filtered-search-token-type",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_TITLE),attrs:{"view-only":""}},[_vm._v("\n        "+_vm._s(inputValue)+"\n      ")])]}}])}),_vm._v(" "),_c('gl-filtered-search-token-segment',{key:"operator-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_OPERATOR),"cursor-position":_vm.intendedCursorPosition,"options":_vm.operators,"custom-input-keydown-handler":_vm.handleOperatorKeydown,"view-only":_vm.viewOnly},on:{"activate":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"backspace":_vm.replaceWithTermIfEmpty,"complete":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_DATA)},"deactivate":function($event){return _vm.$emit('deactivate')},"previous":_vm.activatePreviousTitleSegment,"next":_vm.activateNextDataSegment},scopedSlots:_vm._u([{key:"view",fn:function(){return [_c('gl-token',{staticClass:"gl-filtered-search-token-operator",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_OPERATOR),attrs:{"variant":"search-value","view-only":""}},[_vm._v("\n        "+_vm._s(_vm.operatorDescription)+"\n      ")])]},proxy:true},{key:"option",fn:function(ref){
   var option = ref.option;
-return [_c('div',{staticClass:"gl-display-flex"},[_vm._v("\n        "+_vm._s(option.value)+"\n        "),(option.description)?_c('span',{staticClass:"gl-filtered-search-token-operator-description"},[_vm._v("\n          "+_vm._s(option.description)+"\n        ")]):_vm._e()])]}}]),model:{value:(_vm.tokenValue.operator),callback:function ($$v) {_vm.$set(_vm.tokenValue, "operator", $$v);},expression:"tokenValue.operator"}}),_vm._v(" "),(_vm.hasDataOrDataSegmentIsCurrentlyActive)?_c('gl-filtered-search-token-segment',{key:"data-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_DATA),"cursor-position":_vm.intendedCursorPosition,"multi-select":_vm.config.multiSelect,"options":_vm.config.options,"view-only":_vm.viewOnly,"option-text-field":"title"},on:{"activate":_vm.activateDataSegment,"backspace":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"complete":_vm.handleComplete,"select":function($event){return _vm.$emit('select', $event)},"submit":function($event){return _vm.$emit('submit')},"deactivate":function($event){return _vm.$emit('deactivate')},"split":function($event){return _vm.$emit('split', $event)},"previous":_vm.activatePreviousOperatorSegment,"next":function($event){return _vm.$emit('next')}},scopedSlots:_vm._u([{key:"suggestions",fn:function(){return [_vm._t("suggestions")]},proxy:true},{key:"view",fn:function(ref){
+return [_c('div',{staticClass:"gl-display-flex"},[_vm._v("\n        "+_vm._s(_vm.showFriendlyText ? option.description : option.value)+"\n        "),(option.description)?_c('span',{staticClass:"gl-filtered-search-token-operator-description"},[_vm._v("\n          "+_vm._s(_vm.showFriendlyText ? option.value : option.description)+"\n        ")]):_vm._e()])]}}]),model:{value:(_vm.tokenValue.operator),callback:function ($$v) {_vm.$set(_vm.tokenValue, "operator", $$v);},expression:"tokenValue.operator"}}),_vm._v(" "),(_vm.hasDataOrDataSegmentIsCurrentlyActive)?_c('gl-filtered-search-token-segment',{key:"data-segment",attrs:{"active":_vm.isSegmentActive(_vm.$options.segments.SEGMENT_DATA),"cursor-position":_vm.intendedCursorPosition,"multi-select":_vm.config.multiSelect,"options":_vm.config.options,"view-only":_vm.viewOnly,"option-text-field":"title"},on:{"activate":_vm.activateDataSegment,"backspace":function($event){return _vm.activateSegment(_vm.$options.segments.SEGMENT_OPERATOR)},"complete":_vm.handleComplete,"select":function($event){return _vm.$emit('select', $event)},"submit":function($event){return _vm.$emit('submit')},"deactivate":function($event){return _vm.$emit('deactivate')},"split":function($event){return _vm.$emit('split', $event)},"previous":_vm.activatePreviousOperatorSegment,"next":function($event){return _vm.$emit('next')}},scopedSlots:_vm._u([{key:"suggestions",fn:function(){return [_vm._t("suggestions")]},proxy:true},{key:"view",fn:function(ref){
   var inputValue = ref.inputValue;
 return [_vm._t("view-token",function(){return [_c('gl-token',_vm._g({staticClass:"gl-filtered-search-token-data",class:_vm.getAdditionalSegmentClasses(_vm.$options.segments.SEGMENT_DATA),attrs:{"variant":"search-value","view-only":_vm.viewOnly}},_vm.eventListeners),[_c('span',{staticClass:"gl-filtered-search-token-data-content"},[_vm._t("view",function(){return [_vm._v(_vm._s(inputValue))]},null,{ inputValue: inputValue })],2)])]},null,{
           inputValue: inputValue,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "49.10.0",
+  "version": "49.10.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -150,9 +150,9 @@
     "stylelint": "14.9.1",
     "stylelint-config-prettier": "9.0.4",
     "stylelint-prettier": "2.0.0",
-    "vue": "2.7.13",
+    "vue": "2.7.14",
     "vue-loader": "^15.8.3",
-    "vue-template-compiler": "2.7.13",
+    "vue-template-compiler": "2.7.14",
     "vue-test-utils-compat": "^0.0.10"
   },
   "release": {

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

@@ -355,4 +355,21 @@ describe('Filtered search token', () => {
       }
     );
   });
+
+  describe('showFriendlyText prop', () => {
+    it.each`
+      showFriendlyText | operator | text
+      ${false}         | ${'='}   | ${'='}
+      ${false}         | ${'!='}  | ${'!='}
+      ${true}          | ${'='}   | ${'is'}
+      ${true}          | ${'!='}  | ${'is not'}
+    `(
+      'displays "$text" when operator="$operator" and showFriendlyText="$showFriendlyText"',
+      ({ showFriendlyText, operator, text }) => {
+        mountComponent({ value: { operator }, showFriendlyText });
+
+        expect(findOperatorSegment().text()).toBe(text);
+      }
+    );
+  });
 });

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

@@ -376,9 +376,9 @@ export default {
 
       <template #option="{ option }">
         <div class="gl-display-flex">
-          {{ option.value }}
+          {{ showFriendlyText ? option.description : option.value }}
           <span v-if="option.description" class="gl-filtered-search-token-operator-description">
-            {{ option.description }}
+            {{ showFriendlyText ? option.value : option.description }}
           </span>
         </div>
       </template>