Include dates in MR Analytics URL syncing

Currently, dates are not deeplinked / synced with
the URL. This commit fixes that!

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

 <script>
-import { getDateInPast } from '~/lib/utils/datetime_utility';
+import dateFormat from 'dateformat';
+import UrlSync from '~/vue_shared/components/url_sync.vue';
 import DateRange from '../../shared/components/daterange.vue';
-import { DEFAULT_NUMBER_OF_DAYS } from '../constants';
+import { dateFormats } from '../../shared/constants';
 import FilterBar from './filter_bar.vue';
 import ThroughputChart from './throughput_chart.vue';
 import ThroughputTable from './throughput_table.vue';
@@ -13,12 +14,25 @@ export default {
     FilterBar,
     ThroughputChart,
     ThroughputTable,
+    UrlSync,
   },
-  data() {
-    return {
-      startDate: getDateInPast(new Date(), DEFAULT_NUMBER_OF_DAYS),
-      endDate: new Date(),
-    };
+  props: {
+    startDate: {
+      type: Date,
+      required: true,
+    },
+    endDate: {
+      type: Date,
+      required: true,
+    },
+  },
+  computed: {
+    query() {
+      return {
+        start_date: dateFormat(this.startDate, dateFormats.isoDate),
+        end_date: dateFormat(this.endDate, dateFormats.isoDate),
+      };
+    },
   },
   methods: {
     setDateRange({ startDate, endDate }) {
@@ -44,5 +58,6 @@ export default {
     </div>
     <throughput-chart :start-date="startDate" :end-date="endDate" />
     <throughput-table :start-date="startDate" :end-date="endDate" class="gl-mt-6" />
+    <url-sync :query="query" />
   </div>
 </template>

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

@@ -2,9 +2,12 @@ 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 createStore from './store';
 import MergeRequestAnalyticsApp from './components/app.vue';
 import { ITEM_TYPE } from '~/groups/constants';
+import { DEFAULT_NUMBER_OF_DAYS } from './constants';
 
 Vue.use(VueApollo);
 
@@ -43,6 +46,9 @@ export default () => {
     selectedLabelList: label_name,
   });
 
+  const startDateParam = getParameterValues('start_date');
+  const endDateParam = getParameterValues('end_date');
+
   return new Vue({
     el,
     apolloProvider,
@@ -52,6 +58,14 @@ export default () => {
       fullPath,
       type,
     },
-    render: createElement => createElement(MergeRequestAnalyticsApp),
+    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(),
+        },
+      }),
   });
 };

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

@@ -4,12 +4,18 @@ 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';
+import UrlSync from '~/vue_shared/components/url_sync.vue';
 
 describe('MergeRequestAnalyticsApp', () => {
   let wrapper;
 
   function createComponent() {
-    wrapper = shallowMount(MergeRequestAnalyticsApp);
+    wrapper = shallowMount(MergeRequestAnalyticsApp, {
+      propsData: {
+        startDate: new Date('2020-05-01'),
+        endDate: new Date('2020-10-01'),
+      },
+    });
   }
 
   beforeEach(() => {
@@ -42,4 +48,19 @@ describe('MergeRequestAnalyticsApp', () => {
   it('displays the throughput table component', () => {
     expect(wrapper.find(ThroughputTable).exists()).toBe(true);
   });
+
+  describe('url sync', () => {
+    it('includes the url sync component', () => {
+      expect(wrapper.find(UrlSync).exists()).toBe(true);
+    });
+
+    it('has the start and end date params', () => {
+      const urlSync = wrapper.find(UrlSync);
+
+      expect(urlSync.props('query')).toMatchObject({
+        start_date: '2020-05-01',
+        end_date: '2020-10-01',
+      });
+    });
+  });
 });