Merge branch 'fix-handle-ca-custom-form-server-errors' into 'master'

Handle ca custom form server errors

Closes #36685

See merge request gitlab-org/gitlab!24218

app/models/concerns/analytics/cycle_analytics/stage.rb

@@ -15,8 +15,8 @@ module Analytics
         validates :name, exclusion: { in: Gitlab::Analytics::CycleAnalytics::DefaultStages.names }, if: :custom?
         validates :start_event_identifier, presence: true
         validates :end_event_identifier, presence: true
-        validates :start_event_label, presence: true, if: :start_event_label_based?
-        validates :end_event_label, presence: true, if: :end_event_label_based?
+        validates :start_event_label_id, presence: true, if: :start_event_label_based?
+        validates :end_event_label_id, presence: true, if: :end_event_label_based?
         validate :validate_stage_event_pairs
         validate :validate_labels
 
@@ -109,8 +109,8 @@ module Analytics
       end
 
       def validate_labels
-        validate_label_within_group(:start_event_label, start_event_label_id) if start_event_label_id_changed?
-        validate_label_within_group(:end_event_label, end_event_label_id) if end_event_label_id_changed?
+        validate_label_within_group(:start_event_label_id, start_event_label_id) if start_event_label_id_changed?
+        validate_label_within_group(:end_event_label_id, end_event_label_id) if end_event_label_id_changed?
       end
 
       def validate_label_within_group(association_name, label_id)

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

