@hed-hog/core 0.0.390 → 0.0.394

package/hedhog/frontend/app/users/simulate-access-dialog.test.tsx.ejs

@@ -0,0 +1,202 @@
+import '@testing-library/jest-dom/vitest';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { type ReactNode } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const { appState, toastState } = vi.hoisted(() => ({
+  appState: { request: vi.fn() },
+  toastState: { error: vi.fn(), success: vi.fn() },
+}));
+
+vi.mock('@hed-hog/next-app-provider', async () => {
+  const actual =
+    await vi.importActual<typeof import('@tanstack/react-query')>(
+      '@tanstack/react-query'
+    );
+  return { useApp: () => appState, useQuery: actual.useQuery };
+});
+
+vi.mock('sonner', () => ({ toast: toastState }));
+
+vi.mock('next-intl', () => ({
+  // Devolve a própria chave: o teste verifica comportamento, não tradução.
+  useTranslations: () => (key: string) => key,
+}));
+
+// O Select real é Radix e precisa de APIs de ponteiro que o jsdom não tem. O
+// stub vira um <select> nativo, mesmo padrão de commerce-form-sheet.test.tsx.
+vi.mock('@/components/ui/select', () => ({
+  Select: ({
+    children,
+    value,
+    onValueChange,
+  }: {
+    children: ReactNode;
+    value?: string;
+    onValueChange?: (value: string) => void;
+  }) => (
+    <select
+      aria-label="select-app"
+      value={value}
+      onChange={(event) => onValueChange?.(event.target.value)}
+    >
+      {children}
+    </select>
+  ),
+  SelectContent: ({ children }: { children: ReactNode }) => <>{children}</>,
+  SelectItem: ({ children, value }: { children: ReactNode; value: string }) => (
+    <option value={value}>{children}</option>
+  ),
+  SelectTrigger: ({ children }: { children: ReactNode }) => <>{children}</>,
+  SelectValue: ({ placeholder }: { placeholder?: string }) => (
+    <option value="" disabled>
+      {placeholder ?? 'Selecione'}
+    </option>
+  ),
+}));
+
+// O Dialog real também é Radix (portal + focus trap); aqui só interessa o
+// conteúdo renderizado.
+vi.mock('@/components/ui/dialog', () => ({
+  Dialog: ({ children, open }: { children: ReactNode; open?: boolean }) =>
+    open ? <div>{children}</div> : null,
+  DialogContent: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  DialogDescription: ({ children }: { children: ReactNode }) => <p>{children}</p>,
+  DialogFooter: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  DialogHeader: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  DialogTitle: ({ children }: { children: ReactNode }) => <h2>{children}</h2>,
+}));
+
+import { SimulateAccessDialog } from './simulate-access-dialog';
+
+const TARGET = { id: 42, name: 'Aluna' } as never;
+
+const renderDialog = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+
+  return render(
+    <SimulateAccessDialog open onOpenChange={vi.fn()} user={TARGET} />,
+    { wrapper }
+  );
+};
+
+const chooseApp = async (value: string) => {
+  // Espera a lista de apps chegar: mudar o valor antes de a <option> existir é
+  // um no-op silencioso e o teste passaria a testar nada.
+  await screen.findByText(value);
+  fireEvent.change(screen.getByLabelText('select-app'), { target: { value } });
+};
+
+describe('SimulateAccessDialog', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    appState.request = vi.fn(async (config: { url: string }) => {
+      if (config.url === '/impersonation/apps') {
+        return {
+          data: {
+            apps: [
+              { key: 'admin', url: 'https://admin.example.com' },
+              { key: 'class', url: 'https://class.example.com' },
+            ],
+          },
+        };
+      }
+      return { data: { url: 'https://class.example.com/simulacao#code=abc' } };
+    });
+  });
+
+  it('lista apenas os apps que o backend devolve', async () => {
+    renderDialog();
+
+    expect(await screen.findByText('admin')).toBeInTheDocument();
+    expect(screen.getByText('class')).toBeInTheDocument();
+    // `training` tem autenticação própria e ficou fora desta fase.
+    expect(screen.queryByText('training')).not.toBeInTheDocument();
+  });
+
+  it('exige escolher o app antes de confirmar', async () => {
+    renderDialog();
+
+    await waitFor(() =>
+      expect(screen.getByRole('button', { name: 'confirm' })).toBeDisabled()
+    );
+  });
+
+  it('abre a aba no gesto do clique, antes do await, e só depois aponta a URL', async () => {
+    // Abrir a aba depois do await cai no bloqueador de pop-up de todo navegador.
+    const tab = { location: { href: '' }, close: vi.fn() };
+    const openSpy = vi
+      .spyOn(window, 'open')
+      .mockReturnValue(tab as unknown as Window);
+
+    renderDialog();
+    await chooseApp('class');
+    fireEvent.click(screen.getByRole('button', { name: 'confirm' }));
+
+    expect(openSpy).toHaveBeenCalledWith('', '_blank', 'noopener');
+    await waitFor(() =>
+      expect(tab.location.href).toBe(
+        'https://class.example.com/simulacao#code=abc'
+      )
+    );
+  });
+
+  it('envia o alvo, o app e o motivo para o backend', async () => {
+    vi.spyOn(window, 'open').mockReturnValue({
+      location: { href: '' },
+      close: vi.fn(),
+    } as unknown as Window);
+
+    renderDialog();
+    await chooseApp('class');
+    fireEvent.change(screen.getByLabelText('reason'), {
+      target: { value: 'chamado 123' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'confirm' }));
+
+    await waitFor(() =>
+      expect(appState.request).toHaveBeenCalledWith(
+        expect.objectContaining({
+          url: '/impersonation/start',
+          method: 'POST',
+          data: { targetUserId: 42, app: 'class', reason: 'chamado 123' },
+        })
+      )
+    );
+  });
+
+  it('mostra a mensagem específica do backend e fecha a aba em branco', async () => {
+    const tab = { location: { href: '' }, close: vi.fn() };
+    vi.spyOn(window, 'open').mockReturnValue(tab as unknown as Window);
+
+    appState.request = vi.fn(async (config: { url: string }) => {
+      if (config.url === '/impersonation/apps') {
+        return {
+          data: { apps: [{ key: 'class', url: 'https://class.example.com' }] },
+        };
+      }
+      throw {
+        response: {
+          data: { message: 'Administradores não podem ser simulados.' },
+        },
+      };
+    });
+
+    renderDialog();
+    await chooseApp('class');
+    fireEvent.click(screen.getByRole('button', { name: 'confirm' }));
+
+    await waitFor(() =>
+      expect(toastState.error).toHaveBeenCalledWith(
+        'Administradores não podem ser simulados.'
+      )
+    );
+    expect(tab.close).toHaveBeenCalled();
+  });
+});

