@gitlab/ui 80.1.0 → 80.2.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [80.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.1.0...v80.2.0) (2024-05-03)
+
+
+### Features
+
+* **GlFilteredSearch:** pass appliedTokens prop to nested token ([4eea90a](https://gitlab.com/gitlab-org/gitlab-ui/commit/4eea90a9358c0fa07e25878b515970d0f6bbf297))
+
 # [80.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.0.1...v80.1.0) (2024-05-03)
 
 

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

@@ -5,7 +5,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 { termTokenDefinition, createTerm, needDenormalization, denormalizeTokens, isEmptyTerm, INTENT_ACTIVATE_PREVIOUS, ensureTokenId, normalizeTokens } from './filtered_search_utils';
+import { termTokenDefinition, createTerm, isEmptyTerm, needDenormalization, denormalizeTokens, INTENT_ACTIVATE_PREVIOUS, ensureTokenId, normalizeTokens } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 let portalUuid = 0;
@@ -175,6 +175,9 @@ var script = {
     activeToken() {
       return this.tokens[this.activeTokenIdx];
     },
+    appliedTokens() {
+      return this.tokens.filter(token => !isEmptyTerm(token));
+    },
     lastTokenIdx() {
       return this.tokens.length - 1;
     },
@@ -367,7 +370,7 @@ const __vue_script__ = script;
 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,"show-search-button":_vm.showSearchButton,"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-container",class:{
         'gl-filtered-search-scrollable-container-with-search-button': _vm.showSearchButton,
         'gl-bg-gray-10! gl-inset-border-1-gray-100!': _vm.viewOnly,
-      }},[_c('div',{staticClass:"gl-filtered-search-scrollable"},_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))};
+      }},[_c('div',{staticClass:"gl-filtered-search-scrollable"},_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,"applied-tokens":_vm.appliedTokens},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/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 03 May 2024 04:11:25 GMT
+ * Generated on Fri, 03 May 2024 22:13:37 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 03 May 2024 04:11:25 GMT
+ * Generated on Fri, 03 May 2024 22:13:37 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 03 May 2024 04:11:25 GMT
+ * Generated on Fri, 03 May 2024 22:13:37 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 03 May 2024 04:11:25 GMT
+ * Generated on Fri, 03 May 2024 22:13:37 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 03 May 2024 04:11:26 GMT
+// Generated on Fri, 03 May 2024 22:13:37 GMT
 
 $gl-text-color-disabled: #89888d !default; // Used for disabled text.
 $gl-text-color-link: #63a6e9 !default; // Used for default text links.

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 03 May 2024 04:11:25 GMT
+// Generated on Fri, 03 May 2024 22:13:37 GMT
 
 $gl-text-color-disabled: #89888d !default; // Used for disabled text.
 $gl-text-color-success: #217645 !default; // Used for text indicating success or validity.

package/package.json

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

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

@@ -25,6 +25,11 @@ const FakeToken = avoidReactivity({
   render: (h) => h('div'),
 });
 
+const AppliedTokensTestFakeToken = avoidReactivity({
+  props: ['appliedTokens'],
+  render: (h) => h('div'),
+});
+
 Vue.directive('GlTooltip', () => {});
 
 let wrapper;
@@ -475,6 +480,20 @@ describe('Filtered search', () => {
     );
   });
 
+  it('passes appliedTokens prop to the token component', async () => {
+    const value = [{ type: 'faketoken', value: 'foo' }];
+    const expectedAppliedTokens = [{ type: 'faketoken', value: 'foo', id: expect.anything() }];
+    createComponent({
+      value,
+      availableTokens: [{ type: 'faketoken', token: AppliedTokensTestFakeToken }],
+    });
+    await nextTick();
+
+    const fakeTokenInstance = wrapper.findComponent(AppliedTokensTestFakeToken);
+    expect(fakeTokenInstance.exists()).toBe(true);
+    expect(fakeTokenInstance.props('appliedTokens')).toEqual(expectedAppliedTokens);
+  });
+
   it('passes `searchButtonAttributes` prop to `GlSearchBoxByClick`', () => {
     const searchButtonAttributes = { 'data-prop': 'foo-bar' };
 

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

@@ -183,6 +183,9 @@ export default {
     activeToken() {
       return this.tokens[this.activeTokenIdx];
     },
+    appliedTokens() {
+      return this.tokens.filter((token) => !isEmptyTerm(token));
+    },
     lastTokenIdx() {
       return this.tokens.length - 1;
     },
@@ -433,6 +436,7 @@ export default {
             :is-last-token="isLastToken(idx)"
             :class="getTokenClassList(idx)"
             :search-text-option-label="searchTextOptionLabel"
+            :applied-tokens="appliedTokens"
             @activate="activate(idx)"
             @deactivate="deactivate(token)"
             @destroy="destroyToken(idx, $event)"