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
271
frontend/src/components/DeleteConfirmModal.js
Normal file
271
frontend/src/components/DeleteConfirmModal.js
Normal file
@@ -0,0 +1,271 @@
|
||||
// DeleteConfirmModal.js
|
||||
// Confirmation dialog for deleting Archer templates.
|
||||
// Identifies the template by vendor/platform/model before deletion.
|
||||
// On confirm: calls DELETE API, invokes onConfirm callback, closes.
|
||||
// On cancel: dismisses dialog, leaves template unchanged.
|
||||
|
||||
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { AlertTriangle, Trash2 } from 'lucide-react';
|
||||
|
||||
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
|
||||
|
||||
/**
|
||||
* DeleteConfirmModal — confirmation dialog for deleting an Archer template.
|
||||
*
|
||||
* Props:
|
||||
* template {object|null} The template to delete (contains id, vendor, platform, model).
|
||||
* When null/undefined, modal is hidden.
|
||||
* onConfirm {function} Callback after successful delete (refresh list).
|
||||
* onCancel {function} Callback to close without deleting.
|
||||
*/
|
||||
export default function DeleteConfirmModal({ template, onConfirm, onCancel }) {
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const cancelRef = useRef(null);
|
||||
|
||||
// Focus cancel button on open and handle Escape key
|
||||
useEffect(() => {
|
||||
if (!template) return;
|
||||
|
||||
const timer = setTimeout(() => cancelRef.current?.focus(), 50);
|
||||
|
||||
const handleKey = (e) => {
|
||||
if (e.key === 'Escape' && !deleting) onCancel?.();
|
||||
};
|
||||
document.addEventListener('keydown', handleKey);
|
||||
return () => {
|
||||
clearTimeout(timer);
|
||||
document.removeEventListener('keydown', handleKey);
|
||||
};
|
||||
}, [template, deleting, onCancel]);
|
||||
|
||||
// Reset state when template changes (new modal open)
|
||||
useEffect(() => {
|
||||
if (template) {
|
||||
setDeleting(false);
|
||||
setError(null);
|
||||
}
|
||||
}, [template]);
|
||||
|
||||
const handleConfirm = useCallback(async () => {
|
||||
if (!template) return;
|
||||
setDeleting(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/archer-templates/${template.id}`, {
|
||||
method: 'DELETE',
|
||||
credentials: 'include',
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error || `Delete failed (${res.status})`);
|
||||
}
|
||||
|
||||
onConfirm?.();
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
setDeleting(false);
|
||||
}
|
||||
}, [template, onConfirm]);
|
||||
|
||||
if (!template) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="delete-confirm-title"
|
||||
style={{
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
zIndex: 70,
|
||||
background: 'rgba(10, 14, 39, 0.95)',
|
||||
backdropFilter: 'blur(8px)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '1rem',
|
||||
}}
|
||||
onClick={(e) => {
|
||||
if (e.target === e.currentTarget && !deleting) onCancel?.();
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
background: 'linear-gradient(135deg, rgba(30,41,59,0.98) 0%, rgba(15,23,42,0.99) 100%)',
|
||||
border: '1px solid rgba(239, 68, 68, 0.3)',
|
||||
borderRadius: '0.75rem',
|
||||
boxShadow: '0 20px 60px rgba(0,0,0,0.7), 0 0 30px rgba(239,68,68,0.06)',
|
||||
width: '100%',
|
||||
maxWidth: '440px',
|
||||
padding: '1.75rem 2rem',
|
||||
}}>
|
||||
{/* Header */}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.625rem',
|
||||
marginBottom: '1rem',
|
||||
}}>
|
||||
<div style={{
|
||||
width: '32px',
|
||||
height: '32px',
|
||||
borderRadius: '0.5rem',
|
||||
background: 'rgba(239, 68, 68, 0.10)',
|
||||
border: '1px solid rgba(239, 68, 68, 0.3)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}>
|
||||
<AlertTriangle style={{ width: '16px', height: '16px', color: '#EF4444' }} />
|
||||
</div>
|
||||
<div
|
||||
id="delete-confirm-title"
|
||||
style={{
|
||||
fontFamily: "'JetBrains Mono', monospace",
|
||||
fontSize: '0.95rem',
|
||||
fontWeight: '700',
|
||||
color: '#EF4444',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.08em',
|
||||
}}
|
||||
>
|
||||
Delete Template
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div style={{
|
||||
fontSize: '0.82rem',
|
||||
color: '#CBD5E1',
|
||||
lineHeight: '1.6',
|
||||
marginBottom: '1.25rem',
|
||||
fontFamily: "'Outfit', system-ui, sans-serif",
|
||||
}}>
|
||||
<p style={{ margin: '0 0 0.75rem 0' }}>
|
||||
Are you sure you want to delete this template? This action cannot be undone.
|
||||
</p>
|
||||
<div style={{
|
||||
background: 'rgba(239, 68, 68, 0.06)',
|
||||
border: '1px solid rgba(239, 68, 68, 0.15)',
|
||||
borderRadius: '0.5rem',
|
||||
padding: '0.75rem 1rem',
|
||||
}}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.3rem' }}>
|
||||
<span style={{ color: '#94A3B8', fontSize: '0.72rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
|
||||
Vendor
|
||||
</span>
|
||||
<span style={{ color: '#e0e0e0', fontSize: '0.82rem', fontWeight: 600 }}>
|
||||
{template.vendor}
|
||||
</span>
|
||||
<span style={{ color: '#94A3B8', fontSize: '0.72rem', textTransform: 'uppercase', letterSpacing: '0.05em', marginTop: '0.3rem' }}>
|
||||
Platform
|
||||
</span>
|
||||
<span style={{ color: '#e0e0e0', fontSize: '0.82rem', fontWeight: 600 }}>
|
||||
{template.platform}
|
||||
</span>
|
||||
<span style={{ color: '#94A3B8', fontSize: '0.72rem', textTransform: 'uppercase', letterSpacing: '0.05em', marginTop: '0.3rem' }}>
|
||||
Model
|
||||
</span>
|
||||
<span style={{ color: '#e0e0e0', fontSize: '0.82rem', fontWeight: 600 }}>
|
||||
{template.model}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Error banner */}
|
||||
{error && (
|
||||
<div style={{
|
||||
padding: '0.6rem 0.75rem',
|
||||
borderRadius: '0.375rem',
|
||||
background: 'rgba(239, 68, 68, 0.1)',
|
||||
border: '1px solid rgba(239, 68, 68, 0.25)',
|
||||
color: '#FCA5A5',
|
||||
fontSize: '0.78rem',
|
||||
marginBottom: '1rem',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.4rem',
|
||||
}}>
|
||||
<AlertTriangle style={{ width: '12px', height: '12px', flexShrink: 0 }} />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div style={{ display: 'flex', gap: '0.75rem' }}>
|
||||
<button
|
||||
ref={cancelRef}
|
||||
onClick={onCancel}
|
||||
disabled={deleting}
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: '0.625rem',
|
||||
background: 'transparent',
|
||||
border: '1px solid rgba(100,116,139,0.4)',
|
||||
borderRadius: '0.375rem',
|
||||
color: '#94A3B8',
|
||||
cursor: deleting ? 'not-allowed' : 'pointer',
|
||||
fontFamily: "'JetBrains Mono', monospace",
|
||||
fontSize: '0.78rem',
|
||||
opacity: deleting ? 0.5 : 1,
|
||||
transition: 'all 0.2s ease',
|
||||
}}
|
||||
onMouseEnter={e => {
|
||||
if (!deleting) {
|
||||
e.currentTarget.style.borderColor = 'rgba(100,116,139,0.8)';
|
||||
e.currentTarget.style.color = '#CBD5E1';
|
||||
}
|
||||
}}
|
||||
onMouseLeave={e => {
|
||||
e.currentTarget.style.borderColor = 'rgba(100,116,139,0.4)';
|
||||
e.currentTarget.style.color = '#94A3B8';
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleConfirm}
|
||||
disabled={deleting}
|
||||
style={{
|
||||
flex: 1.5,
|
||||
padding: '0.625rem',
|
||||
background: 'rgba(239, 68, 68, 0.10)',
|
||||
border: '1px solid #EF4444',
|
||||
borderRadius: '0.375rem',
|
||||
color: '#EF4444',
|
||||
cursor: deleting ? 'not-allowed' : 'pointer',
|
||||
fontFamily: "'JetBrains Mono', monospace",
|
||||
fontSize: '0.78rem',
|
||||
fontWeight: '600',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.05em',
|
||||
transition: 'all 0.2s ease',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '0.4rem',
|
||||
opacity: deleting ? 0.7 : 1,
|
||||
}}
|
||||
onMouseEnter={e => {
|
||||
if (!deleting) {
|
||||
e.currentTarget.style.background = 'rgba(239, 68, 68, 0.18)';
|
||||
e.currentTarget.style.boxShadow = '0 0 20px rgba(239,68,68,0.15)';
|
||||
}
|
||||
}}
|
||||
onMouseLeave={e => {
|
||||
e.currentTarget.style.background = 'rgba(239, 68, 68, 0.10)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<Trash2 style={{ width: '13px', height: '13px' }} />
|
||||
{deleting ? 'Deleting...' : 'Delete Template'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { X, Home, BarChart2, BookOpen, Download, ShieldCheck, Settings, Ticket, Building2 } from 'lucide-react';
|
||||
import { X, Home, BarChart2, BookOpen, Download, ShieldCheck, Settings, Ticket, Building2, Layers } from 'lucide-react';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
|
||||
const NAV_ITEMS = [
|
||||
@@ -10,6 +10,7 @@ const NAV_ITEMS = [
|
||||
{ id: 'knowledge-base', label: 'Knowledge Base', icon: BookOpen, color: '#10B981', description: 'Articles & documentation' },
|
||||
{ id: 'exports', label: 'Exports', icon: Download, color: '#8B5CF6', description: 'Export data & reports' },
|
||||
{ id: 'jira', label: 'Jira Tickets', icon: Ticket, color: '#6366F1', description: 'Jira issue tracking & sync' },
|
||||
{ id: 'archer-templates', label: 'Template Mgr', icon: Layers, color: '#F472B6', description: 'Archer template library' },
|
||||
];
|
||||
|
||||
const ADMIN_ITEM = { id: 'admin', label: 'Admin Panel', icon: Settings, color: '#EF4444', description: 'User management & audit' };
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
621
frontend/src/components/TemplateSelector.js
Normal file
621
frontend/src/components/TemplateSelector.js
Normal file
@@ -0,0 +1,621 @@
|
||||
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { Search, ChevronDown, Loader, FileText, Clipboard, Check, Copy } from 'lucide-react';
|
||||
|
||||
const API_BASE = process.env.REACT_APP_API_BASE || 'http://localhost:3001/api';
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Section field mapping — ordered: static first, then semi-static
|
||||
// ---------------------------------------------------------------------------
|
||||
const SECTIONS = [
|
||||
// Static sections
|
||||
{ key: 'environment_overview', label: 'Environment Overview' },
|
||||
{ key: 'segmentation', label: 'Segmentation' },
|
||||
{ key: 'mitigating_controls', label: 'Mitigating Controls' },
|
||||
// Semi-static sections
|
||||
{ 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 — dark theme tactical intelligence aesthetic
|
||||
// ---------------------------------------------------------------------------
|
||||
const STYLES = {
|
||||
container: {
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
},
|
||||
label: {
|
||||
fontFamily: "'JetBrains Mono', monospace",
|
||||
fontSize: '0.7rem',
|
||||
fontWeight: 700,
|
||||
color: '#00d4ff',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.12em',
|
||||
marginBottom: '0.5rem',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.4rem',
|
||||
},
|
||||
searchWrapper: {
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
searchIcon: {
|
||||
position: 'absolute',
|
||||
left: '0.75rem',
|
||||
color: '#64748b',
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
input: {
|
||||
width: '100%',
|
||||
padding: '0.625rem 2.25rem 0.625rem 2.25rem',
|
||||
background: 'rgba(15, 23, 42, 0.9)',
|
||||
border: '1px solid rgba(0, 212, 255, 0.2)',
|
||||
borderRadius: '8px',
|
||||
color: '#e0e0e0',
|
||||
fontSize: '0.82rem',
|
||||
fontFamily: "'Outfit', system-ui, sans-serif",
|
||||
outline: 'none',
|
||||
transition: 'border-color 0.2s, box-shadow 0.2s',
|
||||
},
|
||||
inputFocused: {
|
||||
borderColor: 'rgba(0, 212, 255, 0.5)',
|
||||
boxShadow: '0 0 12px rgba(0, 212, 255, 0.1)',
|
||||
},
|
||||
chevron: {
|
||||
position: 'absolute',
|
||||
right: '0.75rem',
|
||||
color: '#64748b',
|
||||
cursor: 'pointer',
|
||||
transition: 'transform 0.2s',
|
||||
},
|
||||
chevronOpen: {
|
||||
transform: 'rotate(180deg)',
|
||||
},
|
||||
dropdown: {
|
||||
position: 'absolute',
|
||||
top: '100%',
|
||||
left: 0,
|
||||
right: 0,
|
||||
marginTop: '4px',
|
||||
background: 'linear-gradient(135deg, rgba(22, 33, 62, 0.98), rgba(15, 23, 42, 0.99))',
|
||||
border: '1px solid rgba(0, 212, 255, 0.2)',
|
||||
borderRadius: '8px',
|
||||
maxHeight: '240px',
|
||||
overflowY: 'auto',
|
||||
zIndex: 50,
|
||||
boxShadow: '0 12px 40px rgba(0, 0, 0, 0.6)',
|
||||
},
|
||||
dropdownItem: {
|
||||
padding: '0.6rem 0.875rem',
|
||||
color: '#e0e0e0',
|
||||
fontSize: '0.8rem',
|
||||
fontFamily: "'Outfit', system-ui, sans-serif",
|
||||
cursor: 'pointer',
|
||||
transition: 'background 0.15s',
|
||||
borderBottom: '1px solid rgba(100, 116, 139, 0.1)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
},
|
||||
dropdownItemHover: {
|
||||
background: 'rgba(0, 212, 255, 0.08)',
|
||||
},
|
||||
dropdownItemSelected: {
|
||||
background: 'rgba(0, 212, 255, 0.12)',
|
||||
color: '#00d4ff',
|
||||
},
|
||||
loadingState: {
|
||||
padding: '1rem',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '0.5rem',
|
||||
color: '#64748b',
|
||||
fontSize: '0.8rem',
|
||||
fontFamily: "'Outfit', system-ui, sans-serif",
|
||||
},
|
||||
emptyState: {
|
||||
padding: '1rem',
|
||||
textAlign: 'center',
|
||||
color: '#64748b',
|
||||
fontSize: '0.8rem',
|
||||
fontStyle: 'italic',
|
||||
fontFamily: "'Outfit', system-ui, sans-serif",
|
||||
},
|
||||
selectedDisplay: {
|
||||
marginTop: '0.5rem',
|
||||
padding: '0.5rem 0.75rem',
|
||||
background: 'rgba(0, 212, 255, 0.06)',
|
||||
border: '1px solid rgba(0, 212, 255, 0.15)',
|
||||
borderRadius: '6px',
|
||||
color: '#00d4ff',
|
||||
fontSize: '0.78rem',
|
||||
fontFamily: "'JetBrains Mono', monospace",
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.4rem',
|
||||
},
|
||||
// Section panel styles
|
||||
sectionPanel: {
|
||||
marginTop: '1rem',
|
||||
background: 'linear-gradient(135deg, rgba(22, 33, 62, 0.6), rgba(15, 23, 42, 0.8))',
|
||||
border: '1px solid rgba(0, 212, 255, 0.15)',
|
||||
borderRadius: '10px',
|
||||
padding: '1rem',
|
||||
},
|
||||
sectionPanelHeader: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: '0.75rem',
|
||||
paddingBottom: '0.5rem',
|
||||
borderBottom: '1px solid rgba(100, 116, 139, 0.2)',
|
||||
},
|
||||
sectionPanelTitle: {
|
||||
fontFamily: "'JetBrains Mono', monospace",
|
||||
fontSize: '0.7rem',
|
||||
fontWeight: 700,
|
||||
color: '#00d4ff',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.1em',
|
||||
},
|
||||
copyAllButton: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.35rem',
|
||||
padding: '0.35rem 0.65rem',
|
||||
background: 'rgba(0, 212, 255, 0.1)',
|
||||
border: '1px solid rgba(0, 212, 255, 0.3)',
|
||||
borderRadius: '6px',
|
||||
color: '#00d4ff',
|
||||
fontSize: '0.72rem',
|
||||
fontFamily: "'JetBrains Mono', monospace",
|
||||
fontWeight: 600,
|
||||
cursor: 'pointer',
|
||||
transition: 'background 0.2s, border-color 0.2s',
|
||||
},
|
||||
copyAllButtonHover: {
|
||||
background: 'rgba(0, 212, 255, 0.18)',
|
||||
borderColor: 'rgba(0, 212, 255, 0.5)',
|
||||
},
|
||||
copyAllButtonCopied: {
|
||||
background: 'rgba(34, 197, 94, 0.15)',
|
||||
borderColor: 'rgba(34, 197, 94, 0.4)',
|
||||
color: '#22c55e',
|
||||
},
|
||||
sectionBlock: {
|
||||
marginBottom: '0.75rem',
|
||||
padding: '0.6rem 0.75rem',
|
||||
background: 'rgba(15, 23, 42, 0.5)',
|
||||
border: '1px solid rgba(100, 116, 139, 0.15)',
|
||||
borderRadius: '6px',
|
||||
},
|
||||
sectionBlockHeader: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: '0.35rem',
|
||||
},
|
||||
sectionLabel: {
|
||||
fontFamily: "'Outfit', system-ui, sans-serif",
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 600,
|
||||
color: '#94a3b8',
|
||||
letterSpacing: '0.02em',
|
||||
},
|
||||
sectionContent: {
|
||||
fontFamily: "'Outfit', system-ui, sans-serif",
|
||||
fontSize: '0.78rem',
|
||||
color: '#e0e0e0',
|
||||
lineHeight: 1.5,
|
||||
whiteSpace: 'pre-wrap',
|
||||
wordBreak: 'break-word',
|
||||
maxHeight: '120px',
|
||||
overflowY: 'auto',
|
||||
},
|
||||
sectionEmpty: {
|
||||
fontFamily: "'Outfit', system-ui, sans-serif",
|
||||
fontSize: '0.78rem',
|
||||
color: '#64748b',
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
copyButton: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.25rem',
|
||||
padding: '0.25rem 0.5rem',
|
||||
background: 'rgba(100, 116, 139, 0.15)',
|
||||
border: '1px solid rgba(100, 116, 139, 0.25)',
|
||||
borderRadius: '4px',
|
||||
color: '#94a3b8',
|
||||
fontSize: '0.68rem',
|
||||
fontFamily: "'JetBrains Mono', monospace",
|
||||
cursor: 'pointer',
|
||||
transition: 'background 0.2s, color 0.2s, border-color 0.2s',
|
||||
},
|
||||
copyButtonHover: {
|
||||
background: 'rgba(0, 212, 255, 0.1)',
|
||||
borderColor: 'rgba(0, 212, 255, 0.3)',
|
||||
color: '#00d4ff',
|
||||
},
|
||||
copyButtonCopied: {
|
||||
background: 'rgba(34, 197, 94, 0.12)',
|
||||
borderColor: 'rgba(34, 197, 94, 0.3)',
|
||||
color: '#22c55e',
|
||||
},
|
||||
copyButtonDisabled: {
|
||||
opacity: 0.4,
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* TemplateSelector — searchable dropdown for selecting Archer templates.
|
||||
*
|
||||
* Props:
|
||||
* onSelect {function} — optional callback invoked with the full template object when a selection is made
|
||||
*/
|
||||
export default function TemplateSelector({ onSelect }) {
|
||||
const [templates, setTemplates] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [selectedTemplate, setSelectedTemplate] = useState(null);
|
||||
const [hoveredIndex, setHoveredIndex] = useState(-1);
|
||||
const [inputFocused, setInputFocused] = useState(false);
|
||||
|
||||
// Copy state: per-section copied confirmation + copy all
|
||||
const [copiedSections, setCopiedSections] = useState({});
|
||||
const [copyAllCopied, setCopyAllCopied] = useState(false);
|
||||
const [copyAllHovered, setCopyAllHovered] = useState(false);
|
||||
const [hoveredCopyButton, setHoveredCopyButton] = useState(null);
|
||||
|
||||
const containerRef = useRef(null);
|
||||
const inputRef = useRef(null);
|
||||
|
||||
// Fetch all templates on mount
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
async function fetchTemplates() {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const res = await fetch(`${API_BASE}/archer-templates`, {
|
||||
credentials: 'include',
|
||||
});
|
||||
if (!res.ok) {
|
||||
throw new Error(`Failed to fetch templates (${res.status})`);
|
||||
}
|
||||
const data = await res.json();
|
||||
if (!cancelled) {
|
||||
setTemplates(data);
|
||||
}
|
||||
} catch (err) {
|
||||
if (!cancelled) {
|
||||
setError(err.message);
|
||||
}
|
||||
} finally {
|
||||
if (!cancelled) {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
fetchTemplates();
|
||||
return () => { cancelled = true; };
|
||||
}, []);
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
useEffect(() => {
|
||||
function handleClickOutside(e) {
|
||||
if (containerRef.current && !containerRef.current.contains(e.target)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
}
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, []);
|
||||
|
||||
// Client-side filter — case-insensitive substring match on vendor, platform, or model
|
||||
const filteredTemplates = useCallback(() => {
|
||||
if (!searchText.trim()) return templates;
|
||||
const query = searchText.toLowerCase().trim();
|
||||
return templates.filter(t =>
|
||||
t.vendor.toLowerCase().includes(query) ||
|
||||
t.platform.toLowerCase().includes(query) ||
|
||||
t.model.toLowerCase().includes(query)
|
||||
);
|
||||
}, [templates, searchText])();
|
||||
|
||||
// Handle template selection
|
||||
const handleSelect = (template) => {
|
||||
setSelectedTemplate(template);
|
||||
setSearchText(`${template.vendor} / ${template.platform} / ${template.model}`);
|
||||
setIsOpen(false);
|
||||
setCopiedSections({});
|
||||
setCopyAllCopied(false);
|
||||
if (onSelect) {
|
||||
onSelect(template);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle input change
|
||||
const handleInputChange = (e) => {
|
||||
setSearchText(e.target.value);
|
||||
setSelectedTemplate(null);
|
||||
setIsOpen(true);
|
||||
setHoveredIndex(-1);
|
||||
};
|
||||
|
||||
// Handle input focus
|
||||
const handleInputFocus = () => {
|
||||
setInputFocused(true);
|
||||
setIsOpen(true);
|
||||
};
|
||||
|
||||
// Handle input blur
|
||||
const handleInputBlur = () => {
|
||||
setInputFocused(false);
|
||||
};
|
||||
|
||||
// Keyboard navigation
|
||||
const handleKeyDown = (e) => {
|
||||
if (!isOpen) {
|
||||
if (e.key === 'ArrowDown' || e.key === 'Enter') {
|
||||
setIsOpen(true);
|
||||
e.preventDefault();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
switch (e.key) {
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
setHoveredIndex(prev =>
|
||||
prev < filteredTemplates.length - 1 ? prev + 1 : 0
|
||||
);
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
setHoveredIndex(prev =>
|
||||
prev > 0 ? prev - 1 : filteredTemplates.length - 1
|
||||
);
|
||||
break;
|
||||
case 'Enter':
|
||||
e.preventDefault();
|
||||
if (hoveredIndex >= 0 && hoveredIndex < filteredTemplates.length) {
|
||||
handleSelect(filteredTemplates[hoveredIndex]);
|
||||
}
|
||||
break;
|
||||
case 'Escape':
|
||||
setIsOpen(false);
|
||||
inputRef.current?.blur();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// Copy a single section to clipboard
|
||||
const handleCopySection = async (sectionKey, content) => {
|
||||
if (!content) return;
|
||||
try {
|
||||
await navigator.clipboard.writeText(content);
|
||||
setCopiedSections(prev => ({ ...prev, [sectionKey]: true }));
|
||||
setTimeout(() => {
|
||||
setCopiedSections(prev => ({ ...prev, [sectionKey]: false }));
|
||||
}, 2000);
|
||||
} catch (_err) {
|
||||
// Clipboard API failed — silently ignore
|
||||
}
|
||||
};
|
||||
|
||||
// Copy All: concatenate non-empty sections with headers
|
||||
const handleCopyAll = async () => {
|
||||
if (!selectedTemplate) return;
|
||||
const parts = [];
|
||||
for (const section of SECTIONS) {
|
||||
const content = selectedTemplate[section.key];
|
||||
if (content && content.trim()) {
|
||||
parts.push(`${section.label}\n${content}`);
|
||||
}
|
||||
}
|
||||
const combined = parts.join('\n\n');
|
||||
try {
|
||||
await navigator.clipboard.writeText(combined);
|
||||
setCopyAllCopied(true);
|
||||
setTimeout(() => {
|
||||
setCopyAllCopied(false);
|
||||
}, 2000);
|
||||
} catch (_err) {
|
||||
// Clipboard API failed — silently ignore
|
||||
}
|
||||
};
|
||||
|
||||
// Check if there are any non-empty sections
|
||||
const hasNonEmptySections = selectedTemplate && SECTIONS.some(s => {
|
||||
const val = selectedTemplate[s.key];
|
||||
return val && val.trim();
|
||||
});
|
||||
|
||||
return (
|
||||
<div style={STYLES.container} ref={containerRef}>
|
||||
{/* Label */}
|
||||
<div style={STYLES.label}>
|
||||
<FileText size={12} />
|
||||
Template Selector
|
||||
</div>
|
||||
|
||||
{/* Search input with dropdown */}
|
||||
<div style={STYLES.searchWrapper}>
|
||||
<Search size={14} style={STYLES.searchIcon} />
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
placeholder={loading ? 'Loading templates...' : 'Search by vendor, platform, or model...'}
|
||||
value={searchText}
|
||||
onChange={handleInputChange}
|
||||
onFocus={handleInputFocus}
|
||||
onBlur={handleInputBlur}
|
||||
onKeyDown={handleKeyDown}
|
||||
disabled={loading}
|
||||
style={{
|
||||
...STYLES.input,
|
||||
...(inputFocused ? STYLES.inputFocused : {}),
|
||||
opacity: loading ? 0.6 : 1,
|
||||
}}
|
||||
aria-label="Search templates"
|
||||
aria-expanded={isOpen}
|
||||
aria-haspopup="listbox"
|
||||
role="combobox"
|
||||
aria-autocomplete="list"
|
||||
/>
|
||||
<ChevronDown
|
||||
size={14}
|
||||
style={{
|
||||
...STYLES.chevron,
|
||||
...(isOpen ? STYLES.chevronOpen : {}),
|
||||
}}
|
||||
onClick={() => {
|
||||
setIsOpen(!isOpen);
|
||||
inputRef.current?.focus();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Dropdown list */}
|
||||
{isOpen && (
|
||||
<div style={STYLES.dropdown} role="listbox" aria-label="Template list">
|
||||
{loading ? (
|
||||
<div style={STYLES.loadingState}>
|
||||
<Loader size={14} style={{ animation: 'spin 1s linear infinite' }} />
|
||||
Loading templates...
|
||||
</div>
|
||||
) : error ? (
|
||||
<div style={{ ...STYLES.emptyState, color: '#ef4444' }}>
|
||||
{error}
|
||||
</div>
|
||||
) : filteredTemplates.length === 0 ? (
|
||||
<div style={STYLES.emptyState}>
|
||||
{searchText.trim()
|
||||
? 'No templates match your search'
|
||||
: 'No templates available'}
|
||||
</div>
|
||||
) : (
|
||||
filteredTemplates.map((template, index) => {
|
||||
const isSelected = selectedTemplate?.id === template.id;
|
||||
const isHovered = hoveredIndex === index;
|
||||
return (
|
||||
<div
|
||||
key={template.id}
|
||||
role="option"
|
||||
aria-selected={isSelected}
|
||||
style={{
|
||||
...STYLES.dropdownItem,
|
||||
...(isHovered ? STYLES.dropdownItemHover : {}),
|
||||
...(isSelected ? STYLES.dropdownItemSelected : {}),
|
||||
}}
|
||||
onMouseEnter={() => setHoveredIndex(index)}
|
||||
onMouseLeave={() => setHoveredIndex(-1)}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault(); // Prevent input blur before click registers
|
||||
handleSelect(template);
|
||||
}}
|
||||
>
|
||||
<FileText size={12} style={{ opacity: 0.5, flexShrink: 0 }} />
|
||||
{template.vendor} / {template.platform} / {template.model}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Section display panel — shown when a template is selected */}
|
||||
{selectedTemplate && (
|
||||
<div style={STYLES.sectionPanel}>
|
||||
{/* Panel header with Copy All button */}
|
||||
<div style={STYLES.sectionPanelHeader}>
|
||||
<span style={STYLES.sectionPanelTitle}>Template Sections</span>
|
||||
{hasNonEmptySections && (
|
||||
<button
|
||||
onClick={handleCopyAll}
|
||||
onMouseEnter={() => setCopyAllHovered(true)}
|
||||
onMouseLeave={() => setCopyAllHovered(false)}
|
||||
style={{
|
||||
...STYLES.copyAllButton,
|
||||
...(copyAllCopied ? STYLES.copyAllButtonCopied : {}),
|
||||
...(!copyAllCopied && copyAllHovered ? STYLES.copyAllButtonHover : {}),
|
||||
}}
|
||||
aria-label="Copy all sections"
|
||||
>
|
||||
{copyAllCopied ? (
|
||||
<>
|
||||
<Check size={11} />
|
||||
Copied!
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy size={11} />
|
||||
Copy All
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Section blocks */}
|
||||
{SECTIONS.map((section) => {
|
||||
const content = selectedTemplate[section.key];
|
||||
const isEmpty = !content || !content.trim();
|
||||
const isCopied = copiedSections[section.key];
|
||||
const isButtonHovered = hoveredCopyButton === section.key;
|
||||
|
||||
return (
|
||||
<div key={section.key} style={STYLES.sectionBlock}>
|
||||
<div style={STYLES.sectionBlockHeader}>
|
||||
<span style={STYLES.sectionLabel}>{section.label}</span>
|
||||
<button
|
||||
onClick={() => handleCopySection(section.key, content)}
|
||||
disabled={isEmpty}
|
||||
onMouseEnter={() => setHoveredCopyButton(section.key)}
|
||||
onMouseLeave={() => setHoveredCopyButton(null)}
|
||||
style={{
|
||||
...STYLES.copyButton,
|
||||
...(isEmpty ? STYLES.copyButtonDisabled : {}),
|
||||
...(isCopied ? STYLES.copyButtonCopied : {}),
|
||||
...(!isEmpty && !isCopied && isButtonHovered ? STYLES.copyButtonHover : {}),
|
||||
}}
|
||||
aria-label={`Copy ${section.label}`}
|
||||
>
|
||||
{isCopied ? (
|
||||
<>
|
||||
<Check size={10} />
|
||||
Copied!
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Clipboard size={10} />
|
||||
Copy
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{isEmpty ? (
|
||||
<div style={STYLES.sectionEmpty}>No content stored</div>
|
||||
) : (
|
||||
<div style={STYLES.sectionContent}>{content}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +1,9 @@
|
||||
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { ListTodo, RefreshCw, CheckSquare, Square, Loader, AlertCircle, X, Plus, CheckCircle, ChevronDown, ChevronRight, FileSpreadsheet } from 'lucide-react';
|
||||
import { ListTodo, RefreshCw, CheckSquare, Square, Loader, AlertCircle, X, Plus, CheckCircle, ChevronDown, ChevronRight, FileSpreadsheet, FileText } from 'lucide-react';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import ConsolidationModal from '../ConsolidationModal';
|
||||
import LoaderModal from '../LoaderModal';
|
||||
import TemplateSelector from '../TemplateSelector';
|
||||
import { generateConsolidatedSummary, generateConsolidatedDescription, extractFirstCve, extractCommonVendor } from '../../utils/jiraConsolidation';
|
||||
import { groupQueueItems } from '../../utils/queueGrouping';
|
||||
import { VENDOR_PROJECT_KEYS, VENDOR_ISSUE_TYPES, STEAM_ISSUE_TYPES, isVendorProject, getIssueTypesForProject } from './JiraPage';
|
||||
@@ -311,6 +312,9 @@ export default function IvantiTodoQueuePage() {
|
||||
// Collapse state for grouped sections (Requirement 2.2, 2.7)
|
||||
const [collapsedSections, setCollapsedSections] = useState({});
|
||||
|
||||
// Archer Template Selector panel — tracks which item ID has the panel expanded (Requirement 5.1)
|
||||
const [templatePanelOpenId, setTemplatePanelOpenId] = useState(null);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Data fetching
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -384,6 +388,13 @@ export default function IvantiTodoQueuePage() {
|
||||
}));
|
||||
}, []);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Toggle Archer Template Selector panel (Requirement 5.1)
|
||||
// ---------------------------------------------------------------------------
|
||||
const toggleTemplatePanel = useCallback((itemId) => {
|
||||
setTemplatePanelOpenId((prev) => (prev === itemId ? null : itemId));
|
||||
}, []);
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Selection mode toggle (Requirement 1.1, 1.5)
|
||||
// When deactivated, clear all selections
|
||||
@@ -727,151 +738,202 @@ export default function IvantiTodoQueuePage() {
|
||||
const cveDisplay = cves.length > 0
|
||||
? cves.slice(0, 2).join(', ') + (cves.length > 2 ? ` +${cves.length - 2}` : '')
|
||||
: '';
|
||||
const isArcherItem = item.workflow_type === 'Archer';
|
||||
const isTemplatePanelOpen = templatePanelOpenId === item.id;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={item.id}
|
||||
style={isSelected ? STYLES.queueItemSelected : STYLES.queueItem}
|
||||
onClick={selectionMode ? () => toggleItemSelection(item.id) : undefined}
|
||||
role={selectionMode ? 'button' : undefined}
|
||||
tabIndex={selectionMode ? 0 : undefined}
|
||||
onKeyDown={selectionMode ? (e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); toggleItemSelection(item.id); } } : undefined}
|
||||
>
|
||||
{/* Selection checkbox (Requirement 1.2) */}
|
||||
{selectionMode && (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onChange={(e) => { e.stopPropagation(); toggleItemSelection(item.id); }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={STYLES.checkbox}
|
||||
aria-label={`Select ${item.finding_title || item.finding_id}`}
|
||||
/>
|
||||
)}
|
||||
<React.Fragment key={item.id}>
|
||||
<div
|
||||
style={isSelected ? STYLES.queueItemSelected : STYLES.queueItem}
|
||||
onClick={selectionMode ? () => toggleItemSelection(item.id) : undefined}
|
||||
role={selectionMode ? 'button' : undefined}
|
||||
tabIndex={selectionMode ? 0 : undefined}
|
||||
onKeyDown={selectionMode ? (e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); toggleItemSelection(item.id); } } : undefined}
|
||||
>
|
||||
{/* Selection checkbox (Requirement 1.2) */}
|
||||
{selectionMode && (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onChange={(e) => { e.stopPropagation(); toggleItemSelection(item.id); }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={STYLES.checkbox}
|
||||
aria-label={`Select ${item.finding_title || item.finding_id}`}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Finding info */}
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 600,
|
||||
color: '#CBD5E1',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}} title={item.finding_title || item.finding_id}>
|
||||
{item.finding_title || item.finding_id}
|
||||
</div>
|
||||
{cveDisplay && (
|
||||
{/* Finding info */}
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '0.65rem',
|
||||
color: '#64748B',
|
||||
marginTop: '2px',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 600,
|
||||
color: '#CBD5E1',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}} title={cves.join(', ')}>
|
||||
{cveDisplay}
|
||||
}} title={item.finding_title || item.finding_id}>
|
||||
{item.finding_title || item.finding_id}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{cveDisplay && (
|
||||
<div style={{
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '0.65rem',
|
||||
color: '#64748B',
|
||||
marginTop: '2px',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}} title={cves.join(', ')}>
|
||||
{cveDisplay}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Ticket link badge (Requirements 6.3, 6.4) */}
|
||||
{ticketLinks[item.id] && (
|
||||
<a
|
||||
href={ticketLinks[item.id].jira_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
{/* Archer Template toggle button (Requirement 5.1) */}
|
||||
{isArcherItem && (
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); toggleTemplatePanel(item.id); }}
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.3rem',
|
||||
padding: '0.2rem 0.5rem',
|
||||
borderRadius: '4px',
|
||||
border: isTemplatePanelOpen
|
||||
? '1px solid rgba(0, 212, 255, 0.5)'
|
||||
: '1px solid rgba(0, 212, 255, 0.2)',
|
||||
background: isTemplatePanelOpen
|
||||
? 'rgba(0, 212, 255, 0.15)'
|
||||
: 'rgba(0, 212, 255, 0.05)',
|
||||
color: isTemplatePanelOpen ? '#00d4ff' : '#7DD3FC',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.62rem',
|
||||
fontFamily: 'monospace',
|
||||
fontWeight: 600,
|
||||
flexShrink: 0,
|
||||
transition: 'all 0.2s',
|
||||
}}
|
||||
title={isTemplatePanelOpen ? 'Hide template selector' : 'Show template selector'}
|
||||
aria-expanded={isTemplatePanelOpen}
|
||||
aria-label="Toggle template selector"
|
||||
>
|
||||
<FileText style={{ width: '11px', height: '11px' }} />
|
||||
{isTemplatePanelOpen ? 'Hide' : 'Template'}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Ticket link badge (Requirements 6.3, 6.4) */}
|
||||
{ticketLinks[item.id] && (
|
||||
<a
|
||||
href={ticketLinks[item.id].jira_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '0.6rem',
|
||||
fontWeight: 700,
|
||||
color: '#6EE7B7',
|
||||
background: 'rgba(16, 185, 129, 0.1)',
|
||||
border: '1px solid rgba(16, 185, 129, 0.3)',
|
||||
borderRadius: '999px',
|
||||
padding: '0.15rem 0.5rem',
|
||||
textDecoration: 'none',
|
||||
whiteSpace: 'nowrap',
|
||||
flexShrink: 0,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.25rem',
|
||||
transition: 'all 0.2s',
|
||||
}}
|
||||
title={`Open ${ticketLinks[item.id].ticket_key} in Jira`}
|
||||
>
|
||||
{ticketLinks[item.id].ticket_key} ↗
|
||||
</a>
|
||||
)}
|
||||
|
||||
{/* Workflow type badge */}
|
||||
<div style={{
|
||||
width: '80px',
|
||||
textAlign: 'center',
|
||||
flexShrink: 0,
|
||||
}}>
|
||||
<span style={{
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '0.6rem',
|
||||
fontWeight: 700,
|
||||
color: '#6EE7B7',
|
||||
background: 'rgba(16, 185, 129, 0.1)',
|
||||
border: '1px solid rgba(16, 185, 129, 0.3)',
|
||||
borderRadius: '999px',
|
||||
padding: '0.15rem 0.5rem',
|
||||
textDecoration: 'none',
|
||||
whiteSpace: 'nowrap',
|
||||
flexShrink: 0,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '0.25rem',
|
||||
transition: 'all 0.2s',
|
||||
}}
|
||||
title={`Open ${ticketLinks[item.id].ticket_key} in Jira`}
|
||||
>
|
||||
{ticketLinks[item.id].ticket_key} ↗
|
||||
</a>
|
||||
)}
|
||||
|
||||
{/* Workflow type badge */}
|
||||
<div style={{
|
||||
width: '80px',
|
||||
textAlign: 'center',
|
||||
flexShrink: 0,
|
||||
}}>
|
||||
<span style={{
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '0.6rem',
|
||||
fontWeight: 700,
|
||||
color: wfColor.col,
|
||||
background: `rgba(${wfColor.rgb}, 0.1)`,
|
||||
border: `1px solid rgba(${wfColor.rgb}, 0.3)`,
|
||||
borderRadius: '4px',
|
||||
padding: '0.15rem 0.4rem',
|
||||
textTransform: 'uppercase',
|
||||
}}>
|
||||
{item.workflow_type}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Vendor */}
|
||||
<div style={{
|
||||
width: '120px',
|
||||
flexShrink: 0,
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '0.68rem',
|
||||
color: '#94A3B8',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}} title={item.vendor}>
|
||||
{item.vendor || '—'}
|
||||
</div>
|
||||
|
||||
{/* Hostname / IP */}
|
||||
<div style={{
|
||||
width: '120px',
|
||||
flexShrink: 0,
|
||||
minWidth: 0,
|
||||
}}>
|
||||
{item.hostname && (
|
||||
<div style={{
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '0.65rem',
|
||||
color: '#94A3B8',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}} title={item.hostname}>
|
||||
{item.hostname}
|
||||
</div>
|
||||
)}
|
||||
{item.ip_address && (
|
||||
<div style={{
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '0.62rem',
|
||||
color: '#10B981',
|
||||
marginTop: item.hostname ? '1px' : 0,
|
||||
color: wfColor.col,
|
||||
background: `rgba(${wfColor.rgb}, 0.1)`,
|
||||
border: `1px solid rgba(${wfColor.rgb}, 0.3)`,
|
||||
borderRadius: '4px',
|
||||
padding: '0.15rem 0.4rem',
|
||||
textTransform: 'uppercase',
|
||||
}}>
|
||||
{item.ip_address}
|
||||
</div>
|
||||
)}
|
||||
{item.workflow_type}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Vendor */}
|
||||
<div style={{
|
||||
width: '120px',
|
||||
flexShrink: 0,
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '0.68rem',
|
||||
color: '#94A3B8',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}} title={item.vendor}>
|
||||
{item.vendor || '—'}
|
||||
</div>
|
||||
|
||||
{/* Hostname / IP */}
|
||||
<div style={{
|
||||
width: '120px',
|
||||
flexShrink: 0,
|
||||
minWidth: 0,
|
||||
}}>
|
||||
{item.hostname && (
|
||||
<div style={{
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '0.65rem',
|
||||
color: '#94A3B8',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}} title={item.hostname}>
|
||||
{item.hostname}
|
||||
</div>
|
||||
)}
|
||||
{item.ip_address && (
|
||||
<div style={{
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '0.62rem',
|
||||
color: '#10B981',
|
||||
marginTop: item.hostname ? '1px' : 0,
|
||||
}}>
|
||||
{item.ip_address}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Archer Template Selector expandable panel (Requirement 5.1) */}
|
||||
{isArcherItem && isTemplatePanelOpen && (
|
||||
<div style={{
|
||||
marginBottom: '0.5rem',
|
||||
marginLeft: selectionMode ? '1.625rem' : '0',
|
||||
padding: '0.75rem',
|
||||
background: 'linear-gradient(135deg, rgba(22, 33, 62, 0.6), rgba(15, 23, 42, 0.8))',
|
||||
border: '1px solid rgba(0, 212, 255, 0.15)',
|
||||
borderTop: 'none',
|
||||
borderRadius: '0 0 8px 8px',
|
||||
}}>
|
||||
<TemplateSelector />
|
||||
</div>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user