dreampiler/kandev
1
0
Fork 0
Code Issues 43 Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: add github repo filter search (#1476)

Browse Source
This commit is contained in:
Carlos Florêncio
2026-06-23 16:56:30 +01:00
committed by GitHub
parent 6126edb203
commit 9b00a16bbe
6 changed files with 189 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/combobox.tsx
+8 -1
View File
@@ -46,6 +46,7 @@ interface ComboboxProps {
triggerClassName?: string;
showSearch?: boolean;
testId?: string;
dropdownTestId?: string;
popoverSide?: "top" | "right" | "bottom" | "left";
popoverAlign?: "start" | "center" | "end";
/** When true, the trigger always renders the plain label text instead of renderLabel. */
@@ -147,6 +148,7 @@ export const Combobox = memo(function Combobox({
triggerClassName,
showSearch = true,
testId,
dropdownTestId,
popoverSide,
popoverAlign = "start",
plainTrigger = false,
@@ -201,7 +203,12 @@ export const Combobox = memo(function Combobox({
align={popoverAlign}
portal={false}
>
<Command value={highlighted} onValueChange={setHighlighted} filter={filter}>
<Command
value={highlighted}
onValueChange={setHighlighted}
filter={filter}
data-testid={dropdownTestId}
>
{dropdownLabel || headerAction ? (
<div className="text-muted-foreground flex items-center justify-between gap-2 px-2 py-1 text-xs border-b">
<span>{dropdownLabel}</span>
apps/web/components/github/my-github/list-toolbar.test.tsx
+76
View File
@@ -0,0 +1,76 @@
import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import { afterEach, describe, expect, it, vi } from "vitest";
import { TooltipProvider } from "@kandev/ui/tooltip";
import { ListToolbar } from "./list-toolbar";
afterEach(() => cleanup());
const ALL_REPOS_LABEL = "All repos";
const REPO_SEARCH_PLACEHOLDER = "Filter repositories...";
const REPO_DROPDOWN_TEST_ID = "github-repo-filter-dropdown";
const KANDEV_REPO = "kdlbs/kandev";
function renderToolbar({ repoFilter = "" }: { repoFilter?: string } = {}) {
const onRepoFilterChange = vi.fn();
render(
<TooltipProvider>
<ListToolbar
title="Review requested"
count={2}
loading={false}
lastFetchedAt={null}
customQuery="is:open"
committedQuery="is:open"
onCustomQueryChange={vi.fn()}
onCommitCustomQuery={vi.fn()}
repoFilter={repoFilter}
onRepoFilterChange={onRepoFilterChange}
repoOptions={["acme/api", KANDEV_REPO]}
onRefresh={vi.fn()}
/>
</TooltipProvider>,
);
return { onRepoFilterChange };
}
describe("ListToolbar", () => {
it("opens the repository filter with a search input", async () => {
renderToolbar();
fireEvent.click(screen.getByText(ALL_REPOS_LABEL));
expect(await screen.findByPlaceholderText(REPO_SEARCH_PLACEHOLDER)).toBeTruthy();
expect(screen.getByTestId(REPO_DROPDOWN_TEST_ID)).toBeTruthy();
expect(screen.getByText(KANDEV_REPO)).toBeTruthy();
});
it("filters and selects a repository", async () => {
const { onRepoFilterChange } = renderToolbar();
fireEvent.click(screen.getByText(ALL_REPOS_LABEL));
fireEvent.change(await screen.findByPlaceholderText(REPO_SEARCH_PLACEHOLDER), {
target: { value: "kdlbs" },
});
fireEvent.click(await screen.findByRole("option", { name: KANDEV_REPO }));
expect(onRepoFilterChange).toHaveBeenCalledWith(KANDEV_REPO);
});
it("clears the repository filter from the All repos option", async () => {
const { onRepoFilterChange } = renderToolbar({ repoFilter: KANDEV_REPO });
fireEvent.click(screen.getByText(KANDEV_REPO));
fireEvent.click(await screen.findByRole("option", { name: ALL_REPOS_LABEL }));
expect(onRepoFilterChange).toHaveBeenCalledWith("");
});
it("preserves the repository filter when the selected repository is reselected", async () => {
const { onRepoFilterChange } = renderToolbar({ repoFilter: KANDEV_REPO });
fireEvent.click(screen.getByText(KANDEV_REPO));
fireEvent.click(await screen.findByRole("option", { name: KANDEV_REPO }));
expect(onRepoFilterChange).not.toHaveBeenCalled();
});
});
apps/web/components/github/my-github/list-toolbar.tsx
+25 -18
View File
@@ -1,9 +1,10 @@
"use client";
import { useMemo } from "react";
import { IconRefresh } from "@tabler/icons-react";
import { Button } from "@kandev/ui/button";
import { Input } from "@kandev/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kandev/ui/select";
import { Combobox, type ComboboxOption } from "@/components/combobox";
import { cn } from "@/lib/utils";
import { formatRelativeTime } from "@/lib/utils";
@@ -57,6 +58,13 @@ function RefreshControls({
);
}
function buildRepoFilterOptions(repoOptions: string[]): ComboboxOption[] {
return [
{ value: ALL_REPOS, label: "All repos", keywords: ["all", "repositories", "repos"] },
...repoOptions.map((key) => ({ value: key, label: key, keywords: [key] })),
];
}
export function ListToolbar({
title,
count,
@@ -73,6 +81,7 @@ export function ListToolbar({
}: ListToolbarProps) {
const selectValue = repoFilter || ALL_REPOS;
const dirty = customQuery !== committedQuery;
const repoFilterOptions = useMemo(() => buildRepoFilterOptions(repoOptions), [repoOptions]);
return (
<div className="px-4 sm:px-6 py-2.5 border-b shrink-0 flex flex-col md:flex-row md:items-center md:flex-wrap gap-2 md:gap-3">
<div className="flex items-center gap-2 min-w-0">
@@ -93,24 +102,22 @@ export function ListToolbar({
/>
</div>
</div>
<Select
<Combobox
value={selectValue}
onValueChange={(v) => onRepoFilterChange(v === ALL_REPOS ? "" : v)}
>
<SelectTrigger className="w-full md:w-[220px] h-8 cursor-pointer">
<SelectValue placeholder="All repos" />
</SelectTrigger>
<SelectContent>
<SelectItem value={ALL_REPOS} className="cursor-pointer">
All repos
</SelectItem>
{repoOptions.map((key) => (
<SelectItem key={key} value={key} className="cursor-pointer">
{key}
</SelectItem>
))}
</SelectContent>
</Select>
onValueChange={(v) => {
// Combobox signals "toggle off" with ""; All repos is the explicit clear path.
if (!v) return;
onRepoFilterChange(v === ALL_REPOS ? "" : v);
}}
options={repoFilterOptions}
placeholder="All repos"
searchPlaceholder="Filter repositories..."
emptyMessage="No repositories found."
triggerClassName="w-full md:w-[220px] h-8 border border-input bg-background hover:bg-secondary/50 px-2 py-1.5 text-xs/relaxed"
className="md:min-w-[360px]"
testId="github-repo-filter-trigger"
dropdownTestId="github-repo-filter-dropdown"
/>
<div className="w-full md:flex-1 md:min-w-[240px] relative">
<Input
value={customQuery}
apps/web/e2e/pages/mobile-github-page.ts
+4
View File
@@ -5,6 +5,8 @@ export class MobileGitHubPage {
readonly mobileSidebar: Locator;
readonly inlineSidebar: Locator;
readonly toolbarTitle: Locator;
readonly repoFilterTrigger: Locator;
readonly repoSearchInput: Locator;
constructor(private page: Page) {
this.mobileMenuButton = page.getByTestId("github-mobile-menu-button");
@@ -13,6 +15,8 @@ export class MobileGitHubPage {
// mobile, where the presets live in the hamburger sheet instead.
this.inlineSidebar = page.getByTestId("github-presets-scope-bar");
this.toolbarTitle = page.getByTestId("github-list-toolbar-title");
this.repoFilterTrigger = page.getByTestId("github-repo-filter-trigger");
this.repoSearchInput = page.getByTestId("github-repo-filter-dropdown").getByRole("combobox");
}
async goto() {
apps/web/e2e/tests/github/github-scope-bar.spec.ts
+39
View File
@@ -44,4 +44,43 @@ test.describe("Desktop /github scope bar", () => {
await scopeBar.getByRole("button", { name: "Issues" }).click();
await expect(title).toContainText("Assigned");
});
test("repo filter menu can be searched", async ({ testPage, apiClient }) => {
await apiClient.mockGitHubReset();
await apiClient.mockGitHubSetUser("test-user");
await apiClient.mockGitHubAddPRs([
{
number: 21,
title: "Searchable repo filter PR",
state: "open",
head_branch: "feat/search",
base_branch: "main",
author_login: "test-user",
repo_owner: "testorg",
repo_name: "testrepo",
},
{
number: 22,
title: "Searchable repo filter second PR",
state: "open",
head_branch: "feat/other",
base_branch: "main",
author_login: "test-user",
repo_owner: "anotherorg",
repo_name: "secondrepo",
},
]);
await testPage.goto("/github");
await testPage.getByTestId("github-repo-filter-trigger").click();
const search = testPage.getByTestId("github-repo-filter-dropdown").getByRole("combobox");
await expect(search).toBeVisible();
await search.fill("testorg");
await testPage.getByRole("option", { name: "testorg/testrepo" }).click();
await expect(testPage.getByTestId("github-repo-filter-trigger")).toContainText(
"testorg/testrepo",
);
});
});
apps/web/e2e/tests/github/mobile-github-sidebar.spec.ts
+37
View File
@@ -45,4 +45,41 @@ test.describe("Mobile /github sidebar", () => {
await expect(page.mobileSidebar).toBeHidden();
await expect(page.toolbarTitle).toContainText("Mentions");
});
test("repo filter menu can be searched", async ({ testPage, apiClient }) => {
await apiClient.mockGitHubReset();
await apiClient.mockGitHubSetUser("test-user");
await apiClient.mockGitHubAddPRs([
{
number: 210,
title: "Mobile repo search PR",
state: "open",
head_branch: "feat/mobile-search",
base_branch: "main",
author_login: "test-user",
repo_owner: "testorg",
repo_name: "testrepo",
},
{
number: 211,
title: "Mobile repo search second PR",
state: "open",
head_branch: "feat/mobile-other",
base_branch: "main",
author_login: "test-user",
repo_owner: "anotherorg",
repo_name: "secondrepo",
},
]);
const page = new MobileGitHubPage(testPage);
await page.goto();
await page.repoFilterTrigger.tap();
await expect(page.repoSearchInput).toBeVisible();
await page.repoSearchInput.fill("testorg");
await testPage.getByRole("option", { name: "testorg/testrepo" }).tap();
await expect(page.repoFilterTrigger).toContainText("testorg/testrepo");
});
});