fix: Initial url update in Explore should replace existing url history #17030 (#17061)

public/app/features/explore/state/actions.ts

@@ -119,7 +119,7 @@ export function addQueryRow(exploreId: ExploreId, index: number): ThunkResult<vo
 /**
 /**
  * Loads a new datasource identified by the given name.
  * Loads a new datasource identified by the given name.
  */
  */
-export function changeDatasource(exploreId: ExploreId, datasource: string): ThunkResult<void> {
+export function changeDatasource(exploreId: ExploreId, datasource: string, replaceUrl = false): ThunkResult<void> {
   return async (dispatch, getState) => {
   return async (dispatch, getState) => {
     let newDataSourceInstance: DataSourceApi = null;
     let newDataSourceInstance: DataSourceApi = null;
 
 
@@ -137,8 +137,7 @@ export function changeDatasource(exploreId: ExploreId, datasource: string): Thun
     dispatch(updateDatasourceInstanceAction({ exploreId, datasourceInstance: newDataSourceInstance }));
     dispatch(updateDatasourceInstanceAction({ exploreId, datasourceInstance: newDataSourceInstance }));
 
 
     await dispatch(loadDatasource(exploreId, newDataSourceInstance));
     await dispatch(loadDatasource(exploreId, newDataSourceInstance));
-
-    dispatch(runQueries(exploreId));
+    dispatch(runQueries(exploreId, false, replaceUrl));
   };
   };
 }
 }
 
 
@@ -244,7 +243,7 @@ export function loadExploreDatasourcesAndSetDatasource(
     dispatch(loadExploreDatasources({ exploreId, exploreDatasources }));
     dispatch(loadExploreDatasources({ exploreId, exploreDatasources }));
 
 
     if (exploreDatasources.length >= 1) {
     if (exploreDatasources.length >= 1) {
-      dispatch(changeDatasource(exploreId, datasourceName));
+      dispatch(changeDatasource(exploreId, datasourceName, true));
     } else {
     } else {
       dispatch(loadDatasourceMissingAction({ exploreId }));
       dispatch(loadDatasourceMissingAction({ exploreId }));
     }
     }
@@ -513,7 +512,7 @@ export function processQueryResults(
 /**
 /**
  * Main action to run queries and dispatches sub-actions based on which result viewers are active
  * Main action to run queries and dispatches sub-actions based on which result viewers are active
  */
  */
-export function runQueries(exploreId: ExploreId, ignoreUIState = false): ThunkResult<void> {
+export function runQueries(exploreId: ExploreId, ignoreUIState = false, replaceUrl = false): ThunkResult<void> {
   return (dispatch, getState) => {
   return (dispatch, getState) => {
     const {
     const {
       datasourceInstance,
       datasourceInstance,
@@ -533,7 +532,7 @@ export function runQueries(exploreId: ExploreId, ignoreUIState = false): ThunkRe
 
 
     if (!hasNonEmptyQuery(queries)) {
     if (!hasNonEmptyQuery(queries)) {
       dispatch(clearQueriesAction({ exploreId }));
       dispatch(clearQueriesAction({ exploreId }));
-      dispatch(stateSave()); // Remember to saves to state and update location
+      dispatch(stateSave(replaceUrl)); // Remember to save to state and update location
       return;
       return;
     }
     }
 
 
@@ -567,7 +566,7 @@ export function runQueries(exploreId: ExploreId, ignoreUIState = false): ThunkRe
       dispatch(runQueriesForType(exploreId, 'Logs', { interval, format: 'logs' }));
       dispatch(runQueriesForType(exploreId, 'Logs', { interval, format: 'logs' }));
     }
     }
 
 
-    dispatch(stateSave());
+    dispatch(stateSave(replaceUrl));
   };
   };
 }
 }
 
 
@@ -691,7 +690,7 @@ const toRawTimeRange = (range: TimeRange): RawTimeRange => {
  * Saves Explore state to URL using the `left` and `right` parameters.
  * Saves Explore state to URL using the `left` and `right` parameters.
  * If split view is not active, `right` will not be set.
  * If split view is not active, `right` will not be set.
  */
  */
-export function stateSave(): ThunkResult<void> {
+export function stateSave(replaceUrl = false): ThunkResult<void> {
   return (dispatch, getState) => {
   return (dispatch, getState) => {
     const { left, right, split } = getState().explore;
     const { left, right, split } = getState().explore;
     const urlStates: { [index: string]: string } = {};
     const urlStates: { [index: string]: string } = {};
@@ -723,7 +722,7 @@ export function stateSave(): ThunkResult<void> {
       urlStates.right = serializeStateToUrlParam(rightUrlState, true);
       urlStates.right = serializeStateToUrlParam(rightUrlState, true);
     }
     }
 
 
-    dispatch(updateLocation({ query: urlStates }));
+    dispatch(updateLocation({ query: urlStates, replace: replaceUrl }));
   };
   };
 }
 }