Move type of work vuex code to module

Moves the vuex related code for the
tasks by type chart into a separate
module

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

@@ -5,6 +5,7 @@ import * as getters from './getters';
 import mutations from './mutations';
 import state from './state';
 import durationChart from './modules/duration_chart/index';
+import typeOfWork from './modules/type_of_work/index';
 
 Vue.use(Vuex);
 
@@ -14,5 +15,5 @@ export default () =>
     getters,
     mutations,
     state,
-    modules: { durationChart },
+    modules: { durationChart, typeOfWork },
   });

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

+import Api from 'ee/api';
+import createFlash from '~/flash';
+import { __ } from '~/locale';
+import httpStatus from '~/lib/utils/http_status';
+import * as types from './mutation_types';
+
+const handleErrorOrRethrow = ({ action, error }) => {
+  if (error?.response?.status === httpStatus.FORBIDDEN) {
+    throw error;
+  }
+  action();
+};
+
+export const receiveTopRankedGroupLabelsSuccess = ({ commit, dispatch }, data) => {
+  commit(types.RECEIVE_TOP_RANKED_GROUP_LABELS_SUCCESS, data);
+  dispatch('fetchTasksByTypeData');
+};
+
+export const receiveTopRankedGroupLabelsError = ({ commit }, error) => {
+  commit(types.RECEIVE_TOP_RANKED_GROUP_LABELS_ERROR, error);
+  createFlash(__('There was an error fetching the top labels for the selected group'));
+};
+
+export const requestTopRankedGroupLabels = ({ commit }) =>
+  commit(types.REQUEST_TOP_RANKED_GROUP_LABELS);
+
+export const fetchTopRankedGroupLabels = ({
+  dispatch,
+  state,
+  getters: {
+    currentGroupPath,
+    cycleAnalyticsRequestParams: { created_after, created_before },
+  },
+}) => {
+  dispatch('requestTopRankedGroupLabels');
+  const { subject } = state.tasksByType;
+
+  return Api.cycleAnalyticsTopLabels(currentGroupPath, {
+    subject,
+    created_after,
+    created_before,
+  })
+    .then(({ data }) => dispatch('receiveTopRankedGroupLabelsSuccess', data))
+    .catch(error =>
+      handleErrorOrRethrow({
+        error,
+        action: () => dispatch('receiveTopRankedGroupLabelsError', error),
+      }),
+    );
+};
+
+export const receiveTasksByTypeDataSuccess = ({ commit }, data) => {
+  commit(types.RECEIVE_TASKS_BY_TYPE_DATA_SUCCESS, data);
+};
+
+export const receiveTasksByTypeDataError = ({ commit }, error) => {
+  commit(types.RECEIVE_TASKS_BY_TYPE_DATA_ERROR, error);
+  createFlash(__('There was an error fetching data for the tasks by type chart'));
+};
+
+export const requestTasksByTypeData = ({ commit }) => commit(types.REQUEST_TASKS_BY_TYPE_DATA);
+
+export const fetchTasksByTypeData = ({ dispatch, state, getters }) => {
+  const {
+    currentGroupPath,
+    cycleAnalyticsRequestParams: { created_after, created_before, project_ids },
+  } = getters;
+
+  const {
+    tasksByType: { subject, selectedLabelIds },
+  } = state;
+
+  // ensure we clear any chart data currently in state
+  dispatch('requestTasksByTypeData');
+
+  // dont request if we have no labels selected...for now
+  if (selectedLabelIds.length) {
+    const params = {
+      created_after,
+      created_before,
+      project_ids,
+      subject,
+      label_ids: selectedLabelIds,
+    };
+
+    return Api.cycleAnalyticsTasksByType(currentGroupPath, params)
+      .then(({ data }) => dispatch('receiveTasksByTypeDataSuccess', data))
+      .catch(error => dispatch('receiveTasksByTypeDataError', error));
+  }
+  return dispatch('receiveTasksByTypeDataSuccess', []);
+};
+
+export const setTasksByTypeFilters = ({ dispatch, commit }, data) => {
+  commit(types.SET_TASKS_BY_TYPE_FILTERS, data);
+  dispatch('fetchTopRankedGroupLabels');
+};
+
+export const initializeCycleAnalyticsSuccess = ({ commit }) =>
+  commit(types.INITIALIZE_CYCLE_ANALYTICS_SUCCESS);
+
+export const initializeCycleAnalytics = ({ dispatch, commit }, initialData = {}) => {
+  commit(types.INITIALIZE_CYCLE_ANALYTICS, initialData);
+  if (initialData?.group?.fullPath) {
+    return dispatch('fetchCycleAnalyticsData').then(() =>
+      dispatch('initializeCycleAnalyticsSuccess'),
+    );
+  }
+
+  return dispatch('initializeCycleAnalyticsSuccess');
+};

ee/app/assets/javascripts/analytics/cycle_analytics/store/modules/type_of_work/getters.js

+import { getTasksByTypeData } from '../../../utils';
+
+export const tasksByTypeChartData = ({ tasksByType, startDate, endDate }) => {
+  if (tasksByType && tasksByType.data.length) {
+    return getTasksByTypeData({
+      data: tasksByType.data,
+      startDate,
+      endDate,
+    });
+  }
+  return { groupBy: [], data: [], seriesNames: [] };
+};
+
+export default { tasksByTypeChartData };

ee/app/assets/javascripts/analytics/cycle_analytics/store/modules/type_of_work/index.js

+import * as actions from './actions';
+import * as getters from './getters';
+import mutations from './mutations';
+import state from './state';
+
+export default {
+  namespaced: true,
+  actions,
+  getters,
+  mutations,
+  state,
+};

