David c863cc6d96 feat: add unpublished share component and publication operation summary

- Introduced `UnpublishedShare` component for displaying empty state with actions for assigning and viewing history.
- Added `PublicationOperationSummary` component to summarize publication context and actions based on the current state.
- Implemented `CompanyNetworkShareDetail` to manage and display network share details for companies.
- Created `NetworkShareResourceTitle` for collapsible display of resource names with accessibility features.
- Developed `ResourceDetailActions` for managing resource actions like edit, activate/deactivate, and delete.
- Added `ResourceRevisionHistory` to display the history of resource revisions with detailed information.
- Implemented a comprehensive audit script for network share detail UI, including accessibility checks and error handling.

2026-10-26 18:45:30 +01:00

30 KiB

Raw Blame History

Ficha de carpeta compartida

Los apartados iniciales documentan la iteración v1. La iteración v2 recoge el refinamiento posterior y actualiza sus resultados y límites.

Auditoría y adaptación del mockup

La tarea principal es reconocer y gestionar el activo que publica una carpeta SMB. La ficha existente usa ResourceSelectionPanel y ResourceDetailDialog; no existe una página independiente que justifique otro layout global. Se conserva este patrón y se añade una extensión específica de detalle, compuesta desde Companies. El resto de plantillas continúa utilizando su detalle genérico.

Antes del cambio, las características y revisiones del recurso precedían a una tabla de publicaciones. La relación principal quedaba relegada y el historial exigía desplegar otra tabla. El editor no mostraba el recurso y publicador actual al trasladar o cerrar.

Assets es propietario de las publicaciones. Se reutilizan sus consultas tipadas, resúmenes, selector remoto, comandos publish / transfer / end, periodos UUID, cursores e invalidaciones. Resources conserva la ficha y su dirección. La relación admite cero o un publicador vigente por recurso y varios periodos anteriores.

La estructura del mockup se adapta a Inter, tokens semánticos, iconos Tabler y acciones primarias rojas. Publicación a ancho completo; datos e historial en dos columnas cuando el contenedor alcanza 900 px; navegación contextual debajo. En el panel lateral y en móvil se apilan en el mismo orden. No se introduce una paleta alternativa ni vendor.

Límites de los datos reales

Los resúmenes exponen nombre, plantilla y estado del activo. No incluyen icono por plantilla ni sistema operativo: se usa un icono genérico de activo, sin inventar roles.
Los campos de la ficha proceden de su especificación real: UNC, servidor y descripción, además de campos personalizados como Ruta de acceso si ya existen. No se añade un campo local inexistente a todas las instalaciones ni se alteran valores.
No hay un contrato que certifique la correspondencia entre host UNC y activo. Se indica «Correspondencia no verificada», sin diagnosticar errores por comparar nombres.
Los actores del historial llegan como UUID, no como nombres de usuario. Se presentan identificados como UUID. Cada alta/traslado y cierre muestra su fecha real.
Se conserva el orden de registro ascendente y la paginación del contrato; no se invierte solo una página para aparentar un orden descendente global. El activo anterior se muestra cuando su periodo y resumen están disponibles en esa página.
Hay navegación real a necesidades, concesiones, permisos, cuentas y grupos filtrados por recurso. No hay consulta directa de puestos ni relación específica con accesos remotos: se omiten los contadores y filas ficticias del mockup. Registrar una publicación no configura SMB ni determina disponibilidad o permisos efectivos.
La política vigente permite las operaciones a operadores autenticados; no hay un rol independiente de solo lectura para esta relación. La composición respeta la capacidad de gestión recibida, oculta las acciones en solo lectura y ante denegaciones o datos obsoletos. No se introduce otro modelo de permisos.

Composición y responsabilidades

ResourcesPage.detailContent recibe recurso, datos actuales y capacidad de gestión. CompanyNetworkShareDetail compone NetworkShareResourceDetail, pasando los datos y la navegación mediante props y children. Assets conserva la coordinación de publicaciones, la tarjeta del publicador, el historial y el editor contextual. No se añade dependencia Resources → Assets, endpoints, migraciones ni modificaciones del dominio.

