feat: added customSections on audits#146
Conversation
📝 Walkthrough📝 WalkthroughWalkthroughLos cambios en este pull request introducen nuevas funcionalidades y modificaciones en varios componentes relacionados con la gestión de auditorías. Se han agregado propiedades al tipo Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
sealra
requested review from
Icksir,
caverav,
iTzGooDLife,
jllanosg and
massi-ponce
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 23
🧹 Outside diff range comments (2)
frontend/src/routes/audits/edit/AuditRoot.tsx (2)
Line range hint
62-92: Asegurar orden correcto de las dependencias enuseEffectEl segundo
useEffectdepende desections, pero sisectionsaún no está cargado cuando se ejecuta este efecto, podrías enfrentar problemas de datos incompletos. Considera enlazar las llamadas agetCustomSectionsygetAuditById, o asegurarte de quesectionsesté completamente cargado antes de procesaraudit.datas.sections.
Line range hint
78-83: Eliminar valor 'severity' hardcodeado y utilizar datos realesEn el mapeo de los hallazgos, estás asignando
severity: 'L', lo cual es un valor hardcodeado. Deberías utilizar el valor real de severidad del objetofinding.¿Quieres que te ayude a modificar el código para utilizar el valor real de severidad? Puedo ofrecer una solución si lo deseas.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
📒 Files selected for processing (8)
- frontend/src/components/navbar/AuditSidebar.tsx (4 hunks)
- frontend/src/main.tsx (2 hunks)
- frontend/src/routes/audits/edit/AuditRoot.tsx (4 hunks)
- frontend/src/routes/audits/edit/sections/AuditCustomFields.tsx (1 hunks)
- frontend/src/routes/audits/edit/sections/sections.tsx (1 hunks)
- frontend/src/routes/audits/index.tsx (1 hunks)
- frontend/src/services/audits.ts (4 hunks)
- frontend/src/services/data.ts (2 hunks)
🧰 Additional context used
🪛 Biome
frontend/src/components/navbar/AuditSidebar.tsx
[error] 266-266: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (7)
frontend/src/main.tsx (1)
24-31: Importación correcta del nuevo componente.La adición de la importación de 'Sections' es coherente con la nueva ruta que se está agregando. La declaración de importación está correctamente formateada y sigue el patrón existente.
frontend/src/services/data.ts (2)
Line range hint
1-1: Actualización del tipoNewCustomSectionSegún el resumen de IA, has modificado el tipo
NewCustomSectionpara incluir un campoiconopcional. Esta es una buena adición que proporciona más flexibilidad. Sin embargo, no puedo ver esta modificación en el fragmento de código proporcionado.Asegúrate de que esta modificación se haya aplicado correctamente y que sea consistente con la nueva definición del tipo
Section.Ejecuta el siguiente script para verificar la definición actualizada de
NewCustomSection:#!/bin/bash # Descripción: Verifica la definición actualizada de NewCustomSection # Prueba: Busca la definición de NewCustomSection rg --type typescript 'export type NewCustomSection'
586-586: Actualización correcta del tipo de retorno engetCustomSectionsHas actualizado correctamente el tipo de retorno de la función
getCustomSectionspara usar el nuevo tipoSection. Esto mejora la consistencia y la seguridad de tipos en tu código.Sin embargo, asegúrate de que el backend esté devolviendo datos que coincidan exactamente con esta estructura. Si hay alguna discrepancia, podrías enfrentar errores en tiempo de ejecución.
Ejecuta el siguiente script para verificar la estructura de los datos devueltos por el endpoint:
✅ Verification successful
Verificación exitosa de la estructura de los datos devueltos
Se ha comprobado que la función
getCustomSectionsmaneja correctamente la estructura de los datos, utilizandoSection[]en múltiples ubicaciones del código. No se encontraron discrepancias que puedan causar errores en tiempo de ejecución.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Descripción: Verifica la estructura de los datos devueltos por el endpoint de secciones personalizadas # Prueba: Busca el uso de la función getCustomSections y su manejo de datos rg --type typescript 'getCustomSections\(' -A 10Length of output: 253
Script:
#!/bin/bash # Descripción: Verifica la estructura de los datos devueltos por el endpoint de secciones personalizadas # Prueba: Busca el uso de la función getCustomSections y su manejo de datos en archivos TypeScript rg 'getCustomSections\(' --glob '*.ts' --glob '*.tsx' -A 10Length of output: 4430
frontend/src/routes/audits/edit/AuditRoot.tsx (1)
222-231: Verificar queAuditSidebaracepte las nuevas propiedadesEstás pasando nuevas propiedades al componente
AuditSidebar. Asegúrate de queAuditSidebaresté actualizado para manejarauditSections,isListVisible,sectionsy otras propiedades que le estás proporcionando.frontend/src/services/audits.ts (3)
124-124: Verificar la adición desectionsen el tipoAuditById.Se ha añadido
sections: AuditSection[];al tipoAuditById. Asegúrate de que este campo esté correctamente inicializado y utilizado en todas las partes del código donde se manejaAuditById.
136-159: Revisión del tipoUpdateAuditCustomFields.La definición del tipo
UpdateAuditCustomFieldsparece correcta, pero verifica que todos los campos opcionales y obligatorios estén correctamente especificados y que se alineen con las estructuras de datos que maneja el backend.
160-175: Revisión del tipoSectionCustomField.Asegúrate de que este tipo refleje todas las propiedades necesarias y que esté en consonancia con los datos que se reciben del backend.
There was a problem hiding this comment.
Actionable comments posted: 8
🧹 Outside diff range and nitpick comments (5)
frontend/src/routes/audits/edit/sections/sections.tsx (1)
47-201: Evaluación general del componente SectionsEl componente
Sectionsmaneja de manera efectiva la gestión de estado complejo y la obtención de datos para las secciones de auditoría. Sin embargo, hay varias áreas que podrían mejorarse para aumentar la legibilidad, mantenibilidad y robustez del código.Considera las siguientes mejoras:
- Extrae las funciones de transformación de datos a utilidades separadas para reducir la complejidad del componente principal.
- Implementa un manejo de errores más robusto que informe al usuario sobre los resultados de las operaciones.
- Utiliza valores por defecto para los estados iniciales para evitar problemas con valores undefined.
- Considera dividir este componente en subcomponentes más pequeños si la complejidad aumenta.
- Agrega comentarios explicativos para las partes más complejas del código, especialmente en las funciones de transformación de datos.
- Implementa pruebas unitarias para las funciones de transformación y los efectos secundarios.
Estas mejoras harán que el código sea más fácil de mantener y entender para futuros desarrolladores que trabajen en este componente.
frontend/src/routes/audits/edit/AuditRoot.tsx (3)
1-1: Importaciones y variables de estado añadidas correctamente.Las nuevas importaciones y variables de estado se han agregado de manera adecuada para soportar la funcionalidad de secciones personalizadas. Sin embargo, considera agrupar las importaciones relacionadas para mejorar la legibilidad del código.
Considera reorganizar las importaciones de la siguiente manera:
import { toast } from 'sonner'; import { getCustomSections, Section } from '@/services/data'; import { AuditSection, Finding, getAuditById } from '../../../services/audits';Also applies to: 6-8, 43-45
Line range hint
61-92: Lógica de mapeo mejorada, pero persiste el problema de manejo de errores.La nueva lógica para mapear las secciones de auditoría y emparejarlas con secciones personalizadas es correcta y mejora la funcionalidad. Sin embargo, el manejo de errores sigue siendo insuficiente.
Implementa un manejo de errores más robusto:
useEffect(() => { getAuditById(auditId) .then(audit => { setAuditSections( audit.datas.sections.map((section: AuditSection) => { const matchingSection = sections.find( s => s.field === section.field && s.name === section.name ); return { field: section.field, name: section.name, _id: section._id, customFields: section.customFields, icon: matchingSection?.icon ?? undefined, }; }) ); setFindings( audit.datas.findings.map((finding: Finding) => ({ id: finding.identifier, name: finding.title, category: 'No Category', severity: 'L', //TODO: it's harcoded })) ); setAuditName(audit.datas.name); }) .catch(error => { console.error('Error al obtener datos de la auditoría:', error); toast.error('No se pudieron cargar los datos de la auditoría. Por favor, intente de nuevo más tarde.'); }); }, [auditId, sections]);Además, es necesario abordar el TODO sobre la severidad codificada. Implementa una lógica adecuada para determinar la severidad en lugar de usar un valor fijo.
Line range hint
1-253: Revisión general: Implementación de secciones personalizadas con áreas de mejora.La implementación de secciones personalizadas es generalmente correcta y añade funcionalidad valiosa al componente. Sin embargo, hay varias áreas que requieren atención:
- Manejo de errores: Es necesario implementar un manejo de errores más robusto en todas las operaciones asíncronas.
- Organización del código: Considera extraer la lógica de fetching de datos a funciones separadas para mejorar la legibilidad y mantenibilidad.
- Tipado: Asegúrate de que todos los tipos estén correctamente definidos, especialmente para las nuevas estructuras de datos introducidas.
- Rendimiento: Evalúa si es necesario memoizar algunos cálculos o componentes para optimizar el rendimiento.
Considera implementar un custom hook para manejar la lógica de fetching y procesamiento de datos, lo que podría mejorar la organización y reutilización del código:
function useAuditData(auditId: string) { const [auditSections, setAuditSections] = useState<AuditSection[]>([]); const [sections, setSections] = useState<Section[]>([]); // ... otros estados useEffect(() => { // Lógica para obtener secciones personalizadas }, []); useEffect(() => { // Lógica para obtener datos de la auditoría }, [auditId, sections]); return { auditSections, sections, /* ... otros estados y funciones */ }; }Esto permitiría simplificar el componente principal y mejorar la separación de responsabilidades.
frontend/src/components/navbar/AuditSidebar.tsx (1)
235-236: Manejar valores 'undefined' o 'null' en 'section.icon' al renderizar el iconoCuando
section.iconesnulloundefined, el elemento<i className="material-icons">{section.icon}</i>en la línea 235 podría renderizar un valor no deseado en la interfaz de usuario. Considera proporcionar un valor predeterminado o manejar este caso para asegurar una representación adecuada.Puedes ajustar el código de la siguiente manera:
-<i className="material-icons">{section.icon}</i> +<i className="material-icons">{section.icon || 'default_icon'}</i>Donde
'default_icon'es el nombre del icono que deseas mostrar por defecto.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
- frontend/src/components/navbar/AuditSidebar.tsx (4 hunks)
- frontend/src/routes/audits/edit/AuditRoot.tsx (4 hunks)
- frontend/src/routes/audits/edit/sections/sections.tsx (1 hunks)
🧰 Additional context used
🔇 Additional comments (2)
frontend/src/routes/audits/edit/sections/sections.tsx (1)
53-54:⚠️ Potential issueInicializa currentLanguage con un valor por defecto
No has proporcionado un valor inicial para
currentLanguage. Esto podría causar problemas si intentas acceder a sus propiedades antes de que se establezca un valor.Modifica la declaración de estado para incluir un valor inicial:
- const [currentLanguage, setCurrentLanguage] = useState<ListItem>(); + const [currentLanguage, setCurrentLanguage] = useState<ListItem | null>(null);Asegúrate de manejar el caso en que
currentLanguageseanullen el resto del componente.Likely invalid or redundant comment.
frontend/src/routes/audits/edit/AuditRoot.tsx (1)
222-231: Propiedades del componente AuditSidebar actualizadas correctamente.Las nuevas propiedades añadidas al componente AuditSidebar son coherentes con la nueva funcionalidad de secciones personalizadas. La implementación parece correcta y no se observan problemas evidentes.
|
@sealra resolver conflictos pls |
listo 👍 |
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Outside diff range and nitpick comments (7)
frontend/src/routes/audits/edit/AuditRoot.tsx (4)
76-78: Nuevas variables de estado añadidas correctamente.Las nuevas variables de estado son necesarias para manejar las secciones personalizadas y su visibilidad. Sin embargo, considera usar nombres más descriptivos para mejorar la legibilidad del código. Por ejemplo,
isCustomSectionsListVisibleen lugar deisListVisible.
Line range hint
94-126: Manejo de errores inadecuado en la obtención de datos de auditoría.La lógica actualizada para obtener y procesar los datos de auditoría es correcta, pero el manejo de errores es insuficiente. Es imperativo proporcionar retroalimentación al usuario en caso de error.
Modifica el código para mejorar el manejo de errores:
useEffect(() => { getAuditById(auditId) .then(audit => { // ... (código existente) }) .catch(error => { console.error('Error al obtener datos de auditoría:', error); toast.error('No se pudieron cargar los datos de la auditoría. Por favor, intente de nuevo más tarde.'); }); }, [auditId, sections]);
239-249: Mejorar la claridad en los nombres de las props.Las nuevas props se han añadido correctamente al componente AuditSidebar. Sin embargo, los nombres
isListVisibleysetIsListVisibleson poco descriptivos. Considera usar nombres más específicos para mejorar la legibilidad y mantenibilidad del código.Sugerencia de cambio:
isListVisible={isCustomSectionsListVisible} setIsListVisible={setIsCustomSectionsListVisible}Asegúrate de actualizar estos nombres en toda la aplicación para mantener la consistencia.
Line range hint
1-270: Revisión general: Implementación de secciones personalizadasLa implementación de secciones personalizadas es generalmente correcta y coherente. Sin embargo, hay áreas que requieren atención:
Manejo de errores: Es crucial mejorar el manejo de errores en todas las operaciones asíncronas. Utiliza
toast.errorpara informar al usuario sobre los problemas.Nombres de variables y props: Considera usar nombres más descriptivos para
isListVisibleysetIsListVisiblepara mejorar la claridad del código.Tipado: Asegúrate de que todos los tipos nuevos (
AuditSection,Section) estén correctamente definidos y utilizados de manera consistente en todo el componente.Aborda estos puntos para mejorar la robustez y mantenibilidad del código.
frontend/src/components/navbar/AuditSidebar.tsx (3)
58-61: Propiedades añadidas correctamente a AuditSidebarPropsLas nuevas propiedades son necesarias para la gestión de secciones personalizadas. Sin embargo, sería beneficioso añadir comentarios JSDoc para explicar el propósito de cada nueva propiedad, especialmente para
auditSectionsysections.Ejemplo:
/** * Array de secciones de auditoría personalizadas seleccionadas */ auditSections: AuditSection[]; /** * Array de todas las secciones disponibles */ sections: Section[];Esto mejoraría la comprensión del código para otros desarrolladores.
238-246: Botón para mostrar/ocultar la lista de seccionesEl botón para mostrar/ocultar la lista de secciones está implementado correctamente. Sin embargo, su visibilidad depende de
isCollapsed, lo que podría llevar a una experiencia de usuario inconsistente. Considera permitir que este botón esté siempre visible, ajustando su posición o tamaño cuando la barra lateral esté colapsada.
Line range hint
1-359: Sugerencias para mejorar la estructura y rendimiento del componenteEl componente
AuditSidebarha crecido significativamente en complejidad. Considera las siguientes mejoras:
Extrae la lógica de renderizado de las secciones personalizadas a un componente separado para mejorar la legibilidad y mantenibilidad.
Utiliza
useMemopara memoizar las listas renderizadas (findings, connectedUsers, sections) para evitar recálculos innecesarios en cada renderizado.Considera usar
useCallbackpara las funciones de manejo de eventos para prevenir recreaciones innecesarias.Evalúa la posibilidad de implementar virtualización para las listas largas (como findings o connectedUsers) para mejorar el rendimiento con grandes conjuntos de datos.
Revisa el uso de
clsxy considera consolidar las clases condicionales para mejorar la legibilidad.Ejemplo de memoización:
const memoizedFindings = useMemo(() => findings.map(/* ... */), [findings, sortOrder]);Implementar estas sugerencias ayudará a mejorar el rendimiento y la mantenibilidad del componente a largo plazo.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (5)
- frontend/src/components/navbar/AuditSidebar.tsx (4 hunks)
- frontend/src/main.tsx (2 hunks)
- frontend/src/routes/audits/edit/AuditRoot.tsx (4 hunks)
- frontend/src/routes/audits/edit/sections/sections.tsx (1 hunks)
- frontend/src/routes/audits/index.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- frontend/src/main.tsx
- frontend/src/routes/audits/index.tsx
🧰 Additional context used
🔇 Additional comments (7)
frontend/src/routes/audits/edit/sections/sections.tsx (3)
84-95:⚠️ Potential issueVerifica la existencia de auditId y sectionId antes de usarlos
En la función
fetchAuditSections, no estás verificando siauditIdosectionIdestán definidos antes de utilizarlos. Esto podría provocar errores si estos parámetros sonundefined.Modifica la función para incluir una verificación:
const fetchAuditSections = useCallback(async () => { + if (!auditId || !sectionId) { + console.error('auditId o sectionId no definidos'); + return; + } try { const auditSectionResponse = await getAuditSectionById( auditId, sectionId, ); setDataAuditSection(auditSectionResponse.datas); } catch (error) { console.error('Error:', error); } }, [auditId, sectionId]);Esto evitará llamadas innecesarias a la API y potenciales errores.
Likely invalid or redundant comment.
1-1:⚠️ Potential issueElimina el comentario de desactivación de ESLint y corrige la configuración del proyecto
El uso de
eslint-disableparaimport/extensionsindica un problema en la configuración del proyecto que debe ser abordado directamente. En lugar de desactivar la regla, debes corregir la causa raíz del problema.Acciones recomendadas:
- Revisa y ajusta la configuración de ESLint para manejar correctamente las extensiones de archivo.
- Si estás utilizando TypeScript, asegúrate de que el compilador esté configurado adecuadamente para las extensiones de archivo.
- Actualiza las importaciones para incluir las extensiones de archivo si es necesario.
Una vez resuelto, elimina esta línea:
- /* eslint-disable import/extensions */Likely invalid or redundant comment.
183-187:⚠️ Potential issueMejora el manejo de errores para informar al usuario
Actualmente, si ocurre un error durante la actualización, solo se registra en la consola. El usuario no recibe ninguna notificación sobre el fallo de la operación. Esto es inaceptable desde el punto de vista de la experiencia del usuario.
Implementa un mecanismo para informar al usuario sobre el resultado de la operación. Por ejemplo:
try { await updateAuditSectionById(auditId, sectionId, payload); + // Muestra un mensaje de éxito al usuario + showSuccessMessage('La sección se ha actualizado correctamente'); } catch (error) { console.error(error); + // Muestra un mensaje de error al usuario + showErrorMessage('No se pudo actualizar la sección. Por favor, inténtalo de nuevo.'); }Asegúrate de implementar las funciones
showSuccessMessageyshowErrorMessagede acuerdo con el sistema de notificaciones de tu aplicación. No informar al usuario sobre errores críticos es una mala práctica que debe corregirse inmediatamente.Likely invalid or redundant comment.
frontend/src/routes/audits/edit/AuditRoot.tsx (2)
9-10: Importaciones correctas para la nueva funcionalidad.Las nuevas importaciones son necesarias y están correctamente implementadas para manejar las secciones personalizadas.
15-15: Importación actualizada correctamente.La importación se ha actualizado para incluir
AuditSection, lo cual es coherente con la nueva funcionalidad de secciones personalizadas.frontend/src/components/navbar/AuditSidebar.tsx (2)
5-12: Importaciones correctamente actualizadasLas nuevas importaciones de iconos y tipos son coherentes con las funcionalidades añadidas para las secciones personalizadas. Buen trabajo en mantener las importaciones organizadas y relevantes.
Also applies to: 15-16
Line range hint
1-359: Conclusión de la revisiónEn general, las modificaciones introducen funcionalidades valiosas para manejar secciones personalizadas en la barra lateral de auditoría. Sin embargo, también aumentan significativamente la complejidad del componente.
Puntos clave a abordar:
- Implementar la lógica faltante para añadir/eliminar secciones personalizadas.
- Corregir posibles errores en el manejo de iconos.
- Mejorar la estructura del componente extrayendo lógica a subcomponentes.
- Optimizar el rendimiento mediante memoización y posible virtualización.
- Mejorar la consistencia en el manejo de la visibilidad de elementos UI.
Abordar estos puntos mejorará significativamente la calidad, mantenibilidad y rendimiento del componente. Buen trabajo en la implementación de las nuevas características, pero asegúrate de refinar estos aspectos antes de finalizar.
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Outside diff range and nitpick comments (5)
frontend/src/services/vulnerabilities.ts (1)
Line range hint
235-255: La implementación depostDescriptionCWEes correcta, pero hay un problema con la URL del comentario.La función
postDescriptionCWEestá bien implementada y sigue el patrón de otras llamadas API en el archivo. Sin embargo, hay un problema con el comentario en la línea 235:// Agregar el endpoint al backend https://localhost:8000/classifyEste comentario contiene una URL de localhost, lo cual no es apropiado para código de producción. Las URLs de desarrollo no deberían estar en el código fuente, ya que pueden causar confusión y potencialmente llevar a errores si alguien las utiliza accidentalmente.
Realiza las siguientes acciones:
- Elimina o modifica el comentario para que no contenga una URL específica.
- Considera utilizar variables de entorno para manejar diferentes URLs de API en distintos entornos (desarrollo, staging, producción).
Ejemplo de cómo podrías modificar el comentario:
// Endpoint para clasificar descripciones de vulnerabilidadesfrontend/src/routes/audits/edit/AuditRoot.tsx (3)
9-10: Importación innecesaria de tipo SectionHas importado el tipo
Sectionpero no lo estás utilizando en este archivo. Elimina las importaciones no utilizadas para mantener el código limpio y mejorar el rendimiento.Aplica este cambio:
-import { getCustomSections, Section } from '@/services/data'; +import { getCustomSections } from '@/services/data';
Line range hint
97-126: Manejo de errores insuficiente y posible problema de rendimientoEl manejo de errores en este useEffect es tan inadecuado como en el anterior. Además, la dependencia
sectionsen el array de dependencias podría causar renderizaciones innecesarias.
- Implementa un manejo de errores robusto.
- Considera mover la lógica de mapeo fuera del useEffect para evitar recálculos innecesarios.
Aquí tienes un ejemplo de cómo podrías mejorarlo:
useEffect(() => { getAuditById(auditId) .then(audit => { setAuditSections(audit.datas.sections); setFindings(audit.datas.findings.map(mapFindingToDisplayFormat)); setAuditName(audit.datas.name); }) .catch(error => { console.error('Error al obtener datos de la auditoría:', error); toast.error('No se pudieron cargar los datos de la auditoría. Por favor, intente de nuevo más tarde.'); }); }, [auditId]); useEffect(() => { if (auditSections.length && sections.length) { const mappedSections = auditSections.map(section => ({ ...section, icon: sections.find(s => s.field === section.field && s.name === section.name)?.icon })); setAuditSections(mappedSections); } }, [auditSections, sections]);Esto separa la lógica de obtención de datos y el mapeo de secciones, mejorando el rendimiento y la claridad del código.
Line range hint
1-274: Resumen de la revisión y sugerencias finalesHas realizado cambios significativos para manejar secciones personalizadas y mejorar la funcionalidad del componente AuditRoot. Sin embargo, hay varias áreas que requieren atención:
- Manejo de errores: Es crucial implementar un manejo de errores robusto en todos los efectos y llamadas a API.
- Gestión del estado: Considera usar useReducer o una biblioteca de gestión de estado como Redux para manejar la complejidad del estado de este componente.
- Rendimiento: Optimiza los efectos y las dependencias para evitar renderizaciones innecesarias.
- Prop drilling: Utiliza Context API para reducir el número de props pasadas a los componentes hijos.
- Tipado: Asegúrate de que todos los tipos estén correctamente definidos y utilizados.
Para mejorar la arquitectura general:
- Separa la lógica de negocio en hooks personalizados.
- Implementa un sistema de caché para las secciones personalizadas y los datos de auditoría.
- Considera la implementación de lazy loading para optimizar el rendimiento inicial.
Estas mejoras harán que tu código sea más mantenible, eficiente y robusto.
frontend/src/services/audits.ts (1)
Line range hint
1-691: Resumen de la revisión y próximos pasosDespués de revisar los cambios en
frontend/src/services/audits.ts, se identificaron los siguientes puntos principales:
- Inconsistencias en la representación de campos personalizados y secciones de auditoría entre diferentes tipos (
AuditSection,UpdateAuditCustomFields,AuditSectionById).- Falta de validación de parámetros en las nuevas funciones
getAuditSectionByIdyupdateAuditSectionById.Próximos pasos recomendados:
- Unifica la representación de campos personalizados en todos los tipos relacionados con auditorías. Si es necesario mantener diferentes representaciones, documenta claramente el propósito de cada una.
- Implementa validación de parámetros en las nuevas funciones para mejorar la robustez del código.
- Revisa el uso de tipos como
string | string[]y considera si es posible simplificarlos o si es necesario documentar claramente cuándo se usa cada variante.- Asegúrate de que estos cambios sean consistentes con la implementación en el backend y otros componentes del frontend que interactúen con estas estructuras de datos.
Implementar estas mejoras aumentará la consistencia, robustez y mantenibilidad del código.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
- frontend/src/routes/audits/edit/AuditRoot.tsx (4 hunks)
- frontend/src/services/audits.ts (4 hunks)
- frontend/src/services/vulnerabilities.ts (2 hunks)
🧰 Additional context used
🔇 Additional comments (1)
frontend/src/services/vulnerabilities.ts (1)
75-80:⚠️ Potential issueSe ha modificado la estructura de
CWEData. ¿Cuál es el motivo?La eliminación del campo
priorityde los elementos del arrayresulten el tipoCWEDatapodría tener implicaciones significativas:
- Es posible que el código existente que depende del campo
prioritydeje de funcionar correctamente.- Esta simplificación podría mejorar el rendimiento y facilitar el manejo de datos.
Es necesario que proporciones más información sobre esta modificación:
- ¿Por qué se ha eliminado el campo
priority?- ¿Se han actualizado todas las partes del código que utilizaban este campo?
- ¿Se han realizado pruebas para garantizar que esta modificación no cause problemas en otras áreas de la aplicación?
Ejecuta el siguiente script para verificar si hay código que aún utiliza el campo
priorityeliminado:
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Outside diff range and nitpick comments (1)
frontend/src/routes/audits/edit/sections/sections.tsx (1)
1-201: Resumen de la revisión y sugerencias de mejora generalEl componente
Sectionsmaneja una lógica compleja de gestión de estado y obtención de datos. Sin embargo, hay varias áreas que requieren mejoras significativas:
Manejo de errores: Implementa un manejo de errores consistente y robusto en todas las funciones de fetch y actualización.
Organización del código: Extrae lógicas complejas, como las transformaciones de datos, a funciones separadas para mejorar la legibilidad y facilitar las pruebas.
Experiencia del usuario: Añade estados de carga y error en el renderizado para proporcionar feedback visual al usuario.
Tipado: Asegúrate de que todos los parámetros y variables tengan tipos adecuados, especialmente los provenientes de
useParams().Rendimiento: Considera la implementación de memoización para funciones y componentes que no necesitan re-renderizarse frecuentemente.
Pruebas: Añade pruebas unitarias para las funciones de transformación y manejo de datos.
Documentación: Agrega comentarios JSDoc para explicar la funcionalidad de las funciones complejas y los tipos personalizados.
Implementar estas mejoras aumentará significativamente la calidad, mantenibilidad y robustez del código. Es imperativo abordar estos puntos antes de considerar el código como producción-ready.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- frontend/src/routes/audits/edit/sections/sections.tsx (1 hunks)
🧰 Additional context used
🔇 Additional comments (1)
frontend/src/routes/audits/edit/sections/sections.tsx (1)
1-1:⚠️ Potential issueElimina el comentario de desactivación de ESLint y corrige la configuración del proyecto
El uso de
eslint-disableparaimport/extensionsindica un problema en la configuración del proyecto que debe ser abordado correctamente. En lugar de desactivar la regla, debes resolver el problema subyacente.Acciones recomendadas:
- Revisa y ajusta la configuración de ESLint para manejar correctamente las extensiones de archivo.
- Si estás utilizando TypeScript, asegúrate de que el compilador esté configurado adecuadamente para las extensiones de archivo.
- Actualiza las importaciones para incluir las extensiones de archivo si es necesario.
Una vez resuelto, elimina la siguiente línea:
- /* eslint-disable import/extensions */Likely invalid or redundant comment.
sealra
force-pushed
the
feature/audit-customSections
branch
from
ad24c21 to
3a53e00
Compare
There was a problem hiding this comment.
Caution
Inline review comments failed to post
Actionable comments posted: 6
🧹 Outside diff range and nitpick comments (4)
frontend/src/components/navbar/AuditSidebar.tsx (3)
Line range hint
1-60: Importaciones y definiciones de tipos actualizadas correctamenteLas nuevas importaciones y adiciones de tipos son coherentes con los cambios descritos en el resumen de IA. Apoyan la nueva funcionalidad para secciones personalizadas. Sin embargo, hay un punto que requiere atención:
- La importación de
Sectionen la línea 17 utiliza una ruta relativa. Deberías considerar cambiarla a una importación absoluta para mantener la consistencia con las otras importaciones.Considera cambiar la importación de
Sectiona una importación absoluta:-import { Section } from '../../services/data'; +import { Section } from '@/services/data';
280-316: Sección de usuarios conectados: mejora de accesibilidad necesariaLa implementación de la sección de usuarios conectados es coherente con el resto del componente y utiliza correctamente el estado
isCollapsedpara el renderizado condicional. Sin embargo, hay una mejora de accesibilidad que debes realizar:El indicador de estado en línea (líneas 304-308) utiliza solo color para indicar si un usuario está en línea o no. Esto puede ser problemático para usuarios con daltonismo o que utilizan lectores de pantalla.
Para mejorar la accesibilidad, añade un texto alternativo al indicador de estado:
<span className={clsx( 'w-2 h-2 rounded-full flex-shrink-0', user.online ? 'bg-green-500' : 'bg-gray-500', )} + aria-label={user.online ? 'En línea' : 'Desconectado'} />Implementa este cambio para mejorar la accesibilidad de la sección de usuarios conectados.
Line range hint
1-317: Revisión final: Mejoras significativas con áreas de optimizaciónEl componente AuditSidebar ha sido actualizado sustancialmente para incluir nuevas características de secciones personalizadas y usuarios conectados. En general, los cambios están bien implementados y mantienen la consistencia con la estructura y el enfoque de estilo existentes. Sin embargo, hay algunas áreas que requieren atención adicional:
Rendimiento: Considera memoizar los callbacks de los eventos
onClickpara evitar renderizados innecesarios.Mantenibilidad: Extrae la lógica compleja, como la renderización de iconos y la gestión de secciones personalizadas, en funciones o componentes separados.
Accesibilidad: Asegúrate de que todos los elementos interactivos tengan etiquetas ARIA apropiadas y que la navegación por teclado funcione correctamente.
Gestión de estado: La lógica para añadir/eliminar secciones personalizadas debería implementarse y probarse adecuadamente.
Para mejorar aún más este componente, considera las siguientes acciones:
- Implementa pruebas unitarias para las nuevas funcionalidades.
- Documenta las props del componente y su funcionamiento interno para facilitar el mantenimiento futuro.
- Evalúa si algunas partes del componente podrían extraerse en subcomponentes más pequeños y reutilizables.
- Implementa un manejo de errores robusto, especialmente para las interacciones con las secciones personalizadas.
Estas mejoras ayudarán a que el componente sea más robusto, mantenible y accesible en el futuro.
frontend/src/services/audits.ts (1)
39-45: Buena adición, pero considera mejorar la estructura de customFieldsLa nueva estructura
AuditSectiones una buena adición para representar secciones de auditoría. Sin embargo, la definición decustomFieldscomo un array de strings podría ser limitante.Considera usar una estructura más robusta para
customFieldsque permita mayor flexibilidad y detalle en el futuro. Por ejemplo:customFields: { id: string; value: string | number | boolean; type: string; }[];Esto permitiría una representación más rica de los campos personalizados sin necesidad de cambios significativos en el futuro.
🛑 Comments failed to post (6)
frontend/src/components/navbar/AuditSidebar.tsx (3)
187-247:
⚠️ Potential issueImplementación de secciones personalizadas requiere mejoras
La adición del botón y el desplegable para secciones personalizadas es un buen comienzo, pero hay varios problemas que necesitan ser abordados:
El botón de alternancia (líneas 203-210) no tiene un
aria-label, lo que afecta la accesibilidad.El desplegable (líneas 213-244) se cierra al hacer clic en cualquier sección, independientemente de si ya está seleccionada o no. Esto limita la capacidad del usuario para seleccionar múltiples secciones.
No hay lógica para añadir o eliminar secciones del array
auditSectionscuando se hace clic en una sección.Debes abordar estos problemas para mejorar la funcionalidad y la accesibilidad:
- Añade un
aria-labelal botón de alternancia.- Implementa la lógica para añadir o eliminar secciones de
auditSectionscuando se hace clic en ellas.- Mantén el desplegable abierto hasta que el usuario haga clic fuera de él o en un botón de cierre específico.
Ejemplo de implementación para el punto 2:
const handleSectionToggle = (section: Section) => { const isSelected = auditSections.some( auditSection => auditSection.field === section.field ); if (isSelected) { // Eliminar la sección setAuditSections(auditSections.filter( auditSection => auditSection.field !== section.field )); } else { // Añadir la sección setAuditSections([...auditSections, section]); } };Luego, usa
handleSectionToggle(section)en elonClickdel botón de cada sección.
249-278: 🛠️ Refactor suggestion
Mejoras necesarias en la renderización de secciones personalizadas seleccionadas
La implementación de la renderización de secciones personalizadas seleccionadas es funcional, pero hay áreas que requieren mejoras:
Accesibilidad: Los iconos no tienen texto alternativo, lo que dificulta su interpretación por lectores de pantalla.
Organización del código: La lógica para renderizar los iconos se repite en varias partes del componente. Esto viola el principio DRY (Don't Repeat Yourself).
Te sugiero las siguientes mejoras:
Añade un
aria-labela los iconos para mejorar la accesibilidad.Crea una función auxiliar para renderizar los iconos y utilízala en todo el componente. Por ejemplo:
const renderIcon = (icon: string) => { if (icon.startsWith('fa-')) { return <i className={`fa ${icon}`} aria-hidden="true" />; } return <i className="material-icons" aria-hidden="true">{icon}</i>; };Luego, usa esta función en lugar de repetir la lógica de renderizado de iconos:
-{section.icon?.startsWith('fa-') ? ( - <i className={`fa ${section.icon}`} /> -) : ( - <i className="material-icons">{section.icon}</i> -)} +{renderIcon(section.icon)}Implementa estos cambios para mejorar la mantenibilidad y accesibilidad del código.
75-90:
⚠️ Potential issueInconsistencia en la desestructuración de props
Has añadido correctamente las nuevas props para manejar las secciones personalizadas. Sin embargo, hay un problema crítico:
- Has eliminado la prop
sortOptionsde la desestructuración, pero aún se está utilizando en el componente (línea 157). Esto causará un error en tiempo de ejecución.Debes volver a incluir
sortOptionsen la desestructuración de props:const AuditSidebar = ({ activeItem, setActiveItem, auditSections, isCollapsed, setIsCollapsed, isListVisible, setIsListVisible, sections, sortBy, setSortBy, sortOrder, setSortOrder, menuItems, findings, + sortOptions, sortOrderOptions, connectedUsers, }: AuditSidebarProps) => (📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.auditSections, isCollapsed, setIsCollapsed, isListVisible, setIsListVisible, sections, sortBy, setSortBy, sortOrder, setSortOrder, menuItems, findings, sortOptions, sortOrderOptions, connectedUsers, }: AuditSidebarProps) => (frontend/src/services/audits.ts (3)
136-174: 🛠️ Refactor suggestion
Estructuras detalladas, pero con potencial de mejora
Las nuevas estructuras
UpdateAuditCustomFieldsySectionCustomFieldproporcionan una representación detallada de los campos personalizados. Sin embargo, hay algunas áreas que podrían mejorarse:
El uso de
string | string[]para el campotextenUpdateAuditCustomFieldspuede llevar a un manejo inconsistente de los datos. Considera usar un tipo más específico o documentar claramente cuándo se usa cada variante.Hay una duplicación significativa entre
UpdateAuditCustomFieldsySectionCustomField. Podrías reducir esta duplicación creando un tipo base común y extendiéndolo según sea necesario.Ejemplo de refactorización:
type BaseCustomField = { description: string; display: string; // ... otros campos comunes }; type UpdateAuditCustomFields = BaseCustomField & { text: string | string[]; }; type SectionCustomField = BaseCustomField;Esta estructura reducirá la duplicación y facilitará el mantenimiento futuro.
444-465:
⚠️ Potential issueImplementación correcta, pero falta validación de parámetros
La función
getAuditSectionByIdestá bien implementada y sigue el patrón de otras llamadas API en el archivo. Sin embargo, hay una mejora importante que debes hacer:No estás validando
auditIdysectionIdantes de usarlos. Si alguno de estos esundefined, podrías tener errores en tiempo de ejecución. Agrega una validación al inicio de la función:export const getAuditSectionById = async ( auditId: string | undefined, sectionId: string | undefined, ): Promise<{ status: string; datas: AuditSectionById }> => { if (!auditId || !sectionId) { throw new Error('auditId y sectionId son obligatorios'); } // ... resto de la implementación };Esta validación evitará errores innecesarios y mejorará la robustez de tu código.
467-491: 🛠️ Refactor suggestion
⚠️ Potential issueImplementación correcta, pero requiere ajustes
La función
updateAuditSectionByIdestá bien estructurada, pero hay dos puntos importantes que necesitas abordar:
Al igual que en
getAuditSectionById, no estás validandoauditIdysectionId. Agrega una validación al inicio de la función para evitar errores en tiempo de ejecución.El parámetro
auditSectionses de tipoUpdateAuditCustomFields, pero este tipo incluye campos comofield,name, y_idque probablemente no deberían ser modificables en una actualización. Considera crear un tipo específico para las actualizaciones, por ejemplo:type UpdateAuditSectionFields = { customFields: UpdateAuditCustomFields['customFields']; };Luego, actualiza la firma de la función:
export const updateAuditSectionById = async ( auditId: string | undefined, sectionId: string | undefined, updateFields: UpdateAuditSectionFields, ): Promise<{ status: string; datas: AuditSectionById }> => { if (!auditId || !sectionId) { throw new Error('auditId y sectionId son obligatorios'); } // ... resto de la implementación };Estos cambios mejorarán la seguridad y la claridad de tu código.
caverav
left a comment
caverav
left a comment
There was a problem hiding this comment.
Al apretar en un custom section, no me aparece nada para editar
|
|
aplicaste el flujo mencionado en la descripción del pr? editar un audit type (o custom field) de un audit ya creado no modificará para ese audit (por como funciona el back de pwndoc) |
Esto lo comenté en algun comentario de codeRabbit, la funcionalidad de añadir directamente quedaría como issue (creo), porque requerirá modificaciones extensas al back, de momento pensaba en probablemente comentar o eliminar para este sprint esa funcionalidad. |
Yep |
no me pasa, podríamos verificar tu flujo por discord |
Era que por defecto se encuentra así: |
iTzGooDLife
left a comment
iTzGooDLife
left a comment
There was a problem hiding this comment.
No existe un feedback (como un toast) al momento de guardar cambios en un custom section, especificamentente al apretar el botón de la imagen A:
Imagen A:
En caso de que se deje para un futuro debido al tiempo, crear el issue correspondiente por favor.
iTzGooDLife
left a comment
iTzGooDLife
left a comment
There was a problem hiding this comment.
Falta resolver los conflictos con development.
ya fue agregado como issue 👍 |
fueron resueltos 👍 |
There was a problem hiding this comment.
Actionable comments posted: 11
🧹 Outside diff range and nitpick comments (3)
frontend/src/routes/audits/edit/AuditRoot.tsx (3)
8-8: Importaciones y variables de estado añadidas correctamente.Las nuevas importaciones y variables de estado son necesarias para la funcionalidad añadida. Sin embargo, considere agrupar las variables de estado relacionadas para mejorar la legibilidad del código.
Considere agrupar las variables de estado relacionadas de la siguiente manera:
const [auditState, setAuditState] = useState({ auditSections: [], sections: [], isListVisible: false });Esto puede hacer que el código sea más fácil de mantener a medida que crece.
Also applies to: 70-72
Line range hint
88-119: Persistencia del manejo inadecuado de errores en la obtención de datos de auditoría.El problema de manejo de errores insuficiente se repite en este useEffect. Es crucial implementar un manejo de errores robusto en todas las operaciones asíncronas.
Implemente un manejo de errores similar al sugerido para el useEffect anterior:
useEffect(() => { getAuditById(auditId) .then(audit => { // ... (código existente) }) .catch(error => { console.error('Error al obtener datos de auditoría:', error); toast.error('No se pudieron cargar los datos de la auditoría. Por favor, intente de nuevo más tarde.'); // Considere establecer un estado de error para mostrar un mensaje en la interfaz de usuario }); }, [auditId, sections]);Esta implementación mejorará significativamente la robustez de su aplicación y la experiencia del usuario en caso de errores.
Line range hint
1-155: Evaluación general de los cambios en AuditRoot.tsxLos cambios implementados añaden funcionalidad para secciones personalizadas y mejoran la estructura de datos de la auditoría. Sin embargo, hay áreas críticas que requieren atención inmediata:
- El manejo de errores es consistentemente inadecuado en todo el componente.
- La estructura del componente se está volviendo compleja, con un exceso de props pasadas a AuditSidebar.
Para mejorar la calidad y mantenibilidad del código:
- Implemente un manejo de errores robusto en todas las operaciones asíncronas.
- Considere refactorizar utilizando el Context API de React para reducir el prop drilling.
- Evalúe la posibilidad de dividir AuditRoot en componentes más pequeños y manejables.
Estas mejoras son cruciales para garantizar la escalabilidad y robustez de la aplicación a largo plazo.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
- frontend/src/components/navbar/AuditSidebar.tsx (4 hunks)
- frontend/src/routes/audits/edit/AuditRoot.tsx (4 hunks)
- frontend/src/services/audits.ts (4 hunks)
🧰 Additional context used
🔇 Additional comments (5)
frontend/src/components/navbar/AuditSidebar.tsx (2)
61-64: Aprobado: Nuevas propiedades añadidas correctamenteLas nuevas propiedades añadidas a
AuditSidebarPropsson apropiadas para la funcionalidad de secciones personalizadas. Los tipos están bien definidos y son coherentes con su uso previsto.
338-346: Aprobado: Implementación correcta del botón de alternanciaLa implementación del botón de alternancia para la lista de secciones personalizadas es correcta. El botón se renderiza condicionalmente cuando la barra lateral no está colapsada y maneja adecuadamente la visibilidad de la lista.
frontend/src/services/audits.ts (3)
127-127: Cambio aprobado: Uso deAuditSectionenAuditByIdLa modificación del campo
sectionspara utilizar el nuevo tipoAuditSection[]es una mejora significativa. Este cambio proporciona una estructura más clara y seguridad de tipos para las secciones de una auditoría, lo que facilitará el manejo de datos y reducirá errores potenciales en el código que utiliza esta interfaz.
163-177: Aprobación: Estructura bien definida paraSectionCustomFieldLa definición del tipo
SectionCustomFieldes exhaustiva y bien estructurada. Incluye propiedades esenciales como descripción, tipo de campo, etiqueta y opciones, lo que permite una gran flexibilidad en la definición de campos personalizados. La inclusión de opciones localizadas es particularmente valiosa para la internacionalización.Esta estructura facilitará la implementación de campos personalizados dinámicos y flexibles en las secciones de auditoría, mejorando la adaptabilidad del sistema a diferentes requisitos de auditoría.
457-478: Aprobación: Implementación correcta degetAuditSectionByIdLa función
getAuditSectionByIdestá bien implementada y sigue el patrón establecido para las llamadas a la API en este archivo. Puntos destacables:
- Manejo adecuado de errores.
- Uso correcto de la estructura del endpoint.
- Tipado correcto del valor de retorno.
Esta implementación facilitará la obtención de secciones de auditoría específicas de manera consistente con el resto del código.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- frontend/src/i18n/en-US/index.ts (2 hunks)
- frontend/src/routes/audits/edit/sections/sections.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- frontend/src/routes/audits/edit/sections/sections.tsx
🧰 Additional context used
🔇 Additional comments (2)
frontend/src/i18n/en-US/index.ts (2)
163-164: ¡Bien hecho! La nueva entrada de mensaje es correcta.La nueva entrada para el mensaje de éxito al guardar secciones personalizadas de auditoría está correctamente implementada y sigue las convenciones del archivo.
204-204: La nueva entrada de error es adecuada.La entrada para el mensaje de error al fallar el guardado de secciones personalizadas de auditoría está correctamente implementada y sigue las convenciones del archivo.
| auditCustomSectionsSaveSuccess: | ||
| 'The custom sections have been saved successfully', |
There was a problem hiding this comment.
💡 Codebase verification
Asegúrate de agregar las nuevas entradas a otros archivos de idioma
Las nuevas entradas para mensajes de éxito y error al guardar secciones personalizadas de auditoría no se encuentran en los siguientes archivos de idioma:
frontend/src/i18n/de-DE/index.tsfrontend/src/i18n/fr-FR/index.tsfrontend/src/i18n/index.tsfrontend/src/i18n/zh-CN/index.ts
🔗 Analysis chain
Asegúrate de agregar estas entradas a otros archivos de idioma.
Las nuevas entradas para mensajes de éxito y error al guardar secciones personalizadas de auditoría están correctamente implementadas en el archivo de inglés (EE. UU.). Sin embargo, es crucial que estas mismas entradas se agreguen a los archivos de traducción para otros idiomas soportados por la aplicación para mantener la consistencia en la internacionalización.
Also applies to: 204-204
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Descripción: Verificar si las nuevas entradas existen en otros archivos de idioma.
# Buscar archivos de idioma similares
language_files=$(fd --type f --glob 'index.ts' --exclude 'en-US')
# Verificar la presencia de las nuevas entradas en cada archivo de idioma
for file in $language_files; do
echo "Verificando $file:"
grep -n 'auditCustomSectionsSaveSuccess' "$file" || echo "- Falta 'auditCustomSectionsSaveSuccess'"
grep -n 'errorSavingAuditCustomSections' "$file" || echo "- Falta 'errorSavingAuditCustomSections'"
echo ""
done
Length of output: 2103
4 participants
Descripción
Se agregan vistas para la edición de customSections en audits.
Motivación y Contexto
Permite la modificación específica para cada audit de los customSections (asociados a uno o varios customField)
¿Cómo ha sido probado?
npm run build
A través de la misma vista, editando cada campo.
El flujo para agregar un Custom Section al Audit es:
creas customSection -> creas customField con la section, con Audit Section como Select View -> agregar la section a un auditType -> crear el audit con ese auditType
Capturas de pantalla (si es apropiado):
Tipos de cambios
Lista de verificación:
Summary by CodeRabbit
Resumen por CodeRabbit
Nuevas Funcionalidades
Mejoras en la Interfaz de Usuario
Actualizaciones en la Documentación