Merge pull request #1097 from smalruby/fix/admin-broken-attachment-images

fix(admin): アップロード未完了の添付画像を非表示 + build/ を除外

Author: smalruby3-editor-bot[bot]

packages/admin/.gitignore

@@ -0,0 +1,2 @@
+build/
+node_modules/

packages/admin/build/admin.d51173360316dfecd5b2.js

@@ -37,6 +37,13 @@ const formatDate = iso => (iso ?
 // older ones as a string — render both.
 const asText = value => (typeof value === 'string' ? value : JSON.stringify(value, null, 2));
 
+// A report can declare attachments whose upload never completed (the S3
+// object 404s even though the presigned URL is valid) — hide those instead
+// of showing a broken image.
+const hideBrokenImage = event => {
+    event.currentTarget.style.display = 'none';
+};
+
 const BugReportDetail = ({reportId, onBack}) => {
     const [detail, setDetail] = useState(null);
     const [error, setError] = useState('');
@@ -108,6 +115,7 @@ const BugReportDetail = ({reportId, onBack}) => {
                     data-testid={`bug-admin-screenshot-${index}`}
                     key={index}
                     src={url}
+                    onError={hideBrokenImage}
                 />
             ))}
         </div>
@@ -192,6 +200,7 @@ const BugReportsView = () => {
                                         alt=""
                                         className="admin-thumb"
                                         src={report.thumbnailUrl}
+                                        onError={hideBrokenImage}
                                     />
                                 ) : null}
                                 <strong>{report.projectName || '(プロジェクト名なし)'}</strong>

packages/admin/build/admin.d51173360316dfecd5b2.js.LICENSE.txt

@@ -72,6 +72,20 @@ describe('BugReportsView (issue #1085, read-only)', () => {
         expect(mockFetchReport).toHaveBeenCalledWith('r1');
     });
 
+    test('an attachment whose upload never completed is hidden, not broken', async () => {
+        render(<BugReportsView />);
+        await waitFor(() => screen.getByTestId('bug-admin-item-r1'));
+        const thumb = screen.getByTestId('bug-admin-item-r1').querySelector('img');
+        fireEvent.error(thumb);
+        expect(thumb).toHaveStyle({display: 'none'});
+
+        fireEvent.click(screen.getByTestId('bug-admin-item-r1'));
+        await waitFor(() => screen.getByTestId('bug-admin-detail'));
+        const screenshot = screen.getByTestId('bug-admin-screenshot-0');
+        fireEvent.error(screenshot);
+        expect(screenshot).toHaveStyle({display: 'none'});
+    });
+
     test('an API error surfaces instead of the list', async () => {
         mockFetchReports.mockRejectedValue(new Error('Administrator privileges are required'));
         render(<BugReportsView />);