canopycms 0.0.0

package/src/editor/group-manager/ExternalGroupsTab.tsx

@@ -0,0 +1,114 @@
+'use client'
+
+/**
+ * External groups tab component
+ */
+
+import React from 'react'
+import { Alert, Group, Loader, Paper, ScrollArea, Stack, Text, TextInput } from '@mantine/core'
+import { IconAlertCircle, IconBuilding, IconSearch } from '@tabler/icons-react'
+import type { ExternalGroup } from './types'
+
+export interface ExternalGroupsTabProps {
+  canEdit: boolean
+  searchQuery: string
+  searchResults: ExternalGroup[]
+  isSearching: boolean
+  searchError: string | null
+  onSearchQueryChange: (query: string) => void
+  canSearch: boolean
+}
+
+export const ExternalGroupsTab: React.FC<ExternalGroupsTabProps> = ({
+  canEdit,
+  searchQuery,
+  searchResults,
+  isSearching,
+  searchError,
+  onSearchQueryChange,
+  canSearch,
+}) => {
+  // Read-only view (when !canEdit)
+  if (!canEdit) {
+    return (
+      <div
+        style={{
+          flex: 1,
+          overflow: 'auto',
+          paddingTop: 'var(--mantine-spacing-md)',
+        }}
+      >
+        <Text size="sm" c="dimmed" mb="md">
+          External groups are read-only
+        </Text>
+      </div>
+    )
+  }
+
+  return (
+    <ScrollArea style={{ height: '100%' }} pt="md">
+      <Stack gap="sm" pb="md">
+        <Text size="sm" c="dimmed" mb="xs">
+          Search for external groups from your organization
+        </Text>
+
+        <TextInput
+          placeholder="Search external groups..."
+          value={searchQuery}
+          onChange={(e) => onSearchQueryChange(e.target.value)}
+          leftSection={<IconSearch size={16} />}
+          disabled={!canSearch}
+        />
+
+        {!canSearch && (
+          <Alert icon={<IconAlertCircle size={16} />} color="gray" title="Not Available">
+            External group search is not configured
+          </Alert>
+        )}
+
+        {isSearching && (
+          <Group justify="center" py="md">
+            <Loader size="sm" />
+            <Text size="sm" c="dimmed">
+              Searching...
+            </Text>
+          </Group>
+        )}
+
+        {searchError && (
+          <Alert icon={<IconAlertCircle size={16} />} color="red" title="Error">
+            {searchError}
+          </Alert>
+        )}
+
+        {searchResults.length > 0 && (
+          <Stack gap="xs">
+            {searchResults.map((group) => (
+              <Paper key={group.id} withBorder p="xs">
+                <Group justify="space-between" wrap="nowrap">
+                  <Group gap="xs" style={{ flex: 1, minWidth: 0 }}>
+                    <IconBuilding size={16} color="gray" style={{ flexShrink: 0 }} />
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <Text size="sm" fw={500} truncate>
+                        {group.name}
+                      </Text>
+                      <Text size="xs" c="dimmed" truncate>
+                        ID: {group.id}
+                      </Text>
+                    </div>
+                  </Group>
+                </Group>
+              </Paper>
+            ))}
+          </Stack>
+        )}
+
+        {searchQuery.trim() && !isSearching && searchResults.length === 0 && !searchError && (
+          <Text size="sm" c="dimmed" ta="center" py="md">
+            No external groups found
+          </Text>
+        )}
+      </Stack>
+    </ScrollArea>
+  )
+}

package/src/editor/group-manager/GroupCard.tsx

