cf76a27488
* feat(web): normalize /gitlab page to match /github layout
Adds a presets sidebar (MR/Issue toggle, Inbox/Created groups, Saved
section), a top toolbar with project filter and custom-query input,
paginated MR/Issue lists, and a save-preset dialog backed by a
localStorage store at kandev:gitlab-presets:v1.
Replaces the bespoke tabbed layout and supersedes
hooks/domains/gitlab/use-user-search with the pagination-aware
useGitLabSearch under components/gitlab/my-gitlab/. Project filtering is
applied client-side since GitLab's global MR/issue endpoints have no
path_with_namespace qualifier. No backend changes — the controller
already accepts filter / custom_query / page / per_page.
* fix(web): address /gitlab review feedback
- Merge duplicate cn/formatRelativeTime imports in list-toolbar.
- Drop the generic T from useGitLabSearch — it always resolved to MR | Issue,
so the as-unknown-as double-cast was just hiding that. Now returns
Array<MR | Issue> directly and exposes rawTotal alongside total.
- When projectFilter is active, total reflects the client-side filtered
count instead of the server's unfiltered total so the toolbar badge and
pagination don't claim "47 results" while only 3 rows render.
- Save flow uses committedQuery, not the draft customQuery, so a preset
saved without pressing Enter matches what's actually displayed.
- Wrap mobile sidebar handlers in useCallback to keep props stable.
- Drop the unused refresh callback in useGitLabStatusFetch (no caller).
- Add hook-level tests for useSavedPresets save/remove/sync; use
resetKnownProjectsStore directly in the known-projects test.
* fix(web): address round-2 /gitlab review feedback
- useSavedPresets save/remove now read from localStorage on every call so a
concurrent write from another tab can't be silently overwritten by a stale
in-memory snapshot.
- Tighten persisted shape validation: customQuery, projectFilter, and
createdAt must all be strings (plus 3 regression tests).
- ResultsPagination clamps page to [1, totalPages] before deriving start/end
and prev/next state, so a stale out-of-range page doesn't render an
invalid range like "101–30 of 30" after a refresh that shrinks results.
- PresetsSidebar: ignore keydown bubbling from the nested delete button so
Enter/Space on delete doesn't also trigger row selection, and add an
aria-label to the icon-only delete control.
- Revert the hook's filtered-total policy: useGitLabSearch always returns
the raw server total now (so pagination can still navigate to later
pages). The page client owns the toolbar's displayedCount, computing
filtered.length only when a project filter is active.
* fix(web): drop dead gitlab preset re-exports, tighten save dialog deps
- Remove unused IconBug / IconPencil imports and the re-export from
presets.ts — no consumer imports them from this module.
- save-preset-dialog: inline the trimmed check inside handleSubmit so
canSubmit no longer needs to be in the deps array. ESLint exhaustive-
deps forced the previous duplication; inlining removes it cleanly.
* fix(web): null-safe response unwrap in useGitLabSearch
If the API returns null, the cast `(response as {mrs: ...}).mrs` would
crash before the `?? []` fallback could run. Optional-chain the cast so a
null payload yields an empty list, matching the existing total_count guard.
---------
Co-authored-by: Kandev Agent <agent@kandev.dev>
246 lines
7.9 KiB
TypeScript
246 lines
7.9 KiB
TypeScript
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
|
import { cleanup, renderHook, waitFor, act } from "@testing-library/react";
|
|
import { IconInbox } from "@tabler/icons-react";
|
|
import type { Issue, MR, MRSearchPage, IssueSearchPage } from "@/lib/types/gitlab";
|
|
import type { PresetOption } from "./presets";
|
|
|
|
const searchUserMRsMock = vi.fn<[unknown], Promise<MRSearchPage | null>>();
|
|
const searchUserIssuesMock = vi.fn<[unknown], Promise<IssueSearchPage | null>>();
|
|
|
|
vi.mock("@/lib/api/domains/gitlab-api", () => ({
|
|
searchUserMRs: (args: unknown) => searchUserMRsMock(args),
|
|
searchUserIssues: (args: unknown) => searchUserIssuesMock(args),
|
|
}));
|
|
|
|
import { pickFilter, useGitLabSearch } from "./use-gitlab-search";
|
|
|
|
afterEach(() => cleanup());
|
|
|
|
const PRESET_REVIEW = "review_requested";
|
|
const PRESET_ASSIGNED = "assigned";
|
|
const CUSTOM_QUERY = "labels=bug";
|
|
|
|
const PRESETS: PresetOption[] = [
|
|
{
|
|
value: PRESET_REVIEW,
|
|
label: "Review requested",
|
|
filter: PRESET_REVIEW,
|
|
group: "inbox",
|
|
icon: IconInbox,
|
|
},
|
|
{
|
|
value: PRESET_ASSIGNED,
|
|
label: "Assigned",
|
|
filter: "assigned_to_me",
|
|
group: "inbox",
|
|
icon: IconInbox,
|
|
},
|
|
];
|
|
|
|
const EMPTY_PAGE: MRSearchPage = { mrs: [], total_count: 0, page: 1, per_page: 25 };
|
|
|
|
describe("pickFilter", () => {
|
|
it("uses preset filter when custom query is empty", () => {
|
|
expect(pickFilter(PRESETS, PRESET_REVIEW, "")).toEqual({
|
|
filter: PRESET_REVIEW,
|
|
customQuery: "",
|
|
});
|
|
});
|
|
|
|
it("routes custom query and drops preset filter", () => {
|
|
expect(pickFilter(PRESETS, PRESET_REVIEW, CUSTOM_QUERY)).toEqual({
|
|
filter: "",
|
|
customQuery: CUSTOM_QUERY,
|
|
});
|
|
});
|
|
|
|
it("trims whitespace-only custom query and falls back to preset", () => {
|
|
expect(pickFilter(PRESETS, PRESET_ASSIGNED, " ")).toEqual({
|
|
filter: "assigned_to_me",
|
|
customQuery: "",
|
|
});
|
|
});
|
|
|
|
it("falls back to empty filter when preset is unknown", () => {
|
|
expect(pickFilter(PRESETS, "missing", "")).toEqual({ filter: "", customQuery: "" });
|
|
});
|
|
});
|
|
|
|
function fakeMR(overrides: Partial<MR> = {}): MR {
|
|
return {
|
|
id: 1,
|
|
iid: 1,
|
|
project_id: 1,
|
|
title: "",
|
|
url: "",
|
|
web_url: "",
|
|
state: "opened",
|
|
head_branch: "feat",
|
|
head_sha: "",
|
|
base_branch: "main",
|
|
author_username: "alice",
|
|
project_namespace: "acme",
|
|
project_path: "acme/api",
|
|
body: "",
|
|
draft: false,
|
|
merge_status: "",
|
|
has_conflicts: false,
|
|
additions: 0,
|
|
deletions: 0,
|
|
reviewers: [],
|
|
assignees: [],
|
|
created_at: "",
|
|
updated_at: "",
|
|
...overrides,
|
|
};
|
|
}
|
|
|
|
function fakeIssue(overrides: Partial<Issue> = {}): Issue {
|
|
return {
|
|
id: 1,
|
|
iid: 1,
|
|
project_id: 1,
|
|
title: "",
|
|
body: "",
|
|
url: "",
|
|
web_url: "",
|
|
state: "opened",
|
|
author_username: "alice",
|
|
project_namespace: "acme",
|
|
project_path: "acme/api",
|
|
labels: [],
|
|
assignees: [],
|
|
created_at: "",
|
|
updated_at: "",
|
|
...overrides,
|
|
};
|
|
}
|
|
|
|
function resetMocks() {
|
|
searchUserMRsMock.mockReset();
|
|
searchUserIssuesMock.mockReset();
|
|
}
|
|
|
|
describe("useGitLabSearch — fetch wiring", () => {
|
|
beforeEach(resetMocks);
|
|
|
|
it("forwards preset filter to MR API", async () => {
|
|
searchUserMRsMock.mockResolvedValue(EMPTY_PAGE);
|
|
renderHook(() => useGitLabSearch("mr", PRESETS, PRESET_REVIEW, ""));
|
|
await waitFor(() => expect(searchUserMRsMock).toHaveBeenCalled());
|
|
const args = searchUserMRsMock.mock.calls[0][0] as Record<string, unknown>;
|
|
expect(args.filter).toBe(PRESET_REVIEW);
|
|
expect(args.customQuery).toBe("");
|
|
expect(args.page).toBe(1);
|
|
});
|
|
|
|
it("forwards custom query and drops preset filter", async () => {
|
|
searchUserMRsMock.mockResolvedValue(EMPTY_PAGE);
|
|
renderHook(() => useGitLabSearch("mr", PRESETS, PRESET_REVIEW, CUSTOM_QUERY));
|
|
await waitFor(() => expect(searchUserMRsMock).toHaveBeenCalled());
|
|
const args = searchUserMRsMock.mock.calls[0][0] as Record<string, unknown>;
|
|
expect(args.filter).toBe("");
|
|
expect(args.customQuery).toBe(CUSTOM_QUERY);
|
|
});
|
|
|
|
it("dispatches to issues endpoint when kind is issue", async () => {
|
|
const issue = fakeIssue();
|
|
searchUserIssuesMock.mockResolvedValue({
|
|
issues: [issue],
|
|
total_count: 1,
|
|
page: 1,
|
|
per_page: 25,
|
|
});
|
|
const { result } = renderHook(() => useGitLabSearch("issue", PRESETS, PRESET_ASSIGNED, ""));
|
|
await waitFor(() => expect(result.current.loading).toBe(false));
|
|
expect(result.current.items).toEqual([issue]);
|
|
expect(searchUserMRsMock).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe("useGitLabSearch — state", () => {
|
|
beforeEach(resetMocks);
|
|
|
|
it("populates items and total on success", async () => {
|
|
const mr = fakeMR();
|
|
searchUserMRsMock.mockResolvedValue({ mrs: [mr], total_count: 1, page: 1, per_page: 25 });
|
|
const { result } = renderHook(() => useGitLabSearch("mr", PRESETS, PRESET_ASSIGNED, ""));
|
|
await waitFor(() => expect(result.current.loading).toBe(false));
|
|
expect(result.current.items).toEqual([mr]);
|
|
expect(result.current.total).toBe(1);
|
|
expect(result.current.error).toBeNull();
|
|
});
|
|
|
|
it("surfaces error message without items", async () => {
|
|
searchUserMRsMock.mockRejectedValue(new Error("boom"));
|
|
const { result } = renderHook(() => useGitLabSearch("mr", PRESETS, PRESET_ASSIGNED, ""));
|
|
await waitFor(() => expect(result.current.loading).toBe(false));
|
|
expect(result.current.error).toBe("boom");
|
|
expect(result.current.items).toEqual([]);
|
|
});
|
|
|
|
it("filters items by project_path client-side, total stays at server total", async () => {
|
|
const a = fakeMR({ project_path: "acme/api" });
|
|
const b = fakeMR({ project_path: "acme/web" });
|
|
searchUserMRsMock.mockResolvedValue({ mrs: [a, b], total_count: 99, page: 1, per_page: 25 });
|
|
const { result } = renderHook(() =>
|
|
useGitLabSearch("mr", PRESETS, PRESET_ASSIGNED, "", "acme/web"),
|
|
);
|
|
await waitFor(() => expect(result.current.loading).toBe(false));
|
|
expect(result.current.items.map((m) => m.project_path)).toEqual(["acme/web"]);
|
|
expect(result.current.rawItems.length).toBe(2);
|
|
// The hook returns the raw server total so pagination can still navigate to
|
|
// later pages that may contain more matches. Consumers compute a filtered
|
|
// display count from items.length when they want one.
|
|
expect(result.current.total).toBe(99);
|
|
});
|
|
});
|
|
|
|
describe("useGitLabSearch — pagination & sequencing", () => {
|
|
beforeEach(resetMocks);
|
|
|
|
it("resets page to 1 when preset changes", async () => {
|
|
searchUserMRsMock.mockResolvedValue(EMPTY_PAGE);
|
|
const { result, rerender } = renderHook(
|
|
({ p }: { p: string }) => useGitLabSearch("mr", PRESETS, p, ""),
|
|
{ initialProps: { p: PRESET_ASSIGNED } },
|
|
);
|
|
await waitFor(() => expect(result.current.loading).toBe(false));
|
|
act(() => result.current.setPage(3));
|
|
await waitFor(() => expect(result.current.page).toBe(3));
|
|
rerender({ p: PRESET_REVIEW });
|
|
await waitFor(() => expect(result.current.page).toBe(1));
|
|
});
|
|
|
|
it("drops stale responses when filter changes mid-flight", async () => {
|
|
let resolveFirst: (v: MRSearchPage) => void = () => {};
|
|
searchUserMRsMock.mockReturnValueOnce(
|
|
new Promise<MRSearchPage>((res) => {
|
|
resolveFirst = res;
|
|
}),
|
|
);
|
|
const second = fakeMR({ title: "second" });
|
|
searchUserMRsMock.mockResolvedValueOnce({
|
|
mrs: [second],
|
|
total_count: 1,
|
|
page: 1,
|
|
per_page: 25,
|
|
});
|
|
|
|
const { result, rerender } = renderHook(
|
|
({ p }: { p: string }) => useGitLabSearch("mr", PRESETS, p, ""),
|
|
{ initialProps: { p: PRESET_ASSIGNED } },
|
|
);
|
|
rerender({ p: PRESET_REVIEW });
|
|
await waitFor(() => expect(result.current.items).toEqual([second]));
|
|
resolveFirst({
|
|
mrs: [fakeMR({ title: "first" }), fakeMR()],
|
|
total_count: 2,
|
|
page: 1,
|
|
per_page: 25,
|
|
});
|
|
await new Promise((r) => setTimeout(r, 10));
|
|
expect(result.current.items).toEqual([second]);
|
|
});
|
|
});
|