@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/shared-kit/list-kit/display/values.ts

@@ -0,0 +1,60 @@
+// 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/>.
+
+// list-kit display 运行时常量层（设计 §4.6：类型与常量分文件）。零 React/
+// 组件依赖，serverFn 可安全值导入（story-groups / story-display-options 的
+// zod 枚举与偏好解析即消费方）。
+//
+// 常量为 story 规范口径（自 story/display/types.ts 逐字节搬移，存储形状
+// 不变——User.storyDisplayOptions Json 的键集/取值必须保持）。bug 的
+// BUG_* 常量仍在 bug/display/types（其 serverFn 消费面不在本期收拢范围）。
+
+import type { DisplayOptions, OrderDirection, OrderKey } from "./types";
+
+export const GROUP_KEYS = [
+  "state", "priority", "assignee", "labels", "createdBy", "project", "none",
+] as const;
+
+export const ORDER_KEYS = [
+  "manual", "created", "updated", "startDate", "dueDate", "priority",
+] as const;
+
+export const ORDER_DIRECTIONS = ["asc", "desc"] as const;
+
+/** manual 的语义是「按 boardOrder 升序」：写入侧（看板拖拽、列表上移下移）一律按索引升序落库，
+ * 表格视图与子需求查询也固定 asc，故 orderDir 对 manual 不生效，统一归一化为 asc。 */
+export function resolveOrderDir(orderBy: OrderKey, orderDir: OrderDirection): OrderDirection {
+  return orderBy === "manual" ? "asc" : orderDir;
+}
+
+export const ALL_DISPLAY_PROPERTIES = [
+  "id", "project", "assignee", "startDate", "dueDate",
+  "labels", "priority", "state", "subCount", "attachmentCount",
+] as const;
+
+export const PAGE_SIZE_OPTIONS = [100, 200, 500, 1000] as const;
+
+export const DEFAULT_DISPLAY_OPTIONS: DisplayOptions = {
+  groupBy: "state",
+  subGroupBy: "none",
+  orderBy: "created",
+  orderDir: "desc",
+  properties: ["id", "project", "assignee", "startDate", "dueDate", "labels", "priority", "state"],
+  showEmptyGroups: false,
+  showSubItems: false,
+  pageSize: 100,
+};

package/src/components/shared-kit/list-kit/filters/__tests__/create-filters-module.test.tsx

