>({})
+ const [isTeamsExpanded, setIsTeamsExpanded] = useState(false)
React.useEffect(() => {
setBaseUrl(getProxyBaseUrl())
@@ -175,14 +176,14 @@ export default function UserInfoView({
}
const copyToClipboard = async (text: string, key: string) => {
- const success = await utilCopyToClipboard(text);
+ const success = await utilCopyToClipboard(text)
if (success) {
- setCopiedStates((prev) => ({ ...prev, [key]: true }));
+ setCopiedStates((prev) => ({ ...prev, [key]: true }))
setTimeout(() => {
- setCopiedStates((prev) => ({ ...prev, [key]: false }));
- }, 2000);
+ setCopiedStates((prev) => ({ ...prev, [key]: false }))
+ }, 2000)
}
- };
+ }
return (
@@ -200,9 +201,9 @@ export default function UserInfoView({
icon={copiedStates["user-id"] ? : }
onClick={() => copyToClipboard(userData.user_id, "user-id")}
className={`left-2 z-10 transition-all duration-200 ${
- copiedStates["user-id"]
- ? 'text-green-600 bg-green-50 border-green-200'
- : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'
+ copiedStates["user-id"]
+ ? "text-green-600 bg-green-50 border-green-200"
+ : "text-gray-500 hover:text-gray-700 hover:bg-gray-100"
}`}
/>
@@ -284,7 +285,35 @@ export default function UserInfoView({
Teams
-
{userData.teams?.length || 0} teams
+ {userData.teams?.length && userData.teams?.length > 0 ? (
+
+ {userData.teams?.slice(0, isTeamsExpanded ? userData.teams.length : 20).map((team, index) => (
+
+ {team.team_alias}
+
+ ))}
+ {!isTeamsExpanded && userData.teams?.length > 20 && (
+ setIsTeamsExpanded(true)}
+ >
+ +{userData.teams.length - 20} more
+
+ )}
+ {isTeamsExpanded && userData.teams?.length > 20 && (
+ setIsTeamsExpanded(false)}
+ >
+ Show Less
+
+ )}
+
+ ) : (
+
No teams
+ )}
@@ -344,9 +373,9 @@ export default function UserInfoView({
icon={copiedStates["user-id"] ? : }
onClick={() => copyToClipboard(userData.user_id, "user-id")}
className={`left-2 z-10 transition-all duration-200 ${
- copiedStates["user-id"]
- ? 'text-green-600 bg-green-50 border-green-200'
- : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'
+ copiedStates["user-id"]
+ ? "text-green-600 bg-green-50 border-green-200"
+ : "text-gray-500 hover:text-gray-700 hover:bg-gray-100"
}`}
/>
@@ -384,11 +413,33 @@ export default function UserInfoView({
Teams
{userData.teams?.length && userData.teams?.length > 0 ? (
- userData.teams?.map((team, index) => (
-
- {team.team_alias || team.team_id}
-
- ))
+ <>
+ {userData.teams?.slice(0, isTeamsExpanded ? userData.teams.length : 20).map((team, index) => (
+
+ {team.team_alias || team.team_id}
+
+ ))}
+ {!isTeamsExpanded && userData.teams?.length > 20 && (
+ setIsTeamsExpanded(true)}
+ >
+ +{userData.teams.length - 20} more
+
+ )}
+ {isTeamsExpanded && userData.teams?.length > 20 && (
+ setIsTeamsExpanded(false)}
+ >
+ Show Less
+
+ )}
+ >
) : (
No teams
)}