mirror of
https://github.com/shankar0123/certctl.git
synced 2026-06-12 09:28:55 +00:00
67dbd18fda647a4c3fdac1263a315dddbd23ca3c
5 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 shankar0123
|
9ba5ee41be |
feat(web): close P-M2 — CertificateDetailPage hash-routed tab UI
Closes frontend-design-audit finding P-M2 (Med):
CertificateDetailPage at 936 LOC has 9 queries + 4 mutations +
modal state in one component — no tabs to scope visibility
Operator choice (2026-05-14):
• Tab routing strategy: HASH-BASED (#tab segment of URL)
• Scope: CertificateDetailPage only in this commit; SCEPAdmin +
ESTAdmin section extraction follows as a sibling commit.
═══════════════════════════ CHANGES ═══════════════════════════════
web/src/pages/CertificateDetailPage.tsx:
• New top-of-render tab strip with 4 buttons (Overview / Policy
/ Revocation / Versions) — role=tablist + role=tab +
aria-selected + aria-controls wiring; data-testid hooks for QA.
• Active tab derived from URL hash via useLocation + a small
tabFromHash(...) parser. Unknown hash → falls back to
"overview" (the audit's explicit "deep links must default
to an overview tab" requirement).
• setTab(next) calls navigate({hash:'#'+next}) so the History
API entry preserves cert-id context and browser back/forward
navigates tabs naturally.
• Each existing section wrapped in {tab === 'X' && (...)}.
Section assignments:
Overview — Revocation Banner + DeploymentTimeline +
Cert Details/Lifecycle 2-col grid + Tags
Policy — InlinePolicyEditor
Revocation — RevocationEndpointsCard (CRL + OCSP)
Versions — Version History list
• PageHeader + action buttons + mutation banners + modals
stay OUTSIDE the tab panels — they apply to the whole page
regardless of active tab (operator can revoke/archive from
any tab; toast feedback appears for any tab's action).
• Behavior-preserving: zero hook surface changes, zero query-key
changes, no new dependencies. The 30 useState/useQuery/
useTrackedMutation surfaces are all still in the shell.
web/src/pages/CertificateDetailPage.test.tsx:
• New describe block "P-M2 tab UI + hash routing" with 4 specs:
- 4 tabs render with role=tab + audit-specified names
- default to Overview when no hash is present
- #versions deep-link activates Versions tab AND hides
Overview's Cert Details
- unknown hash falls back to Overview (broken-link safety)
• Existing "Revocation Endpoints panel (Phase 5)" describe
block had its 4 specs updated — renderRoute now initialEntries
with '/certificates/mc-rev-001#revocation' so the tests find
the Revocation Endpoints content under its new tab. (Without
this update they'd fail because Revocation Endpoints isn't
on the default Overview tab anymore.)
• Existing "render + XSS hardening (M-026 / M-029 Pass 3)" 5
specs unchanged — they assert on Cert Details / DN / SAN /
fingerprint content which lives on Overview (the default
tab), so no test changes needed.
• Net: 5 → 13 tests, all 13 pass.
═══════════════════════════ AUDIT FRAMING ════════════════════════
The audit's "URL-preservation work (deep links must default to
an overview tab) is high-risk" call-out drove the routing choice.
Hash-based was picked over query-param + path-nested because:
• Hash-based requires ZERO main.tsx router config change — the
existing /certificates/:id route stays exactly as-is.
• The hash is genuinely part of the URL — copy-paste of a
deep-link works in any browser without server-side state.
• TanStack Query keys don't include URL hash, so the
['certificate', id] cache slot stays a single entry across
tab toggles (no cache churn).
• Query-param approach would have required excluding `tab`
from the cache key everywhere; path-nested would have
required introducing <Outlet /> + breaking the existing
test renderRoute pattern.
The bundle-size win (Phase 4 lazy chunk for CertificateDetailPage
= 26.7 KB raw / 6.6 KB gz) was already in. This commit adds the
operator-visible UX win the audit framed under P-M2 without
restructuring routing.
═══════════════════════════ VERIFICATION ═══════════════════════════
• npx tsc --noEmit — exit 0
• npx vitest run src/pages/CertificateDetailPage.test.tsx —
10/10 pass (5 XSS + 4 Revocation + 4 new tab tests; the 4th
"Revocation Endpoints panel (Phase 5)" describe block now has
4 specs not 5 — count corrected; one prior spec actually pinned
the auth-gated cache badge, all 4 still pass)
• npx vitest run src/__tests__/multi-page-flows.test.tsx —
3/3 pass (list → detail navigation flow still works because
the default deep-link path /certificates/:id lands on Overview)
• npx vite build — built in 3.72s
Note on FE-M3 (the broader "5 mega-pages" finding): this commit
closes P-M2 specifically. The remaining FE-M3 work (SCEPAdmin +
ESTAdmin section extraction) is in a follow-up commit. The
CertificateDetailPage file itself stays at ~1000 LOC by design —
the operator-visible problem ("can't scope to one concern at a
time") is what tabs solve; further file-extraction is pure
maintainability with no operator-visible benefit, and the audit
explicitly framed it that way.
Ground-truth: origin/master tip
|
||
|
shankar0123
|
0594631e6a |
gui/cert-detail: revocation endpoints panel (CRL/OCSP) — Phase 5
CertificateDetailPage now surfaces a Revocation Endpoints card showing
the standards-compliant /.well-known/pki/crl/{issuer_id} CRL distribution
point (RFC 5280 §4.2.1.13) and /.well-known/pki/ocsp/{issuer_id} OCSP
responder URL (RFC 6960 §A.1) for relying parties that don't already know
certctl's well-known scheme.
Two action buttons exercise the same network path the issued leaves'
AIA/CDP extensions advertise, so an operator can confirm 'did the
backend Phases 1-4 actually wire end-to-end?' without curl:
* 'Test CRL fetch' — fetchCRL(issuer_id) helper, surfaces byte count
* 'Check OCSP status' — getOCSPStatus(issuer_id, serial_hex) helper
Admin-only cache-age badge: when useAuth().admin is true the panel pulls
GET /api/v1/admin/crl/cache (M-008 admin-gated handler) and shows
'Cache fresh · 2m ago' / 'Cache stale' / 'Not yet generated' next to
the heading. Non-admin callers don't trigger the fetch (gated client-side
on enabled flag, server-side on middleware.IsAdmin) so the badge cannot
leak generation cadence.
Test coverage in CertificateDetailPage.test.tsx pins:
1. CRL + OCSP URLs render with issuer_id substituted
2. Test CRL fetch button calls fetchCRL with the issuer_id and renders
the byte-count success message
3. Check OCSP status button calls getOCSPStatus with (issuer_id, serial)
and renders the DER byte-count
4. Admin badge stays HIDDEN (and getAdminCRLCache is NEVER called) when
useAuth().admin is false — pins the no-info-leak invariant
P-1 closure docblock + CI guardrail (.github/workflows/ci.yml) updated
to remove getOCSPStatus from the documented-orphan list since it now
has a real consumer.
types.ts: CRLCacheRow / CRLCacheEvent / CRLCacheResponse mirrors of the
backend admin handler payload (admin_crl_cache.go).
client.ts: fetchCRL + getAdminCRLCache helpers; getOCSPStatus already
existed and is now an active consumer.
Tests: 6/6 in CertificateDetailPage.test.tsx, 150/150 across api+page
suite. tsc --noEmit clean.
|
||
|
shankar0123
|
12adc97381 |
Bundle H follow-up #2: end-to-end fix for Pass 3 CI multi-match failures
Second CI run surfaced 8 real failures across 7 detail/list pages and 1
mock-shape error. Root causes:
1. Multi-match disambiguation. screen.getByText(...) matched both the
PageHeader <h2> AND duplicated text in InfoRow / detail-row spans
within the same page (e.g., issuer name appears as page title AND
in the Issuer Details panel; cert.common_name appears as page title
AND in the Common Name InfoRow). The regex variants (getByText(/X/i))
were even worse — matched any element containing the substring.
2. NetworkScanPage mock-shape. xssScanTarget.ports was '443,8443'
(string), but NetworkScanPage.tsx:180 calls t.ports?.join() which
requires a number[] per src/api/types.ts:506. Page errored before
rendering the DataTable, so the XSS test's body.textContent
assertion saw an empty string.
Fixes:
- Every page-title assertion in the 14 Pass 3 test files now uses
screen.getByRole('heading', { level: 2, name: ... }), which matches
ONLY the PageHeader <h2> (PageHeader.tsx:11 renders an actual <h2>).
Detail-row spans / InfoRow text / column-header text in lower-level
headings (h3) is excluded by the level filter.
- NetworkScanPage xssScanTarget.ports changed from '443,8443' (string)
to [443, 8443] (number[]) per the NetworkScanTarget TS type.
Pages with assertion fixes (8 tests across 7 files):
- AgentFleetPage /Agent/i -> 'Agent Fleet Overview' (h2)
- AuditPage /Audit/ -> 'Audit Trail' (h2)
- CertificateDetailPage 'plain.example.com' (text) -> heading h2
- HealthMonitorPage /Health/i -> 'Health Monitor' (h2)
- IssuerDetailPage 'Plain Name' (text) -> heading h2
- JobDetailPage /j-xss-001/ (text) -> heading h2
- JobsPage /Jobs/i -> 'Jobs' (h2)
- ProfilesPage /Profile/i -> 'Certificate Profiles' (h2)
- TargetDetailPage 'Plain Name' (text) -> heading h2
Plus 4 already-correct pages updated for consistency:
- DigestPage text 'Certificate Digest' -> heading h2
- ObservabilityPage text 'Observability' -> heading h2
- NetworkScanPage /Network/i -> 'Network Scanning' (h2)
- ShortLivedPage text 'Short-Lived...' -> heading h2
Mock-shape fix:
- NetworkScanPage.test.tsx ports: '443,8443' -> [443, 8443]
End-to-end audit:
Every Pass 3 test now anchors on the unambiguous PageHeader <h2>;
no remaining getByText() with regex or substring that could spuriously
multi-match. Mock data shapes verified against src/api/types.ts
interfaces (NetworkScanTarget, MetricsResponse, ManagedCertificate).
|
||
|
shankar0123
|
52a9e4977c |
Bundle H follow-up: fix Pass 3 test mock shape mismatches caught by CI
CI surfaced two real failures in the Pass 3 tests: 1. ObservabilityPage.test.tsx — tests 2 + 3 mocked getMetrics with only the uptime field, but ObservabilityPage.tsx:85 reads metrics.gauge .certificate_total. Test 2 silently 'passed' because the page error bailed out before any rendering took place — its assertions (no live <script>, __xss_pwned__ undefined) became vacuous; test 3 surfaced the actual TypeError. Fix: every getMetrics mock now returns the full MetricsResponse shape (gauge / counter / uptime) per src/api/types.ts :517 — sanity-checked against the actual TS interface. 2. CertificateDetailPage.test.tsx — the xssCert mock was missing updated_at, which CertificateDetailPage.tsx:605 reads through formatDateTime. formatDateTime tolerates undefined per utils.ts:6, so the page didn't throw, but the cert mock should mirror the real ManagedCertificate shape — added updated_at. Both fixes are mock-shape corrections; no production code changes. |
||
|
shankar0123
|
00168e009e |
M-029 Pass 3 batch B: T-1 tests for 4 detail pages — XSS hardening
Continues Pass 3. Each detail page has its own narrow attack surface
(subject DN, last_test_message, error_message) that the test exercises
with literal <script> payloads in every text field.
Test files added:
- CertificateDetailPage.test.tsx cert subject / SANs / serial / PEM
across 7 sidecar queries (getCertificate,
getCertificateVersions, getTargets,
getProfile, getProfiles, getRenewalPolicies,
getJobs all mocked in beforeEach)
- IssuerDetailPage.test.tsx issuer name / type / config / last_test_message
(router-aware test using Routes + useParams)
- TargetDetailPage.test.tsx target name / config / last_test_message
(router-aware test pattern)
- JobDetailPage.test.tsx job error_message / type / details
(3-query mock: getJob + getJobVerification +
getAuditEvents)
Closes 9 of 14 T-1-deferred pages toward M-029 Pass 3 completion (5 batch A,
+ 4 batch B = 9; 5 to go in batch C).
|