metis-desk/docs/inventario-de-modales.md
David a0f02ced6e Refactor form dialogs and UI components for improved consistency and usability
- Updated DeleteBrandDialog and DeleteCatalogDefinitionDialog to use FormBody and FormActions for better structure.
- Replaced DialogFooter with FormActions in various dialogs to standardize button layouts.
- Introduced FormSectionTitle in multiple components for consistent section headings.
- Adjusted grid layouts to use responsive design with @min-[560px] for better adaptability.
- Created SoftwareResourceCreateDialog and SoftwareInstallationEditorDialog for better separation of concerns in software installation management.
- Enhanced FormActions to support cancelDisabled prop for better control over button states.
- Refined FormSectionTitle to allow for additional HTML elements like "legend" and "span".
- Added EntityTableColumnsDialog for managing table column visibility in a more user-friendly manner.
2026-10-15 16:14:26 +02:00

15 KiB

Inventario de interacciones modales

Revisión de código de 2026-10-15 según el patrón de diseño de diálogos. Se buscaron constructores FormDialog, ConfirmDeleteDialog y FieldPickerDialog, además de primitivas Dialog, AlertDialog, Sheet, Drawer, portales y diálogos manuales. Se revisaron los formularios, controles compartidos y contenido de consulta que reciben estos constructores.

El código propio contiene 81 componentes modales en módulos y 3 constructores compartidos en @repo/rdx-ui. El recuento identifica componentes, no cada variante de alta, edición, copia o estado. Las dos variantes de CatalogFieldPickerDialog son adaptadores del mismo selector genérico. El código vendor de packages/shadcn-ui queda fuera de esta revisión y no se modifica.

Resultado de la revisión

  • Los diálogos utilizan la estructura común de cabecera, cuerpo desplazable y pie. Las confirmaciones de marcas y catálogo se han adaptado al mismo pie fijo, conservando el bloqueo durante el envío y la presentación de errores.
  • Los formularios y sus subcontroles calculan las columnas según su contenedor. Los títulos de grupos de consulta, permisos y secciones comparten el estilo de Datos de la plantilla.
  • Las secciones de plantillas conservan dos columnas cuando hay espacio, igual altura por fila, plegado, campos compactos, ordenación accesible e incorporación de campos por grupo.
  • AssetPickerDialog y los dos CatalogFieldPickerDialog mantienen altura estable, selección compacta al principio, selección desde la fila y confirmación provisional. Los diálogos de configuración de columnas son ajustes, no selectores de entidades PickerList.
  • Se extrajeron los diálogos de edición de instalaciones de software, alta de su recurso y configuración de columnas. Los padres mantienen apertura y datos, sin definir el modal.
  • Las variantes de selección de compañía del dashboard colocan Continuar en el pie común. Los formularios sencillos, historiales y ayudas mantienen su tamaño según contenido; las fechas de revisión y nombres de registros conservan su tipografía de datos, no de grupos.
  • Se conservan los pasos de alta de recursos ya existentes: no se ha añadido ningún asistente para resolver únicamente espacio. Tampoco se añaden cuadrículas a formularios sencillos.

Componentes revisados

Las rutas siguen la estructura por entidades y operaciones. La columna Composición indica el constructor utilizado; las variantes heredan sus reglas comunes.

assets (23)

Componente Composición
EndRelationshipDialog FormDialog
RelationshipEditorDialog FormDialog
WorkstationAssetCreateDialog FormDialog
AssetDetailDialog FormDialog
AssetPickerDialog FormDialog · altura estable
AssetEditorDialog FormDialog
DeleteAssetDialog ConfirmDeleteDialog
DeleteBrandDialog FormDialog
BrandEditorDialog FormDialog
DeleteCatalogDefinitionDialog FormDialog
CatalogDefinitionDialog FormDialog
CatalogEditorDialog FormDialog
CatalogFieldCreateDialog FormDialog
CatalogFieldPickerDialog FieldPickerDialog · altura estable
CatalogRelationCreateDialog FormDialog
CatalogTemplateCreateDialog FormDialog
DeleteRecordDialog ConfirmDeleteDialog
SupportHistoryDialog FormDialog
SupportConnectionEditorDialog FormDialog
SupportResourceCreateDialog FormDialog
WorkstationHistoryDialog FormDialog
WorkstationEditorDialog FormDialog
WorkstationLifecycleDialog ConfirmDeleteDialog

