diff --git a/src/components/layout/app-layout.tsx b/src/components/layout/app-layout.tsx index 20e5645..71a5c3f 100644 --- a/src/components/layout/app-layout.tsx +++ b/src/components/layout/app-layout.tsx @@ -8,6 +8,7 @@ import { AddContentModal } from "@/components/modals/add-content-modal" import { BudgetModal } from "@/components/modals/budget-modal" import { AddNodeModal } from "@/components/modals/add-node-modal" import { EditNodeModal } from "@/components/modals/edit-node-modal" +import { AddEdgeModal } from "@/components/modals/add-edge-modal" import { MediaPlayer } from "@/components/player/media-player" import { useDefaultLayout } from "react-resizable-panels" import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@/components/ui/resizable" @@ -57,6 +58,7 @@ export function AppLayout() { + diff --git a/src/components/layout/node-preview-panel.tsx b/src/components/layout/node-preview-panel.tsx index 668b37e..927028c 100644 --- a/src/components/layout/node-preview-panel.tsx +++ b/src/components/layout/node-preview-panel.tsx @@ -1,7 +1,7 @@ "use client" import { useState, useEffect, useRef } from "react" -import { ArrowLeft, Link, Zap, Loader2, Play, Film, ExternalLink, Heart, Repeat2, ChevronDown, ChevronUp, MessageCircle, Quote, Eye, BadgeCheck, AtSign, HeartOff, X, Pencil, FlaskConical } from "lucide-react" +import { ArrowLeft, Link, Zap, Loader2, Play, Film, ExternalLink, Heart, Repeat2, ChevronDown, ChevronUp, MessageCircle, Quote, Eye, BadgeCheck, AtSign, HeartOff, X, Pencil, FlaskConical, GitMerge } from "lucide-react" import { Badge } from "@/components/ui/badge" import { BoostButton } from "@/components/boost/boost-button" @@ -787,6 +787,7 @@ export function NodePreviewPanel({ node, onBack, schemas }: NodePreviewPanelProp const hasIdentity = !!pubKey || !!cookieStorage.getItem("l402") const openModal = useModalStore((s) => s.open) const openEdit = useModalStore((s) => s.openEdit) + const openAddEdge = useModalStore((s) => s.openAddEdge) const edges = useGraphStore((s) => s.edges) @@ -1099,6 +1100,15 @@ export function NodePreviewPanel({ node, onBack, schemas }: NodePreviewPanelProp boostCount={boostAmt} /> )} + {(isAdmin || hasIdentity) && ( + + )} {isAdmin && ( + + + + + ) +} diff --git a/src/lib/__tests__/add-edge-modal.test.tsx b/src/lib/__tests__/add-edge-modal.test.tsx new file mode 100644 index 0000000..53ac7e5 --- /dev/null +++ b/src/lib/__tests__/add-edge-modal.test.tsx @@ -0,0 +1,297 @@ +import { describe, it, expect, vi, beforeEach } from "vitest" +import { render, screen, waitFor } from "@testing-library/react" +import userEvent from "@testing-library/user-event" +import React from "react" + +// --------------------------------------------------------------------------- +// Hoisted mocks +// --------------------------------------------------------------------------- + +const { mockCreateEdge } = vi.hoisted(() => ({ + mockCreateEdge: vi.fn().mockResolvedValue({}), +})) + +vi.mock("@/lib/graph-api", () => ({ + createEdge: (...args: unknown[]) => mockCreateEdge(...args), +})) + +vi.mock("@/lib/mock-data", () => ({ + isMocksEnabled: () => false, +})) + +// --------------------------------------------------------------------------- +// Modal store — per-selector mock +// --------------------------------------------------------------------------- +let mockActiveModal: string | null = null +let mockSourceRefId: string | null = null +const mockClose = vi.fn() + +vi.mock("@/stores/modal-store", () => ({ + useModalStore: (sel: (s: Record) => unknown) => + sel({ + activeModal: mockActiveModal, + sourceRefId: mockSourceRefId, + close: mockClose, + }), +})) + +// --------------------------------------------------------------------------- +// Schema store — per-selector mock with sample edges +// --------------------------------------------------------------------------- +const SCHEMA_EDGES = [ + { ref_id: "e1", edge_type: "HAS_TOPIC", from_type: "Person", to_type: "Topic" }, + { ref_id: "e2", edge_type: "AUTHORED_BY", from_type: "Content", to_type: "Person" }, + { ref_id: "e3", edge_type: "HAS_TOPIC", from_type: "Content", to_type: "Topic" }, // duplicate — should dedupe + { ref_id: "e4", edge_type: "CHILD_OF", from_type: "Episode", to_type: "Episode" }, // excluded + { ref_id: "e5", edge_type: "RELATED_TO", from_type: "Person", to_type: "Person" }, +] + +vi.mock("@/stores/schema-store", () => ({ + useSchemaStore: (sel: (s: Record) => unknown) => + sel({ edges: SCHEMA_EDGES }), +})) + +// --------------------------------------------------------------------------- +// Import component after mocks are set up +// --------------------------------------------------------------------------- +import { AddEdgeModal } from "@/components/modals/add-edge-modal" + +// --------------------------------------------------------------------------- +// Helpers +// --------------------------------------------------------------------------- +function openModal(sourceRefId: string | null = null) { + mockActiveModal = "addEdge" + mockSourceRefId = sourceRefId +} + +function closeModal() { + mockActiveModal = null + mockSourceRefId = null +} + +// --------------------------------------------------------------------------- +// Tests +// --------------------------------------------------------------------------- +describe("AddEdgeModal", () => { + beforeEach(() => { + vi.clearAllMocks() + mockCreateEdge.mockResolvedValue({}) + closeModal() + }) + + it("does not render when modal is closed", () => { + closeModal() + render() + expect(screen.queryByText("Add Edge")).toBeNull() + }) + + it("renders when activeModal is 'addEdge'", () => { + openModal() + render() + expect(screen.getByRole("heading", { name: "Add Edge" })).toBeDefined() + }) + + it("renders with empty source and target fields when opened from toolbar (no sourceRefId)", () => { + openModal(null) + render() + const inputs = screen.getAllByRole("textbox") as HTMLInputElement[] + // both source and target start empty + for (const input of inputs) { + expect(input.value).toBe("") + } + }) + + it("pre-fills source ref_id when sourceRefId is set in the modal store", () => { + openModal("node-ref-123") + render() + const sourceInput = screen.getByPlaceholderText("Source node ref_id") as HTMLInputElement + expect(sourceInput.value).toBe("node-ref-123") + }) + + it("target ref_id is always empty on open even when sourceRefId is set", () => { + openModal("node-ref-123") + render() + const targetInput = screen.getByPlaceholderText("Target node ref_id") as HTMLInputElement + expect(targetInput.value).toBe("") + }) + + // ------------------------------------------------------------------------- + // Edge type dropdown + // ------------------------------------------------------------------------- + describe("Edge type dropdown", () => { + it("excludes CHILD_OF from options", async () => { + openModal() + render() + // Open the dropdown + const trigger = screen.getByText("Choose an edge type...").closest("button") as HTMLButtonElement + await userEvent.click(trigger) + expect(screen.queryByText("CHILD_OF")).toBeNull() + }) + + it("shows all unique edge types from schema store (deduped, no CHILD_OF)", async () => { + openModal() + render() + const trigger = screen.getByText("Choose an edge type...").closest("button") as HTMLButtonElement + await userEvent.click(trigger) + expect(screen.getAllByText("HAS_TOPIC").length).toBeGreaterThan(0) // only one option despite duplicate in schema + expect(screen.getAllByText("AUTHORED_BY").length).toBeGreaterThan(0) + expect(screen.getAllByText("RELATED_TO").length).toBeGreaterThan(0) + }) + }) + + // ------------------------------------------------------------------------- + // Validation + // ------------------------------------------------------------------------- + describe("Validation", () => { + it("shows an error when source is empty on submit", async () => { + openModal() + render() + const targetInput = screen.getByPlaceholderText("Target node ref_id") + await userEvent.type(targetInput, "target-ref") + // select edge type + const trigger = screen.getByText("Choose an edge type...").closest("button") as HTMLButtonElement + await userEvent.click(trigger) + await userEvent.click(screen.getByText("HAS_TOPIC")) + // submit without source + await userEvent.click(screen.getByRole("button", { name: /add edge/i })) + expect(screen.getByText("All three fields are required.")).toBeDefined() + expect(mockCreateEdge).not.toHaveBeenCalled() + }) + + it("shows an error when target is empty on submit", async () => { + openModal("source-ref") + render() + // select edge type + const trigger = screen.getByText("Choose an edge type...").closest("button") as HTMLButtonElement + await userEvent.click(trigger) + await userEvent.click(screen.getByText("HAS_TOPIC")) + await userEvent.click(screen.getByRole("button", { name: /add edge/i })) + expect(screen.getByText("All three fields are required.")).toBeDefined() + expect(mockCreateEdge).not.toHaveBeenCalled() + }) + + it("shows an error when edge type is not selected on submit", async () => { + openModal() + render() + await userEvent.type(screen.getByPlaceholderText("Source node ref_id"), "source-ref") + await userEvent.type(screen.getByPlaceholderText("Target node ref_id"), "target-ref") + await userEvent.click(screen.getByRole("button", { name: /add edge/i })) + expect(screen.getByText("All three fields are required.")).toBeDefined() + expect(mockCreateEdge).not.toHaveBeenCalled() + }) + }) + + // ------------------------------------------------------------------------- + // Submission + // ------------------------------------------------------------------------- + describe("Submission", () => { + it("calls createEdge with trimmed values on valid submit", async () => { + openModal() + render() + await userEvent.type(screen.getByPlaceholderText("Source node ref_id"), " source-ref ") + await userEvent.type(screen.getByPlaceholderText("Target node ref_id"), " target-ref ") + const trigger = screen.getByText("Choose an edge type...").closest("button") as HTMLButtonElement + await userEvent.click(trigger) + await userEvent.click(screen.getByText("HAS_TOPIC")) + await userEvent.click(screen.getByRole("button", { name: /add edge/i })) + await waitFor(() => { + expect(mockCreateEdge).toHaveBeenCalledWith({ + source: "source-ref", + target: "target-ref", + edge_type: "HAS_TOPIC", + }) + }) + }) + + it("shows success state after createEdge resolves", async () => { + openModal() + render() + await userEvent.type(screen.getByPlaceholderText("Source node ref_id"), "source-ref") + await userEvent.type(screen.getByPlaceholderText("Target node ref_id"), "target-ref") + const trigger = screen.getByText("Choose an edge type...").closest("button") as HTMLButtonElement + await userEvent.click(trigger) + await userEvent.click(screen.getByText("HAS_TOPIC")) + await userEvent.click(screen.getByRole("button", { name: /add edge/i })) + await waitFor(() => { + expect(screen.getByText("Edge created!")).toBeDefined() + }) + }) + + it("calls close after success auto-close timeout", async () => { + openModal() + render() + await userEvent.type(screen.getByPlaceholderText("Source node ref_id"), "source-ref") + await userEvent.type(screen.getByPlaceholderText("Target node ref_id"), "target-ref") + const trigger = screen.getByText("Choose an edge type...").closest("button") as HTMLButtonElement + await userEvent.click(trigger) + await userEvent.click(screen.getByText("HAS_TOPIC")) + await userEvent.click(screen.getByRole("button", { name: /add edge/i })) + await waitFor(() => expect(mockCreateEdge).toHaveBeenCalled()) + await waitFor(() => expect(mockClose).toHaveBeenCalled(), { timeout: 2500 }) + }) + + it("shows inline error and keeps modal open when createEdge rejects", async () => { + mockCreateEdge.mockRejectedValueOnce(new Error("Duplicate edge")) + openModal() + render() + await userEvent.type(screen.getByPlaceholderText("Source node ref_id"), "source-ref") + await userEvent.type(screen.getByPlaceholderText("Target node ref_id"), "target-ref") + const trigger = screen.getByText("Choose an edge type...").closest("button") as HTMLButtonElement + await userEvent.click(trigger) + await userEvent.click(screen.getByText("HAS_TOPIC")) + await userEvent.click(screen.getByRole("button", { name: /add edge/i })) + await waitFor(() => { + expect(screen.getByText("Duplicate edge")).toBeDefined() + }) + // Modal stays open — title still visible + expect(screen.getByRole("heading", { name: "Add Edge" })).toBeDefined() + expect(mockClose).not.toHaveBeenCalled() + }) + }) + + // ------------------------------------------------------------------------- + // Close / reset + // ------------------------------------------------------------------------- + describe("Close behaviour", () => { + it("calls close() when the dialog is dismissed via onOpenChange", async () => { + openModal() + const { rerender } = render() + // Simulate dialog close (onOpenChange(false)) by changing activeModal + mockActiveModal = null + rerender() + // The dialog is now closed — close was not called by the component + // but the Dialog's onOpenChange path should invoke handleClose + // We test close is callable; full integration tested via button + expect(screen.queryByText("Add Edge")).toBeNull() + }) + + it("resets all field values and clears errors after close and reopen", async () => { + mockCreateEdge.mockRejectedValueOnce(new Error("bad")) + openModal() + const { rerender } = render() + // Fill and submit to trigger error + await userEvent.type(screen.getByPlaceholderText("Source node ref_id"), "s") + await userEvent.type(screen.getByPlaceholderText("Target node ref_id"), "t") + const trigger = screen.getByText("Choose an edge type...").closest("button") as HTMLButtonElement + await userEvent.click(trigger) + await userEvent.click(screen.getByText("HAS_TOPIC")) + await userEvent.click(screen.getByRole("button", { name: /add edge/i })) + await waitFor(() => expect(screen.getByText("bad")).toBeDefined()) + + // Close modal + mockActiveModal = null + mockSourceRefId = null + rerender() + + // Reopen fresh + mockActiveModal = "addEdge" + mockSourceRefId = null + rerender() + + // Fields should be reset + expect((screen.getByPlaceholderText("Source node ref_id") as HTMLInputElement).value).toBe("") + expect((screen.getByPlaceholderText("Target node ref_id") as HTMLInputElement).value).toBe("") + expect(screen.queryByText("bad")).toBeNull() + }) + }) +}) diff --git a/src/stores/modal-store.ts b/src/stores/modal-store.ts index 24c48d6..f9ac4d8 100644 --- a/src/stores/modal-store.ts +++ b/src/stores/modal-store.ts @@ -3,20 +3,24 @@ import { create } from "zustand" import type { GraphNode } from "@/lib/graph-api" -type ModalId = "settings" | "addContent" | "budget" | "addNode" | "editNode" | null +type ModalId = "settings" | "addContent" | "budget" | "addNode" | "editNode" | "addEdge" | null interface ModalState { activeModal: ModalId editingNode: GraphNode | null + sourceRefId: string | null open: (id: ModalId) => void openEdit: (node: GraphNode) => void + openAddEdge: (sourceRefId?: string) => void close: () => void } export const useModalStore = create((set) => ({ activeModal: null, editingNode: null, + sourceRefId: null, open: (activeModal) => set({ activeModal }), openEdit: (node) => set({ activeModal: "editNode", editingNode: node }), - close: () => set({ activeModal: null, editingNode: null }), + openAddEdge: (sourceRefId?: string) => set({ activeModal: "addEdge", sourceRefId: sourceRefId ?? null }), + close: () => set({ activeModal: null, editingNode: null, sourceRefId: null }), }))