@asteby/metacore-runtime-react 23.10.0 → 23.11.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @asteby/metacore-runtime-react
 
+## 23.11.1
+
+### Patch Changes
+
+- 6e3cf4f: DynamicTable: el sentinel de infinite scroll se detiene cuando el backend devuelve una página corta/vacía, aunque meta.total reporte más filas de las que la lista entrega (drift count vs list). Elimina el skeleton accent parpadeando bajo las filas.
+
+## 23.11.0
+
+### Minor Changes
+
+- 023dc28: feat(license-gate): gateo por rol del formulario de activación.
+
+  `<LicenseGate>` acepta dos props nuevas (backward-compatible):
+  - `canActivate?: boolean` (default `true`): cuando es `false`, el modal bloqueante se muestra SIN el formulario de activación.
+  - `readOnlyMessage?: string`: mensaje mostrado en ese caso (default: "Contacta al administrador de la plataforma para activar la licencia.").
+
+  Aplica a todas las variantes del modal (missing/invalid/expired, incluido el copy de trial vencido). Permite que solo el Platform Root/superadmin active la licencia mientras el resto de usuarios ve el bloqueo con la indicación de a quién contactar.
+
 ## 23.10.0
 
 ### Minor Changes

package/README.md

@@ -73,6 +73,7 @@ export function Shell({ children }) {
 - Enforcement && `missing`/`invalid`/`expired` → modal **bloqueante** con el formulario de activación.
   `plan === 'trial'` + `expired` → copy *"Tu prueba gratuita terminó"*.
 - Activación exitosa desbloquea **sin recargar**: el host refresca el `state` y el gate se desmonta.
+- **Gateo por rol** con `canActivate` (default `true`): cuando es `false`, el modal bloqueante se muestra **sin formulario** de activación y en su lugar aparece `readOnlyMessage` (default: *"Contacta al administrador de la plataforma para activar la licencia."*). Así solo el Platform Root/superadmin activa; los demás usuarios ven el bloqueo con la indicación de a quién contactar.
 
 ## Minimal usage
 

package/dist/dynamic-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAanF,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,EACR,cAAsB,GACzB,EAAE,iBAAiB,+BA8iCnB"}
+{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAanF,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,EACR,cAAsB,GACzB,EAAE,iBAAiB,+BAujCnB"}

package/dist/dynamic-table.js

@@ -50,6 +50,10 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
     // Infinite-scroll: a top-up page is in flight (distinct from the initial
     // page load so only a small bottom spinner shows, not the whole-table one).
     const [loadingMore, setLoadingMore] = useState(false);
+    // True once the backend returned a short/empty page: no more rows exist
+    // even if meta.total says otherwise (count/list drift would otherwise
+    // keep the sentinel re-firing forever). Reset by any page-1 fetch.
+    const [infExhausted, setInfExhausted] = useState(false);
     const infPageRef = useRef(1);
     const [optionsMap, setOptionsMap] = useState(new Map());
     const [exportOpen, setExportOpen] = useState(false);
@@ -467,6 +471,11 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
                 setData((prev) => (append ? dedupeById(prev, rows) : rows));
                 if (res.data.meta)
                     setRowCount(res.data.meta.total);
+                // A short page means the backend has no more rows, even if
+                // meta.total disagrees with the visible count (count query
+                // vs list query drift, dedupe). Without this the sentinel
+                // re-fires forever on empty pages.
+                setInfExhausted(rows.length < infPageSize);
             }
         }
         catch (error) {
@@ -483,19 +492,19 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
     // the filters/search AND the sort (both live in buildFilterParams).
     const filterSignature = useMemo(() => JSON.stringify(buildFilterParams()), [buildFilterParams]);
     const loadNextPage = useCallback(() => {
-        if (loadingMore || loadingData)
+        if (loadingMore || loadingData || infExhausted)
             return;
         if (data.length >= rowCount)
             return;
         infPageRef.current += 1;
         void fetchPage(infPageRef.current, true);
-    }, [loadingMore, loadingData, data.length, rowCount, fetchPage]);
+    }, [loadingMore, loadingData, infExhausted, data.length, rowCount, fetchPage]);
     // Infinite-scroll sentinels. There are two scroll containers (desktop
     // table + mobile card list) but only one is laid out at a time — the CSS
     // `hidden`/`sm:hidden` container has no box, so its observer never fires.
     // Each sentinel drives the SAME `loadNextPage`; its internal guards + the
     // `disabled` flag keep concurrent/exhausted fetches from doubling up.
