@aiquants/auth-react-router 0.15.0 → 0.16.0

package/src/admin/ui.tsx

@@ -1,276 +0,0 @@
-/**
- * @module admin/ui
- * @description The shell around the five tab views: heading, tabs, badges and banners.
- * 5 つのタブビューを囲む外枠 (見出し・タブ・バッジ・告知)。
- */
-import type { AuthDirectoryStatus, AuthGroup } from "@aiquants/auth-core"
-import type React from "react"
-import { useEffect, useRef } from "react"
-import { Link, useLoaderData, useRevalidator } from "react-router"
-import { fill, formatDateTime } from "./format"
-import { defaultUserAdminLabels, type UserAdminLabels } from "./labels"
-import type { UserAdminPermission } from "./server"
-
-/**
- * How the console keeps itself current while "sync now" requests are waiting for the job.
- * 「今すぐ同期」の要求がジョブを待っている間、画面が自分を最新に保つ間隔と上限。
- *
- * The loader only re-runs after the console's own submissions, so a request the job finishes a few
- * seconds later would stay invisible until a reload. While at least one request is pending the
- * console re-validates every `intervalMs`, and gives up after `maxMs` so a deployment with no job
- * consuming the queue does not poll forever from every open tab.
- * ローダーは自分の送信のあとにしか再実行されないため、ジョブが数秒後に終えた要求はリロードまで
- * 見えない。未処理の要求が 1 件でもある間は `intervalMs` ごとに再検証し、`maxMs` で諦める
- * (キューを消化するジョブが居ない配備で、開いている全タブが永久に叩き続けないため)。
- */
-export type PendingSyncPolling = {
-    /** Milliseconds between re-validations. 再検証の間隔 (ミリ秒)。 */
-    intervalMs: number
-    /** Milliseconds after which polling stops for an unchanged pending count. 件数が変わらないまま諦めるまでの時間 (ミリ秒)。 */
-    maxMs: number
-}
-
-/** Defaults: every 3 seconds, for up to 5 minutes. 既定値 (3 秒ごと、最長 5 分)。 */
-export const DEFAULT_PENDING_SYNC_POLLING: PendingSyncPolling = { intervalMs: 3_000, maxMs: 300_000 }
-
-export type UserAdminShellProps = {
-    children?: React.ReactNode
-    renderHeader?: (props: { title: string; annotation: React.ReactNode }) => React.ReactNode
-    /** Polling while sync requests are pending; defaults to {@link DEFAULT_PENDING_SYNC_POLLING}. 未処理中のポーリング設定。 */
-    pendingSyncPolling?: PendingSyncPolling
-}
-
-/**
- * Re-validates the route data periodically while sync requests are waiting for the job.
- * 同期要求がジョブを待っている間、ルートのデータを定期的に再検証する処理。
- *
- * @param pendingRequestCount Requests not yet finished, from the loader. ローダーが返した未処理件数。
- * @param polling Interval and cap. 間隔と上限。
- * @returns Nothing. 戻り値なし。
- */
-function usePendingSyncRevalidation(pendingRequestCount: number, polling: PendingSyncPolling): void {
-    const revalidator = useRevalidator()
-    // 進行中の再検証に重ねない。重ねると応答順が入れ替わり、古い結果が新しい結果を上書きし得る。
-    // 効果のクロージャは古い state を掴むので、毎描画で更新する参照から読む
-    const stateRef = useRef(revalidator.state)
-    stateRef.current = revalidator.state
-    const { revalidate } = revalidator
-    const { intervalMs, maxMs } = polling
-
-    useEffect(() => {
-        if (pendingRequestCount <= 0) return
-        // 件数が変わるたびに効果が張り直され、上限も測り直される。上限が効くのは件数が
-        // 変わらないまま (誰にも拾われないまま) 時間だけが過ぎる場合である
-        const startedAt = Date.now()
-        const timer = setInterval(() => {
-            if (Date.now() - startedAt >= maxMs) {
-                clearInterval(timer)
-                return
-            }
-            if (stateRef.current === "idle") void revalidate()
-        }, intervalMs)
-        return () => clearInterval(timer)
-    }, [pendingRequestCount, intervalMs, maxMs, revalidate])
-}
-
-/**
- * Render one resource's permission summary as a compact pill.
- * 1 リソース分の権限サマリをコンパクトなタグとして描画するコンポーネント。
- */
-function GroupPill({ label, summary }: { label: string; summary: { text: string; color: string; bgColor: string; borderColor: string } }) {
-    return (
-        <span
-            style={{
-                display: "inline-flex",
-                alignItems: "center",
-                gap: "0.18rem",
-                fontSize: "0.65rem",
-                padding: "0.08rem 0.35rem",
-                borderRadius: "9999px",
-                backgroundColor: summary.bgColor,
-                color: summary.color,
-                border: `1px solid ${summary.borderColor}`,
-                fontWeight: 600,
-                lineHeight: "1.2",
-            }}>
-            <span>{label}:</span>
-            <span>{summary.text}</span>
-        </span>
-    )
-}
-
-/**
- * Warns when synchronization is not actually keeping the mirror fresh.
- * 同期が実際には鏡を新しく保てていないことを警告する部品。
- *
- * 同期の停止は「上流から外れた人がテナントに居続ける」というセキュリティ事象である。件数と
- * エラー数だけを見ると何も起きていないように読めるため、**滞留・全停止・未結線の 3 つを
- * それぞれ名指しで** 出す。出さなければ、状態を計算している意味がない。
- *
- * どのタブに居ても見えるようにシェル側で描く。ディレクトリの停止はグループ一覧を見ている
- * ときだけ起きる事象ではない。
- */
-function DirectorySyncBanner({ status, labels, groups }: { status?: AuthDirectoryStatus; labels: UserAdminLabels; groups: AuthGroup[] }) {
-    if (!status || status.linkedGroupCount === 0) return null
-    const L = labels.directoryView
-    const warnings: Array<{ id: string; text: string }> = []
-    if (!status.isEnabled) warnings.push({ id: "disabled", text: L.disabledWarning })
-    if (status.pausedGroupCount > 0) warnings.push({ id: "paused", text: fill(L.pausedTemplate, { paused: status.pausedGroupCount, total: status.linkedGroupCount }) })
-    if (status.isStale) {
-        const at = status.oldestSyncedAt ? formatDateTime(status.oldestSyncedAt, labels) : L.neverSynced
-        warnings.push({ id: "stale", text: `${L.staleWarning} ${fill(L.oldestSyncedTemplate, { at })}` })
-    }
-    if (status.erroredGroupIds.length > 0) {
-        // ID を並べても運用者には何のグループか判らない。名前と、あれば実際の失敗理由を出す
-        const described = status.erroredGroupIds.map((id) => {
-            const group = groups.find((g) => g.id === id)
-            if (!group) return fill(labels.common.idTemplate, { id })
-            const reason = group.externalLink?.syncError
-            return reason ? fill(L.erroredItemTemplate, { group: group.name, reason }) : group.name
-        })
-        warnings.push({ id: "errored", text: fill(L.erroredTemplate, { groups: described.join(L.listSeparator) }) })
-    }
-    if (status.pendingRequestCount > 0) warnings.push({ id: "pending", text: fill(L.pendingTemplate, { count: status.pendingRequestCount }) })
-    if (warnings.length === 0) return null
-    return (
-        // ライブリージョンにはしない。初期描画から在る内容は読み上げられず、見出しも読み順も
-        // 失われる。**読める本文** として置き、見出しから辿れるようにする
-        <section
-            aria-labelledby="directory-sync-heading"
-            data-testid="directory-sync-banner"
-            style={{ display: "flex", flexDirection: "column", gap: "0.35rem", padding: "0.7rem 1rem", marginBottom: "1rem", borderRadius: "6px", border: "1px solid #fde68a", backgroundColor: "#fffbeb", color: "#92400e", fontSize: "0.85rem" }}>
-            <h2 id="directory-sync-heading" style={{ margin: 0, fontSize: "0.9rem", fontWeight: 700 }}>
-                {L.title}
-            </h2>
-            {warnings.map((w) => (
-                <span key={w.id} data-directory-warning={w.id}>
-                    {w.text}
-                </span>
-            ))}
-        </section>
-    )
-}
-
-/**
- * Shell layout for user administration pages with header annotation delegation.
- * ヘッダー注釈委譲を備えたユーザー管理ページのシェルレイアウト。
- */
-export function UserAdminShell({ children, renderHeader, pendingSyncPolling }: UserAdminShellProps) {
-    // ⚠️ ここは `UserAdminLoaderData` と違い **すべて任意** で受ける。シェルは loader を持たない
-    // 呼び出し (エラー境界の外側、テスト、部分描画) からも描かれるため、欠落を落ちる理由にしない
-    const data = useLoaderData() as { segment?: string; labels?: UserAdminLabels; myPermissions?: Record<string, UserAdminPermission | undefined> | null; resourceLabels?: Record<string, string>; directoryStatus?: AuthDirectoryStatus; groups?: AuthGroup[] } | undefined
-    // 同期状態が無い呼び出し (ディレクトリ未結線・部分描画) に未処理の要求は存在しない
-    usePendingSyncRevalidation(data?.directoryStatus?.pendingRequestCount ?? 0, pendingSyncPolling ?? DEFAULT_PENDING_SYNC_POLLING)
-    const segment = data?.segment ?? "users"
-    const labels = data?.labels ?? defaultUserAdminLabels
-    // null = 未結線または取得失敗。空 {} も「分からない」扱いで、いずれも許可として描画しない
-    const myPermissions = data?.myPermissions ?? null
-    // リソースキーの表示名は呼び出し側が差し込む (キーをこのパッケージに埋め込まない)
-    const resourceLabels = data?.resourceLabels ?? {}
-    const labelFor = (resourceKey: string) => (Object.hasOwn(resourceLabels, resourceKey) ? resourceLabels[resourceKey] : resourceKey)
-
-    const tabs = [
-        { key: "users", label: labels.tabs.users, href: "/users" },
-        { key: "groups", label: labels.tabs.groups, href: "/users/groups" },
-        { key: "group_members", label: labels.tabs.groupMembers, href: "/users/group_members" },
-        { key: "allowlist", label: labels.tabs.allowlist, href: "/users/allowlist" },
-    ]
-    // 未結線でも **連携が残っていれば** 出す。停止を警告した直後に、解除や再開ができる唯一の
-    // 面だけが消えるのは最悪の挙動である。連携も結線も無い配備でだけ隠す。
-    // 判定は状態の件数と一覧の実体の **両方** を見る — 片方だけだと、件数が 0 なのに
-    // 「上流が所有」と描かれるグループが取り残される
-    const hasLinkedGroup = (data?.groups ?? []).some((g) => g.externalLink)
-    if (data?.directoryStatus?.isEnabled || (data?.directoryStatus?.linkedGroupCount ?? 0) > 0 || hasLinkedGroup) {
-        tabs.push({ key: "directory", label: labels.tabs.directory, href: "/users/directory" })
-    }
-
-    const permEntries = Object.entries(myPermissions ?? {})
-
-    /**
-     * Pick the badge text and colours for one resource, never rendering "unknown" as "allowed".
-     * 1 リソース分のバッジ文言と配色を決める処理。**未知を許可として描かない** ことが要件。
-     *
-     * 以前は権限マップが空のとき「編集可」の固定値を描いていたため、ポート未結線・取得失敗・
-     * 付与ゼロのいずれでも「全操作できます」と表示されていた (実際には操作するとガードで拒否される)。
-     */
-    const unavailableSummary = { text: labels.permissions.unknown, color: "#92400e", bgColor: "#fffbeb", borderColor: "#fde68a" }
-    const getSummary = (perm: UserAdminPermission | undefined) => {
-        // ⚠️ **鍵は在るが値が無い** のは「権限なし」ではなく「判らない」である。取得側の型が
-        // `undefined` を許す以上、その差を潰すと、拒否理由が「バッジを見てください」と案内する
-        // 相手に嘘のバッジを見せることになる
-        if (perm === undefined) return unavailableSummary
-        if (perm.canWrite) {
-            return { text: labels.permissions.canWrite, color: "#047857", bgColor: "#ecfdf5", borderColor: "#a7f3d0" }
-        }
-        if (perm.canRead) {
-            return { text: labels.permissions.canRead, color: "#1d4ed8", bgColor: "#eff6ff", borderColor: "#bfdbfe" }
-        }
-        // ⚠️ 削除だけを持つ主体は実在する。読み書きが無いことを「権限なし」と描くと、
-        // 実際には削除できる相手に「何もできない」と言うことになる
-        if (perm.canDelete) {
-            return { text: labels.permissions.canDelete, color: "#b91c1c", bgColor: "#fef2f2", borderColor: "#fecaca" }
-        }
-        return { text: labels.permissions.none, color: "#475569", bgColor: "#f1f5f9", borderColor: "#cbd5e1" }
-    }
-    const annotation = (
-        <div style={{ display: "flex", alignItems: "center", gap: "0.4rem" }} data-testid="user-admin-header-annotation">
-            <span style={{ fontSize: "0.75rem", backgroundColor: "#e0f2fe", color: "#0369a1", padding: "2px 8px", borderRadius: "12px", fontWeight: 600 }}>{labels.heading}</span>
-
-            <div style={{ display: "inline-flex", alignItems: "center", gap: "0.25rem", fontSize: "0.68rem", color: "#475569" }} data-testid="user-admin-permissions-badge">
-                <span style={{ fontWeight: 600, color: "#334155" }}>{labels.permissions.label}</span>
-                <span style={{ display: "inline-flex", alignItems: "center", gap: "0.18rem" }}>
-                    {permEntries.length === 0 ? (
-                        <span data-testid="user-admin-permission-unavailable">
-                            <GroupPill label={labels.heading} summary={unavailableSummary} />
-                        </span>
-                    ) : (
-                        permEntries.map(([resKey, perm]) => <GroupPill key={resKey} label={labelFor(resKey)} summary={getSummary(perm)} />)
-                    )}
-                </span>
-            </div>
-        </div>
-    )
-
-    return (
-        <div data-testid="user-admin-shell" style={{ width: "100%", minHeight: "100vh", backgroundColor: "#f8fafc", padding: "1.5rem", boxSizing: "border-box" }}>
-            {renderHeader ? (
-                renderHeader({ title: labels.title, annotation })
-            ) : (
-                <div style={{ marginBottom: "1.5rem", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-                    <h1 style={{ margin: 0, fontSize: "1.5rem", fontWeight: 700, color: "#0f172a" }}>{labels.title}</h1>
-                    {annotation}
-                </div>
-            )}
-
-            <nav aria-label={labels.title} style={{ display: "flex", gap: "0.5rem", marginBottom: "1.2rem", borderBottom: "2px solid #e2e8f0", paddingBottom: "0.5rem" }}>
-                {tabs.map((tab) => {
-                    const isActive = segment === tab.key
-                    return (
-                        <Link
-                            key={tab.key}
-                            to={tab.href}
-                            data-testid={`user-admin-tab-${tab.key}`}
-                            aria-current={isActive ? "page" : undefined}
-                            style={{
-                                padding: "0.5rem 1rem",
-                                borderRadius: "6px 6px 0 0",
-                                fontSize: "0.88rem",
-                                fontWeight: isActive ? 700 : 500,
-                                color: isActive ? "#0284c7" : "#64748b",
-                                backgroundColor: isActive ? "#ffffff" : "transparent",
-                                textDecoration: "none",
-                                borderBottom: isActive ? "3px solid #0284c7" : "3px solid transparent",
-                                transition: "all 0.15s ease",
-                            }}>
-                            {tab.label}
-                        </Link>
-                    )
-                })}
-            </nav>
-
-            <DirectorySyncBanner status={data?.directoryStatus} labels={labels} groups={data?.groups ?? []} />
-
-            <main>{children}</main>
-        </div>
-    )
-}