@@ -0,0 +1,102 @@
+'use client'
+
+/**
+ * Card component for displaying a single group with its members
+ */
+
+import React from 'react'
+import { ActionIcon, Badge, Group, Paper, Text, Tooltip } from '@mantine/core'
+import { IconEdit, IconTrash } from '@tabler/icons-react'
+import type { InternalGroup, UserSearchResult, CanopyGroupId, CanopyUserId } from './types'
+import { MemberList } from './MemberList'
+
+export interface GroupCardProps {
+  group: InternalGroup
+  onEdit: (group: InternalGroup) => void
+  onDelete: (groupId: CanopyGroupId) => void
+  onAddMember: (groupId: CanopyGroupId, userId: CanopyUserId) => void
+  onRemoveMember: (groupId: CanopyGroupId, userId: CanopyUserId) => void
+  onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>
+  // User search state
+  showUserSearch: boolean
+  searchQuery: string
+  searchResults: UserSearchResult[]
+  isSearching: boolean
+  searchError: string | null
+  onSearchQueryChange: (query: string) => void
+  onShowSearch: () => void
+  onHideSearch: () => void
+  canSearch: boolean
+}
+
+export const GroupCard: React.FC<GroupCardProps> = ({
+  group,
+  onEdit,
+  onDelete,
+  onAddMember,
+  onRemoveMember,
+  onGetUserMetadata,
+  showUserSearch,
+  searchQuery,
+  searchResults,
+  isSearching,
+  searchError,
+  onSearchQueryChange,
+  onShowSearch,
+  onHideSearch,
+  canSearch,
+}) => {
+  return (
+    <Paper withBorder p="sm" mb="xs">
+      <Group justify="space-between" mb="sm">
+        <div style={{ flex: 1 }}>
+          <Group gap="xs">
+            <Text size="sm" fw={500}>
+              {group.name}
+            </Text>
+            <Badge size="sm" variant="light">
+              {group.members?.length || 0} members
+            </Badge>
+          </Group>
+          <Text size="xs" c="dimmed" mt={4}>
+            ID: {group.id}
+          </Text>
+          {group.description && (
+            <Text size="xs" c="dimmed" mt={4}>
+              {group.description}
+            </Text>
+          )}
+        </div>
+        <Group gap="xs">
+          <Tooltip label="Edit group">
+            <ActionIcon size="sm" variant="subtle" onClick={() => onEdit(group)}>
+              <IconEdit size={16} />
+            </ActionIcon>
+          </Tooltip>
+          <Tooltip label="Delete group">
+            <ActionIcon size="sm" variant="subtle" color="red" onClick={() => onDelete(group.id)}>
+              <IconTrash size={16} />
+            </ActionIcon>
+          </Tooltip>
+        </Group>
+      </Group>
+
+      <MemberList
+        groupId={group.id}
+        members={group.members || []}
+        onRemoveMember={onRemoveMember}
+        onAddMember={onAddMember}
+        onGetUserMetadata={onGetUserMetadata}
+        showUserSearch={showUserSearch}
+        searchQuery={searchQuery}
+        searchResults={searchResults}
+        isSearching={isSearching}
+        searchError={searchError}
+        onSearchQueryChange={onSearchQueryChange}
+        onShowSearch={onShowSearch}
+        onHideSearch={onHideSearch}
+        canSearch={canSearch}
+      />
+    </Paper>
+  )
+}

package/src/editor/group-manager/GroupForm.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+/**
+ * Modal form for creating/editing groups
+ */
+
+import React from 'react'
+import { Button, Group, Modal, Paper, Stack, Text, TextInput, Textarea } from '@mantine/core'
+import type { InternalGroup, GroupFormData } from './types'
+
+export interface GroupFormProps {
+  isOpen: boolean
+  editingGroup: InternalGroup | null
+  formData: GroupFormData
+  onFormChange: (data: Partial<GroupFormData>) => void
+  onSave: () => void
+  onClose: () => void
+}
+
+export const GroupForm: React.FC<GroupFormProps> = ({
+  isOpen,
+  editingGroup,
+  formData,
+  onFormChange,
+  onSave,
+  onClose,
+}) => {
+  return (
+    <Modal opened={isOpen} onClose={onClose} title={editingGroup ? 'Edit Group' : 'Create Group'}>
+      <Stack gap="md">
+        {editingGroup && (
+          <div>
+            <Text size="sm" fw={500} mb={4}>
+              ID (system-generated)
+            </Text>
+            <Paper p="xs" withBorder bg="gray.0">
+              <Text size="sm" ff="monospace" c="dimmed">
+                {editingGroup.id}
+              </Text>
+            </Paper>
+          </div>
+        )}
+        <TextInput
+          label="Group Name"
+          placeholder="e.g., Content Editors"
+          value={formData.name}
+          onChange={(e) => onFormChange({ name: e.target.value })}
+          required
+        />
+        <Textarea
+          label="Description"
+          placeholder="Optional description"
+          value={formData.description}
+          onChange={(e) => onFormChange({ description: e.target.value })}
+          rows={3}
+        />
+        <Group justify="flex-end" gap="sm">
+          <Button variant="subtle" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button onClick={onSave}>{editingGroup ? 'Save' : 'Create'}</Button>
+        </Group>
+      </Stack>
+    </Modal>
+  )
+}

