canopycms 0.0.0

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

@@ -0,0 +1,294 @@
+'use client'
+
+/**
+ * PermissionManager - Main component for managing path-based permissions.
+ *
+ * This component provides a tree-based UI for configuring read/edit/review
+ * permissions on content paths. Supports both schema-based and collection-based
+ * tree building.
+ */
+
+import React, { useState, useCallback } from 'react'
+import { Alert, Button, Group, Loader, ScrollArea, Stack, Text } from '@mantine/core'
+import { IconAlertCircle } from '@tabler/icons-react'
+import type { PermissionManagerProps, PermissionLevel } from './types'
+import { usePermissionTree } from './hooks/usePermissionTree'
+import { useGroupsAndUsers } from './hooks/useGroupsAndUsers'
+import { PermissionTree } from './PermissionTree'
+import { findTreeNode } from './utils'
+
+export const PermissionManager: React.FC<PermissionManagerProps> = ({
+  collections,
+  contentRoot = 'content',
+  permissions,
+  canEdit,
+  onSave,
+  onSearchUsers,
+  onGetUserMetadata,
+  onListGroups,
+  onClose: __,
+  loading = false,
+  contentTree,
+}) => {
+  const [isSaving, setIsSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [activeLevel, setActiveLevel] = useState<PermissionLevel>('read')
+
+  // Tree state management
+  const {
+    annotatedTree,
+    expandedNodes,
+    selectedNode,
+    localPermissions,
+    isDirty,
+    toggleNode,
+    expandAll,
+    collapseAll,
+    selectNode,
+    updateNodePermission,
+    resetPermissions,
+    setIsDirty,
+  } = usePermissionTree({
+    collections,
+    contentRoot,
+    permissions,
+    contentTree,
+  })
+
+  // Groups and user search
+  const {
+    groupSelectData,
+    filteredGroups,
+    groupLoadError,
+    groupSearchQuery,
+    showGroupSearch,
+    setGroupSearchQuery,
+    setShowGroupSearch,
+    clearGroupLoadError,
+    userSearchResults,
+    isSearchingUsers,
+    userSearchQuery,
+    showUserSearch,
+    userSearchError,
+    setUserSearchQuery,
+    toggleUserSearch,
+  } = useGroupsAndUsers({
+    onListGroups,
+    onSearchUsers,
+    canEdit,
+  })
+
+  // Save handler
+  const handleSave = useCallback(async () => {
+    if (!onSave) return
+
+    setIsSaving(true)
+    setError(null)
+    try {
+      await onSave(localPermissions)
+      setIsDirty(false)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save permissions')
+    } finally {
+      setIsSaving(false)
+    }
+  }, [onSave, localPermissions, setIsDirty])
+
+  // Discard handler
+  const handleDiscard = useCallback(() => {
+    resetPermissions()
+    setError(null)
+  }, [resetPermissions])
+
+  // User add handler with search state cleanup
+  const handleAddUser = useCallback(
+    (nodePath: string, level: PermissionLevel, userId: string) => {
+      const treeNode = findTreeNode(annotatedTree, nodePath)
+      const permissionPath = treeNode?.type === 'folder' ? `${nodePath}/**` : nodePath
+      const existingPerm = localPermissions.find((p) => p.path === permissionPath)
+      const currentTarget = existingPerm?.[level]
+      const currentUsers = currentTarget?.allowedUsers ?? []
+
+      if (!currentUsers.includes(userId)) {
+        updateNodePermission(nodePath, level, {
+          allowedUsers: [...currentUsers, userId],
+          allowedGroups: currentTarget?.allowedGroups,
+        })
+      }
+
+      // Clear search state
+      setUserSearchQuery('')
+      toggleUserSearch(false)
+    },
+    [annotatedTree, localPermissions, updateNodePermission, setUserSearchQuery, toggleUserSearch],
+  )
+
+  // User remove handler
+  const handleRemoveUser = useCallback(
+    (nodePath: string, level: PermissionLevel, userId: string) => {
+      const treeNode = findTreeNode(annotatedTree, nodePath)
+      const permissionPath = treeNode?.type === 'folder' ? `${nodePath}/**` : nodePath
+      const existingPerm = localPermissions.find((p) => p.path === permissionPath)
+      const currentTarget = existingPerm?.[level]
+      if (!currentTarget) return
+
+      updateNodePermission(nodePath, level, {
+        allowedUsers: (currentTarget.allowedUsers ?? []).filter((u) => u !== userId),
+        allowedGroups: currentTarget.allowedGroups,
+      })
+    },
+    [annotatedTree, localPermissions, updateNodePermission],
+  )
+
+  // Group add handler
+  const handleAddGroup = useCallback(
+    (nodePath: string, level: PermissionLevel, groupId: string) => {
+      const treeNode = findTreeNode(annotatedTree, nodePath)
+      const permissionPath = treeNode?.type === 'folder' ? `${nodePath}/**` : nodePath
+      const existingPerm = localPermissions.find((p) => p.path === permissionPath)
+      const currentTarget = existingPerm?.[level]
+      const currentGroups = currentTarget?.allowedGroups ?? []
+
+      if (!currentGroups.includes(groupId)) {
+        updateNodePermission(nodePath, level, {
+          allowedGroups: [...currentGroups, groupId],
+          allowedUsers: currentTarget?.allowedUsers,
+        })
+      }
+
+      setGroupSearchQuery('')
+      setShowGroupSearch(false)
+    },
+    [
+      annotatedTree,
+      localPermissions,
+      updateNodePermission,
+      setGroupSearchQuery,
+      setShowGroupSearch,
+    ],
+  )
+
+  // Group remove handler
+  const handleRemoveGroup = useCallback(
+    (nodePath: string, level: PermissionLevel, groupId: string) => {
+      const treeNode = findTreeNode(annotatedTree, nodePath)
+      const permissionPath = treeNode?.type === 'folder' ? `${nodePath}/**` : nodePath
+      const existingPerm = localPermissions.find((p) => p.path === permissionPath)
+      const currentTarget = existingPerm?.[level]
+      if (!currentTarget) return
+
+      updateNodePermission(nodePath, level, {
+        allowedGroups: (currentTarget.allowedGroups ?? []).filter((g) => g !== groupId),
+        allowedUsers: currentTarget.allowedUsers,
+      })
+    },
+    [annotatedTree, localPermissions, updateNodePermission],
+  )
+
+  return (
+    <Stack h="100%" style={{ display: 'flex', flexDirection: 'column' }} gap={0}>
+      {!canEdit && (
+        <Alert icon={<IconAlertCircle size={16} />} color="yellow" mb="sm" title="Read-only">
+          You need admin access to edit permissions
+        </Alert>
+      )}
+
+      {error && (
+        <Alert
+          icon={<IconAlertCircle size={16} />}
+          color="red"
+          mb="sm"
+          title="Error"
+          withCloseButton
+          onClose={() => setError(null)}
+        >
+          {error}
+        </Alert>
+      )}
+
+      {groupLoadError && (
+        <Alert
+          icon={<IconAlertCircle size={16} />}
+          color="orange"
+          mb="sm"
+          title="Warning"
+          withCloseButton
+          onClose={clearGroupLoadError}
+        >
+          {groupLoadError}
+        </Alert>
+      )}
+
+      <Group gap="xs" pb="sm">
+        <Button size="xs" variant="subtle" onClick={expandAll}>
+          Expand All
+        </Button>
+        <Button size="xs" variant="subtle" onClick={collapseAll}>
+          Collapse All
+        </Button>
+      </Group>
+
+      <ScrollArea style={{ flex: 1 }} pb="md">
+        {loading ? (
+          <Group justify="center" py="xl">
+            <Loader size="md" />
+            <Text size="sm" c="dimmed">
+              Loading permissions...
+            </Text>
+          </Group>
+        ) : (
+          <PermissionTree
+            node={annotatedTree}
+            expandedNodes={expandedNodes}
+            selectedNode={selectedNode}
+            canEdit={canEdit}
+            groups={groupSelectData}
+            activeLevel={activeLevel}
+            userSearchResults={userSearchResults}
+            isSearchingUsers={isSearchingUsers}
+            showUserSearch={showUserSearch}
+            userSearchQuery={userSearchQuery}
+            userSearchError={userSearchError}
+            showGroupSearch={showGroupSearch}
+            groupSearchQuery={groupSearchQuery}
+            filteredGroups={filteredGroups}
+            onToggle={toggleNode}
+            onSelect={selectNode}
+            onSetActiveLevel={setActiveLevel}
+            onUpdatePermission={updateNodePermission}
+            onSearchUsers={setUserSearchQuery}
+            onGetUserMetadata={onGetUserMetadata}
+            onToggleUserSearch={toggleUserSearch}
+            onAddUser={handleAddUser}
+            onRemoveUser={handleRemoveUser}
+            onSearchGroups={setGroupSearchQuery}
+            onToggleGroupSearch={setShowGroupSearch}
+            onAddGroup={handleAddGroup}
+            onRemoveGroup={handleRemoveGroup}
+          />
+        )}
+      </ScrollArea>
+
+      {canEdit && isDirty && (
+        <Group
+          justify="flex-end"
+          py="sm"
+          gap="sm"
+          style={{ borderTop: '1px solid var(--mantine-color-gray-3)' }}
+        >
+          <Button variant="subtle" color="neutral" onClick={handleDiscard} disabled={isSaving}>
+            Discard Changes
+          </Button>
+          <Button onClick={handleSave} loading={isSaving} disabled={isSaving}>
+            Save Permissions
+          </Button>
+        </Group>
+      )}
+    </Stack>
+  )
+}
+
+// Re-export types and components for external use
+export type { PermissionManagerProps, ContentNode, TreeNode } from './types'
+export { usePermissionTree } from './hooks/usePermissionTree'
+export { useGroupsAndUsers } from './hooks/useGroupsAndUsers'

package/src/editor/permission-manager/types.ts

@@ -0,0 +1,58 @@
+/**
+ * Types for PermissionManager component
+ */
+
+import type { PathPermission, PermissionLevel, PermissionTarget } from '../../config'
+import type { UserSearchResult, GroupMetadata } from '../../auth/types'
+import type { EditorCollection } from '../Editor'
+
+export interface PermissionManagerProps {
+  /** Collections from API */
+  collections?: EditorCollection[]
+  /** Content root path (default: 'content') */
+  contentRoot?: string
+  /** Current permissions */
+  permissions: PathPermission[]
+  /** Whether user can edit permissions (admin only) */
+  canEdit: boolean
+  /** Handler to save updated permissions */
+  onSave?: (permissions: PathPermission[]) => Promise<void>
+  /** Handler to search users */
+  onSearchUsers?: (query: string, limit?: number) => Promise<UserSearchResult[]>
+  /** Handler to get user metadata by ID */
+  onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>
+  /** Handler to list groups */
+  onListGroups?: () => Promise<GroupMetadata[]>
+  /** Close handler */
+  onClose?: () => void
+  /** Loading state */
+  loading?: boolean
+  /** Optional: actual filesystem content tree (for entries not in schema) */
+  contentTree?: ContentNode
+}
+
+export interface ContentNode {
+  path: string
+  name: string
+  type: 'folder' | 'file'
+  children?: ContentNode[]
+}
+
+export interface TreeNode {
+  path: string
+  name: string
+  type: 'folder' | 'file'
+  children: TreeNode[]
+  /** Permissions directly assigned to this node */
+  directPermission?: PathPermission
+  /** Permissions inherited from parent */
+  inheritedPermission?: PathPermission
+}
+
+export interface GroupSelectItem {
+  value: string
+  label: string
+}
+
+/** Re-export for convenience */
+export type { PathPermission, PermissionLevel, PermissionTarget, UserSearchResult, GroupMetadata }

package/src/editor/permission-manager/utils.ts

@@ -0,0 +1,179 @@
+/**
+ * Utility functions for PermissionManager
+ */
+
+import type { TreeNode, ContentNode, PathPermission } from './types'
+import type { EditorCollection } from '../Editor'
+
+/**
+ * Search utility: Find a tree node by exact path match (recursive search).
+ * Used to locate nodes when updating permissions.
+ *
+ * @param node - Root node to start searching from
+ * @param path - The exact path to search for
+ * @returns The matching TreeNode or null if not found
+ */
+export function findTreeNode(node: TreeNode, path: string): TreeNode | null {
+  if (node.path === path) return node
+  for (const child of node.children) {
+    const found = findTreeNode(child, path)
+    if (found) return found
+  }
+  return null
+}
+
+/**
+ * Transforms API/editor collections into permission tree nodes.
+ *
+ * Handles the case where buildEditorCollections returns a structure with the content root
+ * as a top-level collection. Avoids double-wrapping by detecting when a collection IS the
+ * content root itself and processing its children directly.
+ *
+ * @param collections - Array of EditorCollection from API or buildEditorCollections
+ * @param contentRoot - The content root path (e.g., "content")
+ * @param parentPath - Optional parent path for recursive calls
+ * @returns Array of TreeNode for the permission tree
+ */
+export function convertCollectionsToTreeNodes(
+  collections: EditorCollection[],
+  contentRoot: string,
+  parentPath?: string,
+): TreeNode[] {
+  // Special case: If we're at the top level (no parentPath) and the collections array
+  // contains exactly one item that IS the content root itself, skip creating a duplicate
+  // node for it and just process its children directly.
+  if (!parentPath && collections.length === 1 && collections[0].path === contentRoot) {
+    const rootCollection = collections[0]
+    return rootCollection.children
+      ? convertCollectionsToTreeNodes(rootCollection.children, contentRoot, contentRoot)
+      : []
+  }
+
+  const nodes: TreeNode[] = []
+
+  for (const collection of collections) {
+    // Build the logical path - use collection.path directly since it already includes
+    // the content root prefix from buildEditorCollections
+    const logicalPath = collection.path
+
+    const node: TreeNode = {
+      path: logicalPath,
+      name: collection.label || collection.name,
+      type: collection.type === 'collection' ? 'folder' : 'file',
+      children: [],
+    }
+
+    // Recursively process nested collections
+    if (collection.children) {
+      node.children = convertCollectionsToTreeNodes(collection.children, contentRoot, logicalPath)
+    }
+
+    nodes.push(node)
+  }
+
+  return nodes
+}
+
+/**
+ * Merges filesystem content into schema tree for files not defined in the schema.
+ *
+ * Used to add files that exist in the filesystem but aren't explicitly defined in
+ * the schema (e.g., entries created manually via the filesystem). Only adds files,
+ * not folders - folders are expected to come from the schema.
+ *
+ * @param schemaNode - TreeNode from schema to merge into (mutated)
+ * @param contentNode - Actual filesystem content tree from API
+ */
+export function mergeContentTree(schemaNode: TreeNode, contentNode: ContentNode): void {
+  contentNode.children?.forEach((child) => {
+    const existing = schemaNode.children.find((n) => n.name === child.name)
+    if (existing) {
+      // If this is a folder/collection that exists in schema, recursively merge its children
+      if (child.type === 'folder' && child.children) {
+        mergeContentTree(existing, child)
+      }
+    } else if (child.type === 'file') {
+      // Add file not in schema (e.g., entry created via filesystem)
+      schemaNode.children.push({
+        path: child.path,
+        name: child.name,
+        type: child.type,
+        children: [],
+      })
+    }
+  })
+}
+
+/**
+ * Build tree structure from EditorCollections.
+ *
+ * @param contentTree - Actual filesystem content from API (optional)
+ * @param contentRoot - The content root path, defaults to "content"
+ * @param collections - Optional EditorCollection[] from API
+ * @returns Root TreeNode for the permission tree
+ */
+export function buildTree(
+  contentTree: ContentNode | undefined,
+  contentRoot = 'content',
+  collections?: EditorCollection[],
+): TreeNode {
+  const root: TreeNode = {
+    path: contentRoot,
+    name: contentRoot,
+    type: 'folder',
+    children: [],
+  }
+
+  // Build from collections if provided
+  if (collections && collections.length > 0) {
+    root.children = convertCollectionsToTreeNodes(collections, contentRoot)
+
+    // Merge contentTree if provided
+    if (contentTree) {
+      mergeContentTree(root, contentTree)
+    }
+  }
+
+  return root
+}
+
+/**
+ * Decorates tree with permission data (direct + inherited).
+ *
+ * Recursively walks the tree and attaches permission information to each node:
+ * - directPermission: Exact match for this path (or path/** for folders)
+ * - inheritedPermission: Nearest parent's folder wildcard permission (if no direct permission)
+ *
+ * @param node - TreeNode to annotate
+ * @param permissions - Array of PathPermission from API
+ * @returns Annotated TreeNode with permission data
+ */
+export function annotateTreeWithPermissions(
+  node: TreeNode,
+  permissions: PathPermission[],
+): TreeNode {
+  const folderPath = node.type === 'folder' ? `${node.path}/**` : node.path
+
+  // Find direct permission
+  const directPerm = permissions.find((p) => p.path === folderPath || p.path === node.path)
+
+  // Find inherited permission from parent
+  let inheritedPerm: PathPermission | undefined
+  const pathParts = node.path.split('/')
+  for (let i = pathParts.length - 1; i >= 0; i--) {
+    const parentPath = pathParts.slice(0, i + 1).join('/')
+    const parentFolderPath = `${parentPath}/**`
+    const parentPerm = permissions.find((p) => p.path === parentFolderPath)
+    if (parentPerm) {
+      inheritedPerm = parentPerm
+      break
+    }
+  }
+
+  return {
+    ...node,
+    directPermission: directPerm,
+    inheritedPermission: !directPerm ? inheritedPerm : undefined,
+    children: node.children.map((child) => annotateTreeWithPermissions(child, permissions)),
+  }
+}

package/src/editor/preview-bridge.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { cleanup, render, waitFor } from '@testing-library/react'
+import { afterEach, describe, expect, it } from 'vitest'
+
+import { CANOPY_PREVIEW_MESSAGE, useCanopyPreview } from './preview-bridge'
+
+afterEach(() => cleanup())
+
+const PreviewValue = ({ initialData, path }: { initialData: { value: string }; path?: string }) => {
+  const { data } = useCanopyPreview<{ value: string }>({ initialData, path })
+  return <div data-testid="value">{data.value}</div>
+}
+
+describe('useCanopyPreview', () => {
+  it('uses the current location when path is omitted', async () => {
+    window.history.pushState({}, '', '/posts/hello-world?branch=main')
+    const { getByTestId } = render(<PreviewValue initialData={{ value: 'initial' }} />)
+
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        data: {
+          type: CANOPY_PREVIEW_MESSAGE,
+          path: '/posts/hello-world?branch=main',
+          data: { value: 'updated' },
+        },
+      }),
+    )
+
+    await waitFor(() => expect(getByTestId('value').textContent).toBe('updated'))
+  })
+
+  it('prefers the provided path over the current location', async () => {
+    window.history.pushState({}, '', '/posts/different?branch=main')
+    const { getByTestId } = render(
+      <PreviewValue initialData={{ value: 'initial' }} path="/posts/override?branch=main" />,
+    )
+
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        data: {
+          type: CANOPY_PREVIEW_MESSAGE,
+          path: '/posts/override?branch=main',
+          data: { value: 'updated' },
+        },
+      }),
+    )
+
+    await waitFor(() => expect(getByTestId('value').textContent).toBe('updated'))
+  })
+})