fix(web,ci): close orphan-CRUD GUI gaps + dead exportCertificatePEM (B-1 master)

Closes four 2026-04-24 audit findings via per-page Edit modals on five
existing pages, a brand-new RenewalPoliciesPage for the rp-* CRUD surface,
and removal of one dead duplicate so the public client surface stops
growing without consumers. Anchored by a CI grep guardrail that fails
the build if any of the eight previously-orphan client functions loses
its non-test page consumer or if exportCertificatePEM is resurrected.

Per-page Edit modals (mirroring existing CreateXModal scaffolding):
- web/src/pages/OwnersPage.tsx — EditOwnerModal (name/email/team_id)
- web/src/pages/TeamsPage.tsx — EditTeamModal (name/description)
- web/src/pages/AgentGroupsPage.tsx — EditAgentGroupModal (full match-rule
  set: name/description/match_os/match_architecture/match_ip_cidr/
  match_version/enabled)
- web/src/pages/IssuersPage.tsx — EditIssuerModal (rename-only; type
  locked, config blob preserved untouched, footer note about delete+
  recreate for credential rotation)
- web/src/pages/ProfilesPage.tsx — EditProfileModal (rename + description
  only; policy fields preserved untouched, footer note about deferred
  policy editing)

New page (closes cat-b-4631ca092bee — RenewalPolicy CRUD orphan):
- web/src/pages/RenewalPoliciesPage.tsx — full CRUD page with shared
  PolicyFormModal for Create + Edit (form shape identical), 7-column
  DataTable (Policy/RenewalWindow/Auto/Retries/AlertThresholds/Created/
  Actions), comma-separated alert_thresholds_days input parser, and
  alert() surfacing of repository.ErrRenewalPolicyInUse (409) on Delete
  so operators can re-target dependent certs before deletion.
- web/src/main.tsx — adds /renewal-policies route.
- web/src/components/Layout.tsx — adds sidebar nav item slotted between
  Policies and Profiles.

Removed (closes cat-b-9b97ffb35ef7 — dead duplicate):
- web/src/api/client.ts::exportCertificatePEM — zero consumers across
  web/, MCP, CLI, tests; downloadCertificatePEM is the actual call site
  in CertificateDetailPage. Test references in client.test.ts and
  client.error.test.ts also removed.

CI regression guardrail:
- .github/workflows/ci.yml — adds 'Forbidden orphan-CRUD client function
  regression guard (B-1)' step. Greps for all eight previously-orphan
  fns (updateOwner/updateTeam/updateAgentGroup/updateIssuer/updateProfile
  + createRenewalPolicy/updateRenewalPolicy/deleteRenewalPolicy) under
  web/src/pages/ and fails the build if any has zero non-test consumers.
  Also blocks resurrection of exportCertificatePEM. Verified locally
  (all 8 fns have ≥2 consumers; exportCertificatePEM is gone) and
  against synthetic regressions.

Documentation:
- CHANGELOG.md — new B-1 section above L-1 under [unreleased].
- docs/architecture.md — Web Dashboard section gains a new paragraph
  capturing the 'every backend CRUD must have a GUI consumer' rule
  with reference to the CI guardrail.
- coverage-gap-audit-2026-04-24-v5/unified-audit.md — flips four
  findings to  RESOLVED with detailed Status blocks; bumps Live
  Tracker score 16/47 → 20/47 (P1: 9→12, P3: 1→2); adds B-1 row to
  closed-bundle index.

Verification:
- cd web && tsc --noEmit — clean
- cd web && vitest run — 9 test files, 294 tests, all passing
- cd web && vite build — clean (no new warnings)
- B-1 guardrail dry-run — all 8 client fns have ≥2 page consumers,
  exportCertificatePEM removed (good), FAIL=0

Audit findings closed:
- cat-b-31ceb6aaa9f1 (P1, updateOwner/updateTeam/updateAgentGroup orphan)
- cat-b-7a34f893a8f9 (P1, updateIssuer/updateProfile orphan, rename-only)
- cat-b-4631ca092bee (P1, RenewalPolicy CRUD orphan)
- cat-b-9b97ffb35ef7 (P3, exportCertificatePEM dead duplicate)

Deferred follow-ups:
- Fuller EditIssuerModal with credential-rotation flow (needs threat
  model: rotation reuse window, in-flight CSR cancellation, audit-trail
  granularity).
- Fuller EditProfileModal with policy-field editing (max-TTL, allowed
  EKUs, allowed key algorithms — affect already-issued cert evaluation).
- Per-page Vitest coverage for the new Edit modals (CI grep guardrail
  catches the same regression vector at lower cost).
