Merge branch '13076-edit-custom-cycle-analytics-stages' into 'master'

Edit custom cycle analytics stages

See merge request gitlab-org/gitlab!18921

app/assets/javascripts/lib/utils/common_utils.js

@@ -5,7 +5,7 @@
 import $ from 'jquery';
 import axios from './axios_utils';
 import { getLocationHash } from './url_utility';
-import { convertToCamelCase } from './text_utility';
+import { convertToCamelCase, convertToSnakeCase } from './text_utility';
 import { isObject } from './type_utility';
 import breakpointInstance from '../../breakpoints';
 
@@ -697,6 +697,22 @@ export const convertObjectPropsToCamelCase = (obj = {}, options = {}) => {
   }, initial);
 };
 
+/**
+ * Converts all the object keys to snake case
+ *
+ * @param {Object} obj    Object to transform
+ * @returns {Object}
+ */
+// Follow up to add additional options param:
+// https://gitlab.com/gitlab-org/gitlab/issues/39173
+export const convertObjectPropsToSnakeCase = (obj = {}) =>
+  obj
+    ? Object.entries(obj).reduce(
+        (acc, [key, value]) => ({ ...acc, [convertToSnakeCase(key)]: value }),
+        {},
+      )
+    : {};
+
 export const imagePath = imgUrl =>
   `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/${imgUrl}`;
 

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

@@ -55,10 +55,11 @@ export default {
       'isLoadingChartData',
       'isLoadingDurationChart',
       'isEmptyStage',
-      'isAddingCustomStage',
       'isSavingCustomStage',
+      'isCreatingCustomStage',
+      'isEditingCustomStage',
       'selectedGroup',
-      'selectedStageId',
+      'selectedStage',
       'stages',
       'summary',
       'labels',
@@ -69,12 +70,7 @@ export default {
       'endDate',
       'tasksByType',
     ]),
-    ...mapGetters([
-      'currentStage',
-      'defaultStage',
-      'hasNoAccessError',
-      'durationChartPlottableData',
-    ]),
+    ...mapGetters(['hasNoAccessError', 'currentGroupPath', 'durationChartPlottableData']),
     shouldRenderEmptyState() {
       return !this.selectedGroup;
     },
