fix(frontend): sprint 5 post-code-review — dropdown close-on-outside + empty-state dropdown
- useEffect pointerdown + Escape listeners when dropdown open (NIT 1) - empty state now renders NewSimulationDropdown instead of plain Link (NIT 2) - 3 new Vitest: close-on-outside, close-on-Escape, empty-state has dropdown Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { useRef, useState } from 'react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { ChevronDown, Plus } from 'lucide-react';
|
||||
import { extractApiError } from '@/api/client';
|
||||
@@ -26,9 +26,27 @@ function NewSimulationDropdown({ engagementId }: { engagementId: number }): JSX.
|
||||
const { push } = useToast();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [showPicker, setShowPicker] = useState(false);
|
||||
const btnRef = useRef<HTMLDivElement>(null);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const createMutation = useCreateSimulation(engagementId);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const onPointerDown = (e: PointerEvent) => {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) {
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') setOpen(false);
|
||||
};
|
||||
document.addEventListener('pointerdown', onPointerDown);
|
||||
document.addEventListener('keydown', onKeyDown);
|
||||
return () => {
|
||||
document.removeEventListener('pointerdown', onPointerDown);
|
||||
document.removeEventListener('keydown', onKeyDown);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
const handleBlank = () => {
|
||||
setOpen(false);
|
||||
navigate(`/engagements/${engagementId}/simulations/new`);
|
||||
@@ -51,7 +69,7 @@ function NewSimulationDropdown({ engagementId }: { engagementId: number }): JSX.
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative" ref={btnRef}>
|
||||
<div className="relative" ref={ref}>
|
||||
<div className="inline-flex">
|
||||
<button
|
||||
type="button"
|
||||
@@ -137,13 +155,7 @@ export function SimulationList({ engagementId }: SimulationListProps): JSX.Eleme
|
||||
description="Create the first simulation to start tracking red team tests."
|
||||
action={
|
||||
canEditEngagements ? (
|
||||
<Link
|
||||
to={`/engagements/${engagementId}/simulations/new`}
|
||||
className="btn-primary"
|
||||
data-testid="new-simulation-btn"
|
||||
>
|
||||
New simulation
|
||||
</Link>
|
||||
<NewSimulationDropdown engagementId={engagementId} />
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user