@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/testcase/views/batch-toolbar.tsx

@@ -0,0 +1,203 @@
+// 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/>.
+
+// 用例列表批量条（UI 对齐二期 PR-8 任务 28/29）：plans/add-to-plan-bar 改造接入
+// shared-kit BatchToolbarShell（sticky 吸附滚动区底部 + 三态全选 + 清空 + AI
+// 悬浮球抬升引用计数，story-list batch-toolbar 先例同构），动作区保留「加入计划」
+// 入口并新增批量编辑器簇（State/Priority/Assignee/Folder，照 story 批量条形态：
+// 编辑器以空值渲染，选择即确认）。任务 29：manual 排序档补组内上移/下移按钮簇
+// （canMove 门控，照 story 批量条 ArrowUp/ArrowDown 同位）。提交复用既有
+// bulkUpdateTestCasesFn 单字段契约（validator refine 一次仅一个字段）——改状态调
+// { state }、改优先级调 { priority }，不合并多字段；成功后 onUpdated 由父组件
+// 清空多选并刷新。
+import { useState, type ReactElement } from "react";
+import { ArrowDown, ArrowUp, ClipboardList } from "lucide-react";
+import { BatchToolbarShell } from "@/components/shared-kit/list-kit/batch-toolbar-shell";
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { toast } from "@/components/ui/toast";
+import { bulkUpdateTestCasesFn } from "@/server/serverFns/testcase/bulk";
+import type { TestCaseState, TestCasePriority } from "@/server/serverFns/testcase/constants";
+import { StateEditor } from "../inline-editors/state-editor";
+import { PriorityEditor } from "../inline-editors/priority-editor";
+import { AssigneeEditor } from "../inline-editors/assignee-editor";
+import { FolderEditor } from "../inline-editors/folder-editor";
+import type { FolderNodeDto } from "../folder-tree";
+import type { UserBrief } from "@/components/story/types";
+import { toastError } from "@/lib/toast-error";
+import { cn } from "@/lib/utils";
+import { m } from "@/paraglide/messages.js";
+
+/** 单字段批量 patch（bulkUpdateTestCasesFn validator 契约：一次仅支持一个字段） */
+export type TestCaseBatchPatch =
+  | { state: TestCaseState }
+  | { priority: TestCasePriority }
+  | { assigneeId: string | null }
+  | { folderId: string | null };
+
+export interface TestCaseBatchToolbarProps {
+  selectedCount: number;
+  /** 当前视图已加载条数（三态全选的分母；scope=all 聚合下同口径） */
+  totalLoaded: number;
+  allSelected: boolean;
+  /** 当前 scope 项目 id；undefined = 「全部项目」聚合 scope（FolderEditor 不渲染，防跨项目错挂） */
+  projectId: string | undefined;
+  users: UserBrief[];
+  folders: FolderNodeDto[];
+  /** 已选用例 id（编辑器单字段提交目标，顺序无关） */
+  caseIds: string[];
+  /** manual 排序档才显示组内上移/下移簇（story 批量条 canMove 同口径；列表视图专属） */
+  canMove: boolean;
+  canMoveUp: boolean;
+  canMoveDown: boolean;
+  onMoveUp: () => void;
+  onMoveDown: () => void;
+  onToggleAll: () => void;
+  onClearSelection: () => void;
+  onAddToPlan: () => void;
+  /** 批量更新成功后回调（父组件清空多选并刷新列表/分组/看板） */
+  onUpdated: () => void;
+}
+
+export function TestCaseBatchToolbar({
+  selectedCount,
+  totalLoaded,
+  allSelected,
+  projectId,
+  users,
+  folders,
+  caseIds,
+  canMove,
+  canMoveUp,
+  canMoveDown,
+  onMoveUp,
+  onMoveDown,
+  onToggleAll,
+  onClearSelection,
+  onAddToPlan,
+  onUpdated,
+}: TestCaseBatchToolbarProps) {
+  const [busy, setBusy] = useState(false);
+
+  // 单字段提交：一次调用只带一个 patch 键（服务端 refine 拒绝多字段）。
+  // busy 期间编辑器 popover 仍可打开但提交被门禁（story 批量条同口径）。
+  const submitField = async (patch: TestCaseBatchPatch) => {
+    if (busy || caseIds.length === 0) return;
+    setBusy(true);
+    try {
+      await bulkUpdateTestCasesFn({ data: { caseIds, patch } });
+      toast.success(m.testcase_batch_updated());
+      onUpdated();
+    } catch (e) {
+      toastError(e, m.testcase_batch_updateFailed());
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  if (selectedCount === 0) return null;
+
+  return (
+    <BatchToolbarShell
+      selectedCount={selectedCount}
+      total={totalLoaded}
+      allSelected={allSelected}
+      onToggleAll={onToggleAll}
+      onClear={onClearSelection}
+      busy={busy}
+    >
+      {canMove && (
+        <>
+          <ToolbarIconButton
+            label={m.testcase_batch_moveUp()}
+            icon={ArrowUp}
+            disabled={busy || !canMoveUp}
+            onClick={onMoveUp}
+          />
+          <ToolbarIconButton
+            label={m.testcase_batch_moveDown()}
+            icon={ArrowDown}
+            disabled={busy || !canMoveDown}
+            onClick={onMoveDown}
+          />
+          <div className="mx-1 h-4 w-px shrink-0 bg-border" />
+        </>
+      )}
+      <Button size="sm" className="h-7 shrink-0 gap-1.5" disabled={busy} onClick={onAddToPlan}>
+        <ClipboardList className="size-3.5" />
+        {m.testcase_plan_batch_addToPlan()}
+      </Button>
+      <div className="mx-1 h-4 w-px shrink-0 bg-border" />
+      <div className="flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto scrollbar-hide [&>*]:shrink-0">
+        <StateEditor value="draft" onChange={(v) => void submitField({ state: v })} />
+        <PriorityEditor value="p3" onChange={(v) => void submitField({ priority: v })} />
+        <AssigneeEditor
+          assignee={null}
+          users={users}
+          onChange={(v) => void submitField({ assigneeId: v })}
+        />
+        {/* scope=all（projectId 缺省）聚合圈选不渲染 FolderEditor（clamp 家族同构）：
+            模块树属单项目概念，聚合 scope 下 folders 花名册恒为内置独立项目残留，
+            选择会把跨项目用例静默挂到内置项目模块（服务端归属校验是第二道防线） */}
+        {projectId && (
+          <FolderEditor
+            value={null}
+            folders={folders}
+            onChange={(v) => void submitField({ folderId: v })}
+          />
+        )}
+      </div>
+    </BatchToolbarShell>
+  );
+}
+
+/** icon 动作按钮（照 story batch-toolbar ToolbarIconButton 同款：禁用无 Tooltip，可用带提示） */
+function ToolbarIconButton({
+  label,
+  icon: Icon,
+  disabled,
+  onClick,
+}: {
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+  disabled?: boolean;
+  onClick: () => void;
+}) {
+  const button = (
+    <Button
+      variant="ghost"
+      size="icon"
+      className={cn("size-7 text-muted-foreground", !disabled && "hover:text-foreground")}
+      disabled={disabled}
+      aria-label={label}
+      onClick={onClick}
+    >
+      <Icon className="size-4" />
+    </Button>
+  );
+
+  return disabled ? (
+    button
+  ) : (
+    <Tooltip>
+      <TooltipTrigger render={button as ReactElement} />
+      <TooltipContent side="top" className="text-xs">
+        {label}
+      </TooltipContent>
+    </Tooltip>
+  );
+}