kitos/Aegis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(campaigns): modification request UI on campaign detail page

Browse Source
This commit is contained in:
kitos
2026-07-03 16:10:41 +02:00
parent b106780102
commit 952b6f27d7
2 changed files with 242 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/CampaignDetailPage.tsx
+106
View File
@@ -27,6 +27,9 @@ import {
submitCampaignForApproval,
approveCampaign,
rejectCampaign,
listCampaignModificationRequests,
approveModificationRequest,
rejectModificationRequest,
type Campaign,
type CampaignHistoryEntry,
} from "../api/campaigns";
@@ -35,6 +38,7 @@ import CampaignTimeline from "../components/CampaignTimeline";
import JiraLinkPanel from "../components/JiraLinkPanel";
import CampaignTimingPanel from "../components/CampaignTimingPanel";
import AddTestToCampaignModal from "../components/AddTestToCampaignModal";
import RequestCampaignModificationModal from "../components/RequestCampaignModificationModal";
const statusColors: Record<string, string> = {
draft: "bg-gray-800/50 text-gray-400 border-gray-600/30",
@@ -68,6 +72,7 @@ export default function CampaignDetailPage() {
const [toast, setToast] = useState<{ message: string; type: "success" | "error" } | null>(null);
const [showAddTestModal, setShowAddTestModal] = useState(false);
const [showModRequestModal, setShowModRequestModal] = useState(false);
// 0 = hidden, 1 = first confirmation, 2 = ask about tests
const [deleteStep, setDeleteStep] = useState<0 | 1 | 2>(0);
const [approveModalOpen, setApproveModalOpen] = useState(false);
@@ -172,6 +177,32 @@ export default function CampaignDetailPage() {
enabled: !!campaignId && !!campaign?.is_recurring,
});
const { data: modRequests = [] } = useQuery({
queryKey: ["campaign-modification-requests", campaignId],
queryFn: () => listCampaignModificationRequests(campaignId!),
enabled: !!campaignId,
});
const approveModRequestMutation = useMutation({
mutationFn: (requestId: string) => approveModificationRequest(requestId),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["campaign", campaignId] });
queryClient.invalidateQueries({ queryKey: ["campaign-modification-requests", campaignId] });
showToast("Modification approved and applied", "success");
},
onError: (err: Error) => showToast(err.message, "error"),
});
const rejectModRequestMutation = useMutation({
mutationFn: ({ requestId, notes }: { requestId: string; notes: string }) =>
rejectModificationRequest(requestId, notes),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["campaign-modification-requests", campaignId] });
showToast("Modification rejected", "success");
},
onError: (err: Error) => showToast(err.message, "error"),
});
const [schedRecurring, setSchedRecurring] = useState(false);
const [schedPattern, setSchedPattern] = useState("monthly");
const [schedNextRun, setSchedNextRun] = useState("");
@@ -612,6 +643,14 @@ export default function CampaignDetailPage() {
Add Test
</button>
)}
{canManage && campaign.status === "active" && (
<button
onClick={() => setShowModRequestModal(true)}
className="flex items-center gap-1.5 rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-1.5 text-sm font-medium text-amber-400 hover:bg-amber-500/20 transition-colors"
>
Request Modification
</button>
)}
</div>
{campaign.tests.length > 0 ? (
@@ -705,6 +744,64 @@ export default function CampaignDetailPage() {
)}
</div>
{/* Modification Requests */}
{modRequests.length > 0 && (
<div className="rounded-xl border border-gray-800 bg-gray-900 p-6">
<h2 className="mb-4 text-lg font-semibold text-white">Modification Requests</h2>
<div className="space-y-3">
{modRequests.map((r) => (
<div key={r.id} className="rounded-lg border border-gray-800 p-4">
<div className="flex items-start justify-between gap-4">
<div>
<p className="text-sm text-gray-200">
<span className="font-medium capitalize">{r.action.replace("_", " ")}</span>
{" — "}
{r.test_name || r.test_id || "deleted test"}
</p>
<p className="mt-1 text-xs text-gray-400">{r.justification}</p>
{r.review_notes && (
<p className="mt-1 text-xs text-amber-400">Manager notes: {r.review_notes}</p>
)}
</div>
<span
className={`shrink-0 rounded-full border px-2 py-0.5 text-[10px] font-medium ${
r.status === "pending"
? "border-amber-500/30 bg-amber-900/30 text-amber-400"
: r.status === "approved"
? "border-green-500/30 bg-green-900/30 text-green-400"
: "border-red-500/30 bg-red-900/30 text-red-400"
}`}
>
{r.status}
</span>
</div>
{isManager && r.status === "pending" && (
<div className="mt-3 flex gap-2">
<button
onClick={() => approveModRequestMutation.mutate(r.id)}
className="rounded-lg bg-green-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-green-500 transition-colors"
>
Approve
</button>
<button
onClick={() => {
const notes = window.prompt("Reason for rejecting this request:");
if (notes && notes.trim()) {
rejectModRequestMutation.mutate({ requestId: r.id, notes: notes.trim() });
}
}}
className="rounded-lg border border-red-500/30 bg-red-900/20 px-3 py-1.5 text-xs font-medium text-red-400 hover:bg-red-900/40 transition-colors"
>
Reject
</button>
</div>
)}
</div>
))}
</div>
</div>
)}
{/* Jira */}
<JiraLinkPanel entityType="campaign" entityId={campaignId!} readOnly label={campaign.name} />
@@ -717,6 +814,15 @@ export default function CampaignDetailPage() {
onSuccess={() => showToast("Test added to campaign", "success")}
/>
{/* Request Modification Modal */}
<RequestCampaignModificationModal
campaignId={campaignId!}
tests={campaign.tests}
open={showModRequestModal}
onClose={() => setShowModRequestModal(false)}
onSuccess={() => showToast("Modification request submitted", "success")}
/>
{/* Approve modal */}
{approveModalOpen && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm">