canopycms 0.0.0

package/src/editor/hooks/useUserContext.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react'
+import { createApiClient } from '../../api'
+import type { UserContext } from '../BranchManager'
+
+export interface UseUserContextReturn {
+  userContext: UserContext | undefined
+  loading: boolean
+  error: string | undefined
+}
+
+/**
+ * Hook to fetch current user context from the API.
+ * This provides the userId and groups needed for permission checks.
+ *
+ * @example
+ * ```tsx
+ * const { userContext, loading, error } = useUserContext()
+ *
+ * if (loading) return <div>Loading...</div>
+ * if (error) return <div>Error: {error}</div>
+ *
+ * return <BranchManager user={userContext} />
+ * ```
+ */
+export function useUserContext(): UseUserContextReturn {
+  const [userContext, setUserContext] = useState<UserContext | undefined>()
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | undefined>()
+
+  useEffect(() => {
+    const fetchUserContext = async () => {
+      setLoading(true)
+      try {
+        const apiClient = createApiClient()
+        const result = await apiClient.user.whoami()
+
+        if (result.ok && result.data) {
+          setUserContext({
+            userId: result.data.userId,
+            groups: result.data.groups,
+          })
+        } else {
+          setError(result.error || 'Failed to load user context')
+        }
+      } catch (err) {
+        console.error('Failed to fetch user context:', err)
+        setError(err instanceof Error ? err.message : 'Unknown error')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchUserContext()
+  }, [])
+
+  return { userContext, loading, error }
+}

package/src/editor/hooks/useUserMetadata.test.ts

@@ -0,0 +1,191 @@
+import { describe, it, expect, vi } from 'vitest'
+import { renderHook, waitFor } from '@testing-library/react'
+import { useUserMetadata } from './useUserMetadata'
+import type { UserSearchResult } from '../../auth/types'
+
+describe('useUserMetadata', () => {
+  const mockUser: UserSearchResult = {
+    id: 'user-1',
+    name: 'Alice Johnson',
+    email: 'alice@example.com',
+    avatarUrl: 'https://example.com/avatar.jpg',
+  }
+
+  it('returns cached user immediately if provided', () => {
+    const getUserMetadata = vi.fn()
+
+    const { result } = renderHook(() => useUserMetadata('user-1', getUserMetadata, mockUser))
+
+    // Should return cached user immediately
+    expect(result.current.userMetadata).toEqual(mockUser)
+    expect(result.current.isLoading).toBe(false)
+    expect(result.current.error).toBe(null)
+
+    // Should not call getUserMetadata
+    expect(getUserMetadata).not.toHaveBeenCalled()
+  })
+
+  it('fetches from getUserMetadata on mount', async () => {
+    const getUserMetadata = vi.fn(async (userId: string) => {
+      if (userId === 'user-1') return mockUser
+      return null
+    })
+
+    const { result } = renderHook(() => useUserMetadata('user-1', getUserMetadata))
+
+    // Should be loading initially
+    expect(result.current.isLoading).toBe(true)
+    expect(result.current.userMetadata).toBe(null)
+
+    // Wait for fetch to complete
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+
+    // Should have fetched user
+    expect(result.current.userMetadata).toEqual(mockUser)
+    expect(result.current.error).toBe(null)
+    expect(getUserMetadata).toHaveBeenCalledWith('user-1')
+  })
+
+  it('handles anonymous user without API call', async () => {
+    const getUserMetadata = vi.fn()
+
+    const { result } = renderHook(() => useUserMetadata('anonymous', getUserMetadata))
+
+    // Should return anonymous user immediately
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+
+    expect(result.current.userMetadata).toEqual({
+      id: 'anonymous',
+      name: 'Anonymous',
+      email: 'public',
+    })
+    expect(result.current.error).toBe(null)
+
+    // Should not call getUserMetadata for anonymous
+    expect(getUserMetadata).not.toHaveBeenCalled()
+  })
+
+  it('updates when userId changes', async () => {
+    const mockUser2: UserSearchResult = {
+      id: 'user-2',
+      name: 'Bob Smith',
+      email: 'bob@example.com',
+    }
+
+    const getUserMetadata = vi.fn(async (userId: string) => {
+      if (userId === 'user-1') return mockUser
+      if (userId === 'user-2') return mockUser2
+      return null
+    })
+
+    const { result, rerender } = renderHook(
+      ({ userId }) => useUserMetadata(userId, getUserMetadata),
+      { initialProps: { userId: 'user-1' } },
+    )
+
+    // Wait for first fetch
+    await waitFor(() => {
+      expect(result.current.userMetadata).toEqual(mockUser)
+    })
+
+    // Change userId
+    rerender({ userId: 'user-2' })
+
+    // Should fetch new user
+    await waitFor(() => {
+      expect(result.current.userMetadata).toEqual(mockUser2)
+    })
+
+    expect(getUserMetadata).toHaveBeenCalledWith('user-1')
+    expect(getUserMetadata).toHaveBeenCalledWith('user-2')
+  })
+
+  it('handles errors gracefully', async () => {
+    const getUserMetadata = vi.fn(async () => {
+      throw new Error('Network error')
+    })
+
+    const { result } = renderHook(() => useUserMetadata('user-1', getUserMetadata))
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+
+    expect(result.current.userMetadata).toBe(null)
+    expect(result.current.error).toEqual(new Error('Network error'))
+  })
+
+  it('handles non-Error exceptions', async () => {
+    const getUserMetadata = vi.fn(async () => {
+      throw 'String error'
+    })
+
+    const { result } = renderHook(() => useUserMetadata('user-1', getUserMetadata))
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+
+    expect(result.current.userMetadata).toBe(null)
+    expect(result.current.error).toEqual(new Error('Failed to fetch user'))
+  })
+
+  it('cleans up on unmount (no state updates after unmount)', async () => {
+    let resolveUser: ((value: UserSearchResult) => void) | undefined
+    const getUserMetadata = vi.fn(async () => {
+      return new Promise<UserSearchResult>((resolve) => {
+        resolveUser = resolve
+      })
+    })
+
+    const { result, unmount } = renderHook(() => useUserMetadata('user-1', getUserMetadata))
+
+    // Should be loading
+    expect(result.current.isLoading).toBe(true)
+
+    // Unmount before fetch completes
+    unmount()
+
+    // Now resolve the promise (force call it since we know it's been set)
+    ;(resolveUser as (value: UserSearchResult) => void)(mockUser)
+
+    // Wait a bit to ensure no state updates happen
+    await new Promise((resolve) => setTimeout(resolve, 50))
+
+    // No errors should be thrown (state updates on unmounted component would cause warnings)
+  })
+
+  it('handles null return from getUserMetadata', async () => {
+    const getUserMetadata = vi.fn(async () => null)
+
+    const { result } = renderHook(() => useUserMetadata('user-1', getUserMetadata))
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+
+    expect(result.current.userMetadata).toBe(null)
+    expect(result.current.error).toBe(null)
+  })
+
+  it('skips fetch when cachedUser is provided even if getUserMetadata would return different data', async () => {
+    const differentUser: UserSearchResult = {
+      id: 'user-1',
+      name: 'Different Name',
+      email: 'different@example.com',
+    }
+
+    const getUserMetadata = vi.fn(async () => differentUser)
+
+    const { result } = renderHook(() => useUserMetadata('user-1', getUserMetadata, mockUser))
+
+    // Should use cached user
+    expect(result.current.userMetadata).toEqual(mockUser)
+    expect(result.current.isLoading).toBe(false)
+    expect(getUserMetadata).not.toHaveBeenCalled()
+  })
+})

package/src/editor/hooks/useUserMetadata.ts

@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react'
+import type { UserSearchResult } from '../../auth/types'
+import type { CanopyUserId } from '../../types'
+
+export interface UseUserMetadataResult {
+  userMetadata: UserSearchResult | null
+  isLoading: boolean
+  error: Error | null
+}
+
+/**
+ * Fetches user metadata using the provided getter function.
+ *
+ * @param userId - User ID to fetch metadata for
+ * @param getUserMetadata - Function to fetch user metadata
+ * @param cachedUser - Optional: if provided, returns immediately without fetching
+ */
+export function useUserMetadata(
+  userId: CanopyUserId,
+  getUserMetadata: (userId: string) => Promise<UserSearchResult | null>,
+  cachedUser?: UserSearchResult,
+): UseUserMetadataResult {
+  const [userMetadata, setUserMetadata] = useState<UserSearchResult | null>(cachedUser || null)
+  const [isLoading, setIsLoading] = useState(!cachedUser)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    // Skip fetch if cachedUser provided
+    if (cachedUser) return
+
+    // Special case: anonymous user
+    if (userId === 'anonymous') {
+      setUserMetadata({
+        id: 'anonymous',
+        name: 'Anonymous',
+        email: 'public',
+      })
+      setIsLoading(false)
+      return
+    }
+
+    let cancelled = false
+
+    const fetchUser = async () => {
+      setIsLoading(true)
+      try {
+        const result = await getUserMetadata(userId)
+        if (!cancelled) {
+          setUserMetadata(result)
+          setError(null)
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err : new Error('Failed to fetch user'))
+        }
+      } finally {
+        if (!cancelled) {
+          setIsLoading(false)
+        }
+      }
+    }
+
+    fetchUser()
+
+    return () => {
+      cancelled = true
+    }
+  }, [userId, getUserMetadata, cachedUser])
+
+  return { userMetadata, isLoading, error }
+}

