.
+
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { mount, flushPromises, VueWrapper } from "@vue/test-utils";
+import i18n from "@/locales";
+import store from "@/test/unit/helpers/store";
+import { createRouter, createMemoryHistory } from "vue-router";
+import SearchBar from "@/plugins/logs/SearchBar.vue";
+import SavedViewsListDialog from "@/components/savedViews/SavedViewsListDialog.vue";
+import ConfirmDialog from "@/components/ConfirmDialog.vue";
+
+const { mockSavedViewsGet, mockSavedViewsDelete } = vi.hoisted(() => ({
+ mockSavedViewsGet: vi.fn(),
+ mockSavedViewsDelete: vi.fn(),
+}));
+
+vi.mock("@/services/saved_views", async (importOriginal) => {
+ const { overlayServiceMock } = await import("@/test/unit/helpers/mockService");
+ return overlayServiceMock(await importOriginal(), {
+ default: { get: mockSavedViewsGet, delete: mockSavedViewsDelete },
+ });
+});
+
+// A light in-memory router: the app router lazy-loads real pages on navigation.
+const router = createRouter({
+ history: createMemoryHistory(),
+ routes: [{ path: "/logs", name: "logs", component: { template: "
" } }],
+});
+
+const logsView = {
+ view_id: "l1",
+ view_name: "error logs",
+ org_id: "default",
+ view_type: "logs",
+};
+const logsView2 = {
+ view_id: "l2",
+ view_name: "slow requests",
+ org_id: "default",
+ view_type: "logs",
+};
+
+describe("SearchBar — saved views list dialog", () => {
+ let wrapper: VueWrapper
| undefined;
+
+ const mountSearchBar = () =>
+ mount(SearchBar, {
+ global: {
+ provide: { store },
+ plugins: [i18n, router],
+ stubs: { QueryEditor: true },
+ },
+ });
+
+ const dialog = () => wrapper!.findComponent(SavedViewsListDialog);
+ const favorites = () => JSON.parse(localStorage.getItem("savedViews") || "{}");
+
+ beforeEach(() => {
+ localStorage.removeItem("savedViews");
+ mockSavedViewsGet.mockResolvedValue({ data: { views: [logsView, logsView2] } });
+ mockSavedViewsDelete.mockResolvedValue({ status: 200, data: {} });
+ });
+
+ afterEach(() => {
+ wrapper?.unmount();
+ wrapper = undefined;
+ localStorage.removeItem("savedViews");
+ vi.clearAllMocks();
+ });
+
+ it("passes the logs data-test prefix, views and favourites to the dialog", async () => {
+ localStorage.setItem("savedViews", JSON.stringify({ l1: logsView }));
+ wrapper = mountSearchBar();
+ wrapper.vm.searchObj.data.savedViews = [logsView, logsView2];
+ await flushPromises();
+
+ expect(dialog().props("dataTestPrefix")).toBe("logs-saved-views-dialog");
+ expect(dialog().props("views")).toEqual([logsView, logsView2]);
+ expect(dialog().props("favoriteIds")).toEqual(["l1"]);
+ expect(dialog().props("favoriteViews")).toEqual([logsView]);
+ });
+
+ it("toggles a favourite from the dialog", async () => {
+ wrapper = mountSearchBar();
+ await flushPromises();
+
+ dialog().vm.$emit("toggle-favorite", logsView, false);
+ await flushPromises();
+ expect(dialog().props("favoriteIds")).toEqual(["l1"]);
+ expect(Object.keys(favorites())).toEqual(["l1"]);
+
+ dialog().vm.$emit("toggle-favorite", logsView, true);
+ await flushPromises();
+ expect(dialog().props("favoriteIds")).toEqual([]);
+ expect(favorites()).toEqual({});
+ });
+
+ it("a confirmed delete from the dialog drops the favourite", async () => {
+ localStorage.setItem("savedViews", JSON.stringify({ l1: logsView }));
+ wrapper = mountSearchBar();
+ await flushPromises();
+ wrapper.vm.savedViewsListDialog = true;
+ await flushPromises();
+
+ dialog().vm.$emit("delete", logsView);
+ await flushPromises();
+
+ expect(dialog().props("open")).toBe(false);
+ const confirm = wrapper
+ .findAllComponents(ConfirmDialog)
+ .find((c) => c.props("modelValue") === true)!;
+ expect(confirm.props("title")).toBe(i18n.global.t("search.deleteSavedView"));
+ expect(mockSavedViewsDelete).not.toHaveBeenCalled();
+
+ confirm.vm.$emit("update:ok");
+ await flushPromises();
+
+ expect(mockSavedViewsDelete).toHaveBeenCalledWith("default", "l1");
+ expect(dialog().props("favoriteIds")).toEqual([]);
+ expect(favorites()).toEqual({});
+ }, 20000);
+
+ it("prunes favourites deleted elsewhere once the list loads, freeing the cap", async () => {
+ const stored: Record = {
+ t1: { ...logsView, view_id: "t1", view_type: "traces" },
+ };
+ for (let i = 0; i < 9; i++) stored[`gone${i}`] = { ...logsView, view_id: `gone${i}` };
+ stored.l1 = logsView;
+ localStorage.setItem("savedViews", JSON.stringify(stored));
+ wrapper = mountSearchBar();
+ wrapper.vm.searchObj.data.savedViews = [];
+ await flushPromises();
+ expect(dialog().props("favoriteIds")).toHaveLength(10);
+
+ wrapper.vm.openSavedViewsList();
+ await flushPromises();
+
+ expect(mockSavedViewsGet).toHaveBeenCalledTimes(1);
+ expect(dialog().props("favoriteIds")).toEqual(["l1"]);
+ expect(Object.keys(favorites())).toEqual(["t1", "l1"]);
+
+ dialog().vm.$emit("toggle-favorite", logsView2, false);
+ await flushPromises();
+ expect(dialog().props("favoriteIds")).toEqual(["l1", "l2"]);
+ });
+
+ it("keeps every favourite when the list fails to load", async () => {
+ mockSavedViewsGet.mockRejectedValue(new Error("boom"));
+ const gone = { ...logsView, view_id: "gone" };
+ localStorage.setItem("savedViews", JSON.stringify({ l1: logsView, gone }));
+ wrapper = mountSearchBar();
+ wrapper.vm.searchObj.data.savedViews = [];
+ await flushPromises();
+
+ wrapper.vm.openSavedViewsList();
+ await flushPromises();
+
+ expect(mockSavedViewsGet).toHaveBeenCalledTimes(1);
+ expect(dialog().props("loading")).toBe(false);
+ expect(dialog().props("views")).toEqual([]);
+ expect(dialog().props("favoriteIds")).toEqual(["l1", "gone"]);
+ expect(favorites()).toEqual({ l1: logsView, gone });
+ });
+});
diff --git a/web/src/plugins/logs/SearchBar.savedViewsPinned.spec.ts b/web/src/plugins/logs/SearchBar.savedViewsPinned.spec.ts
new file mode 100644
index 0000000000..38a3c7e52c
--- /dev/null
+++ b/web/src/plugins/logs/SearchBar.savedViewsPinned.spec.ts
@@ -0,0 +1,114 @@
+// Copyright 2026 OpenObserve Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { mount, flushPromises, VueWrapper } from "@vue/test-utils";
+import i18n from "@/locales";
+import store from "@/test/unit/helpers/store";
+import { createRouter, createMemoryHistory } from "vue-router";
+import SearchBar from "@/plugins/logs/SearchBar.vue";
+import { useToolbarPins } from "@/composables/useToolbarPins";
+
+// A light in-memory router: the app router lazy-loads real pages on navigation.
+const router = createRouter({
+ history: createMemoryHistory(),
+ routes: [{ path: "/logs", name: "logs", component: { template: "" } }],
+});
+
+describe("SearchBar — pinned saved views", () => {
+ let wrapper: VueWrapper | undefined;
+ const { isPinned, togglePin } = useToolbarPins();
+
+ // jsdom reports zero widths, so every pinned item would fall back into the More menu.
+ const mountSearchBar = (toolbarWidth = 0) => {
+ if (toolbarWidth) {
+ vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function (
+ this: HTMLElement,
+ ) {
+ const isToolbarBar = this.classList.contains("border-b-card-glass-border");
+ return { width: isToolbarBar ? toolbarWidth : 0 } as DOMRect;
+ });
+ }
+ return mount(SearchBar, {
+ global: {
+ provide: { store },
+ plugins: [i18n, router],
+ stubs: { QueryEditor: true },
+ },
+ });
+ };
+
+ const group = () => wrapper!.find('[data-test="logs-search-bar-saved-views-pinned"]');
+
+ beforeEach(() => {
+ if (!isPinned("savedViews")) togglePin("savedViews");
+ });
+
+ afterEach(() => {
+ wrapper?.unmount();
+ wrapper = undefined;
+ if (isPinned("savedViews")) togglePin("savedViews");
+ vi.restoreAllMocks();
+ });
+
+ it("gives the list trigger the grouped xs size with an icon and a caret", async () => {
+ wrapper = mountSearchBar(1600);
+ await flushPromises();
+
+ const trigger = group()
+ .findAllComponents({ name: "OButton" })
+ .find((b) => b.attributes("data-test") === "logs-search-bar-saved-views-pinned-list-btn")!;
+ expect(trigger.props("size")).toBe("xs-grouped");
+ const icons = trigger.findAllComponents({ name: "OIcon" }).map((c) => c.props("name"));
+ expect(icons).toEqual(["saved-search", "arrow-drop-down"]);
+ });
+
+ it("divides the list trigger from the save button with a vertical separator", async () => {
+ wrapper = mountSearchBar(1600);
+ await flushPromises();
+
+ expect(group().exists()).toBe(true);
+ const separator = group().findComponent({ name: "OSeparator" });
+ expect(separator.exists()).toBe(true);
+ expect(separator.props("vertical")).toBe(true);
+ expect(
+ group().find('[data-test="logs-search-bar-saved-views-pinned-create-btn"]').exists(),
+ ).toBe(true);
+ });
+
+ it("is as tall as the xs toolbar buttons: a hairline border around 1.625rem children", async () => {
+ wrapper = mountSearchBar(1600);
+ await flushPromises();
+
+ expect(group().classes()).toContain("border");
+ expect(group().classes()).toContain("p-0");
+ expect(
+ group().find('[data-test="logs-search-bar-saved-views-pinned-list-btn"]').classes(),
+ ).toContain("h-6.5");
+ expect(
+ group().find('[data-test="logs-search-bar-saved-views-pinned-create-btn"]').classes(),
+ ).toContain("size-6.5");
+ expect(wrapper!.find('[data-test="logs-search-bar-reset-filters-btn"]').classes()).toContain(
+ "h-7",
+ );
+ });
+
+ it("moves the group into the More menu when the toolbar has no room", async () => {
+ wrapper = mountSearchBar();
+ await flushPromises();
+
+ expect(group().exists()).toBe(false);
+ });
+});
diff --git a/web/src/plugins/logs/SearchBar.spec.ts b/web/src/plugins/logs/SearchBar.spec.ts
index 1c39127331..dac749458a 100644
--- a/web/src/plugins/logs/SearchBar.spec.ts
+++ b/web/src/plugins/logs/SearchBar.spec.ts
@@ -1796,12 +1796,6 @@ describe("SearchBar.vue Actual Component Methods", () => {
}
}),
- filterSavedViewFn: vi.fn((rows, terms) => {
- if (terms === "") return [];
- terms = terms.toLowerCase();
- return rows.filter((row) => row.view_name.toLowerCase().includes(terms));
- }),
-
regionFilterMethod: vi.fn((node, filter) => {
const filt = filter.toLowerCase();
return (node && node.label && node.label.toLowerCase().indexOf(filt) > -1) || false;
@@ -2185,21 +2179,6 @@ describe("SearchBar.vue Actual Component Methods", () => {
});
});
- // Test 100: filterSavedViewFn method
- it("should filter saved views by search terms", () => {
- const rows = [
- { view_name: "My Test View" },
- { view_name: "Production Logs" },
- { view_name: "Test Results" },
- ];
-
- const filtered = componentInstance.filterSavedViewFn(rows, "test");
-
- expect(filtered).toHaveLength(2);
- expect(filtered[0].view_name).toBe("My Test View");
- expect(filtered[1].view_name).toBe("Test Results");
- });
-
// Test 101: regionFilterMethod
it("should filter regions by label", () => {
const node = { label: "US East" };
@@ -2678,24 +2657,6 @@ describe("SearchBar.vue Actual Component Methods", () => {
});
});
- // Test 142: filterSavedViewFn with empty search terms
- it("should return empty array for empty search terms", () => {
- const rows = [{ view_name: "Test View" }];
-
- const result = componentInstance.filterSavedViewFn(rows, "");
-
- expect(result).toEqual([]);
- });
-
- // Test 143: filterSavedViewFn with no matches
- it("should return empty array when no views match", () => {
- const rows = [{ view_name: "Production Logs" }, { view_name: "Error Tracking" }];
-
- const result = componentInstance.filterSavedViewFn(rows, "development");
-
- expect(result).toEqual([]);
- });
-
// Test 144: resetRegionFilter method
it("should reset region filter to empty string", () => {
componentInstance.regionFilter = "us-east";
@@ -3419,20 +3380,6 @@ describe("SearchBar.vue Actual Component Methods", () => {
expect(componentInstance.searchObj.data.customDownloadQueryObj.query.size).toBe(100);
});
- // Test 208: filterSavedViewFn with special characters
- it("should filter views with special characters", () => {
- const rows = [
- { view_name: "Test-View_123" },
- { view_name: "Production@Logs" },
- { view_name: "Dev Environment" },
- ];
-
- const result = componentInstance.filterSavedViewFn(rows, "-");
-
- expect(result).toHaveLength(1);
- expect(result[0].view_name).toBe("Test-View_123");
- });
-
// Test 209: regionFilterMethod with empty filter
it("should handle empty filter in region method", () => {
const node = { label: "US East" };
diff --git a/web/src/plugins/logs/SearchBar.vue b/web/src/plugins/logs/SearchBar.vue
index 973c12b35c..6aacf761e4 100644
--- a/web/src/plugins/logs/SearchBar.vue
+++ b/web/src/plugins/logs/SearchBar.vue
@@ -239,7 +239,7 @@ along with this program. If not, see .
@@ -310,7 +310,7 @@ along with this program. If not, see .
@@ -1719,240 +1719,19 @@ along with this program. If not, see .
-
-
-
-
+ v-model:search="searchObj.data.savedViewFilterFields"
+ data-test-prefix="logs-saved-views-dialog"
+ :views="searchObj.data.savedViews"
+ :favorite-ids="favoriteViews"
+ :favorite-views="localSavedViews"
+ :loading="searchObj.loadingSavedView == true"
+ @apply="applySavedView"
+ @update="handleUpdateSavedView"
+ @delete="handleDeleteSavedView"
+ @toggle-favorite="handleFavoriteSavedView"
+ />