@allbluecn/web-app 0.17.1 → 0.18.0

package/src/components/testcase/list-view.tsx

@@ -0,0 +1,526 @@
+// 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/>.
+
+// 用例列表页壳（规格 A1/A7/A11）：左侧模块树（唯一新增布局元素，可折叠）
+// + 顶部工具栏 + 列表骨架。数据层照 story-list-view 模式：serverFn 直调 +
+// signature 防过期（过期响应丢弃），禁止 react-query。
+// 任务 8：分组虚拟列表（GroupedList）+ 行内编辑乐观 patch（三档）+ 无限滚动 +
+// ↑↓ 键选中（selectedId 由本组件持有，任务 10 peek 消费）。
+// 任务 9：视图切换（list↔table 保持筛选，表格走 TableView）+ 保存筛选视图
+// （内置 __default__ 默认视图不落库；applyView 应用 filters+displayOptions；
+// 手动改动筛选/搜索/模块树/分组即回落默认视图；保存时 filters 键集收敛在前端）。
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { PanelLeftClose, PanelLeftOpen, RotateCcw } from "lucide-react";
+import { Button } from "@allbluecn/ui/button";
+import { FolderTree, type FolderNodeDto, type FolderSelection } from "./folder-tree";
+import { TestCaseToolbar } from "./testcase-toolbar";
+import {
+  hasActiveFilters,
+  priorityLabel,
+  serializeTestCaseFilters,
+  stateLabel,
+  typeLabel,
+  type TestCaseFilterState,
+} from "./filters";
+import { listTestCasesFn } from "@/server/serverFns/testcase/testcase-crud";
+import { listGroupsFn } from "@/server/serverFns/testcase/testcase-groups";
+import { listFoldersFn } from "@/server/serverFns/testcase/testcase-folders";
+import {
+  createFilterViewFn,
+  listFilterViewsFn,
+} from "@/server/serverFns/testcase/testcase-filter-views";
+import type { TestCaseSummary } from "@/server/serverFns/testcase/types";
+import type { UserBrief } from "@/components/story/types";
+import { GroupedList, type TestCaseGroupBy, type TestCaseGroupInfo } from "./list/grouped-list";
+import { TableView } from "./table/table-view";
+import { TestCasePeekPanel, type PeekMode } from "./peek-panel";
+import { CreateViewDialog, type CreateViewDialogPayload } from "./views/create-view-dialog";
+import { CreateTestCaseDialog } from "./create-testcase-dialog";
+import { AddToPlanBar } from "./plans/add-to-plan-bar";
+import { AddToPlanDialog } from "./plans/add-to-plan-dialog";
+import {
+  buildDefaultView,
+  DEFAULT_VIEW_ID,
+  toSavedView,
+  toViewFilters,
+  viewFiltersToState,
+  type TestCaseSavedView,
+  type TestCaseViewType,
+} from "./views/view-types";
+import { BUILTIN_INDEPENDENT_DISPLAY_ID } from "@/lib/builtin-project";
+import { m } from "@/paraglide/messages.js";
+
+interface TestCaseListViewProps {
+  projects: { id: string; name: string; displayId: string | null; icon: string }[];
+  initialFolders: FolderNodeDto[];
+  initialUsers: UserBrief[];
+}
+
+interface CaseListResult {
+  items: TestCaseSummary[];
+  nextCursor: string | null;
+}
+
+export function TestCaseListView({ projects, initialFolders, initialUsers }: TestCaseListViewProps) {
+  // P1 作用域：用户「独立需求」内置项目（displayId=STORY，与 stories/bugs 的
+  // serverFn 静默回退同一项目）。项目选择器不在任务 7 范围。
+  // 回退口径对齐说明（任务 7 审查遗留）：服务端 resolveStoryScopeProjectId 对
+  // 未传/无效/非成员 projectId 静默回退内置项目；客户端 projects 为空时 projectId
+  // 为 undefined 直接跳过拉取（fetchCases 的 !projectId 守卫），不会发出无效请求，
+  // 因此保持「取内置项目 → 首个项目」的确定性回退即可，与前者互补不冲突。
+  const projectId = useMemo(
+    () => projects.find((p) => p.displayId === BUILTIN_INDEPENDENT_DISPLAY_ID)?.id ?? projects[0]?.id,
+    [projects],
+  );
+
+  const [folders, setFolders] = useState(initialFolders);
+  const [users] = useState(initialUsers);
+  const [cases, setCases] = useState<CaseListResult>({ items: [], nextCursor: null });
+  const [selection, setSelection] = useState<FolderSelection>({ kind: "all" });
+  const [searchText, setSearchText] = useState<string | undefined>(undefined);
+  const [filters, setFilters] = useState<TestCaseFilterState>({});
+  const [view, setView] = useState<TestCaseViewType>("list");
+  const [groupBy, setGroupBy] = useState<TestCaseGroupBy>("none");
+  // ── 保存筛选视图（任务 9）：内置默认视图在首位；手动改筛选回落默认视图 ──
+  const [views, setViews] = useState<TestCaseSavedView[]>([]);
+  const [activeViewId, setActiveViewId] = useState<string>(DEFAULT_VIEW_ID);
+  const [createViewOpen, setCreateViewOpen] = useState(false);
+  const [groups, setGroups] = useState<TestCaseGroupInfo[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  // ── Peek 侧滑预览（任务 10）：peekId 与选中分离持有；↑↓ 移动选中时若面板
+  // 打开则跟随（连续预览），未打开仅选中（任务 8 行为不变）。三模式与需求页一致。──
+  const [peekId, setPeekId] = useState<string | null>(null);
+  const [peekMode, setPeekMode] = useState<PeekMode>("side-peek");
+  // ── 新建用例对话框（任务 11）：接通 toolbar「新建」按钮 ──
+  const [createCaseOpen, setCreateCaseOpen] = useState(false);
+  // ── 圈选多选（任务 13）：Set 持有已选 id；批处理条浮现「加入计划」──
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set());
+  const [addToPlanOpen, setAddToPlanOpen] = useState(false);
+  const [treeVisible, setTreeVisible] = useState(true);
+  const [filterBarVisible, setFilterBarVisible] = useState(false);
+  const [loadFailed, setLoadFailed] = useState(false);
+  const [initialLoaded, setInitialLoaded] = useState(false);
+
+  useEffect(() => {
+    listFilterViewsFn()
+      .then((rows) => setViews(rows.map(toSavedView)))
+      .catch(() => {});
+  }, []);
+
+  const allViews = useMemo(() => [buildDefaultView(), ...views], [views]);
+
+  // applyView：仅置状态——查询参数变化由 signature 机制自动触发重拉（A7 口径）
+  const applyView = useCallback((target: TestCaseSavedView) => {
+    setActiveViewId(target.id);
+    const { selection: nextSelection, searchText: nextSearch, filters: nextFilters } =
+      viewFiltersToState(target.filters);
+    setSelection(nextSelection);
+    setSearchText(nextSearch);
+    setFilters(nextFilters);
+    setGroupBy(target.displayOptions.groupBy ?? "none");
+    setView(target.displayOptions.view ?? "list");
+  }, []);
+
+  // ── signature 防过期（A7）：任一查询参数变化生成新签名，过期响应丢弃 ──
+  const signature = useMemo(
+    () =>
+      JSON.stringify([
+        projectId ?? "",
+        selection.kind,
+        selection.kind === "folder" ? selection.id : "",
+        searchText ?? "",
+        filters.state ?? "",
+        filters.type ?? "",
+        filters.priority ?? "",
+      ]),
+    [projectId, selection, searchText, filters],
+  );
+  const signatureRef = useRef(signature);
+  signatureRef.current = signature;
+
+  // ── 追加分页守卫（审查 Critical #1）：哨兵观察器只在 hasMore/rootRef 变化时
+  // 重订阅，onLoadMore 闭包可能停在旧帧——游标走 ref 读最新值 + in-flight 守卫 +
+  // 追加按 id 去重（story-list-view 同款），防旧 cursor 重放导致整页重复 append ──
+  const cursorRef = useRef<string | null>(null);
+  cursorRef.current = cases.nextCursor;
+  const loadingRef = useRef(false);
+
+  const requestParams = useCallback(
+    (cursor?: string) => ({
+      projectId: projectId as string,
+      folderId:
+        selection.kind === "folder"
+          ? selection.id
+          : selection.kind === "ungrouped"
+            ? null
+            : undefined,
+      searchText,
+      ...serializeTestCaseFilters(filters),
+      ...(cursor ? { cursor } : {}),
+    }),
+    [projectId, selection, searchText, filters],
+  );
+
+  const fetchCases = useCallback(
+    async (cursor?: string) => {
+      if (!projectId) return;
+      if (cursor && loadingRef.current) return;
+      const requestSignature = signatureRef.current;
+      if (cursor) loadingRef.current = true;
+      try {
+        const result = await listTestCasesFn({ data: requestParams(cursor) });
+        if (signatureRef.current !== requestSignature) return;
+        if (cursor) {
+          setCases((prev) => {
+            const prevKnown = new Set(prev.items.map((c) => c.id));
+            return {
+              items: [...prev.items, ...result.items.filter((c) => !prevKnown.has(c.id))],
+              nextCursor: result.nextCursor,
+            };
+          });
+        } else {
+          setCases(result);
+        }
+        setLoadFailed(false);
+        setInitialLoaded(true);
+      } catch {
+        if (signatureRef.current === requestSignature) setLoadFailed(true);
+      } finally {
+        if (cursor) loadingRef.current = false;
+      }
+    },
+    [projectId, requestParams],
+  );
+
+  // 稳定引用供哨兵订阅：经 cursorRef 读最新游标，规避旧闭包重发旧 cursor
+  const loadMore = useCallback(() => {
+    if (cursorRef.current === null) return;
+    return fetchCases(cursorRef.current);
+  }, [fetchCases]);
+
+  useEffect(() => {
+    void fetchCases();
+  }, [fetchCases]);
+
+  // ── 分组计数（groupBy ≠ none 时）：独立 signature，失败不阻塞列表 ──
+  const groupsSignature = useMemo(
+    () =>
+      JSON.stringify([
+        projectId ?? "",
+        groupBy,
+        selection.kind,
+        selection.kind === "folder" ? selection.id : "",
+        searchText ?? "",
+        filters.state ?? "",
+        filters.type ?? "",
+        filters.priority ?? "",
+      ]),
+    [projectId, groupBy, selection, searchText, filters],
+  );
+  const groupsSignatureRef = useRef(groupsSignature);
+  groupsSignatureRef.current = groupsSignature;
+
+  const fetchGroups = useCallback(async () => {
+    if (!projectId || groupBy === "none") return;
+    const requestSignature = groupsSignatureRef.current;
+    try {
+      const { groups: rows } = await listGroupsFn({ data: { ...requestParams(), groupBy } });
+      if (groupsSignatureRef.current !== requestSignature) return;
+      setGroups(rows);
+    } catch {
+      // 组计数失败静默保留上次结果（列表行不受影响）
+    }
+  }, [projectId, groupBy, requestParams]);
+
+  useEffect(() => {
+    void fetchGroups();
+  }, [fetchGroups]);
+
+  // 乐观 patch 三档的本地档（A7）：CaseRow 负责 ①乐观回调（本函数）②serverFn
+  // ③收敛/回滚（同样回调本函数合并）；原地合并不重排，扁平分页序稳定。
+  const patchCase = useCallback((id: string, patch: Partial<TestCaseSummary>) => {
+    setCases((prev) => ({
+      ...prev,
+      items: prev.items.map((c) => (c.id === id ? { ...c, ...patch } : c)),
+    }));
+  }, []);
+
+  const refreshFolders = useCallback(async () => {
+    try {
+      const { folders: rows } = await listFoldersFn({ data: { projectId } });
+      setFolders(rows);
+    } catch {
+      // 树刷新失败保留现状（列表不受影响）
+    }
+  }, [projectId]);
+
+  const handleFiltersChange = useCallback((next: TestCaseFilterState) => {
+    setFilters(next);
+    // 手动筛选偏离当前保存视图 → 回落内置默认视图（视图选择器取消高亮）
+    setActiveViewId(DEFAULT_VIEW_ID);
+    if (!hasActiveFilters(next)) setFilterBarVisible(false);
+  }, []);
+
+  const handleSearchChange = useCallback((next: string | undefined) => {
+    setSearchText(next);
+    setActiveViewId(DEFAULT_VIEW_ID);
+  }, []);
+
+  const handleSelectionChange = useCallback((next: FolderSelection) => {
+    setSelection(next);
+    setActiveViewId(DEFAULT_VIEW_ID);
+  }, []);
+
+  const handleGroupByChange = useCallback((next: TestCaseGroupBy) => {
+    setGroupBy(next);
+    setActiveViewId(DEFAULT_VIEW_ID);
+  }, []);
+
+  // ── 圈选多选接线（任务 13）：勾选翻转；加入成功后清空（用例已在计划内）──
+  const toggleSelect = useCallback((id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+  const clearSelection = useCallback(() => setSelectedIds(new Set()), []);
+
+  // ── Peek 接线（任务 10）──
+  // onSelect（行内编辑器外的一切选中来源：↑↓ 键/键盘导航）：面板打开时跟随切换
+  const handleSelect = useCallback((id: string) => {
+    setSelectedId(id);
+    setPeekId((prev) => (prev !== null ? id : prev));
+  }, []);
+  // 行点击：选中 + 滑出 peek
+  const handleOpenCase = useCallback((id: string) => {
+    setSelectedId(id);
+    setPeekId(id);
+  }, []);
+  const handleClosePeek = useCallback(() => setPeekId(null), []);
+  // 面板 ↑↓/上下一条按钮：在已加载扁平序内移动（边界由 disabled + 越界守卫双兜底）
+  const handlePeekStep = useCallback(
+    (dir: 1 | -1) => {
+      if (!peekId) return;
+      const idx = cases.items.findIndex((c) => c.id === peekId);
+      const nextIdx = idx + dir;
+      if (idx === -1 || nextIdx < 0 || nextIdx >= cases.items.length) return;
+      const nextId = cases.items[nextIdx]!.id;
+      setSelectedId(nextId);
+      setPeekId(nextId);
+    },
+    [peekId, cases.items],
+  );
+  const peekedCase = peekId ? (cases.items.find((c) => c.id === peekId) ?? null) : null;
+  const peekedIdx = peekId ? cases.items.findIndex((c) => c.id === peekId) : -1;
+
+  // 创建（保存）视图提交：filters 键集收敛在前端（任务 6 审查指针②），
+  // displayOptions 快照当前 groupBy/view。P1 单项目作用域，projectId 不落（null）。
+  const handleCreateViewSubmit = useCallback(
+    async (payload: CreateViewDialogPayload) => {
+      await createFilterViewFn({
+        data: {
+          name: payload.name,
+          description: payload.description,
+          icon: payload.icon,
+          projectId: null,
+          // 展开为新鲜对象字面量：接口无隐式索引签名，validator 侧入参是
+          // Record<string, unknown>（服务端只验「是对象」，键集收敛在本模块）
+          filters: { ...toViewFilters({ selection, searchText, filters }) },
+          displayOptions: { groupBy, view },
+        },
+      });
+      const rows = await listFilterViewsFn();
+      setViews(rows.map(toSavedView));
+    },
+    [selection, searchText, filters, groupBy, view],
+  );
+
+  // 保存对话框里的当前筛选摘要（值列表；空筛选给提示文案）
+  const filterSummary = useMemo(() => {
+    const parts: string[] = [];
+    if (searchText) parts.push(`「${searchText}」`);
+    if (selection.kind === "folder") {
+      parts.push(folders.find((f) => f.id === selection.id)?.name ?? m.testcase_folderTree_ungrouped());
+    } else if (selection.kind === "ungrouped") {
+      parts.push(m.testcase_folderTree_ungrouped());
+    }
+    if (filters.state) parts.push(stateLabel(filters.state));
+    if (filters.type) parts.push(typeLabel(filters.type));
+    if (filters.priority) parts.push(priorityLabel(filters.priority));
+    return parts.length > 0 ? parts.join(" · ") : m.testcase_view_filterEmpty();
+  }, [searchText, selection, filters, folders]);
+
+  const createViewInitialValues = useMemo(
+    () => ({ name: "", description: "", icon: "list" }),
+    [],
+  );
+
+  const loadFailedBlock = loadFailed ? (
+    <div className="flex flex-1 flex-col items-center justify-center gap-3 text-sm text-muted-foreground">
+      <span>{m.testcase_listView_loadFailed()}</span>
+      <Button variant="outline" size="sm" onClick={() => void fetchCases()}>
+        <RotateCcw className="size-3.5" />
+      </Button>
+    </div>
+  ) : null;
+
+  const emptyBlock = initialLoaded && cases.items.length === 0 ? (
+    <div className="flex flex-1 flex-col items-center justify-center gap-1 text-center">
+      <span className="text-sm font-medium">{m.testcase_listView_empty()}</span>
+      <span className="text-xs text-muted-foreground">{m.testcase_listView_emptyDesc()}</span>
+    </div>
+  ) : null;
+
+  // 列表区：任务 8 分组虚拟列表（A8，groupBy 仅作用于列表视图）；任务 9 表格视图
+  // （A3，排序+列钉住，分组不适用——与需求页表格同口径）
+  const listBody =
+    view === "table" ? (
+      <TableView
+        cases={cases.items}
+        hasMore={cases.nextCursor !== null}
+        selectedId={selectedId}
+        onSelect={handleSelect}
+        onOpenCase={handleOpenCase}
+        onLoadMore={loadMore}
+      />
+    ) : (
+      <GroupedList
+        groupBy={groupBy}
+        groups={groups}
+        cases={cases.items}
+        folders={folders}
+        users={users}
+        hasMore={cases.nextCursor !== null}
+        selectedId={selectedId}
+        onSelect={handleSelect}
+        onOpenCase={handleOpenCase}
+        selectedIds={selectedIds}
+        onToggleSelect={toggleSelect}
+        onPatchCase={patchCase}
+        onRefreshGroups={() => void fetchGroups()}
+        onLoadMore={loadMore}
+      />
+    );
+
+  return (
+    <div className="relative flex h-full min-h-0 gap-3 overflow-hidden p-4">
+      <div
+        className={
+          treeVisible
+            ? "flex w-56 shrink-0 flex-col rounded-lg border border-border bg-background p-2"
+            : "flex w-0 shrink-0 flex-col overflow-hidden p-0"
+        }
+      >
+        {treeVisible && (
+          <FolderTree
+            folders={folders}
+            selected={selection}
+            onSelect={handleSelectionChange}
+            onFoldersChanged={() => void refreshFolders()}
+          />
+        )}
+      </div>
+      <div className="flex min-w-0 flex-1 flex-col gap-3 overflow-hidden">
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            aria-label={treeVisible ? m.testcase_folderTree_hideTree() : m.testcase_folderTree_showTree()}
+            onClick={() => setTreeVisible((v) => !v)}
+            className="size-8 shrink-0 text-muted-foreground"
+          >
+            {treeVisible ? <PanelLeftClose className="size-4" /> : <PanelLeftOpen className="size-4" />}
+          </Button>
+          <TestCaseToolbar
+            total={cases.items.length}
+            projectId={projectId}
+            search={searchText}
+            filters={filters}
+            filterBarVisible={filterBarVisible}
+            onToggleFilterBar={() => setFilterBarVisible((v) => !v)}
+            onSearchChange={handleSearchChange}
+            onFiltersChange={handleFiltersChange}
+            view={view}
+            onViewChange={setView}
+            groupBy={groupBy}
+            onGroupByChange={handleGroupByChange}
+            views={allViews}
+            activeViewId={activeViewId}
+            onApplyView={applyView}
+            onAddView={() => setCreateViewOpen(true)}
+            onCreateClick={() => setCreateCaseOpen(true)}
+          />
+        </div>
+        <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+        {loadFailed ? loadFailedBlock : cases.items.length === 0 ? emptyBlock : listBody}
+        <AddToPlanBar
+          selectedCount={selectedIds.size}
+          onAddToPlan={() => setAddToPlanOpen(true)}
+          onClearSelection={clearSelection}
+        />
+      </div>
+      </div>
+      <CreateViewDialog
+        open={createViewOpen}
+        onOpenChange={setCreateViewOpen}
+        initialValues={createViewInitialValues}
+        filterSummary={filterSummary}
+        onSubmit={handleCreateViewSubmit}
+      />
+      {/* 新建成功：refetch 列表 + 分组计数（story create-dialog 先例为 refetch 非
+          prepend——列表 orderBy sequenceId asc，新用例落在已加载区间之外也一致），
+          并把键盘选中定位到新用例（peek 不自动打开，与先例一致） */}
+      <CreateTestCaseDialog
+        open={createCaseOpen}
+        onOpenChange={setCreateCaseOpen}
+        projectId={projectId}
+        projects={projects}
+        folders={folders}
+        users={users}
+        initialFolderId={selection.kind === "folder" ? selection.id : null}
+        onSuccess={(created) => {
+          setSelectedId(created.id);
+          void fetchCases();
+          void fetchGroups();
+        }}
+      />
+      {/* 圈选加入计划（任务 13）：成功（added>0）后清空多选；重复/未批准跳过由 toast 明示 */}
+      <AddToPlanDialog
+        open={addToPlanOpen}
+        onOpenChange={setAddToPlanOpen}
+        caseIds={[...selectedIds]}
+        projectId={projectId}
+        onAdded={clearSelection}
+      />
+      {peekedCase && (
+        <TestCasePeekPanel
+          caseItem={peekedCase}
+          folders={folders}
+          mode={peekMode}
+          onModeChange={setPeekMode}
+          onClose={handleClosePeek}
+          onPrevious={() => handlePeekStep(-1)}
+          onNext={() => handlePeekStep(1)}
+          prevDisabled={peekedIdx <= 0}
+          nextDisabled={peekedIdx >= cases.items.length - 1}
+        />
+      )}
+    </div>
+  );
+}