@allbluecn/web-app 0.17.2 → 0.18.0

package/src/components/bug/__tests__/use-paged-bug-groups.test.tsx

@@ -0,0 +1,310 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { renderHook, waitFor, act, render, screen, fireEvent, cleanup } from "@testing-library/react";
+import type { BugListItem } from "../types";
+import { DEFAULT_BUG_DISPLAY_OPTIONS } from "../display/types";
+import type { PagedBugsArgs } from "../display/use-paged-bug-groups";
+
+const h = vi.hoisted(() => ({
+  listBugGroupsFn: vi.fn(),
+  listBugsInGroupFn: vi.fn(),
+  listAllGroupsItemsFn: vi.fn(),
+  createBugFn: vi.fn(),
+  toast: { success: vi.fn(), error: vi.fn() },
+}));
+
+vi.mock("@/server/serverFns/bug", () => h);
+vi.mock("@allbluecn/ui/toast", () => ({ toast: h.toast }));
+
+// 属性编辑器依赖真实 popover/calendar，测试里替换为按钮桩（照 story batch-toolbar.test 先例）
+vi.mock("../inline-editors", () => ({
+  StateEditor: ({ onChange }: any) => <button onClick={() => onChange("fixed")}>state-editor</button>,
+  SeverityEditor: ({ onChange }: any) => <button onClick={() => onChange("critical")}>severity-editor</button>,
+  AssigneeEditor: ({ onChange }: any) => <button onClick={() => onChange("u2")}>assignee-editor</button>,
+  DateEditor: ({ onChange }: any) => <button onClick={() => onChange("2026-09-01")}>date-editor</button>,
+  LabelsEditor: ({ onChange }: any) => <button onClick={() => onChange(["l1"])}>labels-editor</button>,
+}));
+
+import { usePagedBugGroups } from "../display/use-paged-bug-groups";
+import { InlineBugCreator } from "../views/bug-list/inline-bug-creator";
+
+const makeBug = (over: Partial<BugListItem> & { id: string }): BugListItem => ({
+  identifier: "PRJ-B1",
+  title: "t",
+  description: null,
+  state: "open",
+  severity: "medium",
+  source: "manual",
+  env: null,
+  url: null,
+  totalCount: 1,
+  firstOccurAt: "2026-01-01T00:00:00.000Z",
+  lastOccurAt: "2026-01-01T00:00:00.000Z",
+  archived: false,
+  projectId: "p1",
+  storyId: null,
+  story: null,
+  assignee: null,
+  createdBy: { id: "u1", username: "u", email: "e", avatarConfig: null, bgShape: null, bgColor: null },
+  labels: [],
+  createdAt: "2026-01-01",
+  updatedAt: "2026-01-01",
+  ...over,
+});
+
+const makeUser = (id: string): PagedBugsArgs["users"][number] => ({
+  id,
+  username: `user-${id}`,
+  email: `${id}@test.dev`,
+  avatarConfig: null,
+  bgShape: null,
+  bgColor: null,
+});
+
+const makeArgs = (over: Partial<PagedBugsArgs> = {}): PagedBugsArgs => ({
+  filters: { projectId: undefined, search: undefined },
+  conditions: [],
+  display: { ...DEFAULT_BUG_DISPLAY_OPTIONS },
+  users: [],
+  labels: [],
+  minLoadingMs: 0,
+  ...over,
+});
+
+describe("usePagedBugGroups", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it("初始加载：组 keys 与首屏 items 并行拉取（1 个 RTT）", async () => {
+    h.listBugGroupsFn.mockResolvedValue({ groups: [{ key: "open", total: 1 }, { key: "closed", total: 0 }] });
+    h.listAllGroupsItemsFn.mockResolvedValue({
+      grouped: { open: [makeBug({ id: "a", state: "open" })] },
+    });
+
+    const { result } = renderHook(() => usePagedBugGroups(makeArgs()));
+    expect(result.current.isLoading).toBe(true);
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(result.current.groups.map((g) => g.key)).toEqual(["open", "closed"]);
+    expect(result.current.groups[0].items.map((b) => b.id)).toEqual(["a"]);
+    expect(result.current.groups[0].total).toBe(1);
+    expect(result.current.groups[0].hasMore).toBe(false);
+
+    expect(h.listBugGroupsFn).toHaveBeenCalledWith({
+      data: expect.objectContaining({ projectId: undefined, groupBy: "state" }),
+    });
+    expect(h.listAllGroupsItemsFn.mock.calls[0][0].data).toEqual(
+      expect.objectContaining({ groupBy: "state", groupCount: 5, skip: 0, take: 100 }),
+    );
+  });
+
+  it("signature 变化时重置并重新加载", async () => {
+    h.listBugGroupsFn
+      .mockResolvedValueOnce({ groups: [{ key: "open", total: 1 }] })
+      .mockResolvedValueOnce({ groups: [{ key: "critical", total: 1 }] });
+    h.listAllGroupsItemsFn
+      .mockResolvedValueOnce({ grouped: { open: [makeBug({ id: "a" })] } })
+      .mockResolvedValueOnce({ grouped: { critical: [makeBug({ id: "b", severity: "critical" })] } });
+
+    const { result, rerender } = renderHook((args: PagedBugsArgs) => usePagedBugGroups(args), {
+      initialProps: makeArgs(),
+    });
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(result.current.groups.map((g) => g.key)).toEqual(["open"]);
+
+    rerender(makeArgs({ display: { ...DEFAULT_BUG_DISPLAY_OPTIONS, groupBy: "severity" } }));
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    expect(result.current.groups.map((g) => g.key)).toEqual(["critical"]);
+    const calls = h.listBugGroupsFn.mock.calls;
+    expect(calls[calls.length - 1][0].data.groupBy).toBe("severity");
+  });
+
+  it("loadMore 追加下一页并去重、更新 total/hasMore", async () => {
+    h.listBugGroupsFn.mockResolvedValue({ groups: [{ key: "open", total: 3 }] });
+    h.listAllGroupsItemsFn.mockResolvedValue({ grouped: { open: [makeBug({ id: "a" })] } });
+    h.listBugsInGroupFn
+      .mockResolvedValueOnce({
+        items: [makeBug({ id: "b" }), makeBug({ id: "c" })],
+        total: 3,
+        hasMore: false,
+      });
+
+    const { result } = renderHook(() => usePagedBugGroups(makeArgs()));
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(result.current.groups[0].items.map((b) => b.id)).toEqual(["a"]);
+    expect(result.current.groups[0].hasMore).toBe(true);
+
+    await act(async () => {
+      result.current.loadMore("open");
+    });
+    await waitFor(() => expect(result.current.groups[0].hasMore).toBe(false));
+
+    expect(result.current.groups[0].items.map((b) => b.id)).toEqual(["a", "b", "c"]);
+    expect(result.current.groups[0].total).toBe(3);
+    expect(h.listBugsInGroupFn.mock.calls[0][0].data.skip).toBe(1);
+  });
+
+  describe("patchBug 乐观原地更新", () => {
+    const setup = async (
+      display: Partial<typeof DEFAULT_BUG_DISPLAY_OPTIONS> = {},
+      opts: { items?: BugListItem[]; users?: PagedBugsArgs["users"] } = {},
+    ) => {
+      // items 顺序模拟服务端已排序的返回（客户端不重排首屏数据）
+      const items = opts.items ?? [
+        makeBug({ id: "a", severity: "low", createdAt: "2026-01-01" }),
+        makeBug({ id: "b", severity: "high", createdAt: "2026-01-02" }),
+      ];
+      h.listBugGroupsFn.mockResolvedValue({ groups: [{ key: "open", total: items.length }] });
+      h.listAllGroupsItemsFn.mockResolvedValue({ grouped: { open: items } });
+      const { result } = renderHook(() =>
+        usePagedBugGroups(makeArgs({ display: { ...DEFAULT_BUG_DISPLAY_OPTIONS, ...display }, users: opts.users ?? [] })),
+      );
+      await waitFor(() => expect(result.current.isLoading).toBe(false));
+      return result;
+    };
+
+    it("未触发分组/排序规则：原位替换，位置与分组不变", async () => {
+      const result = await setup({}, { users: [makeUser("u9")] });
+      const callsBefore = h.listBugGroupsFn.mock.calls.length;
+
+      act(() => result.current.patchBug("a", { assigneeId: "u9" }));
+
+      const group = result.current.groups[0];
+      expect(group.items.map((b) => b.id)).toEqual(["a", "b"]); // 位置不变
+      expect(group.items[0].assignee?.id).toBe("u9"); // 值已乐观更新
+      expect(h.listBugGroupsFn.mock.calls.length).toBe(callsBefore); // 未触发 refresh
+    });
+
+    it("patchBug 同组值（severity，groupBy=state）：原位更新", async () => {
+      const result = await setup();
+
+      act(() => result.current.patchBug("a", { severity: "critical" }));
+
+      const group = result.current.groups[0];
+      expect(group.key).toBe("open"); // 分组不变
+      expect(group.items.map((b) => b.id)).toEqual(["a", "b"]); // 位置不变（orderBy=created）
+      expect(group.items[0].severity).toBe("critical");
+    });
+
+    it("仅触发排序规则：组内移除重插，分组不变", async () => {
+      // 服务端 severity asc 已排序：b(low) 在前，a(critical) 在后
+      const result = await setup(
+        { orderBy: "severity", orderDir: "asc" },
+        {
+          items: [
+            makeBug({ id: "b", severity: "low" }),
+            makeBug({ id: "a", severity: "critical" }),
+          ],
+        },
+      );
+      expect(result.current.groups[0].items.map((b) => b.id)).toEqual(["b", "a"]);
+
+      act(() => result.current.patchBug("b", { severity: "critical" }));
+
+      expect(result.current.groups[0].key).toBe("open"); // 分组不变
+      expect(result.current.groups[0].items.map((b) => b.id)).toEqual(["a", "b"]); // b 重插到尾部
+      expect(result.current.groups[0].items[1].severity).toBe("critical");
+    });
+
+    it("触发分组规则（state 被编辑）：回退全量 refresh", async () => {
+      const result = await setup();
+
+      act(() => result.current.patchBug("a", { state: "closed" }));
+
+      expect(h.listBugGroupsFn.mock.calls.length).toBeGreaterThan(1); // refresh 触发重新加载
+      await waitFor(() => expect(result.current.isLoading).toBe(false));
+    });
+
+    it("排序=updated 时任意字段编辑触发组内重插（updatedAt 变最新）", async () => {
+      // 服务端 updatedAt desc 已排序：b(01-02) 在前，a(01-01) 在后
+      const result = await setup(
+        { orderBy: "updated", orderDir: "desc" },
+        {
+          items: [
+            makeBug({ id: "b", updatedAt: "2026-01-02" }),
+            makeBug({ id: "a", updatedAt: "2026-01-01" }),
+          ],
+        },
+      );
+      expect(result.current.groups[0].items.map((b) => b.id)).toEqual(["b", "a"]);
+
+      act(() => result.current.patchBug("a", { assigneeId: null }));
+
+      expect(result.current.groups[0].items.map((b) => b.id)).toEqual(["a", "b"]); // a 的 updatedAt 变最新
+    });
+  });
+});
+
+describe("InlineBugCreator", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it("提交调用 createBugFn 并继承组 state/severity", async () => {
+    h.createBugFn.mockResolvedValue(makeBug({ id: "n1" }));
+
+    const onCreated = vi.fn();
+    render(
+      <InlineBugCreator
+        initialState="in_progress"
+        initialSeverity="high"
+        users={[]}
+        labels={[]}
+        projectId="p1"
+        onCreated={onCreated}
+        onCancel={() => {}}
+      />,
+    );
+
+    const input = screen.getByPlaceholderText(/Enter/) as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "新 BUG" } });
+    fireEvent.click(screen.getByRole("button", { name: "创建" }));
+
+    await waitFor(() => expect(h.createBugFn).toHaveBeenCalledTimes(1));
+    expect(h.createBugFn).toHaveBeenCalledWith({
+      data: expect.objectContaining({
+        title: "新 BUG",
+        state: "in_progress", // 继承组 state
+        severity: "high", // 继承组 severity
+        projectId: "p1",
+      }),
+    });
+    expect(onCreated).toHaveBeenCalledTimes(1);
+  });
+
+  it("标题为空时不提交", async () => {
+    render(
+      <InlineBugCreator
+        initialState="open"
+        initialSeverity="medium"
+        users={[]}
+        labels={[]}
+        onCreated={() => {}}
+        onCancel={() => {}}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "创建" }));
+    expect(h.createBugFn).not.toHaveBeenCalled();
+  });
+
+  afterEach(cleanup);
+});

