Merge branch '229389-mr-analytics-add-mttm-container-fe' into 'master'

Resolve "[MR Analytics] Add 12 month range limit"

See merge request gitlab-org/gitlab!52070

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

@@ -3,6 +3,7 @@ import dateFormat from 'dateformat';
 import UrlSync from '~/vue_shared/components/url_sync.vue';
 import DateRange from '../../shared/components/daterange.vue';
 import { dateFormats } from '../../shared/constants';
+import { DEFAULT_NUMBER_OF_DAYS } from '../constants';
 import FilterBar from './filter_bar.vue';
 import ThroughputChart from './throughput_chart.vue';
 import ThroughputTable from './throughput_table.vue';
@@ -40,6 +41,7 @@ export default {
       this.endDate = endDate;
     },
   },
+  dateRangeLimit: DEFAULT_NUMBER_OF_DAYS,
 };
 </script>
 <template>
@@ -52,6 +54,7 @@ export default {
       <date-range
         :start-date="startDate"
         :end-date="endDate"
+        :max-date-range="$options.dateRangeLimit"
         class="gl-lg-mx-3"
         @change="setDateRange"
       />

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

@@ -2,12 +2,11 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
 import { urlQueryToFilter } from '~/vue_shared/components/filtered_search_bar/filtered_search_utils';
-import { getDateInPast } from '~/lib/utils/datetime_utility';
 import { getParameterValues } from '~/lib/utils/url_utility';
+import { ITEM_TYPE } from '~/groups/constants';
 import createStore from './store';
 import MergeRequestAnalyticsApp from './components/app.vue';
-import { ITEM_TYPE } from '~/groups/constants';
-import { DEFAULT_NUMBER_OF_DAYS } from './constants';
+import { parseAndValidateDates } from './utils';
 
 Vue.use(VueApollo);
 
@@ -46,8 +45,10 @@ export default () => {
     selectedLabelList: label_name,
   });
 
-  const startDateParam = getParameterValues('start_date');
-  const endDateParam = getParameterValues('end_date');
+  const { startDate, endDate } = parseAndValidateDates(
+    getParameterValues('start_date'),
+    getParameterValues('end_date'),
+  );
 
   return new Vue({
     el,
@@ -61,10 +62,8 @@ export default () => {
     render: (createElement) =>
       createElement(MergeRequestAnalyticsApp, {
         props: {
-          startDate: startDateParam.length
-            ? new Date(startDateParam)
-            : getDateInPast(new Date(), DEFAULT_NUMBER_OF_DAYS),
-          endDate: endDateParam.length ? new Date(endDateParam) : new Date(),
+          startDate,
+          endDate,
         },
       }),
   });

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

 import dateFormat from 'dateformat';
-import { getMonthNames, dateFromParams } from '~/lib/utils/datetime_utility';
+import {
+  getMonthNames,
+  dateFromParams,
+  getDateInPast,
+  getDayDifference,
+} from '~/lib/utils/datetime_utility';
 import { dateFormats } from '../shared/constants';
-import { THROUGHPUT_CHART_STRINGS } from './constants';
+import { THROUGHPUT_CHART_STRINGS, DEFAULT_NUMBER_OF_DAYS } from './constants';
 
 /**
  * A utility function which accepts a date range and returns
@@ -67,3 +72,25 @@ export const formatThroughputChartData = (chartData) => {
     },
   ];
 };
+
+/**
+ * A utility function which accepts start and end date params
+ * and validates that the date range does not exceed the bounds
+ *
+ * @param {Date} startDate the startDate for the data range
+ * @param {Date} endDate the endDate for the data range
+ *
+ * @return {Object} an object containing the startDate and endDate
+ */
+export const parseAndValidateDates = (startDateParam, endDateParam) => {
+  let startDate = new Date(startDateParam);
+  let endDate = new Date(endDateParam);
+  const numberOfDays = getDayDifference(startDate, endDate);
+
+  if (!startDateParam.length || numberOfDays > DEFAULT_NUMBER_OF_DAYS || endDate < startDate) {
+    startDate = getDateInPast(new Date(), DEFAULT_NUMBER_OF_DAYS);
+    endDate = new Date();
+  }
+
+  return { startDate, endDate };
+};

ee/changelogs/unreleased/229389-mr-analytics-add-mttm-container-fe.yml

+---
+title: Add 12 month limit to MR Analytics
+merge_request: 52070
+author:
+type: changed

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

 import * as utils from 'ee/analytics/merge_request_analytics/utils';
+import { useFakeDate } from 'helpers/fake_date';
 import { expectedMonthData, throughputChartData, formattedThroughputChartData } from './mock_data';
 
 describe('computeMonthRangeData', () => {
@@ -31,3 +32,19 @@ describe('formatThroughputChartData', () => {
     expect(chartData).toStrictEqual([]);
   });
 });
+
+describe('parseAndValidateDates', () => {
+  useFakeDate('2021-01-21');
+
+  it.each`
+    scenario                                                         | startDateParam  | endDateParam    | expected
+    ${'returns the default range if not specified'}                  | ${''}           | ${''}           | ${{ startDate: new Date('2020-01-22'), endDate: new Date('2021-01-21') }}
+    ${'returns the dates specificed if in range'}                    | ${'2020-06-22'} | ${'2021-01-10'} | ${{ startDate: new Date('2020-06-22'), endDate: new Date('2021-01-10') }}
+    ${'returns the default range if dates are out of bounds'}        | ${'2018-06-22'} | ${'2021-01-16'} | ${{ startDate: new Date('2020-01-22'), endDate: new Date('2021-01-21') }}
+    ${'returns the default range startDate is greater than endDate'} | ${'2021-01-22'} | ${'2020-06-12'} | ${{ startDate: new Date('2020-01-22'), endDate: new Date('2021-01-21') }}
+  `('$scenario', ({ startDateParam, endDateParam, expected }) => {
+    const dates = utils.parseAndValidateDates(startDateParam, endDateParam);
+
+    expect(dates).toEqual(expect.objectContaining(expected));
+  });
+});