@gitlab/ui 60.2.0 → 61.1.0

package/src/components/base/banner/banner.vue

@@ -1,11 +1,13 @@
 <script>
 import { bannerVariants } from '../../../utils/constants';
+import CloseButton from '../../shared_components/close_button/close_button.vue';
 import GlButton from '../button/button.vue';
 import GlCard from '../card/card.vue';
 
 export default {
   name: 'GlBanner',
   components: {
+    CloseButton,
     GlButton,
     GlCard,
   },
@@ -51,6 +53,14 @@ export default {
         return bannerVariants.includes(value);
       },
     },
+    /**
+     * Dismiss button's aria-label.
+     */
+    dismissLabel: {
+      type: String,
+      required: false,
+      default: 'Dismiss',
+    },
     /**
      * Removes the border for banners embedded in content.
      */
@@ -112,14 +122,6 @@ export default {
       <!-- @slot The banner actions to display -->
       <slot name="actions"></slot>
     </div>
-    <gl-button
-      :variant="isIntroducing ? 'confirm' : 'default'"
-      category="tertiary"
-      size="small"
-      icon="close"
-      aria-label="Close banner"
-      class="gl-banner-close"
-      @click="handleClose"
-    />
+    <close-button class="gl-banner-close" :label="dismissLabel" @click="handleClose" />
   </gl-card>
 </template>

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

@@ -9,6 +9,7 @@ exports[`Filtered search term renders input with value in active mode 1`] = `
     active="true"
     class="gl-filtered-search-term-token"
     cursor-position="end"
+    is-term=""
     value="test-value"
   >
     test-value
@@ -24,6 +25,7 @@ exports[`Filtered search term renders value in inactive mode 1`] = `
   <div
     class="gl-filtered-search-term-token"
     cursor-position="end"
+    is-term=""
     value="test-value"
   >
     test-value

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

@@ -22,9 +22,11 @@ Prepare array of available token configurations with the following fields:
   It is discouraged to use this together with `unique`, as `unique` is intended for single-select.
 - `options`: (optional) an array of options which the user can pick after the
   operator has been selected. The option object can have the following
-  properties defined: `value: string`, `icon: string`, `title: string` and
-  `default: boolean`. If the `default` is omitted, the `value` of the first
-  option will be displayed as a suggestion
+  properties defined: `value: string`, `icon: string`, `title: string`,
+  `component: Object` and `default: boolean`. If `component` is provided, it is
+  is used to render the option in the suggestions list.
+- `optionComponent`: (optional) A component used to render the token option
+  itself when adding a new token or replacing an existing one
 - any additional fields required to configure your component
 
 Each token for filtered search is a Vue component with the following props:

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

@@ -304,8 +304,8 @@ const tokens = [
     unique: true,
     token: GlFilteredSearchToken,
     options: [
-      { icon: 'eye-slash', value: 'Yes', title: 'Yes' },
-      { icon: 'eye', value: 'No', title: 'No' },
+      { icon: 'eye-slash', value: 'true', title: 'Yes' },
+      { icon: 'eye', value: 'false', title: 'No' },
     ],
   },
 ];
@@ -410,8 +410,8 @@ export const WithFriendlyText = () => ({
           unique: true,
           token: GlFilteredSearchToken,
           options: [
-            { icon: 'eye-slash', value: 'Yes', title: 'Yes' },
-            { icon: 'eye', value: 'No', title: 'No' },
+            { icon: 'eye-slash', value: 'true', title: 'Yes' },
+            { icon: 'eye', value: 'false', title: 'No' },
           ],
         },
       ],
@@ -480,6 +480,9 @@ export const WithMultiSelect = () => {
       isLastUser(index) {
         return index === this.selectedUsers.length - 1;
       },
+      key(user, index) {
+        return `${user.id}-${index}`;
+      },
     },
     watch: {
       // eslint-disable-next-line func-names
@@ -514,7 +517,7 @@ export const WithMultiSelect = () => {
       </template>
     </template>
     <template #suggestions>
-      <gl-filtered-search-suggestion :key="user.id" v-for="user in filteredUsers" :value="user.username">
+      <gl-filtered-search-suggestion :key="key(user, index)" v-for="(user, index) in filteredUsers" :value="user.username">
         <div class="gl-display-flex gl-align-items-center">
           <gl-icon
             v-if="config.multiSelect"

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

@@ -345,9 +345,6 @@ export default {
        */
       this.$emit('submit', normalizeTokens(cloneDeep(this.tokens)));
     },
-    hasTitleSlot() {
-      return Boolean(this.$scopedSlots.title);
-    },
   },
 };
 </script>
