Improve control view for mitigation
Signed-off-by: gearnode <bryan@frimin.fr>
This commit is contained in:
gearnode
@@ -36,6 +36,8 @@ import {
|
||||
Link2,
|
||||
Search,
|
||||
Link as LinkIcon,
|
||||
CheckSquare,
|
||||
ShieldCheck,
|
||||
} from "lucide-react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
@@ -445,6 +447,9 @@ function MitigationViewContent({
|
||||
const navigate = useNavigate();
|
||||
const environment = useRelayEnvironment();
|
||||
|
||||
// Add state for main content tabs
|
||||
const [mainContentTab, setMainContentTab] = useState<string>("tasks");
|
||||
|
||||
// Add URLSearchParams handling for task persistence
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const taskIdFromUrl = searchParams.get("taskId");
|
||||
@@ -883,7 +888,6 @@ function MitigationViewContent({
|
||||
setLinkEvidenceName("");
|
||||
setLinkEvidenceUrl("");
|
||||
setLinkEvidenceDescription("");
|
||||
setActiveTab("file");
|
||||
};
|
||||
|
||||
const handleFileSelected = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
@@ -1662,7 +1666,36 @@ function MitigationViewContent({
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Control Mapping Section */}
|
||||
{/* Main Content Tabs */}
|
||||
<Tabs
|
||||
defaultValue="tasks"
|
||||
value={mainContentTab}
|
||||
onValueChange={setMainContentTab}
|
||||
>
|
||||
<TabsList className="mb-4">
|
||||
<TabsTrigger value="tasks" className="flex items-center gap-2">
|
||||
<CheckSquare className="w-4 h-4" />
|
||||
Tasks
|
||||
{tasks.length > 0 && (
|
||||
<span className="ml-1.5 bg-blue-100 text-blue-800 rounded-full text-xs px-2 py-0.5">
|
||||
{tasks.length}
|
||||
</span>
|
||||
)}
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="controls" className="flex items-center gap-2">
|
||||
<ShieldCheck className="w-4 h-4" />
|
||||
Controls
|
||||
{linkedControlsData?.mitigation?.controls?.edges &&
|
||||
linkedControlsData.mitigation.controls.edges.length > 0 && (
|
||||
<span className="ml-1.5 bg-blue-100 text-blue-800 rounded-full text-xs px-2 py-0.5">
|
||||
{linkedControlsData.mitigation.controls.edges.length}
|
||||
</span>
|
||||
)}
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* Controls Tab Content */}
|
||||
<TabsContent value="controls">
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-xl font-semibold">Controls</h2>
|
||||
@@ -1738,8 +1771,8 @@ function MitigationViewContent({
|
||||
<div className="grid grid-cols-1 gap-2 max-h-[50vh] overflow-y-auto pr-2">
|
||||
{filteredControls().length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
No controls found. Try adjusting your search or select a
|
||||
different framework.
|
||||
No controls found. Try adjusting your search or select
|
||||
a different framework.
|
||||
</div>
|
||||
) : (
|
||||
filteredControls().map((control) => {
|
||||
@@ -1750,7 +1783,9 @@ function MitigationViewContent({
|
||||
className="border overflow-hidden"
|
||||
>
|
||||
<div
|
||||
className={`p-4 ${isLinked ? "bg-blue-50" : ""}`}
|
||||
className={`p-4 ${
|
||||
isLinked ? "bg-blue-50" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
@@ -1767,7 +1802,9 @@ function MitigationViewContent({
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<h3 className="font-medium">{control.name}</h3>
|
||||
<h3 className="font-medium">
|
||||
{control.name}
|
||||
</h3>
|
||||
{control.description && (
|
||||
<p className="text-sm text-gray-500 mt-1 line-clamp-2">
|
||||
{control.description}
|
||||
@@ -1834,22 +1871,36 @@ function MitigationViewContent({
|
||||
<CardContent className="p-4">
|
||||
{linkedControlsData?.mitigation?.controls?.edges &&
|
||||
linkedControlsData.mitigation.controls.edges.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b">
|
||||
<th className="text-left font-medium text-sm py-2 px-4">
|
||||
ID
|
||||
</th>
|
||||
<th className="text-left font-medium text-sm py-2 px-4">
|
||||
Control Name
|
||||
</th>
|
||||
<th className="text-right font-medium text-sm py-2 px-4">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{getLinkedControls().map((control: ControlNode) => (
|
||||
<Card key={control.id} className="border overflow-hidden">
|
||||
<div className="p-3">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<div className="font-mono text-sm px-1 py-0.5 rounded-sm bg-lime-100 border border-lime-200 text-lime-800 font-bold">
|
||||
<tr
|
||||
key={control.id}
|
||||
className="border-b hover:bg-gray-50"
|
||||
>
|
||||
<td className="py-3 px-4">
|
||||
<div className="font-mono text-sm px-1.5 py-0.5 rounded-sm bg-lime-100 border border-lime-200 text-lime-800 font-bold inline-block">
|
||||
{control.referenceId}
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="font-medium text-sm">{control.name}</h3>
|
||||
{control.description && (
|
||||
<p className="text-xs text-gray-500 mt-1 line-clamp-2">
|
||||
{control.description}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex justify-end mt-2">
|
||||
</td>
|
||||
<td className="py-3 px-4 font-medium text-sm">
|
||||
{control.name}
|
||||
</td>
|
||||
<td className="py-3 px-4 text-right">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@@ -1859,21 +1910,25 @@ function MitigationViewContent({
|
||||
>
|
||||
Unlink
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
No controls linked to this mitigation yet. Click "Map to
|
||||
Controls" to link controls.
|
||||
No controls linked to this mitigation yet. Click "Map
|
||||
to Controls" to link controls.
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
{/* Tasks Tab Content */}
|
||||
<TabsContent value="tasks">
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-xl font-semibold">Tasks</h2>
|
||||
@@ -1882,7 +1937,10 @@ function MitigationViewContent({
|
||||
<FileIcon className="w-4 h-4 mr-2 text-blue-500" />
|
||||
<span>Drag & drop files onto tasks to add evidence</span>
|
||||
</div>
|
||||
<Dialog open={isCreateTaskOpen} onOpenChange={setIsCreateTaskOpen}>
|
||||
<Dialog
|
||||
open={isCreateTaskOpen}
|
||||
onOpenChange={setIsCreateTaskOpen}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button size="sm" className="flex items-center gap-1">
|
||||
<Plus className="w-4 h-4" />
|
||||
@@ -1899,80 +1957,57 @@ function MitigationViewContent({
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="name" className="text-sm font-medium">
|
||||
Task Name
|
||||
</label>
|
||||
<Label htmlFor="task-name">Task Name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
id="task-name"
|
||||
value={newTaskName}
|
||||
onChange={(e) => setNewTaskName(e.target.value)}
|
||||
placeholder="Enter task name"
|
||||
placeholder="What needs to be done?"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label
|
||||
htmlFor="description"
|
||||
className="text-sm font-medium"
|
||||
>
|
||||
<Label htmlFor="task-description">
|
||||
Description (optional)
|
||||
</label>
|
||||
</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
id="task-description"
|
||||
value={newTaskDescription}
|
||||
onChange={(e) => setNewTaskDescription(e.target.value)}
|
||||
placeholder="Enter task description"
|
||||
onChange={(e) =>
|
||||
setNewTaskDescription(e.target.value)
|
||||
}
|
||||
placeholder="Add more details about the task"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label
|
||||
htmlFor="timeEstimate"
|
||||
className="text-sm font-medium"
|
||||
>
|
||||
Time Estimate (optional)
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="days"
|
||||
className="text-xs text-gray-500 block mb-1"
|
||||
>
|
||||
Days
|
||||
</label>
|
||||
<Label>Time Estimate (optional)</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-full">
|
||||
<Input
|
||||
id="days"
|
||||
type="number"
|
||||
min="0"
|
||||
value={timeEstimateDays}
|
||||
onChange={(e) => setTimeEstimateDays(e.target.value)}
|
||||
placeholder="0"
|
||||
onChange={(e) =>
|
||||
setTimeEstimateDays(e.target.value)
|
||||
}
|
||||
placeholder="Days"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">Days</p>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="hours"
|
||||
className="text-xs text-gray-500 block mb-1"
|
||||
>
|
||||
Hours
|
||||
</label>
|
||||
<div className="w-full">
|
||||
<Input
|
||||
id="hours"
|
||||
type="number"
|
||||
min="0"
|
||||
max="23"
|
||||
value={timeEstimateHours}
|
||||
onChange={(e) => setTimeEstimateHours(e.target.value)}
|
||||
placeholder="0"
|
||||
onChange={(e) =>
|
||||
setTimeEstimateHours(e.target.value)
|
||||
}
|
||||
placeholder="Hours"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">Hours</p>
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="minutes"
|
||||
className="text-xs text-gray-500 block mb-1"
|
||||
>
|
||||
Minutes
|
||||
</label>
|
||||
<div className="w-full">
|
||||
<Input
|
||||
id="minutes"
|
||||
type="number"
|
||||
min="0"
|
||||
max="59"
|
||||
@@ -1980,8 +2015,11 @@ function MitigationViewContent({
|
||||
onChange={(e) =>
|
||||
setTimeEstimateMinutes(e.target.value)
|
||||
}
|
||||
placeholder="0"
|
||||
placeholder="Minutes"
|
||||
/>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
Minutes
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -2094,7 +2132,9 @@ function MitigationViewContent({
|
||||
: "text-blue-500"
|
||||
}`}
|
||||
>
|
||||
<span className="inline-block w-4 h-4 mr-1">⏱️</span>
|
||||
<span className="inline-block w-4 h-4 mr-1">
|
||||
⏱️
|
||||
</span>
|
||||
<span>{formatDuration(task.timeEstimate)}</span>
|
||||
</p>
|
||||
)}
|
||||
@@ -2301,15 +2341,19 @@ function MitigationViewContent({
|
||||
</div>
|
||||
|
||||
{/* Evidence section */}
|
||||
{task?.evidences?.edges && task.evidences.edges.length > 0 && (
|
||||
{task?.evidences?.edges &&
|
||||
task.evidences.edges.length > 0 && (
|
||||
<>
|
||||
<div
|
||||
className="bg-gray-50 border-t border-gray-200 px-4 py-2.5 flex justify-between items-center cursor-pointer hover:bg-gray-100 transition-colors"
|
||||
onClick={() => task.id && toggleEvidenceList(task.id)}
|
||||
className="flex items-center justify-between px-4 py-2 border-t border-gray-200 bg-gray-50 cursor-pointer hover:bg-gray-100"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation(); // Prevent task selection
|
||||
if (task.id) toggleEvidenceList(task.id);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<FileIcon className="w-4 h-4 text-blue-500" />
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
<FileText className="w-4 h-4 text-blue-500" />
|
||||
<span className="text-xs text-gray-600">
|
||||
{task.evidences.edges.length}{" "}
|
||||
{task.evidences.edges.length === 1
|
||||
? "Evidence"
|
||||
@@ -2337,7 +2381,10 @@ function MitigationViewContent({
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="bg-white p-2 rounded-md border border-gray-200">
|
||||
{getFileIcon(evidence.mimeType, evidence.type)}
|
||||
{getFileIcon(
|
||||
evidence.mimeType,
|
||||
evidence.type
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-800">
|
||||
@@ -2359,18 +2406,23 @@ function MitigationViewContent({
|
||||
<span>•</span>
|
||||
</>
|
||||
) : null}
|
||||
<span>{formatDate(evidence.createdAt)}</span>
|
||||
<span>
|
||||
{formatDate(evidence.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{evidence.type === "FILE" ? (
|
||||
<>
|
||||
{evidence.mimeType.startsWith("image/") ? (
|
||||
{evidence.mimeType.startsWith(
|
||||
"image/"
|
||||
) ? (
|
||||
<button
|
||||
onClick={() =>
|
||||
handlePreviewEvidence(evidence)
|
||||
}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handlePreviewEvidence(evidence);
|
||||
}}
|
||||
className="p-1.5 rounded-full hover:bg-white hover:shadow-sm transition-all"
|
||||
title="Preview Image"
|
||||
>
|
||||
@@ -2379,7 +2431,7 @@ function MitigationViewContent({
|
||||
) : (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handlePreviewEvidence(evidence);
|
||||
}}
|
||||
className="p-1.5 rounded-full hover:bg-white hover:shadow-sm transition-all"
|
||||
@@ -2392,7 +2444,7 @@ function MitigationViewContent({
|
||||
) : evidence.url ? (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (evidence.url) {
|
||||
window.open(evidence.url, "_blank");
|
||||
}
|
||||
@@ -2405,8 +2457,8 @@ function MitigationViewContent({
|
||||
) : null}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
if (task?.id) {
|
||||
e.stopPropagation();
|
||||
if (task.id) {
|
||||
handleDeleteEvidence(
|
||||
evidence.id,
|
||||
evidence.filename,
|
||||
@@ -2431,12 +2483,14 @@ function MitigationViewContent({
|
||||
))}
|
||||
|
||||
{tasks.length === 0 && (
|
||||
<div className="text-center py-8 text-gray-500">
|
||||
<div className="text-center py-12 bg-gray-50 rounded-lg border border-gray-200">
|
||||
<p>No tasks yet. Click "Add Task" to create one.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
{/* Right task panel */}
|
||||
<Sheet open={isTaskPanelOpen} onOpenChange={handleCloseTaskPanel}>
|
||||
|
||||
Reference in New Issue
Block a user