Commit d758979a authored by Ezekiel Kigbo's avatar Ezekiel Kigbo

Remove old date dropdown

Removes the old date range dropdown for
selecting a single value.

Remove unused dropdown imports
parent 16fdd83b
......@@ -36,12 +36,6 @@ export default () => {
'stage-review-component': stageReviewComponent,
'stage-staging-component': stageStagingComponent,
'stage-production-component': stageComponent,
GroupsDropdownFilter: () =>
import('ee_component/analytics/shared/components/groups_dropdown_filter.vue'),
ProjectsDropdownFilter: () =>
import('ee_component/analytics/shared/components/projects_dropdown_filter.vue'),
DateRangeDropdown: () =>
import('ee_component/analytics/shared/components/date_range_dropdown.vue'),
'stage-nav-item': stageNavItem,
},
data() {
......
<script>
import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
import { __, sprintf } from '~/locale';
export default {
components: {
GlDeprecatedDropdown,
GlDeprecatedDropdownItem,
},
props: {
availableDaysInPast: {
type: Array,
required: false,
default: () => [7, 14, 30, 60, 90, 120],
},
defaultSelected: {
type: Number,
required: false,
default: null,
},
},
data() {
return {
selected: this.defaultSelected,
};
},
computed: {
dropdownText() {
return this.selected && this.availableDaysInPast.indexOf(this.selected) !== -1
? this.getLabel(this.selected)
: __('Select timeframe');
},
},
methods: {
onSelect(days) {
this.selected = days;
this.$emit('selected', days);
},
getLabel(days) {
return sprintf(__('Last %{days} days'), { days });
},
},
};
</script>
<template>
<gl-deprecated-dropdown
toggle-class="dropdown-menu-toggle w-100"
menu-class="w-100 mw-100"
:text="dropdownText"
>
<gl-deprecated-dropdown-item
v-for="d in availableDaysInPast"
:key="d"
class="w-100"
@click="onSelect(d)"
>{{ getLabel(d) }}</gl-deprecated-dropdown-item
>
</gl-deprecated-dropdown>
</template>
import { shallowMount } from '@vue/test-utils';
import { GlDeprecatedDropdownItem } from '@gitlab/ui';
import DateRangeDropdown from 'ee/analytics/shared/components/date_range_dropdown.vue';
describe('DateRangeDropdown component', () => {
let wrapper;
const defaultProps = {
availableDaysInPast: [7, 14, 30],
};
function createComponent(props = {}) {
const propsData = {
...defaultProps,
...props,
};
wrapper = shallowMount(DateRangeDropdown, {
propsData,
});
}
beforeEach(() => {
createComponent();
});
const findDropdownElements = () => wrapper.findAll(GlDeprecatedDropdownItem);
const findFirstDropdownElement = () => findDropdownElements().at(0);
afterEach(() => {
wrapper.destroy();
});
it('renders 3 dropdown items', () => {
expect(findDropdownElements()).toHaveLength(3);
});
it('displays the correct label for the first dropdown item', () => {
expect(findFirstDropdownElement().text()).toBe('Last 7 days');
});
it('emits the "selected" event with the selected item value', () => {
findFirstDropdownElement().vm.$emit('click');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted().selected[0]).toEqual([7]);
});
});
it('it renders the correct dropdown text when no item is selected', () => {
expect(wrapper.vm.dropdownText).toBe('Select timeframe');
});
it('it renders the correct dropdown text when defaultSelected is set', () => {
createComponent({ defaultSelected: 14 });
expect(wrapper.vm.dropdownText).toBe('Last 14 days');
});
it('it renders the correct dropdown text when an item is selected', () => {
findFirstDropdownElement().vm.$emit('click');
expect(wrapper.vm.dropdownText).toBe('Last 7 days');
});
});
......@@ -14624,9 +14624,6 @@ msgid_plural "Last %d days"
msgstr[0] ""
msgstr[1] ""
msgid "Last %{days} days"
msgstr ""
msgid "Last 2 weeks"
msgstr ""
......@@ -22928,9 +22925,6 @@ msgstr ""
msgid "Select the environment scope for this feature flag."
msgstr ""
msgid "Select timeframe"
msgstr ""
msgid "Select timezone"
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