Applying patch from @pslaughter

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

@@ -13,6 +13,7 @@ import StageDropdownFilter from './stage_dropdown_filter.vue';
 import SummaryTable from './summary_table.vue';
 import StageTable from './stage_table.vue';
 import TasksByTypeChart from './tasks_by_type_chart.vue';
+import UrlSync from './url_sync.vue';
 
 export default {
   name: 'CycleAnalytics',
@@ -27,6 +28,7 @@ export default {
     StageDropdownFilter,
     Scatterplot,
     TasksByTypeChart,
+    UrlSync,
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
@@ -203,6 +205,7 @@ export default {
 
 <template>
   <div class="js-cycle-analytics">
+    <url-sync />
     <div class="page-title-holder d-flex align-items-center">
       <h3 class="page-title">{{ __('Value Stream Analytics') }}</h3>
     </div>

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

+<script>
+import { mapState, mapGetters } from 'vuex';
+import { historyPushState } from '~/lib/utils/common_utils';
+import { setUrlParams } from '~/lib/utils/url_utility';
+import { toYmd } from '../../shared/utils';
+
+export default {
+  computed: {
+    ...mapGetters(['currentGroupPath', 'selectedProjectIds']),
+    ...mapState(['startDate', 'endDate']),
+    query() {
+      return {
+        group_id: this.currentGroupPath,
+        'project_ids[]': this.selectedProjectIds,
+        created_after: toYmd(this.startDate),
+        created_before: toYmd(this.endDate),
+      };
+    },
+  },
+  watch: {
+    query() {
+      historyPushState(setUrlParams(this.query, window.location.href, true));
+    },
+  },
+  render() {
+    return this.$slots.default;
+  },
+};
+</script>

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

 import dateFormat from 'dateformat';
 import Api from 'ee/api';
 import { getDayDifference, getDateInPast } from '~/lib/utils/datetime_utility';
-import { historyPushState } from '~/lib/utils/common_utils';
-import { setUrlParams } from '~/lib/utils/url_utility';
-import createFlash from '~/flash';
+import createFlash, { hideFlash } from '~/flash';
 import { __, sprintf } from '~/locale';
 import httpStatus from '~/lib/utils/http_status';
 import * as types from './mutation_types';
 import { dateFormats } from '../../shared/constants';
-import { toYmd } from '../../shared/utils';
-import { removeFlash } from '../utils';
+
+const removeError = () => {
+  const flashEl = document.querySelector('.flash-alert');
+  if (flashEl) {
+    hideFlash(flashEl);
+  }
+};
 
 const handleErrorOrRethrow = ({ action, error }) => {
   if (error?.response?.status === httpStatus.FORBIDDEN) {
@@ -26,50 +29,21 @@ const isStageNameExistsError = ({ status, errors }) => {
   return false;
 };
 
-const updateUrlParams = (
-  { getters: { currentGroupPath, selectedProjectIds } },
-  additionalParams = {},
-) => {
-  historyPushState(
-    setUrlParams(
-      {
-        group_id: currentGroupPath,
-        'project_ids[]': selectedProjectIds,
-        ...additionalParams,
-      },
-      window.location.href,
-      true,
-    ),
-  );
-};
-
 export const setFeatureFlags = ({ commit }, featureFlags) =>
   commit(types.SET_FEATURE_FLAGS, featureFlags);
 
-export const setSelectedGroup = ({ commit, getters }, group) => {
+export const setSelectedGroup = ({ commit }, group) => {
   commit(types.SET_SELECTED_GROUP, group);
-  updateUrlParams({ getters });
 };
 
-export const setSelectedProjects = ({ commit, getters }, projects) => {
+export const setSelectedProjects = ({ commit }, projects) => {
   commit(types.SET_SELECTED_PROJECTS, projects);
-  updateUrlParams({ getters });
 };
 
 export const setSelectedStage = ({ commit }, stage) => commit(types.SET_SELECTED_STAGE, stage);
 
-export const setDateRange = (
-  { commit, dispatch, getters },
-  { skipFetch = false, startDate, endDate },
-) => {
+export const setDateRange = ({ commit, dispatch }, { skipFetch = false, startDate, endDate }) => {
   commit(types.SET_DATE_RANGE, { startDate, endDate });
-  updateUrlParams(
-    { getters },
-    {
-      created_after: toYmd(startDate),
-      created_before: toYmd(endDate),
-    },
-  );
 
   if (skipFetch) return false;