Merge branch 'mw-analytics-date-range-dropdown' into 'master'

Add date range dropdown for Analytics

See merge request gitlab-org/gitlab-ee!14681

ee/app/assets/javascripts/analytics/shared/components/date_range_dropdown.vue

+<script>
+import { __, sprintf } from '~/locale';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+  },
+  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-dropdown
+    toggle-class="dropdown-menu-toggle w-100"
+    menu-class="w-100 mw-100"
+    :text="dropdownText"
+  >
+    <gl-dropdown-item
+      v-for="d in availableDaysInPast"
+      :key="d"
+      class="w-100"
+      @click="onSelect(d)"
+      >{{ getLabel(d) }}</gl-dropdown-item
+    >
+  </gl-dropdown>
+</template>

ee/changelogs/unreleased/mw-analytics-date-range-dropdown.yml

+---
+title: Add date range dropdown for Analytics
+merge_request: 14681
+author:
+type: added

ee/spec/frontend/analytics/shared/components/date_range_dropdown_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlDropdownItem } 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(GlDropdownItem);
+  const findFirstDropdownElement = () => findDropdownElements().at(0);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders 3 dropdown items', () => {
+    expect(findDropdownElements().length).toBe(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');
+    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');
+  });
+});

locale/gitlab.pot

@@ -7971,6 +7971,9 @@ msgid_plural "Last %d days"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "Last %{days} days"
+msgstr ""
+
 msgid "Last Pipeline"
 msgstr ""
 
@@ -12353,6 +12356,9 @@ msgstr ""
 msgid "Select the custom project template source group."
 msgstr ""
 
+msgid "Select timeframe"
+msgstr ""
+
 msgid "Selected levels cannot be used by non-admin users for groups, projects or snippets. If the public level is restricted, user profiles are only visible to logged in users."
 msgstr ""