Add multi-tenancy with Teams feature
This commit is contained in:
Mondo Diaz
@@ -1,5 +1,6 @@
|
||||
import { Routes, Route, Navigate, useLocation } from 'react-router-dom';
|
||||
import { AuthProvider, useAuth } from './contexts/AuthContext';
|
||||
import { TeamProvider } from './contexts/TeamContext';
|
||||
import Layout from './components/Layout';
|
||||
import Home from './pages/Home';
|
||||
import ProjectPage from './pages/ProjectPage';
|
||||
@@ -11,6 +12,10 @@ import APIKeysPage from './pages/APIKeysPage';
|
||||
import AdminUsersPage from './pages/AdminUsersPage';
|
||||
import AdminOIDCPage from './pages/AdminOIDCPage';
|
||||
import ProjectSettingsPage from './pages/ProjectSettingsPage';
|
||||
import TeamsPage from './pages/TeamsPage';
|
||||
import TeamDashboardPage from './pages/TeamDashboardPage';
|
||||
import TeamSettingsPage from './pages/TeamSettingsPage';
|
||||
import TeamMembersPage from './pages/TeamMembersPage';
|
||||
|
||||
// Component that checks if user must change password
|
||||
function RequirePasswordChange({ children }: { children: React.ReactNode }) {
|
||||
@@ -45,6 +50,10 @@ function AppRoutes() {
|
||||
<Route path="/settings/api-keys" element={<APIKeysPage />} />
|
||||
<Route path="/admin/users" element={<AdminUsersPage />} />
|
||||
<Route path="/admin/oidc" element={<AdminOIDCPage />} />
|
||||
<Route path="/teams" element={<TeamsPage />} />
|
||||
<Route path="/teams/:slug" element={<TeamDashboardPage />} />
|
||||
<Route path="/teams/:slug/settings" element={<TeamSettingsPage />} />
|
||||
<Route path="/teams/:slug/members" element={<TeamMembersPage />} />
|
||||
<Route path="/project/:projectName" element={<ProjectPage />} />
|
||||
<Route path="/project/:projectName/settings" element={<ProjectSettingsPage />} />
|
||||
<Route path="/project/:projectName/:packageName" element={<PackagePage />} />
|
||||
@@ -60,7 +69,9 @@ function AppRoutes() {
|
||||
function App() {
|
||||
return (
|
||||
<AuthProvider>
|
||||
<AppRoutes />
|
||||
<TeamProvider>
|
||||
<AppRoutes />
|
||||
</TeamProvider>
|
||||
</AuthProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -36,6 +36,12 @@ import {
|
||||
ArtifactDependenciesResponse,
|
||||
ReverseDependenciesResponse,
|
||||
DependencyResolutionResponse,
|
||||
TeamDetail,
|
||||
TeamMember,
|
||||
TeamCreate,
|
||||
TeamUpdate,
|
||||
TeamMemberCreate,
|
||||
TeamMemberUpdate,
|
||||
} from './types';
|
||||
|
||||
const API_BASE = '/api/v1';
|
||||
@@ -160,7 +166,7 @@ export async function listProjectsSimple(params: ListParams = {}): Promise<Proje
|
||||
return data.items;
|
||||
}
|
||||
|
||||
export async function createProject(data: { name: string; description?: string; is_public?: boolean }): Promise<Project> {
|
||||
export async function createProject(data: { name: string; description?: string; is_public?: boolean; team_id?: string }): Promise<Project> {
|
||||
const response = await fetch(`${API_BASE}/projects`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
@@ -562,3 +568,117 @@ export async function getEnsureFile(
|
||||
}
|
||||
return response.text();
|
||||
}
|
||||
|
||||
// Team API
|
||||
export async function listTeams(params: ListParams = {}): Promise<PaginatedResponse<TeamDetail>> {
|
||||
const query = buildQueryString(params as Record<string, unknown>);
|
||||
const response = await fetch(`${API_BASE}/teams${query}`, {
|
||||
credentials: 'include',
|
||||
});
|
||||
return handleResponse<PaginatedResponse<TeamDetail>>(response);
|
||||
}
|
||||
|
||||
export async function createTeam(data: TeamCreate): Promise<TeamDetail> {
|
||||
const response = await fetch(`${API_BASE}/teams`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data),
|
||||
credentials: 'include',
|
||||
});
|
||||
return handleResponse<TeamDetail>(response);
|
||||
}
|
||||
|
||||
export async function getTeam(slug: string): Promise<TeamDetail> {
|
||||
const response = await fetch(`${API_BASE}/teams/${slug}`, {
|
||||
credentials: 'include',
|
||||
});
|
||||
return handleResponse<TeamDetail>(response);
|
||||
}
|
||||
|
||||
export async function updateTeam(slug: string, data: TeamUpdate): Promise<TeamDetail> {
|
||||
const response = await fetch(`${API_BASE}/teams/${slug}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data),
|
||||
credentials: 'include',
|
||||
});
|
||||
return handleResponse<TeamDetail>(response);
|
||||
}
|
||||
|
||||
export async function deleteTeam(slug: string): Promise<void> {
|
||||
const response = await fetch(`${API_BASE}/teams/${slug}`, {
|
||||
method: 'DELETE',
|
||||
credentials: 'include',
|
||||
});
|
||||
if (!response.ok) {
|
||||
const error = await response.json().catch(() => ({ detail: 'Unknown error' }));
|
||||
throw new ApiError(error.detail || `HTTP ${response.status}`, response.status);
|
||||
}
|
||||
}
|
||||
|
||||
export async function listTeamMembers(slug: string): Promise<TeamMember[]> {
|
||||
const response = await fetch(`${API_BASE}/teams/${slug}/members`, {
|
||||
credentials: 'include',
|
||||
});
|
||||
return handleResponse<TeamMember[]>(response);
|
||||
}
|
||||
|
||||
export async function addTeamMember(slug: string, data: TeamMemberCreate): Promise<TeamMember> {
|
||||
const response = await fetch(`${API_BASE}/teams/${slug}/members`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data),
|
||||
credentials: 'include',
|
||||
});
|
||||
return handleResponse<TeamMember>(response);
|
||||
}
|
||||
|
||||
export async function updateTeamMember(
|
||||
slug: string,
|
||||
username: string,
|
||||
data: TeamMemberUpdate
|
||||
): Promise<TeamMember> {
|
||||
const response = await fetch(`${API_BASE}/teams/${slug}/members/${username}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data),
|
||||
credentials: 'include',
|
||||
});
|
||||
return handleResponse<TeamMember>(response);
|
||||
}
|
||||
|
||||
export async function removeTeamMember(slug: string, username: string): Promise<void> {
|
||||
const response = await fetch(`${API_BASE}/teams/${slug}/members/${username}`, {
|
||||
method: 'DELETE',
|
||||
credentials: 'include',
|
||||
});
|
||||
if (!response.ok) {
|
||||
const error = await response.json().catch(() => ({ detail: 'Unknown error' }));
|
||||
throw new ApiError(error.detail || `HTTP ${response.status}`, response.status);
|
||||
}
|
||||
}
|
||||
|
||||
export async function listTeamProjects(
|
||||
slug: string,
|
||||
params: ProjectListParams = {}
|
||||
): Promise<PaginatedResponse<Project>> {
|
||||
const query = buildQueryString(params as Record<string, unknown>);
|
||||
const response = await fetch(`${API_BASE}/teams/${slug}/projects${query}`, {
|
||||
credentials: 'include',
|
||||
});
|
||||
return handleResponse<PaginatedResponse<Project>>(response);
|
||||
}
|
||||
|
||||
// User search (for autocomplete)
|
||||
export interface UserSearchResult {
|
||||
id: string;
|
||||
username: string;
|
||||
is_admin: boolean;
|
||||
}
|
||||
|
||||
export async function searchUsers(query: string, limit: number = 10): Promise<UserSearchResult[]> {
|
||||
const response = await fetch(`${API_BASE}/users/search?q=${encodeURIComponent(query)}&limit=${limit}`, {
|
||||
credentials: 'include',
|
||||
});
|
||||
return handleResponse<UserSearchResult[]>(response);
|
||||
}
|
||||
|
||||
@@ -114,3 +114,32 @@
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Access source styling */
|
||||
.access-source {
|
||||
display: inline-block;
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.access-source--explicit {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.access-source--team {
|
||||
background: var(--color-info-bg, #e3f2fd);
|
||||
color: var(--color-info, #1976d2);
|
||||
}
|
||||
|
||||
/* Team access row styling */
|
||||
.team-access-row {
|
||||
background: var(--bg-secondary, #fafafa);
|
||||
}
|
||||
|
||||
.team-access-row td.actions .text-muted {
|
||||
font-size: 0.8125rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@@ -208,85 +208,104 @@ export function AccessManagement({ projectName }: AccessManagementProps) {
|
||||
<tr>
|
||||
<th>User</th>
|
||||
<th>Access Level</th>
|
||||
<th>Source</th>
|
||||
<th>Granted</th>
|
||||
<th>Expires</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{permissions.map((p) => (
|
||||
<tr key={p.id}>
|
||||
<td>{p.user_id}</td>
|
||||
<td>
|
||||
{editingUser === p.user_id ? (
|
||||
<select
|
||||
value={editLevel}
|
||||
onChange={(e) => setEditLevel(e.target.value as AccessLevel)}
|
||||
disabled={submitting}
|
||||
>
|
||||
<option value="read">Read</option>
|
||||
<option value="write">Write</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
) : (
|
||||
<span className={`access-badge access-badge--${p.level}`}>
|
||||
{p.level}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td>{new Date(p.created_at).toLocaleDateString()}</td>
|
||||
<td>
|
||||
{editingUser === p.user_id ? (
|
||||
<input
|
||||
type="date"
|
||||
value={editExpiresAt}
|
||||
onChange={(e) => setEditExpiresAt(e.target.value)}
|
||||
disabled={submitting}
|
||||
min={new Date().toISOString().split('T')[0]}
|
||||
/>
|
||||
) : (
|
||||
formatExpiration(p.expires_at)
|
||||
)}
|
||||
</td>
|
||||
<td className="actions">
|
||||
{editingUser === p.user_id ? (
|
||||
<>
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() => handleUpdate(p.user_id)}
|
||||
{permissions.map((p) => {
|
||||
const isTeamBased = p.source === 'team';
|
||||
return (
|
||||
<tr key={p.id} className={isTeamBased ? 'team-access-row' : ''}>
|
||||
<td>{p.user_id}</td>
|
||||
<td>
|
||||
{editingUser === p.user_id && !isTeamBased ? (
|
||||
<select
|
||||
value={editLevel}
|
||||
onChange={(e) => setEditLevel(e.target.value as AccessLevel)}
|
||||
disabled={submitting}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={cancelEdit}
|
||||
<option value="read">Read</option>
|
||||
<option value="write">Write</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
) : (
|
||||
<span className={`access-badge access-badge--${p.level}`}>
|
||||
{p.level}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
{isTeamBased ? (
|
||||
<span className="access-source access-source--team" title={`Team role: ${p.team_role}`}>
|
||||
Team: {p.team_slug}
|
||||
</span>
|
||||
) : (
|
||||
<span className="access-source access-source--explicit">
|
||||
Explicit
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td>{new Date(p.created_at).toLocaleDateString()}</td>
|
||||
<td>
|
||||
{editingUser === p.user_id && !isTeamBased ? (
|
||||
<input
|
||||
type="date"
|
||||
value={editExpiresAt}
|
||||
onChange={(e) => setEditExpiresAt(e.target.value)}
|
||||
disabled={submitting}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={() => startEdit(p)}
|
||||
disabled={submitting}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm btn-danger"
|
||||
onClick={() => handleRevoke(p.user_id)}
|
||||
disabled={submitting}
|
||||
>
|
||||
Revoke
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
min={new Date().toISOString().split('T')[0]}
|
||||
/>
|
||||
) : (
|
||||
formatExpiration(p.expires_at)
|
||||
)}
|
||||
</td>
|
||||
<td className="actions">
|
||||
{isTeamBased ? (
|
||||
<span className="text-muted" title="Manage access via team settings">
|
||||
Via team
|
||||
</span>
|
||||
) : editingUser === p.user_id ? (
|
||||
<>
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() => handleUpdate(p.user_id)}
|
||||
disabled={submitting}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={cancelEdit}
|
||||
disabled={submitting}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={() => startEdit(p)}
|
||||
disabled={submitting}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm btn-danger"
|
||||
onClick={() => handleRevoke(p.user_id)}
|
||||
disabled={submitting}
|
||||
>
|
||||
Revoke
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
|
||||
@@ -284,7 +284,11 @@
|
||||
.footer-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.footer-icon {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
@@ -292,6 +296,10 @@
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.footer-separator {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.footer-tagline {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
|
||||
@@ -2,6 +2,8 @@ import { ReactNode, useState, useRef, useEffect } from 'react';
|
||||
import { Link, NavLink, useLocation, useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { GlobalSearch } from './GlobalSearch';
|
||||
import { listTeams } from '../api';
|
||||
import { TeamDetail } from '../types';
|
||||
import './Layout.css';
|
||||
|
||||
interface LayoutProps {
|
||||
@@ -13,8 +15,22 @@ function Layout({ children }: LayoutProps) {
|
||||
const navigate = useNavigate();
|
||||
const { user, loading, logout } = useAuth();
|
||||
const [showUserMenu, setShowUserMenu] = useState(false);
|
||||
const [userTeams, setUserTeams] = useState<TeamDetail[]>([]);
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Fetch user's teams
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
listTeams({ limit: 10 }).then(data => {
|
||||
setUserTeams(data.items);
|
||||
}).catch(() => {
|
||||
setUserTeams([]);
|
||||
});
|
||||
} else {
|
||||
setUserTeams([]);
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
// Close menu when clicking outside
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
@@ -77,6 +93,20 @@ function Layout({ children }: LayoutProps) {
|
||||
</svg>
|
||||
Dashboard
|
||||
</Link>
|
||||
{user && userTeams.length > 0 && (
|
||||
<Link
|
||||
to={userTeams.length === 1 ? `/teams/${userTeams[0].slug}` : '/teams'}
|
||||
className={location.pathname.startsWith('/teams') ? 'active' : ''}
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
{userTeams.length === 1 ? 'Team' : 'Teams'}
|
||||
</Link>
|
||||
)}
|
||||
<a href="/docs" className="nav-link-muted">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||
@@ -188,7 +218,17 @@ function Layout({ children }: LayoutProps) {
|
||||
<footer className="footer">
|
||||
<div className="container footer-content">
|
||||
<div className="footer-brand">
|
||||
<svg className="footer-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 14 Q6 8 3 8 Q6 4 6 4 Q6 4 9 8 Q6 8 6 14" fill="currentColor" opacity="0.6"/>
|
||||
<rect x="5.25" y="13" width="1.5" height="4" fill="currentColor" opacity="0.6"/>
|
||||
<path d="M12 12 Q12 5 8 5 Q12 1 12 1 Q12 1 16 5 Q12 5 12 12" fill="currentColor"/>
|
||||
<rect x="11.25" y="11" width="1.5" height="5" fill="currentColor"/>
|
||||
<path d="M18 14 Q18 8 15 8 Q18 4 18 4 Q18 4 21 8 Q18 8 18 14" fill="currentColor" opacity="0.6"/>
|
||||
<rect x="17.25" y="13" width="1.5" height="4" fill="currentColor" opacity="0.6"/>
|
||||
<ellipse cx="12" cy="19" rx="9" ry="1.5" fill="currentColor" opacity="0.3"/>
|
||||
</svg>
|
||||
<span className="footer-logo">Orchard</span>
|
||||
<span className="footer-separator">·</span>
|
||||
<span className="footer-tagline">Content-Addressable Storage</span>
|
||||
</div>
|
||||
<div className="footer-links">
|
||||
|
||||
163
frontend/src/components/TeamSelector.css
Normal file
163
frontend/src/components/TeamSelector.css
Normal file
@@ -0,0 +1,163 @@
|
||||
.team-selector {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.team-selector-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-primary);
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.team-selector-trigger:hover:not(:disabled) {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--border-secondary);
|
||||
}
|
||||
|
||||
.team-selector-trigger:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.team-selector-name {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.team-selector-chevron {
|
||||
transition: transform 0.15s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.team-selector-chevron.open {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.team-selector-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
min-width: 240px;
|
||||
margin-top: 0.25rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.team-selector-empty {
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.team-selector-empty p {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.team-selector-create-link {
|
||||
color: var(--accent-primary);
|
||||
font-size: 0.875rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.team-selector-create-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.team-selector-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0.25rem 0;
|
||||
max-height: 280px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.team-selector-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background 0.1s ease;
|
||||
}
|
||||
|
||||
.team-selector-item:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.team-selector-item.selected {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.team-selector-item-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.team-selector-item-name {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.team-selector-item-meta {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.team-selector-item-role {
|
||||
font-size: 0.75rem;
|
||||
text-transform: capitalize;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.team-selector-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-top: 1px solid var(--border-primary);
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.team-selector-link {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.team-selector-link:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.team-selector-link-primary {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.team-selector-link-primary:hover {
|
||||
color: var(--accent-primary-hover);
|
||||
}
|
||||
141
frontend/src/components/TeamSelector.tsx
Normal file
141
frontend/src/components/TeamSelector.tsx
Normal file
@@ -0,0 +1,141 @@
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTeam } from '../contexts/TeamContext';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { TeamDetail } from '../types';
|
||||
import './TeamSelector.css';
|
||||
|
||||
export function TeamSelector() {
|
||||
const { user } = useAuth();
|
||||
const { teams, currentTeam, loading, setCurrentTeam } = useTeam();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
}
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
// Don't show if not authenticated
|
||||
if (!user) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleTeamSelect = (team: TeamDetail) => {
|
||||
setCurrentTeam(team);
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
const roleColors: Record<string, string> = {
|
||||
owner: 'var(--color-success)',
|
||||
admin: 'var(--color-primary)',
|
||||
member: 'var(--color-text-muted)',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="team-selector" ref={dropdownRef}>
|
||||
<button
|
||||
className="team-selector-trigger"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
disabled={loading}
|
||||
aria-expanded={isOpen}
|
||||
aria-haspopup="listbox"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
<span className="team-selector-name">
|
||||
{loading ? 'Loading...' : currentTeam?.name || 'Select Team'}
|
||||
</span>
|
||||
<svg
|
||||
className={`team-selector-chevron ${isOpen ? 'open' : ''}`}
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="team-selector-dropdown" role="listbox">
|
||||
{teams.length === 0 ? (
|
||||
<div className="team-selector-empty">
|
||||
<p>You're not a member of any teams yet.</p>
|
||||
<Link
|
||||
to="/teams/new"
|
||||
className="team-selector-create-link"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
Create your first team
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<ul className="team-selector-list">
|
||||
{teams.map(team => (
|
||||
<li key={team.id}>
|
||||
<button
|
||||
className={`team-selector-item ${currentTeam?.id === team.id ? 'selected' : ''}`}
|
||||
onClick={() => handleTeamSelect(team)}
|
||||
role="option"
|
||||
aria-selected={currentTeam?.id === team.id}
|
||||
>
|
||||
<div className="team-selector-item-info">
|
||||
<span className="team-selector-item-name">{team.name}</span>
|
||||
<span className="team-selector-item-meta">
|
||||
{team.project_count} project{team.project_count !== 1 ? 's' : ''}
|
||||
</span>
|
||||
</div>
|
||||
{team.user_role && (
|
||||
<span
|
||||
className="team-selector-item-role"
|
||||
style={{ color: roleColors[team.user_role] || roleColors.member }}
|
||||
>
|
||||
{team.user_role}
|
||||
</span>
|
||||
)}
|
||||
{currentTeam?.id === team.id && (
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="team-selector-footer">
|
||||
<Link
|
||||
to="/teams"
|
||||
className="team-selector-link"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
View all teams
|
||||
</Link>
|
||||
<Link
|
||||
to="/teams/new"
|
||||
className="team-selector-link team-selector-link-primary"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
+ New Team
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
105
frontend/src/components/UserAutocomplete.css
Normal file
105
frontend/src/components/UserAutocomplete.css
Normal file
@@ -0,0 +1,105 @@
|
||||
.user-autocomplete {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.user-autocomplete__input-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-autocomplete__input {
|
||||
width: 100%;
|
||||
padding: 0.625rem 2.5rem 0.625rem 0.75rem;
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.user-autocomplete__input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.user-autocomplete__spinner {
|
||||
position: absolute;
|
||||
right: 0.75rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid var(--border-primary);
|
||||
border-top-color: var(--accent-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: translateY(-50%) rotate(360deg); }
|
||||
}
|
||||
|
||||
.user-autocomplete__dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: 4px;
|
||||
padding: 0.25rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
z-index: 100;
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.user-autocomplete__option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.user-autocomplete__option:hover,
|
||||
.user-autocomplete__option.selected {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.user-autocomplete__avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-autocomplete__user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-autocomplete__username {
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.user-autocomplete__admin-badge {
|
||||
font-size: 0.6875rem;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
171
frontend/src/components/UserAutocomplete.tsx
Normal file
171
frontend/src/components/UserAutocomplete.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { searchUsers, UserSearchResult } from '../api';
|
||||
import './UserAutocomplete.css';
|
||||
|
||||
interface UserAutocompleteProps {
|
||||
value: string;
|
||||
onChange: (username: string) => void;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
autoFocus?: boolean;
|
||||
}
|
||||
|
||||
export function UserAutocomplete({
|
||||
value,
|
||||
onChange,
|
||||
placeholder = 'Search users...',
|
||||
disabled = false,
|
||||
autoFocus = false,
|
||||
}: UserAutocompleteProps) {
|
||||
const [query, setQuery] = useState(value);
|
||||
const [results, setResults] = useState<UserSearchResult[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [selectedIndex, setSelectedIndex] = useState(-1);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const debounceRef = useRef<ReturnType<typeof setTimeout>>();
|
||||
|
||||
// Search for users with debounce
|
||||
const doSearch = useCallback(async (searchQuery: string) => {
|
||||
if (searchQuery.length < 1) {
|
||||
setResults([]);
|
||||
setIsOpen(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const users = await searchUsers(searchQuery);
|
||||
setResults(users);
|
||||
setIsOpen(users.length > 0);
|
||||
setSelectedIndex(-1);
|
||||
} catch {
|
||||
setResults([]);
|
||||
setIsOpen(false);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Handle input change with debounce
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newValue = e.target.value;
|
||||
setQuery(newValue);
|
||||
onChange(newValue); // Update parent immediately for form validation
|
||||
|
||||
// Debounce the search
|
||||
if (debounceRef.current) {
|
||||
clearTimeout(debounceRef.current);
|
||||
}
|
||||
debounceRef.current = setTimeout(() => {
|
||||
doSearch(newValue);
|
||||
}, 200);
|
||||
};
|
||||
|
||||
// Handle selecting a user
|
||||
const handleSelect = (user: UserSearchResult) => {
|
||||
setQuery(user.username);
|
||||
onChange(user.username);
|
||||
setIsOpen(false);
|
||||
setResults([]);
|
||||
inputRef.current?.focus();
|
||||
};
|
||||
|
||||
// Handle keyboard navigation
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (!isOpen) return;
|
||||
|
||||
switch (e.key) {
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
setSelectedIndex(prev => (prev < results.length - 1 ? prev + 1 : prev));
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
setSelectedIndex(prev => (prev > 0 ? prev - 1 : -1));
|
||||
break;
|
||||
case 'Enter':
|
||||
e.preventDefault();
|
||||
if (selectedIndex >= 0 && results[selectedIndex]) {
|
||||
handleSelect(results[selectedIndex]);
|
||||
}
|
||||
break;
|
||||
case 'Escape':
|
||||
setIsOpen(false);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
// Sync external value changes
|
||||
useEffect(() => {
|
||||
setQuery(value);
|
||||
}, [value]);
|
||||
|
||||
// Cleanup debounce on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (debounceRef.current) {
|
||||
clearTimeout(debounceRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="user-autocomplete" ref={containerRef}>
|
||||
<div className="user-autocomplete__input-wrapper">
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={handleInputChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
onFocus={() => query.length >= 1 && results.length > 0 && setIsOpen(true)}
|
||||
placeholder={placeholder}
|
||||
disabled={disabled}
|
||||
autoFocus={autoFocus}
|
||||
autoComplete="off"
|
||||
className="user-autocomplete__input"
|
||||
/>
|
||||
{loading && (
|
||||
<div className="user-autocomplete__spinner" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isOpen && results.length > 0 && (
|
||||
<ul className="user-autocomplete__dropdown">
|
||||
{results.map((user, index) => (
|
||||
<li
|
||||
key={user.id}
|
||||
className={`user-autocomplete__option ${index === selectedIndex ? 'selected' : ''}`}
|
||||
onClick={() => handleSelect(user)}
|
||||
onMouseEnter={() => setSelectedIndex(index)}
|
||||
>
|
||||
<div className="user-autocomplete__avatar">
|
||||
{user.username.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<div className="user-autocomplete__user-info">
|
||||
<span className="user-autocomplete__username">{user.username}</span>
|
||||
{user.is_admin && (
|
||||
<span className="user-autocomplete__admin-badge">Admin</span>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
110
frontend/src/contexts/TeamContext.tsx
Normal file
110
frontend/src/contexts/TeamContext.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
import { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
|
||||
import { TeamDetail } from '../types';
|
||||
import { listTeams } from '../api';
|
||||
import { useAuth } from './AuthContext';
|
||||
|
||||
const SELECTED_TEAM_KEY = 'orchard_selected_team';
|
||||
|
||||
interface TeamContextType {
|
||||
teams: TeamDetail[];
|
||||
currentTeam: TeamDetail | null;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
setCurrentTeam: (team: TeamDetail | null) => void;
|
||||
refreshTeams: () => Promise<void>;
|
||||
clearError: () => void;
|
||||
}
|
||||
|
||||
const TeamContext = createContext<TeamContextType | undefined>(undefined);
|
||||
|
||||
interface TeamProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function TeamProvider({ children }: TeamProviderProps) {
|
||||
const { user } = useAuth();
|
||||
const [teams, setTeams] = useState<TeamDetail[]>([]);
|
||||
const [currentTeam, setCurrentTeamState] = useState<TeamDetail | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const loadTeams = useCallback(async () => {
|
||||
if (!user) {
|
||||
setTeams([]);
|
||||
setCurrentTeamState(null);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await listTeams({ limit: 100 });
|
||||
setTeams(response.items);
|
||||
|
||||
// Try to restore previously selected team
|
||||
const savedSlug = localStorage.getItem(SELECTED_TEAM_KEY);
|
||||
if (savedSlug) {
|
||||
const savedTeam = response.items.find(t => t.slug === savedSlug);
|
||||
if (savedTeam) {
|
||||
setCurrentTeamState(savedTeam);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-select first team if none selected
|
||||
if (response.items.length > 0 && !currentTeam) {
|
||||
setCurrentTeamState(response.items[0]);
|
||||
localStorage.setItem(SELECTED_TEAM_KEY, response.items[0].slug);
|
||||
}
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : 'Failed to load teams';
|
||||
setError(message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [user, currentTeam]);
|
||||
|
||||
// Load teams when user changes
|
||||
useEffect(() => {
|
||||
loadTeams();
|
||||
}, [user]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
const setCurrentTeam = useCallback((team: TeamDetail | null) => {
|
||||
setCurrentTeamState(team);
|
||||
if (team) {
|
||||
localStorage.setItem(SELECTED_TEAM_KEY, team.slug);
|
||||
} else {
|
||||
localStorage.removeItem(SELECTED_TEAM_KEY);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const refreshTeams = useCallback(async () => {
|
||||
await loadTeams();
|
||||
}, [loadTeams]);
|
||||
|
||||
const clearError = useCallback(() => {
|
||||
setError(null);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<TeamContext.Provider value={{
|
||||
teams,
|
||||
currentTeam,
|
||||
loading,
|
||||
error,
|
||||
setCurrentTeam,
|
||||
refreshTeams,
|
||||
clearError,
|
||||
}}>
|
||||
{children}
|
||||
</TeamContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useTeam() {
|
||||
const context = useContext(TeamContext);
|
||||
if (context === undefined) {
|
||||
throw new Error('useTeam must be used within a TeamProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
@@ -179,16 +179,18 @@ function Home() {
|
||||
</form>
|
||||
)}
|
||||
|
||||
<div className="list-controls">
|
||||
<FilterDropdown
|
||||
label="Visibility"
|
||||
options={VISIBILITY_OPTIONS}
|
||||
value={visibility}
|
||||
onChange={handleVisibilityChange}
|
||||
/>
|
||||
</div>
|
||||
{user && (
|
||||
<div className="list-controls">
|
||||
<FilterDropdown
|
||||
label="Visibility"
|
||||
options={VISIBILITY_OPTIONS}
|
||||
value={visibility}
|
||||
onChange={handleVisibilityChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{hasActiveFilters && (
|
||||
{user && hasActiveFilters && (
|
||||
<FilterChipGroup onClearAll={clearFilters}>
|
||||
{visibility && (
|
||||
<FilterChip
|
||||
|
||||
@@ -211,7 +211,7 @@ function ProjectPage() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="page-header__actions">
|
||||
{canAdmin && (
|
||||
{canAdmin && !project.team_id && (
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
onClick={() => navigate(`/project/${projectName}/settings`)}
|
||||
|
||||
@@ -10,7 +10,6 @@ import {
|
||||
ForbiddenError,
|
||||
} from '../api';
|
||||
import { Breadcrumb } from '../components/Breadcrumb';
|
||||
import { AccessManagement } from '../components/AccessManagement';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import './ProjectSettingsPage.css';
|
||||
|
||||
@@ -236,9 +235,6 @@ function ProjectSettingsPage() {
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Access Management Section */}
|
||||
<AccessManagement projectName={projectName!} />
|
||||
|
||||
{/* Danger Zone Section */}
|
||||
<div className="project-settings-danger-zone">
|
||||
<h2>Danger Zone</h2>
|
||||
|
||||
270
frontend/src/pages/TeamDashboardPage.css
Normal file
270
frontend/src/pages/TeamDashboardPage.css
Normal file
@@ -0,0 +1,270 @@
|
||||
.team-dashboard {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
.team-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.team-header-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.team-header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.team-header h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.team-slug {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.team-description {
|
||||
margin: 0 0 0.5rem;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9375rem;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.team-header-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.team-section {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/* Table utility classes */
|
||||
.text-muted {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
border: none;
|
||||
padding: 0.375rem;
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.section-footer {
|
||||
margin-top: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.view-all-link {
|
||||
font-size: 0.875rem;
|
||||
color: var(--accent-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.view-all-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* States */
|
||||
.loading-state,
|
||||
.error-state {
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
}
|
||||
|
||||
.error-state h2 {
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.error-state p {
|
||||
margin: 0 0 1.5rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px dashed var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
margin-top: 0.5rem !important;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--accent-primary-hover);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
max-height: 90vh;
|
||||
box-shadow: var(--shadow-lg);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-content h2 {
|
||||
margin: 0 0 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Form */
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.form-group input[type="text"],
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 0.625rem 0.75rem;
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.checkbox-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox-group input[type="checkbox"] {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
display: block;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.empty-state .btn {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
279
frontend/src/pages/TeamDashboardPage.tsx
Normal file
279
frontend/src/pages/TeamDashboardPage.tsx
Normal file
@@ -0,0 +1,279 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { Link, useParams, useNavigate } from 'react-router-dom';
|
||||
import { TeamDetail, Project, PaginatedResponse } from '../types';
|
||||
import { getTeam, listTeamProjects, createProject } from '../api';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { Badge } from '../components/Badge';
|
||||
import { Breadcrumb } from '../components/Breadcrumb';
|
||||
import { DataTable } from '../components/DataTable';
|
||||
import './TeamDashboardPage.css';
|
||||
|
||||
function TeamDashboardPage() {
|
||||
const { slug } = useParams<{ slug: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAuth();
|
||||
const [team, setTeam] = useState<TeamDetail | null>(null);
|
||||
const [projects, setProjects] = useState<PaginatedResponse<Project> | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [showProjectForm, setShowProjectForm] = useState(false);
|
||||
const [newProject, setNewProject] = useState({ name: '', description: '', is_public: true });
|
||||
const [creating, setCreating] = useState(false);
|
||||
|
||||
const loadTeamData = useCallback(async () => {
|
||||
if (!slug) return;
|
||||
try {
|
||||
setLoading(true);
|
||||
const [teamData, projectsData] = await Promise.all([
|
||||
getTeam(slug),
|
||||
listTeamProjects(slug, { limit: 10 }),
|
||||
]);
|
||||
setTeam(teamData);
|
||||
setProjects(projectsData);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load team');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [slug]);
|
||||
|
||||
useEffect(() => {
|
||||
loadTeamData();
|
||||
}, [loadTeamData]);
|
||||
|
||||
async function handleCreateProject(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!team) return;
|
||||
try {
|
||||
setCreating(true);
|
||||
const project = await createProject({ ...newProject, team_id: team.id });
|
||||
setNewProject({ name: '', description: '', is_public: true });
|
||||
setShowProjectForm(false);
|
||||
navigate(`/project/${project.name}`);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to create project');
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="team-dashboard">
|
||||
<div className="loading-state">Loading team...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !team) {
|
||||
return (
|
||||
<div className="team-dashboard">
|
||||
<div className="error-state">
|
||||
<h2>Error loading team</h2>
|
||||
<p>{error || 'Team not found'}</p>
|
||||
<Link to="/teams" className="btn btn-primary">Back to Teams</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const isAdminOrOwner = team.user_role === 'owner' || team.user_role === 'admin' || user?.is_admin;
|
||||
|
||||
const roleVariants: Record<string, 'success' | 'info' | 'default'> = {
|
||||
owner: 'success',
|
||||
admin: 'info',
|
||||
member: 'default',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="team-dashboard">
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ label: 'Teams', href: '/teams' },
|
||||
{ label: team.name },
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="team-header">
|
||||
<div className="team-header-left">
|
||||
<div className="team-header-title">
|
||||
<h1>{team.name}</h1>
|
||||
{team.user_role && (
|
||||
<Badge variant={roleVariants[team.user_role] || 'default'}>
|
||||
{team.user_role}
|
||||
</Badge>
|
||||
)}
|
||||
<span className="team-slug">@{team.slug}</span>
|
||||
</div>
|
||||
{team.description && (
|
||||
<p className="team-description">{team.description}</p>
|
||||
)}
|
||||
</div>
|
||||
{isAdminOrOwner && (
|
||||
<div className="team-header-actions">
|
||||
<Link to={`/teams/${slug}/members`} className="btn btn-secondary">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
Members
|
||||
</Link>
|
||||
<Link to={`/teams/${slug}/settings`} className="btn btn-secondary">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
||||
</svg>
|
||||
Settings
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showProjectForm && (
|
||||
<div className="modal-overlay" onClick={() => setShowProjectForm(false)}>
|
||||
<div className="modal-content" onClick={e => e.stopPropagation()}>
|
||||
<h2>Create New Project</h2>
|
||||
<form onSubmit={handleCreateProject}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="project-name">Project Name</label>
|
||||
<input
|
||||
id="project-name"
|
||||
type="text"
|
||||
value={newProject.name}
|
||||
onChange={e => setNewProject({ ...newProject, name: e.target.value })}
|
||||
placeholder="my-project"
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="project-description">Description (optional)</label>
|
||||
<textarea
|
||||
id="project-description"
|
||||
value={newProject.description}
|
||||
onChange={e => setNewProject({ ...newProject, description: e.target.value })}
|
||||
placeholder="What is this project for?"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group checkbox-group">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={newProject.is_public}
|
||||
onChange={e => setNewProject({ ...newProject, is_public: e.target.checked })}
|
||||
/>
|
||||
Public project
|
||||
</label>
|
||||
<span className="form-hint">Public projects are visible to everyone</span>
|
||||
</div>
|
||||
<div className="form-actions">
|
||||
<button type="button" className="btn btn-secondary" onClick={() => setShowProjectForm(false)}>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary" disabled={creating}>
|
||||
{creating ? 'Creating...' : 'Create Project'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="team-section">
|
||||
<div className="section-header">
|
||||
<h2>Projects</h2>
|
||||
{isAdminOrOwner && (
|
||||
<button className="btn btn-primary btn-sm" onClick={() => setShowProjectForm(true)}>
|
||||
+ New Project
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{projects?.items.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
<p>No projects in this team yet.</p>
|
||||
{isAdminOrOwner && (
|
||||
<button className="btn btn-primary" onClick={() => setShowProjectForm(true)}>
|
||||
Create Project
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<DataTable
|
||||
data={projects?.items || []}
|
||||
keyExtractor={(project) => project.id}
|
||||
onRowClick={(project) => navigate(`/project/${project.name}`)}
|
||||
columns={[
|
||||
{
|
||||
key: 'name',
|
||||
header: 'Name',
|
||||
render: (project) => (
|
||||
<Link
|
||||
to={`/project/${project.name}`}
|
||||
className="cell-name"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{project.name}
|
||||
</Link>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'description',
|
||||
header: 'Description',
|
||||
className: 'cell-description',
|
||||
render: (project) => project.description || <span className="text-muted">—</span>,
|
||||
},
|
||||
{
|
||||
key: 'visibility',
|
||||
header: 'Visibility',
|
||||
render: (project) => (
|
||||
<Badge variant={project.is_public ? 'public' : 'private'}>
|
||||
{project.is_public ? 'Public' : 'Private'}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'created_by',
|
||||
header: 'Created By',
|
||||
render: (project) => <span className="text-muted">{project.created_by}</span>,
|
||||
},
|
||||
...(isAdminOrOwner ? [{
|
||||
key: 'actions',
|
||||
header: '',
|
||||
render: (project: Project) => (
|
||||
<button
|
||||
className="btn btn-sm btn-ghost"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigate(`/project/${project.name}/settings`);
|
||||
}}
|
||||
title="Settings"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
||||
</svg>
|
||||
</button>
|
||||
),
|
||||
}] : []),
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
|
||||
{projects && projects.pagination.total > 10 && (
|
||||
<div className="section-footer">
|
||||
<Link to={`/teams/${slug}/projects`} className="view-all-link">
|
||||
View all {projects.pagination.total} projects
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamDashboardPage;
|
||||
247
frontend/src/pages/TeamMembersPage.css
Normal file
247
frontend/src/pages/TeamMembersPage.css
Normal file
@@ -0,0 +1,247 @@
|
||||
.team-members {
|
||||
padding: 1.5rem 0;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
margin: 0;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
/* Member cell in table */
|
||||
.member-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.member-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.member-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.member-username {
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.you-badge {
|
||||
font-size: 0.75rem;
|
||||
font-weight: normal;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.member-email {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-muted);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.role-select {
|
||||
padding: 0.375rem 0.75rem;
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.role-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* Messages */
|
||||
.error-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
background: var(--error-bg);
|
||||
border: 1px solid var(--error);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--error);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.error-dismiss {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* States */
|
||||
.loading-state,
|
||||
.error-state {
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
}
|
||||
|
||||
.error-state h2 {
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.error-state p {
|
||||
margin: 0 0 1.5rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.modal-content h2 {
|
||||
margin: 0 0 1.5rem;
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Form */
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.375rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.9375rem;
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: var(--accent-primary-hover);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
padding: 0.375rem;
|
||||
}
|
||||
|
||||
.btn-danger-ghost {
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.btn-danger-ghost:hover:not(:disabled) {
|
||||
background: var(--error-bg);
|
||||
color: var(--error);
|
||||
}
|
||||
311
frontend/src/pages/TeamMembersPage.tsx
Normal file
311
frontend/src/pages/TeamMembersPage.tsx
Normal file
@@ -0,0 +1,311 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { TeamDetail, TeamMember, TeamMemberCreate, TeamRole } from '../types';
|
||||
import {
|
||||
getTeam,
|
||||
listTeamMembers,
|
||||
addTeamMember,
|
||||
updateTeamMember,
|
||||
removeTeamMember,
|
||||
} from '../api';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { Badge } from '../components/Badge';
|
||||
import { Breadcrumb } from '../components/Breadcrumb';
|
||||
import { DataTable } from '../components/DataTable';
|
||||
import { UserAutocomplete } from '../components/UserAutocomplete';
|
||||
import './TeamMembersPage.css';
|
||||
|
||||
function TeamMembersPage() {
|
||||
const { slug } = useParams<{ slug: string }>();
|
||||
const { user } = useAuth();
|
||||
const [team, setTeam] = useState<TeamDetail | null>(null);
|
||||
const [members, setMembers] = useState<TeamMember[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [showAddForm, setShowAddForm] = useState(false);
|
||||
const [adding, setAdding] = useState(false);
|
||||
const [newMember, setNewMember] = useState<TeamMemberCreate>({ username: '', role: 'member' });
|
||||
const [editingMember, setEditingMember] = useState<string | null>(null);
|
||||
const [removingMember, setRemovingMember] = useState<string | null>(null);
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
if (!slug) return;
|
||||
try {
|
||||
setLoading(true);
|
||||
const [teamData, membersData] = await Promise.all([
|
||||
getTeam(slug),
|
||||
listTeamMembers(slug),
|
||||
]);
|
||||
setTeam(teamData);
|
||||
setMembers(membersData);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load team');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [slug]);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [loadData]);
|
||||
|
||||
async function handleAddMember(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!slug) return;
|
||||
try {
|
||||
setAdding(true);
|
||||
setError(null);
|
||||
await addTeamMember(slug, newMember);
|
||||
setNewMember({ username: '', role: 'member' });
|
||||
setShowAddForm(false);
|
||||
loadData();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to add member');
|
||||
} finally {
|
||||
setAdding(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRoleChange(username: string, newRole: TeamRole) {
|
||||
if (!slug) return;
|
||||
try {
|
||||
setEditingMember(username);
|
||||
setError(null);
|
||||
await updateTeamMember(slug, username, { role: newRole });
|
||||
loadData();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to update member');
|
||||
} finally {
|
||||
setEditingMember(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRemoveMember(username: string) {
|
||||
if (!slug) return;
|
||||
if (!confirm(`Remove ${username} from the team?`)) return;
|
||||
try {
|
||||
setRemovingMember(username);
|
||||
setError(null);
|
||||
await removeTeamMember(slug, username);
|
||||
loadData();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to remove member');
|
||||
} finally {
|
||||
setRemovingMember(null);
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="team-members">
|
||||
<div className="loading-state">Loading team members...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error && !team) {
|
||||
return (
|
||||
<div className="team-members">
|
||||
<div className="error-state">
|
||||
<h2>Error loading team</h2>
|
||||
<p>{error}</p>
|
||||
<Link to="/teams" className="btn btn-primary">Back to Teams</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!team) return null;
|
||||
|
||||
const isOwner = team.user_role === 'owner' || user?.is_admin;
|
||||
const isAdmin = team.user_role === 'admin' || isOwner;
|
||||
|
||||
const roleVariants: Record<string, 'success' | 'info' | 'default'> = {
|
||||
owner: 'success',
|
||||
admin: 'info',
|
||||
member: 'default',
|
||||
};
|
||||
|
||||
const roles: TeamRole[] = ['owner', 'admin', 'member'];
|
||||
|
||||
return (
|
||||
<div className="team-members">
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ label: 'Teams', href: '/teams' },
|
||||
{ label: team.name, href: `/teams/${slug}` },
|
||||
{ label: 'Members' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="page-header">
|
||||
<h1>Team Members</h1>
|
||||
{isAdmin && (
|
||||
<button className="btn btn-primary" onClick={() => setShowAddForm(true)}>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="8.5" cy="7" r="4"/>
|
||||
<line x1="20" y1="8" x2="20" y2="14"/>
|
||||
<line x1="23" y1="11" x2="17" y2="11"/>
|
||||
</svg>
|
||||
Invite Member
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="error-message">
|
||||
{error}
|
||||
<button onClick={() => setError(null)} className="error-dismiss">×</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showAddForm && (
|
||||
<div className="modal-overlay" onClick={() => setShowAddForm(false)}>
|
||||
<div className="modal-content" onClick={e => e.stopPropagation()}>
|
||||
<h2>Invite Member</h2>
|
||||
<form onSubmit={handleAddMember}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="username">Username</label>
|
||||
<UserAutocomplete
|
||||
value={newMember.username}
|
||||
onChange={(username) => setNewMember({ ...newMember, username })}
|
||||
placeholder="Search for a user..."
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="role">Role</label>
|
||||
<select
|
||||
id="role"
|
||||
value={newMember.role}
|
||||
onChange={e => setNewMember({ ...newMember, role: e.target.value as TeamRole })}
|
||||
>
|
||||
<option value="member">Member - Can view team projects</option>
|
||||
<option value="admin">Admin - Can manage team settings and members</option>
|
||||
{isOwner && (
|
||||
<option value="owner">Owner - Full control, can delete team</option>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="form-actions">
|
||||
<button type="button" className="btn btn-secondary" onClick={() => setShowAddForm(false)}>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary" disabled={adding}>
|
||||
{adding ? 'Adding...' : 'Add Member'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DataTable
|
||||
data={members}
|
||||
keyExtractor={(member) => member.id}
|
||||
emptyMessage="No members in this team yet."
|
||||
columns={[
|
||||
{
|
||||
key: 'member',
|
||||
header: 'Member',
|
||||
render: (member) => {
|
||||
const isCurrentUser = user?.username === member.username;
|
||||
return (
|
||||
<div className="member-cell">
|
||||
<div className="member-avatar">
|
||||
{member.username.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<div className="member-details">
|
||||
<span className="member-username">
|
||||
{member.username}
|
||||
{isCurrentUser && <span className="you-badge">(you)</span>}
|
||||
</span>
|
||||
{member.email && (
|
||||
<span className="member-email">{member.email}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'role',
|
||||
header: 'Role',
|
||||
render: (member) => {
|
||||
const isCurrentUser = user?.username === member.username;
|
||||
const canModify = isAdmin && !isCurrentUser && (isOwner || member.role !== 'owner');
|
||||
|
||||
if (canModify) {
|
||||
return (
|
||||
<select
|
||||
value={member.role}
|
||||
onChange={e => handleRoleChange(member.username, e.target.value as TeamRole)}
|
||||
disabled={editingMember === member.username}
|
||||
className="role-select"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
{roles.map(role => (
|
||||
<option
|
||||
key={role}
|
||||
value={role}
|
||||
disabled={role === 'owner' && !isOwner}
|
||||
>
|
||||
{role.charAt(0).toUpperCase() + role.slice(1)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Badge variant={roleVariants[member.role] || 'default'}>
|
||||
{member.role}
|
||||
</Badge>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'joined',
|
||||
header: 'Joined',
|
||||
render: (member) => (
|
||||
<span className="text-muted">
|
||||
{new Date(member.created_at).toLocaleDateString()}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
...(isAdmin ? [{
|
||||
key: 'actions',
|
||||
header: '',
|
||||
render: (member: TeamMember) => {
|
||||
const isCurrentUser = user?.username === member.username;
|
||||
const canModify = isAdmin && !isCurrentUser && (isOwner || member.role !== 'owner');
|
||||
|
||||
if (!canModify) return null;
|
||||
|
||||
return (
|
||||
<button
|
||||
className="btn btn-icon btn-danger-ghost"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleRemoveMember(member.username);
|
||||
}}
|
||||
disabled={removingMember === member.username}
|
||||
title="Remove member"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M3 6h18"/>
|
||||
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
|
||||
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
},
|
||||
}] : []),
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamMembersPage;
|
||||
239
frontend/src/pages/TeamSettingsPage.css
Normal file
239
frontend/src/pages/TeamSettingsPage.css
Normal file
@@ -0,0 +1,239 @@
|
||||
.team-settings {
|
||||
padding: 1.5rem 0;
|
||||
max-width: 640px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.team-settings h1 {
|
||||
margin: 0 0 1.5rem;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.settings-form {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-section h2 {
|
||||
margin: 0 0 1rem;
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.375rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.9375rem;
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.input-disabled {
|
||||
background: var(--bg-elevated) !important;
|
||||
color: var(--text-muted) !important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
display: block;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Danger zone */
|
||||
.danger-zone {
|
||||
border-color: var(--error);
|
||||
background: var(--error-bg);
|
||||
}
|
||||
|
||||
.danger-zone h2 {
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.danger-warning {
|
||||
margin: 0 0 1rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Messages */
|
||||
.error-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
background: var(--error-bg);
|
||||
border: 1px solid var(--error);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--error);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.error-dismiss {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
background: var(--success-bg);
|
||||
border: 1px solid var(--success);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--success);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* States */
|
||||
.loading-state,
|
||||
.error-state {
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
}
|
||||
|
||||
.error-state h2 {
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.error-state p {
|
||||
margin: 0 0 1.5rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.modal-content h2 {
|
||||
margin: 0 0 1rem;
|
||||
font-size: 1.25rem;
|
||||
color: var(--error);
|
||||
}
|
||||
|
||||
.modal-content p {
|
||||
margin: 0 0 1rem;
|
||||
font-size: 0.9375rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.delete-confirm-input {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.9375rem;
|
||||
margin-bottom: 1rem;
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: var(--accent-primary-hover);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--error);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
background: #b91c1c;
|
||||
}
|
||||
251
frontend/src/pages/TeamSettingsPage.tsx
Normal file
251
frontend/src/pages/TeamSettingsPage.tsx
Normal file
@@ -0,0 +1,251 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useParams, useNavigate, Link } from 'react-router-dom';
|
||||
import { TeamDetail, TeamUpdate } from '../types';
|
||||
import { getTeam, updateTeam, deleteTeam } from '../api';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { Breadcrumb } from '../components/Breadcrumb';
|
||||
import './TeamSettingsPage.css';
|
||||
|
||||
function TeamSettingsPage() {
|
||||
const { slug } = useParams<{ slug: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAuth();
|
||||
const [team, setTeam] = useState<TeamDetail | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||||
const [deleteConfirmText, setDeleteConfirmText] = useState('');
|
||||
|
||||
const [formData, setFormData] = useState<TeamUpdate>({
|
||||
name: '',
|
||||
description: '',
|
||||
});
|
||||
|
||||
const loadTeam = useCallback(async () => {
|
||||
if (!slug) return;
|
||||
try {
|
||||
setLoading(true);
|
||||
const teamData = await getTeam(slug);
|
||||
setTeam(teamData);
|
||||
setFormData({
|
||||
name: teamData.name,
|
||||
description: teamData.description || '',
|
||||
});
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load team');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [slug]);
|
||||
|
||||
useEffect(() => {
|
||||
loadTeam();
|
||||
}, [loadTeam]);
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!slug || !team) return;
|
||||
|
||||
try {
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
const updatedTeam = await updateTeam(slug, formData);
|
||||
setTeam(updatedTeam);
|
||||
setSuccessMessage('Settings saved successfully');
|
||||
setTimeout(() => setSuccessMessage(null), 3000);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to save settings');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
if (!slug || !team) return;
|
||||
if (deleteConfirmText !== team.slug) return;
|
||||
|
||||
try {
|
||||
setDeleting(true);
|
||||
await deleteTeam(slug);
|
||||
navigate('/teams');
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to delete team');
|
||||
setShowDeleteConfirm(false);
|
||||
} finally {
|
||||
setDeleting(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="team-settings">
|
||||
<div className="loading-state">Loading team settings...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error && !team) {
|
||||
return (
|
||||
<div className="team-settings">
|
||||
<div className="error-state">
|
||||
<h2>Error loading team</h2>
|
||||
<p>{error}</p>
|
||||
<Link to="/teams" className="btn btn-primary">Back to Teams</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!team) return null;
|
||||
|
||||
const isOwner = team.user_role === 'owner' || user?.is_admin;
|
||||
const isAdmin = team.user_role === 'admin' || isOwner;
|
||||
|
||||
if (!isAdmin) {
|
||||
return (
|
||||
<div className="team-settings">
|
||||
<div className="error-state">
|
||||
<h2>Access Denied</h2>
|
||||
<p>You need admin privileges to access team settings.</p>
|
||||
<Link to={`/teams/${slug}`} className="btn btn-primary">Back to Team</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="team-settings">
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ label: 'Teams', href: '/teams' },
|
||||
{ label: team.name, href: `/teams/${slug}` },
|
||||
{ label: 'Settings' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<h1>Team Settings</h1>
|
||||
|
||||
{error && (
|
||||
<div className="error-message">
|
||||
{error}
|
||||
<button onClick={() => setError(null)} className="error-dismiss">×</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{successMessage && (
|
||||
<div className="success-message">
|
||||
{successMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="settings-form">
|
||||
<div className="form-section">
|
||||
<h2>General</h2>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="team-name">Team Name</label>
|
||||
<input
|
||||
id="team-name"
|
||||
type="text"
|
||||
value={formData.name}
|
||||
onChange={e => setFormData({ ...formData, name: e.target.value })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="team-slug">Slug</label>
|
||||
<input
|
||||
id="team-slug"
|
||||
type="text"
|
||||
value={team.slug}
|
||||
disabled
|
||||
className="input-disabled"
|
||||
/>
|
||||
<span className="form-hint">Team slug cannot be changed</span>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="team-description">Description</label>
|
||||
<textarea
|
||||
id="team-description"
|
||||
value={formData.description}
|
||||
onChange={e => setFormData({ ...formData, description: e.target.value })}
|
||||
rows={3}
|
||||
placeholder="What is this team for?"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="btn btn-primary" disabled={saving}>
|
||||
{saving ? 'Saving...' : 'Save Changes'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{isOwner && (
|
||||
<div className="form-section danger-zone">
|
||||
<h2>Danger Zone</h2>
|
||||
<p className="danger-warning">
|
||||
Deleting a team is permanent and cannot be undone.
|
||||
You must move or delete all projects in this team first.
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-danger"
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
>
|
||||
Delete Team
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showDeleteConfirm && (
|
||||
<div className="modal-overlay" onClick={() => setShowDeleteConfirm(false)}>
|
||||
<div className="modal-content" onClick={e => e.stopPropagation()}>
|
||||
<h2>Delete Team</h2>
|
||||
<p>
|
||||
This will permanently delete the team <strong>{team.name}</strong>.
|
||||
This action cannot be undone.
|
||||
</p>
|
||||
<p>
|
||||
To confirm, type <strong>{team.slug}</strong> below:
|
||||
</p>
|
||||
<input
|
||||
type="text"
|
||||
value={deleteConfirmText}
|
||||
onChange={e => setDeleteConfirmText(e.target.value)}
|
||||
placeholder={team.slug}
|
||||
className="delete-confirm-input"
|
||||
/>
|
||||
<div className="form-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
onClick={() => {
|
||||
setShowDeleteConfirm(false);
|
||||
setDeleteConfirmText('');
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-danger"
|
||||
disabled={deleteConfirmText !== team.slug || deleting}
|
||||
onClick={handleDelete}
|
||||
>
|
||||
{deleting ? 'Deleting...' : 'Delete Team'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamSettingsPage;
|
||||
376
frontend/src/pages/TeamsPage.css
Normal file
376
frontend/src/pages/TeamsPage.css
Normal file
@@ -0,0 +1,376 @@
|
||||
.teams-page {
|
||||
padding: 1.5rem 0;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.teams-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.teams-header h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
.teams-search {
|
||||
position: relative;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.teams-search__icon {
|
||||
position: absolute;
|
||||
left: 0.875rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text-muted);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.teams-search__input {
|
||||
width: 100%;
|
||||
padding: 0.625rem 2.5rem 0.625rem 2.75rem;
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.teams-search__input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.teams-search__input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.teams-search__clear {
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0.375rem;
|
||||
cursor: pointer;
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.teams-search__clear:hover {
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
/* Error */
|
||||
.teams-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
background: var(--error-bg);
|
||||
border: 1px solid var(--error);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--error);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.teams-error__dismiss {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Loading */
|
||||
.teams-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 4rem 2rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.teams-loading__spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid var(--border-primary);
|
||||
border-top-color: var(--accent-primary);
|
||||
border-radius: 50%;
|
||||
animation: teams-spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes teams-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.teams-empty-state {
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.teams-empty-icon {
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.teams-empty-state h2 {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.teams-empty-state p {
|
||||
margin: 0 0 1.5rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Table cell styles */
|
||||
|
||||
.team-name-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.125rem;
|
||||
}
|
||||
|
||||
.team-name-link {
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.team-name-link:hover {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.team-slug {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.team-description-cell {
|
||||
color: var(--text-secondary);
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0.25rem;
|
||||
cursor: pointer;
|
||||
color: var(--text-muted);
|
||||
display: flex;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.modal-content form {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* Form */
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.375rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.form-group .optional {
|
||||
font-weight: 400;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 0.625rem 0.75rem;
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.input-with-prefix {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.input-prefix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0.75rem;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-right: none;
|
||||
border-radius: var(--radius-md) 0 0 var(--radius-md);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.input-with-prefix input {
|
||||
border-radius: 0 var(--radius-md) var(--radius-md) 0;
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
display: block;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1.5rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: var(--accent-primary-hover);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 640px) {
|
||||
.teams-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.teams-header .btn {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.teams-stats {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.teams-table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.teams-table {
|
||||
min-width: 600px;
|
||||
}
|
||||
}
|
||||
310
frontend/src/pages/TeamsPage.tsx
Normal file
310
frontend/src/pages/TeamsPage.tsx
Normal file
@@ -0,0 +1,310 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { TeamDetail, TeamCreate, PaginatedResponse } from '../types';
|
||||
import { listTeams, createTeam } from '../api';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { Badge } from '../components/Badge';
|
||||
import { DataTable } from '../components/DataTable';
|
||||
import './TeamsPage.css';
|
||||
|
||||
function TeamsPage() {
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAuth();
|
||||
const [teamsData, setTeamsData] = useState<PaginatedResponse<TeamDetail> | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [newTeam, setNewTeam] = useState<TeamCreate>({ name: '', slug: '', description: '' });
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [slugManuallySet, setSlugManuallySet] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
|
||||
const loadTeams = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await listTeams({ limit: 100 });
|
||||
setTeamsData(data);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load teams');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadTeams();
|
||||
}, [loadTeams]);
|
||||
|
||||
// Auto-generate slug from name
|
||||
const handleNameChange = (name: string) => {
|
||||
setNewTeam(prev => ({
|
||||
...prev,
|
||||
name,
|
||||
slug: slugManuallySet ? prev.slug : name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, ''),
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSlugChange = (slug: string) => {
|
||||
setSlugManuallySet(true);
|
||||
setNewTeam(prev => ({ ...prev, slug }));
|
||||
};
|
||||
|
||||
async function handleCreateTeam(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
try {
|
||||
setCreating(true);
|
||||
const team = await createTeam(newTeam);
|
||||
setNewTeam({ name: '', slug: '', description: '' });
|
||||
setSlugManuallySet(false);
|
||||
setShowForm(false);
|
||||
navigate(`/teams/${team.slug}`);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to create team');
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
}
|
||||
|
||||
const closeModal = () => {
|
||||
setShowForm(false);
|
||||
setNewTeam({ name: '', slug: '', description: '' });
|
||||
setSlugManuallySet(false);
|
||||
};
|
||||
|
||||
// Filter teams by search
|
||||
const filteredTeams = teamsData?.items.filter(team =>
|
||||
team.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
team.slug.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
(team.description?.toLowerCase().includes(searchQuery.toLowerCase()))
|
||||
) || [];
|
||||
|
||||
const totalTeams = teamsData?.items.length || 0;
|
||||
|
||||
const roleConfig: Record<string, { variant: 'success' | 'info' | 'default'; label: string }> = {
|
||||
owner: { variant: 'success', label: 'Owner' },
|
||||
admin: { variant: 'info', label: 'Admin' },
|
||||
member: { variant: 'default', label: 'Member' },
|
||||
};
|
||||
|
||||
if (!user) {
|
||||
return (
|
||||
<div className="teams-page">
|
||||
<div className="teams-empty-state">
|
||||
<div className="teams-empty-icon">
|
||||
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2>Sign in to view your teams</h2>
|
||||
<p>Teams help you organize projects and collaborate with others.</p>
|
||||
<Link to="/login" className="btn btn-primary">Sign In</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="teams-page">
|
||||
{/* Header */}
|
||||
<div className="teams-header">
|
||||
<h1>Teams</h1>
|
||||
<button className="btn btn-primary" onClick={() => setShowForm(true)}>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<line x1="12" y1="5" x2="12" y2="19" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
Create Team
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
{!loading && totalTeams > 3 && (
|
||||
<div className="teams-search">
|
||||
<svg className="teams-search__icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<circle cx="11" cy="11" r="8"/>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||
</svg>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search teams..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="teams-search__input"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button className="teams-search__clear" onClick={() => setSearchQuery('')}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="teams-error">
|
||||
{error}
|
||||
<button onClick={() => setError(null)} className="teams-error__dismiss">×</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create Team Modal */}
|
||||
{showForm && (
|
||||
<div className="modal-overlay" onClick={closeModal}>
|
||||
<div className="modal-content" onClick={e => e.stopPropagation()}>
|
||||
<div className="modal-header">
|
||||
<h2>Create New Team</h2>
|
||||
<button className="modal-close" onClick={closeModal}>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<form onSubmit={handleCreateTeam}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="team-name">Team Name</label>
|
||||
<input
|
||||
id="team-name"
|
||||
type="text"
|
||||
value={newTeam.name}
|
||||
onChange={e => handleNameChange(e.target.value)}
|
||||
placeholder="Engineering"
|
||||
required
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="team-slug">URL Slug</label>
|
||||
<div className="input-with-prefix">
|
||||
<span className="input-prefix">@</span>
|
||||
<input
|
||||
id="team-slug"
|
||||
type="text"
|
||||
value={newTeam.slug}
|
||||
onChange={e => handleSlugChange(e.target.value)}
|
||||
placeholder="engineering"
|
||||
pattern="^[a-z0-9][a-z0-9-]*[a-z0-9]$|^[a-z0-9]$"
|
||||
title="Lowercase letters, numbers, and hyphens only"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<span className="form-hint">Used in URLs. Lowercase letters, numbers, and hyphens.</span>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="team-description">Description <span className="optional">(optional)</span></label>
|
||||
<textarea
|
||||
id="team-description"
|
||||
value={newTeam.description}
|
||||
onChange={e => setNewTeam({ ...newTeam, description: e.target.value })}
|
||||
placeholder="What is this team for?"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-actions">
|
||||
<button type="button" className="btn btn-secondary" onClick={closeModal}>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn btn-primary" disabled={creating}>
|
||||
{creating ? 'Creating...' : 'Create Team'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Content */}
|
||||
{loading ? (
|
||||
<div className="teams-loading">
|
||||
<div className="teams-loading__spinner" />
|
||||
<span>Loading teams...</span>
|
||||
</div>
|
||||
) : filteredTeams.length === 0 ? (
|
||||
<div className="teams-empty-state">
|
||||
<div className="teams-empty-icon">
|
||||
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="9" cy="7" r="4"/>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
</div>
|
||||
{searchQuery ? (
|
||||
<>
|
||||
<h2>No teams found</h2>
|
||||
<p>No teams match "{searchQuery}"</p>
|
||||
<button className="btn btn-secondary" onClick={() => setSearchQuery('')}>
|
||||
Clear search
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<h2>No teams yet</h2>
|
||||
<p>Create your first team to start organizing your projects.</p>
|
||||
<button className="btn btn-primary" onClick={() => setShowForm(true)}>
|
||||
Create Team
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<DataTable
|
||||
data={filteredTeams}
|
||||
keyExtractor={(team) => team.id}
|
||||
onRowClick={(team) => navigate(`/teams/${team.slug}`)}
|
||||
columns={[
|
||||
{
|
||||
key: 'name',
|
||||
header: 'Name',
|
||||
render: (team) => (
|
||||
<div className="team-name-cell">
|
||||
<Link
|
||||
to={`/teams/${team.slug}`}
|
||||
className="cell-name"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{team.name}
|
||||
</Link>
|
||||
<span className="team-slug">@{team.slug}</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'description',
|
||||
header: 'Description',
|
||||
className: 'cell-description',
|
||||
render: (team) => team.description || <span className="text-muted">—</span>,
|
||||
},
|
||||
{
|
||||
key: 'role',
|
||||
header: 'Role',
|
||||
render: (team) => team.user_role ? (
|
||||
<Badge variant={roleConfig[team.user_role]?.variant || 'default'}>
|
||||
{roleConfig[team.user_role]?.label || team.user_role}
|
||||
</Badge>
|
||||
) : null,
|
||||
},
|
||||
{
|
||||
key: 'members',
|
||||
header: 'Members',
|
||||
render: (team) => <span className="text-muted">{team.member_count}</span>,
|
||||
},
|
||||
{
|
||||
key: 'projects',
|
||||
header: 'Projects',
|
||||
render: (team) => <span className="text-muted">{team.project_count}</span>,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TeamsPage;
|
||||
@@ -12,6 +12,10 @@ export interface Project {
|
||||
// Access level info (populated when listing projects)
|
||||
access_level?: AccessLevel | null;
|
||||
is_owner?: boolean;
|
||||
// Team info
|
||||
team_id?: string | null;
|
||||
team_slug?: string | null;
|
||||
team_name?: string | null;
|
||||
}
|
||||
|
||||
export interface TagSummary {
|
||||
@@ -316,6 +320,8 @@ export interface UserUpdate {
|
||||
}
|
||||
|
||||
// Access Permission types
|
||||
export type AccessSource = 'explicit' | 'team';
|
||||
|
||||
export interface AccessPermission {
|
||||
id: string;
|
||||
project_id: string;
|
||||
@@ -323,6 +329,9 @@ export interface AccessPermission {
|
||||
level: AccessLevel;
|
||||
created_at: string;
|
||||
expires_at: string | null;
|
||||
source?: AccessSource; // "explicit" or "team"
|
||||
team_slug?: string; // Team slug if source is "team"
|
||||
team_role?: string; // Team role if source is "team"
|
||||
}
|
||||
|
||||
export interface AccessPermissionCreate {
|
||||
@@ -447,3 +456,50 @@ export interface DependencyResolutionError {
|
||||
}>;
|
||||
}>;
|
||||
}
|
||||
|
||||
// Team types
|
||||
export type TeamRole = 'owner' | 'admin' | 'member';
|
||||
|
||||
export interface Team {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
description: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
member_count: number;
|
||||
project_count: number;
|
||||
}
|
||||
|
||||
export interface TeamDetail extends Team {
|
||||
user_role: TeamRole | null;
|
||||
}
|
||||
|
||||
export interface TeamMember {
|
||||
id: string;
|
||||
user_id: string;
|
||||
username: string;
|
||||
email: string | null;
|
||||
role: TeamRole;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface TeamCreate {
|
||||
name: string;
|
||||
slug: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export interface TeamUpdate {
|
||||
name?: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export interface TeamMemberCreate {
|
||||
username: string;
|
||||
role: TeamRole;
|
||||
}
|
||||
|
||||
export interface TeamMemberUpdate {
|
||||
role: TeamRole;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user