Merge pull request #1100 from smalruby/feature/admin-bug-report-write

smalruby3-editor-bot[bot] · web-flow · commit 2913579af4be · 2026-07-19T04:30:13.000Z
feat(admin): バグ報告の状態変更と進捗コメントを可能にする
diff --git a/docs/admin/README.md b/docs/admin/README.md
@@ -18,7 +18,7 @@
 
 1. **みんなの課題**（S3 #1083）: 通報キュー（多い順）/ 全投稿一覧 / 詳細（ページ・画像・クレジット）/ 非公開⇄再公開（2 段階確認・audit）
 2. **クラス・課題**（S4 #1084）: 全クラス検索（参加コード完全一致・名前部分一致）/ 詳細（参加・提出カウント）/ アーカイブ切替 / **期限切れクラスの復元**（ddb-archive スナップショット検索 → dry-run プラン → 実行。EPIC #1049 の CLI `bin/restore-classroom.ts` の UI 後継）
-3. **バグ報告**（S5 #1085）: 既存バグ報告の**閲覧のみ**（一覧・状態フィルタ・詳細・添付 presigned DL）。状態変更・返信は従来の運用手段を継続
+3. **バグ報告**（S5 #1085 + 対応機能追加）: 既存バグ報告の一覧・状態フィルタ・詳細・添付 presigned DL に加え、**状態の変更と進捗コメント（開発者からの返信）**を既存 bug-report admin API の PATCH で行える（2 段階確認・終端ステータスは自動削除 TTL の警告つき。返信は報告者の「私の不具合報告」に表示され、非表示にしていた報告も再表示される — サーバー側の既存挙動）
 
 ## 認証・認可モデル（要点）
 
@@ -28,7 +28,7 @@
 - トークンは**モジュールメモリのみ**（localStorage に保存しない・N1）。リロード時は再ログイン
 - **セッション切れ（約 1 時間）**: API が 401 を返すと全画面の再読み込みプロンプトを表示。表示中のセクションは **URL ハッシュ**（`#/classrooms` 等）に保持しているため、再読み込み → 再ログイン後に元のセクションへ復帰する（localStorage 不使用）
 - すべての管理操作は `audit()` 構造化ログ（prod の CloudWatch 保持は **1 年**）
-- バグ報告の閲覧は bug-report 側の既存レジストリ `BugReportAdmins`（email）で認可される（両方への登録が必要）
+- バグ報告の閲覧・対応は bug-report 側の既存レジストリ `BugReportAdmins`（email）で認可される（両方への登録が必要）
 
 詳細な登録手順・監査ログ検索・デプロイ手順は [operations.md](operations.md)。
 
@@ -43,7 +43,7 @@
 | `src/components/classrooms-view.jsx` | クラス・課題管理 + 期限切れ復元 |
 | `src/components/bug-reports-view.jsx` | バグ報告閲覧（read-only） |
 | `src/lib/admin-api.js` | admin API クライアント（トークンはモジュールメモリ） |
-| `src/lib/bug-report-api.js` | bug-report API クライアント（**GET 専用**） |
+| `src/lib/bug-report-api.js` | bug-report API クライアント（一覧・詳細 + 状態/返信の PATCH。既存 API のみ使用） |
 | `src/lib/google-auth.js` | GIS ロード + `?devlogin=` バイパス（stg のみ） |
 | `webpack.config.js` | 独立ビルド（publicPath `/admin/`、port 8602、DefinePlugin で endpoint 埋め込み） |
 
diff --git a/packages/admin/src/components/app.css b/packages/admin/src/components/app.css
@@ -250,3 +250,32 @@ body {
     font-size: 1rem;
     cursor: pointer;
 }
