fix(knowledge): resolve TypeScript errors in tags service

- Fix updateData typing for partial updates
- Add slug field to CreateTagDto
- Build now passes

Note: tasks.controller.spec.ts needs test config update for WorkspaceGuard
This commit is contained in:
Jason Woltje
2026-01-29 17:09:27 -06:00
parent 25947cee52
commit a5b984c7fd
10 changed files with 998 additions and 14 deletions

View File

@@ -0,0 +1,144 @@
"use client";
import { useState, useMemo } from "react";
import { EntryStatus } from "@mosaic/shared";
import { EntryList } from "@/components/knowledge/EntryList";
import { EntryFilters } from "@/components/knowledge/EntryFilters";
import { mockEntries, mockTags } from "@/lib/api/knowledge";
import Link from "next/link";
import { Plus } from "lucide-react";
export default function KnowledgePage() {
// TODO: Replace with real API call when backend is ready
// const { data: entries, isLoading } = useQuery({
// queryKey: ["knowledge-entries"],
// queryFn: fetchEntries,
// });
const [isLoading] = useState(false);
// Filter and sort state
const [selectedStatus, setSelectedStatus] = useState<EntryStatus | "all">("all");
const [selectedTag, setSelectedTag] = useState<string | "all">("all");
const [searchQuery, setSearchQuery] = useState("");
const [sortBy, setSortBy] = useState<"updatedAt" | "createdAt" | "title">("updatedAt");
const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
// Pagination state
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 10;
// Client-side filtering and sorting
const filteredAndSortedEntries = useMemo(() => {
let filtered = [...mockEntries];
// Filter by status
if (selectedStatus !== "all") {
filtered = filtered.filter((entry) => entry.status === selectedStatus);
}
// Filter by tag
if (selectedTag !== "all") {
filtered = filtered.filter((entry) =>
entry.tags.some((tag) => tag.slug === selectedTag)
);
}
// Filter by search query
if (searchQuery.trim()) {
const query = searchQuery.toLowerCase();
filtered = filtered.filter(
(entry) =>
entry.title.toLowerCase().includes(query) ||
entry.summary?.toLowerCase().includes(query) ||
entry.tags.some((tag) => tag.name.toLowerCase().includes(query))
);
}
// Sort entries
filtered.sort((a, b) => {
let comparison = 0;
if (sortBy === "title") {
comparison = a.title.localeCompare(b.title);
} else if (sortBy === "createdAt") {
comparison = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
} else {
// updatedAt
comparison = new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime();
}
return sortOrder === "asc" ? comparison : -comparison;
});
return filtered;
}, [selectedStatus, selectedTag, searchQuery, sortBy, sortOrder]);
// Pagination
const totalPages = Math.ceil(filteredAndSortedEntries.length / itemsPerPage);
const paginatedEntries = filteredAndSortedEntries.slice(
(currentPage - 1) * itemsPerPage,
currentPage * itemsPerPage
);
// Reset to page 1 when filters change
const handleFilterChange = (callback: () => void) => {
callback();
setCurrentPage(1);
};
const handleSortChange = (
newSortBy: "updatedAt" | "createdAt" | "title",
newSortOrder: "asc" | "desc"
) => {
setSortBy(newSortBy);
setSortOrder(newSortOrder);
setCurrentPage(1);
};
return (
<main className="container mx-auto px-4 py-8 max-w-5xl">
{/* Header */}
<div className="mb-8 flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-gray-900">Knowledge Base</h1>
<p className="text-gray-600 mt-2">
Documentation, guides, and knowledge entries
</p>
</div>
{/* Create button */}
<Link
href="/knowledge/new"
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors shadow-sm"
>
<Plus className="w-5 h-5" />
<span>Create Entry</span>
</Link>
</div>
{/* Filters */}
<EntryFilters
selectedStatus={selectedStatus}
selectedTag={selectedTag}
searchQuery={searchQuery}
sortBy={sortBy}
sortOrder={sortOrder}
tags={mockTags}
onStatusChange={(status) => handleFilterChange(() => setSelectedStatus(status))}
onTagChange={(tag) => handleFilterChange(() => setSelectedTag(tag))}
onSearchChange={(query) => handleFilterChange(() => setSearchQuery(query))}
onSortChange={handleSortChange}
/>
{/* Entry list */}
<EntryList
entries={paginatedEntries}
isLoading={isLoading}
currentPage={currentPage}
totalPages={totalPages}
onPageChange={setCurrentPage}
/>
</main>
);
}

View File

