@gitlab/ui 38.0.1 → 38.2.1

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

@@ -1,32 +1,28 @@
-import { withKnobs } from '@storybook/addon-knobs';
 import { GlFilteredSearchSuggestionList, GlFilteredSearchSuggestion } from '../../../index';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { provide } from './common_story_options';
 import readme from './filtered_search_suggestion_list.md';
 
-documentedStoriesOf('base/filtered-search/suggestion-list', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components: { GlFilteredSearchSuggestionList, GlFilteredSearchSuggestion },
-    data() {
-      return {
-        iteration: 1,
-        items: Array.from({ length: 5 }).map((_, idx) => `item-${idx}-iteration-1`),
-      };
+export const Default = () => ({
+  components: { GlFilteredSearchSuggestionList, GlFilteredSearchSuggestion },
+  data() {
+    return {
+      iteration: 1,
+      items: Array.from({ length: 5 }).map((_, idx) => `item-${idx}-iteration-1`),
+    };
+  },
+  provide,
+  methods: {
+    change() {
+      this.iteration += 1;
+      this.items = Array.from({ length: 3 + Math.floor(Math.random() * 5) }).map(
+        (_, idx) => `item-${idx}-iteration-${this.iteration}`
+      );
     },
-    provide,
-    methods: {
-      change() {
-        this.iteration += 1;
-        this.items = Array.from({ length: 3 + Math.floor(Math.random() * 5) }).map(
-          (_, idx) => `item-${idx}-iteration-${this.iteration}`
-        );
-      },
-    },
-    mounted() {
-      this.$refs.suggestions.nextItem();
-    },
-    template: `
+  },
+  mounted() {
+    this.$refs.suggestions.nextItem();
+  },
+  template: `
       <div>
         <button @click="$refs.suggestions.prevItem()">prev</button>
         <button @click="$refs.suggestions.nextItem()">next</button>
@@ -38,4 +34,16 @@ documentedStoriesOf('base/filtered-search/suggestion-list', readme)
         </gl-filtered-search-suggestion-list>
       </div>
     `,
-  }));
+});
+
+export default {
+  title: 'base/filtered-search/suggestion-list',
+  component: GlFilteredSearchSuggestionList,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

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

@@ -1,5 +1,6 @@
 <script>
 export default {
+  name: 'GlFilteredSearchSuggestionList',
   inject: ['suggestionsListClass'],
   provide() {
     return {
@@ -7,6 +8,9 @@ export default {
     };
   },
   props: {
+    /**
+     * Value to be initially selected in list.
+     */
     initialValue: {
       required: false,
       validator: () => true,
@@ -84,6 +88,7 @@ export default {
 </script>
 <template>
   <ul :class="listClasses">
+    <!-- @slot The suggestions (implemented with GlFilteredSearchSuggestion). -->
     <slot></slot>
   </ul>
 </template>

package/src/components/base/filtered_search/filtered_search_term.documentation.js

@@ -2,45 +2,4 @@ import * as description from './filtered_search_term.md';
 
 export default {
   description,
-  bootstrapComponent: null,
-  propsInfo: {
-    availableTokens: {
-      additionalInfo: 'Tokens available for this filtered search instance',
-    },
-    active: {
-      additionalInfo: 'If this term token is currently active',
-    },
-    value: {
-      additionalInfo: 'Current term value',
-    },
-    searchInputAttributes: {
-      additionalInfo: 'HTML attributes to add to the search input',
-    },
-    isLastToken: {
-      additionalInfo: 'If this is the last token',
-    },
-  },
-  events: [
-    { event: 'activate', description: 'Emitted when this term token is clicked' },
-    { event: 'deactivate', description: 'Emitted when this term token loses its focus' },
-    {
-      event: 'destroy',
-      description: 'Emitted when token value is empty and backspace is pressed',
-    },
-    {
-      event: 'replace',
-      args: [{ arg: 'token', description: '(Object) Replacement token configuration' }],
-      description: 'Emitted when autocomplete entry is selected',
-    },
-    {
-      event: 'split',
-      args: [
-        {
-          arg: 'newTokens',
-          description: '(Array) Token configurations',
-        },
-      ],
-      description: 'Emitted when Space is pressed in-between term text',
-    },
-  ],
 };

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

@@ -1,5 +1,3 @@
-# Filtered Search Term
-
 The filtered search term is a component for managing "free input" in the filtered search component.
 It is responsible for autocompleting available tokens and "converting" to a relevant
 component when an autocomplete item is selected.

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

@@ -1,7 +1,5 @@
-import { withKnobs, boolean } from '@storybook/addon-knobs';
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { provide } from './common_story_options';
 import readme from './filtered_search_term.md';
 import GlFilteredSearchTerm from './filtered_search_term.vue';
@@ -13,29 +11,25 @@ const availableTokens = [
   { title: 'Demo2', type: 'demo2', icon: 'rocket', token: {} },
 ];
 
-documentedStoriesOf('base/filtered-search/term', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components: {
-      GlFilteredSearchTerm,
-    },
-    provide,
-    props: {
-      active: {
-        type: Boolean,
-        default: boolean('active', true),
-      },
-    },
-    data() {
-      return {
-        value: { data: 'demo' },
-        availableTokens,
-      };
-    },
-    mounted() {
-      this.$nextTick(() => document.activeElement.blur());
-    },
-    template: `
+const generateProps = ({ active = true } = {}) => ({ active });
+
+// eslint-disable-next-line no-unused-vars
+export const Default = (_args, { argTypes }) => ({
+  props: ['active'],
+  components: {
+    GlFilteredSearchTerm,
+  },
+  provide,
+  data() {
+    return {
+      value: { data: 'demo' },
+      availableTokens,
+    };
+  },
+  mounted() {
+    this.$nextTick(() => document.activeElement.blur());
+  },
+  template: `
       <div>
         <div> {{ value.data }} </div>
         <div class="gl-border-1 gl-border-solid gl-border-gray-200">
@@ -51,4 +45,17 @@ documentedStoriesOf('base/filtered-search/term', readme)
         </div>
       </div>
     `,
-  }));
+});
+Default.args = generateProps();
+
+export default {
+  title: 'base/filtered-search/term',
+  component: GlFilteredSearchTerm,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

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

@@ -4,21 +4,31 @@ import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';
 import { INTENT_ACTIVATE_PREVIOUS } from './filtered_search_utils';
 
 export default {
+  name: 'GlFilteredSearchTerm',
   components: {
     GlFilteredSearchTokenSegment,
     GlFilteredSearchSuggestion,
   },
   inheritAttrs: false,
   props: {
+    /**
+     * Tokens available for this filtered search instance.
+     */
     availableTokens: {
       type: Array,
       required: true,
     },
+    /**
+     * Determines if the term is being edited or not.
+     */
     active: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Current term value.
+     */
     value: {
       type: Object,
       required: false,
@@ -29,16 +39,25 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * HTML attributes to add to the search input.
+     */
     searchInputAttributes: {
       type: Object,
       required: false,
       default: () => ({}),
     },
+    /**
+     * If this is the last token.
+     */
     isLastToken: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * The current `value` (tokens) of the ancestor GlFilteredSearch component.
+     */
     currentValue: {
       type: Array,
       required: false,
@@ -56,12 +75,25 @@ export default {
         return this.value.data;
       },
       set(data) {
+        /**
+         * Emitted when the token changes its value.
+         *
+         * @event input
+         * @type {object} dataObj Object containing the update value.
+         */
         this.$emit('input', { data });
       },
     },
   },
   methods: {
     onBackspace() {
+      /**
+       * Emitted when token value is empty and backspace is pressed.
+       * Includes user intent to activate previous token.
+       *
+       * @event destroy
+       * @type {object} details The user intent
+       */
       this.$emit('destroy', { intent: INTENT_ACTIVATE_PREVIOUS });
     },
   },
@@ -70,6 +102,28 @@ export default {
 
 <template>
   <div class="gl-h-auto gl-filtered-search-term">
+    <!--
+      Emitted when this term token is clicked.
+      @event activate
+    -->
+    <!--
+      Emitted when this term token will lose its focus.
+      @event deactivate
+    -->
+    <!--
+      Emitted when autocomplete entry is selected.
+      @event replace
+      @property {object} token Replacement token configuration.
+    -->
+    <!--
+      Emitted when the token is submitted.
+      @event submit
+    -->
+    <!--
+      Emitted when Space is pressed in-between term text.
+      @event split
+      @property {array} newTokens Token configurations
+    -->
     <gl-filtered-search-token-segment
       v-model="internalValue"
       class="gl-filtered-search-term-token"

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

@@ -2,30 +2,4 @@ import * as description from './filtered_search_token.md';
 
 export default {
   description,
-  bootstrapComponent: null,
-  propsInfo: {
-    title: {
-      additionalInfo: 'Token title',
-    },
-    config: {
-      additionalInfo: 'Token configuration with available operators and options',
-    },
-    active: {
-      additionalInfo: 'If this token is currently active',
-    },
-    value: {
-      additionalInfo: 'Current value',
-    },
-    replace: {
-      args: [{ arg: 'token', description: '(Object) Replacement token configuration' }],
-      description: 'Emitted when this token is converted to another type',
-    },
-  },
-  slots: [
-    { name: 'view', description: 'Template for token value in inactive state' },
-    {
-      name: 'suggestions',
-      description: 'Slot for rendering autocomplete suggestions when no options are provided.',
-    },
-  ],
 };

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

@@ -1,5 +1,3 @@
-# Filtered Search Binary Token
-
 Filtered search token is a helper component, intended to
 simplify the creation of filters tokens which consist of a title, operators
 and an editable value with autocomplete. This component abstracts token management
@@ -11,7 +9,7 @@ This component is not intended to be used outside of the `GlFilteredSearch` comp
 
 Make sure to pass `$listeners` to `gl-filtered-search-token`, or route events properly:
 
-```js
+```html
 <gl-filtered-search-token
   title="Confidential"
   :active="active"

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