@@ -0,0 +1,181 @@
+// 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, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { ListFilter, Type } from "lucide-react";
+import { createFiltersModule, createDefaultCondition } from "../index";
+import type { FilterCondition, FilterFieldConfig } from "../types";
+
+// 工厂是纯参数化运行时：测试用两字段（select + text）最小配置驱动，
+// 与 story 七字段配置表解耦（story 侧行为零变化由 src/components/story 全绿兜底）。
+
+type TestKey = "state" | "title";
+
+const CONFIGS: Record<TestKey, FilterFieldConfig<TestKey>> = {
+  state: {
+    key: "state",
+    label: () => "状态",
+    icon: ListFilter,
+    fieldType: "select",
+    operators: ["is", "is_not", "is_empty", "is_not_empty"],
+    defaultOperator: "is",
+    defaultValue: "backlog",
+  },
+  title: {
+    key: "title",
+    label: () => "标题",
+    icon: Type,
+    fieldType: "text",
+    operators: ["contains", "not_contains", "is_empty"],
+    defaultOperator: "contains",
+  },
+};
+
+const filtersModule = createFiltersModule(CONFIGS, {
+  renderValueEditor: ({ value }) => <span data-testid="filter-value">{value}</span>,
+});
+
+function makeCondition(overrides: Partial<FilterCondition<TestKey>> = {}): FilterCondition<TestKey> {
+  return { id: "c1", property: "title", operator: "contains", value: "登录", ...overrides };
+}
+
+function renderRow(ui: React.ReactElement) {
+  return render(<TooltipProvider>{ui}</TooltipProvider>);
+}
+
+describe("createFiltersModule 参数化运行时", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("FilterRow 添加下拉仅含配置字段，点击项按 defaultOperator/defaultValue 追加条件", async () => {
+    const onChange = vi.fn();
+    renderRow(<filtersModule.FilterRow conditions={[]} onChange={onChange} onClearAll={() => {}} />);
+    const addButtons = screen.getAllByRole("button", { name: /添加条件/ });
+    fireEvent.click(addButtons[0]);
+    expect(await screen.findByText("状态")).toBeInTheDocument();
+    expect(screen.getByText("标题")).toBeInTheDocument();
+    // 未配置的字段不得出现在下拉
+    expect(screen.queryByText("优先级")).not.toBeInTheDocument();
+    fireEvent.click(screen.getByText("状态"));
+    expect(onChange).toHaveBeenCalledWith([
+      expect.objectContaining({ property: "state", operator: "is", value: "backlog" }),
+    ]);
+  });
+
+  it("全部字段已添加时禁用添加入口", () => {
+    renderRow(
+      <filtersModule.FilterRow
+        conditions={[
+          makeCondition(),
+          makeCondition({ id: "c2", property: "state", operator: "is", value: "backlog" }),
+        ]}
+        onChange={vi.fn()}
+        onClearAll={() => {}}
+      />,
+    );
+    const addButtons = screen.getAllByRole("button", { name: /添加条件/ });
+    expect(addButtons[0]).toBeDisabled();
+  });
+
+  it("条件 chip 渲染字段|操作符|值三段与 X，点 X 移除该条件", () => {
+    const onChange = vi.fn();
+    const { container } = renderRow(
+      <filtersModule.FilterRow conditions={[makeCondition()]} onChange={onChange} onClearAll={() => {}} />,
+    );
+    expect(screen.getByText("标题")).toBeInTheDocument();
+    expect(screen.getByText("包含")).toBeInTheDocument();
+    expect(screen.getByTestId("filter-value")).toHaveTextContent("登录");
+    const chip = screen.getByText("标题").closest("div");
+    expect(chip).not.toBeNull();
+    const buttons = chip!.querySelectorAll("button");
+    const removeButton = buttons[buttons.length - 1];
+    fireEvent.click(removeButton);
+    expect(onChange).toHaveBeenCalledWith([]);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("is_empty 操作符隐藏值段（渲染器不被调用）", () => {
+    renderRow(
+      <filtersModule.FilterRow
+        conditions={[makeCondition({ id: "c3", property: "state", operator: "is_empty", value: "" })]}
+        onChange={vi.fn()}
+        onClearAll={() => {}}
+      />,
+    );
+    expect(screen.getByText("状态")).toBeInTheDocument();
+    expect(screen.getByText("为空")).toBeInTheDocument();
+    expect(screen.queryByTestId("filter-value")).not.toBeInTheDocument();
+  });
+
+  it("存量脏数据 property 撞原型链键名（constructor）不崩并回落首配置", () => {
+    const onChange = vi.fn();
+    renderRow(
+      <filtersModule.FilterRow
+        conditions={[
+          // 模拟 deserializeFilters 的存量 JSON 输出：property 未经白名单校验，
+          // 直接 configs[key] 索引会沿原型链取到 Object.prototype.constructor
+          { id: "legacy", property: "constructor", operator: "is", value: "x" } as unknown as FilterCondition<TestKey>,
+        ]}
+        onChange={onChange}
+        onClearAll={() => {}}
+      />,
+    );
+    // chip 正常渲染：icon/operators/值段取自回落的首配置（而非 undefined 崩页）；
+    // 显示 label 沿用原 .find() 语义回落原始键名（PropertySelect ?? current）
+    expect(screen.getByText("constructor")).toBeInTheDocument();
+    expect(screen.getByText("是")).toBeInTheDocument();
+    expect(screen.getByTestId("filter-value")).toHaveTextContent("x");
+    const chip = screen.getByText("constructor").closest("div");
+    const buttons = chip!.querySelectorAll("button");
+    fireEvent.click(buttons[buttons.length - 1]);
+    expect(onChange).toHaveBeenCalledWith([]);
+  });
+
+  it("createDefaultCondition 对原型链键名回落首配置而非脏值", () => {
+    const condition = createDefaultCondition(CONFIGS, "constructor" as TestKey);
+    expect(condition.property).toBe("constructor");
+    expect(condition.operator).toBe("is"); // 首配置 state 的 defaultOperator
+    expect(condition.value).toBe("backlog"); // 首配置 state 的 defaultValue
+  });
+
+  it("FilterToggle 有条件时计数 badge + 激活高亮，无条件时无 badge 且灰显", () => {
+    const active = renderRow(
+      <filtersModule.FilterToggle
+        visible={false}
+        conditions={[makeCondition(), makeCondition({ id: "c2" })]}
+        onToggle={() => {}}
+      />,
+    );
+    const button = screen.getByRole("button");
+    expect(button.className).toContain("border-primary/50");
+    expect(button.className).toContain("bg-primary/5");
+    expect(button.className).toContain("text-primary");
+    const badge = active.container.querySelector("span.rounded-full");
+    expect(badge?.textContent).toBe("2");
+    cleanup();
+
+    const inactive = renderRow(
+      <filtersModule.FilterToggle visible={false} conditions={[]} onToggle={() => {}} />,
+    );
+    expect(inactive.container.querySelector("span.rounded-full")).toBeNull();
+    const idleButton = inactive.container.querySelector("button");
+    expect(idleButton?.className).toContain("text-muted-foreground");
+  });
+});

package/src/components/shared-kit/list-kit/filters/__tests__/types.test.ts

@@ -0,0 +1,133 @@
+// 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 } from "vitest";
+import {
+  serializeFilters,
+  deserializeFilters,
+  type FilterCondition,
+} from "../types";
+import {
+  serializeFilters as storySerialize,
+  deserializeFilters as storyDeserialize,
+  type FilterCondition as StoryFilterCondition,
+} from "@/components/story/filters/field-configs";
+import {
+  serializeFilters as bugSerialize,
+  deserializeFilters as bugDeserialize,
+  type FilterCondition as BugFilterCondition,
+} from "@/components/bug/filters/field-configs";
+
+// ---------------------------------------------------------------------------
+// fixture：忠实 DB 形状（story_filter_views.filters / bug_filter_views.filters
+// Json 列存 FilterCondition 数组，元素恰为 id/property/operator/value 四字段）。
+//
+// story 首条取自本地库真实行（psql 实捞，story_filter_views 最新一条）：
+//   [{"id": "fc_1792211234841_1", "value": "backlog", "operator": "is", "property": "state"}]
+// 其余条件按序列化格式构造（多条件 + is_empty + 逗号多值，与
+// filter-value-input 的编码一致：多选 join(",")、between 为 "from,to"、
+// is_empty 为空串）。id 沿用 generateConditionId 的 fc_<ts>_<n> 格式。
+// ---------------------------------------------------------------------------
+
+const STORY_RAW_DB_JSON =
+  '[{"id": "fc_1792211234841_1", "value": "backlog", "operator": "is", "property": "state"}]';
+
+const storyFixture: StoryFilterCondition[] = [
+  { id: "fc_1792211234841_1", property: "state", operator: "is", value: "backlog" },
+  { id: "fc_1792211234841_2", property: "assigneeId", operator: "is_empty", value: "" },
+  { id: "fc_1792211234841_3", property: "labelId", operator: "is_any_of", value: "cmd1label0001x8k2,cmd1label0002x9m3" },
+  { id: "fc_1792211234841_4", property: "createdDate", operator: "between", value: "2026-01-01,2026-01-31" },
+  { id: "fc_1792211234841_5", property: "title", operator: "contains", value: "登录" },
+];
+
+// serializeFilters 产出的存储形状（键序 id/property/operator/value，JSON.stringify 无空格）
+const STORY_STORED_JSON =
+  '[{"id":"fc_1792211234841_1","property":"state","operator":"is","value":"backlog"},' +
+  '{"id":"fc_1792211234841_2","property":"assigneeId","operator":"is_empty","value":""},' +
+  '{"id":"fc_1792211234841_3","property":"labelId","operator":"is_any_of","value":"cmd1label0001x8k2,cmd1label0002x9m3"},' +
+  '{"id":"fc_1792211234841_4","property":"createdDate","operator":"between","value":"2026-01-01,2026-01-31"},' +
+  '{"id":"fc_1792211234841_5","property":"title","operator":"contains","value":"登录"}]';
+
+// bug：规格 9 字段全量 + lastOccurAt between（id 沿用 bug generateConditionId 的 bfc_ 前缀）
+const bugFixture: BugFilterCondition[] = [
+  { id: "bfc_1792211234841_1", property: "title", operator: "contains", value: "超时" },
+  { id: "bfc_1792211234841_2", property: "state", operator: "is", value: "open" },
+  { id: "bfc_1792211234841_3", property: "severity", operator: "is_not", value: "low" },
+  { id: "bfc_1792211234841_4", property: "assigneeId", operator: "is_not_empty", value: "" },
+  { id: "bfc_1792211234841_5", property: "labelId", operator: "is_any_of", value: "cmd1label0001x8k2,cmd1label0002x9m3" },
+  { id: "bfc_1792211234841_6", property: "source", operator: "is", value: "manual" },
+  { id: "bfc_1792211234841_7", property: "env", operator: "is", value: "prod" },
+  { id: "bfc_1792211234841_8", property: "createdDate", operator: "on_or_after", value: "2026-10-01" },
+  { id: "bfc_1792211234841_9", property: "lastOccurAt", operator: "between", value: "2026-09-01,2026-09-30" },
+];
+
+describe("list-kit/filters types 序列化兼容", () => {
+  it("story fixture：serialize 输出与存量存储形状逐字节一致", () => {
+    expect(serializeFilters(storyFixture)).toBe(STORY_STORED_JSON);
+  });
+
+  it("story fixture：round-trip 深相等（多条件 + is_empty + 逗号多值）", () => {
+    const roundTripped = deserializeFilters(serializeFilters(storyFixture));
+    expect(roundTripped).toEqual(storyFixture);
+  });
+
+  it("story 真实 DB 行（jsonb 键序 id/value/operator/property）可解析且语义相等", () => {
+    expect(deserializeFilters(STORY_RAW_DB_JSON)).toEqual([
+      { id: "fc_1792211234841_1", property: "state", operator: "is", value: "backlog" },
+    ]);
+  });
+
+  it("bug fixture：9 字段全量（含 lastOccurAt between）round-trip 深相等", () => {
+    const serialized = bugSerialize(bugFixture);
+    expect(serialized).not.toBeUndefined();
+    const roundTripped = bugDeserialize(serialized);
+    expect(roundTripped).toEqual(bugFixture);
+    expect(roundTripped.some((c) => c.property === "lastOccurAt" && c.operator === "between")).toBe(true);
+    expect(new Set(roundTripped.map((c) => c.property)).size).toBe(9);
+  });
+
+  it("边界语义保持：undefined/空串/列默认 {}/坏 JSON/缺 property 或 operator 的条目", () => {
+    expect(serializeFilters([])).toBeUndefined();
+    expect(deserializeFilters(undefined)).toEqual([]);
+    expect(deserializeFilters("")).toEqual([]);
+    expect(deserializeFilters("{}")).toEqual([]); // 列默认值 "{}"（非数组）→ 空
+    expect(deserializeFilters("not-json")).toEqual([]);
+    expect(
+      deserializeFilters(
+        JSON.stringify([
+          { id: "x", property: "state", operator: "is", value: "open" },
+          { id: "y", operator: "is", value: "open" }, // 缺 property → 过滤
+          { id: "z", property: "state", value: "open" }, // 缺 operator → 过滤
+        ]),
+      ),
+    ).toEqual([{ id: "x", property: "state", operator: "is", value: "open" }]);
+  });
+
+  it("story/bug 侧与共享层是同一实现（搬移而非复制）", () => {
+    expect(serializeFilters).toBe(storySerialize);
+    expect(deserializeFilters).toBe(storyDeserialize);
+    expect(serializeFilters).toBe(bugSerialize);
+    expect(deserializeFilters).toBe(bugDeserialize);
+  });
+
+  it("FilterCondition 对 story/bug 各自的 key 联合保持窄化赋值兼容", () => {
+    // 共享层 K 泛型化后，两侧窄化条件数组仍可直接传入共享 serializeFilters
+    const storyConditions: FilterCondition<string>[] = storyFixture;
+    const roundTripped = deserializeFilters(serializeFilters(storyConditions));
+    expect(roundTripped).toEqual(storyFixture);
+  });
+});