diff --git a/frontend/src/__tests__/error-callout.test.ts b/frontend/src/__tests__/error-callout.test.ts new file mode 100644 index 000000000..b5b5e70bc --- /dev/null +++ b/frontend/src/__tests__/error-callout.test.ts @@ -0,0 +1,36 @@ +/** + * Section load-failure callout: keeps the failure line as p.error, is + * announced, and offers "Try again" that re-runs the section's load. + */ +import { buildErrorCallout, renderErrorCallout, ERROR_CALLOUT_HINT } from '../lib/error-callout'; + +describe('error callout', () => { + test('keeps the exact failure line in p.error and is announced', () => { + const el = buildErrorCallout({ message: 'Failed to load plans: boom' }); + expect(el.getAttribute('role')).toBe('alert'); + const line = el.querySelector('p.error'); + // textContent, not innerHTML: markup in the reason stays text. + expect(line?.textContent).toBe('Failed to load plans: boom'); + expect(line?.querySelector('b')).toBeNull(); + expect(el.querySelector('.error-callout-hint')?.textContent).toBe(ERROR_CALLOUT_HINT); + expect(el.querySelector('svg')?.getAttribute('aria-hidden')).toBe('true'); + }); + + test('has no button without a retry handler', () => { + const el = buildErrorCallout({ message: 'Failed to load plans: x' }); + expect(el.querySelector('button')).toBeNull(); + }); + + test('"Try again" re-runs the load', () => { + const onRetry = jest.fn(); + const host = document.createElement('div'); + host.innerHTML = '

stale

'; + renderErrorCallout(host, { message: 'Failed to load recommendations: internal error', onRetry }); + expect(host.children.length).toBe(1); + const btn = host.querySelector('button')!; + expect(btn.textContent).toBe('Try again'); + expect(btn.type).toBe('button'); + btn.click(); + expect(onRetry).toHaveBeenCalledTimes(1); + }); +}); diff --git a/frontend/src/dashboard.ts b/frontend/src/dashboard.ts index a00f9de0d..04fc49386 100644 --- a/frontend/src/dashboard.ts +++ b/frontend/src/dashboard.ts @@ -16,6 +16,7 @@ import { groupRecsByCell, pageLevelRange, formatSavingsRange, triggerAutoRefresh import { getRecommendationsFreshness } from './api/recommendations'; import { buildFirstRunEmptyState, isScopeFiltered } from './first-run-empty-state'; import { showSkeletonTiles, showSkeletonBlock, teardownSkeleton } from './lib/skeleton'; +import { buildErrorCallout } from './lib/error-callout'; import { filterByEnabledProviders } from './lib/enabled-providers'; import { buildKpiTile } from './lib/kpi-tile'; import { scopeUpcomingToProvider, upcomingEmptyMessage, UPCOMING_ACCOUNT_SCOPE_NOTE } from './lib/upcoming-scope'; @@ -291,10 +292,10 @@ export async function loadDashboard(): Promise { teardownSkeleton(summary); const err = error as Error; while (summary.firstChild) summary.removeChild(summary.firstChild); - const p = document.createElement('p'); - p.classList.add('error'); - p.textContent = `Failed to load dashboard: ${err.message}`; - summary.appendChild(p); + summary.appendChild(buildErrorCallout({ + message: `Failed to load dashboard: ${err.message}`, + onRetry: () => void loadDashboard(), + })); } // Clear the upcoming-list skeleton too — shimmer next to a dashboard // error reads as a fresh fetch in-flight, which is misleading. diff --git a/frontend/src/init-error.ts b/frontend/src/init-error.ts index 963a964e4..6508145a9 100644 --- a/frontend/src/init-error.ts +++ b/frontend/src/init-error.ts @@ -9,6 +9,8 @@ * panels with an explicit error card makes the failure visible instead. */ +import { buildAlertIcon } from './lib/error-callout'; + export const INIT_ERROR_ID = 'init-error'; export const INIT_ERROR_TITLE = 'CUDly — Could not load'; @@ -48,7 +50,7 @@ export function renderInitError( const card = document.createElement('section'); card.id = INIT_ERROR_ID; - card.className = 'empty-state'; + card.className = 'empty-state init-error-card'; card.setAttribute('role', 'alert'); const heading = document.createElement('h3'); @@ -69,7 +71,10 @@ export function renderInitError( retry.textContent = 'Try again'; retry.addEventListener('click', () => reload()); - card.append(heading, body, detail, retry); + const icon = buildAlertIcon(); + icon.classList.add('init-error-icon'); + + card.append(icon, heading, body, detail, retry); document.getElementById(INIT_ERROR_ID)?.remove(); main.prepend(card); diff --git a/frontend/src/inventory.ts b/frontend/src/inventory.ts index a84c425ec..7f151eca6 100644 --- a/frontend/src/inventory.ts +++ b/frontend/src/inventory.ts @@ -17,6 +17,7 @@ import type { ProviderCoverageSection, CoverageServiceRow } from './api'; import { loadRIExchange } from './riexchange'; import { loadTrends } from './trends'; import { showSkeletonRows, teardownSkeleton } from './lib/skeleton'; +import { renderErrorCallout } from './lib/error-callout'; import { buildCoverageBar, coverageTargetFor, coverageTargetsFromConfig, type CoverageTargets, } from './lib/coverage-bar'; @@ -139,7 +140,10 @@ export async function loadActiveCommitments(): Promise { } catch (error) { teardownSkeleton(container); const err = error as Error; - renderErrorParagraph(container, `Failed to load active commitments: ${err.message}`); + renderErrorCallout(container, { + message: `Failed to load active commitments: ${err.message}`, + onRetry: () => void loadActiveCommitments(), + }); } } @@ -162,14 +166,6 @@ function clearChildren(el: HTMLElement): void { while (el.firstChild) el.removeChild(el.firstChild); } -function renderErrorParagraph(container: HTMLElement, message: string): void { - clearChildren(container); - const p = document.createElement('p'); - p.className = 'error'; - p.textContent = message; - container.appendChild(p); -} - function renderEmptyParagraph(container: HTMLElement, message: string): void { clearChildren(container); const p = document.createElement('p'); @@ -433,7 +429,10 @@ export async function loadCoverageBreakdown(): Promise { } catch (error) { teardownSkeleton(container); const err = error as Error; - renderErrorParagraph(container, `Failed to load coverage data: ${err.message}`); + renderErrorCallout(container, { + message: `Failed to load coverage data: ${err.message}`, + onRetry: () => void loadCoverageBreakdown(), + }); } } diff --git a/frontend/src/lib/error-callout.ts b/frontend/src/lib/error-callout.ts new file mode 100644 index 000000000..cdb87a247 --- /dev/null +++ b/frontend/src/lib/error-callout.ts @@ -0,0 +1,100 @@ +/** + * Error callout for a section whose data failed to load. + * + * A bare "Failed to load X: reason" line gave no way forward but a full page + * reload. The callout keeps that line (as `p.error`, so existing selectors + * and messages still match) and adds an icon, a short hint and, when the + * caller passes one, a "Try again" button that re-runs the section's own + * load function. It matches the start-up error card (init-error.ts). + * + * + * + * Text is set with textContent, never innerHTML. + */ + +export const ERROR_CALLOUT_HINT = 'Try again; if the problem continues, contact your administrator.'; + +export interface ErrorCalloutSpec { + /** The failure line, e.g. "Failed to load plans: internal error". */ + message: string; + /** Re-runs the failed load. Without it the callout has no button. */ + onRetry?: () => void; +} + +const SVG_NS = 'http://www.w3.org/2000/svg'; + +/** The callout's alert-circle icon (decorative), also used by init-error.ts. */ +export function buildAlertIcon(): SVGSVGElement { + const svg = document.createElementNS(SVG_NS, 'svg'); + svg.setAttribute('class', 'error-callout-icon'); + svg.setAttribute('viewBox', '0 0 24 24'); + svg.setAttribute('width', '20'); + svg.setAttribute('height', '20'); + svg.setAttribute('fill', 'none'); + svg.setAttribute('stroke', 'currentColor'); + svg.setAttribute('stroke-width', '2'); + svg.setAttribute('stroke-linecap', 'round'); + svg.setAttribute('stroke-linejoin', 'round'); + svg.setAttribute('aria-hidden', 'true'); + svg.setAttribute('focusable', 'false'); + const circle = document.createElementNS(SVG_NS, 'circle'); + circle.setAttribute('cx', '12'); + circle.setAttribute('cy', '12'); + circle.setAttribute('r', '10'); + const bar = document.createElementNS(SVG_NS, 'line'); + bar.setAttribute('x1', '12'); + bar.setAttribute('y1', '8'); + bar.setAttribute('x2', '12'); + bar.setAttribute('y2', '12'); + const dot = document.createElementNS(SVG_NS, 'line'); + dot.setAttribute('x1', '12'); + dot.setAttribute('y1', '16'); + dot.setAttribute('x2', '12.01'); + dot.setAttribute('y2', '16'); + svg.append(circle, bar, dot); + return svg; +} + +export function buildErrorCallout(spec: ErrorCalloutSpec): HTMLDivElement { + const callout = document.createElement('div'); + callout.className = 'error-callout'; + callout.setAttribute('role', 'alert'); + + const body = document.createElement('div'); + body.className = 'error-callout-body'; + + const message = document.createElement('p'); + message.className = 'error'; + message.textContent = spec.message; + + const hint = document.createElement('p'); + hint.className = 'error-callout-hint'; + hint.textContent = ERROR_CALLOUT_HINT; + + body.append(message, hint); + + const { onRetry } = spec; + if (onRetry) { + const retry = document.createElement('button'); + retry.type = 'button'; + retry.className = 'btn btn-small error-callout-retry'; + retry.textContent = 'Try again'; + retry.addEventListener('click', () => onRetry()); + body.appendChild(retry); + } + + callout.append(buildAlertIcon(), body); + return callout; +} + +/** Replace `container`'s children with an error callout. */ +export function renderErrorCallout(container: HTMLElement, spec: ErrorCalloutSpec): void { + container.replaceChildren(buildErrorCallout(spec)); +} diff --git a/frontend/src/plans.ts b/frontend/src/plans.ts index d44f93953..6001daf24 100644 --- a/frontend/src/plans.ts +++ b/frontend/src/plans.ts @@ -15,6 +15,7 @@ import type { PlannedPurchase } from './api'; import { populateTermSelect, populatePaymentSelect, isValidCombination, normalizePaymentValue } from './commitmentOptions'; import { openModal, closeModal } from './modal'; import { showSkeletonTiles, showSkeletonRows, teardownSkeleton } from './lib/skeleton'; +import { renderErrorCallout } from './lib/error-callout'; import { canAccess } from './permissions'; import { applyColumnFilters as applyColumnFiltersLib } from './lib/column-filters'; import { formatPaymentOption, formatTermShort } from './lib/table-format'; @@ -96,7 +97,10 @@ export async function loadPlans(): Promise { if (list) { teardownSkeleton(list); const err = error as Error; - list.innerHTML = `

Failed to load plans: ${escapeHtml(err.message)}

`; + renderErrorCallout(list, { + message: `Failed to load plans: ${err.message}`, + onRetry: () => void loadPlans(), + }); } } @@ -124,7 +128,10 @@ async function loadPlannedPurchases(): Promise { console.error('Failed to load planned purchases:', error); teardownSkeleton(container); const err = error as Error; - container.innerHTML = `

Failed to load planned purchases: ${escapeHtml(err.message)}

`; + renderErrorCallout(container, { + message: `Failed to load planned purchases: ${err.message}`, + onRetry: () => void loadPlannedPurchases(), + }); } } diff --git a/frontend/src/recommendations.ts b/frontend/src/recommendations.ts index 53f6a16d8..6452527f3 100644 --- a/frontend/src/recommendations.ts +++ b/frontend/src/recommendations.ts @@ -26,6 +26,7 @@ import type { AccountServiceOverride } from './api/accounts'; import type { RecommendationsResponse, LocalRecommendation, RecommendationsSummary, GlobalConfig } from './types'; import { openModal } from './modal'; import { showSkeletonRows, teardownSkeleton } from './lib/skeleton'; +import { renderErrorCallout } from './lib/error-callout'; import { renderKpiTiles } from './lib/kpi-tile'; import { captureFocus, restoreFocus } from './lib/focus-restore'; import { canAccess } from './permissions'; @@ -716,7 +717,10 @@ export async function loadRecommendations(): Promise { if (list) { teardownSkeleton(list); const err = error as Error; - list.innerHTML = `

Failed to load recommendations: ${escapeHtml(err.message)}

`; + renderErrorCallout(list, { + message: `Failed to load recommendations: ${err.message}`, + onRetry: () => void loadRecommendations(), + }); } } } diff --git a/frontend/src/styles/shell.css b/frontend/src/styles/shell.css index 5b86fa02b..3f5be991b 100644 --- a/frontend/src/styles/shell.css +++ b/frontend/src/styles/shell.css @@ -681,6 +681,122 @@ body.auth-pending #app { margin-top: var(--cudly-sp-4); } +/* --------------------------------------------------------------------------- + * Error, empty and loading blocks. + * + * Inline error lines (p.error / div.error) read as one alert: tinted box, + * hairline border, alert icon. A section whose load failed gets the + * .error-callout (lib/error-callout.ts): the same icon, the failure line, a + * short hint and a "Try again" that re-runs the section's load, on a card + * surface like the start-up error card (init-error.ts). + * ------------------------------------------------------------------------- */ +:root { + --cudly-error-border: color-mix(in srgb, var(--cudly-error) 28%, transparent); + --cudly-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E"); +} + +p.error, +div.error { + position: relative; + padding: var(--cudly-sp-3) var(--cudly-sp-4) var(--cudly-sp-3) calc(var(--cudly-sp-4) + 1.125rem + var(--cudly-sp-2)); + border: 1px solid var(--cudly-error-border); + border-radius: var(--cudly-r-md); + background: var(--cudly-error-bg); + color: var(--cudly-error-fg); + font-size: var(--cudly-fs-sm); + line-height: var(--cudly-lh-normal); +} + +p.error::before, +div.error::before { + content: ""; + position: absolute; + left: var(--cudly-sp-4); + top: calc(var(--cudly-sp-3) + 0.125rem); + width: 1.125rem; + height: 1.125rem; + background-color: currentColor; + -webkit-mask: var(--cudly-icon-alert) center / contain no-repeat; + mask: var(--cudly-icon-alert) center / contain no-repeat; +} + +.error-callout { + display: flex; + align-items: flex-start; + gap: var(--cudly-sp-3); + padding: var(--cudly-sp-4) var(--cudly-sp-5); + background: var(--cudly-surface); + border: 1px solid var(--cudly-error-border); + border-radius: var(--cudly-r-md); + box-shadow: var(--cudly-shadow-sm); +} + +.error-callout-icon { + flex-shrink: 0; + margin-top: 0.0625rem; + color: var(--cudly-error-fg); +} + +.error-callout-body { + min-width: 0; +} + +.error-callout p.error { + padding: 0; + border: 0; + background: none; + color: var(--cudly-text); + font-weight: var(--cudly-fw-semibold); + overflow-wrap: anywhere; +} + +.error-callout p.error::before { + content: none; +} + +.error-callout-hint { + margin-top: var(--cudly-sp-1); + color: var(--cudly-text-muted); + font-size: var(--cudly-fs-sm); +} + +.error-callout .error-callout-retry { + margin: var(--cudly-sp-3) 0 0; +} + +/* Start-up error card: the same icon, centred above the title. */ +.init-error-card .init-error-icon { + display: block; + width: 2.5rem; + height: 2.5rem; + margin: 0 auto var(--cudly-sp-3); + padding: var(--cudly-sp-2); + border-radius: var(--cudly-r-full); + background: var(--cudly-error-bg); + color: var(--cudly-error-fg); +} + +.init-error-card .btn-primary { + margin-top: var(--cudly-sp-4); +} + +/* Section/page empty cards: a little more air and a calmer heading. */ +.empty-state { + padding: var(--cudly-sp-7) var(--cudly-sp-5); +} + +.empty-state h3 { + font-size: var(--cudly-fs-md); +} + +.empty-state p { + font-size: var(--cudly-fs-sm); +} + +.card .error-callout { + box-shadow: none; +} + /* Mid-width desktops (tablet landscape, small laptops): the top bar drops * the email text (the avatar stays, and the button keeps the address as its * accessible name and tooltip) and the brand stops reserving the sidebar