Use separate arrays for hidden stages

Cleans up the hidden and active stages
in the form

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

@@ -71,13 +71,7 @@ export const defaultFields = {
   endEventLabelId: null,
 };
 
-const defaultStageCommonFields = { custom: false, hidden: false };
-
-export const defaultCustomStageFields = {
-  ...defaultFields,
-  ...defaultStageCommonFields,
-  custom: true,
-};
+export const defaultCustomStageFields = { ...defaultFields, custom: true };
 
 /**
  * These stage configs are copied from the https://gitlab.com/gitlab-org/gitlab/-/tree/master/lib/gitlab/cycle_analytics
@@ -120,7 +114,7 @@ const BASE_DEFAULT_STAGE_CONFIG = [
 
 export const DEFAULT_STAGE_CONFIG = BASE_DEFAULT_STAGE_CONFIG.map(({ id, ...rest }) => ({
   ...rest,
-  ...defaultStageCommonFields,
+  custom: false,
   name: capitalizeFirstCharacter(id),
 }));
 

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

@@ -17,9 +17,6 @@ import { validateValueStreamName, validateStage } from './create_value_stream_fo
 import DefaultStageFields from './create_value_stream_form/default_stage_fields.vue';
 import CustomStageFields from './create_value_stream_form/custom_stage_fields.vue';
 
-const findStageIndexByName = (stages, target = '') =>
-  stages.findIndex(({ name }) => name === target);
-
 const initializeStageErrors = (selectedPreset = PRESET_OPTIONS_DEFAULT) =>
   selectedPreset === PRESET_OPTIONS_DEFAULT ? DEFAULT_STAGE_CONFIG.map(() => ({})) : [{}];
 
@@ -30,12 +27,11 @@ const initializeStages = (selectedPreset = PRESET_OPTIONS_DEFAULT) =>
 
 const formatStageDataForSubmission = (stages) => {
   return stages.map(({ custom = false, name, ...rest }) => {
-    const additionalProps = custom ? convertObjectPropsToSnakeCase({ ...rest }) : {};
-    return {
-      ...additionalProps,
-      custom,
-      name,
-    };
+    return custom
+      ? convertObjectPropsToSnakeCase({ ...rest, custom, name })
+      : {
+          name,
+        };
   });
 };
 
@@ -85,6 +81,7 @@ export default {
       : { stages: [], nameError };
 
     return {
+      hiddenStages: [],
       selectedPreset: initialPreset,
       presetOptions: PRESET_OPTIONS,
       name: '',
@@ -127,12 +124,6 @@ export default {
         ],
       };
     },
-    hiddenStages() {
-      return this.stages.filter((stage) => stage.hidden);
-    },
-    activeStages() {
-      return this.stages.filter((stage) => !stage.hidden);
-    },
     hasFormErrors() {
       return Boolean(
         this.nameError.length || this.stageErrors.some((obj) => Object.keys(obj).length),
@@ -177,7 +168,7 @@ export default {
       return sprintf(this.$options.I18N.HIDDEN_DEFAULT_STAGE, { name });
     },
     validateStages() {
-      return this.activeStages.map(validateStage);
+      return this.stages.map(validateStage);
     },
     validate() {
       const { name } = this;
@@ -196,14 +187,15 @@ export default {
       Vue.set(this, 'stages', newStages);
     },
     validateStageFields(index) {
-      Vue.set(this.stageErrors, index, validateStage(this.activeStages[index]));
+      Vue.set(this.stageErrors, index, validateStage(this.stages[index]));
     },
     fieldErrors(index) {
       return this.stageErrors && this.stageErrors[index] ? this.stageErrors[index] : {};
     },
     onHide(index) {
-      const stage = this.stages[index];
-      Vue.set(this.stages, index, { ...stage, hidden: true });
+      const target = this.stages[index];
+      Vue.set(this, 'stages', [...this.stages.filter((_, i) => i !== index)]);
+      Vue.set(this, 'hiddenStages', [...this.hiddenStages, target]);
     },
     onRemove(index) {
       const newErrors = this.stageErrors.filter((_, idx) => idx !== index);
@@ -212,9 +204,11 @@ export default {
       Vue.set(this, 'stageErrors', [...newErrors]);
     },
     onRestore(hiddenStageIndex) {
-      const stage = this.hiddenStages[hiddenStageIndex];
-      const stageIndex = findStageIndexByName(this.stages, stage.name);
-      Vue.set(this.stages, stageIndex, { ...stage, hidden: false });
+      const target = this.hiddenStages[hiddenStageIndex];
+      Vue.set(this, 'hiddenStages', [
+        ...this.hiddenStages.filter((_, i) => i !== hiddenStageIndex),
+      ]);
+      Vue.set(this, 'stages', [...this.stages, target]);
     },
     onAddStage() {
       // validate previous stages only and add a new stage
@@ -297,7 +291,7 @@ export default {
         @input="onSelectPreset"
       />
       <div v-if="hasExtendedFormFields" data-testid="extended-form-fields">
-        <div v-for="(stage, activeStageIndex) in activeStages" :key="stageKey(activeStageIndex)">
+        <div v-for="(stage, activeStageIndex) in stages" :key="stageKey(activeStageIndex)">
           <hr class="gl-my-3" />
           <span
             class="gl-display-flex gl-m-0 gl-vertical-align-middle gl-mr-2 gl-font-weight-bold gl-display-flex gl-pb-3"
@@ -308,7 +302,7 @@ export default {
             :stage="stage"
             :stage-events="formEvents"
             :index="activeStageIndex"
-            :total-stages="activeStages.length"
+            :total-stages="stages.length"
             :errors="fieldErrors(activeStageIndex)"
             @move="handleMove"
             @remove="onRemove"
@@ -319,7 +313,7 @@ export default {
             :stage="stage"
             :stage-events="formEvents"
             :index="activeStageIndex"
-            :total-stages="activeStages.length"
+            :total-stages="stages.length"
             :errors="fieldErrors(activeStageIndex)"
             @move="handleMove"
             @hide="onHide"

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

@@ -66,7 +66,6 @@ export default {
   },
   [types.RECEIVE_CREATE_STAGE_ERROR](state) {
     state.isSavingCustomStage = false;
-    // ??
     state.isCreatingCustomStage = false;
     state.isEditingCustomStage = false;
   },

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

@@ -122,10 +122,9 @@ export default {
     state.createValueStreamErrors = {};
   },
   [types.RECEIVE_CREATE_VALUE_STREAM_ERROR](state, { data: { stages = [] }, errors = {} }) {
-    state.isCreatingValueStream = false;
-
     const { stages: stageErrors = {}, ...rest } = errors;
     state.createValueStreamErrors = { ...rest, stages: prepareStageErrors(stages, stageErrors) };
+    state.isCreatingValueStream = false;
   },
   [types.RECEIVE_CREATE_VALUE_STREAM_SUCCESS](state, valueStream) {
     state.isCreatingValueStream = false;