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
523
frontend/src/components/TemplateFormModal.js
Normal file
523
frontend/src/components/TemplateFormModal.js
Normal file
@@ -0,0 +1,523 @@
|
||||
// TemplateFormModal.js
|
||||
// Modal for creating, editing, and cloning Archer Risk Acceptance templates.
|
||||
// Supports three modes:
|
||||
// - create: all fields empty
|
||||
// - edit: pre-populated from existing template
|
||||
// - clone: sections pre-populated from source, hierarchy fields empty
|
||||
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { X, Save, AlertCircle, Loader } from 'lucide-react';
|
||||
|
||||
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Section definitions — ordered as static first, then semi-static
|
||||
// ---------------------------------------------------------------------------
|
||||
const SECTIONS = [
|
||||
{ key: 'environment_overview', label: 'Environment Overview' },
|
||||
{ key: 'segmentation', label: 'Segmentation' },
|
||||
{ key: 'mitigating_controls', label: 'Mitigating Controls' },
|
||||
{ key: 'additional_info', label: 'Additional Info/Background' },
|
||||
{ key: 'charter_network_banner', label: 'Charter Network Banner' },
|
||||
{ key: 'data_classification', label: 'Data Classification' },
|
||||
{ key: 'charter_network', label: 'Charter Network' },
|
||||
{ key: 'additional_access_list', label: 'Additional Access List' },
|
||||
];
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Styles
|
||||
// ---------------------------------------------------------------------------
|
||||
const STYLES = {
|
||||
backdrop: {
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
zIndex: 70,
|
||||
background: 'rgba(10, 14, 39, 0.95)',
|
||||
backdropFilter: 'blur(8px)',
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'center',
|
||||
padding: '2rem 1rem',
|
||||
overflowY: 'auto',
|
||||
},
|
||||
modal: {
|
||||
background: 'linear-gradient(135deg, rgba(30,41,59,0.98) 0%, rgba(15,23,42,0.99) 100%)',
|
||||
border: '1px solid rgba(0, 212, 255, 0.2)',
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 20px 60px rgba(0,0,0,0.7), 0 0 30px rgba(0,212,255,0.08)',
|
||||
width: '100%',
|
||||
maxWidth: '700px',
|
||||
padding: '1.75rem 2rem',
|
||||
marginTop: '1rem',
|
||||
marginBottom: '2rem',
|
||||
},
|
||||
header: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: '1.25rem',
|
||||
},
|
||||
title: {
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '0.8rem',
|
||||
fontWeight: 700,
|
||||
color: '#00d4ff',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.12em',
|
||||
},
|
||||
closeBtn: {
|
||||
background: 'transparent',
|
||||
border: 'none',
|
||||
color: '#64748B',
|
||||
cursor: 'pointer',
|
||||
padding: '0.25rem',
|
||||
borderRadius: '4px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
fieldGroup: {
|
||||
marginBottom: '1rem',
|
||||
},
|
||||
label: {
|
||||
display: 'block',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 600,
|
||||
color: '#94A3B8',
|
||||
marginBottom: '0.3rem',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.05em',
|
||||
},
|
||||
input: {
|
||||
width: '100%',
|
||||
padding: '0.55rem 0.75rem',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid rgba(0, 212, 255, 0.2)',
|
||||
background: 'rgba(15, 23, 42, 0.8)',
|
||||
color: '#e0e0e0',
|
||||
fontSize: '0.85rem',
|
||||
fontFamily: 'inherit',
|
||||
outline: 'none',
|
||||
transition: 'border-color 0.2s',
|
||||
boxSizing: 'border-box',
|
||||
},
|
||||
inputError: {
|
||||
borderColor: '#ef4444',
|
||||
},
|
||||
textarea: {
|
||||
width: '100%',
|
||||
padding: '0.55rem 0.75rem',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid rgba(0, 212, 255, 0.15)',
|
||||
background: 'rgba(15, 23, 42, 0.8)',
|
||||
color: '#e0e0e0',
|
||||
fontSize: '0.82rem',
|
||||
fontFamily: 'inherit',
|
||||
outline: 'none',
|
||||
resize: 'vertical',
|
||||
minHeight: '80px',
|
||||
transition: 'border-color 0.2s',
|
||||
boxSizing: 'border-box',
|
||||
},
|
||||
errorText: {
|
||||
fontSize: '0.72rem',
|
||||
color: '#ef4444',
|
||||
marginTop: '0.2rem',
|
||||
},
|
||||
errorBanner: {
|
||||
padding: '0.65rem 0.85rem',
|
||||
borderRadius: '8px',
|
||||
background: 'rgba(239, 68, 68, 0.1)',
|
||||
border: '1px solid rgba(239, 68, 68, 0.25)',
|
||||
color: '#FCA5A5',
|
||||
fontSize: '0.8rem',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
marginBottom: '1rem',
|
||||
},
|
||||
sectionDivider: {
|
||||
margin: '1.25rem 0 0.75rem',
|
||||
padding: '0.4rem 0',
|
||||
borderTop: '1px solid rgba(0, 212, 255, 0.08)',
|
||||
fontSize: '0.7rem',
|
||||
fontWeight: 700,
|
||||
color: '#00d4ff',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.12em',
|
||||
},
|
||||
footer: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
gap: '0.75rem',
|
||||
marginTop: '1.5rem',
|
||||
paddingTop: '1rem',
|
||||
borderTop: '1px solid rgba(0, 212, 255, 0.08)',
|
||||
},
|
||||
cancelBtn: {
|
||||
padding: '0.55rem 1.1rem',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid rgba(100,116,139,0.4)',
|
||||
background: 'transparent',
|
||||
color: '#94A3B8',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.8rem',
|
||||
fontWeight: 600,
|
||||
transition: 'all 0.2s',
|
||||
},
|
||||
submitBtn: {
|
||||
padding: '0.55rem 1.25rem',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid rgba(0, 212, 255, 0.4)',
|
||||
background: 'rgba(0, 212, 255, 0.12)',
|
||||
color: '#7DD3FC',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.8rem',
|
||||
fontWeight: 600,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.4rem',
|
||||
transition: 'all 0.2s',
|
||||
},
|
||||
submitBtnDisabled: {
|
||||
opacity: 0.5,
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
charCount: {
|
||||
fontSize: '0.65rem',
|
||||
color: '#475569',
|
||||
textAlign: 'right',
|
||||
marginTop: '0.15rem',
|
||||
},
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* TemplateFormModal
|
||||
*
|
||||
* Props:
|
||||
* mode {'create'|'edit'|'clone'} Determines form behavior
|
||||
* template {object|null} Source template (for edit/clone)
|
||||
* onClose {function} Callback to close the modal
|
||||
* onSuccess {function} Callback after successful save (refreshes list)
|
||||
*/
|
||||
export default function TemplateFormModal({ mode = 'create', template = null, onClose, onSuccess }) {
|
||||
// Form state
|
||||
const [vendor, setVendor] = useState('');
|
||||
const [platform, setPlatform] = useState('');
|
||||
const [model, setModel] = useState('');
|
||||
const [sections, setSections] = useState(() => {
|
||||
const initial = {};
|
||||
for (const s of SECTIONS) {
|
||||
initial[s.key] = '';
|
||||
}
|
||||
return initial;
|
||||
});
|
||||
|
||||
// Validation and submission state
|
||||
const [fieldErrors, setFieldErrors] = useState({});
|
||||
const [apiError, setApiError] = useState(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const vendorRef = useRef(null);
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Initialize form based on mode
|
||||
// -------------------------------------------------------------------------
|
||||
useEffect(() => {
|
||||
if (mode === 'edit' && template) {
|
||||
setVendor(template.vendor || '');
|
||||
setPlatform(template.platform || '');
|
||||
setModel(template.model || '');
|
||||
const sectionValues = {};
|
||||
for (const s of SECTIONS) {
|
||||
sectionValues[s.key] = template[s.key] || '';
|
||||
}
|
||||
setSections(sectionValues);
|
||||
} else if (mode === 'clone' && template) {
|
||||
// Clone: copy sections, leave hierarchy empty
|
||||
setVendor('');
|
||||
setPlatform('');
|
||||
setModel('');
|
||||
const sectionValues = {};
|
||||
for (const s of SECTIONS) {
|
||||
sectionValues[s.key] = template[s.key] || '';
|
||||
}
|
||||
setSections(sectionValues);
|
||||
}
|
||||
// create mode: all fields already empty (initial state)
|
||||
}, [mode, template]);
|
||||
|
||||
// Focus the vendor input on mount
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => vendorRef.current?.focus(), 80);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
// Handle Escape key
|
||||
useEffect(() => {
|
||||
const handleKey = (e) => {
|
||||
if (e.key === 'Escape') onClose?.();
|
||||
};
|
||||
document.addEventListener('keydown', handleKey);
|
||||
return () => document.removeEventListener('keydown', handleKey);
|
||||
}, [onClose]);
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Validation
|
||||
// -------------------------------------------------------------------------
|
||||
function validate() {
|
||||
const errors = {};
|
||||
if (!vendor.trim()) errors.vendor = 'Vendor is required';
|
||||
else if (vendor.trim().length > 100) errors.vendor = 'Vendor must be 100 characters or fewer';
|
||||
|
||||
if (!platform.trim()) errors.platform = 'Platform is required';
|
||||
else if (platform.trim().length > 100) errors.platform = 'Platform must be 100 characters or fewer';
|
||||
|
||||
if (!model.trim()) errors.model = 'Model is required';
|
||||
else if (model.trim().length > 100) errors.model = 'Model must be 100 characters or fewer';
|
||||
|
||||
setFieldErrors(errors);
|
||||
return Object.keys(errors).length === 0;
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Submit
|
||||
// -------------------------------------------------------------------------
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
setApiError(null);
|
||||
|
||||
if (!validate()) return;
|
||||
|
||||
setSubmitting(true);
|
||||
|
||||
try {
|
||||
const body = {
|
||||
vendor: vendor.trim(),
|
||||
platform: platform.trim(),
|
||||
model: model.trim(),
|
||||
};
|
||||
|
||||
// Include section fields
|
||||
for (const s of SECTIONS) {
|
||||
body[s.key] = sections[s.key];
|
||||
}
|
||||
|
||||
let url;
|
||||
let method;
|
||||
|
||||
if (mode === 'edit' && template) {
|
||||
// PUT to update
|
||||
url = `${API_BASE}/archer-templates/${template.id}`;
|
||||
method = 'PUT';
|
||||
} else if (mode === 'clone' && template) {
|
||||
// POST to clone endpoint
|
||||
url = `${API_BASE}/archer-templates/${template.id}/clone`;
|
||||
method = 'POST';
|
||||
// Clone endpoint only needs vendor, platform, model
|
||||
delete body.environment_overview;
|
||||
delete body.segmentation;
|
||||
delete body.mitigating_controls;
|
||||
delete body.additional_info;
|
||||
delete body.charter_network_banner;
|
||||
delete body.data_classification;
|
||||
delete body.charter_network;
|
||||
delete body.additional_access_list;
|
||||
} else {
|
||||
// POST to create
|
||||
url = `${API_BASE}/archer-templates`;
|
||||
method = 'POST';
|
||||
}
|
||||
|
||||
const res = await fetch(url, {
|
||||
method,
|
||||
credentials: 'include',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (res.status === 409) {
|
||||
setApiError(data.error || 'A template with this vendor/platform/model combination already exists');
|
||||
} else {
|
||||
setApiError(data.error || `Request failed (${res.status})`);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Success — close and refresh
|
||||
onSuccess?.();
|
||||
onClose?.();
|
||||
} catch (err) {
|
||||
setApiError(err.message || 'Network error — please try again');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Section change handler
|
||||
// -------------------------------------------------------------------------
|
||||
function handleSectionChange(key, value) {
|
||||
setSections(prev => ({ ...prev, [key]: value }));
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Title based on mode
|
||||
// -------------------------------------------------------------------------
|
||||
const titles = {
|
||||
create: 'Create Template',
|
||||
edit: 'Edit Template',
|
||||
clone: 'Clone Template',
|
||||
};
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Render
|
||||
// -------------------------------------------------------------------------
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="template-form-modal-title"
|
||||
style={STYLES.backdrop}
|
||||
onClick={(e) => { if (e.target === e.currentTarget) onClose?.(); }}
|
||||
>
|
||||
<div style={STYLES.modal}>
|
||||
{/* Header */}
|
||||
<div style={STYLES.header}>
|
||||
<span id="template-form-modal-title" style={STYLES.title}>
|
||||
{titles[mode] || 'Template'}
|
||||
</span>
|
||||
<button
|
||||
style={STYLES.closeBtn}
|
||||
onClick={onClose}
|
||||
title="Close"
|
||||
aria-label="Close modal"
|
||||
>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* API error banner */}
|
||||
{apiError && (
|
||||
<div style={STYLES.errorBanner}>
|
||||
<AlertCircle size={14} />
|
||||
{apiError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} noValidate>
|
||||
{/* Hierarchy fields */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '0.75rem' }}>
|
||||
{/* Vendor */}
|
||||
<div style={STYLES.fieldGroup}>
|
||||
<label style={STYLES.label} htmlFor="tmpl-vendor">Vendor *</label>
|
||||
<input
|
||||
ref={vendorRef}
|
||||
id="tmpl-vendor"
|
||||
type="text"
|
||||
maxLength={100}
|
||||
value={vendor}
|
||||
onChange={(e) => {
|
||||
setVendor(e.target.value);
|
||||
if (fieldErrors.vendor) setFieldErrors(prev => ({ ...prev, vendor: undefined }));
|
||||
}}
|
||||
style={{ ...STYLES.input, ...(fieldErrors.vendor ? STYLES.inputError : {}) }}
|
||||
placeholder="e.g. Harmonic"
|
||||
/>
|
||||
{fieldErrors.vendor && <div style={STYLES.errorText}>{fieldErrors.vendor}</div>}
|
||||
</div>
|
||||
|
||||
{/* Platform */}
|
||||
<div style={STYLES.fieldGroup}>
|
||||
<label style={STYLES.label} htmlFor="tmpl-platform">Platform *</label>
|
||||
<input
|
||||
id="tmpl-platform"
|
||||
type="text"
|
||||
maxLength={100}
|
||||
value={platform}
|
||||
onChange={(e) => {
|
||||
setPlatform(e.target.value);
|
||||
if (fieldErrors.platform) setFieldErrors(prev => ({ ...prev, platform: undefined }));
|
||||
}}
|
||||
style={{ ...STYLES.input, ...(fieldErrors.platform ? STYLES.inputError : {}) }}
|
||||
placeholder="e.g. vCMTS"
|
||||
/>
|
||||
{fieldErrors.platform && <div style={STYLES.errorText}>{fieldErrors.platform}</div>}
|
||||
</div>
|
||||
|
||||
{/* Model */}
|
||||
<div style={STYLES.fieldGroup}>
|
||||
<label style={STYLES.label} htmlFor="tmpl-model">Model *</label>
|
||||
<input
|
||||
id="tmpl-model"
|
||||
type="text"
|
||||
maxLength={100}
|
||||
value={model}
|
||||
onChange={(e) => {
|
||||
setModel(e.target.value);
|
||||
if (fieldErrors.model) setFieldErrors(prev => ({ ...prev, model: undefined }));
|
||||
}}
|
||||
style={{ ...STYLES.input, ...(fieldErrors.model ? STYLES.inputError : {}) }}
|
||||
placeholder="e.g. 3.29.1"
|
||||
/>
|
||||
{fieldErrors.model && <div style={STYLES.errorText}>{fieldErrors.model}</div>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section textareas */}
|
||||
<div style={STYLES.sectionDivider}>Template Sections</div>
|
||||
|
||||
{SECTIONS.map((section) => (
|
||||
<div key={section.key} style={STYLES.fieldGroup}>
|
||||
<label style={STYLES.label} htmlFor={`tmpl-${section.key}`}>
|
||||
{section.label}
|
||||
</label>
|
||||
<textarea
|
||||
id={`tmpl-${section.key}`}
|
||||
value={sections[section.key]}
|
||||
onChange={(e) => handleSectionChange(section.key, e.target.value)}
|
||||
maxLength={10000}
|
||||
style={STYLES.textarea}
|
||||
placeholder={`Enter ${section.label.toLowerCase()} content...`}
|
||||
/>
|
||||
{sections[section.key].length > 9500 && (
|
||||
<div style={STYLES.charCount}>
|
||||
{sections[section.key].length}/10,000
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Footer actions */}
|
||||
<div style={STYLES.footer}>
|
||||
<button
|
||||
type="button"
|
||||
style={STYLES.cancelBtn}
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
style={{
|
||||
...STYLES.submitBtn,
|
||||
...(submitting ? STYLES.submitBtnDisabled : {}),
|
||||
}}
|
||||
>
|
||||
{submitting ? <Loader size={13} /> : <Save size={13} />}
|
||||
{submitting ? 'Saving...' : (mode === 'edit' ? 'Update Template' : 'Save Template')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user