refactor: organize frontend components into features/ directories
Moved 43 component files into 9 feature domains: - features/git/ — commit-dialog, commit-panel, file-editor, git-mount-editor, git-toolbar, merge-dialog - features/project/ — repositories-settings-tab, repository-create-dialog - features/terminal/ — special-keys-panel, special-keys-strip, terminal-session-tabs, terminal - features/workspace/ — workspace-card, workspace-create-form, workspace-header, workspace-instance-chips - features/session/ — create-session-form, session-card, session-list - features/tool/ — instance-list, manifest-editor, start-tool-fab, start-tool-modal, tool-starter, tools-bottom-sheet - features/notification/ — event-toast-bridge, notification-center, notification-item - features/settings/ — settings-tab-layout - features/mobile/ — mobile-action-sheet, mobile-detail-view, mobile-edit-view, mobile-fab, mobile-list-view, mobile-nav, mobile-page-header, mobile-terminal-header, mobile-terminal-wrapper Updated all imports across pages and components. Root components/ now only contains generic UI pieces: app-shell, code-editor, data-states, icon, protected-route, syntax-highlighter. Quality gates: verified no remaining old imports.
This commit is contained in:
@@ -0,0 +1,220 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { render, act } from "@testing-library/react";
|
||||
import { EventToastBridge } from "./event-toast-bridge";
|
||||
import { useEventContext } from "../state/events";
|
||||
import { getUserConfig } from "../api/settings";
|
||||
import { handleEventToast } from "./toast-rules";
|
||||
import type { InstanceEventPayload } from "../types/events";
|
||||
|
||||
vi.mock("../state/events", () => ({
|
||||
useEventContext: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock("../api/settings", () => ({
|
||||
getUserConfig: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock("./toast-rules", async (importOriginal) => {
|
||||
const actual = await importOriginal<typeof import("./toast-rules")>();
|
||||
return {
|
||||
...actual,
|
||||
handleEventToast: vi.fn(),
|
||||
clearToastDedup: vi.fn(),
|
||||
};
|
||||
});
|
||||
|
||||
const mockedUseEventContext = vi.mocked(useEventContext);
|
||||
const mockedGetUserConfig = vi.mocked(getUserConfig);
|
||||
const mockedHandleEventToast = vi.mocked(handleEventToast);
|
||||
|
||||
function makeEvent(
|
||||
eventType: string,
|
||||
overrides?: Partial<InstanceEventPayload>,
|
||||
): InstanceEventPayload {
|
||||
return {
|
||||
event: eventType,
|
||||
instance_id: "i-1",
|
||||
status: undefined,
|
||||
message: undefined,
|
||||
metadata: {},
|
||||
timestamp: "2026-05-29T10:00:00Z",
|
||||
correlation_id: "c1",
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
async function flushPromises() {
|
||||
await act(async () => {
|
||||
await Promise.resolve();
|
||||
});
|
||||
}
|
||||
|
||||
describe("EventToastBridge preference checks", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
mockedUseEventContext.mockReturnValue({
|
||||
events: [],
|
||||
connected: false,
|
||||
reconnectCount: 0,
|
||||
});
|
||||
mockedGetUserConfig.mockResolvedValue({
|
||||
theme: "system",
|
||||
default_editor: null,
|
||||
git_user_name: null,
|
||||
git_user_email: null,
|
||||
last_session_id: null,
|
||||
notification_toast_level: "all",
|
||||
notification_mute_categories: [],
|
||||
} as unknown as Awaited<ReturnType<typeof getUserConfig>>);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
it("shows toast when level is all and category not muted", async () => {
|
||||
const event = makeEvent("instance.started");
|
||||
mockedUseEventContext.mockReturnValue({
|
||||
events: [event],
|
||||
connected: false,
|
||||
reconnectCount: 0,
|
||||
});
|
||||
render(<EventToastBridge />);
|
||||
await flushPromises();
|
||||
expect(mockedHandleEventToast).toHaveBeenCalledWith(event);
|
||||
});
|
||||
|
||||
it("suppresses toast when level is none", async () => {
|
||||
mockedGetUserConfig.mockResolvedValue({
|
||||
notification_toast_level: "none",
|
||||
notification_mute_categories: [],
|
||||
} as unknown as Awaited<ReturnType<typeof getUserConfig>>);
|
||||
const event = makeEvent("instance.started");
|
||||
mockedUseEventContext.mockReturnValue({
|
||||
events: [event],
|
||||
connected: false,
|
||||
reconnectCount: 0,
|
||||
});
|
||||
render(<EventToastBridge />);
|
||||
await flushPromises();
|
||||
expect(mockedHandleEventToast).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("suppresses info toast when level is errors", async () => {
|
||||
mockedGetUserConfig.mockResolvedValue({
|
||||
notification_toast_level: "errors",
|
||||
notification_mute_categories: [],
|
||||
} as unknown as Awaited<ReturnType<typeof getUserConfig>>);
|
||||
const event = makeEvent("instance.started");
|
||||
mockedUseEventContext.mockReturnValue({
|
||||
events: [event],
|
||||
connected: false,
|
||||
reconnectCount: 0,
|
||||
});
|
||||
render(<EventToastBridge />);
|
||||
await flushPromises();
|
||||
expect(mockedHandleEventToast).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("shows error toast when level is errors", async () => {
|
||||
mockedGetUserConfig.mockResolvedValue({
|
||||
notification_toast_level: "errors",
|
||||
notification_mute_categories: [],
|
||||
} as unknown as Awaited<ReturnType<typeof getUserConfig>>);
|
||||
const event = makeEvent("instance.error");
|
||||
mockedUseEventContext.mockReturnValue({
|
||||
events: [event],
|
||||
connected: false,
|
||||
reconnectCount: 0,
|
||||
});
|
||||
render(<EventToastBridge />);
|
||||
await flushPromises();
|
||||
expect(mockedHandleEventToast).toHaveBeenCalledWith(event);
|
||||
});
|
||||
|
||||
it("suppresses toast when category is muted", async () => {
|
||||
mockedGetUserConfig.mockResolvedValue({
|
||||
notification_toast_level: "all",
|
||||
notification_mute_categories: ["instance"],
|
||||
} as unknown as Awaited<ReturnType<typeof getUserConfig>>);
|
||||
const event = makeEvent("instance.started");
|
||||
mockedUseEventContext.mockReturnValue({
|
||||
events: [event],
|
||||
connected: false,
|
||||
reconnectCount: 0,
|
||||
});
|
||||
render(<EventToastBridge />);
|
||||
await flushPromises();
|
||||
expect(mockedHandleEventToast).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("applies preference change immediately via custom event", async () => {
|
||||
const event1 = makeEvent("instance.started");
|
||||
mockedUseEventContext.mockReturnValue({
|
||||
events: [event1],
|
||||
connected: false,
|
||||
reconnectCount: 0,
|
||||
});
|
||||
const { rerender } = render(<EventToastBridge />);
|
||||
await flushPromises();
|
||||
expect(mockedHandleEventToast).toHaveBeenCalledTimes(1);
|
||||
|
||||
act(() => {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("userconfig:updated", {
|
||||
detail: { notification_toast_level: "none" },
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
const event2 = makeEvent("instance.started");
|
||||
mockedUseEventContext.mockReturnValue({
|
||||
events: [event1, event2],
|
||||
connected: false,
|
||||
reconnectCount: 0,
|
||||
});
|
||||
rerender(<EventToastBridge />);
|
||||
await flushPromises();
|
||||
expect(mockedHandleEventToast).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("muted category overrides all level", async () => {
|
||||
mockedGetUserConfig.mockResolvedValue({
|
||||
notification_toast_level: "all",
|
||||
notification_mute_categories: ["instance"],
|
||||
} as unknown as Awaited<ReturnType<typeof getUserConfig>>);
|
||||
const event = makeEvent("instance.error");
|
||||
mockedUseEventContext.mockReturnValue({
|
||||
events: [event],
|
||||
connected: false,
|
||||
reconnectCount: 0,
|
||||
});
|
||||
render(<EventToastBridge />);
|
||||
await flushPromises();
|
||||
expect(mockedHandleEventToast).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("deduplication still works with preferences", async () => {
|
||||
const event = makeEvent("instance.started");
|
||||
mockedUseEventContext.mockReturnValue({
|
||||
events: [event, event],
|
||||
connected: false,
|
||||
reconnectCount: 0,
|
||||
});
|
||||
render(<EventToastBridge />);
|
||||
await flushPromises();
|
||||
expect(mockedHandleEventToast).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("unmapped event defaults to system/info and shows when level is all", async () => {
|
||||
const event = makeEvent("system.announcement");
|
||||
mockedUseEventContext.mockReturnValue({
|
||||
events: [event],
|
||||
connected: false,
|
||||
reconnectCount: 0,
|
||||
});
|
||||
render(<EventToastBridge />);
|
||||
await flushPromises();
|
||||
expect(mockedHandleEventToast).toHaveBeenCalledWith(event);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,77 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useEventContext } from "../state/events";
|
||||
import {
|
||||
handleEventToast,
|
||||
mapEventToCategory,
|
||||
mapEventToSeverity,
|
||||
} from "./toast-rules";
|
||||
import { getUserConfig } from "../api/settings";
|
||||
import type { UserConfig } from "../api/settings";
|
||||
|
||||
interface ToastConfig {
|
||||
notification_toast_level: string;
|
||||
notification_mute_categories: string[];
|
||||
}
|
||||
|
||||
export function EventToastBridge(): JSX.Element | null {
|
||||
const { events } = useEventContext();
|
||||
const processedRef = useRef<Set<string>>(new Set());
|
||||
const [config, setConfig] = useState<ToastConfig | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
getUserConfig()
|
||||
.then((c) => {
|
||||
setConfig({
|
||||
notification_toast_level: c.notification_toast_level ?? "all",
|
||||
notification_mute_categories: c.notification_mute_categories ?? [],
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
setConfig({
|
||||
notification_toast_level: "all",
|
||||
notification_mute_categories: [],
|
||||
});
|
||||
});
|
||||
|
||||
const handler = (e: Event) => {
|
||||
const detail = (e as CustomEvent<Partial<UserConfig>>).detail;
|
||||
if (detail) {
|
||||
setConfig((prev) => ({
|
||||
notification_toast_level:
|
||||
detail.notification_toast_level ??
|
||||
prev?.notification_toast_level ??
|
||||
"all",
|
||||
notification_mute_categories:
|
||||
detail.notification_mute_categories ??
|
||||
prev?.notification_mute_categories ??
|
||||
[],
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("userconfig:updated", handler);
|
||||
return () => window.removeEventListener("userconfig:updated", handler);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!config) return;
|
||||
|
||||
for (const event of events) {
|
||||
const key = `${event.correlation_id}:${event.timestamp}`;
|
||||
if (processedRef.current.has(key)) continue;
|
||||
processedRef.current.add(key);
|
||||
|
||||
const category = mapEventToCategory(event);
|
||||
const severity = mapEventToSeverity(event);
|
||||
|
||||
if (config.notification_toast_level === "none") continue;
|
||||
if (config.notification_toast_level === "errors" && severity !== "error")
|
||||
continue;
|
||||
if (config.notification_mute_categories.includes(category)) continue;
|
||||
|
||||
handleEventToast(event);
|
||||
}
|
||||
}, [events, config]);
|
||||
|
||||
return null;
|
||||
}
|
||||
@@ -0,0 +1,177 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { render, screen, fireEvent, cleanup } from "@testing-library/react";
|
||||
import { NotificationCenter } from "./notification-center";
|
||||
import { NotificationProvider } from "../state/notifications";
|
||||
|
||||
vi.mock("../api/notifications", () => ({
|
||||
getNotifications: vi.fn(),
|
||||
getUnreadCount: vi.fn(),
|
||||
markNotificationRead: vi.fn(),
|
||||
markAllNotificationsRead: vi.fn(),
|
||||
dismissNotification: vi.fn(),
|
||||
clearAllNotifications: vi.fn(),
|
||||
}));
|
||||
|
||||
import { getNotifications, getUnreadCount } from "../api/notifications";
|
||||
|
||||
const mockedGetNotifications = vi.mocked(getNotifications);
|
||||
const mockedGetUnreadCount = vi.mocked(getUnreadCount);
|
||||
|
||||
const makeNotification = (id: string, overrides?: Record<string, unknown>) => ({
|
||||
id,
|
||||
user_id: "user-1",
|
||||
category: "instance",
|
||||
severity: "info" as const,
|
||||
title: `Notification ${id}`,
|
||||
message: null,
|
||||
source_type: null,
|
||||
source_id: null,
|
||||
metadata: {},
|
||||
read_at: null,
|
||||
dismissed_at: null,
|
||||
created_at: "2026-05-29T10:00:00Z",
|
||||
...overrides,
|
||||
});
|
||||
|
||||
function wrapper({ children }: { children: React.ReactNode }) {
|
||||
return <NotificationProvider>{children}</NotificationProvider>;
|
||||
}
|
||||
|
||||
describe("NotificationCenter", () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers({ shouldAdvanceTime: true });
|
||||
mockedGetNotifications.mockResolvedValue({
|
||||
items: [],
|
||||
total: 0,
|
||||
limit: 20,
|
||||
offset: 0,
|
||||
});
|
||||
mockedGetUnreadCount.mockResolvedValue(0);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.useRealTimers();
|
||||
vi.clearAllMocks();
|
||||
cleanup();
|
||||
});
|
||||
|
||||
it("renders bell icon", () => {
|
||||
render(<NotificationCenter />, { wrapper });
|
||||
expect(
|
||||
screen.getByRole("button", { name: /notifications/i }),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows badge when unread count > 0", async () => {
|
||||
mockedGetUnreadCount.mockResolvedValue(3);
|
||||
render(<NotificationCenter />, { wrapper });
|
||||
|
||||
await vi.advanceTimersByTimeAsync(100);
|
||||
expect(screen.getByText("3")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("hides badge when unread count is 0", () => {
|
||||
render(<NotificationCenter />, { wrapper });
|
||||
expect(screen.queryByText("0")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("opens dropdown on bell click", () => {
|
||||
render(<NotificationCenter />, { wrapper });
|
||||
fireEvent.click(screen.getByRole("button", { name: /notifications/i }));
|
||||
expect(screen.getByRole("dialog")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("closes dropdown on outside click", () => {
|
||||
render(
|
||||
<div>
|
||||
<div data-testid="outside">Outside</div>
|
||||
<NotificationCenter />
|
||||
</div>,
|
||||
{ wrapper },
|
||||
);
|
||||
fireEvent.click(screen.getByRole("button", { name: /notifications/i }));
|
||||
expect(screen.getByRole("dialog")).toBeInTheDocument();
|
||||
|
||||
fireEvent.mouseDown(screen.getByTestId("outside"));
|
||||
expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("closes dropdown on escape", () => {
|
||||
render(<NotificationCenter />, { wrapper });
|
||||
fireEvent.click(screen.getByRole("button", { name: /notifications/i }));
|
||||
expect(screen.getByRole("dialog")).toBeInTheDocument();
|
||||
|
||||
fireEvent.keyDown(document, { key: "Escape" });
|
||||
expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders empty state when no notifications", () => {
|
||||
render(<NotificationCenter />, { wrapper });
|
||||
fireEvent.click(screen.getByRole("button", { name: /notifications/i }));
|
||||
expect(screen.getByText("No notifications")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders notification items", async () => {
|
||||
mockedGetNotifications.mockResolvedValue({
|
||||
items: [makeNotification("1"), makeNotification("2")],
|
||||
total: 2,
|
||||
limit: 20,
|
||||
offset: 0,
|
||||
});
|
||||
|
||||
render(<NotificationCenter />, { wrapper });
|
||||
fireEvent.click(screen.getByRole("button", { name: /notifications/i }));
|
||||
|
||||
await vi.advanceTimersByTimeAsync(100);
|
||||
expect(screen.getByText("Notification 1")).toBeInTheDocument();
|
||||
expect(screen.getByText("Notification 2")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("calls markAllRead on footer button click", async () => {
|
||||
mockedGetNotifications.mockResolvedValue({
|
||||
items: [makeNotification("1")],
|
||||
total: 1,
|
||||
limit: 20,
|
||||
offset: 0,
|
||||
});
|
||||
|
||||
render(<NotificationCenter />, { wrapper });
|
||||
fireEvent.click(screen.getByRole("button", { name: /notifications/i }));
|
||||
|
||||
await vi.advanceTimersByTimeAsync(100);
|
||||
fireEvent.click(screen.getByRole("button", { name: /mark all as read/i }));
|
||||
|
||||
const { markAllNotificationsRead: mockMarkAll } = await import(
|
||||
"../api/notifications"
|
||||
);
|
||||
expect(vi.mocked(mockMarkAll)).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("calls clearAll on clear-all button click", async () => {
|
||||
mockedGetNotifications.mockResolvedValue({
|
||||
items: [makeNotification("1")],
|
||||
total: 1,
|
||||
limit: 20,
|
||||
offset: 0,
|
||||
});
|
||||
|
||||
render(<NotificationCenter />, { wrapper });
|
||||
fireEvent.click(screen.getByRole("button", { name: /notifications/i }));
|
||||
|
||||
await vi.advanceTimersByTimeAsync(100);
|
||||
fireEvent.click(screen.getByRole("button", { name: /clear all/i }));
|
||||
|
||||
const { clearAllNotifications: mockClearAll } = await import(
|
||||
"../api/notifications"
|
||||
);
|
||||
expect(vi.mocked(mockClearAll)).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("refreshes list immediately on open", async () => {
|
||||
render(<NotificationCenter />, { wrapper });
|
||||
fireEvent.click(screen.getByRole("button", { name: /notifications/i }));
|
||||
|
||||
await vi.advanceTimersByTimeAsync(100);
|
||||
expect(mockedGetNotifications).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,134 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import { useNotifications } from "../hooks/use-notifications";
|
||||
import { NotificationItem } from "./notification-item";
|
||||
import { Icon } from "./icon";
|
||||
|
||||
interface NotificationCenterProps {
|
||||
isMobileTerminal?: boolean;
|
||||
}
|
||||
|
||||
export function NotificationCenter({
|
||||
isMobileTerminal = false,
|
||||
}: NotificationCenterProps) {
|
||||
const {
|
||||
notifications,
|
||||
unreadCount,
|
||||
markRead,
|
||||
markAllRead,
|
||||
clearAll,
|
||||
dismiss,
|
||||
refreshList,
|
||||
isDropdownOpen,
|
||||
setIsDropdownOpen,
|
||||
} = useNotifications();
|
||||
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isDropdownOpen) return;
|
||||
|
||||
const handleMouseDown = (e: MouseEvent) => {
|
||||
if (
|
||||
dropdownRef.current &&
|
||||
!dropdownRef.current.contains(e.target as Node)
|
||||
) {
|
||||
setIsDropdownOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
setIsDropdownOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("mousedown", handleMouseDown);
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleMouseDown);
|
||||
document.removeEventListener("keydown", handleKeyDown);
|
||||
};
|
||||
}, [isDropdownOpen, setIsDropdownOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isDropdownOpen) {
|
||||
void refreshList();
|
||||
}
|
||||
}, [isDropdownOpen, refreshList]);
|
||||
|
||||
if (isMobileTerminal) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const badgeText = unreadCount > 99 ? "99+" : String(unreadCount);
|
||||
|
||||
return (
|
||||
<div className="notification-center">
|
||||
<button
|
||||
type="button"
|
||||
className="notification-bell"
|
||||
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
|
||||
aria-label="Notifications"
|
||||
aria-haspopup="dialog"
|
||||
aria-expanded={isDropdownOpen}
|
||||
>
|
||||
<Icon name="bell" size="md" />
|
||||
{unreadCount > 0 && (
|
||||
<span className="nav-badge notification-badge">{badgeText}</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{isDropdownOpen && (
|
||||
<div
|
||||
ref={dropdownRef}
|
||||
role="dialog"
|
||||
aria-label="Notifications"
|
||||
className="notification-dropdown"
|
||||
>
|
||||
<div className="notification-dropdown-header">
|
||||
<span>Notifications</span>
|
||||
</div>
|
||||
|
||||
<ul className="notification-list">
|
||||
{notifications.length === 0 ? (
|
||||
<li className="notification-empty">No notifications</li>
|
||||
) : (
|
||||
notifications.map((n) => (
|
||||
<NotificationItem
|
||||
key={n.id}
|
||||
notification={n}
|
||||
onMarkRead={markRead}
|
||||
onDismiss={dismiss}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</ul>
|
||||
|
||||
{notifications.length > 0 && (
|
||||
<div className="notification-dropdown-footer">
|
||||
<button
|
||||
type="button"
|
||||
className="notification-mark-all"
|
||||
onClick={() => {
|
||||
void markAllRead();
|
||||
}}
|
||||
>
|
||||
Mark all as read
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="notification-clear-all"
|
||||
onClick={() => {
|
||||
void clearAll();
|
||||
}}
|
||||
>
|
||||
Clear all
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
import { describe, it, expect, vi, afterEach } from "vitest";
|
||||
import { render, screen, fireEvent, cleanup } from "@testing-library/react";
|
||||
import { NotificationItem } from "./notification-item";
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
});
|
||||
|
||||
const makeNotification = (overrides?: Record<string, unknown>) => ({
|
||||
id: "1",
|
||||
user_id: "user-1",
|
||||
category: "instance",
|
||||
severity: "info" as const,
|
||||
title: "Container started",
|
||||
message: null,
|
||||
source_type: null,
|
||||
source_id: null,
|
||||
metadata: {},
|
||||
read_at: null,
|
||||
dismissed_at: null,
|
||||
created_at: "2026-05-29T10:00:00Z",
|
||||
...overrides,
|
||||
});
|
||||
|
||||
describe("NotificationItem", () => {
|
||||
it("displays title and relative time", () => {
|
||||
render(
|
||||
<NotificationItem
|
||||
notification={makeNotification()}
|
||||
onMarkRead={vi.fn()}
|
||||
onDismiss={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByText("Container started")).toBeInTheDocument();
|
||||
expect(screen.getByText(/ago|just now/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("applies unread styling when read_at is null", () => {
|
||||
render(
|
||||
<NotificationItem
|
||||
notification={makeNotification({ read_at: null })}
|
||||
onMarkRead={vi.fn()}
|
||||
onDismiss={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
|
||||
const row = screen.getByRole("listitem");
|
||||
expect(row.className).toContain("notification-item--unread");
|
||||
});
|
||||
|
||||
it("applies read styling when read_at is set", () => {
|
||||
render(
|
||||
<NotificationItem
|
||||
notification={makeNotification({ read_at: "2026-05-29T10:01:00Z" })}
|
||||
onMarkRead={vi.fn()}
|
||||
onDismiss={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
|
||||
const row = screen.getByRole("listitem");
|
||||
expect(row.className).toContain("notification-item--read");
|
||||
});
|
||||
|
||||
it("calls onMarkRead when mark read clicked", () => {
|
||||
const onMarkRead = vi.fn();
|
||||
render(
|
||||
<NotificationItem
|
||||
notification={makeNotification()}
|
||||
onMarkRead={onMarkRead}
|
||||
onDismiss={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: /mark read/i }));
|
||||
expect(onMarkRead).toHaveBeenCalledWith("1");
|
||||
});
|
||||
|
||||
it("calls onDismiss when dismiss clicked", () => {
|
||||
const onDismiss = vi.fn();
|
||||
render(
|
||||
<NotificationItem
|
||||
notification={makeNotification()}
|
||||
onMarkRead={vi.fn()}
|
||||
onDismiss={onDismiss}
|
||||
/>,
|
||||
);
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: /dismiss/i }));
|
||||
expect(onDismiss).toHaveBeenCalledWith("1");
|
||||
});
|
||||
|
||||
it("displays severity icon", () => {
|
||||
render(
|
||||
<NotificationItem
|
||||
notification={makeNotification({ severity: "error" })}
|
||||
onMarkRead={vi.fn()}
|
||||
onDismiss={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByRole("img", { hidden: true })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,64 @@
|
||||
import { Icon } from "./icon";
|
||||
import { formatRelativeTime } from "../utils/time";
|
||||
import type { NotificationItem as NotificationItemType } from "../api/notifications";
|
||||
|
||||
export interface NotificationItemProps {
|
||||
notification: NotificationItemType;
|
||||
onMarkRead: (id: string) => void;
|
||||
onDismiss: (id: string) => void;
|
||||
}
|
||||
|
||||
import type { IconName } from "../utils/icons";
|
||||
|
||||
const severityIconMap: Record<string, IconName> = {
|
||||
info: "info",
|
||||
warning: "warning",
|
||||
error: "error",
|
||||
success: "success",
|
||||
};
|
||||
|
||||
export function NotificationItem({
|
||||
notification,
|
||||
onMarkRead,
|
||||
onDismiss,
|
||||
}: NotificationItemProps) {
|
||||
const isUnread = notification.read_at === null;
|
||||
const iconName = severityIconMap[notification.severity] ?? "info";
|
||||
|
||||
return (
|
||||
<li
|
||||
role="listitem"
|
||||
className={`notification-item ${isUnread ? "notification-item--unread" : "notification-item--read"}`}
|
||||
>
|
||||
<div className="notification-item-icon">
|
||||
<Icon name={iconName} size="md" />
|
||||
</div>
|
||||
<div className="notification-item-content">
|
||||
<div className="notification-item-title">{notification.title}</div>
|
||||
<div className="notification-item-time">
|
||||
{formatRelativeTime(notification.created_at)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="notification-item-actions">
|
||||
{isUnread && (
|
||||
<button
|
||||
type="button"
|
||||
className="notification-item-action"
|
||||
onClick={() => onMarkRead(notification.id)}
|
||||
aria-label="Mark read"
|
||||
>
|
||||
Mark read
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="notification-item-action"
|
||||
onClick={() => onDismiss(notification.id)}
|
||||
aria-label="Dismiss"
|
||||
>
|
||||
Dismiss
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user