Set initial data when app is created

- Sets the startDate and endDate on the store

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

@@ -34,10 +34,6 @@ export default {
   },
   mixins: [featureFlagsMixin()],
   props: {
-    endpoint: {
-      type: String,
-      required: true,
-    },
     emptyStateSvgPath: {
       type: String,
       required: true,
@@ -92,14 +88,12 @@ export default {
     },
   },
   mounted() {
-    this.setEndpoint(this.endpoint);
     this.setChartEnabled({
       chartKey: chartKeys.scatterplot,
       isEnabled: this.isScatterplotFeatureEnabled(),
     });
   },
   methods: {
-    ...mapActions(['setEndpoint']),
     ...mapActions('charts', [
       'fetchChartData',
       'setMetricType',

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

@@ -22,8 +22,13 @@ export default () => {
   const { startDate: computedStartDate } = timeframeContainer.dataset;
 
   const minDate = computedStartDate ? new Date(computedStartDate) : null;
-  const defaultStartDate = getDefaultStartDate(minDate, defaultDaysInPast);
-  const defaultEndDate = new Date(Date.now());
+  const mergedAtAfter = getDefaultStartDate(minDate, defaultDaysInPast);
+  const mergedAtBefore = new Date(Date.now());
+
+  const initialData = {
+    mergedAtAfter,
+    mergedAtBefore,
+  };
 
   let filterManager;
 
@@ -31,7 +36,16 @@ export default () => {
   new Vue({
     el: groupProjectSelectContainer,
     store,
+    created() {
+      this.setEndpoint(endpoint);
+
+      // let's not fetch data since we might not have a groupNamespace selected yet
+      // this just populates the store with the initial data and waits for a groupNamespace to be set
+      this.setInitialData({ skipFetch: true, data: initialData });
+    },
     methods: {
+      ...mapActions(['setEndpoint']),
+      ...mapActions('filters', ['setInitialData']),
       onGroupSelected({ groupNamespace, groupId }) {
         this.initFilteredSearch({ groupNamespace, groupId });
       },
@@ -80,11 +94,6 @@ export default () => {
     computed: {
       ...mapState('filters', ['groupNamespace', 'startDate', 'endDate']),
     },
-    mounted() {
-      // let's not fetch data since we might not have a groupNamespace selected yet
-      // this just populates the store with the initial data and waits for a groupNamespace to be set
-      this.setDateRange({ startDate: defaultStartDate, endDate: defaultEndDate, skipFetch: true });
-    },
     methods: {
       ...mapActions('filters', ['setDateRange']),
       onDateRangeChange({ startDate, endDate }) {
@@ -95,8 +104,8 @@ export default () => {
       return h(DateRange, {
         props: {
           show: this.groupNamespace !== null,
-          startDate: defaultStartDate,
-          endDate: defaultEndDate,
+          startDate: mergedAtAfter,
+          endDate: mergedAtBefore,
           minDate,
         },
         on: {
@@ -113,7 +122,6 @@ export default () => {
     render(h) {
       return h(ProductivityAnalyticsApp, {
         props: {
-          endpoint,
           emptyStateSvgPath,
           noAccessSvgPath,
         },

ee/app/assets/javascripts/analytics/productivity_analytics/store/modules/filters/actions.js

 import * as types from './mutation_types';
 import { chartKeys } from '../../../constants';
 
+export const setInitialData = ({ commit, dispatch }, { skipFetch = false, data }) => {
+  commit(types.SET_INITIAL_DATA, data);
+
+  if (skipFetch) return Promise.resolve();
+
+  return dispatch('charts/fetchChartData', chartKeys.main, { root: true }).then(() => {
+    dispatch('charts/fetchSecondaryChartData', null, { root: true });
+    // let's reset the page on the MR table and fetch data
+    dispatch('table/setPage', 0, { root: true });
+  });
+};
+
 export const setGroupNamespace = ({ commit, dispatch }, groupNamespace) => {
   commit(types.SET_GROUP_NAMESPACE, groupNamespace);
 
@@ -48,11 +60,9 @@ export const setFilters = (
   });
 };
 
-export const setDateRange = ({ commit, dispatch }, { skipFetch = false, startDate, endDate }) => {
+export const setDateRange = ({ commit, dispatch }, { startDate, endDate }) => {
   commit(types.SET_DATE_RANGE, { startDate, endDate });
 
-  if (skipFetch) return false;
-
   dispatch('charts/resetMainChartSelection', true, { root: true });
 
   return dispatch('charts/fetchChartData', chartKeys.main, { root: true }).then(() => {

ee/app/assets/javascripts/analytics/productivity_analytics/store/modules/filters/mutation_types.js

+export const SET_INITIAL_DATA = 'SET_INITIAL_DATA';
 export const SET_GROUP_NAMESPACE = 'SET_GROUP_NAMESPACE';
 export const SET_PROJECT_PATH = 'SET_PROJECT_PATH';
 export const SET_FILTERS = 'SET_FILTERS';

ee/app/assets/javascripts/analytics/productivity_analytics/store/modules/filters/mutations.js

 import * as types from './mutation_types';
 
 export default {
+  [types.SET_INITIAL_DATA](state, { mergedAtAfter, mergedAtBefore }) {
+    state.startDate = mergedAtAfter;
+    state.endDate = mergedAtBefore;
+  },
   [types.SET_GROUP_NAMESPACE](state, groupNamespace) {
     state.groupNamespace = groupNamespace;
     state.projectPath = null;

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

@@ -19,7 +19,6 @@ describe('ProductivityApp component', () => {
   let mock;
 
   const propsData = {
-    endpoint: TEST_HOST,
     emptyStateSvgPath: TEST_HOST,
     noAccessSvgPath: TEST_HOST,
   };
@@ -47,6 +46,8 @@ describe('ProductivityApp component', () => {
         glFeatures: { productivityAnalyticsScatterplotEnabled: scatterplotEnabled },
       },
     });
+
+    wrapper.vm.$store.dispatch('setEndpoint', TEST_HOST);
   };
 
   beforeEach(() => {
@@ -83,10 +84,12 @@ describe('ProductivityApp component', () => {
 
     describe('with a group being selected', () => {
       beforeEach(() => {
-        wrapper.vm.$store.dispatch('filters/setDateRange', {
+        wrapper.vm.$store.dispatch('filters/setInitialData', {
           skipFetch: true,
-          startDate: new Date('2019-09-01'),
-          endDate: new Date('2019-09-02'),
+          data: {
+            mergedAtAfter: new Date('2019-09-01'),
+            mergedAtBefore: new Date('2019-09-02'),
+          },
         });
         wrapper.vm.$store.dispatch('filters/setGroupNamespace', 'gitlab-org');
         mock.onGet(wrapper.vm.$store.state.endpoint).replyOnce(200);

ee/spec/frontend/analytics/productivity_analytics/store/modules/filters/actions_spec.js

@@ -11,6 +11,10 @@ describe('Productivity analytics filter actions', () => {
   const endDate = new Date(currentYear, 8, 7);
   const groupNamespace = 'gitlab-org';
   const projectPath = 'gitlab-org/gitlab-test';
+  const initialData = {
+    mergedAtAfter: new Date('2019-11-01'),
+    mergedAtBefore: new Date('2019-12-09'),
+  };
 
   beforeEach(() => {
     store = {
@@ -19,6 +23,47 @@ describe('Productivity analytics filter actions', () => {
     };
   });
 
+  describe('setInitialData', () => {
+    it('commits the SET_INITIAL_DATA mutation and fetches data by default', done => {
+      actions
+        .setInitialData(store, { data: initialData })
+        .then(() => {
+          expect(store.commit).toHaveBeenCalledWith(types.SET_INITIAL_DATA, initialData);
+
+          expect(store.dispatch.mock.calls[0]).toEqual([
+            'charts/fetchChartData',
+            chartKeys.main,
+            { root: true },
+          ]);
+
+          expect(store.dispatch.mock.calls[1]).toEqual([
+            'charts/fetchSecondaryChartData',
+            null,
+            { root: true },
+          ]);
+
+          expect(store.dispatch.mock.calls[2]).toEqual(['table/setPage', 0, { root: true }]);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it("commits the SET_INITIAL_DATA mutation and doesn't fetch data when skipFetch=true", done =>
+      testAction(
+        actions.setInitialData,
+        { skipFetch: true, data: initialData },
+        getInitialState(),
+        [
+          {
+            type: types.SET_INITIAL_DATA,
+            payload: initialData,
+          },
+        ],
+        [],
+        done,
+      ));
+  });
+
   describe('setGroupNamespace', () => {
     it('commits the SET_GROUP_NAMESPACE mutation', done => {
       actions
@@ -116,7 +161,7 @@ describe('Productivity analytics filter actions', () => {
   });
 
   describe('setDateRange', () => {
-    it('commits the SET_DATE_RANGE mutation and fetches data by default', done => {
+    it('commits the SET_DATE_RANGE mutation', done => {
       actions
         .setDateRange(store, { startDate, endDate })
         .then(() => {
@@ -145,20 +190,5 @@ describe('Productivity analytics filter actions', () => {
         .then(done)
         .catch(done.fail);
     });
-
-    it("commits the SET_DATE_RANGE mutation and doesn't fetch data when skipFetch=true", done =>
-      testAction(
-        actions.setDateRange,
-        { skipFetch: true, startDate, endDate },
-        getInitialState(),
-        [
-          {
-            type: types.SET_DATE_RANGE,
-            payload: { startDate, endDate },
-          },
-        ],
-        [],
-        done,
-      ));
   });
 });

ee/spec/frontend/analytics/productivity_analytics/store/modules/filters/mutations_spec.js

@@ -4,14 +4,34 @@ import getInitialState from 'ee/analytics/productivity_analytics/store/modules/f
 
 describe('Productivity analytics filter mutations', () => {
   let state;
+  const groupNamespace = 'gitlab-org';
+  const projectPath = 'gitlab-org/gitlab-test';
+  const authorUsername = 'root';
+  const labelName = ['my label', 'yet another label'];
+  const milestoneTitle = 'my milestone';
+  const currentYear = new Date().getFullYear();
+  const startDate = new Date(currentYear, 8, 1);
+  const endDate = new Date(currentYear, 8, 7);
 
   beforeEach(() => {
     state = getInitialState();
   });
 
+  describe(types.SET_INITIAL_DATA, () => {
+    it('sets the initial data', () => {
+      const initialData = {
+        mergedAtAfter: startDate,
+        mergedAtBefore: endDate,
+      };
+      mutations[types.SET_INITIAL_DATA](state, initialData);
+
+      expect(state.startDate).toBe(startDate);
+      expect(state.endDate).toBe(endDate);
+    });
+  });
+
   describe(types.SET_GROUP_NAMESPACE, () => {
     it('sets the groupNamespace', () => {
-      const groupNamespace = 'gitlab-org';
       mutations[types.SET_GROUP_NAMESPACE](state, groupNamespace);
 
       expect(state.groupNamespace).toBe(groupNamespace);
@@ -20,7 +40,6 @@ describe('Productivity analytics filter mutations', () => {
 
   describe(types.SET_PROJECT_PATH, () => {
     it('sets the projectPath', () => {
-      const projectPath = 'gitlab-org/gitlab-test';
       mutations[types.SET_PROJECT_PATH](state, projectPath);
 
       expect(state.projectPath).toBe(projectPath);
@@ -29,9 +48,6 @@ describe('Productivity analytics filter mutations', () => {
 
   describe(types.SET_FILTERS, () => {
     it('sets the authorUsername, milestoneTitle and labelName', () => {
-      const authorUsername = 'root';
-      const labelName = ['my label', 'yet another label'];
-      const milestoneTitle = 'my milestone';
       mutations[types.SET_FILTERS](state, { authorUsername, labelName, milestoneTitle });
 
       expect(state.authorUsername).toBe(authorUsername);
@@ -42,9 +58,6 @@ describe('Productivity analytics filter mutations', () => {
 
   describe(types.SET_DATE_RANGE, () => {
     it('sets the startDate and endDate', () => {
-      const currentYear = new Date().getFullYear();
-      const startDate = new Date(currentYear, 8, 1);
-      const endDate = new Date(currentYear, 8, 7);
       mutations[types.SET_DATE_RANGE](state, { startDate, endDate });
 
       expect(state.startDate).toBe(startDate);