@@ -112,16 +108,18 @@ export default {
       'fetchStageData',
       'setSelectedGroup',
       'setSelectedProjects',
-      'setSelectedStageId',
+      'setSelectedStage',
       'hideCustomStageForm',
       'showCustomStageForm',
       'setDateRange',
       'fetchTasksByTypeData',
+      'updateSelectedDurationChartStages',
       'createCustomStage',
       'updateStage',
       'removeStage',
-      'updateSelectedDurationChartStages',
       'setFeatureFlags',
+      'editCustomStage',
+      'updateStage',
     ]),
     onGroupSelect(group) {
       this.setSelectedGroup(group);
@@ -134,12 +132,15 @@ export default {
     },
     onStageSelect(stage) {
       this.hideCustomStageForm();
-      this.setSelectedStageId(stage.id);
-      this.fetchStageData(this.currentStage.slug);
+      this.setSelectedStage(stage);
+      this.fetchStageData(this.selectedStage.slug);
     },
     onShowAddStageForm() {
       this.showCustomStageForm();
     },
+    onShowEditStageForm(initData = {}) {
+      this.editCustomStage(initData);
+    },
     initDateRange() {
       const endDate = new Date(Date.now());
       const startDate = getDateInPast(endDate, DEFAULT_DAYS_IN_PAST);
@@ -148,7 +149,7 @@ export default {
     onCreateCustomStage(data) {
       this.createCustomStage(data);
     },
-    onUpdateStage(data) {
+    onUpdateCustomStage(data) {
       this.updateStage(data);
     },
     onRemoveStage(id) {
@@ -237,14 +238,15 @@ export default {
         <div v-else>
           <summary-table class="js-summary-table" :items="summary" />
           <stage-table
-            v-if="currentStage"
+            v-if="selectedStage"
             class="js-stage-table"
-            :current-stage="currentStage"
+            :current-stage="selectedStage"
             :stages="stages"
             :is-loading="isLoadingStage"
             :is-empty-stage="isEmptyStage"
-            :is-adding-custom-stage="isAddingCustomStage"
             :is-saving-custom-stage="isSavingCustomStage"
+            :is-creating-custom-stage="isCreatingCustomStage"
+            :is-editing-custom-stage="isEditingCustomStage"
             :current-stage-events="currentStageEvents"
             :custom-stage-form-events="customStageFormEvents"
             :labels="labels"
@@ -252,10 +254,12 @@ export default {
             :no-access-svg-path="noAccessSvgPath"
             :can-edit-stages="hasCustomizableCycleAnalytics"
             @selectStage="onStageSelect"
+            @editStage="onShowEditStageForm"
             @showAddStageForm="onShowAddStageForm"
-            @submit="onCreateCustomStage"
-            @hideStage="onUpdateStage"
+            @hideStage="onUpdateCustomStage"
             @removeStage="onRemoveStage"
+            @createStage="onCreateCustomStage"
+            @updateStage="onUpdateCustomStage"
           />
         </div>
       </div>

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

@@ -2,7 +2,9 @@
 import { isEqual } from 'underscore';
 import { GlButton, GlFormGroup, GlFormInput, GlFormSelect, GlLoadingIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import { convertObjectPropsToSnakeCase } from '~/lib/utils/common_utils';
 import LabelsSelector from './labels_selector.vue';
+import { STAGE_ACTIONS } from '../constants';
 import {
   isStartEvent,
   isLabelEvent,
@@ -13,11 +15,12 @@ import {
 } from '../utils';
 
 const initFields = {
-  name: '',
-  startEvent: '',
-  startEventLabel: null,
-  stopEvent: '',
-  stopEventLabel: null,
+  id: null,
+  name: null,
+  startEventIdentifier: null,
+  startEventLabelId: null,
+  endEventIdentifier: null,
+  endEventLabelId: null,
 };
 
 export default {
@@ -50,11 +53,16 @@ export default {
       required: false,
       default: false,
     },
+    isEditingCustomStage: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
       fields: {
-        ...initFields,
+        ...this.initialFields,
       },
     };
   },
@@ -65,30 +73,42 @@ export default {
         ...this.events.filter(isStartEvent).map(eventToOption),
       ];
     },
-    stopEventOptions() {
-      const stopEvents = getAllowedEndEvents(this.events, this.fields.startEvent);
+    endEventOptions() {
+      const endEvents = getAllowedEndEvents(this.events, this.fields.startEventIdentifier);
       return [
         { value: null, text: s__('CustomCycleAnalytics|Select stop event') },
-        ...eventsByIdentifier(this.events, stopEvents).map(eventToOption),
+        ...eventsByIdentifier(this.events, endEvents).map(eventToOption),
       ];
     },
     hasStartEvent() {
-      return this.fields.startEvent;
+      return this.fields.startEventIdentifier;
     },
     startEventRequiresLabel() {
-      return isLabelEvent(this.labelEvents, this.fields.startEvent);
+      return isLabelEvent(this.labelEvents, this.fields.startEventIdentifier);
     },
-    stopEventRequiresLabel() {
-      return isLabelEvent(this.labelEvents, this.fields.stopEvent);
+    endEventRequiresLabel() {
+      return isLabelEvent(this.labelEvents, this.fields.endEventIdentifier);
     },
     isComplete() {
-      if (!this.hasValidStartAndStopEventPair) return false;
-      const requiredFields = [this.fields.startEvent, this.fields.stopEvent, this.fields.name];
+      if (!this.hasValidStartAndEndEventPair) {
+        return false;
+      }
+      const {
+        fields: {
+          name,
+          startEventIdentifier,
+          startEventLabelId,
+          endEventIdentifier,
+          endEventLabelId,
+        },
+      } = this;
+
+      const requiredFields = [startEventIdentifier, endEventIdentifier, name];
       if (this.startEventRequiresLabel) {
-        requiredFields.push(this.fields.startEventLabel);
+        requiredFields.push(startEventLabelId);
       }
-      if (this.stopEventRequiresLabel) {
-        requiredFields.push(this.fields.stopEventLabel);
+      if (this.endEventRequiresLabel) {
+        requiredFields.push(endEventLabelId);
       }
       return requiredFields.every(
         fieldValue => fieldValue && (fieldValue.length > 0 || fieldValue > 0),
@@ -97,21 +117,31 @@ export default {
     isDirty() {
       return !isEqual(this.initialFields, this.fields);
     },
-    hasValidStartAndStopEventPair() {
+    hasValidStartAndEndEventPair() {
       const {
-        fields: { startEvent, stopEvent },
+        fields: { startEventIdentifier, endEventIdentifier },
       } = this;
-      if (startEvent && stopEvent) {
-        const stopEvents = getAllowedEndEvents(this.events, startEvent);
-        return stopEvents.length && stopEvents.includes(stopEvent);
+      if (startEventIdentifier && endEventIdentifier) {
+        const endEvents = getAllowedEndEvents(this.events, startEventIdentifier);
+        return endEvents.length && endEvents.includes(endEventIdentifier);
       }
       return true;
     },
-    stopEventError() {
-      return !this.hasValidStartAndStopEventPair
+    endEventError() {
+      return !this.hasValidStartAndEndEventPair
         ? s__('CustomCycleAnalytics|Start event changed, please select a valid stop event')
         : null;
     },
+    saveStageText() {
+      return this.isEditingCustomStage
+        ? s__('CustomCycleAnalytics|Update stage')
+        : s__('CustomCycleAnalytics|Add stage');
+    },
+    formTitle() {
+      return this.isEditingCustomStage
+        ? s__('CustomCycleAnalytics|Editing stage')
+        : s__('CustomCycleAnalytics|New stage');
+    },
   },
   mounted() {
     this.labelEvents = getLabelEventsIdentifiers(this.events);
@@ -122,16 +152,15 @@ export default {
       this.$emit('cancel');
     },
     handleSave() {
-      const { startEvent, startEventLabel, stopEvent, stopEventLabel, name } = this.fields;
-      this.$emit('submit', {
-        name,
-        start_event_identifier: startEvent,
-        start_event_label_id: startEventLabel,
-        end_event_identifier: stopEvent,
-        end_event_label_id: stopEventLabel,
-      });
-    },
-    handleSelectLabel(key, labelId = null) {
+      const data = convertObjectPropsToSnakeCase(this.fields);
+      if (this.isEditingCustomStage) {
+        const { id } = this.initialFields;
+        this.$emit(STAGE_ACTIONS.UPDATE, { ...data, id });
+      } else {
+        this.$emit(STAGE_ACTIONS.CREATE, data);
+      }
+    },
+    handleSelectLabel(key, labelId) {
       this.fields[key] = labelId;
     },
     handleClearLabel(key) {
@@ -143,7 +172,7 @@ export default {
 <template>
   <form class="custom-stage-form m-4 mt-0">
     <div class="mb-1">
-      <h4>{{ s__('CustomCycleAnalytics|New stage') }}</h4>
+      <h4>{{ formTitle }}</h4>
     </div>
     <gl-form-group :label="s__('CustomCycleAnalytics|Name')">
       <gl-form-input
@@ -159,7 +188,7 @@ export default {
       <div :class="[startEventRequiresLabel ? 'w-50 mr-1' : 'w-100']">
         <gl-form-group :label="s__('CustomCycleAnalytics|Start event')">
           <gl-form-select
-            v-model="fields.startEvent"
+            v-model="fields.startEventIdentifier"
             name="custom-stage-start-event"
             :required="true"
             :options="startEventOptions"
@@ -170,41 +199,41 @@ export default {
         <gl-form-group :label="s__('CustomCycleAnalytics|Start event label')">
           <labels-selector
             :labels="labels"
-            :selected-label-id="fields.startEventLabel"
+            :selected-label-id="fields.startEventLabelId"
             name="custom-stage-start-event-label"
-            @selectLabel="labelId => handleSelectLabel('startEventLabel', labelId)"
-            @clearLabel="handleClearLabel('startEventLabel')"
+            @selectLabel="handleSelectLabel('startEventLabelId', $event)"
+            @clearLabel="handleClearLabel('startEventLabelId')"
           />
         </gl-form-group>
       </div>
     </div>
-    <div class="d-flex" :class="{ 'justify-content-between': stopEventRequiresLabel }">
-      <div :class="[stopEventRequiresLabel ? 'w-50 mr-1' : 'w-100']">
+    <div class="d-flex" :class="{ 'justify-content-between': endEventRequiresLabel }">
+      <div :class="[endEventRequiresLabel ? 'w-50 mr-1' : 'w-100']">
         <gl-form-group
           :label="s__('CustomCycleAnalytics|Stop event')"
           :description="
             !hasStartEvent ? s__('CustomCycleAnalytics|Please select a start event first') : ''
           "
-          :state="hasValidStartAndStopEventPair"
-          :invalid-feedback="stopEventError"
+          :state="hasValidStartAndEndEventPair"
+          :invalid-feedback="endEventError"
         >
           <gl-form-select
-            v-model="fields.stopEvent"
+            v-model="fields.endEventIdentifier"
             name="custom-stage-stop-event"
-            :options="stopEventOptions"
+            :options="endEventOptions"
             :required="true"
             :disabled="!hasStartEvent"
           />
         </gl-form-group>
       </div>
-      <div v-if="stopEventRequiresLabel" class="w-50 ml-1">
+      <div v-if="endEventRequiresLabel" class="w-50 ml-1">
         <gl-form-group :label="s__('CustomCycleAnalytics|Stop event label')">
           <labels-selector
             :labels="labels"
-            :selected-label-id="fields.stopEventLabel"
+            :selected-label-id="fields.endEventLabelId"
             name="custom-stage-stop-event-label"
-            @selectLabel="labelId => handleSelectLabel('stopEventLabel', labelId)"
-            @clearLabel="handleClearLabel('stopEventLabel')"
+            @selectLabel="handleSelectLabel('endEventLabelId', $event)"
+            @clearLabel="handleClearLabel('endEventLabelId')"
           />
         </gl-form-group>
       </div>
@@ -213,7 +242,7 @@ export default {
     <div class="custom-stage-form-actions">
       <button
         :disabled="!isDirty"
-        class="btn btn-cancel js-custom-stage-form-cancel"
+        class="btn btn-cancel js-save-stage-cancel"
         type="button"
         @click="handleCancel"
       >
@@ -222,11 +251,11 @@ export default {
       <button
         :disabled="!isComplete || !isDirty"
         type="button"
-        class="js-custom-stage-form-submit btn btn-success"
+        class="js-save-stage btn btn-success"
         @click="handleSave"
       >
         <gl-loading-icon v-if="isSavingCustomStage" size="sm" inline />
-        {{ s__('CustomCycleAnalytics|Add stage') }}
+        {{ saveStageText }}
       </button>
     </div>
   </form>

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

@@ -41,7 +41,11 @@ export default {
       type: Boolean,
       required: true,
     },
-    isAddingCustomStage: {
+    isCreatingCustomStage: {
+      type: Boolean,
+      required: true,
+    },
+    isEditingCustomStage: {
       type: Boolean,
       required: true,
     },
@@ -82,6 +86,9 @@ export default {
       const { currentStageEvents = [], isLoading, isEmptyStage } = this;
       return currentStageEvents.length && !isLoading && !isEmptyStage;
     },
+    customStageFormActive() {
+      return this.isCreatingCustomStage;
+    },
     stageHeaders() {
       return [
         {
@@ -100,26 +107,21 @@ export default {
           title: this.stageName,
           description: __('The collection of events added to the data gathered for that stage.'),
           classes: 'event-header pl-3',
-          displayHeader: !this.isAddingCustomStage,
+          displayHeader: !this.customStageFormActive,
         },
         {
           title: __('Total Time'),
           description: __('The time taken by each data entry gathered by that stage.'),
           classes: 'total-time-header pr-5 text-right',
-          displayHeader: !this.isAddingCustomStage,
+          displayHeader: !this.customStageFormActive,
         },
       ];
     },
-  },
-  methods: {
-    // TODO: DRY These up
-    hideStage(stageId) {
-      this.$emit(STAGE_ACTIONS.HIDE, { id: stageId, hidden: true });
-    },
-    removeStage(stageId) {
-      this.$emit(STAGE_ACTIONS.REMOVE, stageId);
+    customStageInitialData() {
+      return this.isEditingCustomStage ? this.currentStage : {};
     },
   },
+  STAGE_ACTIONS,
 };
 </script>
 <template>
@@ -147,16 +149,17 @@ export default {
               :key="`ca-stage-title-${stage.title}`"
               :title="stage.title"
               :value="stage.value"
-              :is-active="!isAddingCustomStage && stage.id === currentStage.id"
+              :is-active="!isCreatingCustomStage && stage.id === currentStage.id"
               :can-edit="canEditStages"
               :is-default-stage="!stage.custom"
-              @select="$emit('selectStage', stage)"
-              @remove="removeStage(stage.id)"
-              @hide="hideStage(stage.id)"
+              @remove="$emit($options.STAGE_ACTIONS.REMOVE, stage.id)"
+              @hide="$emit($options.STAGE_ACTIONS.HIDE, { id: stage.id, hidden: true })"
+              @select="$emit($options.STAGE_ACTIONS.SELECT, stage)"
+              @edit="$emit($options.STAGE_ACTIONS.EDIT, stage)"
             />
             <add-stage-button
               v-if="canEditStages"
-              :active="isAddingCustomStage"
+              :active="customStageFormActive"
               @showform="$emit('showAddStageForm')"
             />
           </ul>
@@ -164,11 +167,15 @@ export default {
         <div class="section stage-events">
           <gl-loading-icon v-if="isLoading" class="mt-4" size="md" />
           <custom-stage-form
-            v-else-if="isAddingCustomStage"
+            v-else-if="isCreatingCustomStage || isEditingCustomStage"
             :events="customStageFormEvents"
             :labels="labels"
             :is-saving-custom-stage="isSavingCustomStage"
+            :initial-fields="customStageInitialData"
+            :is-editing-custom-stage="isEditingCustomStage"
             @submit="$emit('submit', $event)"
+            @createStage="$emit($options.STAGE_ACTIONS.CREATE, $event)"
+            @updateStage="$emit($options.STAGE_ACTIONS.UPDATE, $event)"
           />
           <template v-else>
             <stage-event-list

ee/app/assets/javascripts/analytics/cycle_analytics/constants.js

@@ -34,8 +34,10 @@ export const TASKS_BY_TYPE_SUBJECT_ISSUE = 'Issue';
 export const TASKS_BY_TYPE_SUBJECT_MERGE_REQUEST = 'MergeRequest';
 
 export const STAGE_ACTIONS = {
+  SELECT: 'selectStage',
   EDIT: 'editStage',
   REMOVE: 'removeStage',
-  SAVE: 'saveStage',
   HIDE: 'hideStage',
+  CREATE: 'createStage',
+  UPDATE: 'updateStage',
 };

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

@@ -14,10 +14,11 @@ const removeError = () => {
 export const setFeatureFlags = ({ commit }, featureFlags) =>
   commit(types.SET_FEATURE_FLAGS, featureFlags);
 export const setSelectedGroup = ({ commit }, group) => commit(types.SET_SELECTED_GROUP, group);
+
 export const setSelectedProjects = ({ commit }, projectIds) =>
   commit(types.SET_SELECTED_PROJECTS, projectIds);
-export const setSelectedStageId = ({ commit }, stageId) =>
-  commit(types.SET_SELECTED_STAGE_ID, stageId);
+
+export const setSelectedStage = ({ commit }, stage) => commit(types.SET_SELECTED_STAGE, stage);
 
 export const setDateRange = ({ commit, dispatch }, { skipFetch = false, startDate, endDate }) => {
   commit(types.SET_DATE_RANGE, { startDate, endDate });
@@ -38,12 +39,12 @@ export const receiveStageDataError = ({ commit }) => {
 
 export const fetchStageData = ({ state, dispatch, getters }, slug) => {
   const { cycleAnalyticsRequestParams = {} } = getters;
-  dispatch('requestStageData');
-
   const {
     selectedGroup: { fullPath },
   } = state;
 
+  dispatch('requestStageData');
+
   return Api.cycleAnalyticsStageEvents(
     fullPath,
     slug,
@@ -83,6 +84,14 @@ 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 editCustomStage = ({ commit, dispatch }, selectedStage = {}) => {
+  commit(types.EDIT_CUSTOM_STAGE);
+  dispatch('setSelectedStage', selectedStage);
+};
+
 export const requestSummaryData = ({ commit }) => commit(types.REQUEST_SUMMARY_DATA);
 
 export const receiveSummaryDataError = ({ commit }, error) => {
@@ -112,9 +121,6 @@ export const fetchSummaryData = ({ state, dispatch, getters }) => {
 export const requestGroupStagesAndEvents = ({ commit }) =>
   commit(types.REQUEST_GROUP_STAGES_AND_EVENTS);
 
-export const hideCustomStageForm = ({ commit }) => commit(types.HIDE_CUSTOM_STAGE_FORM);
-export const showCustomStageForm = ({ commit }) => commit(types.SHOW_CUSTOM_STAGE_FORM);
-
 export const receiveGroupLabelsSuccess = ({ commit }, data) =>
   commit(types.RECEIVE_GROUP_LABELS_SUCCESS, data);
 
@@ -136,8 +142,8 @@ export const fetchGroupLabels = ({ dispatch, state }) => {
     .catch(error => dispatch('receiveGroupLabelsError', error));
 };
 
-export const receiveGroupStagesAndEventsError = ({ commit }) => {
-  commit(types.RECEIVE_GROUP_STAGES_AND_EVENTS_ERROR);
+export const receiveGroupStagesAndEventsError = ({ commit }, error) => {
+  commit(types.RECEIVE_GROUP_STAGES_AND_EVENTS_ERROR, error);
   createFlash(__('There was an error fetching cycle analytics stages.'));
 };
 
@@ -145,8 +151,9 @@ export const receiveGroupStagesAndEventsSuccess = ({ state, commit, dispatch },
   commit(types.RECEIVE_GROUP_STAGES_AND_EVENTS_SUCCESS, data);
   const { stages = [] } = state;
   if (stages && stages.length) {
-    const { slug } = stages[0];
-    dispatch('fetchStageData', slug);
+    const [firstStage] = stages;
+    dispatch('setSelectedStage', firstStage);
+    dispatch('fetchStageData', firstStage.slug);
   } else {
     createFlash(__('There was an error while fetching cycle analytics data.'));
   }
@@ -197,7 +204,6 @@ export const createCustomStage = ({ dispatch, state }, data) => {
   const {
     selectedGroup: { fullPath },
   } = state;
-
   dispatch('requestCreateCustomStage');
 
   return Api.cycleAnalyticsCreateStage(fullPath, data)
@@ -245,11 +251,12 @@ export const fetchTasksByTypeData = ({ dispatch, state, getters }) => {
 };
 
 export const requestUpdateStage = ({ commit }) => commit(types.REQUEST_UPDATE_STAGE);
-export const receiveUpdateStageSuccess = ({ commit, dispatch }) => {
+export const receiveUpdateStageSuccess = ({ commit, dispatch }, updatedData) => {
   commit(types.RECEIVE_UPDATE_STAGE_RESPONSE);
-  createFlash(__(`Stage data updated`), 'notice');
+  createFlash(__('Stage data updated'), 'notice');
 
-  dispatch('fetchCycleAnalyticsData');
+  dispatch('fetchGroupStagesAndEvents');
+  dispatch('setSelectedStage', updatedData);
 };
 
 export const receiveUpdateStageError = ({ commit }) => {

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

@@ -3,10 +3,6 @@ import httpStatus from '~/lib/utils/http_status';
 import { dateFormats } from '../../shared/constants';
 import { getDurationChartData } from '../utils';
 
-export const currentStage = ({ stages, selectedStageId }) =>
-  stages.length && selectedStageId ? stages.find(stage => stage.id === selectedStageId) : null;
-export const defaultStage = state => (state.stages.length ? state.stages[0] : null);
-
 export const hasNoAccessError = state => state.errorCode === httpStatus.FORBIDDEN;
 
 export const currentGroupPath = ({ selectedGroup }) =>

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

@@ -2,8 +2,7 @@ export const SET_FEATURE_FLAGS = 'SET_FEATURE_FLAGS';
 
 export const SET_SELECTED_GROUP = 'SET_SELECTED_GROUP';
 export const SET_SELECTED_PROJECTS = 'SET_SELECTED_PROJECTS';
-export const SET_SELECTED_STAGE_ID = 'SET_SELECTED_STAGE_ID';
-
+export const SET_SELECTED_STAGE = 'SET_SELECTED_STAGE';
 export const SET_DATE_RANGE = 'SET_DATE_RANGE';
 
 export const UPDATE_SELECTED_DURATION_CHART_STAGES = 'UPDATE_SELECTED_DURATION_CHART_STAGES';
@@ -18,6 +17,7 @@ export const RECEIVE_STAGE_DATA_ERROR = 'RECEIVE_STAGE_DATA_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 REQUEST_GROUP_LABELS = 'REQUEST_GROUP_LABELS';
 export const RECEIVE_GROUP_LABELS_SUCCESS = 'RECEIVE_GROUP_LABELS_SUCCESS';

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

@@ -13,8 +13,8 @@ export default {
   [types.SET_SELECTED_PROJECTS](state, projectIds) {
     state.selectedProjectIds = projectIds;
   },
-  [types.SET_SELECTED_STAGE_ID](state, stageId) {
-    state.selectedStageId = stageId;
+  [types.SET_SELECTED_STAGE](state, rawData) {
+    state.selectedStage = convertObjectPropsToCamelCase(rawData);
   },
   [types.SET_DATE_RANGE](state, { startDate, endDate }) {
     state.startDate = startDate;
@@ -25,7 +25,8 @@ export default {
   },
   [types.REQUEST_CYCLE_ANALYTICS_DATA](state) {
     state.isLoading = true;
-    state.isAddingCustomStage = false;
+    state.isCreatingCustomStage = false;
+    state.isEditingCustomStage = false;
   },
   [types.RECEIVE_CYCLE_ANALYTICS_DATA_SUCCESS](state) {
     state.errorCode = null;
@@ -75,11 +76,20 @@ export default {
       labelIds: [],
     };
   },
+  [types.SHOW_CUSTOM_STAGE_FORM](state) {
+    state.isCreatingCustomStage = true;
+    state.customStageFormInitData = {};
+  },
+  [types.EDIT_CUSTOM_STAGE](state) {
+    state.isEditingCustomStage = true;
+  },
   [types.HIDE_CUSTOM_STAGE_FORM](state) {
-    state.isAddingCustomStage = false;
+    state.isEditingCustomStage = false;
+    state.isCreatingCustomStage = false;
+    state.customStageFormInitData = {};
   },
   [types.SHOW_CUSTOM_STAGE_FORM](state) {
-    state.isAddingCustomStage = true;
+    state.isCreatingCustomStage = true;
   },
   [types.RECEIVE_SUMMARY_DATA_ERROR](state) {
     state.summary = [];
@@ -122,11 +132,6 @@ export default {
     state.customStageFormEvents = events.map(ev =>
       convertObjectPropsToCamelCase(ev, { deep: true }),
     );
-
-    if (state.stages.length) {
-      const { id } = state.stages[0];
-      state.selectedStageId = id;
-    }
   },
   [types.REQUEST_TASKS_BY_TYPE_DATA](state) {
     state.isLoadingChartData = true;
@@ -152,6 +157,7 @@ export default {
   },
   [types.RECEIVE_UPDATE_STAGE_RESPONSE](state) {
     state.isLoading = false;
+    state.isSavingCustomStage = false;
   },
   [types.REQUEST_REMOVE_STAGE](state) {
     state.isLoading = true;

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

@@ -14,12 +14,13 @@ export default () => ({
   isEmptyStage: false,
   errorCode: null,
 
-  isAddingCustomStage: false,
   isSavingCustomStage: false,
+  isCreatingCustomStage: false,
+  isEditingCustomStage: false,
 
   selectedGroup: null,
   selectedProjectIds: [],
-  selectedStageId: null,
+  selectedStage: null,
 
   currentStageEvents: [],
 

ee/app/assets/javascripts/analytics/cycle_analytics/utils.js

@@ -32,12 +32,29 @@ export const isLabelEvent = (labelEvents = [], ev = null) =>
 export const getLabelEventsIdentifiers = (events = []) =>
   events.filter(ev => ev.type && ev.type === EVENT_TYPE_LABEL).map(i => i.identifier);
 
+/**
+ * Checks if the specified stage is in memory or persisted to storage based on the id
+ *
+ * Default cycle analytics stages are initially stored in memory, when they are first
+ * created the id for the stage is the name of the stage in lowercase. This string id
+ * is used to fetch stage data (events, median calculation)
+ *
+ * When either a custom stage is created or an edit is made to a default stage then the
+ * default stages get persisted to storage and will have a numeric id. The new numeric
+ * id should then be used to access stage data
+ *
+ * This will be fixed in https://gitlab.com/gitlab-org/gitlab/merge_requests/19278
+ */
+
 export const transformRawStages = (stages = []) =>
   stages
-    .map(({ title, ...rest }) => ({
+    .map(({ id, title, custom = false, ...rest }) => ({
       ...convertObjectPropsToCamelCase(rest, { deep: true }),
-      slug: convertToSnakeCase(title),
+      id,
       title,
+      slug: custom ? id : convertToSnakeCase(title),
+      custom,
+      name: title, // editing a stage takes 'name' as a parameter, but the api returns title
     }))
     .sort((a, b) => a.id > b.id);
 

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

@@ -10,6 +10,8 @@ describe 'Group Cycle Analytics', :js do
   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) }
 
+  stage_nav_selector = '.stage-nav'
+
   3.times do |i|
     let!("issue_#{i}".to_sym) { create(:issue, title: "New Issue #{i}", project: project, created_at: 2.days.ago) }
   end
@@ -119,11 +121,11 @@ describe 'Group Cycle Analytics', :js do
 
     context 'stage nav' do
       it 'displays the list of stages' do
-        expect(page).to have_selector('.stage-nav', visible: true)
+        expect(page).to have_selector(stage_nav_selector, visible: true)
       end
 
       it 'displays the default list of stages' do
-        stage_nav = page.find('.stage-nav')
+        stage_nav = page.find(stage_nav_selector)
 
         %w[Issue Plan Code Test Review Staging Production].each do |item|
           expect(stage_nav).to have_content(item)
@@ -212,7 +214,24 @@ describe 'Group Cycle Analytics', :js do
   end
 
   describe 'Customizable cycle analytics', :js do
+    custom_stage_name = "Cool beans"
+    start_event_identifier = :merge_request_created
+    end_event_identifier = :merge_request_merged
+
     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 } }
+    let(:first_default_stage) { page.find('.stage-nav-item-cell', text: "Issue").ancestor(".stage-nav-item") }
+    let(:first_custom_stage) { page.find('.stage-nav-item-cell', text: custom_stage_name).ancestor(".stage-nav-item") }
+
+    def create_custom_stage
+      Analytics::CycleAnalytics::Stages::CreateService.new(parent: group, params: params, current_user: user).execute
+    end
+
+    def toggle_more_options(stage)
+      stage.hover
+
+      stage.find(".more-actions-toggle").click
+    end
 
     def select_dropdown_option(name, elem = "option", index = 1)
       page.find("select[name='#{name}']").all(elem)[index].select_option
@@ -267,8 +286,6 @@ describe 'Group Cycle Analytics', :js do
         end
 
         context 'with all required fields set' do
-          custom_stage_name = "cool beans"
-
           before do
             fill_in 'custom-stage-name', with: custom_stage_name
             select_dropdown_option 'custom-stage-start-event'
@@ -317,22 +334,75 @@ describe 'Group Cycle Analytics', :js do
         end
       end
 
-      context 'Stage table' do
-        custom_stage = "Cool beans"
-        let(:params) { { name: custom_stage, start_event_identifier: :merge_request_created, end_event_identifier: :merge_request_merged } }
-        let(:first_default_stage) { page.find('.stage-nav-item-cell', text: "Issue").ancestor(".stage-nav-item") }
-        let(:first_custom_stage) { page.find('.stage-nav-item-cell', text: custom_stage).ancestor(".stage-nav-item") }
+      context 'Edit stage form' do
+        stage_form_class = '.custom-stage-form'
+        stage_save_button = '.js-save-stage'
+        name_field = "custom-stage-name"
+        start_event_field = "custom-stage-start-event"
+        end_event_field = "custom-stage-stop-event"
+        updated_custom_stage_name = 'Extra uber cool stage'
+
+        def select_edit_stage
+          toggle_more_options(first_custom_stage)
+          click_button "Edit stage"
+        end
+
+        before do
+          create_custom_stage
+          select_group
+
+          expect(page).to have_text custom_stage_name
+        end
+
+        context 'with no changes to the data' do
+          before do
+            select_edit_stage
+          end
 
-        def create_custom_stage
-          Analytics::CycleAnalytics::Stages::CreateService.new(parent: group, params: params, current_user: user).execute
+          it 'displays the editing stage form' do
+            expect(page.find(stage_form_class)).to have_text 'Editing stage'
+          end
+
+          it 'prepoulates the stage data' do
+            expect(page.find_field(name_field).value).to eq custom_stage_name
+            expect(page.find_field(start_event_field).value).to eq start_event_identifier.to_s
+            expect(page.find_field(end_event_field).value).to eq end_event_identifier.to_s
+          end
+
+          it 'disables the submit form button' do
+            expect(page.find(stage_save_button)[:disabled]).to eq "true"
+          end
         end
 
-        def toggle_more_options(stage)
-          stage.hover
+        context 'with changes' do
+          before do
+            select_edit_stage
+          end
+
+          it 'enables the submit button' do
+            fill_in name_field, with: updated_custom_stage_name
+
+            expect(page.find(stage_save_button)[:disabled]).to eq nil
+          end
+
+          it 'will persist updates to the stage' do
+            fill_in name_field, with: updated_custom_stage_name
+            page.find(stage_save_button).click
+
+            expect(page.find('.flash-notice')).to have_text 'Stage data updated'
+            expect(page.find(stage_nav_selector)).not_to have_text custom_stage_name
+            expect(page.find(stage_nav_selector)).to have_text updated_custom_stage_name
+          end
 
-          stage.find(".more-actions-toggle").click
+          it 'disables the submit form button if incomplete' do
+            fill_in name_field, with: ""
+
+            expect(page.find(stage_save_button)[:disabled]).to eq "true"
+          end
         end
+      end
 
+      context 'Stage table' do
         context 'default stages' do
           before do
             select_group
@@ -353,7 +423,7 @@ describe 'Group Cycle Analytics', :js do
           end
 
           it 'will not appear in the stage table after being hidden' do
-            nav = page.find('.stage-nav')
+            nav = page.find(stage_nav_selector)
             expect(nav).to have_text("Issue")
 
             click_button "Hide stage"
@@ -368,7 +438,7 @@ describe 'Group Cycle Analytics', :js do
             create_custom_stage
             select_group
 
-            expect(page).to have_text custom_stage
+            expect(page).to have_text custom_stage_name
 
             toggle_more_options(first_custom_stage)
           end
@@ -386,13 +456,13 @@ describe 'Group Cycle Analytics', :js do
           end
 
           it 'will not appear in the stage table after being removed' do
-            nav = page.find('.stage-nav')
-            expect(nav).to have_text(custom_stage)
+            nav = page.find(stage_nav_selector)
+            expect(nav).to have_text(custom_stage_name)
 
             click_button "Remove stage"
 
             expect(page.find('.flash-notice')).to have_text 'Stage removed'
-            expect(nav).not_to have_text(custom_stage)
+            expect(nav).not_to have_text(custom_stage_name)
           end
         end
       end

ee/spec/frontend/analytics/cycle_analytics/__snapshots__/utils_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Cycle analytics utils transformRawStages retains all the stage properties 1`] = `
+Array [
+  Object {
+    "custom": false,
+    "description": "Time before an issue gets scheduled",
+    "hidden": false,
+    "id": "issue",
+    "legend": "",
+    "name": "Issue",
+    "slug": "issue",
+    "title": "Issue",
+  },
+  Object {
+    "custom": true,
+    "description": "",
+    "endEventIdentifier": "issue_first_added_to_board",
+    "hidden": false,
+    "id": 18,
+    "legend": "",
+    "name": "Coolest beans stage",
+    "slug": 18,
+    "startEventIdentifier": "issue_first_mentioned_in_commit",
+    "title": "Coolest beans stage",
+  },
+]
+`;

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

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CustomStageForm does not have a loading icon 1`] = `
-"<button type=\\"button\\" class=\\"js-custom-stage-form-submit btn btn-success\\"><!---->
-      Add stage
+exports[`CustomStageForm Editing a custom stage 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>
+      Update stage
     </button>"
 `;
 
-exports[`CustomStageForm isSavingCustomStage=true displays a loading icon 1`] = `
-"<button disabled=\\"disabled\\" type=\\"button\\" class=\\"js-custom-stage-form-submit 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>
+exports[`CustomStageForm Empty form 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/stage_table_spec.js

@@ -36,8 +36,9 @@ function createComponent(props = {}, shallow = false) {
       isLoading: false,
       isLoadingSummaryData: false,
       isEmptyStage: false,
-      isAddingCustomStage: false,
       isSavingCustomStage: false,
+      isCreatingCustomStage: false,
+      isEditingCustomStage: false,
       noDataSvgPath,
       noAccessSvgPath,
       canEditStages: false,

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

@@ -75,6 +75,16 @@ export const codeEvents = stageFixtures.code;
 export const testEvents = stageFixtures.test;
 export const stagingEvents = stageFixtures.staging;
 export const productionEvents = stageFixtures.production;
+export const rawCustomStage = {
+  title: 'Coolest beans stage',
+  hidden: false,
+  legend: '',
+  description: '',
+  id: 18,
+  custom: true,
+  start_event_identifier: 'issue_first_mentioned_in_commit',
+  end_event_identifier: 'issue_first_added_to_board',
+};
 
 const { events: rawCustomStageEvents } = customizableStagesAndEvents;
 const camelCasedStageEvents = rawCustomStageEvents.map(deepCamelCase);

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

@@ -22,7 +22,8 @@ const stageData = { events: [] };
 const error = new Error('Request failed with status code 404');
 const flashErrorMessage = 'There was an error while fetching cycle analytics data.';
 const selectedGroup = { fullPath: group.path };
-const [{ id: selectedStageSlug }] = stages;
+const [selectedStage] = stages;
+const selectedStageSlug = selectedStage.slug;
 const endpoints = {
   groupLabels: `/groups/${group.path}/-/labels`,
   cycleAnalyticsData: `/groups/${group.path}/-/cycle_analytics`,
@@ -62,7 +63,7 @@ describe('Cycle analytics actions', () => {
     ${'setFeatureFlags'}     | ${'SET_FEATURE_FLAGS'}     | ${'featureFlags'}       | ${{ hasDurationChart: true }}
     ${'setSelectedGroup'}    | ${'SET_SELECTED_GROUP'}    | ${'selectedGroup'}      | ${'someNewGroup'}
     ${'setSelectedProjects'} | ${'SET_SELECTED_PROJECTS'} | ${'selectedProjectIds'} | ${[10, 20, 30, 40]}
-    ${'setSelectedStageId'}  | ${'SET_SELECTED_STAGE_ID'} | ${'selectedStageId'}    | ${'someNewGroup'}
+    ${'setSelectedStage'}    | ${'SET_SELECTED_STAGE'}    | ${'selectedStage'}      | ${{ id: 'someStageId' }}
   `('$action should set $stateKey with $payload and type $type', ({ action, type, payload }) => {
     testAction(
       actions[action],
@@ -114,21 +115,30 @@ describe('Cycle analytics actions', () => {
       );
     });
 
-    it('dispatches receiveStageDataError on error', done => {
-      testAction(
-        actions.fetchStageData,
-        null,
-        state,
-        [],
-        [
-          { type: 'requestStageData' },
-          {
-            type: 'receiveStageDataError',
-            payload: error,
-          },
-        ],
-        done,
-      );
+    describe('with a failing request', () => {
+      beforeEach(() => {
+        mock = new MockAdapter(axios);
+        mock.onGet(endpoints.stageData).replyOnce(404, { error });
+      });
+
+      it('dispatches receiveStageDataError on error', done => {
+        testAction(
+          actions.fetchStageData,
+          selectedStage,
+          state,
+          [],
+          [
+            {
+              type: 'requestStageData',
+            },
+            {
+              type: 'receiveStageDataError',
+              payload: error,
+            },
+          ],
+          done,
+        );
+      });
     });
 
     describe('receiveStageDataSuccess', () => {
@@ -387,33 +397,13 @@ describe('Cycle analytics actions', () => {
       });
     });
 
-    it("dispatches the 'fetchStageData' action", done => {
-      const stateWithStages = {
-        ...state,
-        stages,
-      };
-
-      testAction(
-        actions.receiveGroupStagesAndEventsSuccess,
-        { ...customizableStagesAndEvents },
-        stateWithStages,
-        [
-          {
-            type: types.RECEIVE_GROUP_STAGES_AND_EVENTS_SUCCESS,
-            payload: { ...customizableStagesAndEvents },
-          },
-        ],
-        [{ type: 'fetchStageData', payload: selectedStageSlug }],
-        done,
-      );
-    });
-
     it('will flash an error when there are no stages', () => {
       [[], null].forEach(emptyStages => {
         actions.receiveGroupStagesAndEventsSuccess(
           {
             commit: () => {},
             state: { stages: emptyStages },
+            getters,
           },
           {},
         );
@@ -496,7 +486,7 @@ describe('Cycle analytics actions', () => {
       );
     });
 
-    it("dispatches the 'fetchStageData' actions", done => {
+    it("dispatches the 'fetchStageData' action", done => {
       const stateWithStages = {
         ...state,
         stages,
@@ -512,7 +502,10 @@ describe('Cycle analytics actions', () => {
             payload: { ...customizableStagesAndEvents },
           },
         ],
-        [{ type: 'fetchStageData', payload: selectedStageSlug }],
+        [
+          { type: 'setSelectedStage', payload: selectedStage },
+          { type: 'fetchStageData', payload: selectedStageSlug },
+        ],
         done,
       );
     });

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

 import * as getters from 'ee/analytics/cycle_analytics/store/getters';
 import {
-  allowedStages as stages,
   startDate,
   endDate,
   transformedDurationData,
@@ -11,75 +10,6 @@ let state = null;
 const selectedProjectIds = [5, 8, 11];
 
 describe('Cycle analytics getters', () => {
-  describe('with default state', () => {
-    beforeEach(() => {
-      state = {
-        stages: [],
-        selectedStageId: null,
-      };
-    });
-
-    afterEach(() => {
-      state = null;
-    });
-
-    describe('currentStage', () => {
-      it('will return null', () => {
-        expect(getters.currentStage(state)).toEqual(null);
-      });
-    });
-
-    describe('defaultStage', () => {
-      it('will return null', () => {
-        expect(getters.defaultStage(state)).toEqual(null);
-      });
-    });
-  });
-
-  describe('with a set of stages', () => {
-    beforeEach(() => {
-      state = {
-        stages,
-        selectedStageId: null,
-      };
-    });
-
-    afterEach(() => {
-      state = null;
-    });
-
-    describe('currentStage', () => {
-      it('will return null', () => {
-        expect(getters.currentStage(state)).toEqual(null);
-      });
-    });
-
-    describe('defaultStage', () => {
-      it('will return the first stage', () => {
-        expect(getters.defaultStage(state)).toEqual(stages[0]);
-      });
-    });
-  });
-
-  describe('with a set of stages and a stage selected', () => {
-    beforeEach(() => {
-      state = {
-        stages,
-        selectedStageId: stages[2].id,
-      };
-    });
-
-    afterEach(() => {
-      state = null;
-    });
-
-    describe('currentStage', () => {
-      it('will return null', () => {
-        expect(getters.currentStage(state)).toEqual(stages[2]);
-      });
-    });
-  });
-
   describe('hasNoAccessError', () => {
     beforeEach(() => {
       state = {

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

@@ -33,8 +33,9 @@ describe('Cycle analytics mutations', () => {
 
   it.each`
     mutation                                       | stateKey                    | value
-    ${types.HIDE_CUSTOM_STAGE_FORM}                | ${'isAddingCustomStage'}    | ${false}
-    ${types.SHOW_CUSTOM_STAGE_FORM}                | ${'isAddingCustomStage'}    | ${true}
+    ${types.HIDE_CUSTOM_STAGE_FORM}                | ${'isCreatingCustomStage'}  | ${false}
+    ${types.SHOW_CUSTOM_STAGE_FORM}                | ${'isCreatingCustomStage'}  | ${true}
+    ${types.EDIT_CUSTOM_STAGE}                     | ${'isEditingCustomStage'}   | ${true}
     ${types.REQUEST_STAGE_DATA}                    | ${'isLoadingStage'}         | ${true}
     ${types.RECEIVE_STAGE_DATA_ERROR}              | ${'isEmptyStage'}           | ${true}
     ${types.RECEIVE_STAGE_DATA_ERROR}              | ${'isLoadingStage'}         | ${false}
@@ -69,7 +70,7 @@ describe('Cycle analytics mutations', () => {
     ${types.SET_SELECTED_GROUP}                    | ${{ fullPath: 'cool-beans' }} | ${{ selectedGroup: { fullPath: 'cool-beans' }, selectedProjectIds: [] }}
     ${types.SET_SELECTED_PROJECTS}                 | ${[606, 707, 808, 909]}       | ${{ selectedProjectIds: [606, 707, 808, 909] }}
     ${types.SET_DATE_RANGE}                        | ${{ startDate, endDate }}     | ${{ startDate, endDate }}
-    ${types.SET_SELECTED_STAGE_ID}                 | ${'first-stage'}              | ${{ selectedStageId: 'first-stage' }}
+    ${types.SET_SELECTED_STAGE}                    | ${{ id: 'first-stage' }}      | ${{ selectedStage: { id: 'first-stage' } }}
     ${types.UPDATE_SELECTED_DURATION_CHART_STAGES} | ${transformedDurationData}    | ${{ durationData: transformedDurationData }}
   `(
     '$mutation with payload $payload will update state with $expectedState',
@@ -160,10 +161,6 @@ describe('Cycle analytics mutations', () => {
           },
         );
       });
-
-      it('will set the selectedStageId to the id of the first stage', () => {
-        expect(state.selectedStageId).toEqual('issue');
-      });
     });
   });
 

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

@@ -8,6 +8,7 @@ import {
   nestQueryStringKeys,
   flattenDurationChartData,
   getDurationChartData,
+  transformRawStages,
 } from 'ee/analytics/cycle_analytics/utils';
 import {
   customStageEvents as events,
@@ -19,6 +20,8 @@ import {
   durationChartPlottableData,
   startDate,
   endDate,
+  issueStage,
+  rawCustomStage,
 } from './mock_data';
 
 const labelEvents = [labelStartEvent, labelStopEvent].map(i => i.identifier);
@@ -153,4 +156,26 @@ describe('Cycle analytics utils', () => {
       expect(plottableData).toStrictEqual(durationChartPlottableData);
     });
   });
+
+  describe('transformRawStages', () => {
+    it('retains all the stage properties', () => {
+      const transformed = transformRawStages([issueStage, rawCustomStage]);
+      expect(transformed).toMatchSnapshot();
+    });
+
+    it('converts object properties from snake_case to camelCase', () => {
+      const [transformedCustomStage] = transformRawStages([rawCustomStage]);
+      expect(transformedCustomStage).toMatchObject({
+        endEventIdentifier: 'issue_first_added_to_board',
+        startEventIdentifier: 'issue_first_mentioned_in_commit',
+      });
+    });
+
+    it('sets the slug to the value of the stage id', () => {
+      const transformed = transformRawStages([issueStage, rawCustomStage]);
+      transformed.forEach(t => {
+        expect(t.slug).toEqual(t.id);
+      });
+    });
+  });
 });

locale/gitlab.pot

@@ -5202,6 +5202,9 @@ msgstr ""
 msgid "CustomCycleAnalytics|Add stage"
 msgstr ""
 
+msgid "CustomCycleAnalytics|Editing stage"
+msgstr ""
+
 msgid "CustomCycleAnalytics|Enter a name for the stage"
 msgstr ""
 
@@ -5235,6 +5238,9 @@ msgstr ""
 msgid "CustomCycleAnalytics|Stop event label"
 msgstr ""
 
+msgid "CustomCycleAnalytics|Update stage"
+msgstr ""
+
 msgid "Customize colors"
 msgstr ""
 

spec/javascripts/lib/utils/common_utils_spec.js

@@ -721,6 +721,28 @@ describe('common_utils', () => {
       });
     });
 
+    describe('convertObjectPropsToSnakeCase', () => {
+      it('converts each object key to snake case', () => {
+        const obj = {
+          some: 'some',
+          'cool object': 'cool object',
+          likeThisLongOne: 'likeThisLongOne',
+        };
+
+        expect(commonUtils.convertObjectPropsToSnakeCase(obj)).toEqual({
+          some: 'some',
+          cool_object: 'cool object',
+          like_this_long_one: 'likeThisLongOne',
+        });
+      });
+
+      it('returns an empty object if there are no keys', () => {
+        ['', {}, [], null].forEach(badObj => {
+          expect(commonUtils.convertObjectPropsToSnakeCase(badObj)).toEqual({});
+        });
+      });
+    });
+
     describe('with options', () => {
       const objWithoutChildren = {
         project_name: 'GitLab CE',