Phase 3C — Commit Summary
feat: workspaces — collaborative repo namespaces Backend - internal/models/workspace.go — Workspace (handle, displayName, description, createdBy) + WorkspaceMember (workspaceId, userId, username, role: owner/admin/member) - internal/models/repo.go — added nullable workspace_id column; existing user repos unaffected - internal/models/migrations/011_workspaces.go — syncs both tables + adds column to repository - internal/api/handlers/workspace.go — ListWorkspaces, CreateWorkspace, GetWorkspace, UpdateWorkspace, DeleteWorkspace (blocks if repos remain), ListRepos, ListMembers, AddMember, UpdateMember, RemoveMember - internal/api/handlers/repos.go — lookupRepo resolves workspace handles; Create accepts workspace field; List includes workspace member repos; withOwnerName uses workspace handle for workspace-owned repos - internal/api/handlers/dashboard.go — recentRuns + repo list include workspace repos the user is a member of - internal/api/router.go — /workspaces, /workspaces/:handle/* routes Workspace rules enforced: - Handle globally unique across usernames + workspace handles (409 on collision) - Creator auto-assigned owner role - Delete blocked if repos exist - Last owner cannot be demoted/removed --- feat: secret management hierarchy (Global → Workspace → Repo → Env) Backend - internal/models/secret.go — Secret struct + EncryptSecret/DecryptSecret with AES-256-GCM (key = SHA-256 of SESSION_SECRET); values never serialised to JSON - internal/models/migrations/012_secrets.go — syncs secret table - internal/api/handlers/secret.go — List/Upsert/Delete for all four scopes; ResolveSecretsForRun builds merged env map for CI - internal/domain/ci/executor.go — JobContext.Secrets field; secrets injected as --env KEY=VALUE into docker run; buildJobContext calls resolveSecrets(Global < Workspace < Repo < Env) - internal/domain/ci/runner_manager.go — passes cfg.SessionSecret to buildJobContext - internal/api/router.go — /repos/:owner/:repo/secrets, /environments/:envName/secrets, /workspaces/:handle/secrets, /admin/secrets --- feat: workspace + secret management UI Frontend - types/api.ts — Workspace, WorkspaceWithMeta, WorkspaceMember, SecretListItem types - api/queries/workspaces.ts — full CRUD hooks + WorkspaceRepo type - api/queries/secrets.ts — repo/env/workspace secret hooks - pages/WorkspacesPage.tsx — list + create modal - pages/WorkspacePage.tsx — workspace dashboard with repo list - pages/WorkspaceSettingsPage.tsx — general settings, members CRUD, workspace secrets, danger zone - pages/RepoSecretsPage.tsx — repo secrets + per-environment secret sections with priority hierarchy callout - pages/CreateRepoPage.tsx — ?workspace= query param pre-fills owner selector; only admin/owner workspaces shown - components/layout/Sidebar.tsx — "Workspaces" global nav item + workspace quick-links; "Secrets" in RepoSubNav; new SecretsIcon, WorkspaceIcon - App.tsx — routes for /workspaces, /workspaces/:handle, /workspaces/:handle/settings, /repos/:owner/:repo/secrets
This commit is contained in:
+10
-2
@@ -37,8 +37,12 @@ const PRsPage = lazy(() => import('./pages/PRsPage'))
|
||||
const PipelinesPage = lazy(() => import('./pages/PipelinesPage'))
|
||||
const PipelineRunPage = lazy(() => import('./pages/PipelineRunPage'))
|
||||
const RepoPipelinesPage = lazy(() => import('./pages/RepoPipelinesPage'))
|
||||
const EnvironmentsPage = lazy(() => import('./pages/EnvironmentsPage'))
|
||||
const RepoTimelinePage = lazy(() => import('./pages/RepoTimelinePage'))
|
||||
const EnvironmentsPage = lazy(() => import('./pages/EnvironmentsPage'))
|
||||
const RepoTimelinePage = lazy(() => import('./pages/RepoTimelinePage'))
|
||||
const RepoSecretsPage = lazy(() => import('./pages/RepoSecretsPage'))
|
||||
const WorkspacesPage = lazy(() => import('./pages/WorkspacesPage'))
|
||||
const WorkspacePage = lazy(() => import('./pages/WorkspacePage'))
|
||||
const WorkspaceSettingsPage = lazy(() => import('./pages/WorkspaceSettingsPage'))
|
||||
const ProfilePage = lazy(() => import('./pages/ProfilePage'))
|
||||
const ExplorePage = lazy(() => import('./pages/ExplorePage'))
|
||||
const SettingsPage = lazy(() => import('./pages/SettingsPage'))
|
||||
@@ -89,11 +93,15 @@ export default function App() {
|
||||
<Route path="repos/:owner/:repo/pipelines" element={<S><RepoPipelinesPage /></S>} />
|
||||
<Route path="repos/:owner/:repo/environments" element={<S><EnvironmentsPage /></S>} />
|
||||
<Route path="repos/:owner/:repo/timeline" element={<S><RepoTimelinePage /></S>} />
|
||||
<Route path="repos/:owner/:repo/secrets" element={<S><RepoSecretsPage /></S>} />
|
||||
<Route path="repos/:owner/:repo/runs/:runId" element={<S><PipelineRunPage /></S>} />
|
||||
|
||||
<Route path="starred" element={<S><StarredPage /></S>} />
|
||||
<Route path="pulls" element={<S><PRsPage /></S>} />
|
||||
<Route path="pipelines" element={<S><PipelinesPage /></S>} />
|
||||
<Route path="workspaces" element={<S><WorkspacesPage /></S>} />
|
||||
<Route path="workspaces/:handle" element={<S><WorkspacePage /></S>} />
|
||||
<Route path="workspaces/:handle/settings" element={<S><WorkspaceSettingsPage /></S>} />
|
||||
<Route path="explore" element={<S><ExplorePage /></S>} />
|
||||
<Route path="profile" element={<S><ProfilePage /></S>} />
|
||||
<Route path="settings" element={<S><SettingsPage /></S>} />
|
||||
|
||||
@@ -186,6 +186,7 @@ export function useCreateRepo() {
|
||||
defaultBranch?: string
|
||||
initReadme?: 'none' | 'blank' | 'tutorial'
|
||||
initGitignore?: boolean
|
||||
workspace?: string
|
||||
}) => api.post<Repository>('/api/v1/repos', repositorySchema, data),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['repos'] })
|
||||
|
||||
@@ -0,0 +1,118 @@
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { z } from 'zod'
|
||||
import { api } from '../client'
|
||||
import type { SecretListItem } from '../../types/api'
|
||||
|
||||
const secretSchema = z.object({
|
||||
id: z.number(),
|
||||
name: z.string(),
|
||||
createdAt: z.string(),
|
||||
updatedAt: z.string(),
|
||||
})
|
||||
|
||||
const secretsSchema = z.array(secretSchema)
|
||||
|
||||
// ── Repo secrets ──────────────────────────────────────────────────────────────
|
||||
|
||||
export function useRepoSecrets(owner: string, repo: string) {
|
||||
return useQuery({
|
||||
queryKey: ['repos', owner, repo, 'secrets'],
|
||||
queryFn: () =>
|
||||
api.get<SecretListItem[]>(`/api/v1/repos/${owner}/${repo}/secrets`, secretsSchema),
|
||||
enabled: Boolean(owner && repo),
|
||||
})
|
||||
}
|
||||
|
||||
export function useUpsertRepoSecret(owner: string, repo: string) {
|
||||
const qc = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: (body: { name: string; value: string }) =>
|
||||
api.post<SecretListItem>(`/api/v1/repos/${owner}/${repo}/secrets`, secretSchema, body),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ['repos', owner, repo, 'secrets'] }),
|
||||
})
|
||||
}
|
||||
|
||||
export function useDeleteRepoSecret(owner: string, repo: string) {
|
||||
const qc = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: (name: string) =>
|
||||
api.delete<void>(
|
||||
`/api/v1/repos/${owner}/${repo}/secrets/${encodeURIComponent(name)}`,
|
||||
z.unknown() as z.ZodType<void>,
|
||||
),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ['repos', owner, repo, 'secrets'] }),
|
||||
})
|
||||
}
|
||||
|
||||
// ── Environment secrets ───────────────────────────────────────────────────────
|
||||
|
||||
export function useEnvSecrets(owner: string, repo: string, envName: string) {
|
||||
return useQuery({
|
||||
queryKey: ['repos', owner, repo, 'environments', envName, 'secrets'],
|
||||
queryFn: () =>
|
||||
api.get<SecretListItem[]>(
|
||||
`/api/v1/repos/${owner}/${repo}/environments/${envName}/secrets`,
|
||||
secretsSchema,
|
||||
),
|
||||
enabled: Boolean(owner && repo && envName),
|
||||
})
|
||||
}
|
||||
|
||||
export function useUpsertEnvSecret(owner: string, repo: string, envName: string) {
|
||||
const qc = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: (body: { name: string; value: string }) =>
|
||||
api.post<SecretListItem>(
|
||||
`/api/v1/repos/${owner}/${repo}/environments/${envName}/secrets`,
|
||||
secretSchema,
|
||||
body,
|
||||
),
|
||||
onSuccess: () =>
|
||||
qc.invalidateQueries({ queryKey: ['repos', owner, repo, 'environments', envName, 'secrets'] }),
|
||||
})
|
||||
}
|
||||
|
||||
export function useDeleteEnvSecret(owner: string, repo: string, envName: string) {
|
||||
const qc = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: (name: string) =>
|
||||
api.delete<void>(
|
||||
`/api/v1/repos/${owner}/${repo}/environments/${envName}/secrets/${encodeURIComponent(name)}`,
|
||||
z.unknown() as z.ZodType<void>,
|
||||
),
|
||||
onSuccess: () =>
|
||||
qc.invalidateQueries({ queryKey: ['repos', owner, repo, 'environments', envName, 'secrets'] }),
|
||||
})
|
||||
}
|
||||
|
||||
// ── Workspace secrets ─────────────────────────────────────────────────────────
|
||||
|
||||
export function useWorkspaceSecrets(handle: string) {
|
||||
return useQuery({
|
||||
queryKey: ['workspaces', handle, 'secrets'],
|
||||
queryFn: () =>
|
||||
api.get<SecretListItem[]>(`/api/v1/workspaces/${handle}/secrets`, secretsSchema),
|
||||
enabled: Boolean(handle),
|
||||
})
|
||||
}
|
||||
|
||||
export function useUpsertWorkspaceSecret(handle: string) {
|
||||
const qc = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: (body: { name: string; value: string }) =>
|
||||
api.post<SecretListItem>(`/api/v1/workspaces/${handle}/secrets`, secretSchema, body),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ['workspaces', handle, 'secrets'] }),
|
||||
})
|
||||
}
|
||||
|
||||
export function useDeleteWorkspaceSecret(handle: string) {
|
||||
const qc = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: (name: string) =>
|
||||
api.delete<void>(
|
||||
`/api/v1/workspaces/${handle}/secrets/${encodeURIComponent(name)}`,
|
||||
z.unknown() as z.ZodType<void>,
|
||||
),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ['workspaces', handle, 'secrets'] }),
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { z } from 'zod'
|
||||
import { api } from '../client'
|
||||
import type { WorkspaceWithMeta, WorkspaceMember } from '../../types/api'
|
||||
|
||||
// ── Schemas ───────────────────────────────────────────────────────────────────
|
||||
|
||||
const wsSchema = z.object({
|
||||
id: z.number(),
|
||||
handle: z.string(),
|
||||
displayName: z.string(),
|
||||
description: z.string(),
|
||||
avatarUrl: z.string(),
|
||||
createdBy: z.number(),
|
||||
createdAt: z.string(),
|
||||
updatedAt: z.string(),
|
||||
memberCount: z.number(),
|
||||
repoCount: z.number(),
|
||||
myRole: z.string(),
|
||||
})
|
||||
|
||||
const memberSchema = z.object({
|
||||
id: z.number(),
|
||||
workspaceId: z.number(),
|
||||
userId: z.number(),
|
||||
username: z.string(),
|
||||
role: z.enum(['owner', 'admin', 'member']),
|
||||
addedAt: z.string(),
|
||||
})
|
||||
|
||||
// WorkspaceRepo — raw repo as returned by the workspace list endpoint
|
||||
export interface WorkspaceRepo {
|
||||
id: number
|
||||
ownerId: number
|
||||
workspaceId?: number | null
|
||||
ownerName: string
|
||||
name: string
|
||||
description: string
|
||||
isPrivate: boolean
|
||||
defaultBranch: string
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
const repoSchema = z.object({
|
||||
id: z.number(),
|
||||
ownerId: z.number(),
|
||||
workspaceId: z.number().nullable().optional(),
|
||||
ownerName: z.string(),
|
||||
name: z.string(),
|
||||
description: z.string(),
|
||||
isPrivate: z.boolean(),
|
||||
defaultBranch: z.string(),
|
||||
createdAt: z.string(),
|
||||
updatedAt: z.string(),
|
||||
})
|
||||
|
||||
// ── Queries ───────────────────────────────────────────────────────────────────
|
||||
|
||||
export function useWorkspaces() {
|
||||
return useQuery({
|
||||
queryKey: ['workspaces'],
|
||||
queryFn: () => api.get<WorkspaceWithMeta[]>('/api/v1/workspaces', z.array(wsSchema)),
|
||||
})
|
||||
}
|
||||
|
||||
export function useWorkspace(handle: string) {
|
||||
return useQuery({
|
||||
queryKey: ['workspaces', handle],
|
||||
queryFn: () => api.get<WorkspaceWithMeta>(`/api/v1/workspaces/${handle}`, wsSchema),
|
||||
enabled: Boolean(handle),
|
||||
})
|
||||
}
|
||||
|
||||
export function useWorkspaceMembers(handle: string) {
|
||||
return useQuery({
|
||||
queryKey: ['workspaces', handle, 'members'],
|
||||
queryFn: () =>
|
||||
api.get<WorkspaceMember[]>(`/api/v1/workspaces/${handle}/members`, z.array(memberSchema)),
|
||||
enabled: Boolean(handle),
|
||||
})
|
||||
}
|
||||
|
||||
export function useWorkspaceRepos(handle: string) {
|
||||
return useQuery({
|
||||
queryKey: ['workspaces', handle, 'repos'],
|
||||
queryFn: () =>
|
||||
api.get<WorkspaceRepo[]>(`/api/v1/workspaces/${handle}/repos`, z.array(repoSchema)),
|
||||
enabled: Boolean(handle),
|
||||
})
|
||||
}
|
||||
|
||||
// ── Mutations ─────────────────────────────────────────────────────────────────
|
||||
|
||||
export function useCreateWorkspace() {
|
||||
const qc = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: (body: { handle: string; displayName?: string; description?: string }) =>
|
||||
api.post<WorkspaceWithMeta>('/api/v1/workspaces', wsSchema, body),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ['workspaces'] }),
|
||||
})
|
||||
}
|
||||
|
||||
export function useUpdateWorkspace(handle: string) {
|
||||
const qc = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: (body: { displayName?: string; description?: string }) =>
|
||||
api.patch<WorkspaceWithMeta>(`/api/v1/workspaces/${handle}`, wsSchema, body),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['workspaces'] })
|
||||
qc.invalidateQueries({ queryKey: ['workspaces', handle] })
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export function useDeleteWorkspace(handle: string) {
|
||||
const qc = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: () =>
|
||||
api.delete<void>(`/api/v1/workspaces/${handle}`, z.unknown() as z.ZodType<void>),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ['workspaces'] }),
|
||||
})
|
||||
}
|
||||
|
||||
export function useAddWorkspaceMember(handle: string) {
|
||||
const qc = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: (body: { username: string; role: string }) =>
|
||||
api.post<WorkspaceMember>(`/api/v1/workspaces/${handle}/members`, memberSchema, body),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ['workspaces', handle, 'members'] }),
|
||||
})
|
||||
}
|
||||
|
||||
export function useUpdateWorkspaceMember(handle: string) {
|
||||
const qc = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: ({ username, role }: { username: string; role: string }) =>
|
||||
api.patch<WorkspaceMember>(
|
||||
`/api/v1/workspaces/${handle}/members/${username}`,
|
||||
memberSchema,
|
||||
{ role },
|
||||
),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ['workspaces', handle, 'members'] }),
|
||||
})
|
||||
}
|
||||
|
||||
export function useRemoveWorkspaceMember(handle: string) {
|
||||
const qc = useQueryClient()
|
||||
return useMutation({
|
||||
mutationFn: (username: string) =>
|
||||
api.delete<void>(
|
||||
`/api/v1/workspaces/${handle}/members/${username}`,
|
||||
z.unknown() as z.ZodType<void>,
|
||||
),
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ['workspaces', handle, 'members'] }),
|
||||
})
|
||||
}
|
||||
@@ -5,6 +5,7 @@ import { useAuth } from '../../contexts/AuthContext'
|
||||
import { useRecentRepos } from '../../hooks/useRecentRepos'
|
||||
import { useStarredRepos } from '../../hooks/useStarredRepos'
|
||||
import { useRepos } from '../../api/queries/repos'
|
||||
import { useWorkspaces } from '../../api/queries/workspaces'
|
||||
import { RepoAvatar } from '../../ui/RepoAvatar'
|
||||
|
||||
interface SidebarProps {
|
||||
@@ -16,6 +17,7 @@ export function Sidebar({ className }: SidebarProps) {
|
||||
const { repos: recentRepos, remove } = useRecentRepos()
|
||||
const { toggle, isStarred } = useStarredRepos()
|
||||
const { data: apiRepos } = useRepos()
|
||||
const { data: workspaces } = useWorkspaces()
|
||||
const [openRecent, setOpenRecent] = useState(true)
|
||||
|
||||
// Drop localStorage entries for repos that no longer exist in the API.
|
||||
@@ -53,6 +55,25 @@ export function Sidebar({ className }: SidebarProps) {
|
||||
<SidebarItem to="/repos" icon={<RepoIcon />} label="Repositories" />
|
||||
<SidebarItem to="/explore" icon={<ExploreIcon />} label="Explore" />
|
||||
<SidebarItem to="/starred" icon={<StarIcon />} label="Starred" />
|
||||
<SidebarItem to="/workspaces" icon={<WorkspaceIcon />} label="Workspaces" />
|
||||
{/* Workspace quick-links */}
|
||||
{workspaces && workspaces.length > 0 && workspaces.map(ws => (
|
||||
<NavLink
|
||||
key={ws.id}
|
||||
to={`/workspaces/${ws.handle}`}
|
||||
className={({ isActive }) => cn(
|
||||
'flex items-center gap-2.5 px-3 py-1.5 mx-1 rounded text-xs transition-colors min-h-[32px]',
|
||||
isActive
|
||||
? 'bg-[var(--c-surface)]/12 text-white font-medium'
|
||||
: 'text-white/55 hover:bg-white/8 hover:text-white',
|
||||
)}
|
||||
>
|
||||
<div className="w-4 h-4 rounded bg-[var(--c-brand)]/70 flex items-center justify-center text-white text-[9px] font-bold shrink-0">
|
||||
{(ws.displayName || ws.handle)[0].toUpperCase()}
|
||||
</div>
|
||||
<span className="truncate">{ws.displayName || ws.handle}</span>
|
||||
</NavLink>
|
||||
))}
|
||||
|
||||
{/* ── Recent repos ───────────────────────────────────────────── */}
|
||||
{recentRepos.length > 0 && (
|
||||
@@ -164,6 +185,7 @@ function RepoSubNav({ owner, repo }: { owner: string; repo: string }) {
|
||||
{ label: 'Pipelines', to: `${base}/pipelines`, icon: <PipelineIcon /> },
|
||||
{ label: 'Environments', to: `${base}/environments`, icon: <EnvIcon /> },
|
||||
{ label: 'Timeline', to: `${base}/timeline`, icon: <TimelineIcon /> },
|
||||
{ label: 'Secrets', to: `${base}/secrets`, icon: <SecretsIcon /> },
|
||||
{ label: 'Settings', to: `${base}/settings`, icon: <SettingsSmIcon /> },
|
||||
]
|
||||
return (
|
||||
@@ -207,4 +229,6 @@ const IssueIcon = () => <I d={['M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.94
|
||||
const PipelineIcon = () => <I d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" />
|
||||
const EnvIcon = () => <I d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 6 0m-6 0H3m16.5 0a3 3 0 0 0-3-3m3 3a3 3 0 1 1-6 0m6 0h1.5m-7.5 0h-3" />
|
||||
const TimelineIcon = () => <I d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
||||
const SecretsIcon = () => <I d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.169.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 0 1 21.75 8.25Z" />
|
||||
const WorkspaceIcon = () => <I d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
|
||||
const SettingsSmIcon = () => <I d={['M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z', 'M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z']} />
|
||||
|
||||
@@ -1,12 +1,16 @@
|
||||
import { useState } from 'react'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import { Link, useNavigate, useSearchParams } from 'react-router-dom'
|
||||
import { useCreateRepo } from '../api/queries/repos'
|
||||
import { useWorkspaces } from '../api/queries/workspaces'
|
||||
|
||||
export default function CreateRepoPage() {
|
||||
const navigate = useNavigate()
|
||||
const [searchParams] = useSearchParams()
|
||||
const createRepo = useCreateRepo()
|
||||
const { data: workspaces } = useWorkspaces()
|
||||
|
||||
const [name, setName] = useState('')
|
||||
const [workspace, setWorkspace] = useState(searchParams.get('workspace') ?? '')
|
||||
const [isPrivate, setIsPrivate] = useState(true)
|
||||
const [initReadme, setInitReadme] = useState<'none' | 'blank' | 'tutorial'>('none')
|
||||
const [defaultBranch, setDefaultBranch] = useState('')
|
||||
@@ -24,6 +28,7 @@ export default function CreateRepoPage() {
|
||||
defaultBranch: defaultBranch.trim() || 'main',
|
||||
initReadme,
|
||||
initGitignore,
|
||||
workspace: workspace || undefined,
|
||||
})
|
||||
navigate(`/repos/${repo.ownerName}/${repo.name}`)
|
||||
}
|
||||
@@ -41,6 +46,24 @@ export default function CreateRepoPage() {
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
|
||||
{/* Owner */}
|
||||
{workspaces && workspaces.length > 0 && (
|
||||
<Field label="Owner">
|
||||
<select
|
||||
value={workspace}
|
||||
onChange={e => setWorkspace(e.target.value)}
|
||||
className="w-full border border-[var(--c-border)] rounded px-3 py-2 text-sm focus:outline-none focus:border-[var(--c-brand-focus)] bg-[var(--c-surface)]"
|
||||
>
|
||||
<option value="">My account (personal)</option>
|
||||
{workspaces.filter(ws => ws.myRole === 'owner' || ws.myRole === 'admin').map(ws => (
|
||||
<option key={ws.id} value={ws.handle}>
|
||||
{ws.displayName || ws.handle} (workspace)
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
)}
|
||||
|
||||
{/* Repository name */}
|
||||
<Field label="Repository name" required>
|
||||
<input
|
||||
|
||||
@@ -0,0 +1,194 @@
|
||||
import { useState } from 'react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import {
|
||||
useRepoSecrets, useUpsertRepoSecret, useDeleteRepoSecret,
|
||||
} from '../api/queries/secrets'
|
||||
import { useEnvironments } from '../api/queries/environments'
|
||||
import {
|
||||
useEnvSecrets, useUpsertEnvSecret, useDeleteEnvSecret,
|
||||
} from '../api/queries/secrets'
|
||||
import { Skeleton } from '../ui/Skeleton'
|
||||
import type { SecretListItem } from '../types/api'
|
||||
|
||||
// ── Shared secret table ───────────────────────────────────────────────────────
|
||||
|
||||
function SecretTable({
|
||||
secrets,
|
||||
onDelete,
|
||||
isLoading,
|
||||
}: {
|
||||
secrets: SecretListItem[] | undefined
|
||||
onDelete: (name: string) => void
|
||||
isLoading: boolean
|
||||
}) {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{[1, 2].map(i => <Skeleton key={i} className="h-10 rounded" />)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
if (!secrets?.length) {
|
||||
return <p className="text-xs text-[var(--c-muted)] py-2">No secrets defined.</p>
|
||||
}
|
||||
return (
|
||||
<div className="divide-y divide-[var(--c-border)] border border-[var(--c-border)] rounded-lg overflow-hidden">
|
||||
{secrets.map(s => (
|
||||
<div key={s.id} className="flex items-center gap-3 px-4 py-2.5">
|
||||
<code className="flex-1 text-xs font-mono text-[var(--c-text)]">{s.name}</code>
|
||||
<span className="text-[10px] text-[var(--c-muted)] font-mono">••••••••</span>
|
||||
<button
|
||||
onClick={() => onDelete(s.name)}
|
||||
className="text-[var(--c-muted)] hover:text-[var(--c-danger)] transition-colors p-1"
|
||||
title="Delete secret"
|
||||
>
|
||||
<svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function AddSecretForm({
|
||||
onSubmit,
|
||||
isPending,
|
||||
error,
|
||||
}: {
|
||||
onSubmit: (name: string, value: string) => void
|
||||
isPending: boolean
|
||||
error?: string
|
||||
}) {
|
||||
const [name, setName] = useState('')
|
||||
const [value, setValue] = useState('')
|
||||
|
||||
function submit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (!name.trim() || !value.trim()) return
|
||||
onSubmit(name.trim(), value.trim())
|
||||
setName('')
|
||||
setValue('')
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={submit} className="flex items-center gap-2 mt-3">
|
||||
<input
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, '_'))}
|
||||
placeholder="SECRET_NAME"
|
||||
className="w-44 px-3 py-2 text-sm border border-[var(--c-border)] rounded-lg bg-[var(--c-surface-muted)] text-[var(--c-text)] placeholder:text-[var(--c-muted)] focus:outline-none focus:border-[var(--c-brand-focus)] font-mono"
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
value={value}
|
||||
onChange={e => setValue(e.target.value)}
|
||||
placeholder="Secret value"
|
||||
className="flex-1 px-3 py-2 text-sm border border-[var(--c-border)] rounded-lg bg-[var(--c-surface-muted)] text-[var(--c-text)] placeholder:text-[var(--c-muted)] focus:outline-none focus:border-[var(--c-brand-focus)]"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!name.trim() || !value.trim() || isPending}
|
||||
className="px-3 py-2 text-sm font-medium bg-[var(--c-brand)] hover:bg-[var(--c-brand-hover)] text-white rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
{isPending ? 'Saving…' : 'Save'}
|
||||
</button>
|
||||
{error && <p className="text-xs text-[var(--c-danger)]">{error}</p>}
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Env secrets sub-section ───────────────────────────────────────────────────
|
||||
|
||||
function EnvSecretsSection({ owner, repo, envName }: { owner: string; repo: string; envName: string }) {
|
||||
const { data: secrets, isLoading } = useEnvSecrets(owner, repo, envName)
|
||||
const upsert = useUpsertEnvSecret(owner, repo, envName)
|
||||
const del = useDeleteEnvSecret(owner, repo, envName)
|
||||
|
||||
return (
|
||||
<div className="border border-[var(--c-border)] rounded-lg bg-[var(--c-surface)] overflow-hidden">
|
||||
<div className="px-4 py-3 border-b border-[var(--c-border)] bg-[var(--c-surface-raised)] flex items-center gap-2">
|
||||
<svg width="13" height="13" fill="none" stroke="var(--c-muted)" strokeWidth="1.5" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 6 0m-6 0H3m16.5 0a3 3 0 0 0-3-3m3 3a3 3 0 1 1-6 0m6 0h1.5m-7.5 0h-3" />
|
||||
</svg>
|
||||
<span className="text-sm font-medium text-[var(--c-text)]">{envName}</span>
|
||||
<span className="text-[10px] text-[var(--c-muted)] ml-auto">env-level override</span>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<SecretTable secrets={secrets} onDelete={name => del.mutate(name)} isLoading={isLoading} />
|
||||
<AddSecretForm
|
||||
onSubmit={(name, value) => upsert.mutate({ name, value })}
|
||||
isPending={upsert.isPending}
|
||||
error={(upsert.error as Error)?.message}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Page ──────────────────────────────────────────────────────────────────────
|
||||
|
||||
export default function RepoSecretsPage() {
|
||||
const { owner = '', repo = '' } = useParams()
|
||||
const { data: repoSecrets, isLoading: loadingRepo } = useRepoSecrets(owner, repo)
|
||||
const upsertRepo = useUpsertRepoSecret(owner, repo)
|
||||
const deleteRepo = useDeleteRepoSecret(owner, repo)
|
||||
const { data: environments } = useEnvironments(owner, repo)
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto px-4 md:px-6 py-5 space-y-6">
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold text-[var(--c-text)]">Secrets</h1>
|
||||
<p className="text-xs text-[var(--c-muted)] mt-0.5">
|
||||
Secrets are injected as environment variables into CI pipeline jobs. Values are write-only.
|
||||
</p>
|
||||
<div className="mt-2 p-3 border border-[var(--c-border)] rounded-lg bg-[var(--c-surface-muted)] text-[10px] text-[var(--c-muted)]">
|
||||
<strong className="text-[var(--c-text)]">Priority order:</strong>{' '}
|
||||
Environment secrets → Repository secrets → Workspace secrets → Global secrets.
|
||||
Higher-priority secrets with the same name override lower ones.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Repository-level secrets */}
|
||||
<section>
|
||||
<h2 className="text-xs font-semibold uppercase tracking-wider text-[var(--c-muted)] mb-3">
|
||||
Repository secrets
|
||||
</h2>
|
||||
<div className="border border-[var(--c-border)] rounded-lg bg-[var(--c-surface)] overflow-hidden">
|
||||
<div className="p-4">
|
||||
<SecretTable
|
||||
secrets={repoSecrets}
|
||||
onDelete={name => deleteRepo.mutate(name)}
|
||||
isLoading={loadingRepo}
|
||||
/>
|
||||
<AddSecretForm
|
||||
onSubmit={(name, value) => upsertRepo.mutate({ name, value })}
|
||||
isPending={upsertRepo.isPending}
|
||||
error={(upsertRepo.error as Error)?.message}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Environment-level secrets */}
|
||||
{environments && environments.length > 0 && (
|
||||
<section>
|
||||
<h2 className="text-xs font-semibold uppercase tracking-wider text-[var(--c-muted)] mb-3">
|
||||
Environment secrets
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
{environments.map(env => (
|
||||
<EnvSecretsSection
|
||||
key={env.id}
|
||||
owner={owner}
|
||||
repo={repo}
|
||||
envName={env.name}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
import { useParams, Link } from 'react-router-dom'
|
||||
import { useWorkspace, useWorkspaceRepos, type WorkspaceRepo } from '../api/queries/workspaces'
|
||||
import { Skeleton } from '../ui/Skeleton'
|
||||
|
||||
function timeAgo(iso: string): string {
|
||||
const diff = Date.now() - new Date(iso).getTime()
|
||||
const min = Math.floor(diff / 60_000)
|
||||
if (min < 60) return `${Math.max(1, min)}m ago`
|
||||
const hr = Math.floor(min / 60)
|
||||
if (hr < 24) return `${hr}h ago`
|
||||
return `${Math.floor(hr / 24)}d ago`
|
||||
}
|
||||
|
||||
export default function WorkspacePage() {
|
||||
const { handle = '' } = useParams()
|
||||
const { data: ws, isLoading } = useWorkspace(handle)
|
||||
const { data: repos } = useWorkspaceRepos(handle)
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-4 md:px-6 py-5 space-y-4">
|
||||
<Skeleton className="h-6 w-48 rounded" />
|
||||
<Skeleton className="h-4 w-72 rounded" />
|
||||
<div className="space-y-3 mt-6">
|
||||
{[1, 2, 3].map(i => <Skeleton key={i} className="h-16 rounded-lg" />)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!ws) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-24 gap-2">
|
||||
<p className="text-sm text-[var(--c-muted)]">Workspace not found.</p>
|
||||
<Link to="/workspaces" className="text-xs text-[var(--c-brand)] hover:underline">← All workspaces</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const canAdmin = ws.myRole === 'owner' || ws.myRole === 'admin'
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto px-4 md:px-6 py-5 space-y-5">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between gap-4 flex-wrap">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-12 h-12 rounded-xl bg-[var(--c-brand)] flex items-center justify-center text-white text-lg font-bold shrink-0">
|
||||
{ws.displayName?.[0]?.toUpperCase() || ws.handle[0].toUpperCase()}
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold text-[var(--c-text)]">{ws.displayName || ws.handle}</h1>
|
||||
<div className="flex items-center gap-2 text-xs text-[var(--c-muted)]">
|
||||
<span className="font-mono">@{ws.handle}</span>
|
||||
<span>·</span>
|
||||
<span>{ws.memberCount} member{ws.memberCount !== 1 ? 's' : ''}</span>
|
||||
<span>·</span>
|
||||
<span>{ws.repoCount} repo{ws.repoCount !== 1 ? 's' : ''}</span>
|
||||
</div>
|
||||
{ws.description && <p className="text-xs text-[var(--c-muted)] mt-0.5">{ws.description}</p>}
|
||||
</div>
|
||||
</div>
|
||||
{canAdmin && (
|
||||
<Link
|
||||
to={`/workspaces/${handle}/settings`}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium border border-[var(--c-border)] rounded-lg text-[var(--c-text)] hover:border-[var(--c-brand-focus)] hover:text-[var(--c-brand)] transition-colors"
|
||||
>
|
||||
<svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" /><path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
||||
</svg>
|
||||
Settings
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Repositories */}
|
||||
<section>
|
||||
<div className="flex items-center justify-between mb-2.5">
|
||||
<h2 className="text-xs font-semibold uppercase tracking-wider text-[var(--c-muted)]">Repositories</h2>
|
||||
{canAdmin && (
|
||||
<Link
|
||||
to={`/repos/new?workspace=${handle}`}
|
||||
className="text-[10px] text-[var(--c-brand)] hover:underline"
|
||||
>
|
||||
+ New repo
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
<div className="border border-[var(--c-border)] rounded-lg bg-[var(--c-surface)] divide-y divide-[var(--c-border)] overflow-hidden">
|
||||
{!repos?.length ? (
|
||||
<div className="px-4 py-8 text-center text-xs text-[var(--c-muted)]">
|
||||
No repositories yet.{' '}
|
||||
{canAdmin && (
|
||||
<Link to={`/repos/new?workspace=${handle}`} className="text-[var(--c-brand)] hover:underline">
|
||||
Create the first one
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
(repos as WorkspaceRepo[]).map(repo => (
|
||||
<Link
|
||||
key={repo.id}
|
||||
to={`/repos/${handle}/${repo.name}`}
|
||||
className="flex items-center gap-3 px-4 py-3 hover:bg-[var(--c-surface-muted)] transition-colors group"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-[var(--c-text)] group-hover:text-[var(--c-brand)] transition-colors">
|
||||
{repo.name}
|
||||
</span>
|
||||
{repo.isPrivate && (
|
||||
<span className="text-[9px] font-semibold uppercase tracking-wider border border-[var(--c-border)] text-[var(--c-muted)] px-1 py-px rounded">private</span>
|
||||
)}
|
||||
</div>
|
||||
{repo.description && (
|
||||
<p className="text-xs text-[var(--c-muted)] mt-0.5 truncate">{repo.description}</p>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-[10px] text-[var(--c-subtle)] shrink-0">{timeAgo(repo.updatedAt)}</span>
|
||||
</Link>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,312 @@
|
||||
import { useState } from 'react'
|
||||
import { useParams, useNavigate } from 'react-router-dom'
|
||||
import {
|
||||
useWorkspace, useWorkspaceMembers, useUpdateWorkspace,
|
||||
useDeleteWorkspace, useAddWorkspaceMember, useUpdateWorkspaceMember,
|
||||
useRemoveWorkspaceMember,
|
||||
} from '../api/queries/workspaces'
|
||||
import {
|
||||
useWorkspaceSecrets, useUpsertWorkspaceSecret, useDeleteWorkspaceSecret,
|
||||
} from '../api/queries/secrets'
|
||||
import { Skeleton } from '../ui/Skeleton'
|
||||
import type { WorkspaceMember } from '../types/api'
|
||||
|
||||
// ── Shared section wrapper ───────────────────────────────────────────────────
|
||||
|
||||
function Section({ title, children }: { title: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<section className="border border-[var(--c-border)] rounded-lg bg-[var(--c-surface)] overflow-hidden">
|
||||
<div className="px-4 py-3 border-b border-[var(--c-border)] bg-[var(--c-surface-raised)]">
|
||||
<h2 className="text-sm font-semibold text-[var(--c-text)]">{title}</h2>
|
||||
</div>
|
||||
<div className="p-4">{children}</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
// ── General settings ─────────────────────────────────────────────────────────
|
||||
|
||||
function GeneralSection({ handle }: { handle: string }) {
|
||||
const { data: ws } = useWorkspace(handle)
|
||||
const update = useUpdateWorkspace(handle)
|
||||
const [displayName, setDisplayName] = useState(ws?.displayName ?? '')
|
||||
const [description, setDescription] = useState(ws?.description ?? '')
|
||||
|
||||
function submit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
update.mutate({ displayName, description })
|
||||
}
|
||||
|
||||
return (
|
||||
<Section title="General">
|
||||
<form onSubmit={submit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[var(--c-text)] mb-1.5">Display name</label>
|
||||
<input
|
||||
value={displayName}
|
||||
onChange={e => setDisplayName(e.target.value)}
|
||||
placeholder={handle}
|
||||
className="w-full px-3 py-2 text-sm border border-[var(--c-border)] rounded-lg bg-[var(--c-surface-muted)] text-[var(--c-text)] focus:outline-none focus:border-[var(--c-brand-focus)]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[var(--c-text)] mb-1.5">Description</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 text-sm border border-[var(--c-border)] rounded-lg bg-[var(--c-surface-muted)] text-[var(--c-text)] focus:outline-none focus:border-[var(--c-brand-focus)] resize-y"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={update.isPending}
|
||||
className="px-4 py-2 text-sm font-medium bg-[var(--c-brand)] hover:bg-[var(--c-brand-hover)] text-white rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
{update.isPending ? 'Saving…' : 'Save changes'}
|
||||
</button>
|
||||
</form>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Members ───────────────────────────────────────────────────────────────────
|
||||
|
||||
function MembersSection({ handle, myRole }: { handle: string; myRole: string }) {
|
||||
const { data: members } = useWorkspaceMembers(handle)
|
||||
const addMember = useAddWorkspaceMember(handle)
|
||||
const updateMember = useUpdateWorkspaceMember(handle)
|
||||
const removeMember = useRemoveWorkspaceMember(handle)
|
||||
const [username, setUsername] = useState('')
|
||||
const [role, setRole] = useState('member')
|
||||
const canEdit = myRole === 'owner' || myRole === 'admin'
|
||||
|
||||
function add(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (!username.trim()) return
|
||||
addMember.mutate({ username: username.trim(), role }, { onSuccess: () => setUsername('') })
|
||||
}
|
||||
|
||||
const ROLES = ['owner', 'admin', 'member']
|
||||
const roleBadge: Record<string, string> = {
|
||||
owner: 'bg-[var(--c-brand-tint)] text-[var(--c-brand)] border-[var(--c-brand-focus)]',
|
||||
admin: 'bg-[#FFFAE6] text-[#B45309] border-[#F59E0B]/40',
|
||||
member: 'bg-[var(--c-surface-muted)] text-[var(--c-muted)] border-[var(--c-border)]',
|
||||
}
|
||||
|
||||
return (
|
||||
<Section title="Members">
|
||||
<div className="space-y-3">
|
||||
{/* Member list */}
|
||||
<div className="divide-y divide-[var(--c-border)] border border-[var(--c-border)] rounded-lg overflow-hidden">
|
||||
{!members?.length ? (
|
||||
<p className="px-4 py-3 text-xs text-[var(--c-muted)]">No members.</p>
|
||||
) : (
|
||||
members.map((m: WorkspaceMember) => (
|
||||
<div key={m.id} className="flex items-center gap-3 px-4 py-2.5">
|
||||
<div className="w-7 h-7 rounded-full bg-[var(--c-brand)] flex items-center justify-center text-white text-[11px] font-bold shrink-0">
|
||||
{m.username[0].toUpperCase()}
|
||||
</div>
|
||||
<span className="flex-1 text-sm text-[var(--c-text)]">{m.username}</span>
|
||||
{canEdit ? (
|
||||
<select
|
||||
value={m.role}
|
||||
onChange={e => updateMember.mutate({ username: m.username, role: e.target.value })}
|
||||
className="text-xs border border-[var(--c-border)] rounded px-2 py-1 bg-[var(--c-surface)] text-[var(--c-text)] focus:outline-none focus:border-[var(--c-brand-focus)]"
|
||||
>
|
||||
{ROLES.map(r => <option key={r} value={r}>{r}</option>)}
|
||||
</select>
|
||||
) : (
|
||||
<span className={`text-[10px] font-semibold px-2 py-0.5 rounded border capitalize ${roleBadge[m.role] || roleBadge.member}`}>
|
||||
{m.role}
|
||||
</span>
|
||||
)}
|
||||
{canEdit && (
|
||||
<button
|
||||
onClick={() => removeMember.mutate(m.username)}
|
||||
className="text-[var(--c-muted)] hover:text-[var(--c-danger)] transition-colors p-1"
|
||||
title="Remove member"
|
||||
>
|
||||
<svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Add member form */}
|
||||
{canEdit && (
|
||||
<form onSubmit={add} className="flex items-center gap-2">
|
||||
<input
|
||||
value={username}
|
||||
onChange={e => setUsername(e.target.value)}
|
||||
placeholder="Username to add"
|
||||
className="flex-1 px-3 py-2 text-sm border border-[var(--c-border)] rounded-lg bg-[var(--c-surface-muted)] text-[var(--c-text)] placeholder:text-[var(--c-muted)] focus:outline-none focus:border-[var(--c-brand-focus)]"
|
||||
/>
|
||||
<select
|
||||
value={role}
|
||||
onChange={e => setRole(e.target.value)}
|
||||
className="px-2 py-2 text-sm border border-[var(--c-border)] rounded-lg bg-[var(--c-surface)] text-[var(--c-text)] focus:outline-none focus:border-[var(--c-brand-focus)]"
|
||||
>
|
||||
<option value="member">Member</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!username.trim() || addMember.isPending}
|
||||
className="px-3 py-2 text-sm font-medium bg-[var(--c-brand)] hover:bg-[var(--c-brand-hover)] text-white rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
{addMember.isError && (
|
||||
<p className="text-xs text-[var(--c-danger)]">{(addMember.error as Error)?.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Secrets ───────────────────────────────────────────────────────────────────
|
||||
|
||||
function SecretsSection({ handle }: { handle: string }) {
|
||||
const { data: secrets } = useWorkspaceSecrets(handle)
|
||||
const upsert = useUpsertWorkspaceSecret(handle)
|
||||
const del = useDeleteWorkspaceSecret(handle)
|
||||
const [name, setName] = useState('')
|
||||
const [value, setValue] = useState('')
|
||||
|
||||
function submit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (!name.trim() || !value.trim()) return
|
||||
upsert.mutate({ name: name.trim(), value: value.trim() }, {
|
||||
onSuccess: () => { setName(''); setValue('') },
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Section title="Secrets">
|
||||
<p className="text-xs text-[var(--c-muted)] mb-3">
|
||||
Secrets are available to all CI pipelines in this workspace's repositories. Values are write-only and never displayed after creation.
|
||||
</p>
|
||||
<div className="space-y-3">
|
||||
<div className="divide-y divide-[var(--c-border)] border border-[var(--c-border)] rounded-lg overflow-hidden">
|
||||
{!secrets?.length ? (
|
||||
<p className="px-4 py-3 text-xs text-[var(--c-muted)]">No workspace secrets.</p>
|
||||
) : (
|
||||
secrets.map(s => (
|
||||
<div key={s.id} className="flex items-center gap-3 px-4 py-2.5">
|
||||
<code className="flex-1 text-xs font-mono text-[var(--c-text)]">{s.name}</code>
|
||||
<span className="text-[10px] text-[var(--c-muted)]">••••••••</span>
|
||||
<button
|
||||
onClick={() => del.mutate(s.name)}
|
||||
className="text-[var(--c-muted)] hover:text-[var(--c-danger)] transition-colors p-1"
|
||||
>
|
||||
<svg width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<form onSubmit={submit} className="flex items-center gap-2">
|
||||
<input
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, '_'))}
|
||||
placeholder="SECRET_NAME"
|
||||
className="w-40 px-3 py-2 text-sm border border-[var(--c-border)] rounded-lg bg-[var(--c-surface-muted)] text-[var(--c-text)] placeholder:text-[var(--c-muted)] focus:outline-none focus:border-[var(--c-brand-focus)] font-mono"
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
value={value}
|
||||
onChange={e => setValue(e.target.value)}
|
||||
placeholder="Secret value"
|
||||
className="flex-1 px-3 py-2 text-sm border border-[var(--c-border)] rounded-lg bg-[var(--c-surface-muted)] text-[var(--c-text)] placeholder:text-[var(--c-muted)] focus:outline-none focus:border-[var(--c-brand-focus)]"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!name.trim() || !value.trim() || upsert.isPending}
|
||||
className="px-3 py-2 text-sm font-medium bg-[var(--c-brand)] hover:bg-[var(--c-brand-hover)] text-white rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Danger zone ───────────────────────────────────────────────────────────────
|
||||
|
||||
function DangerSection({ handle, myRole }: { handle: string; myRole: string }) {
|
||||
const del = useDeleteWorkspace(handle)
|
||||
const navigate = useNavigate()
|
||||
|
||||
if (myRole !== 'owner') return null
|
||||
|
||||
return (
|
||||
<Section title="Danger zone">
|
||||
<div className="flex items-center justify-between gap-4 p-3 border border-[var(--c-danger)]/30 rounded-lg bg-[var(--c-danger-tint)]">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[var(--c-text)]">Delete workspace</p>
|
||||
<p className="text-xs text-[var(--c-muted)] mt-0.5">
|
||||
Permanently deletes the workspace and all membership. Repos must be deleted first.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (confirm(`Delete workspace "${handle}"? This cannot be undone.`)) {
|
||||
del.mutate(undefined, { onSuccess: () => navigate('/workspaces') })
|
||||
}
|
||||
}}
|
||||
disabled={del.isPending}
|
||||
className="px-3 py-2 text-sm font-medium border border-[var(--c-danger)] text-[var(--c-danger)] rounded-lg hover:bg-[var(--c-danger)] hover:text-white transition-colors disabled:opacity-50 shrink-0"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Page ──────────────────────────────────────────────────────────────────────
|
||||
|
||||
export default function WorkspaceSettingsPage() {
|
||||
const { handle = '' } = useParams()
|
||||
const { data: ws, isLoading } = useWorkspace(handle)
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto px-4 md:px-6 py-5 space-y-4">
|
||||
{[1, 2, 3].map(i => <Skeleton key={i} className="h-40 rounded-lg" />)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!ws) {
|
||||
return <div className="p-6 text-sm text-[var(--c-muted)]">Workspace not found.</div>
|
||||
}
|
||||
|
||||
const canAdmin = ws.myRole === 'owner' || ws.myRole === 'admin'
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto px-4 md:px-6 py-5 space-y-5">
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold text-[var(--c-text)]">
|
||||
{ws.displayName || ws.handle} — Settings
|
||||
</h1>
|
||||
<p className="text-xs text-[var(--c-muted)] mt-0.5 font-mono">@{ws.handle}</p>
|
||||
</div>
|
||||
|
||||
{canAdmin && <GeneralSection handle={handle} />}
|
||||
<MembersSection handle={handle} myRole={ws.myRole} />
|
||||
{canAdmin && <SecretsSection handle={handle} />}
|
||||
<DangerSection handle={handle} myRole={ws.myRole} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,182 @@
|
||||
import { useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { useWorkspaces, useCreateWorkspace } from '../api/queries/workspaces'
|
||||
import { Skeleton } from '../ui/Skeleton'
|
||||
import type { WorkspaceWithMeta } from '../types/api'
|
||||
|
||||
function WorkspaceCard({ ws }: { ws: WorkspaceWithMeta }) {
|
||||
return (
|
||||
<Link
|
||||
to={`/workspaces/${ws.handle}`}
|
||||
className="flex items-center gap-4 p-4 border border-[var(--c-border)] rounded-lg bg-[var(--c-surface)] hover:border-[var(--c-brand-focus)] hover:bg-[var(--c-surface-muted)] transition-colors group"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-lg bg-[var(--c-brand)] flex items-center justify-center text-white text-sm font-bold shrink-0">
|
||||
{ws.displayName?.[0]?.toUpperCase() || ws.handle[0].toUpperCase()}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-semibold text-[var(--c-text)] group-hover:text-[var(--c-brand)] transition-colors">
|
||||
{ws.displayName || ws.handle}
|
||||
</span>
|
||||
<span className="text-xs font-mono text-[var(--c-muted)]">@{ws.handle}</span>
|
||||
{ws.myRole && (
|
||||
<span className="text-[10px] font-semibold px-1.5 py-px rounded border border-[var(--c-border)] text-[var(--c-muted)] capitalize">
|
||||
{ws.myRole}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{ws.description && (
|
||||
<p className="text-xs text-[var(--c-muted)] mt-0.5 truncate">{ws.description}</p>
|
||||
)}
|
||||
<div className="flex items-center gap-3 mt-1 text-[10px] text-[var(--c-subtle)]">
|
||||
<span>{ws.repoCount} repo{ws.repoCount !== 1 ? 's' : ''}</span>
|
||||
<span>{ws.memberCount} member{ws.memberCount !== 1 ? 's' : ''}</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg className="shrink-0 text-[var(--c-border)] group-hover:text-[var(--c-brand)] transition-colors" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
function CreateModal({ onClose }: { onClose: () => void }) {
|
||||
const [handle, setHandle] = useState('')
|
||||
const [displayName, setDisplayName] = useState('')
|
||||
const [description, setDescription] = useState('')
|
||||
const create = useCreateWorkspace()
|
||||
|
||||
function submit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (!handle.trim()) return
|
||||
create.mutate(
|
||||
{ handle: handle.trim(), displayName: displayName.trim(), description: description.trim() },
|
||||
{ onSuccess: onClose },
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4" onClick={onClose}>
|
||||
<div className="w-full max-w-md bg-[var(--c-surface)] border border-[var(--c-border)] rounded-xl shadow-2xl" onClick={e => e.stopPropagation()}>
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-[var(--c-border)]">
|
||||
<h2 className="text-sm font-semibold text-[var(--c-text)]">Create a workspace</h2>
|
||||
<button onClick={onClose} className="text-[var(--c-muted)] hover:text-[var(--c-text)] transition-colors">
|
||||
<svg width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<form onSubmit={submit} className="p-5 space-y-4">
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[var(--c-text)] mb-1.5">
|
||||
Handle <span className="text-[var(--c-danger)]">*</span>
|
||||
</label>
|
||||
<input
|
||||
value={handle}
|
||||
onChange={e => setHandle(e.target.value.toLowerCase().replace(/[^a-z0-9_-]/g, '-'))}
|
||||
placeholder="acme-corp"
|
||||
required
|
||||
autoFocus
|
||||
className="w-full px-3 py-2 text-sm border border-[var(--c-border)] rounded-lg bg-[var(--c-surface-muted)] text-[var(--c-text)] placeholder:text-[var(--c-muted)] focus:outline-none focus:border-[var(--c-brand-focus)] font-mono"
|
||||
/>
|
||||
<p className="text-[10px] text-[var(--c-muted)] mt-1">
|
||||
Used in URLs. Letters, numbers, hyphens, underscores only.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[var(--c-text)] mb-1.5">Display name</label>
|
||||
<input
|
||||
value={displayName}
|
||||
onChange={e => setDisplayName(e.target.value)}
|
||||
placeholder="Acme Corp"
|
||||
className="w-full px-3 py-2 text-sm border border-[var(--c-border)] rounded-lg bg-[var(--c-surface-muted)] text-[var(--c-text)] placeholder:text-[var(--c-muted)] focus:outline-none focus:border-[var(--c-brand-focus)]"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-[var(--c-text)] mb-1.5">Description</label>
|
||||
<input
|
||||
value={description}
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
placeholder="Our engineering workspace"
|
||||
className="w-full px-3 py-2 text-sm border border-[var(--c-border)] rounded-lg bg-[var(--c-surface-muted)] text-[var(--c-text)] placeholder:text-[var(--c-muted)] focus:outline-none focus:border-[var(--c-brand-focus)]"
|
||||
/>
|
||||
</div>
|
||||
{create.isError && (
|
||||
<p className="text-xs text-[var(--c-danger)]">
|
||||
{(create.error as Error)?.message ?? 'Failed to create workspace'}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex gap-2 pt-1">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!handle.trim() || create.isPending}
|
||||
className="flex-1 py-2 bg-[var(--c-brand)] hover:bg-[var(--c-brand-hover)] text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
{create.isPending ? 'Creating…' : 'Create workspace'}
|
||||
</button>
|
||||
<button type="button" onClick={onClose} className="px-4 py-2 border border-[var(--c-border)] text-sm text-[var(--c-text)] rounded-lg hover:bg-[var(--c-surface-muted)] transition-colors">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function WorkspacesPage() {
|
||||
const { data: workspaces, isLoading } = useWorkspaces()
|
||||
const [showCreate, setShowCreate] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto px-4 md:px-6 py-5 space-y-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-lg font-semibold text-[var(--c-text)]">Workspaces</h1>
|
||||
<p className="text-xs text-[var(--c-muted)] mt-0.5">Shared namespaces for team repositories</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowCreate(true)}
|
||||
className="flex items-center gap-1.5 px-3 py-2 text-sm font-medium bg-[var(--c-brand)] hover:bg-[var(--c-brand-hover)] text-white rounded-lg transition-colors"
|
||||
>
|
||||
<svg width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
||||
</svg>
|
||||
New workspace
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="space-y-3">
|
||||
{[1, 2, 3].map(i => <Skeleton key={i} className="h-20 rounded-lg" />)}
|
||||
</div>
|
||||
) : !workspaces?.length ? (
|
||||
<div className="flex flex-col items-center justify-center py-20 border border-dashed border-[var(--c-border)] rounded-lg gap-3 text-center">
|
||||
<div className="w-10 h-10 rounded-full bg-[var(--c-surface-muted)] flex items-center justify-center">
|
||||
<svg width="20" height="20" fill="none" stroke="var(--c-muted)" strokeWidth="1.5" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[var(--c-text)]">No workspaces yet</p>
|
||||
<p className="text-xs text-[var(--c-muted)] mt-1 max-w-xs">
|
||||
Create a workspace to share repositories with your team.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowCreate(true)}
|
||||
className="px-4 py-2 text-sm font-medium bg-[var(--c-brand)] hover:bg-[var(--c-brand-hover)] text-white rounded-lg transition-colors"
|
||||
>
|
||||
Create your first workspace
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{workspaces.map(ws => <WorkspaceCard key={ws.id} ws={ws} />)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showCreate && <CreateModal onClose={() => setShowCreate(false)} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -260,6 +260,43 @@ export interface EnvironmentWithLatest extends Environment {
|
||||
latestDeployment: Deployment | null
|
||||
}
|
||||
|
||||
// ── Workspaces + Secrets (Phase 3C) ──────────────────────────────────────────
|
||||
|
||||
export type WorkspaceRole = 'owner' | 'admin' | 'member'
|
||||
|
||||
export interface Workspace {
|
||||
id: number
|
||||
handle: string
|
||||
displayName: string
|
||||
description: string
|
||||
avatarUrl: string
|
||||
createdBy: number
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
export interface WorkspaceWithMeta extends Workspace {
|
||||
memberCount: number
|
||||
repoCount: number
|
||||
myRole: string
|
||||
}
|
||||
|
||||
export interface WorkspaceMember {
|
||||
id: number
|
||||
workspaceId: number
|
||||
userId: number
|
||||
username: string
|
||||
role: WorkspaceRole
|
||||
addedAt: string
|
||||
}
|
||||
|
||||
export interface SecretListItem {
|
||||
id: number
|
||||
name: string
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
// ── Unified Operational Timeline (Phase 3B) ──────────────────────────────────
|
||||
|
||||
export interface CommitEvent {
|
||||
|
||||
Reference in New Issue
Block a user