Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 jason.woltje
|
988e17c8f1 |
@@ -24,15 +24,7 @@ describe("AdminService", () => {
|
||||
workspaceMember: {
|
||||
create: vi.fn(),
|
||||
},
|
||||
session: {
|
||||
deleteMany: vi.fn(),
|
||||
},
|
||||
$transaction: vi.fn(async (ops) => {
|
||||
if (typeof ops === "function") {
|
||||
return ops(mockPrismaService);
|
||||
}
|
||||
return Promise.all(ops);
|
||||
}),
|
||||
$transaction: vi.fn(),
|
||||
};
|
||||
|
||||
const mockAdminId = "550e8400-e29b-41d4-a716-446655440001";
|
||||
@@ -90,6 +82,10 @@ describe("AdminService", () => {
|
||||
service = module.get<AdminService>(AdminService);
|
||||
|
||||
vi.clearAllMocks();
|
||||
|
||||
mockPrismaService.$transaction.mockImplementation(async (fn: (tx: unknown) => unknown) => {
|
||||
return fn(mockPrismaService);
|
||||
});
|
||||
});
|
||||
|
||||
it("should be defined", () => {
|
||||
@@ -329,13 +325,12 @@ describe("AdminService", () => {
|
||||
});
|
||||
|
||||
describe("deactivateUser", () => {
|
||||
it("should set deactivatedAt and invalidate sessions", async () => {
|
||||
it("should set deactivatedAt on the user", async () => {
|
||||
mockPrismaService.user.findUnique.mockResolvedValue(mockUser);
|
||||
mockPrismaService.user.update.mockResolvedValue({
|
||||
...mockUser,
|
||||
deactivatedAt: new Date(),
|
||||
});
|
||||
mockPrismaService.session.deleteMany.mockResolvedValue({ count: 3 });
|
||||
|
||||
const result = await service.deactivateUser(mockUserId);
|
||||
|
||||
@@ -346,7 +341,6 @@ describe("AdminService", () => {
|
||||
data: { deactivatedAt: expect.any(Date) },
|
||||
})
|
||||
);
|
||||
expect(mockPrismaService.session.deleteMany).toHaveBeenCalledWith({ where: { userId: mockUserId } });
|
||||
});
|
||||
|
||||
it("should throw NotFoundException if user does not exist", async () => {
|
||||
|
||||
@@ -192,22 +192,19 @@ export class AdminService {
|
||||
throw new BadRequestException(`User ${id} is already deactivated`);
|
||||
}
|
||||
|
||||
const [user] = await this.prisma.$transaction([
|
||||
this.prisma.user.update({
|
||||
where: { id },
|
||||
data: { deactivatedAt: new Date() },
|
||||
include: {
|
||||
workspaceMemberships: {
|
||||
include: {
|
||||
workspace: { select: { id: true, name: true } },
|
||||
},
|
||||
const user = await this.prisma.user.update({
|
||||
where: { id },
|
||||
data: { deactivatedAt: new Date() },
|
||||
include: {
|
||||
workspaceMemberships: {
|
||||
include: {
|
||||
workspace: { select: { id: true, name: true } },
|
||||
},
|
||||
},
|
||||
}),
|
||||
this.prisma.session.deleteMany({ where: { userId: id } }),
|
||||
]);
|
||||
},
|
||||
});
|
||||
|
||||
this.logger.log(`User deactivated and sessions invalidated: ${id}`);
|
||||
this.logger.log(`User deactivated: ${id}`);
|
||||
|
||||
return {
|
||||
id: user.id,
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useState } from "react";
|
||||
import type { ReactElement, ReactNode } from "react";
|
||||
import { WorkspaceMemberRole } from "@mosaic/shared";
|
||||
import { useAuth } from "@/lib/auth/auth-context";
|
||||
import { fetchUserWorkspaces } from "@/lib/api/workspaces";
|
||||
import Link from "next/link";
|
||||
|
||||
interface CategoryConfig {
|
||||
@@ -14,7 +11,6 @@ interface CategoryConfig {
|
||||
accent: string;
|
||||
iconBg: string;
|
||||
icon: ReactNode;
|
||||
adminOnly?: boolean;
|
||||
}
|
||||
|
||||
interface SettingsCategoryCardProps {
|
||||
@@ -204,7 +200,6 @@ const categories: CategoryConfig[] = [
|
||||
title: "Users",
|
||||
description: "Invite, manage roles, and deactivate users across your workspaces.",
|
||||
href: "/settings/users",
|
||||
adminOnly: true,
|
||||
accent: "var(--ms-green-400)",
|
||||
iconBg: "rgba(34, 197, 94, 0.12)",
|
||||
icon: (
|
||||
@@ -226,31 +221,6 @@ const categories: CategoryConfig[] = [
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Teams",
|
||||
description: "Create and manage teams within your active workspace.",
|
||||
href: "/settings/teams",
|
||||
accent: "var(--ms-blue-400)",
|
||||
iconBg: "rgba(47, 128, 255, 0.12)",
|
||||
icon: (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle cx="7" cy="7" r="2.25" />
|
||||
<circle cx="13" cy="7" r="2.25" />
|
||||
<path d="M3 15c0-2.2 1.8-4 4-4s4 1.8 4 4" />
|
||||
<path d="M9 15c0-2.2 1.8-4 4-4s4 1.8 4 4" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Workspaces",
|
||||
description:
|
||||
@@ -282,30 +252,7 @@ const categories: CategoryConfig[] = [
|
||||
},
|
||||
];
|
||||
|
||||
const ADMIN_ROLES: WorkspaceMemberRole[] = [WorkspaceMemberRole.OWNER, WorkspaceMemberRole.ADMIN];
|
||||
|
||||
export default function SettingsPage(): ReactElement {
|
||||
const { user } = useAuth();
|
||||
const [isAdmin, setIsAdmin] = useState<boolean>(false);
|
||||
|
||||
const checkRole = useCallback(async (): Promise<void> => {
|
||||
if (user === null) return;
|
||||
try {
|
||||
const workspaces = await fetchUserWorkspaces();
|
||||
const hasAdminRole = workspaces.some((ws) => ADMIN_ROLES.includes(ws.role));
|
||||
setIsAdmin(hasAdminRole);
|
||||
} catch {
|
||||
// Fail open — show all items if we can't determine role
|
||||
setIsAdmin(true);
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
useEffect(() => {
|
||||
void checkRole();
|
||||
}, [checkRole]);
|
||||
|
||||
const visibleCategories = categories.filter((c) => c.adminOnly !== true || isAdmin);
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto p-6">
|
||||
{/* Page header */}
|
||||
@@ -333,7 +280,7 @@ export default function SettingsPage(): ReactElement {
|
||||
|
||||
{/* Category grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{visibleCategories.map((category) => (
|
||||
{categories.map((category) => (
|
||||
<SettingsCategoryCard key={category.href} category={category} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,76 +0,0 @@
|
||||
import type { ReactElement, ReactNode } from "react";
|
||||
import type { TeamRecord } from "@/lib/api/teams";
|
||||
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { fetchTeams } from "@/lib/api/teams";
|
||||
|
||||
import TeamsSettingsPage from "./page";
|
||||
|
||||
vi.mock("next/link", () => ({
|
||||
default: function LinkMock({
|
||||
children,
|
||||
href,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
href: string;
|
||||
}): ReactElement {
|
||||
return <a href={href}>{children}</a>;
|
||||
},
|
||||
}));
|
||||
|
||||
vi.mock("@/lib/api/teams", () => ({
|
||||
fetchTeams: vi.fn(),
|
||||
createTeam: vi.fn(),
|
||||
}));
|
||||
|
||||
const fetchTeamsMock = vi.mocked(fetchTeams);
|
||||
|
||||
const baseTeam: TeamRecord = {
|
||||
id: "team-1",
|
||||
workspaceId: "workspace-1",
|
||||
name: "Platform Team",
|
||||
description: "Owns platform services",
|
||||
metadata: {},
|
||||
createdAt: "2026-02-01T00:00:00.000Z",
|
||||
updatedAt: "2026-02-01T00:00:00.000Z",
|
||||
_count: {
|
||||
members: 3,
|
||||
},
|
||||
};
|
||||
|
||||
describe("TeamsSettingsPage", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it("loads and renders teams from the API", async () => {
|
||||
fetchTeamsMock.mockResolvedValue([baseTeam]);
|
||||
|
||||
render(<TeamsSettingsPage />);
|
||||
|
||||
expect(screen.getByText("Loading teams...")).toBeInTheDocument();
|
||||
|
||||
expect(await screen.findByText("Your Teams (1)")).toBeInTheDocument();
|
||||
expect(screen.getByText("Platform Team")).toBeInTheDocument();
|
||||
expect(fetchTeamsMock).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("shows empty state when the API returns no teams", async () => {
|
||||
fetchTeamsMock.mockResolvedValue([]);
|
||||
|
||||
render(<TeamsSettingsPage />);
|
||||
|
||||
expect(await screen.findByText("Your Teams (0)")).toBeInTheDocument();
|
||||
expect(screen.getByText("No teams yet")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows error state and does not show empty state", async () => {
|
||||
fetchTeamsMock.mockRejectedValue(new Error("Unable to load teams"));
|
||||
|
||||
render(<TeamsSettingsPage />);
|
||||
|
||||
expect(await screen.findByText("Unable to load teams")).toBeInTheDocument();
|
||||
expect(screen.queryByText("No teams yet")).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -1,244 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import type { ReactElement, SyntheticEvent } from "react";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { createTeam, fetchTeams, type CreateTeamDto, type TeamRecord } from "@/lib/api/teams";
|
||||
|
||||
function getErrorMessage(error: unknown, fallback: string): string {
|
||||
if (error instanceof Error) {
|
||||
return error.message;
|
||||
}
|
||||
|
||||
return fallback;
|
||||
}
|
||||
|
||||
export default function TeamsSettingsPage(): ReactElement {
|
||||
const [teams, setTeams] = useState<TeamRecord[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const [newTeamName, setNewTeamName] = useState("");
|
||||
const [newTeamDescription, setNewTeamDescription] = useState("");
|
||||
const [createError, setCreateError] = useState<string | null>(null);
|
||||
|
||||
const loadTeams = useCallback(async (): Promise<void> => {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const data = await fetchTeams();
|
||||
setTeams(data);
|
||||
setLoadError(null);
|
||||
} catch (error) {
|
||||
setLoadError(getErrorMessage(error, "Failed to load teams"));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void loadTeams();
|
||||
}, [loadTeams]);
|
||||
|
||||
const handleCreateTeam = async (e: SyntheticEvent<HTMLFormElement>): Promise<void> => {
|
||||
e.preventDefault();
|
||||
|
||||
const teamName = newTeamName.trim();
|
||||
if (!teamName) return;
|
||||
|
||||
setIsCreating(true);
|
||||
setCreateError(null);
|
||||
|
||||
try {
|
||||
const description = newTeamDescription.trim();
|
||||
const dto: CreateTeamDto = { name: teamName };
|
||||
if (description.length > 0) {
|
||||
dto.description = description;
|
||||
}
|
||||
|
||||
await createTeam(dto);
|
||||
setNewTeamName("");
|
||||
setNewTeamDescription("");
|
||||
setIsCreateDialogOpen(false);
|
||||
await loadTeams();
|
||||
} catch (error) {
|
||||
setCreateError(getErrorMessage(error, "Failed to create team"));
|
||||
} finally {
|
||||
setIsCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="container mx-auto px-4 py-8 max-w-5xl">
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h1 className="text-3xl font-bold text-gray-900">Teams</h1>
|
||||
<Link href="/settings" className="text-sm text-blue-600 hover:text-blue-700">
|
||||
{"<-"} Back to Settings
|
||||
</Link>
|
||||
</div>
|
||||
<p className="text-gray-600">Manage teams in your active workspace</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-gray-900">Create New Team</h2>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
Add a team to organize members and permissions.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setCreateError(null);
|
||||
setIsCreateDialogOpen(true);
|
||||
}}
|
||||
className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium"
|
||||
>
|
||||
Create Team
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isCreateDialogOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4"
|
||||
role="dialog"
|
||||
>
|
||||
<div className="w-full max-w-lg rounded-lg border border-gray-200 bg-white p-6 shadow-xl">
|
||||
<h3 className="text-lg font-semibold text-gray-900">Create New Team</h3>
|
||||
<p className="mt-1 text-sm text-gray-600">
|
||||
Enter a team name and optional description.
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleCreateTeam} className="mt-4 space-y-4">
|
||||
<div>
|
||||
<label htmlFor="team-name" className="mb-1 block text-sm font-medium text-gray-700">
|
||||
Team Name
|
||||
</label>
|
||||
<input
|
||||
id="team-name"
|
||||
type="text"
|
||||
value={newTeamName}
|
||||
onChange={(e) => {
|
||||
setNewTeamName(e.target.value);
|
||||
}}
|
||||
placeholder="Enter team name..."
|
||||
disabled={isCreating}
|
||||
className="w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="team-description"
|
||||
className="mb-1 block text-sm font-medium text-gray-700"
|
||||
>
|
||||
Description (optional)
|
||||
</label>
|
||||
<textarea
|
||||
id="team-description"
|
||||
value={newTeamDescription}
|
||||
onChange={(e) => {
|
||||
setNewTeamDescription(e.target.value);
|
||||
}}
|
||||
placeholder="Describe this team's purpose..."
|
||||
disabled={isCreating}
|
||||
rows={3}
|
||||
className="w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-transparent focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{createError !== null && (
|
||||
<div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
|
||||
{createError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (!isCreating) {
|
||||
setIsCreateDialogOpen(false);
|
||||
}
|
||||
}}
|
||||
disabled={isCreating}
|
||||
className="px-4 py-2 rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isCreating || !newTeamName.trim()}
|
||||
className="px-5 py-2 rounded-lg bg-blue-600 text-white font-medium hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{isCreating ? "Creating..." : "Create Team"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-xl font-semibold text-gray-900">
|
||||
Your Teams ({isLoading ? "..." : teams.length})
|
||||
</h2>
|
||||
{loadError !== null ? (
|
||||
<div className="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-red-700">
|
||||
{loadError}
|
||||
</div>
|
||||
) : isLoading ? (
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-12 text-center text-gray-600">
|
||||
Loading teams...
|
||||
</div>
|
||||
) : teams.length === 0 ? (
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-12 text-center">
|
||||
<svg
|
||||
className="mx-auto h-12 w-12 text-gray-400 mb-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M17 20h5V8H2v12h5m10 0v-4a3 3 0 10-6 0v4m6 0H7"
|
||||
/>
|
||||
</svg>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">No teams yet</h3>
|
||||
<p className="text-gray-600">Create your first team to get started</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{teams.map((team) => (
|
||||
<article
|
||||
key={team.id}
|
||||
className="rounded-lg border border-gray-200 bg-white p-5 shadow-sm"
|
||||
data-testid="team-card"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-gray-900">{team.name}</h3>
|
||||
{team.description ? (
|
||||
<p className="mt-1 text-sm text-gray-600">{team.description}</p>
|
||||
) : (
|
||||
<p className="mt-1 text-sm text-gray-400 italic">No description</p>
|
||||
)}
|
||||
<div className="mt-4 flex items-center gap-3 text-xs text-gray-500">
|
||||
<span>{team._count?.members ?? 0} members</span>
|
||||
<span>|</span>
|
||||
<span>Created {new Date(team.createdAt).toLocaleDateString()}</span>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
type SyntheticEvent,
|
||||
} from "react";
|
||||
import Link from "next/link";
|
||||
import { Pencil, UserPlus, UserX } from "lucide-react";
|
||||
import { UserPlus, UserX } from "lucide-react";
|
||||
import { WorkspaceMemberRole } from "@mosaic/shared";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
@@ -42,16 +42,13 @@ import {
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { fetchUserWorkspaces } from "@/lib/api/workspaces";
|
||||
import {
|
||||
deactivateUser,
|
||||
fetchAdminUsers,
|
||||
inviteUser,
|
||||
updateUser,
|
||||
type AdminUser,
|
||||
type AdminUsersResponse,
|
||||
type InviteUserDto,
|
||||
type UpdateUserDto,
|
||||
} from "@/lib/api/admin";
|
||||
|
||||
const ROLE_PRIORITY: Record<WorkspaceMemberRole, number> = {
|
||||
@@ -101,13 +98,6 @@ export default function UsersSettingsPage(): ReactElement {
|
||||
const [deactivateTarget, setDeactivateTarget] = useState<AdminUser | null>(null);
|
||||
const [isDeactivating, setIsDeactivating] = useState<boolean>(false);
|
||||
|
||||
const [editTarget, setEditTarget] = useState<AdminUser | null>(null);
|
||||
const [editName, setEditName] = useState<string>("");
|
||||
const [editError, setEditError] = useState<string | null>(null);
|
||||
const [isEditing, setIsEditing] = useState<boolean>(false);
|
||||
|
||||
const [isAdmin, setIsAdmin] = useState<boolean | null>(null);
|
||||
|
||||
const loadUsers = useCallback(async (showLoadingState: boolean): Promise<void> => {
|
||||
try {
|
||||
if (showLoadingState) {
|
||||
@@ -132,20 +122,6 @@ export default function UsersSettingsPage(): ReactElement {
|
||||
void loadUsers(true);
|
||||
}, [loadUsers]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchUserWorkspaces()
|
||||
.then((workspaces) => {
|
||||
const adminRoles: WorkspaceMemberRole[] = [
|
||||
WorkspaceMemberRole.OWNER,
|
||||
WorkspaceMemberRole.ADMIN,
|
||||
];
|
||||
setIsAdmin(workspaces.some((ws) => adminRoles.includes(ws.role)));
|
||||
})
|
||||
.catch(() => {
|
||||
setIsAdmin(true); // fail open
|
||||
});
|
||||
}, []);
|
||||
|
||||
function resetInviteForm(): void {
|
||||
setInviteForm(INITIAL_INVITE_FORM);
|
||||
setInviteError(null);
|
||||
@@ -212,34 +188,6 @@ export default function UsersSettingsPage(): ReactElement {
|
||||
}
|
||||
}
|
||||
|
||||
async function handleEditSubmit(): Promise<void> {
|
||||
if (editTarget === null) return;
|
||||
setIsEditing(true);
|
||||
setEditError(null);
|
||||
try {
|
||||
const dto: UpdateUserDto = {};
|
||||
if (editName.trim()) dto.name = editName.trim();
|
||||
await updateUser(editTarget.id, dto);
|
||||
setEditTarget(null);
|
||||
await loadUsers(false);
|
||||
} catch (err: unknown) {
|
||||
setEditError(err instanceof Error ? err.message : "Failed to update user");
|
||||
} finally {
|
||||
setIsEditing(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (isAdmin === false) {
|
||||
return (
|
||||
<div className="p-8 max-w-2xl">
|
||||
<div className="rounded-lg border border-red-200 bg-red-50 p-6 text-center">
|
||||
<p className="text-lg font-semibold text-red-700">Access Denied</p>
|
||||
<p className="mt-2 text-sm text-red-600">You need Admin or Owner role to manage users.</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto p-6 space-y-6">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
@@ -433,18 +381,6 @@ export default function UsersSettingsPage(): ReactElement {
|
||||
<Badge variant={isActive ? "secondary" : "destructive"}>
|
||||
{isActive ? "Active" : "Inactive"}
|
||||
</Badge>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setEditTarget(user);
|
||||
setEditName(user.name);
|
||||
setEditError(null);
|
||||
}}
|
||||
>
|
||||
<Pencil className="h-4 w-4 mr-2" />
|
||||
Edit Role
|
||||
</Button>
|
||||
{isActive ? (
|
||||
<Button
|
||||
variant="destructive"
|
||||
@@ -496,55 +432,4 @@ export default function UsersSettingsPage(): ReactElement {
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
|
||||
<Dialog
|
||||
open={editTarget !== null}
|
||||
onOpenChange={(open) => {
|
||||
if (!open && !isEditing) {
|
||||
setEditTarget(null);
|
||||
setEditError(null);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit User Role</DialogTitle>
|
||||
<DialogDescription>Change role for {editTarget?.email ?? "user"}.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-2">
|
||||
{editError !== null ? <p className="text-sm text-destructive">{editError}</p> : null}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-name">Display Name</Label>
|
||||
<Input
|
||||
id="edit-name"
|
||||
value={editName}
|
||||
onChange={(e: ChangeEvent<HTMLInputElement>) => {
|
||||
setEditName(e.target.value);
|
||||
}}
|
||||
placeholder="Full name"
|
||||
disabled={isEditing}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setEditTarget(null);
|
||||
}}
|
||||
disabled={isEditing}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
void handleEditSubmit();
|
||||
}}
|
||||
disabled={isEditing}
|
||||
>
|
||||
{isEditing ? "Saving..." : "Save"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>;
|
||||
}
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import { render, screen, waitFor } from "@testing-library/react";
|
||||
import WorkspaceDetailPage from "./page";
|
||||
import * as workspacesApi from "@/lib/api/workspaces";
|
||||
|
||||
vi.mock("next/navigation", () => ({
|
||||
useParams: (): { id: string } => ({ id: "ws-test-1" }),
|
||||
}));
|
||||
|
||||
vi.mock("@/lib/auth/auth-context", () => ({
|
||||
useAuth: (): { user: { id: string } } => ({ user: { id: "u1" } }),
|
||||
}));
|
||||
|
||||
vi.mock("@/lib/api/workspaces");
|
||||
|
||||
vi.mock("@/components/workspace/MemberList", () => ({
|
||||
MemberList: ({ members }: { members: unknown[] }): React.ReactElement => (
|
||||
<div data-testid="member-list">Members: {members.length}</div>
|
||||
),
|
||||
}));
|
||||
|
||||
const mockWorkspace = {
|
||||
id: "ws-test-1",
|
||||
name: "Test Workspace",
|
||||
ownerId: "u1",
|
||||
role: "OWNER",
|
||||
createdAt: "2024-01-01",
|
||||
};
|
||||
|
||||
const mockMembers = [
|
||||
{
|
||||
workspaceId: "ws-test-1",
|
||||
userId: "u1",
|
||||
role: "OWNER",
|
||||
joinedAt: "2024-01-01",
|
||||
user: { id: "u1", email: "[email protected]", name: "Alice", image: null },
|
||||
},
|
||||
];
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe("WorkspaceDetailPage", () => {
|
||||
it("loads and renders member list", async (): Promise<void> => {
|
||||
vi.mocked(workspacesApi.fetchUserWorkspaces).mockResolvedValue([mockWorkspace] as never);
|
||||
vi.mocked(workspacesApi.fetchWorkspaceMembers).mockResolvedValue(mockMembers as never);
|
||||
render(<WorkspaceDetailPage />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId("member-list")).toBeInTheDocument();
|
||||
});
|
||||
expect(screen.getByText("Test Workspace")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows error state on fetch failure, not member list", async (): Promise<void> => {
|
||||
vi.mocked(workspacesApi.fetchUserWorkspaces).mockRejectedValue(new Error("Network error"));
|
||||
vi.mocked(workspacesApi.fetchWorkspaceMembers).mockRejectedValue(new Error("Network error"));
|
||||
render(<WorkspaceDetailPage />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole("alert")).toBeInTheDocument();
|
||||
});
|
||||
expect(screen.queryByTestId("member-list")).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -1,38 +1,42 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { WorkspaceSettings } from "@/components/workspace/WorkspaceSettings";
|
||||
import { MemberList } from "@/components/workspace/MemberList";
|
||||
import { useAuth } from "@/lib/auth/auth-context";
|
||||
import { InviteMember } from "@/components/workspace/InviteMember";
|
||||
import { WorkspaceMemberRole } from "@mosaic/shared";
|
||||
import {
|
||||
fetchWorkspaceMembers,
|
||||
fetchUserWorkspaces,
|
||||
updateWorkspaceMemberRole,
|
||||
removeWorkspaceMember,
|
||||
type WorkspaceMemberEntry,
|
||||
type UserWorkspace,
|
||||
} from "@/lib/api/workspaces";
|
||||
import type { WorkspaceMemberWithUser } from "@/components/workspace/MemberList";
|
||||
import type { Workspace, WorkspaceMemberWithUser } from "@mosaic/shared";
|
||||
import Link from "next/link";
|
||||
|
||||
function getErrorMessage(error: unknown, fallback: string): string {
|
||||
if (error instanceof Error) return error.message;
|
||||
return fallback;
|
||||
interface WorkspaceDetailPageProps {
|
||||
params: {
|
||||
id: string;
|
||||
};
|
||||
}
|
||||
|
||||
function toMemberWithUser(m: WorkspaceMemberEntry): WorkspaceMemberWithUser {
|
||||
return {
|
||||
workspaceId: m.workspaceId,
|
||||
userId: m.userId,
|
||||
role: m.role,
|
||||
joinedAt: new Date(m.joinedAt),
|
||||
// Mock data - TODO: Replace with real API calls
|
||||
const mockWorkspace: Workspace = {
|
||||
id: "ws-1",
|
||||
name: "Personal Workspace",
|
||||
ownerId: "user-1",
|
||||
settings: {},
|
||||
createdAt: new Date("2024-01-15"),
|
||||
updatedAt: new Date("2024-01-15"),
|
||||
};
|
||||
|
||||
const mockMembers: WorkspaceMemberWithUser[] = [
|
||||
{
|
||||
workspaceId: "ws-1",
|
||||
userId: "user-1",
|
||||
role: WorkspaceMemberRole.OWNER,
|
||||
joinedAt: new Date("2024-01-15"),
|
||||
user: {
|
||||
id: m.user.id,
|
||||
email: m.user.email,
|
||||
name: m.user.name ?? "",
|
||||
image: m.user.image,
|
||||
id: "user-1",
|
||||
email: "[email protected]",
|
||||
name: "John Doe",
|
||||
emailVerified: true,
|
||||
image: null,
|
||||
authProviderId: null,
|
||||
preferences: {},
|
||||
deactivatedAt: null,
|
||||
@@ -41,108 +45,152 @@ function toMemberWithUser(m: WorkspaceMemberEntry): WorkspaceMemberWithUser {
|
||||
invitedBy: null,
|
||||
invitationToken: null,
|
||||
invitedAt: null,
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
createdAt: new Date("2024-01-15"),
|
||||
updatedAt: new Date("2024-01-15"),
|
||||
},
|
||||
},
|
||||
{
|
||||
workspaceId: "ws-1",
|
||||
userId: "user-2",
|
||||
role: WorkspaceMemberRole.ADMIN,
|
||||
joinedAt: new Date("2024-01-16"),
|
||||
user: {
|
||||
id: "user-2",
|
||||
email: "[email protected]",
|
||||
name: "Jane Smith",
|
||||
emailVerified: true,
|
||||
image: null,
|
||||
authProviderId: null,
|
||||
preferences: {},
|
||||
deactivatedAt: null,
|
||||
isLocalAuth: false,
|
||||
passwordHash: null,
|
||||
invitedBy: null,
|
||||
invitationToken: null,
|
||||
invitedAt: null,
|
||||
createdAt: new Date("2024-01-16"),
|
||||
updatedAt: new Date("2024-01-16"),
|
||||
},
|
||||
},
|
||||
{
|
||||
workspaceId: "ws-1",
|
||||
userId: "user-3",
|
||||
role: WorkspaceMemberRole.MEMBER,
|
||||
joinedAt: new Date("2024-01-17"),
|
||||
user: {
|
||||
id: "user-3",
|
||||
email: "[email protected]",
|
||||
name: "Bob Johnson",
|
||||
emailVerified: true,
|
||||
image: null,
|
||||
authProviderId: null,
|
||||
preferences: {},
|
||||
deactivatedAt: null,
|
||||
isLocalAuth: false,
|
||||
passwordHash: null,
|
||||
invitedBy: null,
|
||||
invitationToken: null,
|
||||
invitedAt: null,
|
||||
createdAt: new Date("2024-01-17"),
|
||||
updatedAt: new Date("2024-01-17"),
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export default function WorkspaceDetailPage({
|
||||
params,
|
||||
}: WorkspaceDetailPageProps): React.JSX.Element {
|
||||
const router = useRouter();
|
||||
const [workspace, setWorkspace] = useState<Workspace>(mockWorkspace);
|
||||
const [members, setMembers] = useState<WorkspaceMemberWithUser[]>(mockMembers);
|
||||
const currentUserId = "user-1"; // TODO: Get from auth context
|
||||
const currentUserRole: WorkspaceMemberRole = WorkspaceMemberRole.OWNER; // TODO: Get from API
|
||||
|
||||
// TODO: Replace with actual role check when API is implemented
|
||||
// Currently hardcoded to OWNER in mock data (line 89)
|
||||
const canInvite =
|
||||
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
||||
currentUserRole === WorkspaceMemberRole.OWNER || currentUserRole === WorkspaceMemberRole.ADMIN;
|
||||
|
||||
const handleUpdateWorkspace = async (name: string): Promise<void> => {
|
||||
// TODO: Replace with real API call
|
||||
console.log("Updating workspace:", { id: params.id, name });
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
setWorkspace({ ...workspace, name, updatedAt: new Date() });
|
||||
};
|
||||
}
|
||||
|
||||
export default function WorkspaceDetailPage(): React.ReactElement {
|
||||
const params = useParams<{ id: string }>();
|
||||
const workspaceId = params.id;
|
||||
const { user: authUser } = useAuth();
|
||||
const handleDeleteWorkspace = async (): Promise<void> => {
|
||||
// TODO: Replace with real API call
|
||||
console.log("Deleting workspace:", params.id);
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
router.push("/settings/workspaces");
|
||||
};
|
||||
|
||||
const [workspace, setWorkspace] = useState<UserWorkspace | null>(null);
|
||||
const [members, setMembers] = useState<WorkspaceMemberEntry[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const load = useCallback(async (): Promise<void> => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const [workspaces, memberList] = await Promise.all([
|
||||
fetchUserWorkspaces(),
|
||||
fetchWorkspaceMembers(workspaceId),
|
||||
]);
|
||||
const ws = workspaces.find((w) => w.id === workspaceId) ?? null;
|
||||
setWorkspace(ws);
|
||||
setMembers(memberList);
|
||||
} catch (err) {
|
||||
setError(getErrorMessage(err, "Failed to load workspace"));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [workspaceId]);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
const handleRoleChange = useCallback(
|
||||
async (userId: string, newRole: WorkspaceMemberRole): Promise<void> => {
|
||||
await updateWorkspaceMemberRole(workspaceId, userId, { role: newRole });
|
||||
await load();
|
||||
},
|
||||
[workspaceId, load]
|
||||
);
|
||||
|
||||
const handleRemove = useCallback(
|
||||
async (userId: string): Promise<void> => {
|
||||
await removeWorkspaceMember(workspaceId, userId);
|
||||
await load();
|
||||
},
|
||||
[workspaceId, load]
|
||||
);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="p-8 text-center text-gray-500" role="status" aria-label="Loading workspace">
|
||||
Loading workspace…
|
||||
</div>
|
||||
const handleRoleChange = async (userId: string, newRole: WorkspaceMemberRole): Promise<void> => {
|
||||
// TODO: Replace with real API call
|
||||
console.log("Changing role:", { userId, newRole });
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
setMembers(
|
||||
members.map((member) => (member.userId === userId ? { ...member, role: newRole } : member))
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="p-8">
|
||||
<div className="rounded-lg border border-red-200 bg-red-50 p-4 text-red-700" role="alert">
|
||||
<p className="font-medium">Failed to load workspace</p>
|
||||
<p className="mt-1 text-sm">Please try again later.</p>
|
||||
</div>
|
||||
<Link
|
||||
href="/settings/workspaces"
|
||||
className="mt-4 inline-block text-sm text-blue-600 hover:underline"
|
||||
>
|
||||
← Back to Workspaces
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const handleRemoveMember = async (userId: string): Promise<void> => {
|
||||
// TODO: Replace with real API call
|
||||
console.log("Removing member:", userId);
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
setMembers(members.filter((member) => member.userId !== userId));
|
||||
};
|
||||
|
||||
const currentUserId = authUser?.id ?? "";
|
||||
const currentMember = members.find((m) => m.userId === currentUserId);
|
||||
const currentUserRole = currentMember?.role ?? workspace?.role ?? WorkspaceMemberRole.MEMBER;
|
||||
const ownerId =
|
||||
members.find((m) => m.role === WorkspaceMemberRole.OWNER)?.userId ?? workspace?.ownerId ?? "";
|
||||
const handleInviteMember = async (email: string, role: WorkspaceMemberRole): Promise<void> => {
|
||||
// TODO: Replace with real API call
|
||||
console.log("Inviting member:", { email, role, workspaceId: params.id });
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
// In real implementation, this would send an invitation email
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="p-8 max-w-3xl">
|
||||
<div className="mb-6">
|
||||
<Link href="/settings/workspaces" className="text-sm text-gray-500 hover:text-gray-700">
|
||||
← Back to Workspaces
|
||||
</Link>
|
||||
<h1 className="mt-2 text-2xl font-bold text-gray-900">{workspace?.name ?? "Workspace"}</h1>
|
||||
<main className="container mx-auto px-4 py-8 max-w-5xl">
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h1 className="text-3xl font-bold text-gray-900">{workspace.name}</h1>
|
||||
<Link href="/settings/workspaces" className="text-sm text-blue-600 hover:text-blue-700">
|
||||
← Back to Workspaces
|
||||
</Link>
|
||||
</div>
|
||||
<p className="text-gray-600">Manage workspace settings and team members</p>
|
||||
</div>
|
||||
|
||||
<MemberList
|
||||
members={members.map(toMemberWithUser)}
|
||||
currentUserId={currentUserId}
|
||||
currentUserRole={currentUserRole}
|
||||
workspaceOwnerId={ownerId}
|
||||
onRoleChange={handleRoleChange}
|
||||
onRemove={handleRemove}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
{/* Workspace Settings */}
|
||||
<WorkspaceSettings
|
||||
workspace={workspace}
|
||||
userRole={currentUserRole}
|
||||
onUpdate={handleUpdateWorkspace}
|
||||
onDelete={handleDeleteWorkspace}
|
||||
/>
|
||||
|
||||
{/* Members Section */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div className="lg:col-span-2">
|
||||
<MemberList
|
||||
members={members}
|
||||
currentUserId={currentUserId}
|
||||
currentUserRole={currentUserRole}
|
||||
workspaceOwnerId={workspace.ownerId}
|
||||
onRoleChange={handleRoleChange}
|
||||
onRemove={handleRemoveMember}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Invite Member */}
|
||||
{canInvite && (
|
||||
<div className="lg:col-span-2">
|
||||
<InviteMember onInvite={handleInviteMember} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,135 +1,60 @@
|
||||
import type { UserWorkspace } from "@/lib/api/workspaces";
|
||||
import type { ReactElement, ReactNode } from "react";
|
||||
/**
|
||||
* Workspaces Page Tests
|
||||
* Tests for page structure and component integration
|
||||
*/
|
||||
|
||||
import { WorkspaceMemberRole } from "@mosaic/shared";
|
||||
import { render, screen, waitFor } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { createWorkspace, fetchUserWorkspaces } from "@/lib/api/workspaces";
|
||||
|
||||
import WorkspacesPage from "./page";
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
|
||||
// Mock next/link
|
||||
vi.mock("next/link", () => ({
|
||||
default: function LinkMock({
|
||||
children,
|
||||
href,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
href: string;
|
||||
}): ReactElement {
|
||||
return <a href={href}>{children}</a>;
|
||||
},
|
||||
default: ({ children, href }: { children: React.ReactNode; href: string }): React.JSX.Element => (
|
||||
<a href={href}>{children}</a>
|
||||
),
|
||||
}));
|
||||
|
||||
// Mock the WorkspaceCard component
|
||||
vi.mock("@/components/workspace/WorkspaceCard", () => ({
|
||||
WorkspaceCard: function WorkspaceCardMock({
|
||||
workspace,
|
||||
userRole,
|
||||
memberCount,
|
||||
}: {
|
||||
workspace: { name: string };
|
||||
userRole: WorkspaceMemberRole;
|
||||
memberCount: number;
|
||||
}): ReactElement {
|
||||
return (
|
||||
<div data-testid="workspace-card">
|
||||
{workspace.name} | {userRole} | {String(memberCount)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
WorkspaceCard: (): React.JSX.Element => <div data-testid="workspace-card">WorkspaceCard</div>,
|
||||
}));
|
||||
|
||||
vi.mock("@/lib/api/workspaces", () => ({
|
||||
fetchUserWorkspaces: vi.fn(),
|
||||
createWorkspace: vi.fn(),
|
||||
}));
|
||||
|
||||
const fetchUserWorkspacesMock = vi.mocked(fetchUserWorkspaces);
|
||||
const createWorkspaceMock = vi.mocked(createWorkspace);
|
||||
|
||||
const baseWorkspace: UserWorkspace = {
|
||||
id: "workspace-1",
|
||||
name: "Personal Workspace",
|
||||
ownerId: "owner-1",
|
||||
role: WorkspaceMemberRole.OWNER,
|
||||
createdAt: "2026-01-01T00:00:00.000Z",
|
||||
};
|
||||
|
||||
describe("WorkspacesPage", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it("loads and renders user workspaces from the API", async () => {
|
||||
fetchUserWorkspacesMock.mockResolvedValue([baseWorkspace]);
|
||||
describe("WorkspacesPage", (): void => {
|
||||
// Note: NODE_ENV is "test" during test runs, which triggers the Coming Soon view
|
||||
// This tests the production-like behavior where mock data is hidden
|
||||
|
||||
it("should render the Coming Soon view in non-development environments", async (): Promise<void> => {
|
||||
const { default: WorkspacesPage } = await import("./page");
|
||||
render(<WorkspacesPage />);
|
||||
|
||||
expect(screen.getByText("Loading workspaces...")).toBeInTheDocument();
|
||||
|
||||
expect(await screen.findByText("Your Workspaces (1)")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("workspace-card")).toHaveTextContent("Personal Workspace");
|
||||
expect(fetchUserWorkspacesMock).toHaveBeenCalledTimes(1);
|
||||
// In test mode (non-development), should show Coming Soon
|
||||
expect(screen.getByText("Coming Soon")).toBeInTheDocument();
|
||||
expect(screen.getByText("Workspace Management")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows fetch errors in the UI", async () => {
|
||||
fetchUserWorkspacesMock.mockRejectedValue(new Error("Unable to load workspaces"));
|
||||
|
||||
it("should display appropriate description for workspace feature", async (): Promise<void> => {
|
||||
const { default: WorkspacesPage } = await import("./page");
|
||||
render(<WorkspacesPage />);
|
||||
|
||||
expect(await screen.findByText("Unable to load workspaces")).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText(/create and manage workspaces to organize your projects/i)
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("creates a workspace and refreshes the list", async () => {
|
||||
fetchUserWorkspacesMock.mockResolvedValueOnce([baseWorkspace]).mockResolvedValueOnce([
|
||||
baseWorkspace,
|
||||
{
|
||||
...baseWorkspace,
|
||||
id: "workspace-2",
|
||||
name: "New Workspace",
|
||||
role: WorkspaceMemberRole.MEMBER,
|
||||
},
|
||||
]);
|
||||
createWorkspaceMock.mockResolvedValue({
|
||||
id: "workspace-2",
|
||||
name: "New Workspace",
|
||||
ownerId: "owner-1",
|
||||
settings: {},
|
||||
createdAt: "2026-01-02T00:00:00.000Z",
|
||||
updatedAt: "2026-01-02T00:00:00.000Z",
|
||||
memberCount: 1,
|
||||
});
|
||||
|
||||
const user = userEvent.setup();
|
||||
it("should not render mock workspace data in Coming Soon view", async (): Promise<void> => {
|
||||
const { default: WorkspacesPage } = await import("./page");
|
||||
render(<WorkspacesPage />);
|
||||
|
||||
expect(await screen.findByText("Your Workspaces (1)")).toBeInTheDocument();
|
||||
|
||||
await user.type(screen.getByPlaceholderText("Enter workspace name..."), "New Workspace");
|
||||
await user.click(screen.getByRole("button", { name: "Create Workspace" }));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(createWorkspaceMock).toHaveBeenCalledWith({ name: "New Workspace" });
|
||||
});
|
||||
await waitFor(() => {
|
||||
expect(fetchUserWorkspacesMock).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
expect(await screen.findByText("Your Workspaces (2)")).toBeInTheDocument();
|
||||
// Should not show workspace cards or create form in non-development mode
|
||||
expect(screen.queryByTestId("workspace-card")).not.toBeInTheDocument();
|
||||
expect(screen.queryByText("Create New Workspace")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows create errors in the UI", async () => {
|
||||
fetchUserWorkspacesMock.mockResolvedValue([baseWorkspace]);
|
||||
createWorkspaceMock.mockRejectedValue(new Error("Workspace creation failed"));
|
||||
|
||||
const user = userEvent.setup();
|
||||
it("should include link back to settings", async (): Promise<void> => {
|
||||
const { default: WorkspacesPage } = await import("./page");
|
||||
render(<WorkspacesPage />);
|
||||
|
||||
expect(await screen.findByText("Your Workspaces (1)")).toBeInTheDocument();
|
||||
|
||||
await user.type(screen.getByPlaceholderText("Enter workspace name..."), "Bad Workspace");
|
||||
await user.click(screen.getByRole("button", { name: "Create Workspace" }));
|
||||
|
||||
expect(await screen.findByText("Workspace creation failed")).toBeInTheDocument();
|
||||
const link = screen.getByRole("link", { name: /back to settings/i });
|
||||
expect(link).toBeInTheDocument();
|
||||
expect(link).toHaveAttribute("href", "/settings");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,74 +1,72 @@
|
||||
"use client";
|
||||
|
||||
import type { ReactElement, SyntheticEvent } from "react";
|
||||
import type { ReactElement } from "react";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useState } from "react";
|
||||
import { WorkspaceCard } from "@/components/workspace/WorkspaceCard";
|
||||
import { createWorkspace, fetchUserWorkspaces, type UserWorkspace } from "@/lib/api/workspaces";
|
||||
import { ComingSoon } from "@/components/ui/ComingSoon";
|
||||
import { WorkspaceMemberRole } from "@mosaic/shared";
|
||||
import Link from "next/link";
|
||||
|
||||
function getErrorMessage(error: unknown, fallback: string): string {
|
||||
if (error instanceof Error) {
|
||||
return error.message;
|
||||
}
|
||||
// Check if we're in development mode
|
||||
const isDevelopment = process.env.NODE_ENV === "development";
|
||||
|
||||
return fallback;
|
||||
}
|
||||
// Mock data - TODO: Replace with real API calls (development only)
|
||||
const mockWorkspaces = [
|
||||
{
|
||||
id: "ws-1",
|
||||
name: "Personal Workspace",
|
||||
ownerId: "user-1",
|
||||
settings: {},
|
||||
createdAt: new Date("2024-01-15"),
|
||||
updatedAt: new Date("2024-01-15"),
|
||||
},
|
||||
{
|
||||
id: "ws-2",
|
||||
name: "Team Alpha",
|
||||
ownerId: "user-2",
|
||||
settings: {},
|
||||
createdAt: new Date("2024-01-20"),
|
||||
updatedAt: new Date("2024-01-20"),
|
||||
},
|
||||
];
|
||||
|
||||
const mockMemberships = [
|
||||
{ workspaceId: "ws-1", role: WorkspaceMemberRole.OWNER, memberCount: 1 },
|
||||
{ workspaceId: "ws-2", role: WorkspaceMemberRole.MEMBER, memberCount: 5 },
|
||||
];
|
||||
|
||||
/**
|
||||
* Workspaces Page
|
||||
* Fetches and creates workspaces through the real API.
|
||||
* Workspaces Page Content - Development Only
|
||||
* Shows mock workspace data for development purposes
|
||||
*/
|
||||
export default function WorkspacesPage(): ReactElement {
|
||||
const [workspaces, setWorkspaces] = useState<UserWorkspace[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
function WorkspacesPageContent(): ReactElement {
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const [newWorkspaceName, setNewWorkspaceName] = useState("");
|
||||
const [createError, setCreateError] = useState<string | null>(null);
|
||||
|
||||
const loadWorkspaces = useCallback(async (): Promise<void> => {
|
||||
setIsLoading(true);
|
||||
// TODO: Replace with real API call
|
||||
const workspacesWithRoles = mockWorkspaces.map((workspace) => {
|
||||
const membership = mockMemberships.find((m) => m.workspaceId === workspace.id);
|
||||
return {
|
||||
...workspace,
|
||||
userRole: membership?.role ?? WorkspaceMemberRole.GUEST,
|
||||
memberCount: membership?.memberCount ?? 0,
|
||||
};
|
||||
});
|
||||
|
||||
try {
|
||||
const data = await fetchUserWorkspaces();
|
||||
setWorkspaces(data);
|
||||
setLoadError(null);
|
||||
} catch (error) {
|
||||
setLoadError(getErrorMessage(error, "Failed to load workspaces"));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void loadWorkspaces();
|
||||
}, [loadWorkspaces]);
|
||||
|
||||
const workspacesWithRoles = workspaces.map((workspace) => ({
|
||||
...workspace,
|
||||
settings: {},
|
||||
createdAt: new Date(workspace.createdAt),
|
||||
updatedAt: new Date(workspace.createdAt),
|
||||
userRole: workspace.role,
|
||||
memberCount: 1,
|
||||
}));
|
||||
|
||||
const handleCreateWorkspace = async (e: SyntheticEvent<HTMLFormElement>): Promise<void> => {
|
||||
const handleCreateWorkspace = async (e: React.SyntheticEvent<HTMLFormElement>): Promise<void> => {
|
||||
e.preventDefault();
|
||||
|
||||
const workspaceName = newWorkspaceName.trim();
|
||||
if (!workspaceName) return;
|
||||
if (!newWorkspaceName.trim()) return;
|
||||
|
||||
setIsCreating(true);
|
||||
setCreateError(null);
|
||||
|
||||
try {
|
||||
await createWorkspace({ name: workspaceName });
|
||||
// TODO: Replace with real API call
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate API call
|
||||
alert(`Workspace "${newWorkspaceName}" created successfully!`);
|
||||
setNewWorkspaceName("");
|
||||
await loadWorkspaces();
|
||||
} catch (error) {
|
||||
setCreateError(getErrorMessage(error, "Failed to create workspace"));
|
||||
} catch (_error) {
|
||||
console.error("Failed to create workspace:", _error);
|
||||
alert("Failed to create workspace");
|
||||
} finally {
|
||||
setIsCreating(false);
|
||||
}
|
||||
@@ -108,27 +106,14 @@ export default function WorkspacesPage(): ReactElement {
|
||||
{isCreating ? "Creating..." : "Create Workspace"}
|
||||
</button>
|
||||
</form>
|
||||
{createError !== null && (
|
||||
<div className="mt-3 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
|
||||
{createError}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Workspace List */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-xl font-semibold text-gray-900">
|
||||
Your Workspaces ({isLoading ? "..." : workspacesWithRoles.length})
|
||||
Your Workspaces ({workspacesWithRoles.length})
|
||||
</h2>
|
||||
{loadError !== null ? (
|
||||
<div className="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-red-700">
|
||||
{loadError}
|
||||
</div>
|
||||
) : isLoading ? (
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-12 text-center text-gray-600">
|
||||
Loading workspaces...
|
||||
</div>
|
||||
) : workspacesWithRoles.length === 0 ? (
|
||||
{workspacesWithRoles.length === 0 ? (
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-12 text-center">
|
||||
<svg
|
||||
className="mx-auto h-12 w-12 text-gray-400 mb-4"
|
||||
@@ -162,3 +147,26 @@ export default function WorkspacesPage(): ReactElement {
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Workspaces Page Entry Point
|
||||
* Shows development content or Coming Soon based on environment
|
||||
*/
|
||||
export default function WorkspacesPage(): ReactElement {
|
||||
// In production, show Coming Soon placeholder
|
||||
if (!isDevelopment) {
|
||||
return (
|
||||
<ComingSoon
|
||||
feature="Workspace Management"
|
||||
description="Create and manage workspaces to organize your projects and collaborate with your team. This feature is currently under development."
|
||||
>
|
||||
<Link href="/settings" className="text-sm text-blue-600 hover:text-blue-700">
|
||||
Back to Settings
|
||||
</Link>
|
||||
</ComingSoon>
|
||||
);
|
||||
}
|
||||
|
||||
// In development, show the full page with mock data
|
||||
return <WorkspacesPageContent />;
|
||||
}
|
||||
|
||||
@@ -2,25 +2,136 @@
|
||||
|
||||
import type { ReactElement } from "react";
|
||||
|
||||
import { useParams } from "next/navigation";
|
||||
import { ComingSoon } from "@/components/ui/ComingSoon";
|
||||
import { useState } from "react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { TeamSettings } from "@/components/team/TeamSettings";
|
||||
import { TeamMemberList } from "@/components/team/TeamMemberList";
|
||||
import { mockTeamWithMembers } from "@/lib/api/teams";
|
||||
import type { User } from "@mosaic/shared";
|
||||
import type { TeamMemberRole } from "@mosaic/shared";
|
||||
import Link from "next/link";
|
||||
|
||||
// Mock available users for adding to team
|
||||
const mockAvailableUsers: User[] = [
|
||||
{
|
||||
id: "user-3",
|
||||
email: "[email protected]",
|
||||
name: "Alice Johnson",
|
||||
emailVerified: true,
|
||||
image: null,
|
||||
authProviderId: null,
|
||||
preferences: {},
|
||||
deactivatedAt: null,
|
||||
isLocalAuth: false,
|
||||
passwordHash: null,
|
||||
invitedBy: null,
|
||||
invitationToken: null,
|
||||
invitedAt: null,
|
||||
createdAt: new Date("2026-01-17"),
|
||||
updatedAt: new Date("2026-01-17"),
|
||||
},
|
||||
{
|
||||
id: "user-4",
|
||||
email: "[email protected]",
|
||||
name: "Bob Wilson",
|
||||
emailVerified: true,
|
||||
image: null,
|
||||
authProviderId: null,
|
||||
preferences: {},
|
||||
deactivatedAt: null,
|
||||
isLocalAuth: false,
|
||||
passwordHash: null,
|
||||
invitedBy: null,
|
||||
invitationToken: null,
|
||||
invitedAt: null,
|
||||
createdAt: new Date("2026-01-18"),
|
||||
updatedAt: new Date("2026-01-18"),
|
||||
},
|
||||
];
|
||||
|
||||
export default function TeamDetailPage(): ReactElement {
|
||||
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 = (data: { name?: string; description?: string }): Promise<void> => {
|
||||
// TODO: Replace with real API call
|
||||
// await updateTeam(workspaceId, teamId, data);
|
||||
console.log("Updating team:", data);
|
||||
// TODO: Refetch team data
|
||||
return Promise.resolve();
|
||||
};
|
||||
|
||||
const handleDeleteTeam = (): Promise<void> => {
|
||||
// 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`);
|
||||
return Promise.resolve();
|
||||
};
|
||||
|
||||
const handleAddMember = (userId: string, role?: TeamMemberRole): Promise<void> => {
|
||||
// TODO: Replace with real API call
|
||||
// await addTeamMember(workspaceId, teamId, { userId, role });
|
||||
console.log("Adding member:", { userId, role });
|
||||
// TODO: Refetch team data
|
||||
return Promise.resolve();
|
||||
};
|
||||
|
||||
const handleRemoveMember = (userId: string): Promise<void> => {
|
||||
// TODO: Replace with real API call
|
||||
// await removeTeamMember(workspaceId, teamId, userId);
|
||||
console.log("Removing member:", userId);
|
||||
// TODO: Refetch team data
|
||||
return Promise.resolve();
|
||||
};
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ComingSoon
|
||||
feature="Team Details"
|
||||
description="Team member management is being migrated to live API-backed data."
|
||||
>
|
||||
<Link
|
||||
href={`/settings/workspaces/${workspaceId}/teams`}
|
||||
className="text-sm text-blue-600 hover:text-blue-700"
|
||||
>
|
||||
{"<-"} Back to Teams
|
||||
</Link>
|
||||
</ComingSoon>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,90 +2,63 @@
|
||||
|
||||
import type { ReactElement } from "react";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useState } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { TeamCard } from "@/components/team/TeamCard";
|
||||
import { ComingSoon } from "@/components/ui/ComingSoon";
|
||||
import { Button, Input, Modal } from "@mosaic/ui";
|
||||
import { createTeam, fetchTeams, type CreateTeamDto, type TeamRecord } from "@/lib/api/teams";
|
||||
import { mockTeams } from "@/lib/api/teams";
|
||||
import Link from "next/link";
|
||||
|
||||
// Check if we're in development mode
|
||||
const isDevelopment = process.env.NODE_ENV === "development";
|
||||
|
||||
function getErrorMessage(error: unknown, fallback: string): string {
|
||||
if (error instanceof Error) {
|
||||
return error.message;
|
||||
}
|
||||
|
||||
return fallback;
|
||||
}
|
||||
|
||||
/**
|
||||
* Teams Page Content - Development Only
|
||||
* Shows mock team data for development purposes
|
||||
*/
|
||||
function TeamsPageContent(): ReactElement {
|
||||
const params = useParams();
|
||||
const workspaceId = params.id as string;
|
||||
|
||||
const [teams, setTeams] = useState<TeamRecord[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
// 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 [createError, setCreateError] = useState<string | null>(null);
|
||||
|
||||
const loadTeams = useCallback(async (): Promise<void> => {
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const data = await fetchTeams(workspaceId);
|
||||
setTeams(data);
|
||||
setLoadError(null);
|
||||
} catch (error) {
|
||||
setLoadError(getErrorMessage(error, "Failed to load teams"));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [workspaceId]);
|
||||
|
||||
useEffect(() => {
|
||||
void loadTeams();
|
||||
}, [loadTeams]);
|
||||
|
||||
const handleCreateTeam = async (): Promise<void> => {
|
||||
const teamName = newTeamName.trim();
|
||||
if (!teamName) return;
|
||||
const handleCreateTeam = (): void => {
|
||||
if (!newTeamName.trim()) return;
|
||||
|
||||
setIsCreating(true);
|
||||
setCreateError(null);
|
||||
|
||||
try {
|
||||
const description = newTeamDescription.trim();
|
||||
const dto: CreateTeamDto = {
|
||||
name: teamName,
|
||||
};
|
||||
if (description.length > 0) {
|
||||
dto.description = description;
|
||||
}
|
||||
|
||||
await createTeam(dto, workspaceId);
|
||||
// TODO: Replace with real API call
|
||||
// await createTeam(workspaceId, {
|
||||
// name: newTeamName,
|
||||
// description: newTeamDescription || undefined,
|
||||
// });
|
||||
|
||||
// Reset form
|
||||
setNewTeamName("");
|
||||
setNewTeamDescription("");
|
||||
setShowCreateModal(false);
|
||||
await loadTeams();
|
||||
} catch (error) {
|
||||
setCreateError(getErrorMessage(error, "Failed to create team"));
|
||||
|
||||
// TODO: Refresh teams list
|
||||
} catch (_error) {
|
||||
console.error("Failed to create team:", _error);
|
||||
alert("Failed to create team. Please try again.");
|
||||
} finally {
|
||||
setIsCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const teamsForCards = teams.map((team) => ({
|
||||
...team,
|
||||
createdAt: new Date(team.createdAt),
|
||||
updatedAt: new Date(team.updatedAt),
|
||||
}));
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<main className="container mx-auto px-4 py-8">
|
||||
@@ -107,7 +80,6 @@ function TeamsPageContent(): ReactElement {
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => {
|
||||
setCreateError(null);
|
||||
setShowCreateModal(true);
|
||||
}}
|
||||
>
|
||||
@@ -115,11 +87,7 @@ function TeamsPageContent(): ReactElement {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{loadError !== null ? (
|
||||
<div className="rounded-md border border-red-200 bg-red-50 px-4 py-3 text-red-700">
|
||||
{loadError}
|
||||
</div>
|
||||
) : teamsForCards.length === 0 ? (
|
||||
{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">
|
||||
@@ -128,7 +96,6 @@ function TeamsPageContent(): ReactElement {
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => {
|
||||
setCreateError(null);
|
||||
setShowCreateModal(true);
|
||||
}}
|
||||
>
|
||||
@@ -137,12 +104,13 @@ function TeamsPageContent(): ReactElement {
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{teamsForCards.map((team) => (
|
||||
{teams.map((team) => (
|
||||
<TeamCard key={team.id} team={team} workspaceId={workspaceId} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create Team Modal */}
|
||||
{showCreateModal && (
|
||||
<Modal
|
||||
isOpen={showCreateModal}
|
||||
@@ -175,11 +143,6 @@ function TeamsPageContent(): ReactElement {
|
||||
fullWidth
|
||||
disabled={isCreating}
|
||||
/>
|
||||
{createError !== null && (
|
||||
<div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
|
||||
{createError}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex gap-2 justify-end pt-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
@@ -192,7 +155,7 @@ function TeamsPageContent(): ReactElement {
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => void handleCreateTeam()}
|
||||
onClick={handleCreateTeam}
|
||||
disabled={!newTeamName.trim() || isCreating}
|
||||
>
|
||||
{isCreating ? "Creating..." : "Create Team"}
|
||||
@@ -205,7 +168,12 @@ function TeamsPageContent(): ReactElement {
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Teams Page Entry Point
|
||||
* Shows development content or Coming Soon based on environment
|
||||
*/
|
||||
export default function TeamsPage(): ReactElement {
|
||||
// In production, show Coming Soon placeholder
|
||||
if (!isDevelopment) {
|
||||
return (
|
||||
<ComingSoon
|
||||
@@ -219,5 +187,6 @@ export default function TeamsPage(): ReactElement {
|
||||
);
|
||||
}
|
||||
|
||||
// In development, show the full page with mock data
|
||||
return <TeamsPageContent />;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
import { useAuth } from "@/lib/auth/auth-context";
|
||||
import { fetchUserWorkspaces } from "@/lib/api/workspaces";
|
||||
import { useSidebar } from "./SidebarContext";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -463,26 +461,10 @@ interface UserCardProps {
|
||||
|
||||
function UserCard({ collapsed }: UserCardProps): React.JSX.Element {
|
||||
const { user } = useAuth();
|
||||
const [roleLabel, setRoleLabel] = useState<string>("Member");
|
||||
|
||||
useEffect(() => {
|
||||
if (user === null) return;
|
||||
fetchUserWorkspaces()
|
||||
.then((workspaces) => {
|
||||
if (workspaces.length === 0) return;
|
||||
const first = workspaces[0];
|
||||
if (!first) return;
|
||||
const role = first.role;
|
||||
setRoleLabel(role.charAt(0) + role.slice(1).toLowerCase());
|
||||
})
|
||||
.catch(() => {
|
||||
// keep default
|
||||
});
|
||||
}, [user]);
|
||||
|
||||
const displayName = user?.name ?? "User";
|
||||
const initials = getInitials(displayName);
|
||||
const role = roleLabel;
|
||||
const role = "Member";
|
||||
|
||||
return (
|
||||
<footer
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import * as client from "./client";
|
||||
import { fetchAdminUsers, inviteUser, updateUser, deactivateUser } from "./admin";
|
||||
|
||||
vi.mock("./client");
|
||||
|
||||
beforeEach((): void => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe("fetchAdminUsers", (): void => {
|
||||
it("calls admin/users endpoint without params when none provided", async (): Promise<void> => {
|
||||
vi.mocked(client.apiGet).mockResolvedValueOnce({ data: [], meta: {} } as never);
|
||||
await fetchAdminUsers();
|
||||
expect(client.apiGet).toHaveBeenCalledWith("/api/admin/users");
|
||||
});
|
||||
|
||||
it("appends page and limit params when provided", async (): Promise<void> => {
|
||||
vi.mocked(client.apiGet).mockResolvedValueOnce({ data: [], meta: {} } as never);
|
||||
await fetchAdminUsers(2, 50);
|
||||
expect(client.apiGet).toHaveBeenCalledWith("/api/admin/users?page=2&limit=50");
|
||||
});
|
||||
|
||||
it("throws on API error", async (): Promise<void> => {
|
||||
vi.mocked(client.apiGet).mockRejectedValueOnce(new Error("Network error"));
|
||||
await expect(fetchAdminUsers()).rejects.toThrow("Network error");
|
||||
});
|
||||
});
|
||||
|
||||
describe("inviteUser", (): void => {
|
||||
it("posts to invite endpoint", async (): Promise<void> => {
|
||||
vi.mocked(client.apiPost).mockResolvedValueOnce({ id: "inv-1" } as never);
|
||||
await inviteUser({
|
||||
email: "[email protected]",
|
||||
name: "Alice",
|
||||
workspaceId: "ws-1",
|
||||
role: "MEMBER" as never,
|
||||
});
|
||||
expect(client.apiPost).toHaveBeenCalledWith(
|
||||
"/api/admin/users/invite",
|
||||
expect.objectContaining({ email: "[email protected]" })
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("updateUser", (): void => {
|
||||
it("patches correct endpoint with dto", async (): Promise<void> => {
|
||||
vi.mocked(client.apiPatch).mockResolvedValueOnce({ id: "u1", name: "Bob" } as never);
|
||||
await updateUser("u1", { name: "Bob" });
|
||||
expect(client.apiPatch).toHaveBeenCalledWith("/api/admin/users/u1", { name: "Bob" });
|
||||
});
|
||||
});
|
||||
|
||||
describe("deactivateUser", (): void => {
|
||||
it("deletes correct endpoint", async (): Promise<void> => {
|
||||
vi.mocked(client.apiDelete).mockResolvedValueOnce({} as never);
|
||||
await deactivateUser("u1");
|
||||
expect(client.apiDelete).toHaveBeenCalledWith("/api/admin/users/u1");
|
||||
});
|
||||
});
|
||||
@@ -1,53 +0,0 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import * as client from "./client";
|
||||
import { fetchTeams, createTeam, fetchTeamMembers } from "./teams";
|
||||
|
||||
vi.mock("./client");
|
||||
|
||||
const localStorageMock = {
|
||||
getItem: vi.fn().mockReturnValue("ws-1"),
|
||||
setItem: vi.fn(),
|
||||
clear: vi.fn(),
|
||||
removeItem: vi.fn(),
|
||||
length: 0,
|
||||
key: vi.fn(),
|
||||
};
|
||||
Object.defineProperty(window, "localStorage", { value: localStorageMock });
|
||||
|
||||
beforeEach((): void => {
|
||||
vi.clearAllMocks();
|
||||
localStorageMock.getItem.mockReturnValue("ws-1");
|
||||
});
|
||||
|
||||
describe("fetchTeams", (): void => {
|
||||
it("calls teams endpoint for active workspace", async (): Promise<void> => {
|
||||
vi.mocked(client.apiGet).mockResolvedValueOnce([] as never);
|
||||
await fetchTeams();
|
||||
expect(client.apiGet).toHaveBeenCalledWith("/api/workspaces/ws-1/teams", "ws-1");
|
||||
});
|
||||
|
||||
it("throws if no workspace id in localStorage", async (): Promise<void> => {
|
||||
localStorageMock.getItem.mockReturnValue(null);
|
||||
await expect(fetchTeams()).rejects.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe("createTeam", (): void => {
|
||||
it("posts to teams endpoint", async (): Promise<void> => {
|
||||
vi.mocked(client.apiPost).mockResolvedValueOnce({ id: "t1", name: "Dev" } as never);
|
||||
await createTeam({ name: "Dev" });
|
||||
expect(client.apiPost).toHaveBeenCalledWith(
|
||||
"/api/workspaces/ws-1/teams",
|
||||
expect.objectContaining({ name: "Dev" }),
|
||||
"ws-1"
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("fetchTeamMembers", (): void => {
|
||||
it("calls members endpoint for team", async (): Promise<void> => {
|
||||
vi.mocked(client.apiGet).mockResolvedValueOnce([] as never);
|
||||
await fetchTeamMembers("t-1");
|
||||
expect(client.apiGet).toHaveBeenCalledWith("/api/workspaces/ws-1/teams/t-1/members", "ws-1");
|
||||
});
|
||||
});
|
||||
+165
-85
@@ -1,53 +1,14 @@
|
||||
/**
|
||||
* Teams API Client
|
||||
* Handles workspace-scoped team API requests.
|
||||
* Handles team-related API requests
|
||||
*/
|
||||
|
||||
import type { TeamMemberRole } from "@mosaic/shared";
|
||||
import { apiDelete, apiGet, apiPost } from "./client";
|
||||
import type { Team, TeamMember, User } from "@mosaic/shared";
|
||||
import { TeamMemberRole } from "@mosaic/shared";
|
||||
import { apiGet, apiPost, apiPatch, apiDelete, type ApiResponse } from "./client";
|
||||
|
||||
const WORKSPACE_STORAGE_KEY = "mosaic-workspace-id";
|
||||
|
||||
function resolveWorkspaceId(explicitWorkspaceId?: string): string {
|
||||
if (explicitWorkspaceId !== undefined) {
|
||||
return explicitWorkspaceId;
|
||||
}
|
||||
|
||||
if (typeof window === "undefined") {
|
||||
throw new Error("Workspace context is unavailable outside the browser");
|
||||
}
|
||||
|
||||
const workspaceId = window.localStorage.getItem(WORKSPACE_STORAGE_KEY);
|
||||
if (!workspaceId) {
|
||||
throw new Error("No active workspace selected");
|
||||
}
|
||||
|
||||
return workspaceId;
|
||||
}
|
||||
|
||||
export interface TeamRecord {
|
||||
id: string;
|
||||
workspaceId: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
metadata: Record<string, unknown>;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
_count?: {
|
||||
members: number;
|
||||
};
|
||||
}
|
||||
|
||||
export interface TeamMemberRecord {
|
||||
teamId: string;
|
||||
userId: string;
|
||||
role: TeamMemberRole;
|
||||
joinedAt: string;
|
||||
user?: {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
};
|
||||
export interface TeamWithMembers extends Team {
|
||||
members: (TeamMember & { user: User })[];
|
||||
}
|
||||
|
||||
export interface CreateTeamDto {
|
||||
@@ -55,81 +16,200 @@ export interface CreateTeamDto {
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export interface UpdateTeamDto {
|
||||
name?: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export interface AddTeamMemberDto {
|
||||
userId: string;
|
||||
role?: TeamMemberRole;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch all teams in the active workspace.
|
||||
* Fetch all teams for a workspace
|
||||
*/
|
||||
export async function fetchTeams(workspaceId?: string): Promise<TeamRecord[]> {
|
||||
const resolvedWorkspaceId = resolveWorkspaceId(workspaceId);
|
||||
return apiGet<TeamRecord[]>(`/api/workspaces/${resolvedWorkspaceId}/teams`, resolvedWorkspaceId);
|
||||
export async function fetchTeams(workspaceId: string): Promise<Team[]> {
|
||||
const response = await apiGet<ApiResponse<Team[]>>(`/api/workspaces/${workspaceId}/teams`);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a team in the active workspace.
|
||||
* Fetch a single team with members
|
||||
*/
|
||||
export async function createTeam(dto: CreateTeamDto, workspaceId?: string): Promise<TeamRecord> {
|
||||
const resolvedWorkspaceId = resolveWorkspaceId(workspaceId);
|
||||
return apiPost<TeamRecord>(
|
||||
`/api/workspaces/${resolvedWorkspaceId}/teams`,
|
||||
dto,
|
||||
resolvedWorkspaceId
|
||||
export async function fetchTeam(workspaceId: string, teamId: string): Promise<TeamWithMembers> {
|
||||
const response = await apiGet<ApiResponse<TeamWithMembers>>(
|
||||
`/api/workspaces/${workspaceId}/teams/${teamId}`
|
||||
);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch team members for a team in the active workspace.
|
||||
* The current backend route shape is workspace-scoped team membership.
|
||||
* Create a new team
|
||||
*/
|
||||
export async function fetchTeamMembers(
|
||||
export async function createTeam(workspaceId: string, data: CreateTeamDto): Promise<Team> {
|
||||
const response = await apiPost<ApiResponse<Team>>(`/api/workspaces/${workspaceId}/teams`, data);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update a team
|
||||
*/
|
||||
export async function updateTeam(
|
||||
workspaceId: string,
|
||||
teamId: string,
|
||||
workspaceId?: string
|
||||
): Promise<TeamMemberRecord[]> {
|
||||
const resolvedWorkspaceId = resolveWorkspaceId(workspaceId);
|
||||
return apiGet<TeamMemberRecord[]>(
|
||||
`/api/workspaces/${resolvedWorkspaceId}/teams/${teamId}/members`,
|
||||
resolvedWorkspaceId
|
||||
data: UpdateTeamDto
|
||||
): Promise<Team> {
|
||||
const response = await apiPatch<ApiResponse<Team>>(
|
||||
`/api/workspaces/${workspaceId}/teams/${teamId}`,
|
||||
data
|
||||
);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a team in the active workspace.
|
||||
* Delete a team
|
||||
*/
|
||||
export async function deleteTeam(teamId: string, workspaceId?: string): Promise<void> {
|
||||
const resolvedWorkspaceId = resolveWorkspaceId(workspaceId);
|
||||
await apiDelete(`/api/workspaces/${resolvedWorkspaceId}/teams/${teamId}`, resolvedWorkspaceId);
|
||||
export async function deleteTeam(workspaceId: string, teamId: string): Promise<void> {
|
||||
await apiDelete(`/api/workspaces/${workspaceId}/teams/${teamId}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a member to a team in the active workspace.
|
||||
* Add a member to a team
|
||||
*/
|
||||
export async function addTeamMember(
|
||||
workspaceId: string,
|
||||
teamId: string,
|
||||
data: AddTeamMemberDto,
|
||||
workspaceId?: string
|
||||
): Promise<TeamMemberRecord> {
|
||||
const resolvedWorkspaceId = resolveWorkspaceId(workspaceId);
|
||||
return apiPost<TeamMemberRecord>(
|
||||
`/api/workspaces/${resolvedWorkspaceId}/teams/${teamId}/members`,
|
||||
data,
|
||||
resolvedWorkspaceId
|
||||
data: AddTeamMemberDto
|
||||
): Promise<TeamMember> {
|
||||
const response = await apiPost<ApiResponse<TeamMember>>(
|
||||
`/api/workspaces/${workspaceId}/teams/${teamId}/members`,
|
||||
data
|
||||
);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove a member from a team in the active workspace.
|
||||
* Remove a member from a team
|
||||
*/
|
||||
export async function removeTeamMember(
|
||||
workspaceId: string,
|
||||
teamId: string,
|
||||
userId: string
|
||||
): Promise<void> {
|
||||
await apiDelete(`/api/workspaces/${workspaceId}/teams/${teamId}/members/${userId}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update a team member's role
|
||||
*/
|
||||
export async function updateTeamMemberRole(
|
||||
workspaceId: string,
|
||||
teamId: string,
|
||||
userId: string,
|
||||
workspaceId?: string
|
||||
): Promise<void> {
|
||||
const resolvedWorkspaceId = resolveWorkspaceId(workspaceId);
|
||||
await apiDelete(
|
||||
`/api/workspaces/${resolvedWorkspaceId}/teams/${teamId}/members/${userId}`,
|
||||
resolvedWorkspaceId
|
||||
role: TeamMemberRole
|
||||
): Promise<TeamMember> {
|
||||
const response = await apiPatch<ApiResponse<TeamMember>>(
|
||||
`/api/workspaces/${workspaceId}/teams/${teamId}/members/${userId}`,
|
||||
{ role }
|
||||
);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* Mock teams for development (until backend endpoints are ready)
|
||||
*/
|
||||
export const mockTeams: Team[] = [
|
||||
{
|
||||
id: "team-1",
|
||||
workspaceId: "workspace-1",
|
||||
name: "Engineering",
|
||||
description: "Product development team",
|
||||
metadata: {},
|
||||
createdAt: new Date("2026-01-20"),
|
||||
updatedAt: new Date("2026-01-20"),
|
||||
},
|
||||
{
|
||||
id: "team-2",
|
||||
workspaceId: "workspace-1",
|
||||
name: "Design",
|
||||
description: "UI/UX design team",
|
||||
metadata: {},
|
||||
createdAt: new Date("2026-01-22"),
|
||||
updatedAt: new Date("2026-01-22"),
|
||||
},
|
||||
{
|
||||
id: "team-3",
|
||||
workspaceId: "workspace-1",
|
||||
name: "Marketing",
|
||||
description: null,
|
||||
metadata: {},
|
||||
createdAt: new Date("2026-01-25"),
|
||||
updatedAt: new Date("2026-01-25"),
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Mock team with members for development
|
||||
*/
|
||||
const baseTeam = mockTeams[0];
|
||||
if (!baseTeam) {
|
||||
throw new Error("Mock team not found");
|
||||
}
|
||||
export const mockTeamWithMembers: TeamWithMembers = {
|
||||
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",
|
||||
userId: "user-1",
|
||||
role: TeamMemberRole.OWNER,
|
||||
joinedAt: new Date("2026-01-20"),
|
||||
user: {
|
||||
id: "user-1",
|
||||
email: "[email protected]",
|
||||
name: "John Doe",
|
||||
emailVerified: true,
|
||||
image: null,
|
||||
authProviderId: null,
|
||||
preferences: {},
|
||||
deactivatedAt: null,
|
||||
isLocalAuth: false,
|
||||
passwordHash: null,
|
||||
invitedBy: null,
|
||||
invitationToken: null,
|
||||
invitedAt: null,
|
||||
createdAt: new Date("2026-01-15"),
|
||||
updatedAt: new Date("2026-01-15"),
|
||||
},
|
||||
},
|
||||
{
|
||||
teamId: "team-1",
|
||||
userId: "user-2",
|
||||
role: TeamMemberRole.MEMBER,
|
||||
joinedAt: new Date("2026-01-21"),
|
||||
user: {
|
||||
id: "user-2",
|
||||
email: "[email protected]",
|
||||
name: "Jane Smith",
|
||||
emailVerified: true,
|
||||
image: null,
|
||||
authProviderId: null,
|
||||
preferences: {},
|
||||
deactivatedAt: null,
|
||||
isLocalAuth: false,
|
||||
passwordHash: null,
|
||||
invitedBy: null,
|
||||
invitationToken: null,
|
||||
invitedAt: null,
|
||||
createdAt: new Date("2026-01-16"),
|
||||
updatedAt: new Date("2026-01-16"),
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import * as client from "./client";
|
||||
import {
|
||||
fetchUserWorkspaces,
|
||||
fetchWorkspaceMembers,
|
||||
addWorkspaceMember,
|
||||
updateWorkspaceMemberRole,
|
||||
removeWorkspaceMember,
|
||||
} from "./workspaces";
|
||||
|
||||
vi.mock("./client");
|
||||
|
||||
beforeEach((): void => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe("fetchUserWorkspaces", (): void => {
|
||||
it("calls correct endpoint", async (): Promise<void> => {
|
||||
vi.mocked(client.apiGet).mockResolvedValueOnce([] as never);
|
||||
await fetchUserWorkspaces();
|
||||
expect(client.apiGet).toHaveBeenCalledWith("/api/workspaces");
|
||||
});
|
||||
});
|
||||
|
||||
describe("fetchWorkspaceMembers", (): void => {
|
||||
it("calls correct endpoint with workspace id", async (): Promise<void> => {
|
||||
vi.mocked(client.apiGet).mockResolvedValueOnce([] as never);
|
||||
await fetchWorkspaceMembers("ws-1");
|
||||
expect(client.apiGet).toHaveBeenCalledWith("/api/workspaces/ws-1/members");
|
||||
});
|
||||
|
||||
it("throws on error", async (): Promise<void> => {
|
||||
vi.mocked(client.apiGet).mockRejectedValueOnce(new Error("Forbidden"));
|
||||
await expect(fetchWorkspaceMembers("ws-1")).rejects.toThrow("Forbidden");
|
||||
});
|
||||
});
|
||||
|
||||
describe("addWorkspaceMember", (): void => {
|
||||
it("posts to correct endpoint", async (): Promise<void> => {
|
||||
vi.mocked(client.apiPost).mockResolvedValueOnce({} as never);
|
||||
await addWorkspaceMember("ws-1", { userId: "u1", role: "MEMBER" as never });
|
||||
expect(client.apiPost).toHaveBeenCalledWith("/api/workspaces/ws-1/members", {
|
||||
userId: "u1",
|
||||
role: "MEMBER",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("updateWorkspaceMemberRole", (): void => {
|
||||
it("patches correct endpoint", async (): Promise<void> => {
|
||||
vi.mocked(client.apiPatch).mockResolvedValueOnce({} as never);
|
||||
await updateWorkspaceMemberRole("ws-1", "u1", { role: "ADMIN" as never });
|
||||
expect(client.apiPatch).toHaveBeenCalledWith("/api/workspaces/ws-1/members/u1", {
|
||||
role: "ADMIN",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("removeWorkspaceMember", (): void => {
|
||||
it("calls delete on correct endpoint", async (): Promise<void> => {
|
||||
vi.mocked(client.apiDelete).mockResolvedValueOnce(undefined as never);
|
||||
await removeWorkspaceMember("ws-1", "u1");
|
||||
expect(client.apiDelete).toHaveBeenCalledWith("/api/workspaces/ws-1/members/u1");
|
||||
});
|
||||
});
|
||||
@@ -3,82 +3,24 @@
|
||||
* User-scoped workspace discovery — does NOT require X-Workspace-Id header.
|
||||
*/
|
||||
|
||||
import type { WorkspaceMemberRole } from "@mosaic/shared";
|
||||
import { apiDelete, apiGet, apiPatch, apiPost } from "./client";
|
||||
import { apiGet } from "./client";
|
||||
|
||||
/**
|
||||
* A workspace entry from the user's membership list.
|
||||
* Matches WorkspaceResponseDto from the API.
|
||||
*/
|
||||
export interface UserWorkspace {
|
||||
id: string;
|
||||
name: string;
|
||||
ownerId: string;
|
||||
role: WorkspaceMemberRole;
|
||||
role: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
export interface CreateWorkspaceDto {
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface CreatedWorkspace {
|
||||
id: string;
|
||||
name: string;
|
||||
ownerId: string;
|
||||
settings: Record<string, unknown>;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
memberCount: number;
|
||||
}
|
||||
|
||||
export interface WorkspaceMemberUser {
|
||||
id: string;
|
||||
email: string;
|
||||
name: string | null;
|
||||
image: string | null;
|
||||
}
|
||||
|
||||
export interface WorkspaceMemberEntry {
|
||||
workspaceId: string;
|
||||
userId: string;
|
||||
role: WorkspaceMemberRole;
|
||||
joinedAt: string;
|
||||
user: WorkspaceMemberUser;
|
||||
}
|
||||
|
||||
export interface AddMemberDto {
|
||||
userId: string;
|
||||
role: WorkspaceMemberRole;
|
||||
}
|
||||
|
||||
export interface UpdateMemberRoleDto {
|
||||
role: WorkspaceMemberRole;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch all workspaces the authenticated user is a member of.
|
||||
* The API auto-provisions a default workspace if the user has none.
|
||||
*/
|
||||
export async function fetchUserWorkspaces(): Promise<UserWorkspace[]> {
|
||||
return apiGet<UserWorkspace[]>("/api/workspaces");
|
||||
}
|
||||
|
||||
export async function createWorkspace(dto: CreateWorkspaceDto): Promise<CreatedWorkspace> {
|
||||
return apiPost<CreatedWorkspace>("/api/admin/workspaces", dto);
|
||||
}
|
||||
|
||||
export async function fetchWorkspaceMembers(workspaceId: string): Promise<WorkspaceMemberEntry[]> {
|
||||
return apiGet<WorkspaceMemberEntry[]>(`/api/workspaces/${workspaceId}/members`);
|
||||
}
|
||||
|
||||
export async function addWorkspaceMember(
|
||||
workspaceId: string,
|
||||
dto: AddMemberDto
|
||||
): Promise<WorkspaceMemberEntry> {
|
||||
return apiPost<WorkspaceMemberEntry>(`/api/workspaces/${workspaceId}/members`, dto);
|
||||
}
|
||||
|
||||
export async function updateWorkspaceMemberRole(
|
||||
workspaceId: string,
|
||||
userId: string,
|
||||
dto: UpdateMemberRoleDto
|
||||
): Promise<WorkspaceMemberEntry> {
|
||||
return apiPatch<WorkspaceMemberEntry>(`/api/workspaces/${workspaceId}/members/${userId}`, dto);
|
||||
}
|
||||
|
||||
export async function removeWorkspaceMember(workspaceId: string, userId: string): Promise<void> {
|
||||
await apiDelete<unknown>(`/api/workspaces/${workspaceId}/members/${userId}`);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@ import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { render, screen, waitFor } from "@testing-library/react";
|
||||
import { AuthProvider, useAuth } from "./auth-context";
|
||||
import type { AuthUser } from "@mosaic/shared";
|
||||
import { WorkspaceMemberRole } from "@mosaic/shared";
|
||||
|
||||
// Mock the API client
|
||||
vi.mock("../api/client", () => ({
|
||||
@@ -762,7 +761,7 @@ describe("AuthContext", (): void => {
|
||||
id: "ws-1",
|
||||
name: "My Workspace",
|
||||
ownerId: "user-1",
|
||||
role: WorkspaceMemberRole.OWNER,
|
||||
role: "OWNER",
|
||||
createdAt: "2026-01-01",
|
||||
},
|
||||
]);
|
||||
@@ -796,14 +795,14 @@ describe("AuthContext", (): void => {
|
||||
id: "ws-abc-123",
|
||||
name: "My Workspace",
|
||||
ownerId: "user-1",
|
||||
role: WorkspaceMemberRole.OWNER,
|
||||
role: "OWNER",
|
||||
createdAt: "2026-01-01",
|
||||
},
|
||||
{
|
||||
id: "ws-def-456",
|
||||
name: "Second Workspace",
|
||||
ownerId: "other",
|
||||
role: WorkspaceMemberRole.MEMBER,
|
||||
role: "MEMBER",
|
||||
createdAt: "2026-02-01",
|
||||
},
|
||||
]);
|
||||
@@ -893,7 +892,7 @@ describe("AuthContext", (): void => {
|
||||
id: "ws-1",
|
||||
name: "My Workspace",
|
||||
ownerId: "user-1",
|
||||
role: WorkspaceMemberRole.OWNER,
|
||||
role: "OWNER",
|
||||
createdAt: "2026-01-01",
|
||||
},
|
||||
]);
|
||||
|
||||
+34
-35
@@ -3,41 +3,40 @@
|
||||
> Single-writer: orchestrator (Jarvis/OpenClaw) only. Workers read but never modify.
|
||||
> Schema: id | status | milestone | description | issue | repo | branch | depends_on | blocks | agent | started_at | completed_at | estimate | used | notes
|
||||
|
||||
| id | status | milestone | description | issue | repo | branch | depends_on | blocks | agent | started_at | completed_at | estimate | used | notes |
|
||||
| -------------- | ----------- | --------- | --------------------------------------------------------------------------------- | -------- | ----- | ------------------------------ | ----------------------------------------------------------- | -------------------------- | --------------- | ---------- | ------------ | -------- | ---- | --------------------------------------------------------------------------------------------------------------------- |
|
||||
| MS21-PLAN-001 | done | phase-1 | Write PRD, init mission, populate TASKS.md | TASKS:P1 | stack | chore/ms21-init | — | MS21-DB-001 | orchestrator | 2026-02-28 | 2026-02-28 | 10K | 12K | PR #552, CI green |
|
||||
| MS21-DB-001 | done | phase-1 | Prisma migration: add user fields | TASKS:P1 | api | feat/ms21-schema | MS21-PLAN-001 | MS21-API-001 | claude-worker-1 | 2026-02-28 | 2026-02-28 | 10K | 9K | PR #553, CI green |
|
||||
| MS21-API-001 | done | phase-1 | AdminModule with user/workspace admin endpoints | TASKS:P1 | api | feat/ms21-admin-api | MS21-DB-001 | MS21-TEST-001 | claude-worker-2 | 2026-02-28 | 2026-02-28 | 20K | 18K | PR #555, CI green |
|
||||
| MS21-API-002 | done | phase-1 | Admin user endpoints (list, invite, update, deactivate) | TASKS:P1 | api | feat/ms21-admin-api | MS21-DB-001 | MS21-TEST-001 | claude-worker-2 | 2026-02-28 | 2026-02-28 | — | — | Combined with API-001 |
|
||||
| MS21-API-003 | done | phase-1 | Workspace member management endpoints | TASKS:P1 | api | feat/ms21-workspace-members | MS21-DB-001 | — | codex-worker-1 | 2026-02-28 | 2026-02-28 | 15K | 14K | PR #556, CI green |
|
||||
| MS21-API-004 | done | phase-1 | Team management module | TASKS:P1 | api | feat/ms21-teams | MS21-DB-001 | — | codex-worker-2 | 2026-02-28 | 2026-02-28 | 15K | 13K | PR #564, CI green |
|
||||
| MS21-API-005 | done | phase-1 | Admin workspace endpoints | TASKS:P1 | api | feat/ms21-admin-api | MS21-DB-001 | — | claude-worker-2 | 2026-02-28 | 2026-02-28 | — | — | Combined with API-001 |
|
||||
| MS21-TEST-001 | done | phase-1 | Unit tests for AdminService and AdminController | TASKS:P1 | api | feat/ms21-admin-api | MS21-API-001 | — | claude-worker-2 | 2026-02-28 | 2026-02-28 | 15K | — | PR #555, 26 tests |
|
||||
| MS21-FIX-001 | done | phase-1 | Fix flaky CI tests (rate limit timeout + log sanitizer) | TASKS:P1 | api | fix/ms21-flaky-ci | MS21-API-001 | — | codex-worker-3 | 2026-02-28 | 2026-02-28 | 8K | 7K | PR #562, CI green |
|
||||
| MS21-AUTH-001 | done | phase-2 | LocalAuthModule: break-glass auth | TASKS:P2 | api | feat/ms21-local-auth | MS21-DB-001 | MS21-TEST-002 | claude-worker-3 | 2026-02-28 | 2026-02-28 | 20K | 19K | PR #559, CI green |
|
||||
| MS21-AUTH-002 | done | phase-2 | Break-glass setup endpoint | TASKS:P2 | api | feat/ms21-local-auth | MS21-AUTH-001 | — | claude-worker-3 | 2026-02-28 | 2026-02-28 | — | — | Combined with AUTH-001 |
|
||||
| MS21-AUTH-003 | done | phase-2 | Break-glass login endpoint | TASKS:P2 | api | feat/ms21-local-auth | MS21-AUTH-001 | — | claude-worker-3 | 2026-02-28 | 2026-02-28 | — | — | Combined with AUTH-001 |
|
||||
| MS21-AUTH-004 | not-started | phase-2 | Deactivation session invalidation | TASKS:P2 | api | feat/ms21-session-invalidation | MS21-AUTH-001 | — | — | — | — | 10K | — | Deferred; do after Phase 4 |
|
||||
| MS21-TEST-002 | done | phase-2 | Unit tests for LocalAuth | TASKS:P2 | api | feat/ms21-local-auth | MS21-AUTH-001 | — | claude-worker-3 | 2026-02-28 | 2026-02-28 | 15K | — | PR #559, 27 tests |
|
||||
| MS21-MIG-001 | done | phase-3 | Migration script: scripts/migrate-brain.ts | #568 | api | feat/ms21-migration | MS21-DB-001 | MS21-MIG-002,MS21-TEST-003 | codex-worker-1 | 2026-02-28 | 2026-02-28 | 25K | 22K | PR #554 |
|
||||
| MS21-MIG-002 | done | phase-3 | Migration mapping: status/priority/domain | #568 | api | feat/ms21-migration | MS21-MIG-001 | — | codex-worker-1 | 2026-02-28 | 2026-02-28 | — | — | Included in MIG-001 |
|
||||
| MS21-TEST-003 | done | phase-3 | Migration script unit tests (9/9 passing) | #568 | api | test/ms21-migration-tests | MS21-MIG-001 | — | codex | 2026-02-28 | 2026-02-28 | 20K | 17K | PR #566 merged, CI green. Review: 0 blockers, 2 should-fix (brittle harness), 0 sec issues. |
|
||||
| MS21-MIG-003 | not-started | phase-3 | Run migration on production database | #568 | api | — | MS21-MIG-001,MS21-TEST-003 | MS21-VER-001 | — | — | — | 5K | — | Needs deploy coordination; not automatable |
|
||||
| MS21-MIG-004 | done | phase-3 | Import API endpoints (6/6 tests) | #568 | api | feat/ms21-import-api | MS21-DB-001 | — | codex | 2026-02-28 | 2026-02-28 | 20K | 24K | PR #567 merged, CI green. Review: 0 blockers, 4 should-fix, 1 medium sec (no audit log). |
|
||||
| MS21-UI-001 | done | phase-4 | Settings/users page | #569 | web | feat/ms21-ui-users | MS21-API-001,MS21-API-002 | — | codex | 2026-02-28 | 2026-02-28 | 20K | ~30K | PR #573 merged. Review: 0 blockers, 4 should-fix → MS21-UI-001-QA |
|
||||
| MS21-UI-001-QA | not-started | phase-4 | QA: fix 4 review findings (pagination, error state, self-deactivate guard, tests) | #569 | web | fix/ms21-ui-001-qa | MS21-UI-001 | — | — | — | — | 15K | — | 0 blockers; merged per framework. Should-fix: pagination cap, error/empty collision, self-deactivate guard, no tests. |
|
||||
| MS21-UI-002 | not-started | phase-4 | User detail/edit and invite dialogs | #569 | web | feat/ms21-ui-users | MS21-UI-001 | — | — | — | — | 15K | — | |
|
||||
| MS21-UI-003 | done | phase-4 | Settings/workspaces page (wire to real API) | #569 | web | feat/ms21-ui-workspaces | MS21-API-003 | — | codex | 2026-02-28 | 2026-02-28 | 15K | ~25K | PR #574 merged. Review: 0 critical, 1 low (raw errors in UI) |
|
||||
| MS21-UI-004 | not-started | phase-4 | Workspace member management UI | #569 | web | feat/ms21-ui-workspaces | MS21-UI-003,MS21-API-003 | — | — | — | — | 15K | — | Components exist |
|
||||
| MS21-UI-005 | not-started | phase-4 | Settings/teams page | #569 | web | feat/ms21-ui-teams | MS21-API-004 | — | — | — | — | 15K | — | |
|
||||
| MS21-TEST-004 | not-started | phase-4 | Frontend component tests | #569 | web | test/ms21-ui | MS21-UI-001,MS21-UI-002,MS21-UI-003,MS21-UI-004,MS21-UI-005 | — | — | — | — | 20K | — | |
|
||||
| MS21-RBAC-001 | not-started | phase-5 | Sidebar navigation role gating | #570 | web | feat/ms21-rbac | MS21-UI-001 | — | — | — | — | 10K | — | |
|
||||
| MS21-RBAC-002 | not-started | phase-5 | Settings page access restriction | #570 | web | feat/ms21-rbac | MS21-RBAC-001 | — | — | — | — | 8K | — | |
|
||||
| MS21-RBAC-003 | done | phase-5 | Action button permission gating | #570 | web | feat/ms21-rbac | MS21-RBAC-001 | — | — | — | — | 8K | — | |
|
||||
| MS21-RBAC-004 | done | phase-5 | User profile role display | #570 | web | feat/ms21-rbac | MS21-RBAC-001 | — | — | — | — | 5K | — | |
|
||||
| MS21-VER-001 | done | phase-6 | Full quality gate pass | #571 | stack | — | MS21-TEST-004,MS21-RBAC-004,MS21-MIG-003 | MS21-VER-002 | — | — | — | 5K | — | |
|
||||
| MS21-VER-002 | done | phase-6 | Deploy and smoke test | #571 | stack | — | MS21-VER-001 | MS21-VER-003 | — | — | — | 5K | — | |
|
||||
| MS21-VER-003 | done | phase-6 | Tag v0.0.21 | #571 | stack | — | MS21-VER-002 | — | — | — | — | 2K | — | |
|
||||
| id | status | milestone | description | issue | repo | branch | depends_on | blocks | agent | started_at | completed_at | estimate | used | notes |
|
||||
| ------------- | ----------- | --------- | ------------------------------------------------------- | -------- | ----- | ------------------------------ | ----------------------------------------------------------- | -------------------------- | --------------- | ---------- | ------------ | -------- | ---- | ------------------------------------------------------------------------------------------- |
|
||||
| MS21-PLAN-001 | done | phase-1 | Write PRD, init mission, populate TASKS.md | TASKS:P1 | stack | chore/ms21-init | — | MS21-DB-001 | orchestrator | 2026-02-28 | 2026-02-28 | 10K | 12K | PR #552, CI green |
|
||||
| MS21-DB-001 | done | phase-1 | Prisma migration: add user fields | TASKS:P1 | api | feat/ms21-schema | MS21-PLAN-001 | MS21-API-001 | claude-worker-1 | 2026-02-28 | 2026-02-28 | 10K | 9K | PR #553, CI green |
|
||||
| MS21-API-001 | done | phase-1 | AdminModule with user/workspace admin endpoints | TASKS:P1 | api | feat/ms21-admin-api | MS21-DB-001 | MS21-TEST-001 | claude-worker-2 | 2026-02-28 | 2026-02-28 | 20K | 18K | PR #555, CI green |
|
||||
| MS21-API-002 | done | phase-1 | Admin user endpoints (list, invite, update, deactivate) | TASKS:P1 | api | feat/ms21-admin-api | MS21-DB-001 | MS21-TEST-001 | claude-worker-2 | 2026-02-28 | 2026-02-28 | — | — | Combined with API-001 |
|
||||
| MS21-API-003 | done | phase-1 | Workspace member management endpoints | TASKS:P1 | api | feat/ms21-workspace-members | MS21-DB-001 | — | codex-worker-1 | 2026-02-28 | 2026-02-28 | 15K | 14K | PR #556, CI green |
|
||||
| MS21-API-004 | done | phase-1 | Team management module | TASKS:P1 | api | feat/ms21-teams | MS21-DB-001 | — | codex-worker-2 | 2026-02-28 | 2026-02-28 | 15K | 13K | PR #564, CI green |
|
||||
| MS21-API-005 | done | phase-1 | Admin workspace endpoints | TASKS:P1 | api | feat/ms21-admin-api | MS21-DB-001 | — | claude-worker-2 | 2026-02-28 | 2026-02-28 | — | — | Combined with API-001 |
|
||||
| MS21-TEST-001 | done | phase-1 | Unit tests for AdminService and AdminController | TASKS:P1 | api | feat/ms21-admin-api | MS21-API-001 | — | claude-worker-2 | 2026-02-28 | 2026-02-28 | 15K | — | PR #555, 26 tests |
|
||||
| MS21-FIX-001 | done | phase-1 | Fix flaky CI tests (rate limit timeout + log sanitizer) | TASKS:P1 | api | fix/ms21-flaky-ci | MS21-API-001 | — | codex-worker-3 | 2026-02-28 | 2026-02-28 | 8K | 7K | PR #562, CI green |
|
||||
| MS21-AUTH-001 | done | phase-2 | LocalAuthModule: break-glass auth | TASKS:P2 | api | feat/ms21-local-auth | MS21-DB-001 | MS21-TEST-002 | claude-worker-3 | 2026-02-28 | 2026-02-28 | 20K | 19K | PR #559, CI green |
|
||||
| MS21-AUTH-002 | done | phase-2 | Break-glass setup endpoint | TASKS:P2 | api | feat/ms21-local-auth | MS21-AUTH-001 | — | claude-worker-3 | 2026-02-28 | 2026-02-28 | — | — | Combined with AUTH-001 |
|
||||
| MS21-AUTH-003 | done | phase-2 | Break-glass login endpoint | TASKS:P2 | api | feat/ms21-local-auth | MS21-AUTH-001 | — | claude-worker-3 | 2026-02-28 | 2026-02-28 | — | — | Combined with AUTH-001 |
|
||||
| MS21-AUTH-004 | not-started | phase-2 | Deactivation session invalidation | TASKS:P2 | api | feat/ms21-session-invalidation | MS21-AUTH-001 | — | — | — | — | 10K | — | Deferred; do after Phase 4 |
|
||||
| MS21-TEST-002 | done | phase-2 | Unit tests for LocalAuth | TASKS:P2 | api | feat/ms21-local-auth | MS21-AUTH-001 | — | claude-worker-3 | 2026-02-28 | 2026-02-28 | 15K | — | PR #559, 27 tests |
|
||||
| MS21-MIG-001 | done | phase-3 | Migration script: scripts/migrate-brain.ts | #568 | api | feat/ms21-migration | MS21-DB-001 | MS21-MIG-002,MS21-TEST-003 | codex-worker-1 | 2026-02-28 | 2026-02-28 | 25K | 22K | PR #554 |
|
||||
| MS21-MIG-002 | done | phase-3 | Migration mapping: status/priority/domain | #568 | api | feat/ms21-migration | MS21-MIG-001 | — | codex-worker-1 | 2026-02-28 | 2026-02-28 | — | — | Included in MIG-001 |
|
||||
| MS21-TEST-003 | done | phase-3 | Migration script unit tests (9/9 passing) | #568 | api | test/ms21-migration-tests | MS21-MIG-001 | — | codex | 2026-02-28 | 2026-02-28 | 20K | 17K | PR #566 merged, CI green. Review: 0 blockers, 2 should-fix (brittle harness), 0 sec issues. |
|
||||
| MS21-MIG-003 | not-started | phase-3 | Run migration on production database | #568 | api | — | MS21-MIG-001,MS21-TEST-003 | MS21-VER-001 | — | — | — | 5K | — | Needs deploy coordination; not automatable |
|
||||
| MS21-MIG-004 | done | phase-3 | Import API endpoints (6/6 tests) | #568 | api | feat/ms21-import-api | MS21-DB-001 | — | codex | 2026-02-28 | 2026-02-28 | 20K | 24K | PR #567 merged, CI green. Review: 0 blockers, 4 should-fix, 1 medium sec (no audit log). |
|
||||
| MS21-UI-001 | not-started | phase-4 | Settings/users page | #569 | web | feat/ms21-ui-users | MS21-API-001,MS21-API-002 | — | — | — | — | 20K | — | |
|
||||
| MS21-UI-002 | not-started | phase-4 | User detail/edit and invite dialogs | #569 | web | feat/ms21-ui-users | MS21-UI-001 | — | — | — | — | 15K | — | |
|
||||
| MS21-UI-003 | not-started | phase-4 | Settings/workspaces page (wire to real API) | #569 | web | feat/ms21-ui-workspaces | MS21-API-003 | — | — | — | — | 15K | — | Mock data exists |
|
||||
| MS21-UI-004 | not-started | phase-4 | Workspace member management UI | #569 | web | feat/ms21-ui-workspaces | MS21-UI-003,MS21-API-003 | — | — | — | — | 15K | — | Components exist |
|
||||
| MS21-UI-005 | not-started | phase-4 | Settings/teams page | #569 | web | feat/ms21-ui-teams | MS21-API-004 | — | — | — | — | 15K | — | |
|
||||
| MS21-TEST-004 | not-started | phase-4 | Frontend component tests | #569 | web | test/ms21-ui | MS21-UI-001,MS21-UI-002,MS21-UI-003,MS21-UI-004,MS21-UI-005 | — | — | — | — | 20K | — | |
|
||||
| MS21-RBAC-001 | not-started | phase-5 | Sidebar navigation role gating | #570 | web | feat/ms21-rbac | MS21-UI-001 | — | — | — | — | 10K | — | |
|
||||
| MS21-RBAC-002 | not-started | phase-5 | Settings page access restriction | #570 | web | feat/ms21-rbac | MS21-RBAC-001 | — | — | — | — | 8K | — | |
|
||||
| MS21-RBAC-003 | not-started | phase-5 | Action button permission gating | #570 | web | feat/ms21-rbac | MS21-RBAC-001 | — | — | — | — | 8K | — | |
|
||||
| MS21-RBAC-004 | not-started | phase-5 | User profile role display | #570 | web | feat/ms21-rbac | MS21-RBAC-001 | — | — | — | — | 5K | — | |
|
||||
| MS21-VER-001 | not-started | phase-6 | Full quality gate pass | #571 | stack | — | MS21-TEST-004,MS21-RBAC-004,MS21-MIG-003 | MS21-VER-002 | — | — | — | 5K | — | |
|
||||
| MS21-VER-002 | not-started | phase-6 | Deploy and smoke test | #571 | stack | — | MS21-VER-001 | MS21-VER-003 | — | — | — | 5K | — | |
|
||||
| MS21-VER-003 | not-started | phase-6 | Tag v0.0.21 | #571 | stack | — | MS21-VER-002 | — | — | — | — | 2K | — | |
|
||||
|
||||
## Budget Summary
|
||||
|
||||
|
||||
Reference in New Issue
Block a user