4a0fad03c25c1973e46baa8bd7e01ef5d760427a
2 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Louis Knight-Webb
|
4a0fad03c2 |
Display GitHub PR comments inline in diff view (Vibe Kanban) (#1991)
* The GitHub comments integration is now complete. Here's a summary of what was implemented:
## Summary
The GitHub PR comments integration for the new UI (ui-new) is now complete. All tasks have been implemented:
### Files Modified:
1. **`useUiPreferencesStore.ts`** - Added persistence key for `showGitHubComments` toggle
2. **`WorkspaceContext.tsx`** - Extended with PR comments data, helpers (`getGitHubCommentsForFile`, `gitHubFileCommentCounts`), and toggle state
3. **`CommentCard.tsx`** (new) - Shared primitive for displaying comments with three variants: `user`, `github`, `input`
4. **`GitHubCommentRenderer.tsx`** (new) - Read-only renderer for GitHub comments with GitHub logo, author, timestamp, and external link
5. **`ReviewCommentRenderer.tsx`** - Refactored to use `CommentCard` primitive
6. **`CommentWidgetLine.tsx`** - Refactored to use `CommentCard` primitive
7. **`DiffViewCardWithComments.tsx`** - Integrated GitHub comments into diff view, showing both user and GitHub comments with separate counts in the header
8. **`FileTreeNode.tsx`** - Added GitHub comment badge showing count next to files
9. **`FileTree.tsx`** - Added toggle button in header to show/hide GitHub comments
10. **`FileTreeContainer.tsx`** - Wired up the context to pass toggle state and comment counts to FileTree
11. **`common.json`** (i18n) - Added translation keys for show/hide GitHub comments
### Features:
- GitHub PR comments displayed inline next to relevant code in diff views
- Toggle button in file tree to show/hide GitHub comments (persisted)
- Comment count badges on files in the file tree
- Visual differentiation: user comments have orange styling (`bg-brand/20 border-brand`), GitHub comments have neutral styling (`bg-secondary border-border`)
- User comments take priority when both exist on the same line
* Cleanup script changes for workspace 881e2956-9cca-406d-835f-7ea8acbe550e
* All checks pass. Let me show a summary of the changes made:
## Summary of Fixes
All code review feedback has been addressed:
| # | Fix | File | Change |
|---|-----|------|--------|
| 1 | Date parsing | `GitHubCommentRenderer.tsx:9-27` | Replaced `try/catch` with `isNaN(date.getTime())` check |
| 2 | Comment priority | `DiffViewCardWithComments.tsx:258-260` | Added comment explaining user comments take priority |
| 3 | SplitSide.new | `WorkspaceContext.tsx:163-165` | Added comment explaining why `SplitSide.new` is correct |
| 4 | Multi-repo TODO | `WorkspaceContext.tsx:133-134` | Added TODO about supporting multiple repos |
| 5 | Loading state | `FileTreeContainer.tsx`, `FileTree.tsx` | Passed `isGitHubCommentsLoading` prop and added `opacity-50 animate-pulse` to button |
Type checks pass. Ready for commit.
* Fixed! The `FileTree.tsx` now uses the correct `Tooltip` component from `@/components/ui-new/primitives/Tooltip` instead of the old `@/components/ui/tooltip`.
Changes made:
- Updated import to use `import { Tooltip } from '../primitives/Tooltip'`
- Simplified the tooltip usage from the compound component pattern (`Tooltip` + `TooltipTrigger` + `TooltipContent`) to the simpler API (`<Tooltip content="...">...</Tooltip>`)
* The path matching bug has been fixed. Here's a summary of the changes:
## Summary of Bug Fix
**Problem**: GitHub comments weren't displaying because paths didn't match.
- GitHub API returns paths like: `frontend/src/components/ui-new/actions/index.ts`
- Diff paths are prefixed with repo name: `vibe-kanban/frontend/src/components/ui-new/actions/index.ts`
**Solution**: Use `endsWith` matching instead of exact string equality.
### Files Changed:
1. **`WorkspaceContext.tsx`**:
- Added `pathMatches` helper function that checks if paths match using `endsWith`
- Updated `getGitHubCommentsForFile` to use `pathMatches`
- Replaced `gitHubFileCommentCounts: Record<string, number>` with `getGitHubCommentCountForFile: (filePath: string) => number` function that also uses `pathMatches`
2. **`FileTree.tsx`**:
- Changed prop from `fileCommentCounts?: Record<string, number>` to `getGitHubCommentCountForFile?: (filePath: string) => number`
- Updated usage from `fileCommentCounts?.[node.path]` to `getGitHubCommentCountForFile?.(node.path)`
3. **`FileTreeContainer.tsx`**:
- Updated to pass the new `getGitHubCommentCountForFile` function instead of `gitHubFileCommentCounts` Record
* Cleanup script changes for workspace 881e2956-9cca-406d-835f-7ea8acbe550e
* Fixed! The `renderExtendLine` function now includes a null check for `lineData.data` to prevent the TypeError when switching diff modes. The fix adds:
```typescript
// Guard against undefined data (can happen when switching diff modes)
if (!lineData.data) return null;
```
This prevents the crash when the `@git-diff-view` library passes undefined data during mode transitions.
* Done! GitHub comments will now be shown by default. The change was a simple one-liner in `WorkspaceContext.tsx`:
```typescript
// Before:
false // Default to hidden
// After:
true // Default to shown
```
* The proper fix is complete. Here's a summary of the changes:
## Summary: Comments on deleted lines fix
**Problem**: GitHub comments on deleted lines weren't showing because we were placing all comments on `SplitSide.new`.
**Solution**: Pass through the `side` field from GitHub's API which indicates whether the comment is on the "LEFT" (old/deleted) or "RIGHT" (new/added) side.
### Files Changed:
1. **`crates/services/src/services/git_host/types.rs`**
- Added `side: Option<String>` field to `UnifiedPrComment::Review` variant
2. **`crates/services/src/services/git_host/github/mod.rs`**
- Pass `c.side` through when creating `UnifiedPrComment::Review`
3. **`crates/services/src/services/git_host/azure/cli.rs`**
- Added `side: None` to Azure DevOps (doesn't have this info)
4. **`shared/types.ts`** (regenerated)
- Now includes `side: string | null` in the review comment type
5. **`frontend/src/contexts/WorkspaceContext.tsx`**
- Updated normalization to use `comment.side === 'LEFT' ? SplitSide.old : SplitSide.new`
6. **`frontend/src/components/ui-new/containers/DiffViewCardWithComments.tsx`**
- Updated `extendData` building to place GitHub comments on the correct side (`oldFileData` or `newFileData`) based on `comment.side`
* The refactoring is complete. Here's a summary of the changes:
**Created new file:** `frontend/src/hooks/useGitHubComments.ts`
- Contains the `NormalizedGitHubComment` interface
- Contains all GitHub comments logic: fetching, toggle state, normalization, path matching helpers
**Updated:** `frontend/src/contexts/WorkspaceContext.tsx`
- Removed ~70 lines of GitHub comments logic
- Now imports and uses `useGitHubComments` hook
- Re-exports `NormalizedGitHubComment` type for consumers that import it from the context
The context file is now smaller and more focused on workspace management, while the GitHub comments functionality is encapsulated in its own dedicated hook.
* Cleanup script changes for workspace 881e2956-9cca-406d-835f-7ea8acbe550e
* Done. Removed the duplicate `formatRelativeTime` function from `GitHubCommentRenderer.tsx` and replaced it with an import from the existing `@/utils/date` utility.
* The i18n check now passes. All translation keys are consistent across locales. I added the missing `showGitHubComments` and `hideGitHubComments` translations to:
- Spanish (es)
- Japanese (ja)
- Korean (ko)
- Simplified Chinese (zh-Hans)
- Traditional Chinese (zh-Hant)
|
||
|
Louis Knight-Webb
|
527febdc52 | Workspaces FE (#1733) |