[VSA] Reorder stage animation

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

 <script>
 import { GlButton, GlForm, GlFormInput, GlFormGroup, GlFormRadioGroup, GlModal } from '@gitlab/ui';
-import { cloneDeep } from 'lodash';
+import { cloneDeep, uniqueId } from 'lodash';
 import Vue from 'vue';
 import { mapState, mapActions } from 'vuex';
 import { filterStagesByHiddenStatus } from '~/cycle_analytics/utils';
@@ -26,11 +26,15 @@ import {
 const initializeStageErrors = (defaultStageConfig, selectedPreset = PRESET_OPTIONS_DEFAULT) =>
   selectedPreset === PRESET_OPTIONS_DEFAULT ? defaultStageConfig.map(() => ({})) : [{}];
 
-const initializeStages = (defaultStageConfig, selectedPreset = PRESET_OPTIONS_DEFAULT) =>
+const initializeStages = (defaultStageConfig, selectedPreset = PRESET_OPTIONS_DEFAULT) => {
+  const stages =
     selectedPreset === PRESET_OPTIONS_DEFAULT
       ? defaultStageConfig
       : [{ ...defaultCustomStageFields }];
 
+  return stages.map((stage) => ({ ...stage, transitionKey: uniqueId('stage-') }));
+};
+
 export default {
   name: 'ValueStreamForm',
   components: {
@@ -85,6 +89,7 @@ export default {
       stageErrors:
         cloneDeep(stageErrors) || initializeStageErrors(defaultStageConfig, initialPreset),
     };
+
     return {
       hiddenStages: filterStagesByHiddenStatus(initialStages),
       selectedPreset: initialPreset,
@@ -179,11 +184,6 @@ export default {
         }
       });
     },
-    stageKey(index) {
-      return this.selectedPreset === PRESET_OPTIONS_DEFAULT
-        ? `default-template-stage-${index}`
-        : `custom-template-stage-${index}`;
-    },
     stageGroupLabel(index) {
       return sprintf(this.$options.i18n.STAGE_INDEX, { index: index + 1 });
     },
@@ -249,7 +249,10 @@ export default {
     addNewStage() {
       // validate previous stages only and add a new stage
       this.validate();
-      Vue.set(this, 'stages', [...this.stages, { ...defaultCustomStageFields }]);
+      Vue.set(this, 'stages', [
+        ...this.stages,
+        { ...defaultCustomStageFields, transitionKey: uniqueId('stage-') },
+      ]);
       Vue.set(this, 'stageErrors', [...this.stageErrors, {}]);
     },
     onAddStage() {
@@ -351,10 +354,11 @@ export default {
         @input="onSelectPreset"
       />
       <div data-testid="extended-form-fields">
+        <transition-group name="stage-list" tag="div">
           <div
             v-for="(stage, activeStageIndex) in stages"
             ref="formStages"
-          :key="stageKey(activeStageIndex)"
+            :key="stage.id || stage.transitionKey"
           >
             <hr class="gl-my-3" />
             <span
@@ -384,6 +388,7 @@ export default {
               @input="validateStageFields(activeStageIndex)"
             />
           </div>
+        </transition-group>
         <div v-if="hiddenStages.length">
           <hr />
           <gl-form-group

ee/app/assets/stylesheets/page_bundles/cycle_analytics.scss

@@ -54,3 +54,7 @@
     flex: 0 0 20%;
   }
 }
+
+.stage-list-move {
+  transition: transform 0.15s;
+}