@@ -403,14 +400,7 @@ export default {
           @split="createTokens(idx, $event)"
           @previous="activatePreviousToken"
           @next="activateNextToken"
-        >
-          <template
-            v-if="hasTitleSlot() && getTokenComponent(token.type).name === 'GlFilteredSearchTerm'"
-            #title="title"
-          >
-            <slot name="title" v-bind="title"></slot>
-          </template>
-        </component>
+        />
       </div>
       <portal-target
         ref="menu"

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

@@ -3,7 +3,13 @@ suggestions in a top-level suggestion list:
 
 ```html
 <gl-filtered-search-suggestion-list>
-  <gl-filtered-search-suggestion value="foo">Example suggestion</gl-filtered-search-suggestion>
-  <gl-filtered-search-suggestion value="bar">Example suggestion 2</gl-filtered-search-suggestion>
+  <gl-filtered-search-suggestion value="foo" key="foo-0">Example suggestion</gl-filtered-search-suggestion>
+  <gl-filtered-search-suggestion value="bar" key="bar-1">Example suggestion 2</gl-filtered-search-suggestion>
 </gl-filtered-search-suggestion-list>
 ```
+
+> NOTE: Provide a `key` to suggestions of the form `${value}-${index}` (or
+> similar). While using the index in keys is usually frowned upon for
+> performance reasons, the current implementation relies on all suggestions
+> getting destroyed and recreated to keep rendering order in sync with
+> <kbd>Up</kbd>/<kbd>Down</kbd> keyboard interaction.

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

@@ -53,6 +53,7 @@ export default {
     class="gl-filtered-search-suggestion"
     data-testid="filtered-search-suggestion"
     :class="{ 'gl-filtered-search-suggestion-active': isActive }"
+    tabindex="-1"
     v-bind="$attrs"
     href="#"
     @mousedown.native.prevent="emitValue"

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

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { shallowMount, mount } from '@vue/test-utils';
 import FilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import FilteredSearchSuggestionList from './filtered_search_suggestion_list.vue';
@@ -32,40 +33,42 @@ describe('Filtered search suggestion list component', () => {
         expect(wrapper.vm.getValue()).toBe(null);
       });
 
-      it('selects first item on nextItem call', () => {
+      it('selects first item on nextItem call', async () => {
         wrapper.vm.nextItem();
-        return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.vm.getValue()).toBe(stubs[0].value);
-        });
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe(stubs[0].value);
       });
 
-      it('deselects first item on prevItem call', () => {
+      it('deselects first item on prevItem call', async () => {
         wrapper.vm.nextItem();
         wrapper.vm.prevItem();
-        return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.vm.getValue()).toBe(null);
-        });
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe(null);
       });
 
-      it('deselects last item on nextItem call', () => {
+      it('deselects last item on nextItem call', async () => {
         stubs.forEach(() => wrapper.vm.nextItem());
         wrapper.vm.nextItem();
-        return wrapper.vm.$nextTick().then(() => {
-          expect(wrapper.vm.getValue()).toBe(null);
-        });
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe(null);
       });
 
-      it('remove selection if suggestion is unregistered', () => {
+      it('remove selection if suggestion is unregistered', async () => {
         wrapper.vm.nextItem();
-        return wrapper.vm
-          .$nextTick()
-          .then(() => {
-            wrapper.vm.unregister(stubs[0]);
-            return wrapper.vm.$nextTick();
-          })
-          .then(() => {
-            expect(wrapper.vm.getValue()).toBe(null);
-          });
+        await nextTick();
+        wrapper.vm.unregister(stubs[0]);
+        await nextTick();
+        expect(wrapper.vm.getValue()).toBe(null);
+      });
+
+      it('selects correct suggestion when item (un)registration is late', async () => {
+        // Initially stub2 is at index 1.
+        await wrapper.setProps({ initialValue: 'stub2' });
+        // Remove item at index 0, so stub2 moves to index 0
+        wrapper.vm.unregister(stubs[0]);
+        await nextTick();
+        // stub2 should still be selected
+        expect(wrapper.vm.getValue()).toBe('stub2');
       });
     });
   });
@@ -105,85 +108,79 @@ describe('Filtered search suggestion list component', () => {
       });
     });
 
-    it('selects first suggestion', () => {
+    it('selects first suggestion', async () => {
       wrapper.vm.nextItem();
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.getValue()).toBe('One');
-      });
+      await nextTick();
+      expect(wrapper.vm.getValue()).toBe('One');
     });
 
