@jmruthers/pace-core 0.5.189 → 0.5.190

package/src/components/DataTable/hooks/useDataTablePermissions.ts

@@ -96,7 +96,8 @@ export function useDataTablePermissions<TData extends DataRecord>(
 
   // Only update the stable scope if the resolved scope has actually changed
   // This prevents unnecessary re-renders while maintaining up-to-date permission checks
-  if (rawResolvedScope && rawResolvedScope.organisationId) {
+  // Allow scope updates even when organisationId is undefined (for users without orgs, like profile pages)
+  if (rawResolvedScope) {
     const newScope = {
       organisationId: rawResolvedScope.organisationId,
       appId: rawResolvedScope.appId,
@@ -113,8 +114,8 @@ export function useDataTablePermissions<TData extends DataRecord>(
         eventId: newScope.eventId
       };
     }
-  } else if (!rawResolvedScope) {
-    // Reset to empty scope when no resolved scope (e.g., user logged out)
+  } else if (!rawResolvedScope && !scopeLoading) {
+    // Reset to empty scope when no resolved scope and resolution is complete (e.g., user logged out)
     stableScopeRef.current = { organisationId: undefined, appId: undefined, eventId: undefined };
   }
 
@@ -123,10 +124,28 @@ export function useDataTablePermissions<TData extends DataRecord>(
   /**
    * Effective scope for permission checks.
    * 
-   * Only use the resolved scope if it has a valid organisationId and scope resolution is complete.
-   * This ensures permission checks only happen when we have proper context.
+   * Use the resolved scope once scope resolution is complete, even if organisationId is undefined.
+   * This allows permission checks for users without organisations (e.g., profile pages).
+   * The database function rbac_check_permission_simplified can handle NULL organisation_id.
+   * 
+   * IMPORTANT: When using pageName (not pageId), we MUST wait for appId to be resolved,
+   * because the RPC function needs appId to resolve the pageName to a pageId UUID.
+   * If we have a pageId (UUID), we can proceed even without appId.
+   * 
+   * The key issue: When pageName is used without appId, the RPC function cannot resolve
+   * the pageName to a pageId, which causes permission checks to fail initially, showing
+   * "Access Denied" before the scope resolves and permissions are re-checked.
    */
-  const effectiveScope = (!scopeLoading && stableScope.organisationId) ? stableScope : null;
+  const isPageName = !pageId && !!pageName; // We're using pageName, not a UUID pageId
+  const needsAppIdForResolution = isPageName; // Only need appId if we're resolving a pageName
+  
+  // Wait for scope resolution if:
+  // 1. Scope is still loading, OR
+  // 2. We're using pageName and don't have appId yet (needed to resolve pageName to pageId)
+  // This prevents premature permission checks that would fail and show "Access Denied"
+  const shouldWaitForScope = scopeLoading || (needsAppIdForResolution && !stableScope.appId);
+  
+  const effectiveScope = (!shouldWaitForScope) ? stableScope : null;
 
   // Always call hooks with consistent parameters to avoid React hooks order violations
   const userId = user?.id || '';
@@ -136,7 +155,9 @@ export function useDataTablePermissions<TData extends DataRecord>(
   const deletePermission = `delete:page.${effectivePageId}` as unknown as Permission;
 
   // Always use a consistent scope object to prevent hooks order violations
-  // When scope is loading or invalid, use empty scope which will cause useCan to return false
+  // When scope is loading or we need appId for pageName resolution, use empty scope which will cause useCan to wait
+  // When scope resolution is complete (even with undefined organisationId), use the resolved scope
+  // This allows permission checks for users without organisations (e.g., profile pages)
   const consistentScope = effectiveScope || { organisationId: undefined, eventId: undefined, appId: undefined };
 
   const permissions = {

package/src/components/DataTable/utils/__tests__/hierarchicalUtils.test.ts

@@ -281,10 +281,39 @@ describe('[unit] getRowDepth', () => {
     
     const childDepth = getRowDepth(nestedData[1], nestedData);
     const grandchildDepth = getRowDepth(nestedData[2], nestedData);
-    
+
     expect(childDepth).toBe(1);
     expect(grandchildDepth).toBe(2);
   });
+
+  it('caps traversal at the provided maximum depth', () => {
+    const deepHierarchy = [
+      { id: 'root', name: 'Root', value: 0, isParent: true },
+      ...Array.from({ length: 120 }, (_, index) => ({
+        id: `child-${index}`,
+        name: `Child ${index}`,
+        value: index,
+        parentId: index === 0 ? 'root' : `child-${index - 1}`,
+        isParent: false,
+      })),
+    ];
+
+    const deepestChild = deepHierarchy[deepHierarchy.length - 1];
+    const depth = getRowDepth(deepestChild, deepHierarchy, 50);
+
+    expect(depth).toBe(50);
+  });
+
+  it('breaks traversal on circular references', () => {
+    const cyclicHierarchy = [
+      { id: 'node1', name: 'Node 1', value: 1, parentId: 'node2', isParent: false },
+      { id: 'node2', name: 'Node 2', value: 2, parentId: 'node1', isParent: false }
+    ];
+
+    const depth = getRowDepth(cyclicHierarchy[0], cyclicHierarchy, 10);
+
+    expect(depth).toBe(2);
+  });
 });
 
 describe('[unit] shouldShowColumnForRow', () => {

package/src/components/DataTable/utils/hierarchicalUtils.ts

@@ -6,6 +6,7 @@
  */
 
 import type { HierarchicalDataRow, DataTableColumn, DataRecord } from '../types';
+import { createLogger } from '../../../utils/core/logger';
 
 /**
  * Validates that data conforms to hierarchical structure
@@ -83,7 +84,9 @@ export function groupHierarchicalData<TData extends HierarchicalDataRow>(
  * Optimized depth cache to avoid recalculating depth for the same row
  * This prevents O(n²) behavior when calculating depths for all rows
  */
-const depthCache = new WeakMap<unknown[], Map<string, number>>();
+const depthCache = new WeakMap<unknown[], Map<number, Map<string, number>>>();
+
+const logger = createLogger('HierarchicalUtils');
 
 /**
  * Gets the depth level of a row in the hierarchy
@@ -102,13 +105,20 @@ const depthCache = new WeakMap<unknown[], Map<string, number>>();
  */
 export function getRowDepth<TData extends HierarchicalDataRow>(
   row: TData,
-  allData: TData[]
+  allData: TData[],
+  maxDepth: number = 100
 ): number {
   // Check cache first
-  let cachedDepths = depthCache.get(allData);
+  let cachedDepthsByLimit = depthCache.get(allData);
+  if (!cachedDepthsByLimit) {
+    cachedDepthsByLimit = new Map();
+    depthCache.set(allData, cachedDepthsByLimit);
+  }
+
+  let cachedDepths = cachedDepthsByLimit.get(maxDepth);
   if (!cachedDepths) {
     cachedDepths = new Map();
-    depthCache.set(allData, cachedDepths);
+    cachedDepthsByLimit.set(maxDepth, cachedDepths);
   }
   
   // Return cached depth if available
@@ -118,7 +128,7 @@ export function getRowDepth<TData extends HierarchicalDataRow>(
   
   // Calculate depth
   let depth = 0;
-  
+
   if (row.isParent) {
     depth = 0;
   } else if (!row.parentId) {
@@ -131,25 +141,43 @@ export function getRowDepth<TData extends HierarchicalDataRow>(
         parentMap.set(item.id, item);
       }
     });
-    
+
+    const visited = new Set<string>();
+
     // Walk up the parent chain
     let current = row;
-    while (current.parentId) {
+    while (current.parentId && depth < maxDepth) {
+      if (visited.has(current.id)) {
+        logger.warn('Circular reference detected while calculating row depth', {
+          rowId: row.id,
+          currentId: current.id,
+        });
+        break;
+      }
+
+      visited.add(current.id);
       depth++;
       const parent = parentMap.get(current.parentId);
-      
+
       if (!parent || parent.isParent) {
         break;
       }
-      
+
       current = parent;
-      
+
       // Check cache during traversal
       if (cachedDepths.has(current.id)) {
         depth += cachedDepths.get(current.id)!;
         break;
       }
     }
+
+    if (depth >= maxDepth && current.parentId) {
+      logger.warn('Maximum hierarchy depth reached while calculating row depth', {
+        rowId: row.id,
+        maxDepth,
+      });
+    }
   }
   
   // Cache the result

package/src/components/DatePickerWithTimezone/DatePickerWithTimezone.test.tsx

@@ -301,13 +301,18 @@ describe('DatePickerWithTimezone Component', () => {
           selected: selected,
           onSelect: onSelect,
           initialFocus: true,
-          captionLayout: 'dropdown-buttons',
-          fromYear: 1900,
-          toYear: 2100,
+          captionLayout: 'dropdown',
+          startMonth: expect.any(Date),
+          endMonth: expect.any(Date),
           className: 'p-0'
         }),
         expect.anything()
       );
+      
+      // Verify the date range is correct
+      const callArgs = MockedCalendar.mock.calls[0][0];
+      expect(callArgs.startMonth).toEqual(new Date(1900, 0));
+      expect(callArgs.endMonth).toEqual(new Date(2100, 11));
     });
   });
 });

