feat(sidebar): add Techniques page to menu under ATT&CK group
Some checks failed
Aegis CI / lint-and-test (push) Has been cancelled

/techniques (technique browser with filters) was an orphaned route —
only reachable via 'Back to techniques' button or direct URL.
Now exposed in the sidebar as part of a new ATT&CK group:
  ATT&CK ▾
    Techniques       → /techniques
    Coverage Matrix  → /matrix
    Review Queue     → /techniques/review-queue (leads+admin only)

Child role filtering added to SidebarLink.
Review Queue badge moved to the ATT&CK group header.
This commit is contained in:
kitos
2026-05-29 12:45:59 +02:00
parent 416b31a5b6
commit 193c48d031

View File

@@ -16,6 +16,7 @@ import {
Crosshair, Crosshair,
Zap, Zap,
Grid3X3, Grid3X3,
List,
Gauge, Gauge,
ShieldCheck, ShieldCheck,
GitCompareArrows, GitCompareArrows,
@@ -37,8 +38,16 @@ interface NavItem {
const mainLinks: NavItem[] = [ const mainLinks: NavItem[] = [
{ to: "/dashboard", label: "Dashboard", icon: LayoutDashboard }, { to: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
{ to: "/executive-dashboard", label: "Executive Dashboard", icon: Gauge, roles: ["admin", "red_lead", "blue_lead", "viewer"] }, { to: "/executive-dashboard", label: "Executive Dashboard", icon: Gauge, roles: ["admin", "red_lead", "blue_lead", "viewer"] },
{ to: "/matrix", label: "ATT&CK Matrix", icon: Grid3X3 }, {
{ to: "/techniques/review-queue", label: "Review Queue", icon: ClipboardCheck, roles: ["admin", "red_lead", "blue_lead"] }, to: "/matrix",
label: "ATT&CK",
icon: Grid3X3,
children: [
{ to: "/techniques", label: "Techniques", icon: List },
{ to: "/matrix", label: "Coverage Matrix", icon: Grid3X3 },
{ to: "/techniques/review-queue", label: "Review Queue", icon: ClipboardCheck, roles: ["admin", "red_lead", "blue_lead"] },
],
},
{ {
to: "/tests", to: "/tests",
label: "Tests", label: "Tests",
@@ -66,8 +75,18 @@ const systemLinks: NavItem[] = [
function SidebarLink({ item, badge }: { item: NavItem; badge?: number }) { function SidebarLink({ item, badge }: { item: NavItem; badge?: number }) {
const [expanded, setExpanded] = useState(false); const [expanded, setExpanded] = useState(false);
const { user } = useAuth();
const role = user?.role ?? "";
const isAdmin = role === "admin";
const childCanSee = (child: NavItem) => {
if (!child.roles) return true;
if (isAdmin) return true;
return child.roles.includes(role);
};
if (item.children) { if (item.children) {
const visibleChildren = item.children.filter(childCanSee);
return ( return (
<div> <div>
<button <button
@@ -78,11 +97,18 @@ function SidebarLink({ item, badge }: { item: NavItem; badge?: number }) {
<item.icon className="h-5 w-5" /> <item.icon className="h-5 w-5" />
{item.label} {item.label}
</span> </span>
<ChevronDown className={`h-4 w-4 transition-transform ${expanded ? "rotate-180" : ""}`} /> <span className="flex items-center gap-1.5">
{badge !== undefined && badge > 0 && (
<span className="rounded-full bg-amber-500 px-1.5 py-0.5 text-[10px] font-bold text-white leading-none">
{badge}
</span>
)}
<ChevronDown className={`h-4 w-4 transition-transform ${expanded ? "rotate-180" : ""}`} />
</span>
</button> </button>
{expanded && ( {expanded && (
<div className="ml-4 mt-1 space-y-0.5 border-l border-gray-800 pl-3"> <div className="ml-4 mt-1 space-y-0.5 border-l border-gray-800 pl-3">
{item.children.map((child) => ( {visibleChildren.map((child) => (
<NavLink <NavLink
key={child.to + child.label} key={child.to + child.label}
to={child.to} to={child.to}
@@ -168,7 +194,7 @@ export default function Sidebar() {
<SidebarLink <SidebarLink
key={item.to + item.label} key={item.to + item.label}
item={item} item={item}
badge={item.to === "/techniques/review-queue" ? reviewCount : undefined} badge={item.label === "ATT&CK" ? reviewCount : undefined}
/> />
))} ))}