Commit 049d2608 authored by Brandon Labuschagne's avatar Brandon Labuschagne Committed by Fatih Acet

Add stage dropdown filter for Cycle Analytics scatter chart

parent 58f4955e
<script>
import { sprintf, s__, n__ } from '~/locale';
import $ from 'jquery';
import _ from 'underscore';
import Icon from '~/vue_shared/components/icon.vue';
import { GlButton } from '@gitlab/ui';
import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
export default {
name: 'StageDropdownFilter',
components: {
Icon,
GlButton,
},
props: {
stages: {
type: Array,
required: true,
},
label: {
type: String,
required: false,
default: s__('CycleAnalytics|stage dropdown'),
},
},
data() {
return {
selectedStages: [],
};
},
computed: {
selectedStagesLabel() {
return this.selectedStages.length
? sprintf(
n__(
'CycleAnalytics|%{stageName}',
'CycleAnalytics|%d stages selected',
this.selectedStages.length,
),
{ stageName: capitalizeFirstCharacter(this.selectedStages[0].name) },
)
: s__('CycleAnalytics|All stages');
},
},
mounted() {
$(this.$refs.stagesDropdown).glDropdown({
selectable: true,
multiSelect: true,
clicked: this.onClick.bind(this),
data: this.formatData.bind(this),
renderRow: group => this.rowTemplate(group),
text: stage => stage.name,
});
},
methods: {
setSelectedStages(selectedObj, isMarking) {
this.selectedStages = isMarking
? this.selectedStages.concat([selectedObj])
: this.selectedStages.filter(stage => stage.name !== selectedObj.name);
},
onClick({ selectedObj, e, isMarking }) {
e.preventDefault();
this.setSelectedStages(selectedObj, isMarking);
this.$emit('selected', this.selectedStages);
},
formatData(term, callback) {
callback(this.stages);
},
rowTemplate(stage) {
return `
<li>
<a href='#' class='dropdown-menu-link'>
${_.escape(capitalizeFirstCharacter(stage.name))}
</a>
</li>
`;
},
},
};
</script>
<template>
<div>
<div ref="stagesDropdown" class="dropdown dropdown-stages">
<gl-button
class="dropdown-menu-toggle wide shadow-none bg-white"
type="button"
data-toggle="dropdown"
aria-expanded="false"
:aria-label="label"
>
{{ selectedStagesLabel }}
<icon name="chevron-down" />
</gl-button>
<div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
<div class="dropdown-title text-left">{{ s__('CycleAnalytics|Stages') }}</div>
<div class="dropdown-content"></div>
</div>
</div>
</div>
</template>
import { shallowMount } from '@vue/test-utils';
import $ from 'jquery';
import 'bootstrap';
import '~/gl_dropdown';
import StageDropdownFilter from 'ee/analytics/cycle_analytics/components/stage_dropdown_filter.vue';
jest.mock('~/api', () => ({
groupProjects: jest.fn(),
}));
const stages = [
{
name: 'issue',
},
{
name: 'plan',
},
{
name: 'code',
},
];
describe('StageDropdownFilter component', () => {
let wrapper;
const createComponent = () => {
wrapper = shallowMount(StageDropdownFilter, {
sync: false,
propsData: {
stages,
},
});
};
afterEach(() => {
wrapper.destroy();
});
beforeEach(() => {
createComponent({ multiSelect: false });
});
const findDropdown = () => wrapper.find('.dropdown');
const openDropdown = () => {
$(findDropdown().element)
.parent()
.trigger('shown.bs.dropdown');
};
const findDropdownItems = () => findDropdown().findAll('a');
describe('on stage click', () => {
beforeEach(() => {
openDropdown();
return wrapper.vm.$nextTick();
});
it('should add to selection when new stage is clicked', () => {
findDropdownItems()
.at(0)
.trigger('click');
findDropdownItems()
.at(1)
.trigger('click');
expect(wrapper.emittedByOrder()).toEqual([
{
name: 'selected',
args: [[stages[0]]],
},
{
name: 'selected',
args: [[stages[0], stages[1]]],
},
]);
});
it('should remove from selection when clicked again', () => {
const item = findDropdownItems().at(0);
item.trigger('click');
item.trigger('click');
expect(wrapper.emittedByOrder()).toEqual([
{
name: 'selected',
args: [[stages[0]]],
},
{
name: 'selected',
args: [[]],
},
]);
});
});
});
......@@ -4368,12 +4368,26 @@ msgid_plural "CycleAnalytics|%d projects selected"
msgstr[0] ""
msgstr[1] ""
msgid "CycleAnalytics|%{stageName}"
msgid_plural "CycleAnalytics|%d stages selected"
msgstr[0] ""
msgstr[1] ""
msgid "CycleAnalytics|All stages"
msgstr ""
msgid "CycleAnalytics|Stages"
msgstr ""
msgid "CycleAnalytics|group dropdown filter"
msgstr ""
msgid "CycleAnalytics|project dropdown filter"
msgstr ""
msgid "CycleAnalytics|stage dropdown"
msgstr ""
msgid "DNS"
msgstr ""
......
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