kuju63 / kuju63/code-review-agents

[Sub-Issue] Review Detail & Diff UI

Open
#342 0 comments 0 reactions 0 assignees View on GitHub
enhancement
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.