forked from baron/baron-sso
devfront 연동 앱 목록 테이블 간격 및 문구 정리
This commit is contained in:
@@ -15,6 +15,10 @@ import {
|
|||||||
sortableTableHeadBaseClassName,
|
sortableTableHeadBaseClassName,
|
||||||
sortableTableHeaderClassName,
|
sortableTableHeaderClassName,
|
||||||
} from "../../../../common/core/components/sort";
|
} from "../../../../common/core/components/sort";
|
||||||
|
import {
|
||||||
|
commonTableShellClass,
|
||||||
|
commonTableViewportClass,
|
||||||
|
} from "../../../../common/ui/table";
|
||||||
import {
|
import {
|
||||||
type SortConfig,
|
type SortConfig,
|
||||||
type SortResolverMap,
|
type SortResolverMap,
|
||||||
@@ -427,233 +431,227 @@ function ClientsPage() {
|
|||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card className="glass-panel">
|
<Card className="glass-panel">
|
||||||
<CardHeader className="pb-0">
|
<CardHeader className="flex flex-row items-center justify-between flex-shrink-0">
|
||||||
<div className="flex items-center justify-between">
|
<div>
|
||||||
<CardTitle className="text-xl font-semibold">
|
<CardTitle className="text-xl font-semibold">
|
||||||
{t("ui.dev.clients.list.title", "클라이언트 목록")}
|
{t("ui.dev.clients.list.title", "클라이언트 목록")}
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
{canCreateClient && (
|
<CardDescription>
|
||||||
<div className="flex items-center gap-2 md:hidden">
|
|
||||||
<Button size="sm" onClick={() => navigate("/clients/new")}>
|
|
||||||
<Plus className="h-4 w-4" />
|
|
||||||
{t("ui.dev.clients.new", "새 클라이언트")}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<Table>
|
|
||||||
<TableHeader className={sortableTableHeaderClassName}>
|
|
||||||
<TableRow>
|
|
||||||
<SortableTableHead
|
|
||||||
label={t("ui.dev.clients.table.application", "애플리케이션")}
|
|
||||||
onSort={requestSort}
|
|
||||||
sortConfig={sortConfig}
|
|
||||||
sortKey="application"
|
|
||||||
/>
|
|
||||||
<SortableTableHead
|
|
||||||
label={t("ui.dev.clients.table.client_id", "Client ID")}
|
|
||||||
onSort={requestSort}
|
|
||||||
sortConfig={sortConfig}
|
|
||||||
sortKey="id"
|
|
||||||
/>
|
|
||||||
<SortableTableHead
|
|
||||||
label={t("ui.dev.clients.table.type", "유형")}
|
|
||||||
onSort={requestSort}
|
|
||||||
sortConfig={sortConfig}
|
|
||||||
sortKey="type"
|
|
||||||
/>
|
|
||||||
<SortableTableHead
|
|
||||||
label={t("ui.dev.clients.table.status", "상태")}
|
|
||||||
onSort={requestSort}
|
|
||||||
sortConfig={sortConfig}
|
|
||||||
sortKey="status"
|
|
||||||
/>
|
|
||||||
<SortableTableHead
|
|
||||||
label={t("ui.dev.clients.table.created_at", "생성일")}
|
|
||||||
onSort={requestSort}
|
|
||||||
sortConfig={sortConfig}
|
|
||||||
sortKey="createdAt"
|
|
||||||
/>
|
|
||||||
<TableHead
|
|
||||||
className={`${sortableTableHeadBaseClassName} text-right`}
|
|
||||||
>
|
|
||||||
{t("ui.dev.clients.table.actions", "액션")}
|
|
||||||
</TableHead>
|
|
||||||
</TableRow>
|
|
||||||
</TableHeader>
|
|
||||||
<TableBody>
|
|
||||||
{!hasFilterResult && (
|
|
||||||
<TableRow>
|
|
||||||
<TableCell
|
|
||||||
colSpan={6}
|
|
||||||
className="h-32 text-center text-muted-foreground"
|
|
||||||
>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<p className="font-medium text-foreground">
|
|
||||||
{isFilteredOut
|
|
||||||
? t(
|
|
||||||
"msg.dev.clients.empty_filtered",
|
|
||||||
"조건에 맞는 연동 앱이 없습니다.",
|
|
||||||
)
|
|
||||||
: canCreateClient
|
|
||||||
? t(
|
|
||||||
"msg.dev.clients.empty_can_create",
|
|
||||||
"아직 등록된 연동 앱이 없습니다.",
|
|
||||||
)
|
|
||||||
: isDeveloperRequestPending
|
|
||||||
? t(
|
|
||||||
"msg.dev.clients.empty_pending",
|
|
||||||
"개발자 권한 신청을 검토 중입니다.",
|
|
||||||
)
|
|
||||||
: t(
|
|
||||||
"msg.dev.clients.empty",
|
|
||||||
"조회 가능한 RP가 없습니다.",
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
<div className="text-sm space-y-2">
|
|
||||||
<p className="text-muted-foreground">
|
|
||||||
{isFilteredOut
|
|
||||||
? t(
|
|
||||||
"msg.dev.clients.empty_filtered_detail",
|
|
||||||
"검색어나 필터 조건을 변경해 보세요.",
|
|
||||||
)
|
|
||||||
: canCreateClient
|
|
||||||
? t(
|
|
||||||
"msg.dev.clients.empty_can_create_detail",
|
|
||||||
"연동 앱 추가 버튼으로 새 RP를 생성하면 이 목록에 표시됩니다.",
|
|
||||||
)
|
|
||||||
: isDeveloperRequestPending
|
|
||||||
? t(
|
|
||||||
"msg.dev.clients.empty_pending_detail",
|
|
||||||
"super admin이 승인하면 연동 앱을 추가할 수 있습니다.",
|
|
||||||
)
|
|
||||||
: t(
|
|
||||||
"msg.dev.clients.empty_detail",
|
|
||||||
"RP 관계가 부여되면 이 목록에 해당 RP가 표시됩니다.",
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
{!isFilteredOut && canCreateClient && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="text-primary font-bold hover:underline"
|
|
||||||
onClick={() => navigate("/clients/new")}
|
|
||||||
>
|
|
||||||
{t("ui.dev.clients.new", "연동 앱 추가")}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
{!isFilteredOut && canRequestDeveloperAccess && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="text-primary font-bold hover:underline"
|
|
||||||
onClick={() => navigate("/developer-requests")}
|
|
||||||
>
|
|
||||||
{t(
|
|
||||||
"ui.dev.welcome.btn_request",
|
|
||||||
"개발자 등록 신청하기",
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
)}
|
|
||||||
{filteredClients.map((client) => (
|
|
||||||
<TableRow key={client.id} className="bg-card/40">
|
|
||||||
<TableCell>
|
|
||||||
<Link
|
|
||||||
to={`/clients/${client.id}`}
|
|
||||||
className="flex items-center gap-3 transition-colors hover:text-primary"
|
|
||||||
>
|
|
||||||
<ClientLogo client={client} />
|
|
||||||
<div>
|
|
||||||
<p className="font-semibold">
|
|
||||||
{client.name ||
|
|
||||||
t("ui.dev.clients.untitled", "Untitled")}
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-muted-foreground">
|
|
||||||
{t("ui.dev.clients.tenant_scoped", "Tenant-scoped")}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<code className="rounded-md bg-secondary/60 px-2 py-1 font-mono text-xs text-muted-foreground">
|
|
||||||
{client.id}
|
|
||||||
</code>
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<div className="flex flex-wrap items-center gap-2">
|
|
||||||
<Badge
|
|
||||||
variant={
|
|
||||||
client.type === "private" ||
|
|
||||||
client.metadata?.headless_login_enabled
|
|
||||||
? "success"
|
|
||||||
: "muted"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{client.metadata?.headless_login_enabled
|
|
||||||
? t(
|
|
||||||
"ui.dev.clients.type.private_headless",
|
|
||||||
"Server side App (Headless Login)",
|
|
||||||
)
|
|
||||||
: client.type === "private"
|
|
||||||
? t(
|
|
||||||
"ui.dev.clients.type.private",
|
|
||||||
"Server side App",
|
|
||||||
)
|
|
||||||
: t("ui.dev.clients.type.pkce", "PKCE")}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<Badge
|
|
||||||
variant={client.status === "active" ? "info" : "muted"}
|
|
||||||
className="px-3 py-1 text-xs uppercase"
|
|
||||||
>
|
|
||||||
{client.status === "active"
|
|
||||||
? t("ui.common.status.active", "Active")
|
|
||||||
: t("ui.common.status.inactive", "Inactive")}
|
|
||||||
</Badge>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="text-muted-foreground">
|
|
||||||
{client.createdAt
|
|
||||||
? new Date(client.createdAt).toLocaleDateString()
|
|
||||||
: "-"}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="text-right">
|
|
||||||
<div className="flex items-center justify-end gap-2">
|
|
||||||
<Button variant="ghost" size="sm" asChild>
|
|
||||||
<Link to={`/clients/${client.id}`}>
|
|
||||||
{t("ui.common.view", "View")}
|
|
||||||
</Link>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
<div className="mt-4 flex items-center justify-between rounded-xl border border-border/60 bg-secondary/60 px-4 py-3 text-sm text-muted-foreground">
|
|
||||||
<span>
|
|
||||||
{t(
|
{t(
|
||||||
"msg.dev.clients.showing",
|
"msg.dev.clients.showing",
|
||||||
"Showing {{shown}} of {{total}} clients",
|
"총 {{shown}}개의 애플리케이션이 등록되어 있습니다.",
|
||||||
{ shown: filteredClients.length, total: totalClients },
|
{ shown: totalClients },
|
||||||
)}
|
)}
|
||||||
</span>
|
</CardDescription>
|
||||||
<div className="flex gap-2">
|
</div>
|
||||||
<Button variant="outline" size="sm" disabled>
|
{canCreateClient && (
|
||||||
{t("ui.common.previous", "Previous")}
|
<div className="flex items-center gap-2 md:hidden">
|
||||||
</Button>
|
<Button size="sm" onClick={() => navigate("/clients/new")}>
|
||||||
<Button variant="outline" size="sm" disabled>
|
<Plus className="h-4 w-4" />
|
||||||
{t("ui.common.next", "Next")}
|
{t("ui.dev.clients.new", "새 클라이언트")}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex-1 flex flex-col min-h-0 pt-0">
|
||||||
|
<div className={commonTableShellClass}>
|
||||||
|
<div className={commonTableViewportClass}>
|
||||||
|
<Table className="min-w-[1180px]">
|
||||||
|
<TableHeader className={sortableTableHeaderClassName}>
|
||||||
|
<TableRow>
|
||||||
|
<SortableTableHead
|
||||||
|
label={t("ui.dev.clients.table.application", "애플리케이션")}
|
||||||
|
onSort={requestSort}
|
||||||
|
sortConfig={sortConfig}
|
||||||
|
sortKey="application"
|
||||||
|
/>
|
||||||
|
<SortableTableHead
|
||||||
|
label={t("ui.dev.clients.table.client_id", "Client ID")}
|
||||||
|
onSort={requestSort}
|
||||||
|
sortConfig={sortConfig}
|
||||||
|
sortKey="id"
|
||||||
|
/>
|
||||||
|
<SortableTableHead
|
||||||
|
label={t("ui.dev.clients.table.type", "유형")}
|
||||||
|
onSort={requestSort}
|
||||||
|
sortConfig={sortConfig}
|
||||||
|
sortKey="type"
|
||||||
|
/>
|
||||||
|
<SortableTableHead
|
||||||
|
label={t("ui.dev.clients.table.status", "상태")}
|
||||||
|
onSort={requestSort}
|
||||||
|
sortConfig={sortConfig}
|
||||||
|
sortKey="status"
|
||||||
|
/>
|
||||||
|
<SortableTableHead
|
||||||
|
label={t("ui.dev.clients.table.created_at", "생성일")}
|
||||||
|
onSort={requestSort}
|
||||||
|
sortConfig={sortConfig}
|
||||||
|
sortKey="createdAt"
|
||||||
|
/>
|
||||||
|
<TableHead
|
||||||
|
className={`${sortableTableHeadBaseClassName} text-right`}
|
||||||
|
>
|
||||||
|
{t("ui.dev.clients.table.actions", "액션")}
|
||||||
|
</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{!hasFilterResult && (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell
|
||||||
|
colSpan={6}
|
||||||
|
className="h-32 text-center text-muted-foreground"
|
||||||
|
>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className="font-medium text-foreground">
|
||||||
|
{isFilteredOut
|
||||||
|
? t(
|
||||||
|
"msg.dev.clients.empty_filtered",
|
||||||
|
"조건에 맞는 연동 앱이 없습니다.",
|
||||||
|
)
|
||||||
|
: canCreateClient
|
||||||
|
? t(
|
||||||
|
"msg.dev.clients.empty_can_create",
|
||||||
|
"아직 등록된 연동 앱이 없습니다.",
|
||||||
|
)
|
||||||
|
: isDeveloperRequestPending
|
||||||
|
? t(
|
||||||
|
"msg.dev.clients.empty_pending",
|
||||||
|
"개발자 권한 신청을 검토 중입니다.",
|
||||||
|
)
|
||||||
|
: t(
|
||||||
|
"msg.dev.clients.empty",
|
||||||
|
"조회 가능한 RP가 없습니다.",
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
<div className="text-sm space-y-2">
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
{isFilteredOut
|
||||||
|
? t(
|
||||||
|
"msg.dev.clients.empty_filtered_detail",
|
||||||
|
"검색어나 필터 조건을 변경해 보세요.",
|
||||||
|
)
|
||||||
|
: canCreateClient
|
||||||
|
? t(
|
||||||
|
"msg.dev.clients.empty_can_create_detail",
|
||||||
|
"연동 앱 추가 버튼으로 새 RP를 생성하면 이 목록에 표시됩니다.",
|
||||||
|
)
|
||||||
|
: isDeveloperRequestPending
|
||||||
|
? t(
|
||||||
|
"msg.dev.clients.empty_pending_detail",
|
||||||
|
"super admin이 승인하면 연동 앱을 추가할 수 있습니다.",
|
||||||
|
)
|
||||||
|
: t(
|
||||||
|
"msg.dev.clients.empty_detail",
|
||||||
|
"RP 관계가 부여되면 이 목록에 해당 RP가 표시됩니다.",
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
{!isFilteredOut && canCreateClient && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="text-primary font-bold hover:underline"
|
||||||
|
onClick={() => navigate("/clients/new")}
|
||||||
|
>
|
||||||
|
{t("ui.dev.clients.new", "연동 앱 추가")}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{!isFilteredOut && canRequestDeveloperAccess && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="text-primary font-bold hover:underline"
|
||||||
|
onClick={() => navigate("/developer-requests")}
|
||||||
|
>
|
||||||
|
{t(
|
||||||
|
"ui.dev.welcome.btn_request",
|
||||||
|
"개발자 등록 신청하기",
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)}
|
||||||
|
{filteredClients.map((client) => (
|
||||||
|
<TableRow key={client.id}>
|
||||||
|
<TableCell>
|
||||||
|
<Link
|
||||||
|
to={`/clients/${client.id}`}
|
||||||
|
className="flex items-center gap-3 transition-colors hover:text-primary"
|
||||||
|
>
|
||||||
|
<ClientLogo client={client} />
|
||||||
|
<div>
|
||||||
|
<p className="font-semibold">
|
||||||
|
{client.name ||
|
||||||
|
t("ui.dev.clients.untitled", "Untitled")}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{t("ui.dev.clients.tenant_scoped", "Tenant-scoped")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<code className="rounded-md bg-secondary/60 px-2 py-1 font-mono text-xs text-muted-foreground">
|
||||||
|
{client.id}
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
<Badge
|
||||||
|
variant={
|
||||||
|
client.type === "private" ||
|
||||||
|
client.metadata?.headless_login_enabled
|
||||||
|
? "success"
|
||||||
|
: "muted"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{client.metadata?.headless_login_enabled
|
||||||
|
? t(
|
||||||
|
"ui.dev.clients.type.private_headless",
|
||||||
|
"Server side App (Headless Login)",
|
||||||
|
)
|
||||||
|
: client.type === "private"
|
||||||
|
? t(
|
||||||
|
"ui.dev.clients.type.private",
|
||||||
|
"Server side App",
|
||||||
|
)
|
||||||
|
: t("ui.dev.clients.type.pkce", "PKCE")}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge
|
||||||
|
variant={client.status === "active" ? "info" : "muted"}
|
||||||
|
className="px-3 py-1 text-xs uppercase"
|
||||||
|
>
|
||||||
|
{client.status === "active"
|
||||||
|
? t("ui.common.status.active", "Active")
|
||||||
|
: t("ui.common.status.inactive", "Inactive")}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-muted-foreground">
|
||||||
|
{client.createdAt
|
||||||
|
? new Date(client.createdAt).toLocaleDateString()
|
||||||
|
: "-"}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right">
|
||||||
|
<div className="flex items-center justify-end gap-2">
|
||||||
|
<Button variant="ghost" size="sm" asChild>
|
||||||
|
<Link to={`/clients/${client.id}`}>
|
||||||
|
{t("ui.common.view", "View")}
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
@@ -331,7 +331,7 @@ desc = "Please enter the reason for your request. It will be approved after admi
|
|||||||
[msg.dev.clients]
|
[msg.dev.clients]
|
||||||
load_error = "Error loading clients: {{error}}"
|
load_error = "Error loading clients: {{error}}"
|
||||||
loading = "Loading apps..."
|
loading = "Loading apps..."
|
||||||
showing = "Showing {{shown}} of {{total}} apps"
|
showing = "A total of {{shown}} applications are registered."
|
||||||
deleted = "App deleted."
|
deleted = "App deleted."
|
||||||
delete_error = "Failed to delete: {{error}}"
|
delete_error = "Failed to delete: {{error}}"
|
||||||
delete_confirm = "Are you sure you want to delete this app? This action cannot be undone."
|
delete_confirm = "Are you sure you want to delete this app? This action cannot be undone."
|
||||||
|
|||||||
@@ -342,7 +342,7 @@ empty_pending = "개발자 권한 신청을 검토 중입니다."
|
|||||||
empty_pending_detail = "super admin이 승인하면 연동 앱을 추가할 수 있습니다."
|
empty_pending_detail = "super admin이 승인하면 연동 앱을 추가할 수 있습니다."
|
||||||
load_error = "앱 정보를 불러오지 못했습니다: {{error}}"
|
load_error = "앱 정보를 불러오지 못했습니다: {{error}}"
|
||||||
loading = "앱 정보를 불러오는 중..."
|
loading = "앱 정보를 불러오는 중..."
|
||||||
showing = "전체 {{total}}개 중 {{shown}}개를 표시하는 중입니다."
|
showing = "총 {{shown}}개의 애플리케이션이 등록되어 있습니다."
|
||||||
|
|
||||||
[msg.dev.clients.consents]
|
[msg.dev.clients.consents]
|
||||||
empty = "조회된 동의 내역이 없습니다."
|
empty = "조회된 동의 내역이 없습니다."
|
||||||
|
|||||||
Reference in New Issue
Block a user