@gitlab/ui 80.13.1 → 80.14.0

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

@@ -1,199 +0,0 @@
-import PortalVue from 'portal-vue';
-import Vue from 'vue';
-import { triggerBlurEvent } from '../../../utils/play_utils';
-import GlIcon from '../icon/icon.vue';
-import GlDatepicker from '../datepicker/datepicker.vue';
-import { provide } from './common_story_options';
-import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
-import readme from './filtered_search_token.md';
-import GlFilteredSearchToken from './filtered_search_token.vue';
-
-Vue.use(PortalVue);
-
-const generateProps = ({ active = true } = {}) => ({
-  active,
-});
-
-// eslint-disable-next-line no-unused-vars
-export const Default = (args, { argTypes }) => ({
-  components: {
-    GlFilteredSearchToken,
-    GlFilteredSearchSuggestion,
-    GlIcon,
-  },
-  provide,
-  props: ['active'],
-  data() {
-    return {
-      value: { operator: '=', data: 'Yes' },
-      config: {
-        title: 'Confidential',
-      },
-    };
-  },
-  template: `
-    <div>
-      <div> {{ value }} </div>
-      <div class="gl-border-1 gl-border-solid gl-border-gray-200">
-        <gl-filtered-search-token
-          v-model="value"
-          class="gl-h-full"
-          :config="config"
-          :active="active"
-        >
-          <template #suggestions>
-            <gl-filtered-search-suggestion value="Yes"><gl-icon name="eye-slash" :size="16"/> Yes</gl-filtered-search-suggestion>
-            <gl-filtered-search-suggestion value="No"><gl-icon name="eye" :size="16"/> No</gl-filtered-search-suggestion>
-          </template>
-        </gl-filtered-search-token>
-      </div>
-      <div>
-        <portal-target name="portal" class="gl-relative" />
-      </div>
-    </div>
-  `,
-});
-Default.args = generateProps();
-Default.play = triggerBlurEvent;
-
-// eslint-disable-next-line no-unused-vars
-export const WithCustomOperatorsOptions = (args, { argTypes }) => ({
-  components: {
-    GlFilteredSearchToken,
-    GlFilteredSearchSuggestion,
-    GlIcon,
-  },
-  provide,
-  props: ['active'],
-  data() {
-    return {
-      value: { operator: '!', data: 'Yes' },
-      config: {
-        title: 'Confidential',
-        operators: [
-          { value: '^', description: 'or' },
-          { value: '!', description: 'is not', default: 'true' },
-        ],
-      },
-    };
-  },
-  template: `
-    <div>
-      <div> {{ value }} </div>
-      <div class="gl-border-1 gl-border-solid gl-border-gray-200">
-        <gl-filtered-search-token
-          v-model="value"
-          class="gl-h-full"
-          :config="config"
-          :active="active"
-        >
-          <template #suggestions>
-            <gl-filtered-search-suggestion value="Yes"><gl-icon name="eye-slash" :size="16"/> Yes</gl-filtered-search-suggestion>
-            <gl-filtered-search-suggestion value="No"><gl-icon name="eye" :size="16"/> No</gl-filtered-search-suggestion>
-          </template>
-        </gl-filtered-search-token>
-      </div>
-      <div>
-        <portal-target name="portal" class="gl-relative" />
-      </div>
-    </div>
-  `,
-});
-WithCustomOperatorsOptions.args = generateProps();
-WithCustomOperatorsOptions.play = triggerBlurEvent;
-
-// eslint-disable-next-line no-unused-vars
-export const WithStaticOptions = (args, { argTypes }) => ({
-  components: {
-    GlFilteredSearchToken,
-    GlFilteredSearchSuggestion,
-  },
-  provide,
-  props: ['active'],
-  data() {
-    return {
-      value: { operator: '=', data: 'first' },
-      config: {
-        title: 'Confidential',
-        options: [
-          { icon: 'hourglass', title: 'first', value: 'one' },
-          { title: 'second-without-icon', value: 'two' },
-          { icon: 'issues', title: 'third', value: 'three' },
-        ],
-      },
-    };
-  },
-  template: `
-    <div>
-      <div> {{ value }} </div>
-      <div class="gl-border-1 gl-border-solid gl-border-gray-200">
-        <gl-filtered-search-token
-          v-model="value"
-          class="gl-h-full"
-          :config="config"
-          :active="active"
-        />
-      </div>
-      <div>
-        <portal-target name="portal" class="gl-relative" />
-      </div>
-    </div>
-  `,
-});
-WithStaticOptions.args = generateProps();
-WithStaticOptions.play = triggerBlurEvent;
-
-// eslint-disable-next-line no-unused-vars
-export const WithDataSegmentInputAttributes = (args, { argTypes }) => ({
-  components: {
-    GlFilteredSearchToken,
-    GlDatepicker,
-  },
-  provide,
-  props: ['active'],
-  data() {
-    return {
-      value: { operator: '<', data: null },
-      config: {
-        title: 'Date',
-        operators: [
-          { value: '<', description: 'before' },
-          { value: '>', description: 'after' },
-        ],
-      },
-      dataSegmentInputAttributes: {
-        placeholder: 'YYYY-MM-DD',
-        id: 'this-id',
-      },
-    };
-  },
-  template: `
-    <div>
-      <div> {{ value }} </div>
-      <div class="gl-border-1 gl-border-solid gl-border-gray-200">
-        <gl-filtered-search-token
-          v-model="value"
-          class="gl-h-full"
-          :config="config"
-          :active="active"
-          :data-segment-input-attributes="dataSegmentInputAttributes"
-        />
-        <gl-datepicker target='#this-id' />
-      </div>
-    </div>
-  `,
-});
-WithDataSegmentInputAttributes.args = generateProps();
-WithDataSegmentInputAttributes.play = triggerBlurEvent;
-
-export default {
-  title: 'base/filtered-search/token',
-  component: GlFilteredSearchToken,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};

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

