Moves fetchTasksByTypeData request to actions

Updated specs to check that the correct error
message is displayed if the fetchTasksByTypeData
request fails.

Minor refactor specs

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

 <script>
 import { GlEmptyState, GlDaterangePicker, GlLoadingIcon } from '@gitlab/ui';
 import { mapActions, mapState, mapGetters } from 'vuex';
-import { __ } from '~/locale';
-import createFlash from '~/flash';
 import { getDateInPast } from '~/lib/utils/datetime_utility';
 import { featureAccessLevel } from '~/pages/projects/shared/permissions/constants';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
@@ -110,23 +108,11 @@ export default {
       this.setCycleAnalyticsDataEndpoint(group.full_path);
       this.setSelectedGroup(group);
       this.fetchCycleAnalyticsData();
-      this.fetchGroupLabels(this.currentGroupPath)
-        .then(() => {
-          // TODO: Move this request into the `fetchCycleAnalyticsData` request, because we
-          // need to send the group labels, this request should fire after fetchGroupLablels is completed
-          // https://gitlab.com/gitlab-org/gitlab/merge_requests/18514
-          this.fetchTasksByTypeData();
-        })
-        .catch(err => {
-          createFlash(__('There was an error fetching data for the chart'));
-          throw err;
-        });
     },
     onProjectsSelect(projects) {
       const projectIds = projects.map(value => value.id);
       this.setSelectedProjects(projectIds);
       this.fetchCycleAnalyticsData();
-      this.fetchTasksByTypeData();
     },
     onStageSelect(stage) {
       this.hideCustomStageForm();

ee/app/assets/javascripts/analytics/cycle_analytics/store/actions.js

@@ -73,10 +73,12 @@ export const receiveCycleAnalyticsDataError = ({ commit }, { response }) => {
 
 export const fetchCycleAnalyticsData = ({ dispatch }) => {
   removeError();
+
   return dispatch('requestCycleAnalyticsData')
-    .then(() => dispatch('fetchGroupLabels')) // fetch group label data
-    .then(() => dispatch('fetchGroupStagesAndEvents')) // fetch stage data
-    .then(() => dispatch('fetchSummaryData')) // fetch summary data and stage medians
+    .then(() => dispatch('fetchGroupLabels'))
+    .then(() => dispatch('fetchGroupStagesAndEvents'))
+    .then(() => dispatch('fetchSummaryData'))
+    .then(() => dispatch('fetchTasksByTypeData'))
     .then(() => dispatch('receiveCycleAnalyticsDataSuccess'))
     .catch(error => dispatch('receiveCycleAnalyticsDataError', error));
 };
@@ -213,22 +215,23 @@ export const requestTasksByTypeData = ({ commit }) => commit(types.REQUEST_TASKS
 
 export const fetchTasksByTypeData = ({ dispatch, state, getters }) => {
   const endpoint = '/-/analytics/type_of_work/tasks_by_type';
-  const { currentGroupPath } = getters;
+  const {
+    currentGroupPath,
+    cycleAnalyticsRequestParams: { created_after, created_before, project_ids },
+  } = getters;
+
   const {
     tasksByType: { labelIds, subject },
-    selectedProjectIds,
-    startDate,
-    endDate,
   } = state;
 
   // dont request if we have no labels selected...for now
   if (labelIds.length) {
     const params = {
       group_id: currentGroupPath,
-      label_ids: `[${labelIds}]`,
-      project_ids: selectedProjectIds || [],
-      created_after: dateFormat(startDate, dateFormats.isoDate),
-      created_before: dateFormat(endDate, dateFormats.isoDate),
+      label_ids: `[${labelIds.join(',')}]`,
+      created_after,
+      created_before,
+      project_ids,
       subject,
     };
 

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

@@ -315,7 +315,7 @@ describe('Cycle Analytics component', () => {
         fetchGroupLabels: {
           status: defaultStatus,
           endpoint: `/groups/${groupId}/-/labels`,
-          response: { ...mockData.groupLabels },
+          response: [...mockData.groupLabels],
         },
         fetchStageData: {
           status: defaultStatus,
@@ -323,6 +323,11 @@ describe('Cycle Analytics component', () => {
           endpoint: '/groups/foo/-/cycle_analytics/events/issue.json',
           response: { ...mockData.issueEvents },
         },
+        fetchTasksByTypeData: {
+          status: defaultStatus,
+          endpoint: '/-/analytics/type_of_work/tasks_by_type',
+          response: { ...mockData.tasksByTypeData },
+        },
         ...overrides,
       };
 
@@ -344,6 +349,13 @@ describe('Cycle Analytics component', () => {
     });
 
     const findFlashError = () => document.querySelector('.flash-container .flash-text');
+    const selectGroupAndFindError = msg => {
+      wrapper.vm.onGroupSelect(mockData.group);
+
+      return waitForPromises().then(() => {
+        expect(findFlashError().innerText.trim()).toEqual(msg);
+      });
+    };
 
     it('will display an error if the fetchSummaryData request fails', () => {
       expect(findFlashError()).toBeNull();
@@ -356,13 +368,9 @@ describe('Cycle Analytics component', () => {
         },
       });
 
-      wrapper.vm.onGroupSelect(mockData.group);
-
-      return waitForPromises().then(() => {
-        expect(findFlashError().innerText.trim()).toEqual(
-          'There was an error while fetching cycle analytics summary data.',
-        );
-      });
+      return selectGroupAndFindError(
+        'There was an error while fetching cycle analytics summary data.',
+      );
     });
 
     it('will display an error if the fetchGroupLabels request fails', () => {
@@ -375,13 +383,9 @@ describe('Cycle Analytics component', () => {
         },
       });
 
-      wrapper.vm.onGroupSelect(mockData.group);
-
-      return waitForPromises().then(() => {
-        expect(findFlashError().innerText.trim()).toEqual(
-          'There was an error fetching label data for the selected group',
-        );
-      });
+      return selectGroupAndFindError(
+        'There was an error fetching label data for the selected group',
+      );
     });
 
     it('will display an error if the fetchGroupStagesAndEvents request fails', () => {
@@ -395,13 +399,7 @@ describe('Cycle Analytics component', () => {
         },
       });
 
-      wrapper.vm.onGroupSelect(mockData.group);
-
-      return waitForPromises().then(() => {
-        expect(findFlashError().innerText.trim()).toEqual(
-          'There was an error fetching cycle analytics stages.',
-        );
-      });
+      return selectGroupAndFindError('There was an error fetching cycle analytics stages.');
     });
 
     it('will display an error if the fetchStageData request fails', () => {
@@ -415,42 +413,21 @@ describe('Cycle Analytics component', () => {
         },
       });
 
-      wrapper.vm.onGroupSelect(mockData.group);
-
-      return waitForPromises().then(() => {
-        expect(findFlashError().innerText.trim()).toEqual(
-          'There was an error fetching data for the selected stage',
-        );
-      });
+      return selectGroupAndFindError('There was an error fetching data for the selected stage');
     });
 
     it('will display an error if the fetchTasksByTypeData request fails', () => {
       expect(findFlashError()).toBeNull();
 
-      mock
-        .onGet('/groups/foo/-/labels')
-        .replyOnce(httpStatusCodes.OK, [...mockData.groupLabels])
-        .onGet('/groups/foo/-/cycle_analytics')
-        .replyOnce(httpStatusCodes.OK, {
-          ...mockData.cycleAnalyticsData,
-          response: { status: httpStatusCodes.OK },
-        })
-        .onGet('/groups/foo/-/cycle_analytics/events/issue.json')
-        .replyOnce(httpStatusCodes.OK, {
-          response: { events: mockData.issueEvents },
-        })
-        .onGet('/-/analytics/type_of_work/tasks_by_type')
-        .replyOnce(httpStatusCodes.BAD_REQUEST, {
-          response: { status: httpStatusCodes.BAD_REQUEST },
-        });
-
-      wrapper.vm.onGroupSelect(mockData.group);
-
-      return waitForPromises().then(() => {
-        expect(findFlashError().innerText.trim()).toEqual(
-          'There was an error fetching data for the chart',
-        );
+      mockRequestCycleAnalyticsData({
+        fetchTasksByTypeData: {
+          endPoint: '/-/analytics/type_of_work/tasks_by_type',
+          status: httpStatusCodes.BAD_REQUEST,
+          response: { response: { status: httpStatusCodes.BAD_REQUEST } },
+        },
       });
+
+      return selectGroupAndFindError('There was an error fetching data for the chart');
     });
   });
 });

locale/gitlab.pot

@@ -17425,6 +17425,9 @@ msgstr ""
 msgid "There was an error fetching data for the chart"
 msgstr ""
 
+msgid "There was an error fetching data for the selected stage"
+msgstr ""
+
 msgid "There was an error fetching label data for the selected group"
 msgstr ""