Merge branch '32019-follow-up-add-vuex-to-customizable-cycle-analytics' into 'master'

Resolve "Follow up - Add Vuex to customizable cycle analytics"

Closes #32019

See merge request gitlab-org/gitlab!17208

app/assets/javascripts/analytics/cycle_analytics/mixins/add_stage_mixin.js

-export default {
-  data() {
-    return {
-      isCustomStageForm: false,
-    };
-  },
-  methods: {
-    showAddStageForm: () => {},
-    hideAddStageForm: () => {},
-  },
-};

app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js

@@ -3,7 +3,6 @@ import Vue from 'vue';
 import Cookies from 'js-cookie';
 import { GlEmptyState } from '@gitlab/ui';
 import filterMixins from 'ee_else_ce/analytics/cycle_analytics/mixins/filter_mixins';
-import addStageMixin from 'ee_else_ce/analytics/cycle_analytics/mixins/add_stage_mixin';
 import Flash from '../flash';
 import { __ } from '~/locale';
 import Translate from '../vue_shared/translate';
@@ -44,14 +43,8 @@ export default () => {
       DateRangeDropdown: () =>
         import('ee_component/analytics/shared/components/date_range_dropdown.vue'),
       'stage-nav-item': stageNavItem,
-      CustomStageForm: () =>
-        import('ee_component/analytics/cycle_analytics/components/custom_stage_form.vue'),
-      AddStageButton: () =>
-        import('ee_component/analytics/cycle_analytics/components/add_stage_button.vue'),
-      CustomStageFormContainer: () =>
-        import('ee_component/analytics/cycle_analytics/components/custom_stage_form_container.vue'),
     },
