Compare commits
1 Commits
fix/ci-lin
...
fix/contro
| Author | SHA1 | Date | |
|---|---|---|---|
| 853f0da10d |
@@ -111,9 +111,14 @@ export class CsrfGuard implements CanActivate {
|
||||
|
||||
throw new ForbiddenException("CSRF token not bound to session");
|
||||
}
|
||||
} else {
|
||||
this.logger.debug({
|
||||
event: "CSRF_SKIP_SESSION_BINDING",
|
||||
method: request.method,
|
||||
path: request.path,
|
||||
reason: "User context not yet available (global guard runs before AuthGuard)",
|
||||
});
|
||||
}
|
||||
// Note: when userId is absent, the double-submit cookie check above is
|
||||
// sufficient CSRF protection. AuthGuard populates request.user afterward.
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@ import {
|
||||
ChevronUp,
|
||||
ChevronDown,
|
||||
} from "lucide-react";
|
||||
import type { KnowledgeEntryWithTags, KnowledgeTag } from "@mosaic/shared";
|
||||
import type { KnowledgeEntryWithTags } from "@mosaic/shared";
|
||||
import { EntryStatus, Visibility } from "@mosaic/shared";
|
||||
|
||||
import { MosaicSpinner } from "@/components/ui/MosaicSpinner";
|
||||
@@ -25,7 +25,7 @@ import {
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import { fetchEntries, createEntry, deleteEntry, fetchTags } from "@/lib/api/knowledge";
|
||||
import { fetchEntries, createEntry, deleteEntry } from "@/lib/api/knowledge";
|
||||
import type { EntriesResponse, CreateEntryData, EntryFilters } from "@/lib/api/knowledge";
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
@@ -421,26 +421,6 @@ function CreateEntryDialog({
|
||||
const [visibility, setVisibility] = useState<Visibility>(Visibility.PRIVATE);
|
||||
const [formError, setFormError] = useState<string | null>(null);
|
||||
|
||||
// Tag state
|
||||
const [selectedTags, setSelectedTags] = useState<string[]>([]);
|
||||
const [tagInput, setTagInput] = useState("");
|
||||
const [availableTags, setAvailableTags] = useState<KnowledgeTag[]>([]);
|
||||
const [showSuggestions, setShowSuggestions] = useState(false);
|
||||
const tagInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Load available tags when dialog opens
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
fetchTags()
|
||||
.then((tags) => {
|
||||
setAvailableTags(tags);
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
console.error("Failed to load tags:", err);
|
||||
});
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
function resetForm(): void {
|
||||
setTitle("");
|
||||
setContent("");
|
||||
@@ -448,9 +428,6 @@ function CreateEntryDialog({
|
||||
setStatus(EntryStatus.DRAFT);
|
||||
setVisibility(Visibility.PRIVATE);
|
||||
setFormError(null);
|
||||
setSelectedTags([]);
|
||||
setTagInput("");
|
||||
setShowSuggestions(false);
|
||||
}
|
||||
|
||||
async function handleSubmit(e: SyntheticEvent): Promise<void> {
|
||||
@@ -475,7 +452,6 @@ function CreateEntryDialog({
|
||||
content: trimmedContent,
|
||||
status,
|
||||
visibility,
|
||||
tags: selectedTags,
|
||||
};
|
||||
const trimmedSummary = summary.trim();
|
||||
if (trimmedSummary) {
|
||||
@@ -634,212 +610,6 @@ function CreateEntryDialog({
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<label
|
||||
htmlFor="entry-tags"
|
||||
style={{
|
||||
display: "block",
|
||||
marginBottom: 6,
|
||||
fontSize: "0.85rem",
|
||||
fontWeight: 500,
|
||||
color: "var(--text-2)",
|
||||
}}
|
||||
>
|
||||
Tags
|
||||
</label>
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
minHeight: 38,
|
||||
padding: "6px 8px",
|
||||
background: "var(--bg)",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "var(--r)",
|
||||
boxSizing: "border-box",
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
gap: 4,
|
||||
alignItems: "center",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
{/* Selected tag chips */}
|
||||
{selectedTags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
gap: 4,
|
||||
padding: "2px 8px",
|
||||
background: "var(--surface-2)",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "var(--r-sm)",
|
||||
fontSize: "0.75rem",
|
||||
color: "var(--text)",
|
||||
}}
|
||||
>
|
||||
{tag}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSelectedTags((prev) => prev.filter((t) => t !== tag));
|
||||
}}
|
||||
style={{
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
padding: 0,
|
||||
cursor: "pointer",
|
||||
color: "var(--muted)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
lineHeight: 1,
|
||||
}}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
{/* Tag text input */}
|
||||
<input
|
||||
ref={tagInputRef}
|
||||
id="entry-tags"
|
||||
type="text"
|
||||
value={tagInput}
|
||||
onChange={(e) => {
|
||||
setTagInput(e.target.value);
|
||||
setShowSuggestions(e.target.value.length > 0);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === ",") {
|
||||
e.preventDefault();
|
||||
const trimmed = tagInput.trim();
|
||||
if (trimmed && !selectedTags.includes(trimmed)) {
|
||||
setSelectedTags((prev) => [...prev, trimmed]);
|
||||
setTagInput("");
|
||||
}
|
||||
}
|
||||
if (e.key === "Backspace" && tagInput === "" && selectedTags.length > 0) {
|
||||
setSelectedTags((prev) => prev.slice(0, -1));
|
||||
}
|
||||
}}
|
||||
onBlur={() => {
|
||||
// Delay to allow click on suggestion
|
||||
setTimeout(() => {
|
||||
setShowSuggestions(false);
|
||||
}, 150);
|
||||
}}
|
||||
onFocus={() => {
|
||||
if (tagInput.length > 0) setShowSuggestions(true);
|
||||
}}
|
||||
placeholder={selectedTags.length === 0 ? "Add tags..." : ""}
|
||||
style={{
|
||||
flex: 1,
|
||||
minWidth: 80,
|
||||
border: "none",
|
||||
background: "transparent",
|
||||
color: "var(--text)",
|
||||
fontSize: "0.85rem",
|
||||
outline: "none",
|
||||
padding: "2px 0",
|
||||
}}
|
||||
/>
|
||||
{/* Autocomplete suggestions */}
|
||||
{showSuggestions && (
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "100%",
|
||||
left: 0,
|
||||
right: 0,
|
||||
marginTop: 4,
|
||||
background: "var(--surface)",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "var(--r)",
|
||||
boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
|
||||
maxHeight: 150,
|
||||
overflowY: "auto",
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
{availableTags
|
||||
.filter(
|
||||
(t) =>
|
||||
t.name.toLowerCase().includes(tagInput.toLowerCase()) &&
|
||||
!selectedTags.includes(t.name)
|
||||
)
|
||||
.slice(0, 5)
|
||||
.map((tag) => (
|
||||
<button
|
||||
key={tag.id}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (!selectedTags.includes(tag.name)) {
|
||||
setSelectedTags((prev) => [...prev, tag.name]);
|
||||
}
|
||||
setTagInput("");
|
||||
setShowSuggestions(false);
|
||||
tagInputRef.current?.focus();
|
||||
}}
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "8px 12px",
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
textAlign: "left",
|
||||
cursor: "pointer",
|
||||
color: "var(--text)",
|
||||
fontSize: "0.85rem",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = "var(--surface-2)";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = "transparent";
|
||||
}}
|
||||
>
|
||||
{tag.name}
|
||||
</button>
|
||||
))}
|
||||
{availableTags.filter(
|
||||
(t) =>
|
||||
t.name.toLowerCase().includes(tagInput.toLowerCase()) &&
|
||||
!selectedTags.includes(t.name)
|
||||
).length === 0 &&
|
||||
tagInput.trim() &&
|
||||
!selectedTags.includes(tagInput.trim()) && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const trimmed = tagInput.trim();
|
||||
if (trimmed && !selectedTags.includes(trimmed)) {
|
||||
setSelectedTags((prev) => [...prev, trimmed]);
|
||||
}
|
||||
setTagInput("");
|
||||
setShowSuggestions(false);
|
||||
tagInputRef.current?.focus();
|
||||
}}
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "8px 12px",
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
textAlign: "left",
|
||||
cursor: "pointer",
|
||||
color: "var(--muted)",
|
||||
fontSize: "0.85rem",
|
||||
fontStyle: "italic",
|
||||
}}
|
||||
>
|
||||
Create "{tagInput.trim()}"
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status + Visibility row */}
|
||||
<div style={{ display: "flex", gap: 16, marginBottom: 16 }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
|
||||
@@ -1,188 +0,0 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import { render, screen, waitFor } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import type { Task } from "@mosaic/shared";
|
||||
import { TaskPriority, TaskStatus } from "@mosaic/shared";
|
||||
import KanbanPage from "./page";
|
||||
|
||||
const mockReplace = vi.fn();
|
||||
let mockSearchParams = new URLSearchParams();
|
||||
|
||||
vi.mock("next/navigation", () => ({
|
||||
useRouter: (): { replace: typeof mockReplace } => ({ replace: mockReplace }),
|
||||
useSearchParams: (): URLSearchParams => mockSearchParams,
|
||||
}));
|
||||
|
||||
vi.mock("@hello-pangea/dnd", () => ({
|
||||
DragDropContext: ({ children }: { children: React.ReactNode }): React.JSX.Element => (
|
||||
<div data-testid="mock-dnd-context">{children}</div>
|
||||
),
|
||||
Droppable: ({
|
||||
children,
|
||||
droppableId,
|
||||
}: {
|
||||
children: (provided: {
|
||||
innerRef: (el: HTMLElement | null) => void;
|
||||
droppableProps: Record<string, never>;
|
||||
placeholder: React.ReactNode;
|
||||
}) => React.ReactNode;
|
||||
droppableId: string;
|
||||
}): React.JSX.Element => (
|
||||
<div data-testid={`mock-droppable-${droppableId}`}>
|
||||
{children({
|
||||
innerRef: () => {
|
||||
/* noop */
|
||||
},
|
||||
droppableProps: {},
|
||||
placeholder: null,
|
||||
})}
|
||||
</div>
|
||||
),
|
||||
Draggable: ({
|
||||
children,
|
||||
draggableId,
|
||||
}: {
|
||||
children: (
|
||||
provided: {
|
||||
innerRef: (el: HTMLElement | null) => void;
|
||||
draggableProps: { style: Record<string, string> };
|
||||
dragHandleProps: Record<string, string>;
|
||||
},
|
||||
snapshot: { isDragging: boolean }
|
||||
) => React.ReactNode;
|
||||
draggableId: string;
|
||||
index: number;
|
||||
}): React.JSX.Element => (
|
||||
<div data-testid={`mock-draggable-${draggableId}`}>
|
||||
{children(
|
||||
{
|
||||
innerRef: () => {
|
||||
/* noop */
|
||||
},
|
||||
draggableProps: { style: {} },
|
||||
dragHandleProps: {},
|
||||
},
|
||||
{ isDragging: false }
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock("@/components/ui/MosaicSpinner", () => ({
|
||||
MosaicSpinner: ({ label }: { label?: string }): React.JSX.Element => (
|
||||
<div data-testid="mosaic-spinner">{label ?? "Loading..."}</div>
|
||||
),
|
||||
}));
|
||||
|
||||
const mockUseWorkspaceId = vi.fn<() => string | null>();
|
||||
vi.mock("@/lib/hooks", () => ({
|
||||
useWorkspaceId: (): string | null => mockUseWorkspaceId(),
|
||||
}));
|
||||
|
||||
const mockFetchTasks = vi.fn<() => Promise<Task[]>>();
|
||||
const mockUpdateTask = vi.fn<() => Promise<unknown>>();
|
||||
const mockCreateTask = vi.fn<() => Promise<Task>>();
|
||||
vi.mock("@/lib/api/tasks", () => ({
|
||||
fetchTasks: (...args: unknown[]): Promise<Task[]> => mockFetchTasks(...(args as [])),
|
||||
updateTask: (...args: unknown[]): Promise<unknown> => mockUpdateTask(...(args as [])),
|
||||
createTask: (...args: unknown[]): Promise<Task> => mockCreateTask(...(args as [])),
|
||||
}));
|
||||
|
||||
const mockFetchProjects = vi.fn<() => Promise<unknown[]>>();
|
||||
vi.mock("@/lib/api/projects", () => ({
|
||||
fetchProjects: (...args: unknown[]): Promise<unknown[]> => mockFetchProjects(...(args as [])),
|
||||
}));
|
||||
|
||||
const createdTask: Task = {
|
||||
id: "task-new-1",
|
||||
title: "Ship Kanban add task flow",
|
||||
description: null,
|
||||
status: TaskStatus.NOT_STARTED,
|
||||
priority: TaskPriority.MEDIUM,
|
||||
dueDate: null,
|
||||
creatorId: "user-1",
|
||||
assigneeId: null,
|
||||
workspaceId: "ws-1",
|
||||
projectId: "project-42",
|
||||
parentId: null,
|
||||
sortOrder: 0,
|
||||
metadata: {},
|
||||
completedAt: null,
|
||||
createdAt: new Date("2026-03-01"),
|
||||
updatedAt: new Date("2026-03-01"),
|
||||
};
|
||||
|
||||
describe("KanbanPage add task flow", (): void => {
|
||||
beforeEach((): void => {
|
||||
vi.clearAllMocks();
|
||||
mockSearchParams = new URLSearchParams("project=project-42");
|
||||
mockUseWorkspaceId.mockReturnValue("ws-1");
|
||||
mockFetchTasks.mockResolvedValue([]);
|
||||
mockFetchProjects.mockResolvedValue([]);
|
||||
mockCreateTask.mockResolvedValue(createdTask);
|
||||
});
|
||||
|
||||
it("opens add-task form in a column and creates a task via API", async (): Promise<void> => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(<KanbanPage />);
|
||||
|
||||
await waitFor((): void => {
|
||||
expect(screen.getByText("Kanban Board")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// Click the "+ Add task" button in the To Do column
|
||||
const addTaskButtons = screen.getAllByRole("button", { name: /\+ Add task/i });
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
await user.click(addTaskButtons[0]!); // First column is "To Do"
|
||||
|
||||
// Type in the title input
|
||||
const titleInput = screen.getByPlaceholderText("Task title...");
|
||||
await user.type(titleInput, createdTask.title);
|
||||
|
||||
// Click the Add button
|
||||
await user.click(screen.getByRole("button", { name: /✓ Add/i }));
|
||||
|
||||
await waitFor((): void => {
|
||||
expect(mockCreateTask).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
title: createdTask.title,
|
||||
status: TaskStatus.NOT_STARTED,
|
||||
projectId: "project-42",
|
||||
}),
|
||||
"ws-1"
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
it("cancels add-task form when pressing Escape", async (): Promise<void> => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(<KanbanPage />);
|
||||
|
||||
await waitFor((): void => {
|
||||
expect(screen.getByText("Kanban Board")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// Click the "+ Add task" button
|
||||
const addTaskButtons = screen.getAllByRole("button", { name: /\+ Add task/i });
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
await user.click(addTaskButtons[0]!);
|
||||
|
||||
// Type in the title input
|
||||
const titleInput = screen.getByPlaceholderText("Task title...");
|
||||
await user.type(titleInput, "Test task");
|
||||
|
||||
// Press Escape to cancel
|
||||
await user.keyboard("{Escape}");
|
||||
|
||||
// Form should be closed, back to "+ Add task" button
|
||||
await waitFor((): void => {
|
||||
const buttons = screen.getAllByRole("button", { name: /\+ Add task/i });
|
||||
expect(buttons.length).toBe(5); // One per column
|
||||
});
|
||||
|
||||
// Should not have called createTask
|
||||
expect(mockCreateTask).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user