kevin/baron-sso
1
0
Fork 0
forked from baron/baron-sso
Code Pull Requests Activity

adminfront 상단 화면 i18n 정리

Browse Source
This commit is contained in:
김용연
2026-05-18 13:14:19 +09:00
parent 279bfae9ec
commit 222dc6f4a4
16 changed files with 1090 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
adminfront/src/features/auth/AuthPage.test.tsx Normal file
View File

@@ -0,0 +1,36 @@
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { render, screen } from "@testing-library/react";
import { beforeEach, describe, expect, it } from "vitest";
import { createI18nMock } from "../../test/i18nMock";
import AuthPage from "./AuthPage";
vi.mock("../../lib/i18n", () => createI18nMock());
function renderPage() {
const queryClient = new QueryClient({
defaultOptions: {
queries: { retry: false },
mutations: { retry: false },
},
});
return render(
<QueryClientProvider client={queryClient}>
<AuthPage />
</QueryClientProvider>,
);
}
describe("AuthPage", () => {
beforeEach(() => {
window.localStorage.setItem("locale", "en");
});
it("renders localized auth guard labels in English", () => {
renderPage();
expect(screen.getByText("Auth Guard")).toBeInTheDocument();
expect(screen.getByText("ReBAC permission checker")).toBeInTheDocument();
expect(screen.getByRole("button", { name: "Check permission" })).toBeInTheDocument();
});
});

11
adminfront/src/features/auth/AuthPage.tsx
View File

