@aiquants/auth-react-router 0.13.1 → 0.14.0

package/src/admin/ui.tsx

@@ -1,3 +1,8 @@
+/**
+ * @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 { Link, useLoaderData } from "react-router"
@@ -128,17 +133,25 @@ export function UserAdminShell({ children, renderHeader }: UserAdminShellProps)
      * 以前は権限マップが空のとき「編集可」の固定値を描いていたため、ポート未結線・取得失敗・
      * 付与ゼロのいずれでも「全操作できます」と表示されていた (実際には操作するとガードで拒否される)。
      */
+    const unavailableSummary = { text: labels.permissions.unknown, color: "#92400e", bgColor: "#fffbeb", borderColor: "#fde68a" }
     const getSummary = (perm: UserAdminPermission | undefined) => {
-        if (perm?.canWrite) {
+        // ⚠️ **鍵は在るが値が無い** のは「権限なし」ではなく「判らない」である。取得側の型が
+        // `undefined` を許す以上、その差を潰すと、拒否理由が「バッジを見てください」と案内する
+        // 相手に嘘のバッジを見せることになる
+        if (perm === undefined) return unavailableSummary
+        if (perm.canWrite) {
             return { text: labels.permissions.canWrite, color: "#047857", bgColor: "#ecfdf5", borderColor: "#a7f3d0" }
         }
-        if (perm?.canRead) {
+        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 unavailableSummary = { text: labels.permissions.unknown, color: "#92400e", bgColor: "#fffbeb", borderColor: "#fde68a" }
-
     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>