Create custom stages vuex module

Moves the vuex code for custom stages
into a new store module

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

+import Api from 'ee/api';
+import createFlash from '~/flash';
+import { __, sprintf } from '~/locale';
+import httpStatus from '~/lib/utils/http_status';
+import * as types from './mutation_types';
+import { removeFlash } from '../../../utils';
+
+const isStageNameExistsError = ({ status, errors }) => {
+  const ERROR_NAME_RESERVED = 'is reserved';
+  if (status === httpStatus.UNPROCESSABLE_ENTITY) {
+    if (errors?.name?.includes(ERROR_NAME_RESERVED)) return true;
+  }
+  return false;
+};
+
+export const setStageEvents = ({ commit }, data) => commit(types.SET_STAGE_EVENTS, data);
+
+export const hideCustomStageForm = ({ commit }) => {
+  commit(types.HIDE_CUSTOM_STAGE_FORM);
+  removeFlash();
+};
+
+export const showCustomStageForm = ({ commit }) => {
+  commit(types.SHOW_CUSTOM_STAGE_FORM);
+  removeFlash();
+};
+
+export const showEditCustomStageForm = ({ commit, dispatch }, selectedStage = {}) => {
+  const {
+    id = null,
+    name = null,
+    startEventIdentifier = null,
+    startEventLabel: { id: startEventLabelId = null } = {},
+    endEventIdentifier = null,
+    endEventLabel: { id: endEventLabelId = null } = {},
+  } = selectedStage;
+
+  commit(types.SHOW_EDIT_CUSTOM_STAGE_FORM, {
+    id,
+    name,
+    startEventIdentifier,
+    startEventLabelId,
+    endEventIdentifier,
+    endEventLabelId,
+  });
+  dispatch('setSelectedStage', selectedStage);
+  removeFlash();
+};
+
+export const clearCustomStageFormErrors = ({ commit }) => {
+  commit(types.CLEAR_CUSTOM_STAGE_FORM_ERRORS);
+  removeFlash();
+};
+
+export const requestCreateCustomStage = ({ commit }) => commit(types.REQUEST_CREATE_CUSTOM_STAGE);
+export const receiveCreateCustomStageSuccess = ({ commit, dispatch }, { data: { title } }) => {
+  commit(types.RECEIVE_CREATE_CUSTOM_STAGE_SUCCESS);
+  createFlash(sprintf(__(`Your custom stage '%{title}' was created`), { title }), 'notice');
+
+  return Promise.resolve()
+    .then(() => dispatch('fetchGroupStagesAndEvents'))
+    .catch(() => {
+      createFlash(__('There was a problem refreshing the data, please try again'));
+    });
+};
+
+export const receiveCreateCustomStageError = (
+  { commit },
+  { status = 400, errors = {}, data = {} } = {},
+) => {
+  commit(types.RECEIVE_CREATE_CUSTOM_STAGE_ERROR, { errors });
+  const { name = null } = data;
+  const flashMessage =
+    name && isStageNameExistsError({ status, errors })
+      ? sprintf(__(`'%{name}' stage already exists`), { name })
+      : __('There was a problem saving your custom stage, please try again');
+
+  createFlash(flashMessage);
+};
+
+export const createCustomStage = ({ dispatch, state }, data) => {
+  const {
+    selectedGroup: { fullPath },
+  } = state;
+  dispatch('requestCreateCustomStage');
+
+  return Api.cycleAnalyticsCreateStage(fullPath, data)
+    .then(response => {
+      const { status, data: responseData } = response;
+      return dispatch('receiveCreateCustomStageSuccess', { status, data: responseData });
+    })
+    .catch(({ response } = {}) => {
+      const { data: { message, errors } = null, status = 400 } = response;
+
+      dispatch('receiveCreateCustomStageError', { data, message, errors, status });
+    });
+};

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

+// eslint-disable-next-line import/prefer-default-export
+export const customStageFormActive = ({ isCreating, isEditing }) =>
+  Boolean(isCreating || isEditing);

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

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

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

+export const SET_STAGE_EVENTS = 'SET_STAGE_EVENTS';
+
+export const HIDE_CUSTOM_STAGE_FORM = 'HIDE_CUSTOM_STAGE_FORM';
+export const SHOW_CUSTOM_STAGE_FORM = 'SHOW_CUSTOM_STAGE_FORM';
+export const SHOW_EDIT_CUSTOM_STAGE_FORM = 'SHOW_EDIT_CUSTOM_STAGE_FORM';
+export const CLEAR_CUSTOM_STAGE_FORM_ERRORS = 'CLEAR_CUSTOM_STAGE_FORM_ERRORS';
+
+export const REQUEST_CREATE_CUSTOM_STAGE = 'REQUEST_CREATE_CUSTOM_STAGE';
+export const RECEIVE_CREATE_CUSTOM_STAGE_SUCCESS = 'RECEIVE_CREATE_CUSTOM_STAGE_SUCCESS';
+export const RECEIVE_CREATE_CUSTOM_STAGE_ERROR = 'RECEIVE_CREATE_CUSTOM_STAGE_ERROR';

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

+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import * as types from './mutation_types';
+
+export default {
+  [types.SET_STAGE_EVENTS](state, data = []) {
+    state.formEvents = data.map(ev => convertObjectPropsToCamelCase(ev, { deep: true }));
+  },
+  [types.SHOW_CUSTOM_STAGE_FORM](state) {
+    state.isCreating = true;
+    state.formInitialData = null;
+    state.formErrors = null;
+  },
+  [types.SHOW_EDIT_CUSTOM_STAGE_FORM](state, initialData) {
+    state.isEditing = true;
+    state.formInitialData = initialData;
+    state.formErrors = null;
+  },
+  [types.HIDE_CUSTOM_STAGE_FORM](state) {
+    state.isEditing = false;
+    state.isCreating = false;
+    state.formInitialData = null;
+    state.formErrors = null;
+  },
+  [types.CLEAR_CUSTOM_STAGE_FORM_ERRORS](state) {
+    state.formErrors = null;
+  },
+  [types.REQUEST_CREATE_CUSTOM_STAGE](state) {
+    state.isSaving = true;
+    state.formErrors = {};
+  },
+  [types.RECEIVE_CREATE_CUSTOM_STAGE_ERROR](state, { errors = null } = {}) {
+    state.isSaving = false;
+    state.formErrors = convertObjectPropsToCamelCase(errors, { deep: true });
+  },
+  [types.RECEIVE_CREATE_CUSTOM_STAGE_SUCCESS](state) {
+    state.isSaving = false;
+    state.formErrors = null;
+    state.formInitialData = null;
+  },
+};

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

+export default () => ({
+  isSaving: false,
+  isCreating: false,
+  isEditing: false,
+
+  formEvents: [],
+  formErrors: null,
+  formInitialData: null,
+});