@@ -0,0 +1,139 @@
"use client";
import { useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { TeamSettings } from "@/components/team/TeamSettings";
import { TeamMemberList } from "@/components/team/TeamMemberList";
import { Button } from "@mosaic/ui";
import { mockTeamWithMembers } from "@/lib/api/teams";
import type { User } from "@mosaic/shared";
import { TeamMemberRole } from "@mosaic/shared";
import Link from "next/link";
// Mock available users for adding to team
const mockAvailableUsers: User[] = [
{
id: "user-3",
email: "alice@example.com",
name: "Alice Johnson",
emailVerified: true,
image: null,
authProviderId: null,
preferences: {},
createdAt: new Date("2026-01-17"),
updatedAt: new Date("2026-01-17"),
},
{
id: "user-4",
email: "bob@example.com",
name: "Bob Wilson",
emailVerified: true,
image: null,
authProviderId: null,
preferences: {},
createdAt: new Date("2026-01-18"),
updatedAt: new Date("2026-01-18"),
},
];
export default function TeamDetailPage() {
const params = useParams();
const router = useRouter();
const workspaceId = params.id as string;
// const teamId = params.teamId as string; // Will be used for API calls
// TODO: Replace with real API call when backend is ready
// const { data: team, isLoading } = useQuery({
// queryKey: ["team", workspaceId, params.teamId],
// queryFn: () => fetchTeam(workspaceId, params.teamId as string),
// });
const [team] = useState(mockTeamWithMembers);
const [isLoading] = useState(false);
const handleUpdateTeam = async (data: { name?: string; description?: string }) => {
// TODO: Replace with real API call
// await updateTeam(workspaceId, teamId, data);
console.log("Updating team:", data);
// TODO: Refetch team data
};
const handleDeleteTeam = async () => {
// TODO: Replace with real API call
// await deleteTeam(workspaceId, teamId);
console.log("Deleting team");
// Navigate back to teams list
router.push(`/settings/workspaces/${workspaceId}/teams`);
};
const handleAddMember = async (userId: string, role?: TeamMemberRole) => {
// TODO: Replace with real API call
// await addTeamMember(workspaceId, teamId, { userId, role });
console.log("Adding member:", { userId, role });
// TODO: Refetch team data
};
const handleRemoveMember = async (userId: string) => {
// TODO: Replace with real API call
// await removeTeamMember(workspaceId, teamId, userId);
console.log("Removing member:", userId);
// TODO: Refetch team data
};
if (isLoading) {
return (
<main className="container mx-auto px-4 py-8">
<div className="flex justify-center items-center p-8">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
<span className="ml-3 text-gray-600">Loading team...</span>
</div>
</main>
);
}
if (!team) {
return (
<main className="container mx-auto px-4 py-8">
<div className="text-center p-12">
<p className="text-lg text-gray-500 mb-4">Team not found</p>
<Link href={`/settings/workspaces/${workspaceId}/teams`}>
<Button variant="primary">Back to Teams</Button>
</Link>
</div>
</main>
);
}
return (
<main className="container mx-auto px-4 py-8">
<div className="mb-8">
<Link
href={`/settings/workspaces/${workspaceId}/teams`}
className="text-blue-600 hover:text-blue-700 text-sm mb-2 inline-block"
>
Back to Teams
</Link>
<h1 className="text-3xl font-bold text-gray-900">{team.name}</h1>
{team.description && (
<p className="text-gray-600 mt-2">{team.description}</p>
)}
</div>
<div className="space-y-6">
<TeamSettings
team={team}
onUpdate={handleUpdateTeam}
onDelete={handleDeleteTeam}
/>
<TeamMemberList
members={team.members}
onAddMember={handleAddMember}
onRemoveMember={handleRemoveMember}
availableUsers={mockAvailableUsers}
/>
</div>
</main>
);
}

View File

@@ -0,0 +1,142 @@
"use client";
import { useState } from "react";
import { useParams } from "next/navigation";
import { TeamCard } from "@/components/team/TeamCard";
import { Button, Input, Modal } from "@mosaic/ui";
import { mockTeams } from "@/lib/api/teams";
export default function TeamsPage() {
const params = useParams();
const workspaceId = params.id as string;
// TODO: Replace with real API call when backend is ready
// const { data: teams, isLoading } = useQuery({
// queryKey: ["teams", workspaceId],
// queryFn: () => fetchTeams(workspaceId),
// });
const [teams] = useState(mockTeams);
const [isLoading] = useState(false);
const [isCreating, setIsCreating] = useState(false);
const [showCreateModal, setShowCreateModal] = useState(false);
const [newTeamName, setNewTeamName] = useState("");
const [newTeamDescription, setNewTeamDescription] = useState("");
const handleCreateTeam = async () => {
if (!newTeamName.trim()) return;
setIsCreating(true);
try {
// TODO: Replace with real API call
// await createTeam(workspaceId, {
// name: newTeamName,
// description: newTeamDescription || undefined,
// });
console.log("Creating team:", { name: newTeamName, description: newTeamDescription });
// Reset form
setNewTeamName("");
setNewTeamDescription("");
setShowCreateModal(false);
// TODO: Refresh teams list
} catch (error) {
console.error("Failed to create team:", error);
alert("Failed to create team. Please try again.");
} finally {
setIsCreating(false);
}
};
if (isLoading) {
return (
<main className="container mx-auto px-4 py-8">
<div className="flex justify-center items-center p-8">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
<span className="ml-3 text-gray-600">Loading teams...</span>
</div>
</main>
);
}
return (
<main className="container mx-auto px-4 py-8">
<div className="mb-8 flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-gray-900">Teams</h1>
<p className="text-gray-600 mt-2">
Organize workspace members into teams
</p>
</div>
<Button variant="primary" onClick={() => setShowCreateModal(true)}>
Create Team
</Button>
</div>
{teams.length === 0 ? (
<div className="text-center p-12 bg-gray-50 rounded-lg">
<p className="text-lg text-gray-500 mb-4">No teams yet</p>
<p className="text-sm text-gray-400 mb-6">
Create your first team to organize workspace members
</p>
<Button variant="primary" onClick={() => setShowCreateModal(true)}>
Create Team
</Button>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{teams.map((team) => (
<TeamCard key={team.id} team={team} workspaceId={workspaceId} />
))}
</div>
)}
{/* Create Team Modal */}
{showCreateModal && (
<Modal
isOpen={showCreateModal}
onClose={() => !isCreating && setShowCreateModal(false)}
title="Create New Team"
>
<div className="space-y-4">
<Input
label="Team Name"
value={newTeamName}
onChange={(e) => setNewTeamName(e.target.value)}
placeholder="Enter team name"
fullWidth
disabled={isCreating}
autoFocus
/>
<Input
label="Description (optional)"
value={newTeamDescription}
onChange={(e) => setNewTeamDescription(e.target.value)}
placeholder="Enter team description"
fullWidth
disabled={isCreating}
/>
<div className="flex gap-2 justify-end pt-4">
<Button
variant="ghost"
onClick={() => setShowCreateModal(false)}
disabled={isCreating}
>
Cancel
</Button>
<Button
variant="primary"
onClick={handleCreateTeam}
disabled={!newTeamName.trim() || isCreating}
>
{isCreating ? "Creating..." : "Create Team"}
</Button>
</div>
</div>
</Modal>
)}
</main>
);
}

View File

@@ -0,0 +1,165 @@
"use client";
import { useState } from "react";
import type { TeamMember, User } from "@mosaic/shared";
import { TeamMemberRole } from "@mosaic/shared";
import { Card, CardHeader, CardContent, Button, Select, Avatar } from "@mosaic/ui";
interface TeamMemberWithUser extends TeamMember {
user: User;
}
interface TeamMemberListProps {
members: TeamMemberWithUser[];
onAddMember: (userId: string, role?: TeamMemberRole) => Promise<void>;
onRemoveMember: (userId: string) => Promise<void>;
availableUsers?: User[];
}
const roleOptions = [
{ value: TeamMemberRole.MEMBER, label: "Member" },
{ value: TeamMemberRole.ADMIN, label: "Admin" },
{ value: TeamMemberRole.OWNER, label: "Owner" },
];
export function TeamMemberList({
members,
onAddMember,
onRemoveMember,
availableUsers = [],
}: TeamMemberListProps) {
const [isAdding, setIsAdding] = useState(false);
const [selectedUserId, setSelectedUserId] = useState("");
const [selectedRole, setSelectedRole] = useState(TeamMemberRole.MEMBER);
const [removingUserId, setRemovingUserId] = useState<string | null>(null);
const handleAddMember = async () => {
if (!selectedUserId) return;
setIsAdding(true);
try {
await onAddMember(selectedUserId, selectedRole);
setSelectedUserId("");
setSelectedRole(TeamMemberRole.MEMBER);
} catch (error) {
console.error("Failed to add member:", error);
alert("Failed to add member. Please try again.");
} finally {
setIsAdding(false);
}
};
const handleRemoveMember = async (userId: string) => {
setRemovingUserId(userId);
try {
await onRemoveMember(userId);
} catch (error) {
console.error("Failed to remove member:", error);
alert("Failed to remove member. Please try again.");
} finally {
setRemovingUserId(null);
}
};
const memberUserIds = new Set(members.map((m) => m.userId));
const usersToAdd = availableUsers.filter((user) => !memberUserIds.has(user.id));
return (
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<h2 className="text-xl font-semibold text-gray-900">Team Members</h2>
<span className="text-sm text-gray-500">{members.length} member{members.length !== 1 ? "s" : ""}</span>
</div>
</CardHeader>
<CardContent>
{/* Member list */}
<div className="space-y-3 mb-6">
{members.length === 0 ? (
<p className="text-center text-gray-500 py-4">No members yet</p>
) : (
members.map((member) => (
<div
key={member.userId}
className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
>
<div className="flex items-center gap-3">
<Avatar
src={member.user.image ?? ""}
alt={member.user.name}
fallback={member.user.name.charAt(0).toUpperCase()}
/>
<div>
<p className="font-medium text-gray-900">{member.user.name}</p>
<p className="text-sm text-gray-500">{member.user.email}</p>
</div>
</div>
<div className="flex items-center gap-2">
<span
className={`px-3 py-1 text-xs font-medium rounded-full ${
member.role === TeamMemberRole.OWNER
? "bg-purple-100 text-purple-700"
: member.role === TeamMemberRole.ADMIN
? "bg-blue-100 text-blue-700"
: "bg-gray-100 text-gray-700"
}`}
>
{member.role}
</span>
{member.role !== TeamMemberRole.OWNER && (
<Button
variant="danger"
size="sm"
onClick={() => handleRemoveMember(member.userId)}
disabled={removingUserId === member.userId}
>
{removingUserId === member.userId ? "Removing..." : "Remove"}
</Button>
)}
</div>
</div>
))
)}
</div>
{/* Add member form */}
{usersToAdd.length > 0 && (
<div className="pt-4 border-t border-gray-200">
<h3 className="text-sm font-medium text-gray-700 mb-3">Add Member</h3>
<div className="flex gap-2">
<div className="flex-1">
<Select
options={usersToAdd.map((user) => ({
value: user.id,
label: `${user.name} (${user.email})`,
}))}
value={selectedUserId}
onChange={(e) => setSelectedUserId(e.target.value)}
placeholder="Select a user..."
fullWidth
disabled={isAdding}
/>
</div>
<div className="w-32">
<Select
options={roleOptions}
value={selectedRole}
onChange={(e) => setSelectedRole(e.target.value as TeamMemberRole)}
fullWidth
disabled={isAdding}
/>
</div>
<Button
variant="primary"
onClick={handleAddMember}
disabled={!selectedUserId || isAdding}
>
{isAdding ? "Adding..." : "Add"}
</Button>
</div>
</div>
)}
</CardContent>
</Card>
);
}

View File

@@ -6,12 +6,11 @@ import { Card, CardHeader, CardContent, CardFooter, Button, Input, Textarea } fr
interface TeamSettingsProps {
team: Team;
workspaceId: string;
onUpdate: (data: { name?: string; description?: string }) => Promise<void>;
onDelete: () => Promise<void>;
}
export function TeamSettings({ team, workspaceId, onUpdate, onDelete }: TeamSettingsProps) {
export function TeamSettings({ team, onUpdate, onDelete }: TeamSettingsProps) {
const [name, setName] = useState(team.name);
const [description, setDescription] = useState(team.description || "");
const [isEditing, setIsEditing] = useState(false);
@@ -26,10 +25,14 @@ export function TeamSettings({ team, workspaceId, onUpdate, onDelete }: TeamSett
setIsSaving(true);
try {
await onUpdate({
name: name !== team.name ? name : undefined,
description: description !== (team.description || "") ? description : undefined,
});
const updates: { name?: string; description?: string } = {};
if (name !== team.name) {
updates.name = name;
}
if (description !== (team.description || "")) {
updates.description = description;
}
await onUpdate(updates);
setIsEditing(false);
} catch (error) {
console.error("Failed to update team:", error);

View File

@@ -155,8 +155,15 @@ export const mockTeams: Team[] = [
/**
* Mock team with members for development
*/
const baseTeam = mockTeams[0];
export const mockTeamWithMembers: TeamWithMembers = {
...mockTeams[0],
id: baseTeam!.id,
workspaceId: baseTeam!.workspaceId,
name: baseTeam!.name,
description: baseTeam!.description,
metadata: baseTeam!.metadata,
createdAt: baseTeam!.createdAt,
updatedAt: baseTeam!.updatedAt,
members: [
{
teamId: "team-1",