@hed-hog/core 0.0.370 → 0.0.373

package/hedhog/frontend/app/dashboard/management/tabs/components-tab.tsx.ejs

@@ -68,7 +68,7 @@ import {
   IconX,
 } from '@tabler/icons-react';
 import { useTranslations } from 'next-intl';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { toast } from 'sonner';
 
 interface Component {
@@ -111,6 +111,8 @@ interface RoleOption {
   name?: string;
 }
 
+const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
+
 export function ComponentsTab() {
   const t = useTranslations('core.DashboardManagement');
   const { request, locales, currentLocaleCode } = useApp();
@@ -133,10 +135,40 @@ export function ComponentsTab() {
     useState<Component | null>(null);
   const [selectedRoleIds, setSelectedRoleIds] = useState<number[]>([]);
   const [page, setPage] = useState(1);
+  const { data: generalSettings } = useQuery<{
+    data: Array<{ slug: string; value: string }>;
+  }>({
+    queryKey: ['setting-group-general'],
+    queryFn: async () => {
+      const response = await request<{
+        data: Array<{ slug: string; value: string }>;
+      }>({ url: '/setting/group/general', method: 'GET' });
+      return response.data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const pageSizeOptions = useMemo(() => {
+    const setting = generalSettings?.data?.find(
+      (s) => s.slug === 'pagination-page-sizes'
+    );
+    if (!setting?.value) return DEFAULT_PAGE_SIZES;
+    try {
+      const parsed = JSON.parse(setting.value) as string[];
+      const sizes = parsed
+        .map(Number)
+        .filter((n) => !isNaN(n) && n > 0)
+        .sort((a, b) => a - b);
+      return sizes.length > 0 ? sizes : DEFAULT_PAGE_SIZES;
+    } catch {
+      return DEFAULT_PAGE_SIZES;
+    }
+  }, [generalSettings]);
+
   const [pageSize, setPageSize] = usePersistedPageSize({
     storageKey: 'pagination:global:pageSize',
-    defaultValue: 10,
-    allowedValues: [10, 20, 30, 50],
+    defaultValue: 12,
+    allowedValues: pageSizeOptions,
   });
   const [searchQuery, setSearchQuery] = useState('');
   const [roleSearchQuery, setRoleSearchQuery] = useState('');
@@ -909,7 +941,7 @@ export function ComponentsTab() {
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  {[10, 20, 30, 50].map((size) => (
+                  {pageSizeOptions.map((size) => (
                     <SelectItem key={size} value={String(size)}>
                       {size}
                     </SelectItem>

package/hedhog/frontend/app/dashboard/management/tabs/dashboard-roles-tab.tsx.ejs

@@ -133,6 +133,8 @@ type RequestError = {
   };
 };
 
+const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
+
 export function DashboardRolesTab() {
   const t = useTranslations('core.DashboardManagement');
   const { request, currentLocaleCode, getSettingValue } = useApp();
@@ -146,10 +148,40 @@ export function DashboardRolesTab() {
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [roleToDelete, setRoleToDelete] = useState<number | null>(null);
   const [page, setPage] = useState(1);
+  const { data: generalSettings } = useQuery<{
+    data: Array<{ slug: string; value: string }>;
+  }>({
+    queryKey: ['setting-group-general'],
+    queryFn: async () => {
+      const response = await request<{
+        data: Array<{ slug: string; value: string }>;
+      }>({ url: '/setting/group/general', method: 'GET' });
+      return response.data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const pageSizeOptions = useMemo(() => {
+    const setting = generalSettings?.data?.find(
+      (s) => s.slug === 'pagination-page-sizes'
+    );
+    if (!setting?.value) return DEFAULT_PAGE_SIZES;
+    try {
+      const parsed = JSON.parse(setting.value) as string[];
+      const sizes = parsed
+        .map(Number)
+        .filter((n) => !isNaN(n) && n > 0)
+        .sort((a, b) => a - b);
+      return sizes.length > 0 ? sizes : DEFAULT_PAGE_SIZES;
+    } catch {
+      return DEFAULT_PAGE_SIZES;
+    }
+  }, [generalSettings]);
+
   const [pageSize, setPageSize] = usePersistedPageSize({
     storageKey: 'pagination:global:pageSize',
-    defaultValue: 10,
-    allowedValues: [10, 20, 30, 50],
+    defaultValue: 12,
+    allowedValues: pageSizeOptions,
   });
   const searchQuery = '';
   const debouncedSearch = useDebounce(searchQuery, 500);
@@ -539,7 +571,7 @@ export function DashboardRolesTab() {
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  {[10, 20, 30, 50].map((size) => (
+                  {pageSizeOptions.map((size) => (
                     <SelectItem key={size} value={String(size)}>
                       {size}
                     </SelectItem>

package/hedhog/frontend/app/dashboard/management/tabs/dashboards-tab.tsx.ejs

@@ -67,7 +67,7 @@ import {
   IconX,
 } from '@tabler/icons-react';
 import { useTranslations } from 'next-intl';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { toast } from 'sonner';
 
 interface Dashboard {
@@ -98,6 +98,8 @@ interface RoleOption {
   name?: string;
 }
 
+const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
+
 export function DashboardsTab() {
   const t = useTranslations('core.DashboardManagement');
   const { request, locales, currentLocaleCode } = useApp();
@@ -120,10 +122,40 @@ export function DashboardsTab() {
     useState<Dashboard | null>(null);
   const [selectedRoleIds, setSelectedRoleIds] = useState<number[]>([]);
   const [page, setPage] = useState(1);
+  const { data: generalSettings } = useQuery<{
+    data: Array<{ slug: string; value: string }>;
+  }>({
+    queryKey: ['setting-group-general'],
+    queryFn: async () => {
+      const response = await request<{
+        data: Array<{ slug: string; value: string }>;
+      }>({ url: '/setting/group/general', method: 'GET' });
+      return response.data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const pageSizeOptions = useMemo(() => {
+    const setting = generalSettings?.data?.find(
+      (s) => s.slug === 'pagination-page-sizes'
+    );
+    if (!setting?.value) return DEFAULT_PAGE_SIZES;
+    try {
+      const parsed = JSON.parse(setting.value) as string[];
+      const sizes = parsed
+        .map(Number)
+        .filter((n) => !isNaN(n) && n > 0)
+        .sort((a, b) => a - b);
+      return sizes.length > 0 ? sizes : DEFAULT_PAGE_SIZES;
+    } catch {
+      return DEFAULT_PAGE_SIZES;
+    }
+  }, [generalSettings]);
+
   const [pageSize, setPageSize] = usePersistedPageSize({
     storageKey: 'pagination:global:pageSize',
-    defaultValue: 10,
-    allowedValues: [10, 20, 30, 50],
+    defaultValue: 12,
+    allowedValues: pageSizeOptions,
   });
   const [searchQuery, setSearchQuery] = useState('');
   const [roleSearchQuery, setRoleSearchQuery] = useState('');
@@ -653,7 +685,7 @@ export function DashboardsTab() {
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  {[10, 20, 30, 50].map((size) => (
+                  {pageSizeOptions.map((size) => (
                     <SelectItem key={size} value={String(size)}>
                       {size}
                     </SelectItem>

package/hedhog/frontend/app/dashboard/management/tabs/items-tab.tsx.ejs

@@ -127,6 +127,8 @@ type ComponentListResponse = {
   data?: Component[];
 };
 
+const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
+
 export function ItemsTab() {
   const t = useTranslations('core.DashboardManagement');
   const { request, currentLocaleCode, getSettingValue } = useApp();
@@ -144,10 +146,40 @@ export function ItemsTab() {
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [itemToDelete, setItemToDelete] = useState<number | null>(null);
   const [page, setPage] = useState(1);
+  const { data: generalSettings } = useQuery<{
+    data: Array<{ slug: string; value: string }>;
+  }>({
+    queryKey: ['setting-group-general'],
+    queryFn: async () => {
+      const response = await request<{
+        data: Array<{ slug: string; value: string }>;
+      }>({ url: '/setting/group/general', method: 'GET' });
+      return response.data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const pageSizeOptions = useMemo(() => {
+    const setting = generalSettings?.data?.find(
+      (s) => s.slug === 'pagination-page-sizes'
+    );
+    if (!setting?.value) return DEFAULT_PAGE_SIZES;
+    try {
+      const parsed = JSON.parse(setting.value) as string[];
+      const sizes = parsed
+        .map(Number)
+        .filter((n) => !isNaN(n) && n > 0)
+        .sort((a, b) => a - b);
+      return sizes.length > 0 ? sizes : DEFAULT_PAGE_SIZES;
+    } catch {
+      return DEFAULT_PAGE_SIZES;
+    }
+  }, [generalSettings]);
+
   const [pageSize, setPageSize] = usePersistedPageSize({
     storageKey: 'pagination:global:pageSize',
-    defaultValue: 10,
-    allowedValues: [10, 20, 30, 50],
+    defaultValue: 12,
+    allowedValues: pageSizeOptions,
   });
   const searchQuery = '';
   const debouncedSearch = useDebounce(searchQuery, 500);
@@ -647,7 +679,7 @@ export function ItemsTab() {
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  {[10, 20, 30, 50].map((size) => (
+                  {pageSizeOptions.map((size) => (
                     <SelectItem key={size} value={String(size)}>
                       {size}
                     </SelectItem>

package/hedhog/frontend/app/integration/profiles/page.tsx.ejs

@@ -19,6 +19,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
+import { DoNodePoolPicker } from '@/components/integration-profile/do-node-pool-picker';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -57,6 +58,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+import { TableBodySkeleton } from '@/components/ui/skeletons';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { usePagination } from '@/hooks/use-pagination';
 import { formatDate } from '@/lib/format-date';
@@ -166,6 +168,9 @@ type ImportValidationResponse = {
 
 // ─── Provider field definitions ───────────────────────────────────────────────
 
+/** Placeholder devolvido pelo backend no lugar de um segredo armazenado. */
+const SECRET_MASK = '********';
+
 const PROVIDER_FIELDS: Record<string, FieldDef[]> = {
   smtp: [
     {
@@ -653,6 +658,61 @@ const PROVIDER_FIELDS: Record<string, FieldDef[]> = {
       placeholder: 'https://eu.altcha.org/api/v1',
     },
   ],
+  // O node pool de vídeo NÃO é um campo de texto: é escolhido por nome via picker
+  // dedicado (carrega os pools da DO API com o token + cluster_id). Ver DoNodePoolPicker.
+  digitalocean: [
+    {
+      key: 'api_token',
+      labelKey: 'fieldApiToken',
+      type: 'password',
+      required: true,
+      colSpan: true,
+    },
+    {
+      key: 'cluster_id',
+      labelKey: 'fieldClusterId',
+      type: 'text',
+      required: true,
+    },
+    {
+      key: 'region',
+      labelKey: 'fieldRegion',
+      type: 'text',
+      required: true,
+      placeholder: 'nyc1',
+    },
+  ],
+  kubernetes: [
+    {
+      key: 'api_server',
+      labelKey: 'fieldApiServer',
+      type: 'url',
+      required: true,
+      colSpan: true,
+      placeholder: 'https://10.0.0.1:6443',
+    },
+    {
+      key: 'token',
+      labelKey: 'fieldToken',
+      type: 'password',
+      required: true,
+      colSpan: true,
+    },
+    {
+      key: 'ca_cert',
+      labelKey: 'fieldCaCert',
+      type: 'password',
+      required: false,
+      colSpan: true,
+    },
+    {
+      key: 'namespace',
+      labelKey: 'fieldNamespace',
+      type: 'text',
+      required: false,
+      placeholder: 'hcode',
+    },
+  ],
 };
 
 // ─── Helpers ─────────────────────────────────────────────────────────────────
@@ -722,6 +782,7 @@ function TypeTab({
     totalItems,
     search,
     setSearch,
+    isLoading,
   } = usePagination({ url: `/integration-profile?typeId=${typeId}` });
 
   useEffect(() => {
@@ -786,13 +847,7 @@ function TypeTab({
         placeholder={t('searchPlaceholder')}
       />
 
-      {profiles.length === 0 ? (
-        <EmptyState
-          icon={<PlugZap className="h-12 w-12" />}
-          title={t('noProfilesFound')}
-          description={t('noProfilesHint')}
-        />
-      ) : (
+      {isLoading || profiles.length > 0 ? (
         <div className="rounded-md border">
           <Table>
             <TableHeader>
@@ -826,7 +881,10 @@ function TypeTab({
               </TableRow>
             </TableHeader>
             <TableBody>
-              {profiles.map((profile) => (
+              {isLoading ? (
+                <TableBodySkeleton rows={pageSize} columns={9} />
+              ) : (
+                profiles.map((profile) => (
                 <TableRow
                   key={profile.id}
                   className="cursor-pointer"
@@ -907,10 +965,17 @@ function TypeTab({
                     </div>
                   </TableCell>
                 </TableRow>
-              ))}
+                ))
+              )}
             </TableBody>
           </Table>
         </div>
+      ) : (
+        <EmptyState
+          icon={<PlugZap className="h-12 w-12" />}
+          title={t('noProfilesFound')}
+          description={t('noProfilesHint')}
+        />
       )}
 
       <PaginationFooter
@@ -1075,6 +1140,10 @@ export default function IntegrationProfilesPage() {
         {};
       const providerSlug =
         providers.find((p) => p.id === data.provider_id)?.slug ?? '';
+      // Segredos chegam mascarados (********) do backend e PERMANECEM mascarados no
+      // form: o campo fica desabilitado mostrando ********; o botão "trocar" limpa e
+      // reabilita para digitar um novo valor. Em branco ou mascarado, o backend
+      // preserva o segredo armazenado.
       if (
         providerSlug.endsWith('-oauth') &&
         !Array.isArray(loadedConfig.callback_urls)
@@ -1844,6 +1913,15 @@ export default function IntegrationProfilesPage() {
 
                     const isPassword = field.type === 'password';
                     const isVisible = visibleFields[field.key] ?? false;
+                    const currentValue = String(
+                      formData.config[field.key] ?? ''
+                    );
+                    // Segredo já armazenado: campo desabilitado mostrando ******** +
+                    // botão "trocar" que limpa o valor e reabilita para digitar um novo.
+                    const isLockedSecret =
+                      isPassword &&
+                      Boolean(editingProfile) &&
+                      currentValue === SECRET_MASK;
 
                     return (
                       <div
@@ -1865,49 +1943,76 @@ export default function IntegrationProfilesPage() {
                             id={`ip-cfg-${field.key}`}
                             type={
                               isPassword
-                                ? isVisible
+                                ? isVisible && !isLockedSecret
                                   ? 'text'
                                   : 'password'
                                 : field.type === 'number'
                                   ? 'number'
                                   : 'text'
                             }
-                            value={String(formData.config[field.key] ?? '')}
+                            value={currentValue}
                             onChange={(e) =>
                               updateConfig(field.key, e.target.value)
                             }
-                            placeholder={field.placeholder}
-                            required={field.required}
+                            placeholder={
+                              isPassword && editingProfile
+                                ? t('leaveBlankToKeep')
+                                : field.placeholder
+                            }
+                            required={
+                              field.required &&
+                              !(isPassword && Boolean(editingProfile))
+                            }
                             autoComplete={
                               isPassword ? 'new-password' : undefined
                             }
                             className={isPassword ? 'pr-10' : undefined}
+                            disabled={isLockedSecret}
                           />
-                          {isPassword && (
-                            <Button
-                              type="button"
-                              variant="ghost"
-                              size="icon"
-                              className="absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2"
-                              onClick={() =>
-                                setVisibleFields((p) => ({
-                                  ...p,
-                                  [field.key]: !p[field.key],
-                                }))
-                              }
-                              aria-label={
-                                isVisible
-                                  ? t('hidePassword')
-                                  : t('showPassword')
-                              }
-                            >
-                              {isVisible ? (
-                                <EyeOff className="h-4 w-4" />
-                              ) : (
-                                <Eye className="h-4 w-4" />
-                              )}
-                            </Button>
-                          )}
+                          {isPassword &&
+                            (isLockedSecret ? (
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2"
+                                onClick={() => {
+                                  updateConfig(field.key, '');
+                                  setVisibleFields((p) => ({
+                                    ...p,
+                                    [field.key]: true,
+                                  }));
+                                }}
+                                aria-label={t('changeSecret')}
+                                title={t('changeSecret')}
+                              >
+                                <Pencil className="h-4 w-4" />
+                              </Button>
+                            ) : (
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2"
+                                onClick={() =>
+                                  setVisibleFields((p) => ({
+                                    ...p,
+                                    [field.key]: !p[field.key],
+                                  }))
+                                }
+                                aria-label={
+                                  isVisible
+                                    ? t('hidePassword')
+                                    : t('showPassword')
+                                }
+                              >
+                                {isVisible ? (
+                                  <EyeOff className="h-4 w-4" />
+                                ) : (
+                                  <Eye className="h-4 w-4" />
+                                )}
+                              </Button>
+                            ))}
                         </div>
                       </div>
                     );
@@ -1916,6 +2021,19 @@ export default function IntegrationProfilesPage() {
               </div>
             )}
 
+            {/* ── DigitalOcean: node pool de vídeo (escolha por nome via API) ── */}
+            {selectedProvider?.slug === 'digitalocean' && (
+              <DoNodePoolPicker
+                apiToken={String(formData.config.api_token ?? '')}
+                clusterId={String(formData.config.cluster_id ?? '')}
+                value={String(formData.config.video_node_pool_name ?? '')}
+                profileId={editingProfile?.id}
+                onChange={(name) =>
+                  updateConfig('video_node_pool_name', name)
+                }
+              />
+            )}
+
             {/* ── Callback URLs (OAuth only) ── */}
             {isOAuthProvider && (
               <div className="rounded-lg border">