@@ -1,393 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';
-import { TERM_TOKEN_TYPE } from './filtered_search_utils';
-
-const OPTIONS = [
-  { value: '=', title: 'is' },
-  { value: '!=', title: 'is not' },
-];
-
-describe('Filtered search token segment', () => {
-  let wrapper;
-
-  const searchInputAttributes = { 'data-prop': 'foo-bar' };
-
-  beforeAll(() => {
-    if (!HTMLElement.prototype.scrollIntoView) {
-      HTMLElement.prototype.scrollIntoView = jest.fn();
-    }
-  });
-
-  afterAll(() => {
-    if (HTMLElement.prototype.scrollIntoView.mock) {
-      delete HTMLElement.prototype.scrollIntoView;
-    }
-  });
-
-  let alignSuggestionsMock;
-  let suggestionsMock;
-
-  const createComponent = ({ termsAsTokens = false, ...props } = {}) => {
-    alignSuggestionsMock = jest.fn();
-    suggestionsMock = {
-      methods: {
-        nextItem: jest.fn(),
-        prevItem: jest.fn(),
-        getValue: () => 'notnull',
-      },
-      template: `<div class="ololosha"><slot></slot></div>`,
-    };
-
-    wrapper = shallowMount(GlFilteredSearchTokenSegment, {
-      propsData: { ...props, cursorPosition: 'end' },
-      provide: {
-        portalName: 'fakePortal',
-        alignSuggestions: alignSuggestionsMock,
-        termsAsTokens: () => termsAsTokens,
-      },
-      stubs: {
-        Portal: { template: '<div><slot></slot></div>' },
-        GlFilteredSearchSuggestionList: suggestionsMock,
-      },
-    });
-  };
-
-  const createWrappedComponent = ({ value, termsAsTokens = false, ...otherProps } = {}) => {
-    // We need to create fake parent due to https://github.com/vuejs/vue-test-utils/issues/1140
-    const fakeParent = {
-      inheritAttrs: false,
-      data: () => ({ value }),
-      components: {
-        GlFilteredSearchTokenSegment,
-      },
-      provide: {
-        portalName: 'fakePortal',
-        alignSuggestions: () => {},
-      },
-      template:
-        '<gl-filtered-search-token-segment v-bind="$attrs" v-model="value" v-on="$listeners" />',
-    };
-
-    wrapper = shallowMount(fakeParent, {
-      propsData: { ...otherProps, cursorPosition: 'end' },
-      provide: {
-        termsAsTokens: () => termsAsTokens,
-      },
-      stubs: { GlFilteredSearchTokenSegment },
-    });
-  };
-
-  it('emits activate on left button click if inactive', () => {
-    createComponent({ value: '' });
-
-    wrapper.trigger('mousedown.left');
-
-    expect(wrapper.emitted('activate')).toHaveLength(1);
-  });
-
-  it('does not emit activate when view-only is true', () => {
-    createComponent({ viewOnly: true, value: '' });
-
-    wrapper.trigger('mousedown.left');
-
-    expect(wrapper.emitted('activate')).toBeUndefined();
-  });
-
-  it('ignores mousedown if active', () => {
-    createComponent({ value: '', active: true });
-
-    wrapper.trigger('mousedown');
-
-    expect(wrapper.emitted('mousedown')).toBeUndefined();
-  });
-
-  it('selects next suggestion if down arrow is pressed', () => {
-    createComponent({ active: true, options: OPTIONS, value: false });
-    wrapper.find('input').trigger('keydown', { key: 'ArrowDown' });
-
-    expect(suggestionsMock.methods.nextItem).toHaveBeenCalled();
-  });
-
-  it('selects previous suggestion if down arrow is pressed', () => {
-    createComponent({ active: true, options: OPTIONS, value: false });
-    wrapper.find('input').trigger('keydown', { key: 'ArrowUp' });
-
-    expect(suggestionsMock.methods.prevItem).toHaveBeenCalled();
-  });
-
-  it('emits submit if Enter is pressed', () => {
-    createComponent({ active: true, value: false });
-    wrapper.find('input').trigger('keydown', { key: 'Enter' });
-
-    expect(wrapper.emitted('submit')).toHaveLength(1);
-  });
-
-  it('emits complete if Escape is pressed', () => {
-    createComponent({ active: true, value: false });
-
-    wrapper.find('input').trigger('keydown', { key: 'Escape' });
-
-    expect(wrapper.emitted('complete')).toEqual([[]]);
-  });
-
-  it('emits backspace event if value is empty and Backspace is pressed', () => {
-    createComponent({ active: true, value: '' });
-    wrapper.find('input').trigger('keydown', { key: 'Backspace' });
-
-    expect(wrapper.emitted('backspace')).toHaveLength(1);
-  });
-
-  it('does not emit backspace event if value is not empty and Backspace is pressed', () => {
-    createComponent({ active: true, value: 'something' });
-    wrapper.find('input').trigger('keydown', { key: 'Backspace' });
-
-    expect(wrapper.emitted('backspace')).toBeUndefined();
-  });
-
-  it('invokes custom input handler if provided', () => {
-    const customInputKeydownHandler = jest.fn();
-    createComponent({
-      active: true,
-      value: 'something',
-      customInputKeydownHandler,
-    });
-    wrapper.find('input').trigger('keydown', { key: 's' });
-
-    expect(customInputKeydownHandler).toHaveBeenCalledWith(
-      expect.any(Event),
-      expect.objectContaining({
-        applySuggestion: expect.any(Function),
-        inputValue: 'something',
-        suggestedValue: undefined,
-      })
-    );
-  });
-
-  it('deactivates when input is blurred', () => {
-    createComponent({ active: true, value: 'something' });
-
-    wrapper.find('input').trigger('blur');
-
-    expect(wrapper.emitted('deactivate')).toHaveLength(1);
-    expect(wrapper.emitted('complete')).toBeUndefined();
-  });
-
-  it('resets value to previously selected if options are provided and input is invalid', async () => {
-    const originalValue = '!=';
-    createWrappedComponent({
-      value: originalValue,
-      title: 'Test',
-      options: OPTIONS,
-      active: true,
-    });
-
-    await wrapper.setData({ value: 'invalid' });
-    await wrapper.setProps({ active: false });
-
-    expect(wrapper.findComponent(GlFilteredSearchTokenSegment).emitted().input[0][0]).toBe(
-      originalValue
-    );
-  });
-
-  it('leaves value as-is if options are provided and isTerm=true', async () => {
-    const originalValue = '!=';
-    createWrappedComponent({
-      value: originalValue,
-      title: 'Test',
-      options: OPTIONS,
-      isTerm: true,
-      active: true,
-    });
-
-    await wrapper.setData({ value: 'invalid' });
-    await wrapper.setProps({ active: false });
-
-    expect(wrapper.findComponent(GlFilteredSearchTokenSegment).emitted().input).toBe(undefined);
-  });
-
-  describe('applySuggestion', () => {
-    it('emits original token when no spaces are present', () => {
-      createComponent({ value: '' });
-
-      const token = 'token';
-
-      wrapper.vm.applySuggestion(token);
-
-      expect(wrapper.emitted('input')[0][0]).toBe(token);
-      expect(wrapper.emitted('complete')[0][0]).toBe(token);
-    });
-
-    it('emits wrapped token when spaces are present', () => {
-      createComponent({ value: '' });
-
-      const token = 'token with spaces';
-      const formattedToken = `"${token}"`;
-
-      wrapper.vm.applySuggestion(token);
-
-      expect(wrapper.emitted('input')[0][0]).toBe(formattedToken);
-      expect(wrapper.emitted('select')[0][0]).toBe(formattedToken);
-      expect(wrapper.emitted('complete')[0][0]).toBe(formattedToken);
-    });
-
-    it('emits token as-is when spaces are present and termsAsTokens=true', () => {
-      createComponent({ value: '', termsAsTokens: true });
-
-      const token = 'token with spaces';
-
-      wrapper.vm.applySuggestion(token);
-
-      expect(wrapper.emitted('input')[0][0]).toBe(token);
-      expect(wrapper.emitted('select')[0][0]).toBe(token);
-      expect(wrapper.emitted('complete')[0][0]).toBe(token);
-    });
-
-    it('emits input value when term token suggestion is chosen and termsAsTokens=true', () => {
-      const value = `some text with 'spaces and' "quotes"`;
-      createComponent({ value, termsAsTokens: true });
-
-      wrapper.vm.applySuggestion(TERM_TOKEN_TYPE);
-
-      expect(wrapper.emitted('input')[0][0]).toBe(value);
-      expect(wrapper.emitted('select')[0][0]).toBe(TERM_TOKEN_TYPE);
-      expect(wrapper.emitted('complete')[0][0]).toBe(TERM_TOKEN_TYPE);
-    });
-
-    it('selects suggestion on press Enter', () => {
-      createComponent({ active: true, options: OPTIONS, value: false });
-      wrapper.find('input').trigger('keydown', { key: 'ArrowDown' });
-
-      wrapper.find('input').trigger('keydown', { key: 'Enter' });
-      expect(wrapper.emitted('select')).toHaveLength(1);
-    });
-
-    it('selects suggestion on press Colon', () => {
-      createComponent({ active: true, options: OPTIONS, value: false });
-      wrapper.find('input').trigger('keydown', { key: 'ArrowDown' });
-
-      wrapper.find('input').trigger('keydown', { key: ':' });
-      expect(wrapper.emitted('select')).toHaveLength(1);
-    });
-  });
-
-  describe('when multi select', () => {
-    beforeEach(() => {
-      createComponent({
-        active: true,
-        multiSelect: true,
-        value: ['alpha', 'beta'],
-      });
-    });
-
-    describe('when blurring the input field', () => {
-      it('completes selection', () => {
-        wrapper.find('input').trigger('blur');
-
-        expect(wrapper.emitted('complete')).toEqual([[]]);
-        expect(wrapper.emitted('deactivate')).toBeUndefined();
-      });
-    });
-
-    describe('when selecting suggestion from suggestions list', () => {
-      const token = 'gamma';
-
-      beforeEach(() => {
-        wrapper.vm.applySuggestion(token);
-      });
-
-      it('emits "select" event', () => {
-        expect(wrapper.emitted('select')).toEqual([[token]]);
-      });
-
-      it('does not emit "input" event, to prevent list from filtering', () => {
-        expect(wrapper.emitted('input')).toBeUndefined();
-      });
-
-      it('does not emit "complete" event, to keep the list open', () => {
-        expect(wrapper.emitted('complete')).toBeUndefined();
-      });
-    });
-  });
-
-  const currentValueNoTokens = [{ type: 'filtered-search-term', value: { data: '' } }];
-  const currentValueOneToken = [
-    { type: 'filtered-search-term', value: { data: 'one' } },
-    { type: 'filtered-search-term', value: { data: '' } },
-  ];
-
-  describe.each`
-    active   | isLastToken | currentValue
-    ${true}  | ${true}     | ${currentValueNoTokens}
-    ${true}  | ${false}    | ${currentValueNoTokens}
-    ${false} | ${true}     | ${currentValueNoTokens}
-    ${true}  | ${true}     | ${currentValueOneToken}
-    ${true}  | ${false}    | ${currentValueOneToken}
-  `(
-    'when `active` is `$active`, `isLastToken` is `$isLastToken` and `currentValue` is `$currentValue`',
-    ({ active, isLastToken, currentValue }) => {
-      beforeEach(() => {
-        createComponent({
-          value: 'something',
-          active,
-          isLastToken,
-          currentValue,
-          searchInputAttributes,
-        });
-      });
-
-      it('does not add `searchInputAttributes` prop to search token segment', () => {
-        expect(wrapper.attributes('data-prop')).toBe(undefined);
-      });
-    }
-  );
-
-  describe('when `active` is `false`, `isLastToken` is `true` and there is one or more tokens', () => {
-    beforeEach(() => {
-      createComponent({
-        value: 'something',
-        active: false,
-        isLastToken: true,
-        currentValue: currentValueOneToken,
-        searchInputAttributes,
-      });
-    });
-
-    it('adds `searchInputAttributes` prop to search token segment', () => {
-      expect(wrapper.attributes('data-prop')).toBe(searchInputAttributes['data-prop']);
-    });
-  });
-
-  describe('when input is active', () => {
-    it('adds `searchInputAttributes` prop to search token segment input', () => {
-      createComponent({ active: true, value: 'something', searchInputAttributes });
-
-      expect(wrapper.find('input').attributes('data-prop')).toBe(
-        searchInputAttributes['data-prop']
-      );
-    });
-
-    it('sets the input `readonly` atttribute when viewOnly is true', () => {
-      createWrappedComponent({ value: 'test', active: true, viewOnly: true });
-      expect(wrapper.find('input').attributes('readonly')).toBeDefined();
-    });
-
-    it('does not set the input `readonly` atttribute when viewOnly is false', () => {
-      createWrappedComponent({ value: 'test', active: true, viewOnly: false });
-      expect(wrapper.find('input').attributes('readonly')).toBeUndefined();
-    });
-
-    it.each`
-      context       | isTerm   | eventPayloads
-      ${'does'}     | ${false} | ${[['!=']]}
-      ${'does not'} | ${true}  | ${undefined}
-    `(
-      '$context revert to fallback value on deactivation when no-fallback is $isTerm',
-      async ({ isTerm, eventPayloads }) => {
-        createComponent({ value: '!=', active: true, options: OPTIONS, isTerm });
-
-        await wrapper.setProps({ value: 'foo', active: false });
-        expect(wrapper.emitted('input')).toEqual(eventPayloads);
-      }
-    );
-  });
-});

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

