@jmruthers/pace-core 0.5.189 → 0.5.190

package/src/rbac/components/PermissionEnforcer.tsx

@@ -69,8 +69,8 @@
 import React, { useMemo, useCallback, useEffect, useState } from 'react';
 import { useMultiplePermissions } from '../hooks/usePermissions';
 import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
+import { useResolvedScope } from '../hooks/useResolvedScope';
 import { UUID, Permission, Scope } from '../types';
-import { createScopeFromEvent } from '../utils/eventContext';
 import { getRBACLogger } from '../config';
 import { createLogger } from '../../utils/core/logger';
 
@@ -132,66 +132,30 @@ export function PermissionEnforcer({
 }: PermissionEnforcerProps) {
   const { user, selectedOrganisation, selectedEvent, supabase } = useUnifiedAuth();
   const [hasChecked, setHasChecked] = useState(false);
-  const [checkError, setCheckError] = useState<Error | null>(null);
-  const [resolvedScope, setResolvedScope] = useState<Scope | null>(null);
-
-  // Resolve scope - either use provided scope or resolve from context
-  useEffect(() => {
-    const resolveScope = async () => {
-      if (scope) {
-        setResolvedScope(scope);
-        return;
-      }
-
-      // If we have both organisation and event, use them directly
-      if (selectedOrganisation && selectedEvent) {
-        setResolvedScope({
-          organisationId: selectedOrganisation.id,
-          eventId: selectedEvent.event_id,
-          appId: undefined
-        });
-        return;
-      }
-
-      // If we only have organisation, use it
-      if (selectedOrganisation) {
-        setResolvedScope({
-          organisationId: selectedOrganisation.id,
-          eventId: selectedEvent?.event_id || undefined,
-          appId: undefined
-        });
-        return;
-      }
-
-      // If we only have event, resolve organisation from event
-      if (selectedEvent && supabase) {
-        try {
-          const eventScope = await createScopeFromEvent(supabase, selectedEvent.event_id);
-          if (!eventScope) {
-            setCheckError(new Error('Could not resolve organization from event context'));
-            return;
-          }
-          setResolvedScope(eventScope);
-        } catch (error) {
-          setCheckError(error as Error);
-        }
-        return;
-      }
-
-      // No context available
-      setCheckError(new Error('Either organisation context or event context is required for permission checking'));
-    };
-
-    resolveScope();
-  }, [scope, selectedOrganisation, selectedEvent, supabase]);
+  
+  // Use useResolvedScope hook for consistent scope resolution
+  // For event-required apps: selectedOrganisation is null, org derived from event
+  // For org-required apps: selectedOrganisation is available, event optional
+  const { resolvedScope, isLoading: scopeLoading, error: scopeError } = useResolvedScope({
+    supabase,
+    selectedOrganisationId: selectedOrganisation?.id || null,
+    selectedEventId: selectedEvent?.event_id || null
+  });
+  
+  // Use provided scope if available, otherwise use resolved scope
+  const effectiveScope = scope || resolvedScope;
+  const checkError = scopeError;
 
   // Check all permissions using useMultiplePermissions hook
-  const { results: permissionResults, isLoading, error } = useMultiplePermissions(
+  const { results: permissionResults, isLoading: permissionsLoading, error: permissionsError } = useMultiplePermissions(
     user?.id || '',
-    resolvedScope || { eventId: selectedEvent?.event_id || undefined },
+    effectiveScope || { eventId: selectedEvent?.event_id || undefined },
     permissions,
     true // Use cache
   );
+  
+  const isLoading = scopeLoading || permissionsLoading;
+  const error = checkError || permissionsError;
 
   // Determine if user has required permissions based on requireAll prop
   const hasRequiredPermissions = useMemo((): boolean => {
@@ -215,13 +179,11 @@ export function PermissionEnforcer({
   useEffect(() => {
     if (!isLoading && !error) {
       setHasChecked(true);
-      setCheckError(null);
       
       if (!hasRequiredPermissions && onDenied) {
         onDenied(permissions, operation);
       }
     } else if (error) {
-      setCheckError(error);
       setHasChecked(true);
     }
   }, [hasRequiredPermissions, isLoading, error, permissions, operation, onDenied]);
@@ -233,13 +195,13 @@ export function PermissionEnforcer({
         permissions,
         operation,
         userId: user?.id,
-        scope: resolvedScope,
+        scope: effectiveScope,
         allowed: hasRequiredPermissions,
         requireAll,
         timestamp: new Date().toISOString()
       });
     }
-  }, [auditLog, hasChecked, isLoading, permissions, operation, user?.id, resolvedScope, hasRequiredPermissions, requireAll]);
+  }, [auditLog, hasChecked, isLoading, permissions, operation, user?.id, effectiveScope, hasRequiredPermissions, requireAll]);
 
   // Handle strict mode violations
   useEffect(() => {
@@ -249,12 +211,12 @@ export function PermissionEnforcer({
         permissions,
         operation,
         userId: user?.id,
-        scope: resolvedScope,
+        scope: effectiveScope,
         requireAll,
         timestamp: new Date().toISOString()
       });
     }
-  }, [strictMode, hasChecked, isLoading, hasRequiredPermissions, permissions, operation, user?.id, resolvedScope, requireAll]);
+  }, [strictMode, hasChecked, isLoading, hasRequiredPermissions, permissions, operation, user?.id, effectiveScope, requireAll]);
 
   // Show loading state
   if (isLoading || !hasChecked) {
@@ -307,7 +269,7 @@ function DefaultLoading() {
   return (
     <div className="flex items-center justify-center min-h-[200px] p-8">
       <div className="flex items-center space-x-2">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-main-600"></div>
+        <div className="animate-spin rounded-full size-8 border-b-2 border-main-600"></div>
         <span className="text-sec-600">Checking permissions...</span>
       </div>
     </div>

package/src/rbac/components/RoleBasedRouter.tsx

@@ -66,6 +66,7 @@
 import React, { useMemo, useCallback, useEffect, useState, createContext, useContext } from 'react';
 import { useLocation, useNavigate, Outlet } from 'react-router-dom';
 import { useCan } from '../hooks';
+import { useResolvedScope } from '../hooks/useResolvedScope';
 import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
 import { UUID, Permission, Scope, AccessLevel } from '../types';
 import { getRBACLogger } from '../config';
@@ -190,22 +191,23 @@ export function RoleBasedRouter({
   maxHistorySize = 1000,
   unauthorizedComponent: UnauthorizedComponent = DefaultUnauthorizedComponent
 }: RoleBasedRouterProps) {
-  const { user, selectedOrganisation, selectedEvent } = useUnifiedAuth();
+  const { user, selectedOrganisation, selectedEvent, supabase } = useUnifiedAuth();
   const location = useLocation();
   const navigate = useNavigate();
   const [routeAccessHistory, setRouteAccessHistory] = useState<RouteAccessRecord[]>([]);
   const [currentRoute, setCurrentRoute] = useState<string>('');
 
-  // Get current scope
-  const currentScope = useMemo((): Scope | null => {
-    if (!selectedOrganisation) return null;
-    
-    return {
-      organisationId: selectedOrganisation.id,
-      eventId: selectedEvent?.event_id || undefined,
-      appId: undefined
-    };
-  }, [selectedOrganisation, selectedEvent]);
+  // Use useResolvedScope to get proper scope (org derived from event if needed)
+  const { resolvedScope } = useResolvedScope({
+    supabase,
+    selectedOrganisationId: selectedOrganisation?.id || null,
+    selectedEventId: selectedEvent?.event_id || null
+  });
+
+  // Get current scope from resolved scope
+  // For event-required apps: org is derived from event
+  // For org-required apps: org comes from selectedOrganisation
+  const currentScope = resolvedScope;
 
   // Get route configuration for current path
   const currentRouteConfig = useMemo((): RouteConfig | null => {
@@ -364,7 +366,7 @@ export function RoleBasedRouter({
     return (
       <div className="flex items-center justify-center min-h-screen">
         <div className="text-center">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-main-600 mx-auto mb-4"></div>
+          <div className="animate-spin rounded-full size-8 border-b-2 border-main-600 mx-auto mb-4"></div>
           <p className="text-sec-600">Checking permissions...</p>
         </div>
       </div>

package/src/rbac/components/SecureDataProvider.tsx

@@ -59,6 +59,7 @@
 import React, { createContext, useContext, useState, useCallback, useMemo, useEffect } from 'react';
 import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
 import { useSecureDataAccess } from '../../hooks/useSecureDataAccess';
+import { useResolvedScope } from '../hooks/useResolvedScope';
 import { UUID, Scope, Permission } from '../types';
 import { getRBACLogger } from '../config';
 
@@ -142,21 +143,22 @@ export function SecureDataProvider({
   maxHistorySize = 1000,
   enforceRLS = true
 }: SecureDataProviderProps) {
-  const { user, selectedOrganisation, selectedEvent } = useUnifiedAuth();
+  const { user, selectedOrganisation, selectedEvent, supabase } = useUnifiedAuth();
   const { validateContext } = useSecureDataAccess();
   const [dataAccessHistory, setDataAccessHistory] = useState<DataAccessRecord[]>([]);
   const [isEnabled, setIsEnabled] = useState(true);
 
-  // Get current scope
-  const currentScope = useMemo((): Scope | null => {
-    if (!selectedOrganisation) return null;
-    
-    return {
-      organisationId: selectedOrganisation.id,
-      eventId: selectedEvent?.event_id || undefined,
-      appId: undefined
-    };
-  }, [selectedOrganisation, selectedEvent]);
+  // Use useResolvedScope to get proper scope (org derived from event if needed)
+  const { resolvedScope } = useResolvedScope({
+    supabase,
+    selectedOrganisationId: selectedOrganisation?.id || null,
+    selectedEventId: selectedEvent?.event_id || null
+  });
+
+  // Get current scope from resolved scope
+  // For event-required apps: org is derived from event
+  // For org-required apps: org comes from selectedOrganisation
+  const currentScope = resolvedScope;
 
   // Check if data access is allowed for a table and operation
   const isDataAccessAllowed = useCallback((

package/src/rbac/components/__tests__/NavigationGuard.test.tsx

@@ -55,7 +55,13 @@ vi.mock('../../utils/eventContext', () => ({
   createScopeFromEvent: vi.fn()
 }));
 
+// Mock useResolvedScope hook
+vi.mock('../../hooks/useResolvedScope', () => ({
+  useResolvedScope: vi.fn()
+}));
+
 import { createScopeFromEvent } from '../../utils/eventContext';
+import { useResolvedScope } from '../../hooks/useResolvedScope';
 
 // Mock data
 const mockUser = {
@@ -96,6 +102,7 @@ const TestLoading = () => (
 describe('NavigationGuard Component', () => {
   const mockUseMultiplePermissions = vi.mocked(useMultiplePermissions);
   const mockCreateScopeFromEvent = vi.mocked(createScopeFromEvent);
+  const mockUseResolvedScope = vi.mocked(useResolvedScope);
 
   beforeEach(() => {
     vi.clearAllMocks();
@@ -108,6 +115,17 @@ describe('NavigationGuard Component', () => {
       supabase: {} as any
     });
     
+    // Mock useResolvedScope to return resolved scope immediately
+    mockUseResolvedScope.mockReturnValue({
+      resolvedScope: {
+        organisationId: 'org-123',
+        eventId: 'event-123',
+        appId: 'app-123'
+      },
+      isLoading: false,
+      error: null
+    });
+    
     mockUseMultiplePermissions.mockReturnValue({
       results: { 'read:dashboard': true } as Record<string, boolean>,
       isLoading: false,
@@ -239,10 +257,11 @@ describe('NavigationGuard Component', () => {
 
       expect(mockUseMultiplePermissions).toHaveBeenCalledWith(
         'user-123',
-        expect.objectContaining({
+        {
           organisationId: 'org-123',
-          eventId: 'event-123'
-        }),
+          eventId: 'event-123',
+          appId: 'app-123'
+        },
         ['read:dashboard'],
         true
       );
@@ -367,7 +386,8 @@ describe('NavigationGuard Component', () => {
       );
     });
 
-    it('resolves scope from organisation and event context', async () => {
+    it('resolves scope from organisation and event context (org-required app)', async () => {
+      // For org-required apps, organisation is primary, event is optional
       mockUseMultiplePermissions.mockReturnValue({
         results: { 'read:dashboard': true } as Record<string, boolean>,
         isLoading: false,
@@ -387,16 +407,18 @@ describe('NavigationGuard Component', () => {
 
       expect(mockUseMultiplePermissions).toHaveBeenCalledWith(
         'user-123',
-        expect.objectContaining({
+        {
           organisationId: 'org-123',
-          eventId: 'event-123'
-        }),
+          eventId: 'event-123',
+          appId: 'app-123'
+        },
         ['read:dashboard'],
         true
       );
     });
 
-    it('resolves scope from organisation only', async () => {
+    it('resolves scope from organisation only (org-required app)', async () => {
+      // For org-required apps, organisation is primary context, event is optional
       mockUseUnifiedAuthFn.mockReturnValue({
         user: mockUser,
         selectedOrganisation: { id: 'org-123' },
@@ -404,6 +426,17 @@ describe('NavigationGuard Component', () => {
         supabase: {} as any
       });
 
+      // Mock useResolvedScope to return scope without event
+      mockUseResolvedScope.mockReturnValue({
+        resolvedScope: {
+          organisationId: 'org-123',
+          eventId: undefined,
+          appId: 'app-123'
+        },
+        isLoading: false,
+        error: null
+      });
+
       mockUseMultiplePermissions.mockReturnValue({
         results: { 'read:dashboard': true } as Record<string, boolean>,
         isLoading: false,
@@ -423,27 +456,34 @@ describe('NavigationGuard Component', () => {
 
       expect(mockUseMultiplePermissions).toHaveBeenCalledWith(
         'user-123',
-        expect.objectContaining({
+        {
           organisationId: 'org-123',
-          eventId: undefined
-        }),
+          eventId: undefined,
+          appId: 'app-123'
+        },
         ['read:dashboard'],
         true
       );
     });
 
-    it('resolves scope from event context when organisation not available', async () => {
+    it('resolves scope from event context when organisation not available (event-required app)', async () => {
+      // For event-required apps, selectedOrganisation is null, org is derived from event
       mockUseUnifiedAuthFn.mockReturnValue({
         user: mockUser,
-        selectedOrganisation: null,
+        selectedOrganisation: null, // Not available for event-required apps
         selectedEvent: { event_id: 'event-123' },
         supabase: {} as any
       });
 
-      mockCreateScopeFromEvent.mockResolvedValue({
-        organisationId: 'resolved-org',
-        eventId: 'event-123',
-        appId: 'resolved-app'
+      // Mock useResolvedScope to return scope resolved from event
+      mockUseResolvedScope.mockReturnValue({
+        resolvedScope: {
+          organisationId: 'resolved-org',
+          eventId: 'event-123',
+          appId: 'resolved-app'
+        },
+        isLoading: false,
+        error: null
       });
 
       mockUseMultiplePermissions.mockReturnValue({
@@ -463,13 +503,13 @@ describe('NavigationGuard Component', () => {
         expect(screen.getByTestId('test-component')).toBeInTheDocument();
       }, { interval: 10 });
 
-      expect(mockCreateScopeFromEvent).toHaveBeenCalledWith({}, 'event-123');
       expect(mockUseMultiplePermissions).toHaveBeenCalledWith(
         'user-123',
-        expect.objectContaining({
+        {
           organisationId: 'resolved-org',
-          eventId: 'event-123'
-        }),
+          eventId: 'event-123',
+          appId: 'resolved-app'
+        },
         ['read:dashboard'],
         true
       );
@@ -478,13 +518,29 @@ describe('NavigationGuard Component', () => {
     it('handles scope resolution errors', async () => {
       mockUseUnifiedAuthFn.mockReturnValue({
         user: mockUser,
-        selectedOrganisationId: null,
-        selectedEventId: 'event-123',
+        selectedOrganisation: null,
+        selectedEvent: { event_id: 'event-123' },
         supabase: {} as any
       });
 
       const error = new Error('Could not resolve organisation from event');
-      mockCreateScopeFromEvent.mockRejectedValue(error);
+      // Component checks !effectiveScope first, which causes loading state
+      // When there's an error, effectiveScope is null, so component shows loading
+      // The component logic: if (isLoading || !effectiveScope || !hasChecked) return loading
+      // So even with an error, if effectiveScope is null, it shows loading
+      mockUseResolvedScope.mockReturnValue({
+        resolvedScope: null,
+        isLoading: false,
+        error
+      });
+
+      // Mock permissions to return quickly
+      mockUseMultiplePermissions.mockReturnValue({
+        results: {} as Record<string, boolean>,
+        isLoading: false,
+        error: null,
+        refetch: vi.fn()
+      });
 
       render(
         <NavigationGuard 
@@ -495,19 +551,25 @@ describe('NavigationGuard Component', () => {
         </NavigationGuard>
       );
 
-      await waitFor(() => {
-        expect(screen.getByText('Checking...')).toBeInTheDocument();
-      }, { interval: 10 });
+      // Component shows loading when effectiveScope is null (even with error)
+      // The component checks !effectiveScope before checking checkError
+      expect(screen.getByText('Checking...')).toBeInTheDocument();
     });
 
     it('handles missing context gracefully', async () => {
       mockUseUnifiedAuthFn.mockReturnValue({
         user: mockUser,
-        selectedOrganisationId: null,
-        selectedEventId: null,
+        selectedOrganisation: null,
+        selectedEvent: null,
         supabase: null
       });
 
+      mockUseResolvedScope.mockReturnValue({
+        resolvedScope: null,
+        isLoading: true,
+        error: null
+      });
+
       render(
         <NavigationGuard 
           navigationItem={mockNavigationItem}
@@ -517,9 +579,7 @@ describe('NavigationGuard Component', () => {
         </NavigationGuard>
       );
 
-      await waitFor(() => {
-        expect(screen.getByText('Checking...')).toBeInTheDocument();
-      }, { interval: 10 });
+      expect(screen.getByText('Checking...')).toBeInTheDocument();
     });
   });
 
@@ -764,10 +824,11 @@ describe('NavigationGuard Component', () => {
       // Should still check the first permission as representative
       expect(mockUseMultiplePermissions).toHaveBeenCalledWith(
         'user-123',
-        expect.objectContaining({
+        {
           organisationId: 'org-123',
-          eventId: 'event-123'
-        }),
+          eventId: 'event-123',
+          appId: 'app-123'
+        },
         ['read:dashboard'],
         true
       );
@@ -805,10 +866,11 @@ describe('NavigationGuard Component', () => {
 
       expect(mockUseMultiplePermissions).toHaveBeenCalledWith(
         '',
-        expect.objectContaining({
+        {
           organisationId: 'org-123',
-          eventId: 'event-123'
-        }),
+          eventId: 'event-123',
+          appId: 'app-123'
+        },
         ['read:dashboard'],
         true
       );
@@ -870,10 +932,11 @@ describe('NavigationGuard Component', () => {
 
       expect(mockUseMultiplePermissions).toHaveBeenCalledWith(
         'user-123',
-        expect.objectContaining({
+        {
           organisationId: 'org-123',
-          eventId: 'event-123'
-        }),
+          eventId: 'event-123',
+          appId: 'app-123'
+        },
         ['read:settings'],
         true
       );

package/src/rbac/components/__tests__/NavigationProvider.test.tsx

@@ -54,6 +54,18 @@ vi.mock('../../../providers/services/UnifiedAuthProvider', () => ({
   UnifiedAuthProvider: ({ children }: { children: React.ReactNode }) => <div data-testid="unified-auth-provider">{children}</div>
 }));
 
+// Mock useResolvedScope
+const mockUseResolvedScopeFn = vi.fn();
+vi.mock('../../hooks/useResolvedScope', () => ({
+  useResolvedScope: () => mockUseResolvedScopeFn(),
+}));
+
+// Mock useCan hook
+const mockUseCanFn = vi.fn();
+vi.mock('../../hooks', () => ({
+  useCan: (...args: any[]) => mockUseCanFn(...args),
+}));
+
 // Test data
 const mockUser = {
   id: 'user-123',
@@ -144,10 +156,29 @@ describe('NavigationProvider', () => {
     
     // Set up default mock with organisation context
     mockUseUnifiedAuthFn.mockReturnValue({
-      ...mockUser,
-      selectedOrganisationId: 'org-456',
-      selectedEventId: 'event-789'
+      user: {
+        id: 'user-123',
+        email: 'test@example.com',
+      },
+      selectedOrganisation: { id: 'org-456' },
+      selectedEvent: { event_id: 'event-789' },
+      supabase: {} as any,
+    });
+    
+    // Mock useResolvedScope to return resolved scope
+    mockUseResolvedScopeFn.mockReturnValue({
+      resolvedScope: mockScope,
+      isLoading: false,
+      error: null,
     });
+    
+    // Mock useCan to return true by default
+    // Note: useCan is called inside hasNavigationPermission callback, so it needs to return a value every time
+    mockUseCanFn.mockImplementation(() => ({
+      can: true,
+      isLoading: false,
+      error: null,
+    }));
   });
 
   afterEach(() => {
@@ -184,7 +215,8 @@ describe('NavigationProvider', () => {
         </TestWrapper>
       );
 
-      expect(screen.getByTestId('navigation-permission')).toHaveTextContent('false');
+      // When enabled and useCan returns true, permission should be granted
+      expect(screen.getByTestId('navigation-permission')).toHaveTextContent('true');
     });
 
     it('should return empty permissions initially', () => {
@@ -214,7 +246,8 @@ describe('NavigationProvider', () => {
         </TestWrapper>
       );
 
-      expect(screen.getByTestId('filtered-items-count')).toHaveTextContent('0');
+      // When useCan returns true for all items, all items should pass the filter
+      expect(screen.getByTestId('filtered-items-count')).toHaveTextContent('3');
     });
   });
 
@@ -269,7 +302,8 @@ describe('NavigationProvider', () => {
         </TestWrapper>
       );
 
-      expect(screen.getByTestId('navigation-permission')).toHaveTextContent('false');
+      // When user is authenticated and useCan returns true, permission should be granted
+      expect(screen.getByTestId('navigation-permission')).toHaveTextContent('true');
     });
 
     it('should deny navigation permission when user is not authenticated', () => {
@@ -319,7 +353,8 @@ describe('NavigationProvider', () => {
         </TestWrapper>
       );
 
-      expect(screen.getByTestId('navigation-permission')).toHaveTextContent('false');
+      // When disabled, hasNavigationPermission returns true (allows all)
+      expect(screen.getByTestId('navigation-permission')).toHaveTextContent('true');
     });
   });
 
@@ -335,6 +370,7 @@ describe('NavigationProvider', () => {
                 {item.label}
               </div>
             ))}
+            <div data-testid="filtered-count">{filteredItems.length}</div>
           </div>
         );
       };
@@ -345,9 +381,8 @@ describe('NavigationProvider', () => {
         </TestWrapper>
       );
 
-      // The component doesn't render individual items when mock is not working
-      // This test verifies the component renders without crashing
-      expect(screen.getByTestId('filtered-items')).toBeInTheDocument();
+      // When useCan returns true for all items, all items should pass the filter
+      expect(screen.getByTestId('filtered-count')).toHaveTextContent('3');
     });
 
     it('should return all items when disabled', () => {
@@ -371,7 +406,8 @@ describe('NavigationProvider', () => {
         </TestWrapper>
       );
 
-      expect(screen.getByTestId('filtered-items-count')).toHaveTextContent('0');
+      // When disabled, all items should be returned (no filtering)
+      expect(screen.getByTestId('filtered-items-count')).toHaveTextContent('3');
     });
   });
 
@@ -683,7 +719,8 @@ describe('NavigationProvider', () => {
         </TestWrapper>
       );
 
-      expect(screen.getByTestId('no-meta-permission')).toHaveTextContent('false');
+      // Item has permissions defined, so useCan is called and returns true (mocked)
+      expect(screen.getByTestId('no-meta-permission')).toHaveTextContent('true');
     });
   });
 });