refactor(home): remove Knowledge Base panel from home page

The dedicated Knowledge Base page now provides the full library
experience. Remove the KB sidebar panel, viewer inline embed,
upload modal, and all supporting state/functions from App.js.

Home page layout adjusts from 3-column to 2-column (9+3 grid):
main CVE content expands to col-span-9, right panel unchanged.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-02 14:32:36 -06:00
parent 18ad31228e
commit 0d48c109b3

View File

@@ -6,8 +6,6 @@ import UserMenu from './components/UserMenu';
import UserManagement from './components/UserManagement'; import UserManagement from './components/UserManagement';
import AuditLog from './components/AuditLog'; import AuditLog from './components/AuditLog';
import NvdSyncModal from './components/NvdSyncModal'; import NvdSyncModal from './components/NvdSyncModal';
import KnowledgeBaseModal from './components/KnowledgeBaseModal';
import KnowledgeBaseViewer from './components/KnowledgeBaseViewer';
import NavDrawer from './components/NavDrawer'; import NavDrawer from './components/NavDrawer';
import CalendarWidget from './components/CalendarWidget'; import CalendarWidget from './components/CalendarWidget';
import VulnerabilityTriagePage from './components/pages/ReportingPage'; import VulnerabilityTriagePage from './components/pages/ReportingPage';
@@ -185,9 +183,6 @@ export default function App() {
const [showUserManagement, setShowUserManagement] = useState(false); const [showUserManagement, setShowUserManagement] = useState(false);
const [showAuditLog, setShowAuditLog] = useState(false); const [showAuditLog, setShowAuditLog] = useState(false);
const [showNvdSync, setShowNvdSync] = useState(false); const [showNvdSync, setShowNvdSync] = useState(false);
const [showKnowledgeBase, setShowKnowledgeBase] = useState(false);
const [knowledgeBaseArticles, setKnowledgeBaseArticles] = useState([]);
const [selectedKBArticle, setSelectedKBArticle] = useState(null);
const [newCVE, setNewCVE] = useState({ const [newCVE, setNewCVE] = useState({
cve_id: '', cve_id: '',
vendor: '', vendor: '',
@@ -311,19 +306,6 @@ export default function App() {
} }
}; };
const fetchKnowledgeBaseArticles = async () => {
try {
const response = await fetch(`${API_BASE}/knowledge-base`, {
credentials: 'include'
});
if (!response.ok) throw new Error('Failed to fetch knowledge base articles');
const data = await response.json();
setKnowledgeBaseArticles(data);
} catch (err) {
console.error('Error fetching knowledge base articles:', err);
}
};
const fetchJiraTickets = async () => { const fetchJiraTickets = async () => {
try { try {
const response = await fetch(`${API_BASE}/jira-tickets`, { const response = await fetch(`${API_BASE}/jira-tickets`, {
@@ -442,45 +424,6 @@ export default function App() {
alert(`Exporting ${selectedDocuments.length} documents for report attachment`); alert(`Exporting ${selectedDocuments.length} documents for report attachment`);
}; };
const handleViewKBArticle = async (articleId) => {
try {
const response = await fetch(`${API_BASE}/knowledge-base/${articleId}`, {
credentials: 'include'
});
if (!response.ok) throw new Error('Failed to fetch article');
const article = await response.json();
setSelectedKBArticle(article);
} catch (err) {
console.error('Error fetching knowledge base article:', err);
setError('Failed to load article');
}
};
const handleDownloadKBArticle = async (id, filename) => {
try {
const response = await fetch(`${API_BASE}/knowledge-base/${id}/download`, {
credentials: 'include'
});
if (!response.ok) throw new Error('Download failed');
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
document.body.removeChild(a);
} catch (err) {
console.error('Error downloading knowledge base article:', err);
setError('Failed to download document');
}
};
const handleAddCVE = async (e) => { const handleAddCVE = async (e) => {
e.preventDefault(); e.preventDefault();
try { try {
@@ -916,7 +859,6 @@ export default function App() {
fetchJiraTickets(); fetchJiraTickets();
fetchArcherTickets(); fetchArcherTickets();
fetchIvantiWorkflows(); fetchIvantiWorkflows();
fetchKnowledgeBaseArticles();
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [isAuthenticated]); }, [isAuthenticated]);
@@ -1063,14 +1005,6 @@ export default function App() {
<NvdSyncModal onClose={() => setShowNvdSync(false)} onSyncComplete={() => fetchCVEs()} /> <NvdSyncModal onClose={() => setShowNvdSync(false)} onSyncComplete={() => fetchCVEs()} />
)} )}
{/* Knowledge Base Modal */}
{showKnowledgeBase && (
<KnowledgeBaseModal
onClose={() => setShowKnowledgeBase(false)}
onUpdate={fetchKnowledgeBaseArticles}
/>
)}
{/* Add CVE Modal */} {/* Add CVE Modal */}
{showAddCVE && ( {showAddCVE && (
<div className="fixed inset-0 modal-overlay flex items-center justify-center z-50 p-4"> <div className="fixed inset-0 modal-overlay flex items-center justify-center z-50 p-4">
@@ -1661,90 +1595,11 @@ export default function App() {
</div> </div>
)} )}
{/* Three Column Layout - Home page only */} {/* Two Column Layout - Home page only */}
{currentPage === 'home' && <div className="grid grid-cols-12 gap-6"> {currentPage === 'home' && <div className="grid grid-cols-12 gap-6">
{/* LEFT PANEL - Wiki/Knowledge Base */}
<div className="col-span-12 lg:col-span-3 space-y-4">
<div style={{...STYLES.intelCard, padding: '1.5rem', borderLeft: '3px solid #10B981'}} className="rounded-lg">
<div className="flex items-center justify-between mb-4">
<h2 style={{ fontSize: '1.125rem', fontWeight: '600', color: '#10B981', marginBottom: '0', fontFamily: 'monospace', textTransform: 'uppercase', letterSpacing: '0.1em', textShadow: '0 0 12px rgba(16, 185, 129, 0.4)' }}>
Knowledge Base
</h2>
{(user?.role === 'admin' || user?.role === 'editor') && (
<button
onClick={() => setShowKnowledgeBase(true)}
className="intel-button intel-button-small"
style={{ fontSize: '0.75rem', padding: '0.375rem 0.75rem' }}
title="Manage Knowledge Base"
>
<Plus className="w-3 h-3" />
</button>
)}
</div>
{/* Knowledge Base Entries */}
<div className="space-y-3">
{knowledgeBaseArticles.length === 0 ? (
<div className="text-center py-8" style={{ color: '#64748B' }}>
<FileText className="w-12 h-12 mx-auto mb-2 opacity-50" />
<p className="text-sm">No documents yet</p>
{(user?.role === 'admin' || user?.role === 'editor') && (
<button
onClick={() => setShowKnowledgeBase(true)}
className="intel-button intel-button-small mt-3"
>
Add First Document
</button>
)}
</div>
) : (
knowledgeBaseArticles.slice(0, 5).map((article) => (
<div
key={article.id}
onClick={() => handleViewKBArticle(article.id)}
style={{ background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(51, 65, 85, 0.75) 100%)', border: '1px solid rgba(16, 185, 129, 0.25)', borderRadius: '0.375rem', padding: '0.75rem', cursor: 'pointer', transition: 'all 0.2s' }}
className="hover:border-intel-success"
>
<h3 className="text-white font-semibold text-sm mb-1 font-mono">{article.title}</h3>
{article.description && (
<p className="text-gray-400 text-xs mb-2 line-clamp-2">{article.description}</p>
)}
<div className="flex items-center justify-between">
<span className="text-xs text-intel-success font-mono">
{new Date(article.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
</span>
{article.category && article.category !== 'General' && (
<span className="text-xs px-2 py-0.5 rounded" style={{ background: 'rgba(16, 185, 129, 0.2)', color: '#10B981' }}>
{article.category}
</span>
)}
</div>
</div>
))
)}
{knowledgeBaseArticles.length > 5 && (
<button
onClick={() => setShowKnowledgeBase(true)}
className="text-xs text-center w-full py-2"
style={{ color: '#10B981' }}
>
View all {knowledgeBaseArticles.length} documents
</button>
)}
</div>
</div>
</div>
{/* CENTER PANEL - Main Content */} {/* CENTER PANEL - Main Content */}
<div className="col-span-12 lg:col-span-6 space-y-4"> <div className="col-span-12 lg:col-span-9 space-y-4">
{/* Knowledge Base Viewer */} <>
{selectedKBArticle ? (
<KnowledgeBaseViewer
article={selectedKBArticle}
onClose={() => setSelectedKBArticle(null)}
/>
) : (
<>
{/* Quick Check */} {/* Quick Check */}
<div style={{...STYLES.intelCard, padding: '1.5rem'}} className="rounded-lg"> <div style={{...STYLES.intelCard, padding: '1.5rem'}} className="rounded-lg">
<div className="scan-line"></div> <div className="scan-line"></div>
@@ -2216,7 +2071,6 @@ export default function App() {
</div> </div>
)} )}
</> </>
)}
</div> </div>
{/* End Center Panel */} {/* End Center Panel */}