JACoB PR for Issue Feature Request: Add "Start New Issue" Button to Codebase Detail Component

[jacob-ai-bot[bot]]

Summary:

Feature Request: Add "Start New Issue" Button to Codebase Detail Component

Description

Enhance the Code Visualization - Codebase Detail component by introducing a new button labeled "Start New Issue". This feature will allow users to seamlessly create GitHub issues related to specific files directly from the codebase view, streamlining the reporting and tracking of necessary updates.

Current Functionality

• Chat Button: Located at the bottom of the Codebase Detail component, this button allows users to send the current file to the chat for discussions and feedback.

Proposed Enhancement

"Start New Issue" Button

• Placement: Add the "Start New Issue" button adjacent to the existing chat button at the bottom of the Codebase Detail component.

• Functionality:

  1. On Click:
     • Retrieve the current file's name and path.
     • URL-encode the file path.
     • Pass the encoded path to the IssueWriter component.

  2. IssueWriter Integration:

     • Title: Automatically generate the issue title as Update [filename.ext].
     • Body: Populate the issue body with the following professional template:

       
       ## Update Required for [filename.ext]

     Please update the [filename.ext] file to address the following:

     • Description: [Provide a detailed description of the required update.]
     • Reason: [Explain why this update is necessary.]
     • Additional Notes: [Any other relevant information.]

     • Ensure the template allows users to replace placeholder text with specific instructions.

Implementation Steps

1. UI Development:

   • Design the "Start New Issue" button to match the existing style of the chat button.
   • Ensure the button is clearly labeled and easily accessible within the Codebase Detail component.

2. Functionality Integration:

   • Develop the click handler for the "Start New Issue" button to:
     • Extract the current file's name and path.
     • URL-encode the file path securely.
     • Navigate to the IssueWriter component, passing the encoded path as a parameter.

3. IssueWriter Component Enhancement:

   • Modify the IssueWriter component to:
     • Receive and decode the file path from the URL parameter.
     • Auto-populate the issue title and body using the specified template.
     • Allow users to edit the pre-filled template before submission.

4. Error Handling:

   • Implement error checks for:
     • Successful retrieval and encoding of the file path.
     • Successful navigation to the IssueWriter component.
   • Provide user-friendly error messages in case of failures.

5. Testing:

   • Conduct thorough testing to ensure:
     • The "Start New Issue" button functions correctly across different files and scenarios.
     • The issue template is populated accurately and is editable.
     • Seamless integration with the IssueWriter component without introducing bugs.

Expected Outcome

• Streamlined Issue Creation: Users can quickly create GitHub issues related to specific files without leaving the Codebase Detail view.
• Consistency: Pre-filled templates ensure that issues follow a standardized format, enhancing clarity and efficiency.
• Enhanced User Experience: Reduces the steps required to report issues, making the process more intuitive and user-friendly.

Additional Information

• Dependencies:
  • Ensure compatibility with the existing chat functionality to prevent conflicts.
  • Verify that the IssueWriter component can handle the received parameters correctly.
• Design Considerations:
  • Maintain consistency with the application's overall UI/UX design.
  • Ensure the new button is accessible and adheres to accessibility standards. Also be sure to look at the Chat component for an example of how to read in the file url from the search params and unencode it. This will ensure consistency across the codebase.

---

@jacob-ai-bot --skip-build

Plan:

Step 1: Edit /src/app/dashboard/[org]/[repo]/code-visualizer/codebase/CodebaseDetails.tsx

Task: Add 'Start New Issue' button and click handler to CodebaseDetails component

Instructions: In the CodebaseDetails.tsx component, add a new button labeled 'Start New Issue' adjacent to the existing 'Update with Chat' button at the bottom of the component. Ensure the new button matches the existing styling for consistency, following the styling patterns used for buttons in this component. Implement a click handler for this button. When clicked, the handler should check if a file is selected. If a file is selected, retrieve the current file's name and path, URL-encode the file path, and use the router to navigate to the IssueWriter component, passing the encoded file path as a query parameter named 'file_path'. If no file is selected, display an appropriate error message to the user.

Exit Criteria: The 'Start New Issue' button is displayed alongside the 'Update with Chat' button, styled consistently. Clicking it navigates to the IssueWriter component with the file path passed as a URL parameter when a file is selected. An error message is shown if no file is selected.

Step 2: Edit /src/app/dashboard/[org]/[repo]/issue-writer/IssueWriter.tsx

Task: Modify IssueWriter component to accept file path from URL parameters and pre-populate issue content

Instructions: In IssueWriter.tsx, use the appropriate hook (e.g., useSearchParams from 'next/navigation') to retrieve the 'file_path' parameter from the URL. Decode the encoded file path, and if present, extract the file name from the path. Use the file name to pre-populate the issue title and body. The issue title should be formatted as 'Update [filename.ext]', where '[filename.ext]' is the extracted file name. The issue body should be populated with the following template:

Update Required for [filename.ext]

Please update the [filename.ext] file to address the following:

• Description: [Provide a detailed description of the required update.]
• Reason: [Explain why this update is necessary.]
• Additional Notes: [Any other relevant information.]

Ensure that the issue title and body fields are editable, allowing the user to modify the pre-filled content before submitting the issue.

Exit Criteria: When navigated to with a 'file_path' parameter, IssueWriter pre-populates the issue title and body using the file name, and the user can edit both fields before creating the issue.

[jacob-ai-bot[bot]]

Hello human! 👋

This PR was created by JACoB to address the issue Feature Request: Add "Start New Issue" Button to Codebase Detail Component

Next Steps

1. Please review the PR carefully. Auto-generated code can and will contain subtle bugs and mistakes.

2. If you identify code that needs to be changed, please reject the PR with a specific reason. Be as detailed as possible in your comments. JACoB will take these comments, make changes to the code and push up changes. Please note that this process will take a few minutes.

3. Once the code looks good, approve the PR and merge the code.