@hed-hog/core 0.0.399 → 0.0.401

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(() =>