JACoB PR for Issue Add "Run Build" Option to Todo Details Page in JACoB

[jacob-local-kevin]

Summary:

Description

Enhance the Todo Details page in JACoB by allowing users to opt-in to the build process. This feature provides users with the flexibility to choose whether to run the build when starting work on a task.

Features to Implement

1. Add "Run Build" Checkbox

   • Place a checkbox labeled "Run Build" next to the "Start Work" button.
   • The checkbox should be unchecked by default.

2. Update Issue Body on Starting Work

   • When the "Start Work" button is clicked:
     • If the "Run Build" checkbox is unchecked:
       • Append the flag --skip-build to the issue body.
       • Ensure the flag is added with a preceding space for separation.
     • If the "Run Build" checkbox is checked:
       • Do not modify the issue body.

3. UI/UX Considerations

   • Ensure the new checkbox aligns with the existing design language of the Todo Details page.
   • The checkbox should be responsive and maintain consistency across different screen sizes.

4. Conditional Display

   • Hide the "Run Build" checkbox if the issue is already marked as "In Progress" to prevent redundant actions.

Acceptance Criteria

• A "Run Build" checkbox is present next to the "Start Work" button and is unchecked by default.
• Clicking "Start Work" with the checkbox unchecked appends --skip-build to the issue body correctly.
• Clicking "Start Work" with the checkbox checked leaves the issue body unmodified.
• The checkbox is hidden when the issue status is "In Progress".
• The design of the checkbox matches the existing codebase and maintains UI consistency.

Additional Information

• Relevant Codebase: Navigate to the TodoDetails component in the repository for context on existing functionality.

---

@jacob-ai-bot

Plan:

Step 1: Edit /src/app/dashboard/[org]/[repo]/todos/components/TodoDetails.tsx

Task: Enhance TodoDetails component with 'Run Build' option

Instructions:
In /src/app/dashboard/[org]/[repo]/todos/components/TodoDetails.tsx:

• Add a checkbox labeled 'Run Build' next to the 'Start Work' button:

  • Import useState from React to manage the checkbox state.
  • Initialize a state variable, e.g., const [runBuild, setRunBuild] = useState(false); with the default value false (unchecked).
  • Add a checkbox input element with the label 'Run Build' adjacent to the 'Start Work' button.
  • Use conditional rendering to hide the checkbox when the issue status is 'In Progress' by checking selectedTodo.status !== TodoStatus.IN_PROGRESS.
  • Ensure the checkbox updates runBuild state on change.

• Modify the handleStartWork function to incorporate the checkbox state:

  • Before updating the issue, check the runBuild state.
    • If runBuild is false (checkbox is unchecked), append the flag --skip-build with a preceding space to the updatedBody variable.
    • If runBuild is true (checkbox is checked), leave updatedBody unmodified.

• Ensure Design Consistency:

  • Apply existing CSS classes and styles to the checkbox to match the component's design.
  • Use Tailwind CSS classes for styling, ensuring responsiveness and alignment with the current UI.
  • Support dark mode by using appropriate Tailwind CSS dark mode classes.
  • Place the checkbox and its label within the existing layout, maintaining proper spacing and alignment.

Exit Criteria:
• The 'Run Build' checkbox is present next to the 'Start Work' button when the issue status is not 'In Progress', and it is unchecked by default.
• The checkbox is hidden when the issue status is 'In Progress'.
• The checkbox visually matches the existing styling and is responsive across different screen sizes.
• Clicking 'Start Work' with the checkbox unchecked appends --skip-build to the issue body.
• Clicking 'Start Work' with the checkbox checked leaves the issue body unmodified.
• All functionality works correctly without introducing any layout issues or breaking existing features.

[jacob-local-kevin]

Hello human! 👋

This PR was created by JACoB to address the issue Add "Run Build" Option to Todo Details Page in JACoB

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.