sidebar-user.tsx•6.62 kB
import { useQueryClient } from '@tanstack/react-query';
import { t } from 'i18next';
import { ChevronsUpDown, LogOut, Shield, UserCogIcon } from 'lucide-react';
import { useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { notificationHooks } from '@/app/routes/platform/notifications/hooks/notifications-hooks';
import { useEmbedding } from '@/components/embed-provider';
import { useTelemetry } from '@/components/telemetry-provider';
import { Dot } from '@/components/ui/dot';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
useSidebar,
} from '@/components/ui/sidebar-shadcn';
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip';
import { UserAvatar } from '@/components/ui/user-avatar';
import { useIsPlatformAdmin } from '@/hooks/authorization-hooks';
import { userHooks } from '@/hooks/user-hooks';
import { authenticationSession } from '@/lib/authentication-session';
import { PlatformRole } from '@activepieces/shared';
import AccountSettingsDialog from '../account-settings';
export function SidebarUser() {
const [accountSettingsOpen, setAccountSettingsOpen] = useState(false);
const { embedState } = useEmbedding();
const { state } = useSidebar();
const location = useLocation();
const { data: user } = userHooks.useCurrentUser();
const queryClient = useQueryClient();
const { reset } = useTelemetry();
const isInPlatformAdmin = location.pathname.startsWith('/platform');
const isCollapsed = state === 'collapsed';
if (!user || embedState.isEmbedded) {
return null;
}
const handleLogout = () => {
userHooks.invalidateCurrentUser(queryClient);
authenticationSession.logOut();
reset();
};
return (
<SidebarMenu>
<SidebarMenuItem>
<DropdownMenu modal>
{isCollapsed ? (
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger asChild>
<DropdownMenuTrigger className="flex items-center justify-center size-9 rounded-md hover:bg-accent cursor-pointer">
<UserAvatar
name={user.firstName + ' ' + user.lastName}
email={user.email}
size={28}
disableTooltip={true}
/>
</DropdownMenuTrigger>
</TooltipTrigger>
<TooltipContent side="right" align="center">
{user.firstName + ' ' + user.lastName}
</TooltipContent>
</Tooltip>
</TooltipProvider>
) : (
<DropdownMenuTrigger asChild>
<SidebarMenuButton
size="lg"
className="data-[state=open]:bg-sidebar-accent px-2 data-[state=open]:text-sidebar-accent-foreground"
>
<div className="flex items-center gap-2 w-full text-left text-sm">
<UserAvatar
name={user.firstName + ' ' + user.lastName}
email={user.email}
size={32}
disableTooltip={true}
/>
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-semibold">
{user.firstName + ' ' + user.lastName}
</span>
</div>
<ChevronsUpDown className="ml-auto size-4" />
</div>
</SidebarMenuButton>
</DropdownMenuTrigger>
)}
<DropdownMenuContent
className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
side="right"
align="end"
sideOffset={4}
>
<DropdownMenuLabel className="p-0 font-normal">
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<UserAvatar
name={user.firstName + ' ' + user.lastName}
email={user.email}
size={32}
disableTooltip={true}
/>
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-semibold">
{user.firstName + ' ' + user.lastName}
</span>
<span className="truncate text-xs">{user.email}</span>
</div>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
{!isInPlatformAdmin && <SidebarPlatformAdminButton />}
<DropdownMenuGroup>
<DropdownMenuItem onClick={() => setAccountSettingsOpen(true)}>
<UserCogIcon className="w-4 h-4 mr-2" />
{t('Account Settings')}
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={handleLogout}>
<LogOut className="w-4 h-4 mr-2" />
{t('Log out')}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
<AccountSettingsDialog
open={accountSettingsOpen}
onClose={() => setAccountSettingsOpen(false)}
/>
</SidebarMenu>
);
}
function SidebarPlatformAdminButton() {
const showPlatformAdminDashboard = useIsPlatformAdmin();
const { embedState } = useEmbedding();
const navigate = useNavigate();
const messages = notificationHooks.useNotifications();
const platformRole = userHooks.getCurrentUserPlatformRole();
if (embedState.isEmbedded || !showPlatformAdminDashboard) {
return null;
}
return (
<DropdownMenuGroup>
<DropdownMenuItem
onClick={() => navigate('/platform')}
className="w-full flex items-center justify-center relative"
>
<div className={`w-full flex items-center gap-2`}>
<Shield className="size-4" />
<span className={`text-sm`}>{t('Platform Admin')}</span>
</div>
{messages.length > 0 && platformRole === PlatformRole.ADMIN && (
<Dot
variant="primary"
className="absolute right-3 top-1/2 transform -translate-y-1/2 size-2 rounded-full"
/>
)}
</DropdownMenuItem>
</DropdownMenuGroup>
);
}