Files
multica/packages/views/issues/surface/use-issue-surface-controller.ts
Naiyuan Qing 6077f1a9b0 feat(issues): surface cancelled issues via status filter (MUL-4261) (#5099)
* feat(issues): surface cancelled issues via status filter (MUL-4261)

Cancelled issues were never visible in the web/desktop issue surface:
`PAGINATED_STATUSES`/`BOARD_STATUSES` excluded `cancelled`, so the list/
board/swimlane never fetched or rendered it, and the status filter offered
a "Cancelled" checkbox that resolved to an empty list.

Implement plan A (fetch-always, hide-by-default):

- `PAGINATED_STATUSES` now includes `cancelled`, so it is always fetched
  into the byStatus cache and rebuckets correctly when an issue is
  cancelled (previously the card was dropped). `BOARD_STATUSES` stays the
  default *visible* column set.
- The surface gates the flattened list on the status filter: cancelled
  issues are excluded from `surfaceIssues` (and therefore list/board/
  swimlane columns, header facet counts, batch selection, and isEmpty)
  unless the filter explicitly selects "cancelled". Then a Cancelled
  section appears, sorted last.
- `hiddenStatuses` stays board-only, so cancelled is never offered as a
  hideable/persistent board column.

Dragging a card into the Cancelled column (visible only when filtered)
sets status=cancelled through the existing generic column DnD — no new
entry point or copy added.

Non-goals (unchanged): mobile, member/agent archive surfaces, an
always-on cancelled column.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-authored-by: multica-agent <github@multica.ai>

* fix(issues): swimlane must keep the cancelled column when filtered (MUL-4261)

The swimlane derived its status columns as
`BOARD_STATUSES.filter(s => visibleStatuses.includes(s))`, re-imposing
canonical order by intersecting with BOARD_STATUSES. Since BOARD_STATUSES
omits `cancelled`, a filter-selected Cancelled column was silently dropped
even though the controller's `visibleStatuses` included it — the surface
fetched and gated cancelled correctly, but swimlane never rendered it.

Filter against ALL_STATUSES instead: same canonical ordering, but a
selected `cancelled` column now survives. `hiddenStatuses` stays
board-only, so cancelled is still never a hideable/persistent column.

Regression tests:
- swimlane renders a Cancelled column + its cards when cancelled is in
  visibleStatuses, and omits it otherwise (verified failing pre-fix);
- controller asserts hiddenStatuses never contains cancelled.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-authored-by: multica-agent <github@multica.ai>

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Co-authored-by: multica-agent <github@multica.ai>
2026-07-09 10:07:34 +08:00

226 lines
7.1 KiB
TypeScript

"use client";
import { useEffect, useMemo } from "react";
import type { QueryKey } from "@tanstack/react-query";
import type {
Issue,
IssueAssigneeGroup,
IssueStatus,
Project,
} from "@multica/core/types";
import { useWorkspaceId } from "@multica/core/hooks";
import { dateOnlyToLocalDate } from "@multica/core/issues/date";
import type {
AssigneeGroupedIssuesFilter,
IssueSortParam,
MyIssuesFilter,
} from "@multica/core/issues/queries";
import {
buildIssueSurfaceQueryPlan,
type IssueSurfaceQueryPlan,
} from "@multica/core/issues/surface/query-plan";
import type { IssueScope } from "@multica/core/issues/surface/scope";
import type { IssueDateFilter } from "@multica/core/issues/stores/view-store";
import { useViewStore } from "@multica/core/issues/stores/view-store-context";
import type { IssueFilters } from "../utils/filter";
import type { ChildProgress } from "../components/list-row";
import type { IssueSurfaceMode } from "./types";
import type { IssueSurfaceActivity } from "./activity";
import type { IssueSurfaceActions } from "./actions-context";
import {
type IssueSurfaceSelection,
useCreateIssueSurfaceSelection,
} from "./selection-context";
import type { IssueCreateDefaults } from "./types";
import {
useIssueSurfaceActions,
type MoveIssueUpdates,
} from "./use-issue-surface-actions";
import { useIssueSurfaceData } from "./use-issue-surface-data";
interface UseIssueSurfaceControllerInput {
scope: IssueScope;
modes: IssueSurfaceMode[];
createDefaults?: IssueCreateDefaults;
}
export interface IssueSurfaceController {
scopeKey: string;
projectId?: string;
createDefaults: IssueCreateDefaults;
viewMode: IssueSurfaceMode;
allowGantt: boolean;
surfaceIssues: Issue[];
projectIssues: Issue[];
issues: Issue[];
swimlaneIssues: Issue[];
filteredGanttIssues: Issue[];
assigneeGroups?: IssueAssigneeGroup[];
assigneeGroupQueryKey?: QueryKey;
assigneeGroupFilter?: AssigneeGroupedIssuesFilter;
filter: MyIssuesFilter;
loadMoreScope?: string;
loadMoreFilter?: MyIssuesFilter;
sort: IssueSortParam;
ganttIssues: Issue[];
visibleStatuses: IssueStatus[];
hiddenStatuses: IssueStatus[];
activeFilters: Omit<IssueFilters, "statusFilters" | "runningIssueIds">;
activity: IssueSurfaceActivity;
actions: IssueSurfaceActions;
selection: IssueSurfaceSelection;
childProgressMap: Map<string, ChildProgress>;
projectMap: Map<string, Project>;
isLoading: boolean;
/** See IssueSurfaceData.isRefreshing — placeholder-backed revalidation. */
isRefreshing: boolean;
isEmpty: boolean;
openCreateIssue: (defaults?: IssueCreateDefaults) => void;
moveIssue: (
issueId: string,
updates: MoveIssueUpdates,
onSettled?: () => void,
) => void;
}
function issueDateFilterToApiParams(filter: IssueDateFilter | null) {
if (!filter) return {};
const from = dateOnlyToLocalDate(filter.from);
const to = dateOnlyToLocalDate(filter.to);
if (!from || !to) return {};
const start = from <= to ? from : to;
const endSource = from <= to ? to : from;
const end = new Date(endSource);
end.setDate(end.getDate() + 1);
return {
date_field: filter.field,
date_start: start.toISOString(),
date_end: end.toISOString(),
};
}
export function useIssueSurfaceController({
scope,
modes,
createDefaults,
}: UseIssueSurfaceControllerInput): IssueSurfaceController {
const wsId = useWorkspaceId();
const queryPlan = useMemo<IssueSurfaceQueryPlan>(
() => buildIssueSurfaceQueryPlan(scope),
[scope],
);
const scopeKey = queryPlan.scopeKey;
const projectId = scope.type === "project" ? scope.projectId : undefined;
const viewMode = useViewStore((s) => s.viewMode);
const setViewMode = useViewStore((s) => s.setViewMode);
const grouping = useViewStore((s) => s.grouping);
const sortBy = useViewStore((s) => s.sortBy);
const sortDirection = useViewStore((s) => s.sortDirection);
const dateFilter = useViewStore((s) => s.dateFilter);
const statusFilters = useViewStore((s) => s.statusFilters);
const priorityFilters = useViewStore((s) => s.priorityFilters);
const assigneeFilters = useViewStore((s) => s.assigneeFilters);
const includeNoAssignee = useViewStore((s) => s.includeNoAssignee);
const creatorFilters = useViewStore((s) => s.creatorFilters);
const projectFilters = useViewStore((s) => s.projectFilters);
const includeNoProject = useViewStore((s) => s.includeNoProject);
const labelFilters = useViewStore((s) => s.labelFilters);
const agentRunningFilter = useViewStore((s) => s.agentRunningFilter);
const showSubIssues = useViewStore((s) => s.showSubIssues);
const cardProperties = useViewStore((s) => s.cardProperties);
const swimlaneGrouping = useViewStore((s) => s.swimlaneGrouping);
const allowedModes = useMemo(() => new Set<IssueSurfaceMode>(modes), [modes]);
const fallbackMode = modes[0] ?? "list";
const effectiveViewMode = allowedModes.has(viewMode as IssueSurfaceMode)
? (viewMode as IssueSurfaceMode)
: fallbackMode;
useEffect(() => {
if (!allowedModes.has(viewMode as IssueSurfaceMode)) {
setViewMode(fallbackMode);
}
}, [allowedModes, fallbackMode, setViewMode, viewMode]);
const resolvedCreateDefaults = useMemo(
() => ({ ...queryPlan.createDefaults, ...createDefaults }),
[createDefaults, queryPlan.createDefaults],
);
const dateParams = useMemo(
() => issueDateFilterToApiParams(dateFilter),
[dateFilter],
);
const sort = useMemo<IssueSortParam>(
() => ({
sort_by: sortBy,
sort_direction: sortBy !== "position" ? sortDirection : undefined,
...dateParams,
}),
[dateParams, sortBy, sortDirection],
);
const selection = useCreateIssueSurfaceSelection(
scopeKey,
`${scopeKey}:${effectiveViewMode}`,
);
const usesAssigneeBoard =
effectiveViewMode === "board" && grouping === "assignee";
const usesGantt = effectiveViewMode === "gantt" && !!projectId;
const projectFilterState = useMemo(
() => ({
projectFilters: scope.type === "project" ? [] : projectFilters,
includeNoProject: scope.type === "project" ? false : includeNoProject,
}),
[includeNoProject, projectFilters, scope.type],
);
const { projectFilters: viewProjectFilters, includeNoProject: viewIncludeNoProject } =
projectFilterState;
const data = useIssueSurfaceData({
wsId,
queryPlan,
projectId,
usesAssigneeBoard,
usesGantt,
sort,
statusFilters,
priorityFilters,
assigneeFilters,
includeNoAssignee,
creatorFilters,
projectFilters: viewProjectFilters,
includeNoProject: viewIncludeNoProject,
labelFilters,
agentRunningFilter,
showSubIssues,
loadProjects:
cardProperties.project ||
(effectiveViewMode === "swimlane" && swimlaneGrouping === "project"),
});
const { actions, openCreateIssue, moveIssue } = useIssueSurfaceActions({
createDefaults: resolvedCreateDefaults,
});
return {
scopeKey,
projectId,
createDefaults: resolvedCreateDefaults,
viewMode: effectiveViewMode,
allowGantt: allowedModes.has("gantt") && !!projectId,
...data,
sort,
actions,
selection,
openCreateIssue,
moveIssue,
};
}