setIsArchiveModalOpen(false)}
+ disabled={disableCollectionActions}
onConfirm={handleConfirmArchive}
taskCount={column.tasks.length}
/>
diff --git a/apps/web/src/components/kanban-board/column/index.tsx b/apps/web/src/components/kanban-board/column/index.tsx
index 6f6bd40d90..80238534ee 100644
--- a/apps/web/src/components/kanban-board/column/index.tsx
+++ b/apps/web/src/components/kanban-board/column/index.tsx
@@ -8,6 +8,7 @@ import { ColumnHeader } from "./column-header";
type ColumnProps = {
column: ProjectWithTasks["columns"][number];
disableDragDrop?: boolean;
+ disableCollectionActions?: boolean;
};
export const columnVariants = cva(
@@ -52,7 +53,11 @@ export const columnVariants = cva(
},
);
-function Column({ column, disableDragDrop = false }: ColumnProps) {
+function Column({
+ column,
+ disableDragDrop = false,
+ disableCollectionActions = false,
+}: ColumnProps) {
const [isDropzoneOver, setIsDropzoneOver] = useState(false);
const { background } = useBackgroundStore();
@@ -64,7 +69,10 @@ function Column({ column, disableDragDrop = false }: ColumnProps) {
})}
>
-
+
({ default: () => null }));
vi.mock("./column", () => ({ default: () => null }));
vi.mock("./task-card", () => ({ default: () => null }));
vi.mock("@dnd-kit/core", () => ({
- DndContext: ({ onDragEnd }: { onDragEnd: (event: unknown) => void }) => (
-
+ DndContext: ({
+ onDragStart,
+ onDragEnd,
+ }: {
+ onDragStart: (event: unknown) => void;
+ onDragEnd: (event: unknown) => void;
+ }) => (
+ <>
+
+
+
),
DragOverlay: () => null,
MouseSensor: {},
@@ -58,6 +76,8 @@ vi.mock("@dnd-kit/core", () => ({
defaultDropAnimationSideEffects: vi.fn(),
}));
+beforeEach(() => vi.clearAllMocks());
+afterEach(cleanup);
describe("filtered board dragging", () => {
it("moves visible tasks in canonical state and sends one ordering mutation", () => {
const columns = [
@@ -98,3 +118,29 @@ describe("filtered board dragging", () => {
view.unmount();
});
});
+
+it("rejects an in-flight Kanban drop after a failed refresh disables dragging", () => {
+ const canonical = {
+ id: "p",
+ columns: [
+ {
+ id: "todo",
+ slug: "todo",
+ tasks: [
+ { id: "a", status: "todo", position: 0 },
+ { id: "b", status: "todo", position: 1 },
+ ],
+ },
+ ],
+ plannedTasks: [],
+ archivedTasks: [],
+ } as unknown as ProjectWithTasks;
+ mocks.project = canonical;
+ const view = render();
+ fireEvent.click(view.getByText("start"));
+ view.rerender();
+ fireEvent.click(view.getByText("drop"));
+ expect(mocks.reorder).not.toHaveBeenCalled();
+ expect(mocks.setProject).not.toHaveBeenCalled();
+ expect(mocks.setQueryData).not.toHaveBeenCalled();
+});
diff --git a/apps/web/src/components/kanban-board/index.tsx b/apps/web/src/components/kanban-board/index.tsx
index 082ac8ba33..3b0e7f09fb 100644
--- a/apps/web/src/components/kanban-board/index.tsx
+++ b/apps/web/src/components/kanban-board/index.tsx
@@ -1,3 +1,4 @@
+import { markBoardCacheChanged } from "@/lib/board-cache-version";
import { selectReorderBoard } from "./select-reorder-board";
import {
closestCorners,
@@ -37,12 +38,14 @@ import TaskCard from "./task-card";
type KanbanBoardProps = {
project: ProjectWithTasks;
disableDragDrop?: boolean;
+ disableCollectionActions?: boolean;
sortedByNumber?: boolean;
};
function KanbanBoard({
project,
disableDragDrop = false,
+ disableCollectionActions = false,
sortedByNumber = false,
}: KanbanBoardProps) {
const queryClient = useQueryClient();
@@ -188,7 +191,13 @@ function KanbanBoard({
const activeId = active.id.toString();
const overId = over.id.toString();
- if (isReordering) return;
+ if (
+ disableDragDrop ||
+ isReordering ||
+ queryClient.getQueryState(["tasks", project.id])?.fetchStatus ===
+ "fetching"
+ )
+ return;
const canonical = selectReorderBoard(
project.id,
activeId,
@@ -199,6 +208,8 @@ function KanbanBoard({
const moved = moveBoardTask(canonical, activeId, overId, sortedByNumber);
if (!moved || !moved.tasks.length) return;
+ for (const task of moved.tasks)
+ markBoardCacheChanged(queryClient, project.id, task.id);
setProject(moved.project);
queryClient.setQueryData(["tasks", project.id], moved.project);
reorder({
@@ -278,7 +289,11 @@ function KanbanBoard({
"h-fit": !!background,
})}
>
-
+
))}
diff --git a/apps/web/src/components/list-view/index.test.tsx b/apps/web/src/components/list-view/index.test.tsx
new file mode 100644
index 0000000000..9e9f789d3e
--- /dev/null
+++ b/apps/web/src/components/list-view/index.test.tsx
@@ -0,0 +1,126 @@
+import {
+ act,
+ cleanup,
+ fireEvent,
+ render,
+ screen,
+} from "@testing-library/react";
+import { afterEach, expect, it, vi } from "vite-plus/test";
+import type { DragEndEvent } from "@dnd-kit/core";
+import type { ProjectWithTasks } from "@/types/project";
+import ListView from "./index";
+const m = vi.hoisted(() => ({
+ props: {} as {
+ sensors?: unknown[];
+ onDragEnd?: (event: DragEndEvent) => void;
+ },
+ archive: {} as {
+ onConfirm?: () => void;
+ disabled?: boolean;
+ taskCount?: number;
+ },
+ mutate: vi.fn(),
+ setProject: vi.fn(),
+}));
+vi.mock("@dnd-kit/core", async (original) => ({
+ ...(await original()),
+ DndContext: (props: typeof m.props & { children: React.ReactNode }) => {
+ m.props = props;
+ return props.children;
+ },
+}));
+vi.mock("@tanstack/react-router", () => ({ useNavigate: () => vi.fn() }));
+vi.mock("@/hooks/use-keyboard-shortcuts", () => ({
+ useRegisterShortcuts: () => {},
+}));
+vi.mock("@/hooks/mutations/task/use-update-task", () => ({
+ useUpdateTask: () => ({ mutate: m.mutate }),
+}));
+vi.mock("@/store/project", () => ({
+ default: () => ({ setProject: m.setProject }),
+}));
+vi.mock("./task-row", () => ({ default: () => null }));
+vi.mock("../bulk-selection/bulk-toolbar", () => ({ default: () => null }));
+vi.mock("../shared/modals/create-task-modal", () => ({ default: () => null }));
+vi.mock("../shared/modals/archive-tasks-modal", () => ({
+ ArchiveTasksModal: (props: typeof m.archive) => {
+ m.archive = props;
+ return null;
+ },
+}));
+afterEach(() => {
+ cleanup();
+ vi.clearAllMocks();
+});
+it("disables keyboard sensors and rejects drag completion on a partial board", () => {
+ const project = {
+ id: "p",
+ workspaceId: "w",
+ columns: [
+ {
+ id: "todo",
+ slug: "todo",
+ name: "To do",
+ tasks: [
+ { id: "a", position: 0 },
+ { id: "b", position: 1 },
+ ],
+ },
+ ],
+ plannedTasks: [],
+ archivedTasks: [],
+ } as unknown as ProjectWithTasks;
+ const { rerender } = render();
+ expect(m.props.sensors?.length).toBeGreaterThan(0);
+ rerender();
+ expect(m.props.sensors).toEqual([]);
+ act(() =>
+ m.props.onDragEnd?.({
+ active: { id: "a" },
+ over: { id: "b" },
+ } as DragEndEvent),
+ );
+ expect(m.mutate).not.toHaveBeenCalled();
+ expect(m.setProject).not.toHaveBeenCalled();
+});
+
+it("blocks archive-all during pagination or errors, including an already-open confirmation", () => {
+ const column = {
+ id: "done",
+ name: "Done",
+ slug: "done",
+ isFinal: true,
+ tasks: [{ id: "a" }],
+ };
+ const project = {
+ id: "p",
+ workspaceId: "w",
+ columns: [column],
+ plannedTasks: [],
+ archivedTasks: [],
+ } as unknown as ProjectWithTasks;
+ const { rerender } = render();
+ fireEvent.click(screen.getByTitle(/archiveAllTooltip/));
+ const complete = {
+ ...project,
+ columns: [
+ {
+ ...project.columns[0],
+ tasks: [...project.columns[0].tasks, { id: "b" }],
+ },
+ ],
+ } as unknown as ProjectWithTasks;
+ rerender();
+ expect(screen.getByTitle(/archiveAllTooltip/).hasAttribute("disabled")).toBe(
+ true,
+ );
+ expect(m.archive.disabled).toBe(true);
+ act(() => m.archive.onConfirm?.());
+ expect(m.mutate).not.toHaveBeenCalled();
+ expect(m.setProject).not.toHaveBeenCalled();
+ rerender();
+ expect(m.archive.taskCount).toBe(2);
+ act(() => m.archive.onConfirm?.());
+ expect(m.mutate).toHaveBeenCalledTimes(2);
+ expect(m.setProject).toHaveBeenCalledOnce();
+});
diff --git a/apps/web/src/components/list-view/index.tsx b/apps/web/src/components/list-view/index.tsx
index 9246252a58..e8b64d1e5c 100644
--- a/apps/web/src/components/list-view/index.tsx
+++ b/apps/web/src/components/list-view/index.tsx
@@ -41,9 +41,14 @@ import TaskRow from "./task-row";
type ListViewProps = {
project: ProjectWithTasks;
disableDragDrop?: boolean;
+ disableCollectionActions?: boolean;
};
-function ListView({ project, disableDragDrop = false }: ListViewProps) {
+function ListView({
+ project,
+ disableDragDrop = false,
+ disableCollectionActions = false,
+}: ListViewProps) {
const { t } = useTranslation();
const { setProject } = useProjectStore();
const {
@@ -71,9 +76,10 @@ function ListView({ project, disableDragDrop = false }: ListViewProps) {
const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
const [activeColumn, setActiveColumn] = useState(null);
const [isArchiveModalOpen, setIsArchiveModalOpen] = useState(false);
- const [columnToArchive, setColumnToArchive] = useState<
- ProjectWithTasks["columns"][number] | null
- >(null);
+ const [columnToArchive, setColumnToArchive] = useState(null);
+ const archiveColumn = project.columns.find(
+ (column) => column.id === columnToArchive,
+ );
useEffect(() => {
if (project?.columns) {
@@ -133,6 +139,7 @@ function ListView({ project, disableDragDrop = false }: ListViewProps) {
);
const handleDragStart = (event: DragStartEvent) => {
+ if (disableDragDrop) return;
setActiveId(event.active.id);
};
@@ -165,7 +172,7 @@ function ListView({ project, disableDragDrop = false }: ListViewProps) {
setActiveId(null);
setOverColumnId(null);
- if (!over || !project?.columns) return;
+ if (disableDragDrop || !over || !project?.columns) return;
const activeTaskId = active.id.toString();
const overId = over.id.toString();
@@ -246,17 +253,22 @@ function ListView({ project, disableDragDrop = false }: ListViewProps) {
};
const handleArchiveClick = (column: ProjectWithTasks["columns"][number]) => {
- if (!column.isFinal || column.tasks.length === 0) return;
- setColumnToArchive(column);
+ if (
+ disableCollectionActions ||
+ !column.isFinal ||
+ column.tasks.length === 0
+ )
+ return;
+ setColumnToArchive(column.id);
setIsArchiveModalOpen(true);
};
const handleConfirmArchive = () => {
- if (!columnToArchive) return;
+ if (disableCollectionActions || !archiveColumn?.isFinal) return;
const updatedProject = produce(project, (draft) => {
const archivedColumn = draft?.columns?.find(
- (col) => col.id === columnToArchive.id,
+ (col) => col.id === columnToArchive,
);
if (!archivedColumn) return;
@@ -272,7 +284,7 @@ function ListView({ project, disableDragDrop = false }: ListViewProps) {
setProject(updatedProject);
toast.success(
- t("tasks:archive.success", { count: columnToArchive.tasks.length }),
+ t("tasks:archive.success", { count: archiveColumn.tasks.length }),
);
setIsArchiveModalOpen(false);
@@ -340,6 +352,7 @@ function ListView({ project, disableDragDrop = false }: ListViewProps) {
{column.isFinal && column.tasks.length > 0 && (
+