package/src/editor/group-manager/InternalGroupsTab.tsx

@@ -0,0 +1,147 @@
+'use client'
+
+/**
+ * Internal groups tab component
+ */
+
+import React from 'react'
+import { Button, Group, Paper, ScrollArea, Stack, Text } from '@mantine/core'
+import { IconPlus, IconUsers } from '@tabler/icons-react'
+import type { InternalGroup, UserSearchResult, CanopyGroupId, CanopyUserId } from './types'
+import { GroupCard } from './GroupCard'
+
+export interface InternalGroupsTabProps {
+  groups: InternalGroup[]
+  canEdit: boolean
+  onCreateGroup: () => void
+  onEditGroup: (group: InternalGroup) => void
+  onDeleteGroup: (groupId: CanopyGroupId) => void
+  onAddMember: (groupId: CanopyGroupId, userId: CanopyUserId) => void
+  onRemoveMember: (groupId: CanopyGroupId, userId: CanopyUserId) => void
+  onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>
+  // User search state (shared across all groups)
+  activeSearchGroupId: string | null
+  searchQuery: string
+  searchResults: UserSearchResult[]
+  isSearching: boolean
+  searchError: string | null
+  onSearchQueryChange: (query: string) => void
+  onShowSearch: (groupId: string) => void
+  onHideSearch: () => void
+  canSearch: boolean
+}
+
+export const InternalGroupsTab: React.FC<InternalGroupsTabProps> = ({
+  groups,
+  canEdit,
+  onCreateGroup,
+  onEditGroup,
+  onDeleteGroup,
+  onAddMember,
+  onRemoveMember,
+  onGetUserMetadata,
+  activeSearchGroupId,
+  searchQuery,
+  searchResults,
+  isSearching,
+  searchError,
+  onSearchQueryChange,
+  onShowSearch,
+  onHideSearch,
+  canSearch,
+}) => {
+  // Read-only view
+  if (!canEdit) {
+    return (
+      <div
+        style={{
+          flex: 1,
+          overflow: 'auto',
+          paddingTop: 'var(--mantine-spacing-md)',
+        }}
+      >
+        {groups.length === 0 ? (
+          <Paper withBorder p="md" style={{ textAlign: 'center' }}>
+            <IconUsers size={32} color="gray" style={{ margin: '0 auto', marginBottom: 8 }} />
+            <Text size="sm" c="dimmed">
+              No internal groups
+            </Text>
+          </Paper>
+        ) : (
+          <Stack gap="xs" pb="md">
+            {groups.map((group) => (
+              <Paper key={group.id} withBorder p="sm">
+                <Group justify="space-between">
+                  <div>
+                    <Text size="sm" fw={500}>
+                      {group.name}
+                    </Text>
+                    {group.description && (
+                      <Text size="xs" c="dimmed">
+                        {group.description}
+                      </Text>
+                    )}
+                  </div>
+                  <Text size="sm" variant="light">
+                    {group.members?.length || 0} members
+                  </Text>
+                </Group>
+              </Paper>
+            ))}
+          </Stack>
+        )}
+      </div>
+    )
+  }
+
+  // Editable view
+  return (
+    <ScrollArea style={{ height: '100%' }} pt="md">
+      <Stack gap="sm" pb="md">
+        <Group justify="space-between" mb="xs">
+          <Text size="sm" fw={500} c="dimmed">
+            Manage your internal groups
+          </Text>
+          <Button
+            size="xs"
+            variant="light"
+            leftSection={<IconPlus size={14} />}
+            onClick={onCreateGroup}
+          >
+            Create Group
+          </Button>
+        </Group>
+
+        {groups.length === 0 ? (
+          <Paper withBorder p="md" style={{ textAlign: 'center' }}>
+            <IconUsers size={32} color="gray" style={{ margin: '0 auto', marginBottom: 8 }} />
+            <Text size="sm" c="dimmed">
+              No internal groups yet. Create one to get started.
+            </Text>
+          </Paper>
+        ) : (
+          groups.map((group) => (
+            <GroupCard
+              key={group.id}
+              group={group}
+              onEdit={onEditGroup}
+              onDelete={onDeleteGroup}
+              onAddMember={onAddMember}
+              onRemoveMember={onRemoveMember}
+              onGetUserMetadata={onGetUserMetadata}
+              showUserSearch={activeSearchGroupId === group.id}
+              searchQuery={searchQuery}
+              searchResults={searchResults}
+              isSearching={isSearching}
+              searchError={searchError}
+              onSearchQueryChange={onSearchQueryChange}
+              onShowSearch={() => onShowSearch(group.id)}
+              onHideSearch={onHideSearch}
+              canSearch={canSearch}
+            />
+          ))
+        )}
+      </Stack>
+    </ScrollArea>
+  )
+}

