diff --git a/devfront/src/features/clients/ClientRelationsPage.tsx b/devfront/src/features/clients/ClientRelationsPage.tsx index 96653d1f..d5e317c2 100644 --- a/devfront/src/features/clients/ClientRelationsPage.tsx +++ b/devfront/src/features/clients/ClientRelationsPage.tsx @@ -1,6 +1,6 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import type { AxiosError } from "axios"; -import { ArrowLeft, Link2, Plus, Trash2 } from "lucide-react"; +import { ArrowLeft, Info, Link2, Plus, Trash2, X } from "lucide-react"; import { useDeferredValue, useMemo, useState } from "react"; import { useAuth } from "react-oidc-context"; import { Link, useParams } from "react-router-dom"; @@ -62,6 +62,10 @@ function relationDescription(relation: RelationOption) { ); } +function relationPermitsInfo(relation: RelationOption) { + return t(`ui.dev.clients.relationships.option.${relation}.permits_info`, ""); +} + function formatUserLabel(user: DevAssignableUser) { const primary = user.name.trim() || user.email.trim(); return `${primary} (${user.email.trim()})`; @@ -81,6 +85,7 @@ function ClientRelationsPage() { null, ); const [isSearchOpen, setIsSearchOpen] = useState(false); + const [infoRelation, setInfoRelation] = useState(null); const systemRole = resolveProfileRole( auth.user?.profile as Record | undefined, @@ -307,6 +312,12 @@ function ClientRelationsPage() { } }; + const handleInfoToggle = (event: React.MouseEvent, relation: RelationOption) => { + event.preventDefault(); + event.stopPropagation(); + setInfoRelation(prev => (prev === relation ? null : relation)); + }; + if (!clientId) { return (
@@ -498,46 +509,76 @@ function ClientRelationsPage() { const disabled = selectedUserExistingRelations.has(relation); const isSelected = selectedRelations.includes(relation); + const isInfoVisible = infoRelation === relation; + return ( -