Add Archer Template Library for risk acceptance form reuse
Adds a template management system to the Ivanti Queue's Archer Risk Acceptance workflow. Templates store static form content (Environment Overview, Segmentation, Mitigating Controls, etc.) organized by Vendor > Platform > Model hierarchy. Features: - Full CRUD API at /api/archer-templates with search, filter, clone, and hierarchy navigation endpoints - Template Manager page (nav: Template Mgr) with grouped list view, create/edit/clone/delete modals, role-based access - TemplateSelector component integrated into Ivanti Todo Queue for Archer workflow items with per-section copy-to-clipboard buttons and Copy All functionality - Database migration with case-insensitive uniqueness enforcement - Audit logging for all template mutations New files: - backend/migrations/add_archer_templates_table.js - backend/routes/archerTemplates.js - frontend/src/components/pages/ArcherTemplatePage.js - frontend/src/components/TemplateSelector.js - frontend/src/components/TemplateFormModal.js - frontend/src/components/DeleteConfirmModal.js
This commit is contained in:
Jordan Ramos
427
frontend/src/components/pages/ArcherTemplatePage.js
Normal file
427
frontend/src/components/pages/ArcherTemplatePage.js
Normal file
@@ -0,0 +1,427 @@
|
||||
// ArcherTemplatePage.js
|
||||
// Full-page Template Manager — browse, create, edit, clone, and delete
|
||||
// Archer Risk Acceptance templates organized by Vendor > Platform > Model.
|
||||
// Write operations require editor/admin role (Standard_User or Admin group).
|
||||
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
FileText, Plus, Edit, Copy, Trash2, ChevronDown, ChevronRight,
|
||||
Loader, AlertCircle, RefreshCw,
|
||||
} from 'lucide-react';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import TemplateFormModal from '../TemplateFormModal';
|
||||
import DeleteConfirmModal from '../DeleteConfirmModal';
|
||||
|
||||
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Styles — dark theme tactical intelligence aesthetic
|
||||
// ---------------------------------------------------------------------------
|
||||
const STYLES = {
|
||||
page: {
|
||||
minHeight: '60vh',
|
||||
},
|
||||
card: {
|
||||
background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98))',
|
||||
border: '1px solid rgba(0, 212, 255, 0.15)',
|
||||
borderRadius: '12px',
|
||||
padding: '1.5rem',
|
||||
marginBottom: '1rem',
|
||||
},
|
||||
header: {
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '0.7rem',
|
||||
fontWeight: 700,
|
||||
color: '#00d4ff',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.15em',
|
||||
marginBottom: '1rem',
|
||||
},
|
||||
toolbar: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: '1rem',
|
||||
flexWrap: 'wrap',
|
||||
gap: '0.5rem',
|
||||
},
|
||||
btn: {
|
||||
padding: '0.5rem 1rem',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid rgba(0, 212, 255, 0.3)',
|
||||
background: 'rgba(0, 212, 255, 0.1)',
|
||||
color: '#7DD3FC',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.8rem',
|
||||
fontWeight: 600,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.4rem',
|
||||
transition: 'all 0.2s',
|
||||
},
|
||||
btnDanger: {
|
||||
padding: '0.4rem 0.75rem',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid rgba(239, 68, 68, 0.3)',
|
||||
background: 'rgba(239, 68, 68, 0.1)',
|
||||
color: '#FCA5A5',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 600,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.3rem',
|
||||
transition: 'all 0.2s',
|
||||
},
|
||||
btnSmall: {
|
||||
padding: '0.35rem 0.65rem',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid rgba(0, 212, 255, 0.25)',
|
||||
background: 'rgba(0, 212, 255, 0.08)',
|
||||
color: '#7DD3FC',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 600,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.3rem',
|
||||
transition: 'all 0.2s',
|
||||
},
|
||||
vendorGroup: {
|
||||
marginBottom: '0.75rem',
|
||||
},
|
||||
vendorHeader: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
padding: '0.6rem 0.75rem',
|
||||
background: 'rgba(0, 212, 255, 0.05)',
|
||||
border: '1px solid rgba(0, 212, 255, 0.12)',
|
||||
borderRadius: '8px',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.15s',
|
||||
},
|
||||
vendorLabel: {
|
||||
fontSize: '0.85rem',
|
||||
fontWeight: 700,
|
||||
color: '#e0e0e0',
|
||||
},
|
||||
vendorCount: {
|
||||
fontSize: '0.7rem',
|
||||
color: '#64748B',
|
||||
marginLeft: 'auto',
|
||||
},
|
||||
platformSubgroup: {
|
||||
marginLeft: '1.25rem',
|
||||
marginTop: '0.5rem',
|
||||
paddingLeft: '0.75rem',
|
||||
borderLeft: '2px solid rgba(0, 212, 255, 0.1)',
|
||||
},
|
||||
platformLabel: {
|
||||
fontSize: '0.78rem',
|
||||
fontWeight: 600,
|
||||
color: '#94A3B8',
|
||||
marginBottom: '0.35rem',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.05em',
|
||||
},
|
||||
templateRow: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0.45rem 0.6rem',
|
||||
borderRadius: '6px',
|
||||
marginBottom: '0.25rem',
|
||||
transition: 'background 0.15s',
|
||||
},
|
||||
templateModel: {
|
||||
fontSize: '0.82rem',
|
||||
color: '#e0e0e0',
|
||||
fontWeight: 500,
|
||||
},
|
||||
templateActions: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.35rem',
|
||||
},
|
||||
emptyState: {
|
||||
textAlign: 'center',
|
||||
padding: '3rem 1rem',
|
||||
color: '#64748B',
|
||||
fontSize: '0.9rem',
|
||||
},
|
||||
errorBanner: {
|
||||
padding: '0.75rem 1rem',
|
||||
borderRadius: '8px',
|
||||
background: 'rgba(239, 68, 68, 0.1)',
|
||||
border: '1px solid rgba(239, 68, 68, 0.25)',
|
||||
color: '#FCA5A5',
|
||||
fontSize: '0.82rem',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
marginBottom: '1rem',
|
||||
},
|
||||
loadingState: {
|
||||
textAlign: 'center',
|
||||
padding: '3rem 1rem',
|
||||
color: '#64748B',
|
||||
fontSize: '0.85rem',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: '0.75rem',
|
||||
},
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Group templates by vendor, then by platform within each vendor.
|
||||
* Returns: [ { vendor, platforms: [ { platform, templates: [...] } ] } ]
|
||||
*/
|
||||
function groupTemplates(templates) {
|
||||
const vendorMap = {};
|
||||
for (const t of templates) {
|
||||
if (!vendorMap[t.vendor]) vendorMap[t.vendor] = {};
|
||||
if (!vendorMap[t.vendor][t.platform]) vendorMap[t.vendor][t.platform] = [];
|
||||
vendorMap[t.vendor][t.platform].push(t);
|
||||
}
|
||||
|
||||
const vendors = Object.keys(vendorMap).sort((a, b) =>
|
||||
a.localeCompare(b, undefined, { sensitivity: 'base' })
|
||||
);
|
||||
|
||||
return vendors.map(vendor => {
|
||||
const platforms = Object.keys(vendorMap[vendor]).sort((a, b) =>
|
||||
a.localeCompare(b, undefined, { sensitivity: 'base' })
|
||||
);
|
||||
return {
|
||||
vendor,
|
||||
platforms: platforms.map(platform => ({
|
||||
platform,
|
||||
templates: vendorMap[vendor][platform].sort((a, b) =>
|
||||
a.model.localeCompare(b.model, undefined, { sensitivity: 'base' })
|
||||
),
|
||||
})),
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// ArcherTemplatePage
|
||||
// ---------------------------------------------------------------------------
|
||||
export default function ArcherTemplatePage() {
|
||||
const { canWrite } = useAuth();
|
||||
const [templates, setTemplates] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [expandedVendors, setExpandedVendors] = useState({});
|
||||
|
||||
// Modal state for create/edit/clone
|
||||
const [modalState, setModalState] = useState({ open: false, mode: 'create', template: null });
|
||||
const [deleteTarget, setDeleteTarget] = useState(null);
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Fetch templates
|
||||
// -------------------------------------------------------------------------
|
||||
const fetchTemplates = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/archer-templates`, {
|
||||
credentials: 'include',
|
||||
});
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error || `Failed to fetch templates (${res.status})`);
|
||||
}
|
||||
const data = await res.json();
|
||||
setTemplates(data);
|
||||
// Expand all vendors by default on initial load
|
||||
const expanded = {};
|
||||
const grouped = groupTemplates(data);
|
||||
for (const g of grouped) {
|
||||
expanded[g.vendor] = true;
|
||||
}
|
||||
setExpandedVendors(expanded);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchTemplates();
|
||||
}, [fetchTemplates]);
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Vendor toggle
|
||||
// -------------------------------------------------------------------------
|
||||
const toggleVendor = (vendor) => {
|
||||
setExpandedVendors(prev => ({ ...prev, [vendor]: !prev[vendor] }));
|
||||
};
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Grouped data
|
||||
// -------------------------------------------------------------------------
|
||||
const grouped = groupTemplates(templates);
|
||||
const totalCount = templates.length;
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Render
|
||||
// -------------------------------------------------------------------------
|
||||
return (
|
||||
<div style={STYLES.page}>
|
||||
<div style={STYLES.card}>
|
||||
{/* Header */}
|
||||
<div style={STYLES.header}>
|
||||
<FileText size={12} style={{ display: 'inline', verticalAlign: 'middle', marginRight: '0.4rem' }} />
|
||||
Archer Template Library
|
||||
</div>
|
||||
|
||||
{/* Toolbar */}
|
||||
<div style={STYLES.toolbar}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
||||
<span style={{ color: '#94A3B8', fontSize: '0.8rem' }}>
|
||||
{totalCount} template{totalCount !== 1 ? 's' : ''}
|
||||
</span>
|
||||
<button
|
||||
style={STYLES.btn}
|
||||
onClick={fetchTemplates}
|
||||
title="Refresh"
|
||||
>
|
||||
<RefreshCw size={13} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{canWrite() && (
|
||||
<button
|
||||
style={STYLES.btn}
|
||||
onClick={() => setModalState({ open: true, mode: 'create', template: null })}
|
||||
>
|
||||
<Plus size={14} />
|
||||
Create Template
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Error banner */}
|
||||
{error && (
|
||||
<div style={STYLES.errorBanner}>
|
||||
<AlertCircle size={14} />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Loading state */}
|
||||
{loading && (
|
||||
<div style={STYLES.loadingState}>
|
||||
<Loader size={24} style={{ animation: 'spin 1s linear infinite' }} />
|
||||
<span>Loading templates...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{!loading && !error && templates.length === 0 && (
|
||||
<div style={STYLES.emptyState}>
|
||||
<FileText size={32} style={{ marginBottom: '0.75rem', opacity: 0.4 }} />
|
||||
<div>No templates found</div>
|
||||
{canWrite() && (
|
||||
<div style={{ marginTop: '0.5rem', fontSize: '0.8rem', color: '#475569' }}>
|
||||
Click "Create Template" to add your first template.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Template list grouped by vendor > platform */}
|
||||
{!loading && grouped.map(({ vendor, platforms }) => (
|
||||
<div key={vendor} style={STYLES.vendorGroup}>
|
||||
{/* Vendor header — collapsible */}
|
||||
<div
|
||||
style={STYLES.vendorHeader}
|
||||
onClick={() => toggleVendor(vendor)}
|
||||
onMouseEnter={e => { e.currentTarget.style.background = 'rgba(0, 212, 255, 0.1)'; }}
|
||||
onMouseLeave={e => { e.currentTarget.style.background = 'rgba(0, 212, 255, 0.05)'; }}
|
||||
>
|
||||
{expandedVendors[vendor]
|
||||
? <ChevronDown size={14} style={{ color: '#00d4ff' }} />
|
||||
: <ChevronRight size={14} style={{ color: '#64748B' }} />
|
||||
}
|
||||
<span style={STYLES.vendorLabel}>{vendor}</span>
|
||||
<span style={STYLES.vendorCount}>
|
||||
{platforms.reduce((sum, p) => sum + p.templates.length, 0)} template{platforms.reduce((sum, p) => sum + p.templates.length, 0) !== 1 ? 's' : ''}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Platform subgroups */}
|
||||
{expandedVendors[vendor] && platforms.map(({ platform, templates: platTemplates }) => (
|
||||
<div key={platform} style={STYLES.platformSubgroup}>
|
||||
<div style={STYLES.platformLabel}>{platform}</div>
|
||||
{platTemplates.map(template => (
|
||||
<div
|
||||
key={template.id}
|
||||
style={STYLES.templateRow}
|
||||
onMouseEnter={e => { e.currentTarget.style.background = 'rgba(0, 212, 255, 0.04)'; }}
|
||||
onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}
|
||||
>
|
||||
<span style={STYLES.templateModel}>{template.model}</span>
|
||||
{canWrite() && (
|
||||
<div style={STYLES.templateActions}>
|
||||
<button
|
||||
style={STYLES.btnSmall}
|
||||
onClick={() => setModalState({ open: true, mode: 'edit', template })}
|
||||
title="Edit template"
|
||||
>
|
||||
<Edit size={12} />
|
||||
</button>
|
||||
<button
|
||||
style={STYLES.btnSmall}
|
||||
onClick={() => setModalState({ open: true, mode: 'clone', template })}
|
||||
title="Clone template"
|
||||
>
|
||||
<Copy size={12} />
|
||||
</button>
|
||||
<button
|
||||
style={STYLES.btnDanger}
|
||||
onClick={() => setDeleteTarget(template)}
|
||||
title="Delete template"
|
||||
>
|
||||
<Trash2 size={12} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Template form modal (create/edit/clone) */}
|
||||
{modalState.open && (
|
||||
<TemplateFormModal
|
||||
mode={modalState.mode}
|
||||
template={modalState.template}
|
||||
onClose={() => setModalState({ open: false, mode: 'create', template: null })}
|
||||
onSuccess={fetchTemplates}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Delete confirmation modal */}
|
||||
<DeleteConfirmModal
|
||||
template={deleteTarget}
|
||||
onConfirm={() => {
|
||||
setDeleteTarget(null);
|
||||
fetchTemplates();
|
||||
}}
|
||||
onCancel={() => setDeleteTarget(null)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user