344 lines
12 KiB
Markdown
344 lines
12 KiB
Markdown
# Sprint 8 — Etapa 5: client_editor puede importar BPMN
|
||
|
||
> **Tipo:** DB + UI — habilitar flujo de importación para rol cliente editor
|
||
> **Rama:** main
|
||
> **Estimación:** 1.5 horas
|
||
> **Dependencias:** Etapas 1–4 completadas ✅
|
||
> (tabla `areas` y columna `org_id` en processes ya existen, `isClientRole` ya implementado en workspace)
|
||
|
||
---
|
||
|
||
## Objetivo
|
||
|
||
Habilitar que un usuario con rol `client_editor` pueda importar archivos BPMN propios. Actualmente la `ImportPage` redirige a todos los roles cliente a `/`. Con esta etapa, `client_editor` pasa a ser un ciudadano de primera clase del flujo de importación: puede subir un BPMN, el proceso se asigna automáticamente a su org, y puede trabajar desde el workspace como lo hace InQuality.
|
||
|
||
`client_viewer` **no** obtiene acceso de importación — eso no cambia.
|
||
|
||
---
|
||
|
||
## Contexto del código actual
|
||
|
||
Leer estos archivos antes de modificar:
|
||
|
||
- `src/features/import/ImportPage.tsx` — tiene dos guards que bloquean a client_editor:
|
||
1. `useEffect` con `allowed = ['platform_admin', 'member']` → redirige a `/`
|
||
2. `if (isClientRole) return null` antes del return final → nunca llega al JSX
|
||
Además, el proceso se crea con `orgId: null`, lo que rompe las RLS.
|
||
- `src/features/library/LibraryPage.tsx` — el botón "Importar BPMN" del header está envuelto en `{!isClientRole && ...}` (líneas ~841-860). El empty state de la vista cliente muestra "Contactá a tu administrador" sin botón de importar para nadie.
|
||
- `supabase/migrations/015_client_roles_and_rls.sql` — la política `insert_processes` permite solo `platform_admin` y `member`. La línea de comentario lo dice explícitamente: `-- client_editor y client_viewer NO pueden crear procesos nuevos`.
|
||
|
||
---
|
||
|
||
## Parte 1: Migration 018
|
||
|
||
Crear `supabase/migrations/018_client_editor_insert.sql`.
|
||
|
||
El único cambio de esta migración: extender la política `insert_processes` para incluir a `client_editor` cuando inserta en su propia org.
|
||
|
||
```sql
|
||
-- Permite que client_editor inserte procesos en su propia org
|
||
-- Los demás roles mantienen sus permisos actuales
|
||
|
||
DROP POLICY IF EXISTS "insert_processes" ON public.processes;
|
||
|
||
CREATE POLICY "insert_processes" ON public.processes
|
||
FOR INSERT WITH CHECK (
|
||
public.is_platform_admin()
|
||
OR public.current_platform_role() = 'member'
|
||
OR (
|
||
public.current_platform_role() = 'client_editor'
|
||
AND org_id = public.current_org()
|
||
)
|
||
-- client_viewer y guest siguen sin poder crear procesos
|
||
);
|
||
```
|
||
|
||
**Verificar que las políticas de actividades y gateways ya permiten a client_editor:**
|
||
Buscar en `015_client_roles_and_rls.sql`:
|
||
- `activities_insert`: usa `NOT IN ('client_viewer', 'guest')` → client_editor puede ✅
|
||
- `gateways_write`: usa `NOT IN ('client_viewer', 'guest')` → client_editor puede ✅
|
||
|
||
Si alguna de esas dos NO incluye a client_editor, corregir en esta misma migración. Verificar antes de cerrar el archivo.
|
||
|
||
### Aplicar la migración
|
||
|
||
Aplicar en Supabase y verificar:
|
||
|
||
```sql
|
||
-- Verificar que la nueva política existe
|
||
SELECT policyname, cmd, qual
|
||
FROM pg_policies
|
||
WHERE schemaname = 'public' AND tablename = 'processes';
|
||
-- Esperado: ver "insert_processes" con la nueva definición que incluye client_editor
|
||
```
|
||
|
||
---
|
||
|
||
## Parte 2: `ImportPage.tsx`
|
||
|
||
### 2A — Eliminar los dos guards que bloquean a client_editor
|
||
|
||
**Guard 1 — cambiar la lista de roles permitidos en el `useEffect`:**
|
||
|
||
```typescript
|
||
// Antes:
|
||
const allowed = ['platform_admin', 'member']
|
||
if (!allowed.includes(user.platformRole)) {
|
||
void navigate({ to: '/' })
|
||
}
|
||
|
||
// Después:
|
||
const allowed = ['platform_admin', 'member', 'client_editor']
|
||
if (!allowed.includes(user.platformRole)) {
|
||
void navigate({ to: '/' })
|
||
}
|
||
```
|
||
|
||
**Guard 2 — reemplazar el bloqueo total por uno solo para client_viewer:**
|
||
|
||
```typescript
|
||
// Antes (bloquea a todos los client roles):
|
||
const isClientRole = user?.platformRole === 'client_editor' || user?.platformRole === 'client_viewer'
|
||
if (isClientRole) return null
|
||
|
||
// Después (solo bloquea client_viewer):
|
||
if (user?.platformRole === 'client_viewer') return null
|
||
```
|
||
|
||
### 2B — Asignar `orgId` del usuario en el proceso creado
|
||
|
||
Al construir el objeto `process` dentro de `processFile`, el campo `orgId` actualmente es `null`. Para que la RLS de `insert_processes` valide `org_id = current_org()`, el proceso insertado debe tener el `org_id` del usuario.
|
||
|
||
```typescript
|
||
// Antes:
|
||
const process: Process = {
|
||
// ...
|
||
orgId: null,
|
||
// ...
|
||
}
|
||
|
||
// Después:
|
||
const process: Process = {
|
||
// ...
|
||
orgId: user!.orgId, // ← org_id del usuario autenticado; null solo si no tiene org (no debería pasar para client_editor)
|
||
// ...
|
||
}
|
||
```
|
||
|
||
Verificar que `user.orgId` está disponible en el tipo `User` del AuthContext (debería estar — se pobló en Sprint 7).
|
||
|
||
### 2C — Ocultar los procesos de ejemplo para client_editor
|
||
|
||
Los "procesos de ejemplo" (`SAMPLE_PROCESSES`) son demostraciones internas de InQuality. Un client_editor no debería importar datos de prueba de InQuality en su propio espacio.
|
||
|
||
En el JSX, la sección de ejemplos está bajo el drop zone. Envolverla en una condición:
|
||
|
||
```tsx
|
||
// Antes: siempre visible
|
||
<div className="mt-8 w-full max-w-lg">
|
||
<p ...>O cargá un proceso de ejemplo con un click</p>
|
||
<div className="grid grid-cols-3 gap-3">
|
||
{SAMPLE_PROCESSES.map(...)}
|
||
</div>
|
||
</div>
|
||
|
||
// Después: solo visible para InQuality (platform_admin y member)
|
||
{user?.platformRole !== 'client_editor' && (
|
||
<div className="mt-8 w-full max-w-lg">
|
||
<p ...>O cargá un proceso de ejemplo con un click</p>
|
||
<div className="grid grid-cols-3 gap-3">
|
||
{SAMPLE_PROCESSES.map(...)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
```
|
||
|
||
### 2D — Corregir texto de marca en ImportPage
|
||
|
||
El header tiene texto desactualizado que viola las reglas de marca del producto:
|
||
|
||
```tsx
|
||
// Antes (incorrecto — nombre viejo del producto):
|
||
<div className="inline-flex items-center gap-2 ...">
|
||
<FlaskConical className="h-3.5 w-3.5" />
|
||
Process Cost Platform · MVP Fase 0
|
||
</div>
|
||
|
||
// Después:
|
||
<div className="inline-flex items-center gap-2 ...">
|
||
<FlaskConical className="h-3.5 w-3.5" />
|
||
InQ ROI
|
||
</div>
|
||
```
|
||
|
||
El tagline del final de la página también está desactualizado:
|
||
|
||
```tsx
|
||
// Antes:
|
||
<p className="mt-8 text-xs text-slate-300">
|
||
100% en tu navegador · Sin backend · Sin registro · Datos guardados localmente
|
||
</p>
|
||
|
||
// Después: eliminar este párrafo (el producto ya tiene backend y registro)
|
||
```
|
||
|
||
---
|
||
|
||
## Parte 3: `LibraryPage.tsx`
|
||
|
||
### 3A — Botón "Importar BPMN" en el header visible para client_editor
|
||
|
||
El botón en el header de LibraryPage (líneas ~841-860) está condicionado con `!isClientRole`, lo que lo oculta para todos los roles cliente. Cambiar para mostrarlo a `client_editor`:
|
||
|
||
```tsx
|
||
// Antes:
|
||
{!isClientRole && (
|
||
<button
|
||
onClick={handleImport}
|
||
className="..."
|
||
style={{ background: '#F59845' }}
|
||
>
|
||
<Upload className="h-4 w-4" />
|
||
Importar BPMN
|
||
</button>
|
||
)}
|
||
|
||
// Después:
|
||
{user?.platformRole !== 'client_viewer' && (
|
||
<button
|
||
onClick={handleImport}
|
||
className="..."
|
||
style={{ background: '#F59845' }}
|
||
>
|
||
<Upload className="h-4 w-4" />
|
||
Importar BPMN
|
||
</button>
|
||
)}
|
||
```
|
||
|
||
### 3B — Empty state diferenciado para client_editor vs client_viewer
|
||
|
||
En `HomeView`, el empty state para roles cliente (cuando `groups.length === 0 && processes.length === 0`) actualmente muestra "Contactá a tu administrador" para todos. Diferenciarlo:
|
||
|
||
```tsx
|
||
// Antes (igual para todos los client roles):
|
||
if (isClientRole) {
|
||
return (
|
||
<div ...>
|
||
<Building2 ... />
|
||
<p>No tenés procesos asignados aún</p>
|
||
<p>Contactá a tu administrador para que te asigne acceso</p>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// Después (diferenciado):
|
||
if (isClientRole) {
|
||
if (user?.platformRole === 'client_editor') {
|
||
return (
|
||
<div className="flex flex-col items-center justify-center py-24 gap-4">
|
||
<Building2 className="h-16 w-16 text-muted-foreground/30" />
|
||
<p className="text-base font-medium">Tu biblioteca está vacía</p>
|
||
<p className="text-[13px] text-muted-foreground">
|
||
Importá tu primer BPMN para empezar a cuantificar costos
|
||
</p>
|
||
<button
|
||
onClick={() => onImport()}
|
||
className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white transition-opacity hover:opacity-90"
|
||
style={{ background: '#F59845' }}
|
||
>
|
||
<Upload className="h-4 w-4" />
|
||
Importar BPMN
|
||
</button>
|
||
</div>
|
||
)
|
||
}
|
||
// client_viewer: mantener mensaje existente
|
||
return (
|
||
<div className="flex flex-col items-center justify-center py-24 gap-4">
|
||
<Building2 className="h-16 w-16 text-muted-foreground/30" />
|
||
<p className="text-base font-medium">No tenés procesos asignados aún</p>
|
||
<p className="text-[13px] text-muted-foreground">Contactá a tu administrador para que te asigne acceso</p>
|
||
</div>
|
||
)
|
||
}
|
||
```
|
||
|
||
`user` está disponible en el scope de `HomeView` como prop (o via `useAuth()` — verificar cuál aplica).
|
||
|
||
---
|
||
|
||
## Lo que NO cambia en esta etapa
|
||
|
||
- **`process-repo.ts`** — no tocar. `updateEditable()` no necesita `bpmn_xml` para este flujo.
|
||
- **`process-store.ts`** — no tocar.
|
||
- **`WorkspacePage.tsx`** — sin cambios. client_editor ya tiene acceso al workspace desde Sprint 7 (la RLS de `update_processes` ya lo cubre).
|
||
- **`GlobalSettingsPanel.tsx`** — sin cambios. El selector de área ya funciona para client_editor desde Etapa 4.
|
||
- **Rol `client_viewer`** — sigue sin acceso a importación en todo momento.
|
||
|
||
---
|
||
|
||
## Criterios de validación
|
||
|
||
### Técnicos
|
||
- [ ] Migración 018 creada y aplicada en Supabase
|
||
- [ ] `insert_processes` en la DB incluye la cláusula de client_editor (verificar con `pg_policies`)
|
||
- [ ] `npm run build` sin errores TypeScript
|
||
- [ ] `npm run test` sin regresiones (596 tests)
|
||
|
||
### Funcionales (validación visual mandatoria del director)
|
||
- [ ] Loguear como `client_editor` → `/library` → botón "Importar BPMN" visible en el header
|
||
- [ ] Hacer click en "Importar BPMN" → lleva a `/import` (no redirige a `/`)
|
||
- [ ] `/import` muestra el drop zone; la sección de "procesos de ejemplo" NO aparece
|
||
- [ ] Subir un archivo BPMN real → proceso creado → workspace abre correctamente
|
||
- [ ] En Supabase: verificar que el proceso creado tiene `org_id` = org del client_editor (no null)
|
||
- [ ] Loguear como `client_viewer` → `/library` → botón "Importar BPMN" NO visible
|
||
- [ ] Si client_viewer navega manualmente a `/import` → redirige a `/`
|
||
- [ ] La biblioteca vacía de client_editor muestra botón de importar; la de client_viewer muestra "Contactá a tu administrador"
|
||
|
||
---
|
||
|
||
## Restricciones explícitas
|
||
|
||
- **NO** tocar políticas RLS de tablas distintas a `processes` (activities y gateways ya permiten client_editor)
|
||
- **NO** crear procesos de muestra en la DB para client_editor — el flujo es importar BPMNs reales
|
||
- **NO** modificar el workspace ni el reporte — client_editor ya puede usarlos
|
||
- **NO** agregar tests en esta etapa
|
||
|
||
---
|
||
|
||
## Archivos autorizados a modificar/crear
|
||
|
||
```
|
||
supabase/migrations/
|
||
└── 018_client_editor_insert.sql ← crear y aplicar
|
||
|
||
src/features/
|
||
├── import/
|
||
│ └── ImportPage.tsx ← guards + orgId + ejemplos + texto marca
|
||
└── library/
|
||
└── LibraryPage.tsx ← botón header + empty state diferenciado
|
||
```
|
||
|
||
---
|
||
|
||
## Commits esperados
|
||
|
||
```
|
||
feat(db): migración 018 — INSERT policy para client_editor en processes
|
||
feat(import): client_editor puede importar BPMN; orgId asignado automáticamente
|
||
feat(library): botón Importar BPMN visible para client_editor; empty state diferenciado
|
||
fix(import): corregir texto de marca — "Process Cost Platform" → "InQ ROI"
|
||
```
|
||
|
||
---
|
||
|
||
## Reporte esperado
|
||
|
||
1. Contenido exacto de `018_client_editor_insert.sql`
|
||
2. Resultado de la query de verificación en `pg_policies` para `insert_processes`
|
||
3. Lista de cambios en `ImportPage.tsx` (resumen compacto)
|
||
4. Lista de cambios en `LibraryPage.tsx` (resumen compacto)
|
||
5. `npm run build` y `npm run test` (con conteo)
|
||
6. **Solicitar validación visual del director** — describir el estado de la UI para client_editor antes del OK formal
|