Add issue workflow progress tracker
This commit is contained in:
@@ -2657,6 +2657,58 @@ button:disabled,
|
||||
font-size: 0.62rem;
|
||||
}
|
||||
|
||||
.issue-card-progress {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.issue-card-progress > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.issue-card-progress strong {
|
||||
color: var(--ops-cyan);
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.issue-card-progress small {
|
||||
color: var(--ops-muted);
|
||||
font-family: "JetBrains Mono", Consolas, monospace;
|
||||
font-size: 0.58rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.issue-card-progress > i {
|
||||
display: block;
|
||||
height: 3px;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: rgba(126, 215, 255, 0.12);
|
||||
}
|
||||
|
||||
.issue-card-progress > i > b {
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, var(--ops-cyan), var(--request-green));
|
||||
}
|
||||
|
||||
.issue-card-progress.is-attention strong {
|
||||
color: var(--request-amber);
|
||||
}
|
||||
|
||||
.issue-card-progress.is-attention > i > b {
|
||||
background: var(--request-amber);
|
||||
}
|
||||
|
||||
.issue-card-progress.is-complete strong {
|
||||
color: var(--request-green);
|
||||
}
|
||||
|
||||
.issue-modal-backdrop {
|
||||
position: fixed;
|
||||
z-index: 998;
|
||||
@@ -2709,6 +2761,131 @@ button:disabled,
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.issue-pipeline-card {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(126, 215, 255, 0.3);
|
||||
border-radius: var(--ops-radius-lg);
|
||||
background: linear-gradient(120deg, rgba(14, 165, 233, 0.07), rgba(126, 215, 255, 0.025));
|
||||
}
|
||||
|
||||
.issue-pipeline-card.is-attention {
|
||||
border-color: rgba(255, 192, 84, 0.42);
|
||||
background: linear-gradient(120deg, rgba(255, 192, 84, 0.08), rgba(255, 192, 84, 0.025));
|
||||
}
|
||||
|
||||
.issue-pipeline-card.is-complete {
|
||||
border-color: rgba(72, 224, 178, 0.38);
|
||||
background: linear-gradient(120deg, rgba(72, 224, 178, 0.075), rgba(72, 224, 178, 0.025));
|
||||
}
|
||||
|
||||
.issue-pipeline-card > header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.issue-pipeline-card > header > div {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.issue-pipeline-card h3,
|
||||
.issue-pipeline-card p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.issue-pipeline-card p {
|
||||
color: var(--ops-muted);
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.issue-pipeline-card > ol {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
gap: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.issue-pipeline-card li {
|
||||
position: relative;
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 7px;
|
||||
min-width: 0;
|
||||
color: var(--ops-muted);
|
||||
font-size: 0.62rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.issue-pipeline-card li::before {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 12px;
|
||||
right: 50%;
|
||||
left: -50%;
|
||||
height: 2px;
|
||||
background: var(--ops-line-soft);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.issue-pipeline-card li:first-child::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.issue-pipeline-card li > i {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
place-items: center;
|
||||
border: 1px solid var(--ops-line);
|
||||
border-radius: 50%;
|
||||
background: var(--ops-panel);
|
||||
font-family: "JetBrains Mono", Consolas, monospace;
|
||||
font-size: 0.58rem;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.issue-pipeline-card li.is-complete,
|
||||
.issue-pipeline-card li.is-active {
|
||||
color: var(--ops-text);
|
||||
}
|
||||
|
||||
.issue-pipeline-card li.is-complete::before,
|
||||
.issue-pipeline-card li.is-active::before,
|
||||
.issue-pipeline-card li.is-attention::before {
|
||||
background: var(--ops-cyan);
|
||||
}
|
||||
|
||||
.issue-pipeline-card li.is-complete > i {
|
||||
border-color: var(--request-green);
|
||||
color: #061813;
|
||||
background: var(--request-green);
|
||||
}
|
||||
|
||||
.issue-pipeline-card li.is-active > i {
|
||||
border-color: var(--ops-cyan);
|
||||
color: var(--ops-cyan);
|
||||
box-shadow: 0 0 14px rgba(126, 215, 255, 0.28);
|
||||
}
|
||||
|
||||
.issue-pipeline-card li.is-attention {
|
||||
color: var(--request-amber);
|
||||
}
|
||||
|
||||
.issue-pipeline-card li.is-attention > i {
|
||||
border-color: var(--request-amber);
|
||||
color: var(--request-amber);
|
||||
box-shadow: 0 0 14px rgba(255, 192, 84, 0.25);
|
||||
}
|
||||
|
||||
.issue-modal-toolbar strong {
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
@@ -3608,4 +3785,8 @@ button:disabled,
|
||||
padding-right: 13px;
|
||||
padding-left: 13px;
|
||||
}
|
||||
.issue-pipeline-card > header { flex-direction: column; }
|
||||
.issue-pipeline-card > ol { grid-template-columns: 1fr; gap: 8px; }
|
||||
.issue-pipeline-card li { grid-template-columns: 25px minmax(0, 1fr); align-items: center; justify-items: start; text-align: left; }
|
||||
.issue-pipeline-card li::before { top: -9px; right: auto; left: 12px; width: 2px; height: 10px; }
|
||||
}
|
||||
|
||||
@@ -40,6 +40,20 @@ type PortalItem = {
|
||||
related_item_id?: number | null
|
||||
is_resolved?: boolean
|
||||
resolved_at?: string | null
|
||||
workflow?: {
|
||||
current_step?: number
|
||||
total_steps?: number
|
||||
stage?: string
|
||||
stage_label?: string
|
||||
headline?: string
|
||||
message?: string
|
||||
state?: 'active' | 'attention' | 'complete'
|
||||
steps?: Array<{
|
||||
key: string
|
||||
label: string
|
||||
state: 'waiting' | 'active' | 'attention' | 'complete'
|
||||
}>
|
||||
}
|
||||
confirmation?: {
|
||||
status?: string | null
|
||||
attempts_sent?: number
|
||||
@@ -345,6 +359,53 @@ const formatIssueStatus = (value?: string | null) => {
|
||||
return labels[String(value ?? '').toLowerCase()] ?? String(value ?? 'Unknown').replaceAll('_', ' ')
|
||||
}
|
||||
|
||||
function IssuePipeline({ item, compact = false }: { item: PortalItem; compact?: boolean }) {
|
||||
const workflow = item.issue?.workflow
|
||||
const steps = workflow?.steps ?? []
|
||||
const currentStep = workflow?.current_step ?? 1
|
||||
const totalSteps = workflow?.total_steps ?? 6
|
||||
const state = workflow?.state ?? 'active'
|
||||
|
||||
if (compact) {
|
||||
return (
|
||||
<div className={`issue-card-progress is-${state}`}>
|
||||
<span>
|
||||
<strong>{workflow?.stage_label ?? formatIssueStatus(item.status)}</strong>
|
||||
<small>Step {currentStep} of {totalSteps}</small>
|
||||
</span>
|
||||
<i aria-hidden="true">
|
||||
<b style={{ width: `${Math.max(0, Math.min(100, (currentStep / totalSteps) * 100))}%` }} />
|
||||
</i>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<section className={`issue-pipeline-card is-${state}`} aria-label="Issue progress">
|
||||
<header>
|
||||
<div>
|
||||
<span className="section-kicker">Issue progress</span>
|
||||
<h3>{workflow?.headline ?? formatIssueStatus(item.status)}</h3>
|
||||
<p>{workflow?.message ?? 'The support team will update this issue as work progresses.'}</p>
|
||||
</div>
|
||||
<span className="small-pill">Step {currentStep} of {totalSteps}</span>
|
||||
</header>
|
||||
<ol>
|
||||
{steps.map((step, index) => (
|
||||
<li
|
||||
key={step.key}
|
||||
className={`is-${step.state}`}
|
||||
aria-current={step.state === 'active' || step.state === 'attention' ? 'step' : undefined}
|
||||
>
|
||||
<i aria-hidden="true">{step.state === 'complete' ? '✓' : index + 1}</i>
|
||||
<span>{step.label}</span>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
const toPositiveInt = (value: string) => {
|
||||
const parsed = Number.parseInt(value, 10)
|
||||
if (Number.isNaN(parsed) || parsed <= 0) return null
|
||||
@@ -1999,14 +2060,12 @@ export default function PortalClient({ workspace }: PortalClientProps) {
|
||||
<span className="small-pill is-muted">{item.priority}</span>
|
||||
</div>
|
||||
<p>{item.description}</p>
|
||||
{item.kind === 'issue' ? <IssuePipeline item={item} compact /> : null}
|
||||
<div className="portal-item-row-meta">
|
||||
<span>#{item.id}</span>
|
||||
<span>
|
||||
Status:{' '}
|
||||
{item.kind === 'request'
|
||||
? item.workflow?.stage_label ?? item.status
|
||||
: formatIssueStatus(item.status)}
|
||||
</span>
|
||||
{item.kind === 'request' ? (
|
||||
<span>Status: {item.workflow?.stage_label ?? item.status}</span>
|
||||
) : null}
|
||||
{isAdmin ? <span>By: {item.created_by_username}</span> : null}
|
||||
<span>Updated: {formatDate(item.last_activity_at)}</span>
|
||||
</div>
|
||||
@@ -2086,6 +2145,8 @@ export default function PortalClient({ workspace }: PortalClientProps) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedItem.kind === 'issue' ? <IssuePipeline item={selectedItem} /> : null}
|
||||
|
||||
{selectedItem.kind === 'issue' && selectedItem.external_ref?.startsWith('/requests/') ? (
|
||||
<div className="issue-linked-request">
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user