-    it('selects second suggestion', () => {
+    it('selects second suggestion', async () => {
       wrapper.vm.nextItem();
       wrapper.vm.nextItem();
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.getValue()).toBe('Two');
-      });
+      await nextTick();
+      expect(wrapper.vm.getValue()).toBe('Two');
     });
 
-    it('deselects first suggestion after list end', () => {
+    it('deselects first suggestion after list end', async () => {
       wrapper.vm.nextItem();
       wrapper.vm.nextItem();
       wrapper.vm.nextItem();
       wrapper.vm.nextItem();
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.getValue()).toBe(null);
-      });
+      await nextTick();
+      expect(wrapper.vm.getValue()).toBe(null);
     });
 
-    it('deselects first suggestion after list start', () => {
+    it('deselects first suggestion after list start', async () => {
       wrapper.vm.nextItem();
       wrapper.vm.prevItem();
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.getValue()).toBe(null);
-      });
+      await nextTick();
+      expect(wrapper.vm.getValue()).toBe(null);
     });
 
-    it('selects last suggestion in circle when selecting previous item', () => {
+    it('selects last suggestion in circle when selecting previous item', async () => {
       wrapper.vm.nextItem();
       wrapper.vm.prevItem();
       wrapper.vm.prevItem();
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.getValue()).toBe(false);
-      });
+      await nextTick();
+      expect(wrapper.vm.getValue()).toBe(false);
     });
 
-    it('selects first suggestion in circle when selecting next item', () => {
+    it('selects first suggestion in circle when selecting next item', async () => {
       wrapper.vm.nextItem();
       wrapper.vm.nextItem();
       wrapper.vm.nextItem();
       wrapper.vm.nextItem();
       wrapper.vm.nextItem();
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.vm.getValue()).toBe('One');
-      });
+      await nextTick();
+      expect(wrapper.vm.getValue()).toBe('One');
     });
 
-    it('highlights suggestion if initial-value is provided', () => {
-      wrapper.setProps({ initialValue: 'Two' });
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('Two');
-      });
+    it('highlights suggestion if initial-value is provided', async () => {
+      await wrapper.setProps({ initialValue: 'Two' });
+      expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('Two');
     });
 
     it('highlights suggestion if initial-value is provided, regardless of case sensitivity', async () => {
-      wrapper.setProps({ initialValue: 'two' });
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('Two');
-      });
+      await wrapper.setProps({ initialValue: 'two' });
+      expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('Two');
     });
 
     it('highlights suggestion if initial-value is provided, regardless of falsiness', async () => {
-      wrapper.setProps({ initialValue: false });
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('Three');
-      });
+      await wrapper.setProps({ initialValue: false });
+      expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('Three');
     });
 
