diff --git a/apps/desktop/src/components/grid/DataGridToolbar.vue b/apps/desktop/src/components/grid/DataGridToolbar.vue
index 6d0191ef3e..ab952736bd 100644
--- a/apps/desktop/src/components/grid/DataGridToolbar.vue
+++ b/apps/desktop/src/components/grid/DataGridToolbar.vue
@@ -131,7 +131,7 @@ function actionLabelClass(action: DataGridToolbarActionKey) {
{{ autoRefresh?.enabled ? autoRefresh.stopLabel : autoRefresh?.startLabel }}
-
+
{{ autoRefresh?.intervalLabel(seconds) }}
diff --git a/apps/desktop/src/components/grid/__tests__/DataGridToolbarIconTooltips.spec.ts b/apps/desktop/src/components/grid/__tests__/DataGridToolbarIconTooltips.spec.ts
index 4911ef3b0b..bbc7359c6b 100644
--- a/apps/desktop/src/components/grid/__tests__/DataGridToolbarIconTooltips.spec.ts
+++ b/apps/desktop/src/components/grid/__tests__/DataGridToolbarIconTooltips.spec.ts
@@ -68,7 +68,7 @@ function mountWithProvider(render: () => ReturnType) {
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('[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();
diff --git a/apps/desktop/src/composables/__tests__/useDataGridAutoRefresh.spec.ts b/apps/desktop/src/composables/__tests__/useDataGridAutoRefresh.spec.ts
index 63ea6cc0b8..7c43894450 100644
--- a/apps/desktop/src/composables/__tests__/useDataGridAutoRefresh.spec.ts
+++ b/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();
diff --git a/apps/desktop/src/composables/useDataGridAutoRefresh.ts b/apps/desktop/src/composables/useDataGridAutoRefresh.ts
index 529a2a7a80..fb10dc868e 100644
--- a/apps/desktop/src/composables/useDataGridAutoRefresh.ts
+++ b/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() {