-    mixins: [filterMixins, addStageMixin],
+    mixins: [filterMixins],
     data() {
       return {
         store: CycleAnalyticsStore,
@@ -131,7 +124,6 @@ export default () => {
           return;
         }
 
-        this.hideAddStageForm();
         this.isLoadingStage = true;
         this.store.setStageEvents([], stage);
         this.store.setActiveStage(stage);

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

@@ -2,6 +2,7 @@
 import { GlEmptyState } from '@gitlab/ui';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { featureAccessLevel } from '~/pages/projects/shared/permissions/constants';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import GroupsDropdownFilter from '../../shared/components/groups_dropdown_filter.vue';
 import ProjectsDropdownFilter from '../../shared/components/projects_dropdown_filter.vue';
 import DateRangeDropdown from '../../shared/components/date_range_dropdown.vue';
@@ -18,6 +19,7 @@ export default {
     SummaryTable,
     StageTable,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     emptyStateSvgPath: {
       type: String,
@@ -45,35 +47,38 @@ export default {
     ...mapState([
       'isLoading',
       'isLoadingStage',
+      'isLoadingStageForm',
       'isEmptyStage',
       'isAddingCustomStage',
       'selectedGroup',
       'selectedProjectIds',
       'selectedStageName',
-      'events',
       'stages',
       'summary',
       'dataTimeframe',
+      'labels',
+      'currentStageEvents',
+      'customStageFormEvents',
     ]),
     ...mapGetters(['currentStage', 'defaultStage', 'hasNoAccessError', 'currentGroupPath']),
     shouldRenderEmptyState() {
       return !this.selectedGroup;
     },
     hasCustomizableCycleAnalytics() {
-      return gon && gon.features ? gon.features.customizableCycleAnalytics : false;
+      return Boolean(this.glFeatures.customizableCycleAnalytics);
     },
   },
   methods: {
     ...mapActions([
+      'fetchCustomStageFormData',
+      'fetchCycleAnalyticsData',
+      'fetchStageData',
       'setCycleAnalyticsDataEndpoint',
       'setStageDataEndpoint',
       'setSelectedGroup',
-      'fetchCycleAnalyticsData',
       'setSelectedProjects',
       'setSelectedTimeframe',
-      'fetchStageData',
       'setSelectedStageName',
-      'showCustomStageForm',
       'hideCustomStageForm',
     ]),
     onGroupSelect(group) {
@@ -97,7 +102,7 @@ export default {
       this.fetchStageData(this.currentStage.name);
     },
     onShowAddStageForm() {
-      this.showCustomStageForm();
+      this.fetchCustomStageFormData(this.currentGroupPath);
     },
   },
 };
@@ -161,22 +166,26 @@ export default {
           )
         "
       />
-      <summary-table class="js-summary-table" :items="summary" />
-      <stage-table
-        v-if="currentStage"
-        class="js-stage-table"
-        :current-stage="currentStage"
-        :stages="stages"
-        :is-loading-stage="isLoadingStage"
-        :is-empty-stage="isEmptyStage"
-        :is-adding-custom-stage="isAddingCustomStage"
-        :events="events"
-        :no-data-svg-path="noDataSvgPath"
-        :no-access-svg-path="noAccessSvgPath"
-        :can-edit-stages="hasCustomizableCycleAnalytics"
-        @selectStage="onStageSelect"
-        @showAddStageForm="onShowAddStageForm"
-      />
+      <div v-else>
+        <summary-table class="js-summary-table" :items="summary" />
+        <stage-table
+          v-if="currentStage"
+          class="js-stage-table"
+          :current-stage="currentStage"
+          :stages="stages"
+          :is-loading="isLoadingStage || isLoadingStageForm"
+          :is-empty-stage="isEmptyStage"
+          :is-adding-custom-stage="isAddingCustomStage"
+          :current-stage-events="currentStageEvents"
+          :custom-stage-form-events="customStageFormEvents"
+          :labels="labels"
+          :no-data-svg-path="noDataSvgPath"
+          :no-access-svg-path="noAccessSvgPath"
+          :can-edit-stages="hasCustomizableCycleAnalytics"
+          @selectStage="onStageSelect"
+          @showAddStageForm="onShowAddStageForm"
+        />
+      </div>
     </div>
   </div>
 </template>

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

@@ -2,9 +2,7 @@
 import { isEqual } from 'underscore';
 import { GlButton, GlFormGroup, GlFormInput, GlFormSelect } from '@gitlab/ui';
 import { s__ } from '~/locale';
-
 import LabelsSelector from './labels_selector.vue';
-
 import {
   isStartEvent,
   isLabelEvent,

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

-<script>
-// NOTE: this is a temporary component while cycle-analytics is being refactored
-//        post refactor we will have a vuex store and functionality to fetch data
-// https://gitlab.com/gitlab-org/gitlab/issues/32019
-import { GlLoadingIcon } from '@gitlab/ui';
-import { __ } from '~/locale';
-import createFlash from '~/flash';
-import Api from '~/api';
-import CustomStageForm from './custom_stage_form.vue';
-
-export default {
-  name: 'CustomStageFormContainer',
-  components: {
-    CustomStageForm,
-    GlLoadingIcon,
-  },
-  props: {
-    namespace: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      // NOTE: events will be part of the response from the new cycle analytics backend
-      // https://gitlab.com/gitlab-org/gitlab-foss/merge_requests/31535
-      events: [],
-      labels: [],
-      isLoading: false,
-    };
-  },
-  created() {
-    this.isLoading = true;
-    Api.groupLabels(this.namespace)
-      .then(labels => {
-        this.labels = labels.map(({ title, ...rest }) => ({ ...rest, name: title }));
-      })
-      .catch(() => {
-        createFlash(__('There was an error fetching the form data'));
-      })
-      .finally(() => {
-        this.isLoading = false;
-      });
-  },
-};
-</script>
-<template>
-  <gl-loading-icon v-if="isLoading" size="md" class="my-3" />
-  <custom-stage-form v-else :labels="labels" :events="events" />
-</template>

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

@@ -19,13 +19,11 @@ export default {
       required: false,
     },
   },
-  computed: {
-    activeClass() {
-      return 'active font-weight-bold border-style-solid border-color-blue-300';
-    },
-    inactiveClass() {
-      return 'bg-transparent border-style-dashed border-color-default';
-    },
+  data() {
+    return {
+      activeClass: 'active font-weight-bold border-color-blue-300',
+      inactiveClass: 'bg-transparent border-color-default',
+    };
   },
 };
 </script>
@@ -33,7 +31,7 @@ export default {
 <template>
   <div
     :class="[isActive ? activeClass : inactiveClass]"
-    class="stage-nav-item d-flex pl-4 pr-4 m-0 mb-1 ml-2 rounded border-width-1px"
+    class="stage-nav-item d-flex pl-4 pr-4 m-0 mb-1 ml-2 rounded border-width-1px border-style-solid"
   >
     <slot></slot>
     <div v-if="canEdit" class="dropdown">

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

@@ -6,7 +6,7 @@ import StageNavItem from './stage_nav_item.vue';
 import StageEventList from './stage_event_list.vue';
 import StageTableHeader from './stage_table_header.vue';
 import AddStageButton from './add_stage_button.vue';
-import CustomStageFormContainer from './custom_stage_form_container.vue';
+import CustomStageForm from './custom_stage_form.vue';
 
 export default {
   name: 'StageTable',
@@ -18,7 +18,7 @@ export default {
     StageNavItem,
     StageTableHeader,
     AddStageButton,
-    CustomStageFormContainer,
+    CustomStageForm,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -32,7 +32,7 @@ export default {
       type: Object,
       required: true,
     },
-    isLoadingStage: {
+    isLoading: {
       type: Boolean,
       required: true,
     },
@@ -44,7 +44,15 @@ export default {
       type: Boolean,
       required: true,
     },
-    events: {
+    currentStageEvents: {
+      type: Array,
+      required: true,
+    },
+    customStageFormEvents: {
+      type: Array,
+      required: true,
+    },
+    labels: {
       type: Array,
       required: true,
     },
@@ -60,19 +68,14 @@ export default {
       type: Boolean,
       required: true,
     },
-    groupPath: {
-      type: String,
-      required: false,
-      default: null,
-    },
   },
   computed: {
     stageName() {
       return this.currentStage ? this.currentStage.legend : __('Related Issues');
     },
     shouldDisplayStage() {
-      const { events = [], isLoadingStage, isEmptyStage } = this;
-      return events.length && !isLoadingStage && !isEmptyStage;
+      const { currentStageEvents = [], isLoading, isEmptyStage } = this;
+      return currentStageEvents.length && !isLoading && !isEmptyStage;
     },
     stageHeaders() {
       return [
@@ -147,20 +150,24 @@ export default {
           </ul>
         </nav>
         <div class="section stage-events">
-          <gl-loading-icon v-if="isLoadingStage" class="mt-4" size="md" />
+          <gl-loading-icon v-if="isLoading" class="mt-4" size="md" />
           <gl-empty-state
             v-else-if="currentStage && !currentStage.isUserAllowed"
             :title="__('You need permission.')"
             :description="__('Want to see the data? Please ask an administrator for access.')"
             :svg-path="noAccessSvgPath"
           />
-          <custom-stage-form-container
+          <custom-stage-form
             v-else-if="isAddingCustomStage"
-            :events="events"
-            :namespace="groupPath"
+            :events="customStageFormEvents"
+            :labels="labels"
           />
           <template v-else>
-            <stage-event-list v-if="shouldDisplayStage" :stage="currentStage" :events="events" />
+            <stage-event-list
+              v-if="shouldDisplayStage"
+              :stage="currentStage"
+              :events="currentStageEvents"
+            />
             <gl-empty-state
               v-if="isEmptyStage"
               :title="__('We don\'t have enough data to show this stage.')"

ee/app/assets/javascripts/analytics/cycle_analytics/mixins/add_stage_mixin.js

-export default {
-  data() {
-    return {
-      isCustomStageForm: false,
-    };
-  },
-  methods: {
-    showAddStageForm() {
-      if (this.store) {
-        this.store.deactivateAllStages();
-      }
-      this.isCustomStageForm = true;
-    },
-    hideAddStageForm() {
-      this.isCustomStageForm = false;
-    },
-  },
-};

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

@@ -2,9 +2,11 @@ import * as types from './mutation_types';
 import axios from '~/lib/utils/axios_utils';
 import createFlash from '~/flash';
 import { __ } from '~/locale';
+import Api from '~/api';
 
 export const setCycleAnalyticsDataEndpoint = ({ commit }, groupPath) =>
   commit(types.SET_CYCLE_ANALYTICS_DATA_ENDPOINT, groupPath);
+
 export const setStageDataEndpoint = ({ commit }, stageSlug) =>
   commit(types.SET_STAGE_DATA_ENDPOINT, stageSlug);
 export const setSelectedGroup = ({ commit }, group) => commit(types.SET_SELECTED_GROUP, group);
@@ -50,6 +52,7 @@ export const receiveCycleAnalyticsDataSuccess = ({ state, commit, dispatch }, da
     createFlash(__('There was an error while fetching cycle analytics data.'));
   }
 };
+
 export const receiveCycleAnalyticsDataError = ({ commit }, { response }) => {
   const { status } = response;
   commit(types.RECEIVE_CYCLE_ANALYTICS_DATA_ERROR, status);
@@ -70,10 +73,21 @@ export const fetchCycleAnalyticsData = ({ state, dispatch }) => {
     .catch(error => dispatch('receiveCycleAnalyticsDataError', error));
 };
 
-export const showCustomStageForm = ({ commit }) => {
-  commit(types.SHOW_CUSTOM_STAGE_FORM);
+export const hideCustomStageForm = ({ commit }) => commit(types.HIDE_CUSTOM_STAGE_FORM);
+
+export const receiveCustomStageFormDataSuccess = ({ commit }, data) =>
+  commit(types.RECEIVE_CUSTOM_STAGE_FORM_DATA_SUCCESS, data);
+export const receiveCustomStageFormDataError = ({ commit }, error) => {
+  commit(types.RECEIVE_CUSTOM_STAGE_FORM_DATA_ERROR, error);
+  createFlash(__('There was an error fetching data for the form'));
 };
+export const requestCustomStageFormData = ({ commit }) =>
+  commit(types.REQUEST_CUSTOM_STAGE_FORM_DATA);
+
+export const fetchCustomStageFormData = ({ dispatch }, groupPath) => {
+  dispatch('requestCustomStageFormData');
 
-export const hideCustomStageForm = ({ commit }) => {
-  commit(types.HIDE_CUSTOM_STAGE_FORM);
+  return Api.groupLabels(groupPath)
+    .then(data => dispatch('receiveCustomStageFormDataSuccess', data))
+    .catch(error => dispatch('receiveCustomStageFormDataError', error));
 };

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

@@ -9,4 +9,4 @@ export const defaultStage = state => (state.stages.length ? state.stages[0] : nu
 export const hasNoAccessError = state => state.errorCode === httpStatus.FORBIDDEN;
 
 export const currentGroupPath = state =>
-  state.selectedGroup ? state.selectedGroup.full_path : null;
+  state.selectedGroup && state.selectedGroup.full_path ? state.selectedGroup.full_path : null;

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

@@ -14,5 +14,8 @@ export const REQUEST_STAGE_DATA = 'REQUEST_STAGE_DATA';
 export const RECEIVE_STAGE_DATA_SUCCESS = 'RECEIVE_STAGE_DATA_SUCCESS';
 export const RECEIVE_STAGE_DATA_ERROR = 'RECEIVE_STAGE_DATA_ERROR';
 
-export const SHOW_CUSTOM_STAGE_FORM = 'SHOW_CUSTOM_STAGE_FORM';
 export const HIDE_CUSTOM_STAGE_FORM = 'HIDE_CUSTOM_STAGE_FORM';
+
+export const REQUEST_CUSTOM_STAGE_FORM_DATA = 'REQUEST_CUSTOM_STAGE_FORM_DATA';
+export const RECEIVE_CUSTOM_STAGE_FORM_DATA_SUCCESS = 'RECEIVE_CUSTOM_STAGE_FORM_DATA_SUCCESS';
+export const RECEIVE_CUSTOM_STAGE_FORM_DATA_ERROR = 'RECEIVE_CUSTOM_STAGE_FORM_DATA_ERROR';

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

@@ -58,25 +58,32 @@ export default {
   [types.REQUEST_STAGE_DATA](state) {
     state.isLoadingStage = true;
   },
-  [types.RECEIVE_STAGE_DATA_SUCCESS](state, data) {
-    state.events = data.events.map(({ name = '', ...rest }) =>
+  [types.RECEIVE_STAGE_DATA_SUCCESS](state, data = {}) {
+    const { events = [] } = data;
+    state.currentStageEvents = events.map(({ name = '', ...rest }) =>
       convertObjectPropsToCamelCase({ title: name, ...rest }, { deep: true }),
     );
-    state.isEmptyStage = state.events.length === 0;
+    state.isEmptyStage = state.currentStageEvents.length === 0;
     state.isLoadingStage = false;
   },
   [types.RECEIVE_STAGE_DATA_ERROR](state) {
     state.isEmptyStage = true;
     state.isLoadingStage = false;
   },
-  [types.SHOW_CUSTOM_STAGE_FORM](state) {
+  [types.REQUEST_CUSTOM_STAGE_FORM_DATA](state) {
     state.isAddingCustomStage = true;
     state.isEmptyStage = false;
-    state.isLoadingStage = false;
+    state.isLoadingStageForm = true;
   },
   [types.HIDE_CUSTOM_STAGE_FORM](state) {
     state.isAddingCustomStage = false;
-    state.isEmptyStage = false;
-    state.isLoadingStage = false;
+  },
+  [types.RECEIVE_CUSTOM_STAGE_FORM_DATA_SUCCESS](state, data = []) {
+    state.labels = data.map(convertObjectPropsToCamelCase);
+    state.isLoadingStageForm = false;
+  },
+  [types.RECEIVE_CUSTOM_STAGE_FORM_DATA_ERROR](state) {
+    state.isLoadingStageForm = false;
+    state.labels = [];
   },
 };

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

@@ -10,6 +10,7 @@ export default () => ({
 
   isLoading: false,
   isLoadingStage: false,
+  isLoadingStageForm: false,
 
   isEmptyStage: false,
   errorCode: null,
@@ -20,7 +21,11 @@ export default () => ({
   selectedProjectIds: [],
   selectedStageName: null,
 
-  events: [],
+  currentStageEvents: [],
+
   stages: [],
   summary: [],
+  labels: [],
+
+  customStageFormEvents: [],
 });

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

-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { createLocalVue, shallowMount, mount } from '@vue/test-utils';
 import Vuex from 'vuex';
+import Vue from 'vue';
 import store from 'ee/analytics/cycle_analytics/store';
 import Component from 'ee/analytics/cycle_analytics/components/base.vue';
 import { GlEmptyState } from '@gitlab/ui';
@@ -21,22 +22,49 @@ const emptyStateSvgPath = 'path/to/empty/state';
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
+function createComponent({ opts = {}, shallow = true, withStageSelected = false } = {}) {
+  const func = shallow ? shallowMount : mount;
+  const comp = func(Component, {
+    localVue,
+    store,
+    sync: false,
+    propsData: {
+      emptyStateSvgPath,
+      noDataSvgPath,
+      noAccessSvgPath,
+    },
+    ...opts,
+  });
+
+  if (withStageSelected) {
+    comp.vm.$store.dispatch('setSelectedGroup', {
+      ...mockData.group,
+    });
+
+    comp.vm.$store.dispatch('receiveCycleAnalyticsDataSuccess', {
+      ...mockData.cycleAnalyticsData,
+    });
+
+    comp.vm.$store.dispatch('receiveStageDataSuccess', {
+      events: mockData.issueEvents,
+    });
+  }
+  return comp;
+}
+
 describe('Cycle Analytics component', () => {
   let wrapper;
   let mock;
 
+  const selectStageNavItem = index =>
+    wrapper
+      .find(StageTable)
+      .findAll('.stage-nav-item')
+      .at(index);
+
   beforeEach(() => {
     mock = new MockAdapter(axios);
-    wrapper = shallowMount(localVue.extend(Component), {
-      localVue,
-      store,
-      sync: false,
-      propsData: {
-        emptyStateSvgPath,
-        noDataSvgPath,
-        noAccessSvgPath,
-      },
-    });
+    wrapper = createComponent();
   });
 
   afterEach(() => {
@@ -66,17 +94,7 @@ describe('Cycle Analytics component', () => {
     describe('after a filter has been selected', () => {
       describe('the user has access to the group', () => {
         beforeEach(() => {
-          wrapper.vm.$store.dispatch('setSelectedGroup', {
-            ...mockData.group,
-          });
-
-          wrapper.vm.$store.dispatch('receiveCycleAnalyticsDataSuccess', {
-            ...mockData.cycleAnalyticsData,
-          });
-
-          wrapper.vm.$store.dispatch('receiveStageDataSuccess', {
-            events: mockData.issueEvents,
-          });
+          wrapper = createComponent({ withStageSelected: true });
         });
 
         it('hides the empty state', () => {
@@ -92,8 +110,56 @@ describe('Cycle Analytics component', () => {
           expect(wrapper.find(SummaryTable).exists()).toBe(true);
         });
 
-        it('displays the stage table', () => {
-          expect(wrapper.find(StageTable).exists()).toBe(true);
+        it('does not display the add stage button', () => {
+          expect(wrapper.find('.js-add-stage-button').exists()).toBe(false);
+        });
+
+        describe('StageTable', () => {
+          beforeEach(() => {
+            mock = new MockAdapter(axios);
+            wrapper = createComponent({
+              opts: {
+                stubs: {
+                  'stage-event-list': true,
+                  'summary-table': true,
+                  'add-stage-button': true,
+                  'stage-table-header': true,
+                },
+              },
+              shallow: false,
+              withStageSelected: true,
+            });
+          });
+
+          afterEach(() => {
+            wrapper.destroy();
+            mock.restore();
+          });
+
+          it('displays the stage table', () => {
+            expect(wrapper.find(StageTable).exists()).toBe(true);
+          });
+
+          it('has the first stage selected by default', () => {
+            const first = selectStageNavItem(0);
+            const second = selectStageNavItem(1);
+
+            expect(first.classes('active')).toBe(true);
+            expect(second.classes('active')).toBe(false);
+          });
+
+          it('can navigate to different stages', done => {
+            selectStageNavItem(2).trigger('click');
+
+            Vue.nextTick(() => {
+              const first = selectStageNavItem(0);
+              const third = selectStageNavItem(2);
+
+              expect(third.classes('active')).toBe(true);
+              expect(first.classes('active')).toBe(false);
+              done();
+            });
+          });
         });
       });
 
@@ -112,6 +178,49 @@ describe('Cycle Analytics component', () => {
           expect(emptyState.exists()).toBe(true);
           expect(emptyState.props('svgPath')).toBe(noAccessSvgPath);
         });
+
+        it('will not render the summary table', () => {
+          expect(wrapper.find('.js-summary-table').exists()).toBe(false);
+        });
+
+        it('will not render the stage table', () => {
+          expect(wrapper.find('.js-stage-table').exists()).toBe(false);
+        });
+
+        it('does not display the add stage button', () => {
+          expect(wrapper.find('.js-add-stage-button').exists()).toBe(false);
+        });
+      });
+
+      describe('with customizableCycleAnalytics=true', () => {
+        beforeEach(() => {
+          mock = new MockAdapter(axios);
+          wrapper = createComponent({
+            opts: {
+              stubs: {
+                'summary-table': true,
+                'stage-event-list': true,
+                'stage-nav-item': true,
+              },
+              provide: {
+                glFeatures: {
+                  customizableCycleAnalytics: true,
+                },
+              },
+            },
+            shallow: false,
+            withStageSelected: true,
+          });
+        });
+
+        afterEach(() => {
+          wrapper.destroy();
+          mock.restore();
+        });
+
+        it('will display the add stage button', () => {
+          expect(wrapper.find('.js-add-stage-button').exists()).toBe(true);
+        });
       });
     });
   });

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

 import { mount, shallowMount } from '@vue/test-utils';
 import LabelsSelector from 'ee/analytics/cycle_analytics/components/labels_selector.vue';
-import { mockLabels } from '../../../../../../spec/javascripts/vue_shared/components/sidebar/labels_select/mock_data';
+import { groupLabels } from '../mock_data';
 
-const labels = mockLabels.map(({ title, ...rest }) => ({ ...rest, name: title }));
-const selectedLabel = labels[labels.length - 1];
+const selectedLabel = groupLabels[groupLabels.length - 1];
 
 describe('Cycle Analytics LabelsSelector', () => {
   function createComponent({ props = {}, shallow = true } = {}) {
     const func = shallow ? shallowMount : mount;
     return func(LabelsSelector, {
       propsData: {
-        labels,
+        labels: groupLabels,
         selectedLabelId: props.selectedLabelId || null,
       },
       sync: false,
@@ -18,6 +17,7 @@ describe('Cycle Analytics LabelsSelector', () => {
   }
 
   let wrapper = null;
+  const labelNames = groupLabels.map(({ name }) => name);
 
   describe('with no item selected', () => {
     beforeEach(() => {
@@ -27,13 +27,9 @@ describe('Cycle Analytics LabelsSelector', () => {
     afterEach(() => {
       wrapper.destroy();
     });
-    it('will generate the list of labels', () => {
-      // includes the blank option 'Select a label'
-      expect(wrapper.findAll('gldropdownitem-stub').length).toEqual(labels.length + 1);
 
-      labels.forEach(({ name }) => {
-        expect(wrapper.text()).toContain(name);
-      });
+    it.each(labelNames)('generate a label item for the label %s', name => {
+      expect(wrapper.text()).toContain(name);
     });
 
     it('will render with the default option selected', () => {
@@ -55,7 +51,7 @@ describe('Cycle Analytics LabelsSelector', () => {
         elem.trigger('click');
 
         expect(wrapper.emitted('selectLabel').length > 0).toBe(true);
-        expect(wrapper.emitted('selectLabel')[0]).toContain(mockLabels[1].id);
+        expect(wrapper.emitted('selectLabel')[0]).toContain(groupLabels[1].id);
       });
 
       it('will emit the "clearLabel" event if it is the default item', () => {
@@ -77,6 +73,7 @@ describe('Cycle Analytics LabelsSelector', () => {
     afterEach(() => {
       wrapper.destroy();
     });
+
     it('will set the active class', () => {
       const activeItem = wrapper.find('[active="true"]');
 

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

@@ -23,6 +23,8 @@ const generateEvents = n =>
     .fill(issueEvents[0])
     .map((ev, k) => ({ ...ev, title: `event-${k}`, id: k }));
 
+const bulkEvents = generateEvents(50);
+
 const mockStubs = {
   'stage-event-item': true,
   'stage-build-item': true,
@@ -54,8 +56,9 @@ describe('Stage', () => {
     beforeEach(() => {
       wrapper = createComponent({
         props: {
-          events: generateEvents(50),
+          events: bulkEvents,
         },
+        stubs: mockStubs,
       });
     });
 

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

 import Vue from 'vue';
 import { shallowMount, mount } from '@vue/test-utils';
 import StageTable from 'ee/analytics/cycle_analytics/components/stage_table.vue';
-import { issueEvents, issueStage, allowedStages } from '../mock_data';
+import { issueEvents, issueStage, allowedStages, groupLabels } from '../mock_data';
 
 let wrapper = null;
 const $sel = {
@@ -25,14 +25,16 @@ function createComponent(props = {}, shallow = false) {
     propsData: {
       stages: allowedStages,
       currentStage: issueStage,
-      events: issueEvents,
-      isLoadingStage: false,
+      currentStageEvents: issueEvents,
+      labels: groupLabels,
+      isLoading: false,
       isEmptyStage: false,
       isUserAllowed: true,
       isAddingCustomStage: false,
       noDataSvgPath,
       noAccessSvgPath,
       canEditStages: false,
+      customStageFormEvents: [],
       ...props,
     },
     stubs: {
@@ -118,12 +120,10 @@ describe('StageTable', () => {
 
         selectStage(1);
 
-        Vue.nextTick()
-          .then(() => {
-            expect(wrapper.emitted().selectStage.length).toEqual(1);
-          })
-          .then(done)
-          .catch(done.fail);
+        Vue.nextTick(() => {
+          expect(wrapper.emitted().selectStage.length).toEqual(1);
+          done();
+        });
       });
 
       it('will emit `selectStage` with the new stage title', done => {
@@ -131,19 +131,17 @@ describe('StageTable', () => {
 
         selectStage(1);
 
-        Vue.nextTick()
-          .then(() => {
-            const [params] = wrapper.emitted('selectStage')[0];
-            expect(params).toMatchObject({ title: secondStage.title });
-          })
-          .then(done)
-          .catch(done.fail);
+        Vue.nextTick(() => {
+          const [params] = wrapper.emitted('selectStage')[0];
+          expect(params).toMatchObject({ title: secondStage.title });
+          done();
+        });
       });
     });
   });
 
-  it('isLoadingStage = true', () => {
-    wrapper = createComponent({ isLoadingStage: true }, true);
+  it('isLoading = true', () => {
+    wrapper = createComponent({ isLoading: true }, true);
     expect(wrapper.find('gl-loading-icon-stub').exists()).toEqual(true);
   });
 

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

@@ -3,6 +3,9 @@ import { getJSONFixture } from 'helpers/fixtures';
 import mutations from 'ee/analytics/cycle_analytics/store/mutations';
 import * as types from 'ee/analytics/cycle_analytics/store/mutation_types';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { mockLabels } from '../../../../../spec/javascripts/vue_shared/components/sidebar/labels_select/mock_data';
+
+export const groupLabels = mockLabels.map(({ title, ...rest }) => ({ ...rest, name: title }));
 
 export const group = {
   id: 1,

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

@@ -4,10 +4,12 @@ import testAction from 'helpers/vuex_action_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import * as actions from 'ee/analytics/cycle_analytics/store/actions';
 import * as types from 'ee/analytics/cycle_analytics/store/mutation_types';
-import { group, cycleAnalyticsData, allowedStages as stages } from '../mock_data';
+import { group, cycleAnalyticsData, allowedStages as stages, groupLabels } from '../mock_data';
 
 const stageData = { events: [] };
 const error = new Error('Request failed with status code 404');
+const groupPath = 'cool-group';
+const groupLabelsEndpoint = `/groups/${groupPath}/-/labels`;
 
 describe('Cycle analytics actions', () => {
   let state;
@@ -143,6 +145,59 @@ describe('Cycle analytics actions', () => {
     });
   });
 
+  describe('fetchCustomStageFormData', () => {
+    beforeEach(() => {
+      mock.onGet(groupLabelsEndpoint).replyOnce(200, groupLabels);
+    });
+
+    it('dispatches receiveCustomStageFormData if the request succeeds', done => {
+      testAction(
+        actions.fetchCustomStageFormData,
+        groupPath,
+        state,
+        [],
+        [
+          { type: 'requestCustomStageFormData' },
+          {
+            type: 'receiveCustomStageFormDataSuccess',
+            payload: groupLabels,
+          },
+        ],
+        done,
+      );
+    });
+
+    it('dispatches receiveCustomStageFormDataError if the request fails', done => {
+      testAction(
+        actions.fetchCustomStageFormData,
+        'this-path-does-not-exist',
+        state,
+        [],
+        [
+          { type: 'requestCustomStageFormData' },
+          {
+            type: 'receiveCustomStageFormDataError',
+            payload: error,
+          },
+        ],
+        done,
+      );
+    });
+
+    describe('receiveCustomStageFormDataError', () => {
+      beforeEach(() => {
+        setFixtures('<div class="flash-container"></div>');
+      });
+      it('flashes an error message if the request fails', () => {
+        actions.receiveCustomStageFormDataError({
+          commit: () => {},
+        });
+
+        shouldFlashAnError('There was an error fetching data for the form');
+      });
+    });
+  });
+
   describe('fetchCycleAnalyticsData', () => {
     beforeEach(() => {
       mock.onGet(state.endpoints.cycleAnalyticsData).replyOnce(200, cycleAnalyticsData);

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

@@ -89,4 +89,26 @@ describe('Cycle analytics getters', () => {
       expect(getters.hasNoAccessError(state)).toEqual(false);
     });
   });
+
+  describe('currentGroupPath', () => {
+    describe('with selectedGroup set', () => {
+      it('returns the `full_path` value of the group', () => {
+        const fullPath = 'cool-beans';
+        state = {
+          selectedGroup: {
+            full_path: fullPath,
+          },
+        };
+
+        expect(getters.currentGroupPath(state)).toEqual(fullPath);
+      });
+    });
+
+    describe('without a selectedGroup set', () => {
+      it.each([[''], [{}], [null]])('given %s will return null', value => {
+        state = { selectedGroup: value };
+        expect(getters.currentGroupPath(state)).toEqual(null);
+      });
+    });
+  });
 });

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

 import mutations from 'ee/analytics/cycle_analytics/store/mutations';
 import * as types from 'ee/analytics/cycle_analytics/store/mutation_types';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+
 import {
   cycleAnalyticsData,
-  rawEvents as events,
+  rawEvents,
   issueEvents as transformedEvents,
   issueStage,
   planStage,
@@ -10,22 +12,36 @@ import {
   stagingStage,
   reviewStage,
   productionStage,
+  groupLabels,
 } from '../mock_data';
 
+let state = null;
+
 describe('Cycle analytics mutations', () => {
+  beforeEach(() => {
+    state = {};
+  });
+
+  afterEach(() => {
+    state = null;
+  });
+
   it.each`
-    mutation                              | stateKey                 | value
-    ${types.REQUEST_STAGE_DATA}           | ${'isLoadingStage'}      | ${true}
-    ${types.RECEIVE_STAGE_DATA_ERROR}     | ${'isEmptyStage'}        | ${true}
-    ${types.RECEIVE_STAGE_DATA_ERROR}     | ${'isLoadingStage'}      | ${false}
-    ${types.REQUEST_CYCLE_ANALYTICS_DATA} | ${'isLoading'}           | ${true}
-    ${types.SHOW_CUSTOM_STAGE_FORM}       | ${'isAddingCustomStage'} | ${true}
-    ${types.HIDE_CUSTOM_STAGE_FORM}       | ${'isAddingCustomStage'} | ${false}
+    mutation                                        | stateKey                 | value
+    ${types.REQUEST_STAGE_DATA}                     | ${'isLoadingStage'}      | ${true}
+    ${types.RECEIVE_STAGE_DATA_ERROR}               | ${'isEmptyStage'}        | ${true}
+    ${types.RECEIVE_STAGE_DATA_ERROR}               | ${'isLoadingStage'}      | ${false}
+    ${types.REQUEST_CYCLE_ANALYTICS_DATA}           | ${'isLoading'}           | ${true}
+    ${types.REQUEST_CUSTOM_STAGE_FORM_DATA}         | ${'isAddingCustomStage'} | ${true}
+    ${types.HIDE_CUSTOM_STAGE_FORM}                 | ${'isAddingCustomStage'} | ${false}
+    ${types.REQUEST_CUSTOM_STAGE_FORM_DATA}         | ${'isLoadingStageForm'}  | ${true}
+    ${types.RECEIVE_CUSTOM_STAGE_FORM_DATA_ERROR}   | ${'isLoadingStageForm'}  | ${false}
+    ${types.RECEIVE_CUSTOM_STAGE_FORM_DATA_SUCCESS} | ${'isLoadingStageForm'}  | ${false}
+    ${types.RECEIVE_CUSTOM_STAGE_FORM_DATA_ERROR}   | ${'labels'}              | ${[]}
   `('$mutation will set $stateKey=$value', ({ mutation, stateKey, value }) => {
-    const state = {};
     mutations[mutation](state);
 
-    expect(state[stateKey]).toBe(value);
+    expect(state[stateKey]).toEqual(value);
   });
 
   it.each`
@@ -39,7 +55,7 @@ describe('Cycle analytics mutations', () => {
   `(
     '$mutation with payload $payload will update state with $expectedState',
     ({ mutation, payload, expectedState }) => {
-      const state = { endpoints: { cycleAnalyticsData: '/fake/api' } };
+      state = { endpoints: { cycleAnalyticsData: '/fake/api' } };
       mutations[mutation](state, payload);
 
       expect(state).toMatchObject(expectedState);
@@ -47,21 +63,41 @@ describe('Cycle analytics mutations', () => {
   );
 
   describe(`${types.RECEIVE_STAGE_DATA_SUCCESS}`, () => {
-    it('will set the events state item with the camelCased events', () => {
-      const state = {};
+    it('will set the currentStageEvents state item with the camelCased events', () => {
+      mutations[types.RECEIVE_STAGE_DATA_SUCCESS](state, { events: rawEvents });
+
+      expect(state.currentStageEvents).toEqual(transformedEvents);
+    });
+
+    it('will set isLoadingStage=false', () => {
+      mutations[types.RECEIVE_STAGE_DATA_SUCCESS](state);
+
+      expect(state.isLoadingStage).toEqual(false);
+    });
 
-      mutations[types.RECEIVE_STAGE_DATA_SUCCESS](state, { events });
+    it('will set isEmptyStage=false if currentStageEvents.length > 0', () => {
+      mutations[types.RECEIVE_STAGE_DATA_SUCCESS](state, { events: rawEvents });
 
-      expect(state.events).toEqual(transformedEvents);
-      expect(state.isLoadingStage).toBe(false);
-      expect(state.isEmptyStage).toBe(false);
+      expect(state.isEmptyStage).toEqual(false);
+    });
+
+    it('will set isEmptyStage=true if currentStageEvents.length <= 0', () => {
+      mutations[types.RECEIVE_STAGE_DATA_SUCCESS](state);
+
+      expect(state.isEmptyStage).toEqual(true);
+    });
+  });
+
+  describe(`${types.RECEIVE_CUSTOM_STAGE_FORM_DATA_SUCCESS}`, () => {
+    it('will set the labels state item with the camelCased custom stage events', () => {
+      mutations[types.RECEIVE_CUSTOM_STAGE_FORM_DATA_SUCCESS](state, groupLabels);
+
+      expect(state.labels).toEqual(groupLabels.map(convertObjectPropsToCamelCase));
     });
   });
 
   describe(`${types.RECEIVE_CYCLE_ANALYTICS_DATA_SUCCESS}`, () => {
     it('will set isLoading=false and errorCode=null', () => {
-      const state = {};
-
       mutations[types.RECEIVE_CYCLE_ANALYTICS_DATA_SUCCESS](state, {
         stats: [],
         summary: [],
@@ -74,8 +110,6 @@ describe('Cycle analytics mutations', () => {
 
     describe('with data', () => {
       it('will convert the stats object to stages', () => {
-        const state = {};
-
         mutations[types.RECEIVE_CYCLE_ANALYTICS_DATA_SUCCESS](state, cycleAnalyticsData);
 
         [issueStage, planStage, codeStage, stagingStage, reviewStage, productionStage].forEach(
@@ -86,8 +120,6 @@ describe('Cycle analytics mutations', () => {
       });
 
       it('will set the selectedStageName to the name of the first stage', () => {
-        const state = {};
-
         mutations[types.RECEIVE_CYCLE_ANALYTICS_DATA_SUCCESS](state, cycleAnalyticsData);
 
         expect(state.selectedStageName).toEqual('issue');
@@ -96,8 +128,6 @@ describe('Cycle analytics mutations', () => {
       it('will set each summary item with a value of 0 to "-"', () => {
         // { value: '-', title: 'New Issues' }, { value: '-', title: 'Deploys' }
 
-        const state = {};
-
         mutations[types.RECEIVE_CYCLE_ANALYTICS_DATA_SUCCESS](state, {
           ...cycleAnalyticsData,
           summary: [{ value: 0, title: 'New Issues' }, { value: 0, title: 'Deploys' }],
@@ -113,7 +143,6 @@ describe('Cycle analytics mutations', () => {
 
   describe(`${types.RECEIVE_CYCLE_ANALYTICS_DATA_ERROR}`, () => {
     it('sets errorCode correctly', () => {
-      const state = {};
       const errorCode = 403;
 
       mutations[types.RECEIVE_CYCLE_ANALYTICS_DATA_ERROR](state, errorCode);

locale/gitlab.pot

@@ -15839,7 +15839,7 @@ msgstr ""
 msgid "There was an error fetching configuration for charts"
 msgstr ""
 
-msgid "There was an error fetching the form data"
+msgid "There was an error fetching data for the form"
 msgstr ""
 
 msgid "There was an error gathering the chart data"