Move prepareStageErrors to utils

Extracts the prepareStageErrors method to the
utils and adds related specs

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

@@ -109,7 +109,8 @@ export default {
           stageErrors: stageErrors || initializeStageErrors(initialPreset),
           ...initialData,
         }
-      : { stages: [], nameError }; // TODO: not sure if i should pass empty stages here
+      : { stages: [], nameError };
+
     return {
       selectedPreset: initialPreset,
       presetOptions: PRESET_OPTIONS,
@@ -131,7 +132,6 @@ export default {
       return this.nameError?.length ? this.nameError.join('\n\n') : null;
     },
     hasInitialFormErrors() {
-      // TODO: do we need this + should we check the contained arrays instead
       const { initialFormErrors } = this;
       return Boolean(Object.keys(initialFormErrors).length);
     },
@@ -171,6 +171,8 @@ export default {
     ...mapActions(['createValueStream']),
     onSubmit() {
       const { name, stages } = this;
+      console.log('onSubmit::this.nameError', this.nameError);
+      console.log('onSubmit::this.stageErrors', this.stageErrors);
       // TODO: validate before submission
       return this.createValueStream({
         name,

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

 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
-import { transformRawStages } from '../utils';
 import * as types from './mutation_types';
+import { transformRawStages, prepareStageErrors } from '../utils';
 
 export default {
   [types.SET_FEATURE_FLAGS](state, featureFlags) {
@@ -124,18 +124,8 @@ export default {
   [types.RECEIVE_CREATE_VALUE_STREAM_ERROR](state, { data: { stages = [] }, errors = {} }) {
     state.isCreatingValueStream = false;
 
-    // TODO: move to utils + add additional specs
-    // TODO: should test that we end up with the same amount of errors as stages
-    // This is because the JSON response only includes failed stages with an index of the stage
     const { stages: stageErrors = {}, ...rest } = errors;
-    const fullStageErrors = Object.keys(stageErrors).length
-      ? stages.map((_, index) => {
-          return convertObjectPropsToCamelCase(stageErrors[index]) || {};
-        })
-      : {};
-
-    // NOTE: BE currently returns the equivalent of a JS hash for the stages errors, an array simplifies things
-    state.createValueStreamErrors = { ...rest, stages: fullStageErrors };
+    state.createValueStreamErrors = { ...rest, stages: prepareStageErrors(stages, stageErrors) };
   },
   [types.RECEIVE_CREATE_VALUE_STREAM_SUCCESS](state, valueStream) {
     state.isCreatingValueStream = false;

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

@@ -105,6 +105,19 @@ export const transformRawTasksByTypeData = (data = []) => {
   return data.map((d) => convertObjectPropsToCamelCase(d, { deep: true }));
 };
 
+/**
+ * Prepares the stage errors for use in the create value stream form
+ *
+ * The JSON error response returns a key value pair, the key corresponds to the
+ * index of the stage with errors and the value is the returned error(s)
+ *
+ * @param {Array} stages - Array of value stream stages
+ * @param {Object} errors - Key value pair of stage errors
+ * @returns {Array} Returns and array of stage error objects
+ */
+export const prepareStageErrors = (stages, errors) =>
+  stages.length ? stages.map((_, index) => convertObjectPropsToCamelCase(errors[index]) || {}) : [];
+
 /**
  * Takes the duration data for selected stages, transforms the date values and returns
  * the data in a flattened array

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

@@ -16,6 +16,7 @@ import {
   toggleSelectedLabel,
   transformStagesForPathNavigation,
   prepareTimeMetricsData,
+  prepareStageErrors,
 } from 'ee/analytics/cycle_analytics/utils';
 import { toYmd } from 'ee/analytics/shared/utils';
 import { getDatesInRange } from '~/lib/utils/datetime_utility';
@@ -176,6 +177,29 @@ describe('Value Stream Analytics utils', () => {
     });
   });
 
+  describe('prepareStageErrors', () => {
+    const stages = [{ name: 'stage 1' }, { name: 'stage 2' }, { name: 'stage 3' }];
+    const nameError = { name: "Can't be blank" };
+    const stageErrors = { 1: nameError };
+
+    it('returns an object for each stage', () => {
+      const res = prepareStageErrors(stages, stageErrors);
+      expect(res[0]).toEqual({});
+      expect(res[1]).toEqual(nameError);
+      expect(res[2]).toEqual({});
+    });
+
+    it('returns the same number of error objects as stages', () => {
+      const res = prepareStageErrors(stages, stageErrors);
+      expect(res.length).toEqual(stages.length);
+    });
+
+    it('returns an empty object for each stage if there are no errors', () => {
+      const res = prepareStageErrors(stages, {});
+      expect(res).toEqual([{}, {}, {}]);
+    });
+  });
+
   describe('isPersistedStage', () => {
     it.each`
       custom   | id                    | expected

locale/gitlab.pot

@@ -1692,9 +1692,6 @@ msgstr ""
 msgid "Add another link"
 msgstr ""
 
-msgid "Add another stage"
-msgstr ""
-
 msgid "Add approval rule"
 msgstr ""