@gitlab/ui 38.2.0 → 38.2.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [38.2.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v38.2.0...v38.2.1) (2022-04-01)
+
+
+### Bug Fixes
+
+* **GlFilteredSearch:** Generate stable token keys ([88dccde](https://gitlab.com/gitlab-org/gitlab-ui/commit/88dccde9f4df1352a7e06e831de8baced4a8d18f))
+
 # [38.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v38.1.0...v38.2.0) (2022-03-31)
 
 

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

@@ -5,22 +5,12 @@ 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 { TERM_TOKEN_TYPE, needDenormalization, denormalizeTokens, isEmptyTerm, INTENT_ACTIVATE_PREVIOUS, normalizeTokens } from './filtered_search_utils';
+import { createTerm, needDenormalization, denormalizeTokens, isEmptyTerm, INTENT_ACTIVATE_PREVIOUS, ensureTokenId, normalizeTokens } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 Vue.use(PortalVue);
 let portalUuid = 0;
 
-function createTerm() {
-  let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  return {
-    type: TERM_TOKEN_TYPE,
-    value: {
-      data
-    }
-  };
-}
-
 function initialState() {
   return [createTerm()];
 }
@@ -172,6 +162,14 @@ var script = {
   watch: {
     tokens: {
       handler() {
+        if (process.env.NODE_ENV !== 'production') {
+          const invalidToken = this.tokens.find(token => !token.id);
+
+          if (invalidToken) {
+            throw new Error(`Token does not have an id:\n${JSON.stringify(invalidToken)}`);
+          }
+        }
+
         if (this.tokens.length === 0 || !this.isLastTokenEmpty()) {
           this.tokens.push(createTerm());
         }
@@ -278,12 +276,12 @@ var script = {
     },
 
     replaceToken(idx, token) {
-      this.$set(this.tokens, idx, { ...token,
+      this.$set(this.tokens, idx, ensureTokenId({ ...token,
         value: {
           data: '',
           ...token.value
         }
-      });
+      }));
       this.activeTokenIdx = idx;
     },
 
@@ -295,12 +293,7 @@ var script = {
         return;
       }
 
-      const newTokens = newStrings.map(data => ({
-        type: TERM_TOKEN_TYPE,
-        value: {
-          data
-        }
-      }));
+      const newTokens = newStrings.map(data => createTerm(data));
       this.tokens.splice(idx + 1, 0, ...newTokens);
       this.activeTokenIdx = idx + newStrings.length;
     },
@@ -333,7 +326,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('gl-search-box-by-click',_vm._b({attrs:{"value":_vm.tokens,"history-items":_vm.historyItems,"clearable":_vm.hasValue,"search-button-attributes":_vm.searchButtonAttributes,"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"},[_vm._l((_vm.tokens),function(token,idx){return [_c(_vm.getTokenComponent(token.type),{key:((token.type) + "-" + idx),ref:"tokens",refInFor:true,tag:"component",staticClass:"gl-filtered-search-item",class:{
+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,"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"},[_vm._l((_vm.tokens),function(token,idx){return [_c(_vm.getTokenComponent(token.type),{key:token.id,ref:"tokens",refInFor:true,tag:"component",staticClass:"gl-filtered-search-item",class:{
             'gl-filtered-search-last-item': _vm.isLastToken(idx),
           },attrs:{"config":_vm.getTokenEntry(token.type),"active":_vm.activeTokenIdx === idx,"available-tokens":_vm.currentAvailableTokens,"current-value":_vm.tokens,"index":idx,"placeholder":_vm.termPlaceholder,"show-friendly-text":_vm.showFriendlyText,"search-input-attributes":_vm.searchInputAttributes,"is-last-token":_vm.isLastToken(idx)},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)}},model:{value:(token.value),callback:function ($$v) {_vm.$set(token, "value", $$v);},expression:"token.value"}})]})],2),_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__ = [];

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

@@ -59,7 +59,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('gl-dropdown-item',_vm._b({ref:"item",staticClass:"gl-filtered-search-suggestion",class:{ 'gl-filtered-search-suggestion-active': _vm.isActive },attrs:{"href":"#"},nativeOn:{"mousedown":function($event){$event.preventDefault();return _vm.emitValue($event)}}},'gl-dropdown-item',_vm.$attrs,false),[_vm._t("default")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-dropdown-item',_vm._b({ref:"item",staticClass:"gl-filtered-search-suggestion",class:{ 'gl-filtered-search-suggestion-active': _vm.isActive },attrs:{"data-testid":"filtered-search-suggestion","href":"#"},nativeOn:{"mousedown":function($event){$event.preventDefault();return _vm.emitValue($event)}}},'gl-dropdown-item',_vm.$attrs,false),[_vm._t("default")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -2,7 +2,7 @@ import _cloneDeep from 'lodash/cloneDeep';
 import { COMMA } from '../../../utils/constants';
 import GlToken from '../token/token';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment';
-import { TERM_TOKEN_TYPE } from './filtered_search_utils';
+import { createTerm } from './filtered_search_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const SEGMENT_TITLE = 'TYPE';
@@ -203,12 +203,7 @@ var script = {
          * Emitted when this token is converted to another type
          * @property {object} token Replacement token configuration
          */
-        this.$emit('replace', {
-          type: TERM_TOKEN_TYPE,
-          value: {
-            data: this.config.title
-          }
-        });
+        this.$emit('replace', createTerm(this.config.title));
       }
     },
 
@@ -298,6 +293,7 @@ var script = {
     destroyByClose(event) {
       if (event.target.closest(TOKEN_CLOSE_SELECTOR)) {
         event.preventDefault();
+        event.stopPropagation();
         this.$emit('destroy');
       }
     }

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

@@ -38,7 +38,45 @@ function needDenormalization(tokens) {
   }
 
   assertValidTokens(tokens);
-  return tokens.some(t => typeof t === 'string');
+  return tokens.some(t => typeof t === 'string' || !t.id);
+}
+let tokenIdCounter = 0;
+
+const getTokenId = () => {
+  const tokenId = `token-${tokenIdCounter}`;
+  tokenIdCounter += 1;
+  return tokenId;
+};
+/**
+ * Ensure the given token has an `id` property, which `GlFilteredSearch` relies
+ * on as a unique key for the token.
+ *
+ * If the given token does not have an `id`, it returns a shallow copy of the
+ * token with an `id`. Otherwise, it returns the given token.
+ *
+ * @param {object} token The token to check.
+ * @returns {object} A token with an `id`.
+ */
+
+
+function ensureTokenId(token) {
+  if (!token.id) {
+    return { ...token,
+      id: getTokenId()
+    };
+  }
+
+  return token;
+}
+function createTerm() {
+  let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return {
+    id: getTokenId(),
+    type: TERM_TOKEN_TYPE,
+    value: {
+      data
+    }
+  };
 }
 function denormalizeTokens(inputTokens) {
   assertValidTokens(inputTokens);
@@ -47,14 +85,9 @@ function denormalizeTokens(inputTokens) {
   tokens.forEach(t => {
     if (typeof t === 'string') {
       const stringTokens = t.split(' ').filter(Boolean);
-      stringTokens.forEach(strToken => result.push({
-        type: TERM_TOKEN_TYPE,
-        value: {
-          data: strToken
-        }
-      }));
+      stringTokens.forEach(strToken => result.push(createTerm(strToken)));
     } else {
-      result.push(t);
+      result.push(ensureTokenId(t));
     }
   });
   return result;
@@ -135,4 +168,4 @@ function wrapTokenInQuotes(token) {
   return `"${token}"`;
 }
 
-export { INTENT_ACTIVATE_PREVIOUS, TERM_TOKEN_TYPE, denormalizeTokens, isEmptyTerm, needDenormalization, normalizeTokens, splitOnQuotes, wrapTokenInQuotes };
+export { INTENT_ACTIVATE_PREVIOUS, TERM_TOKEN_TYPE, createTerm, denormalizeTokens, ensureTokenId, isEmptyTerm, needDenormalization, normalizeTokens, splitOnQuotes, wrapTokenInQuotes };

package/package.json

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

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

@@ -1,4 +1,5 @@
 import Vue, { nextTick } from 'vue';
+import { omit } from 'lodash';
 import { shallowMount, mount } from '@vue/test-utils';
 import GlFilteredSearch from './filtered_search.vue';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
@@ -17,6 +18,8 @@ const FakeToken = {
 
 Vue.directive('GlTooltip', () => {});
 
+const stripId = (token) => (typeof token === 'object' ? omit(token, 'id') : token);
+
 let wrapper;
 describe('Filtered search', () => {
   const defaultProps = {
@@ -41,7 +44,7 @@ describe('Filtered search', () => {
   describe('value manipulation', () => {
     it('creates term when empty', () => {
       createComponent();
-      expect(wrapper.emitted().input[0][0]).toStrictEqual([
+      expect(wrapper.emitted().input[0][0].map(stripId)).toStrictEqual([
         { type: TERM_TOKEN_TYPE, value: { data: '' } },
       ]);
     });
@@ -56,7 +59,7 @@ describe('Filtered search', () => {
         value: [{ type: 'faketoken', value: { data: '' } }],
       });
 
-      expect(wrapper.emitted().input[0][0].pop()).toStrictEqual({
+      expect(stripId(wrapper.emitted().input[0][0].pop())).toStrictEqual({
         type: TERM_TOKEN_TYPE,
         value: { data: '' },
       });
@@ -172,7 +175,7 @@ describe('Filtered search', () => {
 
       await nextTick();
 
-      expect(wrapper.emitted().input.pop()[0]).toStrictEqual([
+      expect(wrapper.emitted().input.pop()[0].map(stripId)).toStrictEqual([
         { type: 'faketoken', value: { data: '' } },
         { type: TERM_TOKEN_TYPE, value: { data: 'one' } },
         { type: TERM_TOKEN_TYPE, value: { data: 'three' } },
@@ -190,7 +193,7 @@ describe('Filtered search', () => {
 
       await nextTick();
 
-      expect(wrapper.emitted().input.pop()[0]).toStrictEqual([
+      expect(wrapper.emitted().input.pop()[0].map(stripId)).toStrictEqual([
         { type: TERM_TOKEN_TYPE, value: { data: 'one' } },
         { type: TERM_TOKEN_TYPE, value: { data: '' } },
       ]);
@@ -305,7 +308,7 @@ describe('Filtered search', () => {
 
       await nextTick();
 
-      expect(wrapper.emitted().input.pop()[0]).toStrictEqual([
+      expect(wrapper.emitted().input.pop()[0].map(stripId)).toStrictEqual([
         { type: TERM_TOKEN_TYPE, value: { data: '' } },
       ]);
     });
@@ -318,7 +321,7 @@ describe('Filtered search', () => {
 
       await nextTick();
 
-      expect(wrapper.emitted().input.pop()[0]).toStrictEqual([
+      expect(wrapper.emitted().input.pop()[0].map(stripId)).toStrictEqual([
         { type: 'faketoken', value: { data: 'test' } },
         { type: TERM_TOKEN_TYPE, value: { data: '' } },
       ]);
@@ -339,7 +342,7 @@ describe('Filtered search', () => {
 
       await nextTick();
 
-      expect(wrapper.emitted().input.pop()[0]).toStrictEqual([
+      expect(wrapper.emitted().input.pop()[0].map(stripId)).toStrictEqual([
         { type: 'faketoken', value: { data: 'test' } },
         { type: TERM_TOKEN_TYPE, value: { data: '' } },
       ]);
@@ -352,7 +355,7 @@ describe('Filtered search', () => {
 
       await nextTick();
 
-      expect(wrapper.emitted().input.pop()[0]).toStrictEqual([
+      expect(wrapper.emitted().input.pop()[0].map(stripId)).toStrictEqual([
         { type: TERM_TOKEN_TYPE, value: { data: 'one' } },
         { type: TERM_TOKEN_TYPE, value: { data: '' } },
       ]);
@@ -368,7 +371,7 @@ describe('Filtered search', () => {
       await nextTick();
 
       expect(wrapper.findAllComponents(GlFilteredSearchTerm).at(2).props('active')).toBe(true);
-      expect(wrapper.emitted().input.pop()[0]).toStrictEqual([
+      expect(wrapper.emitted().input.pop()[0].map(stripId)).toStrictEqual([
         { type: TERM_TOKEN_TYPE, value: { data: 'one' } },
         { type: TERM_TOKEN_TYPE, value: { data: 'two' } },
         { type: TERM_TOKEN_TYPE, value: { data: '' } },
@@ -385,7 +388,7 @@ describe('Filtered search', () => {
 
       await nextTick();
 
-      expect(wrapper.emitted().input.pop()[0]).toStrictEqual([
+      expect(wrapper.emitted().input.pop()[0].map(stripId)).toStrictEqual([
         { type: TERM_TOKEN_TYPE, value: { data: 'one' } },
         { type: TERM_TOKEN_TYPE, value: { data: 'foo' } },
         { type: TERM_TOKEN_TYPE, value: { data: 'bar' } },
@@ -415,7 +418,7 @@ describe('Filtered search', () => {
     });
     wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('submit');
     expect(wrapper.emitted().submit).toBeDefined();
-    expect(wrapper.emitted().submit[0][0]).toStrictEqual([
+    expect(wrapper.emitted().submit[0][0].map(stripId)).toStrictEqual([
       'one two',
       { type: 'faketoken', value: { data: 'smth' } },
       'four five',
@@ -475,7 +478,7 @@ describe('Filtered search', () => {
     });
     await nextTick();
 
-    expect(wrapper.findComponent(GlFilteredSearchTerm).props('currentValue')).toEqual([
+    expect(wrapper.findComponent(GlFilteredSearchTerm).props('currentValue').map(stripId)).toEqual([
       { type: 'filtered-search-term', value: { data: 'one' } },
       { type: 'filtered-search-term', value: { data: '' } },
     ]);
@@ -705,4 +708,26 @@ describe('Filtered search integration tests', () => {
 
     expect(wrapper.findAllComponents(GlFilteredSearchTerm)).toHaveLength(1);
   });
+
+  // Regression test for https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1761
+  it('does not incorrectly activate next token of the same type after token destruction', async () => {
+    mountComponent({
+      value: [
+        { type: 'static', value: { data: 'first', operator: '=' } },
+        { type: 'static', value: { data: 'second', operator: '=' } },
+        { type: 'unique', value: { data: 'something' } },
+      ],
+    });
+    await nextTick();
+
+    expect(
+      wrapper.findAllComponents(GlFilteredSearchToken).wrappers.map((cmp) => cmp.props('active'))
+    ).toEqual([false, false, false]);
+
+    await wrapper.find('.gl-token-close').trigger('mousedown');
+
+    expect(
+      wrapper.findAllComponents(GlFilteredSearchToken).wrappers.map((cmp) => cmp.props('active'))
+    ).toEqual([false, false]);
+  });
 });

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

@@ -6,6 +6,7 @@ import {
   GlFilteredSearchTerm,
   GlFilteredSearchTokenSegment,
   GlLoadingIcon,
+  GlIcon,
   GlToken,
   GlAvatar,
 } from '../../../index';
@@ -56,14 +57,14 @@ const UserToken = {
       setStoryTimeout(() => {
         this.loadingView = false;
         this.activeUser = fakeUsers.find((u) => u.username === this.value.data);
-      }, 1000);
+      }, 500);
     },
     loadSuggestions() {
       this.loadingSuggestions = true;
       setStoryTimeout(() => {
         this.loadingSuggestions = false;
         this.users = fakeUsers;
-      }, 2000);
+      }, 500);
     },
   },
   watch: {
@@ -132,7 +133,7 @@ const MilestoneToken = {
       setStoryTimeout(() => {
         this.loadingSuggestions = false;
         this.milestones = fakeMilestones;
-      }, 2000);
+      }, 500);
     },
   },
   watch: {
@@ -214,7 +215,7 @@ const LabelToken = {
       setStoryTimeout(() => {
         this.loadingSuggestions = false;
         this.labels = fakeLabels;
-      }, 2000);
+      }, 500);
     },
   },
   watch: {
@@ -322,7 +323,7 @@ export const WithHistoryItems = () => ({
           type: 'demotoken',
           title: 'Unique',
           icon: 'document',
-          token: 'gl-filtered-search-token',
+          token: GlFilteredSearchToken,
           operators: [{ value: '=', description: 'is', default: 'true' }],
           options: [
             { icon: 'heart', title: 'heart', value: 1 },
@@ -406,7 +407,13 @@ export const WithFriendlyText = () => ({
 export const WithMultiSelect = () => {
   const MultiUserToken = {
     props: ['value', 'active', 'config'],
-    components: { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon, GlAvatar },
+    components: {
+      GlFilteredSearchToken,
+      GlFilteredSearchSuggestion,
+      GlLoadingIcon,
+      GlIcon,
+      GlAvatar,
+    },
     inheritAttrs: false,
     data() {
       return {

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

@@ -8,8 +8,9 @@ import GlSearchBoxByClick from '../search_box_by_click/search_box_by_click.vue';
 import GlFilteredSearchTerm from './filtered_search_term.vue';
 import {
   isEmptyTerm,
-  TERM_TOKEN_TYPE,
   INTENT_ACTIVATE_PREVIOUS,
+  createTerm,
+  ensureTokenId,
   normalizeTokens,
   denormalizeTokens,
   needDenormalization,
@@ -19,13 +20,6 @@ Vue.use(PortalVue);
 
 let portalUuid = 0;
 
-function createTerm(data = '') {
-  return {
-    type: TERM_TOKEN_TYPE,
-    value: { data },
-  };
-}
-
 function initialState() {
   return [createTerm()];
 }
@@ -160,6 +154,13 @@ export default {
   watch: {
     tokens: {
       handler() {
+        if (process.env.NODE_ENV !== 'production') {
+          const invalidToken = this.tokens.find((token) => !token.id);
+          if (invalidToken) {
+            throw new Error(`Token does not have an id:\n${JSON.stringify(invalidToken)}`);
+          }
+        }
+
         if (this.tokens.length === 0 || !this.isLastTokenEmpty()) {
           this.tokens.push(createTerm());
         }
@@ -255,7 +256,7 @@ export default {
     },
 
     replaceToken(idx, token) {
-      this.$set(this.tokens, idx, { ...token, value: { data: '', ...token.value } });
+      this.$set(this.tokens, idx, ensureTokenId({ ...token, value: { data: '', ...token.value } }));
       this.activeTokenIdx = idx;
     },
 
@@ -269,10 +270,7 @@ export default {
         return;
       }
 
-      const newTokens = newStrings.map((data) => ({
-        type: TERM_TOKEN_TYPE,
-        value: { data },
-      }));
+      const newTokens = newStrings.map((data) => createTerm(data));
 
       this.tokens.splice(idx + 1, 0, ...newTokens);
 
@@ -340,7 +338,7 @@ export default {
           <component
             :is="getTokenComponent(token.type)"
             ref="tokens"
-            :key="`${token.type}-${idx}`"
+            :key="token.id"
             v-model="token.value"
             :config="getTokenEntry(token.type)"
             :active="activeTokenIdx === idx"

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

@@ -51,6 +51,7 @@ export default {
   <gl-dropdown-item
     ref="item"
     class="gl-filtered-search-suggestion"
+    data-testid="filtered-search-suggestion"
     :class="{ 'gl-filtered-search-suggestion-active': isActive }"
     v-bind="$attrs"
     href="#"

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

@@ -225,8 +225,16 @@ describe('Filtered search token', () => {
       mountComponent({ value: { operator: '=', data: 'something' } });
       const closeWrapper = wrapper.find('.gl-token-close');
       closeWrapper.element.closest = () => closeWrapper.element;
-      closeWrapper.trigger('mousedown');
 
+      const preventDefaultSpy = jest.fn();
+      const stopPropagationSpy = jest.fn();
+      closeWrapper.trigger('mousedown', {
+        preventDefault: preventDefaultSpy,
+        stopPropagation: stopPropagationSpy,
+      });
+
+      expect(preventDefaultSpy).toHaveBeenCalled();
+      expect(stopPropagationSpy).toHaveBeenCalled();
       expect(wrapper.emitted().destroy).toHaveLength(1);
     });
 

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

@@ -3,7 +3,7 @@ import { cloneDeep } from 'lodash';
 import { COMMA } from '../../../utils/constants';
 import GlToken from '../token/token.vue';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';
-import { TERM_TOKEN_TYPE } from './filtered_search_utils';
+import { createTerm } from './filtered_search_utils';
 
 const SEGMENT_TITLE = 'TYPE';
 const SEGMENT_OPERATOR = 'OPERATOR';
@@ -183,7 +183,7 @@ export default {
          * Emitted when this token is converted to another type
          * @property {object} token Replacement token configuration
          */
-        this.$emit('replace', { type: TERM_TOKEN_TYPE, value: { data: this.config.title } });
+        this.$emit('replace', createTerm(this.config.title));
       }
     },
 
@@ -254,6 +254,7 @@ export default {
     destroyByClose(event) {
       if (event.target.closest(TOKEN_CLOSE_SELECTOR)) {
         event.preventDefault();
+        event.stopPropagation();
         this.$emit('destroy');
       }
     },

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

@@ -39,7 +39,42 @@ export function needDenormalization(tokens) {
 
   assertValidTokens(tokens);
 
-  return tokens.some((t) => typeof t === 'string');
+  return tokens.some((t) => typeof t === 'string' || !t.id);
+}
+
+let tokenIdCounter = 0;
+const getTokenId = () => {
+  const tokenId = `token-${tokenIdCounter}`;
+  tokenIdCounter += 1;
+  return tokenId;
+};
+/**
+ * Ensure the given token has an `id` property, which `GlFilteredSearch` relies
+ * on as a unique key for the token.
+ *
+ * If the given token does not have an `id`, it returns a shallow copy of the
+ * token with an `id`. Otherwise, it returns the given token.
+ *
+ * @param {object} token The token to check.
+ * @returns {object} A token with an `id`.
+ */
+export function ensureTokenId(token) {
+  if (!token.id) {
+    return {
+      ...token,
+      id: getTokenId(),
+    };
+  }
+
+  return token;
+}
+
+export function createTerm(data = '') {
+  return {
+    id: getTokenId(),
+    type: TERM_TOKEN_TYPE,
+    value: { data },
+  };
 }
 
 export function denormalizeTokens(inputTokens) {
@@ -51,11 +86,9 @@ export function denormalizeTokens(inputTokens) {
   tokens.forEach((t) => {
     if (typeof t === 'string') {
       const stringTokens = t.split(' ').filter(Boolean);
-      stringTokens.forEach((strToken) =>
-        result.push({ type: TERM_TOKEN_TYPE, value: { data: strToken } })
-      );
+      stringTokens.forEach((strToken) => result.push(createTerm(strToken)));
     } else {
-      result.push(t);
+      result.push(ensureTokenId(t));
     }
   });
   return result;

package/src/components/base/skeleton_loader/skeleton_loader.stories.js

@@ -1,28 +1,77 @@
 import { GlSkeletonLoader } from '../../../index';
+import { makeContainer } from '../../../utils/story_decorators/container';
 import readme from './skeleton_loader.md';
 
-const Template = (args) => ({
+const defaultValue = (prop) => GlSkeletonLoader.props[prop].default;
+
+const generateProps = ({
+  width = defaultValue('width'),
+  height = defaultValue('height'),
+  preserveAspectRatio = defaultValue('preserveAspectRatio'),
+  lines = defaultValue('lines'),
+  equalWidthLines = defaultValue('equalWidthLines'),
+} = {}) => ({
+  width,
+  height,
+  preserveAspectRatio,
+  lines,
+  equalWidthLines,
+});
+
+const template = (slotContent = '') => `
+    <gl-skeleton-loader
+      :width="width"
+      :height="height"
+      :preserveAspectRatio="preserveAspectRatio"
+      :lines="lines"
+      :equalWidthLines="equalWidthLines"
+    >${slotContent}</gl-skeleton-loader>
+`;
+
+export const Default = (args) => ({
   components: { GlSkeletonLoader },
   props: Object.keys(args),
-  template: `
-  <div style="background: #fff; border: 1px solid #dfdfdf; box-shadow: 0 1px 2px rgba(0,0,0,0.1); width: 359px; height: 135px; padding: 1rem; border-radius: 0.25rem;">
-    <div style="width: 327px; height: 102px;">
-      <gl-skeleton-loader :width="327" :height="102">
-        <rect width="276" height="16" rx="4" />
-        <rect y="18" width="237" height="16" rx="4" />
-        <rect y="42" width="118" height="16" rx="8" />
-        <rect x="122" y="42" width="130" height="16" rx="8" />
-        <rect y="62" width="106" height="16" rx="8" />
-        <rect x="110" y="62" width="56" height="16" rx="8" />
-        <rect x="256" y="42" width="71" height="16" rx="8" />
-        <rect y="86" width="38" height="16" rx="4" />
-      </gl-skeleton-loader>
-    </div>
-  </div>`,
+  template: template(),
+});
+Object.assign(Default, {
+  args: generateProps(),
+  parameters: {
+    controls: {
+      // When not providing custom shapes in the default slot, these are the
+      // only props you're likely to want to modify.
+      include: ['width', 'lines', 'equalWidthLines'],
+    },
+  },
 });
 
-export const Default = Template.bind({});
-Default.args = {};
+export const WithCustomShapes = (args) => ({
+  components: { GlSkeletonLoader },
+  props: Object.keys(args),
+  template: template(`
+    <rect width="276" height="16" rx="4" />
+    <rect y="18" width="237" height="16" rx="4" />
+    <rect y="42" width="118" height="16" rx="8" />
+    <rect x="122" y="42" width="130" height="16" rx="8" />
+    <rect y="62" width="106" height="16" rx="8" />
+    <rect x="110" y="62" width="56" height="16" rx="8" />
+    <rect x="256" y="42" width="71" height="16" rx="8" />
+    <rect y="86" width="38" height="16" rx="4" />
+  `),
+});
+Object.assign(WithCustomShapes, {
+  args: generateProps({
+    width: 327,
+    height: 102,
+  }),
+  parameters: {
+    controls: {
+      // With custom shapes, other props become useful, although they're a bit
+      // counterintuitive.
+      include: ['width', 'height', 'preserveAspectRatio'],
+    },
+  },
+  decorators: [makeContainer({ width: '250px' })],
+});
 
 export default {
   title: 'base/skeleton-loader',
@@ -34,8 +83,5 @@ export default {
         component: readme,
       },
     },
-    controls: {
-      disable: true,
-    },
   },
 };