@hed-hog/core 0.0.398 → 0.0.400

package/hedhog/frontend/app/ai_instruction/page.tsx.ejs

@@ -5,6 +5,7 @@ import {
   Page,
   PageHeader,
   PaginationFooter,
+  SortableTableHead,
 } from '@/components/entity-list';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -32,6 +33,7 @@ import {
 } from '@/components/ui/tooltip';
 import { useDebounce } from '@/hooks/use-debounce';
 import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
+import { useTableSort, type SortableColumn } from '@/hooks/use-table-sort';
 import { formatDateTime } from '@/lib/format-date';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { Pencil, ShieldAlert, Sparkles } from 'lucide-react';
@@ -51,6 +53,25 @@ import {
 const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
 const ALL = 'all';
 
+type AiInstructionSortField =
+  | 'slug'
+  | 'name'
+  | 'layer'
+  | 'module_slug'
+  | 'version'
+  | 'updated_at';
+
+const SORT_COLUMNS: readonly SortableColumn<AiInstructionSortField>[] = [
+  'slug',
+  'name',
+  'layer',
+  'module_slug',
+  'version',
+  { field: 'updated_at', initialOrder: 'desc' },
+];
+
+const DEFAULT_SORT = { field: 'layer', order: 'asc' } as const;
+
 export default function AiInstructionPage() {
   const { request, currentLocaleCode, getSettingValue } = useApp();
   const t = useTranslations('core.AiInstructionPage');
@@ -122,6 +143,11 @@ export default function AiInstructionPage() {
   });
   const [searchQuery, setSearchQuery] = useState('');
   const debouncedSearch = useDebounce(searchQuery, 400);
+  const sort = useTableSort<AiInstructionSortField>({
+    columns: SORT_COLUMNS,
+    defaultSort: DEFAULT_SORT,
+    onSortChange: () => setPage(1),
+  });
 
   const [editing, setEditing] = useState<AiInstruction | null>(null);
 
@@ -159,7 +185,9 @@ export default function AiInstructionPage() {
     return map;
   }, [registry]);
 
