@aiquants/auth-react-router 0.12.0 → 0.13.0

package/src/admin/views.tsx

@@ -27,8 +27,8 @@ export type UserAdminLoaderData = {
  * ロックアウト理由・重複パターン・入力不正などの文言は action が `{ok:false,error}` で返す。
  * 表示しなければ操作が黙って失敗したように見えるため、各ビューの先頭に必ず置く。
  */
-function ActionError({ fetcher, id }: { fetcher: { data?: unknown }; id?: string }) {
-    const result = fetcher.data as { ok?: boolean; error?: string } | undefined
+function ActionError({ result: raw, id }: { result: unknown; id?: string }) {
+    const result = raw as { ok?: boolean; error?: string } | undefined
     if (result?.ok !== false || !result.error) return null
     return (
         // グリッド配下でも行を跨ぐ。空のときは描かないので、余分な行も生まれない
@@ -52,6 +52,10 @@ function ActionError({ fetcher, id }: { fetcher: { data?: unknown }; id?: string
  */
 function useSubmitThen(fetcher: ReturnType<typeof useFetcher>) {
     const pending = useRef<(() => void) | null>(null)
+    // 破棄した結果の世代。`fetcher.data` は宣言的に消せないため、こちらで無効化する
+    const [discarded, setDiscarded] = useState<unknown>(undefined)
+    const result = fetcher.data === discarded ? undefined : fetcher.data
+
     useEffect(() => {
         if (fetcher.state !== "idle" || fetcher.data === undefined) return
         const onSuccess = pending.current
@@ -63,10 +67,18 @@ function useSubmitThen(fetcher: ReturnType<typeof useFetcher>) {
         if ((fetcher.data as { ok?: boolean }).ok === true) onSuccess()
     }, [fetcher.state, fetcher.data])
 
-    return (payload: Record<string, string>, onSuccess?: () => void) => {
+    const submit = (payload: Record<string, string>, onSuccess?: () => void) => {
         pending.current = onSuccess ?? null
+        setDiscarded(undefined)
         fetcher.submit(payload, { method: "post" })
     }
+    /**
+     * Forgets the last result so an unrelated failure cannot describe a freshly opened dialog.
+     * 直前の結果を忘れる処理 (無関係な失敗が、開いたばかりのダイアログの説明文にならないように)。
+     */
+    const resetResult = () => setDiscarded(fetcher.data)
+
+    return { submit, resetResult, result }
 }
 
 /**
@@ -80,7 +92,7 @@ function useSubmitThen(fetcher: ReturnType<typeof useFetcher>) {
  * @param onClose Invoked when Escape is pressed. Escape が押されたときに呼ばれる処理。
  * @returns Ref to attach to the dialog panel. ダイアログ本体へ付ける ref。
  */
-function useModalBehavior(isOpen: boolean, onClose: () => void) {
+function useModalBehavior(isOpen: boolean, onClose: () => void, openerRef?: React.RefObject<HTMLElement | null>) {
     const ref = useRef<HTMLFormElement>(null)
     // 再描画のたびに実行されると入力中に焦点が先頭へ飛ぶため、依存は開閉だけにする
     const closeRef = useRef(onClose)
@@ -89,12 +101,17 @@ function useModalBehavior(isOpen: boolean, onClose: () => void) {
     useEffect(() => {
         if (!isOpen) return
         const panel = ref.current
-        const opener = document.activeElement as HTMLElement | null
+        // `activeElement` を見るだけでは戻し先にならない。押下で焦点が乗らないブラウザ
+        // (Safari / macOS の Firefox) では body へ戻ってしまう。開いた要素を明示的に覚える
+        const opener = openerRef?.current ?? (document.activeElement as HTMLElement | null)
         const focusables = () => Array.from(panel?.querySelectorAll<HTMLElement>('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])') ?? [])
         focusables()[0]?.focus()
 
         const onKeyDown = (event: KeyboardEvent) => {
             if (event.key === "Escape") {
+                // 変換中の Escape は「候補を取り消す」であって「閉じる」ではない。ここで
+                // 閉じると、編集中の下書きは状態ごと捨てられ、打ち直しになる
+                if (event.isComposing || event.keyCode === 229) return
                 event.preventDefault()
                 closeRef.current()
                 return
@@ -119,7 +136,7 @@ function useModalBehavior(isOpen: boolean, onClose: () => void) {
             document.removeEventListener("keydown", onKeyDown)
             opener?.focus?.()
         }
-    }, [isOpen])
+    }, [isOpen, openerRef])
 
     return ref
 }
@@ -127,17 +144,27 @@ function useModalBehavior(isOpen: boolean, onClose: () => void) {
 export function UsersView() {
     const data = useLoaderData() as UserAdminLoaderData
     const fetcher = useFetcher()
-    const submitThen = useSubmitThen(fetcher)
+    const { submit: submitThen, resetResult, result: actionResult } = useSubmitThen(fetcher)
     const labels = data.labels ?? defaultUserAdminLabels
 
     const [searchQuery, setSearchQuery] = useState("")
-    const [editingUser, setEditingUser] = useState<AuthUser | null>(null)
-    const [isCreateOpen, setIsCreateOpen] = useState(false)
+    // 2 つの独立した状態にすると「両方開いている」状態が表現でき、エラー欄が 2 つ描かれる。
+    // 排他であることを型で持つ
+    const [modal, setModal] = useState<{ kind: "create" } | { kind: "edit"; user: AuthUser } | null>(null)
+    const editingUser = modal?.kind === "edit" ? modal.user : null
+    const isCreateOpen = modal?.kind === "create"
+    const openerRef = useRef<HTMLElement | null>(null)
+    /** ダイアログを開く。直前の操作の結果を持ち越さない (別の操作の拒否が説明文になる)。 */
+    const openModal = (next: { kind: "create" } | { kind: "edit"; user: AuthUser }, event: React.MouseEvent<HTMLElement>) => {
+        openerRef.current = event.currentTarget
+        resetResult()
+        setModal(next)
+    }
 
     const [newDisplayName, setNewDisplayName] = useState("")
     const [newEmail, setNewEmail] = useState("")
-    const createUserRef = useModalBehavior(isCreateOpen, () => setIsCreateOpen(false))
-    const editUserRef = useModalBehavior(editingUser !== null, () => setEditingUser(null))
+    const createUserRef = useModalBehavior(isCreateOpen, () => setModal(null), openerRef)
+    const editUserRef = useModalBehavior(editingUser !== null, () => setModal(null), openerRef)
 
     const busy = fetcher.state !== "idle"
     const filteredUsers = data.users.filter((u) => u.displayName.toLowerCase().includes(searchQuery.toLowerCase()) || u.email.toLowerCase().includes(searchQuery.toLowerCase()))
@@ -151,24 +178,27 @@ export function UsersView() {
     const handleCreateUser = (e: React.FormEvent) => {
         e.preventDefault()
         if (!(newDisplayName && newEmail)) return
-        submitThen({ intent: "createUser", displayName: newDisplayName, email: newEmail }, () => {
-            setNewDisplayName("")
-            setNewEmail("")
-            setIsCreateOpen(false)
+        // 送信した値と今の値が違うなら、往復の間に打ち込まれたものである。消してはならない
+        const sentName = newDisplayName
+        const sentEmail = newEmail
+        submitThen({ intent: "createUser", displayName: sentName, email: sentEmail }, () => {
+            setNewDisplayName((current) => (current === sentName ? "" : current))
+            setNewEmail((current) => (current === sentEmail ? "" : current))
+            setModal(null)
         })
     }
 
     const handleUpdateUser = (e: React.FormEvent) => {
         e.preventDefault()
         if (!editingUser) return
-        submitThen({ intent: "updateUser", userId: String(editingUser.id), displayName: editingUser.displayName, email: editingUser.email }, () => setEditingUser(null))
+        submitThen({ intent: "updateUser", userId: String(editingUser.id), displayName: editingUser.displayName, email: editingUser.email }, () => setModal(null))
     }
 
     return (
         <section data-testid="users-view-section" style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
             <h2 style={heading}>{labels.usersView.title}</h2>
             {/* モーダルが開いている間はモーダル内に描く。両方描くと同じ hook が 2 つになる */}
-            {!(isCreateOpen || editingUser) && <ActionError fetcher={fetcher} />}
+            {!modal && <ActionError result={actionResult} />}
             <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", backgroundColor: "#ffffff", padding: "1rem", borderRadius: "8px", border: "1px solid #e2e8f0" }}>
                 <input
                     type="text"
@@ -179,7 +209,11 @@ export function UsersView() {
                     data-testid="users-search-input"
                     style={{ padding: "6px 12px", borderRadius: "6px", border: "1px solid #cbd5e1", fontSize: "0.85rem", width: "260px" }}
                 />
-                <button type="button" onClick={() => setIsCreateOpen(true)} data-testid="users-add-button" style={{ padding: "6px 14px", borderRadius: "6px", backgroundColor: "#0284c7", color: "#ffffff", border: "none", fontSize: "0.85rem", fontWeight: 600, cursor: "pointer" }}>
+                <button
+                    type="button"
+                    onClick={(event) => openModal({ kind: "create" }, event)}
+                    data-testid="users-add-button"
+                    style={{ padding: "6px 14px", borderRadius: "6px", backgroundColor: "#0284c7", color: "#ffffff", border: "none", fontSize: "0.85rem", fontWeight: 600, cursor: "pointer" }}>
                     {labels.usersView.addUser}
                 </button>
             </div>
@@ -209,7 +243,7 @@ export function UsersView() {
                                 <td style={{ padding: "10px 14px", textAlign: "right" }}>
                                     <button
                                         type="button"
-                                        onClick={() => setEditingUser(u)}
+                                        onClick={(event) => openModal({ kind: "edit", user: u }, event)}
                                         aria-label={fill(labels.usersView.editUserAria, { user: u.displayName })}
                                         data-testid={`edit-user-btn-${u.id}`}
                                         style={{ padding: "3px 8px", borderRadius: "4px", border: "1px solid #cbd5e1", backgroundColor: "#ffffff", fontSize: "0.78rem", cursor: "pointer", marginRight: "6px" }}>
@@ -254,7 +288,7 @@ export function UsersView() {
                         <h3 id="create-user-title" style={{ margin: "0 0 1rem 0", fontSize: "1.1rem" }}>
                             {labels.usersView.addUser}
                         </h3>
-                        <ActionError fetcher={fetcher} id="create-user-error" />
+                        <ActionError result={actionResult} id="create-user-error" />
                         <div style={{ marginBottom: "1rem" }}>
                             <label htmlFor="create-user-display-name-input" style={{ display: "block", fontSize: "0.8rem", color: "#475569", marginBottom: "4px" }}>
                                 {labels.usersView.displayName}
@@ -284,11 +318,11 @@ export function UsersView() {
                             />
                         </div>
                         <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
-                            <button type="button" onClick={() => setIsCreateOpen(false)} style={{ padding: "6px 12px", borderRadius: "4px", border: "1px solid #cbd5e1", backgroundColor: "#ffffff", cursor: "pointer" }}>
-                                キャンセル
+                            <button type="button" onClick={() => setModal(null)} data-testid="cancel-create-user" style={{ padding: "6px 12px", borderRadius: "4px", border: "1px solid #cbd5e1", backgroundColor: "#ffffff", cursor: "pointer" }}>
+                                {labels.common.cancel}
                             </button>
                             <button type="submit" data-testid="submit-create-user" disabled={busy} aria-busy={busy} style={{ padding: "6px 12px", borderRadius: "4px", backgroundColor: "#0284c7", color: "#ffffff", border: "none", cursor: "pointer" }}>
-                                作成
+                                {labels.common.create}
                             </button>
                         </div>
                     </form>
@@ -310,7 +344,7 @@ export function UsersView() {
                         <h3 id="edit-user-title" style={{ margin: "0 0 1rem 0", fontSize: "1.1rem" }}>
                             {labels.usersView.editUser}
                         </h3>
-                        <ActionError fetcher={fetcher} id="edit-user-error" />
+                        <ActionError result={actionResult} id="edit-user-error" />
                         <div style={{ marginBottom: "1rem" }}>
                             <label htmlFor="edit-user-display-name-input" style={{ display: "block", fontSize: "0.8rem", color: "#475569", marginBottom: "4px" }}>
                                 {labels.usersView.displayName}
@@ -319,7 +353,7 @@ export function UsersView() {
                                 id="edit-user-display-name-input"
                                 type="text"
                                 value={editingUser.displayName}
-                                onChange={(e) => setEditingUser({ ...editingUser, displayName: e.target.value })}
+                                onChange={(e) => setModal({ kind: "edit", user: { ...editingUser, displayName: e.target.value } })}
                                 required
                                 data-testid="edit-user-display-name"
                                 style={{ width: "100%", padding: "6px", borderRadius: "4px", border: "1px solid #cbd5e1", boxSizing: "border-box" }}
@@ -333,14 +367,14 @@ export function UsersView() {
                                 id="edit-user-email-input"
                                 type="email"
                                 value={editingUser.email}
-                                onChange={(e) => setEditingUser({ ...editingUser, email: e.target.value })}
+                                onChange={(e) => setModal({ kind: "edit", user: { ...editingUser, email: e.target.value } })}
                                 required
                                 data-testid="edit-user-email"
                                 style={{ width: "100%", padding: "6px", borderRadius: "4px", border: "1px solid #cbd5e1", boxSizing: "border-box" }}
                             />
                         </div>
                         <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
-                            <button type="button" onClick={() => setEditingUser(null)} style={{ padding: "6px 12px", borderRadius: "4px", border: "1px solid #cbd5e1", backgroundColor: "#ffffff", cursor: "pointer" }}>
+                            <button type="button" onClick={() => setModal(null)} style={{ padding: "6px 12px", borderRadius: "4px", border: "1px solid #cbd5e1", backgroundColor: "#ffffff", cursor: "pointer" }}>
                                 {labels.common.cancel}
                             </button>
                             <button type="submit" data-testid="submit-edit-user" disabled={busy} aria-busy={busy} style={{ padding: "6px 12px", borderRadius: "4px", backgroundColor: "#0284c7", color: "#ffffff", border: "none", cursor: "pointer" }}>
@@ -361,37 +395,47 @@ export function UsersView() {
 export function GroupsView() {
     const data = useLoaderData() as UserAdminLoaderData
     const fetcher = useFetcher()
-    const submitThen = useSubmitThen(fetcher)
+    const { submit: submitThen, resetResult, result: actionResult } = useSubmitThen(fetcher)
     const labels = data.labels ?? defaultUserAdminLabels
 
     const [searchQuery, setSearchQuery] = useState("")
-    const [isCreateOpen, setIsCreateOpen] = useState(false)
-    const [editingGroup, setEditingGroup] = useState<AuthGroup | null>(null)
+    const [modal, setModal] = useState<{ kind: "create" } | { kind: "edit"; group: AuthGroup } | null>(null)
+    const editingGroup = modal?.kind === "edit" ? modal.group : null
+    const isCreateOpen = modal?.kind === "create"
+    const openerRef = useRef<HTMLElement | null>(null)
+    /** ダイアログを開く。直前の操作の結果を持ち越さない (別の操作の拒否が説明文になる)。 */
+    const openModal = (next: { kind: "create" } | { kind: "edit"; group: AuthGroup }, event: React.MouseEvent<HTMLElement>) => {
+        openerRef.current = event.currentTarget
+        resetResult()
+        setModal(next)
+    }
 
     const busy = fetcher.state !== "idle"
     const [newGroupKey, setNewGroupKey] = useState("")
     const [newName, setNewName] = useState("")
     const [newDescription, setNewDescription] = useState("")
-    const createGroupRef = useModalBehavior(isCreateOpen, () => setIsCreateOpen(false))
-    const editGroupRef = useModalBehavior(editingGroup !== null, () => setEditingGroup(null))
+    const createGroupRef = useModalBehavior(isCreateOpen, () => setModal(null), openerRef)
+    const editGroupRef = useModalBehavior(editingGroup !== null, () => setModal(null), openerRef)
 
     const filteredGroups = data.groups.filter((g) => g.name.toLowerCase().includes(searchQuery.toLowerCase()) || g.groupKey.toLowerCase().includes(searchQuery.toLowerCase()))
 
     const handleCreateGroup = (e: React.FormEvent) => {
         e.preventDefault()
         if (!(newGroupKey && newName)) return
-        submitThen({ intent: "createGroup", groupKey: newGroupKey, name: newName, description: newDescription }, () => {
-            setNewGroupKey("")
-            setNewName("")
-            setNewDescription("")
-            setIsCreateOpen(false)
+        // 送信した値と今の値が違うなら、往復の間に打ち込まれたものである。消してはならない
+        const sent = { key: newGroupKey, name: newName, description: newDescription }
+        submitThen({ intent: "createGroup", groupKey: sent.key, name: sent.name, description: sent.description }, () => {
+            setNewGroupKey((current) => (current === sent.key ? "" : current))
+            setNewName((current) => (current === sent.name ? "" : current))
+            setNewDescription((current) => (current === sent.description ? "" : current))
+            setModal(null)
         })
     }
 
     const handleUpdateGroup = (e: React.FormEvent) => {
         e.preventDefault()
         if (!editingGroup) return
-        submitThen({ intent: "updateGroup", groupId: String(editingGroup.id), name: editingGroup.name, description: editingGroup.description ?? "" }, () => setEditingGroup(null))
+        submitThen({ intent: "updateGroup", groupId: String(editingGroup.id), name: editingGroup.name, description: editingGroup.description ?? "" }, () => setModal(null))
     }
 
     const handleDeleteGroup = (groupId: number) => {
@@ -402,7 +446,7 @@ export function GroupsView() {
     return (
         <section data-testid="groups-view-section" style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
             <h2 style={heading}>{labels.groupsView.title}</h2>
-            {!(isCreateOpen || editingGroup) && <ActionError fetcher={fetcher} />}
+            {!modal && <ActionError result={actionResult} />}
             <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", backgroundColor: "#ffffff", padding: "1rem", borderRadius: "8px", border: "1px solid #e2e8f0" }}>
                 <input
                     type="text"
@@ -413,7 +457,11 @@ export function GroupsView() {
                     data-testid="groups-search-input"
                     style={{ padding: "6px 12px", borderRadius: "6px", border: "1px solid #cbd5e1", fontSize: "0.85rem", width: "260px" }}
                 />
-                <button type="button" onClick={() => setIsCreateOpen(true)} data-testid="groups-add-button" style={{ padding: "6px 14px", borderRadius: "6px", backgroundColor: "#4338ca", color: "#ffffff", border: "none", fontSize: "0.85rem", fontWeight: 600, cursor: "pointer" }}>
+                <button
+                    type="button"
+                    onClick={(event) => openModal({ kind: "create" }, event)}
+                    data-testid="groups-add-button"
+                    style={{ padding: "6px 14px", borderRadius: "6px", backgroundColor: "#4338ca", color: "#ffffff", border: "none", fontSize: "0.85rem", fontWeight: 600, cursor: "pointer" }}>
                     {labels.groupsView.addGroup}
                 </button>
             </div>
@@ -460,7 +508,10 @@ export function GroupsView() {
                                     <div>
                                         <button
                                             type="button"
-                                            onClick={() => setEditingGroup(g)}
+                                            onClick={(event) => openModal({ kind: "edit", group: g }, event)}
+                                            disabled={busy}
+                                            aria-busy={busy}
+                                            aria-label={fill(labels.groupsView.editGroupAria, { group: g.name })}
                                             data-testid={`edit-group-btn-${g.id}`}
                                             style={{ padding: "3px 8px", borderRadius: "4px", border: "1px solid #cbd5e1", backgroundColor: "#ffffff", fontSize: "0.75rem", cursor: "pointer", marginRight: "4px" }}>
                                             {labels.common.edit}
@@ -468,6 +519,9 @@ export function GroupsView() {
                                         <button
                                             type="button"
                                             onClick={() => handleDeleteGroup(g.id)}
+                                            disabled={busy}
+                                            aria-busy={busy}
+                                            aria-label={fill(labels.groupsView.deleteGroupAria, { group: g.name })}
                                             data-testid={`delete-group-btn-${g.id}`}
                                             style={{ padding: "3px 8px", borderRadius: "4px", border: "1px solid #fee2e2", backgroundColor: "#fff5f5", color: "#b91c1c", fontSize: "0.75rem", cursor: "pointer" }}>
                                             {labels.common.delete}
@@ -500,7 +554,7 @@ export function GroupsView() {
                         <h3 id="create-group-title" style={{ margin: "0 0 1rem 0", fontSize: "1.1rem" }}>
                             {labels.groupsView.addGroup}
                         </h3>
-                        <ActionError fetcher={fetcher} id="create-group-error" />
+                        <ActionError result={actionResult} id="create-group-error" />
                         <div style={{ marginBottom: "1rem" }}>
                             <label htmlFor="create-group-key-input" style={{ display: "block", fontSize: "0.8rem", color: "#475569", marginBottom: "4px" }}>
                                 {labels.groupsView.groupKey}
@@ -544,11 +598,11 @@ export function GroupsView() {
                             />
                         </div>
                         <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
-                            <button type="button" onClick={() => setIsCreateOpen(false)} style={{ padding: "6px 12px", borderRadius: "4px", border: "1px solid #cbd5e1", backgroundColor: "#ffffff", cursor: "pointer" }}>
-                                キャンセル
+                            <button type="button" onClick={() => setModal(null)} data-testid="cancel-create-group" style={{ padding: "6px 12px", borderRadius: "4px", border: "1px solid #cbd5e1", backgroundColor: "#ffffff", cursor: "pointer" }}>
+                                {labels.common.cancel}
                             </button>
                             <button type="submit" data-testid="submit-create-group" disabled={busy} aria-busy={busy} style={{ padding: "6px 12px", borderRadius: "4px", backgroundColor: "#4338ca", color: "#ffffff", border: "none", cursor: "pointer" }}>
-                                作成
+                                {labels.common.create}
                             </button>
                         </div>
                     </form>
@@ -570,7 +624,7 @@ export function GroupsView() {
                         <h3 id="edit-group-title" style={{ margin: "0 0 1rem 0", fontSize: "1.1rem" }}>
                             {labels.groupsView.editGroup}
                         </h3>
-                        <ActionError fetcher={fetcher} id="edit-group-error" />
+                        <ActionError result={actionResult} id="edit-group-error" />
                         <div style={{ marginBottom: "1rem" }}>
                             <label htmlFor="edit-group-name-input" style={{ display: "block", fontSize: "0.8rem", color: "#475569", marginBottom: "4px" }}>
                                 {labels.groupsView.name}
@@ -579,7 +633,7 @@ export function GroupsView() {
                                 id="edit-group-name-input"
                                 type="text"
                                 value={editingGroup.name}
-                                onChange={(e) => setEditingGroup({ ...editingGroup, name: e.target.value })}
+                                onChange={(e) => setModal({ kind: "edit", group: { ...editingGroup, name: e.target.value } })}
                                 required
                                 data-testid="edit-group-name"
                                 style={{ width: "100%", padding: "6px", borderRadius: "4px", border: "1px solid #cbd5e1", boxSizing: "border-box" }}
@@ -592,13 +646,13 @@ export function GroupsView() {
                             <textarea
                                 id="edit-group-desc-input"
                                 value={editingGroup.description ?? ""}
-                                onChange={(e) => setEditingGroup({ ...editingGroup, description: e.target.value })}
+                                onChange={(e) => setModal({ kind: "edit", group: { ...editingGroup, description: e.target.value } })}
                                 data-testid="edit-group-description"
                                 style={{ width: "100%", padding: "6px", borderRadius: "4px", border: "1px solid #cbd5e1", boxSizing: "border-box", height: "60px" }}
                             />
                         </div>
                         <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
-                            <button type="button" onClick={() => setEditingGroup(null)} style={{ padding: "6px 12px", borderRadius: "4px", border: "1px solid #cbd5e1", backgroundColor: "#ffffff", cursor: "pointer" }}>
+                            <button type="button" onClick={() => setModal(null)} style={{ padding: "6px 12px", borderRadius: "4px", border: "1px solid #cbd5e1", backgroundColor: "#ffffff", cursor: "pointer" }}>
                                 {labels.common.cancel}
                             </button>
                             <button type="submit" data-testid="submit-edit-group" disabled={busy} aria-busy={busy} style={{ padding: "6px 12px", borderRadius: "4px", backgroundColor: "#4338ca", color: "#ffffff", border: "none", cursor: "pointer" }}>
@@ -619,13 +673,14 @@ export function GroupsView() {
 export function GroupMembersView() {
     const data = useLoaderData() as UserAdminLoaderData
     const fetcher = useFetcher()
-    const submitThen = useSubmitThen(fetcher)
+    const { submit: submitThen, result: actionResult } = useSubmitThen(fetcher)
     const busy = fetcher.state !== "idle"
     const labels = data.labels ?? defaultUserAdminLabels
 
     const [selectedGroupId, setSelectedGroupId] = useState<number>(data.groups[0]?.id ?? 0)
 
-    const currentGroup = data.groups.find((g) => g.id === selectedGroupId)
+    // 再検証で対象が消えることがある。消えた ID を握り続けると空の面になる
+    const currentGroup = data.groups.find((g) => g.id === selectedGroupId) ?? data.groups[0]
     const currentMemberUserIds = new Set(data.groupMembers.filter((m) => m.groupId === selectedGroupId).map((m) => m.userId))
 
     const handleToggleMember = (userId: number, isMember: boolean) => {
@@ -639,7 +694,7 @@ export function GroupMembersView() {
     return (
         <section data-testid="group-members-view-section" style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: "1.2rem" }}>
             <h2 style={{ ...heading, gridColumn: "1 / -1" }}>{labels.groupMembersView.title}</h2>
-            <ActionError fetcher={fetcher} />
+            <ActionError result={actionResult} />
             <div style={{ backgroundColor: "#ffffff", padding: "1rem", borderRadius: "8px", border: "1px solid #e2e8f0" }}>
                 <h4 style={{ margin: "0 0 0.8rem 0", fontSize: "0.9rem", color: "#475569" }}>{labels.groupMembersView.selectGroup}</h4>
                 <div style={{ display: "flex", flexDirection: "column", gap: "0.4rem" }}>
@@ -771,7 +826,7 @@ export function AllowlistView() {
     const fetcher = useFetcher()
     const labels = data.labels ?? defaultUserAdminLabels
 
-    const submitThen = useSubmitThen(fetcher)
+    const { submit: submitThen, result: actionResult } = useSubmitThen(fetcher)
     const busy = fetcher.state !== "idle"
     const [pattern, setPattern] = useState("")
     const [type, setType] = useState<"email" | "domain">("email")
@@ -780,9 +835,10 @@ export function AllowlistView() {
     const handleAddEntry = (e: React.FormEvent) => {
         e.preventDefault()
         if (!pattern) return
-        submitThen({ intent: "addAllowlistEntry", pattern, type, description }, () => {
-            setPattern("")
-            setDescription("")
+        const sent = { pattern, description }
+        submitThen({ intent: "addAllowlistEntry", pattern: sent.pattern, type, description: sent.description }, () => {
+            setPattern((current) => (current === sent.pattern ? "" : current))
+            setDescription((current) => (current === sent.description ? "" : current))
         })
     }
 
@@ -798,7 +854,7 @@ export function AllowlistView() {
     return (
         <section data-testid="allowlist-view-section" style={{ display: "flex", flexDirection: "column", gap: "1.2rem" }}>
             <h2 style={heading}>{labels.allowlistView.title}</h2>
-            <ActionError fetcher={fetcher} />
+            <ActionError result={actionResult} />
             <form onSubmit={handleAddEntry} style={{ backgroundColor: "#ffffff", padding: "1.2rem", borderRadius: "8px", border: "1px solid #e2e8f0", display: "flex", flexWrap: "wrap", gap: "0.8rem", alignItems: "flex-end" }}>
                 <div style={{ flex: 2, minWidth: "220px" }}>
                     <label htmlFor="allowlist-pattern-input-field" style={{ display: "block", fontSize: "0.78rem", color: "#475569", marginBottom: "4px" }}>
@@ -937,7 +993,7 @@ export function AllowlistView() {
 export function DirectoryView() {
     const data = useLoaderData() as UserAdminLoaderData
     const fetcher = useFetcher()
-    const submitThen = useSubmitThen(fetcher)
+    const { submit: submitThen, result: actionResult } = useSubmitThen(fetcher)
     const labels = data.labels ?? defaultUserAdminLabels
     const L = labels.directoryView
 
@@ -952,7 +1008,8 @@ export function DirectoryView() {
     const busy = fetcher.state !== "idle"
     // 「要求しました」を出す対象。押しても何も変わらないと、何度も押される
     const [queuedGroupId, setQueuedGroupId] = useState<number | null>(null)
-    const canLink = data.directoryStatus.isEnabled
+    // 供給元が判らないまま欄を出すと、送信は必ずサーバー側の内部文言で失敗する
+    const canLink = data.directoryStatus.isEnabled && data.directoryStatus.provider !== ""
 
     /** 連携を作る。上流キーは運用者が知っている値 (グループアドレス) で受け取る。 */
     const handleLink = (e: React.FormEvent) => {
@@ -960,8 +1017,9 @@ export function DirectoryView() {
         if (!(groupId && externalKey)) return
         // 供給元は配備の設定から来る。ここに特定の値を書くと、別の上流を使う配備で作った
         // リンクが同期側で恒久的に拒否される
-        submitThen({ intent: "linkDirectoryGroup", groupId, provider: data.directoryStatus.provider, externalKey, membershipMode }, () => {
-            setExternalKey("")
+        const sentKey = externalKey
+        submitThen({ intent: "linkDirectoryGroup", groupId, provider: data.directoryStatus.provider, externalKey: sentKey, membershipMode }, () => {
+            setExternalKey((current) => (current === sentKey ? "" : current))
             // 連携済みになった行は候補から消える。選択を残すと、表示は空欄なのに前の
             // グループへ送信される
             setGroupId("")
@@ -971,7 +1029,7 @@ export function DirectoryView() {
     return (
         <section data-testid="directory-view-section" style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
             <h2 style={heading}>{L.title}</h2>
-            <ActionError fetcher={fetcher} />
+            <ActionError result={actionResult} />
 
             {!canLink && (
                 <p data-testid="directory-not-wired" style={{ margin: 0, padding: "0.7rem 1rem", borderRadius: "6px", border: "1px solid #e2e8f0", backgroundColor: "#f8fafc", color: "#475569", fontSize: "0.85rem" }}>
@@ -1098,7 +1156,7 @@ export function DirectoryView() {
                                                 data-testid={`directory-sync-now-${g.id}`}
                                                 disabled={busy}
                                                 aria-busy={busy}
-                                                aria-label={fill(L.syncNowAria, { group: g.name })}
+                                                aria-label={fill(queuedGroupId === g.id ? L.syncQueuedAria : L.syncNowAria, { group: g.name })}
                                                 onClick={() => submitThen({ intent: "requestDirectorySync", groupId: String(g.id) }, () => setQueuedGroupId(g.id))}
                                                 style={smallButton}>
                                                 {queuedGroupId === g.id ? L.syncQueued : L.syncNow}
@@ -1109,7 +1167,10 @@ export function DirectoryView() {
                                                 disabled={busy}
                                                 aria-busy={busy}
                                                 aria-label={fill(link.isSyncEnabled ? L.pauseAria : L.resumeAria, { group: g.name })}
-                                                onClick={() => submitThen({ intent: "setDirectorySyncEnabled", groupId: String(g.id), isSyncEnabled: String(!link.isSyncEnabled) })}
+                                                onClick={() => {
+                                                    setQueuedGroupId(null)
+                                                    submitThen({ intent: "setDirectorySyncEnabled", groupId: String(g.id), isSyncEnabled: String(!link.isSyncEnabled) })
+                                                }}
                                                 style={smallButton}>
                                                 {link.isSyncEnabled ? L.pause : L.resume}
                                             </button>
@@ -1184,7 +1245,8 @@ export type AuthUserAdminAppViewProps = UserAdminShellProps
 export function AuthUserAdminAppView({ renderHeader }: AuthUserAdminAppViewProps = {}) {
     const data = useLoaderData() as UserAdminLoaderData | undefined
     const segment = data?.segment ?? "users"
-    const View = SEGMENT_VIEWS[segment] ?? UsersView
+    // 素のオブジェクト参照だと `segment="constructor"` が真値を返し、画面が描けなくなる
+    const View = Object.hasOwn(SEGMENT_VIEWS, segment) ? SEGMENT_VIEWS[segment] : UsersView
 
     return (
         <UserAdminShell renderHeader={renderHeader}>