Merge branch '119111-set-a-limit-on-the-date-range-selection-for-analytics' into 'master'

Migrate GlDaterangePicker to DateRange within Cycle Analytics

See merge request gitlab-org/gitlab!22954

ee/app/assets/javascripts/analytics/cycle_analytics/components/base.vue

 <script>
-import { GlEmptyState, GlDaterangePicker, GlLoadingIcon } from '@gitlab/ui';
+import { GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { getDateInPast } from '~/lib/utils/datetime_utility';
 import { featureAccessLevel } from '~/pages/projects/shared/permissions/constants';
@@ -9,6 +9,7 @@ import GroupsDropdownFilter from '../../shared/components/groups_dropdown_filter
 import ProjectsDropdownFilter from '../../shared/components/projects_dropdown_filter.vue';
 import Scatterplot from '../../shared/components/scatterplot.vue';
 import { LAST_ACTIVITY_AT, dateFormats } from '../../shared/constants';
+import DateRange from '../../shared/components/daterange.vue';
 import StageDropdownFilter from './stage_dropdown_filter.vue';
 import SummaryTable from './summary_table.vue';
 import StageTable from './stage_table.vue';
@@ -17,13 +18,13 @@ import TasksByTypeChart from './tasks_by_type_chart.vue';
 export default {
   name: 'CycleAnalytics',
   components: {
+    DateRange,
     GlLoadingIcon,
     GlEmptyState,
     GroupsDropdownFilter,
     ProjectsDropdownFilter,
     SummaryTable,
     StageTable,
-    GlDaterangePicker,
     StageDropdownFilter,
     Scatterplot,
     TasksByTypeChart,
@@ -89,18 +90,6 @@ export default {
     shouldDisplayTasksByTypeChart() {
       return !this.isLoading && !this.isLoadingTasksByTypeChart;
     },
-
-    dateRange: {
-      get() {
-        return { startDate: this.startDate, endDate: this.endDate };
-      },
-      set({ startDate, endDate }) {
-        this.setDateRange({
-          startDate,
-          endDate,
-        });
-      },
-    },
     hasDateRangeSet() {
       return this.startDate && this.endDate;
     },
@@ -227,14 +216,11 @@ export default {
           v-if="shouldDisplayFilters"
           class="ml-0 ml-md-auto mt-2 mt-md-0 d-flex flex-column flex-md-row align-items-md-center justify-content-md-end"
         >
-          <gl-daterange-picker
-            v-model="dateRange"
-            class="d-flex flex-column flex-lg-row js-daterange-picker"
-            :default-start-date="startDate"
-            :default-end-date="endDate"
-            start-picker-class="d-flex flex-column flex-lg-row align-items-lg-center mr-lg-2"
-            end-picker-class="d-flex flex-column flex-lg-row align-items-lg-center"
-            theme="animate-picker"
+          <date-range
+            :start-date="startDate"
+            :end-date="endDate"
+            class="js-daterange-picker"
+            @change="setDateRange"
           />
         </div>
       </div>

ee/spec/frontend/analytics/cycle_analytics/components/base_spec.js

@@ -3,7 +3,7 @@ import Vuex from 'vuex';
 import Vue from 'vue';
 import store from 'ee/analytics/cycle_analytics/store';
 import Component from 'ee/analytics/cycle_analytics/components/base.vue';
-import { GlEmptyState, GlDaterangePicker } from '@gitlab/ui';
+import { GlEmptyState } from '@gitlab/ui';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import GroupsDropdownFilter from 'ee/analytics/shared/components/groups_dropdown_filter.vue';
@@ -13,6 +13,7 @@ import StageTable from 'ee/analytics/cycle_analytics/components/stage_table.vue'
 import 'bootstrap';
 import '~/gl_dropdown';
 import Scatterplot from 'ee/analytics/shared/components/scatterplot.vue';
+import Daterange from 'ee/analytics/shared/components/daterange.vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import httpStatusCodes from '~/lib/utils/http_status';
 import * as mockData from '../mock_data';
@@ -89,7 +90,7 @@ describe('Cycle Analytics component', () => {
   };
 
   const displaysDateRangePicker = flag => {
-    expect(wrapper.find(GlDaterangePicker).exists()).toBe(flag);
+    expect(wrapper.find(Daterange).exists()).toBe(flag);
   };
 
   const displaysSummaryTable = flag => {