@@ -1,110 +0,0 @@
-import PortalVue from 'portal-vue';
-import Vue from 'vue';
-import { triggerBlurEvent } from '../../../utils/play_utils';
-import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
-import { provide } from './common_story_options';
-import readme from './filtered_search_token_segment.md';
-import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';
-
-Vue.use(PortalVue);
-
-const staticOptions = [
-  { icon: 'eye-slash', value: true, title: 'Yes' },
-  { icon: 'eye', value: false, title: 'No' },
-  {
-    icon: 'pencil',
-    value: 'custom',
-    title: 'Custom',
-    component: {
-      props: ['option'],
-      template: '<span>{{ option.title }} <b class="gl-text-red-500">component</b></span>',
-    },
-  },
-];
-
-const generateProps = ({ active = true } = {}) => ({
-  active,
-});
-
-// eslint-disable-next-line no-unused-vars
-export const Default = (args, { argTypes }) => ({
-  components: {
-    GlFilteredSearchTokenSegment,
-    GlFilteredSearchSuggestion,
-  },
-  provide,
-  props: ['active'],
-  data() {
-    return {
-      value: 'demo1',
-    };
-  },
-  template: `
-    <div>
-      <div>v-model value: {{ value }} </div>
-      <div class="gl-border-1 gl-border-solid gl-border-gray-200">
-        <gl-filtered-search-token-segment
-          v-model="value"
-          class="gl-h-full"
-          :active="active"
-        >
-          <template #suggestions>
-            <gl-filtered-search-suggestion value="demo1">Static suggestion 1</gl-filtered-search-suggestion>
-            <gl-filtered-search-suggestion value="demo2">Static suggestion 2</gl-filtered-search-suggestion>
-          </template>
-        </gl-filtered-search-token-segment>
-      </div>
-      <div>
-        <portal-target name="portal" class="gl-relative" />
-      </div>
-    </div>
-  `,
-});
-Default.args = generateProps();
-Default.play = triggerBlurEvent;
-
-// eslint-disable-next-line no-unused-vars
-export const WithStaticOptions = (args, { argTypes }) => ({
-  components: {
-    GlFilteredSearchTokenSegment,
-  },
-  provide,
-  props: ['active'],
-  data() {
-    return {
-      value: true,
-      staticOptions,
-    };
-  },
-  template: `
-    <div>
-      <div>v-model value: {{ value }} </div>
-      <div class="gl-border-1 gl-border-solid gl-border-gray-200">
-        <gl-filtered-search-token-segment
-          v-model="value"
-          class="gl-h-full"
-          :active="active"
-          :options="staticOptions"
-          option-text-field="title"
-        />
-      </div>
-      <div>
-        <portal-target name="portal" class="gl-relative" />
-      </div>
-    </div>
-  `,
-});
-WithStaticOptions.args = generateProps();
-WithStaticOptions.play = triggerBlurEvent;
-
-export default {
-  title: 'base/filtered-search/token-segment',
-  component: GlFilteredSearchTokenSegment,
-  parameters: {
-    docs: {
-      description: {
-        component: readme,
-      },
-    },
-  },
-};