@@ -68,6 +68,7 @@ export default {
       'endDate',
       'tasksByType',
       'medians',
+      'customStageFormErrors',
     ]),
     ...mapGetters([
       'hasNoAccessError',
@@ -135,6 +136,7 @@ export default {
       'setSelectedStage',
       'hideCustomStageForm',
       'showCustomStageForm',
+      'showEditCustomStageForm',
       'setDateRange',
       'fetchTasksByTypeData',
       'updateSelectedDurationChartStages',
@@ -142,7 +144,7 @@ export default {
       'updateStage',
       'removeStage',
       'setFeatureFlags',
-      'editCustomStage',
+      'clearCustomStageFormErrors',
       'updateStage',
       'setTasksByTypeFilters',
     ]),
@@ -164,7 +166,7 @@ export default {
       this.showCustomStageForm();
     },
     onShowEditStageForm(initData = {}) {
-      this.editCustomStage(initData);
+      this.showEditCustomStageForm(initData);
     },
     initDateRange() {
       const endDate = new Date(Date.now());
@@ -278,10 +280,12 @@ export default {
             :is-editing-custom-stage="isEditingCustomStage"
             :current-stage-events="currentStageEvents"
             :custom-stage-form-events="customStageFormEvents"
+            :custom-stage-form-errors="customStageFormErrors"
             :labels="labels"
             :no-data-svg-path="noDataSvgPath"
             :no-access-svg-path="noAccessSvgPath"
             :can-edit-stages="hasCustomizableCycleAnalytics"
+            @clearCustomStageFormErrors="clearCustomStageFormErrors"
             @selectStage="onStageSelect"
             @editStage="onShowEditStageForm"
             @showAddStageForm="onShowAddStageForm"

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

@@ -14,7 +14,7 @@ import {
   getLabelEventsIdentifiers,
 } from '../utils';
 
-const initFields = {
+const defaultFields = {
   id: null,
   name: null,
   startEventIdentifier: null,
@@ -55,13 +55,27 @@ export default {
       required: false,
       default: false,
     },
+    errors: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   data() {
+    const defaultErrors = this?.initialFields?.endEventIdentifier
+      ? {}
+      : { endEventIdentifier: [s__('CustomCycleAnalytics|Please select a start event first')] };
     return {
+      labelEvents: getLabelEventsIdentifiers(this.events),
       fields: {
-        ...initFields,
+        ...defaultFields,
         ...this.initialFields,
       },
+      fieldErrors: {
+        ...defaultFields,
+        ...this.errors,
+        ...defaultErrors,
+      },
     };
   },
   computed: {
@@ -88,7 +102,7 @@ export default {
       return isLabelEvent(this.labelEvents, this.fields.endEventIdentifier);
     },
     isComplete() {
-      if (!this.hasValidStartAndEndEventPair) {
+      if (this.eventMismatchError) {
         return false;
       }
       const {
@@ -113,22 +127,16 @@ export default {
       );
     },
     isDirty() {
-      return !isEqual(this.initialFields, this.fields) && !isEqual(initFields, this.fields);
+      return !isEqual(this.initialFields, this.fields) && !isEqual(defaultFields, this.fields);
     },
-    hasValidStartAndEndEventPair() {
+    eventMismatchError() {
       const {
-        fields: { startEventIdentifier, endEventIdentifier },
+        fields: { startEventIdentifier = null, endEventIdentifier = null },
       } = this;
-      if (startEventIdentifier && endEventIdentifier) {
-        const endEvents = getAllowedEndEvents(this.events, startEventIdentifier);
-        return endEvents.length && endEvents.includes(endEventIdentifier);
-      }
-      return true;
-    },
-    endEventError() {
-      return !this.hasValidStartAndEndEventPair
-        ? s__('CustomCycleAnalytics|Start event changed, please select a valid stop event')
-        : null;
+
+      if (!startEventIdentifier || !endEventIdentifier) return true;
+      const endEvents = getAllowedEndEvents(this.events, startEventIdentifier);
+      return !endEvents.length || !endEvents.includes(endEventIdentifier);
     },
     saveStageText() {
       return this.isEditingCustomStage
@@ -141,13 +149,22 @@ export default {
         : s__('CustomCycleAnalytics|New stage');
     },
   },
-  mounted() {
-    this.labelEvents = getLabelEventsIdentifiers(this.events);
+  watch: {
+    initialFields(newFields) {
+      this.fields = {
+        ...defaultFields,
+        ...newFields,
+      };
+      this.fieldErrors = {
+        ...defaultFields,
+        ...this.errors,
+      };
+    },
   },
   methods: {
     handleCancel() {
       this.fields = {
-        ...initFields,
+        ...defaultFields,
         ...this.initialFields,
       };
       this.$emit('cancel');
@@ -167,6 +184,24 @@ export default {
     handleClearLabel(key) {
       this.fields[key] = null;
     },
+    hasFieldErrors(key) {
+      return this.fieldErrors[key]?.length > 0;
+    },
+    fieldErrorMessage(key) {
+      return this.fieldErrors[key]?.join('\n');
+    },
+    onUpdateStartEventField() {
+      const initVal = this.initialFields?.endEventIdentifier
+        ? this.initialFields.endEventIdentifier
+        : null;
+      this.$set(this.fields, 'endEventIdentifier', initVal);
+      this.$set(this.fieldErrors, 'endEventIdentifier', [
+        s__('CustomCycleAnalytics|Start event changed, please select a valid stop event'),
+      ]);
+    },
+    onUpdateEndEventField() {
+      this.$set(this.fieldErrors, 'endEventIdentifier', null);
+    },
   },
 };
 </script>
@@ -175,7 +210,13 @@ export default {
     <div class="mb-1">
       <h4>{{ formTitle }}</h4>
     </div>
-    <gl-form-group :label="s__('CustomCycleAnalytics|Name')">
+
+    <gl-form-group
+      ref="name"
+      :label="s__('CustomCycleAnalytics|Name')"
+      :state="!hasFieldErrors('name')"
+      :invalid-feedback="fieldErrorMessage('name')"
+    >
       <gl-form-input
         v-model="fields.name"
         class="form-control"
@@ -187,17 +228,28 @@ export default {
     </gl-form-group>
     <div class="d-flex" :class="{ 'justify-content-between': startEventRequiresLabel }">
       <div :class="[startEventRequiresLabel ? 'w-50 mr-1' : 'w-100']">
-        <gl-form-group :label="s__('CustomCycleAnalytics|Start event')">
+        <gl-form-group
+          ref="startEventIdentifier"
+          :label="s__('CustomCycleAnalytics|Start event')"
+          :state="!hasFieldErrors('startEventIdentifier')"
+          :invalid-feedback="fieldErrorMessage('startEventIdentifier')"
+        >
           <gl-form-select
             v-model="fields.startEventIdentifier"
             name="custom-stage-start-event"
             :required="true"
             :options="startEventOptions"
+            @change.native="onUpdateStartEventField"
           />
         </gl-form-group>
       </div>
       <div v-if="startEventRequiresLabel" class="w-50 ml-1">
-        <gl-form-group :label="s__('CustomCycleAnalytics|Start event label')">
+        <gl-form-group
+          ref="startEventLabelId"
+          :label="s__('CustomCycleAnalytics|Start event label')"
+          :state="!hasFieldErrors('startEventLabelId')"
+          :invalid-feedback="fieldErrorMessage('startEventLabelId')"
+        >
           <labels-selector
             :labels="labels"
             :selected-label-id="fields.startEventLabelId"
@@ -211,12 +263,11 @@ export default {
     <div class="d-flex" :class="{ 'justify-content-between': endEventRequiresLabel }">
       <div :class="[endEventRequiresLabel ? 'w-50 mr-1' : 'w-100']">
         <gl-form-group
+          ref="endEventIdentifier"
           :label="s__('CustomCycleAnalytics|Stop event')"
-          :description="
-            !hasStartEvent ? s__('CustomCycleAnalytics|Please select a start event first') : ''
-          "
-          :state="hasValidStartAndEndEventPair"
-          :invalid-feedback="endEventError"
+          :state="!hasFieldErrors('endEventIdentifier')"
+          :invalid-feedback="fieldErrorMessage('endEventIdentifier')"
+          @change.native="onUpdateEndEventField"
         >
           <gl-form-select
             v-model="fields.endEventIdentifier"
@@ -228,7 +279,12 @@ export default {
         </gl-form-group>
       </div>
       <div v-if="endEventRequiresLabel" class="w-50 ml-1">
-        <gl-form-group :label="s__('CustomCycleAnalytics|Stop event label')">
+        <gl-form-group
+          ref="endEventLabelId"
+          :label="s__('CustomCycleAnalytics|Stop event label')"
+          :state="!hasFieldErrors('endEventLabelId')"
+          :invalid-feedback="fieldErrorMessage('endEventLabelId')"
+        >
           <labels-selector
             :labels="labels"
             :selected-label-id="fields.endEventLabelId"

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

 <script>
+import { mapState } from 'vuex';
 import { GlTooltipDirective, GlLoadingIcon, GlEmptyState } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import StageNavItem from './stage_nav_item.vue';
@@ -63,6 +64,11 @@ export default {
       type: Array,
       required: true,
     },
+    customStageFormErrors: {
+      type: Object,
+      required: false,
+      default: () => {},
+    },
     labels: {
       type: Array,
       required: true,
@@ -86,6 +92,7 @@ export default {
     };
   },
   computed: {
+    ...mapState(['customStageFormInitialData']),
     stageEventsHeight() {
       return `${this.stageNavHeight}px`;
     },
@@ -127,27 +134,6 @@ export default {
         },
       ];
     },
-    customStageInitialData() {
-      if (this.isEditingCustomStage) {
-        const {
-          id = null,
-          name = null,
-          startEventIdentifier = null,
-          startEventLabel: { id: startEventLabelId = null } = {},
-          endEventIdentifier = null,
-          endEventLabel: { id: endEventLabelId = null } = {},
-        } = this.currentStage;
-        return {
-          id,
-          name,
-          startEventIdentifier,
-          startEventLabelId,
-          endEventIdentifier,
-          endEventLabelId,
-        };
-      }
-      return {};
-    },
   },
   mounted() {
     this.$set(this, 'stageNavHeight', this.$refs.stageNav.clientHeight);
@@ -207,11 +193,13 @@ export default {
             :events="customStageFormEvents"
             :labels="labels"
             :is-saving-custom-stage="isSavingCustomStage"
-            :initial-fields="customStageInitialData"
+            :initial-fields="customStageFormInitialData"
             :is-editing-custom-stage="isEditingCustomStage"
+            :errors="customStageFormErrors"
             @submit="$emit('submit', $event)"
             @createStage="$emit($options.STAGE_ACTIONS.CREATE, $event)"
             @updateStage="$emit($options.STAGE_ACTIONS.UPDATE, $event)"
+            @clearErrors="$emit('clearCustomStageFormErrors')"
           />
           <template v-else>
             <stage-event-list

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

@@ -2,7 +2,7 @@ import dateFormat from 'dateformat';
 import Api from 'ee/api';
 import { getDayDifference, getDateInPast } from '~/lib/utils/datetime_utility';
 import createFlash, { hideFlash } from '~/flash';
-import { __ } from '~/locale';
+import { __, sprintf } from '~/locale';
 import httpStatus from '~/lib/utils/http_status';
 import * as types from './mutation_types';
 import { dateFormats } from '../../shared/constants';
@@ -21,6 +21,14 @@ const handleErrorOrRethrow = ({ action, error }) => {
   action();
 };
 
+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 setFeatureFlags = ({ commit }, featureFlags) =>
   commit(types.SET_FEATURE_FLAGS, featureFlags);
 export const setSelectedGroup = ({ commit }, group) => commit(types.SET_SELECTED_GROUP, group);
@@ -135,12 +143,36 @@ export const fetchCycleAnalyticsData = ({ dispatch }) => {
     .catch(error => dispatch('receiveCycleAnalyticsDataError', error));
 };
 
-export const hideCustomStageForm = ({ commit }) => commit(types.HIDE_CUSTOM_STAGE_FORM);
-export const showCustomStageForm = ({ commit }) => commit(types.SHOW_CUSTOM_STAGE_FORM);
+export const hideCustomStageForm = ({ commit }) => {
+  commit(types.HIDE_CUSTOM_STAGE_FORM);
+  removeError();
+};
+
+export const showCustomStageForm = ({ commit }) => {
+  commit(types.SHOW_CUSTOM_STAGE_FORM);
+  removeError();
+};
 
-export const editCustomStage = ({ commit, dispatch }, selectedStage = {}) => {
-  commit(types.EDIT_CUSTOM_STAGE);
+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);
+  removeError();
 };
 
 export const requestSummaryData = ({ commit }) => commit(types.REQUEST_SUMMARY_DATA);
@@ -236,27 +268,36 @@ export const fetchGroupStagesAndEvents = ({ state, dispatch, getters }) => {
     );
 };
 
+export const clearCustomStageFormErrors = ({ commit }) => {
+  commit(types.CLEAR_CUSTOM_STAGE_FORM_ERRORS);
+  removeError();
+};
+
 export const requestCreateCustomStage = ({ commit }) => commit(types.REQUEST_CREATE_CUSTOM_STAGE);
 export const receiveCreateCustomStageSuccess = ({ commit, dispatch }, { data: { title } }) => {
-  commit(types.RECEIVE_CREATE_CUSTOM_STAGE_RESPONSE);
-  createFlash(__(`Your custom stage '${title}' was created`), 'notice');
+  commit(types.RECEIVE_CREATE_CUSTOM_STAGE_SUCCESS);
+  createFlash(sprintf(__(`Your custom stage '%{title}' was created`), { title }), 'notice');
 
-  return dispatch('fetchGroupStagesAndEvents').then(() => dispatch('fetchSummaryData'));
+  return Promise.resolve()
+    .then(() => dispatch('fetchGroupStagesAndEvents'))
+    .then(() => dispatch('fetchSummaryData'))
+    .catch(() => {
+      createFlash(__('There was a problem refreshing the data, please try again'));
+    });
 };
 
-export const receiveCreateCustomStageError = ({ commit }, { error, data }) => {
-  commit(types.RECEIVE_CREATE_CUSTOM_STAGE_RESPONSE);
-
-  const { name } = data;
-  const { status } = error;
-  // TODO: check for 403, 422 etc
-  // Follow up issue to investigate https://gitlab.com/gitlab-org/gitlab/issues/36685
-  const message =
-    status !== httpStatus.UNPROCESSABLE_ENTITY
-      ? __(`'${name}' stage already exists'`)
+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(message);
+  createFlash(flashMessage);
 };
 
 export const createCustomStage = ({ dispatch, state }, data) => {
@@ -266,8 +307,15 @@ export const createCustomStage = ({ dispatch, state }, data) => {
   dispatch('requestCreateCustomStage');
 
   return Api.cycleAnalyticsCreateStage(fullPath, data)
-    .then(response => dispatch('receiveCreateCustomStageSuccess', response))
-    .catch(error => dispatch('receiveCreateCustomStageError', { error, 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 });
+    });
 };
 
 export const receiveTasksByTypeDataSuccess = ({ commit }, data) => {
@@ -313,28 +361,28 @@ export const fetchTasksByTypeData = ({ dispatch, state, getters }) => {
 
 export const requestUpdateStage = ({ commit }) => commit(types.REQUEST_UPDATE_STAGE);
 export const receiveUpdateStageSuccess = ({ commit, dispatch }, updatedData) => {
-  commit(types.RECEIVE_UPDATE_STAGE_RESPONSE);
+  commit(types.RECEIVE_UPDATE_STAGE_SUCCESS);
   createFlash(__('Stage data updated'), 'notice');
 
-  dispatch('fetchGroupStagesAndEvents');
-  dispatch('setSelectedStage', updatedData);
+  return Promise.all([
+    dispatch('fetchGroupStagesAndEvents'),
+    dispatch('setSelectedStage', updatedData),
+  ]).catch(() => {
+    createFlash(__('There was a problem refreshing the data, please try again'));
+  });
 };
 
 export const receiveUpdateStageError = (
   { commit },
-  { error: { response: { status = 400, data: errorData } = {} } = {}, data },
+  { status, responseData: { errors = null } = {}, data = {} },
 ) => {
-  commit(types.RECEIVE_UPDATE_STAGE_RESPONSE);
-  const ERROR_NAME_RESERVED = 'is reserved';
+  commit(types.RECEIVE_UPDATE_STAGE_ERROR, { errors, data });
 
-  let message = __('There was a problem saving your custom stage, please try again');
-  if (status && status === httpStatus.UNPROCESSABLE_ENTITY) {
-    const { errors } = errorData;
-    const { name } = data;
-    if (errors.name && errors.name[0] === ERROR_NAME_RESERVED) {
-      message = __(`'${name}' stage already exists`);
-    }
-  }
+  const { name = null } = data;
+  const message =
+    name && isStageNameExistsError({ status, errors })
+      ? sprintf(__(`'%{name}' stage already exists`), { name })
+      : __('There was a problem saving your custom stage, please try again');
 
   createFlash(__(message));
 };
@@ -348,7 +396,9 @@ export const updateStage = ({ dispatch, state }, { id, ...rest }) => {
 
   return Api.cycleAnalyticsUpdateStage(id, fullPath, { ...rest })
     .then(({ data }) => dispatch('receiveUpdateStageSuccess', data))
-    .catch(error => dispatch('receiveUpdateStageError', { error, data: { id, ...rest } }));
+    .catch(({ response: { status = 400, data: responseData } = {} }) =>
+      dispatch('receiveUpdateStageError', { status, responseData, data: { id, ...rest } }),
+    );
 };
 
 export const requestRemoveStage = ({ commit }) => commit(types.REQUEST_REMOVE_STAGE);

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

@@ -21,7 +21,8 @@ export const RECEIVE_STAGE_MEDIANS_ERROR = 'RECEIVE_STAGE_MEDIANS_ERROR';
 
 export const HIDE_CUSTOM_STAGE_FORM = 'HIDE_CUSTOM_STAGE_FORM';
 export const SHOW_CUSTOM_STAGE_FORM = 'SHOW_CUSTOM_STAGE_FORM';
-export const EDIT_CUSTOM_STAGE = 'EDIT_CUSTOM_STAGE';
+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_GROUP_LABELS = 'REQUEST_GROUP_LABELS';
 export const RECEIVE_GROUP_LABELS_SUCCESS = 'RECEIVE_GROUP_LABELS_SUCCESS';
@@ -43,10 +44,12 @@ export const RECEIVE_TASKS_BY_TYPE_DATA_SUCCESS = 'RECEIVE_TASKS_BY_TYPE_DATA_SU
 export const RECEIVE_TASKS_BY_TYPE_DATA_ERROR = 'RECEIVE_TASKS_BY_TYPE_DATA_ERROR';
 
 export const REQUEST_CREATE_CUSTOM_STAGE = 'REQUEST_CREATE_CUSTOM_STAGE';
-export const RECEIVE_CREATE_CUSTOM_STAGE_RESPONSE = 'RECEIVE_CREATE_CUSTOM_STAGE_RESPONSE';
+export const RECEIVE_CREATE_CUSTOM_STAGE_SUCCESS = 'RECEIVE_CREATE_CUSTOM_STAGE_SUCCESS';
+export const RECEIVE_CREATE_CUSTOM_STAGE_ERROR = 'RECEIVE_CREATE_CUSTOM_STAGE_ERROR';
 
 export const REQUEST_UPDATE_STAGE = 'REQUEST_UPDATE_STAGE';
-export const RECEIVE_UPDATE_STAGE_RESPONSE = 'RECEIVE_UPDATE_STAGE_RESPONSE';
+export const RECEIVE_UPDATE_STAGE_SUCCESS = 'RECEIVE_UPDATE_STAGE_SUCCESS';
+export const RECEIVE_UPDATE_STAGE_ERROR = 'RECEIVE_UPDATE_STAGE_ERROR';
 
 export const REQUEST_REMOVE_STAGE = 'REQUEST_REMOVE_STAGE';
 export const RECEIVE_REMOVE_STAGE_RESPONSE = 'RECEIVE_REMOVE_STAGE_RESPONSE';

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

@@ -96,18 +96,24 @@ export default {
   },
   [types.SHOW_CUSTOM_STAGE_FORM](state) {
     state.isCreatingCustomStage = true;
-    state.customStageFormInitData = {};
+    state.isEditingCustomStage = false;
+    state.customStageFormInitialData = null;
+    state.customStageFormErrors = null;
   },
-  [types.EDIT_CUSTOM_STAGE](state) {
+  [types.SHOW_EDIT_CUSTOM_STAGE_FORM](state, initialData) {
     state.isEditingCustomStage = true;
+    state.isCreatingCustomStage = false;
+    state.customStageFormInitialData = initialData;
+    state.customStageFormErrors = null;
   },
   [types.HIDE_CUSTOM_STAGE_FORM](state) {
     state.isEditingCustomStage = false;
     state.isCreatingCustomStage = false;
-    state.customStageFormInitData = {};
+    state.customStageFormInitialData = null;
+    state.customStageFormErrors = null;
   },
-  [types.SHOW_CUSTOM_STAGE_FORM](state) {
-    state.isCreatingCustomStage = true;
+  [types.CLEAR_CUSTOM_STAGE_FORM_ERRORS](state) {
+    state.customStageFormErrors = null;
   },
   [types.RECEIVE_SUMMARY_DATA_ERROR](state) {
     state.summary = [];
@@ -152,16 +158,34 @@ export default {
   },
   [types.REQUEST_CREATE_CUSTOM_STAGE](state) {
     state.isSavingCustomStage = true;
+    state.customStageFormErrors = {};
+  },
+  [types.RECEIVE_CREATE_CUSTOM_STAGE_ERROR](state, { errors = null } = {}) {
+    state.isSavingCustomStage = false;
+    state.customStageFormErrors = convertObjectPropsToCamelCase(errors, { deep: true });
   },
-  [types.RECEIVE_CREATE_CUSTOM_STAGE_RESPONSE](state) {
+  [types.RECEIVE_CREATE_CUSTOM_STAGE_SUCCESS](state) {
     state.isSavingCustomStage = false;
+    state.customStageFormErrors = null;
+    state.customStageFormInitialData = null;
   },
   [types.REQUEST_UPDATE_STAGE](state) {
     state.isLoading = true;
+    state.isSavingCustomStage = true;
+    state.customStageFormErrors = null;
+  },
+  [types.RECEIVE_UPDATE_STAGE_SUCCESS](state) {
+    state.isLoading = false;
+    state.isSavingCustomStage = false;
+    state.isEditingCustomStage = false;
+    state.customStageFormErrors = null;
+    state.customStageFormInitialData = null;
   },
-  [types.RECEIVE_UPDATE_STAGE_RESPONSE](state) {
+  [types.RECEIVE_UPDATE_STAGE_ERROR](state, { errors = null, data } = {}) {
     state.isLoading = false;
     state.isSavingCustomStage = false;
+    state.customStageFormErrors = convertObjectPropsToCamelCase(errors, { deep: true });
+    state.customStageFormInitialData = convertObjectPropsToCamelCase(data, { deep: true });
   },
   [types.REQUEST_REMOVE_STAGE](state) {
     state.isLoading = true;

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

@@ -31,6 +31,9 @@ export default () => ({
   medians: {},
 
   customStageFormEvents: [],
+  customStageFormErrors: null,
+  customStageFormInitialData: null,
+
   tasksByType: {
     subject: TASKS_BY_TYPE_SUBJECT_ISSUE,
     labelIds: [],

ee/app/controllers/analytics/cycle_analytics/stages_controller.rb

@@ -120,11 +120,11 @@ module Analytics
       end
 
       def update_params
-        params.permit(:name, :start_event_identifier, :end_event_identifier, :id, :move_after_id, :move_before_id, :hidden)
+        params.permit(:name, :start_event_identifier, :end_event_identifier, :id, :move_after_id, :move_before_id, :hidden, :start_event_label_id, :end_event_label_id)
       end
 
       def create_params
-        params.permit(:name, :start_event_identifier, :end_event_identifier)
+        params.permit(:name, :start_event_identifier, :end_event_identifier, :start_event_label_id, :end_event_label_id)
       end
 
       def delete_params

ee/spec/features/analytics/cycle_analytics/cycle_analytics_spec.rb

@@ -4,13 +4,15 @@ require 'spec_helper'
 describe 'Group Value Stream Analytics', :js do
   let!(:user) { create(:user) }
   let!(:group) { create(:group, name: "CA-test-group") }
+  let!(:group2) { create(:group, name: "CA-bad-test-group") }
   let!(:project) { create(:project, :repository, namespace: group, group: group, name: "Cool fun project") }
+  let!(:label) { create(:group_label, group: group) }
+  let!(:label2) { create(:group_label, group: group) }
+  let!(:label3) { create(:group_label, group: group2) }
 
   let(:milestone) { create(:milestone, project: project) }
   let(:mr) { create_merge_request_closing_issue(user, project, issue, commit_message: "References #{issue.to_reference}") }
   let(:pipeline) { create(:ci_empty_pipeline, status: 'created', project: project, ref: mr.source_branch, sha: mr.source_branch_sha, head_pipeline_of: mr) }
-  let(:label) { create(:group_label, group: group) }
-  let(:label2) { create(:group_label, group: group) }
 
   stage_nav_selector = '.stage-nav'
 
@@ -21,6 +23,9 @@ describe 'Group Value Stream Analytics', :js do
   before do
     stub_licensed_features(cycle_analytics_for_groups: true)
 
+    # chart returns an error since theres no data
+    stub_feature_flags(Gitlab::Analytics::TASKS_BY_TYPE_CHART_FEATURE_FLAG => false)
+
     group.add_owner(user)
     project.add_maintainer(user)
 
@@ -224,6 +229,7 @@ describe 'Group Value Stream Analytics', :js do
     context 'enabled' do
       before do
         stub_licensed_features(cycle_analytics_for_groups: true, type_of_work_analytics: true)
+        stub_feature_flags(Gitlab::Analytics::TASKS_BY_TYPE_CHART_FEATURE_FLAG => true)
 
         sign_in(user)
       end
@@ -287,8 +293,11 @@ describe 'Group Value Stream Analytics', :js do
 
   describe 'Customizable cycle analytics', :js do
     custom_stage_name = "Cool beans"
+    custom_stage_with_labels_name = "Cool beans - now with labels"
     start_event_identifier = :merge_request_created
     end_event_identifier = :merge_request_merged
+    start_label_event = :issue_label_added
+    stop_label_event = :issue_label_removed
 
     let(:button_class) { '.js-add-stage-button' }
     let(:params) { { name: custom_stage_name, start_event_identifier: start_event_identifier, end_event_identifier: end_event_identifier } }
@@ -309,6 +318,15 @@ describe 'Group Value Stream Analytics', :js do
       page.find("select[name='#{name}']").all(elem)[index].select_option
     end
 
+    def select_dropdown_option_by_value(name, value, elem = "option")
+      page.find("select[name='#{name}']").find("#{elem}[value=#{value}]").select_option
+    end
+
+    def select_dropdown_label(field, index = 2)
+      page.find("[name=#{field}] .dropdown-toggle").click
+      page.find("[name=#{field}] .dropdown-menu").all('.dropdown-item')[index].click
+    end
+
     context 'enabled' do
       before do
         select_group
@@ -340,10 +358,6 @@ describe 'Group Value Stream Analytics', :js do
       context 'Custom stage form' do
         let(:show_form_button_class) { '.js-add-stage-button' }
 
-        def select_dropdown_option(name, elem = "option", index = 1)
-          page.find("select[name='#{name}']").all(elem)[index].select_option
-        end
-
         before do
           select_group
 
@@ -357,6 +371,39 @@ describe 'Group Value Stream Analytics', :js do
           end
         end
 
+        shared_examples 'submits the form successfully' do |stage_name|
+          it 'submit button is enabled' do
+            expect(page).to have_button('Add stage', disabled: false)
+          end
+
+          it 'submit button is disabled if the start event changes' do
+            select_dropdown_option 'custom-stage-start-event', 'option', 2
+
+            expect(page).to have_button('Add stage', disabled: true)
+          end
+
+          it 'the custom stage is saved' do
+            click_button 'Add stage'
+
+            expect(page).to have_selector('.stage-nav-item', text: stage_name)
+          end
+
+          it 'a confirmation message is displayed' do
+            fill_in 'custom-stage-name', with: stage_name
+            click_button 'Add stage'
+
+            expect(page.find('.flash-notice')).to have_text("Your custom stage '#{stage_name}' was created")
+          end
+
+          it 'with a default name' do
+            name = 'issue'
+            fill_in 'custom-stage-name', with: name
+            click_button 'Add stage'
+
+            expect(page.find('.flash-alert')).to have_text("'#{name}' stage already exists")
+          end
+        end
+
         context 'with all required fields set' do
           before do
             fill_in 'custom-stage-name', with: custom_stage_name
@@ -364,44 +411,48 @@ describe 'Group Value Stream Analytics', :js do
             select_dropdown_option 'custom-stage-stop-event'
           end
 
-          it 'submit button is enabled' do
-            expect(page).to have_button('Add stage', disabled: false)
+          it 'does not have label dropdowns' do
+            expect(page).not_to have_content('Start event label')
+            expect(page).not_to have_content('Stop event label')
           end
 
-          it 'submit button is disabled if the start event changes' do
-            select_dropdown_option 'custom-stage-start-event', 'option', 2
+          it_behaves_like 'submits the form successfully', custom_stage_name
+        end
 
-            expect(page).to have_button('Add stage', disabled: true)
+        context 'with label based stages selected' do
+          before do
+            fill_in 'custom-stage-name', with: custom_stage_with_labels_name
+            select_dropdown_option_by_value 'custom-stage-start-event', start_label_event
+            select_dropdown_option_by_value 'custom-stage-stop-event', stop_label_event
           end
 
-          it 'an error message is displayed if the start event is changed' do
-            select_dropdown_option 'custom-stage-start-event', 'option', 2
+          it 'has label dropdowns' do
+            expect(page).to have_content('Start event label')
+            expect(page).to have_content('Stop event label')
+          end
 
-            expect(page).to have_text 'Start event changed, please select a valid stop event'
+          it 'submit button is disabled' do
+            expect(page).to have_button('Add stage', disabled: true)
           end
 
-          context 'submit button is clicked' do
-            it 'the custom stage is saved' do
-              click_button 'Add stage'
+          it 'does not contain labels from outside the group' do
+            field = 'custom-stage-start-event-label'
+            page.find("[name=#{field}] .dropdown-toggle").click
 
-              expect(page).to have_selector('.stage-nav-item', text: custom_stage_name)
-            end
+            menu = page.find("[name=#{field}] .dropdown-menu")
 
-            it 'a confirmation message is displayed' do
-              name = 'cool beans number 2'
-              fill_in 'custom-stage-name', with: name
-              click_button 'Add stage'
+            expect(menu).not_to have_content(label3.name)
+            expect(menu).to have_content(label.name)
+            expect(menu).to have_content(label2.name)
+          end
 
-              expect(page.find('.flash-notice')).to have_text("Your custom stage '#{name}' was created")
+          context 'with all required fields set' do
+            before do
+              select_dropdown_label 'custom-stage-start-event-label', 1
+              select_dropdown_label 'custom-stage-stop-event-label', 2
             end
 
-            it 'with a default name' do
-              name = 'issue'
-              fill_in 'custom-stage-name', with: name
-              click_button 'Add stage'
-
-              expect(page.find('.flash-alert')).to have_text("'#{name}' stage already exists")
-            end
+            it_behaves_like 'submits the form successfully', custom_stage_with_labels_name
           end
         end
       end

ee/spec/frontend/analytics/cycle_analytics/components/__snapshots__/custom_stage_form_spec.js.snap

@@ -6,7 +6,7 @@ exports[`CustomStageForm Editing a custom stage isSavingCustomStage=true display
 </button>"
 `;
 
-exports[`CustomStageForm Empty form Start event with events does not select events with canBeStartEvent=false for the start events dropdown 1`] = `
+exports[`CustomStageForm Start event with events does not select events with canBeStartEvent=false for the start events dropdown 1`] = `
 "<select name=\\"custom-stage-start-event\\" required=\\"required\\" aria-required=\\"true\\" class=\\"gl-form-select custom-select\\" id=\\"__BVID__123\\">
   <option value=\\"\\">Select start event</option>
   <option value=\\"issue_created\\">Issue created</option>
@@ -29,7 +29,7 @@ exports[`CustomStageForm Empty form Start event with events does not select even
 </select>"
 `;
 
-exports[`CustomStageForm Empty form Start event with events selects events with canBeStartEvent=true for the start events dropdown 1`] = `
+exports[`CustomStageForm Start event with events selects events with canBeStartEvent=true for the start events dropdown 1`] = `
 "<select name=\\"custom-stage-start-event\\" required=\\"required\\" aria-required=\\"true\\" class=\\"gl-form-select custom-select\\" id=\\"__BVID__95\\">
   <option value=\\"\\">Select start event</option>
   <option value=\\"issue_created\\">Issue created</option>
@@ -52,7 +52,7 @@ exports[`CustomStageForm Empty form Start event with events selects events with
 </select>"
 `;
 
-exports[`CustomStageForm Empty form isSavingCustomStage=true displays a loading icon 1`] = `
+exports[`CustomStageForm isSavingCustomStage=true displays a loading icon 1`] = `
 "<button disabled=\\"disabled\\" type=\\"button\\" class=\\"js-save-stage btn btn-success\\"><span class=\\"gl-spinner-container\\"><span aria-label=\\"Loading\\" aria-hidden=\\"true\\" class=\\"gl-spinner gl-spinner-orange gl-spinner-sm\\"></span></span>
   Add stage
 </button>"

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

@@ -9,6 +9,7 @@ import {
   labelStopEvent,
   customStageStartEvents as startEvents,
   customStageStopEvents as stopEvents,
+  customStageFormErrors,
 } from '../mock_data';
 
 const initData = {
@@ -56,483 +57,462 @@ describe('CustomStageForm', () => {
     getDropdownOption(_wrapper, dropdown, index).setSelected();
   }
 
-  describe('Empty form', () => {
-    beforeEach(() => {
-      wrapper = createComponent({}, false);
+  function setEventDropdowns({ startEventDropdownIndex = 1, stopEventDropdownIndex = 1 } = {}) {
+    selectDropdownOption(wrapper, sel.startEvent, startEventDropdownIndex);
+    return Vue.nextTick().then(() => {
+      selectDropdownOption(wrapper, sel.endEvent, stopEventDropdownIndex);
     });
+  }
 
-    afterEach(() => {
-      wrapper.destroy();
+  beforeEach(() => {
+    wrapper = createComponent({});
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe.each([
+    ['Name', sel.name, true],
+    ['Start event', sel.startEvent, true],
+    ['Stop event', sel.endEvent, false],
+    ['Submit', sel.submit, false],
+    ['Cancel', sel.cancel, false],
+  ])('Default state', (field, $sel, enabledState) => {
+    const state = enabledState ? 'enabled' : 'disabled';
+    it(`field '${field}' is ${state}`, () => {
+      const el = wrapper.find($sel);
+      expect(el.exists()).toEqual(true);
+      if (!enabledState) {
+        expect(el.attributes('disabled')).toEqual('disabled');
+      } else {
+        expect(el.attributes('disabled')).toBeUndefined();
+      }
     });
+  });
 
-    describe.each([
-      ['Name', sel.name, true],
-      ['Start event', sel.startEvent, true],
-      ['Stop event', sel.endEvent, false],
-      ['Submit', sel.submit, false],
-      ['Cancel', sel.cancel, false],
-    ])('by default', (field, $sel, enabledState) => {
-      const state = enabledState ? 'enabled' : 'disabled';
-      it(`field '${field}' is ${state}`, () => {
-        const el = wrapper.find($sel);
-        expect(el.exists()).toEqual(true);
-        if (!enabledState) {
-          expect(el.attributes('disabled')).toEqual('disabled');
-        } else {
-          expect(el.attributes('disabled')).toBeUndefined();
-        }
-      });
-    });
-
-    describe('Start event', () => {
-      describe('with events', () => {
-        beforeEach(() => {
-          wrapper = createComponent({}, false);
-        });
+  describe('Start event', () => {
+    describe('with events', () => {
+      beforeEach(() => {
+        wrapper = createComponent({});
+      });
 
-        afterEach(() => {
-          wrapper.destroy();
-        });
+      afterEach(() => {
+        wrapper.destroy();
+      });
 
-        it('selects events with canBeStartEvent=true for the start events dropdown', () => {
-          const select = wrapper.find(sel.startEvent);
-          expect(select.html()).toMatchSnapshot();
-        });
+      it('selects events with canBeStartEvent=true for the start events dropdown', () => {
+        const select = wrapper.find(sel.startEvent);
+        expect(select.html()).toMatchSnapshot();
+      });
 
-        it('does not select events with canBeStartEvent=false for the start events dropdown', () => {
-          const select = wrapper.find(sel.startEvent);
-          expect(select.html()).toMatchSnapshot();
-
-          stopEvents
-            .filter(ev => !ev.canBeStartEvent)
-            .forEach(ev => {
-              expect(select.html()).not.toHaveHtml(
-                `<option value="${ev.identifier}">${ev.name}</option>`,
-              );
-            });
-        });
+      it('does not select events with canBeStartEvent=false for the start events dropdown', () => {
+        const select = wrapper.find(sel.startEvent);
+        expect(select.html()).toMatchSnapshot();
+
+        stopEvents
+          .filter(ev => !ev.canBeStartEvent)
+          .forEach(ev => {
+            expect(select.html()).not.toHaveHtml(
+              `<option value="${ev.identifier}">${ev.name}</option>`,
+            );
+          });
       });
+    });
 
-      describe('start event label', () => {
-        beforeEach(() => {
-          wrapper = createComponent({}, false);
-        });
+    describe('start event label', () => {
+      beforeEach(() => {
+        wrapper = createComponent({}, false);
+      });
 
-        afterEach(() => {
-          wrapper.destroy();
-        });
+      afterEach(() => {
+        wrapper.destroy();
+      });
 
-        it('is hidden by default', () => {
-          expect(wrapper.find(sel.startEventLabel).exists()).toEqual(false);
-        });
+      it('is hidden by default', () => {
+        expect(wrapper.find(sel.startEventLabel).exists()).toEqual(false);
+      });
 
-        it('will display the start event label field if a label event is selected', done => {
-          wrapper.setData({
-            fields: {
-              startEventIdentifier: labelStartEvent.identifier,
-            },
-          });
+      it('will display the start event label field if a label event is selected', () => {
+        wrapper.setData({
+          fields: {
+            startEventIdentifier: labelStartEvent.identifier,
+          },
+        });
 
-          Vue.nextTick(() => {
-            expect(wrapper.find(sel.startEventLabel).exists()).toEqual(true);
-            done();
-          });
+        return Vue.nextTick().then(() => {
+          expect(wrapper.find(sel.startEventLabel).exists()).toEqual(true);
         });
+      });
 
-        it('will set the "startEventLabelId" field when selected', done => {
-          const selectedLabelId = groupLabels[0].id;
-          expect(wrapper.vm.fields.startEventLabelId).toEqual(null);
+      it('will set the "startEventLabelId" field when selected', () => {
+        const selectedLabelId = groupLabels[0].id;
+        expect(wrapper.vm.fields.startEventLabelId).toEqual(null);
 
-          wrapper.find(sel.startEvent).setValue(labelStartEvent.identifier);
-          Vue.nextTick(() => {
+        wrapper.find(sel.startEvent).setValue(labelStartEvent.identifier);
+        // TODO: make func for setting single field
+        return Vue.nextTick()
+          .then(() => {
             wrapper
               .find(sel.startEventLabel)
               .findAll('.dropdown-item')
               .at(1) // item at index 0 is 'select a label'
               .trigger('click');
 
-            Vue.nextTick(() => {
-              expect(wrapper.vm.fields.startEventLabelId).toEqual(selectedLabelId);
-              done();
-            });
+            return Vue.nextTick();
+          })
+          .then(() => {
+            expect(wrapper.vm.fields.startEventLabelId).toEqual(selectedLabelId);
           });
-        });
       });
     });
+  });
 
-    describe('Stop event', () => {
-      const startEventArrayIndex = 2;
-      const startEventDropdownIndex = 1;
-      const currAllowed = startEvents[startEventArrayIndex].allowedEndEvents;
+  describe('Stop event', () => {
+    const startEventArrayIndex = 2;
+    const startEventDropdownIndex = 1;
+    const currAllowed = startEvents[startEventArrayIndex].allowedEndEvents;
 
-      beforeEach(() => {
-        wrapper = createComponent({}, false);
-      });
+    beforeEach(() => {
+      wrapper = createComponent({}, false);
+    });
 
-      it('notifies that a start event needs to be selected first', () => {
-        expect(wrapper.text()).toContain('Please select a start event first');
-      });
+    it('notifies that a start event needs to be selected first', () => {
+      expect(wrapper.text()).toContain('Please select a start event first');
+    });
 
-      it('clears notification when a start event is selected', done => {
-        selectDropdownOption(wrapper, sel.startEvent, startEventDropdownIndex);
-        Vue.nextTick(() => {
-          expect(wrapper.text()).not.toContain('Please select a start event first');
-          done();
-        });
+    it('clears notification when a start event is selected', () => {
+      selectDropdownOption(wrapper, sel.startEvent, startEventDropdownIndex);
+      return Vue.nextTick().then(() => {
+        expect(wrapper.text()).not.toContain('Please select a start event first');
       });
+    });
 
-      it('is enabled when a start event is selected', done => {
-        const el = wrapper.find(sel.endEvent);
-        expect(el.attributes('disabled')).toEqual('disabled');
+    it('is enabled when a start event is selected', () => {
+      const el = wrapper.find(sel.endEvent);
+      expect(el.attributes('disabled')).toEqual('disabled');
 
-        selectDropdownOption(wrapper, sel.startEvent, startEventDropdownIndex);
-        Vue.nextTick(() => {
-          expect(el.attributes('disabled')).toBeUndefined();
-          done();
-        });
+      selectDropdownOption(wrapper, sel.startEvent, startEventDropdownIndex);
+      return Vue.nextTick().then(() => {
+        expect(el.attributes('disabled')).toBeUndefined();
       });
+    });
 
-      it('will update the list of stop events when a start event is changed', done => {
-        let stopOptions = wrapper.find(sel.endEvent).findAll('option');
-        const selectedStartEvent = startEvents[startEventDropdownIndex];
-        expect(stopOptions.length).toEqual(1);
+    it('will update the list of stop events when a start event is changed', () => {
+      let stopOptions = wrapper.find(sel.endEvent).findAll('option');
+      const selectedStartEvent = startEvents[startEventDropdownIndex];
+      expect(stopOptions.length).toEqual(1);
 
-        selectDropdownOption(wrapper, sel.startEvent, startEventDropdownIndex);
+      selectDropdownOption(wrapper, sel.startEvent, startEventDropdownIndex);
 
-        Vue.nextTick(() => {
-          stopOptions = wrapper.find(sel.endEvent);
-          selectedStartEvent.allowedEndEvents.forEach(identifier => {
-            expect(stopOptions.html()).toContain(identifier);
-          });
-          done();
+      return Vue.nextTick().then(() => {
+        stopOptions = wrapper.find(sel.endEvent);
+        selectedStartEvent.allowedEndEvents.forEach(identifier => {
+          expect(stopOptions.html()).toContain(identifier);
         });
       });
+    });
 
-      it('will display all the valid stop events', done => {
-        let stopOptions = wrapper.find(sel.endEvent).findAll('option');
-        const possibleEndEvents = stopEvents.filter(ev => currAllowed.includes(ev.identifier));
+    it('will display all the valid stop events', () => {
+      let stopOptions = wrapper.find(sel.endEvent).findAll('option');
+      const possibleEndEvents = stopEvents.filter(ev => currAllowed.includes(ev.identifier));
 
-        expect(stopOptions.at(0).html()).toEqual('<option value="">Select stop event</option>');
+      expect(stopOptions.at(0).html()).toEqual('<option value="">Select stop event</option>');
 
-        selectDropdownOption(wrapper, sel.startEvent, startEventArrayIndex + 1);
+      selectDropdownOption(wrapper, sel.startEvent, startEventArrayIndex + 1);
 
-        Vue.nextTick(() => {
-          stopOptions = wrapper.find(sel.endEvent);
+      return Vue.nextTick().then(() => {
+        stopOptions = wrapper.find(sel.endEvent);
 
-          possibleEndEvents.forEach(({ name, identifier }) => {
-            expect(stopOptions.html()).toContain(`<option value="${identifier}">${name}</option>`);
-          });
-          done();
+        possibleEndEvents.forEach(({ name, identifier }) => {
+          expect(stopOptions.html()).toContain(`<option value="${identifier}">${name}</option>`);
         });
       });
+    });
 
-      it('will not display stop events that are not in the list of allowed stop events', done => {
-        let stopOptions = wrapper.find(sel.endEvent).findAll('option');
-        const excludedEndEvents = stopEvents.filter(ev => !currAllowed.includes(ev.identifier));
+    it('will not display stop events that are not in the list of allowed stop events', () => {
+      let stopOptions = wrapper.find(sel.endEvent).findAll('option');
+      const excludedEndEvents = stopEvents.filter(ev => !currAllowed.includes(ev.identifier));
 
-        expect(stopOptions.at(0).html()).toEqual('<option value="">Select stop event</option>');
+      expect(stopOptions.at(0).html()).toEqual('<option value="">Select stop event</option>');
 
-        selectDropdownOption(wrapper, sel.startEvent, startEventArrayIndex + 1);
+      selectDropdownOption(wrapper, sel.startEvent, startEventArrayIndex + 1);
 
-        Vue.nextTick(() => {
-          stopOptions = wrapper.find(sel.endEvent);
+      return Vue.nextTick().then(() => {
+        stopOptions = wrapper.find(sel.endEvent);
 
-          excludedEndEvents.forEach(({ name, identifier }) => {
-            expect(wrapper.find(sel.endEvent).html()).not.toHaveHtml(
-              `<option value="${identifier}">${name}</option>`,
-            );
-          });
-          done();
+        excludedEndEvents.forEach(({ name, identifier }) => {
+          expect(wrapper.find(sel.endEvent).html()).not.toHaveHtml(
+            `<option value="${identifier}">${name}</option>`,
+          );
         });
       });
+    });
 
-      describe('with a stop event selected and a change to the start event', () => {
-        beforeEach(() => {
-          wrapper = createComponent({}, false);
-
-          wrapper.setData({
-            fields: {
-              name: 'Cool stage',
-              startEventIdentifier: 'issue_created',
-              startEventLabelId: null,
-              endEventIdentifier: 'issue_stage_end',
-              endEventLabelId: null,
-            },
-          });
-        });
+    describe('with a stop event selected and a change to the start event', () => {
+      beforeEach(() => {
+        wrapper = createComponent({});
 
-        afterEach(() => {
-          wrapper.destroy();
+        wrapper.setData({
+          fields: {
+            name: 'Cool stage',
+            startEventIdentifier: 'issue_created',
+            startEventLabelId: null,
+            endEventIdentifier: 'issue_stage_end',
+            endEventLabelId: null,
+          },
         });
+      });
 
-        it('will notify if the current start and stop event pair is not valid', done => {
-          expect(wrapper.find(sel.invalidFeedback).exists()).toEqual(false);
+      afterEach(() => {
+        wrapper.destroy();
+      });
 
-          selectDropdownOption(wrapper, sel.startEvent, 2);
+      it('will notify if the current start and stop event pair is not valid', () => {
+        selectDropdownOption(wrapper, sel.startEvent, 2);
 
-          Vue.nextTick(() => {
-            expect(wrapper.find(sel.invalidFeedback).exists()).toEqual(true);
-            expect(wrapper.find(sel.invalidFeedback).text()).toContain(
-              'Start event changed, please select a valid stop event',
-            );
-            done();
-          });
+        return Vue.nextTick().then(() => {
+          expect(wrapper.find(sel.invalidFeedback).exists()).toEqual(true);
+          expect(wrapper.find(sel.invalidFeedback).text()).toContain(
+            'Start event changed, please select a valid stop event',
+          );
         });
+      });
 
-        it('will update the list of stop events', done => {
-          const se = wrapper.vm.endEventOptions;
-          selectDropdownOption(wrapper, sel.startEvent, 2);
-          Vue.nextTick(() => {
-            expect(se[1].value).not.toEqual(wrapper.vm.endEventOptions[1].value);
-            done();
-          });
+      it('will update the list of stop events', () => {
+        const se = wrapper.vm.endEventOptions;
+        selectDropdownOption(wrapper, sel.startEvent, 2);
+        return Vue.nextTick().then(() => {
+          expect(se[1].value).not.toEqual(wrapper.vm.endEventOptions[1].value);
         });
+      });
 
-        it('will disable the submit button until a valid endEvent is selected', done => {
-          selectDropdownOption(wrapper, sel.startEvent, 2);
-          Vue.nextTick(() => {
-            expect(wrapper.find(sel.submit).attributes('disabled')).toEqual('disabled');
-            done();
-          });
+      it('will disable the submit button until a valid endEvent is selected', () => {
+        selectDropdownOption(wrapper, sel.startEvent, 2);
+        return Vue.nextTick().then(() => {
+          expect(wrapper.find(sel.submit).attributes('disabled')).toEqual('disabled');
         });
       });
+    });
 
-      describe('Stop event label', () => {
-        beforeEach(() => {
-          wrapper = createComponent({}, false);
-        });
+    describe('Stop event label', () => {
+      beforeEach(() => {
+        wrapper = createComponent({});
+      });
 
-        afterEach(() => {
-          wrapper.destroy();
-        });
+      afterEach(() => {
+        wrapper.destroy();
+      });
 
-        it('is hidden by default', () => {
-          expect(wrapper.find(sel.startEventLabel).exists()).toEqual(false);
-        });
+      it('is hidden by default', () => {
+        expect(wrapper.find(sel.startEventLabel).exists()).toEqual(false);
+      });
 
-        it('will display the stop event label field if a label event is selected', done => {
-          expect(wrapper.find(sel.endEventLabel).exists()).toEqual(false);
+      it('will display the stop event label field if a label event is selected', () => {
+        expect(wrapper.find(sel.endEventLabel).exists()).toEqual(false);
 
-          wrapper.setData({
-            fields: {
-              endEventIdentifier: labelStopEvent.identifier,
-              startEventIdentifier: labelStartEvent.identifier,
-            },
-          });
+        wrapper.setData({
+          fields: {
+            endEventIdentifier: labelStopEvent.identifier,
+            startEventIdentifier: labelStartEvent.identifier,
+          },
+        });
 
-          Vue.nextTick(() => {
-            expect(wrapper.find(sel.endEventLabel).exists()).toEqual(true);
-            done();
-          });
+        return Vue.nextTick().then(() => {
+          expect(wrapper.find(sel.endEventLabel).exists()).toEqual(true);
         });
+      });
 
-        it('will set the "endEventLabelId" field when selected', done => {
-          const selectedLabelId = groupLabels[1].id;
-          expect(wrapper.vm.fields.endEventLabelId).toEqual(null);
+      it('will set the "endEventLabelId" field when selected', () => {
+        const selectedLabelId = groupLabels[1].id;
+        expect(wrapper.vm.fields.endEventLabelId).toEqual(null);
 
-          wrapper.setData({
-            fields: {
-              startEventIdentifier: labelStartEvent.identifier,
-              endEventIdentifier: labelStopEvent.identifier,
-            },
-          });
+        wrapper.setData({
+          fields: {
+            startEventIdentifier: labelStartEvent.identifier,
+            endEventIdentifier: labelStopEvent.identifier,
+          },
+        });
 
-          Vue.nextTick(() => {
+        return Vue.nextTick()
+          .then(() => {
             wrapper
               .find(sel.endEventLabel)
               .findAll('.dropdown-item')
               .at(2) // item at index 0 is 'select a label'
               .trigger('click');
 
-            Vue.nextTick(() => {
-              expect(wrapper.vm.fields.endEventLabelId).toEqual(selectedLabelId);
-              done();
-            });
+            return Vue.nextTick();
+          })
+          .then(() => {
+            expect(wrapper.vm.fields.endEventLabelId).toEqual(selectedLabelId);
           });
-        });
       });
     });
+  });
 
-    describe('Add stage button', () => {
-      beforeEach(() => {
-        wrapper = createComponent({}, false);
+  describe('Add stage button', () => {
+    beforeEach(() => {
+      wrapper = createComponent({});
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
 
-        selectDropdownOption(wrapper, sel.startEvent, 1);
+    it('has text `Add stage`', () => {
+      expect(wrapper.find(sel.submit).text()).toEqual('Add stage');
+    });
 
-        return Vue.nextTick(() => {
-          selectDropdownOption(wrapper, sel.endEvent, 1);
-          return Vue.nextTick();
-        });
-      });
+    it('is enabled when all required fields are filled', () => {
+      const btn = wrapper.find(sel.submit);
 
-      afterEach(() => {
-        wrapper.destroy();
-      });
+      expect(btn.attributes('disabled')).toEqual('disabled');
+      wrapper.find(sel.name).setValue('Cool stage');
 
-      it('has text `Add stage`', () => {
-        expect(wrapper.find(sel.submit).text('value')).toEqual('Add stage');
+      return setEventDropdowns().then(() => {
+        expect(btn.attributes('disabled')).toBeUndefined();
       });
+    });
 
-      it('is enabled when all required fields are filled', done => {
-        const btn = wrapper.find(sel.submit);
+    describe('with all fields set', () => {
+      const startEventDropdownIndex = 2;
+      const startEventArrayIndex = startEventDropdownIndex - 1;
+      const stopEventDropdownIndex = 1;
 
-        expect(btn.attributes('disabled')).toEqual('disabled');
+      beforeEach(() => {
+        wrapper = createComponent({});
         wrapper.find(sel.name).setValue('Cool stage');
-
-        Vue.nextTick(() => {
-          expect(btn.attributes('disabled')).toBeUndefined();
-          done();
-        });
+        return Vue.nextTick().then(() =>
+          setEventDropdowns({ startEventDropdownIndex, stopEventDropdownIndex }),
+        );
       });
 
-      describe('with all fields set', () => {
-        const startEventDropdownIndex = 2;
-        const startEventArrayIndex = startEventDropdownIndex - 1;
-        const stopEventIndex = 1;
-
-        beforeEach(() => {
-          wrapper = createComponent({}, false);
+      afterEach(() => {
+        wrapper.destroy();
+      });
 
-          selectDropdownOption(wrapper, sel.startEvent, startEventDropdownIndex);
+      it(`emits a ${STAGE_ACTIONS.CREATE} event when clicked`, () => {
+        let event = findEvent(STAGE_ACTIONS.CREATE);
+        expect(event).toBeUndefined();
 
-          return Vue.nextTick()
-            .then(() => {
-              selectDropdownOption(wrapper, sel.endEvent, stopEventIndex);
-              return Vue.nextTick();
-            })
-            .then(() => {
-              wrapper.find(sel.name).setValue('Cool stage');
-              return Vue.nextTick();
-            });
-        });
+        wrapper.find(sel.submit).trigger('click');
 
-        afterEach(() => {
-          wrapper.destroy();
+        return Vue.nextTick().then(() => {
+          event = findEvent(STAGE_ACTIONS.CREATE);
+          expect(event).toBeTruthy();
+          expect(event.length).toEqual(1);
         });
+      });
 
-        it(`emits a ${STAGE_ACTIONS.CREATE} event when clicked`, done => {
-          let event = findEvent(STAGE_ACTIONS.CREATE);
-          expect(event).toBeUndefined();
-
-          wrapper.find(sel.submit).trigger('click');
+      it(`${STAGE_ACTIONS.CREATE} event receives the latest data`, () => {
+        const startEv = startEvents[startEventArrayIndex];
+        const selectedStopEvent = getDropdownOption(wrapper, sel.endEvent, stopEventDropdownIndex);
+        let event = findEvent(STAGE_ACTIONS.CREATE);
+        expect(event).toBeUndefined();
 
-          Vue.nextTick(() => {
-            event = findEvent(STAGE_ACTIONS.CREATE);
-            expect(event).toBeTruthy();
-            expect(event.length).toEqual(1);
-            done();
-          });
-        });
+        const res = [
+          {
+            id: null,
+            name: 'Cool stage',
+            start_event_identifier: startEv.identifier,
+            start_event_label_id: null,
+            end_event_identifier: selectedStopEvent.attributes('value'),
+            end_event_label_id: null,
+          },
+        ];
 
-        it(`${STAGE_ACTIONS.CREATE} event receives the latest data`, () => {
-          const startEv = startEvents[startEventArrayIndex];
-          const selectedStopEvent = getDropdownOption(wrapper, sel.endEvent, stopEventIndex);
-          let event = findEvent(STAGE_ACTIONS.CREATE);
-          expect(event).toBeUndefined();
-
-          const res = [
-            {
-              id: null,
-              name: 'Cool stage',
-              start_event_identifier: startEv.identifier,
-              start_event_label_id: null,
-              end_event_identifier: selectedStopEvent.attributes('value'),
-              end_event_label_id: null,
-            },
-          ];
-
-          wrapper.find(sel.submit).trigger('click');
-          return Vue.nextTick().then(() => {
-            event = findEvent(STAGE_ACTIONS.CREATE);
-            expect(event[0]).toEqual(res);
-          });
+        wrapper.find(sel.submit).trigger('click');
+        return Vue.nextTick().then(() => {
+          event = findEvent(STAGE_ACTIONS.CREATE);
+          expect(event[0]).toEqual(res);
         });
       });
     });
+  });
 
-    describe('Cancel button', () => {
-      beforeEach(() => {
-        wrapper = createComponent({}, false);
-      });
+  describe('Cancel button', () => {
+    beforeEach(() => {
+      wrapper = createComponent({});
+    });
 
-      afterEach(() => {
-        wrapper.destroy();
-      });
+    afterEach(() => {
+      wrapper.destroy();
+    });
 
-      it('is enabled when the form is dirty', done => {
-        const btn = wrapper.find(sel.cancel);
+    it('is enabled when the form is dirty', () => {
+      const btn = wrapper.find(sel.cancel);
 
-        expect(btn.attributes('disabled')).toEqual('disabled');
-        wrapper.find(sel.name).setValue('Cool stage');
+      expect(btn.attributes('disabled')).toEqual('disabled');
+      wrapper.find(sel.name).setValue('Cool stage');
 
-        Vue.nextTick(() => {
-          expect(btn.attributes('disabled')).toBeUndefined();
-          done();
-        });
+      return Vue.nextTick().then(() => {
+        expect(btn.attributes('disabled')).toBeUndefined();
       });
+    });
 
-      it('will reset the fields when clicked', done => {
-        wrapper.setData({
-          fields: {
-            name: 'Cool stage pre',
-            startEventIdentifier: labelStartEvent.identifier,
-            endEventIdentifier: labelStopEvent.identifier,
-          },
-        });
+    it('will reset the fields when clicked', () => {
+      wrapper.setData({
+        fields: {
+          name: 'Cool stage pre',
+          startEventIdentifier: labelStartEvent.identifier,
+          endEventIdentifier: labelStopEvent.identifier,
+        },
+      });
 
-        Vue.nextTick(() => {
+      return Vue.nextTick()
+        .then(() => {
           wrapper.find(sel.cancel).trigger('click');
 
-          Vue.nextTick(() => {
-            expect(wrapper.vm.fields).toEqual({
-              id: null,
-              name: null,
-              startEventIdentifier: null,
-              startEventLabelId: null,
-              endEventIdentifier: null,
-              endEventLabelId: null,
-            });
-            done();
+          return Vue.nextTick();
+        })
+        .then(() => {
+          expect(wrapper.vm.fields).toEqual({
+            id: null,
+            name: null,
+            startEventIdentifier: null,
+            startEventLabelId: null,
+            endEventIdentifier: null,
+            endEventLabelId: null,
           });
         });
-      });
+    });
 
-      it('will emit the `cancel` event when clicked', done => {
-        let ev = findEvent('cancel');
-        expect(ev).toBeUndefined();
+    it('will emit the `cancel` event when clicked', () => {
+      let ev = findEvent('cancel');
+      expect(ev).toBeUndefined();
 
-        wrapper.setData({
-          fields: {
-            name: 'Cool stage pre',
-          },
-        });
+      wrapper.setData({
+        fields: {
+          name: 'Cool stage pre',
+        },
+      });
 
-        Vue.nextTick(() => {
+      return Vue.nextTick()
+        .then(() => {
           wrapper.find(sel.cancel).trigger('click');
-
-          Vue.nextTick(() => {
-            ev = findEvent('cancel');
-            expect(ev).toBeTruthy();
-            expect(ev.length).toEqual(1);
-            done();
-          });
+          return Vue.nextTick();
+        })
+        .then(() => {
+          ev = findEvent('cancel');
+          expect(ev).toBeTruthy();
+          expect(ev.length).toEqual(1);
         });
-      });
     });
+  });
 
-    describe('isSavingCustomStage=true', () => {
-      beforeEach(() => {
-        wrapper = createComponent(
-          {
-            isSavingCustomStage: true,
-          },
-          false,
-        );
-      });
+  describe('isSavingCustomStage=true', () => {
+    beforeEach(() => {
+      wrapper = createComponent(
+        {
+          isSavingCustomStage: true,
+        },
+        false,
+      );
+    });
 
-      it('displays a loading icon', () => {
-        expect(wrapper.find(sel.submit).html()).toMatchSnapshot();
-      });
+    it('displays a loading icon', () => {
+      expect(wrapper.find(sel.submit).html()).toMatchSnapshot();
     });
   });
 
@@ -562,7 +542,7 @@ describe('CustomStageForm', () => {
     });
 
     describe('Cancel button', () => {
-      it('will reset the fields to initial state when clicked', done => {
+      it('will reset the fields to initial state when clicked', () => {
         wrapper.setData({
           fields: {
             name: 'Cool stage pre',
@@ -571,16 +551,14 @@ describe('CustomStageForm', () => {
           },
         });
 
-        Vue.nextTick(() => {
-          wrapper.find(sel.cancel).trigger('click');
-
-          Vue.nextTick(() => {
-            expect(wrapper.vm.fields).toEqual({
-              ...initData,
-            });
-            done();
+        return Vue.nextTick()
+          .then(() => {
+            wrapper.find(sel.cancel).trigger('click');
+            return Vue.nextTick();
+          })
+          .then(() => {
+            expect(wrapper.vm.fields).toEqual({ ...initData });
           });
-        });
       });
     });
 
@@ -593,33 +571,31 @@ describe('CustomStageForm', () => {
         expect(wrapper.find(sel.submit).attributes('disabled')).toEqual('disabled');
       });
 
-      it('is enabled when a field is changed and fields are valid', done => {
+      it('is enabled when a field is changed and fields are valid', () => {
         wrapper.setData({
           fields: {
             name: 'Cool updated form',
           },
         });
 
-        Vue.nextTick(() => {
+        return Vue.nextTick().then(() => {
           expect(wrapper.find(sel.submit).attributes('disabled')).toBeUndefined();
-          done();
         });
       });
 
-      it('is disabled when a field is changed but fields are incomplete', done => {
+      it('is disabled when a field is changed but fields are incomplete', () => {
         wrapper.setData({
           fields: {
             name: '',
           },
         });
 
-        Vue.nextTick(() => {
+        return Vue.nextTick().then(() => {
           expect(wrapper.find(sel.submit).attributes('disabled')).toEqual('disabled');
-          done();
         });
       });
 
-      it(`emits a ${STAGE_ACTIONS.UPDATE} event when clicked`, done => {
+      it(`emits a ${STAGE_ACTIONS.UPDATE} event when clicked`, () => {
         let ev = findEvent(STAGE_ACTIONS.UPDATE);
         expect(ev).toBeUndefined();
 
@@ -629,29 +605,31 @@ describe('CustomStageForm', () => {
           },
         });
 
-        Vue.nextTick(() => {
-          wrapper.find(sel.submit).trigger('click');
-
-          Vue.nextTick(() => {
+        return Vue.nextTick()
+          .then(() => {
+            wrapper.find(sel.submit).trigger('click');
+            return Vue.nextTick();
+          })
+          .then(() => {
             ev = findEvent(STAGE_ACTIONS.UPDATE);
             expect(ev).toBeTruthy();
             expect(ev.length).toEqual(1);
-            done();
           });
-        });
       });
 
-      it('`submit` event receives the latest data', done => {
+      it('`submit` event receives the latest data', () => {
         wrapper.setData({
           fields: {
             name: 'Cool updated form',
           },
         });
 
-        Vue.nextTick(() => {
-          wrapper.find(sel.submit).trigger('click');
-
-          Vue.nextTick(() => {
+        return Vue.nextTick()
+          .then(() => {
+            wrapper.find(sel.submit).trigger('click');
+            return Vue.nextTick();
+          })
+          .then(() => {
             const submitted = findEvent(STAGE_ACTIONS.UPDATE)[0];
             expect(submitted).not.toEqual([initData]);
             expect(submitted).toEqual([
@@ -664,30 +642,44 @@ describe('CustomStageForm', () => {
                 name: 'Cool updated form',
               },
             ]);
-
-            done();
           });
-        });
       });
     });
 
     describe('isSavingCustomStage=true', () => {
       beforeEach(() => {
-        wrapper = createComponent(
-          {
-            isEditingCustomStage: true,
-            initialFields: {
-              ...initData,
-            },
-            isSavingCustomStage: true,
+        wrapper = createComponent({
+          isEditingCustomStage: true,
+          initialFields: {
+            ...initData,
           },
-          false,
-        );
+          isSavingCustomStage: true,
+        });
       });
-
       it('displays a loading icon', () => {
         expect(wrapper.find(sel.submit).html()).toMatchSnapshot();
       });
     });
   });
+
+  describe('With errors', () => {
+    beforeEach(() => {
+      wrapper = createComponent({
+        initialFields: initData,
+        errors: customStageFormErrors,
+      });
+
+      return Vue.nextTick();
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
+    it('renders the errors for the relevant fields', () => {
+      expect(wrapper.find({ ref: 'name' }).html()).toContain('is reserved');
+      expect(wrapper.find({ ref: 'name' }).html()).toContain('cant be blank');
+      expect(wrapper.find({ ref: 'startEventIdentifier' }).html()).toContain('cant be blank');
+    });
+  });
 });

ee/spec/frontend/analytics/cycle_analytics/mock_data.js

@@ -118,6 +118,13 @@ export const labelStopEvent = customStageLabelEvents.find(
   ev => ev.identifier === labelStartEvent.allowedEndEvents[0],
 );
 
+export const rawCustomStageFormErrors = {
+  name: ['is reserved', 'cant be blank'],
+  start_event_identifier: ['cant be blank'],
+};
+
+export const customStageFormErrors = convertObjectPropsToCamelCase(rawCustomStageFormErrors);
+
 const dateRange = getDatesInRange(startDate, endDate, toYmd);
 
 export const tasksByTypeData = getJSONFixture('analytics/type_of_work/tasks_by_type.json').map(

ee/spec/frontend/analytics/cycle_analytics/store/actions_spec.js

@@ -6,6 +6,7 @@ import * as actions from 'ee/analytics/cycle_analytics/store/actions';
 import * as types from 'ee/analytics/cycle_analytics/store/mutation_types';
 import { TASKS_BY_TYPE_FILTERS } from 'ee/analytics/cycle_analytics/constants';
 import createFlash from '~/flash';
+import httpStatusCodes from '~/lib/utils/http_status';
 import {
   group,
   summaryData,
@@ -21,7 +22,7 @@ import {
 } from '../mock_data';
 
 const stageData = { events: [] };
-const error = new Error('Request failed with status code 404');
+const error = new Error(`Request failed with status code ${httpStatusCodes.NOT_FOUND}`);
 const flashErrorMessage = 'There was an error while fetching value stream analytics data.';
 const selectedGroup = { fullPath: group.path };
 const [selectedStage] = stages;
@@ -125,7 +126,7 @@ describe('Cycle analytics actions', () => {
     describe('with a failing request', () => {
       beforeEach(() => {
         mock = new MockAdapter(axios);
-        mock.onGet(endpoints.stageData).replyOnce(404, { error });
+        mock.onGet(endpoints.stageData).replyOnce(httpStatusCodes.NOT_FOUND, { error });
       });
 
       it('dispatches receiveStageDataError on error', done => {
@@ -620,12 +621,13 @@ describe('Cycle analytics actions', () => {
       beforeEach(() => {
         setFixtures('<div class="flash-container"></div>');
         mock = new MockAdapter(axios);
-        mock.onPut(stageEndpoint({ stageId })).replyOnce(404);
+        mock.onPut(stageEndpoint({ stageId })).replyOnce(httpStatusCodes.NOT_FOUND);
       });
 
       it('dispatches receiveUpdateStageError', done => {
         const data = {
           id: stageId,
+          name: 'issue',
           ...payload,
         };
         testAction(
@@ -637,7 +639,10 @@ describe('Cycle analytics actions', () => {
             { type: 'requestUpdateStage' },
             {
               type: 'receiveUpdateStageError',
-              payload: { error, data },
+              payload: {
+                status: httpStatusCodes.NOT_FOUND,
+                data,
+              },
             },
           ],
           done,
@@ -651,13 +656,9 @@ describe('Cycle analytics actions', () => {
             state,
           },
           {
-            error: {
-              response: {
-                status: 422,
-                data: {
-                  errors: { name: ['is reserved'] },
-                },
-              },
+            status: httpStatusCodes.UNPROCESSABLE_ENTITY,
+            responseData: {
+              errors: { name: ['is reserved'] },
             },
             data: {
               name: stageId,
@@ -675,13 +676,60 @@ describe('Cycle analytics actions', () => {
             commit: () => {},
             state,
           },
-          {},
+          { status: httpStatusCodes.BAD_REQUEST },
         );
 
         shouldFlashAMessage('There was a problem saving your custom stage, please try again');
         done();
       });
     });
+
+    describe('receiveUpdateStageSuccess', () => {
+      beforeEach(() => {
+        setFixtures('<div class="flash-container"></div>');
+      });
+
+      const response = {
+        title: 'NEW - COOL',
+      };
+
+      it('will dispatch fetchGroupStagesAndEvents and fetchSummaryData', () =>
+        testAction(
+          actions.receiveUpdateStageSuccess,
+          response,
+          state,
+          [{ type: types.RECEIVE_UPDATE_STAGE_SUCCESS }],
+          [{ type: 'fetchGroupStagesAndEvents' }, { type: 'setSelectedStage', payload: response }],
+        ));
+
+      it('will flash a success message', () =>
+        actions
+          .receiveUpdateStageSuccess(
+            {
+              dispatch: () => {},
+              commit: () => {},
+            },
+            response,
+          )
+          .then(() => {
+            shouldFlashAMessage('Stage data updated');
+          }));
+
+      describe('with an error', () => {
+        it('will flash an error message', () =>
+          actions
+            .receiveUpdateStageSuccess(
+              {
+                dispatch: () => Promise.reject(),
+                commit: () => {},
+              },
+              response,
+            )
+            .then(() => {
+              shouldFlashAMessage('There was a problem refreshing the data, please try again');
+            }));
+      });
+    });
   });
 
   describe('removeStage', () => {
@@ -712,7 +760,7 @@ describe('Cycle analytics actions', () => {
     describe('with a failed request', () => {
       beforeEach(() => {
         mock = new MockAdapter(axios);
-        mock.onDelete(stageEndpoint({ stageId })).replyOnce(404);
+        mock.onDelete(stageEndpoint({ stageId })).replyOnce(httpStatusCodes.NOT_FOUND);
       });
 
       it('dispatches receiveRemoveStageError', done => {
@@ -1189,7 +1237,7 @@ describe('Cycle analytics actions', () => {
 
     describe('with a failing request', () => {
       beforeEach(() => {
-        mock.onGet(endpoints.stageMedian).reply(404, { error });
+        mock.onGet(endpoints.stageMedian).reply(httpStatusCodes.NOT_FOUND, { error });
       });
 
       it('will dispatch receiveStageMedianValuesError', done => {
@@ -1276,4 +1324,156 @@ describe('Cycle analytics actions', () => {
       );
     });
   });
+
+  describe('createCustomStage', () => {
+    describe('with valid data', () => {
+      const customStageData = {
+        startEventIdentifier: 'start_event',
+        endEventIdentifier: 'end_event',
+        name: 'cool-new-stage',
+      };
+
+      beforeEach(() => {
+        state = { ...state, selectedGroup };
+        mock.onPost(endpoints.baseStagesEndpointstageData).reply(201, customStageData);
+      });
+
+      it(`dispatches the 'receiveCreateCustomStageSuccess' action`, () =>
+        testAction(
+          actions.createCustomStage,
+          customStageData,
+          state,
+          [],
+          [
+            { type: 'requestCreateCustomStage' },
+            {
+              type: 'receiveCreateCustomStageSuccess',
+              payload: { data: customStageData, status: 201 },
+            },
+          ],
+        ));
+    });
+
+    describe('with errors', () => {
+      const message = 'failed';
+      const errors = {
+        endEventIdentifier: ['Cant be blank'],
+      };
+      const customStageData = {
+        startEventIdentifier: 'start_event',
+        endEventIdentifier: '',
+        name: 'cool-new-stage',
+      };
+
+      beforeEach(() => {
+        state = { ...state, selectedGroup };
+        mock
+          .onPost(endpoints.baseStagesEndpointstageData)
+          .reply(httpStatusCodes.UNPROCESSABLE_ENTITY, {
+            message,
+            errors,
+          });
+      });
+
+      it(`dispatches the 'receiveCreateCustomStageError' action`, () =>
+        testAction(
+          actions.createCustomStage,
+          customStageData,
+          state,
+          [],
+          [
+            { type: 'requestCreateCustomStage' },
+            {
+              type: 'receiveCreateCustomStageError',
+              payload: {
+                data: customStageData,
+                errors,
+                message,
+                status: httpStatusCodes.UNPROCESSABLE_ENTITY,
+              },
+            },
+          ],
+        ));
+    });
+  });
+
+  describe('receiveCreateCustomStageError', () => {
+    const response = {
+      data: { name: 'uh oh' },
+    };
+
+    beforeEach(() => {
+      setFixtures('<div class="flash-container"></div>');
+    });
+
+    it('will commit the RECEIVE_CREATE_CUSTOM_STAGE_ERROR mutation', () =>
+      testAction(actions.receiveCreateCustomStageError, response, state, [
+        { type: types.RECEIVE_CREATE_CUSTOM_STAGE_ERROR, payload: { errors: {} } },
+      ]));
+
+    it('will flash an error message', done => {
+      actions.receiveCreateCustomStageError(
+        {
+          commit: () => {},
+        },
+        response,
+      );
+
+      shouldFlashAMessage('There was a problem saving your custom stage, please try again');
+      done();
+    });
+
+    describe('with a stage name error', () => {
+      it('will flash an error message', done => {
+        actions.receiveCreateCustomStageError(
+          {
+            commit: () => {},
+          },
+          {
+            ...response,
+            status: httpStatusCodes.UNPROCESSABLE_ENTITY,
+            errors: { name: ['is reserved'] },
+          },
+        );
+
+        shouldFlashAMessage("'uh oh' stage already exists");
+        done();
+      });
+    });
+  });
+
+  describe('receiveCreateCustomStageSuccess', () => {
+    const response = {
+      data: {
+        title: 'COOL',
+      },
+    };
+
+    it('will dispatch fetchGroupStagesAndEvents and fetchSummaryData', () =>
+      testAction(
+        actions.receiveCreateCustomStageSuccess,
+        response,
+        state,
+        [{ type: types.RECEIVE_CREATE_CUSTOM_STAGE_SUCCESS }],
+        [{ type: 'fetchGroupStagesAndEvents' }, { type: 'fetchSummaryData' }],
+      ));
+
+    describe('with an error', () => {
+      beforeEach(() => {
+        setFixtures('<div class="flash-container"></div>');
+      });
+      it('will flash an error message', () =>
+        actions
+          .receiveCreateCustomStageSuccess(
+            {
+              dispatch: () => Promise.reject(),
+              commit: () => {},
+            },
+            response,
+          )
+          .then(() => {
+            shouldFlashAMessage('There was a problem refreshing the data, please try again');
+          }));
+    });
+  });
 });

ee/spec/frontend/analytics/cycle_analytics/store/mutations_spec.js

@@ -37,8 +37,15 @@ describe('Cycle analytics mutations', () => {
   it.each`
     mutation                                       | stateKey                              | value
     ${types.HIDE_CUSTOM_STAGE_FORM}                | ${'isCreatingCustomStage'}            | ${false}
+    ${types.HIDE_CUSTOM_STAGE_FORM}                | ${'isEditingCustomStage'}             | ${false}
+    ${types.HIDE_CUSTOM_STAGE_FORM}                | ${'customStageFormErrors'}            | ${null}
+    ${types.HIDE_CUSTOM_STAGE_FORM}                | ${'customStageFormInitialData'}       | ${null}
     ${types.SHOW_CUSTOM_STAGE_FORM}                | ${'isCreatingCustomStage'}            | ${true}
-    ${types.EDIT_CUSTOM_STAGE}                     | ${'isEditingCustomStage'}             | ${true}
+    ${types.SHOW_CUSTOM_STAGE_FORM}                | ${'isEditingCustomStage'}             | ${false}
+    ${types.SHOW_CUSTOM_STAGE_FORM}                | ${'customStageFormErrors'}            | ${null}
+    ${types.SHOW_EDIT_CUSTOM_STAGE_FORM}           | ${'isEditingCustomStage'}             | ${true}
+    ${types.SHOW_EDIT_CUSTOM_STAGE_FORM}           | ${'isCreatingCustomStage'}            | ${false}
+    ${types.SHOW_EDIT_CUSTOM_STAGE_FORM}           | ${'customStageFormErrors'}            | ${null}
     ${types.REQUEST_STAGE_DATA}                    | ${'isLoadingStage'}                   | ${true}
     ${types.RECEIVE_STAGE_DATA_ERROR}              | ${'isEmptyStage'}                     | ${true}
     ${types.RECEIVE_STAGE_DATA_ERROR}              | ${'isLoadingStage'}                   | ${false}
@@ -52,11 +59,20 @@ describe('Cycle analytics mutations', () => {
     ${types.RECEIVE_GROUP_STAGES_AND_EVENTS_ERROR} | ${'customStageFormEvents'}            | ${[]}
     ${types.REQUEST_GROUP_STAGES_AND_EVENTS}       | ${'customStageFormEvents'}            | ${[]}
     ${types.REQUEST_CREATE_CUSTOM_STAGE}           | ${'isSavingCustomStage'}              | ${true}
-    ${types.RECEIVE_CREATE_CUSTOM_STAGE_RESPONSE}  | ${'isSavingCustomStage'}              | ${false}
+    ${types.RECEIVE_CREATE_CUSTOM_STAGE_SUCCESS}   | ${'isSavingCustomStage'}              | ${false}
+    ${types.RECEIVE_CREATE_CUSTOM_STAGE_ERROR}     | ${'isSavingCustomStage'}              | ${false}
+    ${types.RECEIVE_CREATE_CUSTOM_STAGE_ERROR}     | ${'customStageFormErrors'}            | ${{}}
     ${types.REQUEST_TASKS_BY_TYPE_DATA}            | ${'isLoadingTasksByTypeChart'}        | ${true}
     ${types.RECEIVE_TASKS_BY_TYPE_DATA_ERROR}      | ${'isLoadingTasksByTypeChart'}        | ${false}
     ${types.REQUEST_UPDATE_STAGE}                  | ${'isLoading'}                        | ${true}
-    ${types.RECEIVE_UPDATE_STAGE_RESPONSE}         | ${'isLoading'}                        | ${false}
+    ${types.REQUEST_UPDATE_STAGE}                  | ${'isSavingCustomStage'}              | ${true}
+    ${types.REQUEST_UPDATE_STAGE}                  | ${'customStageFormErrors'}            | ${null}
+    ${types.RECEIVE_UPDATE_STAGE_SUCCESS}          | ${'isLoading'}                        | ${false}
+    ${types.RECEIVE_UPDATE_STAGE_SUCCESS}          | ${'isSavingCustomStage'}              | ${false}
+    ${types.RECEIVE_UPDATE_STAGE_SUCCESS}          | ${'isEditingCustomStage'}             | ${false}
+    ${types.RECEIVE_UPDATE_STAGE_SUCCESS}          | ${'customStageFormErrors'}            | ${null}
+    ${types.RECEIVE_UPDATE_STAGE_ERROR}            | ${'isLoading'}                        | ${false}
+    ${types.RECEIVE_UPDATE_STAGE_ERROR}            | ${'isSavingCustomStage'}              | ${false}
     ${types.REQUEST_REMOVE_STAGE}                  | ${'isLoading'}                        | ${true}
     ${types.RECEIVE_REMOVE_STAGE_RESPONSE}         | ${'isLoading'}                        | ${false}
     ${types.REQUEST_DURATION_DATA}                 | ${'isLoadingDurationChart'}           | ${true}
@@ -116,6 +132,18 @@ describe('Cycle analytics mutations', () => {
     });
   });
 
+  describe(`types.RECEIVE_UPDATE_STAGE_ERROR`, () => {
+    const mockFormError = { errors: { start_identifier: ['Cant be blank'] } };
+    it('will set customStageFormErrors', () => {
+      state = {};
+      mutations[types.RECEIVE_UPDATE_STAGE_ERROR](state, mockFormError);
+
+      expect(state.customStageFormErrors).toEqual(
+        convertObjectPropsToCamelCase(mockFormError.errors),
+      );
+    });
+  });
+
   describe.each`
     mutation                            | value
     ${types.REQUEST_GROUP_LABELS}       | ${[]}

locale/gitlab.pot

@@ -502,6 +502,9 @@ msgstr ""
 msgid "'%{level}' is not a valid visibility level"
 msgstr ""
 
+msgid "'%{name}' stage already exists"
+msgstr ""
+
 msgid "'%{source}' is not a import source"
 msgstr ""
 
@@ -19338,6 +19341,9 @@ msgstr ""
 msgid "There was a problem communicating with your device."
 msgstr ""
 
+msgid "There was a problem refreshing the data, please try again"
+msgstr ""
+
 msgid "There was a problem saving your custom stage, please try again"
 msgstr ""
 
@@ -22394,6 +22400,9 @@ msgstr ""
 msgid "Your comment could not be updated! Please check your network connection and try again."
 msgstr ""
 
+msgid "Your custom stage '%{title}' was created"
+msgstr ""
+
 msgid "Your dashboard has been copied. You can %{web_ide_link_start}edit it here%{web_ide_link_end}."
 msgstr ""
 

spec/support/shared_examples/models/cycle_analytics_stage_shared_examples.rb

@@ -123,7 +123,7 @@ RSpec.shared_examples 'cycle analytics label based stage' do
         })
 
         expect(stage).to be_invalid
-        expect(stage.errors[:start_event_label]).to include("can't be blank")
+        expect(stage.errors[:start_event_label_id]).to include("can't be blank")
       end
 
       it 'returns validation error when `end_event_label_id` is missing' do
@@ -135,7 +135,7 @@ RSpec.shared_examples 'cycle analytics label based stage' do
         })
 
         expect(stage).to be_invalid
-        expect(stage.errors[:end_event_label]).to include("can't be blank")
+        expect(stage.errors[:end_event_label_id]).to include("can't be blank")
       end
     end
 
@@ -145,7 +145,7 @@ RSpec.shared_examples 'cycle analytics label based stage' do
           name: 'My Stage',
           parent: parent,
           start_event_identifier: :issue_label_added,
-          start_event_label: group_label,
+          start_event_label_id: group_label.id,
           end_event_identifier: :issue_closed
         })
 
@@ -159,7 +159,7 @@ RSpec.shared_examples 'cycle analytics label based stage' do
           name: 'My Stage',
           parent: parent_in_subgroup,
           start_event_identifier: :issue_label_added,
-          start_event_label: group_label,
+          start_event_label_id: group_label.id,
           end_event_identifier: :issue_closed
         })
 
@@ -170,30 +170,30 @@ RSpec.shared_examples 'cycle analytics label based stage' do
     context 'when label is defined for a different group' do
       let(:error_message) { s_('CycleAnalyticsStage|is not available for the selected group') }
 
-      it 'returns validation for `start_event_label`' do
+      it 'returns validation for `start_event_label_id`' do
         stage = described_class.new({
           name: 'My Stage',
           parent: parent_outside_of_group_label_scope,
           start_event_identifier: :issue_label_added,
-          start_event_label: group_label,
+          start_event_label_id: group_label.id,
           end_event_identifier: :issue_closed
         })
 
         expect(stage).to be_invalid
-        expect(stage.errors[:start_event_label]).to include(error_message)
+        expect(stage.errors[:start_event_label_id]).to include(error_message)
       end
 
-      it 'returns validation for `end_event_label`' do
+      it 'returns validation for `end_event_label_id`' do
         stage = described_class.new({
           name: 'My Stage',
           parent: parent_outside_of_group_label_scope,
           start_event_identifier: :issue_closed,
           end_event_identifier: :issue_label_added,
-          end_event_label: group_label
+          end_event_label_id: group_label.id
         })
 
         expect(stage).to be_invalid
-        expect(stage.errors[:end_event_label]).to include(error_message)
+        expect(stage.errors[:end_event_label_id]).to include(error_message)
       end
     end