-    const infScrollDisabled = !infiniteScroll || loadingMore || loadingData || data.length >= rowCount;
+    const infScrollDisabled = !infiniteScroll || loadingMore || loadingData || infExhausted || data.length >= rowCount;
     const { rootRef: infDesktopRoot, sentinelRef: infDesktopSentinel } = useInfiniteScrollSentinel({ onLoadMore: loadNextPage, disabled: infScrollDisabled });
     const { rootRef: infMobileRoot, sentinelRef: infMobileSentinel } = useInfiniteScrollSentinel({ onLoadMore: loadNextPage, disabled: infScrollDisabled });
     const initialFetchDone = useRef(false);

package/dist/license/license-gate.d.ts

@@ -34,7 +34,14 @@ export interface LicenseGateProps {
     branding?: LicenseBranding;
     /** Acción "Gestionar licencia" del banner degradado (opcional). */
     onManage?: () => void;
+    /** Si el usuario actual puede activar la licencia (p. ej. Platform Root /
+     * superadmin). Default true — backward-compatible. Cuando es false, el modal
+     * bloqueante se muestra SIN el formulario de activación y en su lugar
+     * aparece `readOnlyMessage`. */
+    canActivate?: boolean;
+    /** Mensaje mostrado en el modal bloqueante cuando `canActivate` es false. */
+    readOnlyMessage?: string;
     className?: string;
 }
-export declare function LicenseGate({ state, onActivate, children, branding, onManage, className, }: LicenseGateProps): import("react").JSX.Element;
+export declare function LicenseGate({ state, onActivate, children, branding, onManage, canActivate, readOnlyMessage, className, }: LicenseGateProps): import("react").JSX.Element;
 //# sourceMappingURL=license-gate.d.ts.map

package/dist/license/license-gate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"license-gate.d.ts","sourceRoot":"","sources":["../../src/license/license-gate.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIhD,OAAO,EAGH,KAAK,YAAY,EACjB,KAAK,eAAe,EACvB,MAAM,SAAS,CAAA;AAQhB,MAAM,WAAW,gBAAgB;IAC7B;4EACwE;IACxE,KAAK,EAAE,YAAY,GAAG,SAAS,CAAA;IAC/B;;gCAE4B;IAC5B,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC3C,QAAQ,EAAE,SAAS,CAAA;IACnB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,eAAe,CAAA;IAC1B,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,GACZ,EAAE,gBAAgB,+BAqBlB"}
+{"version":3,"file":"license-gate.d.ts","sourceRoot":"","sources":["../../src/license/license-gate.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAIhD,OAAO,EAGH,KAAK,YAAY,EACjB,KAAK,eAAe,EACvB,MAAM,SAAS,CAAA;AAQhB,MAAM,WAAW,gBAAgB;IAC7B;4EACwE;IACxE,KAAK,EAAE,YAAY,GAAG,SAAS,CAAA;IAC/B;;gCAE4B;IAC5B,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC3C,QAAQ,EAAE,SAAS,CAAA;IACnB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,eAAe,CAAA;IAC1B,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB;;;oCAGgC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,6EAA6E;IAC7E,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,WAAkB,EAClB,eAAe,EACf,SAAS,GACZ,EAAE,gBAAgB,+BAuBlB"}

package/dist/license/license-gate.js

@@ -30,11 +30,11 @@ import { LicenseExpiryBanner } from './license-expiry-banner';
 function cx(...parts) {
     return parts.filter(Boolean).join(' ');
 }
-export function LicenseGate({ state, onActivate, children, branding, onManage, className, }) {
+export function LicenseGate({ state, onActivate, children, branding, onManage, canActivate = true, readOnlyMessage, className, }) {
     const blocking = isLicenseBlocking(state);
-    return (_jsxs(_Fragment, { children: [!blocking && (_jsx(LicenseExpiryBanner, { state: state, onManage: onManage })), children, blocking && state && (_jsx(LicenseGateModal, { state: state, onActivate: onActivate, branding: branding, className: className }))] }));
+    return (_jsxs(_Fragment, { children: [!blocking && (_jsx(LicenseExpiryBanner, { state: state, onManage: onManage })), children, blocking && state && (_jsx(LicenseGateModal, { state: state, onActivate: onActivate, branding: branding, canActivate: canActivate, readOnlyMessage: readOnlyMessage, className: className }))] }));
 }
-function LicenseGateModal({ state, onActivate, branding, className, }) {
+function LicenseGateModal({ state, onActivate, branding, canActivate, readOnlyMessage, className, }) {
     const { t } = useTranslation();
     const [code, setCode] = useState('');
     const [submitting, setSubmitting] = useState(false);
@@ -87,7 +87,10 @@ function LicenseGateModal({ state, onActivate, branding, className, }) {
                                                     ? branding.name
                                                     : t('license.gate.instance', {
                                                         defaultValue: 'Esta instancia',
-                                                    }) })] })] })] }), _jsx("p", { className: "text-muted-foreground text-sm", children: description }), state.reason && (_jsx("p", { className: "bg-muted/50 text-muted-foreground rounded-md px-3 py-2 text-xs", children: state.reason })), _jsxs("form", { className: "flex flex-col gap-2", onSubmit: (e) => {
+                                                    }) })] })] })] }), _jsx("p", { className: "text-muted-foreground text-sm", children: description }), state.reason && (_jsx("p", { className: "bg-muted/50 text-muted-foreground rounded-md px-3 py-2 text-xs", children: state.reason })), !canActivate ? (_jsx("p", { role: "note", className: "border-border bg-muted/40 text-muted-foreground rounded-md border px-3 py-3 text-sm", children: readOnlyMessage ??
+                            t('license.gate.read_only', {
+                                defaultValue: 'Contacta al administrador de la plataforma para activar la licencia.',
+                            }) })) : (_jsxs("form", { className: "flex flex-col gap-2", onSubmit: (e) => {
                             e.preventDefault();
                             void submit();
                         }, children: [_jsx("label", { htmlFor: "license-gate-code", className: "text-sm font-medium", children: t('license.gate.code_label', {
@@ -104,5 +107,5 @@ function LicenseGateModal({ state, onActivate, branding, className, }) {
                                         })
                                         : t('license.gate.activate', {
                                             defaultValue: 'Activar licencia',
-                                        })] })] })] }) }) }));
+                                        })] })] }))] }) }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "23.10.0",
+  "version": "23.11.1",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/__tests__/license-gate.test.tsx

