@jmruthers/pace-core 0.5.193 → 0.6.2

package/src/components/NavigationMenu/NavigationMenu.tsx

@@ -184,7 +184,7 @@
  * - Responsive design considerations
  * 
  * @dependencies
- * - React 18+ - Component framework and hooks
+ * - React 19+ - Component framework and hooks
  * - Lucide React - Icon components
  * - Radix UI - Dropdown menu primitives
  * - React Router (optional) - For navigation handling
@@ -192,70 +192,12 @@
  */
 
 import * as React from "react";
-import { Menu, ChevronDown } from "lucide-react";
-import { cn } from "../../utils/core/cn";
-import { Button } from "../Button";
+import { ChevronDown } from "lucide-react";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../Select";
-import { useUnifiedAuth } from "../../providers/services/UnifiedAuthProvider";
-import { useRBAC } from "../../rbac/hooks/useRBAC";
-import { useResolvedScope } from "../../rbac/hooks";
-import { usePermissions } from "../../rbac/hooks/usePermissions";
-import type { Permission, AccessLevel as RBACAccessLevel, UUID } from "../../rbac/types";
 import { logger } from "../../utils/core/logger";
-
-/**
- * Navigation mode type
- */
-export type NavigationMode = 'dropdown' | 'hierarchical';
-
-/**
- * Navigation item metadata
- */
-export interface NavigationItemMeta {
-  hidden?: boolean;
-  [key: string]: unknown;
-}
-
-/**
- * Navigation item interface
- */
-export interface NavigationItem {
-  id: string;
-  label: string;
-  href?: string;
-  icon?: string;
-  children?: NavigationItem[];
-  permissions?: (Permission | string)[];
-  roles?: string[];
-  accessLevel?: RBACAccessLevel | string;
-  meta?: NavigationItemMeta;
-  pageId?: string;
-}
-
-/**
- * Navigation menu component props
- */
-export interface NavigationMenuProps extends React.HTMLAttributes<HTMLDivElement> {
-  items: NavigationItem[];
-  mode?: NavigationMode;
-  currentPath?: string;
-  onNavigate?: (item: NavigationItem) => void;
-  className?: string;
-  disabled?: boolean;
-  buttonText?: string;
-  showIcons?: boolean;
-  navigationLabel?: string;
-  strictMode?: boolean;
-  auditLog?: boolean;
-  onNavigationAccessDenied?: (item: NavigationItem) => void;
-  onStrictModeViolation?: (item: NavigationItem, reason: string) => void;
-  /** 
-   * If true, indicates that items have already been filtered by the parent component (e.g., PaceAppLayout).
-   * When true, NavigationMenu will skip expensive permission checks and trust the provided items.
-   * This significantly improves performance when items are pre-filtered.
-   */
-  itemsPreFiltered?: boolean;
-}
+import { useNavigationFiltering } from "./useNavigationFiltering";
+import type { NavigationItem, NavigationMenuProps } from "./types";
+import type { Permission } from "../../rbac/types";
 
 /**
  * Unified NavigationMenu component that supports both dropdown and hierarchical navigation modes.
@@ -472,456 +414,8 @@ export const NavigationMenu = React.forwardRef<
   const [expandedItems, setExpandedItems] = React.useState<Set<string>>(new Set());
   const buttonRef = React.useRef<HTMLButtonElement>(null);
 
-  // Get authentication context
-  let authContext = null;
-  try {
-    authContext = useUnifiedAuth();
-  } catch (error) {
-    // NavigationMenu is being used outside of UnifiedAuthProvider
-    logger.warn('NavigationMenu', 'useUnifiedAuth not available, running in unauthenticated mode');
-  }
-
-  // Get RBAC context for permission and role checks
-  let rbacContext = null;
-  try {
-    rbacContext = useRBAC();
-  } catch (error) {
-    // RBAC not available - permission filtering will be disabled
-    logger.warn('NavigationMenu', 'useRBAC not available, permission filtering disabled');
-  }
-
-  // Get event context state for checking readiness
-  // Store the raw value to check if it's undefined (tests without event provider)
-  const eventLoadingRaw = authContext?.eventLoading;
-  const eventLoading = eventLoadingRaw ?? false;
-  const selectedEvent = authContext?.selectedEvent || null;
-  // Check org context readiness: use isContextReady if available, otherwise fall back to checking selectedOrganisation
-  // This handles both production (with isContextReady) and test scenarios (without it)
-  const orgContextReady = authContext?.isContextReady ?? (authContext?.selectedOrganisation?.id ? true : false);
-
-  // Get resolved scope for permission checks
-  // Note: Always call useResolvedScope (hooks must be called unconditionally)
-  // However, if itemsPreFiltered is true, we'll skip using the results to avoid blocking
-  // Permission filtering is always enabled - scope is always needed (unless items are pre-filtered)
-  const { supabase } = authContext || {};
-  const { selectedOrganisation } = authContext || {};
-  const { resolvedScope, isLoading: scopeLoading, error: scopeError } = useResolvedScope({
-    supabase: itemsPreFiltered ? null : (supabase || null), // Skip expensive resolution if pre-filtered
-    selectedOrganisationId: itemsPreFiltered ? null : (selectedOrganisation?.id || null),
-    selectedEventId: itemsPreFiltered ? null : (selectedEvent?.event_id || null)
-  });
-
-  // Resolve appId when useResolvedScope fails but context is ready
-  // This is needed because usePermissions requires appId to fetch permissions correctly
-  const [resolvedAppId, setResolvedAppId] = React.useState<string | undefined>(undefined);
-  React.useEffect(() => {
-    // Only resolve appId if:
-    // 1. useResolvedScope errored or returned null
-    // 2. But we have organisation context ready
-    // 3. And we have appName from authContext
-    // 4. And we haven't resolved it yet
-    if (
-      !scopeLoading && 
-      !resolvedScope?.appId && 
-      selectedOrganisation?.id && 
-      authContext?.appName && 
-      authContext?.user?.id &&
-      !resolvedAppId
-    ) {
-      // Resolve appId using the same method as useRBAC
-      // Double-check user exists (TypeScript narrowing) and capture values
-      if (!authContext.user || !authContext.appName) {
-        return;
-      }
-      const userId = authContext.user.id;
-      const appName = authContext.appName;
-      import('../../rbac/api').then(({ resolveAppContext }) => {
-        resolveAppContext({
-          userId,
-          appName
-        }).then((result) => {
-          if (result?.appId) {
-            setResolvedAppId(result.appId);
-          }
-        }).catch((error) => {
-          // Silently fail - usePermissions will handle it
-        });
-      });
-    }
-  }, [scopeLoading, resolvedScope?.appId, selectedOrganisation?.id, authContext?.appName, authContext?.user?.id, resolvedAppId]);
-
-  // Build scope from resolvedScope if available, otherwise fall back to context values
-  // This handles the case where useResolvedScope errored initially but context is now ready
-  // IMPORTANT: We need appId for usePermissions to work correctly
-  // CRITICAL: Use selectedOrganisation?.id immediately when available, even during loading
-  // This prevents usePermissions from skipping fetch due to empty organisationId
-  const effectiveScope = React.useMemo(() => {
-    // Prefer resolvedScope if available (includes appId)
-    if (resolvedScope?.organisationId) {
-      return resolvedScope;
-    }
-    
-    // Fall back to building scope from context if resolvedScope is not available yet
-    // Use selectedOrganisation?.id immediately when available, even if scopeLoading is true
-    // This prevents delay in permission fetching
-    if (selectedOrganisation?.id) {
-      const fallbackScope = {
-        organisationId: selectedOrganisation.id,
-        eventId: selectedEvent?.event_id || undefined,
-        appId: resolvedAppId
-      };
-      return fallbackScope;
-    }
-    
-    return null;
-  }, [resolvedScope, selectedOrganisation?.id, selectedEvent?.event_id, resolvedAppId]);
-
-  // Create a stable scope object that changes when effectiveScope changes
-  // This ensures usePermissions detects scope changes and re-runs
-  // We memoize it to prevent unnecessary re-renders while still triggering usePermissions when scope changes
-  // IMPORTANT: Use a string key for dependencies to ensure React detects changes
-  // This is more reliable than depending on the object itself
-  const scopeKey = effectiveScope 
-    ? `${effectiveScope.organisationId || ''}-${effectiveScope.eventId || ''}-${effectiveScope.appId || ''}`
-    : 'empty';
-  
-  const stableScope = React.useMemo(() => {
-    if (effectiveScope?.organisationId) {
-      return {
-        organisationId: effectiveScope.organisationId,
-        eventId: effectiveScope.eventId,
-        appId: effectiveScope.appId
-      };
-    }
-    // Return empty scope object (not null) so usePermissions can handle it
-    return {
-      organisationId: '',
-      eventId: undefined,
-      appId: undefined
-    };
-  }, [scopeKey, effectiveScope]);
-
-  // Get permissions map for synchronous permission checks
-  // Skip expensive permission fetching if items are pre-filtered
-  const userId = (authContext?.user?.id || '') as UUID;
-  
-  // Call usePermissions with primitive parameters
-  // If itemsPreFiltered is true, pass null/undefined to skip expensive permission fetching
-  // CRITICAL: Pass null for userId and undefined for organisationId to skip the 3-second timeout
-  // Empty string '' triggers the timeout, but null/undefined allows immediate early return
-  const { permissions: permissionMap, hasAnyPermission, isLoading: permissionsLoading, error: permissionsError } = usePermissions(
-    itemsPreFiltered ? (null as any) : userId, // Pass null to trigger early return (empty string would wait 3s)
-    itemsPreFiltered ? undefined : stableScope.organisationId, // Pass undefined to skip timeout
-    itemsPreFiltered ? undefined : stableScope.eventId, // Skip if pre-filtered
-    itemsPreFiltered ? undefined : stableScope.appId // Skip if pre-filtered
-  );
-  
-  
-
-  // NEW: Phase 2 - Enhanced Security Features
-  // Filter navigation items based on permissions using RBAC hooks
-  // Use ref to preserve previous filtered items during permission refetches (e.g., when event changes)
-  const previousFilteredItemsRef = React.useRef<NavigationItem[]>([]);
-  
-  const filteredItems = React.useMemo(() => {
-    // PERFORMANCE OPTIMIZATION: If items are pre-filtered, skip all expensive permission checks
-    // This significantly improves load time when PaceAppLayout has already filtered items
-    if (itemsPreFiltered && items && items.length > 0) {
-      // Items are pre-filtered by parent (e.g., PaceAppLayout) - trust them and only filter hidden items
-      const visibleItems = (items || []).filter(item => !item.meta?.hidden);
-      previousFilteredItemsRef.current = visibleItems;
-      // Don't log here - logging happens in useEffect to avoid spam on re-renders
-      return visibleItems;
-    }
-    
-    // SECURITY: Permission filtering is ALWAYS enabled - users only see navigation items they have permission to access
-    // Security: If we're missing required context or still loading, show NO items
-    // This prevents security risk of showing items before permissions are verified
-    
-    // CRITICAL: Wait for BOTH organisation AND event context to be ready before checking permissions
-      // This prevents the error "No organisation or event context available" when event context is still loading
-      const isOrgContextReady = orgContextReady && selectedOrganisation?.id;
-      // Event context is ready when not loading
-      // If eventLoadingRaw is undefined (tests without event provider), consider it ready
-      // Only wait for event context if we're actually loading events
-      const isEventContextReady = eventLoadingRaw === undefined ? true : !eventLoading;
-      
-      // Check if we have valid context for permission checking
-      // Use actual context values, not just resolvedScope, because resolvedScope might be null
-      // if useResolvedScope errored initially but context is now ready
-      const hasValidContext = isOrgContextReady && isEventContextReady;
-      
-      // If scope is still loading or we don't have valid context yet, show nothing
-      // BUT: If scope errored but context is now ready, retry (don't block forever)
-      const shouldWaitForScope = scopeLoading || (!hasValidContext);
-      const shouldRetryAfterError = scopeError && hasValidContext && !scopeLoading;
-      
-      // During initial load or when scope/context is loading, check if we can trust PaceAppLayout's filtering
-      // CRITICAL: If items are provided and we have valid context, trust PaceAppLayout's filtering
-      // This prevents delay - PaceAppLayout already filtered items, so show them immediately
-      // even if scope is still loading or rbacContext is not yet available
-      if (items && items.length > 0 && selectedOrganisation?.id) {
-        // Items are provided by PaceAppLayout - trust its filtering and show immediately
-        // This eliminates delay while usePermissions/useResolvedScope are still loading
-        // Items provided - trusting PaceAppLayout filtering (removed verbose logging)
-        // Filter out hidden items only - PaceAppLayout already did permission filtering
-        const visibleItems = (items || []).filter(item => !item.meta?.hidden);
-        // Store in ref for use during permission refetches
-        previousFilteredItemsRef.current = visibleItems;
-        return visibleItems;
-      }
-      
-      // If no items provided or no valid context, wait for context to be ready
-      if (!authContext || !rbacContext || (shouldWaitForScope && !shouldRetryAfterError)) {
-        // Still loading - show nothing to prevent security risk
-        // Note: We check both org and event context readiness to prevent premature permission checks
-        // Exception: If scope errored but context is now ready, we'll retry below
-        return [];
-      }
-      
-      // If scope errored but context is now ready, we can proceed with permission checks
-      // The resolvedScope might be null, but we'll use the actual context values
-      // usePermissions will handle the scope resolution internally
-      
-      // During permission refetch (after initial load), preserve previous items if we have them
-      // This prevents navigation from disappearing when switching events
-      if (permissionsLoading) {
-        // If we have previous items, keep showing them during refetch
-        // This prevents the navigation from disappearing when event changes
-        if (previousFilteredItemsRef.current.length > 0) {
-          return previousFilteredItemsRef.current;
-        }
-        // CRITICAL: If items are provided and we have valid scope, trust PaceAppLayout's filtering
-        // This prevents delay - PaceAppLayout already filtered items, so show them immediately
-        // even if usePermissions is still loading
-        if (items && items.length > 0 && stableScope.organisationId) {
-          // Permissions loading but items provided - trusting PaceAppLayout filtering (removed verbose logging)
-          // Filter out hidden items only - PaceAppLayout already did permission filtering
-          return (items || []).filter(item => !item.meta?.hidden);
-        }
-        // Otherwise, show nothing during initial load
-        return [];
-      }
-      
-      // If there's an error after loading, show nothing
-      // Security: Better to show nothing than risk showing unauthorized items
-      if (permissionsError) {
-        logger.warn('NavigationMenu', 'Permission check error - showing no items for security', {
-          permissionsError: permissionsError?.message
-        });
-        return [];
-      }
-      
-      // If permission map is empty after loading, we need to handle this carefully:
-      // 1. If items were already filtered by PaceAppLayout (which uses getPermissionMap directly),
-      //    we should trust those items and show them (they've already been filtered)
-      // 2. If NavigationMenu is used standalone, we need permissions to filter - show nothing
-      // 
-      // Since PaceAppLayout filters items before passing to NavigationMenu, and NavigationMenu
-      // uses usePermissions hook which may return empty map while PaceAppLayout gets permissions,
-      // we should trust items that are provided if permission map is empty but we have valid scope.
-      // This is safe because PaceAppLayout already filtered them using getPermissionMap.
-      if (!permissionMap || Object.keys(permissionMap).length === 0) {
-        // If we have valid scope and items are provided, they were likely already filtered by PaceAppLayout
-        // In this case, trust the items and show them (they've already been filtered for security)
-        if (stableScope.organisationId && items && items.length > 0) {
-          // Permission map empty but items provided - trusting PaceAppLayout filtering (removed verbose logging)
-          // Items were already filtered by PaceAppLayout - trust them and only filter hidden items
-          return (items || []).filter(item => !item.meta?.hidden);
-        }
-        
-        // If no items provided or no valid scope, show nothing (can't verify permissions)
-        if (stableScope.organisationId) {
-          logger.warn('NavigationMenu', 'Permission map is empty and no items provided - showing nothing', {
-            permissionMapSize: 0,
-            organisationId: stableScope.organisationId,
-            eventId: stableScope.eventId,
-            appId: stableScope.appId
-          });
-        }
-        return [];
-      }
-    
-    // SECURITY: Permission filtering is always enabled - filtering cannot be disabled
-    // Helper function to derive page ID from href
-    const getPageIdFromHref = (href?: string): string | null => {
-      if (!href) return null;
-      // Remove leading slash and any query params/hash
-      const path = href.split('?')[0].split('#')[0].replace(/^\//, '');
-      return path || 'home';
-    };
-    
-    // Helper function to check if item has permission to be shown
-    const hasItemPermission = (item: NavigationItem): boolean => {
-      // If item has href, we'll check page permissions later - skip explicit permission check
-      // This allows items with href to be filtered by page permissions instead of explicit permissions
-      // Check permissions if available AND item doesn't have href
-      if (item.permissions && item.permissions.length > 0 && !item.href) {
-        // Convert string permissions to Permission type and check
-        const permissions = item.permissions
-          .filter((p): p is string => typeof p === 'string')
-          .map(p => p as Permission);
-        
-        if (permissions.length > 0) {
-          const hasPermission = hasAnyPermission(permissions);
-          if (!hasPermission) {
-            return false;
-          }
-        }
-      }
-      
-      // Check roles if available
-      if (item.roles && item.roles.length > 0) {
-        const hasRole = item.roles.some(role => {
-          if (typeof role !== 'string') return true;
-          
-          // Map role strings to RBAC role checks
-          switch (role.toLowerCase()) {
-            case 'super_admin':
-            case 'super admin':
-              return rbacContext.isSuperAdmin;
-            case 'org_admin':
-            case 'org admin':
-            case 'admin':
-              return rbacContext.isOrgAdmin || rbacContext.isSuperAdmin;
-            case 'event_admin':
-            case 'event admin':
-              return rbacContext.isEventAdmin || rbacContext.isSuperAdmin;
-            default:
-              // For other roles, check against organisationRole or eventAppRole
-              return (
-                rbacContext.organisationRole === role ||
-                rbacContext.eventAppRole === role ||
-                rbacContext.isSuperAdmin
-              );
-          }
-        });
-        if (!hasRole) {
-          return false;
-        }
-      }
-      
-      // Check access level if available
-      if (item.accessLevel) {
-        if (typeof item.accessLevel === 'string') {
-          // Map access level string to RBAC access level
-          const accessLevel = item.accessLevel.toLowerCase() as RBACAccessLevel;
-          const userEventRole = rbacContext.eventAppRole;
-          
-          // If user is super admin, they have all access levels
-          if (rbacContext.isSuperAdmin) {
-            // Super admin has access
-          } else {
-            // Map eventAppRole to access level for comparison
-            // eventAppRole: 'viewer' | 'participant' | 'planner' | 'event_admin'
-            const roleToAccessLevel: Record<string, RBACAccessLevel> = {
-              'viewer': 'viewer',
-              'participant': 'participant',
-              'planner': 'planner',
-              'event_admin': 'admin',
-            };
-            const userAccessLevel = userEventRole ? (roleToAccessLevel[userEventRole] || 'viewer') : null;
-            
-            // Check if user's access level meets the required access level
-            const levelHierarchy: Record<RBACAccessLevel, number> = {
-              viewer: 1,
-              participant: 2,
-              planner: 3,
-              admin: 4,
-              super: 5
-            };
-            const requiredLevel = levelHierarchy[accessLevel] || 0;
-            const userLevel = userAccessLevel ? levelHierarchy[userAccessLevel] || 0 : 0;
-            
-            if (userLevel < requiredLevel) {
-              return false;
-            }
-          }
-        }
-      }
-      
-      // NEW: Auto-check page permissions for items with href
-      // Always check page permissions for items with href, even if they have explicit permissions/roles/accessLevel
-      // This ensures that items are filtered out if the user doesn't have access to the page itself
-      if (item.href) {
-        const pageId = item.pageId || getPageIdFromHref(item.href);
-        if (pageId) {
-          // Check for read permission on the page
-          const pagePermission: Permission = `read:page.${pageId}` as Permission;
-          
-          // Check permission map (super admin has access to everything via '*' key)
-          // Only allow if permission is explicitly true (undefined/false means no access)
-          const isSuperAdmin = permissionMap['*'] === true;
-          const hasPagePermission = permissionMap[pagePermission] === true;
-          const finalHasPermission = isSuperAdmin || hasPagePermission;
-          
-          if (!finalHasPermission) {
-            return false;
-          }
-        }
-      }
-      
-      return true;
-    };
-    
-    // Helper function to filter items recursively (creates new objects to avoid mutations)
-    const filterItem = (item: NavigationItem): NavigationItem | null => {
-      // Check if item should be hidden
-      if (item.meta?.hidden) return null;
-      
-      // Check if item has permission
-      if (!hasItemPermission(item)) return null;
-      
-      // Recursively filter children if present
-      let filteredChildren: NavigationItem[] | undefined;
-      if (item.children && item.children.length > 0) {
-        filteredChildren = item.children
-          .map(child => filterItem(child))
-          .filter((child): child is NavigationItem => child !== null);
-        
-        // If parent has no accessible children, hide the parent too (unless it has its own href)
-        if (filteredChildren.length === 0 && !item.href) {
-          return null;
-        }
-      }
-      
-      // Return filtered item (with filtered children if applicable)
-      return {
-        ...item,
-        children: filteredChildren
-      };
-    };
-    
-    // Filter items based on permissions - only show items with explicit permission
-    // Security: No fallback - if items don't have permission, they are hidden
-    const filtered = (items || [])
-      .map(item => filterItem(item))
-      .filter((item): item is NavigationItem => item !== null);
-    
-    // Update the ref with the new filtered items so we can preserve them during refetches
-    previousFilteredItemsRef.current = filtered;
-    
-    return filtered;
-  }, [
-    items, 
-    itemsPreFiltered, // Add itemsPreFiltered to dependencies
-    authContext, 
-    rbacContext, 
-    permissionMap, 
-    hasAnyPermission, 
-    scopeLoading, 
-    scopeError,
-    permissionsLoading,
-    resolvedScope,
-    effectiveScope,
-    auditLog,
-    // Add event context state to dependencies so we re-check permissions when event context becomes available
-    eventLoadingRaw,
-    eventLoading,
-    selectedEvent,
-    orgContextReady,
-    selectedOrganisation?.id
-  ]);
+  const { authContext, rbacContext, filteredItems, permissionMap, hasAnyPermission } =
+    useNavigationFiltering({ items, itemsPreFiltered, auditLog });
 
   // Note: Navigation access attempts are logged in handleItemClick, not here
   // This prevents excessive logging on every render
@@ -1209,4 +703,11 @@ export const NavigationMenu = React.forwardRef<
   );
 });
 
-NavigationMenu.displayName = "NavigationMenu";
+NavigationMenu.displayName = "NavigationMenu";
+
+export type {
+  NavigationMode,
+  NavigationItemMeta,
+  NavigationItem,
+  NavigationMenuProps,
+} from "./types";

package/src/components/NavigationMenu/types.ts

@@ -0,0 +1,56 @@
+import * as React from "react";
+import type { Permission, AccessLevel as RBACAccessLevel } from "../../rbac/types";
+
+/**
+ * Navigation mode type
+ */
+export type NavigationMode = "dropdown" | "hierarchical";
+
+/**
+ * Navigation item metadata
+ */
+export interface NavigationItemMeta {
+  hidden?: boolean;
+  [key: string]: unknown;
+}
+
+/**
+ * Navigation item interface
+ */
+export interface NavigationItem {
+  id: string;
+  label: string;
+  href?: string;
+  icon?: string;
+  children?: NavigationItem[];
+  permissions?: (Permission | string)[];
+  roles?: string[];
+  accessLevel?: RBACAccessLevel | string;
+  meta?: NavigationItemMeta;
+  pageId?: string;
+}
+
+/**
+ * Navigation menu component props
+ */
+export interface NavigationMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: NavigationItem[];
+  mode?: NavigationMode;
+  currentPath?: string;
+  onNavigate?: (item: NavigationItem) => void;
+  className?: string;
+  disabled?: boolean;
+  buttonText?: string;
+  showIcons?: boolean;
+  navigationLabel?: string;
+  strictMode?: boolean;
+  auditLog?: boolean;
+  onNavigationAccessDenied?: (item: NavigationItem) => void;
+  onStrictModeViolation?: (item: NavigationItem, reason: string) => void;
+  /**
+   * If true, indicates that items have already been filtered by the parent component (e.g., PaceAppLayout).
+   * When true, NavigationMenu will skip expensive permission checks and trust the provided items.
+   * This significantly improves performance when items are pre-filtered.
+   */
+  itemsPreFiltered?: boolean;
+}