feat(templates): expandable failure details in detail history tab

Rows with errors, blockers, or warnings now show a '▶ click for details'
hint and expand inline on click, matching the behaviour in History & Audit.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Paul Huliganga 2026-04-21 15:03:18 -04:00
parent 1c5b131f19
commit 4f9cb43ac8
1 changed files with 36 additions and 9 deletions

View File

@ -444,23 +444,50 @@ function _renderDetailTab(t, tabKey) {
if (!records.length) {
content.innerHTML = `<div class="callout info"><span class="callout-icon"></span>No migration history for this template yet.</div>`;
} else {
const rows = [...records].reverse().map(r => {
const hasDetail = r.error || (r.blockers||[]).length || (r.warnings||[]).length;
const detailHtml = hasDetail ? `
<tr class="row-expanded-content" style="display:none">
<td colspan="4">
<div class="row-expand-body">
${(r.blockers||[]).map(b => `<div style="color:var(--error);font-size:12px">🚫 ${escHtml(b)}</div>`).join('')}
${(r.warnings||[]).map(w => `<div style="color:var(--warning);font-size:12px">⚠ ${escHtml(w)}</div>`).join('')}
${r.error ? `<div style="color:var(--error);font-size:12px">❌ ${escHtml(r.error)}</div>` : ''}
</div>
</td>
</tr>` : '';
return `
<tr class="${hasDetail ? 'row-expandable' : ''}" style="${hasDetail ? 'cursor:pointer' : ''}">
<td>${(r.timestamp||'').slice(0,19).replace('T',' ')}</td>
<td>${escHtml(r.action||'—')}</td>
<td>
<span class="badge ${r.status==='success'?'badge-green':'badge-red'}">${r.status}</span>
${hasDetail ? '<span style="font-size:10px;color:var(--text-muted);margin-left:4px">▶ click for details</span>' : ''}
</td>
<td class="mono">${escHtml(r.docusign_template_id||'—')}</td>
</tr>${detailHtml}`;
}).join('');
content.innerHTML = `
<div class="card">
<div class="table-wrap">
<table>
<thead><tr><th>Time</th><th>Action</th><th>Status</th><th>Docusign ID</th></tr></thead>
<tbody>
${[...records].reverse().map(r => `
<tr>
<td>${(r.timestamp||'').slice(0,19).replace('T',' ')}</td>
<td>${escHtml(r.action||'—')}</td>
<td><span class="badge ${r.status==='success'?'badge-green':'badge-red'}">${r.status}</span></td>
<td class="mono">${escHtml(r.docusign_template_id||'—')}</td>
</tr>`).join('')}
</tbody>
<tbody>${rows}</tbody>
</table>
</div>
</div>`;
content.querySelectorAll('.row-expandable').forEach(row => {
row.addEventListener('click', () => {
const next = row.nextElementSibling;
if (next?.classList.contains('row-expanded-content')) {
const open = next.style.display !== 'none';
next.style.display = open ? 'none' : 'table-row';
row.querySelector('span[style*="text-muted"]').textContent = open ? '▶ click for details' : '▼ hide details';
}
});
});
}
}).catch(() => {
content.innerHTML = `<div class="callout error"><span class="callout-icon">❌</span>Failed to load history.</div>`;