@gitlab/ui 38.1.0 → 38.3.0

package/src/components/base/dropdown/dropdown_item.documentation.js

@@ -2,5 +2,4 @@ import description from './dropdown_item.md';
 
 export default {
   description,
-  bootstrapComponent: 'b-dropdown',
 };

package/src/components/base/dropdown/dropdown_item.md

@@ -1,8 +1,2 @@
-# Dropdown Item
-
-<!-- STORY -->
-
-## Usage
-
 The dropdown item component is meant to be used for clickable entries inside a dropdown component.
 If you provide the `href` attribute, it renders a link instead of a button.

package/src/components/base/dropdown/dropdown_item.stories.js

@@ -1,42 +1,114 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
+import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
 import { GlDropdownItem } from '../../../index';
+import { variantCssColorMap } from '../../../utils/constants';
 import readme from './dropdown_item.md';
 
 const components = {
   GlDropdownItem,
 };
 
-documentedStoriesOf('base/dropdown/dropdown-item', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: {},
-    components,
-    template: '<ul class="list-unstyled"><gl-dropdown-item>Some item</gl-dropdown-item></ul>',
-  }))
-  .add('checked', () => ({
-    props: {},
-    components,
-    template:
-      '<ul class="list-unstyled"><gl-dropdown-item is-checked is-check-item>Some item</gl-dropdown-item></ul>',
-  }))
-  .add('checked with avatar', () => ({
-    props: {},
-    components,
-    template: `<ul class="list-unstyled">
-      <gl-dropdown-item
-        is-checked
-        is-check-item
-        is-check-centered
-        avatar-url="./img/avatar.png"
-        secondary-text="@sytses"
-      >
-        Sid Sijbrandij
-      </gl-dropdown-item></ul>`,
-  }))
-  .add('checked with secondary text', () => ({
-    props: {},
-    components,
-    template:
-      '<ul class="list-unstyled"><gl-dropdown-item is-checked is-check-item secondary-text="Lorem ipsum dolar sit amit...">Some item</gl-dropdown-item></ul>',
-  }));
+const wrap = (template) => `
+  <ul class="gl-list-style-none gl-pl-0">
+    <gl-dropdown-item
+      :avatar-url="avatarUrl"
+      :icon-color="iconColor"
+      :icon-name="iconName"
+      :icon-right-aria-label="iconRightAriaLabel"
+      :icon-right-name="iconRightName"
+      :is-checked="isChecked"
+      :is-check-item="isCheckItem"
+      :is-check-centered="isCheckCentered"
+      :secondary-text="secondaryText">
+      ${template}
+    </gl-dropdown-item>
+  </ul>
+`;
+
+const defaultValue = (prop) => GlDropdownItem.props[prop].default;
+
+const generateProps = ({
+  avatarUrl = defaultValue('avatarUrl'),
+  iconColor = defaultValue('iconColor'),
+  iconName = defaultValue('iconName'),
+  iconRightAriaLabel = defaultValue('iconRightAriaLabel'),
+  iconRightName = defaultValue('iconRightName'),
+  isChecked = defaultValue('isChecked'),
+  isCheckItem = defaultValue('isCheckItem'),
+  isCheckCentered = defaultValue('isCheckCentered'),
+  secondaryText = defaultValue('secondaryText'),
+} = {}) => ({
+  avatarUrl,
+  iconColor,
+  iconName,
+  iconRightAriaLabel,
+  iconRightName,
+  isChecked,
+  isCheckItem,
+  isCheckCentered,
+  secondaryText,
+});
+
+export const Default = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components,
+  template: wrap('Some item'),
+});
+Default.args = generateProps();
+
+export const Checked = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components,
+  template: wrap('Some item'),
+});
+Checked.args = generateProps({ isChecked: true, isCheckItem: true });
+
+export const CheckedWithAvatar = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components,
+  template: wrap('Sid Sijbrandij'),
+});
+CheckedWithAvatar.args = generateProps({
+  isChecked: true,
+  isCheckItem: true,
+  isCheckCentered: true,
+  avatarUrl: './img/avatar.png',
+  secondaryText: '@sytses',
+});
+
+export const CheckedWithSecondaryText = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components,
+  template: wrap('Some item'),
+});
+CheckedWithSecondaryText.args = generateProps({
+  isChecked: true,
+  isCheckItem: true,
+  secondaryText: 'Lorem ipsum dolar sit amit...',
+});
+
+export default {
+  title: 'base/dropdown/dropdown-item',
+  component: GlDropdownItem,
+  parameters: {
+    bootstrapComponent: 'b-dropdown-item',
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    iconColor: {
+      options: Object.keys(variantCssColorMap),
+      control: {
+        type: 'select',
+      },
+    },
+    iconName: {
+      options: iconSpriteInfo.icons,
+      control: {
+        type: 'select',
+      },
+    },
+  },
+};

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 },
@@ -374,14 +375,14 @@ export const WithFriendlyText = () => ({
           icon: 'weight',
           title: 'Weight',
           unique: true,
-          token: 'gl-filtered-search-token',
+          token: GlFilteredSearchToken,
         },
         {
           type: 'confidential',
           icon: 'eye-slash',
           title: 'Confidential',
           unique: true,
-          token: 'gl-filtered-search-token',
+          token: GlFilteredSearchToken,
           options: [
             { icon: 'eye-slash', value: 'Yes', title: 'Yes' },
             { icon: 'eye', value: 'No', title: 'No' },
@@ -406,6 +407,13 @@ export const WithFriendlyText = () => ({
 export const WithMultiSelect = () => {
   const MultiUserToken = {
     props: ['value', 'active', 'config'],
+    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);
     });
 
@@ -247,6 +255,16 @@ describe('Filtered search token', () => {
       expect(wrapper.emitted().input[0][0].operator).toBe('=');
       expect(findDataSegment().props().active).toBe(true);
     });
+
+    it('does not mutate its value prop', async () => {
+      const originalValue = () => ({ operator: '', data: '' });
+      const value = observable(originalValue());
+      mountComponent({ active: true, value });
+
+      await wrapper.find('input').trigger('keydown', { key: 'q' });
+
+      expect(value).toEqual(originalValue());
+    });
   });
 
   describe('when multi select', () => {
@@ -270,5 +288,17 @@ describe('Filtered search token', () => {
 
       expect(wrapper.emitted('input')).toEqual([[{ data: '', operator: '=' }]]);
     });
+
+    it('passes down the value prop to the data segment if it changes', async () => {
+      createComponent({
+        value: { operator: '=', data: 'alpha' },
+      });
+
+      await wrapper.setProps({
+        value: { operator: '=', data: 'gamma' },
+      });
+
+      expect(findDataSegment().props('value')).toEqual('gamma');
+    });
   });
 });

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

@@ -63,6 +63,7 @@ export const WithCustomOperatorsOptions = (args, { argTypes }) => ({
   components: {
     GlFilteredSearchToken,
     GlFilteredSearchSuggestion,
+    GlIcon,
   },
   provide,
   props: ['active'],