canopycms 0.0.0

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

@@ -0,0 +1,321 @@
+'use client'
+
+/**
+ * Permission editor panel for a selected tree node.
+ * Handles permission CRUD with tabs for each level.
+ */
+
+import React from 'react'
+import { ActionIcon, Badge, Button, Group, Paper, Stack, Tabs, Text, Tooltip } from '@mantine/core'
+import { IconSearch, IconX, IconUserOff } from '@tabler/icons-react'
+import type {
+  TreeNode,
+  PermissionLevel,
+  PermissionTarget,
+  GroupSelectItem,
+  UserSearchResult,
+} from './types'
+import { PERMISSION_LEVELS, LEVEL_CONFIG } from './constants'
+import { GroupSelector } from './GroupSelector'
+import { UserSelector } from './UserSelector'
+import { UserBadge } from '../components/UserBadge'
+
+export interface PermissionEditorProps {
+  node: TreeNode
+  activeLevel: PermissionLevel
+  onSetActiveLevel: (level: PermissionLevel) => void
+  canEdit: boolean
+  groups: GroupSelectItem[]
+  /** Whether this node is selected (used for search panel visibility) */
+  isSelected: boolean
+  // User search
+  userSearchResults: UserSearchResult[]
+  isSearchingUsers: boolean
+  showUserSearch: boolean
+  userSearchQuery: string
+  userSearchError: string | null
+  onSearchUsers: (query: string) => void
+  onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>
+  onToggleUserSearch: (show: boolean) => void
+  onAddUser: (path: string, level: PermissionLevel, userId: string) => void
+  onRemoveUser: (path: string, level: PermissionLevel, userId: string) => void
+  // Group search
+  showGroupSearch: boolean
+  groupSearchQuery: string
+  filteredGroups: GroupSelectItem[]
+  onSearchGroups: (query: string) => void
+  onToggleGroupSearch: (show: boolean) => void
+  onAddGroup: (path: string, level: PermissionLevel, groupId: string) => void
+  onRemoveGroup: (path: string, level: PermissionLevel, groupId: string) => void
+}
+
+export const PermissionEditor: React.FC<PermissionEditorProps> = ({
+  node,
+  activeLevel,
+  onSetActiveLevel,
+  canEdit,
+  groups,
+  isSelected,
+  userSearchResults,
+  isSearchingUsers,
+  showUserSearch,
+  userSearchQuery,
+  userSearchError,
+  onSearchUsers,
+  onGetUserMetadata,
+  onToggleUserSearch,
+  onAddUser,
+  onRemoveUser,
+  showGroupSearch,
+  groupSearchQuery,
+  filteredGroups,
+  onSearchGroups,
+  onToggleGroupSearch,
+  onAddGroup,
+  onRemoveGroup,
+}) => {
+  const directPerm = node.directPermission
+  const inheritedPerm = node.inheritedPermission
+
+  // Get permission target for a level (from direct or inherited)
+  const getTargetForLevel = (
+    level: PermissionLevel,
+    source: 'direct' | 'inherited',
+  ): PermissionTarget | undefined => {
+    const perm = source === 'direct' ? directPerm : inheritedPerm
+    return perm?.[level]
+  }
+
+  return (
+    <Paper withBorder p="sm" ml={32} mt="xs" mb="xs">
+      <Stack gap="sm">
+        <Text size="xs" fw={500} c="dimmed">
+          Path: {node.path}
+          {node.type === 'folder' ? '/**' : ''}
+        </Text>
+
+        {/* Level tabs - keepMounted={false} ensures only active panel is in DOM */}
+        <Tabs
+          value={activeLevel}
+          onChange={(v) => onSetActiveLevel(v as PermissionLevel)}
+          keepMounted={false}
+        >
+          <Tabs.List>
+            {PERMISSION_LEVELS.map((level) => (
+              <Tabs.Tab key={level} value={level} leftSection={LEVEL_CONFIG[level].icon}>
+                {LEVEL_CONFIG[level].label}
+              </Tabs.Tab>
+            ))}
+          </Tabs.List>
+
+          {PERMISSION_LEVELS.map((level) => {
+            const directTarget = getTargetForLevel(level, 'direct')
+            const inheritedTarget = getTargetForLevel(level, 'inherited')
+
+            return (
+              <Tabs.Panel key={level} value={level} pt="sm">
+                {/* Inherited permissions display */}
+                {inheritedTarget && (
+                  <div style={{ marginBottom: 'var(--mantine-spacing-sm)' }}>
+                    <Text size="xs" fw={500} mb={4} c="dimmed">
+                      Inherited from parent
+                    </Text>
+                    <Group gap="xs">
+                      {inheritedTarget.allowedGroups?.map((groupId) => {
+                        const groupInfo = groups.find((g) => g.value === groupId)
+                        return (
+                          <Badge
+                            key={`inherited-group-${groupId}`}
+                            variant="outline"
+                            color="gray"
+                            size="xs"
+                          >
+                            {groupInfo?.label ?? groupId}
+                          </Badge>
+                        )
+                      })}
+                      {inheritedTarget.allowedUsers?.map((userId) =>
+                        onGetUserMetadata ? (
+                          <UserBadge
+                            key={`inherited-user-${userId}`}
+                            userId={userId}
+                            getUserMetadata={onGetUserMetadata}
+                            variant="avatar-name"
+                            size="xs"
+                            badgeVariant="outline"
+                            color="gray"
+                            showEmailTooltip={true}
+                            showBadge={true}
+                          />
+                        ) : (
+                          <Badge
+                            key={`inherited-user-${userId}`}
+                            variant="outline"
+                            color={userId === 'anonymous' ? 'orange' : 'gray'}
+                            size="xs"
+                            leftSection={
+                              userId === 'anonymous' ? <IconUserOff size={10} /> : undefined
+                            }
+                          >
+                            {userId === 'anonymous' ? 'Anonymous (Public)' : userId}
+                          </Badge>
+                        ),
+                      )}
+                    </Group>
+                  </div>
+                )}
+
+                {canEdit ? (
+                  <div>
+                    <Text size="xs" fw={500} mb={4}>
+                      {LEVEL_CONFIG[level].label} Access
+                    </Text>
+
+                    {/* Badges for groups and users */}
+                    <Group gap="xs" mb="xs">
+                      {(directTarget?.allowedGroups ?? []).map((groupId) => {
+                        const groupInfo = groups.find((g) => g.value === groupId)
+                        return (
+                          <Badge
+                            key={`group-${groupId}`}
+                            variant="filled"
+                            color={LEVEL_CONFIG[level].color}
+                            pr={3}
+                            rightSection={
+                              <ActionIcon
+                                size="xs"
+                                color={LEVEL_CONFIG[level].color}
+                                radius="xl"
+                                variant="transparent"
+                                onClick={() => onRemoveGroup(node.path, level, groupId)}
+                              >
+                                <IconX size={12} stroke={2.5} style={{ color: 'white' }} />
+                              </ActionIcon>
+                            }
+                          >
+                            {groupInfo?.label ?? groupId}
+                          </Badge>
+                        )
+                      })}
+
+                      {(directTarget?.allowedUsers ?? []).map((userId) =>
+                        onGetUserMetadata ? (
+                          <UserBadge
+                            key={`user-${userId}`}
+                            userId={userId}
+                            getUserMetadata={onGetUserMetadata}
+                            variant="avatar-name"
+                            size="xs"
+                            badgeVariant="filled"
+                            color={userId === 'anonymous' ? 'orange' : LEVEL_CONFIG[level].color}
+                            onRemove={() => onRemoveUser(node.path, level, userId)}
+                            showEmailTooltip={true}
+                          />
+                        ) : (
+                          <Badge
+                            key={`user-${userId}`}
+                            variant="filled"
+                            color={userId === 'anonymous' ? 'orange' : LEVEL_CONFIG[level].color}
+                            pr={3}
+                            leftSection={
+                              userId === 'anonymous' ? <IconUserOff size={12} /> : undefined
+                            }
+                            rightSection={
+                              <ActionIcon
+                                size="xs"
+                                color={
+                                  userId === 'anonymous' ? 'orange' : LEVEL_CONFIG[level].color
+                                }
+                                radius="xl"
+                                variant="transparent"
+                                onClick={() => onRemoveUser(node.path, level, userId)}
+                              >
+                                <IconX size={12} stroke={2.5} style={{ color: 'white' }} />
+                              </ActionIcon>
+                            }
+                          >
+                            {userId === 'anonymous' ? 'Anonymous (Public)' : userId}
+                          </Badge>
+                        ),
+                      )}
+
+                      {(!directTarget?.allowedGroups || directTarget.allowedGroups.length === 0) &&
+                        (!directTarget?.allowedUsers || directTarget.allowedUsers.length === 0) && (
+                          <Text size="xs" c="dimmed">
+                            No groups or users assigned for {level}
+                          </Text>
+                        )}
+                    </Group>
+
+                    {/* Action buttons */}
+                    <Group gap="xs">
+                      <Button
+                        size="xs"
+                        variant="subtle"
+                        leftSection={<IconSearch size={14} />}
+                        onClick={() => onToggleGroupSearch(!showGroupSearch)}
+                      >
+                        {showGroupSearch ? 'Cancel' : 'Add Groups'}
+                      </Button>
+
+                      <Button
+                        size="xs"
+                        variant="subtle"
+                        leftSection={<IconSearch size={14} />}
+                        onClick={() => onToggleUserSearch(!showUserSearch)}
+                      >
+                        {showUserSearch ? 'Cancel' : 'Add User'}
+                      </Button>
+
+                      {/* Anonymous user button - only show if not already added */}
+                      {!(directTarget?.allowedUsers ?? []).includes('anonymous') && (
+                        <Tooltip label="Allow unauthenticated/public access">
+                          <Button
+                            size="xs"
+                            variant="subtle"
+                            color="orange"
+                            leftSection={<IconUserOff size={14} />}
+                            onClick={() => onAddUser(node.path, level, 'anonymous')}
+                          >
+                            Add Anonymous
+                          </Button>
+                        </Tooltip>
+                      )}
+                    </Group>
+
+                    {/* Group search panel - only show when this node is selected and on active level */}
+                    {showGroupSearch && isSelected && activeLevel === level && (
+                      <GroupSelector
+                        searchQuery={groupSearchQuery}
+                        onSearchChange={onSearchGroups}
+                        filteredGroups={filteredGroups}
+                        onSelectGroup={(groupId) => onAddGroup(node.path, level, groupId)}
+                      />
+                    )}
+
+                    {/* User search panel - only show when this node is selected and on active level */}
+                    {showUserSearch && isSelected && activeLevel === level && (
+                      <UserSelector
+                        searchQuery={userSearchQuery}
+                        onSearchChange={onSearchUsers}
+                        searchResults={userSearchResults}
+                        isSearching={isSearchingUsers}
+                        searchError={userSearchError}
+                        onSelectUser={(userId) => onAddUser(node.path, level, userId)}
+                        onGetUserMetadata={onGetUserMetadata}
+                      />
+                    )}
+                  </div>
+                ) : (
+                  <Text size="xs" c="dimmed">
+                    {directTarget ? 'Read-only view' : 'No direct permissions set'}
+                  </Text>
+                )}
+              </Tabs.Panel>
+            )
+          })}
+        </Tabs>
+      </Stack>
+    </Paper>
+  )
+}

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