package/src/editor/group-manager/MemberList.tsx

@@ -0,0 +1,184 @@
+'use client'
+
+/**
+ * Member list component with user search for adding members
+ */
+
+import React from 'react'
+import {
+  ActionIcon,
+  Badge,
+  Button,
+  Group,
+  Loader,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+} from '@mantine/core'
+import { IconSearch, IconX } from '@tabler/icons-react'
+import type { UserSearchResult, CanopyGroupId, CanopyUserId } from './types'
+import { UserBadge } from '../components/UserBadge'
+
+export interface MemberListProps {
+  groupId: CanopyGroupId
+  members: CanopyUserId[]
+  onRemoveMember: (groupId: CanopyGroupId, userId: CanopyUserId) => void
+  onAddMember: (groupId: CanopyGroupId, userId: CanopyUserId) => void
+  onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>
+  // User search state
+  showUserSearch: boolean
+  searchQuery: string
+  searchResults: UserSearchResult[]
+  isSearching: boolean
+  searchError: string | null
+  onSearchQueryChange: (query: string) => void
+  onShowSearch: () => void
+  onHideSearch: () => void
+  canSearch: boolean
+}
+
+export const MemberList: React.FC<MemberListProps> = ({
+  groupId,
+  members,
+  onRemoveMember,
+  onAddMember,
+  onGetUserMetadata,
+  showUserSearch,
+  searchQuery,
+  searchResults,
+  isSearching,
+  searchError,
+  onSearchQueryChange,
+  onShowSearch,
+  onHideSearch,
+  canSearch,
+}) => {
+  const handleAddMember = (userId: CanopyUserId) => {
+    onAddMember(groupId, userId)
+    onHideSearch()
+  }
+
+  return (
+    <div>
+      <Text size="xs" fw={500} mb={4}>
+        Members
+      </Text>
+      <Group gap="xs" mb="xs">
+        {members.length > 0 ? (
+          members.map((userId) =>
+            onGetUserMetadata ? (
+              <UserBadge
+                key={userId}
+                userId={userId}
+                getUserMetadata={onGetUserMetadata}
+                variant="avatar-name"
+                size="xs"
+                badgeVariant="filled"
+                color="blue"
+                onRemove={() => onRemoveMember(groupId, userId)}
+                showEmailTooltip={true}
+              />
+            ) : (
+              <Badge
+                key={userId}
+                variant="filled"
+                color="blue"
+                pr={3}
+                rightSection={
+                  <ActionIcon
+                    size="xs"
+                    color="blue"
+                    radius="xl"
+                    variant="transparent"
+                    onClick={() => onRemoveMember(groupId, userId)}
+                  >
+                    <IconX size={10} style={{ color: 'white' }} />
+                  </ActionIcon>
+                }
+              >
+                {userId}
+              </Badge>
+            ),
+          )
+        ) : (
+          <Text size="xs" c="dimmed">
+            No members
+          </Text>
+        )}
+      </Group>
+
+      {/* Add member search panel */}
+      {showUserSearch ? (
+        <Paper withBorder p="sm" mt="xs">
+          <Stack gap="xs">
+            <TextInput
+              placeholder="Search users by name or email..."
+              value={searchQuery}
+              onChange={(e) => onSearchQueryChange(e.target.value)}
+              aria-label="Search users by name or email"
+              size="xs"
+            />
+            {isSearching && <Loader size="xs" />}
+            {searchError && (
+              <Text size="xs" c="red">
+                {searchError}
+              </Text>
+            )}
+            {searchResults.length > 0 && (
+              <Stack gap={4}>
+                {searchResults.map((user) => (
+                  <Paper
+                    key={user.id}
+                    p="xs"
+                    withBorder
+                    style={{ cursor: 'pointer' }}
+                    onClick={() => handleAddMember(user.id)}
+                  >
+                    {onGetUserMetadata ? (
+                      <UserBadge
+                        userId={user.id}
+                        getUserMetadata={onGetUserMetadata}
+                        variant="full"
+                        size="sm"
+                        cachedUser={user}
+                        showEmailTooltip={false}
+                      />
+                    ) : (
+                      <>
+                        <Text size="sm" fw={500}>
+                          {user.name}
+                        </Text>
+                        <Text size="xs" c="dimmed">
+                          {user.email}
+                        </Text>
+                      </>
+                    )}
+                  </Paper>
+                ))}
+              </Stack>
+            )}
+            {searchQuery.trim() && !isSearching && searchResults.length === 0 && (
+              <Text size="xs" c="dimmed">
+                No users found
+              </Text>
+            )}
+            <Button size="xs" variant="subtle" onClick={onHideSearch}>
+              Cancel
+            </Button>
+          </Stack>
+        </Paper>
+      ) : (
+        <Button
+          size="xs"
+          variant="subtle"
+          leftSection={<IconSearch size={14} />}
+          onClick={onShowSearch}
+          disabled={!canSearch}
+        >
+          Add Member
+        </Button>
+      )}
+    </div>
+  )
+}