La ausencia de publicación vigente y una publicación finalizada tienen presentaciones distintas cuando el historial permite distinguirlas. La carga mantiene geometría mediante skeleton; el error ofrece reintento y las denegaciones retiran los datos de caché. Trasladar y finalizar capturan el UUID del periodo iniciado; un conflicto no cambia el comando por otro silenciosamente. El cierre explica que solo finaliza la asociación documental.

Comparación con la referencia

Referencia	Adaptación implementada
Cabecera con carpeta, nombre, subtítulo y acciones	Cabecera y toolbar de la ficha existente, con menú de ciclo de vida y edición
Publicación dominante a ancho completo	Tarjeta con publicador real, plantilla, estado, UNC copiable y acciones
Botones azules e iconos ilustrados	Acciones rojas y SVG Tabler del sistema de Metis
Datos e historial en paralelo	Dos columnas desde 900 px del contenedor; una columna en panel y móvil
Indicador de coincidencia del servidor	Estado neutral: no existe verificación técnica de aliases/DFS/clústeres
Timeline con nombres y fechas	Fechas y UUID de responsables reales, nombres de activos obtenidos por resúmenes autorizados
Contadores de puestos y accesos remotos	Se omiten; se ofrece la navegación contextual respaldada por AccessWorkspace
Estado vacío mostrado junto al ejemplo activo	Estado alternativo real, no una tarjeta de demostración simultánea

Skills y revisión

frontend-design guía la jerarquía y la comparación con el mockup, subordinada a DESIGN.md. ux-design-review estructura la revisión de usabilidad, textos, estados y accesibilidad en uso; sus auditores especializados y su política externa no están instalados, por lo que no se atribuyen auditorías automáticas. Faltan, entre otros, ux-heuristics-audit, ux-microcopy-audit, ux-accessibility-audit y ux-mobile-responsiveness-audit. shadcn guía composición Base UI y reutilización. vercel-composition-patterns respalda la extensión por composición y la separación de las interacciones modales. vercel-react-best-practices mantiene los datos remotos en TanStack Query y el avance de acciones en callbacks, sin efectos derivados. rdx-solid guía ownership, contratos e implementación proporcional. No se añaden dependencias.

La revisión visual detectó y corrigió recorte del grupo de acciones a 320 px y falta de espacio para el cuerpo con títulos largos al ampliar el texto al 400 %. Las medidas se aplican a las primitivas propias compartidas, sin modificar vendor ni el shell global.

Verificación final — 26 de octubre de 2026

La ejecución final de python3 scripts/visual-audit.py --network-share-detail --check completa 28 comprobaciones, genera 14 capturas y ejecuta 31/31 pruebas MariaDB de publicaciones, SMB y accesos en la misma instalación desechable. El proceso retira sus servicios y su sesión al terminar. Datos utilizados: 15 compañías; en la principal, 50 personas, 51 activos, 50 perfiles, 50 puestos y 67 recursos. El recurso auditado llega a 21 periodos históricos antes de la última publicación.