package/src/components/DatePickerWithTimezone/DatePickerWithTimezone.tsx

@@ -100,16 +100,16 @@ export function DatePickerWithTimezone({
           selected={selected}
           onSelect={onSelect}
           initialFocus
-          captionLayout="dropdown-buttons"
-          fromYear={1900}
-          toYear={2100}
+          captionLayout="dropdown"
+          startMonth={new Date(1900, 0)}
+          endMonth={new Date(2100, 11)}
           className="p-0"
         />
       </div>
 
       <div className="flex items-center justify-between border-t border-border px-3 py-2">
         <div className="flex items-center gap-2 text-sm text-muted-foreground">
-          <Clock className="h-4 w-4" aria-hidden="true" />
+          <Clock className="size-4" aria-hidden="true" />
           <span>
             Timezone: <span aria-label={`Timezone ${timezoneDisplay}`}>{timezoneDisplay}</span>
           </span>

package/src/components/Dialog/Dialog.tsx

@@ -280,7 +280,7 @@ const sizeClasses = {
   md: 'max-w-md', 
   lg: 'max-w-lg',
   xl: 'max-w-xl',
-  full: 'max-w-full h-full',
+  full: 'max-w-full size-full',
   auto: 'max-w-none w-auto min-w-0'
 };
 
@@ -527,7 +527,7 @@ const DialogContent = React.forwardRef<
         {children}
         {showCloseButton && (
           <DialogPrimitive.Close className="absolute right-4 top-4 z-10 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-            <X className="h-4 w-4" />
+            <X className="size-4" />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
         )}

package/src/components/EventSelector/EventSelector.tsx

@@ -296,7 +296,7 @@ export function EventSelector({
     return (
       <div className={className}>
         <Alert variant="destructive">
-          <Lock className="h-4 w-4" />
+          <Lock className="size-4" />
           <AlertDescription className="flex items-center justify-between">
             <span>{error.message}</span>
             {showRetryButton && (
@@ -306,7 +306,7 @@ export function EventSelector({
                 onClick={handleRetry}
                 className="ml-2"
               >
-                <RefreshCw className="h-3 w-3 mr-1" />
+                <RefreshCw className="size-3 mr-1" />
                 Retry
               </Button>
             )}
@@ -322,7 +322,7 @@ export function EventSelector({
       return (
         <div className={className}>
           <Alert variant="inline">
-            <AlertCircle className="h-4 w-4 text-acc-700" />
+            <AlertCircle className="size-4 text-acc-700" />
             <AlertDescription className="flex items-center justify-between">
               <span>No events available.</span>
               {showRetryButton && (
@@ -332,7 +332,7 @@ export function EventSelector({
                   onClick={handleRetry}
                   className="ml-2"
                 >
-                  <RefreshCw className="h-3 w-3 mr-1" />
+                  <RefreshCw className="size-3 mr-1" />
                   Refresh
                 </Button>
               )}
@@ -355,7 +355,7 @@ export function EventSelector({
         <SelectValue placeholder={placeholder}>
           {selectedEvent && (
             <div className="flex items-center gap-2">
-              <Calendar className="h-4 w-4 flex-shrink-0" />
+              <Calendar className="size-4 flex-shrink-0" />
               <span className="truncate">{selectedEvent.event_name}</span>
               {selectedEvent.event_date && (
                 <span className="text-xs text-muted-foreground flex-shrink-0">
@@ -380,7 +380,7 @@ export function EventSelector({
               >
                 <div className="flex items-center gap-2 w-full">
                   {showNextEventIndicator && isNext && (
-                    <Star className="h-3 w-3 text-acc-500" />
+                    <Star className="size-3 text-acc-500" />
                   )}
                   <div className="flex-1">
                     <div className="flex items-center gap-2">
@@ -395,7 +395,7 @@ export function EventSelector({
                     </div>
                     {showEventDetails && event.event_date && (
                       <div className="flex items-center gap-1 text-xs text-muted-foreground">
-                        <Calendar className="h-3 w-3" />
+                        <Calendar className="size-3" />
                         <span>{formatEventDate(event.event_date)}</span>
                         {showNextEventIndicator && isNext && (
                           <span className="text-acc-600 font-medium">