package/src/editor/group-manager/hooks/useExternalGroupSearch.ts

@@ -0,0 +1,63 @@
+/**
+ * Hook for external group search functionality
+ */
+
+import { useState, useEffect } from 'react'
+import type { ExternalGroup } from '../types'
+
+export interface UseExternalGroupSearchOptions {
+  onSearchExternalGroups?: (query: string) => Promise<ExternalGroup[]>
+}
+
+export interface UseExternalGroupSearchResult {
+  searchQuery: string
+  searchResults: ExternalGroup[]
+  isSearching: boolean
+  searchError: string | null
+  setSearchQuery: (query: string) => void
+}
+
+export function useExternalGroupSearch({
+  onSearchExternalGroups,
+}: UseExternalGroupSearchOptions): UseExternalGroupSearchResult {
+  const [searchQuery, setSearchQuery] = useState('')
+  const [searchResults, setSearchResults] = useState<ExternalGroup[]>([])
+  const [isSearching, setIsSearching] = useState(false)
+  const [searchError, setSearchError] = useState<string | null>(null)
+
+  // Debounced external group search
+  useEffect(() => {
+    if (!searchQuery.trim()) {
+      setSearchResults([])
+      return
+    }
+
+    const timer = setTimeout(() => {
+      if (onSearchExternalGroups) {
+        setIsSearching(true)
+        setSearchError(null)
+        onSearchExternalGroups(searchQuery)
+          .then((results) => {
+            setSearchResults(results)
+            setSearchError(null)
+          })
+          .catch((err) => {
+            console.error('External group search failed:', err)
+            setSearchError('Failed to search external groups. Please try again.')
+            setSearchResults([])
+          })
+          .finally(() => setIsSearching(false))
+      }
+    }, 300)
+
+    return () => clearTimeout(timer)
+  }, [searchQuery, onSearchExternalGroups])
+
+  return {
+    searchQuery,
+    searchResults,
+    isSearching,
+    searchError,
+    setSearchQuery,
+  }
+}