Control ejecutado	Resultado
Asignación, traslado y cierre reales	Correctos; se conservan datos y revisiones del recurso salvo cambios explícitos de estado de la prueba
Cancelación y foco	Sin escritura; vuelve al botón Cambiar activo
Conflicto concurrente	Se cierra el periodo en el servidor mientras el diálogo conserva su UUID; el traslado devuelve conflicto real y permite revisar
Historial y navegación	Eventos persistidos, dos páginas reales, navegación al activo y foco al consultar historial
Carga, vacío, finalizada, errores y denegación	Estados diferenciados; reintento de ambas consultas; no se muestran datos de publicación de caché tras 403
Recurso inactivo	Conserva la publicación y permite finalizarla; no ofrece un traslado
Solo lectura	Prueba de render es/en con capacidad de gestión deshabilitada; conserva datos y enlaces, sin acciones de escritura
Responsive	320, 390, 768, 1024 y 1440 px, sin desbordamientos en texto y acciones de la ficha
Tema y contraste	Claro y oscuro; 60 nodos de texto medidos por tema. Mínimos 4,53:1 y 4,55:1, respectivamente
Texto ampliado	200 % y 400 %; cuerpo desplazable con al menos dos líneas de altura. No equivale a zoom real del navegador
Movimiento reducido	Skeleton sin animación bajo `prefers-reduced-motion: reduce`
Teclado	Apertura de asignación, menú, Escape y retorno de foco; copia UNC con anuncio de éxito
Typechecks dirigidos	Resources, Assets, Companies, RDX UI y web correctos
Regresiones nativas con `--test-isolation=none`	Resources 124/124, Assets 153/153, RDX UI 83/83; Companies 310/312
Pruebas específicas de ficha/publicación	9/9
`python3 scripts/visual-audit.test.py`	10/10
Biome y ESLint dirigidos a los archivos del cambio	Correctos; sintaxis Python y `git diff --check`, correctos
`pnpm build`	Correcto; aviso de tamaño de chunks existente
`pnpm typecheck` global	Bloqueado por TS2375 en `packages/shadcn-ui/src/components/calendar.tsx:165`; vendor intacto
`pnpm test` global	Dos fallos conocidos de textos de personas en `companies-page.test.tsx` (expectativas «Personas (1)» y texto de acceso a Metis)
`pnpm lint` / `pnpm check` globales	15 y 173 errores, respectivamente, en archivos ajenos al cambio; ejemplos de skills y código de fotos de personas, entre otros

Las mediciones de contraste excluyen controles deshabilitados y elementos ocultos. No certifican WCAG de toda la aplicación ni contraste no textual. Se corrigieron dos acciones en tema oscuro utilizando text-background sobre el primario y text-foreground en la acción sensible, sin cambiar tokens ni vendor. El hover conserva el fondo primario y usa sombra para no reducir el contraste de texto.

Evidencias reales

Directorio local excluido de Git: .artifacts/playwright/authenticated-xmi_nn0a/. share-detail-report.json contiene escenarios, geometría y hashes de las capturas; share-detail-integration.log contiene las 31 pruebas de integración.

Escritorio, 1440 px.
Móvil, 320 px y 390 px.
Datos e historial y navegación inferior.
Tema oscuro.
Carga, vacío, conflicto y confirmación de cierre.

Las capturas se inspeccionaron frente a la estructura del mockup, sin comparación de píxeles: se conserva la jerarquía, con las adaptaciones de tema, modal, datos y cardinalidad indicadas.

Dictamen y pendientes

Implementado dentro del modelo vigente: ficha integrada, relación visible y gestionable, datos, historial real, estados y navegación respaldada por los contratos existentes.

No se incorporan las capacidades que el dominio no proporciona: verificación técnica del servidor, nombres de actores, sistema operativo del publicador, contadores de puestos o accesos remotos y un nuevo rol de solo lectura. La Ruta de acceso se presenta si pertenece a la especificación real del recurso; no se crea un campo ficticio. El zoom real del navegador y una auditoría completa con tecnología asistiva no se han ejecutado. Se mantienen los fallos globales ajenos descritos. No se despliega ni se modifica infraestructura o producción.

Inventario de archivos

Documentación: este informe y componentes de interfaz.

Iteración UI/UX v2 — Refinamiento visual, responsive y accesibilidad

Auditoría previa y alcance

Se releyeron AGENTS.md, DESIGN.md, los patrones de diálogos, estructura web y pruebas, este informe completo y los seis SKILL.md prioritarios. Se contrastaron las fichas de puestos, las APIs instaladas de Button/Collapsible y las capturas v1. Se mantiene la composición y la semántica SMB de la primera iteración.