@@ -0,0 +1,53 @@
+'use client'
+
+/**
+ * Badge component for displaying permission levels
+ */
+
+import React from 'react'
+import { Badge, Tooltip } from '@mantine/core'
+import type { PermissionLevel, PermissionTarget } from './types'
+import { LEVEL_CONFIG } from './constants'
+
+export interface PermissionLevelBadgeProps {
+  level: PermissionLevel
+  target?: PermissionTarget
+  inherited?: PermissionTarget
+}
+
+/**
+ * Displays a badge for a permission level.
+ * Shows filled badge for direct permissions, outlined for inherited.
+ */
+export const PermissionLevelBadge: React.FC<PermissionLevelBadgeProps> = ({
+  level,
+  target,
+  inherited,
+}) => {
+  const hasPerms =
+    target && ((target.allowedUsers?.length ?? 0) > 0 || (target.allowedGroups?.length ?? 0) > 0)
+  const hasInherited =
+    !hasPerms &&
+    inherited &&
+    ((inherited.allowedUsers?.length ?? 0) > 0 || (inherited.allowedGroups?.length ?? 0) > 0)
+
+  if (hasPerms) {
+    return (
+      <Badge size="xs" variant="filled" color={LEVEL_CONFIG[level].color}>
+        {LEVEL_CONFIG[level].label}
+      </Badge>
+    )
+  }
+
+  if (hasInherited) {
+    return (
+      <Tooltip label={`${LEVEL_CONFIG[level].label} inherited from parent`}>
+        <Badge size="xs" variant="outline" color="gray">
+          {LEVEL_CONFIG[level].label}
+        </Badge>
+      </Tooltip>
+    )
+  }
+
+  return null
+}

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

