@gitlab/ui 38.0.1 → 38.2.1

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.documentation.js

@@ -1,82 +1,6 @@
-import examples from './examples';
 import * as description from './filtered_search.md';
 
 export default {
   description,
   followsDesignSystem: true,
-  bootstrapComponent: null,
-  examples,
-  propsInfo: {
-    value: {
-      additionalInfo: 'If provided, used as value of filtered search',
-    },
-    historyItems: {
-      additionalInfo: 'If provided, used as history items for this component',
-    },
-    availableTokens: {
-      additionalInfo: 'Available tokens',
-    },
-    placeholder: {
-      additionalInfo: 'If provided, used as history items for this component',
-    },
-    recentSearchesHeader: {
-      additionalInfo: 'i18n for recent searches title within history dropdown',
-    },
-    clearButtonTitle: {
-      additionalInfo: 'i18n for clear button title',
-    },
-    closeButtonTitle: {
-      additionalInfo: 'i18n for close button title within history dropdown',
-    },
-    clearRecentSearchesText: {
-      additionalInfo: 'i18n for recent searches clear text',
-    },
-    suggestionsListClass: {
-      additionalInfo:
-        'Additional classes to add to the suggestion list menu. NOTE: this not reactive, and the value must be available and fixed when the component is instantiated',
-    },
-    searchButtonAttributes: {
-      additionalInfo: 'HTML attributes to add to the search button',
-    },
-    searchInputAttributes: {
-      additionalInfo: 'HTML attributes to add to the search input',
-    },
-  },
-  events: [
-    {
-      event: 'clear',
-      description: 'Emitted when search is cleared',
-    },
-    {
-      event: 'submit',
-      args: [
-        {
-          arg: 'tokens',
-          description: '(Array)',
-        },
-      ],
-      description: 'Emitted when search is submitted',
-    },
-    {
-      event: 'history-item-selected',
-      args: [
-        {
-          arg: 'value',
-          description: 'History item',
-        },
-      ],
-      description: 'Emitted when item from history is selected',
-    },
-    {
-      event: 'clear-history',
-      description: 'Emitted when clear history button is clicked',
-    },
-  ],
-  slots: [
-    {
-      name: 'history-item',
-      description:
-        'Slot to customize history item in history dropdown. Used only if using history items',
-    },
-  ],
 };

package/src/components/base/filtered_search/filtered_search.md

@@ -1,5 +1,3 @@
-# Filtered Search
-
 The filtered search component is responsible for managing search with possible filters.
 
 ## Usage
@@ -61,6 +59,7 @@ const availableTokens = [
 Pass the list of tokens to the search component. Optionally, you can use `v-model` to receive
 realtime updates:
 
-```js
- <gl-filtered-search :available-tokens="tokens" v-model="value" />
+```html
+
+<gl-filtered-search :available-tokens="tokens" v-model="value" />
 ```

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]);
+  });
 });