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

rbren · 2024-12-24T12:53:14Z

This PR enhances the GitHub repository picker with the following features:

Add GitHub API search for public repos when user enters a query
Show stargazer count for searched repos
Keep repos sorted by pushed_at (most recent first)
Place searched repo at the top of the picker

To run this PR locally, use the following command:

docker run -it --rm   -p 3000:3000   -v /var/run/docker.sock:/var/run/docker.sock   --add-host host.docker.internal:host-gateway   -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:aab5ecb-nikolaik   --name openhands-app-aab5ecb   docker.all-hands.dev/all-hands-ai/openhands:aab5ecb

- Add GitHub API search for public repos when user enters a query - Show stargazer count for searched repos - Keep repos sorted by pushed_at (most recent first) - Place searched repo at the top of the picker

neubig

I tested this and the behavior of the search functionality is somewhat unintuitive. For instance, I did:

Lightning-AI/lit and it gave me a result of Lightning-AI/lit-llama (which has about 6000 stars) and then I continued typing Lightning-AI/litgpt and got Lightning-AI/litgpt (which has 10,000 stars). It seems that maybe it should display more than one result when it searces public repos, and it should sort in descending order of stars, given that stars are displayed in the interface.

openhands-agent · 2024-12-26T00:39:54Z

OpenHands started fixing the pr! You can monitor the progress here.

…and sorting

openhands-agent · 2024-12-26T00:43:44Z

OVERVIEW:
All issues appear to be successfully resolved. The changes implemented include:

Expanded search results (5 repos instead of 1)
Added popularity-based sorting (by stars)
Enhanced UI with multiple results and star counts
Preserved star count visibility for public repos

STATUS: ✅ FULLY RESOLVED
No remaining issues identified; changes successfully improve both functionality and user experience of the repository search feature.

amanape · 2024-12-26T12:20:46Z

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

+  React.useEffect(() => {
+    const searchPublicRepo = async () => {
+      const repos = await searchPublicRepositories(searchQuery);
+      setSearchedRepos(repos);
+    };
+
+    const debounceTimeout = setTimeout(searchPublicRepo, 300);
+    return () => clearTimeout(debounceTimeout);
+  }, [searchQuery]);


Could outsource logic into a useDebounce hook

Openhands fix success summary

The feedback has been successfully incorporated. The AI created a new custom hook called useDebounce and moved the debouncing logic out of the component into this reusable hook. This is exactly what was requested in the feedback, and it improves code reusability and separation of concerns. The hook was created in a new file at /workspace/frontend/src/hooks/use-debounce.ts, making it available for use across the application where needed.

This change follows React best practices by extracting common functionality into a custom hook, making the code more maintainable and reusable. The implementation also maintains all the existing functionality while improving the code structure.

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

amanape · 2024-12-26T12:53:03Z

frontend/src/types/github.d.ts

