mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-01-12 07:12:54 +01:00
GIT-004D: Create & Update Issues
Overview
Enable full CRUD operations for GitHub issues from within Nodegex. Users can create new issues, edit existing ones, add comments, and change issue status—all without leaving the editor. This task also introduces the Quick Bug Report feature that will integrate with component linking in GIT-004E.
Phase: 3 (Dashboard UX & Collaboration)
Priority: HIGH (productivity multiplier)
Effort: 12-16 hours
Risk: Medium (write operations, error handling critical)
Depends on: GIT-004B (Issues Panel)
Goals
- Create Issue dialog with full options
- Edit Issue capability (title, body, labels, assignees)
- Add Comments to issues
- Change Status (open/close issues)
- Issue Templates support
- Quick Bug Report for fast issue creation
User Experience
Create Issue Dialog
┌─────────────────────────────────────────────────────────┐
│ Create Issue [X] │
├─────────────────────────────────────────────────────────┤
│ │
│ Template: [Bug Report ▼] │
│ │
│ Title * │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Login form validation not showing error │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ Description │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ ## Bug Description │ │
│ │ When entering an invalid email... │ │
│ │ │ │
│ │ ## Steps to Reproduce │ │
│ │ 1. Go to login page │ │
│ │ 2. Enter invalid email │ │
│ │ │ │
│ └─────────────────────────────────────────────────────┘ │
│ [Write] [Preview] │
│ │
│ Labels │
│ [🐛 bug] [🔥 priority-high] [+ Add] │
│ │
│ Assignees │
│ [@johndoe] [+ Add] │
│ │
├─────────────────────────────────────────────────────────┤
│ [Cancel] [Create Issue] │
└─────────────────────────────────────────────────────────┘
Quick Bug Report (Streamlined)
┌─────────────────────────────────────────────────────────┐
│ 🐛 Quick Bug Report [X] │
├─────────────────────────────────────────────────────────┤
│ │
│ What's wrong? * │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ The submit button doesn't work │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ☑️ Include component info (UserLoginForm) │
│ ☐ Include screenshot │
│ │
├─────────────────────────────────────────────────────────┤
│ [Cancel] [Report Bug] │
└─────────────────────────────────────────────────────────┘
Add Comment
┌─────────────────────────────────────────────────────────┐
│ Issue #42 - Login form validation broken │
├─────────────────────────────────────────────────────────┤
│ ... issue content ... │
├─────────────────────────────────────────────────────────┤
│ 💬 Comments (3) │
├─────────────────────────────────────────────────────────┤
│ ... existing comments ... │
├─────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────┐ │
│ │ Add a comment... │ │
│ │ │ │
│ └─────────────────────────────────────────────────────┘ │
│ [Write] [Preview] [Comment] │
└─────────────────────────────────────────────────────────┘
Architecture
Component Structure
packages/noodl-editor/src/editor/src/views/panels/GitHubPanel/
├── components/
│ └── IssuesTab/
│ ├── CreateIssueDialog.tsx # Full issue creation
│ ├── CreateIssueDialog.module.scss
│ ├── EditIssueDialog.tsx # Edit existing issue
│ ├── QuickBugReport.tsx # Streamlined bug report
│ ├── AddCommentForm.tsx # Comment input
│ ├── MarkdownEditor.tsx # Markdown input with preview
│ ├── LabelSelector.tsx # Multi-select labels
│ ├── AssigneeSelector.tsx # Multi-select assignees
│ └── TemplateSelector.tsx # Issue template picker
├── hooks/
│ ├── useCreateIssue.ts
│ ├── useUpdateIssue.ts
│ ├── useAddComment.ts
│ ├── useIssueTemplates.ts
│ └── useRepoLabels.ts
Implementation Phases
Phase 1: Create Issue Dialog (4-5 hours)
Files to Create:
CreateIssueDialog.tsxCreateIssueDialog.module.scssMarkdownEditor.tsxLabelSelector.tsxAssigneeSelector.tsxhooks/useCreateIssue.ts
Tasks:
- Create dialog component with form
- Implement markdown editor with preview toggle
- Create label selector (fetch repo labels)
- Create assignee selector (fetch repo contributors)
- Implement create issue API call
- Handle loading/error states
- Add success feedback
Success Criteria:
- Dialog opens from panel header "+"
- All fields work correctly
- Markdown preview works
- Issue created on GitHub
- New issue appears in list
Phase 2: Issue Templates (2-3 hours)
Files to Create:
TemplateSelector.tsxhooks/useIssueTemplates.ts
Tasks:
- Fetch templates from
.github/ISSUE_TEMPLATE/ - Create template selector dropdown
- Pre-fill form from selected template
- Handle repos without templates
Success Criteria:
- Templates load if available
- Selecting template fills form
- Works without templates
Phase 3: Edit & Update Issue (2-3 hours)
Files to Create:
EditIssueDialog.tsxhooks/useUpdateIssue.ts
Tasks:
- Create edit dialog (reuse components)
- Pre-fill with existing issue data
- Implement update API call
- Handle status changes (open/close)
- Update issue in list after save
Success Criteria:
- Edit opens with current data
- Can edit title, body, labels, assignees
- Can close/reopen issue
- Changes reflected immediately
Phase 4: Comments (2-3 hours)
Files to Create:
AddCommentForm.tsxhooks/useAddComment.ts
Tasks:
- Add comment form to issue detail
- Implement markdown input
- Implement add comment API call
- Update comments list after add
- Handle errors
Success Criteria:
- Comment form shows in detail
- Can write markdown comment
- Comment appears after submit
- Preview works
Phase 5: Quick Bug Report (2-3 hours)
Files to Create:
QuickBugReport.tsx
Tasks:
- Create streamlined dialog
- Single-line title input
- Auto-add "bug" label
- Option to include component info
- Integrate with context menu (prep for GIT-004E)
Success Criteria:
- Quick dialog opens
- Minimal fields required
- Creates issue with bug label
- Component info included when checked
Files Summary
Create (New)
packages/noodl-editor/src/editor/src/views/panels/GitHubPanel/
├── components/
│ └── IssuesTab/
│ ├── CreateIssueDialog.tsx
│ ├── CreateIssueDialog.module.scss
│ ├── EditIssueDialog.tsx
│ ├── QuickBugReport.tsx
│ ├── AddCommentForm.tsx
│ ├── MarkdownEditor.tsx
│ ├── LabelSelector.tsx
│ ├── AssigneeSelector.tsx
│ └── TemplateSelector.tsx
├── hooks/
│ ├── useCreateIssue.ts
│ ├── useUpdateIssue.ts
│ ├── useAddComment.ts
│ ├── useIssueTemplates.ts
│ └── useRepoLabels.ts
Modify
packages/noodl-editor/src/editor/src/views/panels/GitHubPanel/
components/IssuesTab/IssuesTab.tsx
- Add "New Issue" button
components/IssuesTab/IssueDetail.tsx
- Add edit button
- Add close/reopen button
- Add comment form
API Endpoints Used
// Create issue
octokit.issues.create({ owner, repo, title, body, labels, assignees })
// Update issue
octokit.issues.update({ owner, repo, issue_number, title, body, state, labels, assignees })
// Add comment
octokit.issues.createComment({ owner, repo, issue_number, body })
// Get issue templates
octokit.repos.getContent({ owner, repo, path: '.github/ISSUE_TEMPLATE' })
// Get labels
octokit.issues.listLabelsForRepo({ owner, repo })
// Get assignees
octokit.repos.listCollaborators({ owner, repo })
Testing Checklist
- Create issue works
- All fields save correctly
- Templates load and apply
- Edit issue works
- Status change works
- Add comment works
- Quick bug report works
- Validation prevents empty title
- Error handling works
- Success feedback shown
- List updates after changes
Progress Tracking
| Phase | Status | Started | Completed | Hours |
|---|---|---|---|---|
| Phase 1: Create Dialog | Not Started | - | - | - |
| Phase 2: Templates | Not Started | - | - | - |
| Phase 3: Edit & Update | Not Started | - | - | - |
| Phase 4: Comments | Not Started | - | - | - |
| Phase 5: Quick Bug Report | Not Started | - | - | - |
Estimated Total: 12-16 hours
Actual Total: - hours