From e7d4d0f104710534c9155cc965204474587af8ef Mon Sep 17 00:00:00 2001
From: Iris Ye <iris.ye.cs@gmail.com>
Date: Tue, 4 Aug 2026 10:18:04 -0400
Subject: [PATCH 1/4] [FEATURE] Allow admins to centrally disable dashboard
 auto-refresh via server config (default false)

Signed-off-by: Iris Ye <iris.ye.cs@gmail.com>
---
 .../RefreshIntervalPicker.tsx                 |  4 ++-
 .../DashboardProvider/use-save-dashboard.ts   |  7 ++--
 .../TimeRangeControls.test.tsx                | 19 ++++++++---
 .../TimeRangeControls/TimeRangeControls.tsx   | 31 ++++++++++++-----
 .../src/constants/user-interface-text.ts      |  1 +
 .../TimeRangeProvider/TimeRangeProvider.tsx   | 29 +++++++++++++---
 .../TimeRangeSettingsProvider.tsx             | 21 +++++++++++-
 .../runtime/TimeRangeProvider/query-params.ts | 34 +++++++++++++++----
 8 files changed, 119 insertions(+), 27 deletions(-)

diff --git a/components/src/RefreshIntervalPicker/RefreshIntervalPicker.tsx b/components/src/RefreshIntervalPicker/RefreshIntervalPicker.tsx
index 7ae4ba9a..82654af5 100644
--- a/components/src/RefreshIntervalPicker/RefreshIntervalPicker.tsx
+++ b/components/src/RefreshIntervalPicker/RefreshIntervalPicker.tsx
@@ -21,10 +21,11 @@ interface RefreshIntervalPickerProps {
   value?: DurationString;
   onChange: (value: DurationString) => void;
   height?: string;
+  disabled?: boolean;
 }
 
 export function RefreshIntervalPicker(props: RefreshIntervalPickerProps): ReactElement {
-  const { value, onChange, timeOptions, height } = props;
+  const { value, onChange, timeOptions, height, disabled = false } = props;
 
   // If the dashboard refresh interval is not provided in timeOptions, it will create a specific option for the select
   const customInterval = useMemo(() => {
@@ -39,6 +40,7 @@ export function RefreshIntervalPicker(props: RefreshIntervalPickerProps): ReactE
         <Select
           id="refreshInterval"
           value={value}
+          disabled={disabled}
           onChange={(event) => {
             const duration = event.target.value as DurationString;
             onChange(duration);
diff --git a/dashboards/src/context/DashboardProvider/use-save-dashboard.ts b/dashboards/src/context/DashboardProvider/use-save-dashboard.ts
index 57c35434..055debfa 100644
--- a/dashboards/src/context/DashboardProvider/use-save-dashboard.ts
+++ b/dashboards/src/context/DashboardProvider/use-save-dashboard.ts
@@ -13,7 +13,7 @@
 
 import { useCallback, useState } from 'react';
 import { isRelativeTimeRange } from '@perses-dev/spec';
-import { useTimeRange, useTimeZoneParams } from '@perses-dev/plugin-system';
+import { useTimeRange, useTimeZoneParams, useDisableAutoRefreshSetting } from '@perses-dev/plugin-system';
 import { useVariableDefinitionActions } from '../VariableProvider/VariableProvider';
 import { useDashboard } from '../useDashboard';
 import { OnSaveDashboard } from './common';
@@ -49,6 +49,7 @@ export function useSaveDashboard(onSave?: OnSaveDashboard): SaveDashboardResult
   const { dashboard, setDashboard } = useDashboard();
   const { setEditMode } = useEditMode();
   const { timeRange, refreshInterval } = useTimeRange();
+  const disableAutoRefresh = useDisableAutoRefreshSetting();
   const { timeZone } = useTimeZoneParams();
   const { getSavedVariablesStatus, setVariableDefaultValues } = useVariableDefinitionActions();
   const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = useSaveChangesConfirmationDialog();
@@ -76,7 +77,8 @@ export function useSaveDashboard(onSave?: OnSaveDashboard): SaveDashboardResult
     const { isSavedVariableModified } = getSavedVariablesStatus();
     const isSavedDurationModified =
       isRelativeTimeRange(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;
-    const isSavedRefreshIntervalModified = dashboard.spec.refreshInterval !== refreshInterval;
+    const isSavedRefreshIntervalModified =
+      !disableAutoRefresh && dashboard.spec.refreshInterval !== refreshInterval;
     const isTimeZoneModified =
       timeZone === 'local' && !dashboard.spec.timezone ? false : dashboard.spec.timezone !== timeZone;
 
@@ -117,6 +119,7 @@ export function useSaveDashboard(onSave?: OnSaveDashboard): SaveDashboardResult
     timeRange,
     dashboard,
     refreshInterval,
+    disableAutoRefresh,
     timeZone,
     getSavedVariablesStatus,
     openSaveChangesConfirmationDialog,
diff --git a/plugin-system/src/components/TimeRangeControls/TimeRangeControls.test.tsx b/plugin-system/src/components/TimeRangeControls/TimeRangeControls.test.tsx
index c9aaa982..e4d0fa73 100644
--- a/plugin-system/src/components/TimeRangeControls/TimeRangeControls.test.tsx
+++ b/plugin-system/src/components/TimeRangeControls/TimeRangeControls.test.tsx
@@ -17,7 +17,11 @@ import { DurationString } from '@perses-dev/spec';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React, { ReactElement } from 'react';
 import { SnackbarProvider } from '@perses-dev/components';
-import { TimeRangeProviderBasic, TimeRangeProviderWithQueryParams } from '@perses-dev/plugin-system';
+import {
+  TimeRangeProviderBasic,
+  TimeRangeProviderWithQueryParams,
+  TimeRangeSettingsProvider,
+} from '@perses-dev/plugin-system';
 import { MemoryRouter } from 'react-router-dom';
 import { QueryParamProvider } from 'use-query-params';
 import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
@@ -53,9 +57,9 @@ describe('TimeRangeControls', () => {
     return <TimeRangeControls timeZone={timeZone} onTimeZoneChange={(tz) => setTimeZone(tz.value)} />;
   };
 
-  const renderTimeRangeControls = (testURLParams: boolean): void => {
+  const renderTimeRangeControls = (testURLParams: boolean, disableAutoRefresh = false): void => {
     renderWithContext(
-      <>
+      <TimeRangeSettingsProvider disableAutoRefresh={disableAutoRefresh}>
         {testURLParams ? (
           <TimeRangeProviderWithQueryParams
             initialRefreshInterval={testDefaultRefreshInterval}
@@ -71,7 +75,7 @@ describe('TimeRangeControls', () => {
             <ControlsWithTZ />
           </TimeRangeProviderBasic>
         )}
-      </>,
+      </TimeRangeSettingsProvider>,
       undefined
     );
   };
@@ -86,5 +90,12 @@ describe('TimeRangeControls', () => {
     expect(dateButton).toHaveTextContent(/5 minutes/i);
   });
 
+  it('should disable the refresh interval picker when disableAutoRefresh is enabled', () => {
+    renderTimeRangeControls(false, true);
+    const refreshIntervalPicker = screen.getByLabelText(/Select refresh interval/i);
+    expect(refreshIntervalPicker).toBeDisabled();
+    expect(screen.getByText('Off')).toBeInTheDocument();
+  });
+
   // TODO: add additional tests for absolute time selection, other inputs, form validation, etc.
 });
diff --git a/plugin-system/src/components/TimeRangeControls/TimeRangeControls.tsx b/plugin-system/src/components/TimeRangeControls/TimeRangeControls.tsx
index 73fb782a..72639292 100644
--- a/plugin-system/src/components/TimeRangeControls/TimeRangeControls.tsx
+++ b/plugin-system/src/components/TimeRangeControls/TimeRangeControls.tsx
@@ -35,6 +35,7 @@ import {
   useShowCustomTimeRangeSetting,
   useTimeRangeOptionsSetting,
   useShowZoomRangeSetting,
+  useDisableAutoRefreshSetting,
 } from '../../runtime';
 export const DEFAULT_REFRESH_INTERVAL_OPTIONS: TimeOption[] = [
   { value: { pastDuration: '0s' }, display: 'Off' },
@@ -46,6 +47,7 @@ export const DEFAULT_REFRESH_INTERVAL_OPTIONS: TimeOption[] = [
 ];
 
 const DEFAULT_HEIGHT = '34px';
+const DISABLED_REFRESH_INTERVAL: DurationString = '0s';
 
 interface TimeRangeControlsProps {
   // The controls look best at heights >= 28 pixels
@@ -55,6 +57,7 @@ interface TimeRangeControlsProps {
   showRefreshInterval?: boolean;
   showCustomTimeRange?: boolean;
   showZoomButtons?: boolean;
+  disableAutoRefresh?: boolean;
   timePresets?: TimeOption[];
   timeZone: string;
   onTimeZoneChange: (timeZone: TimeZoneOption) => void;
@@ -67,6 +70,7 @@ export function TimeRangeControls({
   showRefreshInterval = true,
   showCustomTimeRange,
   showZoomButtons = true,
+  disableAutoRefresh,
   timePresets,
   timeZone,
   onTimeZoneChange,
@@ -75,6 +79,7 @@ export function TimeRangeControls({
 
   const showCustomTimeRangeValue = useShowCustomTimeRangeSetting(showCustomTimeRange);
   const showZoomInOutButtons = useShowZoomRangeSetting(showZoomButtons);
+  const isAutoRefreshDisabled = useDisableAutoRefreshSetting(disableAutoRefresh);
   const timePresetsValue = useTimeRangeOptionsSetting(timePresets);
 
   // Convert height to a string, then use the string for styling
@@ -91,9 +96,12 @@ export function TimeRangeControls({
   // set the new refresh interval both in the dashboard context & as query param
   const handleRefreshIntervalChange = useCallback(
     (duration: DurationString) => {
+      if (isAutoRefreshDisabled) {
+        return;
+      }
       setRefreshInterval(duration);
     },
-    [setRefreshInterval]
+    [isAutoRefreshDisabled, setRefreshInterval]
   );
 
   const fromDurationToMillis = (strDuration: string): number => {
@@ -207,21 +215,28 @@ export function TimeRangeControls({
         </InfoTooltip>
       )}
       {showRefreshInterval && (
-        <InfoTooltip description={TOOLTIP_TEXT.refreshInterval}>
+        <InfoTooltip
+          description={
+            isAutoRefreshDisabled ? TOOLTIP_TEXT.refreshIntervalDisabledByAdmin : TOOLTIP_TEXT.refreshInterval
+          }
+        >
           <RefreshIntervalPicker
             timeOptions={DEFAULT_REFRESH_INTERVAL_OPTIONS}
             value={
-              /* TODO: There is a bug here which should be fixed in a proper way. (This is only a quick remedy)
-                 display: 1m has the pastDuration of 60s. Initially (if the persisted value is 1m) when the page is loaded, instead of 60s, 1m is passed down.              
+              isAutoRefreshDisabled
+                ? DISABLED_REFRESH_INTERVAL
+                : /* TODO: There is a bug here which should be fixed in a proper way. (This is only a quick remedy)
+                 display: 1m has the pastDuration of 60s. Initially (if the persisted value is 1m) when the page is loaded, instead of 60s, 1m is passed down.
                  This only happens for 1m, because for other items the display and the pastDuration are the same.  Example 30s-30s
-                 HERE The value MUST always be pastDuration, otherwise the component would not work as expected. 
+                 HERE The value MUST always be pastDuration, otherwise the component would not work as expected.
               */
-              DEFAULT_REFRESH_INTERVAL_OPTIONS.some((i) => i.value.pastDuration === refreshInterval)
-                ? refreshInterval
-                : DEFAULT_REFRESH_INTERVAL_OPTIONS.find((i) => i.display === refreshInterval)?.value.pastDuration
+                  DEFAULT_REFRESH_INTERVAL_OPTIONS.some((i) => i.value.pastDuration === refreshInterval)
+                    ? refreshInterval
+                    : DEFAULT_REFRESH_INTERVAL_OPTIONS.find((i) => i.display === refreshInterval)?.value.pastDuration
             }
             onChange={handleRefreshIntervalChange}
             height={height}
+            disabled={isAutoRefreshDisabled}
           />
         </InfoTooltip>
       )}
diff --git a/plugin-system/src/constants/user-interface-text.ts b/plugin-system/src/constants/user-interface-text.ts
index 9a9fe6b9..6e67c9ff 100644
--- a/plugin-system/src/constants/user-interface-text.ts
+++ b/plugin-system/src/constants/user-interface-text.ts
@@ -18,6 +18,7 @@ export const TOOLTIP_TEXT = {
   // Time range controls buttons
   refresh: 'Refresh',
   refreshInterval: 'Auto refresh interval',
+  refreshIntervalDisabledByAdmin: 'Auto-refresh has been turned off by your administrator.',
   zoomIn: 'Zoom in',
   zoomOut: 'Zoom out',
 };
diff --git a/plugin-system/src/runtime/TimeRangeProvider/TimeRangeProvider.tsx b/plugin-system/src/runtime/TimeRangeProvider/TimeRangeProvider.tsx
index bd6f30e5..3f92606a 100644
--- a/plugin-system/src/runtime/TimeRangeProvider/TimeRangeProvider.tsx
+++ b/plugin-system/src/runtime/TimeRangeProvider/TimeRangeProvider.tsx
@@ -22,6 +22,9 @@ import {
 } from '@perses-dev/spec';
 import { useQueryClient } from '@tanstack/react-query';
 import { getRefreshIntervalInMs } from './refresh-interval';
+import { useDisableAutoRefreshSetting } from './TimeRangeSettingsProvider';
+
+const DISABLED_REFRESH_INTERVAL: DurationString = '0s';
 
 export interface TimeRangeProviderProps {
   timeRange: TimeRangeValue;
@@ -72,6 +75,8 @@ export function useSuggestedStepMs(width?: number): number {
  */
 export function TimeRangeProvider(props: TimeRangeProviderProps): ReactElement {
   const { timeRange, refreshInterval, children, setTimeRange, setRefreshInterval } = props;
+  const disableAutoRefresh = useDisableAutoRefreshSetting();
+  const effectiveRefreshInterval = disableAutoRefresh ? DISABLED_REFRESH_INTERVAL : refreshInterval;
 
   const queryClient = useQueryClient();
   const [absoluteTimeRange, setAbsoluteTimeRange] = useState<AbsoluteTimeRange>(
@@ -86,6 +91,17 @@ export function TimeRangeProvider(props: TimeRangeProviderProps): ReactElement {
     [setTimeRange]
   );
 
+  const handleSetRefreshInterval = useCallback(
+    (value: DurationString) => {
+      if (disableAutoRefresh) {
+        setRefreshInterval(DISABLED_REFRESH_INTERVAL);
+        return;
+      }
+      setRefreshInterval(value);
+    },
+    [disableAutoRefresh, setRefreshInterval]
+  );
+
   // Refresh is called when clicking on the refresh button, it refreshes all queries including variables
   const refresh = useCallback(() => {
     setAbsoluteTimeRange(isRelativeTimeRange(timeRange) ? toAbsoluteTimeRange(timeRange) : timeRange);
@@ -106,7 +122,10 @@ export function TimeRangeProvider(props: TimeRangeProviderProps): ReactElement {
     });
   }, [queryClient, timeRange]);
 
-  const refreshIntervalInMs = useMemo(() => getRefreshIntervalInMs(refreshInterval), [refreshInterval]);
+  const refreshIntervalInMs = useMemo(
+    () => getRefreshIntervalInMs(effectiveRefreshInterval),
+    [effectiveRefreshInterval]
+  );
   useEffect(() => {
     if (refreshIntervalInMs > 0) {
       const interval = setInterval(() => {
@@ -123,17 +142,17 @@ export function TimeRangeProvider(props: TimeRangeProviderProps): ReactElement {
       setTimeRange: handleSetTimeRange,
       absoluteTimeRange: absoluteTimeRange,
       refresh,
-      refreshInterval: refreshInterval,
+      refreshInterval: effectiveRefreshInterval,
       refreshIntervalInMs: refreshIntervalInMs,
-      setRefreshInterval: setRefreshInterval,
+      setRefreshInterval: handleSetRefreshInterval,
     };
   }, [
     absoluteTimeRange,
     handleSetTimeRange,
     refresh,
-    refreshInterval,
+    effectiveRefreshInterval,
     refreshIntervalInMs,
-    setRefreshInterval,
+    handleSetRefreshInterval,
     timeRange,
   ]);
 
diff --git a/plugin-system/src/runtime/TimeRangeProvider/TimeRangeSettingsProvider.tsx b/plugin-system/src/runtime/TimeRangeProvider/TimeRangeSettingsProvider.tsx
index ff2c0ec4..d4bc4b9b 100644
--- a/plugin-system/src/runtime/TimeRangeProvider/TimeRangeSettingsProvider.tsx
+++ b/plugin-system/src/runtime/TimeRangeProvider/TimeRangeSettingsProvider.tsx
@@ -19,12 +19,14 @@ const DEFAULT_OPTIONS: DurationString[] = ['5m', '15m', '30m', '1h', '6h', '12h'
 const defaultTimeRangeSettings: TimeRangeSettings = {
   showCustom: true,
   showZoomButtons: true,
+  disableAutoRefresh: false,
   options: DEFAULT_OPTIONS.map((duration) => buildRelativeTimeOption(duration)),
 };
 
 export interface TimeRangeSettingsProviderProps {
   showCustom?: boolean;
   showZoomButtons?: boolean;
+  disableAutoRefresh?: boolean;
   options?: TimeOption[];
   children: ReactNode;
 }
@@ -32,6 +34,7 @@ export interface TimeRangeSettingsProviderProps {
 export interface TimeRangeSettings {
   showCustom: boolean;
   showZoomButtons: boolean;
+  disableAutoRefresh: boolean;
   options: TimeOption[];
 }
 
@@ -88,6 +91,18 @@ export function useTimeRangeOptionsSetting(override?: TimeOption[]): TimeOption[
   return showCustomTimeRange;
 }
 
+/**
+ * Get the current value of the disableAutoRefresh setting.
+ * @param override If set, the value of the provider will be overridden by this value.
+ */
+export function useDisableAutoRefreshSetting(override?: boolean): boolean {
+  const disableAutoRefresh = useTimeRangeSettings().disableAutoRefresh;
+  if (override !== undefined) {
+    return override;
+  }
+  return disableAutoRefresh;
+}
+
 /**
  * Provider implementation that supplies the time range state at runtime.
  */
@@ -97,9 +112,13 @@ export function TimeRangeSettingsProvider(props: TimeRangeSettingsProviderProps)
       showCustom: props.showCustom === undefined ? defaultTimeRangeSettings.showCustom : props.showCustom,
       showZoomButtons:
         props.showZoomButtons === undefined ? defaultTimeRangeSettings.showZoomButtons : props.showZoomButtons,
+      disableAutoRefresh:
+        props.disableAutoRefresh === undefined
+          ? defaultTimeRangeSettings.disableAutoRefresh
+          : props.disableAutoRefresh,
       options: props.options === undefined ? defaultTimeRangeSettings.options : props.options,
     };
-  }, [props.showCustom, props.showZoomButtons, props.options]);
+  }, [props.showCustom, props.showZoomButtons, props.disableAutoRefresh, props.options]);
 
   return <TimeRangeSettingsContext.Provider value={ctx}>{props.children}</TimeRangeSettingsContext.Provider>;
 }
diff --git a/plugin-system/src/runtime/TimeRangeProvider/query-params.ts b/plugin-system/src/runtime/TimeRangeProvider/query-params.ts
index e9649dab..94c94a54 100644
--- a/plugin-system/src/runtime/TimeRangeProvider/query-params.ts
+++ b/plugin-system/src/runtime/TimeRangeProvider/query-params.ts
@@ -22,6 +22,9 @@ import {
   AbsoluteTimeRange,
 } from '@perses-dev/spec';
 import { TimeRange } from './TimeRangeProvider';
+import { useDisableAutoRefreshSetting } from './TimeRangeSettingsProvider';
+
+const DISABLED_REFRESH_INTERVAL: DurationString = '0s';
 
 export type TimeOptionValue = Date | DurationString | null | undefined;
 
@@ -158,9 +161,13 @@ export function useTimeRangeParams(initialTimeRange: TimeRangeValue): Pick<TimeR
  * Sets refresh query param if it is empty on page load
  */
 export function useInitialRefreshInterval(dashboardDuration: DurationString): DurationString {
+  const disableAutoRefresh = useDisableAutoRefreshSetting();
   const [query] = useQueryParams(refreshIntervalQueryConfig, { updateType: 'replaceIn' });
   const { refresh } = query;
   return useMemo(() => {
+    if (disableAutoRefresh) {
+      return DISABLED_REFRESH_INTERVAL;
+    }
     let initialTimeRange: DurationString = dashboardDuration;
     if (!refresh) {
       return initialTimeRange;
@@ -170,7 +177,7 @@ export function useInitialRefreshInterval(dashboardDuration: DurationString): Du
       initialTimeRange = startStr;
     }
     return initialTimeRange;
-  }, [dashboardDuration, refresh]);
+  }, [dashboardDuration, disableAutoRefresh, refresh]);
 }
 
 /**
@@ -179,28 +186,43 @@ export function useInitialRefreshInterval(dashboardDuration: DurationString): Du
 export function useSetRefreshIntervalParams(
   initialRefreshInterval?: DurationString
 ): Pick<TimeRange, 'refreshInterval' | 'setRefreshInterval'> {
+  const disableAutoRefresh = useDisableAutoRefreshSetting();
   const [query, setQuery] = useQueryParams(refreshIntervalQueryConfig, { updateType: 'replaceIn' });
 
   // determine whether initial param had previously been populated to fix back btn
   const [paramsLoaded, setParamsLoaded] = useState<boolean>(false);
 
   const { refresh } = query;
+  const effectiveInitialRefreshInterval = disableAutoRefresh ? DISABLED_REFRESH_INTERVAL : initialRefreshInterval;
 
   useEffect(() => {
     // when dashboard loaded with no params, default to dashboard refresh interval
     if (!paramsLoaded && !refresh) {
-      setQuery({ refresh: initialRefreshInterval });
+      setQuery({ refresh: effectiveInitialRefreshInterval });
       setParamsLoaded(true);
     }
-  }, [initialRefreshInterval, paramsLoaded, refresh, setQuery]);
+  }, [effectiveInitialRefreshInterval, paramsLoaded, refresh, setQuery]);
+
+  useEffect(() => {
+    // when auto-refresh is disabled by admin, force Off and ignore URL/spec values
+    if (disableAutoRefresh && refresh !== DISABLED_REFRESH_INTERVAL) {
+      setQuery({ refresh: DISABLED_REFRESH_INTERVAL });
+    }
+  }, [disableAutoRefresh, refresh, setQuery]);
 
   const setRefreshInterval: TimeRange['setRefreshInterval'] = useCallback(
-    (refresh: DurationString) => setQuery({ refresh }),
-    [setQuery]
+    (refresh: DurationString) => {
+      if (disableAutoRefresh) {
+        setQuery({ refresh: DISABLED_REFRESH_INTERVAL });
+        return;
+      }
+      setQuery({ refresh });
+    },
+    [disableAutoRefresh, setQuery]
   );
 
   return {
-    refreshInterval: initialRefreshInterval,
+    refreshInterval: effectiveInitialRefreshInterval,
     setRefreshInterval: setRefreshInterval,
   };
 }

From d60e4eb553af9d462f087bb5f05ef1cba5459a3c Mon Sep 17 00:00:00 2001
From: Iris Ye <143642859+mixturesolutions@users.noreply.github.com>
Date: Thu, 6 Aug 2026 08:50:18 -0400
Subject: [PATCH 2/4] Update
 plugin-system/src/runtime/TimeRangeProvider/TimeRangeProvider.tsx

Co-authored-by: Gabriel Bernal <gabrielbernalp@gmail.com>
Signed-off-by: Iris Ye <143642859+mixturesolutions@users.noreply.github.com>
---
 .../src/runtime/TimeRangeProvider/TimeRangeProvider.tsx          | 1 -
 1 file changed, 1 deletion(-)

diff --git a/plugin-system/src/runtime/TimeRangeProvider/TimeRangeProvider.tsx b/plugin-system/src/runtime/TimeRangeProvider/TimeRangeProvider.tsx
index 3f92606a..ab130e57 100644
--- a/plugin-system/src/runtime/TimeRangeProvider/TimeRangeProvider.tsx
+++ b/plugin-system/src/runtime/TimeRangeProvider/TimeRangeProvider.tsx
@@ -94,7 +94,6 @@ export function TimeRangeProvider(props: TimeRangeProviderProps): ReactElement {
   const handleSetRefreshInterval = useCallback(
     (value: DurationString) => {
       if (disableAutoRefresh) {
-        setRefreshInterval(DISABLED_REFRESH_INTERVAL);
         return;
       }
       setRefreshInterval(value);

From 58233838772c35442a25a87508072bb7405f80ab Mon Sep 17 00:00:00 2001
From: Iris Ye <iris.ye.cs@gmail.com>
Date: Thu, 6 Aug 2026 10:00:12 -0400
Subject: [PATCH 3/4] [IGNORE] Simplies commits and resolve testing errors

Signed-off-by: Iris Ye <iris.ye.cs@gmail.com>
---
 .../DashboardProvider/use-save-dashboard.ts   |  7 ++--
 .../TimeRangeControls.test.tsx                |  2 +-
 .../TimeRangeControls/TimeRangeControls.tsx   |  4 +--
 .../TimeRangeProvider/TimeRangeProvider.tsx   | 13 ++++---
 .../TimeRangeSettingsProvider.tsx             |  4 +--
 .../runtime/TimeRangeProvider/query-params.ts | 34 ++++---------------
 6 files changed, 18 insertions(+), 46 deletions(-)

diff --git a/dashboards/src/context/DashboardProvider/use-save-dashboard.ts b/dashboards/src/context/DashboardProvider/use-save-dashboard.ts
index 055debfa..57c35434 100644
--- a/dashboards/src/context/DashboardProvider/use-save-dashboard.ts
+++ b/dashboards/src/context/DashboardProvider/use-save-dashboard.ts
@@ -13,7 +13,7 @@
 
 import { useCallback, useState } from 'react';
 import { isRelativeTimeRange } from '@perses-dev/spec';
-import { useTimeRange, useTimeZoneParams, useDisableAutoRefreshSetting } from '@perses-dev/plugin-system';
+import { useTimeRange, useTimeZoneParams } from '@perses-dev/plugin-system';
 import { useVariableDefinitionActions } from '../VariableProvider/VariableProvider';
 import { useDashboard } from '../useDashboard';
 import { OnSaveDashboard } from './common';
@@ -49,7 +49,6 @@ export function useSaveDashboard(onSave?: OnSaveDashboard): SaveDashboardResult
   const { dashboard, setDashboard } = useDashboard();
   const { setEditMode } = useEditMode();
   const { timeRange, refreshInterval } = useTimeRange();
-  const disableAutoRefresh = useDisableAutoRefreshSetting();
   const { timeZone } = useTimeZoneParams();
   const { getSavedVariablesStatus, setVariableDefaultValues } = useVariableDefinitionActions();
   const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = useSaveChangesConfirmationDialog();
@@ -77,8 +76,7 @@ export function useSaveDashboard(onSave?: OnSaveDashboard): SaveDashboardResult
     const { isSavedVariableModified } = getSavedVariablesStatus();
     const isSavedDurationModified =
       isRelativeTimeRange(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;
-    const isSavedRefreshIntervalModified =
-      !disableAutoRefresh && dashboard.spec.refreshInterval !== refreshInterval;
+    const isSavedRefreshIntervalModified = dashboard.spec.refreshInterval !== refreshInterval;
     const isTimeZoneModified =
       timeZone === 'local' && !dashboard.spec.timezone ? false : dashboard.spec.timezone !== timeZone;
 
@@ -119,7 +117,6 @@ export function useSaveDashboard(onSave?: OnSaveDashboard): SaveDashboardResult
     timeRange,
     dashboard,
     refreshInterval,
-    disableAutoRefresh,
     timeZone,
     getSavedVariablesStatus,
     openSaveChangesConfirmationDialog,
diff --git a/plugin-system/src/components/TimeRangeControls/TimeRangeControls.test.tsx b/plugin-system/src/components/TimeRangeControls/TimeRangeControls.test.tsx
index e4d0fa73..b421195a 100644
--- a/plugin-system/src/components/TimeRangeControls/TimeRangeControls.test.tsx
+++ b/plugin-system/src/components/TimeRangeControls/TimeRangeControls.test.tsx
@@ -93,7 +93,7 @@ describe('TimeRangeControls', () => {
   it('should disable the refresh interval picker when disableAutoRefresh is enabled', () => {
     renderTimeRangeControls(false, true);
     const refreshIntervalPicker = screen.getByLabelText(/Select refresh interval/i);
-    expect(refreshIntervalPicker).toBeDisabled();
+    expect(refreshIntervalPicker).toHaveAttribute('aria-disabled', 'true');
     expect(screen.getByText('Off')).toBeInTheDocument();
   });
 
diff --git a/plugin-system/src/components/TimeRangeControls/TimeRangeControls.tsx b/plugin-system/src/components/TimeRangeControls/TimeRangeControls.tsx
index 72639292..3e5accf2 100644
--- a/plugin-system/src/components/TimeRangeControls/TimeRangeControls.tsx
+++ b/plugin-system/src/components/TimeRangeControls/TimeRangeControls.tsx
@@ -231,8 +231,8 @@ export function TimeRangeControls({
                  HERE The value MUST always be pastDuration, otherwise the component would not work as expected.
               */
                   DEFAULT_REFRESH_INTERVAL_OPTIONS.some((i) => i.value.pastDuration === refreshInterval)
-                    ? refreshInterval
-                    : DEFAULT_REFRESH_INTERVAL_OPTIONS.find((i) => i.display === refreshInterval)?.value.pastDuration
+                  ? refreshInterval
+                  : DEFAULT_REFRESH_INTERVAL_OPTIONS.find((i) => i.display === refreshInterval)?.value.pastDuration
             }
             onChange={handleRefreshIntervalChange}
             height={height}
diff --git a/plugin-system/src/runtime/TimeRangeProvider/TimeRangeProvider.tsx b/plugin-system/src/runtime/TimeRangeProvider/TimeRangeProvider.tsx
index ab130e57..eea09e59 100644
--- a/plugin-system/src/runtime/TimeRangeProvider/TimeRangeProvider.tsx
+++ b/plugin-system/src/runtime/TimeRangeProvider/TimeRangeProvider.tsx
@@ -24,8 +24,6 @@ import { useQueryClient } from '@tanstack/react-query';
 import { getRefreshIntervalInMs } from './refresh-interval';
 import { useDisableAutoRefreshSetting } from './TimeRangeSettingsProvider';
 
-const DISABLED_REFRESH_INTERVAL: DurationString = '0s';
-
 export interface TimeRangeProviderProps {
   timeRange: TimeRangeValue;
   refreshInterval?: DurationString;
@@ -76,7 +74,6 @@ export function useSuggestedStepMs(width?: number): number {
 export function TimeRangeProvider(props: TimeRangeProviderProps): ReactElement {
   const { timeRange, refreshInterval, children, setTimeRange, setRefreshInterval } = props;
   const disableAutoRefresh = useDisableAutoRefreshSetting();
-  const effectiveRefreshInterval = disableAutoRefresh ? DISABLED_REFRESH_INTERVAL : refreshInterval;
 
   const queryClient = useQueryClient();
   const [absoluteTimeRange, setAbsoluteTimeRange] = useState<AbsoluteTimeRange>(
@@ -91,6 +88,7 @@ export function TimeRangeProvider(props: TimeRangeProviderProps): ReactElement {
     [setTimeRange]
   );
 
+  // When auto-refresh is disabled by admin, leave URL/spec values untouched and no-op changes.
   const handleSetRefreshInterval = useCallback(
     (value: DurationString) => {
       if (disableAutoRefresh) {
@@ -121,9 +119,10 @@ export function TimeRangeProvider(props: TimeRangeProviderProps): ReactElement {
     });
   }, [queryClient, timeRange]);
 
+  // Gate the timer only — do not rewrite refreshInterval / ?refresh= so re-enabling restores them.
   const refreshIntervalInMs = useMemo(
-    () => getRefreshIntervalInMs(effectiveRefreshInterval),
-    [effectiveRefreshInterval]
+    () => (disableAutoRefresh ? 0 : getRefreshIntervalInMs(refreshInterval)),
+    [disableAutoRefresh, refreshInterval]
   );
   useEffect(() => {
     if (refreshIntervalInMs > 0) {
@@ -141,7 +140,7 @@ export function TimeRangeProvider(props: TimeRangeProviderProps): ReactElement {
       setTimeRange: handleSetTimeRange,
       absoluteTimeRange: absoluteTimeRange,
       refresh,
-      refreshInterval: effectiveRefreshInterval,
+      refreshInterval: refreshInterval,
       refreshIntervalInMs: refreshIntervalInMs,
       setRefreshInterval: handleSetRefreshInterval,
     };
@@ -149,7 +148,7 @@ export function TimeRangeProvider(props: TimeRangeProviderProps): ReactElement {
     absoluteTimeRange,
     handleSetTimeRange,
     refresh,
-    effectiveRefreshInterval,
+    refreshInterval,
     refreshIntervalInMs,
     handleSetRefreshInterval,
     timeRange,
diff --git a/plugin-system/src/runtime/TimeRangeProvider/TimeRangeSettingsProvider.tsx b/plugin-system/src/runtime/TimeRangeProvider/TimeRangeSettingsProvider.tsx
index d4bc4b9b..3b9f1d78 100644
--- a/plugin-system/src/runtime/TimeRangeProvider/TimeRangeSettingsProvider.tsx
+++ b/plugin-system/src/runtime/TimeRangeProvider/TimeRangeSettingsProvider.tsx
@@ -113,9 +113,7 @@ export function TimeRangeSettingsProvider(props: TimeRangeSettingsProviderProps)
       showZoomButtons:
         props.showZoomButtons === undefined ? defaultTimeRangeSettings.showZoomButtons : props.showZoomButtons,
       disableAutoRefresh:
-        props.disableAutoRefresh === undefined
-          ? defaultTimeRangeSettings.disableAutoRefresh
-          : props.disableAutoRefresh,
+        props.disableAutoRefresh === undefined ? defaultTimeRangeSettings.disableAutoRefresh : props.disableAutoRefresh,
       options: props.options === undefined ? defaultTimeRangeSettings.options : props.options,
     };
   }, [props.showCustom, props.showZoomButtons, props.disableAutoRefresh, props.options]);
diff --git a/plugin-system/src/runtime/TimeRangeProvider/query-params.ts b/plugin-system/src/runtime/TimeRangeProvider/query-params.ts
index 94c94a54..e9649dab 100644
--- a/plugin-system/src/runtime/TimeRangeProvider/query-params.ts
+++ b/plugin-system/src/runtime/TimeRangeProvider/query-params.ts
@@ -22,9 +22,6 @@ import {
   AbsoluteTimeRange,
 } from '@perses-dev/spec';
 import { TimeRange } from './TimeRangeProvider';
-import { useDisableAutoRefreshSetting } from './TimeRangeSettingsProvider';
-
-const DISABLED_REFRESH_INTERVAL: DurationString = '0s';
 
 export type TimeOptionValue = Date | DurationString | null | undefined;
 
@@ -161,13 +158,9 @@ export function useTimeRangeParams(initialTimeRange: TimeRangeValue): Pick<TimeR
  * Sets refresh query param if it is empty on page load
  */
 export function useInitialRefreshInterval(dashboardDuration: DurationString): DurationString {
-  const disableAutoRefresh = useDisableAutoRefreshSetting();
   const [query] = useQueryParams(refreshIntervalQueryConfig, { updateType: 'replaceIn' });
   const { refresh } = query;
   return useMemo(() => {
-    if (disableAutoRefresh) {
-      return DISABLED_REFRESH_INTERVAL;
-    }
     let initialTimeRange: DurationString = dashboardDuration;
     if (!refresh) {
       return initialTimeRange;
@@ -177,7 +170,7 @@ export function useInitialRefreshInterval(dashboardDuration: DurationString): Du
       initialTimeRange = startStr;
     }
     return initialTimeRange;
-  }, [dashboardDuration, disableAutoRefresh, refresh]);
+  }, [dashboardDuration, refresh]);
 }
 
 /**
@@ -186,43 +179,28 @@ export function useInitialRefreshInterval(dashboardDuration: DurationString): Du
 export function useSetRefreshIntervalParams(
   initialRefreshInterval?: DurationString
 ): Pick<TimeRange, 'refreshInterval' | 'setRefreshInterval'> {
-  const disableAutoRefresh = useDisableAutoRefreshSetting();
   const [query, setQuery] = useQueryParams(refreshIntervalQueryConfig, { updateType: 'replaceIn' });
 
   // determine whether initial param had previously been populated to fix back btn
   const [paramsLoaded, setParamsLoaded] = useState<boolean>(false);
 
   const { refresh } = query;
-  const effectiveInitialRefreshInterval = disableAutoRefresh ? DISABLED_REFRESH_INTERVAL : initialRefreshInterval;
 
   useEffect(() => {
     // when dashboard loaded with no params, default to dashboard refresh interval
     if (!paramsLoaded && !refresh) {
-      setQuery({ refresh: effectiveInitialRefreshInterval });
+      setQuery({ refresh: initialRefreshInterval });
       setParamsLoaded(true);
     }
-  }, [effectiveInitialRefreshInterval, paramsLoaded, refresh, setQuery]);
-
-  useEffect(() => {
-    // when auto-refresh is disabled by admin, force Off and ignore URL/spec values
-    if (disableAutoRefresh && refresh !== DISABLED_REFRESH_INTERVAL) {
-      setQuery({ refresh: DISABLED_REFRESH_INTERVAL });
-    }
-  }, [disableAutoRefresh, refresh, setQuery]);
+  }, [initialRefreshInterval, paramsLoaded, refresh, setQuery]);
 
   const setRefreshInterval: TimeRange['setRefreshInterval'] = useCallback(
-    (refresh: DurationString) => {
-      if (disableAutoRefresh) {
-        setQuery({ refresh: DISABLED_REFRESH_INTERVAL });
-        return;
-      }
-      setQuery({ refresh });
-    },
-    [disableAutoRefresh, setQuery]
+    (refresh: DurationString) => setQuery({ refresh }),
+    [setQuery]
   );
 
   return {
-    refreshInterval: effectiveInitialRefreshInterval,
+    refreshInterval: initialRefreshInterval,
     setRefreshInterval: setRefreshInterval,
   };
 }

From 9af75903d57981bb8369e7fee428da74c1173190 Mon Sep 17 00:00:00 2001
From: Iris Ye <iris.ye.cs@gmail.com>
Date: Tue, 11 Aug 2026 08:12:43 -0400
Subject: [PATCH 4/4] [IGNORE] removed redundant check suggested by akshay

Signed-off-by: Iris Ye <iris.ye.cs@gmail.com>
---
 .../src/components/TimeRangeControls/TimeRangeControls.tsx   | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/plugin-system/src/components/TimeRangeControls/TimeRangeControls.tsx b/plugin-system/src/components/TimeRangeControls/TimeRangeControls.tsx
index 3e5accf2..06eea49d 100644
--- a/plugin-system/src/components/TimeRangeControls/TimeRangeControls.tsx
+++ b/plugin-system/src/components/TimeRangeControls/TimeRangeControls.tsx
@@ -96,12 +96,9 @@ export function TimeRangeControls({
   // set the new refresh interval both in the dashboard context & as query param
   const handleRefreshIntervalChange = useCallback(
     (duration: DurationString) => {
-      if (isAutoRefreshDisabled) {
-        return;
-      }
       setRefreshInterval(duration);
     },
-    [isAutoRefreshDisabled, setRefreshInterval]
+    [setRefreshInterval]
   );
 
   const fromDurationToMillis = (strDuration: string): number => {