@@ -16,6 +16,8 @@ interface GitHubUser {
 interface GitHubRepository {
  id: number;
  full_name: string;
+  stargazers_count?: number;
+  fromPublicRepoSearch?: boolean;


You are modifying the root type for a flag we set in the component, this can cause issue down the line since we may try to access a property in some other area that does not exist (fromPublicRepoSearch). Instead, extend the existing type for frontend/src/components/features/github/github-repo-selector.tsx

interface GitHubRepositoryWithFlag extends GitHubRepository { fromPublicRepoSearch?: boolean; }

NOTE you'll also want to set the type of finalRepositories and searchedRepos state too

const [searchedRepos, setSearchedRepos] = React.useState< GitHubRepositoryWithFlag[] >([]); /* ... */ const finalRepositories: GitHubRepositoryWithFlag[] = /* ... */;

Openhands fix success summary

While the AI agent's message describes making changes to improve typing by creating a GitHubRepositoryWithFlag interface that extends GitHubRepository, the message is too general and doesn't specifically confirm where these changes were made. The feedback explicitly requested changes to be made in frontend/src/components/features/github/github-repo-selector.tsx, but the AI's response doesn't mention making changes to this specific file.

Additionally, while the AI mentions updating "all relevant state and prop types," it doesn't explicitly confirm that finalRepositories and searchedRepos state types were updated as specified in the feedback. The response focuses on many other changes (debouncing, search functionality, etc.) that weren't part of the original feedback request.

To properly resolve this feedback, the AI needs to:

Confirm changes were made in the correct file location

Show the specific type updates for finalRepositories and searchedRepos as requested

Show the implementation of GitHubRepositoryWithFlag interface in the correct location

Co-authored-by: sp.wack <[email protected]>

openhands-agent · 2024-12-26T13:09:40Z

OpenHands started fixing the pr! You can monitor the progress here.

…and sorting

openhands-agent · 2024-12-26T13:17:30Z

Here's a concise overview of the changes and remaining issues:

✅ RESOLVED:

Successfully created and implemented a useDebounce custom hook
Moved debouncing logic out of the component
Improved code reusability and separation of concerns

❌ STILL PENDING:

Typing improvements not fully confirmed:
- Need to verify creation of GitHubRepositoryWithFlag interface
- Need to confirm updates to finalRepositories and searchedRepos state types
- Need to confirm changes were made in the correct file (frontend/src/components/features/github/github-repo-selector.tsx)

RECOMMENDATION:
Additional changes are needed to fully address the typing requirements. The AI should provide explicit confirmation of:

The implementation of GitHubRepositoryWithFlag interface
Updated state types for finalRepositories and searchedRepos
Confirmation that changes were made in the correct file location

rbren · 2024-12-26T14:23:01Z

@neubig I'm a little torn on the search behavior.

We show the top 1 result based on what the GitHub search function deems relevant (which does seem to take stars into account). I do think we should rely on their ordering logic rather than our own.

I could add more public repos to the search, but then we crowd out the personal repos, which are probably what you want 99% of the time. Maybe we show two?

amanape · 2024-12-26T14:28:53Z

We could separate personal repos and searched repos with sections too

neubig · 2024-12-26T20:07:57Z

Hey @rbren , I reduced to 3, which seems like a good tradeoff. I don't feel so strongly about stars, but showing the stars and then having it not be in star order seemed a bit confusing to me as a user. I can fix it if you think the github algorithm is better

rbren · 2024-12-26T21:13:47Z

OK I set it to 3, and put them below personal repos (otherwise all the personal repos get crowded out)

Also allowed pasting full repo urls

…d test case

amanape · 2024-12-27T12:21:09Z

frontend/__tests__/components/modals/settings/model-selector.test.tsx

What was the issue that required wrapping the assertions in a waitFor? There also seem to be a lot of leftover console logs

amanape · 2024-12-27T12:26:05Z

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

+  React.useEffect(() => {
+    const searchPublicRepo = async () => {
+      if (!debouncedSearchQuery) {
+        setSearchedRepos([]);
+        return;
+      }
+      const repos = await searchPublicRepositories(
+        sanitizeQuery(debouncedSearchQuery),
+      );
+      // Sort by stars in descending order
+      const sortedRepos = repos
+        .sort((a, b) => (b.stargazers_count || 0) - (a.stargazers_count || 0))
+        .slice(0, 3);
+      setSearchedRepos(sortedRepos);
+    };
+
+    searchPublicRepo();
+  }, [debouncedSearchQuery]);
+
+  const finalRepositories: GitHubRepositoryWithFlag[] = [
+    ...searchedRepos.filter(
+      (repo) => !repositories.find((r) => r.id === repo.id),
+    ),
+    ...repositories,
+  ];


We can outsource this into a hook that utilizes TanStack Query. That way we can control when the query is executed (!!debouncedSearchQuery) and return a sorted array (via the select property of the query/mutation hook).

That should help us get rid of the useEffect and useState (searchedRepos) and make the component smaller and more readable

amanape · 2024-12-27T12:29:20Z

frontend/src/api/github.ts

+  } catch (error) {
+    return [];
+  }


If/when you are going to outsource the logic in frontend/src/components/features/github/github-repo-selector.tsx into a custom hook with TanStack Query, you should let this throw. That way we can have better error handling via the query/mutation hooks (see https://tanstack.com/query/latest/docs/framework/react/guides/query-functions)

amanape · 2024-12-27T12:30:14Z

frontend/src/types/github.d.ts

@@ -16,6 +16,8 @@ interface GitHubUser {
 interface GitHubRepository {
  id: number;
  full_name: string;
+  stargazers_count?: number;
+  fromPublicRepoSearch?: boolean;


Since we now extend this interface in the relevant component, we can remove the fromPublicRepoSearch property from here

openhands-agent added 5 commits December 24, 2024 12:52

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

62fae43

- Add GitHub API search for public repos when user enters a query - Show stargazer count for searched repos - Keep repos sorted by pushed_at (most recent first) - Place searched repo at the top of the picker

fix: add stargazers_count to GitHubRepository type

43e643b

fix: use GitHub API directly and improve star count display

e56b09e

refactor: move GitHub API logic and improve repo picker UI

e2a82de

fix: improve repo picker filtering and selection behavior

d9fdd4a

rbren marked this pull request as draft December 24, 2024 13:26

openhands-agent and others added 7 commits December 24, 2024 13:27

fix: improve repo filtering and search relevance

e866df7

fix: handle undefined query in repo filter

ef864ef

fix: update NextUI Autocomplete integration

d32db88

fix: revert to original array mapping pattern for NextUI Autocomplete

8a8a227

fix: use defaultFilter instead of filter for NextUI Autocomplete

2e8553e

actually working

9d5cc02

fix first item

c579ddf

rbren marked this pull request as ready for review December 24, 2024 14:13

rbren added 4 commits December 24, 2024 09:15

fix array

980cd4d

delint

b799cbb

delint

6bb99ce

delint

89adac2

neubig reviewed Dec 26, 2024

View reviewed changes

neubig self-requested a review December 26, 2024 00:39

neubig added the fix-me Attempt to fix this issue with OpenHands label Dec 26, 2024

Fix pr #5783: feat(frontend): enhance GitHub repo picker with search …

830c8b7

…and sorting

neubig added lint-fix and removed fix-me Attempt to fix this issue with OpenHands labels Dec 26, 2024

neubig self-assigned this Dec 26, 2024

Fix linting and formatting issues in github-repo-selector.tsx

b2b7537

amanape reviewed Dec 26, 2024

View reviewed changes

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

3d7a83a

Co-authored-by: sp.wack <[email protected]>

neubig added fix-me Attempt to fix this issue with OpenHands and removed lint-fix labels Dec 26, 2024

Fix pr #5783: feat(frontend): enhance GitHub repo picker with search …

4f95435

…and sorting

neubig added the lint-fix label Dec 26, 2024

neubig mentioned this pull request Dec 26, 2024

[Bug]: lint-fix workflow is failing on frontend even when frontend linting passes #5816

Open

1 task

delint

1b8a8db

rbren added 2 commits December 26, 2024 16:02

use sections

09eca76

allow full repo urls

1b41f90

rbren and others added 4 commits December 26, 2024 17:29

delint

fc87611

Fix: Update model-selector test with improved debugging and simplifie…

e11630c

…d test case

Merge main and resolve conflicts in model-selector test

ff83e22

Fix TypeScript errors in model-selector.test.tsx

aab5ecb

neubig force-pushed the enhance-repo-picker branch from 251f549 to aab5ecb Compare December 27, 2024 03:57

amanape reviewed Dec 27, 2024

View reviewed changes

neubig added fix-me Attempt to fix this issue with OpenHands and removed fix-me Attempt to fix this issue with OpenHands lint-fix labels Dec 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

rbren commented Dec 24, 2024 •

edited by github-actions bot

Loading

neubig left a comment

openhands-agent commented Dec 26, 2024

openhands-agent commented Dec 26, 2024

amanape Dec 26, 2024

openhands-agent Dec 26, 2024

amanape Dec 26, 2024

openhands-agent Dec 26, 2024

openhands-agent commented Dec 26, 2024

openhands-agent commented Dec 26, 2024

rbren commented Dec 26, 2024

amanape commented Dec 26, 2024

neubig commented Dec 26, 2024

rbren commented Dec 26, 2024

amanape Dec 27, 2024

amanape Dec 27, 2024

amanape Dec 27, 2024

amanape Dec 27, 2024

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

Are you sure you want to change the base?

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

Conversation

rbren commented Dec 24, 2024 • edited by github-actions bot Loading

neubig left a comment

Choose a reason for hiding this comment

openhands-agent commented Dec 26, 2024

openhands-agent commented Dec 26, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

openhands-agent commented Dec 26, 2024

openhands-agent commented Dec 26, 2024

rbren commented Dec 26, 2024

amanape commented Dec 26, 2024

neubig commented Dec 26, 2024

rbren commented Dec 26, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rbren commented Dec 24, 2024 •

edited by github-actions bot

Loading