Explore: Default synced to true, only show synced status if panes are split (#77759)

* Default synced to true, only show synced status if panes are split

* Don’t default sync to true until split happens, handle syncing when init or history change sync happens

* Sync times if origin pane and new pane have the same range

public/app/features/explore/hooks/useStateSync/index.ts

@@ -112,8 +112,10 @@ export function useStateSync(params: ExploreQueryParams) {
       // if navigating the history causes one of the time range to not being equal to all the other ones,
       // we set syncedTimes to false to avoid inconsistent UI state.
       // Ideally `syncedTimes` should be saved in the URL.
-      if (Object.values(urlState.panes).some(({ range }, _, [{ range: firstRange }]) => !isEqual(range, firstRange))) {
-        dispatch(syncTimesAction({ syncedTimes: false }));
+      const paneArray = Object.values(urlState.panes);
+      if (paneArray.length > 1) {
+        const paneTimesUnequal = paneArray.some(({ range }, _, [{ range: firstRange }]) => !isEqual(range, firstRange));
+        dispatch(syncTimesAction({ syncedTimes: !paneTimesUnequal })); // if all time ranges are equal, keep them synced
       }
 
       Object.entries(urlState.panes).forEach(([exploreId, urlPane], i) => {
@@ -235,6 +237,13 @@ export function useStateSync(params: ExploreQueryParams) {
           })
         );
 
+        if (initializedPanes.length > 1) {
+          const paneTimesUnequal = initializedPanes.some(
+            ({ state }, _, [{ state: firstState }]) => !isEqual(state.range.raw, firstState.range.raw)
+          );
+          dispatch(syncTimesAction({ syncedTimes: !paneTimesUnequal })); // if all time ranges are equal, keep them synced
+        }
+
         const panesObj = initializedPanes.reduce((acc, { exploreId, state }) => {
           return {
             ...acc,

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

@@ -1,4 +1,5 @@
 import { createAction } from '@reduxjs/toolkit';
+import { isEqual } from 'lodash';
 import { AnyAction } from 'redux';
 
 import { SplitOpenOptions, TimeRange, EventBusSrv } from '@grafana/data';
@@ -77,17 +78,23 @@ export const splitOpen = createAsyncThunk(
       }
     });
 
+    const splitRange = options?.range || originState?.range.raw || DEFAULT_RANGE;
+
     await dispatch(
       createNewSplitOpenPane({
         exploreId: requestId,
         datasource: options?.datasourceUid || originState?.datasourceInstance?.getRef(),
         queries: withUniqueRefIds(queries),
-        range: options?.range || originState?.range.raw || DEFAULT_RANGE,
+        range: splitRange,
         panelsState: options?.panelsState || originState?.panelsState,
         correlationHelperData: options?.correlationHelperData,
         eventBridge: new EventBusSrv(),
       })
     );
+
+    if (originState?.range) {
+      await dispatch(syncTimesAction({ syncedTimes: isEqual(originState.range.raw, splitRange) })); // if time ranges are equal, mark times as synced
+    }
   },
   {
     idGenerator: generateExploreId,