-    it('does not highlight anything if initial-value matches nothing', () => {
-      wrapper.setProps({ initialValue: 'missing' });
-      return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find('.gl-filtered-search-suggestion-active').exists()).toBe(false);
-      });
+    it('highlights first suggestion if initial-value is provided, deselected then selected', async () => {
+      await wrapper.setProps({ initialValue: 'One' });
+      wrapper.vm.prevItem();
+      wrapper.vm.nextItem();
+      await nextTick();
+      expect(wrapper.find('.gl-filtered-search-suggestion-active').text()).toBe('One');
+    });
+
+    it('does not highlight anything if initial-value matches nothing', async () => {
+      await wrapper.setProps({ initialValue: 'missing' });
+      expect(wrapper.find('.gl-filtered-search-suggestion-active').exists()).toBe(false);
     });
 
     it('applies the injected suggestion-list-class to the dropdown', () => {

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

@@ -1,4 +1,9 @@
 <script>
+import { stepIndexAndWrap } from './filtered_search_utils';
+
+const DEFER_TO_INITIAL_VALUE = -1;
+const NO_ACTIVE_ITEM = -2;
+
 export default {
   name: 'GlFilteredSearchSuggestionList',
   inject: ['suggestionsListClass'],
@@ -17,18 +22,27 @@ export default {
       default: null,
     },
   },
+
   data() {
     return {
-      activeIdx: -1,
+      activeIdx: DEFER_TO_INITIAL_VALUE,
       registeredItems: [],
     };
   },
 
   computed: {
+    initialActiveIdx() {
+      return this.registeredItems.findIndex((item) =>
+        this.valuesMatch(item.value, this.initialValue)
+      );
+    },
+    initialActiveItem() {
+      return this.registeredItems[this.initialActiveIdx];
+    },
     activeItem() {
-      return this.activeIdx > -1 && this.activeIdx < this.registeredItems.length
-        ? this.registeredItems[this.activeIdx]
-        : null;
+      if (this.activeIdx === NO_ACTIVE_ITEM) return null;
+      if (this.activeIdx === DEFER_TO_INITIAL_VALUE) return this.initialActiveItem;
+      return this.registeredItems[this.activeIdx];
     },
     listClasses() {
       return [this.suggestionsListClass(), 'dropdown-menu gl-filtered-search-suggestion-list'];
@@ -36,10 +50,8 @@ export default {
   },
 
   watch: {
-    initialValue(newValue) {
-      this.activeIdx = this.registeredItems.findIndex((item) =>
-        this.valuesMatch(item.value, newValue)
-      );
+    initialValue() {
+      this.activeIdx = DEFER_TO_INITIAL_VALUE;
     },
   },
 
@@ -53,31 +65,38 @@ export default {
     },
     register(item) {
       this.registeredItems.push(item);
-      if (this.valuesMatch(item.value, this.initialValue)) {
-        this.activeIdx = this.registeredItems.length - 1;
-      }
     },
     unregister(item) {
       const idx = this.registeredItems.indexOf(item);
       if (idx !== -1) {
         this.registeredItems.splice(idx, 1);
         if (idx === this.activeIdx) {
-          this.activeIdx = -1;
+          this.activeIdx = DEFER_TO_INITIAL_VALUE;
         }
       }
     },
     nextItem() {
-      if (this.activeIdx < this.registeredItems.length) {
-        this.activeIdx += 1;
-      } else {
-        this.activeIdx = 0;
-      }
+      this.stepItem(1, this.registeredItems.length - 1);
     },
     prevItem() {
-      if (this.activeIdx >= 0) {
-        this.activeIdx -= 1;
+      this.stepItem(-1, 0);
+    },
+    stepItem(direction, endIdx) {
+      if (
+        this.activeIdx === endIdx ||
+        (this.activeIdx === DEFER_TO_INITIAL_VALUE && this.initialActiveIdx === endIdx)
+      ) {
+        // The user wants to move past the end of the list, so ensure nothing is selected.
+        this.activeIdx = NO_ACTIVE_ITEM;
       } else {
-        this.activeIdx = this.registeredItems.length - 1;
+        const index =
+          this.activeIdx === DEFER_TO_INITIAL_VALUE
+            ? // Currently active item is set by initialValue (i.e., text input matching),
+              // so step relative to that.
+              this.initialActiveIdx
+            : // Otherwise, step relative to the explicitly (via up/down arrows) activated item.
+              this.activeIdx;
+        this.activeIdx = stepIndexAndWrap(index, direction, this.registeredItems.length);
       }
     },
     getValue() {

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

@@ -1,6 +1,5 @@
 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';
 
@@ -23,39 +22,21 @@ describe('Filtered search term', () => {
   const segmentStub = {
     name: 'gl-filtered-search-token-segment-stub',
     template: '<div><slot name="view"></slot><slot name="suggestions"></slot></div>',
-    props: ['searchInputAttributes', 'isLastToken', 'currentValue', 'viewOnly'],
+    props: ['searchInputAttributes', 'isLastToken', 'currentValue', 'viewOnly', 'options'],
   };
 
-  const createComponent = (props, options = {}) => {
+  const createComponent = (props) => {
     wrapper = shallowMount(FilteredSearchTerm, {
       propsData: { ...defaultProps, ...props },
       stubs: {
         'gl-filtered-search-token-segment': segmentStub,
       },
-      ...options,
     });
   };
 
   const findSearchInput = () => wrapper.find('input');
   const findTokenSegmentComponent = () => wrapper.findComponent(segmentStub);
 
-  it('renders title slot', async () => {
-    createComponent(
-      { availableTokens, active: true, value: { data: 'test1' } },
-      {
-        scopedSlots: {
-          title: '<div slot-scope="{ value }">New {{value}}</div>',
-        },
-      }
-    );
-
-    await nextTick();
-
-    expect(wrapper.findAllComponents(GlFilteredSearchSuggestion).at(0).text()).toBe(
-      'New test1-foo'
-    );
-  });
-
   it('renders value in inactive mode', () => {
     createComponent({ value: { data: 'test-value' } });
     expect(wrapper.html()).toMatchSnapshot();
@@ -76,7 +57,7 @@ describe('Filtered search term', () => {
 
     await nextTick();
 
-    expect(wrapper.findAllComponents(GlFilteredSearchSuggestion)).toHaveLength(2);
+    expect(findTokenSegmentComponent().props('options')).toHaveLength(2);
   });
 
   it.each`
@@ -120,12 +101,14 @@ describe('Filtered search term', () => {
       viewOnly,
     });
 
-    expect(findTokenSegmentComponent().props()).toEqual({
-      searchInputAttributes,
-      isLastToken,
-      currentValue,
-      viewOnly,
-    });
+    expect(findTokenSegmentComponent().props()).toEqual(
+      expect.objectContaining({
+        searchInputAttributes,
+        isLastToken,
+        currentValue,
+        viewOnly,
+      })
+    );
   });
 
   it('by default sets `viewOnly` to false on `GlFilteredSearchTokenSegment`', () => {

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

@@ -1,13 +1,11 @@
 <script>
-import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';
-import { INTENT_ACTIVATE_PREVIOUS } from './filtered_search_utils';
+import { INTENT_ACTIVATE_PREVIOUS, match, tokenToOption } from './filtered_search_utils';
 
 export default {
   name: 'GlFilteredSearchTerm',
   components: {
     GlFilteredSearchTokenSegment,
-    GlFilteredSearchSuggestion,
   },
   inheritAttrs: false,
   props: {
@@ -77,9 +75,9 @@ export default {
   },
   computed: {
     suggestedTokens() {
-      return this.availableTokens.filter((item) =>
-        item.title.toLowerCase().includes(this.value.data.toLowerCase())
-      );
+      return this.availableTokens
+        .filter((token) => match(token.title, this.value.data))
+        .map(tokenToOption);
     },
     internalValue: {
       get() {
@@ -143,6 +141,7 @@ export default {
     <gl-filtered-search-token-segment
       ref="segment"
       v-model="internalValue"
+      is-term
       class="gl-filtered-search-term-token"
       :active="active"
       :cursor-position="cursorPosition"
@@ -150,6 +149,7 @@ export default {
       :is-last-token="isLastToken"
       :current-value="currentValue"
       :view-only="viewOnly"
+      :options="suggestedTokens"
       @activate="$emit('activate')"
       @deactivate="$emit('deactivate')"
       @complete="$emit('replace', { type: $event })"
@@ -159,17 +159,6 @@ export default {
       @previous="$emit('previous')"
       @next="$emit('next')"
     >
-      <template #suggestions>
-        <gl-filtered-search-suggestion
-          v-for="(item, idx) in suggestedTokens"
-          :key="idx"
-          :value="item.type"
-          :icon-name="item.icon"
-        >
-          <slot name="title" v-bind="{ value: item.title }"> {{ item.title }} </slot>
-        </gl-filtered-search-suggestion>
-      </template>
-
       <template #view>
         <input
           v-if="placeholder"

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

@@ -33,10 +33,9 @@ describe('Filtered search token', () => {
     cursorPosition: 'end',
   };
 
-  const createComponent = (props, options = {}) => {
+  const createComponent = (props) => {
     wrapper = shallowMount(GlFilteredSearchToken, {
       propsData: { ...defaultProps, ...props },
-      ...options,
     });
   };
 
@@ -190,7 +189,7 @@ describe('Filtered search token', () => {
       config: availableTokens[0],
     });
 
-    findTitleSegment().vm.$emit('complete', availableTokens[1].title);
+    findTitleSegment().vm.$emit('complete', availableTokens[1].type);
 
     expect(wrapper.emitted('replace')).toHaveLength(1);
     expect(wrapper.emitted().replace[0][0].value).toStrictEqual(originalValue);
@@ -204,7 +203,7 @@ describe('Filtered search token', () => {
       config: availableTokens[0],
     });
 
-    findTitleSegment().vm.$emit('complete', availableTokens[2].title);
+    findTitleSegment().vm.$emit('complete', availableTokens[2].type);
 
     expect(wrapper.emitted('replace')).toHaveLength(1);
     expect(wrapper.emitted().replace[0][0].value).toStrictEqual({ data: '' });
@@ -373,22 +372,4 @@ describe('Filtered search token', () => {
       }
     );
   });
-
-  it('renders title options passed via slot', async () => {
-    createComponent(
-      {},
-      {
-        slots: {
-          'title-option': '<div>new title</div>',
-        },
-        stubs: {
-          GlFilteredSearchTokenSegment: {
-            template: `<div><slot name="option" v-bind='{ option: { value: "default title"} }'></slot></div>`,
-          },
-        },
-      }
-    );
-
-    expect(findTitleSegment().text()).toBe('new title');
-  });
 });