Merge branch '244054-vsa-add-stage-button-doesnt-display-the-form' into 'master'

VSA Add stage button doesnt display the form

Closes #244054

See merge request gitlab-org/gitlab!41026

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

@@ -102,7 +102,7 @@ export default {
     <add-stage-button
       :class="$options.noDragClass"
       :active="isCreatingCustomStage"
-      @showform="$emit('show-add-stage-form')"
+      @showform="$emit($options.STAGE_ACTIONS.ADD_STAGE)"
     />
   </ul>
 </template>

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

@@ -56,6 +56,7 @@ export const STAGE_ACTIONS = {
   HIDE: 'hideStage',
   CREATE: 'createStage',
   UPDATE: 'updateStage',
+  ADD_STAGE: 'showAddStageForm',
 };
 
 export const STAGE_NAME = {

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

@@ -13,6 +13,7 @@ import StageTable from 'ee/analytics/cycle_analytics/components/stage_table.vue'
 import StageTableNav from 'ee/analytics/cycle_analytics/components/stage_table_nav.vue';
 import StageNavItem from 'ee/analytics/cycle_analytics/components/stage_nav_item.vue';
 import AddStageButton from 'ee/analytics/cycle_analytics/components/add_stage_button.vue';
+import CustomStageForm from 'ee/analytics/cycle_analytics/components/custom_stage_form.vue';
 import FilterBar from 'ee/analytics/cycle_analytics/components/filter_bar.vue';
 import DurationChart from 'ee/analytics/cycle_analytics/components/duration_chart.vue';
 import Daterange from 'ee/analytics/shared/components/daterange.vue';
@@ -137,6 +138,8 @@ describe('Cycle Analytics component', () => {
       .findAll(StageNavItem)
       .at(index);
 
+  const findAddStageButton = () => wrapper.find(AddStageButton);
+
   const displaysProjectsDropdownFilter = flag => {
     expect(wrapper.find(ProjectsDropdownFilter).exists()).toBe(flag);
   };
@@ -429,6 +432,31 @@ describe('Cycle Analytics component', () => {
               expect(first.props('isActive')).toBe(false);
             });
           });
+
+          describe('Add stage button', () => {
+            beforeEach(() => {
+              wrapper = createComponent({
+                opts: {
+                  stubs: {
+                    StageTable,
+                    StageTableNav,
+                    AddStageButton,
+                  },
+                },
+                withStageSelected: true,
+              });
+            });
+
+            it('can navigate to the custom stage form', () => {
+              expect(wrapper.find(CustomStageForm).exists()).toBe(false);
+
+              findAddStageButton().trigger('click');
+
+              return wrapper.vm.$nextTick().then(() => {
+                expect(wrapper.find(CustomStageForm).exists()).toBe(true);
+              });
+            });
+          });
         });
       });
 

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

@@ -60,11 +60,20 @@ describe('StageTableNav', () => {
     });
   });
 
-  it('will render the add a stage button', () => {
+  describe('Add stage button', () => {
+    it('will render', () => {
       wrapper = createComponent();
       expect(wrapper.find(AddStageButton).exists()).toBe(true);
     });
 
+    it('will emit showAddStageForm action when clicked', () => {
+      wrapper = createComponent({ mountFn: mount });
+      wrapper.find(AddStageButton).trigger('click');
+
+      expect(wrapper.emitted('showAddStageForm')).toHaveLength(1);
+    });
+  });
+
   describe.each`
     flag                       | value
     ${'customOrdering'}        | ${true}