package/hedhog/frontend/app/users/simulate-access-dialog.tsx.ejs

@@ -0,0 +1,170 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
+import { User } from '@hed-hog/api-types';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { VenetianMask } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
+
+type AppOption = { key: string; url: string };
+
+export function SimulateAccessDialog({
+  open,
+  onOpenChange,
+  user,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  user: User | null;
+}) {
+  const t = useTranslations('core.AccessSimulation');
+  const { request } = useApp();
+
+  const [app, setApp] = useState('');
+  const [reason, setReason] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  // Os apps de destino vêm do backend (chaves de `app-urls` que têm tela de
+  // resgate), e não de uma lista fixa aqui: o admin não sabe o que está
+  // configurado nesta instalação.
+  const { data: apps, isLoading: isLoadingApps } = useQuery<{ apps: AppOption[] }>({
+    queryKey: ['impersonation-apps'],
+    enabled: open,
+    queryFn: async () => {
+      const response = await request<{ apps: AppOption[] }>({
+        url: '/impersonation/apps',
+      });
+      return response.data;
+    },
+  });
+
+  const options = apps?.apps ?? [];
+
+  useEffect(() => {
+    if (!open) {
+      setApp('');
+      setReason('');
+      setSubmitting(false);
+    }
+  }, [open]);
+
+  const handleConfirm = async () => {
+    if (!user || !app) return;
+
+    // A aba precisa ser aberta AGORA, no gesto do clique. Abrir depois do await
+    // cai no bloqueador de pop-up de todo navegador.
+    const tab = window.open('', '_blank', 'noopener');
+
+    setSubmitting(true);
+    try {
+      const { data } = await request<{ url: string }>({
+        url: '/impersonation/start',
+        method: 'POST',
+        data: { targetUserId: Number(user.id), app, reason: reason.trim() || undefined },
+        showErrors: false,
+      });
+
+      if (tab) {
+        tab.location.href = data.url;
+      } else {
+        // Pop-up bloqueado apesar do gesto: o código vale 60s, então mandar o
+        // operador clicar num link é melhor do que perdê-lo.
+        window.location.href = data.url;
+      }
+
+      onOpenChange(false);
+    } catch (error: any) {
+      tab?.close();
+      // A mensagem do backend é específica (alvo administrador, conta
+      // desativada, app sem URL...) e vale mais que um texto genérico.
+      const message =
+        typeof error?.response?.data?.message === 'string'
+          ? error.response.data.message
+          : t('startFailure');
+      toast.error(message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <VenetianMask className="h-4 w-4 text-amber-600" />
+            {t('dialogTitle')}
+          </DialogTitle>
+          <DialogDescription>
+            {t('dialogDescription', { name: user?.name ?? '' })}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="impersonation-app">{t('targetApp')}</Label>
+            <Select value={app} onValueChange={setApp} disabled={isLoadingApps}>
+              <SelectTrigger id="impersonation-app" className="w-full">
+                <SelectValue placeholder={t('targetAppPlaceholder')} />
+              </SelectTrigger>
+              <SelectContent>
+                {options.map((option) => (
+                  <SelectItem key={option.key} value={option.key}>
+                    {option.key}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {!isLoadingApps && options.length === 0 && (
+              <p className="text-xs text-destructive">{t('noAppsConfigured')}</p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="impersonation-reason">{t('reason')}</Label>
+            <Textarea
+              id="impersonation-reason"
+              value={reason}
+              onChange={(event) => setReason(event.target.value)}
+              placeholder={t('reasonPlaceholder')}
+              maxLength={255}
+              rows={3}
+            />
+          </div>
+
+          <div className="rounded-md border border-amber-200 bg-amber-50 p-3 text-xs text-amber-800">
+            {t('auditWarning')}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t('cancel')}
+          </Button>
+          <Button onClick={handleConfirm} disabled={!app || submitting}>
+            {submitting ? t('opening') : t('confirm')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/hedhog/frontend/app/users/user-activity-timeline.tsx.ejs

@@ -17,6 +17,7 @@ import {
   ShieldOff,
   UserIcon,
   UserPlus,
+  VenetianMask,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useMemo } from 'react';
@@ -30,6 +31,13 @@ type ActivityConfig = {
   dot: string;
 };
 
+const IMPERSONATION_CONFIG: ActivityConfig = {
+  icon: VenetianMask,
+  color: 'text-amber-600 dark:text-amber-400',
+  bg: 'bg-amber-50 dark:bg-amber-950/40',
+  dot: 'ring-amber-200 dark:ring-amber-900',
+};
+
 const ACTION_CONFIG: Record<string, ActivityConfig> = {
   login: {
     icon: UserIcon,
@@ -73,6 +81,12 @@ const ACTION_CONFIG: Record<string, ActivityConfig> = {
     bg: 'bg-rose-50 dark:bg-rose-950/40',
     dot: 'ring-rose-200 dark:ring-rose-900',
   },
+  // Simulação de acesso. As duas primeiras aparecem na linha do tempo do ALVO;
+  // as duas últimas, na do OPERADOR.
+  impersonationStarted: IMPERSONATION_CONFIG,
+  impersonationEnded: IMPERSONATION_CONFIG,
+  impersonationPerformed: IMPERSONATION_CONFIG,
+  impersonationPerformedEnded: IMPERSONATION_CONFIG,
 };
 
 const FALLBACK_CONFIG: ActivityConfig = {
@@ -206,6 +220,11 @@ export function UserActivityTimeline({
                             </span>
                           )}
                         </div>
+                        {activity.actor?.name && (
+                          <span className="text-[11px] font-medium text-amber-700 dark:text-amber-400">
+                            {t('activityByActor', { name: activity.actor.name })}
+                          </span>
+                        )}
                         {activity.created_at && (
                           <span className="text-[11px] text-muted-foreground">
                             {formatDistanceToNow(

package/hedhog/frontend/app/users/user-devices.tsx.ejs

@@ -0,0 +1,89 @@
+'use client';
+
+import { PaginationFooter } from '@/components/entity-list/pagination-footer';
+import { usePagination } from '@/hooks/use-pagination';
+import { User } from '@hed-hog/api-types';
+import { useApp } from '@hed-hog/next-app-provider';
+import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
+import {
+  DEVICE_PAGE_SIZES,
+  UserDevice,
+  UserDevicesList,
+} from '../account/components/user-devices-list';
+
+interface IProps {
+  editingUser: User;
+}
+
+/**
+ * Dispositivos conhecidos do usuario sendo editado.
+ *
+ * Busca propria e paginada em vez de vir embutido no detalhe do usuario: uma
+ * conta antiga acumula dezenas de dispositivos, e embutir a lista pesaria em
+ * todo GET /user/:id, inclusive nas abas que nem olham para isso.
+ */
+export function UserDevices({ editingUser }: IProps) {
+  const { request } = useApp();
+  const t = useTranslations('core.KnownDevices');
+
+  const {
+    items: devices,
+    refetch,
+    page,
+    setPage,
+    totalItems,
+    pageSize,
+    setPageSize,
+  } = usePagination({
+    url: `/user-device/user/${editingUser?.id}`,
+    paginationOptions: { pageSizeOptions: [...DEVICE_PAGE_SIZES] },
+  });
+
+  const handleForget = async (deviceId: number) => {
+    try {
+      await request({
+        url: `/user-device/user/${editingUser.id}/${deviceId}`,
+        method: 'DELETE',
+      });
+      await refetch();
+      toast.success(t('forgetSuccess'));
+    } catch {
+      toast.error(t('forgetFailure'));
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      <div>
+        <h4 className="text-sm font-medium">{t('title')}</h4>
+        <p className="text-xs text-muted-foreground">{t('adminDescription')}</p>
+        {/* Um acesso simulado NÃO registra dispositivo de propósito: o
+            navegador do operador não pode virar dispositivo confiável do
+            usuário, senão o alerta de novo dispositivo dele perde o valor. */}
+        <p className="mt-1 text-xs text-muted-foreground">
+          {t('simulatedNotRecorded')}
+        </p>
+      </div>
+      <UserDevicesList
+        devices={devices as UserDevice[]}
+        onForget={handleForget}
+        emptyLabel={t('noDevices')}
+        t={t}
+      />
+      {totalItems > pageSize ? (
+        <PaginationFooter
+          currentPage={page}
+          pageSize={pageSize}
+          totalItems={totalItems}
+          onPageChange={setPage}
+          onPageSizeChange={(newSize) => {
+            setPageSize(newSize);
+            setPage(1);
+          }}
+          pageSizeOptions={[...DEVICE_PAGE_SIZES]}
+        />
+      ) : null}
+    </div>
+  );
+}

package/hedhog/frontend/app/users/user-logs.tsx.ejs

@@ -12,6 +12,7 @@ import {
   ScrollText,
   ShieldMinus,
   ShieldPlus,
+  VenetianMask,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 
@@ -40,6 +41,10 @@ function getActionIcon(action: string) {
       return ShieldMinus;
     case 'avatar_changed':
       return ImageIcon;
+    case 'impersonation_requested':
+    case 'impersonation_started':
+    case 'impersonation_ended':
+      return VenetianMask;
     default:
       return ScrollText;
   }
@@ -104,8 +109,11 @@ export function UserLogs({ editingUser }: { editingUser: User }) {
   const { data: logs = [], isLoading } = useQuery<UserChangeLog[]>({
     queryKey: ['user-change-logs', userId, currentLocaleCode],
     queryFn: async () => {
+      // `sortOrder=desc` é obrigatório: o @Pagination() assume ordem crescente,
+      // então sem isto a primeira página traz as alterações mais ANTIGAS e o
+      // que acabou de acontecer some na última página.
       const response = await request<{ data: UserChangeLog[] }>({
-        url: `/user/${userId}/log`,
+        url: `/user/${userId}/log?sortField=created_at&sortOrder=desc`,
         method: 'GET',
       });
       return response.data?.data || [];
@@ -119,6 +127,9 @@ export function UserLogs({ editingUser }: { editingUser: User }) {
     'role_assigned',
     'role_removed',
     'avatar_changed',
+    'impersonation_requested',
+    'impersonation_started',
+    'impersonation_ended',
   ];
   const getActionLabel = (action: string) =>
     knownActions.includes(action) ? t(action as never) : action;
@@ -165,6 +176,7 @@ export function UserLogs({ editingUser }: { editingUser: User }) {
                     </div>
                     <p className="text-xs text-muted-foreground">
                       {t('byActor')} {actor}
+                      {log.ipAddress ? ` · ${log.ipAddress}` : ''}
                     </p>
                     {log.summary && (
                       <p className="mt-1 text-xs text-muted-foreground">