package/src/components/bug/bug-list-table.tsx

@@ -0,0 +1,187 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { useMemo, useRef } from "react";
+import { flexRender, useTable, type SortingState } from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { ArrowDown, ArrowUp, ChevronDown } from "lucide-react";
+import { bugOrderToSortingState, bugTableFeatures, createBugColumns, SORT_COLUMN_TO_ORDER } from "./columns";
+import { InfiniteScrollSentinel } from "@allbluecn/ui/components/infinite-scroll-sentinel";
+import type { BugListItem } from "./types";
+import { BUG_DISPLAY_PROPERTIES, type BugDisplayProperty, type BugOrderDirection, type BugOrderKey } from "./display/types";
+import type { PagedBugGroupNode } from "./display/use-paged-bug-groups";
+import { m } from "@/paraglide/messages.js";
+
+const ROW_HEIGHT = 44;
+
+/**
+ * BUG 表格视图（照 story-list-table 同构改造）：
+ * - 数据源为分组 hook 的已加载组（展平为行，不直连 listBugsFn——分页统一走分组 hook）
+ * - 哨兵相交时对全部「还有更多」的组触发 onLoadMoreGroup 并聚合 Promise 返回
+ *   （哨兵只在 thenable 完成后解除 loading，返回 void 会导致第二页起永久死锁）
+ * - 排序单轨：orderBy/orderDir 是唯一事实源；列头箭头点击经 onOrderChange 回写
+ *   显示选项（下拉高亮/持久化随之联动），enableSortingRemoval 关闭清除档
+ */
+export function BugListTable({ groups, onOpenBug, properties, orderBy, orderDir, onLoadMoreGroup, onOrderChange }: {
+  groups: PagedBugGroupNode[];
+  onOpenBug?: (id: string) => void;
+  properties: BugDisplayProperty[];
+  orderBy: BugOrderKey;
+  orderDir: BugOrderDirection;
+  onLoadMoreGroup: (groupKey: string) => void | Promise<unknown>;
+  /** 列头排序变更回写显示选项（缺省时列头排序退化为只读展示） */
+  onOrderChange?: (orderBy: BugOrderKey, orderDir: BugOrderDirection) => void;
+}) {
+  // 排序完全由受控 props 派生（单轨）：本地 sorting 副本会与下拉/持久化脱节
+  const sorting = useMemo<SortingState>(() => bugOrderToSortingState(orderBy, orderDir), [orderBy, orderDir]);
+
+  const columns = useMemo(() => createBugColumns(), []);
+
+  const columnVisibility = useMemo(() => {
+    const vis: Record<string, boolean> = {};
+    BUG_DISPLAY_PROPERTIES.forEach((p) => {
+      vis[p] = properties.includes(p);
+    });
+    // 隐形排序列恒隐藏（仅承载 created/updated 的排序 accessor）
+    vis.createdAt = false;
+    vis.updatedAt = false;
+    return vis;
+  }, [properties]);
+
+  const handleSortingChange = (updater: SortingState | ((old: SortingState) => SortingState)) => {
+    const next = typeof updater === "function" ? updater(sorting) : updater;
+    const entry = next[next.length - 1];
+    if (!entry) return; // 清除档已被 enableSortingRemoval 关闭，防御性忽略
+    const nextOrder = SORT_COLUMN_TO_ORDER[entry.id];
+    if (!nextOrder) return;
+    const nextDir: BugOrderDirection = entry.desc ? "desc" : "asc";
+    if (nextOrder === orderBy && nextDir === orderDir) return;
+    onOrderChange?.(nextOrder, nextDir);
+  };
+
+  const data = useMemo<BugListItem[]>(() => groups.flatMap((g) => g.items), [groups]);
+
+  const table = useTable({
+    features: bugTableFeatures,
+    data,
+    columns,
+    state: { sorting, columnVisibility },
+    onSortingChange: handleSortingChange,
+    enableSortingRemoval: false,
+    initialState: {
+      columnPinning: { start: ["identifier", "title"], end: [] },
+    },
+  });
+
+  const { rows } = table.getRowModel();
+  const parentRef = useRef<HTMLDivElement>(null);
+
+  const rowVirtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => ROW_HEIGHT,
+    overscan: 12,
+  });
+
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  const totalHeight = rowVirtualizer.getTotalSize();
+  const paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
+  const paddingBottom = virtualRows.length > 0 ? totalHeight - virtualRows[virtualRows.length - 1].end : 0;
+
+  const headerGroups = table.getHeaderGroups();
+  const totalWidth = table.getTotalSize();
+
+  const hasMore = groups.some((g) => g.hasMore && !g.loading);
+  // 必须返回 Promise：哨兵只在 thenable 完成后 setLoading(false)，
+  // 否则 loadingRef 恒 true，第二次相交起永不再触发（第一页后死锁）
+  const handleLoadMore = () => {
+    const jobs = groups
+      .filter((g) => g.hasMore && !g.loading)
+      .map((g) => onLoadMoreGroup(g.key));
+    return Promise.all(jobs).then(() => undefined);
+  };
+
+  return (
+    <div ref={parentRef} className="h-full min-h-0 overflow-auto rounded-lg border bg-card">
+      <div style={{ width: totalWidth, minWidth: "100%" }}>
+        {/* 表头 */}
+        <div className="sticky top-0 z-10 flex h-9 items-center border-b bg-muted/50 backdrop-blur">
+          {headerGroups[0].headers.map((header) => {
+            const canSort = header.column.getCanSort();
+            const sortDir = header.column.getIsSorted();
+            return (
+              <div
+                key={header.id}
+                style={{ width: header.getSize() }}
+                className="flex h-full items-center gap-1 px-3 text-xs font-medium text-muted-foreground"
+              >
+                {flexRender(header.column.columnDef.header, header.getContext())}
+                {canSort && (
+                  <button
+                    type="button"
+                    onClick={header.column.getToggleSortingHandler()}
+                    className="text-muted-foreground/60 hover:text-foreground"
+                  >
+                    {sortDir === "asc" ? <ArrowUp className="size-3" />
+                      : sortDir === "desc" ? <ArrowDown className="size-3" />
+                      : <ChevronDown className="size-3" />}
+                  </button>
+                )}
+              </div>
+            );
+          })}
+        </div>
+
+        {/* 虚拟化行 */}
+        <div>
+          {paddingTop > 0 && <div style={{ height: paddingTop }} />}
+          {virtualRows.map((virtualRow) => {
+            const row = rows[virtualRow.index];
+            return (
+              <button
+                key={row.original.id}
+                type="button"
+                data-testid="bug-table-row"
+                onClick={() => onOpenBug?.(row.original.id)}
+                style={{ height: ROW_HEIGHT }}
+                className="flex w-full items-center border-b border-border/40 text-sm hover:bg-accent/40 transition-colors"
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <div
+                    key={cell.id}
+                    style={{ width: cell.column.getSize() }}
+                    className="flex h-full items-center overflow-hidden px-3"
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </div>
+                ))}
+              </button>
+            );
+          })}
+          {paddingBottom > 0 && <div style={{ height: paddingBottom }} />}
+          <InfiniteScrollSentinel loadedAllLabel={m.bug_list_loaded_all()} onLoadMore={handleLoadMore} hasMore={hasMore} rootRef={parentRef} />
+        </div>
+
+        {rows.length === 0 && (
+          <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
+            {m.bug_table_empty()}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}