package/src/editor/permission-manager/GroupSelector.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+/**
+ * Group search and selection component
+ */
+
+import React from 'react'
+import { Paper, Stack, Text } from '@mantine/core'
+import type { GroupSelectItem } from './types'
+
+export interface GroupSelectorProps {
+  searchQuery: string
+  onSearchChange: (query: string) => void
+  filteredGroups: GroupSelectItem[]
+  onSelectGroup: (groupId: string) => void
+}
+
+export const GroupSelector: React.FC<GroupSelectorProps> = ({
+  searchQuery,
+  onSearchChange,
+  filteredGroups,
+  onSelectGroup,
+}) => {
+  return (
+    <Paper withBorder p="xs" mt="xs" style={{ maxWidth: 300 }}>
+      <Stack gap="xs">
+        <input
+          type="text"
+          placeholder="Search groups..."
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.target.value)}
+          aria-label="Search groups"
+          style={{
+            width: '100%',
+            padding: '4px 6px',
+            border: '1px solid var(--mantine-color-gray-4)',
+            borderRadius: 'var(--mantine-radius-sm)',
+            fontSize: '12px',
+          }}
+        />
+        {filteredGroups.length > 0 && (
+          <div style={{ maxHeight: 200, overflowY: 'auto' }}>
+            {filteredGroups.map((group) => (
+              <div
+                key={group.value}
+                style={{
+                  padding: '4px 6px',
+                  cursor: 'pointer',
+                  borderRadius: 'var(--mantine-radius-sm)',
+                  fontSize: '12px',
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.backgroundColor = 'var(--mantine-color-gray-1)'
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.backgroundColor = 'transparent'
+                }}
+                onClick={() => onSelectGroup(group.value)}
+              >
+                {group.label}
+              </div>
+            ))}
+          </div>
+        )}
+        {searchQuery.trim() && filteredGroups.length === 0 && (
+          <Text size="xs" c="dimmed">
+            No groups found
+          </Text>
+        )}
+      </Stack>
+    </Paper>
+  )
+}