@tuturuuu/ui 0.5.0 → 0.6.0

package/src/components/ui/tu-do/providers/__tests__/task-dialog-provider.test.tsx

@@ -9,8 +9,8 @@ import {
   useTaskDialogContext,
 } from '../task-dialog-provider';
 
-const { mockGetCurrentUserTask } = vi.hoisted(() => ({
-  mockGetCurrentUserTask: vi.fn(),
+const { mockGetTaskDialogHydration } = vi.hoisted(() => ({
+  mockGetTaskDialogHydration: vi.fn(),
 }));
 
 vi.mock('@tuturuuu/internal-api/tasks', async () => {
@@ -20,7 +20,7 @@ vi.mock('@tuturuuu/internal-api/tasks', async () => {
 
   return {
     ...actual,
-    getCurrentUserTask: mockGetCurrentUserTask,
+    getTaskDialogHydration: mockGetTaskDialogHydration,
   };
 });
 
@@ -59,13 +59,25 @@ const wrapper = ({ children }: { children: ReactNode }) => (
   <TaskDialogProvider>{children}</TaskDialogProvider>
 );
 
+function createDeferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (reason?: unknown) => void;
+  const promise = new Promise<T>((promiseResolve, promiseReject) => {
+    resolve = promiseResolve;
+    reject = promiseReject;
+  });
+
+  return { promise, resolve, reject };
+}
+
 describe('TaskDialogProvider', () => {
   afterEach(() => {
+    mockGetTaskDialogHydration.mockReset();
     vi.useRealTimers();
   });
 
   it('should enable collaborationMode for paid task workspaces opened by id', async () => {
-    mockGetCurrentUserTask.mockResolvedValueOnce({
+    mockGetTaskDialogHydration.mockResolvedValueOnce({
       task: {
         ...mockTask,
         list: { board_id: 'board-1' },
@@ -87,7 +99,7 @@ describe('TaskDialogProvider', () => {
   });
 
   it('should disable collaborationMode for free task workspaces opened by id', async () => {
-    mockGetCurrentUserTask.mockResolvedValueOnce({
+    mockGetTaskDialogHydration.mockResolvedValueOnce({
       task: {
         ...mockTask,
         list: { board_id: 'board-1' },
@@ -108,6 +120,206 @@ describe('TaskDialogProvider', () => {
     expect(result.current.state.taskWorkspaceTier).toBe('FREE');
   });
 
+  it('opens by id immediately from an initial snapshot before hydrating task details', async () => {
+    const initialSharedContext = {
+      boardConfig: {
+        id: 'board-1',
+        name: 'Visible board',
+        ws_id: 'workspace-1',
+        ticket_prefix: 'VIS',
+      },
+      availableLists: [mockList],
+      workspaceLabels: [],
+      workspaceMembers: [],
+      workspaceProjects: [],
+    };
+    const deferred = createDeferred<{
+      task: Task & { list?: { board_id?: string | null } | null };
+      availableLists: TaskList[];
+      taskWsId: string;
+      taskWorkspacePersonal: boolean;
+      taskWorkspaceTier: 'PRO';
+    }>();
+    mockGetTaskDialogHydration.mockReturnValueOnce(deferred.promise);
+
+    const { result } = renderHook(() => useTaskDialogContext(), { wrapper });
+    let openPromise!: Promise<boolean>;
+
+    act(() => {
+      openPromise = result.current.openTaskById(mockTask.id, {
+        initialTask: { ...mockTask, name: 'Visible snapshot' },
+        boardId: 'board-1',
+        availableLists: [mockList],
+        taskWsId: 'workspace-1',
+        initialSharedContext,
+      });
+    });
+
+    expect(result.current.state).toMatchObject({
+      isOpen: true,
+      isHydratingTask: true,
+      taskLoadError: false,
+      boardId: 'board-1',
+      realtimeEnabled: false,
+      initialSharedContext,
+      task: {
+        id: mockTask.id,
+        name: 'Visible snapshot',
+      },
+    });
+
+    await act(async () => {
+      deferred.resolve({
+        task: {
+          ...mockTask,
+          name: 'Hydrated task',
+          list: { board_id: 'board-1' },
+        },
+        availableLists: [mockList],
+        taskWsId: 'workspace-1',
+        taskWorkspacePersonal: false,
+        taskWorkspaceTier: 'PRO',
+      });
+      await openPromise;
+    });
+
+    expect(mockGetTaskDialogHydration).toHaveBeenCalledWith(
+      mockTask.id,
+      {
+        taskWsId: 'workspace-1',
+        taskWorkspacePersonal: undefined,
+        taskWorkspaceTier: undefined,
+      },
+      expect.objectContaining({
+        fetch: expect.any(Function),
+      })
+    );
+    expect(result.current.state).toMatchObject({
+      isOpen: true,
+      isHydratingTask: false,
+      taskLoadError: false,
+      collaborationMode: true,
+      realtimeEnabled: true,
+      taskHydrationVersion: 1,
+      taskWorkspaceTier: 'PRO',
+      task: {
+        id: mockTask.id,
+        name: 'Hydrated task',
+      },
+    });
+    expect(result.current.state.initialSharedContext).toBeUndefined();
+  });
+
+  it('keeps the dialog open in a non-editable error state when hydration fails', async () => {
+    const initialSharedContext = {
+      boardConfig: {
+        id: 'board-1',
+        name: 'Visible board',
+        ws_id: 'workspace-1',
+        ticket_prefix: 'VIS',
+      },
+      availableLists: [mockList],
+      workspaceLabels: [],
+      workspaceMembers: [],
+      workspaceProjects: [],
+    };
+    const deferred = createDeferred<never>();
+    mockGetTaskDialogHydration.mockReturnValueOnce(deferred.promise);
+
+    const { result } = renderHook(() => useTaskDialogContext(), { wrapper });
+    let openPromise!: Promise<boolean>;
+
+    act(() => {
+      openPromise = result.current.openTaskById(mockTask.id, {
+        initialTask: { ...mockTask, name: 'Visible snapshot' },
+        boardId: 'board-1',
+        initialSharedContext,
+      });
+    });
+
+    expect(result.current.state.isOpen).toBe(true);
+    expect(result.current.state.isHydratingTask).toBe(true);
+
+    await act(async () => {
+      deferred.reject(new Error('network failed'));
+      await openPromise;
+    });
+
+    expect(result.current.state).toMatchObject({
+      isOpen: true,
+      isHydratingTask: false,
+      taskLoadError: true,
+      initialSharedContext,
+      task: {
+        id: mockTask.id,
+        name: 'Visible snapshot',
+      },
+    });
+  });
+
+  it('ignores stale hydration responses after another task opens', async () => {
+    const firstDeferred = createDeferred<{
+      task: Task & { list?: { board_id?: string | null } | null };
+      availableLists: TaskList[];
+      taskWsId: string;
+      taskWorkspacePersonal: boolean;
+      taskWorkspaceTier: 'PRO';
+    }>();
+    mockGetTaskDialogHydration.mockReturnValueOnce(firstDeferred.promise);
+
+    const { result } = renderHook(() => useTaskDialogContext(), { wrapper });
+    let firstOpenPromise!: Promise<boolean>;
+
+    act(() => {
+      firstOpenPromise = result.current.openTaskById('task-1', {
+        initialTask: { ...mockTask, id: 'task-1', name: 'First snapshot' },
+        boardId: 'board-1',
+      });
+    });
+    act(() => {
+      result.current.closeDialog();
+    });
+    act(() => {
+      result.current.openTask(
+        { ...mockTask, id: 'task-2', name: 'Second task' },
+        'board-1',
+        [mockList]
+      );
+    });
+
+    expect(result.current.state).toMatchObject({
+      isOpen: true,
+      task: {
+        id: 'task-2',
+        name: 'Second task',
+      },
+    });
+
+    await act(async () => {
+      firstDeferred.resolve({
+        task: {
+          ...mockTask,
+          id: 'task-1',
+          name: 'Stale hydrated task',
+          list: { board_id: 'board-1' },
+        },
+        availableLists: [mockList],
+        taskWsId: 'workspace-1',
+        taskWorkspacePersonal: false,
+        taskWorkspaceTier: 'PRO',
+      });
+      await firstOpenPromise;
+    });
+
+    expect(result.current.state).toMatchObject({
+      isOpen: true,
+      task: {
+        id: 'task-2',
+        name: 'Second task',
+      },
+    });
+  });
+
   it('should provide initial dialog state', () => {
     const { result } = renderHook(() => useTaskDialogContext(), { wrapper });
 

package/src/components/ui/tu-do/providers/task-dialog-provider.tsx

@@ -14,6 +14,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import type { SharedTaskContext } from '../shared/task-edit-dialog/hooks/use-task-data';
 import type {
   PendingRelationship,
   PendingRelationshipType,
@@ -58,6 +59,26 @@ interface TaskDialogState {
   taskWorkspacePersonal?: boolean;
   /** The task workspace tier used to gate cursor tracking for edit mode */
   taskWorkspaceTier?: WorkspaceProductTier;
+  /** Initial board/list context used for immediate partial-task rendering. */
+  initialSharedContext?: SharedTaskContext;
+  /** True while an existing task was opened from a partial snapshot and is hydrating. */
+  isHydratingTask?: boolean;
+  /** True when the latest hydration request failed after the dialog already opened. */
+  taskLoadError?: boolean;
+  /** Bumps when async task hydration replaces a partial snapshot. */
+  taskHydrationVersion?: number;
+  taskOpenRequestId?: number;
+}
+
+interface OpenTaskByIdOptions {
+  initialTask?: Partial<Task>;
+  boardId?: string;
+  availableLists?: TaskList[];
+  fakeTaskUrl?: boolean;
+  taskWsId?: string;
+  taskWorkspacePersonal?: boolean;
+  taskWorkspaceTier?: WorkspaceProductTier;
+  initialSharedContext?: SharedTaskContext;
 }
 
 interface TaskDialogContextValue {
@@ -85,7 +106,10 @@ interface TaskDialogContextValue {
   ) => void;
 
   // Open task by ID (fetches task data first)
-  openTaskById: (taskId: string) => Promise<boolean>;
+  openTaskById: (
+    taskId: string,
+    options?: OpenTaskByIdOptions
+  ) => Promise<boolean>;
 
   // Open dialog for creating new task
   createTask: (
@@ -178,9 +202,11 @@ export function TaskDialogProvider({
   const [state, setState] = useState<TaskDialogState>({
     isOpen: false,
   });
+  const stateRef = useRef(state);
   const isDialogOpenRef = useRef(state.isOpen);
   const queuedDialogStatesRef = useRef<TaskDialogState[]>([]);
   const queuedOpenTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const taskOpenRequestIdRef = useRef(0);
   const closeRequestHandlerRef = useRef<
     (() => boolean | undefined | Promise<boolean | undefined>) | null
   >(null);
@@ -283,7 +309,52 @@ export function TaskDialogProvider({
     [closeDialog]
   );
 
+  const replaceHydratingDialogState = useCallback(
+    (requestId: number, nextDialogState: TaskDialogState) => {
+      queuedDialogStatesRef.current = queuedDialogStatesRef.current.map(
+        (queuedDialogState) =>
+          queuedDialogState.taskOpenRequestId === requestId
+            ? nextDialogState
+            : queuedDialogState
+      );
+
+      setState((currentState) =>
+        currentState.taskOpenRequestId === requestId
+          ? nextDialogState
+          : currentState
+      );
+    },
+    []
+  );
+
+  const markHydratingDialogFailed = useCallback((requestId: number) => {
+    queuedDialogStatesRef.current = queuedDialogStatesRef.current.map(
+      (queuedDialogState) =>
+        queuedDialogState.taskOpenRequestId === requestId
+          ? {
+              ...queuedDialogState,
+              isHydratingTask: false,
+              taskLoadError: true,
+              taskHydrationVersion:
+                (queuedDialogState.taskHydrationVersion ?? 0) + 1,
+            }
+          : queuedDialogState
+    );
+
+    setState((currentState) =>
+      currentState.taskOpenRequestId === requestId
+        ? {
+            ...currentState,
+            isHydratingTask: false,
+            taskLoadError: true,
+            taskHydrationVersion: (currentState.taskHydrationVersion ?? 0) + 1,
+          }
+        : currentState
+    );
+  }, []);
+
   useEffect(() => {
+    stateRef.current = state;
     isDialogOpenRef.current = state.isOpen;
 
     if (state.isOpen) {
@@ -292,7 +363,7 @@ export function TaskDialogProvider({
 
     closeRequestInFlightRef.current = false;
     flushQueuedDialogState();
-  }, [flushQueuedDialogState, state.isOpen]);
+  }, [flushQueuedDialogState, state]);
 
   useEffect(() => {
     return () => {
@@ -344,48 +415,108 @@ export function TaskDialogProvider({
   );
 
   const openTaskById = useCallback(
-    async (taskId: string) => {
-      try {
-        let response:
-          | {
-              task: Task & {
-                list?: {
-                  board_id?: string | null;
-                } | null;
-              };
-              availableLists: TaskList[];
-              taskWsId: string;
-              taskWorkspacePersonal: boolean;
-              taskWorkspaceTier: WorkspaceProductTier;
-            }
-          | undefined;
+    async (taskId: string, options?: OpenTaskByIdOptions) => {
+      const requestId = taskOpenRequestIdRef.current + 1;
+      taskOpenRequestIdRef.current = requestId;
+
+      const initialTaskSnapshot = options?.initialTask;
+      const now = new Date().toISOString();
+      const initialTask = {
+        name: '',
+        description: '',
+        list_id: '',
+        display_number: 0,
+        created_at: now,
+        updated_at: now,
+        deleted: false,
+        archived: false,
+        labels: [],
+        assignees: [],
+        projects: [],
+        ...initialTaskSnapshot,
+        id: taskId,
+      } as Task;
+      const initialTaskWithBoard = initialTaskSnapshot as
+        | (Partial<Task> & {
+            board_id?: string | null;
+            list?: { board_id?: string | null } | null;
+          })
+        | undefined;
+      const initialBoardId =
+        options?.boardId ??
+        initialTaskWithBoard?.board_id ??
+        initialTaskWithBoard?.list?.board_id ??
+        undefined;
+      const initialTaskWorkspacePersonal =
+        options?.taskWorkspacePersonal ?? isPersonalWorkspace;
 
-        try {
-          const { getCurrentUserTask } = await import(
-            '@tuturuuu/internal-api/tasks'
-          );
+      const initialDialogState: TaskDialogState = {
+        isOpen: true,
+        task: initialTask,
+        boardId: initialBoardId,
+        mode: 'edit',
+        availableLists: options?.availableLists,
+        collaborationMode: false,
+        realtimeEnabled: false,
+        fakeTaskUrl: options?.fakeTaskUrl,
+        taskWsId: options?.taskWsId,
+        taskWorkspacePersonal: initialTaskWorkspacePersonal,
+        taskWorkspaceTier: options?.taskWorkspaceTier,
+        initialSharedContext: options?.initialSharedContext,
+        isHydratingTask: true,
+        taskLoadError: false,
+        taskHydrationVersion: 0,
+        taskOpenRequestId: requestId,
+      };
+      const currentState = stateRef.current;
+
+      if (
+        currentState.isOpen &&
+        currentState.task?.id === taskId &&
+        currentState.taskLoadError
+      ) {
+        setState(initialDialogState);
+      } else {
+        queueDialogState(initialDialogState);
+      }
 
-          response = await getCurrentUserTask(taskId, {
+      try {
+        const { getTaskDialogHydration } = await import(
+          '@tuturuuu/internal-api/tasks'
+        );
+
+        const response = await getTaskDialogHydration(
+          taskId,
+          {
+            taskWsId: options?.taskWsId,
+            taskWorkspacePersonal: options?.taskWorkspacePersonal,
+            taskWorkspaceTier: options?.taskWorkspaceTier,
+          },
+          {
             fetch: (input, init) =>
               fetch(new URL(String(input), window.location.origin).toString(), {
                 ...init,
                 cache: 'no-store',
               }),
-          });
-        } catch {
-          return false;
-        }
+          }
+        );
 
         if (!response) {
+          markHydratingDialogFailed(requestId);
           return false;
         }
 
-        const transformedTask = response.task;
+        const transformedTask = response.task as Task & {
+          board_id?: string | null;
+          list?: {
+            board_id?: string | null;
+          } | null;
+        };
         const taskWsId = response.taskWsId;
         const taskWorkspacePersonal = response.taskWorkspacePersonal;
         const taskWorkspaceTier = response.taskWorkspaceTier;
         const isTaskWorkspacePersonal =
-          taskWorkspacePersonal ?? isPersonalWorkspace;
+          taskWorkspacePersonal ?? initialTaskWorkspacePersonal;
 
         // Realtime sync (auto-save via Yjs) is always enabled in edit mode.
         // Cursor presence requires tier check and non-personal workspace.
@@ -394,26 +525,40 @@ export function TaskDialogProvider({
           taskWorkspaceTier
         );
 
-        // Open the task in edit mode
-        queueDialogState({
+        replaceHydratingDialogState(requestId, {
           isOpen: true,
           task: transformedTask as Task,
-          boardId: transformedTask.list?.board_id ?? undefined,
+          boardId:
+            transformedTask.board_id ??
+            transformedTask.list?.board_id ??
+            initialBoardId,
           mode: 'edit',
-          availableLists: response.availableLists || undefined,
+          availableLists:
+            response.availableLists || options?.availableLists || undefined,
           collaborationMode: shouldEnableCursors,
           realtimeEnabled: true,
+          fakeTaskUrl: options?.fakeTaskUrl,
           taskWsId,
           taskWorkspacePersonal: isTaskWorkspacePersonal,
           taskWorkspaceTier,
+          isHydratingTask: false,
+          taskLoadError: false,
+          taskHydrationVersion: 1,
+          taskOpenRequestId: requestId,
         });
         return true;
-      } catch (error) {
-        console.error('Failed to open task:', error);
+      } catch {
+        markHydratingDialogFailed(requestId);
         return false;
       }
     },
-    [canUseTaskCursors, isPersonalWorkspace, queueDialogState]
+    [
+      canUseTaskCursors,
+      isPersonalWorkspace,
+      markHydratingDialogFailed,
+      queueDialogState,
+      replaceHydratingDialogState,
+    ]
   );
 
   const createTask = useCallback(