init studio admin frontend
This commit is contained in:
@@ -0,0 +1,188 @@
|
||||
import { Copy, ExternalLink, Link2, RotateCcw } from 'lucide-react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { Badge, Button, Card, CardHeader } from '../../components/ui';
|
||||
import { useToast } from '../../components/toast';
|
||||
import { PageTitle } from '../../layout/AppLayout';
|
||||
import type { GiteaRepo } from '../../types/application';
|
||||
import { LoadingModal, useMinimumLoading } from '../operations/operation-utils';
|
||||
import { getLauncherSource, listLauncherVersions, listPlatformRepos, updateLauncherSource, type LauncherVersion } from './launcher-api';
|
||||
|
||||
const giteaBaseUrl = import.meta.env.VITE_GITEA_BASE_URL ?? 'http://localhost:3000';
|
||||
const giteaSshBaseUrl = import.meta.env.VITE_GITEA_SSH_BASE_URL ?? 'ssh://git@localhost:2222';
|
||||
const giteaAppOrg = import.meta.env.VITE_GITEA_APP_ORG ?? 'platform';
|
||||
|
||||
function repoFullName(repo: GiteaRepo) {
|
||||
return (repo as GiteaRepo & { fullName?: string }).fullName ?? repo.full_name ?? normalizeRepository(repo.name);
|
||||
}
|
||||
|
||||
function normalizeRepository(repository?: string | null) {
|
||||
if (!repository) return '';
|
||||
const value = repository.replace(/^\/+|\/+$/g, '');
|
||||
return value.includes('/') ? value : `${giteaAppOrg}/${value}`;
|
||||
}
|
||||
|
||||
function httpCloneUrl(repository?: string | null) {
|
||||
const normalizedRepository = normalizeRepository(repository);
|
||||
return normalizedRepository ? `${giteaBaseUrl.replace(/\/$/, '')}/${normalizedRepository}.git` : '-';
|
||||
}
|
||||
|
||||
function sshCloneUrl(repository?: string | null) {
|
||||
const normalizedRepository = normalizeRepository(repository);
|
||||
return normalizedRepository ? `${giteaSshBaseUrl.replace(/\/$/, '')}/${normalizedRepository}.git` : '-';
|
||||
}
|
||||
|
||||
export function LauncherSourcePage() {
|
||||
const { toast } = useToast();
|
||||
const [versions, setVersions] = useState<LauncherVersion[]>([]);
|
||||
const [repos, setRepos] = useState<GiteaRepo[]>([]);
|
||||
const [repository, setRepository] = useState('');
|
||||
const [branch, setBranch] = useState('release');
|
||||
const [commitSha, setCommitSha] = useState('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const loadingVisible = useMinimumLoading(loading);
|
||||
|
||||
const activeVersion = useMemo(() => versions.find((version) => version.isActive) ?? versions[0], [versions]);
|
||||
|
||||
const refresh = () => {
|
||||
setLoading(true);
|
||||
Promise.all([listLauncherVersions(), listPlatformRepos(), getLauncherSource()])
|
||||
.then(([nextVersions, nextRepos, sourceResult]) => {
|
||||
setVersions(nextVersions);
|
||||
setRepos(nextRepos);
|
||||
const nextVersion = nextVersions.find((version) => version.isActive) ?? nextVersions[0];
|
||||
setRepository(sourceResult.source.repository ?? nextVersion?.repository ?? (nextRepos[0] ? repoFullName(nextRepos[0]) : ''));
|
||||
setBranch(sourceResult.source.branch ?? nextVersion?.branch ?? 'release');
|
||||
setCommitSha(sourceResult.source.commitSha ?? nextVersion?.commitSha ?? '');
|
||||
})
|
||||
.catch((error: Error) => {
|
||||
toast({ type: 'error', title: '소스 정보 조회 실패', message: error.message });
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
refresh();
|
||||
}, []);
|
||||
|
||||
const save = () => {
|
||||
if (!repository.trim()) return;
|
||||
setSaving(true);
|
||||
updateLauncherSource({
|
||||
repository: repository.trim(),
|
||||
branch: branch.trim() || undefined,
|
||||
commitSha: commitSha.trim() || undefined
|
||||
})
|
||||
.then(() => {
|
||||
toast({ type: 'success', title: '소스 연결', message: '런처 소스 연결을 저장했습니다.' });
|
||||
refresh();
|
||||
})
|
||||
.catch((error: Error) => {
|
||||
toast({ type: 'error', title: '소스 연결 실패', message: error.message });
|
||||
})
|
||||
.finally(() => setSaving(false));
|
||||
};
|
||||
|
||||
const copy = (value: string) => {
|
||||
navigator.clipboard?.writeText(value);
|
||||
toast({ type: 'success', message: '복사되었습니다.' });
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageTitle
|
||||
eyebrow="런처 운영"
|
||||
title="소스 관리"
|
||||
description="런처 클라이언트와 관련 소스 저장소를 연결합니다."
|
||||
actions={
|
||||
<Button variant="outline" className="h-8 px-3 text-[13px]" onClick={refresh} disabled={loading}>
|
||||
<RotateCcw className={loading ? 'size-4 animate-spin' : 'size-4'} />
|
||||
새로고침
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="grid gap-4 xl:grid-cols-[minmax(0,620px)_minmax(0,1fr)]">
|
||||
<Card className="min-w-0 overflow-hidden">
|
||||
<CardHeader title="소스 연결" description="런처 빌드에 사용할 저장소와 기준 브랜치를 선택합니다." />
|
||||
<div className="grid gap-4 p-5 md:grid-cols-3">
|
||||
<label className="block md:col-span-2">
|
||||
<span className="text-xs font-medium text-muted-foreground">저장소</span>
|
||||
<select
|
||||
className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring"
|
||||
value={repository}
|
||||
onChange={(event) => setRepository(event.target.value)}
|
||||
>
|
||||
{repos.length === 0 ? <option value="">등록된 저장소 없음</option> : null}
|
||||
{repos.map((repo) => <option key={repoFullName(repo)} value={repoFullName(repo)}>{repoFullName(repo)}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
<label className="block">
|
||||
<span className="text-xs font-medium text-muted-foreground">브랜치</span>
|
||||
<select
|
||||
className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring"
|
||||
value={branch}
|
||||
onChange={(event) => setBranch(event.target.value)}
|
||||
>
|
||||
<option value="develop">develop</option>
|
||||
<option value="release">release</option>
|
||||
<option value="main">main</option>
|
||||
</select>
|
||||
</label>
|
||||
<label className="block md:col-span-3">
|
||||
<span className="text-xs font-medium text-muted-foreground">Commit SHA</span>
|
||||
<input
|
||||
className="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 font-mono text-sm text-foreground outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-ring"
|
||||
value={commitSha}
|
||||
onChange={(event) => setCommitSha(event.target.value)}
|
||||
placeholder="비워두면 브랜치 최신 커밋 기준"
|
||||
/>
|
||||
</label>
|
||||
<div className="flex justify-end md:col-span-3">
|
||||
<Button onClick={save} disabled={!repository.trim() || saving}>
|
||||
<Link2 className="size-4" />
|
||||
저장
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="min-w-0 overflow-hidden">
|
||||
<CardHeader title="현재 연결" description="런처 빌드 기준입니다." />
|
||||
<div className="space-y-4 p-5 text-sm">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<span className="text-muted-foreground">버전</span>
|
||||
<Badge tone={activeVersion?.isActive ? 'green' : 'neutral'}>{activeVersion?.version ?? '-'}</Badge>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">HTTP Clone URL</p>
|
||||
<div className="mt-2 flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2">
|
||||
<p className="min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground">{httpCloneUrl(repository)}</p>
|
||||
<Button variant="ghost" className="size-8 px-0" onClick={() => copy(httpCloneUrl(repository))} aria-label="HTTP clone URL 복사">
|
||||
<Copy className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">SSH Clone URL</p>
|
||||
<div className="mt-2 flex items-center gap-2 rounded-md border border-border bg-background px-3 py-2">
|
||||
<p className="min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground">{sshCloneUrl(repository)}</p>
|
||||
<Button variant="ghost" className="size-8 px-0" onClick={() => copy(sshCloneUrl(repository))} aria-label="SSH clone URL 복사">
|
||||
<Copy className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{repository ? (
|
||||
<a className="inline-flex items-center gap-1.5 text-xs text-primary" href={`${giteaBaseUrl.replace(/\/$/, '')}/${normalizeRepository(repository)}`} target="_blank" rel="noreferrer">
|
||||
저장소 열기
|
||||
<ExternalLink className="size-3.5" />
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<LoadingModal open={loadingVisible} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user