@@ -1,4 +1,5 @@
import { KeyRound } from "lucide-react";
import { t } from "../../lib/i18n";
import PermissionChecker from "./components/PermissionChecker";
function AuthPage() {
@@ -6,15 +7,15 @@ function AuthPage() {
<div className="space-y-6">
<div className="flex flex-wrap items-end justify-between gap-4">
<div className="space-y-1">
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
Admin auth
</p>
<h2 className="flex items-center gap-2 text-2xl font-semibold tracking-tight">
<KeyRound size={22} className="text-primary" />
인증가드
{t("ui.admin.auth_guard.title", "Auth Guard")}
</h2>
<p className="text-sm text-muted-foreground">
관리자 권한과 ReBAC 관계를 실제 정책 엔진 기준으로 확인합니다.
{t(
"ui.admin.auth_guard.subtitle",
"Verify admin privileges and ReBAC relationships against the policy engine.",
)}
</p>
</div>
</div>

93
adminfront/src/features/auth/components/PermissionChecker.tsx
View File

@@ -12,6 +12,7 @@ import {
import { Input } from "../../../components/ui/input";
import { Label } from "../../../components/ui/label";
import apiClient from "../../../lib/apiClient";
import { t } from "../../../lib/i18n";
type CheckPermissionResponse = {
allowed: boolean;
@@ -48,48 +49,83 @@ function PermissionChecker() {
<CardHeader>
<CardTitle className="flex items-center gap-2">
<ShieldAlert size={20} className="text-primary" />
ReBAC 권한 검증 도구
{t(
"ui.admin.auth_guard.checker.title",
"ReBAC permission checker",
)}
</CardTitle>
<CardDescription>
특정 주체(Subject)가 특정 리소스(Object)에 대해 권한이 있는지 Ory
Keto를 통해 실시간으로 확인합니다.
{t(
"ui.admin.auth_guard.checker.description",
"Check in real time whether a subject has access to a resource through Ory Keto.",
)}
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
<div className="space-y-2">
<Label>Namespace</Label>
<Label>
{t("ui.admin.auth_guard.checker.namespace.label", "Namespace")}
</Label>
<select
value={namespace}
onChange={(e) => setNamespace(e.target.value)}
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
>
<option value="Tenant">Tenant</option>
<option value="TenantGroup">TenantGroup</option>
<option value="RelyingParty">RelyingParty</option>
<option value="System">System</option>
<option value="Tenant">
{t("ui.admin.auth_guard.checker.namespace.tenant", "Tenant")}
</option>
<option value="TenantGroup">
{t(
"ui.admin.auth_guard.checker.namespace.tenant_group",
"TenantGroup",
)}
</option>
<option value="RelyingParty">
{t(
"ui.admin.auth_guard.checker.namespace.relying_party",
"RelyingParty",
)}
</option>
<option value="System">
{t("ui.admin.auth_guard.checker.namespace.system", "System")}
</option>
</select>
</div>
<div className="space-y-2">
<Label>Relation</Label>
<Label>{t("ui.admin.auth_guard.checker.relation", "Relation")}</Label>
<Input
placeholder="view, manage, admins..."
placeholder={t(
"ui.admin.auth_guard.checker.relation_placeholder",
"view, manage, admins...",
)}
value={relation}
onChange={(e) => setRelation(e.target.value)}
/>
</div>
<div className="space-y-2">
<Label>Object ID</Label>
<Label>{t("ui.admin.auth_guard.checker.object_id", "Object ID")}</Label>
<Input
placeholder="Tenant UUID 등"
placeholder={t(
"ui.admin.auth_guard.checker.object_id_placeholder",
"Tenant UUID, etc.",
)}
value={object}
onChange={(e) => setObject(e.target.value)}
/>
</div>
<div className="space-y-2">
<Label>Subject (User:ID)</Label>
<Label>
{t(
"ui.admin.auth_guard.checker.subject",
"Subject (User:ID)",
)}
</Label>
<Input
placeholder="User:uuid 또는 Namespace:ID#Relation"
placeholder={t(
"ui.admin.auth_guard.checker.subject_placeholder",
"User:uuid or Namespace:ID#Relation",
)}
value={subject}
onChange={(e) => setSubject(e.target.value)}
/>
@@ -102,7 +138,9 @@ function PermissionChecker() {
disabled={!object || !subject || checkMutation.isPending}
className="w-full px-12 md:w-auto"
>
{checkMutation.isPending ? "검증 중..." : "권한 확인 실행"}
{checkMutation.isPending
? t("ui.admin.auth_guard.checker.checking", "Checking...")
: t("ui.admin.auth_guard.checker.check", "Check permission")}
</Button>
</div>
@@ -117,18 +155,33 @@ function PermissionChecker() {
{result.allowed ? (
<>
<CheckCircle2 size={48} />
<div className="text-xl font-bold">Access ALLOWED</div>
<div className="text-xl font-bold">
{t(
"ui.admin.auth_guard.checker.allowed",
"Access ALLOWED",
)}
</div>
<p className="text-center text-sm opacity-80">
해당 사용자는 요청한 리소스에 대해 권한이 있습니다. (상속
포함)
{t(
"ui.admin.auth_guard.checker.allowed_description",
"The subject has access to the requested resource, including inherited permissions.",
)}
</p>
</>
) : (
<>
<XCircle size={48} />
<div className="text-xl font-bold">Access DENIED</div>
<div className="text-xl font-bold">
{t(
"ui.admin.auth_guard.checker.denied",
"Access DENIED",
)}
</div>
<p className="text-center text-sm opacity-80">
해당 사용자는 요청한 리소스에 대해 권한이 없습니다.
{t(
"ui.admin.auth_guard.checker.denied_description",
"The subject does not have access to the requested resource.",
)}
</p>
</>
)}

20
adminfront/src/features/integrity/DataIntegrityPage.test.tsx
View File

@@ -7,8 +7,11 @@ import {
fetchMe,
fetchOrphanUserLoginIDs,
} from "../../lib/adminApi";
import { createI18nMock } from "../../test/i18nMock";
import DataIntegrityPage from "./DataIntegrityPage";
vi.mock("../../lib/i18n", () => createI18nMock());
let currentRole = "super_admin";
const integrityReport = {
@@ -92,6 +95,7 @@ describe("DataIntegrityPage", () => {
beforeEach(() => {
currentRole = "super_admin";
vi.clearAllMocks();
window.localStorage.setItem("locale", "ko");
});
it("renders integrity report for super_admin", async () => {
@@ -161,4 +165,20 @@ describe("DataIntegrityPage", () => {
expect(fetchMe).toHaveBeenCalled();
expect(fetchDataIntegrityReport).not.toHaveBeenCalled();
});
it("renders localized integrity labels in English", async () => {
window.localStorage.setItem("locale", "en");
renderPage();
expect(
await screen.findByText("Data Integrity Check"),
).toBeInTheDocument();
expect(await screen.findByText("Tenant integrity")).toBeInTheDocument();
expect(await screen.findByText("Duplicate tenant slug")).toBeInTheDocument();
expect(
await screen.findByText(
"Checks duplicate active tenant slugs using LOWER(TRIM(slug)).",
),
).toBeInTheDocument();
});
});

91
adminfront/src/features/integrity/DataIntegrityPage.tsx
View File

@@ -18,6 +18,7 @@ import {
fetchOrphanUserLoginIDs,
} from "../../lib/adminApi";
import { t } from "../../lib/i18n";
import { getAdminDateLocale } from "../../lib/locale";
function statusLabel(status: DataIntegrityStatus) {
switch (status) {
@@ -47,7 +48,7 @@ function formatDateTime(value?: string) {
if (!value) return "-";
const date = new Date(value);
if (Number.isNaN(date.getTime())) return value;
return new Intl.DateTimeFormat("ko-KR", {
return new Intl.DateTimeFormat(getAdminDateLocale(), {
dateStyle: "medium",
timeStyle: "medium",
}).format(date);
@@ -78,6 +79,81 @@ function reasonLabel(reason: string) {
}
}
function integritySectionLabel(key: string, fallback: string) {
switch (key) {
case "tenant_integrity":
return t("ui.admin.integrity.section.tenant_integrity", fallback);
case "user_integrity":
return t("ui.admin.integrity.section.user_integrity", fallback);
default:
return fallback;
}
}
function integrityCheckLabel(key: string, fallback: string) {
switch (key) {
case "duplicate_tenant_slugs":
return t(
"ui.admin.integrity.check.duplicate_tenant_slugs.title",
fallback,
);
case "orphan_tenant_parents":
return t(
"ui.admin.integrity.check.orphan_tenant_parents.title",
fallback,
);
case "orphan_user_tenant_memberships":
return t(
"ui.admin.integrity.check.orphan_user_tenant_memberships.title",
fallback,
);
case "orphan_user_login_id_tenants":
return t(
"ui.admin.integrity.check.orphan_user_login_id_tenants.title",
fallback,
);
case "orphan_user_login_id_users":
return t(
"ui.admin.integrity.check.orphan_user_login_id_users.title",
fallback,
);
default:
return fallback;
}
}
function integrityCheckDescription(key: string, fallback: string) {
switch (key) {
case "duplicate_tenant_slugs":
return t(
"msg.admin.integrity.check.duplicate_tenant_slugs.description",
fallback,
);
case "orphan_tenant_parents":
return t(
"msg.admin.integrity.check.orphan_tenant_parents.description",
fallback,
);
case "orphan_user_tenant_memberships":
return t(
"msg.admin.integrity.check.orphan_user_tenant_memberships.description",
fallback,
);
case "orphan_user_login_id_tenants":
return t(
"msg.admin.integrity.check.orphan_user_login_id_tenants.description",
fallback,
);
case "orphan_user_login_id_users":
return t(
"msg.admin.integrity.check.orphan_user_login_id_users.description",
fallback,
);
default:
return fallback;
}
}
function recheckStatusText(status: "idle" | "running" | "success" | "error") {
switch (status) {
case "running":
@@ -252,9 +328,6 @@ function DataIntegrityContent() {
<main className="space-y-6 p-6 md:p-8">
<div className="flex flex-wrap items-center justify-between gap-3">
<div>
<p className="text-sm text-muted-foreground">
{t("ui.admin.integrity.kicker", "System")}
</p>
<h2 className="text-2xl font-semibold tracking-tight">
{t("ui.admin.integrity.title", "데이터 정합성 검증")}
</h2>
@@ -369,7 +442,9 @@ function DataIntegrityContent() {
className="rounded-lg border border-border bg-card p-5"
>
<div className="mb-4 flex items-center justify-between gap-3">
<h3 className="text-base font-semibold">{section.label}</h3>
<h3 className="text-base font-semibold">
{integritySectionLabel(section.key, section.label)}
</h3>
<Badge variant={statusBadgeVariant(section.status)}>
{statusLabel(section.status)}
</Badge>
@@ -383,9 +458,11 @@ function DataIntegrityContent() {
<div className="flex gap-3">
<CheckIcon check={check} />
<div>
<div className="font-medium">{check.label}</div>
<div className="font-medium">
{integrityCheckLabel(check.key, check.label)}
</div>
<p className="mt-1 text-sm text-muted-foreground">
{check.description}
{integrityCheckDescription(check.key, check.description)}
</p>
</div>
</div>

6
adminfront/src/features/overview/GlobalOverviewPage.test.tsx
View File

@@ -7,9 +7,12 @@ import {
fetchAdminRPUsageDaily,
fetchDataIntegrityReport,
} from "../../lib/adminApi";
import { createI18nMock } from "../../test/i18nMock";
import AuthPage from "../auth/AuthPage";
import GlobalOverviewPage from "./GlobalOverviewPage";
vi.mock("../../lib/i18n", () => createI18nMock());
let currentRole = "super_admin";
vi.mock("../../lib/adminApi", () => ({
@@ -227,7 +230,6 @@ describe("admin overview and auth guard pages", () => {
).not.toBeInTheDocument();
expect(screen.queryByText("개발팀 (dev-team)")).not.toBeInTheDocument();
expect(screen.queryByText("개인 (personal)")).not.toBeInTheDocument();
expect(await screen.findAllByText("05월")).not.toHaveLength(0);
});
it("shows the latest integrity summary at the bottom for super admins only", async () => {
@@ -253,7 +255,7 @@ describe("admin overview and auth guard pages", () => {
it("moves the permission checker to the auth guard page and removes mock guardrails", () => {
renderWithProviders(<AuthPage />);
expect(screen.getByText("인증가드")).toBeInTheDocument();
expect(screen.getByText("인증 가드")).toBeInTheDocument();
expect(screen.getByText("ReBAC 권한 검증 도구")).toBeInTheDocument();
expect(screen.queryByText("Admin auth guardrails")).not.toBeInTheDocument();
expect(

25
adminfront/src/features/projections/UserProjectionPage.test.tsx
View File

@@ -6,8 +6,11 @@ import {
reconcileUserProjection,
resetUserProjection,
} from "../../lib/adminApi";
import { createI18nMock } from "../../test/i18nMock";
import UserProjectionPage from "./UserProjectionPage";
vi.mock("../../lib/i18n", () => createI18nMock());
let currentRole = "super_admin";
vi.mock("../../lib/adminApi", () => ({
@@ -52,18 +55,19 @@ describe("UserProjectionPage", () => {
currentRole = "super_admin";
vi.clearAllMocks();
vi.spyOn(window, "confirm").mockReturnValue(true);
window.localStorage.setItem("locale", "ko");
});
it("renders projection status for super_admin", async () => {
renderPage();
expect(
await screen.findByText("사용자 Projection 관리"),
await screen.findByText("사용자 동기화 관리"),
).toBeInTheDocument();
expect(
await screen.findByText("Kratos users projection"),
await screen.findByText("Kratos 사용자 동기화"),
).toBeInTheDocument();
expect(screen.getByText("ready")).toBeInTheDocument();
expect(screen.getByText("준비됨")).toBeInTheDocument();
expect(screen.getByText("152")).toBeInTheDocument();
expect(fetchUserProjectionStatus).toHaveBeenCalled();
});
@@ -71,7 +75,7 @@ describe("UserProjectionPage", () => {
it("runs reconcile and reset actions for super_admin", async () => {
renderPage();
await screen.findByText("사용자 Projection 관리");
await screen.findByText("사용자 동기화 관리");
fireEvent.click(screen.getByRole("button", { name: /재동기화/ }));
await waitFor(() => {
@@ -92,8 +96,19 @@ describe("UserProjectionPage", () => {
expect(await screen.findByText("접근 권한이 없습니다")).toBeInTheDocument();
expect(
screen.queryByText("사용자 Projection 관리"),
screen.queryByText("사용자 동기화 관리"),
).not.toBeInTheDocument();
expect(fetchUserProjectionStatus).not.toHaveBeenCalled();
});
it("renders localized labels in English", async () => {
window.localStorage.setItem("locale", "en");
renderPage();
expect(
await screen.findByText("User Projection Management"),
).toBeInTheDocument();
expect(screen.getByText("Re-sync")).toBeInTheDocument();
expect(await screen.findByText("ready")).toBeInTheDocument();
});
});

122
adminfront/src/features/projections/UserProjectionPage.tsx
View File

@@ -8,6 +8,8 @@ import {
reconcileUserProjection,
resetUserProjection,
} from "../../lib/adminApi";
import { t } from "../../lib/i18n";
import { getAdminDateLocale } from "../../lib/locale";
function formatDateTime(value?: string) {
if (!value) {
@@ -17,7 +19,7 @@ function formatDateTime(value?: string) {
if (Number.isNaN(date.getTime())) {
return value;
}
return new Intl.DateTimeFormat("ko-KR", {
return new Intl.DateTimeFormat(getAdminDateLocale(), {
dateStyle: "medium",
timeStyle: "medium",
}).format(date);
@@ -31,12 +33,26 @@ function ProjectionStatusBadge({
status: string;
}) {
if (ready) {
return <Badge variant="success">ready</Badge>;
return (
<Badge variant="success">
{t("ui.admin.user_projection.status.ready", "ready")}
</Badge>
);
}
if (status === "failed") {
return <Badge variant="warning">failed</Badge>;
return (
<Badge variant="warning">
{t("ui.admin.user_projection.status.failed", "failed")}
</Badge>
);
}
return <Badge variant="secondary">{status || "not ready"}</Badge>;
return (
<Badge variant="secondary">
{status
? status
: t("ui.admin.user_projection.status.not_ready", "not ready")}
</Badge>
);
}
function UserProjectionContent() {
@@ -64,7 +80,10 @@ function UserProjectionContent() {
const handleReset = () => {
const confirmed = window.confirm(
"사용자 projection을 Kratos 기준으로 다시 구축하시겠습니까?",
t(
"msg.admin.user_projection.reset_confirm",
"Rebuild user projection from the Kratos source of truth?",
),
);
if (confirmed) {
resetMutation.mutate();
@@ -79,9 +98,11 @@ function UserProjectionContent() {
<main className="space-y-6 p-6 md:p-8">
<div className="flex flex-wrap items-center justify-between gap-3">
<div>
<p className="text-sm text-muted-foreground">System</p>
<h2 className="text-2xl font-semibold tracking-tight">
사용자 Projection 관리
{t(
"ui.admin.user_projection.title",
"User Projection Management",
)}
</h2>
</div>
<div className="flex flex-wrap gap-2">
@@ -92,7 +113,7 @@ function UserProjectionContent() {
disabled={isWorking}
>
<RefreshCw size={16} />
재동기화
{t("ui.admin.user_projection.actions.reconcile", "Re-sync")}
</Button>
<Button
type="button"
@@ -101,7 +122,10 @@ function UserProjectionContent() {
disabled={isWorking}
>
<RotateCcw size={16} />
초기화 후 재구축
{t(
"ui.admin.user_projection.actions.reset",
"Reset and rebuild",
)}
</Button>
</div>
</div>
@@ -109,19 +133,30 @@ function UserProjectionContent() {
{isError ? (
<section className="rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive">
{(error as Error)?.message ||
"projection 상태를 불러오지 못했습니다."}
t(
"msg.admin.user_projection.load_error",
"Failed to load projection status.",
)}
</section>
) : null}
{actionResult ? (
<section className="rounded-lg border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-200">
{actionResult.syncedUsers}명 기준으로 projection을 갱신했습니다.
{t(
"msg.admin.user_projection.action_success",
"Refreshed the projection for {{count}} users.",
{ count: actionResult.syncedUsers },
)}
</section>
) : null}
{actionError ? (
<section className="rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive">
{(actionError as Error)?.message || "projection 작업에 실패했습니다."}
{(actionError as Error)?.message ||
t(
"msg.admin.user_projection.action_error",
"Projection operation failed.",
)}
</section>
) : null}
@@ -131,19 +166,31 @@ function UserProjectionContent() {
<Database size={18} />
</div>
<div>
<h3 className="text-base font-semibold">Kratos users projection</h3>
<h3 className="text-base font-semibold">
{t(
"ui.admin.user_projection.card.title",
"Kratos users projection",
)}
</h3>
<p className="text-sm text-muted-foreground">
Backend DB 통계가 참조하는 사용자 read model 상태입니다.
{t(
"ui.admin.user_projection.card.description",
"Current user read model state referenced by backend DB statistics.",
)}
</p>
</div>
</div>
{isLoading ? (
<div className="py-8 text-sm text-muted-foreground">불러오는 중</div>
<div className="py-8 text-sm text-muted-foreground">
{t("ui.admin.user_projection.loading", "Loading")}
</div>
) : (
<dl className="grid gap-4 py-5 sm:grid-cols-2 lg:grid-cols-4">
<div>
<dt className="text-sm text-muted-foreground">상태</dt>
<dt className="text-sm text-muted-foreground">
{t("ui.admin.user_projection.summary.status", "Status")}
</dt>
<dd className="mt-1">
<ProjectionStatusBadge
ready={data?.ready ?? false}
@@ -153,20 +200,33 @@ function UserProjectionContent() {
</div>
<div>
<dt className="text-sm text-muted-foreground">
Projection 사용자
{t(
"ui.admin.user_projection.summary.projected_users",
"Projected users",
)}
</dt>
<dd className="mt-1 text-xl font-semibold tabular-nums">
{data?.projectedUsers ?? 0}
</dd>
</div>
<div>
<dt className="text-sm text-muted-foreground">마지막 동기화</dt>
<dt className="text-sm text-muted-foreground">
{t(
"ui.admin.user_projection.summary.last_synced",
"Last synced",
)}
</dt>
<dd className="mt-1 text-sm">
{formatDateTime(data?.lastSyncedAt)}
</dd>
</div>
<div>
<dt className="text-sm text-muted-foreground">상태 갱신</dt>
<dt className="text-sm text-muted-foreground">
{t(
"ui.admin.user_projection.summary.updated_at",
"Updated at",
)}
</dt>
<dd className="mt-1 text-sm">
{formatDateTime(data?.updatedAt)}
</dd>
@@ -190,14 +250,22 @@ export default function UserProjectionPage() {
<RoleGuard
roles={["super_admin"]}
fallback={
<main className="p-6 md:p-8">
<section className="rounded-lg border border-border bg-card p-5">
<h2 className="text-lg font-semibold">접근 권한이 없습니다</h2>
<p className="mt-2 text-sm text-muted-foreground">
이 화면은 super_admin 권한으로만 접근할 수 있습니다.
</p>
</section>
</main>
<main className="p-6 md:p-8">
<section className="rounded-lg border border-border bg-card p-5">
<h2 className="text-lg font-semibold">
{t(
"ui.admin.user_projection.forbidden.title",
"Access denied",
)}
</h2>
<p className="mt-2 text-sm text-muted-foreground">
{t(
"msg.admin.user_projection.forbidden.description",
"This screen is only available to super_admin users.",
)}
</p>
</section>
</main>
}
>
<UserProjectionContent />