-  const { data, isLoading, refetch } = useQuery<PaginatedResponse<AiInstruction>>({
+  const { data, isLoading, refetch } = useQuery<
+    PaginatedResponse<AiInstruction>
+  >({
     queryKey: [
       'ai-instructions',
       page,
@@ -168,15 +196,20 @@ export default function AiInstructionPage() {
       layerFilter,
       moduleFilter,
       statusFilter,
+      sort.sortField,
+      sort.sortOrder,
     ],
     queryFn: async () => {
       const params = new URLSearchParams();
       params.set('page', String(page));
       params.set('pageSize', String(pageSize));
+      params.set('sortField', sort.sortField);
+      params.set('sortOrder', sort.sortOrder);
       if (debouncedSearch) params.set('search', debouncedSearch);
       if (layerFilter !== ALL) params.set('layer', layerFilter);
       if (moduleFilter !== ALL) params.set('module_slug', moduleFilter);
-      if (statusFilter !== ALL) params.set('is_active', String(statusFilter === 'active'));
+      if (statusFilter !== ALL)
+        params.set('is_active', String(statusFilter === 'active'));
 
       const response = await request<PaginatedResponse<AiInstruction>>({
         url: `/ai-instruction?${params.toString()}`,
@@ -205,7 +238,9 @@ export default function AiInstructionPage() {
       <div className="flex flex-wrap items-center gap-1">
         {entry ? (
           <Badge variant={entry.db_matches_fallback ? 'outline' : 'secondary'}>
-            {entry.db_matches_fallback ? t('badgeDefault') : t('badgeCustomized')}
+            {entry.db_matches_fallback
+              ? t('badgeDefault')
+              : t('badgeCustomized')}
           </Badge>
         ) : null}
         {instruction.is_locked ? (
@@ -289,14 +324,33 @@ export default function AiInstructionPage() {
             <Table>
               <TableHeader>
                 <TableRow>
-                  <TableHead>Slug</TableHead>
-                  <TableHead>{t('columnName')}</TableHead>
-                  <TableHead>{t('columnLayer')}</TableHead>
-                  <TableHead>{t('columnModule')}</TableHead>
+                  <SortableTableHead
+                    label="Slug"
+                    {...sort.getSortProps('slug')}
+                  />
+                  <SortableTableHead
+                    label={t('columnName')}
+                    {...sort.getSortProps('name')}
+                  />
+                  <SortableTableHead
+                    label={t('columnLayer')}
+                    {...sort.getSortProps('layer')}
+                  />
+                  <SortableTableHead
+                    label={t('columnModule')}
+                    {...sort.getSortProps('module_slug')}
+                  />
                   <TableHead>{t('columnParams')}</TableHead>
                   <TableHead>{t('columnState')}</TableHead>
-                  <TableHead className="text-right">v</TableHead>
-                  <TableHead>{t('columnUpdatedAt')}</TableHead>
+                  <SortableTableHead
+                    align="right"
+                    label="v"
+                    {...sort.getSortProps('version')}
+                  />
+                  <SortableTableHead
+                    label={t('columnUpdatedAt')}
+                    {...sort.getSortProps('updated_at')}
+                  />
                   <TableHead className="w-12" />
                 </TableRow>
               </TableHeader>
@@ -315,12 +369,16 @@ export default function AiInstructionPage() {
                       <TableCell className="max-w-72 font-mono text-xs">
                         <Tooltip>
                           <TooltipTrigger asChild>
-                            <span className="block truncate">{instruction.slug}</span>
+                            <span className="block truncate">
+                              {instruction.slug}
+                            </span>
                           </TooltipTrigger>
                           <TooltipContent>{instruction.slug}</TooltipContent>
                         </Tooltip>
                       </TableCell>
-                      <TableCell className="max-w-60 truncate">{instruction.name}</TableCell>
+                      <TableCell className="max-w-60 truncate">
+                        {instruction.name}
+                      </TableCell>
                       <TableCell>
                         <Badge variant="outline">
                           {t(`layer_${instruction.layer}` as never)}
@@ -328,7 +386,9 @@ export default function AiInstructionPage() {
                       </TableCell>
                       <TableCell>
                         {instruction.module_slug ? (
-                          <Badge variant="secondary">{instruction.module_slug}</Badge>
+                          <Badge variant="secondary">
+                            {instruction.module_slug}
+                          </Badge>
                         ) : (
                           '—'
                         )}
@@ -351,7 +411,7 @@ export default function AiInstructionPage() {
                         <Button
                           variant="outline"
                           size="icon"
-                          title={t('edit')}
+                          tooltip={t('edit')}
                           onClick={(event) => {
                             event.stopPropagation();
                             setEditing(instruction);
@@ -387,7 +447,10 @@ export default function AiInstructionPage() {
         pageSizeOptions={pageSizeOptions}
       />
 
-      <Sheet open={Boolean(editing)} onOpenChange={(open) => !open && setEditing(null)}>
+      <Sheet
+        open={Boolean(editing)}
+        onOpenChange={(open) => !open && setEditing(null)}
+      >
         <ResizableSheetContent
           sheetId="core-ai-instruction-form-sheet"
           defaultWidth={900}
@@ -398,7 +461,9 @@ export default function AiInstructionPage() {
         >
           <SheetHeader>
             <SheetTitle>{editing?.name}</SheetTitle>
-            <SheetDescription className="font-mono text-xs">{editing?.slug}</SheetDescription>
+            <SheetDescription className="font-mono text-xs">
+              {editing?.slug}
+            </SheetDescription>
           </SheetHeader>
 
           <div className="px-4 pb-6">

package/hedhog/frontend/app/configurations/[slug]/components/image-optimization-action.tsx.ejs

@@ -0,0 +1,166 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { useApp } from '@hed-hog/next-app-provider';
+import { ImageDown, Loader, RefreshCw } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useCallback, useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import { ByteSizeInput } from './byte-size-input';
+
+/**
+ * Mesmo default do backend (`DEFAULT_IMAGE_OPTIMIZE_MIN_SIZE`): a primeira onda mira nos
+ * arquivos grandes, que concentram o peso do acervo.
+ */
+const DEFAULT_MIN_SIZE = 300 * 1024;
+
+type OptimizeImagesResponse = {
+  dryRun: boolean;
+  minSize: number;
+  total: number;
+  totalBytes: number;
+  queued: number;
+  remaining?: number;
+};
+
+function formatBytes(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes <= 0) return '0 B';
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const exponent = Math.min(
+    units.length - 1,
+    Math.floor(Math.log(bytes) / Math.log(1024)),
+  );
+  const value = bytes / 1024 ** exponent;
+  return `${value >= 100 || exponent === 0 ? Math.round(value) : value.toFixed(1)} ${units[exponent]}`;
+}
+
+/**
+ * Ação de manutenção do subgrupo `image-optimization`: reaplica as settings desta mesma
+ * tela às imagens que já estão no storage.
+ *
+ * As settings acima só valem para uploads novos — quem subiu antes continua com o
+ * arquivo original. A prévia (dry-run) vem antes do botão de propósito: o acervo passa de
+ * meio milhão de arquivos, e enfileirar sem saber o tamanho da onda é o que se quer
+ * evitar.
+ */
+export function ImageOptimizationAction() {
+  const t = useTranslations('core.Configurations.imageOptimization');
+  const { request } = useApp();
+
+  const [minSize, setMinSize] = useState(DEFAULT_MIN_SIZE);
+  const [preview, setPreview] = useState<OptimizeImagesResponse | null>(null);
+  const [isLoadingPreview, setIsLoadingPreview] = useState(false);
+  const [isQueueing, setIsQueueing] = useState(false);
+
+  const loadPreview = useCallback(
+    async (size: number) => {
+      setIsLoadingPreview(true);
+      try {
+        const response = await request<OptimizeImagesResponse>({
+          url: '/queue/jobs/optimize-images',
+          method: 'POST',
+          data: { minSize: size, dryRun: true },
+        });
+        setPreview(response.data);
+      } catch {
+        setPreview(null);
+      } finally {
+        setIsLoadingPreview(false);
+      }
+    },
+    [request],
+  );
+
+  useEffect(() => {
+    void loadPreview(DEFAULT_MIN_SIZE);
+  }, [loadPreview]);
+
+  const handleQueue = async () => {
+    setIsQueueing(true);
+    try {
+      const response = await request<OptimizeImagesResponse>({
+        url: '/queue/jobs/optimize-images',
+        method: 'POST',
+        data: { minSize },
+      });
+      const { queued, remaining } = response.data;
+
+      toast.success(t('queuedSuccess', { count: queued }), {
+        description: remaining ? t('queuedRemaining', { count: remaining }) : undefined,
+      });
+
+      await loadPreview(minSize);
+    } catch {
+      toast.error(t('queueFailed'));
+    } finally {
+      setIsQueueing(false);
+    }
+  };
+
+  const hasCandidates = (preview?.total ?? 0) > 0;
+
+  return (
+    <div className="flex min-w-0 flex-col gap-3 border-t border-border pt-4 md:flex-row md:items-center md:justify-between md:gap-4">
+      <div className="min-w-0 flex-1">
+        <label className="block font-semibold">{t('title')}</label>
+        <p className="text-muted-foreground text-sm wrap-break-word">
+          {t('description')}
+        </p>
+        <p className="mt-1 text-sm">
+          {isLoadingPreview ? (
+            <span className="text-muted-foreground inline-flex items-center gap-2">
+              <Loader className="h-3 w-3 animate-spin" />
+              {t('previewLoading')}
+            </span>
+          ) : preview ? (
+            <span className="font-medium">
+              {t('preview', {
+                count: preview.total,
+                size: formatBytes(preview.totalBytes),
+              })}
+            </span>
+          ) : (
+            <span className="text-muted-foreground">{t('previewFailed')}</span>
+          )}
+        </p>
+        <p className="text-muted-foreground mt-1 text-xs">
+          {t.rich('queueHint', {
+            link: (chunks) => (
+              <Link href="/queue/jobs" className="underline">
+                {chunks}
+              </Link>
+            ),
+          })}
+        </p>
+      </div>
+
+      <div className="flex w-full min-w-0 flex-col items-stretch gap-2 md:w-auto md:flex-row md:items-center md:justify-end">
+        <ByteSizeInput
+          value={minSize}
+          onChange={setMinSize}
+          persistKey="image-optimize-min-size"
+          disabled={isQueueing}
+        />
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => void loadPreview(minSize)}
+          disabled={isLoadingPreview || isQueueing}
+          title={t('refresh')}
+        >
+          <RefreshCw className={isLoadingPreview ? 'animate-spin' : undefined} />
+          <span className="md:sr-only">{t('refresh')}</span>
+        </Button>
+        <Button
+          type="button"
+          onClick={handleQueue}
+          disabled={isQueueing || isLoadingPreview || !hasCandidates}
+        >
+          {isQueueing ? <Loader className="animate-spin" /> : <ImageDown />}
+          {t('queueAction')}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/hedhog/frontend/app/configurations/[slug]/components/setting-field.test.tsx.ejs

@@ -1,14 +1,15 @@
 import '@testing-library/jest-dom/vitest';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import type { Setting } from '@hed-hog/api-types';
+import type { Setting, SettingEntityFilter } from '@hed-hog/api-types';
 import { SettingField } from './setting-field';
 
 /**
- * O que estes testes protegem é o registry `INTEGRATION_PROFILE_SETTINGS`: qual
- * setting vira picker e com que filtro. O `EntityPicker` de verdade tem teste
- * próprio, então aqui ele é um stub que dispara `loadOptions` e renderiza cada
- * resultado como um botão.
+ * O que estes testes protegem é a leitura de `setting.entity_filter`: como o
+ * filtro declarado no `setting_group.yaml` da biblioteca vira query string do
+ * picker, e o que acontece quando ele falta ou vem torto. O `EntityPicker` de
+ * verdade tem teste próprio, então aqui ele é um stub que dispara `loadOptions`
+ * e renderiza cada resultado como um botão.
  */
 type StubProfile = {
   id: number;
@@ -92,15 +93,43 @@ vi.mock('@hed-hog/next-app-provider', () => ({
   }),
 }));
 
+/** Tipos de perfil com tradução própria em `messages/core/*.json`. */
+const TRANSLATED_PROFILE_TYPES = [
+  'ai',
+  'email',
+  'whatsapp',
+  'storage',
+  'oauth',
+  'payment',
+  'infrastructure',
+  'shipping',
+  'captcha',
+  'video',
+  'fiscal',
+  'generic',
+];
+
 vi.mock('next-intl', () => ({
   useTranslations: () => {
-    const t = (key: string) => key;
-    t.has = () => false;
+    // Devolve a própria chave (com os parâmetros, quando houver) para o teste
+    // afirmar qual chave o componente escolheu. `t.has` responde como o
+    // next-intl responderia com os arquivos de mensagem reais, porque a escolha
+    // entre a chave do tipo e a genérica passa exatamente por ele.
+    const t = (key: string, values?: Record<string, unknown>) =>
+      values ? `${key}:${JSON.stringify(values)}` : key;
+    t.has = (key: string) =>
+      TRANSLATED_PROFILE_TYPES.some((type) =>
+        key.startsWith(`profileTypes.${type}.`)
+      ) || key === 'profileProviders.kubernetes';
     return t;
   },
 }));
 
-function buildSetting(slug: string, value = ''): Setting {
+function buildSetting(
+  slug: string,
+  entityFilter: SettingEntityFilter | string | null = null,
+  value = ''
+): Setting {
   return {
     id: 1,
     slug,
@@ -108,6 +137,7 @@ function buildSetting(slug: string, value = ''): Setting {
     component: 'entity-picker',
     value,
     user_override: false,
+    entity_filter: entityFilter,
   } as unknown as Setting;
 }
 
@@ -133,57 +163,52 @@ beforeEach(() => {
 });
 
 describe('SettingField / settings de perfil de integração', () => {
-  it('renderiza picker de IA para sac.ai.integration-profile-id', async () => {
+  it('usa o typeSlug declarado na setting e a tradução do tipo', async () => {
     render(
-      <SettingField setting={buildSetting('sac.ai.integration-profile-id')} />
+      <SettingField
+        setting={buildSetting('sac.ai.integration-profile-id', {
+          typeSlug: 'ai',
+        })}
+      />
     );
 
     expect(screen.getByTestId('picker-placeholder')).toHaveTextContent(
-      'selectAiProfile'
+      'profileTypes.ai.placeholder'
     );
     await waitFor(() => expect(lastProfileQuery()?.get('typeSlug')).toBe('ai'));
   });
 
-  it('filtra por whatsapp no aviso de aprovação por WhatsApp', async () => {
-    render(
-      <SettingField
-        setting={buildSetting(
-          'operations.approval-notifications.whatsapp-integration-profile-id'
-        )}
-      />
-    );
+  it.each([
+    ['operations.approval-notifications.whatsapp-integration-profile-id', 'whatsapp'],
+    ['operations.approval-notifications.email-integration-profile-id', 'email'],
+    ['lms-digest-notify-email-profile-id', 'email'],
+    ['lms-digest-notify-whatsapp-profile-id', 'whatsapp'],
+    ['lms-celebration-notify-email-profile-id', 'email'],
+    ['lms-celebration-notify-whatsapp-profile-id', 'whatsapp'],
+    ['lms-class-reminder-notify-email-profile-id', 'email'],
+    ['lms-class-reminder-notify-whatsapp-profile-id', 'whatsapp'],
+  ])('filtra %s pelo tipo %s', async (slug, typeSlug) => {
+    render(<SettingField setting={buildSetting(slug, { typeSlug })} />);
 
     await waitFor(() =>
-      expect(lastProfileQuery()?.get('typeSlug')).toBe('whatsapp')
+      expect(lastProfileQuery()?.get('typeSlug')).toBe(typeSlug)
     );
   });
 
-  it('filtra por e-mail no aviso de aprovação por e-mail', async () => {
+  it('filtra o campo de frete por transportadora, e não por qualquer perfil', async () => {
     render(
       <SettingField
-        setting={buildSetting(
-          'operations.approval-notifications.email-integration-profile-id'
-        )}
+        setting={buildSetting('commerce-shipping-profile-id', {
+          typeSlug: 'shipping',
+        })}
       />
     );
 
-    await waitFor(() =>
-      expect(lastProfileQuery()?.get('typeSlug')).toBe('email')
+    expect(screen.getByTestId('picker-placeholder')).toHaveTextContent(
+      'profileTypes.shipping.placeholder'
     );
-  });
-
-  it.each([
-    ['lms-digest-notify-email-profile-id', 'email'],
-    ['lms-digest-notify-whatsapp-profile-id', 'whatsapp'],
-    ['lms-celebration-notify-email-profile-id', 'email'],
-    ['lms-celebration-notify-whatsapp-profile-id', 'whatsapp'],
-    ['lms-class-reminder-notify-email-profile-id', 'email'],
-    ['lms-class-reminder-notify-whatsapp-profile-id', 'whatsapp'],
-  ])('filtra %s pelo canal %s', async (slug, typeSlug) => {
-    render(<SettingField setting={buildSetting(slug)} />);
-
     await waitFor(() =>
-      expect(lastProfileQuery()?.get('typeSlug')).toBe(typeSlug)
+      expect(lastProfileQuery()?.get('typeSlug')).toBe('shipping')
     );
   });
 
@@ -204,7 +229,12 @@ describe('SettingField / settings de perfil de integração', () => {
     ]);
 
     render(
-      <SettingField setting={buildSetting('mail-integration-profile-id')} />
+      <SettingField
+        setting={buildSetting('mail-integration-profile-id', {
+          typeSlug: 'email',
+          excludeProviders: ['imap'],
+        })}
+      />
     );
 
     await waitFor(() =>
@@ -214,7 +244,14 @@ describe('SettingField / settings de perfil de integração', () => {
   });
 
   it('estreita o picker de OAuth pelo provider', async () => {
-    render(<SettingField setting={buildSetting('oauth-google-profile-id')} />);
+    render(
+      <SettingField
+        setting={buildSetting('oauth-google-profile-id', {
+          typeSlug: 'oauth',
+          providerSlug: 'google-oauth',
+        })}
+      />
+    );
 
     await waitFor(() => {
       const query = lastProfileQuery();
@@ -241,7 +278,10 @@ describe('SettingField / settings de perfil de integração', () => {
 
     render(
       <SettingField
-        setting={buildSetting('commerce-default-payment-profile-id')}
+        setting={buildSetting('commerce-default-payment-profile-id', {
+          typeSlug: 'payment',
+          excludeProviders: ['google_play'],
+        })}
       />
     );
 
@@ -251,11 +291,67 @@ describe('SettingField / settings de perfil de integração', () => {
     expect(screen.queryByTestId('option-play-prod')).not.toBeInTheDocument();
   });
 
-  it('lista perfis de todos os tipos quando o slug não está mapeado', async () => {
+  it('nomeia os botões pelo provider quando ele tem nome próprio', async () => {
+    render(
+      <SettingField
+        setting={buildSetting('hedhog.k8s_integration_profile_id', {
+          typeSlug: 'infrastructure',
+          providerSlug: 'kubernetes',
+        })}
+      />
+    );
+
+    await waitFor(() =>
+      expect(
+        // O rotulo vem da prop `tooltip` do Button, que tambem gera o aria-label.
+        screen.getByRole('button', {
+          name: 'createProfileAria:{"profile":"profileProviders.kubernetes"}',
+        })
+      ).toBeInTheDocument()
+    );
+  });
+
+  it('aceita o filtro como string JSON, para coluna de texto', async () => {
+    render(
+      <SettingField
+        setting={buildSetting(
+          'commerce-shipping-profile-id',
+          '{"typeSlug":"shipping"}'
+        )}
+      />
+    );
+
+    await waitFor(() =>
+      expect(lastProfileQuery()?.get('typeSlug')).toBe('shipping')
+    );
+  });
+
+  it.each([
+    ['string quebrada', '{'],
+    ['array', [] as unknown as SettingEntityFilter],
+    ['typeSlug que não é texto', { typeSlug: 42 } as unknown as SettingEntityFilter],
+  ])(
+    'cai na rede de segurança com filtro inválido (%s), sem quebrar a tela',
+    async (_caso, filtroInvalido) => {
+      render(
+        <SettingField
+          setting={buildSetting('commerce-shipping-profile-id', filtroInvalido)}
+        />
+      );
+
+      expect(screen.getByTestId('picker-placeholder')).toHaveTextContent(
+        'profileTypes.generic.placeholder'
+      );
+      await waitFor(() => expect(lastProfileQuery()).not.toBeNull());
+      expect(lastProfileQuery()?.get('typeSlug')).toBeNull();
+    }
+  );
+
+  it('lista perfis de todos os tipos quando a setting não tem entity_filter', async () => {
     render(<SettingField setting={buildSetting('nova-lib-ai-profile-id')} />);
 
     expect(screen.getByTestId('picker-placeholder')).toHaveTextContent(
-      'selectIntegrationProfile'
+      'profileTypes.generic.placeholder'
     );
     await waitFor(() => expect(lastProfileQuery()).not.toBeNull());
     expect(lastProfileQuery()?.get('typeSlug')).toBeNull();
@@ -282,7 +378,11 @@ describe('SettingField / settings de perfil de integração', () => {
     ]);
 
     render(
-      <SettingField setting={buildSetting('sac.ai.integration-profile-id')} />
+      <SettingField
+        setting={buildSetting('sac.ai.integration-profile-id', {
+          typeSlug: 'ai',
+        })}
+      />
     );
 
     await waitFor(() =>