@@ -0,0 +1,237 @@
+'use client'
+
+/**
+ * Tree visualization component for permission management.
+ * Renders the content tree with permission badges and handles selection.
+ */
+
+import React from 'react'
+import { ActionIcon, Collapse } from '@mantine/core'
+import { IconChevronRight, IconChevronDown, IconFolder, IconFile } from '@tabler/icons-react'
+import type {
+  TreeNode,
+  PermissionLevel,
+  PermissionTarget,
+  GroupSelectItem,
+  UserSearchResult,
+} from './types'
+import { PERMISSION_LEVELS } from './constants'
+import { PermissionLevelBadge } from './PermissionLevelBadge'
+import { PermissionEditor } from './PermissionEditor'
+
+export interface PermissionTreeProps {
+  node: TreeNode
+  expandedNodes: Set<string>
+  selectedNode: string | null
+  canEdit: boolean
+  groups: GroupSelectItem[]
+  activeLevel: PermissionLevel
+  // User search props
+  userSearchResults: UserSearchResult[]
+  isSearchingUsers: boolean
+  showUserSearch: boolean
+  userSearchQuery: string
+  userSearchError: string | null
+  // Group search props
+  showGroupSearch: boolean
+  groupSearchQuery: string
+  filteredGroups: GroupSelectItem[]
+  // Callbacks
+  onToggle: (path: string) => void
+  onSelect: (path: string | null) => void
+  onSetActiveLevel: (level: PermissionLevel) => void
+  onUpdatePermission: (
+    path: string,
+    level: PermissionLevel,
+    updates: Partial<PermissionTarget>,
+  ) => void
+  onSearchUsers: (query: string) => void
+  onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>
+  onToggleUserSearch: (show: boolean) => void
+  onAddUser: (path: string, level: PermissionLevel, userId: string) => void
+  onRemoveUser: (path: string, level: PermissionLevel, userId: string) => void
+  onSearchGroups: (query: string) => void
+  onToggleGroupSearch: (show: boolean) => void
+  onAddGroup: (path: string, level: PermissionLevel, groupId: string) => void
+  onRemoveGroup: (path: string, level: PermissionLevel, groupId: string) => void
+}
+
+export const PermissionTree: React.FC<PermissionTreeProps> = ({
+  node,
+  expandedNodes,
+  selectedNode,
+  canEdit,
+  groups,
+  activeLevel,
+  userSearchResults,
+  isSearchingUsers,
+  showUserSearch,
+  userSearchQuery,
+  userSearchError,
+  showGroupSearch,
+  groupSearchQuery,
+  filteredGroups,
+  onToggle,
+  onSelect,
+  onSetActiveLevel,
+  onUpdatePermission,
+  onSearchUsers,
+  onGetUserMetadata,
+  onToggleUserSearch,
+  onAddUser,
+  onRemoveUser,
+  onSearchGroups,
+  onToggleGroupSearch,
+  onAddGroup,
+  onRemoveGroup,
+}) => {
+  const isExpanded = expandedNodes.has(node.path)
+  const isSelected = selectedNode === node.path
+  const hasChildren = node.children.length > 0
+
+  const handleClick = () => {
+    if (node.type === 'folder') {
+      onToggle(node.path)
+    }
+    onSelect(node.path === selectedNode ? null : node.path)
+  }
+
+  const directPerm = node.directPermission
+  const inheritedPerm = node.inheritedPermission
+
+  // Get permission target for a level (from direct or inherited)
+  const getTargetForLevel = (
+    level: PermissionLevel,
+    source: 'direct' | 'inherited',
+  ): PermissionTarget | undefined => {
+    const perm = source === 'direct' ? directPerm : inheritedPerm
+    return perm?.[level]
+  }
+
+  return (
+    <div>
+      {/* Tree node row */}
+      <div
+        style={{
+          display: 'flex',
+          gap: 'var(--mantine-spacing-xs)',
+          padding: '4px var(--mantine-spacing-xs)',
+          cursor: 'pointer',
+          backgroundColor: isSelected ? 'var(--mantine-color-blue-light)' : 'transparent',
+          borderRadius: 'var(--mantine-radius-sm)',
+        }}
+        onClick={handleClick}
+      >
+        {/* Tree controls and icon - fixed width container */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'flex-start',
+            gap: 'var(--mantine-spacing-xs)',
+            flexShrink: 0,
+          }}
+        >
+          {node.type === 'folder' && hasChildren && (
+            <ActionIcon size="xs" variant="transparent" color="gray">
+              {isExpanded ? <IconChevronDown size={14} /> : <IconChevronRight size={14} />}
+            </ActionIcon>
+          )}
+          {(node.type === 'file' || (node.type === 'folder' && !hasChildren)) && (
+            <div style={{ width: 18 }} />
+          )}
+          {node.type === 'folder' ? <IconFolder size={16} /> : <IconFile size={16} />}
+          <span style={{ fontSize: '14px', whiteSpace: 'nowrap' }}>{node.name}</span>
+        </div>
+
+        {/* Show permission level badges */}
+        <div
+          style={{
+            display: 'flex',
+            gap: 4,
+            flexWrap: 'wrap',
+            alignItems: 'center',
+            minWidth: 0,
+          }}
+        >
+          {PERMISSION_LEVELS.map((level) => (
+            <PermissionLevelBadge
+              key={level}
+              level={level}
+              target={getTargetForLevel(level, 'direct')}
+              inherited={getTargetForLevel(level, 'inherited')}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* Expanded permission editor - use Collapse for animation, content stays in DOM for test accessibility */}
+      <Collapse in={isSelected}>
+        <PermissionEditor
+          node={node}
+          activeLevel={activeLevel}
+          onSetActiveLevel={onSetActiveLevel}
+          canEdit={canEdit}
+          groups={groups}
+          userSearchResults={userSearchResults}
+          isSearchingUsers={isSearchingUsers}
+          showUserSearch={showUserSearch}
+          userSearchQuery={userSearchQuery}
+          userSearchError={userSearchError}
+          onSearchUsers={onSearchUsers}
+          onGetUserMetadata={onGetUserMetadata}
+          onToggleUserSearch={onToggleUserSearch}
+          onAddUser={onAddUser}
+          onRemoveUser={onRemoveUser}
+          showGroupSearch={showGroupSearch}
+          groupSearchQuery={groupSearchQuery}
+          filteredGroups={filteredGroups}
+          onSearchGroups={onSearchGroups}
+          onToggleGroupSearch={onToggleGroupSearch}
+          onAddGroup={onAddGroup}
+          onRemoveGroup={onRemoveGroup}
+          isSelected={isSelected}
+        />
+      </Collapse>
+
+      {/* Children */}
+      {node.type === 'folder' && hasChildren && (
+        <Collapse in={isExpanded}>
+          <div style={{ paddingLeft: 16 }}>
+            {node.children.map((child) => (
+              <PermissionTree
+                key={child.path}
+                node={child}
+                expandedNodes={expandedNodes}
+                selectedNode={selectedNode}
+                canEdit={canEdit}
+                groups={groups}
+                activeLevel={activeLevel}
+                userSearchResults={userSearchResults}
+                isSearchingUsers={isSearchingUsers}
+                showUserSearch={showUserSearch}
+                userSearchQuery={userSearchQuery}
+                userSearchError={userSearchError}
+                showGroupSearch={showGroupSearch}
+                groupSearchQuery={groupSearchQuery}
+                filteredGroups={filteredGroups}
+                onToggle={onToggle}
+                onSelect={onSelect}
+                onSetActiveLevel={onSetActiveLevel}
+                onUpdatePermission={onUpdatePermission}
+                onSearchUsers={onSearchUsers}
+                onGetUserMetadata={onGetUserMetadata}
+                onToggleUserSearch={onToggleUserSearch}
+                onAddUser={onAddUser}
+                onRemoveUser={onRemoveUser}
+                onSearchGroups={onSearchGroups}
+                onToggleGroupSearch={onToggleGroupSearch}
+                onAddGroup={onAddGroup}
+                onRemoveGroup={onRemoveGroup}
+              />
+            ))}
+          </div>
+        </Collapse>
+      )}
+    </div>
+  )
+}