Allow CVE/Vendor editing and separate completed Jira tickets
Three changes to the Jira Tickets page: 1. CVE ID and Vendor fields are now editable in the Edit Ticket modal (previously disabled when editing). Backend PUT endpoint validates CVE format and vendor length on update. 2. Completed tickets (Closed, Done, Resolved, etc.) are shown in a separate collapsible section below the active tickets table. This keeps the active work front-and-center. 3. Sync All skips completed tickets on subsequent syncs. When a ticket first reaches a completed status via sync it gets updated normally, but on future syncs it won't be included in the batch query to Jira. Response now includes skippedCompleted count.
This commit is contained in:
Jordan Ramos
@@ -549,6 +549,10 @@ export default function JiraPage() {
|
||||
closed: tickets.filter(t => isClosedStatus(t.status)).length,
|
||||
};
|
||||
|
||||
// Split filtered into active and completed for separate display
|
||||
const activeFiltered = filtered.filter(t => !isClosedStatus(t.status));
|
||||
const completedFiltered = filtered.filter(t => isClosedStatus(t.status));
|
||||
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Render
|
||||
@@ -693,6 +697,9 @@ export default function JiraPage() {
|
||||
{tickets.length === 0 ? 'No Jira tickets yet. Add one manually or create from Jira.' : 'No tickets match your filters.'}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{/* Active tickets */}
|
||||
{activeFiltered.length > 0 && (
|
||||
<div style={{ ...STYLES.card, padding: '0', overflow: 'auto' }}>
|
||||
<table style={STYLES.table}>
|
||||
<thead>
|
||||
@@ -708,7 +715,7 @@ export default function JiraPage() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filtered.map(t => (
|
||||
{activeFiltered.map(t => (
|
||||
<tr key={t.id} style={{ transition: 'background 0.15s' }}
|
||||
onMouseEnter={e => e.currentTarget.style.background = 'rgba(14, 165, 233, 0.05)'}
|
||||
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
|
||||
@@ -767,7 +774,7 @@ export default function JiraPage() {
|
||||
{canWrite() && (
|
||||
<button style={{ ...STYLES.btn, padding: '0.25rem 0.5rem', fontSize: '0.7rem' }} onClick={() => {
|
||||
setEditingId(t.id);
|
||||
setForm({ cve_id: t.cve_id, vendor: t.vendor, ticket_key: t.ticket_key, url: t.url || '', summary: t.summary || '', status: t.status });
|
||||
setForm({ cve_id: t.cve_id || '', vendor: t.vendor || '', ticket_key: t.ticket_key, url: t.url || '', summary: t.summary || '', status: t.status });
|
||||
setFormError(null);
|
||||
setShowForm(true);
|
||||
}} title="Edit">
|
||||
@@ -786,6 +793,117 @@ export default function JiraPage() {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Completed tickets — collapsible section */}
|
||||
{completedFiltered.length > 0 && (
|
||||
<details style={{ marginTop: '1.5rem' }}>
|
||||
<summary style={{
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.85rem',
|
||||
fontWeight: 600,
|
||||
color: '#64748B',
|
||||
padding: '0.5rem 0',
|
||||
userSelect: 'none',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
}}>
|
||||
<CheckCircle size={14} style={{ color: '#10B981' }} />
|
||||
Completed ({completedFiltered.length})
|
||||
<span style={{ fontSize: '0.7rem', fontWeight: 400, color: '#475569' }}>— not synced on subsequent runs</span>
|
||||
</summary>
|
||||
<div style={{ ...STYLES.card, padding: '0', overflow: 'auto', marginTop: '0.5rem', opacity: 0.75 }}>
|
||||
<table style={STYLES.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={STYLES.th}>Ticket</th>
|
||||
<th style={STYLES.th}>CVE</th>
|
||||
<th style={STYLES.th}>Vendor</th>
|
||||
<th style={STYLES.th}>Source</th>
|
||||
<th style={STYLES.th}>Summary</th>
|
||||
<th style={STYLES.th}>Status</th>
|
||||
<th style={STYLES.th}>Last Synced</th>
|
||||
<th style={STYLES.th}>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{completedFiltered.map(t => (
|
||||
<tr key={t.id} style={{ transition: 'background 0.15s' }}
|
||||
onMouseEnter={e => e.currentTarget.style.background = 'rgba(14, 165, 233, 0.05)'}
|
||||
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
|
||||
>
|
||||
<td style={STYLES.td}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
|
||||
<span style={{ fontFamily: 'monospace', fontWeight: 600, color: '#7DD3FC' }}>{t.ticket_key}</span>
|
||||
{t.url && (
|
||||
<a href={t.url} target="_blank" rel="noopener noreferrer" style={{ color: '#94A3B8' }} title="Open in Jira">
|
||||
<ExternalLink size={12} />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td style={{ ...STYLES.td, fontFamily: 'monospace', fontSize: '0.8rem' }}>{t.cve_id}</td>
|
||||
<td style={STYLES.td}>{t.vendor}</td>
|
||||
<td style={STYLES.td}>
|
||||
{(() => {
|
||||
const badge = getSourceBadge(t.source_context);
|
||||
return (
|
||||
<span style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
padding: '0.15rem 0.5rem',
|
||||
borderRadius: '9999px',
|
||||
fontSize: '0.65rem',
|
||||
fontWeight: 600,
|
||||
letterSpacing: '0.02em',
|
||||
background: `${badge.color}22`,
|
||||
color: badge.color,
|
||||
border: `1px solid ${badge.color}44`,
|
||||
whiteSpace: 'nowrap',
|
||||
}}>
|
||||
{badge.label}
|
||||
</span>
|
||||
);
|
||||
})()}
|
||||
</td>
|
||||
<td style={{ ...STYLES.td, maxWidth: '250px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.summary || '-'}</td>
|
||||
<td style={STYLES.td}>
|
||||
<span style={STYLES.badge(getStatusColor(t.status))}>
|
||||
<span style={{ width: 6, height: 6, borderRadius: '50%', background: getStatusColor(t.status) }} />
|
||||
{t.status}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ ...STYLES.td, fontSize: '0.75rem', color: '#94A3B8' }}>
|
||||
{t.last_synced_at ? new Date(t.last_synced_at).toLocaleDateString() : 'Never'}
|
||||
</td>
|
||||
<td style={STYLES.td}>
|
||||
<div style={{ display: 'flex', gap: '0.3rem' }}>
|
||||
{canWrite() && (
|
||||
<button style={{ ...STYLES.btn, padding: '0.25rem 0.5rem', fontSize: '0.7rem' }} onClick={() => {
|
||||
setEditingId(t.id);
|
||||
setForm({ cve_id: t.cve_id || '', vendor: t.vendor || '', ticket_key: t.ticket_key, url: t.url || '', summary: t.summary || '', status: t.status });
|
||||
setFormError(null);
|
||||
setShowForm(true);
|
||||
}} title="Edit">
|
||||
<Edit3 size={12} />
|
||||
</button>
|
||||
)}
|
||||
{canWrite() && (
|
||||
<button style={{ ...STYLES.btn, ...STYLES.btnDanger, padding: '0.25rem 0.5rem', fontSize: '0.7rem' }} onClick={() => deleteTicket(t.id)} title="Delete">
|
||||
<Trash2 size={12} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</details>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Lookup Modal */}
|
||||
@@ -851,11 +969,11 @@ export default function JiraPage() {
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
|
||||
<div>
|
||||
<label style={{ fontSize: '0.75rem', color: '#94A3B8', display: 'block', marginBottom: '0.25rem' }}>CVE ID</label>
|
||||
<input style={STYLES.input} placeholder="CVE-2024-1234" value={form.cve_id} onChange={e => setForm(f => ({ ...f, cve_id: e.target.value }))} disabled={!!editingId} />
|
||||
<input style={STYLES.input} placeholder="CVE-2024-1234" value={form.cve_id} onChange={e => setForm(f => ({ ...f, cve_id: e.target.value }))} />
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontSize: '0.75rem', color: '#94A3B8', display: 'block', marginBottom: '0.25rem' }}>Vendor</label>
|
||||
<input style={STYLES.input} placeholder="Vendor name" value={form.vendor} onChange={e => setForm(f => ({ ...f, vendor: e.target.value }))} disabled={!!editingId} />
|
||||
<input style={STYLES.input} placeholder="Vendor name" value={form.vendor} onChange={e => setForm(f => ({ ...f, vendor: e.target.value }))} />
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ fontSize: '0.75rem', color: '#94A3B8', display: 'block', marginBottom: '0.25rem' }}>Ticket Key</label>
|
||||
|
||||
Reference in New Issue
Block a user