La línea base se repitió antes de modificar el código v2: .artifacts/playwright/authenticated-qe_17tcw/ contiene 28 comprobaciones de navegador, 14 capturas y 31/31 pruebas MariaDB. Suites: Resources 124/124, Assets 153/153, RDX UI 83/83 y Companies 310/312. Los dos fallos de Companies ya estaban presentes.

Problemas pendientes observados: cabecera de cinco líneas a 320 px, icono/publicador apilados con mucha altura, cuatro acciones con peso parecido, repetición prominente de UNC y UUID como metadato principal del historial. Ya estaban resueltos la relación explícita, sus comandos y estados, el conflicto concurrente, la paginación real, los estados vacíos y la distinción entre actividad del recurso y vigencia de publicación.

frontend-design orientó densidad y jerarquía; ux-design-review, la revisión de estados, navegación y accesibilidad; shadcn, la expansión con Base UI; composición React, las unidades de título y detalle técnico; buenas prácticas React, el uso de TanStack Query y del ResizeObserver solo para medir recorte real; rdx-solid, el alcance local y la preservación de contratos. Los auditores especializados ausentes siguen sin instalarse ni ejecutarse; se hicieron las comprobaciones disponibles con Playwright MCP. No se modifica vendor ni se añaden dependencias.

Matriz de seguimiento

ID	Problema	Cambio aplicado	Prueba y evidencia	Resultado
M01	Densidad móvil y título largo	Nombre visible hasta tres líneas en móvil/dos desde sm; token corporativo `text-base` (14 px) en móvil y `text-lg` (18 px) en escritorio, completo en el árbol accesible y expandible por teclado cuando se recorta; identidad del activo en rejilla compacta	Cinco anchos; expansión con Espacio, contracción con Enter; cierre visible; capturas light-320/light-390; texto 200/400 %	Verificado en navegador; teclado virtual no reproducido
M02	Acciones con peso similar	Asignar/Cambiar como primarias; Ver ficha e Historial discretas, con nombres accesibles completos; Finalizar conserva etiqueta y variante sensible compacta	Capturas móvil/escritorio, confirmación documental, cancelación sin escritura y foco restaurado	Verificado; no se duplican operaciones ni se añade menú
M03	UUID dominante	Activo y responsable conocido primero; UUID de actor, periodo y predecesor disponibles mediante Collapsible accesible	Capturas history-expanded y history-expanded-mobile; apertura por Espacio; relación aria-controls/panel; prueba es/en de responsable no resuelto	Verificado; nombres parciales solo de revisiones ya autorizadas
M04	UNC fragmentada y redundante	Bloque principal completo y seleccionable, oportunidades de salto sin introducir caracteres; atributo secundario compacto; copia por icono con anuncio sin altura adicional	Comparación literal de DOM y portapapeles con UNC larga Unicode; error simulado y recuperación; prueba de segmentos repetidos	Verificado; copia conserva la cadena original
M05	Separación y metadatos	Padding móvil menor, datos compactos, separación uniforme y orden publicación/datos/historial/navegación	Capturas en cinco anchos; dos columnas solo con espacio de contenedor; estados vacío/carga/finalizada/inactivo y solo lectura	Verificado; sin modificación adicional de las primitivas compartidas
M06	Posibles regresiones de contraste	Tokens existentes, primario conserva fondo en hover, contornos de foco opacos locales	Mediciones de texto claro/oscuro y hover; muestras de iconos interactivos y foco; capturas dark y dark-mobile	Verificado en las muestras: texto ≥4,53:1 claro / ≥4,75:1 oscuro; foco ≥4,65:1 / ≥4,75:1; iconos ≥14,52:1
M07	Teclado y feedback	Expansiones accesibles, nombres de iconos, anuncios de asignación/traslado/finalización y copia; error de copia visible	Enter/Espacio/Escape/Tab/Shift+Tab, menú, retorno de foco, error/reintento, conflicto real, movimiento reducido y ampliación de texto	Verificado en Chromium; lector de pantalla, zoom real y teclado virtual pendientes
M08	Riesgo de cambiar dominio o permisos	Presentación y helpers UI; se reutilizan consultas, comandos, periodos e invalidaciones	31/31 MariaDB; 403 sin datos anteriores ni escritura; recurso inactivo, conflicto, 21 periodos con cursor, navegación real	Verificado; sin cambios de backend ni operaciones sobre servidores SMB