+
+.admin-respond {
+    margin-top: 1.5rem;
+    padding: 1rem;
+    border: 1px solid hsl(220, 15%, 85%);
+    border-radius: 0.5rem;
+    background: hsl(220, 25%, 98%);
+}
+
+.admin-respond h4 {
+    margin: 0 0 0.5rem;
+}
+
+.admin-respond textarea {
+    display: block;
+    width: 100%;
+    max-width: 40rem;
+    margin-top: 0.5rem;
+    padding: 0.5rem;
+    border: 1px solid hsl(220, 15%, 75%);
+    border-radius: 0.4rem;
+    font-size: 0.9rem;
+}
+
+.admin-respond select {
+    padding: 0.25rem 0.5rem;
+    border: 1px solid hsl(220, 15%, 75%);
+    border-radius: 0.4rem;
+}
diff --git a/packages/admin/src/components/bug-reports-view.jsx b/packages/admin/src/components/bug-reports-view.jsx
@@ -7,7 +7,7 @@
  */
 import PropTypes from 'prop-types';
 import {useCallback, useEffect, useState} from 'react';
-import {fetchBugReport, fetchBugReports} from '../lib/bug-report-api.js';
+import {fetchBugReport, fetchBugReports, updateBugReport} from '../lib/bug-report-api.js';
 
 const STATUS_LABELS = {
     open: '未対応',
@@ -44,17 +44,56 @@ const hideBrokenImage = event => {
     event.currentTarget.style.display = 'none';
 };
 
-const BugReportDetail = ({reportId, onBack}) => {
+const BugReportDetail = ({reportId, onBack, onChanged}) => {
     const [detail, setDetail] = useState(null);
     const [error, setError] = useState('');
+    const [nextStatus, setNextStatus] = useState('');
+    const [reply, setReply] = useState('');
+    const [confirming, setConfirming] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const [savedAt, setSavedAt] = useState(null);
 
     useEffect(() => {
         fetchBugReport(reportId)
-            .then(setDetail)
+            .then(data => {
+                setDetail(data);
+                setNextStatus(data.status);
+                setReply(data.developerReply || '');
+            })
             .catch(err => setError(err.message));
     }, [reportId]);
 
-    if (error) {
+    const dirty = detail &&
+        (nextStatus !== detail.status || reply !== (detail.developerReply || ''));
+    const turnsTerminal = detail && nextStatus !== detail.status &&
+        (nextStatus === 'resolved' || nextStatus === 'wont_fix');
+
+    const handleStatusChange = useCallback(e => setNextStatus(e.target.value), []);
+    const handleReplyChange = useCallback(e => setReply(e.target.value), []);
+    const handleArm = useCallback(() => setConfirming(true), []);
+    const handleDisarm = useCallback(() => setConfirming(false), []);
+    const handleSave = useCallback(async () => {
+        if (!detail) return;
+        setBusy(true);
+        setError('');
+        try {
+            // Send only what changed — the API rejects an empty update.
+            const updates = {};
+            if (nextStatus !== detail.status) updates.status = nextStatus;
+            if (reply !== (detail.developerReply || '')) updates.developerReply = reply;
+            await updateBugReport(reportId, updates);
+            setDetail(prev => ({...prev, status: nextStatus, developerReply: reply}));
+            setConfirming(false);
+            setSavedAt(new Date().toISOString());
+            onChanged();
+        } catch (err) {
+            setError(err.message);
+        } finally {
+            setBusy(false);
+        }
+    }, [detail, nextStatus, reply, reportId, onChanged]);
+
+    if (error && !detail) {
         return (<p
             className="admin-error"
             data-testid="bug-admin-error"
@@ -78,12 +117,6 @@ const BugReportDetail = ({reportId, onBack}) => {
                 {`報告者: ${detail.ownerEmail || '(メール非公開)'} ・ ${formatDate(detail.createdAt)}`}
             </p>
             <p data-testid="bug-admin-description">{detail.description}</p>
-            {detail.developerReply ? (
-                <p
-                    className="admin-meta"
-                    data-testid="bug-admin-reply"
-                >{`開発者からの返信: ${detail.developerReply}`}</p>
-            ) : null}
             {detail.appContext ? (
                 <details>
                     <summary>{'アプリの状態 (appContext)'}</summary>
@@ -118,12 +151,82 @@ const BugReportDetail = ({reportId, onBack}) => {
                     onError={hideBrokenImage}
                 />
             ))}
+            <div className="admin-respond">
+                <h4>{'対応（報告者に表示されます）'}</h4>
+                <label className="admin-meta">
+                    {'状態: '}
+                    <select
+                        data-testid="bug-admin-status-select"
+                        disabled={busy}
+                        value={nextStatus}
+                        onChange={handleStatusChange}
+                    >
+                        {Object.entries(STATUS_LABELS).map(([value, label]) => (
+                            <option
+                                key={value}
+                                value={value}
+                            >{label}</option>
+                        ))}
+                    </select>
+                </label>
+                <textarea
+                    data-testid="bug-admin-reply-input"
+                    disabled={busy}
+                    maxLength={2000}
+                    placeholder="進捗や対応内容のコメント（報告者の「私の不具合報告」に表示されます）"
+                    rows={4}
+                    value={reply}
+                    onChange={handleReplyChange}
+                />
+                {error ? <p
+                    className="admin-error"
+                    data-testid="bug-admin-save-error"
+                >{error}</p> : null}
+                <div className="admin-actions">
+                    {confirming ? (
+                        <span
+                            className="admin-confirm"
+                            data-testid="bug-admin-save-confirm"
+                        >
+                            {turnsTerminal ?
+                                'この状態にすると報告と添付は一定期間後に自動削除されます。保存しますか？' :
+                                '状態・コメントを保存しますか？報告者にも表示されます。'}
+                            <button
+                                data-testid="bug-admin-save-yes"
+                                disabled={busy}
+                                type="button"
+                                onClick={handleSave}
+                            >{'保存する'}</button>
+                            <button
+                                data-testid="bug-admin-save-no"
+                                disabled={busy}
+                                type="button"
+                                onClick={handleDisarm}
+                            >{'やめる'}</button>
+                        </span>
+                    ) : (
+                        <button
+                            data-testid="bug-admin-save"
+                            disabled={!dirty || busy}
+                            type="button"
+                            onClick={handleArm}
+                        >{'保存'}</button>
+                    )}
+                    {savedAt && !dirty ? (
+                        <span
+                            className="admin-meta"
+                            data-testid="bug-admin-saved"
+                        >{'保存しました。'}</span>
+                    ) : null}
+                </div>
+            </div>
         </div>
     );
 };
 
 BugReportDetail.propTypes = {
     onBack: PropTypes.func.isRequired,
+    onChanged: PropTypes.func.isRequired,
     reportId: PropTypes.string.isRequired
 };
 
@@ -133,14 +236,16 @@ const BugReportsView = () => {
     const [selectedId, setSelectedId] = useState(null);
     const [error, setError] = useState('');
 
-    useEffect(() => {
+    const reload = useCallback(() => {
         setError('');
         setReports(null);
         fetchBugReports(status)
             .then(data => setReports(data.reports || []))
             .catch(err => setError(err.message));
     }, [status]);
 
+    useEffect(reload, [reload]);
+
     const handleStatusChange = useCallback(e => setStatus(e.target.value), []);
     const handleOpen = useCallback(e => setSelectedId(e.currentTarget.dataset.reportId), []);
     const handleBack = useCallback(() => setSelectedId(null), []);
@@ -150,14 +255,15 @@ const BugReportsView = () => {
             <BugReportDetail
                 reportId={selectedId}
                 onBack={handleBack}
+                onChanged={reload}
             />
         );
     }
 
     return (
         <div data-testid="bug-admin-view">
             <p className="admin-meta">
-                {'閲覧専用です。状態の変更・返信は従来の運用手段で行ってください。'}
+                {'状態の変更とコメント（開発者からの返信）は、報告者の「私の不具合報告」にも反映されます。'}
             </p>
             <div className="admin-search">
                 <select
diff --git a/packages/admin/src/lib/bug-report-api.js b/packages/admin/src/lib/bug-report-api.js
@@ -1,26 +1,32 @@
 /**
- * Bug-report API client (EPIC #1073 S5, decision D) — READ-ONLY.
+ * Bug-report API client (EPIC #1073 S5, decision D — extended 2026-07-19).
  *
- * The bug-report feature itself is unchanged; the admin console only adds a
- * viewing surface. This client therefore exposes GET endpoints exclusively —
- * status changes and developer replies stay on the existing workflow. The
- * admin's Google id_token is accepted by the bug-report Lambda as an
- * additional audience (decision F), and the operator must be registered in
- * the BugReportAdmins email registry.
+ * The bug-report backend is unchanged: the admin console talks to the
+ * EXISTING bug-report admin API. Originally view-only, the console now also
+ * uses the existing PATCH endpoint for status changes and developer replies
+ * (owner-requested spec addition). The admin's Google id_token is accepted
+ * by the bug-report Lambda as an additional audience (decision F), and the
+ * operator must be registered in the BugReportAdmins email registry.
  */
 import {getIdToken} from './admin-api.js';
 
 const BUG_REPORT_API_ENDPOINT = process.env.BUG_REPORT_API_ENDPOINT || '';
 
 /**
- * Perform an authenticated GET against the bug-report API.
+ * Perform an authenticated request against the bug-report API.
+ * @param {string} method - HTTP method
  * @param {string} path - API path (starting with /admin/)
+ * @param {object} [body] - JSON body for mutations
  * @returns {Promise<object>} parsed JSON
  */
-const get = async path => {
+const request = async (method, path, body) => {
     const response = await fetch(`${BUG_REPORT_API_ENDPOINT}${path}`, {
-        method: 'GET',
-        headers: {Authorization: `Bearer ${getIdToken()}`}
+        method,
+        headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${getIdToken()}`
+        },
+        ...(body ? {body: JSON.stringify(body)} : {})
     });
     const data = await response.json().catch(() => ({}));
     if (!response.ok) {
@@ -41,13 +47,25 @@ const get = async path => {
  * @returns {Promise<object>} {reports}
  */
 const fetchBugReports = status =>
-    get(`/admin/bug-reports${status ? `?status=${encodeURIComponent(status)}` : ''}`);
+    request('GET', `/admin/bug-reports${status ? `?status=${encodeURIComponent(status)}` : ''}`);
 
 /**
  * One report with presigned download URLs (project / thumbnail / screenshots).
  * @param {string} reportId - report id
  * @returns {Promise<object>} report detail
  */
-const fetchBugReport = reportId => get(`/admin/bug-reports/${reportId}`);
+const fetchBugReport = reportId => request('GET', `/admin/bug-reports/${reportId}`);
 
-export {BUG_REPORT_API_ENDPOINT, fetchBugReports, fetchBugReport};
+/**
+ * Update the status and/or developer reply (existing bug-report admin API).
+ * Server side effects: the report is un-hidden for the reporter; a terminal
+ * status (resolved / wont_fix) starts the auto-delete TTL, reopening clears
+ * it.
+ * @param {string} reportId - report id
+ * @param {object} updates - {status?, developerReply?} (send only changes)
+ * @returns {Promise<object>} updated report
+ */
+const updateBugReport = (reportId, updates) =>
+    request('PATCH', `/admin/bug-reports/${reportId}`, updates);
+
+export {BUG_REPORT_API_ENDPOINT, fetchBugReports, fetchBugReport, updateBugReport};
diff --git a/packages/admin/test/unit/bug-reports-view.test.jsx b/packages/admin/test/unit/bug-reports-view.test.jsx
diff --git a/tools/playwright-verify/verify-admin.mjs b/tools/playwright-verify/verify-admin.mjs
