canopycms 0.0.0

package/src/editor/hooks/useBranchActions.test.tsx

@@ -0,0 +1,267 @@
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { useBranchActions } from './useBranchActions'
+import type { MockApiClient } from '../../api/__test__/mock-client'
+import {
+  setupMockApiClient,
+  setupMockLocation,
+  setupMockHistory,
+  createApiClientWrapper,
+} from './__test__/test-utils'
+
+// Mock the API client module
+vi.mock('../../api', async () => {
+  const actual = await vi.importActual('../../api')
+  return {
+    ...actual,
+    createApiClient: vi.fn(),
+  }
+})
+
+// Mock notifications
+vi.mock('@mantine/notifications', () => ({
+  notifications: {
+    show: vi.fn(),
+  },
+}))
+
+// Mock modals
+vi.mock('@mantine/modals', () => ({
+  modals: {
+    openConfirmModal: vi.fn(),
+  },
+}))
+
+describe('useBranchActions', () => {
+  let mockClient: MockApiClient
+  let wrapper: ReturnType<typeof createApiClientWrapper>
+  const mockSetBranchName = vi.fn()
+  const mockIsSelectedDirty = vi.fn(() => false)
+  const mockOnReloadBranches = vi.fn().mockResolvedValue(undefined)
+  const mockOnBranchSwitch = vi.fn()
+
+  const defaultOptions = {
+    branchName: 'main',
+    setBranchName: mockSetBranchName,
+    isSelectedDirty: mockIsSelectedDirty,
+    onReloadBranches: mockOnReloadBranches,
+    onBranchSwitch: mockOnBranchSwitch,
+  }
+
+  beforeEach(async () => {
+    mockClient = await setupMockApiClient()
+    wrapper = createApiClientWrapper(mockClient)
+
+    setupMockLocation()
+    setupMockHistory()
+    mockSetBranchName.mockClear()
+    mockIsSelectedDirty.mockReturnValue(false)
+    mockOnReloadBranches.mockClear()
+    mockOnBranchSwitch.mockClear()
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('handles branch change without unsaved changes', async () => {
+    const { result } = renderHook(() => useBranchActions(defaultOptions), {
+      wrapper,
+    })
+
+    await act(async () => {
+      await result.current.handleBranchChange('feature')
+    })
+
+    expect(mockSetBranchName).toHaveBeenCalledWith('feature')
+    expect(mockOnBranchSwitch).toHaveBeenCalledWith('feature')
+    expect(window.history.replaceState).toHaveBeenCalled()
+  })
+
+  it('shows confirmation modal when switching with unsaved changes', async () => {
+    const { modals } = await import('@mantine/modals')
+    mockIsSelectedDirty.mockReturnValue(true)
+
+    const { result } = renderHook(() => useBranchActions(defaultOptions), {
+      wrapper,
+    })
+
+    act(() => {
+      result.current.handleBranchChange('feature')
+    })
+
+    await waitFor(() => {
+      expect(modals.openConfirmModal).toHaveBeenCalled()
+    })
+  })
+
+  it('does not switch branch when already on that branch', async () => {
+    const { result } = renderHook(() => useBranchActions(defaultOptions), {
+      wrapper,
+    })
+
+    await act(async () => {
+      await result.current.handleBranchChange('main')
+    })
+
+    // Should not call setBranchName since we're already on 'main'
+    expect(mockSetBranchName).not.toHaveBeenCalled()
+  })
+
+  it('does not switch branch when user cancels', async () => {
+    const { modals } = await import('@mantine/modals')
+    mockIsSelectedDirty.mockReturnValue(true)
+
+    // Mock the confirmation modal to call onCancel
+    ;(modals.openConfirmModal as any).mockImplementation((config: any) => {
+      config.onCancel()
+    })
+
+    const { result } = renderHook(() => useBranchActions(defaultOptions), {
+      wrapper,
+    })
+
+    await expect(result.current.handleBranchChange('feature')).rejects.toThrow(
+      'User cancelled branch switch',
+    )
+
+    expect(mockSetBranchName).not.toHaveBeenCalled()
+  })
+
+  it('creates new branch successfully', async () => {
+    mockClient.branches.create.mockResolvedValueOnce({
+      ok: true,
+      status: 200,
+      data: {
+        branch: {
+          name: 'new-branch',
+          status: 'editing',
+          access: { allowedUsers: [], allowedGroups: [] },
+          createdBy: 'user1',
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+        },
+      },
+    })
+
+    const { result } = renderHook(() => useBranchActions(defaultOptions), {
+      wrapper,
+    })
+
+    await act(async () => {
+      await result.current.handleCreateBranch({
+        name: 'new-branch',
+        title: 'New Branch',
+        description: 'Test branch',
+      })
+    })
+
+    expect(mockClient.branches.create).toHaveBeenCalledWith({
+      branch: 'new-branch',
+      title: 'New Branch',
+      description: 'Test branch',
+    })
+    expect(mockOnReloadBranches).toHaveBeenCalled()
+    expect(mockSetBranchName).toHaveBeenCalledWith('new-branch')
+  })
+
+  it('handles create branch error', async () => {
+    mockClient.branches.create.mockResolvedValueOnce({
+      ok: false,
+      status: 400,
+      error: 'Branch already exists',
+    })
+
+    const { result } = renderHook(() => useBranchActions(defaultOptions), {
+      wrapper,
+    })
+
+    await act(async () => {
+      await result.current.handleCreateBranch({ name: 'existing-branch' })
+    })
+
+    // Should not switch to the branch or reload if creation failed
+    expect(mockSetBranchName).not.toHaveBeenCalled()
+    expect(mockOnReloadBranches).not.toHaveBeenCalled()
+  })
+
+  it('prompts for confirmation when creating branch with unsaved changes', async () => {
+    const { modals } = await import('@mantine/modals')
+    mockIsSelectedDirty.mockReturnValue(true)
+
+    const { result } = renderHook(() => useBranchActions(defaultOptions), {
+      wrapper,
+    })
+
+    act(() => {
+      result.current.handleCreateBranch({ name: 'new-branch' })
+    })
+
+    await waitFor(() => {
+      expect(modals.openConfirmModal).toHaveBeenCalled()
+    })
+  })
+
+  it('does not create branch when user cancels dirty check', async () => {
+    const { modals } = await import('@mantine/modals')
+    mockIsSelectedDirty.mockReturnValue(true)
+
+    // Mock the confirmation modal to call onCancel
+    ;(modals.openConfirmModal as any).mockImplementation((config: any) => {
+      config.onCancel()
+    })
+
+    const { result } = renderHook(() => useBranchActions(defaultOptions), {
+      wrapper,
+    })
+
+    await act(async () => {
+      await result.current.handleCreateBranch({ name: 'new-branch' })
+    })
+
+    expect(mockClient.branches.create).not.toHaveBeenCalled()
+  })
+
+  it('updates URL when switching branches', async () => {
+    const { result } = renderHook(() => useBranchActions(defaultOptions), {
+      wrapper,
+    })
+
+    await act(async () => {
+      await result.current.handleBranchChange('feature')
+    })
+
+    expect(window.history.replaceState).toHaveBeenCalled()
+    const calls = (window.history.replaceState as any).mock.calls
+    const urlCall = calls.find((call: any) => call[2].includes('branch=feature'))
+    expect(urlCall).toBeTruthy()
+  })
+
+  it('calls onBranchSwitch callback when provided', async () => {
+    const { result } = renderHook(() => useBranchActions(defaultOptions), {
+      wrapper,
+    })
+
+    await act(async () => {
+      await result.current.handleBranchChange('feature')
+    })
+
+    expect(mockOnBranchSwitch).toHaveBeenCalledWith('feature')
+  })
+
+  it('works without optional onBranchSwitch callback', async () => {
+    const optionsWithoutCallback = {
+      ...defaultOptions,
+      onBranchSwitch: undefined,
+    }
+
+    const { result } = renderHook(() => useBranchActions(optionsWithoutCallback), { wrapper })
+
+    await act(async () => {
+      await result.current.handleBranchChange('feature')
+    })
+
+    expect(mockSetBranchName).toHaveBeenCalledWith('feature')
+    // Should not throw error when callback is undefined
+  })
+})

package/src/editor/hooks/useBranchActions.tsx

@@ -0,0 +1,121 @@
+import { modals } from '@mantine/modals'
+import { notifications } from '@mantine/notifications'
+import { Text } from '@mantine/core'
+import { useApiClient } from '../context'
+
+export interface UseBranchActionsOptions {
+  branchName: string
+  setBranchName: (name: string) => void
+  isSelectedDirty: () => boolean // From useDraftManager
+  onReloadBranches: () => Promise<void>
+  onBranchSwitch?: (branch: string) => void
+}
+
+export interface UseBranchActionsReturn {
+  handleBranchChange: (branch: string | null) => Promise<void>
+  handleCreateBranch: (branch: {
+    name: string
+    title?: string
+    description?: string
+  }) => Promise<void>
+}
+
+/**
+ * Custom hook for branch navigation actions with dirty check support.
+ *
+ * Handles:
+ * - Branch switching with unsaved changes confirmation
+ * - Creating new branches with dirty check
+ *
+ * @example
+ * ```tsx
+ * const { handleBranchChange, handleCreateBranch } = useBranchActions({
+ *   branchName,
+ *   setBranchName,
+ *   isSelectedDirty,
+ *   onReloadBranches
+ * })
+ * ```
+ */
+export function useBranchActions(options: UseBranchActionsOptions): UseBranchActionsReturn {
+  const apiClient = useApiClient()
+
+  // Helper: Perform branch switch with URL update
+  const performBranchSwitch = (next: string) => {
+    // Update branchName state - hooks will react:
+    // - useEntryManager clears selectedPath and refreshes entries
+    // - useDraftManager clears drafts/loadedValues
+    // - useCommentSystem loads comments
+    options.setBranchName(next)
+
+    // Update URL
+    if (typeof window !== 'undefined') {
+      const url = new URL(window.location.href)
+      url.searchParams.set('branch', next)
+      window.history.replaceState({}, '', url.toString())
+    }
+    options.onBranchSwitch?.(next)
+  }
+
+  // Helper: Check for dirty state and show modal
+  const confirmIfDirty = async (message: string): Promise<boolean> => {
+    if (!options.isSelectedDirty()) return true
+
+    return new Promise<boolean>((resolve) => {
+      modals.openConfirmModal({
+        title: 'Unsaved Changes',
+        children: <Text size="sm">{message}</Text>,
+        labels: { confirm: 'Continue Anyway', cancel: 'Cancel' },
+        confirmProps: { color: 'red' },
+        onCancel: () => resolve(false),
+        onConfirm: () => resolve(true),
+      })
+    })
+  }
+
+  const handleBranchChange = async (next: string | null) => {
+    if (!next || next === options.branchName) return
+
+    const confirmed = await confirmIfDirty('You have unsaved changes. Switch branches anyway?')
+    if (!confirmed) throw new Error('User cancelled branch switch')
+
+    performBranchSwitch(next)
+  }
+
+  const handleCreateBranch = async (branch: {
+    name: string
+    title?: string
+    description?: string
+  }) => {
+    const confirmed = await confirmIfDirty('Create new branch without saving changes?')
+    if (!confirmed) return
+
+    // Create the branch via API
+    try {
+      const result = await apiClient.branches.create({
+        branch: branch.name,
+        title: branch.title,
+        description: branch.description,
+      })
+      if (!result.ok) {
+        throw new Error(result.error || 'Failed to create branch')
+      }
+      notifications.show({
+        message: `Branch "${branch.name}" created`,
+        color: 'green',
+      })
+      await options.onReloadBranches()
+
+      // Switch to new branch (already confirmed dirty check)
+      performBranchSwitch(branch.name)
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to create branch'
+      notifications.show({ message, color: 'red' })
+    }
+  }
+
+  return {
+    handleBranchChange,
+    handleCreateBranch,
+  }
+}