ee/app/assets/javascripts/analytics/cycle_analytics/store/modules/type_of_work/mutation_types.js

+export const REQUEST_TOP_RANKED_GROUP_LABELS = 'REQUEST_TOP_RANKED_GROUP_LABELS';
+export const RECEIVE_TOP_RANKED_GROUP_LABELS_SUCCESS = 'RECEIVE_TOP_RANKED_GROUP_LABELS_SUCCESS';
+export const RECEIVE_TOP_RANKED_GROUP_LABELS_ERROR = 'RECEIVE_TOP_RANKED_GROUP_LABELS_ERROR';
+
+export const SET_TASKS_BY_TYPE_SUBJECT = 'SET_TASKS_BY_TYPE_SUBJECT';
+export const SET_TASKS_BY_TYPE_LABELS = 'SET_TASKS_BY_TYPE_LABELS';
+
+export const REQUEST_TASKS_BY_TYPE_DATA = 'REQUEST_TASKS_BY_TYPE_DATA';
+export const RECEIVE_TASKS_BY_TYPE_DATA_SUCCESS = 'RECEIVE_TASKS_BY_TYPE_DATA_SUCCESS';
+export const RECEIVE_TASKS_BY_TYPE_DATA_ERROR = 'RECEIVE_TASKS_BY_TYPE_DATA_ERROR';
+
+export const SET_TASKS_BY_TYPE_FILTERS = 'SET_TASKS_BY_TYPE_FILTERS';

ee/app/assets/javascripts/analytics/cycle_analytics/store/modules/type_of_work/mutations.js

+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import * as types from './mutation_types';
+import { transformRawTasksByTypeData, toggleSelectedLabel } from '../../../utils';
+import { TASKS_BY_TYPE_FILTERS } from '../../../constants';
+
+export default {
+  [types.REQUEST_TOP_RANKED_GROUP_LABELS](state) {
+    state.isLoadingTasksByTypeChartTopLabels = true;
+    state.topRankedLabels = [];
+    state.tasksByType = {
+      ...state.tasksByType,
+      selectedLabelIds: [],
+    };
+  },
+  [types.RECEIVE_TOP_RANKED_GROUP_LABELS_SUCCESS](state, data = []) {
+    const { tasksByType } = state;
+    state.isLoadingTasksByTypeChartTopLabels = false;
+    state.topRankedLabels = data.map(convertObjectPropsToCamelCase);
+    state.tasksByType = {
+      ...tasksByType,
+      selectedLabelIds: data.map(({ id }) => id),
+    };
+  },
+  [types.RECEIVE_TOP_RANKED_GROUP_LABELS_ERROR](state) {
+    const { tasksByType } = state;
+    state.isLoadingTasksByTypeChartTopLabels = false;
+    state.topRankedLabels = [];
+    state.tasksByType = {
+      ...tasksByType,
+      selectedLabelIds: [],
+    };
+  },
+  [types.REQUEST_TASKS_BY_TYPE_DATA](state) {
+    state.isLoadingTasksByTypeChart = true;
+  },
+  [types.RECEIVE_TASKS_BY_TYPE_DATA_ERROR](state) {
+    state.isLoadingTasksByTypeChart = false;
+  },
+  [types.RECEIVE_TASKS_BY_TYPE_DATA_SUCCESS](state, data = []) {
+    state.isLoadingTasksByTypeChart = false;
+    state.tasksByType = {
+      ...state.tasksByType,
+      data: transformRawTasksByTypeData(data),
+    };
+  },
+  [types.SET_TASKS_BY_TYPE_FILTERS](state, { filter, value }) {
+    const {
+      tasksByType: { selectedLabelIds, ...tasksByTypeRest },
+    } = state;
+    let updatedFilter = {};
+    switch (filter) {
+      case TASKS_BY_TYPE_FILTERS.LABEL:
+        updatedFilter = {
+          selectedLabelIds: toggleSelectedLabel({ selectedLabelIds, value }),
+        };
+        break;
+      case TASKS_BY_TYPE_FILTERS.SUBJECT:
+        updatedFilter = { subject: value };
+        break;
+      default:
+        break;
+    }
+    state.tasksByType = { ...tasksByTypeRest, selectedLabelIds, ...updatedFilter };
+  },
+};

ee/app/assets/javascripts/analytics/cycle_analytics/store/modules/type_of_work/state.js

+import { TASKS_BY_TYPE_SUBJECT_ISSUE } from '../../../constants';
+
+export default () => ({
+  isLoadingTasksByTypeChart: false,
+  isLoadingTasksByTypeChartTopLabels: false,
+
+  subject: TASKS_BY_TYPE_SUBJECT_ISSUE,
+  topRankedLabels: [],
+  selectedLabelIds: [],
+  data: [],
+});

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

-import { TASKS_BY_TYPE_SUBJECT_ISSUE } from '../constants';
-
 export default () => ({
   featureFlags: {},
 
@@ -8,8 +6,6 @@ export default () => ({
 
   isLoading: false,
   isLoadingStage: false,
-  isLoadingTasksByTypeChart: false,
-  isLoadingTasksByTypeChartTopLabels: false,
 
   isEmptyStage: false,
   errorCode: null,
@@ -28,16 +24,9 @@ export default () => ({
 
   stages: [],
   summary: [],
-  topRankedLabels: [],
   medians: {},
 
   customStageFormEvents: [],
   customStageFormErrors: null,
   customStageFormInitialData: null,
-
-  tasksByType: {
-    subject: TASKS_BY_TYPE_SUBJECT_ISSUE,
-    selectedLabelIds: [],
-    data: [],
-  },
 });