Explore: fix update url on mode change (#25084)

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

@@ -2,7 +2,14 @@ import { PayloadAction } from '@reduxjs/toolkit';
 import { DataQuery, DefaultTimeZone, ExploreMode, LogsDedupStrategy, RawTimeRange, toUtc } from '@grafana/data';
 
 import * as Actions from './actions';
-import { changeDatasource, loadDatasource, navigateToExplore, refreshExplore, cancelQueries } from './actions';
+import {
+  changeDatasource,
+  loadDatasource,
+  navigateToExplore,
+  refreshExplore,
+  cancelQueries,
+  changeMode,
+} from './actions';
 import { ExploreId, ExploreUpdateState, ExploreUrlState } from 'app/types';
 import { thunkTester } from 'test/core/thunk/thunkTester';
 import {
@@ -15,6 +22,7 @@ import {
   updateUIStateAction,
   cancelQueriesAction,
   scanStopAction,
+  changeModeAction,
 } from './actionTypes';
 import { Emitter } from 'app/core/core';
 import { makeInitialUpdateState } from './reducers';
@@ -326,6 +334,28 @@ describe('loading datasource', () => {
   });
 });
 
+describe('changing mode', () => {
+  it('should trigger changeModeAction and updateLocation', async () => {
+    const { exploreId, initialState, range } = setup();
+    const dispatchedActions = await thunkTester(initialState)
+      .givenThunk(changeMode)
+      .whenThunkIsDispatched(exploreId, ExploreMode.Logs);
+    const rawTimeRange = Actions.toRawTimeRange(range);
+    const leftQuery = JSON.stringify([
+      rawTimeRange.from,
+      rawTimeRange.to,
+      initialState.explore.left.datasourceInstance.name,
+      {},
+      { ui: [false, true, false, null] },
+    ]);
+
+    expect(dispatchedActions).toEqual([
+      changeModeAction({ exploreId, mode: ExploreMode.Logs }),
+      updateLocation({ query: { left: leftQuery, orgId: '1' }, replace: false }),
+    ]);
+  });
+});
+
 const getNavigateToExploreContext = async (openInNewWindow?: (url: string) => void) => {
   const url = 'http://www.someurl.com';
   const panel: Partial<PanelModel> = {

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

@@ -165,6 +165,7 @@ export function changeDatasource(exploreId: ExploreId, datasourceName: string):
 export function changeMode(exploreId: ExploreId, mode: ExploreMode): ThunkResult<void> {
   return dispatch => {
     dispatch(changeModeAction({ exploreId, mode }));
+    dispatch(stateSave());
   };
 }
 
@@ -547,7 +548,7 @@ export const deleteRichHistory = (): ThunkResult<void> => {
   };
 };
 
-const toRawTimeRange = (range: TimeRange): RawTimeRange => {
+export const toRawTimeRange = (range: TimeRange): RawTimeRange => {
   let from = range.raw.from;
   if (isDateTime(from)) {
     from = from.valueOf().toString(10);