@@ -168,6 +168,46 @@ describe('LicenseGate', () => {
         expect(btn.disabled).toBe(true)
     })
 
+    it('sin canActivate oculta el form y muestra el mensaje read-only por defecto', () => {
+        render(
+            <LicenseGate state={make({ status: 'missing' })} onActivate={noop} canActivate={false}>
+                {CHILD}
+            </LicenseGate>,
+        )
+        expect(screen.getByRole('dialog')).toBeTruthy()
+        expect(screen.queryByLabelText('Clave o token de licencia')).toBeNull()
+        expect(screen.queryByText('Activar licencia')).toBeNull()
+        expect(
+            screen.getByText('Contacta al administrador de la plataforma para activar la licencia.'),
+        ).toBeTruthy()
+    })
+
+    it('sin canActivate respeta el readOnlyMessage custom, incl. trial vencido', () => {
+        render(
+            <LicenseGate
+                state={make({ status: 'expired', plan: 'trial' })}
+                onActivate={noop}
+                canActivate={false}
+                readOnlyMessage="Pídele a Ana que active la licencia."
+            >
+                {CHILD}
+            </LicenseGate>,
+        )
+        expect(screen.getByText('Tu prueba gratuita terminó')).toBeTruthy()
+        expect(screen.queryByLabelText('Clave o token de licencia')).toBeNull()
+        expect(screen.getByText('Pídele a Ana que active la licencia.')).toBeTruthy()
+    })
+
+    it('canActivate true (default) mantiene el form de activación', () => {
+        render(
+            <LicenseGate state={make({ status: 'invalid' })} onActivate={noop}>
+                {CHILD}
+            </LicenseGate>,
+        )
+        expect(screen.getByLabelText('Clave o token de licencia')).toBeTruthy()
+        expect(screen.getByText('Activar licencia')).toBeTruthy()
+    })
+
     it('grace degrada con banner en vez de bloquear', () => {
         render(
             <LicenseGate

package/src/dynamic-table.tsx

@@ -157,6 +157,10 @@ export function DynamicTable({
     // Infinite-scroll: a top-up page is in flight (distinct from the initial
     // page load so only a small bottom spinner shows, not the whole-table one).
     const [loadingMore, setLoadingMore] = useState(false)
+    // True once the backend returned a short/empty page: no more rows exist
+    // even if meta.total says otherwise (count/list drift would otherwise
+    // keep the sentinel re-firing forever). Reset by any page-1 fetch.
+    const [infExhausted, setInfExhausted] = useState(false)
     const infPageRef = useRef(1)
     const [optionsMap, setOptionsMap] = useState<Map<string, any[]>>(new Map())
 
@@ -546,6 +550,11 @@ export function DynamicTable({
                     const rows = res.data.data || []
                     setData((prev) => (append ? dedupeById(prev, rows) : rows))
                     if (res.data.meta) setRowCount(res.data.meta.total)
+                    // A short page means the backend has no more rows, even if
+                    // meta.total disagrees with the visible count (count query
+                    // vs list query drift, dedupe). Without this the sentinel
+                    // re-fires forever on empty pages.
+                    setInfExhausted(rows.length < infPageSize)
                 }
             } catch (error) {
                 console.error('Error al cargar los datos', error)
@@ -565,11 +574,11 @@ export function DynamicTable({
     )
 
     const loadNextPage = useCallback(() => {
-        if (loadingMore || loadingData) return
+        if (loadingMore || loadingData || infExhausted) return
         if (data.length >= rowCount) return
         infPageRef.current += 1
         void fetchPage(infPageRef.current, true)
-    }, [loadingMore, loadingData, data.length, rowCount, fetchPage])
+    }, [loadingMore, loadingData, infExhausted, data.length, rowCount, fetchPage])
 
     // Infinite-scroll sentinels. There are two scroll containers (desktop
     // table + mobile card list) but only one is laid out at a time — the CSS
@@ -577,7 +586,7 @@ export function DynamicTable({
     // Each sentinel drives the SAME `loadNextPage`; its internal guards + the
     // `disabled` flag keep concurrent/exhausted fetches from doubling up.
     const infScrollDisabled =
-        !infiniteScroll || loadingMore || loadingData || data.length >= rowCount
+        !infiniteScroll || loadingMore || loadingData || infExhausted || data.length >= rowCount
     const { rootRef: infDesktopRoot, sentinelRef: infDesktopSentinel } =
         useInfiniteScrollSentinel({ onLoadMore: loadNextPage, disabled: infScrollDisabled })
     const { rootRef: infMobileRoot, sentinelRef: infMobileSentinel } =

package/src/license/license-gate.tsx

@@ -49,6 +49,13 @@ export interface LicenseGateProps {
     branding?: LicenseBranding
     /** Acción "Gestionar licencia" del banner degradado (opcional). */
     onManage?: () => void
+    /** Si el usuario actual puede activar la licencia (p. ej. Platform Root /
+     * superadmin). Default true — backward-compatible. Cuando es false, el modal
+     * bloqueante se muestra SIN el formulario de activación y en su lugar
+     * aparece `readOnlyMessage`. */
+    canActivate?: boolean
+    /** Mensaje mostrado en el modal bloqueante cuando `canActivate` es false. */
+    readOnlyMessage?: string
     className?: string
 }
 
@@ -58,6 +65,8 @@ export function LicenseGate({
     children,
     branding,
     onManage,
+    canActivate = true,
+    readOnlyMessage,
     className,
 }: LicenseGateProps) {
     const blocking = isLicenseBlocking(state)
@@ -75,6 +84,8 @@ export function LicenseGate({
                     state={state}
                     onActivate={onActivate}
                     branding={branding}
+                    canActivate={canActivate}
+                    readOnlyMessage={readOnlyMessage}
                     className={className}
                 />
             )}
@@ -86,6 +97,8 @@ interface LicenseGateModalProps {
     state: LicenseState
     onActivate: (code: string) => Promise<void>
     branding?: LicenseBranding
+    canActivate: boolean
+    readOnlyMessage?: string
     className?: string
 }
 
@@ -93,6 +106,8 @@ function LicenseGateModal({
     state,
     onActivate,
     branding,
+    canActivate,
+    readOnlyMessage,
     className,
 }: LicenseGateModalProps) {
     const { t } = useTranslation()
@@ -214,6 +229,18 @@ function LicenseGateModal({
                         </p>
                     )}
 
+                    {!canActivate ? (
+                        <p
+                            role="note"
+                            className="border-border bg-muted/40 text-muted-foreground rounded-md border px-3 py-3 text-sm"
+                        >
+                            {readOnlyMessage ??
+                                t('license.gate.read_only', {
+                                    defaultValue:
+                                        'Contacta al administrador de la plataforma para activar la licencia.',
+                                })}
+                        </p>
+                    ) : (
                     <form
                         className="flex flex-col gap-2"
                         onSubmit={(e) => {
@@ -270,6 +297,7 @@ function LicenseGateModal({
                                   })}
                         </Button>
                     </form>
+                    )}
                 </div>
             </div>
         </div>