Files
multica/packages/views/issues/surface/use-issue-surface-controller.ts
Naiyuan Qing ade6b34e5f MUL-3903: Extract shared issue surfaces (#4774)
* MUL-3903 refactor project issue surface state

Co-authored-by: multica-agent <github@multica.ai>

* Refactor project issue surface ownership

Co-authored-by: multica-agent <github@multica.ai>

* Extract shared issue surface entrypoints

Co-authored-by: multica-agent <github@multica.ai>

* Fix issue surface create defaults and selection reset

Co-authored-by: multica-agent <github@multica.ai>

* test(editor): add missing AbortSignal to suggestion items() calls

The suggestion items() contract gained a required signal param; the
mention/slash test call sites were never updated, breaking pnpm typecheck
for @multica/views.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(issues): server-side assignee_types filter on ListIssues

ListGroupedIssues has taken assignee_types since squads shipped, but
ListIssues never did — so the workspace Members/Agents tabs had to fetch
the unfiltered workspace list and post-filter loaded pages client-side,
which made column totals and load-more pagination reflect the unfiltered
counts.

Add the same parse + WHERE clause to ListIssues (count query shares the
WHERE, so totals agree), thread the param through the TS client, and
widen MyIssuesFilter so scoped list caches can carry it.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* refactor(issues): route issue cache writes through a membership-aware coordinator

useUpdateIssue, useBatchUpdateIssues, and the WS issue:updated handler
each maintained their own similar-but-diverging patch/invalidate rules.
Consolidate them into cache-coordinator.ts (applyIssueChange /
rollbackIssueChange / invalidateIssueDerivatives) so local writes and
remote echoes follow one rules table by construction.

The coordinator is membership-aware via surface/membership.ts
(true | false | unknown against each list cache's own filter contract):

- a change that moves an issue off a filtered surface removes the card
  surgically (bucket total decremented) — fixes assignee changes leaving
  stale cards on My Assigned with no local safety net (previously only
  the WS echo recovered it), and replaces the blanket invalidate-myAll
  net for project moves (MUL-3669) with per-key precision
- possible entry into a loaded list marks that key stale — never
  hard-insert; page/slot is server knowledge
- stale keys flush on settle for mutations (a mid-flight refetch would
  stomp the optimistic state) and immediately for WS
- batch updates now patch detail + inbox like single updates; the
  off-screen bucket-count recovery previously exclusive to the WS path
  now covers local mutations too

Preserved invariants: synchronous optimistic patches (dnd-kit), MUL-3375
control-field stripping, and no refetch of surgically reconciled lists
(the drag-flicker fix).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* refactor(issues): resolve surfaces via core query plan/repository with window-keyed remount

Read-path convergence and the loading/empty semantics that fall out of
it:

- scope -> API params moves from scope.ts helpers into
  surface/query-plan.ts; workspace members/agents become server-filtered
  scoped plans (assignee_types) and the client postFilter machinery is
  deleted — tab counts and load-more are now exact
- query selection moves behind surface/repository.ts; the views data
  hook no longer branches on workspace-vs-scoped plumbing
- IssueSurfaceContent remounts on data-window change (wsId + scope):
  keepPreviousData placeholders keep sort/filter changes flicker-free
  within one window but must never let project A's (or workspace A's)
  cards impersonate B's with no loading state — cold window shows the
  skeleton, warm window hits cache instantly
- isEmpty is only asserted from full-window data; the gantt
  scheduled-only projection can't prove the window is empty, so GanttView's
  own "no scheduled issues" empty state renders instead of the generic
  create-issue one
- per-card project lookups hoist into a surface-level projectMap (drops
  a per-card useQuery), create-defaults typing tightens to
  IssueCreateDefaults

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* perf(issues): count-only arithmetic for off-window status/membership changes

An issue beyond a list's loaded page window used to force a full
first-page refetch just to fix two column counts. When the change is
CERTAIN (base entity known, membership definitive) the coordinator now
does the arithmetic locally:

- stayed a member + status changed: move one unit of total between the
  two buckets (loaded arrays untouched; hasMore stays consistent)
- left the list (reassigned / re-projected): old status bucket total -1
- member-to-member reassignment: counts unaffected, not even a stale key

Entering a list and any uncertainty (no base, unknown membership) still
refetch — the right page/slot is server knowledge. Branches on membership
OUTCOMES, not on which field changed, so future dimensions (team) join
automatically. Biggest win is the WS path: agents flipping off-screen
statuses no longer trigger refetch storms.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(issues): deferred view-refresh indicator during placeholder revalidation

Sort/date changes (and any grouped-board filter change) revalidate behind
the previous snapshot — correct, but on a slow network the click felt
dead: content stays put and isLoading never fires. Surface the state as
isRefreshing (isPlaceholderData of the active query) and render a shared
ViewRefreshIndicator in every issues header: a fixed-width slot (zero
layout shift) whose spinner fades in after 300ms, so sub-second responses
show nothing (NN/g) while slow ones get a working signal.

Bound to the revalidation STATE, not to any particular control — any
current or future server-side view change lights it automatically.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: multica-agent <github@multica.ai>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-02 14:11:10 +08:00

222 lines
7.1 KiB
TypeScript

"use client";
import { useEffect, useMemo } from "react";
import type { QueryKey } from "@tanstack/react-query";
import type { Issue, IssueAssigneeGroup, Project } from "@multica/core/types";
import { useWorkspaceId } from "@multica/core/hooks";
import { BOARD_STATUSES } from "@multica/core/issues/config";
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: typeof BOARD_STATUSES;
hiddenStatuses: typeof BOARD_STATUSES;
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,
};
}