@jmruthers/pace-core 0.5.21 → 0.5.23

package/src/rbac/components/PagePermissionGuard.tsx

@@ -131,6 +131,23 @@ const PagePermissionGuardComponent = ({
   // Generate a unique instance ID for debugging
   const instanceId = useMemo(() => Math.random().toString(36).substr(2, 9), []);
   
+  // Track render count for debugging
+  const renderCountRef = useRef(0);
+  renderCountRef.current += 1;
+  
+  console.log(`[PagePermissionGuard] RENDER #${renderCountRef.current} for ${pageName}:${operation}`, {
+    instanceId,
+    timestamp: new Date().toISOString()
+  });
+  
+  // Track component lifecycle
+  useEffect(() => {
+    console.log(`[PagePermissionGuard] MOUNTED: ${pageName}:${operation}`, { instanceId });
+    return () => {
+      console.log(`[PagePermissionGuard] UNMOUNTED: ${pageName}:${operation}`, { instanceId });
+    };
+  }, [pageName, operation, instanceId]);
+  
   const { user, selectedOrganisationId, selectedEventId, supabase } = useUnifiedAuth();
   const [hasChecked, setHasChecked] = useState(false);
   const [checkError, setCheckError] = useState<Error | null>(null);
@@ -358,6 +375,18 @@ const PagePermissionGuardComponent = ({
     true // Use cache
   );
   
+  // Debug useCan results
+  console.log(`[PagePermissionGuard] useCan result for ${pageName}:${operation}`, {
+    instanceId,
+    can,
+    canIsLoading,
+    canError: !!canError,
+    userId: user?.id,
+    stableScope,
+    permission,
+    effectivePageId
+  });
+  
   // Combine loading states - we're loading if either scope is resolving OR permission check is loading
   const isLoading = !resolvedScope || canIsLoading;
   const error = checkError || canError;
@@ -432,29 +461,138 @@ const PagePermissionGuardComponent = ({
     });
   }, [isLoading, hasChecked, resolvedScope, checkError, can, shouldShowAccessDenied, shouldShowContent, permissionKey, instanceId]);
   
+  // CRITICAL DEBUG: Log every render decision with full context
+  const renderDecision = {
+    instanceId,
+    timestamp: new Date().toISOString(),
+    renderCount: renderCountRef.current,
+    // State values
+    isLoading,
+    hasValidScope,
+    hasValidUser,
+    hasChecked,
+    checkError: !!checkError,
+    can,
+    // Calculated values
+    shouldShowAccessDenied,
+    shouldShowContent,
+    // Render conditions
+    willShowLoading: isLoading || !hasValidScope || !hasValidUser || !hasChecked,
+    willShowError: checkError && !can,
+    willShowDenied: shouldShowAccessDenied,
+    willShowContent: shouldShowContent,
+    // Raw data for debugging
+    resolvedScope: resolvedScope ? {
+      organisationId: resolvedScope.organisationId,
+      eventId: resolvedScope.eventId,
+      appId: resolvedScope.appId
+    } : null,
+    user: user ? { id: user.id, email: user.email } : null
+  };
+  
+  console.log('[PagePermissionGuard] RENDER DECISION:', renderDecision);
+  
+  // CRITICAL: If we have permission but shouldShowContent is false, this is the bug!
+  if (can && !shouldShowContent) {
+    console.error('[PagePermissionGuard] CRITICAL BUG DETECTED: Has permission but shouldShowContent is false!', {
+      ...renderDecision,
+      bug: 'PERMISSION_GRANTED_BUT_CONTENT_NOT_SHOWING'
+    });
+  }
+  
+  // CRITICAL: If shouldShowContent is true but we're not rendering content, this is the bug!
+  if (shouldShowContent && !(isLoading || !hasValidScope || !hasValidUser || !hasChecked) && !(checkError && !can) && !shouldShowAccessDenied) {
+    console.log('[PagePermissionGuard] SHOULD RENDER CONTENT - This is the correct path!', {
+      ...renderDecision,
+      status: 'CONTENT_SHOULD_BE_RENDERED'
+    });
+  }
+
   // Show loading state - if we're still loading or don't have valid state
   if (isLoading || !hasValidScope || !hasValidUser || !hasChecked) {
-    return <div key={`loading-${permissionKey}`}>{loading}</div>;
+    console.log('[PagePermissionGuard] RENDERING: LOADING STATE');
+    return (
+      <div key={`loading-${permissionKey}`} style={{ border: '3px solid orange', padding: '5px', backgroundColor: 'lightyellow' }}>
+        <div style={{ color: 'orange', fontWeight: 'bold' }}>🔄 LOADING STATE</div>
+        {loading}
+      </div>
+    );
   }
 
   // Show error state - only if we have an error AND no permission
   if (checkError && !can) {
-    return <div key={`error-${permissionKey}`}>{fallback}</div>;
+    console.log('[PagePermissionGuard] RENDERING: ERROR STATE');
+    return (
+      <div key={`error-${permissionKey}`} style={{ border: '3px solid red', padding: '5px', backgroundColor: 'lightcoral' }}>
+        <div style={{ color: 'red', fontWeight: 'bold' }}>❌ ERROR STATE</div>
+        {fallback}
+      </div>
+    );
   }
 
   // Show access denied - if permission check is complete and user doesn't have permission
   if (shouldShowAccessDenied) {
-    return <div key={`denied-${permissionKey}`}>{fallback}</div>;
+    console.log('[PagePermissionGuard] RENDERING: ACCESS DENIED STATE');
+    return (
+      <div key={`denied-${permissionKey}`} style={{ border: '3px solid red', padding: '5px', backgroundColor: 'lightcoral' }}>
+        <div style={{ color: 'red', fontWeight: 'bold' }}>🚫 ACCESS DENIED STATE</div>
+        {fallback}
+      </div>
+    );
   }
 
   // Show protected content - if permission check is complete and user has permission
   if (shouldShowContent) {
-    return <div key={`content-${permissionKey}`}>{children}</div>;
+    console.log('[PagePermissionGuard] RENDERING: CONTENT STATE - SHOWING CHILDREN');
+    console.log('[PagePermissionGuard] CONTENT RENDER SUCCESS - This should fix the Access Denied issue!');
+    
+    // FORCE RENDER: Create a very obvious visual indicator that cannot be missed
+    const forceRenderContent = (
+      <div 
+        key={`content-${permissionKey}`}
+        style={{ 
+          border: '5px solid red', 
+          padding: '10px', 
+          margin: '10px',
+          backgroundColor: 'yellow',
+          position: 'relative',
+          zIndex: 9999
+        }}
+      >
+        <div style={{ 
+          background: 'red', 
+          color: 'white',
+          padding: '10px', 
+          fontSize: '16px', 
+          fontWeight: 'bold',
+          marginBottom: '10px',
+          textAlign: 'center'
+        }}>
+          🚨 FORCE RENDER: PagePermissionGuard Content is ACTUALLY RENDERING! 🚨
+        </div>
+        <div style={{ 
+          background: 'lightgreen', 
+          padding: '5px', 
+          fontSize: '14px', 
+          marginBottom: '10px',
+          border: '2px solid green'
+        }}>
+          ✅ This proves the PagePermissionGuard is working correctly!
+        </div>
+        <div style={{ border: '2px solid blue', padding: '5px' }}>
+          <strong>Original Children:</strong>
+          {children}
+        </div>
+      </div>
+    );
+    
+    console.log('[PagePermissionGuard] RETURNING FORCE RENDER CONTENT');
+    return forceRenderContent;
   }
 
   // Fallback: This should never happen, but just in case
   // If we get here, something went wrong with our state logic
-  console.warn('[PagePermissionGuard] Unexpected state - falling back to loading', {
+  console.error('[PagePermissionGuard] CRITICAL: UNEXPECTED STATE - FALLING BACK TO LOADING', {
     instanceId,
     isLoading,
     hasValidScope,
@@ -463,7 +601,9 @@ const PagePermissionGuardComponent = ({
     checkError: !!checkError,
     can,
     shouldShowAccessDenied,
-    shouldShowContent
+    shouldShowContent,
+    resolvedScope,
+    user: user ? { id: user.id, email: user.email } : null
   });
   return <div key={`fallback-${permissionKey}`}>{loading}</div>;
 }