Fix: Apply VSA filters to records endpoint

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

@@ -82,6 +82,7 @@ export default {
       'enableCustomOrdering',
       'cycleAnalyticsRequestParams',
       'pathNavigationData',
+      'isOverviewStageSelected',
     ]),
     ...mapGetters('customStages', ['customStageFormActive']),
     shouldRenderEmptyState() {
@@ -90,9 +91,6 @@ export default {
     shouldDisplayFilters() {
       return !this.errorCode;
     },
-    isOverviewStageSelected() {
-      return this.selectedStage?.id === OVERVIEW_STAGE_ID;
-    },
     shouldDisplayDurationChart() {
       return (
         !this.featureFlags.hasPathNavigation ||

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

@@ -36,11 +36,12 @@ export const setSelectedStage = ({ commit, getters: { paginationParams } }, stag
   commit(types.SET_PAGINATION, { ...paginationParams, page: 1, hasNextPage: null });
 };
 
-export const setDateRange = ({ commit, dispatch }, { skipFetch = false, startDate, endDate }) => {
+export const setDateRange = (
+  { commit, dispatch, getters: { isOverviewStageSelected }, state: { selectedStage } },
+  { startDate, endDate },
+) => {
   commit(types.SET_DATE_RANGE, { startDate, endDate });
-
-  if (skipFetch) return false;
-
+  if (selectedStage && !isOverviewStageSelected) dispatch('fetchStageData', selectedStage.id);
   return dispatch('fetchCycleAnalyticsData');
 };
 
@@ -341,7 +342,6 @@ export const initializeCycleAnalytics = ({ dispatch, commit }, initialData = {})
       selectedStage
         ? dispatch('setSelectedStage', selectedStage)
         : dispatch('setDefaultSelectedStage'),
-      selectedStage?.id ? dispatch('fetchStageData', selectedStage.id) : Promise.resolve(),
       dispatch('setPaths', { groupPath: group.fullPath, milestonesPath, labelsPath }),
       dispatch('filters/initialize', {
         selectedAuthor,
@@ -352,7 +352,12 @@ export const initializeCycleAnalytics = ({ dispatch, commit }, initialData = {})
       dispatch('durationChart/setLoading', true),
       dispatch('typeOfWork/setLoading', true),
     ])
-      .then(() => dispatch('fetchCycleAnalyticsData'))
+      .then(() =>
+        Promise.all([
+          selectedStage?.id ? dispatch('fetchStageData', selectedStage.id) : Promise.resolve(),
+          dispatch('fetchCycleAnalyticsData'),
+        ]),
+      )
       .then(() => dispatch('initializeCycleAnalyticsSuccess'));
   }
 
@@ -477,7 +482,12 @@ export const fetchValueStreams = ({ commit, dispatch, getters }) => {
     });
 };
 
-export const setFilters = ({ dispatch }) => {
+export const setFilters = ({
+  dispatch,
+  getters: { isOverviewStageSelected },
+  state: { selectedStage },
+}) => {
+  if (selectedStage && !isOverviewStageSelected) dispatch('fetchStageData', selectedStage.id);
   return dispatch('fetchCycleAnalyticsData');
 };
 

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

@@ -4,7 +4,12 @@ import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import httpStatus from '~/lib/utils/http_status';
 import { filterToQueryObject } from '~/vue_shared/components/filtered_search_bar/filtered_search_utils';
 import { dateFormats } from '../../shared/constants';
-import { DEFAULT_VALUE_STREAM_ID, OVERVIEW_STAGE_CONFIG, PAGINATION_TYPE } from '../constants';
+import {
+  DEFAULT_VALUE_STREAM_ID,
+  OVERVIEW_STAGE_CONFIG,
+  PAGINATION_TYPE,
+  OVERVIEW_STAGE_ID,
+} from '../constants';
 import { transformStagesForPathNavigation } from '../utils';
 
 export const hasNoAccessError = (state) => state.errorCode === httpStatus.FORBIDDEN;
@@ -63,6 +68,9 @@ export const enableCustomOrdering = ({ stages, errorSavingStageOrder }) =>
 export const customStageFormActive = ({ isCreatingCustomStage, isEditingCustomStage }) =>
   Boolean(isCreatingCustomStage || isEditingCustomStage);
 
+export const isOverviewStageSelected = ({ selectedStage }) =>
+  selectedStage?.id === OVERVIEW_STAGE_ID;
+
 /**
  * Until there are controls in place to edit stages outside of the stage table,
  * the path navigation component will only display active stages.

ee/changelogs/unreleased/ek-fix-apply-label-url-params-onload.yml

+---
+title: Refetch VSA stage data when filters change
+merge_request: 60991
+author:
+type: fixed

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

@@ -140,20 +140,6 @@ describe('Value Stream Analytics actions', () => {
     });
   });
 
-  describe('setDateRange', () => {
-    const payload = { startDate, endDate };
-
-    it('dispatches the fetchCycleAnalyticsData action', () => {
-      return testAction(
-        actions.setDateRange,
-        payload,
-        state,
-        [{ type: types.SET_DATE_RANGE, payload: { startDate, endDate } }],
-        [{ type: 'fetchCycleAnalyticsData' }],
-      );
-    });
-  });
-
   describe('fetchStageData', () => {
     const headers = {
       'X-Next-Page': 2,
@@ -1363,9 +1349,34 @@ describe('Value Stream Analytics actions', () => {
     });
   });
 
-  describe('setFilters', () => {
+  describe.each`
+    targetAction            | payload                   | mutations
+    ${actions.setDateRange} | ${{ startDate, endDate }} | ${[{ type: 'SET_DATE_RANGE', payload: { startDate, endDate } }]}
+    ${actions.setFilters}   | ${''}                     | ${[]}
+  `('$action', ({ targetAction, payload, mutations }) => {
+    let stateWithOverview = null;
+
+    beforeEach(() => {
+      stateWithOverview = { ...state, isOverviewStageSelected: () => true };
+    });
+
     it('dispatches the fetchCycleAnalyticsData action', () => {
-      return testAction(actions.setFilters, null, state, [], [{ type: 'fetchCycleAnalyticsData' }]);
+      return testAction(targetAction, payload, stateWithOverview, mutations, [
+        { type: 'fetchCycleAnalyticsData' },
+      ]);
+    });
+
+    describe('with a stage selected', () => {
+      beforeEach(() => {
+        stateWithOverview = { ...state, selectedStage };
+      });
+
+      it('dispatches the fetchStageData action', () => {
+        return testAction(targetAction, payload, stateWithOverview, mutations, [
+          { type: 'fetchStageData', payload: selectedStage.id },
+          { type: 'fetchCycleAnalyticsData' },
+        ]);
+      });
     });
   });
 });