Merge branch '221204-fix-custom-stages-and-charts-endpoints' into 'master'

[FE] Update vsa chart endpoints"

Closes #226996 and #221204

See merge request gitlab-org/gitlab!38029

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

@@ -106,7 +106,7 @@ export default {
     shouldDisplayTypeOfWorkCharts() {
       return !this.hasNoAccessError && !this.isLoading;
     },
-    shouldDsiplayPathNavigation() {
+    shouldDisplayPathNavigation() {
       return this.featureFlags.hasPathNavigation && !this.hasNoAccessError && this.selectedStage;
     },
     shouldDisplayFilterBar() {
@@ -225,9 +225,9 @@ export default {
         class="gl-align-self-start gl-sm-align-self-start gl-mt-0 gl-sm-mt-5"
       />
     </div>
-    <div class="mw-100">
-      <div class="mt-3 py-2 px-3 bg-gray-light border-top border-bottom">
-        <div v-if="shouldDsiplayPathNavigation" class="w-100 pb-2">
+    <div class="gl-max-w-full">
+      <div class="gl-mt-3 gl-py-2 gl-px-3 bg-gray-light border-top border-bottom">
+        <div v-if="shouldDisplayPathNavigation" class="gl-w-full gl-pb-2">
           <path-navigation
             class="js-path-navigation"
             :loading="isLoading"

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

@@ -25,11 +25,8 @@ export default {
       return Boolean(this.durationChartPlottableData.length);
     },
   },
-  mounted() {
-    this.fetchDurationData();
-  },
   methods: {
-    ...mapActions('durationChart', ['fetchDurationData', 'updateSelectedDurationChartStages']),
+    ...mapActions('durationChart', ['updateSelectedDurationChartStages']),
     onDurationStageSelect(stages) {
       this.updateSelectedDurationChartStages(stages);
     },

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

@@ -42,15 +42,16 @@ export const receiveStageDataError = ({ commit }) => {
   createFlash(__('There was an error fetching data for the selected stage'));
 };
 
-export const fetchStageData = ({ state, dispatch, getters }, slug) => {
-  const { cycleAnalyticsRequestParams = {} } = getters;
-  const {
-    selectedGroup: { fullPath },
-  } = state;
-
+export const fetchStageData = ({ dispatch, getters }, slug) => {
+  const { cycleAnalyticsRequestParams = {}, currentValueStreamId, currentGroupPath } = getters;
   dispatch('requestStageData');
 
-  return Api.cycleAnalyticsStageEvents(fullPath, slug, cycleAnalyticsRequestParams)
+  return Api.cycleAnalyticsStageEvents(
+    currentGroupPath,
+    currentValueStreamId,
+    slug,
+    cycleAnalyticsRequestParams,
+  )
     .then(({ data }) => dispatch('receiveStageDataSuccess', data))
     .catch(error => dispatch('receiveStageDataError', error));
 };
@@ -65,20 +66,32 @@ export const receiveStageMedianValuesError = ({ commit }) => {
   createFlash(__('There was an error fetching median data for stages'));
 };
 
-const fetchStageMedian = (currentGroupPath, stageId, params) =>
-  Api.cycleAnalyticsStageMedian(currentGroupPath, stageId, params).then(({ data }) => ({
-    id: stageId,
-    ...data,
-  }));
+const fetchStageMedian = (currentGroupPath, currentValueStreamId, stageId, params) =>
+  Api.cycleAnalyticsStageMedian(currentGroupPath, currentValueStreamId, stageId, params).then(
+    ({ data }) => ({
+      id: stageId,
+      ...data,
+    }),
+  );
 
 export const fetchStageMedianValues = ({ dispatch, getters }) => {
-  const { currentGroupPath, cycleAnalyticsRequestParams, activeStages } = getters;
+  const {
+    currentGroupPath,
+    cycleAnalyticsRequestParams,
+    activeStages,
+    currentValueStreamId,
+  } = getters;
   const stageIds = activeStages.map(s => s.slug);
 
   dispatch('requestStageMedianValues');
   return Promise.all(
     stageIds.map(stageId =>
-      fetchStageMedian(currentGroupPath, stageId, cycleAnalyticsRequestParams),
+      fetchStageMedian(
+        currentGroupPath,
+        currentValueStreamId,
+        stageId,
+        cycleAnalyticsRequestParams,
+      ),
     ),
   )
     .then(data => dispatch('receiveStageMedianValuesSuccess', data))
@@ -112,7 +125,6 @@ export const fetchCycleAnalyticsData = ({ dispatch }) => {
 
   return Promise.resolve()
     .then(() => dispatch('fetchValueStreams'))
-    .then(() => dispatch('fetchStageMedianValues'))
     .then(() => dispatch('receiveCycleAnalyticsDataSuccess'))
     .catch(error => dispatch('receiveCycleAnalyticsDataError', error));
 };
@@ -143,35 +155,19 @@ export const receiveGroupStagesSuccess = ({ commit, dispatch }, stages) => {
   return dispatch('setDefaultSelectedStage');
 };
 
-export const fetchValueStreamStages = ({
-  hasCreateMultipleValueStreams,
-  valueStreamId,
-  groupId,
-  params,
-}) => {
-  return hasCreateMultipleValueStreams
-    ? Api.cycleAnalyticsValueStreamGroupStagesAndEvents(groupId, valueStreamId, params)
-    : Api.cycleAnalyticsGroupStagesAndEvents(groupId, params);
-};
-
-export const fetchGroupStagesAndEvents = ({ state, dispatch, getters }) => {
-  const {
-    featureFlags: { hasCreateMultipleValueStreams = false },
-  } = state;
-
+export const fetchGroupStagesAndEvents = ({ dispatch, getters }) => {
   const {
     currentValueStreamId: valueStreamId,
     currentGroupPath: groupId,
     cycleAnalyticsRequestParams: { created_after, project_ids },
   } = getters;
+
   dispatch('requestGroupStages');
   dispatch('customStages/setStageEvents', []);
 
-  return fetchValueStreamStages({
-    hasCreateMultipleValueStreams,
-    groupId,
-    valueStreamId,
-    params: { start_date: created_after, project_ids },
+  return Api.cycleAnalyticsGroupStagesAndEvents(groupId, valueStreamId, {
+    start_date: created_after,
+    project_ids,
   })
     .then(({ data: { stages = [], events = [] } }) => {
       dispatch('receiveGroupStagesSuccess', stages);
@@ -213,18 +209,16 @@ export const receiveUpdateStageError = (
   return dispatch('customStages/setStageFormErrors', errors);
 };
 
-export const updateStage = ({ dispatch, state }, { id, ...rest }) => {
-  const {
-    selectedGroup: { fullPath },
-  } = state;
+export const updateStage = ({ dispatch, getters }, { id, ...params }) => {
+  const { currentGroupPath, currentValueStreamId } = getters;
 
   dispatch('requestUpdateStage');
   dispatch('customStages/setSavingCustomStage');
 
-  return Api.cycleAnalyticsUpdateStage(id, fullPath, { ...rest })
+  return Api.cycleAnalyticsUpdateStage(currentGroupPath, currentValueStreamId, id, params)
     .then(({ data }) => dispatch('receiveUpdateStageSuccess', data))
-    .catch(({ response: { status = 400, data: responseData } = {} }) =>
-      dispatch('receiveUpdateStageError', { status, responseData, data: { id, ...rest } }),
+    .catch(({ response: { status = httpStatus.BAD_REQUEST, data: responseData } = {} }) =>
+      dispatch('receiveUpdateStageError', { status, responseData, data: { id, ...params } }),
     );
 };
 
@@ -240,14 +234,11 @@ export const receiveRemoveStageError = ({ commit }) => {
   createFlash(__('There was an error removing your custom stage, please try again'));
 };
 
-export const removeStage = ({ dispatch, state }, stageId) => {
-  const {
-    selectedGroup: { fullPath },
-  } = state;
-
+export const removeStage = ({ dispatch, getters }, stageId) => {
+  const { currentGroupPath, currentValueStreamId } = getters;
   dispatch('requestRemoveStage');
 
-  return Api.cycleAnalyticsRemoveStage(stageId, fullPath)
+  return Api.cycleAnalyticsRemoveStage(currentGroupPath, currentValueStreamId, stageId)
     .then(() => dispatch('receiveRemoveStageSuccess'))
     .catch(error => dispatch('receiveRemoveStageError', error));
 };
@@ -289,19 +280,16 @@ export const receiveReorderStageError = ({ commit }) => {
   createFlash(__('There was an error updating the stage order. Please try reloading the page.'));
 };
 
-export const reorderStage = ({ dispatch, state }, initialData) => {
+export const reorderStage = ({ dispatch, getters }, initialData) => {
   dispatch('requestReorderStage');
-
-  const {
-    selectedGroup: { fullPath },
-  } = state;
+  const { currentGroupPath, currentValueStreamId } = getters;
   const { id, moveAfterId, moveBeforeId } = initialData;
 
   const params = moveAfterId ? { move_after_id: moveAfterId } : { move_before_id: moveBeforeId };
 
-  return Api.cycleAnalyticsUpdateStage(id, fullPath, params)
+  return Api.cycleAnalyticsUpdateStage(currentGroupPath, currentValueStreamId, id, params)
     .then(({ data }) => dispatch('receiveReorderStageSuccess', data))
-    .catch(({ response: { status = 400, data: responseData } = {} }) =>
+    .catch(({ response: { status = httpStatus.BAD_REQUEST, data: responseData } = {} }) =>
       dispatch('receiveReorderStageError', { status, responseData }),
     );
 };
@@ -311,14 +299,11 @@ export const receiveCreateValueStreamSuccess = ({ commit, dispatch }) => {
   return dispatch('fetchValueStreams');
 };
 
-export const createValueStream = ({ commit, dispatch, rootState }, data) => {
-  const {
-    selectedGroup: { fullPath },
-  } = rootState;
-
+export const createValueStream = ({ commit, dispatch, getters }, data) => {
+  const { currentGroupPath } = getters;
   commit(types.REQUEST_CREATE_VALUE_STREAM);
 
-  return Api.cycleAnalyticsCreateValueStream(fullPath, data)
+  return Api.cycleAnalyticsCreateValueStream(currentGroupPath, data)
     .then(() => dispatch('receiveCreateValueStreamSuccess'))
     .catch(({ response } = {}) => {
       const { data: { message, payload: { errors } } = null } = response;
@@ -328,7 +313,10 @@ export const createValueStream = ({ commit, dispatch, rootState }, data) => {
 
 export const setSelectedValueStream = ({ commit, dispatch }, streamId) => {
   commit(types.SET_SELECTED_VALUE_STREAM, streamId);
-  return dispatch('fetchGroupStagesAndEvents');
+  return Promise.resolve()
+    .then(() => dispatch('fetchGroupStagesAndEvents'))
+    .then(() => dispatch('fetchStageMedianValues'))
+    .then(() => dispatch('durationChart/fetchDurationData'));
 };
 
 export const receiveValueStreamsSuccess = ({ commit, dispatch }, data = []) => {

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

@@ -65,17 +65,13 @@ export const receiveCreateStageError = (
   return dispatch('setStageFormErrors', errors);
 };
 
-export const createStage = ({ dispatch, rootState, rootGetters }, data) => {
-  const {
-    selectedGroup: { fullPath },
-  } = rootState;
-
-  const { currentValueStreamId } = rootGetters;
+export const createStage = ({ dispatch, rootGetters }, data) => {
+  const { currentGroupPath, currentValueStreamId } = rootGetters;
 
   dispatch('clearFormErrors');
   dispatch('setSavingCustomStage');
 
-  return Api.cycleAnalyticsCreateStage(fullPath, currentValueStreamId, data)
+  return Api.cycleAnalyticsCreateStage(currentGroupPath, currentValueStreamId, data)
     .then(response => {
       const { status, data: responseData } = response;
       return dispatch('receiveCreateStageSuccess', { status, data: responseData });

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

@@ -22,14 +22,19 @@ export const receiveDurationDataError = ({ commit }) => {
 
 export const fetchDurationData = ({ dispatch, rootGetters }) => {
   dispatch('requestDurationData');
-
-  const { cycleAnalyticsRequestParams, activeStages, currentGroupPath } = rootGetters;
+  const {
+    cycleAnalyticsRequestParams,
+    activeStages,
+    currentGroupPath,
+    currentValueStreamId,
+  } = rootGetters;
   return Promise.all(
     activeStages.map(stage => {
       const { slug } = stage;
 
       return Api.cycleAnalyticsDurationChart(
         currentGroupPath,
+        currentValueStreamId,
         slug,
         cycleAnalyticsRequestParams,
       ).then(({ data }) => ({
@@ -53,7 +58,12 @@ export const receiveDurationMedianDataError = ({ commit }) => {
 
 export const fetchDurationMedianData = ({ dispatch, rootState, rootGetters }) => {
   const { startDate, endDate } = rootState;
-  const { cycleAnalyticsRequestParams, activeStages, currentGroupPath } = rootGetters;
+  const {
+    cycleAnalyticsRequestParams,
+    activeStages,
+    currentGroupPath,
+    currentValueStreamId,
+  } = rootGetters;
 
   const offsetValue = getDayDifference(new Date(startDate), new Date(endDate));
   const offsetCreatedAfter = getDateInPast(new Date(startDate), offsetValue);
@@ -63,7 +73,7 @@ export const fetchDurationMedianData = ({ dispatch, rootState, rootGetters }) =>
     activeStages.map(stage => {
       const { slug } = stage;
 
-      return Api.cycleAnalyticsDurationChart(currentGroupPath, slug, {
+      return Api.cycleAnalyticsDurationChart(currentGroupPath, currentValueStreamId, slug, {
         ...cycleAnalyticsRequestParams,
         created_after: dateFormat(offsetCreatedAfter, dateFormats.isoDate),
         created_before: dateFormat(offsetCreatedBefore, dateFormats.isoDate),

ee/app/assets/javascripts/api.js

@@ -14,17 +14,17 @@ export default {
   cycleAnalyticsTopLabelsPath: '/groups/:id/-/analytics/type_of_work/tasks_by_type/top_labels',
   cycleAnalyticsSummaryDataPath: '/groups/:id/-/analytics/value_stream_analytics/summary',
   cycleAnalyticsTimeSummaryDataPath: '/groups/:id/-/analytics/value_stream_analytics/time_summary',
-  cycleAnalyticsGroupStagesAndEventsPath: '/groups/:id/-/analytics/value_stream_analytics/stages',
-  cycleAnalyticsValueStreamGroupStagesAndEventsPath:
+  cycleAnalyticsGroupStagesAndEventsPath:
     '/groups/:id/-/analytics/value_stream_analytics/value_streams/:value_stream_id/stages',
   cycleAnalyticsValueStreamsPath: '/groups/:id/-/analytics/value_stream_analytics/value_streams',
   cycleAnalyticsStageEventsPath:
-    '/groups/:id/-/analytics/value_stream_analytics/stages/:stage_id/records',
+    '/groups/:id/-/analytics/value_stream_analytics/value_streams/:value_stream_id/stages/:stage_id/records',
   cycleAnalyticsStageMedianPath:
-    '/groups/:id/-/analytics/value_stream_analytics/stages/:stage_id/median',
-  cycleAnalyticsStagePath: '/groups/:id/-/analytics/value_stream_analytics/stages/:stage_id',
+    '/groups/:id/-/analytics/value_stream_analytics/value_streams/:value_stream_id/stages/:stage_id/median',
+  cycleAnalyticsStagePath:
+    '/groups/:id/-/analytics/value_stream_analytics/value_streams/:value_stream_id/stages/:stage_id',
   cycleAnalyticsDurationChartPath:
-    '/groups/:id/-/analytics/value_stream_analytics/stages/:stage_id/duration_chart',
+    '/groups/:id/-/analytics/value_stream_analytics/value_streams/:value_stream_id/stages/:stage_id/duration_chart',
   cycleAnalyticsGroupLabelsPath: '/groups/:namespace_path/-/labels.json',
   codeReviewAnalyticsPath: '/api/:version/analytics/code_review',
   groupActivityIssuesPath: '/api/:version/analytics/group_activity/issues_count',
@@ -138,38 +138,34 @@ export default {
     return axios.get(url, { params });
   },
 
-  cycleAnalyticsGroupStagesAndEvents(groupId, params = {}) {
-    const url = Api.buildUrl(this.cycleAnalyticsGroupStagesAndEventsPath).replace(':id', groupId);
-
-    return axios.get(url, { params });
-  },
-
-  cycleAnalyticsValueStreamGroupStagesAndEvents(groupId, valueStreamId, params = {}) {
-    const url = Api.buildUrl(this.cycleAnalyticsValueStreamGroupStagesAndEventsPath)
+  cycleAnalyticsGroupStagesAndEvents(groupId, valueStreamId, params = {}) {
+    const url = Api.buildUrl(this.cycleAnalyticsGroupStagesAndEventsPath)
       .replace(':id', groupId)
       .replace(':value_stream_id', valueStreamId);
 
     return axios.get(url, { params });
   },
 
-  cycleAnalyticsStageEvents(groupId, stageId, params = {}) {
+  cycleAnalyticsStageEvents(groupId, valueStreamId, stageId, params = {}) {
     const url = Api.buildUrl(this.cycleAnalyticsStageEventsPath)
       .replace(':id', groupId)
+      .replace(':value_stream_id', valueStreamId)
       .replace(':stage_id', stageId);
 
     return axios.get(url, { params });
   },
 
-  cycleAnalyticsStageMedian(groupId, stageId, params = {}) {
+  cycleAnalyticsStageMedian(groupId, valueStreamId, stageId, params = {}) {
     const url = Api.buildUrl(this.cycleAnalyticsStageMedianPath)
       .replace(':id', groupId)
+      .replace(':value_stream_id', valueStreamId)
       .replace(':stage_id', stageId);
 
     return axios.get(url, { params: { ...params } });
   },
 
   cycleAnalyticsCreateStage(groupId, valueStreamId, data) {
-    const url = Api.buildUrl(this.cycleAnalyticsValueStreamGroupStagesAndEventsPath)
+    const url = Api.buildUrl(this.cycleAnalyticsGroupStagesAndEventsPath)
       .replace(':id', groupId)
       .replace(':value_stream_id', valueStreamId);
 
@@ -186,27 +182,29 @@ export default {
     return axios.get(url, data);
   },
 
-  cycleAnalyticsStageUrl(stageId, groupId) {
+  cycleAnalyticsStageUrl(groupId, valueStreamId, stageId) {
     return Api.buildUrl(this.cycleAnalyticsStagePath)
       .replace(':id', groupId)
+      .replace(':value_stream_id', valueStreamId)
       .replace(':stage_id', stageId);
   },
 
-  cycleAnalyticsUpdateStage(stageId, groupId, data) {
-    const url = this.cycleAnalyticsStageUrl(stageId, groupId);
+  cycleAnalyticsUpdateStage(groupId, valueStreamId, stageId, data) {
+    const url = this.cycleAnalyticsStageUrl(groupId, valueStreamId, stageId);
 
     return axios.put(url, data);
   },
 
-  cycleAnalyticsRemoveStage(stageId, groupId) {
-    const url = this.cycleAnalyticsStageUrl(stageId, groupId);
+  cycleAnalyticsRemoveStage(groupId, valueStreamId, stageId) {
+    const url = this.cycleAnalyticsStageUrl(groupId, valueStreamId, stageId);
 
     return axios.delete(url);
   },
 
-  cycleAnalyticsDurationChart(groupId, stageSlug, params = {}) {
+  cycleAnalyticsDurationChart(groupId, valueStreamId, stageSlug, params = {}) {
     const url = Api.buildUrl(this.cycleAnalyticsDurationChartPath)
       .replace(':id', groupId)
+      .replace(':value_stream_id', valueStreamId)
       .replace(':stage_id', stageSlug);
 
     return axios.get(url, {

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

@@ -78,6 +78,7 @@ function createComponent({
   },
   shallow = true,
   withStageSelected = false,
+  withValueStreamSelected = true,
   featureFlags = {},
   props = {},
 } = {}) {
@@ -90,7 +91,6 @@ function createComponent({
       emptyStateSvgPath,
       noDataSvgPath,
       noAccessSvgPath,
-      baseStagesEndpoint: mockData.endpoints.baseStagesEndpoint,
       hideGroupDropDown,
       ...props,
     },
@@ -107,6 +107,10 @@ function createComponent({
     },
   });
 
+  if (withValueStreamSelected) {
+    comp.vm.$store.dispatch('receiveValueStreamsSuccess', mockData.valueStreams);
+  }
+
   if (withStageSelected) {
     comp.vm.$store.commit('SET_SELECTED_GROUP', {
       ...selectedGroup,
@@ -449,6 +453,7 @@ describe('Cycle Analytics component', () => {
                   StageNavItem,
                 },
               },
+              withValueStreamSelected: false,
               withStageSelected: true,
             });
           });
@@ -533,6 +538,7 @@ describe('Cycle Analytics component', () => {
           describe('enabled', () => {
             beforeEach(() => {
               wrapper = createComponent({
+                withValueStreamSelected: false,
                 withStageSelected: true,
                 pathNavigationEnabled: true,
               });
@@ -544,7 +550,7 @@ describe('Cycle Analytics component', () => {
               return waitForPromises();
             });
 
-            it('displays the path navigation', () => {
+            it('does not display the path navigation', () => {
               displaysPathNavigation(false);
             });
           });

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

@@ -29,10 +29,10 @@ export const endpoints = {
   groupLabels: /groups\/[A-Z|a-z|\d|\-|_]+\/-\/labels.json/,
   recentActivityData: /analytics\/value_stream_analytics\/summary/,
   timeMetricsData: /analytics\/value_stream_analytics\/time_summary/,
-  durationData: /analytics\/value_stream_analytics\/stages\/\d+\/duration_chart/,
-  stageData: /analytics\/value_stream_analytics\/stages\/\d+\/records/,
-  stageMedian: /analytics\/value_stream_analytics\/stages\/\d+\/median/,
-  baseStagesEndpoint: /analytics\/value_stream_analytics\/stages$/,
+  durationData: /analytics\/value_stream_analytics\/value_streams\/\d+\/stages\/\d+\/duration_chart/,
+  stageData: /analytics\/value_stream_analytics\/value_streams\/\d+\/stages\/\d+\/records/,
+  stageMedian: /analytics\/value_stream_analytics\/value_streams\/\d+\/stages\/\d+\/median/,
+  baseStagesEndpoint: /analytics\/value_stream_analytics\/value_streams\/\d+\/stages$/,
   tasksByTypeData: /analytics\/type_of_work\/tasks_by_type/,
   tasksByTypeTopLabelsData: /analytics\/type_of_work\/tasks_by_type\/top_labels/,
   valueStreamData: /analytics\/value_stream_analytics\/value_streams/,

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

@@ -28,8 +28,13 @@ const [selectedStage] = activeStages;
 const selectedStageSlug = selectedStage.slug;
 const [selectedValueStream] = valueStreams;
 
+const mockGetters = {
+  currentGroupPath: () => selectedGroup.fullPath,
+  currentValueStreamId: () => selectedValueStream.id,
+};
+
 const stageEndpoint = ({ stageId }) =>
-  `/groups/${selectedGroup.fullPath}/-/analytics/value_stream_analytics/stages/${stageId}`;
+  `/groups/${selectedGroup.fullPath}/-/analytics/value_stream_analytics/value_streams/${selectedValueStream.id}/stages/${stageId}`;
 
 jest.mock('~/flash');
 
@@ -52,6 +57,8 @@ describe('Cycle analytics actions', () => {
         hasDurationChartMedian: true,
       },
       activeStages,
+      selectedValueStream,
+      ...mockGetters,
     };
     mock = new MockAdapter(axios);
   });
@@ -84,13 +91,17 @@ describe('Cycle analytics actions', () => {
   describe('setSelectedValueStream', () => {
     const vs = { id: 'vs-1', name: 'Value stream 1' };
 
-    it('dispatches the fetchCycleAnalyticsData action', () => {
+    it('refetches the cycle analytics data', () => {
       return testAction(
         actions.setSelectedValueStream,
         vs,
         { ...state, selectedValueStream: {} },
         [{ type: types.SET_SELECTED_VALUE_STREAM, payload: vs }],
-        [{ type: 'fetchGroupStagesAndEvents' }],
+        [
+          { type: 'fetchGroupStagesAndEvents' },
+          { type: 'fetchStageMedianValues' },
+          { type: 'durationChart/fetchDurationData' },
+        ],
       );
     });
   });
@@ -269,7 +280,6 @@ describe('Cycle analytics actions', () => {
         [
           { type: 'requestCycleAnalyticsData' },
           { type: 'fetchValueStreams' },
-          { type: 'fetchStageMedianValues' },
           { type: 'receiveCycleAnalyticsDataSuccess' },
         ],
       );
@@ -437,7 +447,6 @@ describe('Cycle analytics actions', () => {
 
     beforeEach(() => {
       mock.onPut(stageEndpoint({ stageId }), payload).replyOnce(httpStatusCodes.OK, payload);
-      state = { selectedGroup };
     });
 
     it('dispatches receiveUpdateStageSuccess and customStages/setSavingCustomStage', () => {
@@ -583,7 +592,6 @@ describe('Cycle analytics actions', () => {
 
     beforeEach(() => {
       mock.onDelete(stageEndpoint({ stageId })).replyOnce(httpStatusCodes.OK);
-      state = { selectedGroup };
     });
 
     it('dispatches receiveRemoveStageSuccess with put request response data', () => {
@@ -820,10 +828,6 @@ describe('Cycle analytics actions', () => {
     const stageId = 'cool-stage';
     const payload = { id: stageId, move_after_id: '2', move_before_id: '8' };
 
-    beforeEach(() => {
-      state = { selectedGroup };
-    });
-
     describe('with no errors', () => {
       beforeEach(() => {
         mock.onPut(stageEndpoint({ stageId })).replyOnce(httpStatusCodes.OK);

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

@@ -15,6 +15,7 @@ import {
   transformedDurationData,
   transformedDurationMedianData,
   endpoints,
+  valueStreams,
 } from '../../../mock_data';
 import { shouldFlashAMessage } from '../../../helpers';
 
@@ -22,26 +23,30 @@ const selectedGroup = { fullPath: group.path };
 const [stage1, stage2] = stages;
 const hiddenStage = { ...stage1, hidden: true, id: 3, slug: 3 };
 const activeStages = [stage1, stage2];
+const [selectedValueStream] = valueStreams;
 
 const rootState = {
   startDate,
   endDate,
   stages: [...activeStages, hiddenStage],
   selectedGroup,
+  selectedValueStream,
   featureFlags: {
     hasDurationChart: true,
     hasDurationChartMedian: true,
   },
-  getters,
-  rootGetters: {
-    ...rootGetters,
-    activeStages,
-  },
 };
 
 describe('DurationChart actions', () => {
-  let state;
   let mock;
+  const state = {
+    ...rootState,
+    ...getters,
+    ...rootGetters,
+    activeStages,
+    currentGroupPath: () => selectedGroup.fullPath,
+    currentValueStreamId: () => selectedValueStream.id,
+  };
 
   beforeEach(() => {
     mock = new MockAdapter(axios);
@@ -60,7 +65,7 @@ describe('DurationChart actions', () => {
       return testAction(
         actions.fetchDurationData,
         null,
-        { activeStages },
+        state,
         [],
         [
           { type: 'requestDurationData' },
@@ -77,7 +82,11 @@ describe('DurationChart actions', () => {
       return actions
         .fetchDurationData({
           dispatch,
-          ...rootState,
+          rootState,
+          rootGetters: {
+            ...rootGetters,
+            activeStages,
+          },
         })
         .then(() => {
           const requestedUrls = mock.history.get.map(({ url }) => url);
@@ -98,7 +107,11 @@ describe('DurationChart actions', () => {
         return actions
           .fetchDurationData({
             dispatch,
-            ...rootState,
+            rootState,
+            rootGetters: {
+              ...rootGetters,
+              activeStages,
+            },
           })
           .then(() => {
             expect(dispatch).toHaveBeenCalledWith('receiveDurationDataError');
@@ -297,7 +310,7 @@ describe('DurationChart actions', () => {
       return testAction(
         actions.fetchDurationMedianData,
         null,
-        { ...rootState, activeStages },
+        state,
         [],
         [
           {
@@ -319,7 +332,7 @@ describe('DurationChart actions', () => {
           .fetchDurationMedianData({
             dispatch,
             rootState,
-            rootGetters: { activeStages },
+            rootGetters: { ...rootGetters, activeStages },
           })
           .then(() => {
             const requestedUrls = mock.history.get.map(({ url }) => url);