7960789d37
Keep modal history entries in sync so mobile swipe-back reliably closes reopened task detail views. - add removeNav support to navigation history and ignore self-triggered popstate callbacks - route modal and overlay programmatic close handlers through navigation-aware wrappers - add regression coverage for close-and-reopen mobile detail flows and document the stale stack bug Files changed: .../navigation-history-stale-modal-stack.md | 85 +++++++++++++ packages/dashboard/app/App.tsx | 35 ++++-- packages/dashboard/app/components/AppModals.tsx | 137 +++++++++++++++++---- .../app/components/__tests__/AppModals.test.tsx | 5 +- .../__tests__/navigation-history.test.tsx | 113 ++++++++++++++++- .../hooks/__tests__/useNavigationHistory.test.ts | 98 +++++++++++++++ .../dashboard/app/hooks/useNavigationHistory.ts | 55 ++++++++- 7 files changed, 494 insertions(+), 34 deletions(-) Fusion-Task-Id: FN-6167 Fusion-Task-Lineage: 086d60ba-7e3d-4e83-b9b4-37ec49b06393
524 lines
18 KiB
TypeScript
524 lines
18 KiB
TypeScript
import { useCallback, useEffect, useState, lazy, Suspense } from "react";
|
|
import type { ProjectInfo } from "../api";
|
|
import type { ColorTheme, Column, MergeResult, Task, TaskCreateInput, ThemeMode, GithubIssueAction } from "@fusion/core";
|
|
import type { UseProjectActionsResult } from "../hooks/useProjectActions";
|
|
import type { ModalManager } from "../hooks/useModalManager";
|
|
import type { UseTaskHandlersResult } from "../hooks/useTaskHandlers";
|
|
import type { Toast, ToastType } from "../hooks/useToast";
|
|
import { ModalErrorBoundary } from "./ErrorBoundary";
|
|
import { TaskDetailModal } from "./TaskDetailModal";
|
|
import { GitHubImportModal } from "./GitHubImportModal";
|
|
import { PlanningModeModal } from "./PlanningModeModal";
|
|
import { SubtaskBreakdownModal } from "./SubtaskBreakdownModal";
|
|
import { TerminalModal } from "./TerminalModal";
|
|
import { ScriptsModal } from "./ScriptsModal";
|
|
import { FileBrowserModal } from "./FileBrowserModal";
|
|
import { TodoModal } from "./TodoModal";
|
|
import { UsageIndicator } from "./UsageIndicator";
|
|
import { ScheduledTasksModal } from "./ScheduledTasksModal";
|
|
import { NewTaskModal } from "./NewTaskModal";
|
|
import { SystemStatsModal } from "./SystemStatsModal";
|
|
import { ActivityLogModal } from "./ActivityLogModal";
|
|
import { GitManagerModal } from "./GitManagerModal";
|
|
import { AgentListModal } from "./AgentListModal";
|
|
import { ModelOnboardingModal } from "./ModelOnboardingModal";
|
|
import { ToastContainer } from "./ToastContainer";
|
|
import { GroupTaskModal } from "./GroupTaskModal";
|
|
import { useNavigationHistoryContext } from "../hooks/useNavigationHistory";
|
|
|
|
const SetupWizardModal = lazy(() => import("./SetupWizardModal").then((m) => ({ default: m.SetupWizardModal })));
|
|
const SettingsModal = lazy(() => import("./SettingsModal").then((m) => ({ default: m.SettingsModal })));
|
|
const WorkflowNodeEditor = lazy(() => import("./WorkflowNodeEditor").then((m) => ({ default: m.WorkflowNodeEditor })));
|
|
|
|
function prefetchSettingsModal() {
|
|
const idle: (cb: () => void, opts?: { timeout?: number }) => number =
|
|
(typeof window !== "undefined" &&
|
|
(window as Window & {
|
|
requestIdleCallback?: (cb: () => void, opts?: { timeout?: number }) => number;
|
|
}).requestIdleCallback) ||
|
|
((cb: () => void) => globalThis.setTimeout(cb, 200) as unknown as number);
|
|
|
|
idle(() => {
|
|
void import("./SettingsModal");
|
|
}, { timeout: 1_500 });
|
|
}
|
|
|
|
interface AppModalsProps {
|
|
projectId?: string;
|
|
tasks: Task[];
|
|
projects: ProjectInfo[];
|
|
currentProject: ProjectInfo | null;
|
|
addToast: (message: string, type?: ToastType) => void;
|
|
toasts: Toast[];
|
|
removeToast: (id: number) => void;
|
|
modalManager: ModalManager;
|
|
projectActions: Pick<UseProjectActionsResult, "handleAddProject" | "handleSetupComplete" | "handleModelOnboardingComplete">;
|
|
taskHandlers: Pick<UseTaskHandlersResult, "handleModalCreate" | "handlePlanningTaskCreated" | "handlePlanningTasksCreated" | "handleSubtaskTasksCreated" | "handleGitHubImport">;
|
|
taskOperations: {
|
|
moveTask: (taskId: string, column: Column, optionsOrPosition?: { preserveProgress?: boolean } | number) => Promise<Task>;
|
|
deleteTask: (taskId: string, options?: {
|
|
removeDependencyReferences?: boolean;
|
|
removeLineageReferences?: boolean;
|
|
githubIssueAction?: GithubIssueAction;
|
|
allowResurrection?: boolean;
|
|
}) => Promise<Task>;
|
|
mergeTask: (taskId: string) => Promise<MergeResult>;
|
|
archiveTask: (taskId: string, options?: { removeLineageReferences?: boolean }) => Promise<Task>;
|
|
retryTask: (taskId: string) => Promise<Task>;
|
|
resetTask: (taskId: string) => Promise<Task>;
|
|
duplicateTask: (taskId: string) => Promise<Task>;
|
|
};
|
|
deepLink: {
|
|
handleDetailClose: () => void;
|
|
};
|
|
settings: {
|
|
prAuthAvailable: boolean;
|
|
themeMode: ThemeMode;
|
|
colorTheme: ColorTheme;
|
|
dashboardFontScalePct: number;
|
|
setThemeMode: (mode: ThemeMode) => void;
|
|
setColorTheme: (theme: ColorTheme) => void;
|
|
setDashboardFontScalePct: (scalePct: number) => void;
|
|
};
|
|
/** Optional override for the settings modal close handler. When provided, this is called instead of modalManager.closeSettings. */
|
|
onSettingsClose?: () => void;
|
|
/** Optional callback to reopen the onboarding guide from Settings. Closes Settings and opens ModelOnboardingModal. */
|
|
onReopenOnboarding?: () => void;
|
|
/** Optional callback to open mailbox approvals from Settings. */
|
|
onOpenApprovals?: (approvalId?: string) => void;
|
|
}
|
|
|
|
export function AppModals({
|
|
projectId,
|
|
tasks,
|
|
projects,
|
|
currentProject,
|
|
addToast,
|
|
toasts,
|
|
removeToast,
|
|
modalManager,
|
|
projectActions,
|
|
taskHandlers,
|
|
taskOperations,
|
|
deepLink,
|
|
settings,
|
|
onSettingsClose,
|
|
onReopenOnboarding,
|
|
onOpenApprovals,
|
|
}: AppModalsProps) {
|
|
const { pushNav, removeNav } = useNavigationHistoryContext();
|
|
const [firstCreatedTask, setFirstCreatedTask] = useState<Task | null>(null);
|
|
const detailTask = modalManager.detailTask
|
|
? (() => {
|
|
const liveTask = tasks.find((task) => task.id === modalManager.detailTask?.id);
|
|
if (!liveTask) {
|
|
return modalManager.detailTask;
|
|
}
|
|
|
|
if ("prompt" in modalManager.detailTask) {
|
|
return {
|
|
...modalManager.detailTask,
|
|
...liveTask,
|
|
prompt: modalManager.detailTask.prompt,
|
|
log: modalManager.detailTask.log,
|
|
};
|
|
}
|
|
|
|
return liveTask;
|
|
})()
|
|
: null;
|
|
|
|
// Use the override handler if provided, otherwise fall back to modalManager.closeSettings
|
|
const handleSettingsClose = onSettingsClose ?? modalManager.closeSettings;
|
|
|
|
const closeDetailWithNav = useCallback(() => {
|
|
removeNav(modalManager.closeDetailTask);
|
|
deepLink.handleDetailClose();
|
|
}, [deepLink, modalManager.closeDetailTask, removeNav]);
|
|
|
|
const closeGroupWithNav = useCallback(() => {
|
|
removeNav(modalManager.closeGroupModal);
|
|
modalManager.closeGroupModal();
|
|
}, [modalManager.closeGroupModal, removeNav]);
|
|
|
|
const closeSettingsWithNav = useCallback(() => {
|
|
removeNav(handleSettingsClose);
|
|
handleSettingsClose();
|
|
}, [handleSettingsClose, removeNav]);
|
|
|
|
const closeGitHubImportWithNav = useCallback(() => {
|
|
removeNav(modalManager.closeGitHubImport);
|
|
modalManager.closeGitHubImport();
|
|
}, [modalManager.closeGitHubImport, removeNav]);
|
|
|
|
const closePlanningWithNav = useCallback(() => {
|
|
removeNav(modalManager.closePlanning);
|
|
modalManager.closePlanning();
|
|
}, [modalManager.closePlanning, removeNav]);
|
|
|
|
const closeSubtaskWithNav = useCallback(() => {
|
|
removeNav(modalManager.closeSubtask);
|
|
modalManager.closeSubtask();
|
|
}, [modalManager.closeSubtask, removeNav]);
|
|
|
|
const closeTerminalWithNav = useCallback(() => {
|
|
removeNav(modalManager.closeTerminal);
|
|
modalManager.closeTerminal();
|
|
}, [modalManager.closeTerminal, removeNav]);
|
|
|
|
const closeScriptsWithNav = useCallback(() => {
|
|
removeNav(modalManager.closeScripts);
|
|
modalManager.closeScripts();
|
|
}, [modalManager.closeScripts, removeNav]);
|
|
|
|
const closeFilesWithNav = useCallback(() => {
|
|
removeNav(modalManager.closeFiles);
|
|
modalManager.closeFiles();
|
|
}, [modalManager.closeFiles, removeNav]);
|
|
|
|
const closeTodosWithNav = useCallback(() => {
|
|
removeNav(modalManager.closeTodos);
|
|
modalManager.closeTodos();
|
|
}, [modalManager.closeTodos, removeNav]);
|
|
|
|
const closeUsageWithNav = useCallback(() => {
|
|
removeNav(modalManager.closeUsage);
|
|
modalManager.closeUsage();
|
|
}, [modalManager.closeUsage, removeNav]);
|
|
|
|
const closeSystemStatsWithNav = useCallback(() => {
|
|
removeNav(modalManager.closeSystemStats);
|
|
modalManager.closeSystemStats();
|
|
}, [modalManager.closeSystemStats, removeNav]);
|
|
|
|
const closeSchedulesWithNav = useCallback(() => {
|
|
removeNav(modalManager.closeSchedules);
|
|
modalManager.closeSchedules();
|
|
}, [modalManager.closeSchedules, removeNav]);
|
|
|
|
const closeNewTaskWithNav = useCallback(() => {
|
|
removeNav(modalManager.closeNewTask);
|
|
modalManager.closeNewTask();
|
|
}, [modalManager.closeNewTask, removeNav]);
|
|
|
|
const closeActivityLogWithNav = useCallback(() => {
|
|
removeNav(modalManager.closeActivityLog);
|
|
modalManager.closeActivityLog();
|
|
}, [modalManager.closeActivityLog, removeNav]);
|
|
|
|
const closeGitManagerWithNav = useCallback(() => {
|
|
removeNav(modalManager.closeGitManager);
|
|
modalManager.closeGitManager();
|
|
}, [modalManager.closeGitManager, removeNav]);
|
|
|
|
const closeWorkflowEditorWithNav = useCallback(() => {
|
|
removeNav(modalManager.closeWorkflowEditor);
|
|
modalManager.closeWorkflowEditor();
|
|
}, [modalManager.closeWorkflowEditor, removeNav]);
|
|
|
|
const closeAgentsWithNav = useCallback(() => {
|
|
removeNav(modalManager.closeAgents);
|
|
modalManager.closeAgents();
|
|
}, [modalManager.closeAgents, removeNav]);
|
|
|
|
const closeSetupWizardWithNav = useCallback(() => {
|
|
removeNav(modalManager.closeSetupWizard);
|
|
modalManager.closeSetupWizard();
|
|
}, [modalManager.closeSetupWizard, removeNav]);
|
|
|
|
const handleOpenNewTask = useCallback(() => {
|
|
modalManager.openNewTask();
|
|
}, [modalManager]);
|
|
|
|
const handleOpenGitHubImport = useCallback(() => {
|
|
modalManager.openGitHubImport();
|
|
}, [modalManager]);
|
|
|
|
const openDetailTaskWithNav = useCallback(
|
|
(
|
|
task: Parameters<typeof modalManager.openDetailTask>[0],
|
|
tab?: Parameters<typeof modalManager.openDetailTask>[1],
|
|
) => {
|
|
modalManager.openDetailTask(task, tab);
|
|
pushNav({ type: "modal", close: modalManager.closeDetailTask });
|
|
},
|
|
[modalManager, pushNav],
|
|
);
|
|
|
|
const openGroupModalWithNav = useCallback((groupId: string) => {
|
|
modalManager.openGroupModal(groupId);
|
|
pushNav({ type: "modal", close: modalManager.closeGroupModal });
|
|
}, [modalManager, pushNav]);
|
|
|
|
const handleOnboardingViewTask = useCallback((task: Task) => {
|
|
setFirstCreatedTask(null);
|
|
modalManager.closeModelOnboarding();
|
|
openDetailTaskWithNav(task);
|
|
}, [modalManager, openDetailTaskWithNav]);
|
|
|
|
const handleModalCreateWithOnboardingTracking = useCallback(
|
|
async (input: TaskCreateInput): Promise<Task> => {
|
|
const task = await taskHandlers.handleModalCreate(input);
|
|
if (modalManager.modelOnboardingOpen) {
|
|
setFirstCreatedTask(task);
|
|
}
|
|
return task;
|
|
},
|
|
[taskHandlers.handleModalCreate, modalManager.modelOnboardingOpen],
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!modalManager.modelOnboardingOpen && firstCreatedTask) {
|
|
setFirstCreatedTask(null);
|
|
}
|
|
}, [modalManager.modelOnboardingOpen, firstCreatedTask]);
|
|
|
|
useEffect(() => {
|
|
prefetchSettingsModal();
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
{detailTask && (
|
|
<ModalErrorBoundary>
|
|
<TaskDetailModal
|
|
task={detailTask}
|
|
projectId={projectId}
|
|
tasks={tasks}
|
|
onClose={closeDetailWithNav}
|
|
onOpenDetail={openDetailTaskWithNav}
|
|
mobileHeaderMode={modalManager.detailTaskOrigin === "list-mobile" ? "back" : "close"}
|
|
onMoveTask={taskOperations.moveTask}
|
|
onDeleteTask={taskOperations.deleteTask}
|
|
onMergeTask={taskOperations.mergeTask}
|
|
onArchiveTask={taskOperations.archiveTask}
|
|
onRetryTask={taskOperations.retryTask}
|
|
onResetTask={taskOperations.resetTask}
|
|
onDuplicateTask={taskOperations.duplicateTask}
|
|
onTaskUpdated={modalManager.updateDetailTask}
|
|
addToast={addToast}
|
|
prAuthAvailable={settings.prAuthAvailable}
|
|
onOpenWorkflowEditor={() => modalManager.openWorkflowEditor()}
|
|
initialTab={modalManager.detailTaskInitialTab}
|
|
/>
|
|
</ModalErrorBoundary>
|
|
)}
|
|
|
|
{modalManager.groupModalGroupId && (
|
|
<ModalErrorBoundary>
|
|
<GroupTaskModal
|
|
isOpen={Boolean(modalManager.groupModalGroupId)}
|
|
onClose={closeGroupWithNav}
|
|
groupId={modalManager.groupModalGroupId}
|
|
projectId={projectId}
|
|
onOpenMemberTask={(taskId) => {
|
|
const memberTask = tasks.find((task) => task.id === taskId);
|
|
if (memberTask) {
|
|
openDetailTaskWithNav(memberTask);
|
|
}
|
|
}}
|
|
/>
|
|
</ModalErrorBoundary>
|
|
)}
|
|
|
|
{modalManager.settingsOpen && (
|
|
<ModalErrorBoundary>
|
|
<Suspense fallback={null}>
|
|
<SettingsModal
|
|
onClose={closeSettingsWithNav}
|
|
addToast={addToast}
|
|
initialSection={modalManager.settingsInitialSection}
|
|
projectId={projectId}
|
|
themeMode={settings.themeMode}
|
|
colorTheme={settings.colorTheme}
|
|
onThemeModeChange={settings.setThemeMode}
|
|
onColorThemeChange={settings.setColorTheme}
|
|
dashboardFontScalePct={settings.dashboardFontScalePct}
|
|
onDashboardFontScaleChange={settings.setDashboardFontScalePct}
|
|
onReopenOnboarding={onReopenOnboarding}
|
|
onOpenApprovals={onOpenApprovals}
|
|
onOpenWorkflowSettings={() => {
|
|
closeSettingsWithNav();
|
|
modalManager.openWorkflowEditor("settings");
|
|
}}
|
|
/>
|
|
</Suspense>
|
|
</ModalErrorBoundary>
|
|
)}
|
|
|
|
<GitHubImportModal
|
|
isOpen={modalManager.githubImportOpen}
|
|
onClose={closeGitHubImportWithNav}
|
|
onImport={taskHandlers.handleGitHubImport}
|
|
tasks={tasks}
|
|
projectId={projectId}
|
|
/>
|
|
|
|
<ModalErrorBoundary>
|
|
<PlanningModeModal
|
|
isOpen={modalManager.isPlanningOpen}
|
|
onClose={closePlanningWithNav}
|
|
onTaskCreated={taskHandlers.handlePlanningTaskCreated}
|
|
onTasksCreated={taskHandlers.handlePlanningTasksCreated}
|
|
tasks={tasks}
|
|
initialPlan={modalManager.planningInitialPlan ?? undefined}
|
|
projectId={projectId}
|
|
resumeSessionId={modalManager.planningResumeSessionId}
|
|
/>
|
|
</ModalErrorBoundary>
|
|
|
|
<ModalErrorBoundary>
|
|
<SubtaskBreakdownModal
|
|
isOpen={modalManager.isSubtaskOpen}
|
|
onClose={closeSubtaskWithNav}
|
|
initialDescription={modalManager.subtaskInitialDescription ?? ""}
|
|
onTasksCreated={taskHandlers.handleSubtaskTasksCreated}
|
|
projectId={projectId}
|
|
resumeSessionId={modalManager.subtaskResumeSessionId}
|
|
onOpenGroupModal={openGroupModalWithNav}
|
|
/>
|
|
</ModalErrorBoundary>
|
|
|
|
<TerminalModal
|
|
isOpen={modalManager.terminalOpen}
|
|
onClose={closeTerminalWithNav}
|
|
initialCommand={modalManager.terminalInitialCommand}
|
|
projectId={projectId}
|
|
/>
|
|
|
|
<ScriptsModal
|
|
isOpen={modalManager.scriptsOpen}
|
|
onClose={closeScriptsWithNav}
|
|
addToast={addToast}
|
|
onRunScript={modalManager.runScript}
|
|
projectId={projectId}
|
|
/>
|
|
|
|
{modalManager.filesOpen && (
|
|
<FileBrowserModal
|
|
initialWorkspace={modalManager.fileBrowserWorkspace}
|
|
initialFile={modalManager.fileBrowserInitialFile}
|
|
isOpen={true}
|
|
onClose={closeFilesWithNav}
|
|
onWorkspaceChange={modalManager.setFileWorkspace}
|
|
projectId={projectId}
|
|
/>
|
|
)}
|
|
|
|
{modalManager.todosOpen && (
|
|
<TodoModal
|
|
isOpen={true}
|
|
onClose={closeTodosWithNav}
|
|
addToast={addToast}
|
|
projectId={projectId}
|
|
onPlanningMode={modalManager.openPlanningWithInitialPlan}
|
|
/>
|
|
)}
|
|
|
|
<UsageIndicator
|
|
isOpen={modalManager.usageOpen}
|
|
onClose={closeUsageWithNav}
|
|
projectId={projectId}
|
|
anchorRect={modalManager.usageAnchorRect}
|
|
/>
|
|
|
|
<SystemStatsModal
|
|
isOpen={modalManager.systemStatsOpen}
|
|
onClose={closeSystemStatsWithNav}
|
|
projectId={projectId}
|
|
/>
|
|
|
|
{modalManager.schedulesOpen && (
|
|
<ScheduledTasksModal
|
|
onClose={closeSchedulesWithNav}
|
|
addToast={addToast}
|
|
projectId={projectId}
|
|
/>
|
|
)}
|
|
|
|
<ModalErrorBoundary>
|
|
<NewTaskModal
|
|
isOpen={modalManager.newTaskModalOpen}
|
|
onClose={closeNewTaskWithNav}
|
|
tasks={tasks}
|
|
onCreateTask={handleModalCreateWithOnboardingTracking}
|
|
addToast={addToast}
|
|
projectId={projectId}
|
|
/>
|
|
</ModalErrorBoundary>
|
|
|
|
<ActivityLogModal
|
|
isOpen={modalManager.activityLogOpen}
|
|
onClose={closeActivityLogWithNav}
|
|
tasks={tasks}
|
|
projectId={projectId}
|
|
projects={projects}
|
|
currentProject={currentProject}
|
|
onOpenTaskDetail={(taskId) => {
|
|
const task = tasks.find((candidate) => candidate.id === taskId);
|
|
if (task) {
|
|
openDetailTaskWithNav(task);
|
|
}
|
|
}}
|
|
/>
|
|
|
|
<ModalErrorBoundary>
|
|
<GitManagerModal
|
|
isOpen={modalManager.gitManagerOpen}
|
|
onClose={closeGitManagerWithNav}
|
|
tasks={tasks}
|
|
addToast={addToast}
|
|
projectId={projectId}
|
|
/>
|
|
</ModalErrorBoundary>
|
|
|
|
{modalManager.workflowEditorOpen && (
|
|
<ModalErrorBoundary>
|
|
<Suspense fallback={null}>
|
|
<WorkflowNodeEditor
|
|
isOpen={modalManager.workflowEditorOpen}
|
|
onClose={closeWorkflowEditorWithNav}
|
|
addToast={addToast}
|
|
projectId={projectId}
|
|
initialPanel={modalManager.workflowEditorInitialPanel}
|
|
initialAction={modalManager.workflowEditorInitialAction}
|
|
initialWorkflowId={modalManager.workflowEditorInitialWorkflowId}
|
|
/>
|
|
</Suspense>
|
|
</ModalErrorBoundary>
|
|
)}
|
|
|
|
<AgentListModal
|
|
isOpen={modalManager.agentsOpen}
|
|
onClose={closeAgentsWithNav}
|
|
addToast={addToast}
|
|
projectId={projectId}
|
|
/>
|
|
|
|
{modalManager.setupWizardOpen && (
|
|
<Suspense fallback={null}>
|
|
<SetupWizardModal
|
|
onProjectRegistered={projectActions.handleSetupComplete}
|
|
onClose={closeSetupWizardWithNav}
|
|
/>
|
|
</Suspense>
|
|
)}
|
|
|
|
{modalManager.modelOnboardingOpen && (
|
|
<ModelOnboardingModal
|
|
onComplete={projectActions.handleModelOnboardingComplete}
|
|
addToast={addToast}
|
|
projectId={projectId ?? ""}
|
|
onOpenSetupWizard={projectActions.handleAddProject}
|
|
onOpenNewTask={handleOpenNewTask}
|
|
onOpenGitHubImport={handleOpenGitHubImport}
|
|
firstCreatedTask={firstCreatedTask}
|
|
onViewTask={handleOnboardingViewTask}
|
|
/>
|
|
)}
|
|
|
|
<ToastContainer toasts={toasts} onRemove={removeToast} />
|
|
</>
|
|
);
|
|
}
|