Identidad del responsable

El contrato de publicaciones sigue proporcionando UUID. El directorio de usuarios exige privilegios adicionales y no se utiliza. ResourceDTO.history ya contiene pares actorId/actorName autorizados al cargar esta misma ficha. Companies aporta únicamente los nombres que difieren del identificador; Assets recibe un ReadonlyMap opcional. No se lanzan consultas adicionales, no se supone que todos los responsables estén en las revisiones y no se inventan nombres. Sin coincidencia, el UUID continúa accesible en «Detalles técnicos». Los identificadores no sustituyen la identidad de los periodos.

Comparación visual y evidencias

Antes: móvil 320, móvil 390, escritorio y oscuro.

Después: móvil 320, móvil 390, 768, 1024, escritorio, oscuro y oscuro móvil.

Estados adicionales: detalle técnico, detalle técnico móvil, detalle técnico oscuro, traslado, traslado móvil, vacío, carga, conflicto, confirmación, texto 200 % y texto 400 %.

La inspección visual compara la estructura con el mockup original de la conversación: se conservan publicador dominante, UNC, datos e historial; se mantienen los tokens, iconos y colores corporativos y se omiten sus contadores ficticios. A 320 px la acción Cambiar activo aparece en el área visible antes del pie, donde v1 todavía mostraba la continuación de la tarjeta. A 390 px comienza a verse Datos del recurso. En escritorio la tarjeta conserva identidad/UNC en horizontal y permite leer el evento sin UUID expuestos inicialmente. No se afirma una mejora de CLS ni rendimiento.

Resultados de pruebas

La ejecución final python3 scripts/visual-audit.py --network-share-detail --check terminó correctamente: 33 entradas de verificación y 20 capturas. Son 32 comprobaciones de navegador y una entrada de integración con 31/31 pruebas MariaDB. El contador histórico de 28 entradas incluía igualmente la integración; el incremento es de cinco comprobaciones explícitas, sin retirar las regresiones anteriores. Se probaron 320, 390, 768, 1024 y 1440 px, claro/oscuro, hover primario/secundario/sensible, texto 200/400 %, movimiento reducido, título largo y UNC Unicode. No hubo desbordamiento en las medidas de la ficha. Antes de medir cada ancho se esperan fotogramas y animaciones finitas del diálogo, sin pausas arbitrarias.

share-detail-report.json registra escenarios, medidas y hashes de las capturas; share-detail-integration.log, las pruebas SQL. Datos exclusivamente sintéticos en metis_desk_test: 15 compañías; 50 personas, 51 activos, 50 perfiles, 50 puestos y 67 recursos en la principal; 21 periodos antes de la publicación final. El usuario de navegador es ordinario. La instalación y la sesión se retiran al terminar.

Las ocho mediciones de texto (dos temas y tres variantes hover por tema) comprobaron 60 nodos cada una, con mínimos 4,53:1 claro y 4,75:1 oscuro. El contorno de foco medido es sólido, de 2 px: 4,65:1 y 4,75:1. Los tres iconos interactivos muestreados por tema superan 14,52:1. Las muestras se comparan con 4,5:1 para texto normal, 3:1 para texto grande y 3:1 para las muestras pertinentes no textuales.

