kuju63 / kuju63/code-review-agents
[Sub-Issue] Review Detail & Diff UI
- Dominant language
- HTML
- Stars
- 0
- Forks
- 0
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 96
Description
[サブイシュー] レビュー詳細&Diff UI
#### 目的
ファイル差分とレビューコメントを表示し、コメント操作を行える詳細画面を実装する。
#### UI要素
1. **Diff表示**
- `MockData.buildFileRows()` のロジックを再利用し、行ごとの変更表示を行う。
- 追加・削除行は背景色とハイライトで区別。
2. **コメントスレッド**
- 各行のコンテキストでコメントをツリービューで表示。
- 「Resolve」「False Positive」「Reopen」の実装ボタンを配置。
3. **ステータス概要**
- `MockData.formatCommentSummary()` を使用し、コメント総数・未解決数などを表示。
4. **操作**
- ボタンで API (`PATCH /reviews/{{id}}/comments/{{commentId}}`) を呼び出し、状態更新。
#### テスト計画
- **ユニット**: Vitest で diff 行生成関数とコメント状態更新関数を検証。
- **インテグレーション**: Playwright で API 呼び出しと UI レンダリングの連携を確認。
- **エンドツーエンド**: Playwright でブラウザから「Resolve」ボタンを押し、コメントが更新され、ステータスが変わるかを検証。
- **コンポーネント**: Storybook で Diff コンポーネントとコメントスレッドをスナップショットテスト。
#### 参照
- 親 Issue #243
---
**備考**
- スタイルの統一は Carbon Design System の `tokens.css` を利用。
Contributor guide
Research direction
Start by locating MockData.buildFileRows() and MockData.formatCommentSummary(), then find the review-detail UI that should use them. Run the existing Vitest, Playwright, and Storybook checks before implementing the diff, comment-thread actions, summary, and PATCH /reviews/{{id}}/comments/{{commentId}} integration. Done means the UI updates comment status and summary correctly, with the planned unit, integration, end-to-end, and component coverage.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html, playwright, storybook
- Domain
- api, frontend, testing-qa
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100