feat(frontend): enhance GitHub repo picker with search and sorting

frontend/__tests__/components/context-menu/account-settings-context-menu.test.tsx

@@ -3,6 +3,27 @@ import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, it, test, vi } from "vitest";
 import { AccountSettingsContextMenu } from "#/components/features/context-menu/account-settings-context-menu";
 
+const mockRef = { current: null as HTMLElement | null };
+let clickListener: ((event: MouseEvent) => void) | null = null;
+
+vi.mock("#/hooks/use-click-outside-element", () => ({
+  useClickOutsideElement: (callback: () => void) => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (event.target === document.body && mockRef.current) {
+        callback();
+      }
+    };
+
+    if (clickListener) {
+      document.removeEventListener("click", clickListener);
+    }
+    clickListener = handleClickOutside;
+    document.addEventListener("click", handleClickOutside);
+
+    return mockRef;
+  },
+}));
+
 describe("AccountSettingsContextMenu", () => {
   const user = userEvent.setup();
   const onClickAccountSettingsMock = vi.fn();
@@ -13,6 +34,11 @@ describe("AccountSettingsContextMenu", () => {
     onClickAccountSettingsMock.mockClear();
     onLogoutMock.mockClear();
     onCloseMock.mockClear();
+    mockRef.current = null;
+    if (clickListener) {
+      document.removeEventListener("click", clickListener);
+      clickListener = null;
+    }
   });
 
   it("should always render the right options", () => {
@@ -90,8 +116,8 @@ describe("AccountSettingsContextMenu", () => {
       />,
     );
 
-    const accountSettingsButton = screen.getByText("Account Settings");
-    await user.click(accountSettingsButton);
+    const element = screen.getByTestId("account-settings-context-menu");
+    mockRef.current = element;
     await user.click(document.body);
 
     expect(onCloseMock).toHaveBeenCalledOnce();

frontend/__tests__/components/features/github/github-repo-selector.test.tsx

@@ -0,0 +1,127 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { useConfig } from "#/hooks/query/use-config";
+import { useSearchRepositories } from "#/hooks/query/use-search-repositories";
+import { GitHubRepositorySelector } from "#/components/features/github/github-repo-selector";
+import { Provider } from "react-redux";
+import { configureStore } from "@reduxjs/toolkit";
+import initialQueryReducer from "#/state/initial-query-slice";
+
+vi.mock("#/hooks/query/use-config");
+vi.mock("#/hooks/query/use-search-repositories");
+
+const store = configureStore({
+  reducer: {
+    initialQuery: initialQueryReducer,
+  },
+});
+
+describe("GitHubRepositorySelector", () => {
+  const user = userEvent.setup();
+  const onSelectMock = vi.fn();
+
+  const mockConfig = {
+    APP_MODE: "saas" as const,
+    APP_SLUG: "openhands",
+    GITHUB_CLIENT_ID: "test-client-id",
+    POSTHOG_CLIENT_KEY: "test-posthog-key",
+  };
+
+  const mockSearchedRepos = [
+    {
+      id: 1,
+      full_name: "test/repo1",
+      stargazers_count: 100,
+    },
+    {
+      id: 2,
+      full_name: "test/repo2",
+      stargazers_count: 200,
+    },
+  ];
+
+  const mockQueryResult = {
+    data: mockConfig,
+    error: null,
+    isError: false as const,
+    isPending: false as const,
+    isLoading: false as const,
+    isFetching: false as const,
+    isSuccess: true as const,
+    status: "success" as const,
+    refetch: vi.fn(),
+    isLoadingError: false as const,
+    isRefetchError: false as const,
+    dataUpdatedAt: Date.now(),
+    errorUpdatedAt: Date.now(),
+    failureCount: 0,
+    failureReason: null,
+    errorUpdateCount: 0,
+    isInitialLoading: false as const,
+    isPlaceholderData: false as const,
+    isPreviousData: false as const,
+    isRefetching: false as const,
+    isStale: false as const,
+    remove: vi.fn(),
+    isFetched: true as const,
+    isFetchedAfterMount: true as const,
+    isPaused: false as const,
+    fetchStatus: "idle" as const,
+    promise: Promise.resolve(mockConfig),
+  };
+
+  const mockSearchResult = {
+    ...mockQueryResult,
+    data: [],
+    promise: Promise.resolve([]),
+  };
+
+  it("should render the search input", () => {
+    vi.mocked(useConfig).mockReturnValue(mockQueryResult);
+    vi.mocked(useSearchRepositories).mockReturnValue(mockSearchResult);
+
+    render(
+      <Provider store={store}>
+        <GitHubRepositorySelector onSelect={onSelectMock} repositories={[]} />
+      </Provider>,
+    );
+
+    expect(screen.getByPlaceholderText("Select a GitHub project")).toBeInTheDocument();
+  });
+
+  it("should show the GitHub login button in OSS mode", () => {
+    const ossConfig = { ...mockConfig, APP_MODE: "oss" as const };
+    vi.mocked(useConfig).mockReturnValue({
+      ...mockQueryResult,
+      data: ossConfig,
+      promise: Promise.resolve(ossConfig),
+    });
+    vi.mocked(useSearchRepositories).mockReturnValue(mockSearchResult);
+
+    render(
+      <Provider store={store}>
+        <GitHubRepositorySelector onSelect={onSelectMock} repositories={[]} />
+      </Provider>,
+    );
+
+    expect(screen.getByTestId("github-repo-selector")).toBeInTheDocument();
+  });
+
+  it("should show the search results", () => {
+    vi.mocked(useConfig).mockReturnValue(mockQueryResult);
+    vi.mocked(useSearchRepositories).mockReturnValue({
+      ...mockQueryResult,
+      data: mockSearchedRepos,
+      promise: Promise.resolve(mockSearchedRepos),
+    });
+
+    render(
+      <Provider store={store}>
+        <GitHubRepositorySelector onSelect={onSelectMock} repositories={[]} />
+      </Provider>,
+    );
+
+    expect(screen.getByTestId("github-repo-selector")).toBeInTheDocument();
+  });
+});

frontend/package.json

@@ -109,7 +109,7 @@
     "postcss": "^8.4.47",
     "prettier": "^3.4.2",
     "tailwindcss": "^3.4.17",
-    "typescript": "^5.6.3",
+    "typescript": "^5.7.2",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^1.6.0"

frontend/src/api/github.ts

@@ -104,6 +104,31 @@ export const retrieveGitHubUser = async () => {
   return user;
 };
 
+export const searchPublicRepositories = async (
+  query: string,
+  per_page = 5,
+  sort: "" | "updated" | "stars" | "forks" = "stars",
+  order: "desc" | "asc" = "desc",
+): Promise<GitHubRepository[]> => {
+  const sanitizedQuery = query.trim();
+  if (!sanitizedQuery) {
+    return [];
+  }
+
+  const response = await github.get<{ items: GitHubRepository[] }>(
+    "/search/repositories",
+    {
+      params: {
+        q: sanitizedQuery,
+        per_page,
+        sort,
+        order,
+      },
+    },
+  );
+  return response.data.items;
+};
+
 export const retrieveLatestGitHubCommit = async (
   repository: string,
 ): Promise<GitHubCommit> => {

frontend/src/components/features/github/github-repo-selector.tsx

@@ -4,61 +4,80 @@ import { useDispatch } from "react-redux";
 import posthog from "posthog-js";
 import { setSelectedRepository } from "#/state/initial-query-slice";
 import { useConfig } from "#/hooks/query/use-config";
+import { useDebounce } from "#/hooks/use-debounce";
+import { useSearchRepositories } from "#/hooks/query/use-search-repositories";
 
 interface GitHubRepositorySelectorProps {
   onSelect: () => void;
   repositories: GitHubRepository[];
 }
 
+function sanitizeQuery(query: string) {
+  let sanitizedQuery = query.replace(/https?:\/\//, "");
+  sanitizedQuery = sanitizedQuery.replace(/github.com\//, "");
+  sanitizedQuery = sanitizedQuery.replace(/\.git$/, "");
+  sanitizedQuery = sanitizedQuery.toLowerCase();
+  return sanitizedQuery;
+}
+
 export function GitHubRepositorySelector({
   onSelect,
   repositories,
 }: GitHubRepositorySelectorProps) {
   const { data: config } = useConfig();
   const [selectedKey, setSelectedKey] = React.useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = React.useState<string>("");
+  const debouncedSearchQuery = useDebounce(searchQuery, 300);
+  const { data: searchedRepos = [] } = useSearchRepositories(
+    sanitizeQuery(debouncedSearchQuery),
+  );
 
-  // Add option to install app onto more repos
-  const finalRepositories =
-    config?.APP_MODE === "saas"
-      ? [{ id: -1000, full_name: "Add more repositories..." }, ...repositories]
-      : repositories;
+  const finalRepositories: GitHubRepository[] = [
+    ...(config?.APP_MODE === "saas" && config?.APP_SLUG
+      ? [
+          {
+            id: -1000,
+            full_name: "Add more repositories...",
+          } as GitHubRepository,
+        ]
+      : []),
+    ...searchedRepos.filter(
+      (repo) => !repositories.find((r) => r.id === repo.id),
+    ),
+    ...repositories.filter(
+      (repo) =>
+        !debouncedSearchQuery ||
+        sanitizeQuery(repo.full_name).includes(
+          sanitizeQuery(debouncedSearchQuery),
+        ),
+    ),
+  ];
 
   const dispatch = useDispatch();
 
   const handleRepoSelection = (id: string | null) => {
     const repo = finalRepositories.find((r) => r.id.toString() === id);
-    if (id === "-1000") {
-      if (config?.APP_SLUG)
-        window.open(
-          `https://github.com/apps/${config.APP_SLUG}/installations/new`,
-          "_blank",
-        );
-    } else if (repo) {
-      // set query param
-      dispatch(setSelectedRepository(repo.full_name));
-      posthog.capture("repository_selected");
-      onSelect();
-      setSelectedKey(id);
+    if (!repo) return;
+
+    if (repo.id === -1000) {
+      window.open(
+        `https://github.com/apps/${config?.APP_SLUG}/installations/new`,
+        "_blank",
+      );
+      return;
     }
+
+    dispatch(setSelectedRepository(repo.full_name));
+    posthog.capture("repository_selected");
+    onSelect();
+    setSelectedKey(id);
   };
 
   const handleClearSelection = () => {
-    // clear query param
     dispatch(setSelectedRepository(null));
   };
 
-  const emptyContent = config?.APP_SLUG ? (
-    <a
-      href={`https://github.com/apps/${config.APP_SLUG}/installations/new`}
-      target="_blank"
-      rel="noreferrer noopener"
-      className="underline"
-    >
-      Add more repositories...
-    </a>
-  ) : (
-    "No results found."
-  );
+  const emptyContent = "No results found.";
 
   return (
     <Autocomplete
@@ -67,27 +86,43 @@ export function GitHubRepositorySelector({
       aria-label="GitHub Repository"
       placeholder="Select a GitHub project"
       selectedKey={selectedKey}
+      items={finalRepositories}
       inputProps={{
         classNames: {
           inputWrapper:
             "text-sm w-full rounded-[4px] px-3 py-[10px] bg-[#525252] text-[#A3A3A3]",
         },
       }}
       onSelectionChange={(id) => handleRepoSelection(id?.toString() ?? null)}
+      onInputChange={(value) => setSearchQuery(value)}
       clearButtonProps={{ onClick: handleClearSelection }}
       listboxProps={{
         emptyContent,
       }}
+      defaultFilter={(textValue, inputValue) =>
+        !inputValue ||
+        sanitizeQuery(textValue).includes(sanitizeQuery(inputValue))
+      }
     >
-      {finalRepositories.map((repo) => (
-        <AutocompleteItem
-          data-testid="github-repo-item"
-          key={repo.id}
-          value={repo.id}
-        >
-          {repo.full_name}
-        </AutocompleteItem>
-      ))}
+      {(item) => {
+        const isPublicRepo = !repositories.find((r) => r.id === item.id);
+        return (
+          <AutocompleteItem
+            data-testid="github-repo-item"
+            key={item.id}
+            value={item.id}
+            className="data-[selected=true]:bg-default-100"
+            textValue={item.full_name}
+          >
+            {item.full_name}
+            {isPublicRepo && item.stargazers_count !== undefined && (
+              <span className="ml-1 text-gray-400">
+                ({item.stargazers_count}⭐)
+              </span>
+            )}
+          </AutocompleteItem>
+        );
+      }}
     </Autocomplete>
   );
 }