Commit 35032389 authored by Illya Klymov's avatar Illya Klymov

Merge branch 'migrate-tasks-by-type' into 'master'

Migrate tasks by type dropdown divider

See merge request gitlab-org/gitlab!44652
parents 2088c0c4 ea45cf33
<script>
import Api from 'ee/api';
import { debounce } from 'lodash';
import { GlDropdown, GlDropdownItem, GlIcon, GlLoadingIcon, GlSearchBoxByType } from '@gitlab/ui';
import {
GlDropdown,
GlDropdownItem,
GlDropdownSectionHeader,
GlIcon,
GlLoadingIcon,
GlSearchBoxByType,
} from '@gitlab/ui';
import { mapGetters } from 'vuex';
import { deprecatedCreateFlash as createFlash } from '~/flash';
import { __ } from '~/locale';
......@@ -13,6 +20,7 @@ export default {
components: {
GlDropdown,
GlDropdownItem,
GlDropdownSectionHeader,
GlIcon,
GlLoadingIcon,
GlSearchBoxByType,
......@@ -120,7 +128,7 @@ export default {
};
</script>
<template>
<gl-dropdown class="gl-w-full" toggle-class="overflow-hidden" :right="right">
<gl-dropdown class="gl-w-full" toggle-class="gl-overflow-hidden" :right="right">
<template #button-content>
<slot name="label-dropdown-button">
<span v-if="selectedLabel" class="gl-new-dropdown-button-text">
......@@ -135,11 +143,10 @@ export default {
<gl-icon class="dropdown-chevron" name="chevron-down" />
</slot>
</template>
<template>
<slot name="label-dropdown-list-header">
<gl-dropdown-item :active="!selectedLabelId.length" @click.prevent="$emit('clearLabel')"
>{{ __('Select a label') }}
</gl-dropdown-item>
<gl-dropdown-section-header>{{ __('Select a label') }} </gl-dropdown-section-header>
</slot>
<div class="mb-3 px-3">
<gl-search-box-by-type v-model.trim="searchTerm" class="mb-2" />
......
<script>
import { GlDeprecatedDropdownDivider, GlSegmentedControl, GlIcon } from '@gitlab/ui';
import { GlDropdownDivider, GlSegmentedControl, GlIcon } from '@gitlab/ui';
import { s__, sprintf } from '~/locale';
import { deprecatedCreateFlash as createFlash } from '~/flash';
import { removeFlash } from '../../utils';
......@@ -15,7 +15,7 @@ export default {
name: 'TasksByTypeFilters',
components: {
GlSegmentedControl,
GlDeprecatedDropdownDivider,
GlDropdownDivider,
GlIcon,
LabelsSelector,
},
......@@ -126,7 +126,7 @@ export default {
"
/>
</div>
<gl-deprecated-dropdown-divider />
<gl-dropdown-divider />
<div class="mb-3 px-3">
<p class="font-weight-bold text-left my-2">
{{ s__('CycleAnalytics|Select labels') }}
......
......@@ -74,7 +74,7 @@ RSpec.describe 'Customizable Group Value Stream Analytics', :js do
end
end
def select_dropdown_label(field, index = 2)
def select_dropdown_label(field, index = 1)
page.find("[name=#{field}] .dropdown-menu").all('.dropdown-item')[index].click
end
......@@ -263,10 +263,10 @@ RSpec.describe 'Customizable Group Value Stream Analytics', :js do
context 'with all required fields set' do
before do
wait_for_labels(start_field)
select_dropdown_label start_field, 1
select_dropdown_label start_field, 0
wait_for_labels(end_field)
select_dropdown_label end_field, 2
select_dropdown_label end_field, 1
end
include_examples 'submits custom stage form successfully', custom_stage_with_labels_name
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Value Stream Analytics LabelsSelector with no item selected will render the label selector 1`] = `
"<gl-dropdown-stub headertext=\\"\\" text=\\"\\" category=\\"tertiary\\" variant=\\"default\\" size=\\"medium\\" toggleclass=\\"overflow-hidden\\" class=\\"gl-w-full\\">
<gl-dropdown-item-stub avatarurl=\\"\\" iconcolor=\\"\\" iconname=\\"\\" iconrightname=\\"\\" secondarytext=\\"\\" active=\\"true\\">Select a label
</gl-dropdown-item-stub>
"<gl-dropdown-stub headertext=\\"\\" text=\\"\\" category=\\"tertiary\\" variant=\\"default\\" size=\\"medium\\" toggleclass=\\"gl-overflow-hidden\\" class=\\"gl-w-full\\">
<gl-dropdown-section-header-stub>Select a label </gl-dropdown-section-header-stub>
<div class=\\"mb-3 px-3\\">
<gl-search-box-by-type-stub value=\\"\\" clearbuttontitle=\\"Clear\\" class=\\"mb-2\\"></gl-search-box-by-type-stub>
</div>
......@@ -31,9 +30,8 @@ exports[`Value Stream Analytics LabelsSelector with no item selected will render
`;
exports[`Value Stream Analytics LabelsSelector with selectedLabelId set will render the label selector 1`] = `
"<gl-dropdown-stub headertext=\\"\\" text=\\"\\" category=\\"tertiary\\" variant=\\"default\\" size=\\"medium\\" toggleclass=\\"overflow-hidden\\" class=\\"gl-w-full\\">
<gl-dropdown-item-stub avatarurl=\\"\\" iconcolor=\\"\\" iconname=\\"\\" iconrightname=\\"\\" secondarytext=\\"\\">Select a label
</gl-dropdown-item-stub>
"<gl-dropdown-stub headertext=\\"\\" text=\\"\\" category=\\"tertiary\\" variant=\\"default\\" size=\\"medium\\" toggleclass=\\"gl-overflow-hidden\\" class=\\"gl-w-full\\">
<gl-dropdown-section-header-stub>Select a label </gl-dropdown-section-header-stub>
<div class=\\"mb-3 px-3\\">
<gl-search-box-by-type-stub value=\\"\\" clearbuttontitle=\\"Clear\\" class=\\"mb-2\\"></gl-search-box-by-type-stub>
</div>
......
......@@ -264,7 +264,7 @@ describe('CustomStageForm', () => {
wrapper
.find(sel.startEventLabel)
.findAll('.dropdown-item')
.at(1) // item at index 0 is 'select a label'
.at(0)
.trigger('click');
return wrapper.vm.$nextTick();
})
......@@ -454,7 +454,7 @@ describe('CustomStageForm', () => {
wrapper
.find(sel.endEventLabel)
.findAll('.dropdown-item')
.at(2) // item at index 0 is 'select a label'
.at(1)
.trigger('click');
return wrapper.vm.$nextTick();
......
......@@ -2,6 +2,7 @@ import Vuex from 'vuex';
import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import { GlDropdownSectionHeader } from '@gitlab/ui';
import waitForPromises from 'helpers/wait_for_promises';
import createStore from 'ee/analytics/cycle_analytics/store';
import * as getters from 'ee/analytics/cycle_analytics/store/getters';
......@@ -70,10 +71,10 @@ describe('Value Stream Analytics LabelsSelector', () => {
});
it('will render with the default option selected', () => {
const activeItem = findActiveItem(wrapper);
const sectionHeader = wrapper.find(GlDropdownSectionHeader);
expect(activeItem.exists()).toBe(true);
expect(activeItem.text()).toEqual('Select a label');
expect(sectionHeader.exists()).toBe(true);
expect(sectionHeader.text()).toEqual('Select a label');
});
describe('with a failed request', () => {
......@@ -102,7 +103,7 @@ describe('Value Stream Analytics LabelsSelector', () => {
it('will emit the "selectLabel" event', () => {
expect(wrapper.emitted('selectLabel')).toBeUndefined();
const elem = wrapper.findAll('.dropdown-item').at(2);
const elem = wrapper.findAll('.dropdown-item').at(1);
elem.trigger('click');
return wrapper.vm.$nextTick().then(() => {
......@@ -110,17 +111,6 @@ describe('Value Stream Analytics LabelsSelector', () => {
expect(wrapper.emitted('selectLabel')[0]).toContain(groupLabels[1].id);
});
});
it('will emit the "clearLabel" event if it is the default item', () => {
expect(wrapper.emitted('clearLabel')).toBeUndefined();
const elem = wrapper.findAll('.dropdown-item').at(0);
elem.trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted('clearLabel').length > 0).toBe(true);
});
});
});
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment