From 86ef3c916d8bc31c5bc8d441ccaa47836447ee2d Mon Sep 17 00:00:00 2001
From: Andrej Ocenas <mr.ocenas@gmail.com>
Date: Wed, 6 Nov 2024 13:40:17 +0100
Subject: [PATCH] TimeRangeProvider: Fix synced status being kept when only one
 picker is mounted (#95885)

---
 .../DateTimePickers/TimeRangeContext.test.tsx | 37 +++++++++++++++++++
 .../DateTimePickers/TimeRangeContext.tsx      | 10 ++++-
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeContext.test.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeContext.test.tsx
index fcea55c1524..4ef66005aa7 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeContext.test.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeContext.test.tsx
@@ -79,6 +79,43 @@ describe('TimeRangeProvider', () => {
       syncedValue: undefined,
     });
   });
+
+  it('sets status to not synced if only 1 component remains', async () => {
+    let context2: TimeRangeContextHookValue | undefined = undefined;
+    function onContextChange2(val?: TimeRangeContextHookValue) {
+      context2 = val;
+    }
+
+    const renderContext = render(
+      <TimeRangeProvider>
+        <TestComponent onContextChange={onContextChange} />
+        <TestComponent onContextChange={onContextChange2} />
+      </TimeRangeProvider>
+    );
+
+    const timeRange = makeTimeRange('2021-01-01', '2021-01-02');
+    act(() => {
+      context?.sync(timeRange);
+    });
+
+    expect(context2).toMatchObject({
+      syncPossible: true,
+      synced: true,
+      syncedValue: timeRange,
+    });
+
+    renderContext.rerender(
+      <TimeRangeProvider>
+        <TestComponent onContextChange={onContextChange2} />
+      </TimeRangeProvider>
+    );
+
+    expect(context2).toMatchObject({
+      syncPossible: false,
+      synced: false,
+      syncedValue: undefined,
+    });
+  });
 });
 
 describe('useTimeRangeContext', () => {
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeContext.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeContext.tsx
index 37907c2a83c..a4a911fa53e 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeContext.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeContext.tsx
@@ -42,7 +42,15 @@ export function TimeRangeProvider({ children }: { children: ReactNode }) {
       sync: (value: TimeRange) => setSyncedValue(value),
       unSync: () => setSyncedValue(undefined),
       addPicker: () => setPickersCount((val) => val + 1),
-      removePicker: () => setPickersCount((val) => val - 1),
+      removePicker: () => {
+        setPickersCount((val) => {
+          const newVal = val - 1;
+          if (newVal < 2) {
+            setSyncedValue(undefined);
+          }
+          return newVal;
+        });
+      },
       syncPossible: pickersCount > 1,
       synced: Boolean(syncedValue),
       syncedValue,