Add MR Analytics datepicker

Add a date range picker to the MR Analytics page.
Change the date range util to include start and end dates.

ee/app/assets/javascripts/analytics/merge_request_analytics/components/app.vue

 <script>
 import { getDateInPast } from '~/lib/utils/datetime_utility';
+import DateRange from '../../shared/components/daterange.vue';
 import { DEFAULT_NUMBER_OF_DAYS } from '../constants';
 import FilterBar from './filter_bar.vue';
 import ThroughputChart from './throughput_chart.vue';
@@ -8,6 +9,7 @@ import ThroughputTable from './throughput_table.vue';
 export default {
   name: 'MergeRequestAnalyticsApp',
   components: {
+    DateRange,
     FilterBar,
     ThroughputChart,
     ThroughputTable,
@@ -18,12 +20,28 @@ export default {
       endDate: new Date(),
     };
   },
+  methods: {
+    setDateRange({ startDate, endDate }) {
+      this.startDate = startDate;
+      this.endDate = endDate;
+    },
+  },
 };
 </script>
 <template>
   <div class="merge-request-analytics-wrapper">
     <h3 data-testid="pageTitle" class="gl-mb-5">{{ __('Merge Request Analytics') }}</h3>
-    <filter-bar />
+    <div
+      class="gl-display-flex gl-flex-direction-column gl-lg-flex-direction-row gl-justify-content-space-between gl-bg-gray-10 gl-border-t-solid gl-border-t-1 gl-border-t-gray-100 gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-py-3"
+    >
+      <filter-bar class="gl-flex-grow-1 gl-lg-ml-3" />
+      <date-range
+        :start-date="startDate"
+        :end-date="endDate"
+        class="gl-lg-mx-3"
+        @change="setDateRange"
+      />
+    </div>
     <throughput-chart :start-date="startDate" :end-date="endDate" />
     <throughput-table :start-date="startDate" :end-date="endDate" class="gl-mt-6" />
   </div>

ee/app/assets/javascripts/analytics/merge_request_analytics/utils.js

@@ -41,5 +41,10 @@ export const computeMonthRangeData = (startDate, endDate, format = dateFormats.i
     });
   }
 
+  if (monthData.length) {
+    monthData[0].mergedAfter = dateFormat(startDate, format); // Set first item to startDate
+    monthData[monthData.length - 1].mergedBefore = dateFormat(endDate, format); // Set last item to endDate
+  }
+
   return monthData;
 };

ee/spec/frontend/analytics/merge_request_analytics/components/app_spec.js

 import { shallowMount } from '@vue/test-utils';
 import MergeRequestAnalyticsApp from 'ee/analytics/merge_request_analytics/components/app.vue';
+import DateRange from 'ee/analytics/shared/components/daterange.vue';
 import FilterBar from 'ee/analytics/merge_request_analytics/components/filter_bar.vue';
 import ThroughputChart from 'ee/analytics/merge_request_analytics/components/throughput_chart.vue';
 import ThroughputTable from 'ee/analytics/merge_request_analytics/components/throughput_table.vue';
@@ -30,6 +31,10 @@ describe('MergeRequestAnalyticsApp', () => {
     expect(wrapper.find(FilterBar).exists()).toBe(true);
   });
 
+  it('displays the date range component', () => {
+    expect(wrapper.find(DateRange).exists()).toBe(true);
+  });
+
   it('displays the throughput chart component', () => {
     expect(wrapper.find(ThroughputChart).exists()).toBe(true);
   });

ee/spec/frontend/analytics/merge_request_analytics/mock_data.js

@@ -14,7 +14,7 @@ export const expectedMonthData = [
   {
     year: 2020,
     month: 'May',
-    mergedAfter: '2020-05-01',
+    mergedAfter: '2020-05-17',
     mergedBefore: '2020-06-01',
   },
   {
@@ -27,19 +27,19 @@ export const expectedMonthData = [
     year: 2020,
     month: 'Jul',
     mergedAfter: '2020-07-01',
-    mergedBefore: '2020-08-01',
+    mergedBefore: '2020-07-17',
   },
 ];
 
 export const throughputChartQuery = `query ($fullPath: ID!, $labels: [String!], $authorUsername: String, $assigneeUsername: String, $milestoneTitle: String, $sourceBranches: [String!], $targetBranches: [String!]) {
   throughputChartData: project(fullPath: $fullPath) {
-    May_2020: mergeRequests(first: 0, mergedBefore: "2020-06-01", mergedAfter: "2020-05-01", labels: $labels, authorUsername: $authorUsername, assigneeUsername: $assigneeUsername, milestoneTitle: $milestoneTitle, sourceBranches: $sourceBranches, targetBranches: $targetBranches) {
+    May_2020: mergeRequests(first: 0, mergedBefore: "2020-06-01", mergedAfter: "2020-05-17", labels: $labels, authorUsername: $authorUsername, assigneeUsername: $assigneeUsername, milestoneTitle: $milestoneTitle, sourceBranches: $sourceBranches, targetBranches: $targetBranches) {
       count
     }
     Jun_2020: mergeRequests(first: 0, mergedBefore: "2020-07-01", mergedAfter: "2020-06-01", labels: $labels, authorUsername: $authorUsername, assigneeUsername: $assigneeUsername, milestoneTitle: $milestoneTitle, sourceBranches: $sourceBranches, targetBranches: $targetBranches) {
       count
     }
-    Jul_2020: mergeRequests(first: 0, mergedBefore: "2020-08-01", mergedAfter: "2020-07-01", labels: $labels, authorUsername: $authorUsername, assigneeUsername: $assigneeUsername, milestoneTitle: $milestoneTitle, sourceBranches: $sourceBranches, targetBranches: $targetBranches) {
+    Jul_2020: mergeRequests(first: 0, mergedBefore: "2020-07-17", mergedAfter: "2020-07-01", labels: $labels, authorUsername: $authorUsername, assigneeUsername: $assigneeUsername, milestoneTitle: $milestoneTitle, sourceBranches: $sourceBranches, targetBranches: $targetBranches) {
       count
     }
   }

ee/spec/frontend/analytics/merge_request_analytics/utils_spec.js

@@ -3,22 +3,16 @@ import { expectedMonthData } from './mock_data';
 
 describe('computeMonthRangeData', () => {
   const start = new Date('2020-05-17T00:00:00.000Z');
+  const end = new Date('2020-07-17T00:00:00.000Z');
 
-  it.each`
-    startDate | endDate
-    ${start}  | ${new Date('2020-07-17T00:00:00.000Z')}
-    ${start}  | ${new Date('2020-07-31T00:00:00.000Z')}
-  `('returns the data as expected', ({ startDate, endDate }) => {
-    const monthData = utils.computeMonthRangeData(startDate, endDate);
+  it('returns the data es acpected', () => {
+    const monthData = utils.computeMonthRangeData(start, end);
 
     expect(monthData).toStrictEqual(expectedMonthData);
   });
 
   it('returns an empty array on an invalid date range', () => {
-    const startDate = new Date('2021-05-17T00:00:00.000Z');
-    const endDate = new Date('2020-07-17T00:00:00.000Z');
-
-    const monthData = utils.computeMonthRangeData(startDate, endDate);
+    const monthData = utils.computeMonthRangeData(end, start);
 
     expect(monthData).toStrictEqual([]);
   });