@jmruthers/pace-core 0.5.181 → 0.5.182

package/src/components/PaceAppLayout/PaceAppLayout.tsx

@@ -99,7 +99,7 @@
 
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { Outlet, useNavigate, useLocation } from 'react-router-dom';
-import { useUnifiedAuth } from '../../providers/UnifiedAuthProvider';
+import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
 import { useOrganisations } from '../../hooks/useOrganisations';
 import { useEvents } from '../../hooks/useEvents';
 import { useEventTheme } from '../../hooks/useEventTheme';
@@ -116,7 +116,8 @@ const EMPTY_ROUTE_PERMISSIONS = {};
 import { Button } from '../Button';
 import { Footer } from '../Footer';
 import { Header } from '../Header';
-import type { NavigationItem } from '../NavigationMenu/types';
+import type { NavigationItem } from '../NavigationMenu/NavigationMenu';
+import type { PasswordChangeFormError } from '../PasswordChange/PasswordChangeForm';
 // Define Operation type locally since old RBAC types are removed
 type Operation = 'read' | 'create' | 'update' | 'delete' | 'manage';
 
@@ -147,8 +148,6 @@ export interface PaceAppLayoutProps {
   routePermissions?: Record<string, Operation>;
   /** Fallback component to show when user lacks permission */
   permissionFallback?: React.ReactNode;
-  /** Enable permission-based navigation filtering */
-  filterNavigationByPermissions?: boolean;
   /** Custom permission page ID mapping */
   pageIdMapping?: Record<string, string>;
   
@@ -282,8 +281,7 @@ export interface PaceAppLayoutProps {
  *           <PaceAppLayout 
  *             appName="My Custom App" 
  *             navItems={customNavItems}
- *             // Navigation filtering works independently - no need for enforcePermissions
- *             filterNavigationByPermissions={true}
+ *             // Permission filtering is always enabled - no prop needed
  *             routePermissions={{
  *               '/components': 'read',
  *               '/styles': 'read',
@@ -356,7 +354,6 @@ export function PaceAppLayout({
   defaultPermission = 'read',
   routePermissions = EMPTY_ROUTE_PERMISSIONS,
   permissionFallback,
-  filterNavigationByPermissions = false,
   pageIdMapping = EMPTY_PAGE_ID_MAPPING,
   // NEW: Phase 1 - Enhanced Security Features
   strictMode = true,
@@ -372,7 +369,7 @@ export function PaceAppLayout({
   onRouteAccessDenied,
   onRouteStrictModeViolation
 }: PaceAppLayoutProps) {
-  const { user, signOut, updatePassword, supabase } = useUnifiedAuth();
+  const { user, signOut, updatePassword, supabase, appId: contextAppId } = useUnifiedAuth(); // Get appId from context (resolved on login)
   const { selectedOrganisation } = useOrganisations();
   const navigate = useNavigate();
   const location = useLocation();
@@ -395,20 +392,35 @@ export function PaceAppLayout({
     selectedOrganisationId: selectedOrganisation?.id || null,
     selectedEventId: selectedEvent?.event_id || null
   });
+
+  // Use appId from context (resolved immediately on login) or fallback to resolvedScope
+  // This ensures appId is available immediately without waiting for additional resolution
+  const resolvedAppId = contextAppId || resolvedScope?.appId;
   
   // Build scope from resolved values
-  // Preserve appId from resolvedScope even when creating fallback scope
+  // Preserve appId from resolvedScope or fallback to resolvedAppId
   const scope = useMemo<Scope>(() => {
-    if (!resolvedScope?.organisationId) {
+    // Prefer resolvedScope if available (includes appId)
+    if (resolvedScope?.organisationId) {
+      return resolvedScope;
+    }
+    
+    // Fallback: build scope from context values with resolvedAppId
+    if (selectedOrganisation?.id) {
       return {
-        organisationId: selectedOrganisation?.id || '',
+        organisationId: selectedOrganisation.id,
         eventId: selectedEvent?.event_id || undefined,
-        // Preserve appId from resolvedScope if it exists, even if organisationId is missing
-        appId: resolvedScope?.appId || undefined
+        appId: resolvedAppId || resolvedScope?.appId || undefined
       };
     }
-    return resolvedScope;
-  }, [resolvedScope, selectedOrganisation?.id, selectedEvent?.event_id]);
+    
+    // Last resort: return minimal scope
+    return {
+      organisationId: selectedOrganisation?.id || '',
+      eventId: selectedEvent?.event_id || undefined,
+      appId: resolvedAppId || resolvedScope?.appId || undefined
+    };
+  }, [resolvedScope, selectedOrganisation?.id, selectedEvent?.event_id, resolvedAppId]);
 
   // Default navigation items if none provided
   const defaultNavItems: NavigationItem[] = useMemo(() => [
@@ -529,16 +541,10 @@ export function PaceAppLayout({
   }, [enforcePermissions, can, isCheckingPermission, isCheckingSuperAdmin, isSuperAdminUser, currentPageId, currentRoutePermission, user?.id, strictMode, auditLog, onPageAccessDenied, onStrictModeViolation]);
 
   // Filter navigation items based on permissions
-  // This works independently of route enforcement - navigation filtering doesn't require enforcePermissions
+  // Permission filtering is always enabled - users only see navigation items they have permission to access
   const [filteredMenuItems, setFilteredMenuItems] = useState<NavigationItem[]>(baseMenuItems);
 
   useEffect(() => {
-    // Allow navigation filtering without route enforcement
-    if (!filterNavigationByPermissions) {
-      setFilteredMenuItems(baseMenuItems);
-      return;
-    }
-
     let isMounted = true;
 
     const filterItems = async () => {
@@ -558,18 +564,23 @@ export function PaceAppLayout({
       
       // Wait for scope to be fully resolved (including appId) before filtering
       // This is important because getPermissionMap requires appId to fetch pages
-      if (scopeLoading || !currentScope.appId) {
-        // Scope still loading or appId not resolved yet - show no items until ready
-        // This is a security measure: don't show navigation until we can verify permissions
-        if (!scopeLoading && !currentScope.appId) {
-          logger.error('PaceAppLayout', 'appId not resolved in scope - navigation filtering disabled for security', {
-            scope: currentScope,
-            resolvedScope,
-            selectedOrganisationId: selectedOrganisation?.id,
-            selectedEventId: selectedEvent?.event_id,
-            appName: appName
-          });
-        }
+      // Check both resolvedScope.appId and resolvedAppId (fallback)
+      // appId is now resolved immediately on login in UnifiedAuthProvider, so it should be available
+      const hasAppId = currentScope.appId || resolvedAppId;
+      
+      // OPTIMIZATION: Show items optimistically while permissions load
+      // This makes the menu appear immediately, then we filter when permissions are ready
+      const hasOrganisationContext = currentScope.organisationId;
+      const hasUser = !!user?.id;
+      
+      // If we have user + organisation, show items immediately (optimistic rendering)
+      // Then filter them when permissions are fully loaded
+      if (hasUser && hasOrganisationContext) {
+        // We have minimum required context - proceed with filtering
+        // Don't wait for appId or eventId - we can filter with organisationId alone
+        // Permission checks will work with resource permissions even without appId
+      } else if (!hasUser || !hasOrganisationContext) {
+        // Missing required context - wait for it
         if (isMounted) {
           setFilteredMenuItems([]);
         }
@@ -613,29 +624,21 @@ export function PaceAppLayout({
       // Organisation context is ready - now filter items based on permissions
       // OPTIMIZATION: Use batch permission map instead of individual checks to avoid rate limits
       // This makes 1 call instead of N calls (where N = number of navigation items)
+      // OPTIMIZATION: Proceed even if appId is still resolving - permission checks work with organisationId
       try {
         const { getPermissionMap } = await import('../../rbac/api');
         
-        // Log scope for debugging
-        logger.debug('PaceAppLayout', 'Filtering navigation with scope', {
+        // Build scope for permission check - use appId if available, but don't wait for it
+        // Permission checks will work with resource permissions even without appId
+        const permissionScope: Scope = {
           organisationId: currentScope.organisationId,
           eventId: currentScope.eventId,
-          appId: currentScope.appId,
-          hasOrganisationId: !!currentScope.organisationId,
-          hasEventId: !!currentScope.eventId,
-          hasAppId: !!currentScope.appId
-        });
+          appId: currentScope.appId || resolvedAppId || undefined // Use appId if available, but proceed without it
+        };
         
         const permissionMap = await getPermissionMap({
           userId: user.id,
-          scope: currentScope,
-        });
-        
-        // Log permission map for debugging
-        logger.debug('PaceAppLayout', 'Permission map received', {
-          permissionCount: Object.keys(permissionMap).length,
-          permissions: Object.keys(permissionMap),
-          hasWildcard: permissionMap['*'] === true
+          scope: permissionScope,
         });
 
         // Filter items using the permission map (synchronous, no rate limit issues)
@@ -651,17 +654,6 @@ export function PaceAppLayout({
           // Check permission map (super admin check already handled in getPermissionMap)
           const hasAccess = permissionMap['*'] === true || permissionMap[fullPermission] === true;
           
-          // Log each item's permission check for debugging
-          logger.debug('PaceAppLayout', 'Checking navigation item permission', {
-            itemId: item.id,
-            href: item.href,
-            pageId,
-            permission,
-            fullPermission,
-            hasAccess,
-            permissionInMap: permissionMap[fullPermission]
-          });
-          
           return { item, hasAccess };
         });
 
@@ -687,7 +679,7 @@ export function PaceAppLayout({
     return () => {
       isMounted = false;
     };
-  }, [baseMenuItems, filterNavigationByPermissions, pageIdMapping, routePermissions, defaultPermission, can, user?.id, scope, scopeLoading]);
+  }, [baseMenuItems, pageIdMapping, routePermissions, defaultPermission, can, user?.id, scope, scopeLoading, contextAppId, resolvedScope?.appId]);
 
   // NEW: Phase 2 - Enhanced Routing Features
   // Check route access for role-based routing
@@ -742,7 +734,7 @@ export function PaceAppLayout({
       
       // If permission check passed or not required, check roles
       if (hasAccess && currentRoute.roles && currentRoute.roles.length > 0 && user?.id) {
-        const { useUnifiedAuth } = await import('../../providers/UnifiedAuthProvider');
+        const { useUnifiedAuth } = await import('../../providers/services/UnifiedAuthProvider');
         // Note: We're already in the component with authContext via useUnifiedAuth at top
         // For this feature to work properly, we need the auth context
         // This is a limitation of the current implementation
@@ -789,15 +781,22 @@ export function PaceAppLayout({
     await signOut();
   };
 
-  const handleChangePassword = async (newPassword: string) => {
+  const handleChangePassword = async (newPassword: string, confirmPassword: string) => {
     // The form component in UserMenu already checks for matching passwords
     const result = await updatePassword(newPassword);
     if (result?.error) {
       // The form will display the error message
       logger.error('PaceAppLayout', 'Failed to change password', { error: result.error.message });
+      // Convert AuthError to PasswordChangeFormError
+      return {
+        error: {
+          message: result.error.message,
+          code: result.error.name || 'PASSWORD_UPDATE_ERROR'
+        }
+      };
     }
     // The form will handle closing the modal on success
-    return result || { error: null };
+    return {};
   };
 
   // Show loading state while checking permissions or super admin status

package/src/components/PaceAppLayout/test-setup.tsx

@@ -0,0 +1,192 @@
+/**
+ * @file Shared Test Setup for PaceAppLayout Tests
+ * @package @jmruthers/pace-core
+ * @module Components/PaceAppLayout
+ * 
+ * Centralized mock data and utilities for all PaceAppLayout test files.
+ * This eliminates duplication across unit, integration, performance, and security tests.
+ * 
+ * Note: vi.mock() calls must be in each test file (they're hoisted), but this file
+ * provides the shared mock data and reset functions that can be imported and used
+ * in the vi.mock() factory functions.
+ */
+
+import { vi } from 'vitest';
+import React from 'react';
+
+// === MOCK DATA ===
+
+export const mockNavigate = vi.fn();
+export const mockLocation = { pathname: '/test-path' };
+
+export const mockUser = {
+  id: 'test-user-id',
+  email: 'test@example.com',
+  user_metadata: { 
+    display_name: 'Test User',
+    organisationId: 'test-org-123',
+    eventId: 'test-event-456',
+    appId: 'test-app-789'
+  }
+};
+
+export const mockSignOut = vi.fn().mockResolvedValue({ error: null });
+export const mockUpdatePassword = vi.fn().mockResolvedValue({ error: null });
+
+export const mockOrganisation = {
+  id: 'test-org-id',
+  name: 'Test Organisation',
+  display_name: 'Test Organisation',
+  description: 'Test organisation for testing',
+  subscription_tier: 'basic',
+  settings: {},
+  is_active: true,
+  created_at: '2023-01-01T00:00:00Z',
+  updated_at: '2023-01-01T00:00:00Z'
+};
+
+export const mockOrganisationContext = {
+  selectedOrganisation: mockOrganisation,
+  organisations: [mockOrganisation],
+  userMemberships: [{
+    id: 'test-membership-id',
+    user_id: 'test-user-id',
+    organisation_id: 'test-org-id',
+    role: 'org_admin',
+    granted_at: '2023-01-01T00:00:00Z',
+    status: 'active' as const,
+    created_at: '2023-01-01T00:00:00Z',
+    updated_at: '2023-01-01T00:00:00Z'
+  }],
+  isLoading: false,
+  error: null,
+  hasValidOrganisationContext: true,
+  setSelectedOrganisation: vi.fn(),
+  switchOrganisation: vi.fn().mockResolvedValue(undefined),
+  getUserRole: vi.fn().mockReturnValue('member'),
+  validateOrganisationAccess: vi.fn().mockReturnValue(true),
+  ensureOrganisationContext: vi.fn().mockReturnValue(mockOrganisation),
+  refreshOrganisations: vi.fn().mockResolvedValue(undefined),
+  getPrimaryOrganisation: vi.fn().mockReturnValue(mockOrganisation),
+  isOrganisationSecure: vi.fn().mockReturnValue(true)
+};
+
+// === RBAC MOCKS ===
+
+export const mockIsPermitted = vi.fn().mockImplementation(() => Promise.resolve(true));
+export const mockIsSuperAdmin = vi.fn().mockResolvedValue(false);
+
+export const mockHasPermissionRBAC = vi.fn().mockResolvedValue(true);
+export const mockUseRBAC = vi.fn(() => ({
+  hasPermission: mockHasPermissionRBAC,
+  isLoading: false,
+  error: null,
+  hasGlobalPermission: vi.fn().mockResolvedValue(true),
+  hasOrganisationPermission: vi.fn().mockResolvedValue(true),
+  hasEventPermission: vi.fn().mockResolvedValue(true),
+  globalRole: null,
+  organisationRoles: [],
+  eventRoles: [],
+  permissionMap: {},
+}));
+
+export const mockUseCan = vi.fn<(...args: any[]) => {
+  can: boolean;
+  isLoading: boolean;
+  error: Error | null;
+  refetch: () => Promise<void>;
+}>((...args: any[]) => ({
+  can: true,
+  isLoading: false,
+  error: null,
+  refetch: vi.fn().mockResolvedValue(undefined),
+}));
+
+// === MOCK COMPONENT IMPLEMENTATIONS ===
+
+export const createMockHeader = () => ({ 
+  Header: ({ 
+    logo, 
+    logoUrl, 
+    logoAlt, 
+    navItems, 
+    actions, 
+    userMenu, 
+    user, 
+    onSignOut, 
+    onChangePassword, 
+    currentPath, 
+    onNavigate, 
+    showEventSelector, 
+    showUserMenu, 
+    className 
+  }: any) => (
+    <header 
+      data-testid="mock-header" 
+      role="banner" 
+      className={className}
+    >
+      <div data-testid="app-name" aria-label="Application name">{logoAlt}</div>
+      <div data-testid="user-info">{user?.user_metadata?.display_name || user?.email}</div>
+      <div data-testid="nav-items-count">{navItems?.length || 0}</div>
+      <div data-testid="has-actions">{actions ? 'true' : 'false'}</div>
+      <div data-testid="has-custom-user-menu">{userMenu ? 'true' : 'false'}</div>
+      <div data-testid="has-custom-logo">{logo ? 'true' : 'false'}</div>
+      <div data-testid="logo-url">{logoUrl || 'default'}</div>
+      <div data-testid="show-user-menu">{showUserMenu !== false ? 'true' : 'false'}</div>
+      {logo && <div data-testid="custom-logo">{logo}</div>}
+      {userMenu && <div data-testid="custom-user-menu">{userMenu}</div>}
+      {actions && <div data-testid="header-actions">{actions}</div>}
+      <button 
+        data-testid="sign-out-button" 
+        onClick={() => onSignOut()}
+      >
+        Sign Out
+      </button>
+      <button 
+        data-testid="change-password-button" 
+        onClick={() => onChangePassword('newpassword123')}
+      >
+        Change Password
+      </button>
+      <button 
+        data-testid="navigate-button" 
+        onClick={() => onNavigate({ id: 'home', label: 'Home', href: '/' })}
+      >
+        Navigate
+      </button>
+      <div data-testid="current-path">{currentPath}</div>
+      <div data-testid="show-event-selector">{showEventSelector !== false ? 'true' : 'false'}</div>
+    </header>
+  )
+});
+
+/**
+ * Resets all mocks between tests.
+ * Call this in beforeEach hooks.
+ */
+export function resetPaceAppLayoutMocks() {
+  vi.clearAllMocks();
+  mockLocation.pathname = '/test-path';
+  mockIsSuperAdmin.mockResolvedValue(false);
+  mockUseCan.mockReturnValue({
+    can: true,
+    isLoading: false,
+    error: null,
+    refetch: vi.fn().mockResolvedValue(undefined),
+  });
+  mockHasPermissionRBAC.mockResolvedValue(true);
+  mockUseRBAC.mockReturnValue({
+    hasPermission: mockHasPermissionRBAC,
+    isLoading: false,
+    error: null,
+    hasGlobalPermission: vi.fn().mockResolvedValue(true),
+    hasOrganisationPermission: vi.fn().mockResolvedValue(true),
+    hasEventPermission: vi.fn().mockResolvedValue(true),
+    globalRole: null,
+    organisationRoles: [],
+    eventRoles: [],
+    permissionMap: {},
+  });
+}
+