This commit is contained in:
shankar0123
2026-04-25 15:23:15 +00:00
parent 3fc1a2222f
commit 097995e503
14 changed files with 1026 additions and 52 deletions
+119 -8
View File
@@ -1,6 +1,6 @@
import { useState } from 'react';
import { useEffect, useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { getProfiles, deleteProfile, createProfile } from '../api/client';
import { getProfiles, deleteProfile, createProfile, updateProfile } from '../api/client';
import PageHeader from '../components/PageHeader';
import DataTable from '../components/DataTable';
import type { Column } from '../components/DataTable';
@@ -288,6 +288,12 @@ function CreateProfileModal({ isOpen, onClose, onSuccess, isLoading, error }: Cr
export default function ProfilesPage() {
const queryClient = useQueryClient();
const [showCreate, setShowCreate] = useState(false);
// B-1 master closure (cat-b-7a34f893a8f9): rename + description Edit
// affordance. Deeper policy fields (allowed_ekus, max_ttl_seconds,
// allowed_key_algorithms, etc.) stay on the delete-and-recreate path
// for v1 — closing the audit's destructive-rename complaint requires
// only the simple metadata edit. Documented as a follow-up.
const [editingProfile, setEditingProfile] = useState<CertificateProfile | null>(null);
const { data, isLoading, error, refetch } = useQuery({
queryKey: ['profiles'],
@@ -307,6 +313,14 @@ export default function ProfilesPage() {
},
});
const updateMutation = useMutation({
mutationFn: ({ id, data }: { id: string; data: Partial<CertificateProfile> }) => updateProfile(id, data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['profiles'] });
setEditingProfile(null);
},
});
const columns: Column<CertificateProfile>[] = [
{
key: 'name',
@@ -382,12 +396,20 @@ export default function ProfilesPage() {
key: 'actions',
label: '',
render: (p) => (
<button
onClick={(e) => { e.stopPropagation(); if (confirm(`Delete profile ${p.name}?`)) deleteMutation.mutate(p.id); }}
className="text-xs text-red-600 hover:text-red-700 transition-colors"
>
Delete
</button>
<div className="flex gap-3 justify-end">
<button
onClick={(e) => { e.stopPropagation(); setEditingProfile(p); }}
className="text-xs text-brand-400 hover:text-brand-500 transition-colors"
>
Edit
</button>
<button
onClick={(e) => { e.stopPropagation(); if (confirm(`Delete profile ${p.name}?`)) deleteMutation.mutate(p.id); }}
className="text-xs text-red-600 hover:text-red-700 transition-colors"
>
Delete
</button>
</div>
),
},
];
@@ -420,6 +442,95 @@ export default function ProfilesPage() {
isLoading={createMutation.isPending}
error={createMutation.error ? (createMutation.error as Error).message : null}
/>
<EditProfileModal
profile={editingProfile}
onClose={() => setEditingProfile(null)}
onSave={(data) => {
if (!editingProfile) return;
updateMutation.mutate({ id: editingProfile.id, data });
}}
isSaving={updateMutation.isPending}
error={updateMutation.error ? (updateMutation.error as Error).message : null}
/>
</>
);
}
// EditProfileModal — B-1 closure (cat-b-7a34f893a8f9). Rename +
// description only. Deeper policy fields (allowed_ekus, max_ttl_seconds,
// allowed_key_algorithms, required_san_patterns, spiffe_uri_pattern,
// allow_short_lived) stay on delete-and-recreate for v1 — closing the
// audit's destructive-rename complaint requires only the simple
// metadata edit. The PUT contract takes a full Partial<CertificateProfile>
// so we forward the existing policy fields untouched.
interface EditProfileModalProps {
profile: CertificateProfile | null;
onClose: () => void;
onSave: (data: Partial<CertificateProfile>) => void;
isSaving: boolean;
error: string | null;
}
function EditProfileModal({ profile, onClose, onSave, isSaving, error }: EditProfileModalProps) {
const [name, setName] = useState('');
const [description, setDescription] = useState('');
useEffect(() => {
if (profile) {
setName(profile.name);
setDescription(profile.description || '');
}
}, [profile]);
if (!profile) return null;
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (!name.trim()) return;
onSave({
// Pass the full struct minus id/timestamps. Backend PUT needs the
// policy fields preserved so we forward them from the editing target.
name: name.trim(),
description: description.trim(),
allowed_key_algorithms: profile.allowed_key_algorithms,
max_ttl_seconds: profile.max_ttl_seconds,
allowed_ekus: profile.allowed_ekus,
required_san_patterns: profile.required_san_patterns,
spiffe_uri_pattern: profile.spiffe_uri_pattern,
allow_short_lived: profile.allow_short_lived,
enabled: profile.enabled,
});
};
return (
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={onClose}>
<div className="bg-surface border border-surface-border rounded p-5 w-full max-w-md shadow-xl" onClick={e => e.stopPropagation()}>
<h2 className="text-lg font-semibold text-ink mb-4">Edit Profile</h2>
<p className="text-xs text-ink-muted mb-4 font-mono">{profile.id}</p>
{error && <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded text-sm text-red-700">{error}</div>}
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label className="block text-sm font-medium text-ink mb-1">Name *</label>
<input value={name} onChange={e => setName(e.target.value)} required
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400" />
</div>
<div>
<label className="block text-sm font-medium text-ink mb-1">Description</label>
<textarea value={description} onChange={e => setDescription(e.target.value)} rows={2}
className="w-full bg-white border border-surface-border rounded px-3 py-2 text-sm text-ink focus:outline-none focus:border-brand-400" />
</div>
<p className="text-xs text-ink-faint">
Policy fields (TTL, EKUs, key algorithms, SAN patterns) stay on the
create-recreate path for v1. See CHANGELOG B-1 known follow-ups.
</p>
<div className="flex gap-2 pt-4">
<button type="submit" disabled={isSaving} className="flex-1 btn btn-primary disabled:opacity-50 disabled:cursor-not-allowed">
{isSaving ? 'Saving...' : 'Save Changes'}
</button>
<button type="button" onClick={onClose} className="flex-1 btn btn-ghost">Cancel</button>
</div>
</form>
</div>
</div>
);
}