@jmruthers/pace-core 0.6.1 → 0.6.3

package/src/components/NavigationMenu/useNavigationFiltering.ts

@@ -0,0 +1,390 @@
+import * as React from "react";
+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,
+  PermissionMap,
+} from "../../rbac/types";
+import { logger } from "../../utils/core/logger";
+import type { NavigationItem } from "./types";
+
+/**
+ * Options for the useNavigationFiltering hook.
+ */
+interface UseNavigationFilteringOptions {
+  items: NavigationItem[];
+  itemsPreFiltered?: boolean;
+  auditLog?: boolean;
+}
+
+/**
+ * Return value of the useNavigationFiltering hook.
+ */
+interface UseNavigationFilteringResult {
+  authContext: ReturnType<typeof useUnifiedAuth> | null;
+  rbacContext: ReturnType<typeof useRBAC> | null;
+  filteredItems: NavigationItem[];
+  permissionMap: PermissionMap;
+  hasAnyPermission: ((permissions: Permission[]) => boolean) | null;
+}
+
+/**
+ * Hook for filtering navigation items based on RBAC permissions.
+ * Filters navigation items to show only those the user has access to.
+ * 
+ * @param options - Navigation filtering configuration
+ * @returns Filtered navigation items and permission context
+ */
+export function useNavigationFiltering({
+  items,
+  itemsPreFiltered = false,
+  auditLog = true,
+}: UseNavigationFilteringOptions): UseNavigationFilteringResult {
+  const [resolvedAppId, setResolvedAppId] = React.useState<string | undefined>(undefined);
+  const previousFilteredItemsRef = React.useRef<NavigationItem[]>([]);
+
+  let authContext = null;
+  try {
+    authContext = useUnifiedAuth();
+  } catch (error) {
+    logger.warn(
+      "NavigationMenu",
+      "useUnifiedAuth not available, running in unauthenticated mode",
+    );
+  }
+
+  let rbacContext = null;
+  try {
+    rbacContext = useRBAC();
+  } catch (error) {
+    logger.warn(
+      "NavigationMenu",
+      "useRBAC not available, permission filtering disabled",
+    );
+  }
+
+  const eventLoadingRaw = authContext?.eventLoading;
+  const eventLoading = eventLoadingRaw ?? false;
+  const selectedEvent = authContext?.selectedEvent || null;
+  const orgContextReady =
+    authContext?.isContextReady ?? (authContext?.selectedOrganisation?.id ? true : false);
+
+  const { supabase } = authContext || {};
+  const { selectedOrganisation } = authContext || {};
+  const { resolvedScope, isLoading: scopeLoading, error: scopeError } = useResolvedScope({
+    supabase: itemsPreFiltered ? null : supabase || null,
+    selectedOrganisationId: itemsPreFiltered ? null : selectedOrganisation?.id || null,
+    selectedEventId: itemsPreFiltered ? null : selectedEvent?.event_id || null,
+  });
+
+  React.useEffect(() => {
+    if (
+      !scopeLoading &&
+      !resolvedScope?.appId &&
+      selectedOrganisation?.id &&
+      authContext?.appName &&
+      authContext?.user?.id &&
+      !resolvedAppId
+    ) {
+      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(() => {});
+        })
+        .catch(() => {});
+    }
+  }, [
+    scopeLoading,
+    resolvedScope?.appId,
+    selectedOrganisation?.id,
+    authContext?.appName,
+    authContext?.user?.id,
+    resolvedAppId,
+  ]);
+
+  const effectiveScope = React.useMemo(() => {
+    if (resolvedScope?.organisationId) {
+      return resolvedScope;
+    }
+
+    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]);
+
+  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 {
+      organisationId: "",
+      eventId: undefined,
+      appId: undefined,
+    };
+  }, [scopeKey, effectiveScope]);
+
+  const userId = (authContext?.user?.id || "") as UUID;
+  const {
+    permissions: permissionMap,
+    hasAnyPermission,
+    isLoading: permissionsLoading,
+    error: permissionsError,
+  } = usePermissions(
+    itemsPreFiltered ? (null as any) : userId,
+    itemsPreFiltered ? undefined : stableScope.organisationId,
+    itemsPreFiltered ? undefined : stableScope.eventId,
+    itemsPreFiltered ? undefined : stableScope.appId,
+  );
+
+  const filteredItems = React.useMemo(() => {
+    if (itemsPreFiltered && items && items.length > 0) {
+      const visibleItems = (items || []).filter((item) => !item.meta?.hidden);
+      previousFilteredItemsRef.current = visibleItems;
+      return visibleItems;
+    }
+
+    const isOrgContextReady = orgContextReady && selectedOrganisation?.id;
+    const isEventContextReady = eventLoadingRaw === undefined ? true : !eventLoading;
+    const hasValidContext = isOrgContextReady && isEventContextReady;
+    const shouldWaitForScope = scopeLoading || !hasValidContext;
+    const shouldRetryAfterError = scopeError && hasValidContext && !scopeLoading;
+
+    if (items && items.length > 0 && selectedOrganisation?.id) {
+      const visibleItems = (items || []).filter((item) => !item.meta?.hidden);
+      previousFilteredItemsRef.current = visibleItems;
+      return visibleItems;
+    }
+
+    if (!authContext || !rbacContext || (shouldWaitForScope && !shouldRetryAfterError)) {
+      return [];
+    }
+
+    if (permissionsLoading) {
+      if (previousFilteredItemsRef.current.length > 0) {
+        return previousFilteredItemsRef.current;
+      }
+      if (items && items.length > 0 && stableScope.organisationId) {
+        return (items || []).filter((item) => !item.meta?.hidden);
+      }
+      return [];
+    }
+
+    if (permissionsError) {
+      logger.warn(
+        "NavigationMenu",
+        "Permission check error - showing no items for security",
+        {
+          permissionsError: permissionsError?.message,
+        },
+      );
+      return [];
+    }
+
+    if (!permissionMap || Object.keys(permissionMap).length === 0) {
+      if (stableScope.organisationId && items && items.length > 0) {
+        return (items || []).filter((item) => !item.meta?.hidden);
+      }
+
+      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 [];
+    }
+
+    const getPageIdFromHref = (href?: string): string | null => {
+      if (!href) return null;
+      const path = href.split("?")[0].split("#")[0].replace(/^\//, "");
+      return path || "home";
+    };
+
+    const hasItemPermission = (item: NavigationItem): boolean => {
+      if (item.permissions && item.permissions.length > 0 && !item.href) {
+        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;
+          }
+        }
+      }
+
+      if (item.roles && item.roles.length > 0) {
+        const hasRole = item.roles.some((role) => {
+          if (typeof role !== "string") return true;
+
+          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:
+              return (
+                rbacContext.organisationRole === role ||
+                rbacContext.eventAppRole === role ||
+                rbacContext.isSuperAdmin
+              );
+          }
+        });
+        if (!hasRole) {
+          return false;
+        }
+      }
+
+      if (item.accessLevel) {
+        if (typeof item.accessLevel === "string") {
+          const accessLevel = item.accessLevel.toLowerCase() as RBACAccessLevel;
+          const userEventRole = rbacContext.eventAppRole;
+
+          if (!rbacContext.isSuperAdmin) {
+            const roleToAccessLevel: Record<string, RBACAccessLevel> = {
+              viewer: "viewer",
+              participant: "participant",
+              planner: "planner",
+              event_admin: "admin",
+            };
+            const userAccessLevel = userEventRole ? roleToAccessLevel[userEventRole] || "viewer" : null;
+
+            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;
+            }
+          }
+        }
+      }
+
+      if (item.href) {
+        const pageId = item.pageId || getPageIdFromHref(item.href);
+        if (pageId) {
+          const pagePermission: Permission = `read:page.${pageId}` as Permission;
+
+          const isSuperAdmin = permissionMap["*"] === true;
+          const hasPagePermission = permissionMap[pagePermission] === true;
+          const finalHasPermission = isSuperAdmin || hasPagePermission;
+
+          if (!finalHasPermission) {
+            return false;
+          }
+        }
+      }
+
+      return true;
+    };
+
+    const filterItem = (item: NavigationItem): NavigationItem | null => {
+      if (item.meta?.hidden) return null;
+
+      if (!hasItemPermission(item)) return null;
+
+      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 (filteredChildren.length === 0 && !item.href) {
+          return null;
+        }
+      }
+
+      return {
+        ...item,
+        children: filteredChildren,
+      };
+    };
+
+    const filtered = (items || [])
+      .map((item) => filterItem(item))
+      .filter((item): item is NavigationItem => item !== null);
+
+    previousFilteredItemsRef.current = filtered;
+
+    return filtered;
+  }, [
+    items,
+    itemsPreFiltered,
+    authContext,
+    rbacContext,
+    permissionMap,
+    hasAnyPermission,
+    scopeLoading,
+    scopeError,
+    permissionsLoading,
+    resolvedScope,
+    effectiveScope,
+    auditLog,
+    eventLoadingRaw,
+    eventLoading,
+    selectedEvent,
+    orgContextReady,
+    selectedOrganisation?.id,
+    permissionsError,
+    stableScope.organisationId,
+    stableScope.eventId,
+    stableScope.appId,
+  ]);
+
+  return {
+    authContext,
+    rbacContext,
+    filteredItems,
+    permissionMap,
+    hasAnyPermission: hasAnyPermission || null,
+  };
+}