companies (49)

Componente Composición
AccessQuickEditor FormDialog
QuickCreateDialog FormDialog
AccessHelpDialog FormDialog
AccessHistory FormDialog
AccessEditorDialog FormDialog
ApplicationQuickEditor FormDialog
ApplicationHistoryDialog FormDialog
ApplicationConfigurationEditorDialog FormDialog
AssignmentHistoryDialog FormDialog
AssignmentEditorDialog FormDialog
CertificateQuickEditor FormDialog
CertificateHistoryDialog FormDialog
CertificateConfigurationEditorDialog FormDialog
InventoryQuickCreateDialog FormDialog
CompanyEditorDialog FormDialog
DashboardQuickCreate FormDialog
DashboardDetailsDialog FormDialog
DepartmentEditorDialog FormDialog
FolderQuickEditor FormDialog
FolderMappingHistoryDialog FormDialog
FolderMappingEditorDialog FormDialog
MailQuickEditor FormDialog
MailConfigurationHistoryDialog FormDialog
MailConfigurationEditorDialog FormDialog
MailboxUseEditorDialog FormDialog
MailboxCreateDialog FormDialog
PersonEditorDialog FormDialog
PrinterProfileCreateDialog FormDialog
PrinterHistoryDialog FormDialog
PrinterConfigurationEditorDialog FormDialog
ProcessTemplateEditorDialog FormDialog
ProcessQuickCreateDialog FormDialog
ProcessStartDialog FormDialog
ProcessEditDialog FormDialog
RemoteQuickEditor FormDialog
RemoteConnectionHistoryDialog FormDialog
RemoteConnectionEditorDialog FormDialog
ConfigurationQuickEditor FormDialog
DeleteRecordDialog ConfirmDeleteDialog
SiteEditorDialog FormDialog
SoftwareResourceCreateDialog FormDialog
SoftwareHistoryDialog FormDialog
SoftwareInstallationEditorDialog FormDialog
TeleworkAuthorizationHistoryDialog FormDialog
TeleworkAuthorizationEditorDialog FormDialog
WorkProfileHistoryDialog FormDialog
WorkProfileEditorDialog FormDialog
WorkProfileLifecycleDialog ConfirmDeleteDialog
WorkspaceSettingsDialog FormDialog

identity (2)

Componente Composición
AccountPasswordDialog FormDialog
UserEditorDialog FormDialog

resources (7)

Componente Composición
CatalogDefinitionDialog FormDialog
CatalogEditorDialog FormDialog
CatalogFieldCreateDialog FormDialog
CatalogFieldPickerDialog FieldPickerDialog · altura estable
CatalogTemplateCreateDialog FormDialog
ResourceDetailDialog FormDialog
ResourceEditorDialog FormDialog

rdx-ui (3)

Componente Composición
ConfirmDeleteDialog FormDialog
EntityTableColumnsDialog FormDialog
FieldPickerDialog FormDialog · altura estable

Validación y límites

La revisión cubre código y render estático mediante las pruebas existentes. Las comprobaciones interactivas de apertura, Escape, restauración de foco, arrastre, envío, errores y altura visual en español/inglés y anchos estrecho/amplio quedan pendientes de una sesión de navegador. No se dispone de una herramienta de navegador en esta sesión; los análisis de código, tipos, formato y pruebas no sustituyen esa revisión visual.

Resultados de los comandos ejecutados:

Comprobación Resultado
Typecheck dirigido a rdx-ui, assets, resources, companies e identity Correcto
Biome y ESLint dirigidos a los archivos de código modificados Correctos
pnpm build Correcto; conserva el aviso de chunks grandes
pnpm test UI, activos, recursos, identidad, core y DDD correctos; empresas mantiene el fallo previo de companies-page.test.tsx
pnpm typecheck Mantiene TS2375 previo en packages/shadcn-ui/src/components/calendar.tsx:165
pnpm lint / pnpm check Mantienen respectivamente 14 y 155 errores previos ajenos al cambio
git diff --check y enlaces locales de la documentación Correctos

El fallo de empresas se reprodujo ejecutando directamente el fichero: una prueba de persona espera el texto «Esta persona no tiene acceso a Metis Desk», ausente en el render actual. No se ha modificado esa prueba ni el contenido de la ayuda para ocultar el fallo. Los módulos de tickets, intervenciones y sus plantillas permanecen archivados.