Enhance Prompt Input: GitHub Repo & Branch Selection

by Admin 53 views
Enhance Prompt Input: GitHub Repo & Branch Selection

Hey guys! Today, we're diving deep into a super cool enhancement for the prompt input feature. We're talking about adding the ability to select GitHub repositories and branches directly within the prompt input. This is going to make your workflow smoother, more efficient, and way more intuitive. So, let's break down what this is all about, why it's important, and how it's going to work. Get ready to level up your coding game!

Summary

The main goal here is to give users the power to pick a specific GitHub repository and a branch right inside the prompt input. Imagine how much easier it will be when you can directly specify the context you're working in! Each dropdown menu for repository and branch selection will fetch data on demand and show a loading indicator while it's pulling the info. This ensures a clean and responsive user experience. We're aiming for a feature that feels like a natural extension of your workflow, making everything more connected and streamlined.

Background

Currently, the prompt input is connected to GitHub, which is awesome, but it's missing a key piece: the ability to choose a specific repository or branch. This is where things get interesting. By allowing users to pinpoint their working context, we're setting the stage for some seriously powerful GitHub-based actions in the future. Think about it – you'll be able to run commands, create pull requests, and manage issues all from a single, unified interface. It's all about making your life easier and more productive.

Goal

Let's break down the primary goals:

  • Allow Users to Select a GitHub Repository: We want users to be able to pick any of their GitHub repositories directly from the prompt input.
  • Display Branch Selection Dropdown: Once a repository is chosen, a branch selection dropdown will pop up to the right, allowing users to select a specific branch within that repository.
  • Ensure Clear State Representation: Both dropdowns need to clearly show loading, error, and empty states. This means spinners when loading, error messages when something goes wrong, and clear indicators when there are no options available.

Acceptance Criteria

Repository Select

Repository selection is crucial for setting the context. Here's what we need to nail:

  • On Dropdown Open: When you click to open the dropdown, it should immediately fetch the user’s list of GitHub repositories. This ensures the list is always up-to-date.
  • Loading Spinner: While the repository list is being fetched, a spinner should be visible inside the dropdown. This gives users a clear indication that something is happening.
  • Display Repository List: Once the list is loaded, it should be displayed in the dropdown, allowing users to easily scroll through and select their desired repository.
  • Manage Selected Repository by fullName: The selected repository should be managed using its fullName (e.g., owner/repo). This ensures unique identification and consistency.
  • Pass Data to Parent Component: The selected repository data needs to be passed to the parent component so it can be used in subsequent actions.
  • Update Placeholder Text: The placeholder text in the dropdown should be updated to β€œSearch repository…”. This gives users a hint that they can also search for repositories.

Branch Select

Branch selection is key for focusing on specific development lines. Here’s what needs to happen:

  • Visibility: The branch selection dropdown should only be visible when a repository has been selected. This keeps the UI clean and focused.
  • On Dropdown Open: When the dropdown is opened, it should fetch the list of branches for the selected repository. This ensures you're always working with the latest branch information.
  • Loading Spinner: Just like with the repository dropdown, a spinner should be displayed while the branch list is being fetched.
  • Mark Protected Branches: Protected branches should be visually marked in the dropdown. This helps prevent accidental commits to important branches like main or master.
  • Reset on Repository Change: When the repository selection changes, the branch selection and list should be reset. This avoids confusion and ensures you're always working with the correct branches for the selected repository.
  • Cache Branch Data: To prevent redundant API calls, branch data should be cached for the same repository. This improves performance and reduces unnecessary load on the GitHub API.

API

To make all this work, we need a new API endpoint:

  • Endpoint: GET /api/github/branches
  • Query Parameter: repo_full_name (in owner/repo format)
  • Authentication: Use authentication middleware (authMiddleware, convexClientWithAuthMiddleware) to ensure only authorized users can access the data.
  • Branch Retrieval: Retrieve branches using octokit.rest.repos.listBranches. This is the standard way to fetch branch information from the GitHub API.
  • Data Format: Return data in the format { name, protected }. This provides the necessary information for displaying branches and indicating their protected status.
  • Error Handling:
    • Return a 400 error for invalid requests.
    • Return a 404 error for missing or unauthorized repositories.
    • Return a 500 error for unexpected errors.

UI/UX Notes

User experience is paramount, so let's keep these points in mind:

  • Reuse Existing Dropdown Pattern: Use the existing Command-based dropdown pattern. This ensures consistency and familiarity for users.
  • Show Loading, Error, and Empty States: Clearly indicate loading, error, and empty states inside the dropdowns. This provides feedback and helps users understand what's happening.
  • Position BranchSelect to the Right: Position the BranchSelect component to the right of the RepoSelect component with a flex gap-2. This creates a visually appealing and intuitive layout.
  • Use React Query Caching: Leverage React Query caching to minimize redundant requests. This improves performance and reduces the load on the GitHub API.

In summary, guys, this feature addition is all about making your workflow smoother and more efficient. By allowing you to select GitHub repositories and branches directly within the prompt input, we're giving you more control, more context, and more power. Get ready to experience a whole new level of productivity!