fix(grid): start auto-refresh when selecting an interval

Start or restart data-grid auto-refresh when an interval is selected, with regression coverage for timer and menu state.

apps/desktop/src/components/grid/DataGridToolbar.vue

@@ -131,7 +131,7 @@ function actionLabelClass(action: DataGridToolbarActionKey) {
           {{ autoRefresh?.enabled ? autoRefresh.stopLabel : autoRefresh?.startLabel }}
         </DropdownMenuItem>
         <DropdownMenuItem v-for="seconds in autoRefreshIntervals" :key="seconds" class="gap-2" :disabled="autoRefresh?.disabled" @select="void selectDataGridToolbarAutoRefreshInterval(autoRefresh, seconds)">
-          <Check v-if="autoRefresh?.intervalSeconds === seconds" class="h-3.5 w-3.5" />
+          <Check v-if="autoRefresh?.enabled && autoRefresh.intervalSeconds === seconds" class="h-3.5 w-3.5" />
           <span v-else class="h-3.5 w-3.5" />
           {{ autoRefresh?.intervalLabel(seconds) }}
         </DropdownMenuItem>

apps/desktop/src/components/grid/__tests__/DataGridToolbarIconTooltips.spec.ts

@@ -68,7 +68,7 @@ function mountWithProvider(render: () => ReturnType<typeof h>) {
   return mounted;
 }
 
-function mountToolbar() {
+function mountToolbar(autoRefreshEnabled = false) {
   return mountWithProvider(() =>
     h(DataGridToolbar, {
       compact: true,
@@ -78,7 +78,7 @@ function mountToolbar() {
         shortLabel: "Auto",
         startLabel: "Start auto-refresh",
         stopLabel: "Stop auto-refresh",
-        enabled: false,
+        enabled: autoRefreshEnabled,
         intervalSeconds: 30,
         sweepKey: 0,
         intervalOptions: [10, 30, 60],
@@ -200,6 +200,16 @@ describe("data grid icon-only toolbar tooltips", () => {
     expect(showsTooltip("Auto-refresh results")).toBe(true);
   });
 
+  it.each([false, true])("marks the interval as selected only when auto refresh is enabled (%s)", async (enabled) => {
+    const { host } = mountToolbar(enabled);
+    await settle();
+    await click(toolbarButton(host, "autoRefresh"));
+
+    const intervalItem = [...document.querySelectorAll<HTMLElement>('[data-slot="dropdown-menu-item"]')].find((item) => item.textContent?.trim() === "Refresh every 30s");
+    expect(intervalItem).toBeDefined();
+    expect(!!intervalItem!.querySelector("svg")).toBe(enabled);
+  });
+
   it("opens the column lookup side panel through its toolbar capability", async () => {
     const { host, grid } = mountGrid();
     await settle();

apps/desktop/src/composables/__tests__/useDataGridAutoRefresh.spec.ts

@@ -18,6 +18,58 @@ describe("useDataGridAutoRefresh", () => {
     autoRefresh.stop();
   });
 
+  it.each([5, 10, 30, 60, 300])("starts refreshing when the %i second interval is selected", (seconds) => {
+    vi.useFakeTimers();
+    const refresh = vi.fn();
+    const autoRefresh = useDataGridAutoRefresh({ canRefresh: computed(() => true), refresh });
+
+    autoRefresh.setIntervalSeconds(seconds);
+
+    expect(autoRefresh.enabled.value).toBe(true);
+    vi.advanceTimersByTime(seconds * 1000 - 1);
+    expect(refresh).not.toHaveBeenCalled();
+    vi.advanceTimersByTime(1);
+    expect(refresh).toHaveBeenCalledOnce();
+    vi.advanceTimersByTime(seconds * 1000);
+    expect(refresh).toHaveBeenCalledTimes(2);
+    autoRefresh.stop();
+  });
+
+  it("restarts refreshing when the same interval is selected after disabling", () => {
+    vi.useFakeTimers();
+    const refresh = vi.fn();
+    const autoRefresh = useDataGridAutoRefresh({ canRefresh: computed(() => true), refresh, initialIntervalSeconds: 5 });
+
+    autoRefresh.toggle();
+    autoRefresh.toggle();
+    vi.advanceTimersByTime(5000);
+    expect(refresh).not.toHaveBeenCalled();
+
+    autoRefresh.setIntervalSeconds(5);
+    vi.advanceTimersByTime(5000);
+
+    expect(autoRefresh.enabled.value).toBe(true);
+    expect(refresh).toHaveBeenCalledOnce();
+    autoRefresh.stop();
+  });
+
+  it("replaces the running countdown when a different interval is selected", () => {
+    vi.useFakeTimers();
+    const refresh = vi.fn();
+    const autoRefresh = useDataGridAutoRefresh({ canRefresh: computed(() => true), refresh, initialIntervalSeconds: 5 });
+
+    autoRefresh.toggle();
+    vi.advanceTimersByTime(4000);
+    autoRefresh.setIntervalSeconds(10);
+    vi.advanceTimersByTime(9999);
+    expect(refresh).not.toHaveBeenCalled();
+    vi.advanceTimersByTime(1);
+    expect(refresh).toHaveBeenCalledOnce();
+    vi.advanceTimersByTime(10000);
+    expect(refresh).toHaveBeenCalledTimes(2);
+    autoRefresh.stop();
+  });
+
   it("does not refresh while the operation is unavailable", () => {
     vi.useFakeTimers();
     const refresh = vi.fn();

apps/desktop/src/composables/useDataGridAutoRefresh.ts

@@ -37,7 +37,9 @@ export function useDataGridAutoRefresh(options: UseDataGridAutoRefreshOptions) {
 
   function setIntervalSeconds(seconds: number) {
     intervalSeconds.value = seconds;
-    if (enabled.value) start();
+    // Selecting an interval also starts auto-refresh, including after a stop.
+    enabled.value = true;
+    start();
   }
 
   function toggle() {