package/src/components/PaceAppLayout/PaceAppLayout.integration.test.tsx

@@ -162,7 +162,7 @@ vi.mock('../../hooks/services/useEventService', () => ({
   useEventService: mockUseEventService,
 }));
 
-// Mock useEvents hook (used by useEventTheme and EventSelector)
+// Mock useEvents hook (used by useEventTheme and ContextSelector)
 // Use the hoisted mockUseEventService so useEvents can work properly
 // But also provide a direct mock for components that import useEvents directly
 const mockUseEvents = vi.hoisted(() => vi.fn(() => ({
@@ -302,20 +302,11 @@ vi.mock('../../rbac/hooks', () => ({
   })),
 }));
 
-// Mock EventSelector to avoid useEventService requirement
-// Mock both the component file and the index file
-vi.mock('../../EventSelector/EventSelector', () => ({
-  EventSelector: vi.fn(({ placeholder, className, 'data-testid': testId }: any) => (
-    <div data-testid={testId || 'event-selector'} className={className}>
-      {placeholder || 'Select event'}
-    </div>
-  ))
-}));
-
-vi.mock('../../EventSelector', () => ({
-  EventSelector: vi.fn(({ placeholder, className, 'data-testid': testId }: any) => (
-    <div data-testid={testId || 'event-selector'} className={className}>
-      {placeholder || 'Select event'}
+// Mock ContextSelector to avoid useEventService requirement
+vi.mock('../ContextSelector', () => ({
+  ContextSelector: vi.fn(({ placeholder, className, 'data-testid': testId }: any) => (
+    <div data-testid={testId || 'context-selector'} className={className}>
+      {placeholder || 'Select organisation or event'}
     </div>
   ))
 }));
@@ -334,7 +325,7 @@ vi.mock('../Header', () => ({
     userMenu,
     logo,
     logoUrl,
-    showEventSelector,
+    showContextSelector,
     showUserMenu,
     className
   }) => (
@@ -407,7 +398,7 @@ vi.mock('../Header', () => ({
         Change Password
       </button>
       <div data-testid="current-path">{currentPath}</div>
-      <div data-testid="show-event-selector">{showEventSelector !== false ? 'true' : 'false'}</div>
+      <div data-testid="show-context-selector">{showContextSelector !== false ? 'true' : 'false'}</div>
     </header>
   ))
 }));
@@ -1054,7 +1045,7 @@ describe('PaceAppLayout Integration', () => {
             headerActions={<HeaderActions />}
             customUserMenu={<CustomUserMenu />}
             customLogo={<CustomLogo />}
-            showEventSelector={false}
+            showContextSelector={false}
             showUserMenu={false}
             headerClassName="complex-header-class"
             enforcePermissions={false}
@@ -1073,7 +1064,7 @@ describe('PaceAppLayout Integration', () => {
       // Verify configuration is applied
       expect(screen.getByTestId('app-name')).toHaveTextContent('Complex App');
       expect(screen.getByTestId('nav-items-count')).toHaveTextContent('2');
-      expect(screen.getByTestId('show-event-selector')).toHaveTextContent('false');
+      expect(screen.getByTestId('show-context-selector')).toHaveTextContent('false');
       expect(screen.getByTestId('show-user-menu')).toHaveTextContent('false');
       expect(screen.getByTestId('mock-header')).toHaveClass('complex-header-class');
     });

package/src/components/PaceAppLayout/PaceAppLayout.performance.test.tsx

@@ -626,7 +626,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
           <TestWrapper>
             <PaceAppLayout 
               appName={`Test App ${i}`}
-              showEventSelector={i % 2 === 0}
+              showContextSelector={i % 2 === 0}
               showUserMenu={i % 2 === 1}
             />
           </TestWrapper>
@@ -916,7 +916,7 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
             navItems={customNavItems}
             headerActions={<HeaderActions />}
             customUserMenu={<CustomUserMenu />}
-            showEventSelector={false}
+            showContextSelector={false}
             showUserMenu={true}
             headerClassName="complex-header-class"
             enforcePermissions={false}

package/src/components/PaceAppLayout/PaceAppLayout.security.test.tsx

@@ -296,11 +296,11 @@ vi.mock('../../rbac/hooks', () => ({
   })),
 }));
 
-// Mock EventSelector to avoid useEventService requirement
-vi.mock('../EventSelector', () => ({
-  EventSelector: vi.fn(({ placeholder, className, 'data-testid': testId }: any) => (
-    <div data-testid={testId || 'event-selector'} className={className}>
-      {placeholder || 'Select event'}
+// Mock ContextSelector to avoid useEventService requirement
+vi.mock('../ContextSelector', () => ({
+  ContextSelector: vi.fn(({ placeholder, className, 'data-testid': testId }: any) => (
+    <div data-testid={testId || 'context-selector'} className={className}>
+      {placeholder || 'Select organisation or event'}
     </div>
   ))
 }));

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

@@ -205,14 +205,14 @@ vi.mock('../Header', () => ({
     onChangePassword, 
     currentPath, 
     onNavigate, 
-    showEventSelector, 
+    showContextSelector, 
     showUserMenu, 
     className 
   }: any) => (
     <header 
       data-testid="header" 
       className={className}
-      data-show-event-selector={showEventSelector !== false ? 'true' : 'false'}
+      data-show-context-selector={showContextSelector !== false ? 'true' : 'false'}
       data-show-user-menu={showUserMenu !== false ? 'true' : 'false'}
     >
       <div data-testid="header-logo" data-logo-url={logoUrl} data-logo-alt={logoAlt}>
@@ -421,29 +421,29 @@ describe('PaceAppLayout Component', () => {
         { withRouter: false }
       );
       
-      expect(screen.getByTestId('header')).toHaveAttribute('data-show-event-selector', 'true');
+      expect(screen.getByTestId('header')).toHaveAttribute('data-show-context-selector', 'true');
     });
 
-    it('hides event selector when showEventSelector is false', () => {
+    it('hides context selector when showContextSelector is false', () => {
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...baseProps} showEventSelector={false} />
+          <PaceAppLayout {...baseProps} showContextSelector={false} />
         </TestWrapper>,
         { withRouter: false }
       );
       
-      expect(screen.getByTestId('header')).toHaveAttribute('data-show-event-selector', 'false');
+      expect(screen.getByTestId('header')).toHaveAttribute('data-show-context-selector', 'false');
     });
 
-    it('shows event selector when showEventSelector is explicitly true', () => {
+    it('shows context selector when showContextSelector is explicitly true', () => {
       renderWithProviders(
         <TestWrapper>
-          <PaceAppLayout {...baseProps} showEventSelector={true} />
+          <PaceAppLayout {...baseProps} showContextSelector={true} />
         </TestWrapper>,
         { withRouter: false }
       );
       
-      expect(screen.getByTestId('header')).toHaveAttribute('data-show-event-selector', 'true');
+      expect(screen.getByTestId('header')).toHaveAttribute('data-show-context-selector', 'true');
     });
   });
 
@@ -889,7 +889,7 @@ describe('PaceAppLayout Component', () => {
       );
       
       await waitFor(() => {
-        // useCan is called with userId, scope, permission, pageId, useCache, appName
+        // useCan is called with userId, scope, permission, pageId, useCache, precomputedSuperAdmin, appName
         expect(mockUseCan).toHaveBeenCalledWith(
           'user-123',
           expect.objectContaining({
@@ -900,6 +900,7 @@ describe('PaceAppLayout Component', () => {
           'update:page.dashboard-page',
           'dashboard-page',
           true,
+          expect.any(Boolean), // precomputedSuperAdmin - can be false, null, or undefined during checks
           'Test App'
         );
       }, { timeout: 2000 });
@@ -921,7 +922,7 @@ describe('PaceAppLayout Component', () => {
       );
       
       await waitFor(() => {
-        // useCan is called with userId, scope, permission, pageId, useCache, appName
+        // useCan is called with userId, scope, permission, pageId, useCache, precomputedSuperAdmin, appName
         // Uses defaultPermission "create" since /dashboard is not in routePermissions
         expect(mockUseCan).toHaveBeenCalledWith(
           'user-123',
@@ -933,6 +934,7 @@ describe('PaceAppLayout Component', () => {
           'create:page.dashboard',
           'dashboard',
           true,
+          expect.any(Boolean), // precomputedSuperAdmin - can be false, null, or undefined during checks
           'Test App'
         );
       }, { timeout: 2000 });