@gitlab/ui 37.4.2 → 37.5.2

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

@@ -5,7 +5,7 @@ import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list.vue';
 import GlFilteredSearchTerm from './filtered_search_term.vue';
 import GlFilteredSearchToken from './filtered_search_token.vue';
-import { TERM_TOKEN_TYPE } from './filtered_search_utils';
+import { TERM_TOKEN_TYPE, INTENT_ACTIVATE_PREVIOUS } from './filtered_search_utils';
 
 jest.mock('~/directives/tooltip');
 
@@ -196,9 +196,99 @@ describe('Filtered search', () => {
       ]);
     });
 
-    it('brings focus to previous token if current is destroyed', async () => {
+    it('makes previous token active if user intends it on token destruction', async () => {
       createComponent({
-        value: ['one', { type: 'faketoken', value: '' }, 'two'],
+        value: [{ type: 'faketoken', value: '' }, ''],
+      });
+      await nextTick();
+
+      wrapper
+        .findComponent(GlFilteredSearchTerm)
+        .vm.$emit('destroy', { intent: INTENT_ACTIVATE_PREVIOUS });
+
+      await nextTick();
+
+      expect(wrapper.findComponent(FakeToken).props('active')).toBe(true);
+    });
+
+    it('makes no token active if user intends it on first token destruction', async () => {
+      createComponent({
+        value: ['foo', { type: 'faketoken', value: '' }],
+      });
+      await nextTick();
+      wrapper.findComponent(FakeToken).vm.$emit('activate');
+      await nextTick();
+
+      expect(wrapper.findComponent(FakeToken).props('active')).toBe(true);
+
+      wrapper
+        .findAllComponents(GlFilteredSearchTerm)
+        .at(0)
+        .vm.$emit('destroy', { intent: INTENT_ACTIVATE_PREVIOUS });
+
+      await nextTick();
+
+      expect(wrapper.findComponent(FakeToken).props('active')).toBe(false);
+    });
+
+    it('keeps active token active if later one destroyed', async () => {
+      createComponent({
+        value: [
+          { type: 'faketoken', value: '' },
+          { type: 'faketoken', value: '' },
+          { type: 'faketoken', value: '' },
+        ],
+      });
+      await nextTick();
+      wrapper.findAllComponents(FakeToken).at(0).vm.$emit('activate');
+      await nextTick();
+
+      wrapper.findAllComponents(FakeToken).at(2).vm.$emit('destroy');
+
+      await nextTick();
+
+      expect(wrapper.findAllComponents(FakeToken).at(0).props('active')).toBe(true);
+    });
+
+    it('keeps active token active if earlier one destroyed', async () => {
+      createComponent({
+        value: [
+          { type: 'faketoken', value: '' },
+          { type: 'faketoken', value: '' },
+          { type: 'faketoken', value: '' },
+        ],
+      });
+      await nextTick();
+      wrapper.findAllComponents(FakeToken).at(2).vm.$emit('activate');
+      await nextTick();
+
+      wrapper.findAllComponents(FakeToken).at(0).vm.$emit('destroy');
+
+      await nextTick();
+
+      expect(wrapper.findAllComponents(FakeToken).at(1).props('active')).toBe(true);
+    });
+
+    it('makes no token active if current is destroyed', async () => {
+      createComponent({
+        value: ['one', { type: 'faketoken', value: '' }],
+      });
+      await nextTick();
+      wrapper.findComponent(FakeToken).vm.$emit('activate');
+      await nextTick();
+
+      wrapper.findComponent(FakeToken).vm.$emit('destroy');
+
+      await nextTick();
+
+      wrapper.findAllComponents(GlFilteredSearchTerm).wrappers.forEach((searchTermWrapper) => {
+        expect(searchTermWrapper.props('active')).toBe(false);
+      });
+    });
+
+    it('keeps no token active if one was destroyed when none were active', async () => {
+      createComponent({
+        value: ['one', { type: 'faketoken', value: '' }],
       });
       await nextTick();
 
@@ -206,7 +296,7 @@ describe('Filtered search', () => {
 
       await nextTick();
 
-      expect(wrapper.findComponent(GlFilteredSearchTerm).props('active')).toBe(true);
+      expect(wrapper.findComponent(GlFilteredSearchTerm).props('active')).toBe(false);
     });
 
     it('does not destroy last token', async () => {
@@ -580,22 +670,26 @@ describe('Filtered search integration tests', () => {
     expect(wrapper.findAllComponents(GlFilteredSearchTerm).at(1).find('input').exists()).toBe(true);
   });
 
-  it('correctly switches focus on token destroy', async () => {
-    mountComponent({ value: ['one t three'] });
+  it('activates previous token when backspacing on empty search term', async () => {
+    mountComponent({ value: ['zero one two'] });
     await nextTick();
 
     activate(1);
 
     await nextTick();
 
-    // Unfortunately backspace is not working in JSDOM
-    wrapper.findAllComponents(GlFilteredSearchTerm).at(1).vm.$emit('destroy');
+    // Make sure we have the expected search term
+    const inputWrapper = wrapper.find('input');
+    expect(inputWrapper.element.value).toBe('one');
 
-    await nextTick();
+    // Mimic backspace behavior for jsdom
+    await inputWrapper.setValue('');
+    await inputWrapper.trigger('keydown', { key: 'Backspace' });
 
-    expect(document.activeElement).toBe(
-      wrapper.findComponent(GlFilteredSearchTerm).find('input').element
-    );
+    // Make sure the previous token/search term is now active
+    const input = wrapper.find('input').element;
+    expect(input.value).toBe('zero');
+    expect(document.activeElement).toBe(input);
   });
 
   it('clicking clear button clears component input', async () => {

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

@@ -36,6 +36,7 @@ const fakeLabels = [
 ];
 
 const UserToken = {
+  name: 'UserToken',
   components: { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon, GlAvatar },
   props: ['value', 'active'],
   inheritAttrs: false,
@@ -112,6 +113,7 @@ const UserToken = {
 };
 
 const MilestoneToken = {
+  name: 'MilestoneToken',
   components: { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon },
   props: ['value', 'active'],
   inheritAttrs: false,
@@ -172,6 +174,7 @@ const MilestoneToken = {
 };
 
 const LabelToken = {
+  name: 'LabelToken',
   components: { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon, GlToken },
   props: ['value', 'active'],
   inheritAttrs: false,

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

@@ -9,6 +9,7 @@ import GlFilteredSearchTerm from './filtered_search_term.vue';
 import {
   isEmptyTerm,
   TERM_TOKEN_TYPE,
+  INTENT_ACTIVATE_PREVIOUS,
   normalizeTokens,
   denormalizeTokens,
   needDenormalization,
@@ -173,8 +174,8 @@ export default {
       return this.getTokenEntry(type)?.token || GlFilteredSearchTerm;
     },
 
-    activate(token) {
-      this.activeTokenIdx = token;
+    activate(idx) {
+      this.activeTokenIdx = idx;
     },
 
     alignSuggestions(ref) {
@@ -201,15 +202,29 @@ export default {
       this.activeTokenIdx = null;
     },
 
-    destroyToken(idx) {
+    destroyToken(idx, { intent } = {}) {
       if (this.tokens.length === 1) {
         return;
       }
 
       this.tokens.splice(idx, 1);
-      if (idx !== 0) {
-        this.activeTokenIdx = idx - 1;
+
+      // First, attempt to honor the user's activation intent behind the
+      // destruction of the token, if any. Otherwise, try to maintain the
+      // active state for the token that was active at the time. If that's not
+      // possible, make sure no token is active.
+      if (intent === INTENT_ACTIVATE_PREVIOUS) {
+        // If there is a previous token, activate it; else, deactivate all tokens
+        this.activeTokenIdx = idx > 0 ? idx - 1 : null;
+      } else if (idx < this.activeTokenIdx) {
+        // Preserve the active token's active status (it shifted down one index)
+        this.activeTokenIdx -= 1;
+      } else if (idx === this.activeTokenIdx) {
+        // User destroyed the active token; don't activate another one.
+        this.activeTokenIdx = null;
       }
+      // Do nothing if there was no active token, or if idx > this.activeTokenIdx,
+      // to preserve the active state of the remaining tokens.
     },
 
     replaceToken(idx, token) {
@@ -297,7 +312,7 @@ export default {
             }"
             @activate="activate(idx)"
             @deactivate="deactivate(token)"
-            @destroy="destroyToken(idx)"
+            @destroy="destroyToken(idx, $event)"
             @replace="replaceToken(idx, $event)"
             @complete="completeToken"
             @submit="submit"

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

@@ -2,6 +2,7 @@ import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import FilteredSearchTerm from './filtered_search_term.vue';
+import { INTENT_ACTIVATE_PREVIOUS } from './filtered_search_utils';
 
 const availableTokens = [
   { type: 'foo', title: 'test1-foo', token: 'stub', icon: 'eye' },
@@ -59,23 +60,27 @@ describe('Filtered search term', () => {
   });
 
   it.each`
-    originalEvent   | emittedEvent
-    ${'activate'}   | ${'activate'}
-    ${'deactivate'} | ${'deactivate'}
-    ${'split'}      | ${'split'}
-    ${'submit'}     | ${'submit'}
-    ${'complete'}   | ${'replace'}
-    ${'backspace'}  | ${'destroy'}
+    originalEvent   | emittedEvent    | payload
+    ${'activate'}   | ${'activate'}   | ${undefined}
+    ${'deactivate'} | ${'deactivate'} | ${undefined}
+    ${'split'}      | ${'split'}      | ${undefined}
+    ${'submit'}     | ${'submit'}     | ${undefined}
+    ${'complete'}   | ${'replace'}    | ${{ type: undefined }}
+    ${'backspace'}  | ${'destroy'}    | ${{ intent: INTENT_ACTIVATE_PREVIOUS }}
   `(
     'emits $emittedEvent when token segment emits $originalEvent',
-    async ({ originalEvent, emittedEvent }) => {
+    async ({ originalEvent, emittedEvent, payload }) => {
       createComponent({ active: true, value: { data: 'something' } });
 
       findTokenSegmentComponent().vm.$emit(originalEvent);
 
       await nextTick();
 
-      expect(wrapper.emitted()[emittedEvent]).toHaveLength(1);
+      expect(wrapper.emitted(emittedEvent)).toHaveLength(1);
+
+      if (payload !== undefined) {
+        expect(wrapper.emitted(emittedEvent)[0][0]).toEqual(payload);
+      }
     }
   );
 

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

@@ -1,6 +1,7 @@
 <script>
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';
+import { INTENT_ACTIVATE_PREVIOUS } from './filtered_search_utils';
 
 export default {
   components: {
@@ -59,6 +60,11 @@ export default {
       },
     },
   },
+  methods: {
+    onBackspace() {
+      this.$emit('destroy', { intent: INTENT_ACTIVATE_PREVIOUS });
+    },
+  },
 };
 </script>
 
@@ -75,7 +81,7 @@ export default {
       @activate="$emit('activate')"
       @deactivate="$emit('deactivate')"
       @complete="$emit('replace', { type: $event })"
-      @backspace="$emit('destroy')"
+      @backspace="onBackspace"
       @submit="$emit('submit')"
       @split="$emit('split', $event)"
     >

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

@@ -2,6 +2,8 @@ import { first, last, isString } from 'lodash';
 
 export const TERM_TOKEN_TYPE = 'filtered-search-term';
 
+export const INTENT_ACTIVATE_PREVIOUS = 'intent-activate-previous';
+
 export function isEmptyTerm(token) {
   return token.type === TERM_TOKEN_TYPE && token.value.data.trim() === '';
 }

package/dist/components/base/datepicker/examples/datepicker.basic.example.js

@@ -1,48 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      value: null
-    };
-  }
-
-};
-
-/* 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-datepicker')};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/datepicker/examples/datepicker.custom_input.example.js

@@ -1,48 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      value: null
-    };
-  }
-
-};
-
-/* 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-datepicker',[_c('input',{staticClass:"gl-form-input gl-datepicker-input form-control",attrs:{"id":"datepicker-custom-input-example","name":"date","type":"text","aria-label":"Select a date","placeholder":"Custom placeholder"}})])};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/datepicker/examples/datepicker.disabled.example.js

@@ -1,48 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      value: null
-    };
-  }
-
-};
-
-/* 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-datepicker',{attrs:{"disabled":""}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/datepicker/examples/datepicker.open_on_focus.example.js

@@ -1,48 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      value: null
-    };
-  }
-
-};
-
-/* 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-datepicker',{attrs:{"target":null}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/datepicker/examples/datepicker.with_clear_button.example.js

@@ -1,48 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      value: new Date(2020, 0, 15)
-    };
-  }
-
-};
-
-/* 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-datepicker',{attrs:{"show-clear-button":""},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v;},expression:"value"}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/datepicker/examples/index.js

@@ -1,32 +0,0 @@
-import DatepickerBasicExample from './datepicker.basic.example';
-import DatepickerCustomInputExample from './datepicker.custom_input.example';
-import DatepickerDisabledExample from './datepicker.disabled.example';
-import DatepickerOpenOnFocusExample from './datepicker.open_on_focus.example';
-import DatepickerWithClearButtonExample from './datepicker.with_clear_button.example';
-
-var index = [{
-  name: 'Datepicker',
-  items: [{
-    id: 'basic-date-picker',
-    name: 'Basic date picker',
-    component: DatepickerBasicExample
-  }, {
-    id: 'custom-input-date-picker',
-    name: 'With custom input',
-    component: DatepickerCustomInputExample
-  }, {
-    id: 'open-on-focus-date-picker',
-    name: 'Open on focus',
-    component: DatepickerOpenOnFocusExample
-  }, {
-    id: 'with-clear-button-date-picker',
-    name: 'With clear button',
-    component: DatepickerWithClearButtonExample
-  }, {
-    id: 'disabled-date-picker',
-    name: 'Disabled',
-    component: DatepickerDisabledExample
-  }]
-}];
-
-export default index;

package/src/components/base/datepicker/examples/datepicker.basic.example.vue

@@ -1,12 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      value: null,
-    };
-  },
-};
-</script>
-<template>
-  <gl-datepicker />
-</template>

package/src/components/base/datepicker/examples/datepicker.custom_input.example.vue

@@ -1,21 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      value: null,
-    };
-  },
-};
-</script>
-<template>
-  <gl-datepicker>
-    <input
-      id="datepicker-custom-input-example"
-      class="gl-form-input gl-datepicker-input form-control"
-      name="date"
-      type="text"
-      aria-label="Select a date"
-      placeholder="Custom placeholder"
-    />
-  </gl-datepicker>
-</template>

package/src/components/base/datepicker/examples/datepicker.disabled.example.vue

@@ -1,12 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      value: null,
-    };
-  },
-};
-</script>
-<template>
-  <gl-datepicker disabled />
-</template>

package/src/components/base/datepicker/examples/datepicker.open_on_focus.example.vue

@@ -1,12 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      value: null,
-    };
-  },
-};
-</script>
-<template>
-  <gl-datepicker :target="null" />
-</template>

package/src/components/base/datepicker/examples/datepicker.with_clear_button.example.vue

@@ -1,12 +0,0 @@
-<script>
-export default {
-  data() {
-    return {
-      value: new Date(2020, 0, 15),
-    };
-  },
-};
-</script>
-<template>
-  <gl-datepicker v-model="value" show-clear-button />
-</template>