Verificación ejecutada	Resultado v2
Resources, suite completa con `--test-isolation=none`	125/125; +1 prueba de conservación literal de UNC
Assets, suite completa con `--test-isolation=none`	154/154; +1 prueba de nombres autorizados y UUID no resueltos
RDX UI, suite completa	83/83
Companies, suite completa	310/312; los mismos dos fallos de textos de la línea base
Pruebas dirigidas Resources + publicación	23/23, incluidas 10/10 de publicación
TypeScript dirigido	Resources, Assets, Companies, RDX UI y apps/web correctos
Biome dirigido	34 archivos correctos
ESLint dirigido	Sin errores; los JSON se verifican con Biome
Pruebas del lanzador de auditoría	`python3 scripts/visual-audit.test.py`: 10/10
Sintaxis Python y `git diff --check`	Correctos
`pnpm build`	Correcto; mantiene el aviso de tamaño de chunks
`pnpm typecheck` global	TS2375 preexistente en calendar.tsx:165 del vendor
`pnpm test` global	Fallan las dos expectativas preexistentes de Companies
`pnpm lint` / `pnpm check` globales	15/173 errores ajenos, los mismos que en v1

Los logs técnicos dirigidos se guardaron en /tmp/metis-share-v2-final-* y los globales en /tmp/metis-share-v2-global-*; son evidencia local temporal. El directorio de capturas está excluido de Git y no contiene sesión ni credenciales tras la limpieza.

Las primeras ejecuciones v2 detectaron tres errores del guion de auditoría: localizar el botón por su etiqueta anterior después de expandirlo, seleccionar dos anuncios como si fueran uno y referenciar una variable Python desde la evaluación del navegador. Se corrigieron y se repitió la instalación aislada. La medición de foco detectó además que outline-none de la primitiva anulaba el estilo del contorno: se declaró outline-solid localmente y se volvió a verificar. La etiqueta visible «Ver ficha» queda incluida literalmente en el nombre accesible «Ver ficha del activo». No se silencian como resultados satisfactorios. Las pruebas nuevas protegen conservación de caracteres y ausencia de nombres inventados. No se detectó una regresión funcional SMB en el recorrido final.

Archivos de esta iteración

Resources: nuevo network-share-resource-title.tsx; consumidores resource-detail-dialog.tsx y resource-selection-panel.tsx; network-share-address.tsx, su reinicio por dirección en resource-detail.tsx y resources.test.tsx.
Assets: published-share-asset.tsx, resource-publication-card.tsx, network-share-resource-detail.tsx, publication-history.tsx; nuevo publication-event-details.tsx; tipo derivado en publication-events.ts, anuncios en use-resource-publication.ts y prueba en network-share-ui.test.tsx.
Companies: company-network-share-detail.tsx, aportación de nombres ya autorizados.
Traducciones es/en de Assets y Resources; alias Tabler en packages/rdx-ui/src/lib/icons.ts.
Auditoría reproducible en scripts/network-share-detail-ui-audit.py; este informe y docs/componentes-de-interfaz.md.

Las modificaciones anteriores de DetailPanel y FormDialog pertenecen a v1: v2 no cambia su implementación ni contratos. Tampoco modifica backend, schemas, endpoints, migraciones, revisiones, transacciones, permisos ni estrategia de invalidación.

Límites y dictamen v2

No se ejecutó un lector de pantalla real, zoom del navegador ni teclado virtual. La ampliación CSS del texto al 200/400 % no sustituye esos escenarios. Las medidas muestrales de contraste y la inspección de atributos accesibles no certifican WCAG de toda la aplicación. Los separadores decorativos y controles deshabilitados se distinguen de controles activos; no se exige a los primeros el contraste de un control interactivo. La copia se probó en Chromium del contenedor mediante permisos de portapapeles limitados al origen desechable. No hay operaciones reales sobre SMB ni producción.

Implementada y verificada en el alcance solicitado. Se mejora la densidad móvil, la consulta de nombres y rutas, la jerarquía de acciones y la lectura del historial, con trazabilidad técnica accesible. Se corrige el contorno de foco y se conserva el contraste de texto. Las pruebas no detectan regresiones SMB. Permanecen los fallos globales preexistentes y las comprobaciones con tecnología asistiva indicadas; no se presentan como aprobadas.

30 KiB Raw Blame History